| | |
| | | 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 './props'; |
| | | import { unitConvert, getRect } from '../common/utils'; |
| | | const { prefix } = config; |
| | | const name = `${prefix}-rate`; |
| | | let Rate = class Rate extends SuperComponent { |
| | | constructor() { |
| | | super(...arguments); |
| | | this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-text`]; |
| | | this.properties = props; |
| | | this.controlledProps = [ |
| | | { |
| | | key: 'value', |
| | | event: 'change', |
| | | }, |
| | | ]; |
| | | this.data = { |
| | | prefix, |
| | | classPrefix: name, |
| | | defaultTexts: ['极差', '失望', '一般', '满意', '惊喜'], |
| | | tipsVisible: false, |
| | | tipsLeft: 0, |
| | | actionType: '', |
| | | scaleIndex: -1, |
| | | isVisibleToScreenReader: false, |
| | | }; |
| | | this.methods = { |
| | | onTouch(e, eventType) { |
| | | const { count, allowHalf, gap, value: currentValue, size } = this.properties; |
| | | const [touch] = e.touches; |
| | | const margin = unitConvert(gap); |
| | | getRect(this, `.${name}__wrapper`).then((rect) => { |
| | | const { width, left } = rect; |
| | | const starWidth = (width - (count - 1) * margin) / count; |
| | | const offsetX = touch.pageX - left; |
| | | const num = (offsetX + margin) / (starWidth + margin); |
| | | const remainder = num % 1; |
| | | const integral = num - remainder; |
| | | let value = remainder <= 0.5 && allowHalf ? integral + 0.5 : integral + 1; |
| | | if (value > count) { |
| | | value = count; |
| | | } |
| | | else if (value < 0) { |
| | | value = 0; |
| | | } |
| | | if (eventType === 'move' || (eventType === 'tap' && allowHalf)) { |
| | | const left = Math.ceil(value - 1) * (unitConvert(gap) + unitConvert(size)) + unitConvert(size) * 0.5; |
| | | this.setData({ |
| | | tipsVisible: true, |
| | | actionType: eventType, |
| | | scaleIndex: Math.ceil(value), |
| | | tipsLeft: Math.max(left, 0), |
| | | }); |
| | | } |
| | | if (value !== currentValue) { |
| | | this._trigger('change', { value }); |
| | | } |
| | | if (this.touchEnd) { |
| | | this.hideTips(); |
| | | } |
| | | }); |
| | | }, |
| | | onTap(e) { |
| | | this.onTouch(e, 'tap'); |
| | | }, |
| | | onTouchStart() { |
| | | this.touchEnd = false; |
| | | }, |
| | | onTouchMove(e) { |
| | | this.onTouch(e, 'move'); |
| | | this.showAlertText(); |
| | | }, |
| | | onTouchEnd() { |
| | | this.touchEnd = true; |
| | | this.hideTips(); |
| | | }, |
| | | hideTips() { |
| | | if (this.data.actionType === 'move') { |
| | | this.setData({ tipsVisible: false, scaleIndex: -1 }); |
| | | } |
| | | }, |
| | | onSelect(e) { |
| | | const { value } = e.currentTarget.dataset; |
| | | const { actionType } = this.data; |
| | | if (actionType === 'move') |
| | | return; |
| | | this._trigger('change', { value }); |
| | | setTimeout(() => this.setData({ tipsVisible: false, scaleIndex: -1 }), 300); |
| | | }, |
| | | showAlertText() { |
| | | if (this.data.isVisibleToScreenReader === true) |
| | | return; |
| | | this.setData({ |
| | | isVisibleToScreenReader: true, |
| | | }); |
| | | setTimeout(() => { |
| | | this.setData({ |
| | | isVisibleToScreenReader: false, |
| | | }); |
| | | }, 2e3); |
| | | }, |
| | | }; |
| | | } |
| | | }; |
| | | Rate = __decorate([ |
| | | wxComponent() |
| | | ], Rate); |
| | | export default Rate; |
| | | import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{unitConvert,getRect}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-rate`;let Rate=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-icon`,`${prefix}-class-text`],this.properties=props,this.controlledProps=[{key:"value",event:"change"}],this.data={prefix:prefix,classPrefix:name,defaultTexts:["极差","失望","一般","满意","惊喜"],tipsVisible:!1,tipsLeft:0,actionType:"",scaleIndex:-1,isVisibleToScreenReader:!1},this.methods={onTouch(e,t){const{count:i,allowHalf:s,gap:o,value:a,size:n}=this.properties,[r]=e.changedTouches,c=unitConvert(o);getRect(this,`.${name}__wrapper`).then(e=>{const{width:p,left:h}=e,l=(p-(i-1)*c)/i,d=(r.pageX-h+c)/(l+c),u=d%1,m=d-u;let T=u<=.5&&s?m+.5:m+1;T>i?T=i:T<0&&(T=0);const x=Math.ceil(T-1)*(unitConvert(o)+unitConvert(n))+.5*unitConvert(n);this.setData({tipsVisible:!0,actionType:t,scaleIndex:Math.ceil(T),tipsLeft:Math.max(x,0)}),T!==a&&this._trigger("change",{value:T}),this.touchEnd&&this.hideTips()})},onTap(e){const{disabled:t}=this.properties;t||this.onTouch(e,"tap")},onTouchStart(){this.touchEnd=!1},onTouchMove(e){this.onTouch(e,"move"),this.showAlertText()},onTouchEnd(){this.touchEnd=!0,this.hideTips()},hideTips(){"move"===this.data.actionType&&this.setData({tipsVisible:!1,scaleIndex:-1})},onSelect(e){const{value:t}=e.currentTarget.dataset,{actionType:i}=this.data;"move"!==i&&(this._trigger("change",{value:t}),setTimeout(()=>this.setData({tipsVisible:!1,scaleIndex:-1}),300))},showAlertText(){!0!==this.data.isVisibleToScreenReader&&(this.setData({isVisibleToScreenReader:!0}),setTimeout(()=>{this.setData({isVisibleToScreenReader:!1})},2e3))}}}};Rate=__decorate([wxComponent()],Rate);export default Rate; |