| | |
| | | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { |
| | | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; |
| | | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); |
| | | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; |
| | | return c > 3 && r && Object.defineProperty(target, key, r), r; |
| | | }; |
| | | import { SuperComponent, wxComponent } from '../common/src/index'; |
| | | import config from '../common/config'; |
| | | import { MessageType } from './message.interface'; |
| | | import props from './props'; |
| | | import { unitConvert } from '../common/utils'; |
| | | const SHOW_DURATION = 400; |
| | | const { prefix } = config; |
| | | const name = `${prefix}-message`; |
| | | let Message = class Message extends SuperComponent { |
| | | constructor() { |
| | | super(...arguments); |
| | | this.options = { |
| | | multipleSlots: true, |
| | | }; |
| | | this.properties = Object.assign({}, props); |
| | | this.data = { |
| | | prefix, |
| | | classPrefix: name, |
| | | messageList: [], |
| | | }; |
| | | this.index = 0; |
| | | this.instances = []; |
| | | this.gap = 12; |
| | | this.observers = { |
| | | visible(value) { |
| | | if (value) { |
| | | this.setMessage(this.properties, this.properties.theme); |
| | | } |
| | | else { |
| | | this.setData({ |
| | | messageList: [], |
| | | }); |
| | | } |
| | | }, |
| | | }; |
| | | this.pageLifetimes = { |
| | | show() { |
| | | this.hideAll(); |
| | | }, |
| | | }; |
| | | this.lifetimes = { |
| | | ready() { |
| | | this.memoInitialData(); |
| | | }, |
| | | }; |
| | | } |
| | | memoInitialData() { |
| | | this.initialData = Object.assign(Object.assign({}, this.properties), this.data); |
| | | } |
| | | setMessage(msg, theme = MessageType.info) { |
| | | let id = `${name}_${this.index}`; |
| | | if (msg.single) { |
| | | id = name; |
| | | } |
| | | this.gap = unitConvert(msg.gap || this.gap); |
| | | const msgObj = Object.assign(Object.assign({}, msg), { theme, |
| | | id, gap: this.gap }); |
| | | const instanceIndex = this.instances.findIndex((x) => x.id === id); |
| | | if (instanceIndex < 0) { |
| | | this.addMessage(msgObj); |
| | | } |
| | | else { |
| | | const instance = this.instances[instanceIndex]; |
| | | const offsetHeight = this.getOffsetHeight(instanceIndex); |
| | | instance.resetData(() => { |
| | | instance.setData(msgObj, instance.show.bind(instance, offsetHeight)); |
| | | instance.onHide = () => { |
| | | this.close(id); |
| | | }; |
| | | }); |
| | | } |
| | | } |
| | | addMessage(msgObj) { |
| | | const list = [...this.data.messageList, { id: msgObj.id }]; |
| | | this.setData({ |
| | | messageList: list, |
| | | }, () => { |
| | | const offsetHeight = this.getOffsetHeight(); |
| | | const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight); |
| | | if (this.instances) { |
| | | this.instances.push(instance); |
| | | this.index += 1; |
| | | } |
| | | }); |
| | | } |
| | | getOffsetHeight(index = -1) { |
| | | let offsetHeight = 0; |
| | | let len = index; |
| | | if (len === -1 || len > this.instances.length) { |
| | | len = this.instances.length; |
| | | } |
| | | for (let i = 0; i < len; i += 1) { |
| | | const instance = this.instances[i]; |
| | | offsetHeight += instance.data.height + instance.data.gap; |
| | | } |
| | | return offsetHeight; |
| | | } |
| | | showMessageItem(options, id, offsetHeight) { |
| | | const instance = this.selectComponent(`#${id}`); |
| | | if (instance) { |
| | | instance.resetData(() => { |
| | | instance.setData(options, instance.show.bind(instance, offsetHeight)); |
| | | instance.onHide = () => { |
| | | this.close(id); |
| | | }; |
| | | }); |
| | | return instance; |
| | | } |
| | | console.error('未找到组件,请确认 selector && context 是否正确'); |
| | | } |
| | | close(id) { |
| | | setTimeout(() => { |
| | | this.removeMsg(id); |
| | | }, SHOW_DURATION); |
| | | this.removeInstance(id); |
| | | } |
| | | hide(id) { |
| | | if (!id) { |
| | | this.hideAll(); |
| | | } |
| | | const instance = this.instances.find((x) => x.id === id); |
| | | if (instance) { |
| | | instance.hide(); |
| | | } |
| | | } |
| | | hideAll() { |
| | | for (let i = 0; i < this.instances.length;) { |
| | | const instance = this.instances[i]; |
| | | instance.hide(); |
| | | } |
| | | } |
| | | removeInstance(id) { |
| | | const index = this.instances.findIndex((x) => x.id === id); |
| | | if (index < 0) |
| | | return; |
| | | const instance = this.instances[index]; |
| | | const removedHeight = instance.data.height; |
| | | this.instances.splice(index, 1); |
| | | for (let i = index; i < this.instances.length; i += 1) { |
| | | const instance = this.instances[i]; |
| | | instance.setData({ |
| | | wrapTop: instance.data.wrapTop - removedHeight - instance.data.gap, |
| | | }); |
| | | } |
| | | } |
| | | removeMsg(id) { |
| | | const msgIndex = this.data.messageList.findIndex((x) => x.id === id); |
| | | if (msgIndex > -1) { |
| | | this.data.messageList.splice(msgIndex, 1); |
| | | this.setData({ |
| | | messageList: this.data.messageList, |
| | | }); |
| | | } |
| | | } |
| | | handleClose() { |
| | | this.triggerEvent('close-btn-click'); |
| | | } |
| | | handleLinkClick() { |
| | | this.triggerEvent('link-click'); |
| | | } |
| | | handleDurationEnd() { |
| | | this.triggerEvent('duration-end'); |
| | | } |
| | | }; |
| | | Message = __decorate([ |
| | | wxComponent() |
| | | ], Message); |
| | | export default Message; |
| | | import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import{MessageType}from"./message.interface";import props from"./props";import{unitConvert}from"../common/utils";const SHOW_DURATION=400,{prefix:prefix}=config,name=`${prefix}-message`;let Message=class extends SuperComponent{constructor(){super(...arguments),this.options={multipleSlots:!0},this.properties=Object.assign({},props),this.data={prefix:prefix,classPrefix:name,messageList:[]},this.index=0,this.instances=[],this.gap=12,this.observers={visible(s){s?this.setMessage(this.properties,this.properties.theme):this.setData({messageList:[]})}},this.pageLifetimes={show(){this.hideAll()}},this.lifetimes={ready(){this.memoInitialData()}}}memoInitialData(){this.initialData=Object.assign(Object.assign({},this.properties),this.data)}setMessage(s,e=MessageType.info){let t=`${name}_${this.index}`;s.single&&(t=name),this.gap=unitConvert(s.gap||this.gap);const i=Object.assign(Object.assign({},s),{theme:e,id:t,gap:this.gap}),n=this.instances.findIndex(s=>s.id===t);if(n<0)this.addMessage(i);else{const s=this.instances[n],e=this.getOffsetHeight(n);s.resetData(()=>{s.setData(i,s.show.bind(s,e)),s.onHide=()=>{this.close(t)}})}}addMessage(s){const e=[...this.data.messageList,{id:s.id}];this.setData({messageList:e},()=>{const e=this.getOffsetHeight(),t=this.showMessageItem(s,s.id,e);this.instances&&(this.instances.push(t),this.index+=1)})}getOffsetHeight(s=-1){let e=0,t=s;(-1===t||t>this.instances.length)&&(t=this.instances.length);for(let s=0;s<t;s+=1){const t=this.instances[s];e+=t.data.height+t.data.gap}return e}showMessageItem(s,e,t){const i=this.selectComponent(`#${e}`);if(i)return i.resetData(()=>{i.setData(s,i.show.bind(i,t)),i.onHide=()=>{this.close(e)}}),i;console.error("未找到组件,请确认 selector && context 是否正确")}close(s){setTimeout(()=>{this.removeMsg(s)},400),this.removeInstance(s)}hide(s){s||this.hideAll();const e=this.instances.find(e=>e.id===s);e&&e.hide()}hideAll(){for(let s=0;s<this.instances.length;){this.instances[s].hide()}}removeInstance(s){const e=this.instances.findIndex(e=>e.id===s);if(e<0)return;const t=this.instances[e].data.height;this.instances.splice(e,1);for(let s=e;s<this.instances.length;s+=1){const e=this.instances[s];e.setData({wrapTop:e.data.wrapTop-t-e.data.gap})}}removeMsg(s){const e=this.data.messageList.findIndex(e=>e.id===s);e>-1&&(this.data.messageList.splice(e,1),this.setData({messageList:this.data.messageList}))}handleClose(){this.triggerEvent("close-btn-click")}handleLinkClick(){this.triggerEvent("link-click")}handleDurationEnd(){this.triggerEvent("duration-end")}};Message=__decorate([wxComponent()],Message);export default Message; |