@arco-design/mobile-react 2.38.4 → 2.39.1

package/esm/show-monitor/index.js

@@ -7,28 +7,25 @@ var LISTEN_FLAG = 'data-show-listened';
  * 父 dom 节点集合
  * @en Parent dom node collection
  */
-
 var wrapperNodeList = [];
 /**
  * 同一父节点下监听队列
  * @en Listening queue under the same parent node
  */
-
 var listeners = {};
 var onOnceEmittedListeners = {};
 /**
  * Intersection Observer 同一 root 节点下的监听队列
  * @en Intersection Observer Listening queue under the same root node
  */
-
 var ioListeners = [];
 /**
  * Intersection Observer 监听 visible 状态队列
  * @en Intersection Observer listens to the visible status queue
  */
-
 var ioVisibleList = [];
 var throttlingVisibleChange;
+
 /**
  * 通过滚动事件监测 children 是否进入视口或离开视口。
  * @en Use scroll events to monitor whether children enter or leave the viewport.
@@ -37,61 +34,55 @@ var throttlingVisibleChange;
  * @name 滚动视口监听
  * @name_en ShowMonitor
  */
-
 var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      style = props.style,
-      getScrollContainer = props.getScrollContainer,
-      _props$throttle = props.throttle,
-      throttle = _props$throttle === void 0 ? 300 : _props$throttle,
-      _props$listenResize = props.listenResize,
-      listenResize = _props$listenResize === void 0 ? true : _props$listenResize,
-      _props$listenScroll = props.listenScroll,
-      listenScroll = _props$listenScroll === void 0 ? true : _props$listenScroll,
-      _props$overflow = props.overflow,
-      overflow = _props$overflow === void 0 ? false : _props$overflow,
-      _props$offset = props.offset,
-      offset = _props$offset === void 0 ? 0 : _props$offset,
-      _props$threshold = props.threshold,
-      threshold = _props$threshold === void 0 ? 0 : _props$threshold,
-      _props$once = props.once,
-      once = _props$once === void 0 ? false : _props$once,
-      _props$children = props.children,
-      children = _props$children === void 0 ? null : _props$children,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      onVisibleChange = props.onVisibleChange,
-      onClick = props.onClick;
+    style = props.style,
+    getScrollContainer = props.getScrollContainer,
+    _props$throttle = props.throttle,
+    throttle = _props$throttle === void 0 ? 300 : _props$throttle,
+    _props$listenResize = props.listenResize,
+    listenResize = _props$listenResize === void 0 ? true : _props$listenResize,
+    _props$listenScroll = props.listenScroll,
+    listenScroll = _props$listenScroll === void 0 ? true : _props$listenScroll,
+    _props$overflow = props.overflow,
+    overflow = _props$overflow === void 0 ? false : _props$overflow,
+    _props$offset = props.offset,
+    offset = _props$offset === void 0 ? 0 : _props$offset,
+    _props$threshold = props.threshold,
+    threshold = _props$threshold === void 0 ? 0 : _props$threshold,
+    _props$once = props.once,
+    once = _props$once === void 0 ? false : _props$once,
+    _props$children = props.children,
+    children = _props$children === void 0 ? null : _props$children,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    onVisibleChange = props.onVisibleChange,
+    onClick = props.onClick;
   var domRef = useRef(null);
   /**
    * 滚动容器父级元素
    * @en Scroll container parent element
    */
-
   var scrollPort = useRef(null);
   /**
    * 局部滚动元素父节点
    * @en Parent node of the local scroll element
    */
-
   var domRefParent = useRef(null);
   /**
    * 保存当前节点信息，类似于 class component 中 this
    * @en Save current node information, similar to this in class component
    */
-
   var listener = useRef(null);
   /**
    * Intersection Observer 实例化对象
    * @en Instantiated object of Intersection Observer
    */
-
   var io = useRef(null);
   /**
    * 父容器唯一 key（wrapperNodeList index）
    * @en The unique key of the parent container (wrapperNodeList index)
    */
-
   var wrapperKey = useRef(-1);
   var isChildrenExist = useRef(Boolean(children));
   var isSupportNativeApi = useMemo(function () {
@@ -101,7 +92,6 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current,
-
       /**
        * 提供检查元素是否可见的api
        * @en Provides an api to check whether the element is visible
@@ -115,7 +105,6 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
           threshold: threshold
         }, true);
       },
-
       /**
        * 重置元素初始可见态为false，并重新对元素可见度发起检测，优先级低于disabled（通常用在对ShowMonitor内部元素变化时发起的重新监听）
        * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
@@ -125,58 +114,48 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
           disabled ? ioUnobserve() : ioObserve();
         } else if (listener.current) {
           var _key = wrapperKey.current;
-
           if (once && onOnceEmittedListeners != null && onOnceEmittedListeners[_key]) {
             onOnceEmittedListeners[_key] = onOnceEmittedListeners[_key].filter(function (emitListener) {
               return emitListener !== listener.current;
             });
           }
-
           if (!disabled && !listeners[_key].find(function (_listener) {
             return _listener === listener.current;
           })) {
             listeners[_key].push(listener.current);
           }
-
           !disabled && _checkVisible(listener.current);
         }
       }
     };
   });
-
   function _checkVisible(component, ignoreCheckPreVisibleStatus) {
     if (ignoreCheckPreVisibleStatus === void 0) {
       ignoreCheckPreVisibleStatus = false;
     }
-
     var node = component.node,
-        compOverflow = component.overflow,
-        compOnce = component.once,
-        onCompVisibleChange = component.onVisibleChange,
-        preVisible = component.isVisible;
-
+      compOverflow = component.overflow,
+      compOnce = component.once,
+      onCompVisibleChange = component.onVisibleChange,
+      preVisible = component.isVisible;
     if (!(node instanceof HTMLElement)) {
       return;
     }
-
     var parent = scrollParent(node);
     /**
      * 当前元素为非 document 元素，即为局部滚动
      * @en If the current element is a non-document element, it's local scrolling
      */
-
     var isOverflow = compOverflow && [node.ownerDocument, document, document.documentElement].indexOf(parent) === -1;
     /**
      * 检查元素是否可见
      * @en Check if element is visible
      */
-
     var curVisible = isOverflow ? checkOverflowVisible(component, parent) : checkNormalVisible(component);
     /**
      * 忽略前后可见状态判断
      * @en Ignore the visible state judgment before and after
      */
-
     if (ignoreCheckPreVisibleStatus) {
       return curVisible;
     }
@@ -184,8 +163,6 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
      * 当前元素 visible 对比之前发生改变，触发回调函数
      * @en The current element visible is changed before the comparison, and the callback function is triggered
      */
-
-
     curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
     component.isVisible = curVisible;
     var key = wrapperKey.current;
@@ -193,7 +170,6 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
      * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉
      * @en After listening once, it is added to the pendingList queue, and then filtered out by listeners
      */
-
     if (!onOnceEmittedListeners[key]) {
       onOnceEmittedListeners[key] = [];
     }
@@ -201,11 +177,8 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
      * 当前元素不可见 -> 可见，且 once, 触发回调函数
      * @en The current element is invisible -> visible, and once, triggers the callback function
      */
-
-
     curVisible && !preVisible && compOnce && onOnceEmittedListeners[key].push(component);
   }
-
   var checkVisibleHandler = useCallback(function () {
     var key = wrapperKey.current;
     var curListeners = listeners[key] || [];
@@ -217,59 +190,51 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
     });
     onOnceEmittedListeners[key] = [];
   }, []);
-
   function handleCheckChildrenExist(target) {
     var dom = target || domRef.current;
     return isChildrenExist.current && (dom == null ? void 0 : dom.children.length);
   }
-
   function handleObserverStatusChange(entries) {
     entries.forEach(function (entry) {
       var isIntersecting = entry.isIntersecting,
-          target = entry.target;
+        target = entry.target;
       var visibleItem = ioVisibleList.find(function (item) {
         return item.node === target;
       });
-
       if (visibleItem) {
         var curVisible = visibleItem.isVisible,
-            onCompVisibleChange = visibleItem.onVisibleChange,
-            onceEmit = visibleItem.once;
+          onCompVisibleChange = visibleItem.onVisibleChange,
+          onceEmit = visibleItem.once;
         /**
          * 当前元素 visible 对比之前发生改变，触发回调函数
          * @en Callback when the visible status of current element changes before the comparison
          */
-
         isIntersecting !== curVisible && handleCheckChildrenExist(target) && onCompVisibleChange(isIntersecting, target);
         /**
          * 当前元素状态由不可见变为可见，且只触发一次
          * @en The current element is invisible -> visible, and once, triggers the callback
          */
-
         isIntersecting && !curVisible && onceEmit && target && ioUnobserve(target);
         visibleItem.isVisible = isIntersecting;
       }
     });
   }
+
   /**
    * 获取 io 单例
    * @en Get the io singleton
    */
-
-
   function getIOSingleton(ioOptions) {
     var root = ioOptions.root,
-        rootMargin = ioOptions.rootMargin,
-        ioThreshold = ioOptions.threshold;
+      rootMargin = ioOptions.rootMargin,
+      ioThreshold = ioOptions.threshold;
     var ioKey = JSON.stringify({
       rootMargin: rootMargin,
       threshold: ioThreshold
     });
-
     var _ioListener = ioListeners.find(function (ioListener) {
       return ioListener.root === root && ioListener.key === ioKey;
     });
-
     if (!_ioListener) {
       ioListeners.push({
         root: root,
@@ -280,13 +245,11 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
       io.current = _ioListener.listener;
     }
   }
-
   function ioObserve() {
     if (domRef.current && io.current) {
       var curIdx = ioVisibleList.findIndex(function (ioVisibleItem) {
         return ioVisibleItem.node === domRef.current;
       });
-
       if (curIdx !== -1) {
         ioVisibleList[curIdx].isVisible = false;
       } else {
@@ -297,32 +260,26 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
           onVisibleChange: onVisibleChange
         });
       }
-
       io.current.observe(domRef.current);
     }
   }
-
   function ioUnobserve(target) {
     var targetNode = target || domRef.current;
-
     if (io.current && targetNode) {
       var curIdx = ioVisibleList.findIndex(function (ioVisibleItem) {
         return ioVisibleItem.node === targetNode;
       });
-
       if (curIdx !== -1) {
         ioVisibleList.splice(curIdx, 1);
       }
-
       io.current.unobserve(targetNode);
     }
   }
+
   /**
    * 非首次下disabled变化时，重新监听元素
    * @en Re-listen to the element when it is not the first time that the disabled status changes,
    */
-
-
   useEffect(function () {
     if (isSupportNativeApi) {
       // 非首次 render 下
@@ -338,7 +295,6 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
           var isExist = listeners[wrapperKey.current].findIndex(function (item) {
             return item.node === domRef.current;
           });
-
           if (isExist !== -1) {
             listeners[wrapperKey.current].splice(0, 1);
           }
@@ -357,7 +313,6 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
     scrollPort.current = getScrollContainer ? getScrollContainer() : window;
     if (!scrollPort.current) return;
     var wrapperNodeIndex = wrapperNodeList.indexOf(scrollPort.current);
-
     if (wrapperNodeIndex === -1) {
       // 当前滚动视口元素不在 wrapperNodeList 中, 入队列
       // @en The current scroll viewport element is not in the wrapperNodeList, push it into the list
@@ -368,9 +323,7 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
       // @en Take the current index as the key
       wrapperKey.current = wrapperNodeIndex;
     }
-
     var curWrapperKey = wrapperKey.current;
-
     if (isSupportNativeApi) {
       if (domRef.current) {
         domRefParent.current = scrollParent(domRef.current);
@@ -379,7 +332,6 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
         var overflowRoot = isHTMLElement ? parent : null;
         var root = overflow ? overflowRoot : scrollPort.current === window ? null : scrollPort.current;
         var rootMargin = '';
-
         if (Array.isArray(offset)) {
           if (offset.length === 2) {
             rootMargin = offset[0] + "px 0px " + offset[1] + "px";
@@ -392,7 +344,6 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
         } else {
           rootMargin = offset + "px";
         }
-
         getIOSingleton({
           root: root,
           rootMargin: rootMargin,
@@ -405,29 +356,25 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
       // @en Callback after throttling
       throttlingVisibleChange = checkVisibleHandler;
       throttle && (throttlingVisibleChange = lodashThrottle(throttlingVisibleChange, throttle));
-
       if (overflow) {
         if (domRef.current) {
           domRefParent.current = scrollParent(domRef.current);
           var _parent = domRefParent.current;
-
           if (_parent && _parent instanceof HTMLElement && typeof _parent.getAttribute === 'function') {
             var listenerCount = 1 + Number(_parent.getAttribute(LISTEN_FLAG));
-
             if (!listeners[curWrapperKey]) {
               listeners[curWrapperKey] = [];
             }
-
             if (listenerCount === 1) {
               // listener 数量为1时监听事件（列表中插入 ShowMonitor 时做判断）
               // @en Listen when the number of listeners is 1 (judging when ShowMonitor is inserted into the list)
               _parent.addEventListener('scroll', throttlingVisibleChange);
             }
-
             _parent.setAttribute(LISTEN_FLAG, String(listenerCount));
           }
         }
-      } else if (!listeners[curWrapperKey] || listeners[curWrapperKey].length === 0 || // 相同curWrapperKey内全部为overflow场景，需要单独注册scroll事件
+      } else if (!listeners[curWrapperKey] || listeners[curWrapperKey].length === 0 ||
+      // 相同curWrapperKey内全部为overflow场景，需要单独注册scroll事件
       // @en It need to register the scroll event separately when all values in the same curWrapperKey are overflow
       listeners[curWrapperKey] && listeners[curWrapperKey].every(function (it) {
         return it.overflow;
@@ -435,11 +382,9 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
         if (!listeners[curWrapperKey]) {
           listeners[curWrapperKey] = [];
         }
-
         listenScroll && scrollPort.current.addEventListener('scroll', throttlingVisibleChange);
         listenResize && scrollPort.current.addEventListener('resize', throttlingVisibleChange);
       }
-
       listener.current = {
         node: domRef.current,
         isVisible: false,
@@ -448,8 +393,8 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
         offset: offset,
         threshold: threshold,
         onVisibleChange: onVisibleChange
-      }; // 将当前 listener 存入 listeners
-
+      };
+      // 将当前 listener 存入 listeners
       !disabled && listeners[curWrapperKey].push(listener.current);
       nextTick(function () {
         !disabled && _checkVisible(listener.current);
@@ -463,10 +408,8 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
       } else {
         if (overflow) {
           var parent = domRefParent.current;
-
           if (parent && parent instanceof HTMLElement && typeof parent.getAttribute === 'function') {
             var listenerCount = Number(parent.getAttribute(LISTEN_FLAG) || 0) - 1;
-
             if (listenerCount === 0) {
               // 如果监听队列中无节点，解绑事件
               // @en If there is no node in the listening queue, unbind the event
@@ -478,20 +421,17 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
             }
           }
         }
-
         var _key2 = wrapperKey.current;
         var curListeners = listeners[_key2];
-
         if (curListeners) {
           // 不在监听队列中，移除
           // @en Not in the listening queue, remove it
           var index = curListeners.indexOf(listener.current);
-          index !== -1 && curListeners.splice(index, 1); // 监听队列为空，解绑 scroll、resize 事件
+          index !== -1 && curListeners.splice(index, 1);
+          // 监听队列为空，解绑 scroll、resize 事件
           // @en When the listening queue is empty, unbind scroll and resize events
-
           if (curListeners.length === 0) {
             delete listeners[_key2];
-
             if (scrollPort.current) {
               scrollPort.current.removeEventListener('scroll', throttlingVisibleChange);
               scrollPort.current.removeEventListener('resize', throttlingVisibleChange);

package/esm/skeleton/elements.js

@@ -4,36 +4,28 @@ 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];
-
+    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();
@@ -42,22 +34,18 @@ function useOffset(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;
-
+    className = _props$className === void 0 ? '' : _props$className,
+    style = props.style,
+    children = props.children;
   var _useContext = useContext(GlobalContext),
-      useRtl = _useContext.useRtl,
-      prefixCls = _useContext.prefixCls;
-
+    useRtl = _useContext.useRtl,
+    prefixCls = _useContext.prefixCls;
   var _useContext2 = useContext(SkeletonContext),
-      backgroundColor = _useContext2.backgroundColor,
-      showAnimation = _useContext2.showAnimation,
-      animation = _useContext2.animation;
-
+    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);
@@ -81,20 +69,17 @@ export var SkeletonNode = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 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;
-
+    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;
-
+    useRtl = _useContext3.useRtl,
+    prefixCls = _useContext3.prefixCls;
   var _useContext4 = useContext(SkeletonContext),
-      backgroundColor = _useContext4.backgroundColor,
-      showAnimation = _useContext4.showAnimation,
-      animation = _useContext4.animation;
-
+    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);
@@ -119,22 +104,19 @@ export var SkeletonTitle = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 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;
-
+    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;
-
+    useRtl = _useContext5.useRtl,
+    prefixCls = _useContext5.prefixCls;
   var _useContext6 = useContext(SkeletonContext),
-      backgroundColor = _useContext6.backgroundColor,
-      showAnimation = _useContext6.showAnimation,
-      animation = _useContext6.animation;
-
+    backgroundColor = _useContext6.backgroundColor,
+    showAnimation = _useContext6.showAnimation,
+    animation = _useContext6.animation;
   var domRef = useRef(null);
   var lineDomRefs = useRef([]);
   var isGradientAnimation = showAnimation && animation === 'gradient';
@@ -144,19 +126,15 @@ export var SkeletonParagraph = /*#__PURE__*/forwardRef(function (props, ref) {
       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,
@@ -184,18 +162,15 @@ export var SkeletonParagraph = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 export var SkeletonAvatar = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className4 = props.className,
-      className = _props$className4 === void 0 ? '' : _props$className4,
-      style = props.style;
-
+    className = _props$className4 === void 0 ? '' : _props$className4,
+    style = props.style;
   var _useContext7 = useContext(GlobalContext),
-      useRtl = _useContext7.useRtl,
-      prefixCls = _useContext7.prefixCls;
-
+    useRtl = _useContext7.useRtl,
+    prefixCls = _useContext7.prefixCls;
   var _useContext8 = useContext(SkeletonContext),
-      backgroundColor = _useContext8.backgroundColor,
-      showAnimation = _useContext8.showAnimation,
-      animation = _useContext8.animation;
-
+    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);
@@ -219,20 +194,17 @@ export var SkeletonAvatar = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 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;
-
+    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;
-
+    useRtl = _useContext9.useRtl,
+    prefixCls = _useContext9.prefixCls;
+  var _useContext0 = useContext(SkeletonContext),
+    backgroundColor = _useContext0.backgroundColor,
+    showAnimation = _useContext0.showAnimation,
+    animation = _useContext0.animation;
   var domRef = useRef(null);
   var iconDomRefs = useRef([]);
   var textDomRefs = useRef([]);