wux-weapp
Version:
一套组件化、可复用、易扩展的微信小程序 UI 组件库
1 lines • 5.2 kB
JavaScript
"use strict";var _baseComponent=_interopRequireDefault(require("../helpers/baseComponent")),_classNames2=_interopRequireDefault(require("../helpers/libs/classNames")),_styleToCssString=_interopRequireDefault(require("../helpers/libs/styleToCssString")),_bound=require("../helpers/shared/bound"),_useDOM=require("../helpers/hooks/useDOM"),_props=require("./props");function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}function _slicedToArray(t,e){return _arrayWithHoles(t)||_iterableToArrayLimit(t,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _iterableToArrayLimit(t,e){var r=[],n=!0,i=!1,a=void 0;try{for(var o,s=t[Symbol.iterator]();!(n=(o=s.next()).done)&&(r.push(o.value),!e||r.length!==e);n=!0);}catch(t){i=!0,a=t}finally{try{n||null==s.return||s.return()}finally{if(i)throw a}}return r}function _arrayWithHoles(t){if(Array.isArray(t))return t}function _defineProperty(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var getDefaultActiveKey=function(t){var e=t.filter(function(t){return!t.data.disabled})[0];return e?e.data.key:null},activeKeyIsValid=function(t,e){return t.map(function(t){return t.data.key}).includes(e)},getActiveKey=function(t,e){var r=getDefaultActiveKey(t);return e&&activeKeyIsValid(t,e)?e:r};(0,_baseComponent.default)({relations:{"../tab/index":{type:"child",observer:function(){this.callDebounceFn(this.updated)}}},properties:_props.props,data:{activeKey:"",keys:[],scrollLeft:0,scrollTop:0,showPrevMask:!1,showNextMask:!1,scrollViewStyle:""},observers:{current:function(t){this.data.controlled&&this.updated(t)},justify:function(t){this.setStyles(t)}},computed:{classes:["prefixCls, direction, scroll",function(t,e,r){var n;return{wrap:(0,_classNames2.default)(t,(_defineProperty(n={},"".concat(t,"--").concat(e),e),_defineProperty(n,"".concat(t,"--scroll"),r),n)),scrollView:"".concat(t,"__scroll-view"),prev:(0,_classNames2.default)(["".concat(t,"__mask"),"".concat(t,"__mask--prev")]),next:(0,_classNames2.default)(["".concat(t,"__mask"),"".concat(t,"__mask--next")])}}]},methods:{onScrollFix:function(){var i=this,t=this.data.direction;if("horizontal"===t){if(!this.updateMask){var e=this.useThrottleFn(function(){i.tabsContainerRef().then(function(t){var e=t.containerScrollLeft,r=0<e,n=Math.round(e+t.containerWidth)<Math.round(t.containerScrollWidth);i.setData({showPrevMask:r,showNextMask:n})})},100,{trailing:!0,leading:!0}).run;this.updateMask=e}this.updateMask.call(this)}if("vertical"===t){if(!this.updateMask){var r=this.useThrottleFn(function(){i.tabsContainerRef().then(function(t){var e=t.containerScrollTop,r=0<e,n=Math.round(e+t.containerHeight)<Math.round(t.containerScrollHeight);i.setData({showPrevMask:r,showNextMask:n})})},100,{trailing:!0,leading:!0}).run;this.updateMask=r}this.updateMask.call(this)}},tabsContainerRef:function(){var t=this.data.prefixCls;return(0,_useDOM.useRef)(".".concat(t,"__scroll-view"),this).then(function(t){return{containerWidth:t.width,containerHeight:t.height,containerScrollWidth:t.scrollWidth,containerScrollHeight:t.scrollHeight,containerScrollLeft:t.scrollLeft,containerScrollTop:t.scrollTop,containerOffsetX:t.left,containerOffsetY:t.top}})},setNextScroll:function(t){var i=this,e=this.data,o=e.direction;if(e.scroll){var r=Promise.all([this.tabsContainerRef(),t.activeTabRef()]);return r=(r=r.then(function(t){var e=_slicedToArray(t,2),r=e[0],n=e[1];if("horizontal"===o){var i=r.containerScrollWidth-r.containerWidth;return i<=0?[]:[Math.round((0,_bound.bound)(r.containerScrollLeft+(n.activeTabLeft-r.containerOffsetX)-(r.containerWidth-n.activeTabWidth)/2,0,i)),void 0]}if("vertical"===o){var a=r.containerScrollHeight-r.containerHeight;return a<=0?[]:[void 0,Math.round((0,_bound.bound)(r.containerScrollTop+(n.activeTabTop-r.containerOffsetY)-(r.containerHeight-n.activeTabHeight)/2,0,a))]}})).then(function(t){var e=_slicedToArray(t,2),r=e[0],n=e[1];void 0!==r&&(i.setData({scrollLeft:r}),i.onScrollFix()),void 0!==n&&(i.setData({scrollTop:n}),i.onScrollFix())})}},updated:function(t){var e=0<arguments.length&&void 0!==t?t:this.data.activeKey,r=this.getRelationsByName("../tab/index"),n=getActiveKey(r,e);this.data.activeKey!==n&&this.setData({activeKey:n}),this.changeCurrent(n,r)},changeCurrent:function(e,t){var r=this,n=this.data,i=n.scroll,a=n.theme,o=n.direction,s=n.activeLineMode;0<t.length&&t.forEach(function(t){t.changeCurrent({current:t.data.key===e,context:{scroll:i,theme:a,direction:o,activeLineMode:s}}),t.data.key===e&&r.setNextScroll(t)}),this.data.keys.length!==t.length&&this.setData({keys:t.map(function(t){return t.data})})},emitEvent:function(t){this.triggerEvent("change",{key:t,keys:this.data.keys})},setActiveKey:function(t){this.data.controlled||this.updated(t),this.emitEvent(t)},setStyles:function(t){if("horizontal"===this.data.direction){var e=(0,_styleToCssString.default)({"justify-content":t});this.data.scrollViewStyle!==e&&this.setData({scrollViewStyle:e})}}},ready:function(){var t=this.data,e=t.defaultCurrent,r=t.current,n=t.controlled,i=t.justify,a=n?r:e;this.updated(a),this.setStyles(i)}});