@ant-design/pro-components 2.8.9 → 3.0.0-beta.1

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

@@ -0,0 +1,336 @@
+// src/skeleton/components/Descriptions/index.tsx
+import { Card, Skeleton } from "antd";
+import useBreakpoint from "antd/lib/grid/hooks/useBreakpoint";
+import React, { useMemo } from "react";
+import { Line, PageHeaderSkeleton } from "../List";
+var MediaQueryKeyEnum = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 3,
+  xl: 3,
+  xxl: 4
+};
+var DescriptionsLargeItemSkeleton = ({ active }) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      marginBlockStart: 32
+    }
+  },
+  /* @__PURE__ */ React.createElement(
+    Skeleton.Button,
+    {
+      active,
+      size: "small",
+      style: { width: 100, marginBlockEnd: 16 }
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        justifyContent: "space-between",
+        display: "flex"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          marginInlineEnd: 24,
+          maxWidth: 300
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Skeleton,
+        {
+          active,
+          paragraph: false,
+          title: {
+            style: { marginBlockStart: 0 }
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        Skeleton,
+        {
+          active,
+          paragraph: false,
+          title: {
+            style: { marginBlockStart: 8 }
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        Skeleton,
+        {
+          active,
+          paragraph: false,
+          title: {
+            style: { marginBlockStart: 8 }
+          }
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            maxWidth: 300,
+            margin: "auto"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          Skeleton,
+          {
+            active,
+            paragraph: false,
+            title: {
+              style: { marginBlockStart: 0 }
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          Skeleton,
+          {
+            active,
+            paragraph: false,
+            title: {
+              style: { marginBlockStart: 8 }
+            }
+          }
+        )
+      )
+    )
+  )
+);
+var DescriptionsItemSkeleton = ({ size, active }) => {
+  const defaultCol = 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 === void 0 ? MediaQueryKeyEnum[colSize] || 3 : size;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        justifyContent: "space-between",
+        display: "flex"
+      }
+    },
+    new Array(arraySize).fill(null).map((_, index) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: index,
+        style: {
+          flex: 1,
+          paddingInlineStart: index === 0 ? 0 : 24,
+          paddingInlineEnd: index === arraySize - 1 ? 0 : 24
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Skeleton,
+        {
+          active,
+          paragraph: false,
+          title: {
+            style: { marginBlockStart: 0 }
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        Skeleton,
+        {
+          active,
+          paragraph: false,
+          title: {
+            style: { marginBlockStart: 8 }
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        Skeleton,
+        {
+          active,
+          paragraph: false,
+          title: {
+            style: { marginBlockStart: 8 }
+          }
+        }
+      )
+    ))
+  );
+};
+var TableItemSkeleton = ({
+  active,
+  header = false
+}) => {
+  const defaultCol = 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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        background: header ? "rgba(0,0,0,0.02)" : "none",
+        padding: "24px 8px"
+      }
+    },
+    new Array(arraySize).fill(null).map((_, index) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: index,
+        style: {
+          flex: 1,
+          paddingInlineStart: header && index === 0 ? 0 : 20,
+          paddingInlineEnd: 32
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Skeleton,
+        {
+          active,
+          paragraph: false,
+          title: {
+            style: {
+              margin: 0,
+              height: 24,
+              width: header ? "75px" : "100%"
+            }
+          }
+        }
+      )
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          flex: 3,
+          paddingInlineStart: 32
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Skeleton,
+        {
+          active,
+          paragraph: false,
+          title: {
+            style: { margin: 0, height: 24, width: header ? "75px" : "100%" }
+          }
+        }
+      )
+    )
+  ), /* @__PURE__ */ React.createElement(Line, { padding: "0px 0px" }));
+};
+var TableSkeleton = ({ active, size = 4 }) => /* @__PURE__ */ React.createElement(Card, { variant: "borderless" }, /* @__PURE__ */ React.createElement(
+  Skeleton.Button,
+  {
+    active,
+    size: "small",
+    style: { width: 100, marginBlockEnd: 16 }
+  }
+), /* @__PURE__ */ React.createElement(TableItemSkeleton, { header: true, active }), new Array(size).fill(null).map((_, index) => (
+  // eslint-disable-next-line react/no-array-index-key
+  /* @__PURE__ */ React.createElement(TableItemSkeleton, { key: index, active })
+)), /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      display: "flex",
+      justifyContent: "flex-end",
+      paddingBlockStart: 16
+    }
+  },
+  /* @__PURE__ */ React.createElement(
+    Skeleton,
+    {
+      active,
+      paragraph: false,
+      title: {
+        style: {
+          margin: 0,
+          height: 32,
+          float: "right",
+          maxWidth: "630px"
+        }
+      }
+    }
+  )
+));
+var DescriptionsSkeleton = ({ active }) => /* @__PURE__ */ React.createElement(
+  Card,
+  {
+    variant: "borderless",
+    style: {
+      borderStartEndRadius: 0,
+      borderTopLeftRadius: 0
+    }
+  },
+  /* @__PURE__ */ React.createElement(
+    Skeleton.Button,
+    {
+      active,
+      size: "small",
+      style: { width: 100, marginBlockEnd: 16 }
+    }
+  ),
+  /* @__PURE__ */ React.createElement(DescriptionsItemSkeleton, { active }),
+  /* @__PURE__ */ React.createElement(DescriptionsLargeItemSkeleton, { active })
+);
+var DescriptionsPageSkeleton = ({
+  active = true,
+  pageHeader,
+  list
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      width: "100%"
+    }
+  },
+  pageHeader !== false && /* @__PURE__ */ React.createElement(PageHeaderSkeleton, { active }),
+  /* @__PURE__ */ React.createElement(DescriptionsSkeleton, { active }),
+  list !== false && /* @__PURE__ */ React.createElement(Line, null),
+  list !== false && /* @__PURE__ */ React.createElement(TableSkeleton, { active, size: list })
+);
+var Descriptions_default = DescriptionsPageSkeleton;
+export {
+  DescriptionsSkeleton,
+  TableItemSkeleton,
+  TableSkeleton,
+  Descriptions_default as default
+};

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,290 @@
+// src/skeleton/components/List/index.tsx
+import { Card, Divider, Skeleton, Space } from "antd";
+import useBreakpoint from "antd/lib/grid/hooks/useBreakpoint";
+import React, { useMemo } from "react";
+var Line = ({ padding }) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      padding: padding || "0 24px"
+    }
+  },
+  /* @__PURE__ */ React.createElement(Divider, { style: { margin: 0 } })
+);
+var MediaQueryKeyEnum = {
+  xs: 2,
+  sm: 2,
+  md: 4,
+  lg: 4,
+  xl: 6,
+  xxl: 6
+};
+var StatisticSkeleton = ({ size, active }) => {
+  const defaultCol = 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 === void 0 ? MediaQueryKeyEnum[colSize] || 6 : size;
+  const firstWidth = (index) => {
+    if (index === 0) {
+      return 0;
+    }
+    if (arraySize > 2) {
+      return 42;
+    }
+    return 16;
+  };
+  return /* @__PURE__ */ React.createElement(
+    Card,
+    {
+      variant: "borderless",
+      style: {
+        marginBlockEnd: 16
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: "100%",
+          justifyContent: "space-between",
+          display: "flex"
+        }
+      },
+      new Array(arraySize).fill(null).map((_, index) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: index,
+          style: {
+            borderInlineStart: arraySize > 2 && index === 1 ? "1px solid rgba(0,0,0,0.06)" : void 0,
+            paddingInlineStart: firstWidth(index),
+            flex: 1,
+            marginInlineEnd: index === 0 ? 16 : 0
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          Skeleton,
+          {
+            active,
+            paragraph: false,
+            title: {
+              width: 100,
+              style: { marginBlockStart: 0 }
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          Skeleton.Button,
+          {
+            active,
+            style: {
+              height: 48
+            }
+          }
+        )
+      ))
+    )
+  );
+};
+var ListSkeletonItem = ({ active }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  Card,
+  {
+    variant: "borderless",
+    style: {
+      borderRadius: 0
+    },
+    styles: {
+      body: {
+        padding: 24
+      }
+    }
+  },
+  /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          maxWidth: "100%",
+          flex: 1
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Skeleton,
+        {
+          active,
+          title: {
+            width: 100,
+            style: {
+              marginBlockStart: 0
+            }
+          },
+          paragraph: {
+            rows: 1,
+            style: {
+              margin: 0
+            }
+          }
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      Skeleton.Button,
+      {
+        active,
+        size: "small",
+        style: { width: 165, marginBlockStart: 12 }
+      }
+    )
+  )
+), /* @__PURE__ */ React.createElement(Line, null));
+var ListSkeleton = ({ size, active = true, actionButton }) => /* @__PURE__ */ React.createElement(
+  Card,
+  {
+    variant: "borderless",
+    styles: {
+      body: {
+        padding: 0
+      }
+    }
+  },
+  new Array(size).fill(null).map((_, index) => (
+    // eslint-disable-next-line react/no-array-index-key
+    /* @__PURE__ */ React.createElement(ListSkeletonItem, { key: index, active: !!active })
+  )),
+  actionButton !== false && /* @__PURE__ */ React.createElement(
+    Card,
+    {
+      variant: "borderless",
+      style: {
+        borderStartEndRadius: 0,
+        borderTopLeftRadius: 0
+      },
+      styles: {
+        body: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Skeleton.Button,
+      {
+        style: {
+          width: 102
+        },
+        active,
+        size: "small"
+      }
+    )
+  )
+);
+var PageHeaderSkeleton = ({ active }) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      marginBlockEnd: 16
+    }
+  },
+  /* @__PURE__ */ React.createElement(
+    Skeleton,
+    {
+      paragraph: false,
+      title: {
+        width: 185
+      }
+    }
+  ),
+  /* @__PURE__ */ React.createElement(Skeleton.Button, { active, size: "small" })
+);
+var ListToolbarSkeleton = ({ active }) => /* @__PURE__ */ React.createElement(
+  Card,
+  {
+    variant: "borderless",
+    style: {
+      borderBottomRightRadius: 0,
+      borderBottomLeftRadius: 0
+    },
+    styles: {
+      body: {
+        paddingBlockEnd: 8
+      }
+    }
+  },
+  /* @__PURE__ */ React.createElement(
+    Space,
+    {
+      style: {
+        width: "100%",
+        justifyContent: "space-between"
+      }
+    },
+    /* @__PURE__ */ React.createElement(Skeleton.Button, { active, style: { width: 200 }, size: "small" }),
+    /* @__PURE__ */ React.createElement(Space, null, /* @__PURE__ */ React.createElement(Skeleton.Button, { active, size: "small", style: { width: 120 } }), /* @__PURE__ */ React.createElement(Skeleton.Button, { active, size: "small", style: { width: 80 } }))
+  )
+);
+var ListPageSkeleton = ({
+  active = true,
+  statistic,
+  actionButton,
+  toolbar,
+  pageHeader,
+  list = 5
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      width: "100%"
+    }
+  },
+  pageHeader !== false && /* @__PURE__ */ React.createElement(PageHeaderSkeleton, { active }),
+  statistic !== false && /* @__PURE__ */ React.createElement(StatisticSkeleton, { size: statistic, active }),
+  (toolbar !== false || list !== false) && /* @__PURE__ */ React.createElement(
+    Card,
+    {
+      variant: "borderless",
+      styles: {
+        body: {
+          padding: 0
+        }
+      }
+    },
+    toolbar !== false && /* @__PURE__ */ React.createElement(ListToolbarSkeleton, { active }),
+    list !== false && /* @__PURE__ */ React.createElement(
+      ListSkeleton,
+      {
+        size: list,
+        active,
+        actionButton
+      }
+    )
+  )
+);
+var List_default = ListPageSkeleton;
+export {
+  Line,
+  ListSkeleton,
+  ListSkeletonItem,
+  ListToolbarSkeleton,
+  MediaQueryKeyEnum,
+  PageHeaderSkeleton,
+  List_default as default
+};

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;