@pisell/materials 1.0.4 → 1.0.6

package/lib/components/table/Actions/Filter/Dropdown/index.js

@@ -0,0 +1,128 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Actions/Filter/Dropdown/index.tsx
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  default: () => Dropdown_default
+});
+module.exports = __toCommonJS(Dropdown_exports);
+var import_react = __toESM(require("react"));
+var import_icon = require("@pisell/icon");
+var import_MultipleContainersSortList = __toESM(require("../../../../MultipleContainersSortList"));
+var import_index = require("./index.less");
+var import_FilterItem = __toESM(require("../FilterItem"));
+var import_hooks = require("../../../../../hooks");
+var import_model = require("../../../model");
+var titleMap = {
+  quickFilter: "Quick Filter",
+  otherFilter: "Filter"
+};
+var DragItem = import_react.default.forwardRef((props, ref) => {
+  const { attributes, listeners, setActivatorNodeRef, style } = props;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref,
+      ...attributes,
+      style,
+      className: "filter-dropdown-drag-item"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_icon.DotsSix,
+      {
+        ref: setActivatorNodeRef,
+        ...listeners,
+        className: "dots-six-icon"
+      }
+    )),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "filter-dropdown-drag-item-right" }, props.children)
+  );
+});
+var Dropdown = (props) => {
+  const { state, dispatch } = (0, import_hooks.useSharedState)(import_model.Context);
+  const list = (0, import_react.useMemo)(() => {
+    return {
+      quickFilter: state.quickFilter,
+      otherFilter: state.otherFilter
+    };
+  }, [state.quickFilter, state.otherFilter]);
+  const handleSortChange = (list2) => {
+    dispatch({
+      type: "setQuickFilter",
+      payload: list2.quickFilter
+    });
+    dispatch({
+      type: "setOtherFilter",
+      payload: list2.otherFilter
+    });
+  };
+  const renderContainer = (0, import_react.useCallback)(({ children, ref, id }) => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "filter-dropdown-container-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "filter-dropdown-container-title-wrap" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "filter-dropdown-container-title" }, titleMap[id]), /* @__PURE__ */ import_react.default.createElement(import_icon.HelpCircle, { className: "filter-dropdown-container-icon-help" })), /* @__PURE__ */ import_react.default.createElement("div", { ref, className: "filter-dropdown-container-filter-wrap" }, children));
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "filter-dropdown-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "filter-dropdown-wrap-content" }, /* @__PURE__ */ import_react.default.createElement(
+    import_MultipleContainersSortList.default,
+    {
+      list,
+      rowKey: "name",
+      renderContainer,
+      onChange: handleSortChange
+    },
+    ({
+      item,
+      index,
+      style,
+      props: props2,
+      attributes,
+      setActivatorNodeRef,
+      listeners
+    }) => {
+      return /* @__PURE__ */ import_react.default.createElement(
+        DragItem,
+        {
+          ...props2,
+          index,
+          attributes,
+          setActivatorNodeRef,
+          listeners,
+          style
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_FilterItem.default,
+          {
+            name: item.name,
+            label: item.label,
+            type: item.type,
+            other: item.other
+          }
+        )
+      );
+    }
+  )));
+};
+var Dropdown_default = Dropdown;

package/lib/components/table/Actions/Filter/Dropdown/index.less

@@ -0,0 +1,74 @@
+.filter-dropdown-wrap {
+  width: 400px;
+  padding: 4px;
+  max-height: 400px;
+  display: flex;
+  flex-direction: column;
+  .filter-dropdown-wrap-content {
+    flex: 1;
+    overflow: auto;
+  }
+  .filter-dropdown-wrap-footer {
+
+  }
+  .filter-dropdown-drag-item {
+    display: flex;
+    padding: 8px 12px 12px;
+    align-items: center;
+    border-radius: 8px;
+    background: var(--gray-50, #F9FAFB);
+    margin-bottom: 12px;
+    .dots-six-icon {
+      font-size: 24px;
+      color: #98A2B3;
+      cursor: pointer;
+    }
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+    .filter-dropdown-drag-item-right {
+      margin-left: 16px;
+      flex: 1;
+      .filter-dropdown-drag-item-title {
+        color: var(--text-text-2, #777);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px;
+      }
+    }
+  }
+}
+.filter-dropdown-container-wrap {
+  border-bottom: 1px solid var(--surface-surface-4, #e2e2e2);
+  min-height: 70px;
+  margin-bottom: 20px;
+  &:last-child {
+    border: none;
+  }
+  .filter-dropdown-container-title-wrap {
+    color: var(--text-text-3, #919191);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    .filter-dropdown-container-title {
+      margin-right: 6px;
+      color: var(--gray-900, #101828);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+    }
+    .filter-dropdown-container-icon-help {
+      font-size: 20px;
+      color: var(--gray-400,#98A2B3)
+    }
+  }
+  .filter-dropdown-container-filter-wrap {
+    min-height: 80px;
+  }
+}

package/lib/components/table/Actions/Filter/FilterItem/index.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import { FilterItemProps as ItemProps } from "../index";
 import "./index.less";
-declare type FilterItemProps = {
-    value?: any;
-    onChange?: (val: any) => void;
-    item: ItemProps;
-};
+export interface FilterItemProps {
+    type: "single" | "input" | "datePicker" | "rangePicker";
+    label: string;
+    props?: object;
+    name: string;
+    other: Record<string, any>;
+}
 declare const FilterItem: React.FC<FilterItemProps>;
 export default FilterItem;

package/lib/components/table/Actions/Filter/FilterItem/index.js

@@ -34,8 +34,14 @@ __export(FilterItem_exports, {
 module.exports = __toCommonJS(FilterItem_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_fields = require("../../../Table/fields");
 var import_index = require("./index.less");
-var FilterItem = ({ value, onChange, item }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { trigger: ["click"], menu: { items: [] } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, null, item.title));
+var FilterItem = (props) => {
+  const { label, type, name } = props;
+  const Com = (0, import_react.useMemo)(() => {
+    var _a;
+    return (_a = import_fields.fieldMaps[type]) == null ? void 0 : _a.edit;
+  }, [type]);
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { label, name }, /* @__PURE__ */ import_react.default.createElement(Com, null));
 };
 var FilterItem_default = FilterItem;

package/lib/components/table/Actions/Filter/QuickFilter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const QuickFilter: () => JSX.Element;
+export default QuickFilter;

package/lib/components/table/Actions/Filter/QuickFilter/index.js

@@ -0,0 +1,56 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Actions/Filter/QuickFilter/index.tsx
+var QuickFilter_exports = {};
+__export(QuickFilter_exports, {
+  default: () => QuickFilter_default
+});
+module.exports = __toCommonJS(QuickFilter_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_hooks = require("../../../../../hooks");
+var import_model = require("../../../model");
+var import_FilterItem = __toESM(require("../FilterItem"));
+var QuickFilter = () => {
+  const { state, dispatch } = (0, import_hooks.useSharedState)(import_model.Context);
+  const { quickFilter } = state;
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { wrap: true }, (quickFilter || []).map((item) => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_FilterItem.default,
+      {
+        key: item.name,
+        name: item.name,
+        type: item.type,
+        other: item.other,
+        props: item.props
+      }
+    );
+  }));
+};
+var QuickFilter_default = QuickFilter;

package/lib/components/table/Actions/Filter/index.d.ts

@@ -1,12 +1,7 @@
 import React from "react";
-export declare type FilterItemProps = {
-    type: "single" | "input";
-    name: string;
-    props: object;
-    title: string;
-};
-declare type FilterListProps = {
-    list: FilterItemProps[];
+import { DropdownProps } from "./Dropdown";
+export declare type FilterListProps = {
+    list: DropdownProps["list"];
 };
 declare const Filter: React.FC<FilterListProps>;
 export default Filter;

package/lib/components/table/Actions/Filter/index.js

@@ -34,10 +34,21 @@ __export(Filter_exports, {
 module.exports = __toCommonJS(Filter_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
-var import_FilterItem = __toESM(require("./FilterItem"));
-var Filter = ({ list }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Button.Group, null, (list || []).map((d) => {
-    return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { noStyle: true, name: d.name }, /* @__PURE__ */ import_react.default.createElement(import_FilterItem.default, { item: d }));
-  }));
+var import_Dropdown = __toESM(require("./Dropdown"));
+var import_icon = require("@pisell/icon");
+var Filter = ({ list = [] }) => {
+  const ref = (0, import_react.useRef)(null);
+  const content = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement(import_Dropdown.default, { list });
+  }, [list]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Popover,
+    {
+      content,
+      arrow: false,
+      getPopupContainer: () => ref.current
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_icon.FilterLines, null) }, "Filter")
+  ));
 };
 var Filter_default = Filter;

package/lib/components/table/Actions/Sort/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export declare type SortItemProps = {
+    type: "single" | "input";
+    name: string;
+    props: object;
+    title: string;
+};
+declare type SortListProps = {
+    list: SortItemProps[];
+};
+declare const Sort: React.FC<SortListProps>;
+export default Sort;

package/lib/components/table/{Table/fields/text/Preview → Actions/Sort}/index.js

@@ -26,24 +26,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/table/Table/fields/text/Preview/index.tsx
-var Preview_exports = {};
-__export(Preview_exports, {
-  default: () => Preview_default
+// src/components/table/Actions/Sort/index.tsx
+var Sort_exports = {};
+__export(Sort_exports, {
+  default: () => Sort_default
 });
-module.exports = __toCommonJS(Preview_exports);
+module.exports = __toCommonJS(Sort_exports);
 var import_react = __toESM(require("react"));
-var Text = (props) => {
-  const {
-    title,
-    editable,
-    children,
-    dataIndex,
-    field_type,
-    record,
-    handleSave,
-    ...restProps
-  } = props;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, record[dataIndex]);
+var import_antd = require("antd");
+var import_icon = require("@pisell/icon");
+var Sort = ({ list = [] }) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_icon.SwitchVertical01, null) }, "Sort");
 };
-var Preview_default = Text;
+var Sort_default = Sort;

package/lib/components/table/Actions/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import "./index.less";
-declare const Actions: ({ filter, buttons }: any) => JSX.Element;
+declare const Actions: ({ filter, sort }: any) => JSX.Element | null;
 export default Actions;

package/lib/components/table/Actions/index.js

@@ -34,9 +34,13 @@ __export(Actions_exports, {
 module.exports = __toCommonJS(Actions_exports);
 var import_react = __toESM(require("react"));
 var import_Filter = __toESM(require("./Filter"));
-var import_Buttons = __toESM(require("./Buttons"));
+var import_QuickFilter = __toESM(require("./Filter/QuickFilter"));
+var import_Sort = __toESM(require("./Sort"));
 var import_index = require("./index.less");
-var Actions = ({ filter, buttons }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-actions" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "left-wrap" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "right-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_Filter.default, { list: filter }), /* @__PURE__ */ import_react.default.createElement(import_Buttons.default, { list: buttons })));
+var Actions = ({ filter, sort }) => {
+  const showActions = (0, import_react.useMemo)(() => {
+    return (filter == null ? void 0 : filter.show) || (sort == null ? void 0 : sort.show);
+  }, [filter == null ? void 0 : filter.show, sort == null ? void 0 : sort.show]);
+  return showActions ? /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-actions" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "left-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_QuickFilter.default, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "right-wrap" }, (filter == null ? void 0 : filter.show) ? /* @__PURE__ */ import_react.default.createElement(import_Filter.default, { list: (filter == null ? void 0 : filter.list) || [] }) : null, (sort == null ? void 0 : sort.show) ? /* @__PURE__ */ import_react.default.createElement(import_Sort.default, { list: (sort == null ? void 0 : sort.list) || [] }) : null)) : null;
 };
 var Actions_default = Actions;

package/lib/components/table/Actions/index.less

@@ -2,8 +2,16 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 16px;
 
-  .left-wrap {}
+  .left-wrap {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+  }
 
   .right-wrap {
     display: flex;

package/lib/components/table/{Actions → Header}/Buttons/index.js

@@ -26,7 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/table/Actions/Buttons/index.tsx
+// src/components/table/Header/Buttons/index.tsx
 var Buttons_exports = {};
 __export(Buttons_exports, {
   default: () => Buttons_default
@@ -37,7 +37,7 @@ var import_antd = require("antd");
 var import_index = require("./index.less");
 var Buttons = ({ list }) => {
   return (list || []).map((d) => {
-    return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, null, d.title);
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { ...d }, d.title);
   });
 };
 var Buttons_default = Buttons;

package/lib/components/table/Header/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./index.less";
+declare const Header: ({ buttons, title }: any) => JSX.Element | null;
+export default Header;

package/lib/components/table/Header/index.js

@@ -0,0 +1,44 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Header/index.tsx
+var Header_exports = {};
+__export(Header_exports, {
+  default: () => Header_default
+});
+module.exports = __toCommonJS(Header_exports);
+var import_react = __toESM(require("react"));
+var import_Buttons = __toESM(require("./Buttons"));
+var import_index = require("./index.less");
+var Header = ({ buttons, title }) => {
+  const showHeader = (0, import_react.useMemo)(() => {
+    return title || (buttons == null ? void 0 : buttons.length);
+  }, [buttons, title]);
+  return showHeader ? /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "left-wrap" }, title && title()), /* @__PURE__ */ import_react.default.createElement("div", { className: "right-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_Buttons.default, { list: buttons }))) : null;
+};
+var Header_default = Header;

package/lib/components/table/Header/index.less

@@ -0,0 +1,16 @@
+.materials-grid-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+
+  .left-wrap {}
+
+  .right-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+
+  }
+}

package/lib/components/table/Pagination/index.d.ts

@@ -1,5 +1,11 @@
-/// <reference types="react" />
+import React from "react";
 import { PaginationProps } from "antd";
 import "./index.less";
-declare const Pagination: (props: PaginationProps) => JSX.Element;
+export declare const paginationConfig: {
+    className: string;
+    defaultCurrent: number;
+    showTotal: (total: number, range: [number, number]) => string;
+    itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
+};
+declare const Pagination: (props: PaginationProps) => JSX.Element | null;
 export default Pagination;

package/lib/components/table/Pagination/index.js

@@ -29,34 +29,39 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/table/Pagination/index.tsx
 var Pagination_exports = {};
 __export(Pagination_exports, {
-  default: () => Pagination_default
+  default: () => Pagination_default,
+  paginationConfig: () => paginationConfig
 });
 module.exports = __toCommonJS(Pagination_exports);
 var import_react = __toESM(require("react"));
-var import_iconfont = __toESM(require("../../iconfont"));
+var import_icon = require("@pisell/icon");
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
 var import_index = require("./index.less");
+var itemRender = (_, type, originalElement) => {
+  if (type === "prev") {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("paginator-page-btn", "left") }, /* @__PURE__ */ import_react.default.createElement(import_icon.ArrowLeft, { className: "paginator-page-btn-left-icon" }), /* @__PURE__ */ import_react.default.createElement("span", null, "Previous"));
+  }
+  if (type === "next") {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("paginator-page-btn", "right") }, /* @__PURE__ */ import_react.default.createElement("span", null, "Next"), /* @__PURE__ */ import_react.default.createElement(import_icon.ArrowRight, { className: "paginator-page-btn-right-icon" }));
+  }
+  return originalElement;
+};
+var paginationConfig = {
+  className: "materials-grid-paginator",
+  defaultCurrent: 1,
+  showTotal: (total, range) => `Page ${range[0]} of ${range[1]}`,
+  itemRender
+};
 var Pagination = (props) => {
-  const itemRender = (_, type, originalElement) => {
-    if (type === "prev") {
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("paginator-page-btn", "left") }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "icona-iconArrowsLine", className: "icon" }), "Pre");
-    }
-    if (type === "next") {
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("paginator-page-btn", "right") }, "Next", /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "icona-iconArrowsLine", className: "icon" }));
-    }
-    return originalElement;
-  };
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Pagination,
-    {
-      className: "materials-grid-paginator",
-      defaultCurrent: 1,
-      showSizeChanger: false,
-      total: 500,
-      itemRender,
-      ...props
-    }
-  ));
+  console.log(props);
+  const show = (0, import_react.useMemo)(() => {
+    return Object.keys(props).length;
+  }, [props]);
+  return show ? /* @__PURE__ */ import_react.default.createElement(import_antd.Pagination, { ...paginationConfig, ...props }) : null;
 };
 var Pagination_default = Pagination;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  paginationConfig
+});