@arco-design/mobile-react 2.28.2 → 2.29.0

package/dist/index.js

@@ -6146,7 +6146,7 @@
      * @name_en Cell
      */
 
-    var index$o = componentWrapper(Cell, {
+    var index$p = componentWrapper(Cell, {
       Group: Group$4
     });
 
@@ -7441,7 +7441,7 @@
      * @name_en ActionSheet
      */
 
-    var index$n = componentWrapper(ActionSheet, methodsGenerator$5(ActionSheetWithGlobalContext));
+    var index$o = componentWrapper(ActionSheet, methodsGenerator$5(ActionSheetWithGlobalContext));
 
     /**
      * 加载中组件，分为四种类型，`circle`为环形，`arc`为弧线，`spin`为旋转，`dot`为圆点。所有类型均可定制颜色，环形和弧线类型可定制线圈半径及粗细，旋转和圆点类型可定制内部元素透明度。
@@ -8226,7 +8226,7 @@
      * @name_en Avatar
      */
 
-    var index$m = componentWrapper(Avatar, {
+    var index$n = componentWrapper(Avatar, {
       Group: Group$3
     });
 
@@ -10479,7 +10479,7 @@
      * @name_en Collapse
      */
 
-    var index$l = componentWrapper(Collapse, {
+    var index$m = componentWrapper(Collapse, {
       Group: Group$1
     });
 
@@ -12164,7 +12164,7 @@
      * @displayName DatePicker
      */
 
-    var index$k = componentWrapper(DatePicker, 'DatePicker');
+    var index$l = componentWrapper(DatePicker, 'DatePicker');
 
     function normalizeAlert(config) {
       var _a = config || {},
@@ -12362,7 +12362,7 @@
      * @name_en Dialog
      */
 
-    var index$j = componentWrapper(Dialog, methodsGenerator$4(DialogWithGlobalContext));
+    var index$k = componentWrapper(Dialog, methodsGenerator$4(DialogWithGlobalContext));
 
     /**
      * 划分内容的装饰线
@@ -14174,7 +14174,7 @@
         };
     });
 
-    var index$i = (function () {
+    var index$j = (function () {
         // Export existing implementation if available.
         if (typeof global$1.ResizeObserver !== 'undefined') {
             return global$1.ResizeObserver;
@@ -14405,7 +14405,7 @@
       React.useEffect(function () {
         if (domRef.current && reflowOnResize) {
           if (!observerRef.current && ellipsis) {
-            observerRef.current = new index$i(reflow);
+            observerRef.current = new index$j(reflow);
             observerRef.current.observe(domRef.current);
           }
         }
@@ -15335,7 +15335,7 @@
      * @name_en Form
      */
 
-    var index$h = componentWrapper(Form, {
+    var index$i = componentWrapper(Form, {
       Item: Item$1
     });
 
@@ -17313,7 +17313,7 @@
      * @displayName ImagePicker
      */
 
-    var index$g = componentWrapper(ImagePicker, 'ImagePicker');
+    var index$h = componentWrapper(ImagePicker, 'ImagePicker');
 
     /*!
     * @arco-design/transformable v1.0.2
@@ -20511,7 +20511,7 @@
      * @name_en ImagePreview
      */
 
-    var index$f = componentWrapper(ImagePreview, methodsGenerator$3(ImagePreviewWithGlobalContext));
+    var index$g = componentWrapper(ImagePreview, methodsGenerator$3(ImagePreviewWithGlobalContext));
 
     var IndexBarContext = /*#__PURE__*/React.createContext({
       sticky: true,
@@ -20980,7 +20980,7 @@
      * @name_en SearchBar
      */
 
-    var index$e = componentWrapper(IndexBar, {
+    var index$f = componentWrapper(IndexBar, {
       Group: IndexBarGroup
     });
 
@@ -21329,7 +21329,7 @@
      * @displayName Input
      */
 
-    var index$d = componentWrapper(Input, 'Input');
+    var index$e = componentWrapper(Input, 'Input');
 
     // @en let keyboard random
 
@@ -22132,7 +22132,7 @@
      * @name_en Notify
      */
 
-    var index$c = componentWrapper(Notify, methodsGenerator$2(NotifyWithGlobalContext));
+    var index$d = componentWrapper(Notify, methodsGenerator$2(NotifyWithGlobalContext));
 
     function Arrow() {
       return /*#__PURE__*/React__default["default"].createElement("svg", {
@@ -23544,7 +23544,7 @@
      * @type_en Data Display
      */
 
-    var index$b = componentWrapper(Popover$1, {
+    var index$c = componentWrapper(Popover$1, {
       Menu: Menu
     });
 
@@ -23810,7 +23810,7 @@
      * @name_en PopupSwiper
      */
 
-    var index$a = componentWrapper(PopupSwiper, methodsGenerator$1(PopupSwiperWithGlobalContext));
+    var index$b = componentWrapper(PopupSwiper, methodsGenerator$1(PopupSwiperWithGlobalContext));
 
     /**
      * 进度条组件，可根据外界传递进来的百分比进行进度展示
@@ -24661,7 +24661,7 @@
      * @displayName Radio
      */
 
-    var index$9 = componentWrapper(Radio, 'Radio', {
+    var index$a = componentWrapper(Radio, 'Radio', {
       Group: Group
     });
 
@@ -24843,7 +24843,7 @@
      * @displayName Rate
      */
 
-    var index$8 = componentWrapper(Rate, 'Rate');
+    var index$9 = componentWrapper(Rate, 'Rate');
 
     function createHighlightNode(config, index) {
       var keyword = config.keyword,
@@ -25218,6 +25218,361 @@
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, renderSearchBar);
     });
 
+    var SkeletonContext = /*#__PURE__*/React__default["default"].createContext({
+      showAnimation: true,
+      animation: 'gradient'
+    });
+
+    var calcOffset = function calcOffset(dom, useRtl) {
+      if (!dom) {
+        return 0;
+      }
+
+      if (useRtl) {
+        return dom.offsetLeft - dom.offsetTop;
+      }
+
+      return dom.offsetLeft + dom.offsetTop;
+    };
+
+    function useOffset(dom, useRtl) {
+      var _a = React.useState(),
+          offset = _a[0],
+          setOffset = _a[1];
+
+      var calcLayout = function calcLayout() {
+        var _a;
+
+        var isList = Array.isArray(dom);
+
+        if (!(isList ? dom.length > 0 : (_a = dom) === null || _a === void 0 ? void 0 : _a.current)) {
+          return;
+        }
+
+        setOffset(isList ? dom.map(function (item) {
+          return calcOffset(item, useRtl);
+        }) : calcOffset(dom.current, useRtl));
+      };
+
+      React.useEffect(function () {
+        nextTick(function () {
+          calcLayout();
+        });
+      }, [dom, useRtl]);
+      useListenResize(calcLayout);
+      return offset;
+    }
+
+    var SkeletonNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style,
+          children = props.children;
+
+      var _b = React.useContext(GlobalContext),
+          useRtl = _b.useRtl,
+          prefixCls = _b.prefixCls;
+
+      var _c = React.useContext(SkeletonContext),
+          backgroundColor = _c.backgroundColor,
+          showAnimation = _c.showAnimation,
+          animation = _c.animation;
+
+      var domRef = React.useRef(null);
+      var isGradientAnimation = showAnimation && animation === 'gradient';
+      var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-node", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+        style: __assign$2({
+          backgroundColor: backgroundColor
+        }, style),
+        ref: domRef
+      }, children, isGradientAnimation && offset !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: prefixCls + "-skeleton-animation-item",
+        style: {
+          left: 0 - offset
+        }
+      }));
+    });
+    var SkeletonTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style,
+          _b = props.width,
+          width = _b === void 0 ? '40%' : _b;
+
+      var _c = React.useContext(GlobalContext),
+          useRtl = _c.useRtl,
+          prefixCls = _c.prefixCls;
+
+      var _d = React.useContext(SkeletonContext),
+          backgroundColor = _d.backgroundColor,
+          showAnimation = _d.showAnimation,
+          animation = _d.animation;
+
+      var domRef = React.useRef(null);
+      var isGradientAnimation = showAnimation && animation === 'gradient';
+      var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-title", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+        style: __assign$2({
+          width: width,
+          backgroundColor: backgroundColor
+        }, style),
+        ref: domRef
+      }, isGradientAnimation && offset !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: prefixCls + "-skeleton-animation-item",
+        style: {
+          left: 0 - offset
+        }
+      }));
+    });
+    var SkeletonParagraph = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style,
+          _b = props.rows,
+          rows = _b === void 0 ? 3 : _b,
+          _c = props.width,
+          width = _c === void 0 ? '60%' : _c;
+
+      var _d = React.useContext(GlobalContext),
+          useRtl = _d.useRtl,
+          prefixCls = _d.prefixCls;
+
+      var _e = React.useContext(SkeletonContext),
+          backgroundColor = _e.backgroundColor,
+          showAnimation = _e.showAnimation,
+          animation = _e.animation;
+
+      var domRef = React.useRef(null);
+      var lineDomRefs = React.useRef([]);
+      var isGradientAnimation = showAnimation && animation === 'gradient';
+      var offsets = useOffset(isGradientAnimation ? lineDomRefs.current : undefined, useRtl);
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+
+      var getWidth = function getWidth(idx) {
+        if (isArray(width)) {
+          return width[idx];
+        }
+
+        if (rows - 1 === idx) {
+          return width;
+        }
+
+        return undefined;
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton-paragraph", className),
+        style: style,
+        ref: domRef
+      }, Array.from(new Array(rows)).map(function (_, idx) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: idx,
+          className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-paragraph-line", showAnimation && prefixCls + "-skeleton-animation-" + animation),
+          style: {
+            width: getWidth(idx),
+            backgroundColor: backgroundColor
+          },
+          ref: function ref(el) {
+            return el && (lineDomRefs.current[idx] = el);
+          }
+        }, isGradientAnimation && offsets !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+          className: prefixCls + "-skeleton-animation-item",
+          style: {
+            left: 0 - (offsets[idx] || 0)
+          }
+        }));
+      }));
+    });
+    var SkeletonAvatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style;
+
+      var _b = React.useContext(GlobalContext),
+          useRtl = _b.useRtl,
+          prefixCls = _b.prefixCls;
+
+      var _c = React.useContext(SkeletonContext),
+          backgroundColor = _c.backgroundColor,
+          showAnimation = _c.showAnimation,
+          animation = _c.animation;
+
+      var domRef = React.useRef(null);
+      var isGradientAnimation = showAnimation && animation === 'gradient';
+      var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-avatar", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+        style: __assign$2({
+          backgroundColor: backgroundColor
+        }, style),
+        ref: domRef
+      }, isGradientAnimation && offset !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: prefixCls + "-skeleton-animation-item",
+        style: {
+          left: 0 - offset
+        }
+      }));
+    });
+    var SkeletonGrid = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style,
+          _b = props.columns,
+          columns = _b === void 0 ? 4 : _b;
+
+      var _c = React.useContext(GlobalContext),
+          useRtl = _c.useRtl,
+          prefixCls = _c.prefixCls;
+
+      var _d = React.useContext(SkeletonContext),
+          backgroundColor = _d.backgroundColor,
+          showAnimation = _d.showAnimation,
+          animation = _d.animation;
+
+      var domRef = React.useRef(null);
+      var iconDomRefs = React.useRef([]);
+      var textDomRefs = React.useRef([]);
+      var isGradientAnimation = showAnimation && animation === 'gradient';
+      var iconOffsets = useOffset(isGradientAnimation ? iconDomRefs.current : undefined, useRtl);
+      var textOffsets = useOffset(isGradientAnimation ? textDomRefs.current : undefined, useRtl);
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton-grid", className),
+        style: style,
+        ref: domRef
+      }, Array.from(new Array(columns)).map(function (_, idx) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: idx,
+          className: cls(prefixCls + "-skeleton-grid-item")
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-grid-icon", showAnimation && prefixCls + "-skeleton-animation-" + animation),
+          style: {
+            backgroundColor: backgroundColor
+          },
+          ref: function ref(el) {
+            return el && (iconDomRefs.current[idx] = el);
+          }
+        }, isGradientAnimation && iconOffsets !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+          className: prefixCls + "-skeleton-animation-item",
+          style: {
+            left: 0 - ((iconOffsets === null || iconOffsets === void 0 ? void 0 : iconOffsets[idx]) || 0)
+          }
+        })), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-grid-text", showAnimation && prefixCls + "-skeleton-animation-" + animation),
+          style: {
+            backgroundColor: backgroundColor
+          },
+          ref: function ref(el) {
+            return el && (textDomRefs.current[idx] = el);
+          }
+        }, isGradientAnimation && textOffsets !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+          className: prefixCls + "-skeleton-animation-item",
+          style: {
+            left: 0 - ((textOffsets === null || textOffsets === void 0 ? void 0 : textOffsets[idx]) || 0)
+          }
+        })));
+      }));
+    });
+
+    function getComponentProps(prop) {
+      if (prop && typeof prop === 'object') {
+        return prop;
+      }
+
+      return {};
+    }
+
+    var Skeleton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a;
+
+      var _b = props.className,
+          className = _b === void 0 ? '' : _b,
+          style = props.style,
+          children = props.children,
+          _c = props.title,
+          title = _c === void 0 ? true : _c,
+          _d = props.paragraph,
+          paragraph = _d === void 0 ? true : _d,
+          _e = props.avatar,
+          avatar = _e === void 0 ? false : _e,
+          grid = props.grid,
+          _f = props.showAnimation,
+          showAnimation = _f === void 0 ? true : _f,
+          _g = props.animation,
+          animation = _g === void 0 ? 'gradient' : _g,
+          animationGradientColor = props.animationGradientColor,
+          backgroundColor = props.backgroundColor;
+      var domRef = React.useRef(null);
+      var prefixCls = React.useContext(GlobalContext).prefixCls;
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      var isGrid = !!grid;
+      var hasTitle = !!title;
+      var hasParagraph = !!paragraph;
+      var hasAvatar = !!avatar;
+      var content = isGrid ? /*#__PURE__*/React__default["default"].createElement(SkeletonGrid, __assign$2({}, getComponentProps(grid))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hasAvatar && /*#__PURE__*/React__default["default"].createElement(SkeletonAvatar, __assign$2({}, getComponentProps(avatar))), (hasTitle || hasParagraph) && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: prefixCls + "-skeleton-content"
+      }, hasTitle && /*#__PURE__*/React__default["default"].createElement(SkeletonTitle, __assign$2({}, getComponentProps(title))), hasParagraph && /*#__PURE__*/React__default["default"].createElement(SkeletonParagraph, __assign$2({}, getComponentProps(paragraph)))));
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefixCls + "-skeleton", (_a = {}, _a[prefixCls + "-skeleton-with-avatar"] = hasAvatar, _a), className),
+        style: __assign$2({
+          color: animationGradientColor
+        }, style),
+        ref: domRef
+      }, /*#__PURE__*/React__default["default"].createElement(SkeletonContext.Provider, {
+        value: {
+          showAnimation: showAnimation,
+          animation: animation,
+          backgroundColor: backgroundColor
+        }
+      }, content, children));
+    });
+    /**
+     * 在内容加载过程中展示一组占位图形。
+     * @en Display a set of placeholder graphics during content loading
+     * @type 信息展示
+     * @type_en Data Display
+     * @name 骨架屏
+     * @name_en Skeleton
+     */
+
+    var index$8 = componentWrapper(Skeleton, {
+      Node: SkeletonNode,
+      Title: SkeletonTitle,
+      Paragraph: SkeletonParagraph,
+      Avatar: SkeletonAvatar,
+      Grid: SkeletonGrid
+    });
+
     var LISTEN_FLAG = 'data-show-listened';
     /**
      * 父 dom 节点集合
@@ -28503,50 +28858,51 @@
 
     var index = componentWrapper(Toast, methodsGenerator(ToastWithGlobalContext));
 
-    exports.ActionSheet = index$n;
-    exports.Avatar = index$m;
+    exports.ActionSheet = index$o;
+    exports.Avatar = index$n;
     exports.Badge = Badge;
     exports.Button = Button;
     exports.Carousel = Carousel;
-    exports.Cell = index$o;
+    exports.Cell = index$p;
     exports.Checkbox = Checkbox;
     exports.CircleProgress = CircleProgress;
-    exports.Collapse = index$l;
+    exports.Collapse = index$m;
     exports.ContextProvider = ContextProvider;
     exports.CountDown = CountDown;
-    exports.DatePicker = index$k;
-    exports.Dialog = index$j;
+    exports.DatePicker = index$l;
+    exports.Dialog = index$k;
     exports.Divider = Divider;
     exports.Dropdown = Dropdown$1;
     exports.DropdownMenu = DropdownMenu;
     exports.Ellipsis = Ellipsis;
-    exports.Form = index$h;
+    exports.Form = index$i;
     exports.Grid = Grid;
     exports.Image = BaseImage;
-    exports.ImagePicker = index$g;
-    exports.ImagePreview = index$f;
-    exports.IndexBar = index$e;
-    exports.Input = index$d;
+    exports.ImagePicker = index$h;
+    exports.ImagePreview = index$g;
+    exports.IndexBar = index$f;
+    exports.Input = index$e;
     exports.Keyboard = Keyboard;
     exports.LoadMore = LoadMore;
     exports.Loading = Loading;
     exports.Masking = Masking$1;
     exports.NavBar = NavBar;
     exports.NoticeBar = NoticeBar;
-    exports.Notify = index$c;
+    exports.Notify = index$d;
     exports.Pagination = Pagination;
     exports.Picker = Picker$1;
     exports.PickerView = PickerView$1;
-    exports.Popover = index$b;
+    exports.Popover = index$c;
     exports.Popup = Popup$1;
-    exports.PopupSwiper = index$a;
+    exports.PopupSwiper = index$b;
     exports.Portal = Portal;
     exports.Progress = Progress;
     exports.PullRefresh = PullRefresh;
-    exports.Radio = index$9;
-    exports.Rate = index$8;
+    exports.Radio = index$a;
+    exports.Rate = index$9;
     exports.SearchBar = SearchBar;
     exports.ShowMonitor = ShowMonitor;
+    exports.Skeleton = index$8;
     exports.Slider = index$7;
     exports.Stepper = index$6;
     exports.Steps = index$5;