@ant-design/pro-components 3.1.0-0 → 3.1.1-1

package/lib/skeleton/components/Descriptions/index.js

@@ -1,17 +1,18 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TableSkeleton = exports.TableItemSkeleton = exports.DescriptionsSkeleton = void 0;
 var _antd = require("antd");
-var _useBreakpoint = _interopRequireDefault(require("antd/lib/grid/hooks/useBreakpoint"));
 var _react = _interopRequireWildcard(require("react"));
 var _List = require("../List");
 var _jsxRuntime = require("react/jsx-runtime");
-var MediaQueryKeyEnum = {
+const {
+  useBreakpoint
+} = _antd.Grid;
+const MediaQueryKeyEnum = {
   xs: 1,
   sm: 2,
   md: 3,
@@ -19,30 +20,66 @@ var MediaQueryKeyEnum = {
   xl: 3,
   xxl: 4
 };
-var DescriptionsLargeItemSkeleton = function DescriptionsLargeItemSkeleton(_ref) {
-  var active = _ref.active;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+const DescriptionsLargeItemSkeleton = ({
+  active
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  style: {
+    marginBlockStart: 32
+  },
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton.Button, {
+    active: active,
+    size: "small",
     style: {
-      marginBlockStart: 32
+      width: 100,
+      marginBlockEnd: 16
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      width: '100%',
+      justifyContent: 'space-between',
+      display: 'flex'
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton.Button, {
-      active: active,
-      size: "small",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
-        width: 100,
-        marginBlockEnd: 16
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        flex: 1,
+        marginInlineEnd: 24,
+        maxWidth: 300
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
+        active: active,
+        paragraph: false,
+        title: {
+          style: {
+            marginBlockStart: 0
+          }
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
+        active: active,
+        paragraph: false,
+        title: {
+          style: {
+            marginBlockStart: 8
+          }
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
+        active: active,
+        paragraph: false,
+        title: {
+          style: {
+            marginBlockStart: 8
+          }
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
-        width: '100%',
-        justifyContent: 'space-between',
-        display: 'flex'
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         style: {
-          flex: 1,
-          marginInlineEnd: 24,
-          maxWidth: 300
+          maxWidth: 300,
+          margin: 'auto'
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
           active: active,
@@ -60,106 +97,64 @@ var DescriptionsLargeItemSkeleton = function DescriptionsLargeItemSkeleton(_ref)
               marginBlockStart: 8
             }
           }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
-          active: active,
-          paragraph: false,
-          title: {
-            style: {
-              marginBlockStart: 8
-            }
-          }
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          flex: 1,
-          alignItems: 'center',
-          justifyContent: 'center'
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          style: {
-            maxWidth: 300,
-            margin: 'auto'
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
-            active: active,
-            paragraph: false,
-            title: {
-              style: {
-                marginBlockStart: 0
-              }
-            }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
-            active: active,
-            paragraph: false,
-            title: {
-              style: {
-                marginBlockStart: 8
-              }
-            }
-          })]
-        })
-      })]
+      })
     })]
-  });
-};
-var DescriptionsItemSkeleton = function DescriptionsItemSkeleton(_ref2) {
-  var size = _ref2.size,
-    active = _ref2.active;
-  var defaultCol = (0, _react.useMemo)(function () {
-    return {
-      lg: true,
-      md: true,
-      sm: false,
-      xl: false,
-      xs: false,
-      xxl: false
-    };
-  }, []);
-  var col = (0, _useBreakpoint.default)() || defaultCol;
-  var colSize = Object.keys(col).filter(function (key) {
-    return col[key] === true;
-  })[0] || 'md';
-  var arraySize = size === undefined ? MediaQueryKeyEnum[colSize] || 3 : size;
+  })]
+});
+const DescriptionsItemSkeleton = ({
+  size,
+  active
+}) => {
+  const defaultCol = (0, _react.useMemo)(() => ({
+    lg: true,
+    md: true,
+    sm: false,
+    xl: false,
+    xs: false,
+    xxl: false
+  }), []);
+  const col = useBreakpoint() || defaultCol;
+  const colSize = Object.keys(col).filter(key => col[key] === true)[0] || 'md';
+  const arraySize = size === undefined ? MediaQueryKeyEnum[colSize] || 3 : size;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
       width: '100%',
       justifyContent: 'space-between',
       display: 'flex'
     },
-    children: new Array(arraySize).fill(null).map(function (_, index) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: {
-          flex: 1,
-          paddingInlineStart: index === 0 ? 0 : 24,
-          paddingInlineEnd: index === arraySize - 1 ? 0 : 24
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
-          active: active,
-          paragraph: false,
-          title: {
-            style: {
-              marginBlockStart: 0
-            }
+    children: new Array(arraySize).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        flex: 1,
+        paddingInlineStart: index === 0 ? 0 : 24,
+        paddingInlineEnd: index === arraySize - 1 ? 0 : 24
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
+        active: active,
+        paragraph: false,
+        title: {
+          style: {
+            marginBlockStart: 0
           }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
-          active: active,
-          paragraph: false,
-          title: {
-            style: {
-              marginBlockStart: 8
-            }
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
+        active: active,
+        paragraph: false,
+        title: {
+          style: {
+            marginBlockStart: 8
           }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
-          active: active,
-          paragraph: false,
-          title: {
-            style: {
-              marginBlockStart: 8
-            }
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
+        active: active,
+        paragraph: false,
+        title: {
+          style: {
+            marginBlockStart: 8
           }
-        })]
-      }, index);
-    })
+        }
+      })]
+    }, index))
   });
 };
 
@@ -168,25 +163,21 @@ var DescriptionsItemSkeleton = function DescriptionsItemSkeleton(_ref2) {
  *
  * @param param0
  */
-var TableItemSkeleton = exports.TableItemSkeleton = function TableItemSkeleton(_ref3) {
-  var active = _ref3.active,
-    _ref3$header = _ref3.header,
-    header = _ref3$header === void 0 ? false : _ref3$header;
-  var defaultCol = (0, _react.useMemo)(function () {
-    return {
-      lg: true,
-      md: true,
-      sm: false,
-      xl: false,
-      xs: false,
-      xxl: false
-    };
-  }, []);
-  var col = (0, _useBreakpoint.default)() || defaultCol;
-  var colSize = Object.keys(col).filter(function (key) {
-    return col[key] === true;
-  })[0] || 'md';
-  var arraySize = MediaQueryKeyEnum[colSize] || 3;
+const TableItemSkeleton = ({
+  active,
+  header = false
+}) => {
+  const defaultCol = (0, _react.useMemo)(() => ({
+    lg: true,
+    md: true,
+    sm: false,
+    xl: false,
+    xs: false,
+    xxl: false
+  }), []);
+  const col = useBreakpoint() || defaultCol;
+  const colSize = Object.keys(col).filter(key => col[key] === true)[0] || 'md';
+  const arraySize = MediaQueryKeyEnum[colSize] || 3;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
@@ -194,26 +185,24 @@ var TableItemSkeleton = exports.TableItemSkeleton = function TableItemSkeleton(_
         background: header ? 'rgba(0,0,0,0.02)' : 'none',
         padding: '24px 8px'
       },
-      children: [new Array(arraySize).fill(null).map(function (_, index) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            flex: 1,
-            paddingInlineStart: header && index === 0 ? 0 : 20,
-            paddingInlineEnd: 32
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
-            active: active,
-            paragraph: false,
-            title: {
-              style: {
-                margin: 0,
-                height: 24,
-                width: header ? '75px' : '100%'
-              }
+      children: [new Array(arraySize).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          flex: 1,
+          paddingInlineStart: header && index === 0 ? 0 : 20,
+          paddingInlineEnd: 32
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
+          active: active,
+          paragraph: false,
+          title: {
+            style: {
+              margin: 0,
+              height: 24,
+              width: header ? '75px' : '100%'
             }
-          })
-        }, index);
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          }
+        })
+      }, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
           flex: 3,
           paddingInlineStart: 32
@@ -241,90 +230,85 @@ var TableItemSkeleton = exports.TableItemSkeleton = function TableItemSkeleton(_
  *
  * @param param0
  */
-var TableSkeleton = exports.TableSkeleton = function TableSkeleton(_ref4) {
-  var active = _ref4.active,
-    _ref4$size = _ref4.size,
-    size = _ref4$size === void 0 ? 4 : _ref4$size;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Card, {
-    variant: "borderless",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton.Button, {
-      active: active,
-      size: "small",
-      style: {
-        width: 100,
-        marginBlockEnd: 16
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TableItemSkeleton, {
-      header: true,
-      active: active
-    }), new Array(size).fill(null).map(function (_, index) {
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line react/no-array-index-key
-        (0, _jsxRuntime.jsx)(TableItemSkeleton, {
-          active: active
-        }, index)
-      );
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        paddingBlockStart: 16
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
-        active: active,
-        paragraph: false,
-        title: {
-          style: {
-            margin: 0,
-            height: 32,
-            float: 'right',
-            maxWidth: '630px'
-          }
-        }
-      })
-    })]
-  });
-};
-var DescriptionsSkeleton = exports.DescriptionsSkeleton = function DescriptionsSkeleton(_ref5) {
-  var active = _ref5.active;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Card, {
-    variant: "borderless",
+exports.TableItemSkeleton = TableItemSkeleton;
+const TableSkeleton = ({
+  active,
+  size = 4
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Card, {
+  variant: "borderless",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton.Button, {
+    active: active,
+    size: "small",
+    style: {
+      width: 100,
+      marginBlockEnd: 16
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TableItemSkeleton, {
+    header: true,
+    active: active
+  }), new Array(size).fill(null).map((_, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  (0, _jsxRuntime.jsx)(TableItemSkeleton, {
+    active: active
+  }, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
-      borderStartEndRadius: 0,
-      borderTopLeftRadius: 0
+      display: 'flex',
+      justifyContent: 'flex-end',
+      paddingBlockStart: 16
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton.Button, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
       active: active,
-      size: "small",
-      style: {
-        width: 100,
-        marginBlockEnd: 16
+      paragraph: false,
+      title: {
+        style: {
+          margin: 0,
+          height: 32,
+          float: 'right',
+          maxWidth: '630px'
+        }
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsItemSkeleton, {
-      active: active
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsLargeItemSkeleton, {
-      active: active
-    })]
-  });
-};
-var DescriptionsPageSkeleton = function DescriptionsPageSkeleton(_ref6) {
-  var _ref6$active = _ref6.active,
-    active = _ref6$active === void 0 ? true : _ref6$active,
-    pageHeader = _ref6.pageHeader,
-    list = _ref6.list;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    })
+  })]
+});
+exports.TableSkeleton = TableSkeleton;
+const DescriptionsSkeleton = ({
+  active
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Card, {
+  variant: "borderless",
+  style: {
+    borderStartEndRadius: 0,
+    borderTopLeftRadius: 0
+  },
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton.Button, {
+    active: active,
+    size: "small",
     style: {
-      width: '100%'
-    },
-    children: [pageHeader !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.PageHeaderSkeleton, {
-      active: active
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsSkeleton, {
-      active: active
-    }), list !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.Line, {}), list !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableSkeleton, {
-      active: active,
-      size: list
-    })]
-  });
-};
+      width: 100,
+      marginBlockEnd: 16
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsItemSkeleton, {
+    active: active
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsLargeItemSkeleton, {
+    active: active
+  })]
+});
+exports.DescriptionsSkeleton = DescriptionsSkeleton;
+const DescriptionsPageSkeleton = ({
+  active = true,
+  pageHeader,
+  list
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  style: {
+    width: '100%'
+  },
+  children: [pageHeader !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.PageHeaderSkeleton, {
+    active: active
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsSkeleton, {
+    active: active
+  }), list !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.Line, {}), list !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableSkeleton, {
+    active: active,
+    size: list
+  })]
+});
 var _default = exports.default = DescriptionsPageSkeleton;