@arco-design/mobile-react 2.28.1 → 2.29.0

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

@@ -75,6 +75,7 @@
     var rowCount = Math.max(rows % 2 === 0 ? rows + 1 : rows, 3);
     var isTouchMoveRef = (0, _react.useRef)(false);
     var isTouchStopped = (0, _react.useRef)(false);
+    var unmountCallbackRef = (0, _react.useRef)();
     var timeRef = (0, _react.useRef)(null);
     var colStyle = (0, _react.useMemo)(function () {
       return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({
@@ -116,20 +117,24 @@
       }
 
       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) {
@@ -327,6 +332,15 @@
       _scrollToIndexWithChange(itemIndex, 200);
     }
 
+    (0, _react.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);
+      };
+    }, []);
     (0, _react.useEffect)(function () {
       if (wrapRef.current) {
         wrapRef.current.addEventListener('touchstart', _handleColumnTouchStart);

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

@@ -0,0 +1,306 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../_helpers", "../context-provider", "./skeleton-context"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../_helpers"), require("../context-provider"), require("./skeleton-context"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global._helpers, global.contextProvider, global.skeletonContext);
+    global.elements = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _helpers, _contextProvider, _skeletonContext) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.SkeletonTitle = _exports.SkeletonParagraph = _exports.SkeletonNode = _exports.SkeletonGrid = _exports.SkeletonAvatar = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+
+  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/umd/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;

package/umd/skeleton/index.js

@@ -0,0 +1,104 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "./elements", "./skeleton-context"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("./elements"), require("./skeleton-context"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global.elements, global.skeletonContext);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider, _elements, _skeletonContext) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+
+  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; }
+
+  function getComponentProps(prop) {
+    if (prop && typeof prop === 'object') {
+      return prop;
+    }
+
+    return {};
+  }
+
+  var Skeleton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var _cls;
+
+    var _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        style = props.style,
+        children = props.children,
+        _props$title = props.title,
+        title = _props$title === void 0 ? true : _props$title,
+        _props$paragraph = props.paragraph,
+        paragraph = _props$paragraph === void 0 ? true : _props$paragraph,
+        _props$avatar = props.avatar,
+        avatar = _props$avatar === void 0 ? false : _props$avatar,
+        grid = props.grid,
+        _props$showAnimation = props.showAnimation,
+        showAnimation = _props$showAnimation === void 0 ? true : _props$showAnimation,
+        _props$animation = props.animation,
+        animation = _props$animation === void 0 ? 'gradient' : _props$animation,
+        animationGradientColor = props.animationGradientColor,
+        backgroundColor = props.backgroundColor;
+    var domRef = (0, _react.useRef)(null);
+
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        prefixCls = _useContext.prefixCls;
+
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    });
+    var isGrid = !!grid;
+    var hasTitle = !!title;
+    var hasParagraph = !!paragraph;
+    var hasAvatar = !!avatar;
+    var content = isGrid ? /*#__PURE__*/_react.default.createElement(_elements.SkeletonGrid, getComponentProps(grid)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasAvatar && /*#__PURE__*/_react.default.createElement(_elements.SkeletonAvatar, getComponentProps(avatar)), (hasTitle || hasParagraph) && /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-skeleton-content"
+    }, hasTitle && /*#__PURE__*/_react.default.createElement(_elements.SkeletonTitle, getComponentProps(title)), hasParagraph && /*#__PURE__*/_react.default.createElement(_elements.SkeletonParagraph, getComponentProps(paragraph))));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-skeleton", (_cls = {}, _cls[prefixCls + "-skeleton-with-avatar"] = hasAvatar, _cls), className),
+      style: (0, _extends2.default)({
+        color: animationGradientColor
+      }, style),
+      ref: domRef
+    }, /*#__PURE__*/_react.default.createElement(_skeletonContext.SkeletonContext.Provider, {
+      value: {
+        showAnimation: showAnimation,
+        animation: animation,
+        backgroundColor: backgroundColor
+      }
+    }, content, children));
+  });
+  /**
+   * 在内容加载过程中展示一组占位图形。
+   * @en Display a set of placeholder graphics during content loading
+   * @type 信息展示
+   * @type_en Data Display
+   * @name 骨架屏
+   * @name_en Skeleton
+   */
+
+  var _default = (0, _mobileUtils.componentWrapper)(Skeleton, {
+    Node: _elements.SkeletonNode,
+    Title: _elements.SkeletonTitle,
+    Paragraph: _elements.SkeletonParagraph,
+    Avatar: _elements.SkeletonAvatar,
+    Grid: _elements.SkeletonGrid
+  });
+
+  _exports.default = _default;
+});

package/umd/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/umd/skeleton/skeleton-context.js

@@ -0,0 +1,28 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react);
+    global.skeletonContext = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.SkeletonContext = void 0;
+  _react = _interopRequireDefault(_react);
+
+  var SkeletonContext = /*#__PURE__*/_react.default.createContext({
+    showAnimation: true,
+    animation: 'gradient'
+  });
+
+  _exports.SkeletonContext = SkeletonContext;
+});