@arco-design/mobile-react 2.25.3 → 2.26.0

package/cjs/slider/hooks/useSliderEvents.js

@@ -2,33 +2,42 @@
 
 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
@@ -37,112 +46,131 @@ 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]);
-
-  // 通过位置获取值
+  }, [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 ，需要提前计算具体修改的是哪个值。
+  }, [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));
     };
@@ -151,4 +179,5 @@ var useSliderEvents = function useSliderEvents(_ref) {
     isTouching: isTouching
   };
 };
+
 exports.useSliderEvents = useSliderEvents;

package/cjs/slider/hooks/useSliderIcon.js

@@ -2,24 +2,34 @@
 
 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') {
@@ -27,6 +37,7 @@ var useSliderIcon = function useSliderIcon(_ref) {
     } else {
       inner = prefixLabel;
     }
+
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-slider-label is-prefix"
     }, inner);
@@ -34,6 +45,7 @@ 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') {
@@ -41,6 +53,7 @@ var useSliderIcon = function useSliderIcon(_ref) {
     } else {
       inner = suffixLabel;
     }
+
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-slider-label is-suffix"
     }, inner);
@@ -50,4 +63,5 @@ var useSliderIcon = function useSliderIcon(_ref) {
     renderSuffixLabel: renderSuffixLabel
   };
 };
+
 exports.useSliderIcon = useSliderIcon;

package/cjs/slider/hooks/useSliderInit.js

@@ -2,38 +2,48 @@
 
 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];
-  var _useState3 = (0, _react.useState)(false),
-    firstTouch = _useState3[0],
-    setFirstTouch = _useState3[1];
+      firstRender = _useState2[0],
+      setFirstRender = _useState2[1];
 
-  // 基础标签数组
+  var _useState3 = (0, _react.useState)(false),
+      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;
@@ -45,6 +55,7 @@ var useSliderInit = function useSliderInit(_ref) {
         return parseInt(e);
       });
     }
+
     return [].concat(res).filter(function (e) {
       return e <= max && e >= min;
     }).sort(function (a, b) {
@@ -53,16 +64,17 @@ 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 newValue >= small && newValue <= large;
-  }, [valueGroup]);
+      return a > b ? 1 : -1;
+    }),
+        small = _sort[0],
+        large = _sort[1];
 
-  // 实际 mark 标签
+    return newValue >= small && newValue <= large;
+  }, [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);
@@ -72,12 +84,12 @@ var useSliderInit = function useSliderInit(_ref) {
         label: label
       };
     });
-  }, [baseConfig, valueGroup, validate, marks]);
-
-  // 当前值最近的标签值
+  }, [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) {
@@ -85,67 +97,72 @@ 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;
@@ -157,8 +174,10 @@ 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);
@@ -173,4 +192,5 @@ var useSliderInit = function useSliderInit(_ref) {
     isMultiThumb: isMultiThumb
   };
 };
+
 exports.useSliderInit = useSliderInit;

package/cjs/slider/hooks/useSliderStyle.js

@@ -2,21 +2,27 @@
 
 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;
@@ -26,20 +32,25 @@ 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 {
@@ -48,4 +59,5 @@ var useSliderStyle = function useSliderStyle(_ref) {
     activeLineStyle: activeLineStyle
   };
 };
+
 exports.useSliderStyle = useSliderStyle;