@arco-design/mobile-react 2.28.1 → 2.29.0

package/esm/form/form-item.js

@@ -24,15 +24,96 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
     _this._errors = [];
     _this._touched = false;
 
+    _this.onValueChange = function (preStore, curStore) {
+      _this._touched = true;
+      var shouldUpdate = _this.props.shouldUpdate;
+
+      if (typeof shouldUpdate === 'function') {
+        shouldUpdate({
+          preStore: preStore,
+          curStore: curStore
+        }) && _this.forceUpdate();
+        return;
+      }
+
+      _this.forceUpdate();
+    };
+
+    _this.getFieldError = function () {
+      return _this._errors;
+    };
+
+    _this.isFieldTouched = function () {
+      return _this._touched;
+    };
+
+    _this.validateField = function () {
+      var validateMessages = _this.context.validateMessages;
+      var getFieldValue = _this.context.form.getFieldValue;
+      var _this$props = _this.props,
+          field = _this$props.field,
+          rules = _this$props.rules,
+          onValidateStatusChange = _this$props.onValidateStatusChange;
+      var value = getFieldValue(field);
+
+      if (rules != null && rules.length && field) {
+        var _Validator;
+
+        var fieldDom = _this.props.getFormItemRef();
+
+        var fieldValidator = new Validator((_Validator = {}, _Validator[field] = rules, _Validator), {
+          validateMessages: validateMessages
+        });
+        return new Promise(function (resolve) {
+          var _fieldValidator$valid;
+
+          fieldValidator.validate((_fieldValidator$valid = {}, _fieldValidator$valid[field] = value, _fieldValidator$valid), function (errorsMap) {
+            var _getErrorAndWarnings = getErrorAndWarnings((errorsMap == null ? void 0 : errorsMap[field]) || []),
+                errors = _getErrorAndWarnings.errors,
+                warnings = _getErrorAndWarnings.warnings;
+
+            _this._errors = errors;
+            onValidateStatusChange({
+              errors: _this._errors,
+              warnings: warnings
+            });
+            return resolve({
+              errors: _this._errors,
+              warnings: warnings,
+              value: value,
+              field: field,
+              dom: fieldDom
+            });
+          });
+        });
+      }
+
+      return Promise.resolve({
+        errors: [],
+        warnings: [],
+        value: value,
+        field: field,
+        dom: null
+      });
+    };
+
+    _this.setFieldData = function (value) {
+      var field = _this.props.field;
+      var setFieldValue = _this.context.form.setFieldValue;
+      setFieldValue(field, value);
+
+      _this.validateField();
+    };
+
     _this.innerTriggerFunction = function (_, value) {
       var _children$props;
 
       _this.setFieldData(value);
 
-      var _this$props = _this.props,
-          children = _this$props.children,
-          _this$props$trigger = _this$props.trigger,
-          trigger = _this$props$trigger === void 0 ? 'onChange' : _this$props$trigger;
+      var _this$props2 = _this.props,
+          children = _this$props2.children,
+          _this$props2$trigger = _this$props2.trigger,
+          trigger = _this$props2$trigger === void 0 ? 'onChange' : _this$props2$trigger;
 
       if (trigger && (_children$props = children.props) != null && _children$props[trigger]) {
         var _children$props2;
@@ -50,10 +131,10 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
 
       _this.setFieldData(value);
 
-      var _this$props2 = _this.props,
-          children = _this$props2.children,
-          _this$props2$trigger = _this$props2.trigger,
-          trigger = _this$props2$trigger === void 0 ? 'onChange' : _this$props2$trigger;
+      var _this$props3 = _this.props,
+          children = _this$props3.children,
+          _this$props3$trigger = _this$props3.trigger,
+          trigger = _this$props3$trigger === void 0 ? 'onChange' : _this$props3$trigger;
 
       if (trigger && (_children$props3 = children.props) != null && _children$props3[trigger]) {
         var _children$props4;
@@ -66,6 +147,24 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
       }
     };
 
+    _this.innerClearFunction = function () {
+      var _children$props5;
+
+      var children = _this.props.children;
+
+      _this.setFieldData('');
+
+      if ((_children$props5 = children.props) != null && _children$props5.onClear) {
+        var _children$props6;
+
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+
+        (_children$props6 = children.props) == null ? void 0 : _children$props6.onClear.apply(_children$props6, args);
+      }
+    };
+
     _this.destroyField = function () {};
 
     if (props != null && props.initialValue && props.field) {
@@ -93,108 +192,10 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
     this.destroyField();
   };
 
-  _proto.onValueChange = function onValueChange(preStore, curStore) {
-    this._touched = true;
-    var shouldUpdate = this.props.shouldUpdate;
-
-    if (typeof shouldUpdate === 'function') {
-      shouldUpdate({
-        preStore: preStore,
-        curStore: curStore
-      }) && this.forceUpdate();
-      return;
-    }
-
-    this.forceUpdate();
-  };
-
-  _proto.getFieldError = function getFieldError() {
-    return this._errors;
-  };
-
-  _proto.isFieldTouched = function isFieldTouched() {
-    return this._touched;
-  };
-
-  _proto.validateField = function validateField() {
-    var _this2 = this;
-
-    var validateMessages = this.context.validateMessages;
-    var getFieldValue = this.context.form.getFieldValue;
-    var _this$props3 = this.props,
-        field = _this$props3.field,
-        rules = _this$props3.rules,
-        onValidateStatusChange = _this$props3.onValidateStatusChange;
-    var value = getFieldValue(field);
-
-    if (rules != null && rules.length && field) {
-      var _Validator;
-
-      var fieldDom = this.props.getFormItemRef();
-      var fieldValidator = new Validator((_Validator = {}, _Validator[field] = rules, _Validator), {
-        validateMessages: validateMessages
-      });
-      return new Promise(function (resolve) {
-        var _fieldValidator$valid;
-
-        fieldValidator.validate((_fieldValidator$valid = {}, _fieldValidator$valid[field] = value, _fieldValidator$valid), function (errorsMap) {
-          var _getErrorAndWarnings = getErrorAndWarnings((errorsMap == null ? void 0 : errorsMap[field]) || []),
-              errors = _getErrorAndWarnings.errors,
-              warnings = _getErrorAndWarnings.warnings;
-
-          _this2._errors = errors;
-          onValidateStatusChange({
-            errors: _this2._errors,
-            warnings: warnings
-          });
-          return resolve({
-            errors: _this2._errors,
-            warnings: warnings,
-            value: value,
-            field: field,
-            dom: fieldDom
-          });
-        });
-      });
-    }
-
-    return Promise.resolve({
-      errors: [],
-      warnings: [],
-      value: value,
-      field: field,
-      dom: null
-    });
-  };
-
-  _proto.setFieldData = function setFieldData(value) {
-    var field = this.props.field;
-    var setFieldValue = this.context.form.setFieldValue;
-    setFieldValue(field, value);
-    this.validateField();
-  };
-
-  _proto.innerClearFunction = function innerClearFunction() {
-    var _children$props5;
-
-    var children = this.props.children;
-    this.setFieldData('');
-
-    if ((_children$props5 = children.props) != null && _children$props5.onClear) {
-      var _children$props6;
-
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
-      }
-
-      (_children$props6 = children.props) == null ? void 0 : _children$props6.onClear.apply(_children$props6, args);
-    }
-  };
-
   _proto.renderChildren = function renderChildren() {
     var _props,
         _children$type,
-        _this3 = this;
+        _this2 = this;
 
     var _this$props4 = this.props,
         children = _this$props4.children,
@@ -269,7 +270,7 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
         props.error = this._errors;
 
         props[trigger] = function (newValue) {
-          _this3.setFieldData(newValue);
+          _this2.setFieldData(newValue);
 
           for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
             args[_key4 - 1] = arguments[_key4];

package/esm/grid/style/css/index.css

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

package/esm/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/esm/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/esm/index.js

@@ -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/esm/nav-bar/index.d.ts

@@ -32,13 +32,13 @@ export interface NavBarProps {
      */
     rightContent?: React.ReactNode;
     /**
-     * 自定义样式，背景和文字颜色可在此定义
+     * 自定义样式，最外层元素的背景文字颜色可在此定义
      * @en Custom stylesheet, background and text colors can be defined here
      */
     style?: React.CSSProperties;
     /**
-     * 自定义类名
-     * @en Custom classname
+     * 内层自定义类名
+     * @en Inner custom classname
      */
     className?: string;
     /**

package/esm/picker-view/components/picker-cell.js

@@ -53,6 +53,7 @@ var PickerCell = /*#__PURE__*/forwardRef(function (props, ref) {
   var rowCount = Math.max(rows % 2 === 0 ? rows + 1 : rows, 3);
   var isTouchMoveRef = useRef(false);
   var isTouchStopped = useRef(false);
+  var unmountCallbackRef = useRef();
   var timeRef = useRef(null);
   var colStyle = useMemo(function () {
     return getStyleWithVendor(_extends({
@@ -94,20 +95,24 @@ var PickerCell = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     setTransitionDuration(transDuration ? transDuration + "ms" : '');
-    setTransformY(transY); // 处理连续滑动的情况：
-    // @en handle the case of continuous sliding:
-    // 如果上一次callback还未执行，先cancel掉上一次回调，只执行最近的一次回调
-    // @en If the last callback has not been executed, cancel the last callback first, and only execute the latest callback
+    setTransformY(transY); // 处理连续滑动的情况：如果上一次callback还未执行，先cancel掉上一次回调
+    // @en handle the case of continuous sliding: If the last callback has not been executed, cancel the last callback first
 
     if (latestCallbackTimer.current) {
       clearTimeout(latestCallbackTimer.current);
     }
 
-    latestCallbackTimer.current = window.setTimeout(function () {
+    var setNormalStatus = function setNormalStatus() {
+      // 如果timer顺利执行，则在unmount时不再重复执行
+      // @en If the timer is successfully executed, it will not be repeated when unmounting
+      unmountCallbackRef.current = undefined;
       movingStatusRef.current = 'normal';
       setTransitionDuration('');
       callback();
-    }, transDuration);
+    };
+
+    unmountCallbackRef.current = setNormalStatus;
+    latestCallbackTimer.current = window.setTimeout(setNormalStatus, transDuration);
   }
 
   function _scrollToIndex(itemIndex, transDuration, callback) {
@@ -305,6 +310,15 @@ var PickerCell = /*#__PURE__*/forwardRef(function (props, ref) {
     _scrollToIndexWithChange(itemIndex, 200);
   }
 
+  useEffect(function () {
+    return function () {
+      // 卸载组件时，如果timer中还有未执行的onchange操作，则立刻执行该操作并移除timer
+      // @en When unloading the component, if there is an unexecuted onchange operation in the timer, execute it immediately and remove the timer
+      var timerId = latestCallbackTimer.current;
+      unmountCallbackRef.current == null ? void 0 : unmountCallbackRef.current();
+      timerId && clearTimeout(timerId);
+    };
+  }, []);
   useEffect(function () {
     if (wrapRef.current) {
       wrapRef.current.addEventListener('touchstart', _handleColumnTouchStart);

package/esm/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/esm/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/esm/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/esm/skeleton/elements.js

@@ -0,0 +1,281 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { cls, isArray, nextTick } from '@arco-design/mobile-utils';
+import { useListenResize } from '../_helpers';
+import { GlobalContext } from '../context-provider';
+import { SkeletonContext } from './skeleton-context';
+
+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 = 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));
+  };
+
+  useEffect(function () {
+    nextTick(function () {
+      calcLayout();
+    });
+  }, [dom, useRtl]);
+  useListenResize(calcLayout);
+  return offset;
+}
+
+export var SkeletonNode = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      children = props.children;
+
+  var _useContext = useContext(GlobalContext),
+      useRtl = _useContext.useRtl,
+      prefixCls = _useContext.prefixCls;
+
+  var _useContext2 = useContext(SkeletonContext),
+      backgroundColor = _useContext2.backgroundColor,
+      showAnimation = _useContext2.showAnimation,
+      animation = _useContext2.animation;
+
+  var domRef = useRef(null);
+  var isGradientAnimation = showAnimation && animation === 'gradient';
+  var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-node", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+    style: _extends({
+      backgroundColor: backgroundColor
+    }, style),
+    ref: domRef
+  }, children, isGradientAnimation && offset !== undefined && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-skeleton-animation-item",
+    style: {
+      left: 0 - offset
+    }
+  }));
+});
+export var SkeletonTitle = /*#__PURE__*/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 = useContext(GlobalContext),
+      useRtl = _useContext3.useRtl,
+      prefixCls = _useContext3.prefixCls;
+
+  var _useContext4 = useContext(SkeletonContext),
+      backgroundColor = _useContext4.backgroundColor,
+      showAnimation = _useContext4.showAnimation,
+      animation = _useContext4.animation;
+
+  var domRef = useRef(null);
+  var isGradientAnimation = showAnimation && animation === 'gradient';
+  var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-title", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+    style: _extends({
+      width: width,
+      backgroundColor: backgroundColor
+    }, style),
+    ref: domRef
+  }, isGradientAnimation && offset !== undefined && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-skeleton-animation-item",
+    style: {
+      left: 0 - offset
+    }
+  }));
+});
+export var SkeletonParagraph = /*#__PURE__*/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 = useContext(GlobalContext),
+      useRtl = _useContext5.useRtl,
+      prefixCls = _useContext5.prefixCls;
+
+  var _useContext6 = useContext(SkeletonContext),
+      backgroundColor = _useContext6.backgroundColor,
+      showAnimation = _useContext6.showAnimation,
+      animation = _useContext6.animation;
+
+  var domRef = useRef(null);
+  var lineDomRefs = useRef([]);
+  var isGradientAnimation = showAnimation && animation === 'gradient';
+  var offsets = useOffset(isGradientAnimation ? lineDomRefs.current : undefined, useRtl);
+  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.createElement("div", {
+    className: cls(prefixCls + "-skeleton-paragraph", className),
+    style: style,
+    ref: domRef
+  }, Array.from(new Array(rows)).map(function (_, idx) {
+    return /*#__PURE__*/React.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.createElement("div", {
+      className: prefixCls + "-skeleton-animation-item",
+      style: {
+        left: 0 - (offsets[idx] || 0)
+      }
+    }));
+  }));
+});
+export var SkeletonAvatar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$className4 = props.className,
+      className = _props$className4 === void 0 ? '' : _props$className4,
+      style = props.style;
+
+  var _useContext7 = useContext(GlobalContext),
+      useRtl = _useContext7.useRtl,
+      prefixCls = _useContext7.prefixCls;
+
+  var _useContext8 = useContext(SkeletonContext),
+      backgroundColor = _useContext8.backgroundColor,
+      showAnimation = _useContext8.showAnimation,
+      animation = _useContext8.animation;
+
+  var domRef = useRef(null);
+  var isGradientAnimation = showAnimation && animation === 'gradient';
+  var offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-avatar", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
+    style: _extends({
+      backgroundColor: backgroundColor
+    }, style),
+    ref: domRef
+  }, isGradientAnimation && offset !== undefined && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-skeleton-animation-item",
+    style: {
+      left: 0 - offset
+    }
+  }));
+});
+export var SkeletonGrid = /*#__PURE__*/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 = useContext(GlobalContext),
+      useRtl = _useContext9.useRtl,
+      prefixCls = _useContext9.prefixCls;
+
+  var _useContext10 = useContext(SkeletonContext),
+      backgroundColor = _useContext10.backgroundColor,
+      showAnimation = _useContext10.showAnimation,
+      animation = _useContext10.animation;
+
+  var domRef = useRef(null);
+  var iconDomRefs = useRef([]);
+  var textDomRefs = useRef([]);
+  var isGradientAnimation = showAnimation && animation === 'gradient';
+  var iconOffsets = useOffset(isGradientAnimation ? iconDomRefs.current : undefined, useRtl);
+  var textOffsets = useOffset(isGradientAnimation ? textDomRefs.current : undefined, useRtl);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-skeleton-grid", className),
+    style: style,
+    ref: domRef
+  }, Array.from(new Array(columns)).map(function (_, idx) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: idx,
+      className: cls(prefixCls + "-skeleton-grid-item")
+    }, /*#__PURE__*/React.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.createElement("div", {
+      className: prefixCls + "-skeleton-animation-item",
+      style: {
+        left: 0 - ((iconOffsets == null ? void 0 : iconOffsets[idx]) || 0)
+      }
+    })), /*#__PURE__*/React.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.createElement("div", {
+      className: prefixCls + "-skeleton-animation-item",
+      style: {
+        left: 0 - ((textOffsets == null ? void 0 : textOffsets[idx]) || 0)
+      }
+    })));
+  }));
+});