tt-mp/lib/slider/index.js

一套组件化、可复用、易扩展的头条小程序 UI 组件库

"use strict";var _baseComponent=_interopRequireDefault(require("../helpers/baseComponent")),_classNames2=_interopRequireDefault(require("../helpers/classNames")),_eventsMixin=_interopRequireDefault(require("../helpers/eventsMixin")),_styleToCssString=_interopRequireDefault(require("../helpers/styleToCssString")),_gestures=require("../helpers/gestures");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_arrayLikeToArray(e,t):void 0}}function _iterableToArray(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=new Array(t);a<t;a++)r[a]=e[a];return r}function _defineProperty(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}var getPrecision=function(e){var t=e.toString();return 0<=t.indexOf(".")?t.length-t.indexOf(".")-1:0},checkValuePrecision=function(e,t,a){var r=Math.round((e-a)/t)*t+a,n=getPrecision(t);return parseFloat(r.toFixed(n))},getStyles=function(e){return Array.isArray(e)?e.map(function(e){return(0,_styleToCssString.default)(e)}):(0,_styleToCssString.default)(e)},defaultEvents={onChange:function(){},onAfterChange:function(){}};(0,_baseComponent.default)({behaviors:[(0,_eventsMixin.default)({defaultEvents:defaultEvents})],relations:{"../field/index":{type:"ancestor"}},properties:{prefixCls:{type:String,value:"wux-slider"},min:{type:Number,value:0,observer:"getMarks"},max:{type:Number,value:100,observer:"getMarks"},step:{type:Number,value:1,observer:"getMarks"},defaultValue:{type:Array,value:[0]},value:{type:Array,value:[0],observer:function(e){this.data.controlled&&this.updated(e)}},controlled:{type:Boolean,value:!1},disabled:{type:Boolean,value:!1},showMark:{type:Boolean,value:!1},showValue:{type:[Boolean,Object],value:!1},tipFormatter:{type:String,value:"{d}"},markStyle:{type:[String,Object,Array],value:"",observer:function(e){this.setData({extMarkStyle:getStyles(e)})}},handleStyle:{type:[String,Object,Array],value:"",observer:function(e){this.setData({extHandleStyle:getStyles(e)})}},trackStyle:{type:[String,Object,Array],value:"",observer:function(e){this.setData({extTrackStyle:getStyles(e)})}},railStyle:{type:[String,Object],value:"",observer:function(e){this.setData({extRailStyle:(0,_styleToCssString.default)(e)})}},wrapStyle:{type:[String,Object],value:"",observer:function(e){this.setData({extWrapStyle:(0,_styleToCssString.default)(e)})}}},data:{offsets:[],inputValue:[],extMarkStyle:"",extHandleStyle:"",extTrackStyle:"",extRailStyle:"",extWrapStyle:"",isTouched:!1,swiping:!1},computed:{classes:["prefixCls, disabled, tipFormatter",function(e,t,a){var r;return{wrap:(0,_classNames2.default)(e,(_defineProperty(r={},"".concat(e,"--disabled"),t),_defineProperty(r,"".concat(e,"--has-tip"),!!a),r)),min:"".concat(e,"__min"),rail:"".concat(e,"__rail"),mark:"".concat(e,"__mark"),track:"".concat(e,"__track"),handle:"".concat(e,"__handle"),max:"".concat(e,"__max")}}]},observers:{inputValue:function(e){var t=this,a=e.map(function(e){return t.calcOffset(t.checkValue(e))});this.setData({offsets:a})}},methods:{updated:function(e){this.hasFieldDecorator||this.data.inputValue!==e&&this.setData({inputValue:e})},onTouchStart:function(e){var t;this.data.disabled||1<(0,_gestures.getPointsNumber)(e)||(t=e.currentTarget.dataset.index,this.isMoved=!1,this.startX=(0,_gestures.getTouchPoints)(e).x,this.moveX=0,this.startPos=this.data.offsets[t]||0,this.setData({last:t,isTouched:!0,isMoved:!1}))},onTouchMove:function(e){var l,t,c=this;this.data.disabled||1<(0,_gestures.getPointsNumber)(e)||(l=e.currentTarget.dataset.index,t=this.data.prefixCls,this.isMoved=!0,this.setData({isMoved:!0}),this.moveX=(0,_gestures.getTouchPoints)(e).x,this.getRect(".".concat(t,"__rail")).then(function(e){var t,a,r,n,i,s,o,u;e&&c.isMoved&&(t=(c.moveX-c.startX)/e.width*100,a=_toConsumableArray(c.data.offsets),r=c.checkValue(c.startPos+t,0,100),n=c.data.inputValue,i=c.calcValue(r),s=n[l-1],o=n[l+1],a[l]=c.calcOffset(i),s&&i<s&&(a[l]=c.calcOffset(s)),o&&o<i&&(a[l]=c.calcOffset(o)),n[l]!==i&&(u=c.getValue(a),c.data.controlled||c.updated(u),c.triggerEvent("change",{offsets:a,value:u})))}))},onTouchEnd:function(e){var t,a;this.data.disabled||1<(0,_gestures.getPointsNumber)(e)||!this.isMoved||(this.isMoved=!1,this.setData({isTouched:!1,isMoved:!1}),t=this.data.offsets,a=this.getValue(t),this.triggerEvent("afterChange",{offsets:t,value:a}))},getRect:function(e,a){var r=this;return new Promise(function(t){wx.createSelectorQuery().in(r)[a?"selectAll":"select"](e).boundingClientRect(function(e){a&&Array.isArray(e)&&e.length&&t(e),!a&&e&&t(e)}).exec()})},calcValue:function(e){var t=this.data,a=t.min,r=t.max;return this.trimValue(e*(r-a)/100+a)},calcOffset:function(e){var t=this.data,a=t.min;return 100*((e-a)/(t.max-a))},checkValue:function(e,t,a){var r=1<arguments.length&&void 0!==t?t:this.data.min,n=2<arguments.length&&void 0!==a?a:this.data.max;return e<=r?r:n<=e?n:e},trimValue:function(e){return checkValuePrecision(this.checkValue(e),this.data.step,this.data.min)},getValue:function(e){var t=this;return(0<arguments.length&&void 0!==e?e:this.data.offsets).map(function(e){return t.calcValue(e)})},getMarks:function(){if(this.data.showMark){for(var e=this.data,t=e.min,a=e.max,r=e.step,n=(a-t)/r,i=[],s=100*r/(a-t),o=1;o<n;o++)i.push(o*s);this.setData({marks:i})}},noop:function(){}},attached:function(){var e=this.data,t=e.defaultValue,a=e.value,r=e.controlled?a:t;this.getMarks(),this.updated(r)}});