antd-mobile 5.0.0-rc.9 → 5.2.0

package/cjs/components/selector/check-mark.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckMark = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+const CheckMark = (0, _react.memo)(() => {
+  return _react.default.createElement("svg", {
+    width: '17px',
+    height: '13px',
+    viewBox: '0 0 17 13',
+    version: '1.1',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, _react.default.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  }, _react.default.createElement("g", {
+    transform: 'translate(-2832.000000, -1103.000000)',
+    stroke: '#FFFFFF',
+    strokeWidth: '3'
+  }, _react.default.createElement("g", {
+    transform: 'translate(2610.000000, 955.000000)'
+  }, _react.default.createElement("g", {
+    transform: 'translate(24.000000, 91.000000)'
+  }, _react.default.createElement("g", {
+    transform: 'translate(179.177408, 36.687816)'
+  }, _react.default.createElement("polyline", {
+    points: '34.2767388 22 24.797043 31.4796958 21 27.6826527'
+  })))))));
+});
+exports.CheckMark = CheckMark;

package/cjs/components/selector/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./selector.css");
 
 var _selector2 = require("./selector");
 
 var _default = _selector2.Selector;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/selector/selector.css

@@ -1,16 +1,26 @@
 .adm-selector {
-  --color: var(--adm-color-text);
+  --color: #f5f5f5;
   --checked-color: #e7f1ff;
+  --text-color: var(--adm-color-text);
+  --checked-text-color: var(--adm-color-primary);
+  --border: none;
+  --checked-border: none;
+  --border-radius: 2px;
+  --padding: 8px 16px;
   overflow: hidden;
   font-size: 15px;
   line-height: 1.4;
 }
+.adm-selector .adm-space.adm-space {
+  --gap: 12px;
+}
 .adm-selector-item {
-  padding: 8px;
+  padding: var(--padding);
   position: relative;
-  background-color: #f5f5f5;
-  border-radius: 2px;
-  color: #333;
+  background-color: var(--color);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  color: var(--text-color);
   opacity: 1;
   cursor: pointer;
   display: inline-block;
@@ -18,10 +28,15 @@
   overflow: hidden;
   vertical-align: top;
 }
+.adm-selector-item-description {
+  font-size: 13px;
+  color: var(--adm-color-weak);
+}
 .adm-selector-item-active,
 .adm-selector-item-multiple-active {
-  color: var(--adm-color-primary);
+  color: var(--checked-text-color);
   background-color: var(--checked-color);
+  border: var(--checked-border);
 }
 .adm-selector-item .adm-selector-check-mark-wrapper {
   position: absolute;
@@ -34,7 +49,7 @@
   border-left: solid 10px transparent;
   border-right: solid 10px var(--adm-color-primary);
 }
-.adm-selector-item .adm-selector-check-mark-wrapper > img {
+.adm-selector-item .adm-selector-check-mark-wrapper > svg {
   position: absolute;
   left: 0;
   top: 0;

package/cjs/components/selector/selector.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export interface SelectorOption<V> {
     label: ReactNode;
+    description?: ReactNode;
     value: V;
     disabled?: boolean;
 }
@@ -15,5 +16,6 @@ export declare type SelectorProps<V> = {
     onChange?: (v: V[], extend: {
         items: SelectorOption<V>[];
     }) => void;
-} & NativeProps<'--checked-color'>;
+    showCheckMark?: boolean;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
 export declare const Selector: <V extends string | number>(p: SelectorProps<V>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;

package/cjs/components/selector/selector.js

@@ -19,77 +19,71 @@ var _grid = _interopRequireDefault(require("../grid"));
 
 var _convertPx = require("../../utils/convert-px");
 
-var _selectorCheckMark = _interopRequireDefault(require("../../assets/selector-check-mark.svg"));
+var _usePropsValue = require("../../utils/use-props-value");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _checkMark = require("./check-mark");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = "adm-selector";
-var defaultProps = {
+const classPrefix = `adm-selector`;
+const defaultProps = {
   multiple: false,
-  defaultValue: []
+  defaultValue: [],
+  showCheckMark: true
 };
 
-var Selector = function Selector(p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)({
+const Selector = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)({
     value: props.value,
     defaultValue: props.defaultValue,
-    onChange: function onChange(val) {
+    onChange: val => {
       var _a;
 
-      var extend = {
+      const extend = {
         get items() {
-          return props.options.filter(function (option) {
-            return val.includes(option.value);
-          });
+          return props.options.filter(option => val.includes(option.value));
         }
 
       };
       (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
     }
-  }),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var items = props.options.map(function (option) {
-    var _classNames;
-
-    var active = (value || []).includes(option.value);
-    var disabled = option.disabled || props.disabled;
-    var itemCls = (0, _classnames["default"])(classPrefix + "-item", (_classNames = {}, _classNames[classPrefix + "-item-active"] = active && !props.multiple, _classNames[classPrefix + "-item-multiple-active"] = active && props.multiple, _classNames[classPrefix + "-item-disabled"] = disabled, _classNames));
-    return /*#__PURE__*/_react["default"].createElement("div", {
+  });
+  const items = props.options.map(option => {
+    const active = (value || []).includes(option.value);
+    const disabled = option.disabled || props.disabled;
+    const itemCls = (0, _classnames.default)(`${classPrefix}-item`, {
+      [`${classPrefix}-item-active`]: active && !props.multiple,
+      [`${classPrefix}-item-multiple-active`]: active && props.multiple,
+      [`${classPrefix}-item-disabled`]: disabled
+    });
+    return _react.default.createElement("div", {
       key: option.value,
       className: itemCls,
-      onClick: function onClick() {
+      onClick: () => {
         if (disabled) {
           return;
         }
 
         if (props.multiple) {
-          var val = active ? value.filter(function (v) {
-            return v !== option.value;
-          }) : [].concat(value, [option.value]);
+          const val = active ? value.filter(v => v !== option.value) : [...value, option.value];
           setValue(val);
         } else {
-          var _val = active ? [] : [option.value];
-
-          setValue(_val);
+          const val = active ? [] : [option.value];
+          setValue(val);
         }
       }
-    }, option.label, active && props.multiple && /*#__PURE__*/_react["default"].createElement("div", {
-      className: classPrefix + "-check-mark-wrapper"
-    }, /*#__PURE__*/_react["default"].createElement("img", {
-      src: _selectorCheckMark["default"]
-    })));
+    }, option.label, option.description && _react.default.createElement("div", {
+      className: `${classPrefix}-item-description`
+    }, option.description), active && props.showCheckMark && _react.default.createElement("div", {
+      className: `${classPrefix}-check-mark-wrapper`
+    }, _react.default.createElement(_checkMark.CheckMark, null)));
   });
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
-  }, !props.columns && /*#__PURE__*/_react["default"].createElement(_space["default"], {
+  }, !props.columns && _react.default.createElement(_space.default, {
     wrap: true
-  }, items), props.columns && /*#__PURE__*/_react["default"].createElement(_grid["default"], {
+  }, items), props.columns && _react.default.createElement(_grid.default, {
     columns: props.columns,
     gap: (0, _convertPx.convertPx)(8)
   }, items)));

package/cjs/components/side-bar/corner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const Corner: React.NamedExoticComponent<NativeProps<never>>;

package/cjs/components/side-bar/corner.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Corner = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+const Corner = (0, _react.memo)(props => (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
+  viewBox: '0 0 30 30'
+}, _react.default.createElement("g", {
+  stroke: 'none',
+  strokeWidth: '1',
+  fill: 'none',
+  fillRule: 'evenodd'
+}, _react.default.createElement("path", {
+  d: 'M30,0 C13.4314575,3.04359188e-15 -2.02906125e-15,13.4314575 0,30 L0,30 L0,0 Z',
+  fill: 'var(--adm-color-white)',
+  transform: 'translate(15.000000, 15.000000) scale(-1, -1) translate(-15.000000, -15.000000) '
+})))));
+exports.Corner = Corner;

package/cjs/components/side-bar/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./side-bar.css");
 
@@ -15,4 +15,4 @@ var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_si
   Item: _sideBar2.SideBarItem
 });
 
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/side-bar/side-bar.css

@@ -1,54 +1,74 @@
 .adm-side-bar {
   --height: 100%;
-  --width: 96px;
+  --width: 105px;
   --item-border-radius: 8px;
+  --background-color: #f5f5f5;
   width: var(--width);
   height: var(--height);
   box-sizing: border-box;
-  font-size: 15px;
+  font-size: 13px;
   overflow-y: auto;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
+  background-color: var(--background-color);
+  display: flex;
+  flex-direction: column;
+}
+.adm-side-bar-items {
+  flex: none;
+  overflow: hidden;
+}
+.adm-side-bar-extra-space {
+  flex: auto;
+  overflow: hidden;
+  position: relative;
 }
 .adm-side-bar-item {
   display: flex;
   align-items: center;
-  min-height: 50px;
   box-sizing: border-box;
-  padding: 6px 22px;
+  padding: 16px 12px;
   position: relative;
   cursor: pointer;
-  background-color: #f5f5f5;
+  background-color: var(--background-color);
+  overflow: visible;
+}
+.adm-side-bar-item-highlight {
+  position: absolute;
+  height: 100%;
+  width: 2px;
+  left: -12px;
+  top: 0;
+  background: var(--adm-color-primary);
+  border-radius: 2px;
 }
 .adm-side-bar-item-active {
   color: var(--adm-color-primary);
-  background-color: white;
-  font-weight: bold;
+  background-color: var(--adm-color-white);
   position: relative;
 }
-.adm-side-bar-item-active + .adm-side-bar-item {
-  border-top-right-radius: var(--item-border-radius);
-}
-.adm-side-bar-item-active::before {
-  content: '';
+.adm-side-bar-item-corner {
   width: var(--item-border-radius);
   height: var(--item-border-radius);
-  background-color: white;
   position: absolute;
-  top: calc(var(--item-border-radius) * -1);
+  z-index: 100;
   right: 0;
+  user-select: none;
+  pointer-events: none;
 }
-.adm-side-bar-item-active::after {
-  content: '';
-  width: var(--item-border-radius);
-  height: var(--item-border-radius);
-  background-color: #f5f5f5;
-  border-bottom-right-radius: var(--item-border-radius);
-  position: absolute;
-  top: calc(var(--item-border-radius) * -1);
-  right: 0;
+.adm-side-bar-item-corner-top {
+  top: 0;
+  transform: rotate(-90deg);
+}
+.adm-side-bar-item-corner-bottom {
+  bottom: 0;
 }
 .adm-side-bar-item-disabled {
   cursor: not-allowed;
-  color: var(--adm-color-light);
+}
+.adm-side-bar-item-disabled .adm-side-bar-item-title {
+  opacity: 0.4;
+}
+.adm-side-bar-badge.adm-badge {
+  --right: -4px;
 }

package/cjs/components/side-bar/side-bar.d.ts

@@ -10,5 +10,5 @@ export declare type SideBarProps = {
     activeKey?: string | null;
     defaultActiveKey?: string | null;
     onChange?: (key: string) => void;
-} & NativeProps<'--width' | '--height' | '--item-border-radius'>;
+} & NativeProps<'--width' | '--height' | '--item-border-radius' | '--background-color'>;
 export declare const SideBar: FC<SideBarProps>;

package/cjs/components/side-bar/side-bar.js

@@ -13,27 +13,29 @@ var _badge = _interopRequireDefault(require("../badge"));
 
 var _nativeProps = require("../../utils/native-props");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _corner = require("./corner");
 
-var classPrefix = "adm-side-bar";
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var SideBarItem = function SideBarItem() {
+const classPrefix = `adm-side-bar`;
+
+const SideBarItem = () => {
   return null;
 };
 
 exports.SideBarItem = SideBarItem;
 
-var SideBar = function SideBar(props) {
+const SideBar = props => {
   var _a;
 
-  var firstActiveKey = null;
-  var items = [];
+  let firstActiveKey = null;
+  const items = [];
 
-  _react["default"].Children.forEach(props.children, function (child, index) {
-    if (! /*#__PURE__*/_react["default"].isValidElement(child)) return;
-    var key = child.key;
+  _react.default.Children.forEach(props.children, (child, index) => {
+    if (!_react.default.isValidElement(child)) return;
+    const key = child.key;
     if (typeof key !== 'string') return;
 
     if (index === 0) {
@@ -43,34 +45,56 @@ var SideBar = function SideBar(props) {
     items.push(child);
   });
 
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)({
+  const [activeKey, setActiveKey] = (0, _usePropsValue.usePropsValue)({
     value: props.activeKey,
     defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
-    onChange: props.onChange
-  }),
-      activeKey = _usePropsValue[0],
-      setActiveKey = _usePropsValue[1];
-
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix)
-  }, items.map(function (item) {
-    var _classNames;
-
-    var active = item.key === activeKey;
-    return (0, _nativeProps.withNativeProps)(item.props, /*#__PURE__*/_react["default"].createElement("div", {
+    onChange: v => {
+      var _a;
+
+      if (v === null) return;
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+    }
+  });
+  const lastItem = items[items.length - 1];
+  const isLastItemActive = lastItem && lastItem.key === activeKey;
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: classPrefix
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-items`
+  }, items.map((item, index) => {
+    const active = item.key === activeKey;
+    const isActiveNextSibling = items[index - 1] && items[index - 1].key === activeKey;
+    const isActivePreviousSibling = items[index + 1] && items[index + 1].key === activeKey;
+    return (0, _nativeProps.withNativeProps)(item.props, _react.default.createElement("div", {
       key: item.key,
-      onClick: function onClick() {
-        var key = item.key;
+      onClick: () => {
+        const {
+          key
+        } = item;
         if (key === undefined || key === null || item.props.disabled) return;
         setActiveKey(key.toString());
       },
-      className: (0, _classnames["default"])(classPrefix + "-item", (_classNames = {}, _classNames[classPrefix + "-item-active"] = active, _classNames[classPrefix + "-item-disabled"] = item.props.disabled, _classNames))
-    }, /*#__PURE__*/_react["default"].createElement(_badge["default"], {
-      content: item.props.badge
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: classPrefix + "-item-title"
-    }, item.props.title))));
-  })));
+      className: (0, _classnames.default)(`${classPrefix}-item`, {
+        [`${classPrefix}-item-active`]: active,
+        [`${classPrefix}-item-disabled`]: item.props.disabled
+      })
+    }, _react.default.createElement(_react.default.Fragment, null, isActiveNextSibling && _react.default.createElement(_corner.Corner, {
+      className: `${classPrefix}-item-corner ${classPrefix}-item-corner-top`
+    }), isActivePreviousSibling && _react.default.createElement(_corner.Corner, {
+      className: `${classPrefix}-item-corner ${classPrefix}-item-corner-bottom`
+    })), _react.default.createElement(_badge.default, {
+      content: item.props.badge,
+      className: `${classPrefix}-badge`
+    }, _react.default.createElement("div", {
+      className: `${classPrefix}-item-title`
+    }, active && _react.default.createElement("div", {
+      className: `${classPrefix}-item-highlight`
+    }), item.props.title))));
+  })), _react.default.createElement("div", {
+    className: (0, _classnames.default)(`${classPrefix}-extra-space`, isLastItemActive && `${classPrefix}-item-active-next-sibling`)
+  }, isLastItemActive && _react.default.createElement(_corner.Corner, {
+    className: `${classPrefix}-item-corner ${classPrefix}-item-corner-top`
+  }))));
 };
 
 exports.SideBar = SideBar;

package/cjs/components/skeleton/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./skeleton.css");
 
@@ -16,4 +16,4 @@ var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_sk
   Paragraph: _skeleton2.SkeletonParagraph
 });
 
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/skeleton/skeleton.js

@@ -15,45 +15,43 @@ var _generateIntArray = require("../../utils/generate-int-array");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = 'adm-skeleton';
+const classPrefix = 'adm-skeleton';
 
-var Skeleton = function Skeleton(props) {
-  var _classNames;
-
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-animated"] = props.animated, _classNames))
+const Skeleton = props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, {
+      [`${classPrefix}-animated`]: props.animated
+    })
   }));
 };
 
 exports.Skeleton = Skeleton;
 
-var SkeletonTitle = function SkeletonTitle(props) {
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement(Skeleton, {
+const SkeletonTitle = props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(Skeleton, {
     animated: props.animated,
-    className: classPrefix + "-title"
+    className: `${classPrefix}-title`
   }));
 };
 
 exports.SkeletonTitle = SkeletonTitle;
-var defaultSkeletonParagraphProps = {
+const defaultSkeletonParagraphProps = {
   lineCount: 3
 };
 
-var SkeletonParagraph = function SkeletonParagraph(p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultSkeletonParagraphProps, p);
-  var keys = (0, _generateIntArray.generateIntArray)(1, props.lineCount);
-
-  var node = /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-paragraph"
-  }, keys.map(function (key) {
-    return /*#__PURE__*/_react["default"].createElement(Skeleton, {
-      key: key,
-      animated: props.animated,
-      className: classPrefix + "-paragraph-line"
-    });
-  }));
+const SkeletonParagraph = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultSkeletonParagraphProps, p);
+  const keys = (0, _generateIntArray.generateIntArray)(1, props.lineCount);
+
+  const node = _react.default.createElement("div", {
+    className: `${classPrefix}-paragraph`
+  }, keys.map(key => _react.default.createElement(Skeleton, {
+    key: key,
+    animated: props.animated,
+    className: `${classPrefix}-paragraph-line`
+  })));
 
   return (0, _nativeProps.withNativeProps)(props, node);
 };

package/cjs/components/slider/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./slider.css");
 
 var _slider2 = require("./slider");
 
 var _default = _slider2.Slider;
-exports["default"] = _default;
+exports.default = _default;