@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/show-monitor/index.js

@@ -0,0 +1,416 @@
+import React, { useRef, forwardRef, useImperativeHandle, useEffect, useCallback, useMemo, } from 'react';
+import lodashThrottle from 'lodash.throttle';
+import { scrollParent, checkOverflowVisible, checkNormalVisible, nextTick, cls, } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+const LISTEN_FLAG = 'data-show-listened';
+/**
+ * 父 dom 节点集合
+ * @en Parent dom node collection
+ */
+const wrapperNodeList = [];
+/**
+ * 同一父节点下监听队列
+ * @en Listening queue under the same parent node
+ */
+const listeners = {};
+const onOnceEmittedListeners = {};
+/**
+ * Intersection Observer 同一 root 节点下的监听队列
+ * @en Intersection Observer Listening queue under the same root node
+ */
+const ioListeners = [];
+/**
+ * Intersection Observer 监听 visible 状态队列
+ * @en Intersection Observer listens to the visible status queue
+ */
+const ioVisibleList = [];
+let throttlingVisibleChange;
+/**
+ * 通过滚动事件监测 children 是否进入视口或离开视口。
+ * @en Use scroll events to monitor whether children enter or leave the viewport.
+ * @type 其他
+ * @type_en Others
+ * @name 滚动视口监听
+ * @name_en ShowMonitor
+ */
+const ShowMonitor = forwardRef((props, ref) => {
+    const { className, style, getScrollContainer, throttle = 300, listenResize = true, listenScroll = true, overflow = false, offset = 0, threshold = 0, once = false, children = null, disabled = false, onVisibleChange, onClick, } = props;
+    const domRef = useRef(null);
+    /**
+     * 滚动容器父级元素
+     * @en Scroll container parent element
+     */
+    const scrollPort = useRef(null);
+    /**
+     * 局部滚动元素父节点
+     * @en Parent node of the local scroll element
+     */
+    const domRefParent = useRef(null);
+    /**
+     * 保存当前节点信息，类似于 class component 中 this
+     * @en Save current node information, similar to this in class component
+     */
+    const listener = useRef(null);
+    /**
+     * Intersection Observer 实例化对象
+     * @en Instantiated object of Intersection Observer
+     */
+    const io = useRef(null);
+    /**
+     * 父容器唯一 key（wrapperNodeList index）
+     * @en The unique key of the parent container (wrapperNodeList index)
+     */
+    const wrapperKey = useRef(-1);
+    const isChildrenExist = useRef(Boolean(children));
+    const isSupportNativeApi = useMemo(() => typeof IntersectionObserver === 'function', []); // 是否支持 Intersection Observer
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        /**
+         * 提供检查元素是否可见的api
+         * @en Provides an api to check whether the element is visible
+         */
+        checkVisible: () => checkVisible({
+            node: domRef.current,
+            overflow,
+            onVisibleChange,
+            offset,
+            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)
+         */
+        flushVisibleStatus() {
+            if (isSupportNativeApi) {
+                disabled ? ioUnobserve() : ioObserve();
+            }
+            else if (listener.current) {
+                const key = wrapperKey.current;
+                if (once && onOnceEmittedListeners?.[key]) {
+                    onOnceEmittedListeners[key] = onOnceEmittedListeners[key].filter(emitListener => emitListener !== listener.current);
+                }
+                if (!disabled &&
+                    !listeners[key].find(_listener => _listener === listener.current)) {
+                    listeners[key].push(listener.current);
+                }
+                !disabled && checkVisible(listener.current);
+            }
+        },
+    }));
+    function checkVisible(component, ignoreCheckPreVisibleStatus = false) {
+        const { node, overflow: compOverflow, once: compOnce, onVisibleChange: onCompVisibleChange, isVisible: preVisible, } = component;
+        if (!(node instanceof HTMLElement)) {
+            return;
+        }
+        const parent = scrollParent(node);
+        /**
+         * 当前元素为非 document 元素，即为局部滚动
+         * @en If the current element is a non-document element, it's local scrolling
+         */
+        const isOverflow = compOverflow &&
+            [node.ownerDocument, document, document.documentElement].indexOf(parent) === -1;
+        /**
+         * 检查元素是否可见
+         * @en Check if element is visible
+         */
+        const curVisible = isOverflow
+            ? checkOverflowVisible(component, parent)
+            : checkNormalVisible(component);
+        /**
+         * 忽略前后可见状态判断
+         * @en Ignore the visible state judgment before and after
+         */
+        if (ignoreCheckPreVisibleStatus) {
+            return curVisible;
+        }
+        /**
+         * 当前元素 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;
+        const key = wrapperKey.current;
+        /**
+         * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉
+         * @en After listening once, it is added to the pendingList queue, and then filtered out by listeners
+         */
+        if (!onOnceEmittedListeners[key]) {
+            onOnceEmittedListeners[key] = [];
+        }
+        /**
+         * 当前元素不可见 -> 可见，且 once, 触发回调函数
+         * @en The current element is invisible -> visible, and once, triggers the callback function
+         */
+        curVisible && !preVisible && compOnce && onOnceEmittedListeners[key].push(component);
+    }
+    const checkVisibleHandler = useCallback(() => {
+        const key = wrapperKey.current;
+        const curListeners = listeners[key] || [];
+        curListeners.forEach(listen => checkVisible(listen));
+        listeners[key] = curListeners.filter(item => onOnceEmittedListeners[key].indexOf(item) === -1);
+        onOnceEmittedListeners[key] = [];
+    }, []);
+    function handleCheckChildrenExist(target) {
+        const dom = target || domRef.current;
+        return isChildrenExist.current && dom?.children.length;
+    }
+    function handleObserverStatusChange(entries) {
+        entries.forEach(entry => {
+            const { isIntersecting, target } = entry;
+            const visibleItem = ioVisibleList.find(item => item.node === target);
+            if (visibleItem) {
+                const { isVisible: curVisible, onVisibleChange: onCompVisibleChange, once: onceEmit, } = visibleItem;
+                /**
+                 * 当前元素 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) {
+        const { root, rootMargin, threshold: ioThreshold } = ioOptions;
+        const ioKey = JSON.stringify({ rootMargin, threshold: ioThreshold });
+        const _ioListener = ioListeners.find(ioListener => ioListener.root === root && ioListener.key === ioKey);
+        if (!_ioListener) {
+            ioListeners.push({
+                root,
+                key: ioKey,
+                listener: (io.current = new IntersectionObserver(handleObserverStatusChange, ioOptions)),
+            });
+        }
+        else {
+            io.current = _ioListener.listener;
+        }
+    }
+    function ioObserve() {
+        if (domRef.current && io.current) {
+            const curIdx = ioVisibleList.findIndex(ioVisibleItem => ioVisibleItem.node === domRef.current);
+            if (curIdx !== -1) {
+                ioVisibleList[curIdx].isVisible = false;
+            }
+            else {
+                ioVisibleList.push({
+                    node: domRef.current,
+                    isVisible: false,
+                    once,
+                    onVisibleChange,
+                });
+            }
+            io.current.observe(domRef.current);
+        }
+    }
+    function ioUnobserve(target) {
+        const targetNode = target || domRef.current;
+        if (io.current && targetNode) {
+            const curIdx = ioVisibleList.findIndex(ioVisibleItem => 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(() => {
+        if (isSupportNativeApi) {
+            // 非首次 render 下
+            // @en Not for the first time
+            disabled ? ioUnobserve() : ioObserve();
+        }
+        else {
+            // 非首次 render 下
+            // @en Not for the first time
+            if (wrapperKey.current !== -1 && listener.current && listeners[wrapperKey.current]) {
+                // 禁用监听，找到对应listener并删除
+                // @en Disable listening, find the corresponding listener and delete it
+                if (disabled) {
+                    const isExist = listeners[wrapperKey.current].findIndex(item => item.node === domRef.current);
+                    if (isExist !== -1) {
+                        listeners[wrapperKey.current].splice(0, 1);
+                    }
+                }
+                else {
+                    // 开启监听
+                    // @en Start to listen
+                    listeners[wrapperKey.current].push(listener.current);
+                }
+            }
+        }
+    }, [disabled]);
+    useEffect(() => {
+        isChildrenExist.current = Boolean(children);
+    }, [children]);
+    useEffect(() => {
+        scrollPort.current = getScrollContainer ? getScrollContainer() : window;
+        if (!scrollPort.current)
+            return;
+        const 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
+            wrapperNodeList.push(scrollPort.current);
+            wrapperKey.current = wrapperNodeList.length - 1;
+        }
+        else {
+            // 取当前 index 作为 key
+            // @en Take the current index as the key
+            wrapperKey.current = wrapperNodeIndex;
+        }
+        const curWrapperKey = wrapperKey.current;
+        if (isSupportNativeApi) {
+            if (domRef.current) {
+                domRefParent.current = scrollParent(domRef.current);
+                const parent = domRefParent.current;
+                const isHTMLElement = [domRef.current.ownerDocument, document, document.documentElement].indexOf(parent) === -1;
+                const overflowRoot = isHTMLElement ? parent : null;
+                const root = (overflow
+                    ? overflowRoot
+                    : scrollPort.current === window
+                        ? null
+                        : scrollPort.current);
+                let rootMargin = '';
+                if (Array.isArray(offset)) {
+                    if (offset.length === 2) {
+                        rootMargin = `${offset[0]}px 0px ${offset[1]}px`;
+                    }
+                    else {
+                        offset.forEach((val, index) => {
+                            const space = index === 0 ? '' : ' ';
+                            rootMargin += `${space}${val}px`;
+                        });
+                    }
+                }
+                else {
+                    rootMargin = `${offset}px`;
+                }
+                getIOSingleton({
+                    root,
+                    rootMargin,
+                    threshold,
+                });
+                !disabled && ioObserve();
+            }
+        }
+        else {
+            // 节流后回调函数
+            // @en Callback after throttling
+            throttlingVisibleChange = checkVisibleHandler;
+            throttle &&
+                (throttlingVisibleChange = lodashThrottle(throttlingVisibleChange, throttle));
+            if (overflow) {
+                if (domRef.current) {
+                    domRefParent.current = scrollParent(domRef.current);
+                    const parent = domRefParent.current;
+                    if (parent &&
+                        parent instanceof HTMLElement &&
+                        typeof parent.getAttribute === 'function') {
+                        const 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事件
+                // @en It need to register the scroll event separately when all values in the same curWrapperKey are overflow
+                (listeners[curWrapperKey] && listeners[curWrapperKey].every(it => it.overflow))) {
+                if (!listeners[curWrapperKey]) {
+                    listeners[curWrapperKey] = [];
+                }
+                listenScroll &&
+                    scrollPort.current.addEventListener('scroll', throttlingVisibleChange);
+                listenResize &&
+                    scrollPort.current.addEventListener('resize', throttlingVisibleChange);
+            }
+            listener.current = {
+                node: domRef.current,
+                isVisible: false,
+                overflow,
+                once,
+                offset,
+                threshold,
+                onVisibleChange,
+            };
+            // 将当前 listener 存入 listeners
+            !disabled && listeners[curWrapperKey].push(listener.current);
+            nextTick(() => {
+                !disabled && checkVisible(listener.current);
+            });
+        }
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (isSupportNativeApi) {
+                ioUnobserve();
+            }
+            else {
+                if (overflow) {
+                    const parent = domRefParent.current;
+                    if (parent &&
+                        parent instanceof HTMLElement &&
+                        typeof parent.getAttribute === 'function') {
+                        const listenerCount = Number(parent.getAttribute(LISTEN_FLAG) || 0) - 1;
+                        if (listenerCount === 0) {
+                            // 如果监听队列中无节点，解绑事件
+                            // @en If there is no node in the listening queue, unbind the event
+                            parent.removeEventListener('scroll', throttlingVisibleChange);
+                        }
+                        else {
+                            // 如果监听队列中有元素节点，将 dataset 减1
+                            // @en If there are element nodes in the listening queue, decrement dataset by 1
+                            parent.setAttribute(LISTEN_FLAG, String(listenerCount));
+                        }
+                    }
+                }
+                const key = wrapperKey.current;
+                const curListeners = listeners[key];
+                if (curListeners) {
+                    // 不在监听队列中，移除
+                    // @en Not in the listening queue, remove it
+                    const index = curListeners.indexOf(listener.current);
+                    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[key];
+                        if (scrollPort.current) {
+                            scrollPort.current.removeEventListener('scroll', throttlingVisibleChange);
+                            scrollPort.current.removeEventListener('resize', throttlingVisibleChange);
+                        }
+                    }
+                }
+            }
+        };
+    }, []);
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { className: cls(`${prefixCls}-show-monitor`, className), style: style, ref: domRef, onClick: onClick }, children))));
+});
+export default ShowMonitor;

package/esnext/show-monitor/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esnext/show-monitor/style/css/index.js

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esnext/show-monitor/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/esnext/show-monitor/style/index.js

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/esnext/show-monitor/style/index.less

@@ -0,0 +1 @@
+// 这里啥也没有，但是为了兼容 babel-plugin-import的统一引用，还是需要创建下文件

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

@@ -0,0 +1,117 @@
+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';
+const calcOffset = (dom, useRtl) => {
+    if (!dom) {
+        return 0;
+    }
+    if (useRtl) {
+        return dom.offsetLeft - dom.offsetTop;
+    }
+    return dom.offsetLeft + dom.offsetTop;
+};
+function useOffset(dom, useRtl) {
+    const [offset, setOffset] = useState();
+    const calcLayout = () => {
+        const isList = Array.isArray(dom);
+        if (!(isList ? dom.length > 0 : dom?.current)) {
+            return;
+        }
+        setOffset(isList
+            ? dom.map(item => calcOffset(item, useRtl))
+            : calcOffset(dom.current, useRtl));
+    };
+    useEffect(() => {
+        nextTick(() => {
+            calcLayout();
+        });
+    }, [dom, useRtl]);
+    useListenResize(calcLayout);
+    return offset;
+}
+export const SkeletonNode = forwardRef((props, ref) => {
+    const { className = '', style, children } = props;
+    const { useRtl, prefixCls } = useContext(GlobalContext);
+    const { backgroundColor, showAnimation, animation } = useContext(SkeletonContext);
+    const domRef = useRef(null);
+    const isGradientAnimation = showAnimation && animation === 'gradient';
+    const offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    return (React.createElement("div", { className: cls(`${prefixCls}-skeleton-item`, `${prefixCls}-skeleton-node`, showAnimation && `${prefixCls}-skeleton-animation-${animation}`, className), style: { backgroundColor, ...style }, ref: domRef },
+        children,
+        isGradientAnimation && offset !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: { left: 0 - offset } }))));
+});
+export const SkeletonTitle = forwardRef((props, ref) => {
+    const { className = '', style, width = '40%' } = props;
+    const { useRtl, prefixCls } = useContext(GlobalContext);
+    const { backgroundColor, showAnimation, animation } = useContext(SkeletonContext);
+    const domRef = useRef(null);
+    const isGradientAnimation = showAnimation && animation === 'gradient';
+    const offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    return (React.createElement("div", { className: cls(`${prefixCls}-skeleton-item`, `${prefixCls}-skeleton-title`, showAnimation && `${prefixCls}-skeleton-animation-${animation}`, className), style: { width, backgroundColor, ...style }, ref: domRef }, isGradientAnimation && offset !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: { left: 0 - offset } }))));
+});
+export const SkeletonParagraph = forwardRef((props, ref) => {
+    const { className = '', style, rows = 3, width = '60%' } = props;
+    const { useRtl, prefixCls } = useContext(GlobalContext);
+    const { backgroundColor, showAnimation, animation } = useContext(SkeletonContext);
+    const domRef = useRef(null);
+    const lineDomRefs = useRef([]);
+    const isGradientAnimation = showAnimation && animation === 'gradient';
+    const offsets = useOffset(isGradientAnimation ? lineDomRefs.current : undefined, useRtl);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    const getWidth = (idx) => {
+        if (isArray(width)) {
+            return width[idx];
+        }
+        if (rows - 1 === idx) {
+            return width;
+        }
+        return undefined;
+    };
+    return (React.createElement("div", { className: cls(`${prefixCls}-skeleton-paragraph`, className), style: style, ref: domRef }, Array.from(new Array(rows)).map((_, idx) => (React.createElement("div", { key: idx, className: cls(`${prefixCls}-skeleton-item`, `${prefixCls}-skeleton-paragraph-line`, showAnimation && `${prefixCls}-skeleton-animation-${animation}`), style: {
+            width: getWidth(idx),
+            backgroundColor,
+        }, ref: el => el && (lineDomRefs.current[idx] = el) }, isGradientAnimation && offsets !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: { left: 0 - (offsets[idx] || 0) } })))))));
+});
+export const SkeletonAvatar = forwardRef((props, ref) => {
+    const { className = '', style } = props;
+    const { useRtl, prefixCls } = useContext(GlobalContext);
+    const { backgroundColor, showAnimation, animation } = useContext(SkeletonContext);
+    const domRef = useRef(null);
+    const isGradientAnimation = showAnimation && animation === 'gradient';
+    const offset = useOffset(isGradientAnimation ? domRef : undefined, useRtl);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    return (React.createElement("div", { className: cls(`${prefixCls}-skeleton-item`, `${prefixCls}-skeleton-avatar`, showAnimation && `${prefixCls}-skeleton-animation-${animation}`, className), style: { backgroundColor, ...style }, ref: domRef }, isGradientAnimation && offset !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: { left: 0 - offset } }))));
+});
+export const SkeletonGrid = forwardRef((props, ref) => {
+    const { className = '', style, columns = 4 } = props;
+    const { useRtl, prefixCls } = useContext(GlobalContext);
+    const { backgroundColor, showAnimation, animation } = useContext(SkeletonContext);
+    const domRef = useRef(null);
+    const iconDomRefs = useRef([]);
+    const textDomRefs = useRef([]);
+    const isGradientAnimation = showAnimation && animation === 'gradient';
+    const iconOffsets = useOffset(isGradientAnimation ? iconDomRefs.current : undefined, useRtl);
+    const textOffsets = useOffset(isGradientAnimation ? textDomRefs.current : undefined, useRtl);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    return (React.createElement("div", { className: cls(`${prefixCls}-skeleton-grid`, className), style: style, ref: domRef }, Array.from(new Array(columns)).map((_, idx) => (React.createElement("div", { key: idx, className: cls(`${prefixCls}-skeleton-grid-item`) },
+        React.createElement("div", { className: cls(`${prefixCls}-skeleton-item`, `${prefixCls}-skeleton-grid-icon`, showAnimation && `${prefixCls}-skeleton-animation-${animation}`), style: { backgroundColor }, ref: el => el && (iconDomRefs.current[idx] = el) }, isGradientAnimation && iconOffsets !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: {
+                left: 0 - (iconOffsets?.[idx] || 0),
+            } }))),
+        React.createElement("div", { className: cls(`${prefixCls}-skeleton-item`, `${prefixCls}-skeleton-grid-text`, showAnimation && `${prefixCls}-skeleton-animation-${animation}`), style: { backgroundColor }, ref: el => el && (textDomRefs.current[idx] = el) }, isGradientAnimation && textOffsets !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: {
+                left: 0 - (textOffsets?.[idx] || 0),
+            } }))))))));
+});

package/esnext/skeleton/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SkeletonProps, SkeletonRef } from './type';
+export * 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;

package/esnext/skeleton/index.js

@@ -0,0 +1,50 @@
+import React, { useRef, forwardRef, useImperativeHandle, useContext } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import { SkeletonAvatar as Avatar, SkeletonGrid as Grid, SkeletonNode as Node, SkeletonParagraph as Paragraph, SkeletonTitle as Title, } from './elements';
+import { SkeletonContext } from './skeleton-context';
+export * from './type';
+function getComponentProps(prop) {
+    if (prop && typeof prop === 'object') {
+        return prop;
+    }
+    return {};
+}
+const Skeleton = forwardRef((props, ref) => {
+    const { className = '', style, children, title = true, paragraph = true, avatar = false, grid, showAnimation = true, animation = 'gradient', animationGradientColor, backgroundColor, } = props;
+    const domRef = useRef(null);
+    const { prefixCls } = useContext(GlobalContext);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    const isGrid = !!grid;
+    const hasTitle = !!title;
+    const hasParagraph = !!paragraph;
+    const hasAvatar = !!avatar;
+    const content = isGrid ? (React.createElement(Grid, Object.assign({}, getComponentProps(grid)))) : (React.createElement(React.Fragment, null,
+        hasAvatar && React.createElement(Avatar, Object.assign({}, getComponentProps(avatar))),
+        (hasTitle || hasParagraph) && (React.createElement("div", { className: `${prefixCls}-skeleton-content` },
+            hasTitle && React.createElement(Title, Object.assign({}, getComponentProps(title))),
+            hasParagraph && React.createElement(Paragraph, Object.assign({}, getComponentProps(paragraph)))))));
+    return (React.createElement("div", { className: cls(`${prefixCls}-skeleton`, {
+            [`${prefixCls}-skeleton-with-avatar`]: hasAvatar,
+        }, className), style: { color: animationGradientColor, ...style }, ref: domRef },
+        React.createElement(SkeletonContext.Provider, { value: { showAnimation, animation, backgroundColor } },
+            content,
+            children)));
+});
+/**
+ * 在内容加载过程中展示一组占位图形。
+ * @en Display a set of placeholder graphics during content loading
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 骨架屏
+ * @name_en Skeleton
+ */
+export default componentWrapper(Skeleton, {
+    Node,
+    Title,
+    Paragraph,
+    Avatar,
+    Grid,
+});

package/esnext/skeleton/skeleton-context.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SkeletonContextParams } from './type';
+export declare const SkeletonContext: React.Context<SkeletonContextParams>;

package/esnext/skeleton/skeleton-context.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const SkeletonContext = React.createContext({
+    showAnimation: true,
+    animation: 'gradient',
+});