szld-libs 0.2.30 → 0.2.31

package/es/components/SearchTable/index.d.ts

@@ -3,12 +3,14 @@ import { ColumnType } from 'antd/es/table';
 import { CreateFormProps } from '../CreateForm';
 export interface TableColumnProps<T> extends ColumnType<T> {
     hidden?: boolean;
-    width?: number;
+    width?: number | string;
 }
 export interface MTableProps<T> extends Omit<TableProps<T>, 'columns'> {
     columns?: TableColumnProps<T>[];
     minColumnWidth?: number;
     resizeable?: boolean;
+    tableId?: string;
+    storageKey?: string;
 }
 export interface SearchTableProps<RecordType> {
     searchProps?: CreateFormProps;

package/es/components/SearchTable/index.js

@@ -4,6 +4,7 @@ import classNames from "classnames";
 import _ from "lodash";
 import { useState, useMemo } from "react";
 import { Resizable } from "react-resizable";
+import { getLocalStorage } from "../../utils";
 import CreateForm from "../CreateForm";
 const search = "search-table-module_search_17add";
 const table = "search-table-module_table_5f652";
@@ -20,7 +21,13 @@ const ResizeableTitle = (props) => {
 };
 function SearchTable(props) {
   const { tableProps = {}, searchProps } = props;
-  const { minColumnWidth = 200, resizeable = true, ...rest } = tableProps;
+  const {
+    minColumnWidth = 200,
+    resizeable = true,
+    tableId,
+    storageKey = "szld_table_cell_width",
+    ...rest
+  } = tableProps;
   const [columns, setColumns] = useState(tableProps.columns || []);
   const handleResize = (column, size) => {
     const list = _.cloneDeep(columns);
@@ -29,19 +36,42 @@ function SearchTable(props) {
       ...list[index],
       width: size.width
     };
+    if (tableId) {
+      const obj = getLocalStorage(storageKey) || {};
+      obj[tableId] = obj[tableId] || {};
+      list == null ? void 0 : list.forEach((v) => {
+        if (typeof v.dataIndex === "string") {
+          obj[tableId][v.dataIndex] = v.width;
+        }
+      });
+      localStorage.setItem(storageKey, JSON.stringify(obj));
+    }
     setColumns(list);
   };
+  const getWidth = (v) => {
+    var _a, _b;
+    let width = v.width || minColumnWidth;
+    if (typeof v.dataIndex === "string" && tableId) {
+      const _width = (_b = (_a = getLocalStorage(storageKey)) == null ? void 0 : _a[tableId]) == null ? void 0 : _b[v.dataIndex];
+      if (_width) {
+        width = _width;
+      }
+    }
+    return width;
+  };
   const realColumns = useMemo(() => {
     const result = columns.filter((v) => !v.hidden).map((v) => ({
       ...v,
-      width: v.width || minColumnWidth,
-      onHeaderCell: (column, index) => ({
+      width: getWidth(v),
+      onHeaderCell: (column) => ({
         width: column.width,
         resizeable,
         onResize: (_e, { size }) => handleResize(column, size)
       })
     }));
-    result[result.length - 1].width = void 0;
+    if (result.length > 0) {
+      result[result.length - 1].width = void 0;
+    }
     return result;
   }, [resizeable, columns, minColumnWidth]);
   const components = {

package/es/index.js

@@ -38,7 +38,7 @@ const Demo = () => {
       title: "c"
     }
   ];
-  return /* @__PURE__ */ jsx("div", { style: { height: "100vh" }, children: /* @__PURE__ */ jsx(SearchTable, { tableProps: { columns, dataSource: [], resizeable: false } }) });
+  return /* @__PURE__ */ jsx("div", { style: { height: "100vh" }, children: /* @__PURE__ */ jsx(SearchTable, { tableProps: { columns, dataSource: [], resizeable: true, tableId: "demo1" } }) });
 };
 ReactDOM.createRoot(document.getElementById("root")).render(
   /* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsx(Demo, {}) })

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

@@ -3,12 +3,14 @@ import { ColumnType } from 'antd/es/table';
 import { CreateFormProps } from '../CreateForm';
 export interface TableColumnProps<T> extends ColumnType<T> {
     hidden?: boolean;
-    width?: number;
+    width?: number | string;
 }
 export interface MTableProps<T> extends Omit<TableProps<T>, 'columns'> {
     columns?: TableColumnProps<T>[];
     minColumnWidth?: number;
     resizeable?: boolean;
+    tableId?: string;
+    storageKey?: string;
 }
 export interface SearchTableProps<RecordType> {
     searchProps?: CreateFormProps;

package/lib/components/SearchTable/index.js

@@ -5,6 +5,7 @@ const classNames = require("classnames");
 const _ = require("lodash");
 const react = require("react");
 const reactResizable = require("react-resizable");
+const utils = require("../../utils");
 const CreateForm = require("../CreateForm");
 const search = "search-table-module_search_17add";
 const table = "search-table-module_table_5f652";
@@ -21,7 +22,13 @@ const ResizeableTitle = (props) => {
 };
 function SearchTable(props) {
   const { tableProps = {}, searchProps } = props;
-  const { minColumnWidth = 200, resizeable = true, ...rest } = tableProps;
+  const {
+    minColumnWidth = 200,
+    resizeable = true,
+    tableId,
+    storageKey = "szld_table_cell_width",
+    ...rest
+  } = tableProps;
   const [columns, setColumns] = react.useState(tableProps.columns || []);
   const handleResize = (column, size) => {
     const list = _.cloneDeep(columns);
@@ -30,19 +37,42 @@ function SearchTable(props) {
       ...list[index],
       width: size.width
     };
+    if (tableId) {
+      const obj = utils.getLocalStorage(storageKey) || {};
+      obj[tableId] = obj[tableId] || {};
+      list == null ? void 0 : list.forEach((v) => {
+        if (typeof v.dataIndex === "string") {
+          obj[tableId][v.dataIndex] = v.width;
+        }
+      });
+      localStorage.setItem(storageKey, JSON.stringify(obj));
+    }
     setColumns(list);
   };
+  const getWidth = (v) => {
+    var _a, _b;
+    let width = v.width || minColumnWidth;
+    if (typeof v.dataIndex === "string" && tableId) {
+      const _width = (_b = (_a = utils.getLocalStorage(storageKey)) == null ? void 0 : _a[tableId]) == null ? void 0 : _b[v.dataIndex];
+      if (_width) {
+        width = _width;
+      }
+    }
+    return width;
+  };
   const realColumns = react.useMemo(() => {
     const result = columns.filter((v) => !v.hidden).map((v) => ({
       ...v,
-      width: v.width || minColumnWidth,
-      onHeaderCell: (column, index) => ({
+      width: getWidth(v),
+      onHeaderCell: (column) => ({
         width: column.width,
         resizeable,
         onResize: (_e, { size }) => handleResize(column, size)
       })
     }));
-    result[result.length - 1].width = void 0;
+    if (result.length > 0) {
+      result[result.length - 1].width = void 0;
+    }
     return result;
   }, [resizeable, columns, minColumnWidth]);
   const components = {

package/lib/index.js

@@ -39,7 +39,7 @@ const Demo = () => {
       title: "c"
     }
   ];
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100vh" }, children: /* @__PURE__ */ jsxRuntime.jsx(main.SearchTable, { tableProps: { columns, dataSource: [], resizeable: false } }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100vh" }, children: /* @__PURE__ */ jsxRuntime.jsx(main.SearchTable, { tableProps: { columns, dataSource: [], resizeable: true, tableId: "demo1" } }) });
 };
 ReactDOM.createRoot(document.getElementById("root")).render(
   /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.BrowserRouter, { children: /* @__PURE__ */ jsxRuntime.jsx(Demo, {}) })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "szld-libs",
   "private": false,
-  "version": "0.2.30",
+  "version": "0.2.31",
   "type": "module",
   "scripts": {
     "dev": "vite",