@arco-design/mobile-react 2.28.1 → 2.29.0

package/cjs/skeleton/elements.js

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

package/cjs/skeleton/index.d.ts

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

package/cjs/skeleton/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _elements = require("./elements");
+
+var _skeletonContext = require("./skeleton-context");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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/cjs/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/cjs/skeleton/skeleton-context.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.SkeletonContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var SkeletonContext = /*#__PURE__*/_react.default.createContext({
+  showAnimation: true,
+  animation: 'gradient'
+});
+
+exports.SkeletonContext = SkeletonContext;

package/cjs/skeleton/style/css/index.css

@@ -0,0 +1,180 @@
+.arco-skeleton {
+  position: relative;
+  color:  rgba(255, 255, 255, 0.6) ;
+}
+.arco-skeleton-title {
+  height:  0.32rem ;
+}
+.arco-skeleton-paragraph-line {
+  width: 100%;
+  height:  0.32rem ;
+}
+.arco-skeleton-paragraph-line + .arco-skeleton-paragraph-line {
+  margin-top:  0.24rem ;
+}
+.arco-skeleton-avatar.arco-skeleton-item {
+  width:  0.64rem ;
+  height:  0.64rem ;
+  border-radius: 100%;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+}
+.arco-skeleton-content {
+  width: 100%;
+}
+.arco-skeleton-content .arco-skeleton-title + .arco-skeleton-paragraph {
+  margin-top:  0.4rem ;
+}
+.arco-skeleton-with-avatar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+          align-items: flex-start;
+}
+.arco-skeleton-with-avatar .arco-skeleton-avatar {
+  -webkit-box-flex: 0;
+  -webkit-flex: none;
+          flex: none;
+}
+.arco-skeleton-with-avatar .arco-skeleton-content .arco-skeleton-title {
+  margin-top:  0.16rem ;
+}
+.arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
+  margin-left:  0.16rem ;
+}
+[dir="rtl"] .arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
+.arco-skeleton-grid {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+  width: 100%;
+}
+.arco-skeleton-grid-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-skeleton-grid-icon {
+  width:  0.64rem ;
+  height:  0.64rem ;
+}
+.arco-skeleton-grid-text {
+  margin-top:  0.16rem ;
+  width:  1.28rem ;
+  height:  0.32rem ;
+}
+.arco-skeleton-node {
+  display: inline-block;
+}
+.arco-skeleton-item {
+  position: relative;
+  overflow: hidden;
+  border-radius:  0 ;
+  background-color:  #F2F3F5 ;
+}
+.arco-skeleton-animation-item {
+  position: absolute;
+  width: 100vw;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
+  -webkit-transform-origin: top left;
+          transform-origin: top left;
+  -webkit-animation-name: skeleton-gradient;
+          animation-name: skeleton-gradient;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-timing-function:  cubic-bezier(0.42, 0, 0.58, 1) ;
+          animation-timing-function:  cubic-bezier(0.42, 0, 0.58, 1) ;
+  -webkit-animation-duration:  1.5s ;
+          animation-duration:  1.5s ;
+}
+[dir="rtl"] .arco-skeleton-animation-item {
+  -webkit-animation-name: skeleton-gradient-reverse;
+          animation-name: skeleton-gradient-reverse;
+}
+.arco-skeleton-animation-breath {
+  -webkit-animation: skeleton-breath linear infinite;
+          animation: skeleton-breath linear infinite;
+  -webkit-animation-duration:  1.5s ;
+          animation-duration:  1.5s ;
+}
+@-webkit-keyframes skeleton-gradient {
+  0% {
+    -webkit-transform: translateX(-65%) skewX(-45deg);
+            transform: translateX(-65%) skewX(-45deg);
+  }
+  100% {
+    -webkit-transform: translateX(135%) skewX(-45deg);
+            transform: translateX(135%) skewX(-45deg);
+  }
+}
+@keyframes skeleton-gradient {
+  0% {
+    -webkit-transform: translateX(-65%) skewX(-45deg);
+            transform: translateX(-65%) skewX(-45deg);
+  }
+  100% {
+    -webkit-transform: translateX(135%) skewX(-45deg);
+            transform: translateX(135%) skewX(-45deg);
+  }
+}
+@-webkit-keyframes skeleton-gradient-reverse {
+  0% {
+    -webkit-transform: translateX(65%) skewX(45deg);
+            transform: translateX(65%) skewX(45deg);
+  }
+  100% {
+    -webkit-transform: translateX(-135%) skewX(45deg);
+            transform: translateX(-135%) skewX(45deg);
+  }
+}
+@keyframes skeleton-gradient-reverse {
+  0% {
+    -webkit-transform: translateX(65%) skewX(45deg);
+            transform: translateX(65%) skewX(45deg);
+  }
+  100% {
+    -webkit-transform: translateX(-135%) skewX(45deg);
+            transform: translateX(-135%) skewX(45deg);
+  }
+}
+@-webkit-keyframes skeleton-breath {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity:  0.4 ;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes skeleton-breath {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity:  0.4 ;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/cjs/skeleton/style/css/index.d.ts

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

package/cjs/skeleton/style/css/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("../../../avatar/style/css");
+
+require("./index.css");

package/cjs/skeleton/style/index.d.ts

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

package/cjs/skeleton/style/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("../../avatar/style");
+
+require("./index.less");