| | |
| | | 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 props from '../message/props'; |
| | | import { getRect, unitConvert, calcIcon, isObject } from '../common/utils'; |
| | | const { prefix } = config; |
| | | const name = `${prefix}-message`; |
| | | const SHOW_DURATION = 500; |
| | | const THEME_ICON = { |
| | | info: 'info-circle-filled', |
| | | success: 'check-circle-filled', |
| | | warning: 'info-circle-filled', |
| | | error: 'error-circle-filled', |
| | | }; |
| | | let Message = class Message extends SuperComponent { |
| | | constructor() { |
| | | super(...arguments); |
| | | this.externalClasses = [ |
| | | `${prefix}-class`, |
| | | `${prefix}-class-content`, |
| | | `${prefix}-class-icon`, |
| | | `${prefix}-class-link`, |
| | | `${prefix}-class-close-btn`, |
| | | ]; |
| | | this.options = { |
| | | multipleSlots: true, |
| | | }; |
| | | this.properties = Object.assign({}, props); |
| | | this.data = { |
| | | prefix, |
| | | classPrefix: name, |
| | | loop: -1, |
| | | animation: [], |
| | | showAnimation: [], |
| | | wrapTop: -999, |
| | | fadeClass: '', |
| | | }; |
| | | this.closeTimeoutContext = 0; |
| | | this.nextAnimationContext = 0; |
| | | this.resetAnimation = wx.createAnimation({ |
| | | duration: 0, |
| | | timingFunction: 'linear', |
| | | }); |
| | | this.observers = { |
| | | marquee(val) { |
| | | if (JSON.stringify(val) === '{}' || JSON.stringify(val) === 'true') { |
| | | this.setData({ |
| | | marquee: { |
| | | speed: 50, |
| | | loop: -1, |
| | | delay: 0, |
| | | }, |
| | | }); |
| | | } |
| | | }, |
| | | 'icon, theme'(icon, theme) { |
| | | this.setData({ |
| | | _icon: calcIcon(icon, THEME_ICON[theme]), |
| | | }); |
| | | }, |
| | | link(v) { |
| | | const _link = isObject(v) ? Object.assign({}, v) : { content: v }; |
| | | this.setData({ _link }); |
| | | }, |
| | | closeBtn(v) { |
| | | this.setData({ |
| | | _closeBtn: calcIcon(v, 'close'), |
| | | }); |
| | | }, |
| | | }; |
| | | this.lifetimes = { |
| | | ready() { |
| | | this.memoInitialData(); |
| | | }, |
| | | detached() { |
| | | this.clearMessageAnimation(); |
| | | }, |
| | | }; |
| | | } |
| | | memoInitialData() { |
| | | this.initialData = Object.assign(Object.assign({}, this.properties), this.data); |
| | | } |
| | | resetData(cb) { |
| | | this.setData(Object.assign({}, this.initialData), cb); |
| | | } |
| | | checkAnimation() { |
| | | const { marquee } = this.properties; |
| | | if (!marquee || marquee.loop === 0) { |
| | | return; |
| | | } |
| | | const speeding = marquee.speed; |
| | | if (this.data.loop > 0) { |
| | | this.data.loop -= 1; |
| | | } |
| | | else if (this.data.loop === 0) { |
| | | this.setData({ animation: this.resetAnimation.translateX(0).step().export() }); |
| | | return; |
| | | } |
| | | if (this.nextAnimationContext) { |
| | | this.clearMessageAnimation(); |
| | | } |
| | | const warpID = `#${name}__text-wrap`; |
| | | const nodeID = `#${name}__text`; |
| | | Promise.all([getRect(this, nodeID), getRect(this, warpID)]).then(([nodeRect, wrapRect]) => { |
| | | this.setData({ |
| | | animation: this.resetAnimation.translateX(wrapRect.width).step().export(), |
| | | }, () => { |
| | | const durationTime = ((nodeRect.width + wrapRect.width) / speeding) * 1000; |
| | | const nextAnimation = wx |
| | | .createAnimation({ |
| | | duration: durationTime, |
| | | }) |
| | | .translateX(-nodeRect.width) |
| | | .step() |
| | | .export(); |
| | | setTimeout(() => { |
| | | this.nextAnimationContext = setTimeout(this.checkAnimation.bind(this), durationTime); |
| | | this.setData({ animation: nextAnimation }); |
| | | }, 20); |
| | | }); |
| | | }); |
| | | } |
| | | clearMessageAnimation() { |
| | | clearTimeout(this.nextAnimationContext); |
| | | this.nextAnimationContext = 0; |
| | | } |
| | | show(offsetHeight = 0) { |
| | | const { duration, marquee, offset, id } = this.properties; |
| | | this.setData({ |
| | | visible: true, |
| | | loop: marquee.loop || this.data.loop, |
| | | fadeClass: `${name}__fade`, |
| | | wrapTop: unitConvert(offset[0]) + offsetHeight, |
| | | }); |
| | | this.reset(); |
| | | this.checkAnimation(); |
| | | if (duration && duration > 0) { |
| | | this.closeTimeoutContext = setTimeout(() => { |
| | | this.hide(); |
| | | this.triggerEvent('duration-end', { self: this }); |
| | | }, duration); |
| | | } |
| | | const wrapID = id ? `#${id}` : `#${name}`; |
| | | getRect(this, wrapID).then((wrapRect) => { |
| | | this.setData({ height: wrapRect.height }, () => { |
| | | this.setData({ |
| | | fadeClass: ``, |
| | | }); |
| | | }); |
| | | }); |
| | | } |
| | | hide() { |
| | | this.reset(); |
| | | this.setData({ |
| | | fadeClass: `${name}__fade`, |
| | | }); |
| | | setTimeout(() => { |
| | | this.setData({ visible: false, animation: [] }); |
| | | }, SHOW_DURATION); |
| | | if (typeof this.onHide === 'function') { |
| | | this.onHide(); |
| | | } |
| | | } |
| | | reset() { |
| | | if (this.nextAnimationContext) { |
| | | this.clearMessageAnimation(); |
| | | } |
| | | clearTimeout(this.closeTimeoutContext); |
| | | this.closeTimeoutContext = 0; |
| | | } |
| | | handleClose() { |
| | | this.hide(); |
| | | this.triggerEvent('close-btn-click'); |
| | | } |
| | | handleLinkClick() { |
| | | this.triggerEvent('link-click'); |
| | | } |
| | | }; |
| | | Message = __decorate([ |
| | | wxComponent() |
| | | ], Message); |
| | | export default Message; |
| | | import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"../message/props";import{getRect,unitConvert,calcIcon}from"../common/utils";import{isObject}from"../common/validator";const{prefix:prefix}=config,name=`${prefix}-message`,SHOW_DURATION=500,THEME_ICON={info:"info-circle-filled",success:"check-circle-filled",warning:"error-circle-filled",error:"error-circle-filled"};let Message=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-content`,`${prefix}-class-icon`,`${prefix}-class-link`,`${prefix}-class-close-btn`],this.options={multipleSlots:!0},this.properties=Object.assign({},props),this.data={prefix:prefix,classPrefix:name,loop:-1,animation:[],showAnimation:[],wrapTop:-999,fadeClass:""},this.closeTimeoutContext=0,this.nextAnimationContext=0,this.resetAnimation=wx.createAnimation({duration:0,timingFunction:"linear"}),this.observers={marquee(t){"{}"!==JSON.stringify(t)&&"true"!==JSON.stringify(t)||this.setData({marquee:{speed:50,loop:-1,delay:0}})},"icon, theme"(t,e){this.setData({_icon:calcIcon(t,THEME_ICON[e])})},link(t){const e=isObject(t)?Object.assign({},t):{content:t};this.setData({_link:e})},closeBtn(t){this.setData({_closeBtn:calcIcon(t,"close")})}},this.lifetimes={ready(){this.memoInitialData()},detached(){this.clearMessageAnimation()}}}memoInitialData(){this.initialData=Object.assign(Object.assign({},this.properties),this.data)}resetData(t){this.setData(Object.assign({},this.initialData),t)}checkAnimation(){const{marquee:t}=this.properties;if(!t||0===t.loop)return;const e=t.speed;if(this.data.loop>0)this.data.loop-=1;else if(0===this.data.loop)return void this.setData({animation:this.resetAnimation.translateX(0).step().export()});this.nextAnimationContext&&this.clearMessageAnimation();const i=`#${name}__text-wrap`,s=`#${name}__text`;Promise.all([getRect(this,s),getRect(this,i)]).then(([t,i])=>{this.setData({animation:this.resetAnimation.translateX(i.width).step().export()},()=>{const s=(t.width+i.width)/e*1e3,a=wx.createAnimation({duration:s}).translateX(-t.width).step().export();setTimeout(()=>{this.nextAnimationContext=setTimeout(this.checkAnimation.bind(this),s),this.setData({animation:a})},20)})})}clearMessageAnimation(){clearTimeout(this.nextAnimationContext),this.nextAnimationContext=0}show(t=0){const{duration:e,marquee:i,offset:s,id:a}=this.properties;this.setData({visible:!0,loop:i.loop||this.data.loop,fadeClass:`${name}__fade`,wrapTop:unitConvert(s[0])+t}),this.reset(),this.checkAnimation(),e&&e>0&&(this.closeTimeoutContext=setTimeout(()=>{this.hide(),this.triggerEvent("duration-end",{self:this})},e));getRect(this,a?`#${a}`:`#${name}`).then(t=>{this.setData({height:t.height},()=>{this.setData({fadeClass:""})})})}hide(){this.reset(),this.setData({fadeClass:`${name}__fade`}),setTimeout(()=>{this.setData({visible:!1,animation:[]})},500),"function"==typeof this.onHide&&this.onHide()}reset(){this.nextAnimationContext&&this.clearMessageAnimation(),clearTimeout(this.closeTimeoutContext),this.closeTimeoutContext=0}handleClose(){this.hide(),this.triggerEvent("close-btn-click")}handleLinkClick(){this.triggerEvent("link-click")}};Message=__decorate([wxComponent()],Message);export default Message; |