szld-libs 0.2.28 → 0.2.30

package/es/components/EditTable/index.js

@@ -62,7 +62,7 @@ function EditableCell(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx("td", { children: childNode });
+  return /* @__PURE__ */ jsx("td", { ...restProps, children: childNode });
 }
 function EditTable(props) {
   const { columns, onChange, ...rest } = props;

package/es/components/SearchTable/index.css

@@ -1,3 +1,16 @@
 .search-table-module_search_17add {
   margin-bottom: 20px;
 }
+.search-table-module_table_5f652 .react-resizable {
+  position: relative;
+  background-clip: padding-box;
+}
+.search-table-module_table_5f652 .react-resizable-handle {
+  position: absolute;
+  width: 10px;
+  height: 100%;
+  bottom: 0;
+  right: -5px;
+  cursor: col-resize;
+  z-index: 1;
+}

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

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

package/es/components/SearchTable/index.js

@@ -1,27 +1,65 @@
 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 { Resizable } from "react-resizable";
 import CreateForm from "../CreateForm";
 const search = "search-table-module_search_17add";
+const table = "search-table-module_table_5f652";
 const classes = {
-  search
+  search,
+  table
+};
+const ResizeableTitle = (props) => {
+  const { onResize, width, resizeable, ...restProps } = props;
+  if (!width || !resizeable) {
+    return /* @__PURE__ */ jsx("th", { ...restProps });
+  }
+  return /* @__PURE__ */ jsx(Resizable, { width: width || 200, height: 0, onResize, draggableOpts: { enableUserSelectHack: false }, children: /* @__PURE__ */ jsx("th", { ...restProps }) });
 };
 function SearchTable(props) {
   const { tableProps = {}, searchProps } = props;
-  const { columns = [], minColumnWidth = 200, ...rest } = tableProps;
+  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 realColumns = useMemo(() => {
+    const result = columns.filter((v) => !v.hidden).map((v) => ({
+      ...v,
+      width: v.width || minColumnWidth,
+      onHeaderCell: (column, index) => ({
+        width: column.width,
+        resizeable,
+        onResize: (_e, { size }) => handleResize(column, size)
+      })
+    }));
+    result[result.length - 1].width = void 0;
+    return result;
+  }, [resizeable, columns, minColumnWidth]);
+  const components = {
+    header: {
+      cell: ResizeableTitle
+    }
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     searchProps && /* @__PURE__ */ jsx(CreateForm, { hiddenTitle: true, ...searchProps, items: searchProps.items }),
     /* @__PURE__ */ jsx(
       Table,
       {
-        columns: columns.filter((v) => !v.hidden).map((v) => ({ ...v, width: v.width || minColumnWidth })),
+        ...rest,
+        columns: realColumns,
         scroll: {
-          x: columns.filter((v) => !v.hidden).reduce(
-            (a, b) => a + (typeof b.width === "number" ? b.width : minColumnWidth),
-            0
-          )
+          x: realColumns.reduce((a, b) => a + (typeof b.width === "number" ? b.width : minColumnWidth), 0)
         },
-        ...rest,
+        components,
         className: classNames(classes.table, tableProps == null ? void 0 : tableProps.className),
         pagination: typeof (tableProps == null ? void 0 : tableProps.pagination) === "boolean" ? tableProps.pagination : {
           showPrevNextJumpers: true,

package/es/index.js

@@ -1,9 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import useConfig from "./hooks/useConfig";
-import { AES, UploadFile } from "./main";
+import { AES, SearchTable } from "./main";
 let key = "U2FsdGVkX1/dG1NSXNR9hnp3Ech/v6Gh8CDDJxgBm1EPFQel12ySIf84ARXCPwTae7TzwgPvjOyE3S5rAEzl/wAZmId6pbezpFeFcJqxdmIl3FeluYHFxJzQHDETTvrr3G/REvv00kHptOVwg6ecjPH6yk7PNit0sWTBLorROxLxMD8lVDmOA66p7Zp4QnYzqScYJGFbutmfHYXfBRBe1Q2UKummJ798svNY5SIwEwl4spzgyWmhARtuyq4zhysFrj/xODuNDjtwitA6XfX566WcZkj3F+2P+mkYzDYOhXXaomnlybjrZ2hEHfcczQhUfJd89O8PNIuEWo24wjYRgMdKlw5CWSeocFCqV7ZJ/CV/7vNRcaO4awKlFNobLikkwDznxpcX+4UEej+ED+pgfmPQLsKedcfEscStkSAZXaD5pBRTiFU9xGLfDt6seUrEnMBeXkpMIY9j1SZDDK18/G7lSHjDQMZYZP6sfLdBdwY=";
 const Demo = () => {
   useConfig(key);
@@ -12,19 +12,33 @@ const Demo = () => {
   }, []);
   const jiami = () => {
     const aes = new AES();
-    aes.encrypt(JSON.stringify({
-      AppID: "GZY_SZLD_GZYDP",
-      Password: "GZY_SZLD_GZYDP2557013",
-      copyright: " © 云雁科技有限公司 2023 版权所有",
-      icp: 'ICP备案/许可证号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">湘B2-20090059</a> 公网安备号 44030502008569 隐私政策',
-      tel: "400-607-0705",
-      Salt: "HnSzldjt#2557013#"
-    }));
+    aes.encrypt(
+      JSON.stringify({
+        AppID: "GZY_SZLD_GZYDP",
+        Password: "GZY_SZLD_GZYDP2557013",
+        copyright: " © 云雁科技有限公司 2023 版权所有",
+        icp: 'ICP备案/许可证号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">湘B2-20090059</a> 公网安备号 44030502008569 隐私政策',
+        tel: "400-607-0705",
+        Salt: "HnSzldjt#2557013#"
+      })
+    );
   };
-  return /* @__PURE__ */ jsxs("div", { style: { height: "100vh" }, children: [
-    "测试页面",
-    /* @__PURE__ */ jsx(UploadFile, { compression: { quality: 0.9, limit: 5 }, accept: ".heic,.jpg,.png,.jpeg", maxSize: 5 })
-  ] });
+  const columns = [
+    {
+      dataIndex: "a",
+      title: "a"
+    },
+    {
+      dataIndex: "b",
+      title: "b",
+      width: 400
+    },
+    {
+      dataIndex: "c",
+      title: "c"
+    }
+  ];
+  return /* @__PURE__ */ jsx("div", { style: { height: "100vh" }, children: /* @__PURE__ */ jsx(SearchTable, { tableProps: { columns, dataSource: [], resizeable: false } }) });
 };
 ReactDOM.createRoot(document.getElementById("root")).render(
   /* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsx(Demo, {}) })

package/lib/components/EditTable/index.js

@@ -63,7 +63,7 @@ function EditableCell(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { children: childNode });
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...restProps, children: childNode });
 }
 function EditTable(props) {
   const { columns, onChange, ...rest } = props;

package/lib/components/SearchTable/index.css

@@ -1,3 +1,16 @@
 .search-table-module_search_17add {
   margin-bottom: 20px;
 }
+.search-table-module_table_5f652 .react-resizable {
+  position: relative;
+  background-clip: padding-box;
+}
+.search-table-module_table_5f652 .react-resizable-handle {
+  position: absolute;
+  width: 10px;
+  height: 100%;
+  bottom: 0;
+  right: -5px;
+  cursor: col-resize;
+  z-index: 1;
+}

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

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

package/lib/components/SearchTable/index.js

@@ -2,27 +2,65 @@
 const jsxRuntime = require("react/jsx-runtime");
 const antd = require("antd");
 const classNames = require("classnames");
+const _ = require("lodash");
+const react = require("react");
+const reactResizable = require("react-resizable");
 const CreateForm = require("../CreateForm");
 const search = "search-table-module_search_17add";
+const table = "search-table-module_table_5f652";
 const classes = {
-  search
+  search,
+  table
+};
+const ResizeableTitle = (props) => {
+  const { onResize, width, resizeable, ...restProps } = props;
+  if (!width || !resizeable) {
+    return /* @__PURE__ */ jsxRuntime.jsx("th", { ...restProps });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactResizable.Resizable, { width: width || 200, height: 0, onResize, draggableOpts: { enableUserSelectHack: false }, children: /* @__PURE__ */ jsxRuntime.jsx("th", { ...restProps }) });
 };
 function SearchTable(props) {
   const { tableProps = {}, searchProps } = props;
-  const { columns = [], minColumnWidth = 200, ...rest } = tableProps;
+  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 realColumns = react.useMemo(() => {
+    const result = columns.filter((v) => !v.hidden).map((v) => ({
+      ...v,
+      width: v.width || minColumnWidth,
+      onHeaderCell: (column, index) => ({
+        width: column.width,
+        resizeable,
+        onResize: (_e, { size }) => handleResize(column, size)
+      })
+    }));
+    result[result.length - 1].width = void 0;
+    return result;
+  }, [resizeable, columns, minColumnWidth]);
+  const components = {
+    header: {
+      cell: ResizeableTitle
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     searchProps && /* @__PURE__ */ jsxRuntime.jsx(CreateForm, { hiddenTitle: true, ...searchProps, items: searchProps.items }),
     /* @__PURE__ */ jsxRuntime.jsx(
       antd.Table,
       {
-        columns: columns.filter((v) => !v.hidden).map((v) => ({ ...v, width: v.width || minColumnWidth })),
+        ...rest,
+        columns: realColumns,
         scroll: {
-          x: columns.filter((v) => !v.hidden).reduce(
-            (a, b) => a + (typeof b.width === "number" ? b.width : minColumnWidth),
-            0
-          )
+          x: realColumns.reduce((a, b) => a + (typeof b.width === "number" ? b.width : minColumnWidth), 0)
         },
-        ...rest,
+        components,
         className: classNames(classes.table, tableProps == null ? void 0 : tableProps.className),
         pagination: typeof (tableProps == null ? void 0 : tableProps.pagination) === "boolean" ? tableProps.pagination : {
           showPrevNextJumpers: true,

package/lib/index.js

@@ -13,19 +13,33 @@ const Demo = () => {
   }, []);
   const jiami = () => {
     const aes = new main.AES();
-    aes.encrypt(JSON.stringify({
-      AppID: "GZY_SZLD_GZYDP",
-      Password: "GZY_SZLD_GZYDP2557013",
-      copyright: " © 云雁科技有限公司 2023 版权所有",
-      icp: 'ICP备案/许可证号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">湘B2-20090059</a> 公网安备号 44030502008569 隐私政策',
-      tel: "400-607-0705",
-      Salt: "HnSzldjt#2557013#"
-    }));
+    aes.encrypt(
+      JSON.stringify({
+        AppID: "GZY_SZLD_GZYDP",
+        Password: "GZY_SZLD_GZYDP2557013",
+        copyright: " © 云雁科技有限公司 2023 版权所有",
+        icp: 'ICP备案/许可证号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">湘B2-20090059</a> 公网安备号 44030502008569 隐私政策',
+        tel: "400-607-0705",
+        Salt: "HnSzldjt#2557013#"
+      })
+    );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: "100vh" }, children: [
-    "测试页面",
-    /* @__PURE__ */ jsxRuntime.jsx(main.UploadFile, { compression: { quality: 0.9, limit: 5 }, accept: ".heic,.jpg,.png,.jpeg", maxSize: 5 })
-  ] });
+  const columns = [
+    {
+      dataIndex: "a",
+      title: "a"
+    },
+    {
+      dataIndex: "b",
+      title: "b",
+      width: 400
+    },
+    {
+      dataIndex: "c",
+      title: "c"
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100vh" }, children: /* @__PURE__ */ jsxRuntime.jsx(main.SearchTable, { tableProps: { columns, dataSource: [], resizeable: false } }) });
 };
 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.28",
+  "version": "0.2.30",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,6 +16,7 @@
     "pako": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-resizable": "^3.0.5",
     "react-router-dom": "^6.6.1",
     "react-window": "^1.8.9"
   },
@@ -25,6 +26,7 @@
     "@types/node": "^18.11.15",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
+    "@types/react-resizable": "^3.0.8",
     "@types/react-window": "^1.8.5",
     "@vitejs/plugin-react": "^3.0.0",
     "less": "^4.1.3",