@arco-design/mobile-react 2.24.2 → 2.25.0

package/cjs/slider/hooks/useSliderEvents.js

@@ -2,42 +2,33 @@
 
 exports.__esModule = true;
 exports.useSliderEvents = void 0;
-
 var _react = require("react");
-
 var _ = require(".");
-
 var IsTouchingStatus;
-
 (function (IsTouchingStatus) {
   IsTouchingStatus[IsTouchingStatus["Idle"] = 0] = "Idle";
   IsTouchingStatus[IsTouchingStatus["Start"] = 1] = "Start";
   IsTouchingStatus[IsTouchingStatus["Moving"] = 2] = "Moving";
 })(IsTouchingStatus || (IsTouchingStatus = {}));
-
 var useSliderEvents = function useSliderEvents(_ref) {
   var getLinePosition = _ref.getLinePosition,
-      lineRef = _ref.lineRef,
-      valueGroup = _ref.valueGroup,
-      setValueGroup = _ref.setValueGroup,
-      setCommonIsTouching = _ref.setCommonIsTouching;
-
+    lineRef = _ref.lineRef,
+    valueGroup = _ref.valueGroup,
+    setValueGroup = _ref.setValueGroup,
+    setCommonIsTouching = _ref.setCommonIsTouching;
   var _useContext = (0, _react.useContext)(_.SliderContext),
-      disabled = _useContext.disabled,
-      step = _useContext.step,
-      min = _useContext.min,
-      max = _useContext.max,
-      type = _useContext.type,
-      draggableTrackOnly = _useContext.draggableTrackOnly;
-
+    disabled = _useContext.disabled,
+    step = _useContext.step,
+    min = _useContext.min,
+    max = _useContext.max,
+    type = _useContext.type,
+    draggableTrackOnly = _useContext.draggableTrackOnly;
   var _useState = (0, _react.useState)(IsTouchingStatus.Idle),
-      isTouching = _useState[0],
-      setIsTouching = _useState[1];
-
+    isTouching = _useState[0],
+    setIsTouching = _useState[1];
   var _useState2 = (0, _react.useState)(0),
-      touchStartPosition = _useState2[0],
-      setTouchStartPosition = _useState2[1];
-
+    touchStartPosition = _useState2[0],
+    setTouchStartPosition = _useState2[1];
   var linePositionRef = (0, _react.useRef)({
     length: 0,
     start: 0
@@ -46,131 +37,112 @@ var useSliderEvents = function useSliderEvents(_ref) {
   var validateValue = (0, _react.useCallback)(function (value) {
     if (value >= min && value <= max) return value;
     return value <= (min + max) / 2 ? min : max;
-  }, [min, max]); // 通过位置获取值
-  // @en Get value by position
+  }, [min, max]);
 
+  // 通过位置获取值
+  // @en Get value by position
   var getValueFromPosition = (0, _react.useCallback)(function (touchPosition) {
     var _linePositionRef$curr = linePositionRef.current,
-        length = _linePositionRef$curr.length,
-        start = _linePositionRef$curr.start;
+      length = _linePositionRef$curr.length,
+      start = _linePositionRef$curr.start;
     if (length === 0) return 0;
     var newWidth = isHorizontal ? touchPosition - start : length - touchPosition + start;
-
     if (newWidth < 0) {
       newWidth = 0;
     } else if (newWidth > length) {
       newWidth = length;
     }
-
     var newRealTimeValue = validateValue(Math.round(newWidth / length * (max - min) / step) * step + min);
     return newRealTimeValue;
-  }, [isHorizontal, max, min, step]); // 设置不同的值，因为可以点击 line ，需要提前计算具体修改的是哪个值。
-  // @en Set different values. Because line can  be clicked, it needs to calculate which value to modify in advance.
+  }, [isHorizontal, max, min, step]);
 
+  // 设置不同的值，因为可以点击 line ，需要提前计算具体修改的是哪个值。
+  // @en Set different values. Because line can  be clicked, it needs to calculate which value to modify in advance.
   var setCommonValue = (0, _react.useMemo)(function () {
     var start = getValueFromPosition(touchStartPosition);
-
     if (!Array.isArray(valueGroup)) {
       if (isTouching) {
         setValueGroup(start);
         setCommonIsTouching(0);
         setIsTouching(IsTouchingStatus.Moving);
       }
-
       return function (realTimeValue) {
         setValueGroup(realTimeValue);
       };
     } else {
       var index = Math.abs(valueGroup[0] - start) < Math.abs(valueGroup[1] - start) ? 0 : 1;
-
       var handleValue = function handleValue(realTimeValue) {
         setValueGroup(function (passValueGroup) {
           if (typeof passValueGroup === 'number') {
             return [passValueGroup, realTimeValue];
           }
-
           var newValueGroup = [].concat(passValueGroup);
           newValueGroup[index] = realTimeValue;
           return newValueGroup;
         });
       };
-
       if (isTouching) {
         setCommonIsTouching(index);
         handleValue(start);
         setIsTouching(IsTouchingStatus.Moving);
       }
-
       return handleValue;
     }
   }, [touchStartPosition, getValueFromPosition]);
   (0, _react.useEffect)(function () {
     var _lineRef$current;
-
     if (disabled) return;
-
     var handleTouchStart = function handleTouchStart(e) {
       if (draggableTrackOnly && e.target === lineRef.current) return;
       linePositionRef.current = getLinePosition();
       var _e$touches$ = e.touches[0],
-          clientX = _e$touches$.clientX,
-          clientY = _e$touches$.clientY;
+        clientX = _e$touches$.clientX,
+        clientY = _e$touches$.clientY;
       var touchPosition = isHorizontal ? clientX : clientY;
       setIsTouching(IsTouchingStatus.Start);
       setTouchStartPosition(touchPosition);
       e.stopPropagation();
       e.preventDefault();
     };
-
     (_lineRef$current = lineRef.current) == null ? void 0 : _lineRef$current.addEventListener('touchstart', handleTouchStart);
     return function () {
       var _lineRef$current2;
-
       !disabled && ((_lineRef$current2 = lineRef.current) == null ? void 0 : _lineRef$current2.removeEventListener('touchstart', handleTouchStart));
     };
   }, [disabled, isHorizontal, draggableTrackOnly]);
   (0, _react.useEffect)(function () {
     var _lineRef$current3;
-
     if (disabled) return;
-
     var handleTouchMove = function handleTouchMove(e) {
       if (isTouching === IsTouchingStatus.Moving) {
         var _e$touches$2 = e.touches[0],
-            clientX = _e$touches$2.clientX,
-            clientY = _e$touches$2.clientY;
+          clientX = _e$touches$2.clientX,
+          clientY = _e$touches$2.clientY;
         var touchPosition = isHorizontal ? clientX : clientY;
         setCommonValue(getValueFromPosition(touchPosition));
       }
-
       e.stopPropagation();
       e.cancelable && e.preventDefault();
     };
-
     (_lineRef$current3 = lineRef.current) == null ? void 0 : _lineRef$current3.addEventListener('touchmove', handleTouchMove);
     return function () {
       var _lineRef$current4;
-
       !disabled && ((_lineRef$current4 = lineRef.current) == null ? void 0 : _lineRef$current4.removeEventListener('touchmove', handleTouchMove));
     };
   }, [disabled, isHorizontal, isTouching]);
   (0, _react.useEffect)(function () {
     var _lineRef$current5, _lineRef$current6;
-
     if (disabled) return;
-
     var handleTouchEnd = function handleTouchEnd(e) {
       setIsTouching(IsTouchingStatus.Idle);
       setCommonIsTouching(-1);
       e.stopPropagation();
       e.preventDefault();
     };
-
     (_lineRef$current5 = lineRef.current) == null ? void 0 : _lineRef$current5.addEventListener('touchend', handleTouchEnd);
     (_lineRef$current6 = lineRef.current) == null ? void 0 : _lineRef$current6.addEventListener('touchcancel', handleTouchEnd);
     return function () {
       var _lineRef$current7, _lineRef$current8;
-
       !disabled && ((_lineRef$current7 = lineRef.current) == null ? void 0 : _lineRef$current7.removeEventListener('touchend', handleTouchEnd));
       !disabled && ((_lineRef$current8 = lineRef.current) == null ? void 0 : _lineRef$current8.removeEventListener('touchcancel', handleTouchEnd));
     };
@@ -179,5 +151,4 @@ var useSliderEvents = function useSliderEvents(_ref) {
     isTouching: isTouching
   };
 };
-
 exports.useSliderEvents = useSliderEvents;

package/cjs/slider/hooks/useSliderIcon.js

@@ -2,34 +2,24 @@
 
 exports.__esModule = true;
 exports.useSliderIcon = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _contextProvider = require("../../context-provider");
-
 var _ = require(".");
-
 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 useSliderIcon = function useSliderIcon(_ref) {
   var valueGroup = _ref.valueGroup;
-
   var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
-      _useContext$prefixCls = _useContext.prefixCls,
-      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
-
+    _useContext$prefixCls = _useContext.prefixCls,
+    prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
   var _useContext2 = (0, _react.useContext)(_.SliderContext),
-      max = _useContext2.max,
-      suffixLabel = _useContext2.suffixLabel,
-      min = _useContext2.min,
-      prefixLabel = _useContext2.prefixLabel;
-
+    max = _useContext2.max,
+    suffixLabel = _useContext2.suffixLabel,
+    min = _useContext2.min,
+    prefixLabel = _useContext2.prefixLabel;
   var renderPrefixLabel = (0, _react.useMemo)(function () {
     if (!prefixLabel) return null;
     var inner;
-
     if (typeof prefixLabel === 'boolean' && prefixLabel) {
       inner = min;
     } else if (typeof prefixLabel === 'function') {
@@ -37,7 +27,6 @@ var useSliderIcon = function useSliderIcon(_ref) {
     } else {
       inner = prefixLabel;
     }
-
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-slider-label is-prefix"
     }, inner);
@@ -45,7 +34,6 @@ var useSliderIcon = function useSliderIcon(_ref) {
   var renderSuffixLabel = (0, _react.useMemo)(function () {
     if (!suffixLabel) return null;
     var inner;
-
     if (typeof suffixLabel === 'boolean' && suffixLabel) {
       inner = max;
     } else if (typeof suffixLabel === 'function') {
@@ -53,7 +41,6 @@ var useSliderIcon = function useSliderIcon(_ref) {
     } else {
       inner = suffixLabel;
     }
-
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-slider-label is-suffix"
     }, inner);
@@ -63,5 +50,4 @@ var useSliderIcon = function useSliderIcon(_ref) {
     renderSuffixLabel: renderSuffixLabel
   };
 };
-
 exports.useSliderIcon = useSliderIcon;

package/cjs/slider/hooks/useSliderInit.js

@@ -2,48 +2,38 @@
 
 exports.__esModule = true;
 exports.useSliderInit = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _2 = require(".");
-
 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 useSliderInit = function useSliderInit(_ref) {
   var _ref2, _ctx$value;
-
   var commonIsTouching = _ref.commonIsTouching;
   var ctx = (0, _react.useContext)(_2.SliderContext);
   var value = ctx.value,
-      min = ctx.min,
-      max = ctx.max,
-      onAfterChange = ctx.onAfterChange,
-      onChange = ctx.onChange,
-      useMarkOnly = ctx.useMarkOnly,
-      marks = ctx.marks,
-      useRange = ctx.useRange;
+    min = ctx.min,
+    max = ctx.max,
+    onAfterChange = ctx.onAfterChange,
+    onChange = ctx.onChange,
+    useMarkOnly = ctx.useMarkOnly,
+    marks = ctx.marks,
+    useRange = ctx.useRange;
   var baseValue = (_ref2 = (_ctx$value = ctx == null ? void 0 : ctx.value) != null ? _ctx$value : ctx == null ? void 0 : ctx.defaultValue) != null ? _ref2 : min;
-
   var _useState = (0, _react.useState)(baseValue),
-      valueGroup = _useState[0],
-      setValueGroup = _useState[1];
-
+    valueGroup = _useState[0],
+    setValueGroup = _useState[1];
   var _useState2 = (0, _react.useState)(false),
-      firstRender = _useState2[0],
-      setFirstRender = _useState2[1];
-
+    firstRender = _useState2[0],
+    setFirstRender = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
-      firstTouch = _useState3[0],
-      setFirstTouch = _useState3[1]; // 基础标签数组
-  // @en Base mark list
-
+    firstTouch = _useState3[0],
+    setFirstTouch = _useState3[1];
 
+  // 基础标签数组
+  // @en Base mark list
   var baseConfig = (0, _react.useMemo)(function () {
     if (marks === void 0) return [];
     var res = [];
-
     if (typeof marks === 'number') {
       res = Array((max - min) / marks + 1).fill('').map(function (_, idx) {
         return idx * marks;
@@ -55,7 +45,6 @@ var useSliderInit = function useSliderInit(_ref) {
         return parseInt(e);
       });
     }
-
     return [].concat(res).filter(function (e) {
       return e <= max && e >= min;
     }).sort(function (a, b) {
@@ -64,17 +53,16 @@ var useSliderInit = function useSliderInit(_ref) {
   }, [marks, max, min]);
   var validate = (0, _react.useCallback)(function (newValue) {
     if (typeof valueGroup === 'number') return newValue <= valueGroup;
-
     var _sort = [].concat(valueGroup).sort(function (a, b) {
-      return a > b ? 1 : -1;
-    }),
-        small = _sort[0],
-        large = _sort[1];
-
+        return a > b ? 1 : -1;
+      }),
+      small = _sort[0],
+      large = _sort[1];
     return newValue >= small && newValue <= large;
-  }, [valueGroup]); // 实际 mark 标签
-  // @en Actual mark tags
+  }, [valueGroup]);
 
+  // 实际 mark 标签
+  // @en Actual mark tags
   var runTimeConfig = (0, _react.useMemo)(function () {
     return baseConfig.map(function (e) {
       var label = marks && !Array.isArray(marks) && marks[String(e)] && typeof marks !== 'number' ? marks[String(e)] : /*#__PURE__*/_react.default.createElement("p", null, e);
@@ -84,12 +72,12 @@ var useSliderInit = function useSliderInit(_ref) {
         label: label
       };
     });
-  }, [baseConfig, valueGroup, validate, marks]); // 当前值最近的标签值
-  // @en The mark value closest to the current value
+  }, [baseConfig, valueGroup, validate, marks]);
 
+  // 当前值最近的标签值
+  // @en The mark value closest to the current value
   var formatMarksValue = (0, _react.useCallback)(function (newValue) {
     if (!useMarkOnly || marks === void 0) return newValue;
-
     var format = function format(v) {
       var idx;
       baseConfig.forEach(function (e, i) {
@@ -97,72 +85,67 @@ var useSliderInit = function useSliderInit(_ref) {
           idx = i;
         }
       });
-
       if (idx !== void 0) {
         var largerIdx = idx + 1;
-
         if (largerIdx < baseConfig.length && Math.abs(baseConfig[largerIdx] - v) < Math.abs(baseConfig[idx] - v)) {
           return baseConfig[largerIdx];
         }
-
         return baseConfig[idx];
       }
-
       return baseConfig[0];
     };
-
     if (typeof newValue === 'number') return format(newValue);
     return newValue.map(function (v) {
       return format(v);
     });
   }, [useMarkOnly, marks, baseConfig]);
+
   /**
    * 标记第一次渲染，方便获取位置
    * @en Mark the first render for easy location
    */
-
   (0, _react.useEffect)(function () {
     if (commonIsTouching) setFirstTouch(true);
   }, [commonIsTouching]);
+
   /**
    * 是否为 range，多个游标
    * @en Whether it is range, multiple cursors
    */
-
   var isMultiThumb = (0, _react.useMemo)(function () {
     return useRange || Array.isArray(baseValue);
   }, [useRange, typeof baseValue === 'number']);
+
   /**
    * 为 range 组件初始化数据
    * @en Initialize data for the range component
    */
-
   (0, _react.useEffect)(function () {
     setFirstRender(true);
     /**
      * 初始化数据
      * @en Initialize data
      */
-
     var newValue = isMultiThumb && typeof valueGroup === 'number' ? formatMarksValue([valueGroup, valueGroup]) : formatMarksValue(valueGroup);
     setValueGroup(newValue);
   }, [isMultiThumb]);
+
   /**
    * 监听数据 value 变化
    * @en Monitor data value changes
    */
-
   (0, _react.useEffect)(function () {
     if (value === void 0 || !firstRender || commonIsTouching !== -1) return;
     var newValue = isMultiThumb && typeof value === 'number' ? formatMarksValue([value, value]) : formatMarksValue(value);
-    setValueGroup(newValue); // 如果受控需要还原
+    setValueGroup(newValue);
+    // 如果受控需要还原
     // @en If controlled, it needs to restore
   }, [firstRender && value, commonIsTouching]);
+
   /**
    * 上报排序后的值
    * @en report sorted value
    */
-
   var formatValueGroup = (0, _react.useMemo)(function () {
     return typeof valueGroup === 'number' ? valueGroup : [].concat(valueGroup).sort(function (a, b) {
       return a > b ? 1 : -1;
@@ -174,10 +157,8 @@ var useSliderInit = function useSliderInit(_ref) {
   }, [valueGroup]);
   (0, _react.useEffect)(function () {
     if (!firstTouch) return;
-
     if (commonIsTouching === -1) {
       onAfterChange(formatMarksValue(formatValueGroup));
-
       if (value === void 0) {
         var newValue = formatMarksValue(valueGroup);
         setValueGroup(newValue);
@@ -192,5 +173,4 @@ var useSliderInit = function useSliderInit(_ref) {
     isMultiThumb: isMultiThumb
   };
 };
-
 exports.useSliderInit = useSliderInit;

package/cjs/slider/hooks/useSliderStyle.js

@@ -2,27 +2,21 @@
 
 exports.__esModule = true;
 exports.useSliderStyle = void 0;
-
 var _react = require("react");
-
 var _ = require(".");
-
 var useSliderStyle = function useSliderStyle(_ref) {
   var getLinePosition = _ref.getLinePosition,
-      commonIsTouching = _ref.commonIsTouching,
-      valueGroup = _ref.valueGroup;
-
+    commonIsTouching = _ref.commonIsTouching,
+    valueGroup = _ref.valueGroup;
   var _useContext = (0, _react.useContext)(_.SliderContext),
-      size = _useContext.size,
-      useAnimation = _useContext.useAnimation,
-      min = _useContext.min,
-      max = _useContext.max,
-      type = _useContext.type;
-
+    size = _useContext.size,
+    useAnimation = _useContext.useAnimation,
+    min = _useContext.min,
+    max = _useContext.max,
+    type = _useContext.type;
   var isHorizontal = /^horizontal/g.test(type);
   var heightStyle = (0, _react.useMemo)(function () {
     var _ref2;
-
     if (size === void 0) return {};
     var sizeCount = typeof size === 'string' ? parseInt(size) : size;
     return _ref2 = {}, _ref2[isHorizontal ? 'height' : 'width'] = sizeCount + "px", _ref2;
@@ -32,25 +26,20 @@ var useSliderStyle = function useSliderStyle(_ref) {
   }, [commonIsTouching, useAnimation]);
   var activeLineStyle = (0, _react.useMemo)(function () {
     var _ref3;
-
     var _getLinePosition = getLinePosition(),
-        length = _getLinePosition.length;
-
+      length = _getLinePosition.length;
     var start = 0;
-
     if (typeof valueGroup === 'number') {
       length *= (valueGroup - min) / (max - min);
     } else {
       var _sort = [].concat(valueGroup).sort(function (a, b) {
-        return a > b ? 1 : -1;
-      }),
-          smaller = _sort[0],
-          larger = _sort[1];
-
+          return a > b ? 1 : -1;
+        }),
+        smaller = _sort[0],
+        larger = _sort[1];
       start = (smaller - min) / (max - min) * length;
       length = (larger - min) / (max - min) * length - start;
     }
-
     return _ref3 = {}, _ref3[isHorizontal ? 'left' : 'bottom'] = start + "px", _ref3[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _ref3;
   }, [valueGroup, getLinePosition, min, max, isHorizontal]);
   return {
@@ -59,5 +48,4 @@ var useSliderStyle = function useSliderStyle(_ref) {
     activeLineStyle: activeLineStyle
   };
 };
-
 exports.useSliderStyle = useSliderStyle;

package/cjs/slider/index.d.ts

@@ -138,6 +138,7 @@ export interface SliderRef {
      */
     dom: HTMLDivElement | null;
 }
+declare const _default: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRef>> & "Slider";
 /**
  * 滑动型输入器，展示当前值和可选范围。
  * @en Slide input component, displays the current value and optional range.
@@ -145,6 +146,6 @@ export interface SliderRef {
  * @name_en Slider
  * @type 数据录入
  * @type_en Data Entry
+ * @displayName Slider
  */
-declare const SliderWrapper: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRef>>;
-export default SliderWrapper;
+export default _default;