@tuya/miniapp-smart-ui 2.13.5-beta-0

package/lib/picker-column/index.js

@@ -0,0 +1,351 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var utils_1 = require("../common/utils");
+var validator_1 = require("../common/validator");
+var ty_1 = __importDefault(require("../common/ty"));
+var DEFAULT_DURATION = 400;
+var compIdList = [];
+var getId = function () {
+    var id = 'smart-picker-column-' + compIdList.length;
+    compIdList.push(id);
+    return id;
+};
+(0, component_1.SmartComponent)({
+    classes: ['active-class'],
+    props: {
+        valueKey: String,
+        className: String,
+        itemHeight: Number,
+        disabled: Boolean,
+        // 是否为父级窗口化列：为 true 时对大幅度的 active-index 跳变强制关闭过渡（用于停稳回中的静默重定位）
+        windowed: {
+            type: Boolean,
+            value: false,
+        },
+        visibleItemCount: Number,
+        activeStyle: {
+            type: String,
+            value: '',
+        },
+        options: {
+            type: Array,
+            value: [],
+            observer: function (value) {
+                if (!this.data.isInit)
+                    return;
+                this.updateUint(value);
+                // 窗口化列：切片与 activeIndex（局部）在同一批 setData 到达，
+                // 此处直接采用新的 activeIndex，使「新切片 + 新下标」原子落地，避免差一帧的错位闪烁
+                var nextIndex = this.data.windowed && this.data.activeIndex !== null && this.data.activeIndex !== undefined
+                    ? this.data.activeIndex
+                    : this.data.currentIndex;
+                this.updateCurrentIndex(nextIndex);
+                this.updateVisibleOptions();
+            },
+        },
+        defaultIndex: {
+            type: Number,
+            value: 0,
+        },
+        changeAnimation: {
+            type: Boolean,
+            value: false,
+        },
+        fontStyle: {
+            type: String,
+            value: '',
+        },
+        activeIndex: {
+            type: null,
+            observer: function (activeIndex) {
+                if (!this.data.isInit)
+                    return;
+                this.updateCurrentIndex(activeIndex);
+                this.updateVisibleOptions();
+            },
+        },
+        unit: {
+            type: String,
+            value: '',
+        },
+        unitGap: {
+            type: null,
+            value: undefined,
+        },
+        animationTime: {
+            type: Number,
+            value: 300,
+        },
+        loop: {
+            type: Boolean,
+            value: false,
+            observer: function () {
+                if (!this.data.isInit)
+                    return;
+                this.updateCurrentIndex(this.data.currentIndex);
+                this.updateVisibleOptions();
+            },
+        },
+    },
+    data: {
+        isInit: false,
+        maxText: '',
+        optionsVIndexList: [],
+        animationIndex: 0,
+        currentIndex: 0,
+        isDestroy: false,
+    },
+    created: function () {
+        this.setData({
+            instanceId: getId(),
+        });
+        this.updateUint(this.data.options);
+        var _a = this.data, activeIndex = _a.activeIndex, defaultIndex = _a.defaultIndex;
+        var currIndex = activeIndex !== null ? activeIndex : defaultIndex;
+        this.updateCurrentIndex(currIndex);
+        this.updateVisibleOptions();
+        this.setData({
+            isInit: true,
+        });
+    },
+    destroyed: function () {
+        this.setData({
+            isDestroy: true,
+        });
+    },
+    methods: {
+        updateCurrentIndex: function (currIndex) {
+            var count = this.data.options.length;
+            var animationIndex = this.getAnimationIndex(currIndex);
+            animationIndex = this.adjustIndex(animationIndex);
+            var currActiveIndex = this.data.loop && count > 1 ? ((animationIndex + 1) % count) - 1 : animationIndex;
+            if (currActiveIndex < 0) {
+                currActiveIndex += count;
+            }
+            this.setData({
+                currentIndex: currActiveIndex,
+                animationIndex: animationIndex,
+            });
+        },
+        updateVisibleOptions: function () {
+            var optionsVIndexList = this.getVisibleOptions(this.data.animationIndex);
+            this.setData({
+                optionsVIndexList: optionsVIndexList,
+            });
+        },
+        getAnimationIndex: function (currentIndex) {
+            var animationIndex = this.data.animationIndex;
+            var length = this.data.options.length || 1;
+            if (this.data.loop && length > 1) {
+                var newAnimationIndex = this.getNewAnimationIndex(animationIndex, currentIndex, length, this.data.loop);
+                return newAnimationIndex;
+            }
+            return currentIndex;
+        },
+        getCount: function () {
+            return this.data.options.length;
+        },
+        vibrateShort: function (count, time) {
+            if (time === void 0) { time = DEFAULT_DURATION; }
+            if (this.data.vibrateTimer) {
+                clearInterval(this.data.vibrateTimer);
+                this.setData({
+                    vibrateTimer: null,
+                });
+            }
+            if (!count) {
+                ty_1.default.vibrateShort({ type: 'light' });
+                return;
+            }
+            var has = 0;
+            var timer = setInterval(function () {
+                if (has >= count) {
+                    clearInterval(timer);
+                    return;
+                }
+                has++;
+                ty_1.default.vibrateShort({ type: 'light' });
+            }, time / count - 20);
+            this.setData({
+                vibrateTimer: timer,
+            });
+        },
+        updateUint: function (options) {
+            var _a = this.data, unit = _a.unit, valueKey = _a.valueKey;
+            if (unit) {
+                var maxText_1 = '';
+                options.forEach(function (option) {
+                    var _a;
+                    var value = (0, validator_1.isObj)(option) ? (_a = option[valueKey]) === null || _a === void 0 ? void 0 : _a.toString() : option === null || option === void 0 ? void 0 : option.toString();
+                    if (maxText_1.length < value.length) {
+                        maxText_1 = value;
+                    }
+                });
+                this.setData({ maxText: maxText_1 });
+            }
+        },
+        getVisibleOptions: function (currentIndex) {
+            var animationIndex = Math.round(currentIndex !== undefined ? currentIndex : this.data.animationIndex);
+            var vOptionLength = this.data.visibleItemCount * 4 - 2;
+            var rotateAngle = 360 / vOptionLength;
+            var partCount = Math.floor(this.data.visibleItemCount / 2) + 3;
+            var newArr = new Array(vOptionLength).fill('');
+            var newValueArr = new Array(partCount * 2 + 1).fill('');
+            if (this.data.loop && this.data.options.length > 1) {
+                // 循环模式：根据 options 首尾填充 newValueArr 数组
+                var optionsLength_1 = this.data.options.length;
+                if (optionsLength_1 === 0) {
+                    // 如果没有选项，填充空值
+                    newValueArr.fill('');
+                }
+                else {
+                    newValueArr.forEach(function (item, index) {
+                        // 计算相对于中心的偏移量
+                        var offset = index - partCount;
+                        // 计算目标索引，支持循环
+                        var targetAnimationIndex = animationIndex + offset;
+                        var targetIndex = ((targetAnimationIndex + 1) % optionsLength_1) - 1;
+                        if (targetIndex < 0) {
+                            targetIndex += optionsLength_1;
+                        }
+                        newValueArr[index] = targetIndex;
+                    });
+                }
+            }
+            else {
+                if (animationIndex < 0) {
+                    animationIndex = 0;
+                }
+                if (animationIndex > this.data.options.length - 1) {
+                    animationIndex = this.data.options.length - 1;
+                }
+                newValueArr.forEach(function (item, index) {
+                    var valueIndex = animationIndex - partCount + index >= 0
+                        ? animationIndex - partCount + index
+                        : undefined;
+                    if (valueIndex === undefined) {
+                        return;
+                    }
+                    newValueArr[index] = valueIndex;
+                });
+            }
+            var rotate = (animationIndex * rotateAngle) % 360;
+            if (rotate < 0) {
+                rotate += 360;
+            }
+            var rotateIndex = Math.round(rotate / rotateAngle);
+            // 环形结构填充：以rotateIndex为中心，向两边扩展填充newValueArr
+            var centerIndex = rotateIndex; // 中心位置
+            var halfLength = Math.floor(newValueArr.length / 2); // newValueArr的一半长度
+            // 从中心位置开始，向两边填充
+            for (var i = 0; i < newValueArr.length; i++) {
+                var targetIndex = (centerIndex - halfLength + i + vOptionLength) % vOptionLength; // 确保索引在0-17范围内
+                newArr[targetIndex] = newValueArr[i];
+            }
+            return newArr;
+        },
+        getNewAnimationIndex: function (animationIndex, currentIndex, length, loop) {
+            var curOptionsNewIndex = Math.floor((animationIndex + 1) / length) * length + currentIndex;
+            var preOptionsNewIndex = curOptionsNewIndex - length;
+            var afterOptionsNewIndex = curOptionsNewIndex + length;
+            var newAnimationIndex = !loop
+                ? currentIndex
+                : Math.abs(preOptionsNewIndex - animationIndex) >
+                    Math.abs(curOptionsNewIndex - animationIndex)
+                    ? Math.abs(curOptionsNewIndex - animationIndex) >
+                        Math.abs(afterOptionsNewIndex - animationIndex)
+                        ? afterOptionsNewIndex
+                        : curOptionsNewIndex
+                    : Math.abs(preOptionsNewIndex - animationIndex) >
+                        Math.abs(afterOptionsNewIndex - animationIndex)
+                        ? afterOptionsNewIndex
+                        : preOptionsNewIndex;
+            return newAnimationIndex;
+        },
+        adjustIndex: function (index) {
+            var data = this.data;
+            var count = this.getCount();
+            if (this.data.loop && count > 1) {
+                for (var i = 0; i < count; i++) {
+                    var targetIndex = index + i;
+                    var optionIndex = ((targetIndex + 1) % count) - 1;
+                    if (optionIndex < 0) {
+                        optionIndex += count;
+                    }
+                    if (!this.isDisabled(data.options[optionIndex]) &&
+                        data.options[optionIndex] !== undefined) {
+                        return targetIndex;
+                    }
+                }
+                return 0;
+            }
+            var currentIndex = (0, utils_1.range)(index, 0, count);
+            for (var i = currentIndex; i < count; i++) {
+                if (!this.isDisabled(data.options[i]) && data.options[i] !== undefined)
+                    return i;
+            }
+            for (var i = currentIndex - 1; i >= 0; i--) {
+                if (!this.isDisabled(data.options[i]) && data.options[i] !== undefined)
+                    return i;
+            }
+            return 0;
+        },
+        isDisabled: function (option) {
+            return (0, validator_1.isObj)(option) && option.disabled;
+        },
+        getOptionText: function (option) {
+            var data = this.data;
+            return (0, validator_1.isObj)(option) && data.valueKey in option ? option[data.valueKey] : option;
+        },
+        setValue: function (value) {
+            var options = this.data.options;
+            for (var i = 0; i < options.length; i++) {
+                if (this.getOptionText(options[i]) === value) {
+                    return this.setIndex(i);
+                }
+            }
+            return Promise.resolve();
+        },
+        setIndex: function (index) {
+            var currentIndex = ((index + 1) % this.data.options.length) - 1;
+            if (currentIndex < 0) {
+                currentIndex += this.data.options.length;
+            }
+            this.setData({
+                currentIndex: currentIndex,
+                animationIndex: index,
+            });
+        },
+        getValue: function () {
+            var data = this.data;
+            return data.options[data.currentIndex];
+        },
+        activeIndexChange: function (index) {
+            var currentIndex = ((index + 1) % this.data.options.length) - 1;
+            if (currentIndex < 0) {
+                currentIndex += this.data.options.length;
+            }
+            var isSame = currentIndex === this.data.activeIndex;
+            this.setData({
+                currentIndex: currentIndex,
+                animationIndex: index,
+            });
+            !isSame && this.$emit('change', index);
+        },
+        animationIndexChange: function (index) {
+            this.setData({
+                animationIndex: index,
+            });
+        },
+        animationStart: function () {
+            this.$emit('animation-start');
+        },
+        animationEnd: function () {
+            this.$emit('animation-end');
+        },
+    },
+});

package/lib/picker-column/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/picker-column/index.wxml

@@ -0,0 +1,62 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="{{ utils.bem('picker-column', { disabled }) }} custom-class"
+  style="{{ computed.rootStyle({ itemHeight, visibleItemCount }) }}"
+  instanceId="{{instanceId}}"
+  id="{{instanceId}}"
+  data-isdestroy="{{isDestroy}}"
+  data-changeanimation="{{changeAnimation}}"
+  data-valuekey="{{valueKey}}"
+  data-itemheight="{{itemHeight}}"
+  data-visibleitemcount="{{visibleItemCount}}"
+  data-activeindex="{{currentIndex}}"
+  data-loop="{{loop && options.length > 1}}"
+  data-animationtime="{{animationTime}}"
+  data-windowed="{{windowed}}"
+  isdestroy="{{isDestroy}}"
+  options="{{options}}"
+  activeindex="{{currentIndex}}"
+  changeanimation="{{changeAnimation}}"
+  loop="{{loop && options.length > 1}}"
+  valuekey="{{valueKey}}"
+  itemheight="{{itemHeight}}"
+  visibleitemcount="{{visibleItemCount}}"
+  animationtime="{{animationTime}}"
+  windowed="{{windowed}}"
+  change:isdestroy="{{computed.updateValue(instanceId, 'isDestroy')}}"
+  change:options="{{computed.updateValue(instanceId, 'options')}}"
+  change:valuekey="{{computed.updateValue(instanceId,'valueKey')}}"
+  change:itemheight="{{computed.updateValue(instanceId,'itemHeight')}}"
+  change:visibleitemcount="{{computed.updateValue(instanceId, 'visibleItemCount')}}"
+  change:activeindex="{{computed.updateValue(instanceId,'activeIndex')}}"
+  change:loop="{{computed.updateValue(instanceId,'loop')}}"
+  change:animationtime="{{computed.updateValue(instanceId,'animationTime')}}"
+  change:windowed="{{computed.updateValue(instanceId,'windowed')}}"
+  change:instanceid="{{computed.updateValue(instanceId,'instanceId')}}"
+  bind:touchstart="{{computed.touchStart(instanceId)}}"
+  catch:touchmove="{{computed.touchMove(instanceId)}}"
+  bind:touchend="{{computed.touchEnd(instanceId)}}"
+  bind:touchcancel="{{computed.touchEnd(instanceId)}}"
+>
+  <view class="smart-picker-column__offset" style="{{ computed.wrapperStyle({ animationIndex, itemHeight, animationTime, unit, moving, optionsVIndexList, options, valueKey, visibleItemCount, loop: loop && options.length > 1, changeAnimation }) }}" id="options">
+    <view
+      wx:for="{{ optionsVIndexList }}"
+      wx:for-item="optionIndex"
+      wx:key="index"
+      data-index="{{index}}"
+      style="{{computed.wrapperItemStyle({ itemHeight, index, visibleItemCount, fontStyle, activeStyle, instanceId, optionsVIndexList, animationIndex, options })}}"
+      class="smart-picker-column__item_{{index}} {{ computed.wrapperItemClass({ index, animationIndex, optionsVIndexList, instanceId, options, valueKey })}}"
+      bind:tap="{{computed.tapItem(instanceId)}}" 
+    >
+    </view>
+  </view>
+  <view wx:if="{{unit}}" class="smart-picker-column__unit" style="height: {{ itemHeight }}px">
+    <view class="smart-picker-column__max-text" style="{{computed.unitFontStyle(fontStyle)}}">
+      {{ maxText }}
+      <view class="smart-picker-column__unit_text" style="{{computed.unitGapStyle(unitGap)}}">{{unit}}</view>
+    </view>
+  </view>
+  
+</view>