szld-libs 0.2.30 → 0.2.32

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

@@ -2,8 +2,9 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Table } from "antd";
 import classNames from "classnames";
 import _ from "lodash";
-import { useState, useMemo } from "react";
+import { useRef, useState, useEffect, useCallback, 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,30 +21,81 @@ const ResizeableTitle = (props) => {
 };
 function SearchTable(props) {
   const { tableProps = {}, searchProps } = props;
-  const { minColumnWidth = 200, resizeable = true, ...rest } = tableProps;
-  const [columns, setColumns] = useState(tableProps.columns || []);
-  const handleResize = (column, size) => {
-    const list = _.cloneDeep(columns);
-    const index = list.findIndex((v) => v.dataIndex === column.dataIndex);
-    list[index] = {
-      ...list[index],
-      width: size.width
-    };
-    setColumns(list);
+  const {
+    minColumnWidth = 200,
+    resizeable = true,
+    tableId,
+    storageKey = "szld_table_cell_width",
+    ...rest
+  } = tableProps;
+  const ref = useRef(null);
+  const [columns, setColumns] = useState([]);
+  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;
   };
+  useEffect(() => {
+    const list = tableProps.columns || [];
+    if (list.length === 0) {
+      return;
+    }
+    const result = list.map((v) => ({
+      ...v,
+      width: getWidth(v)
+    }));
+    setColumns(result);
+    ref.current = Date.now();
+  }, [tableProps.columns, tableId, minColumnWidth]);
+  const handleResize = useCallback(
+    (column, size) => {
+      const list = _.cloneDeep(columns);
+      if (!list || list.length === 0) {
+        return;
+      }
+      const index = list == null ? void 0 : list.findIndex((v) => v.dataIndex === column.dataIndex);
+      list[index] = {
+        ...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);
+    },
+    [columns, tableId, storageKey]
+  );
   const realColumns = useMemo(() => {
-    const result = columns.filter((v) => !v.hidden).map((v) => ({
+    if (!ref.current || columns === void 0) {
+      return [];
+    }
+    const result = columns == null ? void 0 : columns.filter((v) => !v.hidden).map((v) => ({
       ...v,
-      width: v.width || minColumnWidth,
-      onHeaderCell: (column, index) => ({
+      width: v.width,
+      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]);
+  }, [resizeable, columns, ref.current, minColumnWidth]);
   const components = {
     header: {
       cell: ResizeableTitle

package/es/index.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
+import { Button } from "antd";
 import useConfig from "./hooks/useConfig";
 import { AES, SearchTable } from "./main";
 let key = "U2FsdGVkX1/dG1NSXNR9hnp3Ech/v6Gh8CDDJxgBm1EPFQel12ySIf84ARXCPwTae7TzwgPvjOyE3S5rAEzl/wAZmId6pbezpFeFcJqxdmIl3FeluYHFxJzQHDETTvrr3G/REvv00kHptOVwg6ecjPH6yk7PNit0sWTBLorROxLxMD8lVDmOA66p7Zp4QnYzqScYJGFbutmfHYXfBRBe1Q2UKummJ798svNY5SIwEwl4spzgyWmhARtuyq4zhysFrj/xODuNDjtwitA6XfX566WcZkj3F+2P+mkYzDYOhXXaomnlybjrZ2hEHfcczQhUfJd89O8PNIuEWo24wjYRgMdKlw5CWSeocFCqV7ZJ/CV/7vNRcaO4awKlFNobLikkwDznxpcX+4UEej+ED+pgfmPQLsKedcfEscStkSAZXaD5pBRTiFU9xGLfDt6seUrEnMBeXkpMIY9j1SZDDK18/G7lSHjDQMZYZP6sfLdBdwY=";
@@ -38,7 +39,11 @@ const Demo = () => {
       title: "c"
     }
   ];
-  return /* @__PURE__ */ jsx("div", { style: { height: "100vh" }, children: /* @__PURE__ */ jsx(SearchTable, { tableProps: { columns, dataSource: [], resizeable: false } }) });
+  const [list, setList] = useState([]);
+  return /* @__PURE__ */ jsxs("div", { style: { height: "100vh" }, children: [
+    /* @__PURE__ */ jsx(Button, { onClick: () => setList(columns), children: "test" }),
+    /* @__PURE__ */ jsx(SearchTable, { tableProps: { columns: list, 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,30 +22,81 @@ const ResizeableTitle = (props) => {
 };
 function SearchTable(props) {
   const { tableProps = {}, searchProps } = props;
-  const { minColumnWidth = 200, resizeable = true, ...rest } = tableProps;
-  const [columns, setColumns] = react.useState(tableProps.columns || []);
-  const handleResize = (column, size) => {
-    const list = _.cloneDeep(columns);
-    const index = list.findIndex((v) => v.dataIndex === column.dataIndex);
-    list[index] = {
-      ...list[index],
-      width: size.width
-    };
-    setColumns(list);
+  const {
+    minColumnWidth = 200,
+    resizeable = true,
+    tableId,
+    storageKey = "szld_table_cell_width",
+    ...rest
+  } = tableProps;
+  const ref = react.useRef(null);
+  const [columns, setColumns] = react.useState([]);
+  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;
   };
+  react.useEffect(() => {
+    const list = tableProps.columns || [];
+    if (list.length === 0) {
+      return;
+    }
+    const result = list.map((v) => ({
+      ...v,
+      width: getWidth(v)
+    }));
+    setColumns(result);
+    ref.current = Date.now();
+  }, [tableProps.columns, tableId, minColumnWidth]);
+  const handleResize = react.useCallback(
+    (column, size) => {
+      const list = _.cloneDeep(columns);
+      if (!list || list.length === 0) {
+        return;
+      }
+      const index = list == null ? void 0 : list.findIndex((v) => v.dataIndex === column.dataIndex);
+      list[index] = {
+        ...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);
+    },
+    [columns, tableId, storageKey]
+  );
   const realColumns = react.useMemo(() => {
-    const result = columns.filter((v) => !v.hidden).map((v) => ({
+    if (!ref.current || columns === void 0) {
+      return [];
+    }
+    const result = columns == null ? void 0 : columns.filter((v) => !v.hidden).map((v) => ({
       ...v,
-      width: v.width || minColumnWidth,
-      onHeaderCell: (column, index) => ({
+      width: v.width,
+      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]);
+  }, [resizeable, columns, ref.current, minColumnWidth]);
   const components = {
     header: {
       cell: ResizeableTitle

package/lib/index.js

@@ -3,6 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const ReactDOM = require("react-dom/client");
 const reactRouterDom = require("react-router-dom");
+const antd = require("antd");
 const useConfig = require("./hooks/useConfig");
 const main = require("./main");
 let key = "U2FsdGVkX1/dG1NSXNR9hnp3Ech/v6Gh8CDDJxgBm1EPFQel12ySIf84ARXCPwTae7TzwgPvjOyE3S5rAEzl/wAZmId6pbezpFeFcJqxdmIl3FeluYHFxJzQHDETTvrr3G/REvv00kHptOVwg6ecjPH6yk7PNit0sWTBLorROxLxMD8lVDmOA66p7Zp4QnYzqScYJGFbutmfHYXfBRBe1Q2UKummJ798svNY5SIwEwl4spzgyWmhARtuyq4zhysFrj/xODuNDjtwitA6XfX566WcZkj3F+2P+mkYzDYOhXXaomnlybjrZ2hEHfcczQhUfJd89O8PNIuEWo24wjYRgMdKlw5CWSeocFCqV7ZJ/CV/7vNRcaO4awKlFNobLikkwDznxpcX+4UEej+ED+pgfmPQLsKedcfEscStkSAZXaD5pBRTiFU9xGLfDt6seUrEnMBeXkpMIY9j1SZDDK18/G7lSHjDQMZYZP6sfLdBdwY=";
@@ -39,7 +40,11 @@ const Demo = () => {
       title: "c"
     }
   ];
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100vh" }, children: /* @__PURE__ */ jsxRuntime.jsx(main.SearchTable, { tableProps: { columns, dataSource: [], resizeable: false } }) });
+  const [list, setList] = react.useState([]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: "100vh" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { onClick: () => setList(columns), children: "test" }),
+    /* @__PURE__ */ jsxRuntime.jsx(main.SearchTable, { tableProps: { columns: list, 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.32",
   "type": "module",
   "scripts": {
     "dev": "vite",