@arco-design/mobile-react 2.38.4 → 2.39.0

package/esm/skeleton/index.js

@@ -5,40 +5,34 @@ import { GlobalContext } from '../context-provider';
 import { SkeletonAvatar as Avatar, SkeletonGrid as Grid, SkeletonNode as Node, SkeletonParagraph as Paragraph, SkeletonTitle as Title } from './elements';
 import { SkeletonContext } from './skeleton-context';
 export * from './type';
-
 function getComponentProps(prop) {
   if (prop && typeof prop === 'object') {
     return prop;
   }
-
   return {};
 }
-
 var Skeleton = /*#__PURE__*/forwardRef(function (props, ref) {
   var _cls;
-
   var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      style = props.style,
-      children = props.children,
-      _props$title = props.title,
-      title = _props$title === void 0 ? true : _props$title,
-      _props$paragraph = props.paragraph,
-      paragraph = _props$paragraph === void 0 ? true : _props$paragraph,
-      _props$avatar = props.avatar,
-      avatar = _props$avatar === void 0 ? false : _props$avatar,
-      grid = props.grid,
-      _props$showAnimation = props.showAnimation,
-      showAnimation = _props$showAnimation === void 0 ? true : _props$showAnimation,
-      _props$animation = props.animation,
-      animation = _props$animation === void 0 ? 'gradient' : _props$animation,
-      animationGradientColor = props.animationGradientColor,
-      backgroundColor = props.backgroundColor;
+    className = _props$className === void 0 ? '' : _props$className,
+    style = props.style,
+    children = props.children,
+    _props$title = props.title,
+    title = _props$title === void 0 ? true : _props$title,
+    _props$paragraph = props.paragraph,
+    paragraph = _props$paragraph === void 0 ? true : _props$paragraph,
+    _props$avatar = props.avatar,
+    avatar = _props$avatar === void 0 ? false : _props$avatar,
+    grid = props.grid,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? true : _props$showAnimation,
+    _props$animation = props.animation,
+    animation = _props$animation === void 0 ? 'gradient' : _props$animation,
+    animationGradientColor = props.animationGradientColor,
+    backgroundColor = props.backgroundColor;
   var domRef = useRef(null);
-
   var _useContext = useContext(GlobalContext),
-      prefixCls = _useContext.prefixCls;
-
+    prefixCls = _useContext.prefixCls;
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current
@@ -65,6 +59,7 @@ var Skeleton = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, content, children));
 });
+
 /**
  * 在内容加载过程中展示一组占位图形。
  * @en Display a set of placeholder graphics during content loading
@@ -73,7 +68,6 @@ var Skeleton = /*#__PURE__*/forwardRef(function (props, ref) {
  * @name 骨架屏
  * @name_en Skeleton
  */
-
 export default componentWrapper(Skeleton, {
   Node: Node,
   Title: Title,

package/esm/slider/hooks/useSliderEvents.js

@@ -2,39 +2,32 @@ import { useCallback, useContext, useState, useEffect, useMemo, useRef } from 'r
 import { SliderContext } from '.';
 import { GlobalContext } from '../../context-provider';
 var IsTouchingStatus;
-
 (function (IsTouchingStatus) {
   IsTouchingStatus[IsTouchingStatus["Idle"] = 0] = "Idle";
   IsTouchingStatus[IsTouchingStatus["Start"] = 1] = "Start";
   IsTouchingStatus[IsTouchingStatus["Moving"] = 2] = "Moving";
 })(IsTouchingStatus || (IsTouchingStatus = {}));
-
 export 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 = useContext(GlobalContext),
-      useRtl = _useContext.useRtl;
-
+    useRtl = _useContext.useRtl;
   var _useContext2 = useContext(SliderContext),
-      disabled = _useContext2.disabled,
-      step = _useContext2.step,
-      min = _useContext2.min,
-      max = _useContext2.max,
-      type = _useContext2.type,
-      draggableTrackOnly = _useContext2.draggableTrackOnly;
-
+    disabled = _useContext2.disabled,
+    step = _useContext2.step,
+    min = _useContext2.min,
+    max = _useContext2.max,
+    type = _useContext2.type,
+    draggableTrackOnly = _useContext2.draggableTrackOnly;
   var _useState = useState(IsTouchingStatus.Idle),
-      isTouching = _useState[0],
-      setIsTouching = _useState[1];
-
+    isTouching = _useState[0],
+    setIsTouching = _useState[1];
   var _useState2 = useState(0),
-      touchStartPosition = _useState2[0],
-      setTouchStartPosition = _useState2[1];
-
+    touchStartPosition = _useState2[0],
+    setTouchStartPosition = _useState2[1];
   var linePositionRef = useRef({
     length: 0,
     start: 0
@@ -43,132 +36,112 @@ export var useSliderEvents = function useSliderEvents(_ref) {
   var validateValue = 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 = 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 rtlRatio = useRtl ? -1 : 1;
     var newWidth = isHorizontal ? (touchPosition - start) * rtlRatio : 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 = useMemo(function () {
     var start = getValueFromPosition(touchStartPosition);
-
     if (!Array.isArray(valueGroup)) {
       if (isTouching) {
         setValueGroup(start);
         setCommonIsTouching(0);
         setIsTouching(IsTouchingStatus.Moving);
       }
-
       return function (realTimeValue) {
         setValueGroup(realTimeValue);
       };
     }
-
     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]);
   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]);
   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]);
   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));
     };

package/esm/slider/hooks/useSliderIcon.js

@@ -3,21 +3,17 @@ import { GlobalContext } from '../../context-provider';
 import { SliderContext } from '.';
 export var useSliderIcon = function useSliderIcon(_ref) {
   var valueGroup = _ref.valueGroup;
-
   var _useContext = useContext(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 = 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 = useMemo(function () {
     if (!prefixLabel) return null;
     var inner;
-
     if (typeof prefixLabel === 'boolean' && prefixLabel) {
       inner = min;
     } else if (typeof prefixLabel === 'function') {
@@ -25,7 +21,6 @@ export var useSliderIcon = function useSliderIcon(_ref) {
     } else {
       inner = prefixLabel;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-slider-label is-prefix"
     }, inner);
@@ -33,7 +28,6 @@ export var useSliderIcon = function useSliderIcon(_ref) {
   var renderSuffixLabel = useMemo(function () {
     if (!suffixLabel) return null;
     var inner;
-
     if (typeof suffixLabel === 'boolean' && suffixLabel) {
       inner = max;
     } else if (typeof suffixLabel === 'function') {
@@ -41,7 +35,6 @@ export var useSliderIcon = function useSliderIcon(_ref) {
     } else {
       inner = suffixLabel;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-slider-label is-suffix"
     }, inner);

package/esm/slider/hooks/useSliderInit.js

@@ -2,37 +2,32 @@ import React, { useState, useEffect, useMemo, useContext, useCallback } from 're
 import { SliderContext } from '.';
 export var useSliderInit = function useSliderInit(_ref) {
   var _ref2, _ctx$value;
-
   var commonIsTouching = _ref.commonIsTouching;
   var ctx = useContext(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 = useState(baseValue),
-      valueGroup = _useState[0],
-      setValueGroup = _useState[1];
-
+    valueGroup = _useState[0],
+    setValueGroup = _useState[1];
   var _useState2 = useState(false),
-      firstRender = _useState2[0],
-      setFirstRender = _useState2[1];
-
+    firstRender = _useState2[0],
+    setFirstRender = _useState2[1];
   var _useState3 = useState(false),
-      firstTouch = _useState3[0],
-      setFirstTouch = _useState3[1]; // 基础标签数组
-  // @en Base mark list
-
+    firstTouch = _useState3[0],
+    setFirstTouch = _useState3[1];
 
+  // 基础标签数组
+  // @en Base mark list
   var baseConfig = 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;
@@ -44,7 +39,6 @@ export var useSliderInit = function useSliderInit(_ref) {
         return parseInt(e);
       });
     }
-
     return [].concat(res).filter(function (e) {
       return e <= max && e >= min;
     }).sort(function (a, b) {
@@ -53,17 +47,16 @@ export var useSliderInit = function useSliderInit(_ref) {
   }, [marks, max, min]);
   var validate = 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 = useMemo(function () {
     return baseConfig.map(function (e) {
       var label = marks && !Array.isArray(marks) && marks[String(e)] && typeof marks !== 'number' ? marks[String(e)] : /*#__PURE__*/React.createElement("p", null, e);
@@ -73,12 +66,12 @@ export 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 = useCallback(function (newValue) {
     if (!useMarkOnly || marks === void 0) return newValue;
-
     var format = function format(v) {
       var idx;
       baseConfig.forEach(function (e, i) {
@@ -86,72 +79,67 @@ export 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
    */
-
   useEffect(function () {
     if (commonIsTouching) setFirstTouch(true);
   }, [commonIsTouching]);
+
   /**
    * 是否为 range，多个游标
    * @en Whether it is range, multiple cursors
    */
-
   var isMultiThumb = useMemo(function () {
     return useRange || Array.isArray(baseValue);
   }, [useRange, typeof baseValue === 'number']);
+
   /**
    * 为 range 组件初始化数据
    * @en Initialize data for the range component
    */
-
   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
    */
-
   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 = useMemo(function () {
     return typeof valueGroup === 'number' ? valueGroup : [].concat(valueGroup).sort(function (a, b) {
       return a > b ? 1 : -1;
@@ -163,10 +151,8 @@ export var useSliderInit = function useSliderInit(_ref) {
   }, [valueGroup]);
   useEffect(function () {
     if (!firstTouch) return;
-
     if (commonIsTouching === -1) {
       onAfterChange(formatMarksValue(formatValueGroup));
-
       if (value === void 0) {
         var newValue = formatMarksValue(valueGroup);
         setValueGroup(newValue);

package/esm/slider/hooks/useSliderStyle.js

@@ -3,23 +3,19 @@ import { SliderContext } from '.';
 import { GlobalContext } from '../../context-provider';
 export var useSliderStyle = function useSliderStyle(_ref) {
   var getLinePosition = _ref.getLinePosition,
-      commonIsTouching = _ref.commonIsTouching,
-      valueGroup = _ref.valueGroup;
-
+    commonIsTouching = _ref.commonIsTouching,
+    valueGroup = _ref.valueGroup;
   var _useContext = useContext(GlobalContext),
-      useRtl = _useContext.useRtl;
-
+    useRtl = _useContext.useRtl;
   var _useContext2 = useContext(SliderContext),
-      size = _useContext2.size,
-      useAnimation = _useContext2.useAnimation,
-      min = _useContext2.min,
-      max = _useContext2.max,
-      type = _useContext2.type;
-
+    size = _useContext2.size,
+    useAnimation = _useContext2.useAnimation,
+    min = _useContext2.min,
+    max = _useContext2.max,
+    type = _useContext2.type;
   var isHorizontal = /^horizontal/g.test(type);
   var heightStyle = 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;
@@ -29,25 +25,20 @@ export var useSliderStyle = function useSliderStyle(_ref) {
   }, [commonIsTouching, useAnimation]);
   var activeLineStyle = 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;
     }
-
     var leftStyle = useRtl ? 'right' : 'left';
     return _ref3 = {}, _ref3[isHorizontal ? leftStyle : 'bottom'] = start + "px", _ref3[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _ref3;
   }, [valueGroup, getLinePosition, min, max, isHorizontal]);