@arco-design/mobile-react 2.19.0

package/cjs/picker-view/components/multi-picker.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = MultiPicker;
+
+var _react = _interopRequireDefault(require("react"));
+
+function MultiPicker(props) {
+  var prefixCls = props.prefixCls,
+      onValueChange = props.onValueChange,
+      onPickerChange = props.onPickerChange,
+      children = props.children,
+      itemHeight = props.itemHeight,
+      selectedValue = props.selectedValue,
+      data = props.data;
+
+  function getValue() {
+    if (selectedValue && selectedValue.length) {
+      return selectedValue;
+    }
+
+    if (data) {
+      return data.map(function (item) {
+        return item && item[0] && item[0].value;
+      });
+    }
+
+    if (!children) {
+      return [];
+    }
+
+    return _react.default.Children.map(children, function (child) {
+      var childrenArray = _react.default.Children.toArray(child.children || child.props.children);
+
+      return childrenArray && childrenArray[0] && childrenArray[0].props.value;
+    });
+  }
+
+  function onChange(index, value, callback) {
+    var newValue = getValue().concat();
+    newValue[index] = value;
+
+    if (callback) {
+      callback(newValue, index);
+    }
+  }
+
+  function _onValueChange(value, index) {
+    onChange(index, value, onValueChange);
+  }
+
+  function _onScrollChange(value, index) {
+    onChange(index, value, onPickerChange);
+  }
+
+  function renderChild() {
+    var value = getValue();
+    return _react.default.Children.map(children, function (col, index) {
+      return /*#__PURE__*/_react.default.cloneElement(col, {
+        onScrollChange: function onScrollChange(val) {
+          return _onScrollChange(val, index);
+        },
+        onValueChange: function onValueChange(val) {
+          return _onValueChange(val, index);
+        },
+        selectedValue: value[index]
+      });
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-multi",
+    style: {
+      lineHeight: itemHeight + "px"
+    }
+  }, renderChild());
+}

package/cjs/picker-view/components/picker-cell.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ValueType, PickerData, PickerCellMovingStatus } from '../type';
+export interface PickerCellProps {
+    prefixCls: string;
+    style?: React.CSSProperties;
+    data: PickerData[];
+    clickable: boolean;
+    itemHeight: number;
+    wrapperHeight: number;
+    selectedValue?: ValueType;
+    onValueChange?: (value: ValueType) => void;
+    disabled: boolean;
+    hideEmptyCols?: boolean;
+    /**
+     * 一列展示可选项的个数，默认是5，最小为3
+     * @en The number of options displayed in a column, the default is 5, the minimum is 3
+     */
+    rows?: number;
+    touchToStop?: boolean | number;
+}
+export interface PickerCellRef {
+    movingStatus: PickerCellMovingStatus;
+    scrollToCurrentIndex: () => void;
+}
+declare const PickerCell: React.ForwardRefExoticComponent<PickerCellProps & React.RefAttributes<PickerCellRef>>;
+export default PickerCell;

package/cjs/picker-view/components/picker-cell.js

@@ -0,0 +1,382 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _helpers = require("../../_helpers");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var prefixCls = props.prefixCls,
+      style = props.style,
+      data = props.data,
+      clickable = props.clickable,
+      itemHeight = props.itemHeight,
+      wrapperHeight = props.wrapperHeight,
+      selectedValue = props.selectedValue,
+      onValueChange = props.onValueChange,
+      disabled = props.disabled,
+      hideEmptyCols = props.hideEmptyCols,
+      _props$rows = props.rows,
+      rows = _props$rows === void 0 ? 5 : _props$rows,
+      _props$touchToStop = props.touchToStop,
+      touchToStop = _props$touchToStop === void 0 ? false : _props$touchToStop;
+
+  var _useMountedState = (0, _helpers.useMountedState)(''),
+      transitionDuration = _useMountedState[0],
+      setTransitionDuration = _useMountedState[1];
+
+  var _useState = (0, _react.useState)(''),
+      bezier = _useState[0],
+      setBezier = _useState[1];
+
+  var _useMountedState2 = (0, _helpers.useMountedState)(0),
+      currentIndex = _useMountedState2[0],
+      setCurrentIndex = _useMountedState2[1];
+
+  var _useMountedState3 = (0, _helpers.useMountedState)(selectedValue),
+      currentValue = _useMountedState3[0],
+      setCurrentValue = _useMountedState3[1]; // 是否开始touch
+  // @en whether to start touch
+
+
+  var _useRefState = (0, _helpers.useRefState)(0),
+      transformY = _useRefState[0],
+      transformYRef = _useRefState[1],
+      setTransformY = _useRefState[2];
+
+  var lastTransformYRef = (0, _react.useRef)(0);
+  var touchStartTimeRef = (0, _react.useRef)(0);
+  var latestCallbackTimer = (0, _react.useRef)(0);
+  var touchStartXRef = (0, _react.useRef)(0);
+  var touchStartYRef = (0, _react.useRef)(0);
+  var touchingRef = (0, _react.useRef)(false);
+  var touchingXRef = (0, _react.useRef)(null);
+  var wrapRef = (0, _react.useRef)(null);
+  var movingStatusRef = (0, _react.useRef)('normal');
+  var rowCount = Math.max(rows % 2 === 0 ? rows + 1 : rows, 3);
+  var isTouchMoveRef = (0, _react.useRef)(false);
+  var isTouchStopped = (0, _react.useRef)(false);
+  var timeRef = (0, _react.useRef)(null);
+  var colStyle = (0, _react.useMemo)(function () {
+    return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({
+      transform: "translate3d(0px, " + (transformY || 0) + "px, 0px)"
+    }, transitionDuration ? {
+      transitionDuration: transitionDuration
+    } : {}, {
+      transitionTimingFunction: bezier,
+      paddingBottom: (rowCount - 1) / 2 * itemHeight + "px",
+      paddingTop: (rowCount - 1) / 2 * itemHeight + "px"
+    }));
+  }, [transitionDuration, transformY, bezier, itemHeight, rowCount]);
+
+  function _scrollingComplete(nowItemIndex) {
+    // index有改变时再抛出
+    // @en Throws again when index changes
+    if (currentIndex !== nowItemIndex) {
+      setCurrentIndex(nowItemIndex);
+      var newValue = data[nowItemIndex] && data[nowItemIndex].value;
+
+      if (newValue !== currentValue) {
+        // if (!('selectedValue' in props)) {
+        //     setCurrentValue(newValue);
+        // }
+        setCurrentValue(newValue);
+
+        if (onValueChange) {
+          onValueChange(newValue);
+        }
+      }
+    }
+  }
+
+  function _scrollTo(transY, transDuration, callback) {
+    if (transDuration === void 0) {
+      transDuration = 0;
+    }
+
+    if (callback === void 0) {
+      callback = function callback() {};
+    }
+
+    setTransitionDuration(transDuration ? transDuration + "ms" : '');
+    setTransformY(transY); // 处理连续滑动的情况：
+    // @en handle the case of continuous sliding:
+    // 如果上一次callback还未执行，先cancel掉上一次回调，只执行最近的一次回调
+    // @en If the last callback has not been executed, cancel the last callback first, and only execute the latest callback
+
+    if (latestCallbackTimer.current) {
+      clearTimeout(latestCallbackTimer.current);
+    }
+
+    latestCallbackTimer.current = window.setTimeout(function () {
+      movingStatusRef.current = 'normal';
+      setTransitionDuration('');
+      callback();
+    }, transDuration);
+  }
+
+  function _scrollToIndex(itemIndex, transDuration, callback) {
+    if (transDuration === void 0) {
+      transDuration = 0;
+    }
+
+    if (callback === void 0) {
+      callback = function callback() {};
+    }
+
+    _scrollTo(-1 * itemIndex * itemHeight, transDuration, callback);
+  }
+
+  function _scrollToIndexWithChange(itemIndex, transDuration) {
+    if (transDuration === void 0) {
+      transDuration = 0;
+    }
+
+    _scrollToIndex(itemIndex, transDuration, function () {
+      _scrollingComplete(itemIndex);
+    });
+  }
+
+  var _handleColumnTouchStart = (0, _react.useCallback)(function (e) {
+    if (disabled) {
+      return;
+    }
+
+    isTouchMoveRef.current = false;
+    movingStatusRef.current = 'moving';
+    var x = e.touches[0].screenX;
+    var y = e.touches[0].screenY;
+    touchStartTimeRef.current = Date.now();
+    touchingRef.current = true;
+    touchingXRef.current = null;
+    touchStartXRef.current = x;
+    touchStartYRef.current = y;
+    lastTransformYRef.current = transformYRef.current;
+  }, [disabled]);
+
+  var _handleColumnTouchMove = (0, _react.useCallback)(function (e) {
+    if (disabled || !touchingRef.current) {
+      return;
+    }
+
+    isTouchMoveRef.current = true;
+    var lastTransformY = lastTransformYRef.current;
+    var touchMoveX = e.touches[0].screenX;
+    var touchMoveY = e.touches[0].screenY;
+    var distanceX = touchMoveX - touchStartXRef.current;
+    var distance = touchMoveY - touchStartYRef.current;
+
+    if (touchingXRef.current === null) {
+      touchingXRef.current = Math.abs(distanceX) > Math.abs(distance);
+    }
+
+    if (touchingXRef.current) {
+      return;
+    }
+
+    e.cancelable && e.preventDefault();
+    var newPos = lastTransformY + distance;
+    var maxPos = -1 * (data.length - 1) * itemHeight; // 当滚动到上边界或下边界时增加阻尼效果
+    // @en Add damping effect when scrolling to the upper or lower border
+
+    setTransformY(lastTransformY >= 0 && distance > 0 || lastTransformY <= maxPos && distance < 0 ? lastTransformY + distance / 4 : newPos);
+  }, [data.length, disabled, itemHeight]);
+
+  function _handleScrollEnd() {
+    var maxIndex = data.length - 1;
+    var nowIndex = Math.max(0, Math.min(maxIndex, Math.round(-1 * transformY / itemHeight))); // 滚动（包括加动量的滚动）完成之后定位到最近的一个index上
+    // @en After scrolling (including scrolling with momentum) is completed, it is positioned on the nearest index
+
+    _scrollToIndexWithChange(nowIndex, 200);
+  } // Reference: https://juejin.im/post/6844904185121488910
+
+
+  function momentum(current, start, duration, minY, maxY) {
+    var durationMap = {
+      noBounce: 2000,
+      weekBounce: 500,
+      strongBounce: 300
+    };
+    var bezierMap = {
+      noBounce: 'cubic-bezier(.17, .89, .45, 1)',
+      weekBounce: 'cubic-bezier(.25, .46, .45, .94)',
+      strongBounce: 'cubic-bezier(.25, .46, .45, .94)'
+    };
+    var type = 'noBounce'; // 惯性滑动加速度
+    // @en inertial sliding acceleration
+
+    var deceleration = 0.003; // 回弹阻力
+    // @en rebound resistance
+
+    var bounceRate = 5; // 强弱回弹的分割值
+    // @en Split value of strong and weak rebound
+
+    var bounceThreshold = 300; // 回弹的最大限度
+    // @en maximum rebound
+
+    var maxOverflowY = wrapperHeight / 6;
+    var overflowY;
+    var distance = current - start;
+    var speed = 2 * Math.abs(distance) / duration;
+    var destination = current + speed / deceleration * (distance < 0 ? -1 : 1);
+
+    if (destination < minY) {
+      overflowY = minY - destination;
+      type = overflowY > bounceThreshold ? 'strongBounce' : 'weekBounce';
+      destination = Math.max(minY - maxOverflowY, minY - overflowY / bounceRate);
+    } else if (destination > maxY) {
+      overflowY = destination - maxY;
+      type = overflowY > bounceThreshold ? 'strongBounce' : 'weekBounce';
+      destination = Math.min(maxY + maxOverflowY, maxY + overflowY / bounceRate);
+    }
+
+    return {
+      destination: destination,
+      duration: durationMap[type],
+      bezier: bezierMap[type]
+    };
+  }
+
+  function _handleColumnTouchEnd() {
+    _clearTimer();
+
+    movingStatusRef.current = 'normal';
+    var lastTransformY = lastTransformYRef.current;
+
+    if (!isTouchMoveRef.current || transformY === lastTransformY) {
+      return;
+    }
+
+    touchingRef.current = false;
+    var endTime = Date.now();
+    var scrollerHeight = (data.length + rowCount - 1) * itemHeight;
+    var duration = endTime - touchStartTimeRef.current;
+    var absDistY = Math.abs(transformY - lastTransformY); // 计算动量，保证滚动顺畅，条件：手势时间小于300ms && 移动距离绝对值大于30时
+    // @en Calculate the momentum to ensure smooth scrolling, condition: the gesture time is less than 300ms && the absolute value of the moving distance is greater than 30
+
+    if (duration < 300 && absDistY > 30) {
+      var momentumY = momentum(transformY, lastTransformY, duration, wrapperHeight - scrollerHeight, 0);
+      var newItemIndex = Math.max(0, Math.min(data.length - 1, Math.round(-1 * momentumY.destination / itemHeight)));
+      setBezier(momentumY.bezier);
+      movingStatusRef.current = 'scrolling';
+
+      _scrollToIndex(newItemIndex, momentumY.duration, function () {
+        _scrollingComplete(newItemIndex);
+      });
+    } else {
+      _handleScrollEnd();
+    }
+  }
+
+  function scrollToCurrentIndex() {
+    if (!wrapRef.current) {
+      return;
+    }
+
+    var curStyle = window.getComputedStyle(wrapRef.current);
+    var transformMatrix = curStyle.transform || curStyle.webkitTransform || '';
+    var transY = Number(transformMatrix.replace(/matrix\((.*?)\)/, '$1').split(/,\s*/).slice(-1)[0]) || 0;
+    var maxIndex = data.length - 1;
+    var nowIndex = Math.max(0, Math.min(maxIndex, Math.round(-1 * transY / itemHeight))); // 滚动（包括加动量的滚动）完成之后定位到最近的一个index上
+    // @en After scrolling (including scrolling with momentum) is completed, it is positioned on the nearest index
+
+    _scrollToIndexWithChange(nowIndex, 0);
+  }
+
+  function _clearTimer() {
+    timeRef.current && clearTimeout(timeRef.current);
+    timeRef.current = null;
+  }
+
+  function _handleItemTouchStart() {
+    if (touchToStop === false) {
+      return;
+    }
+
+    isTouchStopped.current = false;
+    timeRef.current = window.setTimeout(function () {
+      if (!isTouchMoveRef.current) {
+        isTouchStopped.current = true;
+        scrollToCurrentIndex();
+      }
+    }, touchToStop === true ? 100 : touchToStop);
+  }
+
+  function _handleItemClick(itemIndex) {
+    if (!clickable || disabled || touchToStop !== false && isTouchStopped.current) {
+      return;
+    }
+
+    _scrollToIndexWithChange(itemIndex, 200);
+  }
+
+  (0, _react.useEffect)(function () {
+    if (wrapRef.current) {
+      wrapRef.current.addEventListener('touchstart', _handleColumnTouchStart);
+      wrapRef.current.addEventListener('touchmove', _handleColumnTouchMove);
+    }
+
+    return function () {
+      if (wrapRef.current) {
+        wrapRef.current.removeEventListener('touchstart', _handleColumnTouchStart);
+        wrapRef.current.removeEventListener('touchmove', _handleColumnTouchMove);
+      }
+    };
+  }, [_handleColumnTouchStart, _handleColumnTouchMove]);
+  (0, _react.useLayoutEffect)(function () {
+    if ('selectedValue' in props) {
+      var curIndex = data.findIndex(function (item) {
+        return item.value === selectedValue;
+      });
+      setCurrentIndex(curIndex);
+
+      if (curIndex >= 0) {
+        _scrollToIndexWithChange(curIndex);
+      }
+    }
+  }, [selectedValue, itemHeight, data]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      movingStatus: movingStatusRef.current,
+      scrollToCurrentIndex: scrollToCurrentIndex
+    };
+  });
+  return !hideEmptyCols || data && data.length ? /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-column"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-column-item-wrap",
+    style: colStyle,
+    ref: wrapRef,
+    onTouchStart: _handleItemTouchStart,
+    onTouchEnd: _handleColumnTouchEnd,
+    onTouchCancel: _handleColumnTouchEnd
+  }, data.map(function (item, index) {
+    var _cls;
+
+    var dis = Math.abs(index - currentIndex);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index + "_" + item.value,
+      className: (0, _mobileUtils.cls)(prefixCls + "-column-item", (_cls = {
+        selected: index === currentIndex
+      }, _cls["selected-neighbor-" + dis] = dis && dis <= Math.floor(rowCount / 2), _cls)),
+      style: style,
+      onClick: function onClick() {
+        return _handleItemClick(index);
+      }
+    }, item.label);
+  }))) : null;
+});
+var _default = PickerCell;
+exports.default = _default;

package/cjs/picker-view/demo/style/css/mobile.css

@@ -0,0 +1,3 @@
+#demo-picker-view .arcodesign-mobile-demo-content {
+  padding: 0;
+}

package/cjs/picker-view/demo/style/mobile.less

@@ -0,0 +1,7 @@
+@import '../../../../style/mixin.less';
+
+#demo-picker-view {
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+    }
+}

package/cjs/picker-view/index.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import MultiPicker from '../picker-view/components/multi-picker';
+import PickerCell from '../picker-view/components/picker-cell';
+import Cascader from '../picker-view/components/cascader';
+import { PickerViewProps, ValueType, PickerCellMovingStatus } from './type';
+export * from './type';
+export { MultiPicker, PickerCell, Cascader };
+export interface PickerViewRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 每一列的滑动状态
+     * @en Sliding state of each column
+     */
+    getCellMovingStatus: () => PickerCellMovingStatus[];
+    /**
+     * 获取所有列的值
+     * @en Get all column values
+     */
+    getAllColumnValues: () => ValueType[];
+    /**
+     * 获取第 n 列的值
+     * @en Get the value of the nth column
+     */
+    getColumnValue: (index: number) => ValueType;
+    /**
+     * 手动更新元素布局
+     * @en Manually update the element layout
+     */
+    updateLayout: () => void;
+    /**
+     * 重置选择器的值为传入的`value`值
+     * @en Reset the selector's value to the input value `value`
+     */
+    resetValue: () => void;
+    /**
+     * 直接跳到当前最近一行（调用时将中断滚动）
+     * @en Jump directly to the current most recent line (will break scrolling when called)
+     */
+    scrollToCurrentIndex: () => void;
+}
+/**
+ * 选择器视图组件，不含弹窗，方便使用方灵活定制选择器。
+ * @en The picker view component, not has contain popup, which is convenient for the user to flexibly customize the picker.
+ * @type 数据输入
+ * @type_en Data Entry
+ * @name 选择器视图
+ * @name_en PickerView
+ */
+declare const PickerView: React.ForwardRefExoticComponent<PickerViewProps & React.RefAttributes<PickerViewRef>>;
+export default PickerView;