@ant-design/pro-components 2.8.10 → 3.0.0-beta.2

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

@@ -0,0 +1,324 @@
+import { Card, Skeleton } from 'antd';
+import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint';
+import React, { useMemo } from 'react';
+import { Line, PageHeaderSkeleton } from "../List";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var MediaQueryKeyEnum = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 3,
+  xl: 3,
+  xxl: 4
+};
+var DescriptionsLargeItemSkeleton = function DescriptionsLargeItemSkeleton(_ref) {
+  var active = _ref.active;
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      marginBlockStart: 32
+    },
+    children: [/*#__PURE__*/_jsx(Skeleton.Button, {
+      active: active,
+      size: "small",
+      style: {
+        width: 100,
+        marginBlockEnd: 16
+      }
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        width: '100%',
+        justifyContent: 'space-between',
+        display: 'flex'
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        style: {
+          flex: 1,
+          marginInlineEnd: 24,
+          maxWidth: 300
+        },
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          active: active,
+          paragraph: false,
+          title: {
+            style: {
+              marginBlockStart: 0
+            }
+          }
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          active: active,
+          paragraph: false,
+          title: {
+            style: {
+              marginBlockStart: 8
+            }
+          }
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          active: active,
+          paragraph: false,
+          title: {
+            style: {
+              marginBlockStart: 8
+            }
+          }
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        children: /*#__PURE__*/_jsxs("div", {
+          style: {
+            maxWidth: 300,
+            margin: 'auto'
+          },
+          children: [/*#__PURE__*/_jsx(Skeleton, {
+            active: active,
+            paragraph: false,
+            title: {
+              style: {
+                marginBlockStart: 0
+              }
+            }
+          }), /*#__PURE__*/_jsx(Skeleton, {
+            active: active,
+            paragraph: false,
+            title: {
+              style: {
+                marginBlockStart: 8
+              }
+            }
+          })]
+        })
+      })]
+    })]
+  });
+};
+var DescriptionsItemSkeleton = function DescriptionsItemSkeleton(_ref2) {
+  var size = _ref2.size,
+    active = _ref2.active;
+  var defaultCol = useMemo(function () {
+    return {
+      lg: true,
+      md: true,
+      sm: false,
+      xl: false,
+      xs: false,
+      xxl: false
+    };
+  }, []);
+  var col = useBreakpoint() || defaultCol;
+  var colSize = Object.keys(col).filter(function (key) {
+    return col[key] === true;
+  })[0] || 'md';
+  var arraySize = size === undefined ? MediaQueryKeyEnum[colSize] || 3 : size;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: '100%',
+      justifyContent: 'space-between',
+      display: 'flex'
+    },
+    children: new Array(arraySize).fill(null).map(function (_, index) {
+      return /*#__PURE__*/_jsxs("div", {
+        style: {
+          flex: 1,
+          paddingInlineStart: index === 0 ? 0 : 24,
+          paddingInlineEnd: index === arraySize - 1 ? 0 : 24
+        },
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          active: active,
+          paragraph: false,
+          title: {
+            style: {
+              marginBlockStart: 0
+            }
+          }
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          active: active,
+          paragraph: false,
+          title: {
+            style: {
+              marginBlockStart: 8
+            }
+          }
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          active: active,
+          paragraph: false,
+          title: {
+            style: {
+              marginBlockStart: 8
+            }
+          }
+        })]
+      }, index);
+    })
+  });
+};
+
+/**
+ * Table 的子项目骨架屏
+ *
+ * @param param0
+ */
+export var TableItemSkeleton = function TableItemSkeleton(_ref3) {
+  var active = _ref3.active,
+    _ref3$header = _ref3.header,
+    header = _ref3$header === void 0 ? false : _ref3$header;
+  var defaultCol = useMemo(function () {
+    return {
+      lg: true,
+      md: true,
+      sm: false,
+      xl: false,
+      xs: false,
+      xxl: false
+    };
+  }, []);
+  var col = useBreakpoint() || defaultCol;
+  var colSize = Object.keys(col).filter(function (key) {
+    return col[key] === true;
+  })[0] || 'md';
+  var arraySize = MediaQueryKeyEnum[colSize] || 3;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'flex',
+        background: header ? 'rgba(0,0,0,0.02)' : 'none',
+        padding: '24px 8px'
+      },
+      children: [new Array(arraySize).fill(null).map(function (_, index) {
+        return /*#__PURE__*/_jsx("div", {
+          style: {
+            flex: 1,
+            paddingInlineStart: header && index === 0 ? 0 : 20,
+            paddingInlineEnd: 32
+          },
+          children: /*#__PURE__*/_jsx(Skeleton, {
+            active: active,
+            paragraph: false,
+            title: {
+              style: {
+                margin: 0,
+                height: 24,
+                width: header ? '75px' : '100%'
+              }
+            }
+          })
+        }, index);
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 3,
+          paddingInlineStart: 32
+        },
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          active: active,
+          paragraph: false,
+          title: {
+            style: {
+              margin: 0,
+              height: 24,
+              width: header ? '75px' : '100%'
+            }
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Line, {
+      padding: "0px 0px"
+    })]
+  });
+};
+
+/**
+ * Table 骨架屏
+ *
+ * @param param0
+ */
+export var TableSkeleton = function TableSkeleton(_ref4) {
+  var active = _ref4.active,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 4 : _ref4$size;
+  return /*#__PURE__*/_jsxs(Card, {
+    variant: "borderless",
+    children: [/*#__PURE__*/_jsx(Skeleton.Button, {
+      active: active,
+      size: "small",
+      style: {
+        width: 100,
+        marginBlockEnd: 16
+      }
+    }), /*#__PURE__*/_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
+        _jsx(TableItemSkeleton, {
+          active: active
+        }, index)
+      );
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        paddingBlockStart: 16
+      },
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        active: active,
+        paragraph: false,
+        title: {
+          style: {
+            margin: 0,
+            height: 32,
+            float: 'right',
+            maxWidth: '630px'
+          }
+        }
+      })
+    })]
+  });
+};
+export var DescriptionsSkeleton = function DescriptionsSkeleton(_ref5) {
+  var active = _ref5.active;
+  return /*#__PURE__*/_jsxs(Card, {
+    variant: "borderless",
+    style: {
+      borderStartEndRadius: 0,
+      borderTopLeftRadius: 0
+    },
+    children: [/*#__PURE__*/_jsx(Skeleton.Button, {
+      active: active,
+      size: "small",
+      style: {
+        width: 100,
+        marginBlockEnd: 16
+      }
+    }), /*#__PURE__*/_jsx(DescriptionsItemSkeleton, {
+      active: active
+    }), /*#__PURE__*/_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__*/_jsxs("div", {
+    style: {
+      width: '100%'
+    },
+    children: [pageHeader !== false && /*#__PURE__*/_jsx(PageHeaderSkeleton, {
+      active: active
+    }), /*#__PURE__*/_jsx(DescriptionsSkeleton, {
+      active: active
+    }), list !== false && /*#__PURE__*/_jsx(Line, {}), list !== false && /*#__PURE__*/_jsx(TableSkeleton, {
+      active: active,
+      size: list
+    })]
+  });
+};
+export default DescriptionsPageSkeleton;

package/es/skeleton/components/List/index.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+/** 一条分割线 */
+export declare const Line: ({ padding }: {
+    padding?: string | number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MediaQueryKeyEnum: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
+/** 列表子项目骨架屏 */
+export declare const ListSkeletonItem: React.FC<{
+    active: boolean;
+}>;
+/** 列表骨架屏 */
+export declare const ListSkeleton: React.FC<{
+    size: number;
+    active?: boolean;
+    actionButton?: boolean;
+}>;
+/**
+ * 面包屑的 骨架屏
+ *
+ * @param param0
+ */
+export declare const PageHeaderSkeleton: ({ active }: {
+    active: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export type ListPageSkeletonProps = {
+    active?: boolean;
+    pageHeader?: false;
+    statistic?: number | false;
+    actionButton?: false;
+    toolbar?: false;
+    list?: number | false;
+};
+/**
+ * 列表操作栏的骨架屏
+ *
+ * @param param0
+ */
+export declare const ListToolbarSkeleton: ({ active }: {
+    active: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const ListPageSkeleton: React.FC<ListPageSkeletonProps>;
+export default ListPageSkeleton;

package/es/skeleton/components/List/index.js

@@ -0,0 +1,300 @@
+import { Card, Divider, Skeleton, Space } from 'antd';
+import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint';
+import React, { useMemo } from 'react';
+
+/** 一条分割线 */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export var Line = function Line(_ref) {
+  var padding = _ref.padding;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      padding: padding || '0 24px'
+    },
+    children: /*#__PURE__*/_jsx(Divider, {
+      style: {
+        margin: 0
+      }
+    })
+  });
+};
+export var MediaQueryKeyEnum = {
+  xs: 2,
+  sm: 2,
+  md: 4,
+  lg: 4,
+  xl: 6,
+  xxl: 6
+};
+var StatisticSkeleton = function StatisticSkeleton(_ref2) {
+  var size = _ref2.size,
+    active = _ref2.active;
+  var defaultCol = useMemo(function () {
+    return {
+      lg: true,
+      md: true,
+      sm: false,
+      xl: false,
+      xs: false,
+      xxl: false
+    };
+  }, []);
+  var col = useBreakpoint() || defaultCol;
+  var colSize = Object.keys(col).filter(function (key) {
+    return col[key] === true;
+  })[0] || 'md';
+  var arraySize = size === undefined ? MediaQueryKeyEnum[colSize] || 6 : size;
+  var firstWidth = function firstWidth(index) {
+    if (index === 0) {
+      return 0;
+    }
+    if (arraySize > 2) {
+      return 42;
+    }
+    return 16;
+  };
+  return /*#__PURE__*/_jsx(Card, {
+    variant: "borderless",
+    style: {
+      marginBlockEnd: 16
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      style: {
+        width: '100%',
+        justifyContent: 'space-between',
+        display: 'flex'
+      },
+      children: new Array(arraySize).fill(null).map(function (_, index) {
+        return /*#__PURE__*/_jsxs("div", {
+          style: {
+            borderInlineStart: arraySize > 2 && index === 1 ? '1px solid rgba(0,0,0,0.06)' : undefined,
+            paddingInlineStart: firstWidth(index),
+            flex: 1,
+            marginInlineEnd: index === 0 ? 16 : 0
+          },
+          children: [/*#__PURE__*/_jsx(Skeleton, {
+            active: active,
+            paragraph: false,
+            title: {
+              width: 100,
+              style: {
+                marginBlockStart: 0
+              }
+            }
+          }), /*#__PURE__*/_jsx(Skeleton.Button, {
+            active: active,
+            style: {
+              height: 48
+            }
+          })]
+        }, index);
+      })
+    })
+  });
+};
+
+/** 列表子项目骨架屏 */
+export var ListSkeletonItem = function ListSkeletonItem(_ref3) {
+  var active = _ref3.active;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Card, {
+      variant: "borderless",
+      style: {
+        borderRadius: 0
+      },
+      styles: {
+        body: {
+          padding: 24
+        }
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        style: {
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between'
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          style: {
+            maxWidth: '100%',
+            flex: 1
+          },
+          children: /*#__PURE__*/_jsx(Skeleton, {
+            active: active,
+            title: {
+              width: 100,
+              style: {
+                marginBlockStart: 0
+              }
+            },
+            paragraph: {
+              rows: 1,
+              style: {
+                margin: 0
+              }
+            }
+          })
+        }), /*#__PURE__*/_jsx(Skeleton.Button, {
+          active: active,
+          size: "small",
+          style: {
+            width: 165,
+            marginBlockStart: 12
+          }
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Line, {})]
+  });
+};
+
+/** 列表骨架屏 */
+export var ListSkeleton = function ListSkeleton(_ref4) {
+  var size = _ref4.size,
+    _ref4$active = _ref4.active,
+    active = _ref4$active === void 0 ? true : _ref4$active,
+    actionButton = _ref4.actionButton;
+  return /*#__PURE__*/_jsxs(Card, {
+    variant: "borderless",
+    styles: {
+      body: {
+        padding: 0
+      }
+    },
+    children: [new Array(size).fill(null).map(function (_, index) {
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        _jsx(ListSkeletonItem, {
+          active: !!active
+        }, index)
+      );
+    }), actionButton !== false && /*#__PURE__*/_jsx(Card, {
+      variant: "borderless",
+      style: {
+        borderStartEndRadius: 0,
+        borderTopLeftRadius: 0
+      },
+      styles: {
+        body: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }
+      },
+      children: /*#__PURE__*/_jsx(Skeleton.Button, {
+        style: {
+          width: 102
+        },
+        active: active,
+        size: "small"
+      })
+    })]
+  });
+};
+
+/**
+ * 面包屑的 骨架屏
+ *
+ * @param param0
+ */
+export var PageHeaderSkeleton = function PageHeaderSkeleton(_ref5) {
+  var active = _ref5.active;
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      marginBlockEnd: 16
+    },
+    children: [/*#__PURE__*/_jsx(Skeleton, {
+      paragraph: false,
+      title: {
+        width: 185
+      }
+    }), /*#__PURE__*/_jsx(Skeleton.Button, {
+      active: active,
+      size: "small"
+    })]
+  });
+};
+/**
+ * 列表操作栏的骨架屏
+ *
+ * @param param0
+ */
+export var ListToolbarSkeleton = function ListToolbarSkeleton(_ref6) {
+  var active = _ref6.active;
+  return /*#__PURE__*/_jsx(Card, {
+    variant: "borderless",
+    style: {
+      borderBottomRightRadius: 0,
+      borderBottomLeftRadius: 0
+    },
+    styles: {
+      body: {
+        paddingBlockEnd: 8
+      }
+    },
+    children: /*#__PURE__*/_jsxs(Space, {
+      style: {
+        width: '100%',
+        justifyContent: 'space-between'
+      },
+      children: [/*#__PURE__*/_jsx(Skeleton.Button, {
+        active: active,
+        style: {
+          width: 200
+        },
+        size: "small"
+      }), /*#__PURE__*/_jsxs(Space, {
+        children: [/*#__PURE__*/_jsx(Skeleton.Button, {
+          active: active,
+          size: "small",
+          style: {
+            width: 120
+          }
+        }), /*#__PURE__*/_jsx(Skeleton.Button, {
+          active: active,
+          size: "small",
+          style: {
+            width: 80
+          }
+        })]
+      })]
+    })
+  });
+};
+var ListPageSkeleton = function ListPageSkeleton(_ref7) {
+  var _ref7$active = _ref7.active,
+    active = _ref7$active === void 0 ? true : _ref7$active,
+    statistic = _ref7.statistic,
+    actionButton = _ref7.actionButton,
+    toolbar = _ref7.toolbar,
+    pageHeader = _ref7.pageHeader,
+    _ref7$list = _ref7.list,
+    list = _ref7$list === void 0 ? 5 : _ref7$list;
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      width: '100%'
+    },
+    children: [pageHeader !== false && /*#__PURE__*/_jsx(PageHeaderSkeleton, {
+      active: active
+    }), statistic !== false && /*#__PURE__*/_jsx(StatisticSkeleton, {
+      size: statistic,
+      active: active
+    }), (toolbar !== false || list !== false) && /*#__PURE__*/_jsxs(Card, {
+      variant: "borderless",
+      styles: {
+        body: {
+          padding: 0
+        }
+      },
+      children: [toolbar !== false && /*#__PURE__*/_jsx(ListToolbarSkeleton, {
+        active: active
+      }), list !== false && /*#__PURE__*/_jsx(ListSkeleton, {
+        size: list,
+        active: active,
+        actionButton: actionButton
+      })]
+    })]
+  });
+};
+export default ListPageSkeleton;

package/es/skeleton/components/Result/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ResultPageSkeletonProps = {
+    active?: boolean;
+    pageHeader?: false;
+};
+declare const ResultPageSkeleton: React.FC<ResultPageSkeletonProps>;
+export default ResultPageSkeleton;