@arco-design/mobile-react 2.28.2 → 2.29.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.29.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.0...@arco-design/mobile-react@2.29.1) (2023-08-21)
+
+
+### Bug Fixes
+
+* fix wrong logic after click clear icon of `Input`, `Textarea` and `SearchBar` ([#156](https://github.com/arco-design/arco-design-mobile/issues/156)) ([b741263](https://github.com/arco-design/arco-design-mobile/commit/b741263fd1a1b9c3da9c106f7487714e33e042f2))
+
+
+
+
+
+# [2.29.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.28.2...@arco-design/mobile-react@2.29.0) (2023-08-17)
+
+
+### Bug Fixes
+
+* compatibility between grid and image picker ([#151](https://github.com/arco-design/arco-design-mobile/issues/151)) ([28ae5b9](https://github.com/arco-design/arco-design-mobile/commit/28ae5b9a8eb6dd91422d50d3f2cfe8b0d7ccdfa4))
+
+
+### Features
+
+* add new component `Skeleton` ([#136](https://github.com/arco-design/arco-design-mobile/issues/136)) ([49351f6](https://github.com/arco-design/arco-design-mobile/commit/49351f639b7a3272b55f189447d935946933ddd6))
+
+
+
+
+
 ## [2.28.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.28.1...@arco-design/mobile-react@2.28.2) (2023-08-07)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.28.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.28.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.0/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.28.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.28.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.0/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/grid/style/css/index.css

@@ -113,3 +113,7 @@
   display: none;
   /* Chrome Safari */
 }
+.arco-grid .arco-image-picker {
+  width: 100%;
+  /* 兼容grid和image-picker组合使用 */
+}

package/cjs/grid/style/index.less

@@ -101,3 +101,9 @@
 .@{prefix}-grid.sliding::-webkit-scrollbar {
     display: none; /* Chrome Safari */
 }
+
+.@{prefix}-grid {
+    .@{prefix}-image-picker {
+        width: 100%; /* 兼容grid和image-picker组合使用 */
+    }
+}

package/cjs/index.d.ts

@@ -43,6 +43,7 @@ export { default as PullRefresh } from './pull-refresh';
 export { default as Radio } from './radio';
 export { default as Rate } from './rate';
 export { default as SearchBar } from './search-bar';
+export { default as Skeleton } from './skeleton';
 export { default as ShowMonitor } from './show-monitor';
 export { default as Slider } from './slider';
 export { default as Stepper } from './stepper';

package/cjs/index.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.SwipeAction = exports.Sticky = exports.Steps = exports.Stepper = exports.Slider = exports.ShowMonitor = exports.SearchBar = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Keyboard = exports.Input = exports.IndexBar = exports.ImagePreview = exports.ImagePicker = exports.Image = exports.Grid = exports.Form = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Divider = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
+exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.SwipeAction = exports.Sticky = exports.Steps = exports.Stepper = exports.Slider = exports.Skeleton = exports.ShowMonitor = exports.SearchBar = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Keyboard = exports.Input = exports.IndexBar = exports.ImagePreview = exports.ImagePicker = exports.Image = exports.Grid = exports.Form = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Divider = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
 
 var _tabs = _interopRequireDefault(require("./tabs"));
 
@@ -185,6 +185,10 @@ var _searchBar = _interopRequireDefault(require("./search-bar"));
 
 exports.SearchBar = _searchBar.default;
 
+var _skeleton = _interopRequireDefault(require("./skeleton"));
+
+exports.Skeleton = _skeleton.default;
+
 var _showMonitor = _interopRequireDefault(require("./show-monitor"));
 
 exports.ShowMonitor = _showMonitor.default;

package/cjs/input/hooks.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.useInputLogic = useInputLogic;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _mobileUtils = require("@arco-design/mobile-utils");
@@ -62,23 +64,6 @@ function useInputLogic(props, inputRef) {
       toggleClear = _useState2[1];
 
   var compositingRef = (0, _react.useRef)(false);
-  /**
-   * clear相关问题背景
-   * 如果点击clear按钮之前已经是focusing状态了，那么在点完clear按钮之后会手动聚焦一下
-   * 该行为将导致onClear事件触发时，也会触发一次onBlur和onFocus事件，可能影响一些组件外的代码逻辑
-   *
-   * e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
-   * 实现代码大致是：onBlur设置其visible为false，onFocus设置其visible为true
-   * 那么这个按钮就会因为clear的点击造成一瞬的闪烁
-   *
-   * 解决思路
-   * 先来看一下，在输入框已激活的状态时，点击清除按钮后，组件的一些事件的触发顺序
-   * handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
-   * 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
-   * 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
-   * 如果这个标志为true，则跳过调用外部的onBlur和onFocus，并在最后再将标志置回false
-   *
-   */
 
   var _useState3 = (0, _react.useState)(false),
       isFocusing = _useState3[0],
@@ -178,28 +163,24 @@ function useInputLogic(props, inputRef) {
   }
 
   function handleFocus(e) {
-    (0, _mobileUtils.nextTick)(function () {
-      if (preventEventWhenClearing && shouldPreventEvent.current) {
-        shouldPreventEvent.current = false;
-        return;
-      }
+    if (preventEventWhenClearing && shouldPreventEvent.current) {
+      shouldPreventEvent.current = false;
+      return;
+    }
 
-      setIsFocusing(true);
-      clearShowType === 'focus' && toggleClear(true);
-      onFocus && onFocus(e);
-    });
+    setIsFocusing(true);
+    clearShowType === 'focus' && toggleClear(true);
+    onFocus && onFocus(e);
   }
 
   function handleBlur(e) {
-    (0, _mobileUtils.nextTick)(function () {
-      if (preventEventWhenClearing && shouldPreventEvent.current) {
-        return;
-      }
+    if (preventEventWhenClearing && shouldPreventEvent.current) {
+      return;
+    }
 
-      setIsFocusing(false);
-      clearShowType === 'focus' && toggleClear(false);
-      onBlur && onBlur(e);
-    });
+    setIsFocusing(false);
+    clearShowType === 'focus' && toggleClear(false);
+    onBlur && onBlur(e);
   }
 
   function handleClick(e) {
@@ -230,10 +211,17 @@ function useInputLogic(props, inputRef) {
 
       if (isFocusing) {
         if (preventEventWhenClearing) {
-          shouldPreventEvent.current = true;
+          shouldPreventEvent.current = true; // 一段时间未执行blur或focus则重置，避免对下次事件循环造成影响
+          // @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
+
+          setTimeout(function () {
+            shouldPreventEvent.current = false;
+          }, 200);
         }
 
-        inputRef.current && inputRef.current.focus();
+        (0, _mobileUtils.nextTick)(function () {
+          inputRef.current && inputRef.current.focus();
+        });
       }
     });
   }
@@ -243,6 +231,12 @@ function useInputLogic(props, inputRef) {
   }
 
   function renderWrapper(prefixCls, type, children) {
+    var _clearEvent;
+
+    // handleClear必须早于handleBlur执行，pc端仅mousedown事件触发早于blur，移动端touch相关事件均早于blur
+    // @en handleClear must be executed earlier than handleBlur
+    // @en only the mousedown event on the PC side is triggered earlier than blur, and the touch-related events on the mobile side are all earlier than blur
+    var clearEvent = (_clearEvent = {}, _clearEvent[system === 'pc' ? 'onMouseDown' : 'onTouchEnd'] = handleClear, _clearEvent);
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "search",
       className: prefixCls + "-container all-border-box " + (className || ''),
@@ -262,10 +256,9 @@ function useInputLogic(props, inputRef) {
       className: (0, _mobileUtils.cls)(prefixCls + "-label", {
         required: required
       })
-    }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/_react.default.createElement("div", {
-      className: prefixCls + "-clear",
-      onClick: handleClear
-    }, clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
+    }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+      className: prefixCls + "-clear"
+    }, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-suffix"
     }, suffix) : null), renderPendNode(append));
   }

package/cjs/input/props.d.ts

@@ -124,7 +124,7 @@ export interface BasicInputProps<T = HTMLInputElement> {
      * 按下清除按钮回调
      * @en Callback when clear button is pressed
      */
-    onClear?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onClear?: (e: React.TouchEvent<HTMLElement>) => void;
     /**
      * 输入框前置内容，在输入框内部，也可自定义
      * @en The prefix of the input box, inside the input box, can also be customized

package/cjs/skeleton/demo/style/css/mobile.css

@@ -0,0 +1,7 @@
+#demo-skeleton .arcodesign-mobile-demo-content .arco-cell-group {
+  margin-bottom: 0.32rem;
+}
+#demo-skeleton .arcodesign-mobile-demo-content .arco-cell {
+  margin-left: 0;
+  padding-right: 0;
+}

package/cjs/skeleton/demo/style/mobile.less

@@ -0,0 +1,13 @@
+@import '../../../../style/mixin.less';
+
+#demo-skeleton {
+    .arcodesign-mobile-demo-content {
+        .arco-cell-group {
+            margin-bottom: 0.32rem;
+        }
+        .arco-cell {
+            margin-left: 0;
+            padding-right: 0;
+        }
+    }
+}

package/cjs/skeleton/elements.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SkeletonAvatarProps, SkeletonGridProps, SkeletonNodeProps, SkeletonParagraphProps, SkeletonRef, SkeletonTitleProps } from './type';
+export declare const SkeletonNode: React.ForwardRefExoticComponent<SkeletonNodeProps & React.RefAttributes<SkeletonRef>>;
+export declare const SkeletonTitle: React.ForwardRefExoticComponent<SkeletonTitleProps & React.RefAttributes<SkeletonRef>>;
+export declare const SkeletonParagraph: React.ForwardRefExoticComponent<SkeletonParagraphProps & React.RefAttributes<SkeletonRef>>;
+export declare const SkeletonAvatar: React.ForwardRefExoticComponent<SkeletonAvatarProps & React.RefAttributes<SkeletonRef>>;
+export declare const SkeletonGrid: React.ForwardRefExoticComponent<SkeletonGridProps & React.RefAttributes<SkeletonRef>>;

package/cjs/skeleton/elements.js

@@ -0,0 +1,302 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.SkeletonTitle = exports.SkeletonParagraph = exports.SkeletonNode = exports.SkeletonGrid = exports.SkeletonAvatar = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _helpers = require("../_helpers");
+
+var _contextProvider = require("../context-provider");
+
+var _skeletonContext = require("./skeleton-context");
+
+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 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 _useState = (0, _react.useState)(),
+      offset = _useState[0],
+      setOffset = _useState[1];
+
+  var calcLayout = function calcLayout() {
+    var isList = Array.isArray(dom);
+
+    if (!(isList ? dom.length > 0 : dom == null ? void 0 : dom.current)) {
+      return;
+    }
+
+    setOffset(isList ? dom.map(function (item) {
+      return calcOffset(item, useRtl);
+    }) : calcOffset(dom.current, useRtl));
+  };
+
+  (0, _react.useEffect)(function () {
+    (0, _mobileUtils.nextTick)(function () {
+      calcLayout();
+    });
+  }, [dom, useRtl]);
+  (0, _helpers.useListenResize)(calcLayout);
+  return offset;
+}
+
+var SkeletonNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      children = props.children;
+
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      useRtl = _useContext.useRtl,
+      prefixCls = _useContext.prefixCls;
+
+  var _useContext2 = (0, _react.useContext)(_skeletonContext.SkeletonContext),
+      backgroundColor = _useContext2.backgroundColor,
+      showAnimation = _useContext2.showAnimation,
+      animation = _useContext2.animation;
+
+  var domRef = (0, _react.useRef)(null);
+  var isGradientAnimation = showAnimation && animation === 'gradient';
+  var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-item", prefixCls + "-skeleton-node", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+    style: (0, _extends2.default)({
+      backgroundColor: backgroundColor
+    }, style),
+    ref: domRef
+  }, children, isGradientAnimation && offset !== undefined && /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-skeleton-animation-item",
+    style: {
+      left: 0 - offset
+    }
+  }));
+});
+exports.SkeletonNode = SkeletonNode;
+var SkeletonTitle = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className2 = props.className,
+      className = _props$className2 === void 0 ? '' : _props$className2,
+      style = props.style,
+      _props$width = props.width,
+      width = _props$width === void 0 ? '40%' : _props$width;
+
+  var _useContext3 = (0, _react.useContext)(_contextProvider.GlobalContext),
+      useRtl = _useContext3.useRtl,
+      prefixCls = _useContext3.prefixCls;
+
+  var _useContext4 = (0, _react.useContext)(_skeletonContext.SkeletonContext),
+      backgroundColor = _useContext4.backgroundColor,
+      showAnimation = _useContext4.showAnimation,
+      animation = _useContext4.animation;
+
+  var domRef = (0, _react.useRef)(null);
+  var isGradientAnimation = showAnimation && animation === 'gradient';
+  var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-item", prefixCls + "-skeleton-title", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+    style: (0, _extends2.default)({
+      width: width,
+      backgroundColor: backgroundColor
+    }, style),
+    ref: domRef
+  }, isGradientAnimation && offset !== undefined && /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-skeleton-animation-item",
+    style: {
+      left: 0 - offset
+    }
+  }));
+});
+exports.SkeletonTitle = SkeletonTitle;
+var SkeletonParagraph = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className3 = props.className,
+      className = _props$className3 === void 0 ? '' : _props$className3,
+      style = props.style,
+      _props$rows = props.rows,
+      rows = _props$rows === void 0 ? 3 : _props$rows,
+      _props$width2 = props.width,
+      width = _props$width2 === void 0 ? '60%' : _props$width2;
+
+  var _useContext5 = (0, _react.useContext)(_contextProvider.GlobalContext),
+      useRtl = _useContext5.useRtl,
+      prefixCls = _useContext5.prefixCls;
+
+  var _useContext6 = (0, _react.useContext)(_skeletonContext.SkeletonContext),
+      backgroundColor = _useContext6.backgroundColor,
+      showAnimation = _useContext6.showAnimation,
+      animation = _useContext6.animation;
+
+  var domRef = (0, _react.useRef)(null);
+  var lineDomRefs = (0, _react.useRef)([]);
+  var isGradientAnimation = showAnimation && animation === 'gradient';
+  var offsets = useOffset(isGradientAnimation ? lineDomRefs.current : undefined, useRtl);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+
+  var getWidth = function getWidth(idx) {
+    if ((0, _mobileUtils.isArray)(width)) {
+      return width[idx];
+    }
+
+    if (rows - 1 === idx) {
+      return width;
+    }
+
+    return undefined;
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-paragraph", className),
+    style: style,
+    ref: domRef
+  }, Array.from(new Array(rows)).map(function (_, idx) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: idx,
+      className: (0, _mobileUtils.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.createElement("div", {
+      className: prefixCls + "-skeleton-animation-item",
+      style: {
+        left: 0 - (offsets[idx] || 0)
+      }
+    }));
+  }));
+});
+exports.SkeletonParagraph = SkeletonParagraph;
+var SkeletonAvatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className4 = props.className,
+      className = _props$className4 === void 0 ? '' : _props$className4,
+      style = props.style;
+
+  var _useContext7 = (0, _react.useContext)(_contextProvider.GlobalContext),
+      useRtl = _useContext7.useRtl,
+      prefixCls = _useContext7.prefixCls;
+
+  var _useContext8 = (0, _react.useContext)(_skeletonContext.SkeletonContext),
+      backgroundColor = _useContext8.backgroundColor,
+      showAnimation = _useContext8.showAnimation,
+      animation = _useContext8.animation;
+
+  var domRef = (0, _react.useRef)(null);
+  var isGradientAnimation = showAnimation && animation === 'gradient';
+  var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-item", prefixCls + "-skeleton-avatar", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+    style: (0, _extends2.default)({
+      backgroundColor: backgroundColor
+    }, style),
+    ref: domRef
+  }, isGradientAnimation && offset !== undefined && /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-skeleton-animation-item",
+    style: {
+      left: 0 - offset
+    }
+  }));
+});
+exports.SkeletonAvatar = SkeletonAvatar;
+var SkeletonGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className5 = props.className,
+      className = _props$className5 === void 0 ? '' : _props$className5,
+      style = props.style,
+      _props$columns = props.columns,
+      columns = _props$columns === void 0 ? 4 : _props$columns;
+
+  var _useContext9 = (0, _react.useContext)(_contextProvider.GlobalContext),
+      useRtl = _useContext9.useRtl,
+      prefixCls = _useContext9.prefixCls;
+
+  var _useContext10 = (0, _react.useContext)(_skeletonContext.SkeletonContext),
+      backgroundColor = _useContext10.backgroundColor,
+      showAnimation = _useContext10.showAnimation,
+      animation = _useContext10.animation;
+
+  var domRef = (0, _react.useRef)(null);
+  var iconDomRefs = (0, _react.useRef)([]);
+  var textDomRefs = (0, _react.useRef)([]);
+  var isGradientAnimation = showAnimation && animation === 'gradient';
+  var iconOffsets = useOffset(isGradientAnimation ? iconDomRefs.current : undefined, useRtl);
+  var textOffsets = useOffset(isGradientAnimation ? textDomRefs.current : undefined, useRtl);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-grid", className),
+    style: style,
+    ref: domRef
+  }, Array.from(new Array(columns)).map(function (_, idx) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: idx,
+      className: (0, _mobileUtils.cls)(prefixCls + "-skeleton-grid-item")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.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.createElement("div", {
+      className: prefixCls + "-skeleton-animation-item",
+      style: {
+        left: 0 - ((iconOffsets == null ? void 0 : iconOffsets[idx]) || 0)
+      }
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.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.createElement("div", {
+      className: prefixCls + "-skeleton-animation-item",
+      style: {
+        left: 0 - ((textOffsets == null ? void 0 : textOffsets[idx]) || 0)
+      }
+    })));
+  }));
+});
+exports.SkeletonGrid = SkeletonGrid;

package/cjs/skeleton/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SkeletonProps, SkeletonRef } from './type';
+declare const _default: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<SkeletonRef>> & {
+    Node: React.ForwardRefExoticComponent<import("./type").SkeletonNodeProps & React.RefAttributes<SkeletonRef>>;
+    Title: React.ForwardRefExoticComponent<import("./type").SkeletonTitleProps & React.RefAttributes<SkeletonRef>>;
+    Paragraph: React.ForwardRefExoticComponent<import("./type").SkeletonParagraphProps & React.RefAttributes<SkeletonRef>>;
+    Avatar: React.ForwardRefExoticComponent<import("./type").SkeletonAvatarProps & React.RefAttributes<SkeletonRef>>;
+    Grid: React.ForwardRefExoticComponent<import("./type").SkeletonGridProps & React.RefAttributes<SkeletonRef>>;
+};
+/**
+ * 在内容加载过程中展示一组占位图形。
+ * @en Display a set of placeholder graphics during content loading
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 骨架屏
+ * @name_en Skeleton
+ */
+export default _default;