@pisell/materials 1.0.11 → 1.0.13

package/es/components/table/Table/index.js

@@ -11,20 +11,21 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-import { useSharedState } from "../../../hooks";
-import { Table } from "antd";
+import { useSharedState, useResponsive } from "../../../hooks";
 // import { Access } from '@umijs/max';
 import React, { useCallback, useMemo } from "react";
 import { useMemoizedFn } from "ahooks";
 import { Context } from "../model";
 // import AddFieldModal from "./AddFieldModal";
 import "./index.less";
+import BasicTable from "../BasicTable";
 import SortRow from "./tableConfig/SortRow";
 import Body from "./tableConfig/body";
 import Header from "./tableConfig/header";
-import { paginationConfig } from "../Pagination";
+import { paginationConfig } from "../../Pagination";
 var GridViewTable = function GridViewTable(_ref) {
   var tableProps = _ref.tableProps;
+  var responsive = useResponsive();
   var _useSharedState = useSharedState(Context),
     state = _useSharedState.state,
     dispatch = _useSharedState.dispatch;
@@ -91,9 +92,17 @@ var GridViewTable = function GridViewTable(_ref) {
     var _current = start / tableProps.pagination.pageSize + 1;
     return "Page ".concat(_current, " of ").concat(Math.ceil(total / tableProps.pagination.pageSize));
   }, [tableProps.pagination.pageSize]);
+  var _paginationConfig = useMemo(function () {
+    if (tableProps.pagination === false) {
+      return false;
+    }
+    return _objectSpread(_objectSpread(_objectSpread({}, paginationConfig), tableProps.pagination), {}, {
+      showTotal: showTotal
+    });
+  }, [responsive, tableProps.pagination]);
   return /*#__PURE__*/React.createElement("div", {
     className: "materials-grid-table-wrap"
-  }, /*#__PURE__*/React.createElement(SortRow, null, /*#__PURE__*/React.createElement(Table, _extends({
+  }, /*#__PURE__*/React.createElement(SortRow, null, /*#__PURE__*/React.createElement(BasicTable, _extends({
     dataSource: dataSource,
     columns: columns,
     className: "grid-view-table",
@@ -111,9 +120,7 @@ var GridViewTable = function GridViewTable(_ref) {
     scroll: {
       x: "max-content"
     },
-    pagination: tableProps.pagination === false ? false : _objectSpread(_objectSpread(_objectSpread({}, paginationConfig), tableProps.pagination), {}, {
-      showTotal: showTotal
-    })
+    pagination: _paginationConfig
   }))));
 };
 export default GridViewTable;

package/es/components/table/index.js

@@ -45,14 +45,15 @@ var GridView = Provider(function (props) {
     });
   }, [dataSource]);
   useEffect(function () {
+    var _filter$list, _filter$list$slice, _filter$list2, _filter$list2$slice;
     modal.dispatch({
       type: "setQuickFilter",
-      payload: filter.list
+      payload: (filter === null || filter === void 0 ? void 0 : (_filter$list = filter.list) === null || _filter$list === void 0 ? void 0 : (_filter$list$slice = _filter$list.slice) === null || _filter$list$slice === void 0 ? void 0 : _filter$list$slice.call(_filter$list, 0, 3)) || []
+    });
+    modal.dispatch({
+      type: "setOtherFilter",
+      payload: (filter === null || filter === void 0 ? void 0 : (_filter$list2 = filter.list) === null || _filter$list2 === void 0 ? void 0 : (_filter$list2$slice = _filter$list2.slice) === null || _filter$list2$slice === void 0 ? void 0 : _filter$list2$slice.call(_filter$list2, 3)) || []
     });
-    // modal.dispatch({
-    //   type: "setOtherFilter",
-    //   payload: filter,
-    // });
   }, [filter]);
   return /*#__PURE__*/React.createElement(Form, {
     form: form,

package/es/hooks/index.d.ts

@@ -1,2 +1,3 @@
 import useSharedState from './useSharedState';
-export { useSharedState };
+import useResponsive from './useResponsive';
+export { useSharedState, useResponsive };

package/es/hooks/index.js

@@ -1,2 +1,3 @@
 import useSharedState from "./useSharedState";
-export { useSharedState };
+import useResponsive from "./useResponsive";
+export { useSharedState, useResponsive };

package/es/hooks/useResponsive.d.ts

@@ -0,0 +1,4 @@
+declare type ResponsiveConfig = Record<string, number>;
+export declare function configResponsive(config: ResponsiveConfig): void;
+export default function useResponsive(): "pc" | "ipad" | "phone";
+export {};

package/es/hooks/useResponsive.js

@@ -0,0 +1,95 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { useEffect, useState, useMemo } from 'react';
+import { isBrowser } from "../utils";
+var subscribers = new Set();
+var info;
+var responsiveConfig = {
+  phone: 0,
+  ipad: 700,
+  pc: 1080
+};
+function handleResize() {
+  var oldInfo = info;
+  calculate();
+  if (oldInfo === info) return;
+  var _iterator = _createForOfIteratorHelper(subscribers),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var subscriber = _step.value;
+      subscriber();
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+}
+var listening = false;
+function calculate() {
+  var width = window.innerWidth;
+  var newInfo = {};
+  var shouldUpdate = false;
+  for (var _i = 0, _Object$keys = Object.keys(responsiveConfig); _i < _Object$keys.length; _i++) {
+    var key = _Object$keys[_i];
+    newInfo[key] = width >= responsiveConfig[key];
+    if (newInfo[key] !== info[key]) {
+      shouldUpdate = true;
+    }
+  }
+  if (shouldUpdate) {
+    info = newInfo;
+  }
+}
+export function configResponsive(config) {
+  responsiveConfig = config;
+  if (info) calculate();
+}
+export default function useResponsive() {
+  if (isBrowser && !listening) {
+    info = {};
+    calculate();
+    window.addEventListener('resize', handleResize);
+    listening = true;
+  }
+  var _useState = useState(info),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useEffect(function () {
+    if (!isBrowser) return;
+
+    // In React 18's StrictMode, useEffect perform twice, resize listener is remove, so handleResize is never perform.
+    // https://github.com/alibaba/hooks/issues/1910
+    if (!listening) {
+      window.addEventListener('resize', handleResize);
+    }
+    var subscriber = function subscriber() {
+      setState(info);
+    };
+    subscribers.add(subscriber);
+    return function () {
+      subscribers.delete(subscriber);
+      if (subscribers.size === 0) {
+        window.removeEventListener('resize', handleResize);
+        listening = false;
+      }
+    };
+  }, []);
+  var current = useMemo(function () {
+    if (state !== null && state !== void 0 && state.pc) {
+      return 'pc';
+    }
+    if (state !== null && state !== void 0 && state.ipad) {
+      return 'ipad';
+    }
+    return 'phone';
+  }, [state]);
+  return current;
+}

package/es/index.d.ts

@@ -61,3 +61,4 @@ export { default as Select } from './components/select';
 export { default as Cascader } from './components/cascader';
 export { default as AutoComplete } from './components/auto-complete';
 export { default as Div } from './components/div';
+export { default as Page } from './components/page';

package/es/index.js

@@ -85,4 +85,5 @@ export { default as Input } from "./components/input";
 export { default as Select } from "./components/select";
 export { default as Cascader } from "./components/cascader";
 export { default as AutoComplete } from "./components/auto-complete";
-export { default as Div } from "./components/div";
+export { default as Div } from "./components/div";
+export { default as Page } from "./components/page";

package/es/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const isBrowser: boolean;

package/es/utils/index.js

@@ -0,0 +1 @@
+export var isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement);

package/lib/components/MultipleContainersSortList/index.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
 import { SortableItemProps } from "../DragSortList";
+import "./index.less";
 declare type IdType = string | number;
 export interface MultipleContainersSortListProps<T> {
     list: Record<string, T[]>;
     vertical?: boolean;
     wrapStyle?: React.CSSProperties;
     onChange: (val: Record<string, T[]>) => void;
-    renderContainer?: DefaultRenderContainerProps['renderContainer'];
+    renderContainer?: DefaultRenderContainerProps["renderContainer"];
     rowKey: IdType | ((val: T) => IdType);
     children: SortableItemProps<T>["children"];
 }

package/lib/components/MultipleContainersSortList/index.js

@@ -38,7 +38,9 @@ var import_sortable = require("@dnd-kit/sortable");
 var import_utils = require("@pisell/utils");
 var import_react = __toESM(require("react"));
 var import_DragSortList = require("../DragSortList");
+var import_index = require("./index.less");
 var TRASH_ID = "void";
+var maxLength = 3;
 var DefaultRenderContainer = (props) => {
   const { id, children, renderContainer } = props;
   const { setNodeRef } = (0, import_sortable.useSortable)({
@@ -106,7 +108,7 @@ var MultipleContainersSortList = (props) => {
         const modifier = isBelowOverItem ? 1 : 0;
         newIndex = overIndex >= 0 ? overIndex + modifier : overItems.length + 1;
       }
-      const newList = {
+      let newList = {
         ...list,
         [activeContainer]: list[activeContainer].filter(
           (item) => getRowKey(item) !== active.id
@@ -117,6 +119,16 @@ var MultipleContainersSortList = (props) => {
           ...list[overContainer].slice(newIndex, list[overContainer].length)
         ]
       };
+      if (overContainer === "quickFilter" && newList[overContainer].length > maxLength) {
+        newList = {
+          ...newList,
+          [overContainer]: newList[overContainer].slice(0, maxLength),
+          [activeContainer]: [
+            ...newList[overContainer].slice(maxLength),
+            ...newList[activeContainer]
+          ]
+        };
+      }
       onChange == null ? void 0 : onChange(newList);
     }
   };
@@ -160,7 +172,7 @@ var MultipleContainersSortList = (props) => {
         items: list[container].map((item) => getRowKey(item)),
         strategy: import_sortable.verticalListSortingStrategy
       },
-      list[container].map((item, index) => /* @__PURE__ */ import_react.default.createElement(
+      list[container].length ? list[container].map((item, index) => /* @__PURE__ */ import_react.default.createElement(
         import_DragSortList.SortableItem,
         {
           key: getRowKey(item),
@@ -169,7 +181,7 @@ var MultipleContainersSortList = (props) => {
           index
         },
         children
-      ))
+      )) : /* @__PURE__ */ import_react.default.createElement("span", { className: "materials-sort-list-empty" }, "No filter options available.")
     )
   ))));
 };

package/lib/components/MultipleContainersSortList/index.less

@@ -0,0 +1,6 @@
+.materials-sort-list-empty {
+  display: block;
+  color: #5a5a5a;
+  text-align: center;
+  padding-top: 22px;
+}

package/lib/components/{table/Pagination → Pagination}/index.d.ts

@@ -5,7 +5,9 @@ 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;
+    itemRender: (page: number, type: "page" | "prev" | "next" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
+    responsive: boolean;
+    size: string;
 };
 declare const Pagination: (props: PaginationProps) => JSX.Element | null;
 export default Pagination;

package/lib/components/{table/Pagination → Pagination}/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/Pagination/index.tsx
+// src/components/Pagination/index.tsx
 var Pagination_exports = {};
 __export(Pagination_exports, {
   default: () => Pagination_default,
@@ -37,6 +37,7 @@ var import_react = __toESM(require("react"));
 var import_icon = require("@pisell/icon");
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
+var import_hooks = require("../../hooks");
 var import_index = require("./index.less");
 var itemRender = (_, type, originalElement) => {
   if (type === "prev") {
@@ -51,16 +52,72 @@ var paginationConfig = {
   className: "materials-grid-paginator",
   defaultCurrent: 1,
   showTotal: (total, range) => `Page ${range[0]} of ${range[1]}`,
-  itemRender
+  itemRender,
+  responsive: true,
+  size: "small"
 };
 var Pagination = (props) => {
-  console.log(props);
+  const responsive = (0, import_hooks.useResponsive)();
   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;
+  const content = (0, import_react.useMemo)(() => {
+    if (!show) {
+      return null;
+    }
+    let Com = import_antd.Pagination;
+    if (responsive === "phone") {
+      Com = MiniPagination;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(Com, { ...paginationConfig, ...props });
+  }, [show, paginationConfig, props, responsive]);
+  return content;
 };
 var Pagination_default = Pagination;
+var MiniPagination = (props) => {
+  const { current = 1, pageSize = 10, total = 0 } = props;
+  const MAX = (0, import_react.useMemo)(() => {
+    return Math.ceil(total / pageSize);
+  }, [total, pageSize]);
+  const MIN = (0, import_react.useMemo)(() => {
+    return 1;
+  }, []);
+  const onChange = (type) => {
+    let currentPage = current;
+    if (type === "prev") {
+      currentPage = current - 1;
+    }
+    if (type === "next") {
+      currentPage = current + 1;
+    }
+    props.onChange && props.onChange(currentPage, pageSize || 10);
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-paginator materials-grid-paginator-mini" }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-lowcode-pagination-prev",
+      onClick: () => {
+        if (current <= MIN) {
+          return;
+        }
+        onChange("prev");
+      }
+    },
+    /* @__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("div", { className: "materials-grid-paginator-center" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "materials-grid-paginator-center-text" }, "Page"), /* @__PURE__ */ import_react.default.createElement("span", { className: "materials-grid-paginator-center-value" }, current), /* @__PURE__ */ import_react.default.createElement("span", { className: "materials-grid-paginator-center-text" }, "of"), /* @__PURE__ */ import_react.default.createElement("span", { className: "materials-grid-paginator-center-value" }, MAX)), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-lowcode-pagination-next",
+      onClick: () => {
+        if (current >= MAX) {
+          return;
+        }
+        onChange("next");
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("paginator-page-btn", "right") }, /* @__PURE__ */ import_react.default.createElement(import_icon.ArrowRight, { className: "paginator-page-btn-right-icon" }))
+  ));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   paginationConfig

package/{es/components/table → lib/components}/Pagination/index.less

@@ -12,7 +12,7 @@
   padding: 0 20px;
   margin: 0 !important;
 
-  .ant-pagination-total-text {
+  .pisell-lowcode-pagination-total-text {
     margin-right: auto;
     color: var(--gray-500, #667085);
     /* Text sm/Medium */
@@ -23,7 +23,7 @@
     /* 142.857% */
   }
 
-  .ant-pagination-item {
+  .pisell-lowcode-pagination-item {
     position: relative;
     border: none;
     margin: 0;
@@ -32,37 +32,37 @@
     border-right: 0;
   }
 
-  .ant-pagination-jump-prev {
+  .pisell-lowcode-pagination-jump-prev {
     border: 1px solid #D0D5DD;
     margin: 0;
     border-radius: 0;
     border-right: none;
   }
 
-  .ant-pagination-jump-next {
+  .pisell-lowcode-pagination-jump-next {
     border: 1px solid #D0D5DD;
     margin: 0;
     border-radius: 0;
     border-right: none;
   }
 
-  .ant-pagination-item-link:hover {
+  .pisell-lowcode-pagination-item-link:hover {
     font-weight: 450 !important;
     color: rgba(0, 0, 0, 0.88) !important;
 
-    .ant-pagination-item-link-icon {
+    .pisell-lowcode-pagination-item-link-icon {
       font-weight: 450 !important;
       color: rgba(0, 0, 0, 0.88) !important;
     }
   }
 
-  .ant-pagination-disabled {}
+  .pisell-lowcode-pagination-disabled {}
 
-  .ant-pagination-item-active:hover {
+  .pisell-lowcode-pagination-item-active:hover {
     border-color: #D0D5DD !important;
   }
 
-  .ant-pagination-item-active {
+  .pisell-lowcode-pagination-item-active {
     a {
       font-weight: 450 !important;
       color: rgba(0, 0, 0, 0.88) !important;
@@ -72,7 +72,7 @@
     background-color: rgba(0, 0, 0, 0.06);
   }
 
-  .ant-pagination-prev {
+  .pisell-lowcode-pagination-prev {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -84,7 +84,7 @@
   }
 
 
-  .ant-pagination-next {
+  .pisell-lowcode-pagination-next {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -148,4 +148,62 @@
       transform: rotate(180deg);
     }
   }
+}
+
+.materials-grid-paginator-mini {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  overflow: hidden;
+  height: 50px;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 0 0 8px 8px;
+  border: 1px solid #f0f0f0;
+  border-top: none;
+  padding: 0 20px;
+  margin: 0 !important;
+
+  .paginator-page-btn {
+    padding: 8px;
+
+  }
+
+  .materials-grid-paginator-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+
+    .materials-grid-paginator-center-text {
+      color: var(--gray-700, #344054);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+    }
+
+    .materials-grid-paginator-center-value {
+      color: var(--gray-700, #344054);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+    }
+  }
+
+  .pisell-lowcode-pagination-prev,
+  .pisell-lowcode-pagination-next {
+    margin: 0;
+    border-radius: 8px;
+    border: 1px solid #D0D5DD;
+
+    .paginator-page-btn-left-icon {
+      margin-right: 0;
+    }
+
+    .paginator-page-btn-right-icon {
+      margin-left: 0;
+    }
+
+  }
+
 }

package/lib/components/config-provider/index.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
-import 'dayjs/locale/zh-cn';
-declare const ConfigProvider: (props: any) => JSX.Element;
+import { ConfigProviderProps as OriginalConfigProviderProps } from "antd/es/config-provider";
+import "dayjs/locale/zh-cn";
+export interface ConfigProviderProps extends OriginalConfigProviderProps {
+    [key: string]: any;
+}
+declare const ConfigProvider: (props: ConfigProviderProps) => JSX.Element;
 export default ConfigProvider;

package/lib/components/page/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ConfigProviderProps } from "../config-provider";
+interface PageProps extends ConfigProviderProps {
+}
+declare const Page: (props: PageProps) => JSX.Element;
+export default Page;