| | |
| | | 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 { getRect, getAnimationFrame, calcIcon } from '../common/utils'; |
| | | import props from './props'; |
| | | import config from '../common/config'; |
| | | const { prefix } = config; |
| | | const name = `${prefix}-notice-bar`; |
| | | const THEME_ICON = { |
| | | info: 'info-circle-filled', |
| | | success: 'check-circle-filled', |
| | | warning: 'info-circle-filled', |
| | | error: 'error-circle-filled', |
| | | }; |
| | | let NoticeBar = class NoticeBar extends SuperComponent { |
| | | constructor() { |
| | | super(...arguments); |
| | | this.externalClasses = [ |
| | | `${prefix}-class`, |
| | | `${prefix}-class-content`, |
| | | `${prefix}-class-prefix-icon`, |
| | | `${prefix}-class-operation`, |
| | | `${prefix}-class-suffix-icon`, |
| | | ]; |
| | | this.options = { |
| | | multipleSlots: true, |
| | | pureDataPattern: /^__/, |
| | | }; |
| | | this.properties = props; |
| | | this.data = { |
| | | prefix, |
| | | classPrefix: name, |
| | | loop: -1, |
| | | __ready: false, |
| | | }; |
| | | this.observers = { |
| | | marquee(val) { |
| | | if (JSON.stringify(val) === '{}' || JSON.stringify(val) === 'true') { |
| | | this.setData({ |
| | | marquee: { |
| | | speed: 50, |
| | | loop: -1, |
| | | delay: 0, |
| | | }, |
| | | }); |
| | | } |
| | | }, |
| | | visible(visible) { |
| | | if (!this.data.__ready) |
| | | return; |
| | | if (visible) { |
| | | this.show(); |
| | | } |
| | | else { |
| | | this.clearNoticeBarAnimation(); |
| | | } |
| | | }, |
| | | prefixIcon(prefixIcon) { |
| | | this.setPrefixIcon(prefixIcon); |
| | | }, |
| | | suffixIcon(v) { |
| | | this.setData({ |
| | | _suffixIcon: calcIcon(v), |
| | | }); |
| | | }, |
| | | content() { |
| | | if (!this.data.__ready) |
| | | return; |
| | | this.clearNoticeBarAnimation(); |
| | | this.initAnimation(); |
| | | }, |
| | | }; |
| | | this.lifetimes = { |
| | | created() { |
| | | this.resetAnimation = wx.createAnimation({ |
| | | duration: 0, |
| | | timingFunction: 'linear', |
| | | }); |
| | | }, |
| | | detached() { |
| | | this.clearNoticeBarAnimation(); |
| | | }, |
| | | ready() { |
| | | this.show(); |
| | | this.setData({ __ready: true }); |
| | | }, |
| | | }; |
| | | this.methods = { |
| | | initAnimation() { |
| | | const warpID = `.${name}__content-wrap`; |
| | | const nodeID = `.${name}__content`; |
| | | getAnimationFrame(this, () => { |
| | | Promise.all([getRect(this, nodeID), getRect(this, warpID)]) |
| | | .then(([nodeRect, wrapRect]) => { |
| | | const { marquee } = this.properties; |
| | | if (nodeRect == null || wrapRect == null || !nodeRect.width || !wrapRect.width) { |
| | | return; |
| | | } |
| | | if (marquee || wrapRect.width < nodeRect.width) { |
| | | const speeding = marquee.speed || 50; |
| | | const delaying = marquee.delay || 0; |
| | | const animationDuration = ((wrapRect.width + nodeRect.width) / speeding) * 1000; |
| | | const firstAnimationDuration = (nodeRect.width / speeding) * 1000; |
| | | this.setData({ |
| | | wrapWidth: Number(wrapRect.width), |
| | | nodeWidth: Number(nodeRect.width), |
| | | animationDuration: animationDuration, |
| | | delay: delaying, |
| | | loop: marquee.loop - 1, |
| | | firstAnimationDuration: firstAnimationDuration, |
| | | }); |
| | | marquee.loop !== 0 && this.startScrollAnimation(true); |
| | | } |
| | | }) |
| | | .catch(() => { }); |
| | | }); |
| | | }, |
| | | startScrollAnimation(isFirstScroll = false) { |
| | | this.clearNoticeBarAnimation(); |
| | | const { wrapWidth, nodeWidth, firstAnimationDuration, animationDuration, delay } = this.data; |
| | | const delayTime = isFirstScroll ? delay : 0; |
| | | const durationTime = isFirstScroll ? firstAnimationDuration : animationDuration; |
| | | this.setData({ |
| | | animationData: this.resetAnimation |
| | | .translateX(isFirstScroll ? 0 : wrapWidth) |
| | | .step() |
| | | .export(), |
| | | }); |
| | | getAnimationFrame(this, () => { |
| | | this.setData({ |
| | | animationData: wx |
| | | .createAnimation({ duration: durationTime, timingFunction: 'linear', delay: delayTime }) |
| | | .translateX(-nodeWidth) |
| | | .step() |
| | | .export(), |
| | | }); |
| | | }); |
| | | this.nextAnimationContext = setTimeout(() => { |
| | | if (this.data.loop > 0) { |
| | | this.data.loop -= 1; |
| | | this.startScrollAnimation(); |
| | | } |
| | | else if (this.data.loop === 0) { |
| | | this.setData({ animationData: this.resetAnimation.translateX(0).step().export() }); |
| | | } |
| | | else if (this.data.loop < 0) { |
| | | this.startScrollAnimation(); |
| | | } |
| | | }, durationTime + delayTime); |
| | | }, |
| | | show() { |
| | | this.clearNoticeBarAnimation(); |
| | | this.setPrefixIcon(this.properties.prefixIcon); |
| | | this.initAnimation(); |
| | | }, |
| | | clearNoticeBarAnimation() { |
| | | this.nextAnimationContext && clearTimeout(this.nextAnimationContext); |
| | | this.nextAnimationContext = null; |
| | | }, |
| | | setPrefixIcon(v) { |
| | | const { theme } = this.properties; |
| | | this.setData({ |
| | | _prefixIcon: calcIcon(v, THEME_ICON[theme]), |
| | | }); |
| | | }, |
| | | onChange(e) { |
| | | const { current, source } = e.detail; |
| | | this.triggerEvent('change', { current, source }); |
| | | }, |
| | | clickPrefixIcon() { |
| | | this.triggerEvent('click', { trigger: 'prefix-icon' }); |
| | | }, |
| | | clickContent() { |
| | | this.triggerEvent('click', { trigger: 'content' }); |
| | | }, |
| | | clickSuffixIcon() { |
| | | this.triggerEvent('click', { trigger: 'suffix-icon' }); |
| | | }, |
| | | clickOperation() { |
| | | this.triggerEvent('click', { trigger: 'operation' }); |
| | | }, |
| | | }; |
| | | } |
| | | }; |
| | | NoticeBar = __decorate([ |
| | | wxComponent() |
| | | ], NoticeBar); |
| | | export default NoticeBar; |
| | | import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import{getRect,getAnimationFrame,calcIcon}from"../common/utils";import props from"./props";import config from"../common/config";const{prefix:prefix}=config,name=`${prefix}-notice-bar`,THEME_ICON={info:"info-circle-filled",success:"check-circle-filled",warning:"error-circle-filled",error:"error-circle-filled"};let NoticeBar=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-content`,`${prefix}-class-prefix-icon`,`${prefix}-class-operation`,`${prefix}-class-suffix-icon`],this.options={multipleSlots:!0,pureDataPattern:/^__/},this.properties=props,this.data={prefix:prefix,classPrefix:name,loop:-1,__ready:!1},this.observers={marquee(t){"{}"!==JSON.stringify(t)&&"true"!==JSON.stringify(t)||this.setData({marquee:{speed:50,loop:-1,delay:0}})},visible(t){this.data.__ready&&(t?this.show():this.clearNoticeBarAnimation())},prefixIcon(t){this.setPrefixIcon(t)},suffixIcon(t){this.setData({_suffixIcon:calcIcon(t)})},content(){this.data.__ready&&(this.clearNoticeBarAnimation(),this.initAnimation())}},this.lifetimes={created(){this.resetAnimation=wx.createAnimation({duration:0,timingFunction:"linear"})},detached(){this.clearNoticeBarAnimation()},ready(){this.show(),this.setData({__ready:!0})}},this.methods={initAnimation(){const t=`.${name}__content-wrap`,i=`.${name}__content`;getAnimationFrame(this,()=>{Promise.all([getRect(this,i),getRect(this,t)]).then(([t,i])=>{const{marquee:e}=this.properties;if(null!=t&&null!=i&&t.width&&i.width&&!1!==e&&(e||i.width<t.width)){const n=e.speed||50,o=e.delay||0,a=(i.width+t.width)/n*1e3,r=t.width/n*1e3;this.setData({wrapWidth:Number(i.width),nodeWidth:Number(t.width),animationDuration:a,delay:o,loop:e.loop-1,firstAnimationDuration:r}),0!==e.loop&&this.startScrollAnimation(!0)}}).catch(()=>{})})},startScrollAnimation(t=!1){this.clearNoticeBarAnimation();const{wrapWidth:i,nodeWidth:e,firstAnimationDuration:n,animationDuration:o,delay:a}=this.data,r=t?a:0,s=t?n:o;this.setData({animationData:this.resetAnimation.translateX(t?0:i).step().export()}),getAnimationFrame(this,()=>{this.setData({animationData:wx.createAnimation({duration:s,timingFunction:"linear",delay:r}).translateX(-e).step().export()})}),this.nextAnimationContext=setTimeout(()=>{this.data.loop>0?(this.data.loop-=1,this.startScrollAnimation()):0===this.data.loop?this.setData({animationData:this.resetAnimation.translateX(0).step().export()}):this.data.loop<0&&this.startScrollAnimation()},s+r)},show(){this.clearNoticeBarAnimation(),this.setPrefixIcon(this.properties.prefixIcon),this.initAnimation()},clearNoticeBarAnimation(){this.nextAnimationContext&&clearTimeout(this.nextAnimationContext),this.nextAnimationContext=null},setPrefixIcon(t){const{theme:i}=this.properties;this.setData({_prefixIcon:calcIcon(t,THEME_ICON[i])})},onChange(t){const{current:i,source:e}=t.detail;this.triggerEvent("change",{current:i,source:e})},clickPrefixIcon(){this.triggerEvent("click",{trigger:"prefix-icon"})},clickContent(){this.triggerEvent("click",{trigger:"content"})},clickSuffixIcon(){this.triggerEvent("click",{trigger:"suffix-icon"})},clickOperation(){this.triggerEvent("click",{trigger:"operation"})}}}};NoticeBar=__decorate([wxComponent()],NoticeBar);export default NoticeBar; |