@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/lib/skeleton/Image.js

@@ -11,12 +11,16 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var React = _interopRequireWildcard(require("react"));
 
 var _configProvider = require("../config-provider");
 
+var _style = _interopRequireDefault(require("./style"));
+
 var path = 'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z';
 
 var SkeletonImage = function SkeletonImage(props) {
@@ -29,20 +33,26 @@ var SkeletonImage = function SkeletonImage(props) {
       getPrefixCls = _React$useContext.getPrefixCls;
 
   var prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  var cls = (0, _classnames["default"])(prefixCls, "".concat(prefixCls, "-element"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-active"), active), className);
-  return /*#__PURE__*/React.createElement("div", {
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var cls = (0, _classnames["default"])(prefixCls, prefixCls + "-element", (0, _defineProperty2["default"])({}, prefixCls + "-active", active), className, hashId);
+  return wrapSSR( /*#__PURE__*/React.createElement("div", {
     className: cls
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])("".concat(prefixCls, "-image"), className),
+    className: (0, _classnames["default"])(prefixCls + "-image", className),
     style: style
   }, /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 1098 1024",
     xmlns: "http://www.w3.org/2000/svg",
-    className: "".concat(prefixCls, "-image-svg")
+    className: prefixCls + "-image-svg"
   }, /*#__PURE__*/React.createElement("path", {
     d: path,
-    className: "".concat(prefixCls, "-image-path")
-  }))));
+    className: prefixCls + "-image-path"
+  })))));
 };
 
 var _default = SkeletonImage;

package/lib/skeleton/Input.js

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
@@ -23,6 +25,8 @@ var _configProvider = require("../config-provider");
 
 var _Element = _interopRequireDefault(require("./Element"));
 
+var _style = _interopRequireDefault(require("./style"));
+
 var SkeletonInput = function SkeletonInput(props) {
   var _classNames;
 
@@ -37,14 +41,20 @@ var SkeletonInput = function SkeletonInput(props) {
       getPrefixCls = _React$useContext.getPrefixCls;
 
   var prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
   var otherProps = (0, _omit["default"])(props, ['prefixCls']);
-  var cls = (0, _classnames["default"])(prefixCls, "".concat(prefixCls, "-element"), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-active"), active), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-block"), block), _classNames), className);
-  return /*#__PURE__*/React.createElement("div", {
+  var cls = (0, _classnames["default"])(prefixCls, prefixCls + "-element", (_classNames = {}, (0, _defineProperty2["default"])(_classNames, prefixCls + "-active", active), (0, _defineProperty2["default"])(_classNames, prefixCls + "-block", block), _classNames), className, hashId);
+  return wrapSSR( /*#__PURE__*/React.createElement("div", {
     className: cls
   }, /*#__PURE__*/React.createElement(_Element["default"], (0, _extends2["default"])({
-    prefixCls: "".concat(prefixCls, "-input"),
+    prefixCls: prefixCls + "-input",
     size: size
-  }, otherProps)));
+  }, otherProps))));
 };
 
 var _default = SkeletonInput;

package/lib/skeleton/Node.js

@@ -11,12 +11,16 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _DotChartOutlined = _interopRequireDefault(require("@ant-design/icons/DotChartOutlined"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var React = _interopRequireWildcard(require("react"));
 
+var _style = _interopRequireDefault(require("./style"));
+
 var _configProvider = require("../config-provider");
 
 var SkeletonNode = function SkeletonNode(props) {
@@ -30,14 +34,20 @@ var SkeletonNode = function SkeletonNode(props) {
       getPrefixCls = _React$useContext.getPrefixCls;
 
   var prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  var cls = (0, _classnames["default"])(prefixCls, "".concat(prefixCls, "-element"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-active"), active), className);
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var cls = (0, _classnames["default"])(prefixCls, prefixCls + "-element", (0, _defineProperty2["default"])({}, prefixCls + "-active", active), hashId, className);
   var content = children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(_DotChartOutlined["default"], null);
-  return /*#__PURE__*/React.createElement("div", {
+  return wrapSSR( /*#__PURE__*/React.createElement("div", {
     className: cls
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])("".concat(prefixCls, "-image"), className),
+    className: (0, _classnames["default"])(prefixCls + "-image", className),
     style: style
-  }, content));
+  }, content)));
 };
 
 var _default = SkeletonNode;

package/lib/skeleton/Skeleton.d.ts

@@ -7,8 +7,7 @@ import SkeletonImage from './Image';
 import SkeletonInput from './Input';
 import type { SkeletonParagraphProps } from './Paragraph';
 import type { SkeletonTitleProps } from './Title';
-interface SkeletonAvatarProps extends Omit<AvatarProps, 'active'> {
-}
+type SkeletonAvatarProps = Omit<AvatarProps, 'active'>;
 export interface SkeletonProps {
     active?: boolean;
     loading?: boolean;
@@ -21,12 +20,12 @@ export interface SkeletonProps {
     paragraph?: SkeletonParagraphProps | boolean;
     round?: boolean;
 }
-interface CompoundedComponent {
+type CompoundedComponent = {
     Button: typeof SkeletonButton;
     Avatar: typeof SkeletonAvatar;
     Input: typeof SkeletonInput;
     Image: typeof SkeletonImage;
     Node: typeof SkeletonNode;
-}
+};
 declare const Skeleton: React.FC<SkeletonProps> & CompoundedComponent;
 export default Skeleton;

package/lib/skeleton/Skeleton.js

@@ -13,6 +13,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -37,6 +39,8 @@ var _Paragraph = _interopRequireDefault(require("./Paragraph"));
 
 var _Title = _interopRequireDefault(require("./Title"));
 
+var _style = _interopRequireDefault(require("./style"));
+
 function getComponentProps(prop) {
   if (prop && (0, _typeof2["default"])(prop) === 'object') {
     return prop;
@@ -114,6 +118,11 @@ var Skeleton = function Skeleton(props) {
 
   var prefixCls = getPrefixCls('skeleton', customizePrefixCls);
 
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
   if (loading || !('loading' in props)) {
     var _classNames;
 
@@ -125,11 +134,11 @@ var Skeleton = function Skeleton(props) {
 
     if (hasAvatar) {
       var avatarProps = (0, _extends2["default"])((0, _extends2["default"])({
-        prefixCls: "".concat(prefixCls, "-avatar")
+        prefixCls: prefixCls + "-avatar"
       }, getAvatarBasicProps(hasTitle, hasParagraph)), getComponentProps(avatar)); // We direct use SkeletonElement as avatar in skeleton internal.
 
       avatarNode = /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header")
+        className: prefixCls + "-header"
       }, /*#__PURE__*/React.createElement(_Element["default"], (0, _extends2["default"])({}, avatarProps)));
     }
 
@@ -141,7 +150,7 @@ var Skeleton = function Skeleton(props) {
 
       if (hasTitle) {
         var titleProps = (0, _extends2["default"])((0, _extends2["default"])({
-          prefixCls: "".concat(prefixCls, "-title")
+          prefixCls: prefixCls + "-title"
         }, getTitleBasicProps(hasAvatar, hasParagraph)), getComponentProps(title));
         $title = /*#__PURE__*/React.createElement(_Title["default"], (0, _extends2["default"])({}, titleProps));
       } // Paragraph
@@ -151,21 +160,21 @@ var Skeleton = function Skeleton(props) {
 
       if (hasParagraph) {
         var paragraphProps = (0, _extends2["default"])((0, _extends2["default"])({
-          prefixCls: "".concat(prefixCls, "-paragraph")
+          prefixCls: prefixCls + "-paragraph"
         }, getParagraphBasicProps(hasAvatar, hasTitle)), getComponentProps(paragraph));
         paragraphNode = /*#__PURE__*/React.createElement(_Paragraph["default"], (0, _extends2["default"])({}, paragraphProps));
       }
 
       contentNode = /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-content")
+        className: prefixCls + "-content"
       }, $title, paragraphNode);
     }
 
-    var cls = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-with-avatar"), hasAvatar), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-active"), active), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-round"), round), _classNames), className);
-    return /*#__PURE__*/React.createElement("div", {
+    var cls = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, prefixCls + "-with-avatar", hasAvatar), (0, _defineProperty2["default"])(_classNames, prefixCls + "-active", active), (0, _defineProperty2["default"])(_classNames, prefixCls + "-rtl", direction === 'rtl'), (0, _defineProperty2["default"])(_classNames, prefixCls + "-round", round), _classNames), className, hashId);
+    return wrapSSR( /*#__PURE__*/React.createElement("div", {
       className: cls,
       style: style
-    }, avatarNode, contentNode);
+    }, avatarNode, contentNode));
   }
 
   return typeof children !== 'undefined' ? children : null;

package/lib/skeleton/index.d.ts

@@ -1,3 +1,3 @@
 import Skeleton from './Skeleton';
-export { SkeletonProps } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';
 export default Skeleton;

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

@@ -1,2 +1,6 @@
-import '../../style/default.less';
-import './index.less';
+export type ComponentToken = {
+    color: string;
+    colorGradientEnd: string;
+};
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;

package/lib/skeleton/style/index.js

@@ -1,5 +1,284 @@
 "use strict";
 
-require("../../style/default.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
-require("./index.less");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends6 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _cssinjs = require("@ant-design/cssinjs");
+
+var _internal = require("../../theme/internal");
+
+var skeletonClsLoading = new _cssinjs.Keyframes("ant-skeleton-loading", {
+  '0%': {
+    transform: 'translateX(-37.5%)'
+  },
+  '100%': {
+    transform: 'translateX(37.5%)'
+  }
+});
+
+var genSkeletonElementCommonSize = function genSkeletonElementCommonSize(size) {
+  return {
+    height: size,
+    lineHeight: size + "px"
+  };
+};
+
+var genSkeletonElementAvatarSize = function genSkeletonElementAvatarSize(size) {
+  return (0, _extends6["default"])({
+    width: size
+  }, genSkeletonElementCommonSize(size));
+};
+
+var genSkeletonColor = function genSkeletonColor(token) {
+  return {
+    position: 'relative',
+    // fix https://github.com/ant-design/ant-design/issues/36444
+    // https://monshin.github.io/202109/css/safari-border-radius-overflow-hidden/
+
+    /* stylelint-disable-next-line property-no-vendor-prefix,value-no-vendor-prefix */
+    zIndex: 0,
+    overflow: 'hidden',
+    background: 'transparent',
+    '&::after': {
+      position: 'absolute',
+      top: 0,
+      insetInlineEnd: '-150%',
+      bottom: 0,
+      insetInlineStart: '-150%',
+      background: token.skeletonLoadingBackground,
+      animationName: skeletonClsLoading,
+      animationDuration: token.skeletonLoadingMotionDuration,
+      animationTimingFunction: 'ease',
+      animationIterationCount: 'infinite',
+      content: '""'
+    }
+  };
+};
+
+var genSkeletonElementInputSize = function genSkeletonElementInputSize(size) {
+  return (0, _extends6["default"])({
+    width: size * 5,
+    minWidth: size * 5
+  }, genSkeletonElementCommonSize(size));
+};
+
+var genSkeletonElementAvatar = function genSkeletonElementAvatar(token) {
+  var _ref;
+
+  var skeletonAvatarCls = token.skeletonAvatarCls,
+      color = token.color,
+      controlHeight = token.controlHeight,
+      controlHeightLG = token.controlHeightLG,
+      controlHeightSM = token.controlHeightSM;
+  return _ref = {}, (0, _defineProperty2["default"])(_ref, "" + skeletonAvatarCls, (0, _extends6["default"])({
+    display: 'inline-block',
+    verticalAlign: 'top',
+    background: color
+  }, genSkeletonElementAvatarSize(controlHeight))), (0, _defineProperty2["default"])(_ref, "" + skeletonAvatarCls + skeletonAvatarCls + "-circle", {
+    borderRadius: '50%'
+  }), (0, _defineProperty2["default"])(_ref, "" + skeletonAvatarCls + skeletonAvatarCls + "-lg", (0, _extends6["default"])({}, genSkeletonElementAvatarSize(controlHeightLG))), (0, _defineProperty2["default"])(_ref, "" + skeletonAvatarCls + skeletonAvatarCls + "-sm", (0, _extends6["default"])({}, genSkeletonElementAvatarSize(controlHeightSM))), _ref;
+};
+
+var genSkeletonElementInput = function genSkeletonElementInput(token) {
+  var _ref2;
+
+  var controlHeight = token.controlHeight,
+      borderRadiusSM = token.borderRadiusSM,
+      skeletonInputCls = token.skeletonInputCls,
+      controlHeightLG = token.controlHeightLG,
+      controlHeightSM = token.controlHeightSM,
+      color = token.color;
+  return _ref2 = {}, (0, _defineProperty2["default"])(_ref2, "" + skeletonInputCls, (0, _extends6["default"])({
+    display: 'inline-block',
+    verticalAlign: 'top',
+    background: color,
+    borderRadius: borderRadiusSM
+  }, genSkeletonElementInputSize(controlHeight))), (0, _defineProperty2["default"])(_ref2, skeletonInputCls + "-lg", (0, _extends6["default"])({}, genSkeletonElementInputSize(controlHeightLG))), (0, _defineProperty2["default"])(_ref2, skeletonInputCls + "-sm", (0, _extends6["default"])({}, genSkeletonElementInputSize(controlHeightSM))), _ref2;
+};
+
+var genSkeletonElementImageSize = function genSkeletonElementImageSize(size) {
+  return (0, _extends6["default"])({
+    width: size
+  }, genSkeletonElementCommonSize(size));
+};
+
+var genSkeletonElementImage = function genSkeletonElementImage(token) {
+  var _extends2, _ref3;
+
+  var skeletonImageCls = token.skeletonImageCls,
+      imageSizeBase = token.imageSizeBase,
+      color = token.color,
+      borderRadiusSM = token.borderRadiusSM;
+  return _ref3 = {}, (0, _defineProperty2["default"])(_ref3, "" + skeletonImageCls, (0, _extends6["default"])((0, _extends6["default"])({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'top',
+    background: color,
+    borderRadius: borderRadiusSM
+  }, genSkeletonElementImageSize(imageSizeBase * 2)), (_extends2 = {}, (0, _defineProperty2["default"])(_extends2, skeletonImageCls + "-path", {
+    fill: '#bfbfbf'
+  }), (0, _defineProperty2["default"])(_extends2, skeletonImageCls + "-svg", (0, _extends6["default"])((0, _extends6["default"])({}, genSkeletonElementImageSize(imageSizeBase)), {
+    maxWidth: imageSizeBase * 4,
+    maxHeight: imageSizeBase * 4
+  })), (0, _defineProperty2["default"])(_extends2, skeletonImageCls + "-svg" + skeletonImageCls + "-svg-circle", {
+    borderRadius: '50%'
+  }), _extends2))), (0, _defineProperty2["default"])(_ref3, "" + skeletonImageCls + skeletonImageCls + "-circle", {
+    borderRadius: '50%'
+  }), _ref3;
+};
+
+var genSkeletonElementButtonShape = function genSkeletonElementButtonShape(token, size, buttonCls) {
+  var _ref4;
+
+  var skeletonButtonCls = token.skeletonButtonCls;
+  return _ref4 = {}, (0, _defineProperty2["default"])(_ref4, "" + buttonCls + skeletonButtonCls + "-circle", {
+    width: size,
+    minWidth: size,
+    borderRadius: '50%'
+  }), (0, _defineProperty2["default"])(_ref4, "" + buttonCls + skeletonButtonCls + "-round", {
+    borderRadius: size
+  }), _ref4;
+};
+
+var genSkeletonElementButtonSize = function genSkeletonElementButtonSize(size) {
+  return (0, _extends6["default"])({
+    width: size * 2,
+    minWidth: size * 2
+  }, genSkeletonElementCommonSize(size));
+};
+
+var genSkeletonElementButton = function genSkeletonElementButton(token) {
+  var borderRadiusSM = token.borderRadiusSM,
+      skeletonButtonCls = token.skeletonButtonCls,
+      controlHeight = token.controlHeight,
+      controlHeightLG = token.controlHeightLG,
+      controlHeightSM = token.controlHeightSM,
+      color = token.color;
+  return (0, _extends6["default"])((0, _extends6["default"])((0, _extends6["default"])((0, _extends6["default"])((0, _extends6["default"])((0, _defineProperty2["default"])({}, "" + skeletonButtonCls, (0, _extends6["default"])({
+    display: 'inline-block',
+    verticalAlign: 'top',
+    background: color,
+    borderRadius: borderRadiusSM,
+    width: controlHeight * 2,
+    minWidth: controlHeight * 2
+  }, genSkeletonElementButtonSize(controlHeight))), genSkeletonElementButtonShape(token, controlHeight, skeletonButtonCls)), (0, _defineProperty2["default"])({}, skeletonButtonCls + "-lg", (0, _extends6["default"])({}, genSkeletonElementButtonSize(controlHeightLG)))), genSkeletonElementButtonShape(token, controlHeightLG, skeletonButtonCls + "-lg")), (0, _defineProperty2["default"])({}, skeletonButtonCls + "-sm", (0, _extends6["default"])({}, genSkeletonElementButtonSize(controlHeightSM)))), genSkeletonElementButtonShape(token, controlHeightSM, skeletonButtonCls + "-sm"));
+}; // =============================== Base ===============================
+
+
+var genBaseStyle = function genBaseStyle(token) {
+  var _ref5, _ref7, _ref9, _ref12, _ref14;
+
+  var componentCls = token.componentCls,
+      skeletonAvatarCls = token.skeletonAvatarCls,
+      skeletonTitleCls = token.skeletonTitleCls,
+      skeletonParagraphCls = token.skeletonParagraphCls,
+      skeletonButtonCls = token.skeletonButtonCls,
+      skeletonInputCls = token.skeletonInputCls,
+      skeletonImageCls = token.skeletonImageCls,
+      controlHeight = token.controlHeight,
+      controlHeightLG = token.controlHeightLG,
+      controlHeightSM = token.controlHeightSM,
+      color = token.color,
+      padding = token.padding,
+      marginSM = token.marginSM,
+      borderRadius = token.borderRadius,
+      skeletonTitleHeight = token.skeletonTitleHeight,
+      skeletonBlockRadius = token.skeletonBlockRadius,
+      skeletonParagraphLineHeight = token.skeletonParagraphLineHeight,
+      controlHeightXS = token.controlHeightXS,
+      skeletonParagraphMarginTop = token.skeletonParagraphMarginTop;
+  return _ref14 = {}, (0, _defineProperty2["default"])(_ref14, "" + componentCls, (_ref9 = {
+    display: 'table',
+    width: '100%'
+  }, (0, _defineProperty2["default"])(_ref9, componentCls + "-header", (_ref5 = {
+    display: 'table-cell',
+    paddingInlineEnd: padding,
+    verticalAlign: 'top'
+  }, (0, _defineProperty2["default"])(_ref5, "" + skeletonAvatarCls, (0, _extends6["default"])({
+    display: 'inline-block',
+    verticalAlign: 'top',
+    background: color
+  }, genSkeletonElementAvatarSize(controlHeight))), (0, _defineProperty2["default"])(_ref5, skeletonAvatarCls + "-circle", {
+    borderRadius: '50%'
+  }), (0, _defineProperty2["default"])(_ref5, skeletonAvatarCls + "-lg", (0, _extends6["default"])({}, genSkeletonElementAvatarSize(controlHeightLG))), (0, _defineProperty2["default"])(_ref5, skeletonAvatarCls + "-sm", (0, _extends6["default"])({}, genSkeletonElementAvatarSize(controlHeightSM))), _ref5)), (0, _defineProperty2["default"])(_ref9, componentCls + "-content", (_ref7 = {
+    display: 'table-cell',
+    width: '100%',
+    verticalAlign: 'top'
+  }, (0, _defineProperty2["default"])(_ref7, "" + skeletonTitleCls, (0, _defineProperty2["default"])({
+    width: '100%',
+    height: skeletonTitleHeight,
+    background: color,
+    borderRadius: skeletonBlockRadius
+  }, "+ " + skeletonParagraphCls, {
+    marginBlockStart: controlHeightSM
+  })), (0, _defineProperty2["default"])(_ref7, "" + skeletonParagraphCls, {
+    padding: 0,
+    '> li': {
+      width: '100%',
+      height: skeletonParagraphLineHeight,
+      listStyle: 'none',
+      background: color,
+      borderRadius: skeletonBlockRadius,
+      '+ li': {
+        marginBlockStart: controlHeightXS
+      }
+    }
+  }), (0, _defineProperty2["default"])(_ref7, skeletonParagraphCls + "> li:last-child:not(:first-child):not(:nth-child(2))", {
+    width: '61%'
+  }), _ref7)), (0, _defineProperty2["default"])(_ref9, "&-round " + componentCls + "-content", (0, _defineProperty2["default"])({}, skeletonTitleCls + ", " + skeletonParagraphCls + " > li", {
+    borderRadius: borderRadius
+  })), _ref9)), (0, _defineProperty2["default"])(_ref14, componentCls + "-with-avatar " + componentCls + "-content", (0, _defineProperty2["default"])({}, "" + skeletonTitleCls, (0, _defineProperty2["default"])({
+    marginBlockStart: marginSM
+  }, "+ " + skeletonParagraphCls, {
+    marginBlockStart: skeletonParagraphMarginTop
+  }))), (0, _defineProperty2["default"])(_ref14, "" + componentCls + componentCls + "-element", (0, _extends6["default"])((0, _extends6["default"])((0, _extends6["default"])((0, _extends6["default"])({
+    display: 'inline-block',
+    width: 'auto'
+  }, genSkeletonElementButton(token)), genSkeletonElementAvatar(token)), genSkeletonElementInput(token)), genSkeletonElementImage(token))), (0, _defineProperty2["default"])(_ref14, "" + componentCls + componentCls + "-block", (_ref12 = {
+    width: '100%'
+  }, (0, _defineProperty2["default"])(_ref12, "" + skeletonButtonCls, {
+    width: '100%'
+  }), (0, _defineProperty2["default"])(_ref12, "" + skeletonInputCls, {
+    width: '100%'
+  }), _ref12)), (0, _defineProperty2["default"])(_ref14, "" + componentCls + componentCls + "-active", (0, _defineProperty2["default"])({}, "\n        " + skeletonTitleCls + ",\n        " + skeletonParagraphCls + " > li,\n        " + skeletonAvatarCls + ",\n        " + skeletonButtonCls + ",\n        " + skeletonInputCls + ",\n        " + skeletonImageCls + "\n      ", (0, _extends6["default"])({}, genSkeletonColor(token)))), _ref14;
+}; // ============================== Export ==============================
+
+
+var _default = (0, _internal.genComponentStyleHook)('Skeleton', function (token) {
+  var componentCls = token.componentCls;
+  var skeletonToken = (0, _internal.mergeToken)(token, {
+    skeletonAvatarCls: componentCls + "-avatar",
+    skeletonTitleCls: componentCls + "-title",
+    skeletonParagraphCls: componentCls + "-paragraph",
+    skeletonButtonCls: componentCls + "-button",
+    skeletonInputCls: componentCls + "-input",
+    skeletonImageCls: componentCls + "-image",
+    imageSizeBase: token.controlHeight * 1.5,
+    skeletonTitleHeight: token.controlHeight / 2,
+    skeletonBlockRadius: token.borderRadiusSM,
+    skeletonParagraphLineHeight: token.controlHeight / 2,
+    skeletonParagraphMarginTop: token.marginLG + token.marginXXS,
+    borderRadius: 100,
+    skeletonLoadingBackground: "linear-gradient(90deg, " + token.color + " 25%, " + token.colorGradientEnd + " 37%, " + token.color + " 63%)",
+    skeletonLoadingMotionDuration: '1.4s'
+  });
+  return [genBaseStyle(skeletonToken)];
+}, function (token) {
+  var colorFillContent = token.colorFillContent,
+      colorFill = token.colorFill;
+  return {
+    color: colorFillContent,
+    colorGradientEnd: colorFill
+  };
+});
+
+exports["default"] = _default;

package/lib/slider/index.d.ts

@@ -12,20 +12,16 @@ export type HandleGeneratorFn = (config: {
     prefixCls?: string;
     info: HandleGeneratorInfo;
 }) => React.ReactElement;
+export type Formatter = (value?: number) => React.ReactNode;
 export interface SliderTooltipProps {
     prefixCls?: string;
     open?: boolean;
     placement?: TooltipPlacement;
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
-    formatter?: null | ((value?: number) => React.ReactNode);
+    formatter?: null | Formatter;
 }
 export interface SliderBaseProps {
     prefixCls?: string;
-    /**
-     * @deprecated `tooltipPrefixCls` is deprecated which will be removed in next major version.
-     *   Please use `tooltip.prefixCls` instead.
-     */
-    tooltipPrefixCls?: string;
     reverse?: boolean;
     min?: number;
     max?: number;
@@ -35,31 +31,24 @@ export interface SliderBaseProps {
     included?: boolean;
     disabled?: boolean;
     vertical?: boolean;
-    /**
-     * @deprecated `tipFormatter` is deprecated which will be removed in next major version. Please
-     *   use `tooltip.formatter` instead.
-     */
-    tipFormatter?: null | ((value?: number) => React.ReactNode);
     className?: string;
     id?: string;
     style?: React.CSSProperties;
-    /**
-     * @deprecated `tooltipVisible` is deprecated which will be removed in next major version. Please
-     *   use `tooltip.open` instead.
-     */
-    tooltipVisible?: boolean;
-    /**
-     * @deprecated `tooltipPlacement` is deprecated which will be removed in next major version.
-     *   Please use `tooltip.placement` instead.
-     */
-    tooltipPlacement?: TooltipPlacement;
     tooltip?: SliderTooltipProps;
+    autoFocus?: boolean;
+    /** @deprecated `tooltipPrefixCls` is deprecated. Please use `tooltip.prefixCls` instead. */
+    tooltipPrefixCls?: string;
+    /** @deprecated `tipFormatter` is deprecated. Please use `tooltip.formatter` instead. */
+    tipFormatter?: null | ((value?: number) => React.ReactNode);
+    /** @deprecated `tooltipVisible` is deprecated. Please use `tooltip.open` instead. */
+    tooltipVisible?: boolean;
     /**
-     * @deprecated `getTooltipPopupContainer` is deprecated which will be removed in next major
-     *   version. Please use `tooltip.getPopupContainer` instead.
+     * @deprecated `getTooltipPopupContainer` is deprecated. Please use `tooltip.getPopupContainer`
+     *   instead.
      */
     getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
-    autoFocus?: boolean;
+    /** @deprecated `tooltipPlacement` is deprecated. Please use `tooltip.placement` instead. */
+    tooltipPlacement?: TooltipPlacement;
 }
 export interface SliderSingleProps extends SliderBaseProps {
     range?: false;