@tuya-miniapp/smart-ui 2.3.8-beta-5 → 2.3.8

package/packages/picker/test/demo.spec.ts

@@ -1,11 +0,0 @@
-import path from 'path';
-import simulate from 'miniprogram-simulate';
-
-test('should render demo and match snapshot', () => {
-  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
-    rootPath: path.resolve(__dirname, '../../'),
-  });
-  const comp = simulate.render(id);
-  comp.attach(document.createElement('parent-wrapper'));
-  expect(comp.toJSON()).toMatchSnapshot();
-});

package/packages/picker/toolbar.wxml

@@ -1,23 +0,0 @@
-<view wx:if="{{ showToolbar }}" class="smart-picker__toolbar toolbar-class">
-  <view
-    class="smart-picker__cancel"
-    hover-class="smart-picker__cancel--hover"
-    hover-stay-time="70"
-    data-type="cancel"
-    bindtap="emit"
-  >
-    {{ cancelButtonText }}
-  </view>
-  <view wx:if="{{ title }}" class="smart-picker__title smart-ellipsis">{{
-    title
-  }}</view>
-  <view
-    class="smart-picker__confirm"
-    hover-class="smart-picker__confirm--hover"
-    hover-stay-time="70"
-    data-type="confirm"
-    bindtap="emit"
-  >
-    {{ confirmButtonText }}
-  </view>
-</view>

package/packages/picker-column/index.json

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

package/packages/picker-column/index.less

@@ -1,93 +0,0 @@
-@import '../common/style/var';
-
-.smart-picker-column {
-  text-align: center;
-  font-weight: var(--font-weight-bold, @font-weight-bold);
-  color: var(
-    --picker-option-selected-text-color,
-    @picker-option-selected-text-color
-  );
-  font-size: var(--picker-option-font-size, @picker-option-font-size);
-  position: relative;
-  width: 100%;
-
-  &__offset {
-    position: relative; 
-    width: 100%;
-  }
-
-  &__visual {
-    position: absolute;
-    width: 100%;
-    top: 0;
-  }
-
-  &__item {
-    pointer-events: none;
-
-    &--selected {
-      font-weight: var(--font-weight-bold, @font-weight-bold);
-      color: var(
-        --picker-option-selected-text-color,
-        @picker-option-selected-text-color
-      );
-    }
-
-    &--disabled {
-      opacity: var(
-        --picker-option-disabled-opacity,
-        @picker-option-disabled-opacity
-      );
-    }
-  }
-
-  &__mask {
-    display: flex;
-    position: absolute;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    z-index: 10;
-    background: transparent;
-    flex-direction: column;
-    &__item {
-      flex: 1;
-    }
-  }
-
-  &__unit {
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    transform: translate(0, -50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &_text {
-      font-size: var(
-        --picker-option-unit-font-size,
-        @picker-option-unit-font-size
-      );
-      color: var(
-        --picker-option-unit-text-color,
-        @picker-option-unit-text-color
-      );
-    }
-    &_hidden {
-      opacity: 0;
-    }
-  }
-
-  &__max-text {
-    opacity: 0;
-    font-weight: var(--font-weight-bold, @font-weight-bold);
-  }
-}
-
-.smart-picker-column--disabled {
-  opacity: var(
-    --picker-option-disabled-opacity,
-    @picker-option-disabled-opacity
-  );
-}

package/packages/picker-column/index.ts

@@ -1,419 +0,0 @@
-import { SmartComponent } from '../common/component';
-import { range } from '../common/utils';
-import { isObj } from '../common/validator';
-
-const DEFAULT_DURATION = 400;
-
-SmartComponent({
-  classes: ['active-class'],
-
-  props: {
-    valueKey: String,
-    className: String,
-    itemHeight: Number,
-    disabled: Boolean,
-    visibleItemCount: Number,
-    activeStyle: {
-      type: String,
-      value: '',
-    },
-    options: {
-      type: Array,
-      value: [],
-      observer(value) {
-        if (!this.data.isInit) return;
-        this.updateUint(value);
-        this.updateVisibleOptions(this.data.currentIndex);
-      },
-    },
-    defaultIndex: {
-      type: Number,
-      value: 0,
-    },
-    changeAnimation: {
-      type: Boolean,
-      value: true,
-    },
-    fontStyle: {
-      type: String,
-      value: '',
-    },
-    activeIndex: {
-      type: Number,
-      value: -1,
-      observer(index: number) {
-        if (!this.data.isInit) return;
-        this.setIndex(index, false, this.data.changeAnimation);
-      },
-    },
-    unit: {
-      type: String,
-      value: '',
-    },
-    animationTime: {
-      type: Number,
-      value: 800,
-    },
-  },
-  data: {
-    startY: 0,
-    offset: 0,
-    duration: 0,
-    startOffset: 0,
-    optionsV: [] as any[], // 渲染的 options
-    currentIndex: -1,
-    renderNum: 0,
-    renderStart: 0,
-    animate: false,
-    playing: false,
-    isInit: false,
-    maxText: '',
-    timer: null as any,
-    preOffsetList: [] as number[],
-  },
-
-  created() {
-    const { defaultIndex, activeIndex, options } = this.data;
-    this.updateUint(options);
-    this.setIndex(
-      activeIndex !== -1 ? activeIndex : defaultIndex,
-      false,
-      this.data.changeAnimation
-    );
-    this.setData({
-      isInit: true,
-    });
-  },
-
-  methods: {
-    getCount() {
-      return this.data.options.length;
-    },
-
-    onTouchStart(event: WechatMiniprogram.TouchEvent) {
-      if (this.data.disabled) {
-        return;
-      }
-      if (this.data.timer) {
-        clearTimeout(this.data.timer);
-        this.setData({
-          timer: null,
-        });
-      }
-      if (!this.data.playing) {
-        this.$emit('animation-start');
-      }
-      this.setData({
-        startY: event.touches[0].clientY,
-        startOffset: this.data.offset,
-        duration: 100,
-        playing: true,
-        timer: null,
-        preOffsetList: [this.data.offset],
-      });
-    },
-
-    onTouchMove(event: WechatMiniprogram.TouchEvent) {
-      if (this.data.disabled) {
-        return;
-      }
-      const { data } = this;
-      const { preOffsetList } = data;
-      const deltaY = event.touches[0].clientY - data.startY;
-      const offset = range(
-        data.startOffset + deltaY,
-        -(this.getCount() * data.itemHeight),
-        data.itemHeight
-      );
-      const direction = this.checkIsDown(offset);
-      // 上一次滚动的索引
-      const preIndex = range(
-        Math.round(-preOffsetList[preOffsetList.length - 1] / data.itemHeight),
-        0,
-        this.getCount() - 1
-      );
-      // 最终定位索引
-      const index = range(Math.round(-offset / data.itemHeight), 0, this.getCount() - 1);
-      if (
-        (direction === 'up' && index < data.renderStart + 8) ||
-        (direction === 'down' && index > data.renderStart + data.renderNum - 8)
-      ) {
-        this.updateVisibleOptions(index);
-      }
-      // 索引变化时 粗发震动反馈
-      if (index !== preIndex) {
-        // @ts-ignore
-        this.vibrateShort();
-      }
-      // const animationIndex = Math.abs(-offset / data.itemHeight);
-      this.setData({
-        offset,
-        // animationIndex: animationIndex,
-        preOffsetList: [...data.preOffsetList, offset],
-        animate: false,
-      });
-    },
-
-    async onTouchEnd() {
-      const { data } = this;
-      if (data.disabled) {
-        return;
-      }
-      const { preOffsetList } = data;
-      let preOffset = Math.max(
-        Math.abs(preOffsetList[preOffsetList.length - 3] - preOffsetList[preOffsetList.length - 4]),
-        Math.abs(preOffsetList[preOffsetList.length - 2] - preOffsetList[preOffsetList.length - 3]),
-        Math.abs(preOffsetList[preOffsetList.length - 1] - preOffsetList[preOffsetList.length - 2])
-      );
-      if (isNaN(preOffset)) preOffset = 0;
-      preOffset = Math.min(preOffset, 40);
-      // 三次同样的距离 说明用户一直在顶部或者底部滑动  或在move途中已经是上下边缘了
-      const isSameTouch =
-        (preOffsetList[preOffsetList.length - 1] === preOffsetList[preOffsetList.length - 2] &&
-          preOffsetList[preOffsetList.length - 2] === preOffsetList[preOffsetList.length - 3]) ||
-        preOffsetList[preOffsetList.length - 1] === -(this.getCount() * data.itemHeight) ||
-        preOffsetList[preOffsetList.length - 1] === data.itemHeight;
-      // 是否是向下滚动
-      const direction = this.checkIsDown();
-      // 当滚动速度比较慢时(<3) 不增加惯性滚动距离
-      const offset =
-        Math.abs(preOffset) < 3 || isSameTouch || !direction
-          ? data.offset
-          : data.offset + (direction === 'down' ? -preOffset : preOffset) * 10;
-      // 有数字的最大滚动距离
-      const countHeight = (this.getCount() - 1) * data.itemHeight;
-      // 动画最大滚动距离 上下各加一个 data.itemHeight 的滚动空间
-      const animationOffset = range(offset, -(this.getCount() * data.itemHeight), data.itemHeight);
-
-      // 最终定位滚动位置
-      const finOffset =
-        animationOffset < -countHeight ? -countHeight : animationOffset > 0 ? 0 : animationOffset;
-      // 获取索引
-      const index = range(Math.round(-finOffset / data.itemHeight), 0, this.getCount() - 1);
-      // 获取索引的标准距离
-      const offsetData = -index * data.itemHeight;
-      // 增加惯性音效
-      if (Math.abs(offsetData - data.offset) > data.itemHeight && !isSameTouch) {
-        const countVibrate = Math.abs(offsetData - data.offset) / data.itemHeight;
-        // @ts-ignore
-        this.vibrateShort(Math.floor(countVibrate), data.animationTime);
-      }
-      // 最终定位索引
-      this.setData({
-        duration: isSameTouch ? 150 : data.animationTime,
-        // animationIndex: index,
-        offset: offsetData,
-        animate: true,
-      });
-
-      // 更新列表
-      if (
-        (direction === 'up' && index < data.renderStart + 8) ||
-        (direction === 'down' && index > data.renderStart + data.renderNum - 8)
-      ) {
-        await this.updateVisibleOptions(index);
-      }
-
-      // 更新索引
-      if (index !== data.currentIndex) {
-        return this.setData({
-          timer: setTimeout(
-            async () => {
-              this.setIndex(index, true, false);
-              // await this.setData({
-              //   timer: null,
-              //   currentIndex: index,
-              //   // animationIndex: index,
-              // });
-              // this.$emit('change', index);
-            },
-            isSameTouch ? 150 : data.animationTime
-          ),
-        });
-      }
-      this.setData({
-        playing: false,
-      });
-      this.$emit('animation-end');
-    },
-    checkIsDown(curr?: number) {
-      const { data } = this;
-      const { preOffsetList } = data;
-      const currOffset = curr === undefined ? preOffsetList[preOffsetList.length - 1] : curr;
-      const preOffset =
-        curr === undefined
-          ? preOffsetList[preOffsetList.length - 2]
-          : preOffsetList[preOffsetList.length - 1];
-      if (currOffset === undefined || preOffset === undefined || currOffset === preOffset) return;
-      return currOffset < preOffset ? 'down' : 'up';
-    },
-
-    vibrateShort(count?: number, time = 1000) {
-      if (!count) {
-        // @ts-ignore
-        ty.vibrateShort({ type: 'light' });
-        return;
-      }
-      let has = 0;
-      const timer = setInterval(() => {
-        if (has >= count) {
-          clearInterval(timer);
-          return;
-        }
-        has++;
-        this.vibrateShort();
-      }, time / count - 20);
-    },
-
-    onClickItem(event: WechatMiniprogram.TouchEvent) {
-      if (this.data.disabled) return;
-      const { index } = event.currentTarget.dataset;
-      if (index === this.data.currentIndex || index < 0 || index > this.data.options.length - 1) {
-        return;
-      }
-      this.vibrateShort(Math.abs(index - this.data.currentIndex), DEFAULT_DURATION);
-      this.setIndex(index, true, true);
-    },
-
-    updateUint(options: any[]) {
-      const { unit, valueKey } = this.data;
-      if (unit) {
-        let maxText = '';
-        options.forEach(option => {
-          const value = isObj(option) ? option[valueKey]?.toString() : option?.toString();
-          if (maxText.length < value.length) {
-            maxText = value;
-          }
-        });
-        this.setData({ maxText });
-      }
-    },
-
-    updateVisibleOptions(targetIndex: number) {
-      const { options, visibleItemCount, currentIndex } = this.data;
-      if (visibleItemCount < 20 && options.length > visibleItemCount) {
-        let renderNum = 0;
-        let renderStart = 0;
-        // 选项多于 20 个时，进行列表优化
-        renderNum = Math.max(visibleItemCount * 2, 20);
-        renderStart = Math.max(0, targetIndex - renderNum / 2);
-        const renderEnd = Math.min(options.length, renderStart + renderNum);
-        if (currentIndex >= 0) {
-          if (currentIndex < targetIndex) {
-            renderStart = Math.max(0, currentIndex - renderNum / 2);
-          }
-        }
-        renderNum = renderEnd - renderStart;
-        const optionsV = options.slice(renderStart, renderEnd);
-        return this.set({ optionsV, renderStart, renderNum });
-      }
-      return this.set({
-        optionsV: options,
-        renderStart: 0,
-        renderNum: options.length,
-      });
-    },
-    adjustIndex(index: number) {
-      const { data } = this;
-      const count = this.getCount();
-
-      index = range(index, 0, count);
-      for (let i = index; i < count; i++) {
-        if (!this.isDisabled(data.options[i])) return i;
-      }
-      for (let i = index - 1; i >= 0; i--) {
-        if (!this.isDisabled(data.options[i])) return i;
-      }
-    },
-
-    isDisabled(option: any) {
-      return isObj(option) && option.disabled;
-    },
-
-    getOptionText(option: any) {
-      const { data } = this;
-      return isObj(option) && data.valueKey in option ? option[data.valueKey] : option;
-    },
-
-    setIndex(index: number, userAction?: boolean, animate?: boolean, time = DEFAULT_DURATION) {
-      const { data } = this;
-      index = this.adjustIndex(index) || 0;
-      const offset = -index * data.itemHeight;
-      if (!data.playing) {
-        this.$emit('animation-start');
-        this.setData({
-          playing: true,
-        });
-      }
-      if (index !== data.currentIndex) {
-        // 需要动画的情况下，保持最大的截取
-        this.updateVisibleOptions(index);
-        if (animate) {
-          return this.set({
-            currentIndex: index,
-            // animationIndex: index,
-            offset,
-            animate: true,
-            duration: time,
-          }).then(() => {
-            if (!userAction) {
-              this.setData({
-                playing: false,
-              });
-              this.$emit('animation-end');
-              return;
-            }
-            this.$emit('change', index);
-            this.setData({
-              playing: false,
-            });
-            this.$emit('animation-end');
-          });
-        }
-
-        return this.set({
-          optionsV: data.options,
-          offset,
-          currentIndex: index,
-          // animationIndex: index,
-          renderStart: 0,
-          animate: !!animate,
-        }).then(() => {
-          if (!userAction) {
-            this.setData({
-              playing: false,
-            });
-            this.$emit('animation-end');
-            return;
-          }
-          this.$emit('change', index);
-          this.setData({
-            playing: false,
-          });
-          this.$emit('animation-end');
-        });
-      }
-
-      this.setData({
-        playing: false,
-      });
-      this.$emit('animation-end');
-      return this.set({ offset });
-    },
-
-    setValue(value: string) {
-      const { options } = this.data;
-      for (let i = 0; i < options.length; i++) {
-        if (this.getOptionText(options[i]) === value) {
-          return this.setIndex(i, false, this.data.changeAnimation);
-        }
-      }
-      return Promise.resolve();
-    },
-
-    getValue() {
-      const { data } = this;
-      return data.options[data.currentIndex];
-    },
-  },
-});

package/packages/picker-column/index.wxml

@@ -1,42 +0,0 @@
-<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 }) }}"
-  bind:touchstart="onTouchStart"
-  catch:touchmove="onTouchMove"
-  bind:touchend="onTouchEnd"
-  bind:touchcancel="onTouchEnd"
->
-  <view class="smart-picker-column__offset" style="height: {{ itemHeight * options.length }}px;{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart, unit }) }}" id="options">
-    <view class="smart-picker-column__visual" style="{{ computed.wrapperInterStyle({ offset, itemHeight, visibleItemCount, renderStart }) }}">
-      <view
-        wx:for="{{ optionsV }}"
-        wx:for-item="option"
-        wx:key="index"
-        data-index="{{ renderStart + index }}"
-        style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: renderStart + index === currentIndex ? activeStyle : ''})}}"
-        class="smart-ellipsis {{ utils.bem('picker-column__item', { disabled: option && option.disabled, selected: renderStart + index === currentIndex }) }} {{ renderStart + index === currentIndex ? 'active-class' : '' }}"
-      >
-        {{ computed.optionText(option, valueKey) }}
-      </view>
-    </view>
-  </view>
-  <view class="smart-picker-column__mask">
-    <view 
-      wx:for="{{ visibleItemCount }}" 
-      wx:key="index"
-      class="smart-picker-column__mask__item" 
-      data-index="{{ currentIndex + index - 2 }}" 
-      bind:tap="onClickItem" 
-    >
-    </view>
-  </view>
-  <view wx:if="{{unit}}" class="smart-picker-column__unit" style="height: {{ itemHeight }}px">
-    <view class="smart-picker-column__unit_text smart-picker-column__unit_hidden" >{{unit}}</view>
-    <text class="smart-picker-column__max-text">{{ maxText }}</text>
-    <view class="smart-picker-column__unit_text" >{{unit}}</view>
-  </view>
-  
-</view>

package/packages/picker-column/index.wxs

@@ -1,71 +0,0 @@
-/* eslint-disable */
-var style = require('../wxs/style.wxs');
-var addUnit = require('../wxs/add-unit.wxs');
-
-function isObj(x) {
-  var type = typeof x;
-  return x !== null && (type === 'object' || type === 'function');
-}
-
-function optionText(option, valueKey) {
-  return isObj(option) && option[valueKey] != null ? option[valueKey] : option;
-}
-
-function rootStyle(data) {
-  return style({
-    height: addUnit(data.itemHeight * data.visibleItemCount),
-  });
-}
-
-function wrapperStyle(data) {
-  var offset =
-    data.offset + (data.itemHeight * (data.visibleItemCount - 1)) / 2;
-  offset = addUnit(offset);
-  if (data.animate) {
-    return style({
-      'text-indent': data.unit ? '-8rpx' : '0',
-      transition: 'transform ' + data.duration + 'ms ease-out',
-      'line-height': addUnit(data.itemHeight),
-      transform: 'translate3d(0, ' + offset + ', 0)',
-    });
-  }
-  return style({
-    'text-indent': data.unit ? '-8rpx' : '0',
-    'line-height': addUnit(data.itemHeight),
-    transform: 'translate3d(0, ' + offset + ', 0)',
-  });
-}
-
-function wrapperInterStyle(data) {
-  var offset = data.renderStart * data.itemHeight;
-  offset = addUnit(offset);
-  return style({
-    'padding-top': offset,
-  });
-}
-
-function wrapperItemStyle(data) {
-  var heightStyleStr = "height: " + data.itemHeight + 'px;'
-  var fontStyleStr = style(data.fontStyle);
-  var activeStyleStr = style(data.activeStyle);
-  return heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
-}
-
-// function wrapperItemStyle(data) {
-//   const { index, animationIndex: currentIndex } = data;
-//   const offsetIndex = currentIndex - index;
-//   const rotateX = offsetIndex * 25 > 0 ? Math.min(offsetIndex * 25, 25 * 2) : Math.max(offsetIndex * 25, -25 * 2)
-//   const scale = Math.min(Math.abs(offsetIndex * 0.05), 0.05 * 2)
-//   return style({
-//     transition: 'transform ' + data.duration + 'ms ease-out',
-//     transform: `rotateX(${rotateX}deg) scale(${1 - scale})`
-//   });
-// }
-
-module.exports = {
-  optionText: optionText,
-  rootStyle: rootStyle,
-  wrapperStyle: wrapperStyle,
-  wrapperInterStyle: wrapperInterStyle,
-  wrapperItemStyle: wrapperItemStyle
-};