@arco-design/mobile-react 2.19.0

package/umd/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;

package/umd/picker-view/index.js

@@ -0,0 +1,280 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "../context-provider", "../picker-view/components/multi-picker", "../picker-view/components/picker-cell", "../picker-view/components/cascader", "../_helpers", "./type"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("../context-provider"), require("../picker-view/components/multi-picker"), require("../picker-view/components/picker-cell"), require("../picker-view/components/cascader"), require("../_helpers"), require("./type"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.contextProvider, global.multiPicker, global.pickerCell, global.cascader, global._helpers, global.type);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _contextProvider, _multiPicker, _pickerCell, _cascader, _helpers, _type) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  var _exportNames = {
+    MultiPicker: true,
+    PickerCell: true,
+    Cascader: true
+  };
+  _exports.default = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+  _multiPicker = _interopRequireDefault(_multiPicker);
+  _exports.MultiPicker = _multiPicker.default;
+  _pickerCell = _interopRequireDefault(_pickerCell);
+  _exports.PickerCell = _pickerCell.default;
+  _cascader = _interopRequireDefault(_cascader);
+  _exports.Cascader = _cascader.default;
+  Object.keys(_type).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    if (key in _exports && _exports[key] === _type[key]) return;
+    _exports[key] = _type[key];
+  });
+
+  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; }
+
+  /**
+   * 选择器视图组件，不含弹窗，方便使用方灵活定制选择器。
+   * @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
+   */
+  var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        itemStyle = props.itemStyle,
+        _props$cascade = props.cascade,
+        cascade = _props$cascade === void 0 ? true : _props$cascade,
+        _props$cols = props.cols,
+        cols = _props$cols === void 0 ? 3 : _props$cols,
+        _props$rows = props.rows,
+        rows = _props$rows === void 0 ? 5 : _props$rows,
+        data = props.data,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? false : _props$disabled,
+        _props$clickable = props.clickable,
+        clickable = _props$clickable === void 0 ? true : _props$clickable,
+        value = props.value,
+        _props$hideEmptyCols = props.hideEmptyCols,
+        hideEmptyCols = _props$hideEmptyCols === void 0 ? false : _props$hideEmptyCols,
+        onPickerChange = props.onPickerChange,
+        _props$touchToStop = props.touchToStop,
+        touchToStop = _props$touchToStop === void 0 ? false : _props$touchToStop;
+
+    var _useState = (0, _react.useState)(0),
+        itemHeight = _useState[0],
+        setItemHeight = _useState[1];
+
+    var _useState2 = (0, _react.useState)(0),
+        wrapperHeight = _useState2[0],
+        setWrapperHeight = _useState2[1];
+
+    var _useMountedState = (0, _helpers.useMountedState)(value),
+        scrollValue = _useMountedState[0],
+        setScrollValue = _useMountedState[1];
+
+    var wrapperRef = (0, _react.useRef)(null);
+    var domRef = (0, _react.useRef)(null);
+    var barRef = (0, _react.useRef)(null);
+    var scrollValueRef = (0, _react.useRef)(value);
+    var pickerCellsRef = (0, _react.useRef)([]);
+    var cascaderRef = (0, _react.useRef)(null);
+    var innerData = (0, _react.useMemo)(function () {
+      var newData;
+
+      var isArray = function isArray(dt) {
+        return dt ? Array.isArray(dt[0]) : false;
+      };
+
+      var isStrOrNum = function isStrOrNum(dt) {
+        return typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number';
+      };
+
+      if (isArray(data)) {
+        if (isStrOrNum(data)) {
+          newData = data.map(function (item) {
+            return item.map(function (cell) {
+              return {
+                label: cell,
+                value: cell
+              };
+            });
+          });
+        } else {
+          newData = data;
+        }
+      } else {
+        newData = [data];
+      }
+
+      return newData;
+    }, [data]);
+    (0, _react.useEffect)(function () {
+      scrollValueRef.current = scrollValue;
+    }, [scrollValue]);
+
+    var getAllColumnValues = function getAllColumnValues() {
+      return scrollValueRef.current;
+    };
+
+    function getColumnValue(index) {
+      if (index === void 0) {
+        index = 0;
+      }
+
+      return scrollValueRef.current[index];
+    }
+
+    function getCellMovingStatus() {
+      var _cascaderRef$current;
+
+      return cascade ? ((_cascaderRef$current = cascaderRef.current) == null ? void 0 : _cascaderRef$current.getCellMovingStatus()) || [] : pickerCellsRef.current.map(function (cell) {
+        return cell.movingStatus;
+      });
+    }
+
+    function scrollToCurrentIndex() {
+      if (cascade) {
+        var _cascaderRef$current2;
+
+        (_cascaderRef$current2 = cascaderRef.current) == null ? void 0 : _cascaderRef$current2.scrollToCurrentIndex();
+        return;
+      }
+
+      pickerCellsRef.current.forEach(function (cell) {
+        return cell.scrollToCurrentIndex();
+      });
+    }
+
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current,
+        getCellMovingStatus: getCellMovingStatus,
+        getAllColumnValues: getAllColumnValues,
+        getColumnValue: getColumnValue,
+        updateLayout: updateLayout,
+        resetValue: resetValue,
+        scrollToCurrentIndex: scrollToCurrentIndex
+      };
+    });
+
+    function _onPickerChange(val, index) {
+      setScrollValue(val);
+
+      if (onPickerChange) {
+        onPickerChange(val, index);
+      }
+    }
+
+    function _onValueChange(val, index) {
+      setScrollValue(val);
+
+      if (onPickerChange) {
+        onPickerChange(val, index);
+      }
+    }
+
+    (0, _react.useEffect)(function () {
+      setScrollValue(value);
+    }, [value, setScrollValue]);
+    var updateWrapperHeight = (0, _react.useCallback)(function () {
+      if (wrapperRef && wrapperRef.current) {
+        setWrapperHeight(wrapperRef.current.offsetHeight);
+      }
+    }, [wrapperRef, setWrapperHeight]);
+
+    var updateItemHeight = function updateItemHeight() {
+      if (barRef.current) {
+        setItemHeight(barRef.current.getBoundingClientRect().height);
+      }
+    };
+
+    (0, _react.useEffect)(function () {
+      updateLayout();
+    }, []);
+
+    function updateLayout() {
+      updateWrapperHeight();
+      updateItemHeight();
+    }
+
+    function resetValue() {
+      setScrollValue(value);
+    }
+
+    var newItemStyle = (0, _extends2.default)({
+      height: itemHeight + "px"
+    }, itemStyle);
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+      var prefixCls = _ref.prefixCls;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-picker-view all-border-box " + className,
+        style: {
+          height: itemHeight * rows + "px"
+        },
+        ref: wrapperRef
+      }, cascade ? /*#__PURE__*/_react.default.createElement(_cascader.default, {
+        prefixCls: prefixCls || '',
+        cols: cols,
+        itemStyle: newItemStyle,
+        data: data,
+        selectedValue: scrollValue,
+        onValueChange: _onValueChange,
+        onPickerChange: _onPickerChange,
+        clickable: clickable,
+        itemHeight: itemHeight,
+        wrapperHeight: wrapperHeight,
+        disabled: disabled,
+        rows: rows,
+        hideEmptyCols: hideEmptyCols,
+        ref: cascaderRef,
+        touchToStop: touchToStop
+      }) : /*#__PURE__*/_react.default.createElement(_multiPicker.default, {
+        prefixCls: prefixCls + "-picker",
+        data: innerData,
+        itemHeight: itemHeight,
+        selectedValue: scrollValue,
+        onValueChange: _onValueChange,
+        onPickerChange: _onPickerChange
+      }, innerData.map(function (item, index) {
+        return /*#__PURE__*/_react.default.createElement(_pickerCell.default, {
+          key: index + "_picker_cell_normal",
+          data: item,
+          style: newItemStyle,
+          prefixCls: prefixCls + "-picker",
+          clickable: clickable,
+          itemHeight: itemHeight,
+          wrapperHeight: wrapperHeight,
+          disabled: disabled,
+          rows: rows,
+          hideEmptyCols: hideEmptyCols,
+          ref: function ref(cellRef) {
+            return cellRef && (pickerCellsRef.current[index] = cellRef);
+          },
+          touchToStop: touchToStop
+        });
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-picker-selection"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-picker-selection-mask " + prefixCls + "-picker-selection-mask-top"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        ref: barRef,
+        className: prefixCls + "-picker-selection-bar"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-picker-selection-mask " + prefixCls + "-picker-selection-mask-bottom"
+      })));
+    });
+  });
+  var _default = PickerView;
+  _exports.default = _default;
+});

package/umd/picker-view/style/css/index.css

@@ -0,0 +1,147 @@
+.arco-picker-view {
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  /* Firefox */
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently*/
+  height:  4.4rem ;
+  position: relative;
+}
+.arco-picker-multi {
+  color:  #1d2129 ;
+  font-size:  0.32rem ;
+  line-height:  0.88rem ;
+}
+.arco-picker-multi,
+.arco-picker-selection {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-picker-column {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  height: 100%;
+  overflow: hidden;
+  text-align: center;
+}
+.arco-picker-column-item-wrap {
+  box-sizing: content-box;
+  will-change: transform;
+}
+.arco-picker-column-item {
+  white-space: nowrap;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+.arco-picker-column-item::-webkit-scrollbar {
+  display: none;
+}
+.arco-picker-selection {
+  will-change: transform;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  pointer-events: none;
+}
+.arco-picker-selection-mask-top {
+  width: 100%;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  background:  -webkit-linear-gradient(top, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%) ;
+  background:  linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%) ;
+}
+.arco-picker-selection-mask-bottom {
+  width: 100%;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  background:  -webkit-linear-gradient(bottom, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%) ;
+  background:  linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%) ;
+}
+.arco-picker-selection-bar {
+  width: 100%;
+  height:  0.88rem ;
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 auto;
+          flex: 0 0 auto;
+  position: relative;
+  border-width: 0;
+}
+.arco-picker-selection-bar::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-picker-selection-bar::before {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-picker-selection-bar::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-picker-selection-bar::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-picker-selection-bar::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-picker-selection-bar::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}

package/umd/picker-view/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/umd/picker-view/style/css/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../../style/css/public.css", "./index.css"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../../style/css/public.css"), require("./index.css"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

package/umd/picker-view/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/umd/picker-view/style/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../style/public.less", "./index.less"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../style/public.less"), require("./index.less"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

package/umd/picker-view/style/index.less

@@ -0,0 +1,75 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-picker-view {
+    .noselect();
+    .use-var(height, picker-view-wrapper-height);
+    position: relative;
+}
+
+.@{prefix}-picker {
+
+    &-multi {
+        .use-var(color, font-color);
+        .use-var(font-size, picker-view-font-size);
+        .use-var(line-height, picker-view-cell-height);
+    }
+
+    &-multi,
+    &-selection {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    &-column {
+        flex: 1;
+        height: 100%;
+        overflow: hidden;
+        text-align: center;
+
+        &-item-wrap {
+            box-sizing: content-box;
+            will-change: transform;
+        }
+
+        &-item {
+            white-space: nowrap;
+            overflow-y: hidden;
+            overflow-x: auto;
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    &-selection {
+        will-change: transform;
+        flex-direction: column;
+        pointer-events: none;
+
+        &-mask-top {
+            width: 100%;
+            flex: 1;
+            .use-var(background, picker-view-mask-top-background);
+
+        }
+
+        &-mask-bottom {
+            width: 100%;
+            flex: 1;
+            .use-var(background, picker-view-mask-bottom-background);
+        }
+
+        &-bar {
+            width: 100%;
+            .use-var(height, picker-view-cell-height);
+            flex: 0 0 auto;
+            .onepx-border-var(top, picker-view-selection-border-color);
+            .onepx-border-var(bottom, picker-view-selection-border-color);
+        }
+    }
+}

package/umd/picker-view/type.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+export declare type PickerCellMovingStatus = 'normal' | 'moving' | 'scrolling';
+export declare type ValueType = string | number;
+export interface PickerData {
+    /**
+     * 每一列展示的每项文案对应的值
+     * @en The value for each item displayed in each column
+     */
+    value: ValueType;
+    /**
+     * 每一列展示的文案
+     * @en Text displayed in each column
+     */
+    label: React.ReactNode;
+    /**
+     * 级联状态下，该列对应的下一列数据
+     * @en In the cascade state, the next column of data corresponding to this column
+     */
+    children?: PickerData[];
+}
+export interface PickerViewProps {
+    /**
+     * 数据源，非级联时data数组的长度决定picker列数，级联时以cols决定 pick列数
+     * @en Data source, the length of the data list determines the number of picker columns when not cascading, and the number of picker columns is determined by cols when cascading
+     */
+    data: PickerData[] | PickerData[][] | ValueType[][];
+    /**
+     * 是否联动
+     * @en Whether to cascade
+     * @default true
+     */
+    cascade?: boolean;
+    /**
+     * 列数(最大为5；cascade=true时才使用)
+     * @en Number of columns (maximum 5; only used when cascade=true)
+     * @default 3
+     */
+    cols?: number;
+    /**
+     * 行数(一列可选项的行数)，必须是奇数，最小为3个
+     * @en The number of rows (the number of rows in a column of optional items), must be an odd number, the minimum is 3
+     * @default 5
+     */
+    rows?: number;
+    /**
+     * 是否不可用
+     * @en Disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 值, 格式是[value1, value2, value3], 对应数据源的相应级层value
+     * @en Value, the format is [value1, value2, value3], corresponding to the corresponding level value of the data source
+     */
+    value: ValueType[];
+    /**
+     * 每列数据选择变化后的回调函数
+     * @en The callback function after each column data selection changes
+     */
+    onPickerChange?: (value: ValueType[], index: number) => void;
+    /**
+     * 每列样式
+     * @en Stylesheet per column
+     */
+    itemStyle?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 是否可通过点击操作选择内容
+     * @en Whether content can be selected by clicking
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * 是否隐藏无数据的空列，常用于级联选择
+     * @en Whether to hide empty columns without data, often used for cascading selection
+     * @default false
+     */
+    hideEmptyCols?: boolean;
+    /**
+     * 是否通过长按停止滑动，传入数字 x 表示触摸超过 x 毫秒算长按，传 true 表示 x=100，长按事件与 click 事件互斥
+     * @en Whether to stop sliding by long-pressing, inputing the number x means that the touch exceeds x milliseconds to count as long-pressing, inputing true means that x=100, the long-press event and the click event are mutually exclusive
+     * @default false
+     */
+    touchToStop?: boolean | number;
+}