szld-libs 0.2.31 → 0.2.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/szld-components.es.js +2928 -2909
- package/dist/szld-components.umd.js +29 -29
- package/es/components/SearchTable/index.js +46 -24
- package/es/index.js +8 -3
- package/lib/components/SearchTable/index.js +45 -23
- package/lib/index.js +6 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { Table } from "antd";
|
|
3
3
|
import classNames from "classnames";
|
|
4
4
|
import _ from "lodash";
|
|
5
|
-
import { useState, useMemo } from "react";
|
|
5
|
+
import { useRef, useState, useEffect, useCallback, useMemo } from "react";
|
|
6
6
|
import { Resizable } from "react-resizable";
|
|
7
7
|
import { getLocalStorage } from "../../utils";
|
|
8
8
|
import CreateForm from "../CreateForm";
|
|
@@ -28,26 +28,8 @@ function SearchTable(props) {
|
|
|
28
28
|
storageKey = "szld_table_cell_width",
|
|
29
29
|
...rest
|
|
30
30
|
} = tableProps;
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const list = _.cloneDeep(columns);
|
|
34
|
-
const index = list.findIndex((v) => v.dataIndex === column.dataIndex);
|
|
35
|
-
list[index] = {
|
|
36
|
-
...list[index],
|
|
37
|
-
width: size.width
|
|
38
|
-
};
|
|
39
|
-
if (tableId) {
|
|
40
|
-
const obj = getLocalStorage(storageKey) || {};
|
|
41
|
-
obj[tableId] = obj[tableId] || {};
|
|
42
|
-
list == null ? void 0 : list.forEach((v) => {
|
|
43
|
-
if (typeof v.dataIndex === "string") {
|
|
44
|
-
obj[tableId][v.dataIndex] = v.width;
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
localStorage.setItem(storageKey, JSON.stringify(obj));
|
|
48
|
-
}
|
|
49
|
-
setColumns(list);
|
|
50
|
-
};
|
|
31
|
+
const ref = useRef(null);
|
|
32
|
+
const [columns, setColumns] = useState([]);
|
|
51
33
|
const getWidth = (v) => {
|
|
52
34
|
var _a, _b;
|
|
53
35
|
let width = v.width || minColumnWidth;
|
|
@@ -59,10 +41,50 @@ function SearchTable(props) {
|
|
|
59
41
|
}
|
|
60
42
|
return width;
|
|
61
43
|
};
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
const list = tableProps.columns || [];
|
|
46
|
+
if (list.length === 0) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
const result = list.map((v) => ({
|
|
50
|
+
...v,
|
|
51
|
+
width: getWidth(v)
|
|
52
|
+
}));
|
|
53
|
+
setColumns(result);
|
|
54
|
+
ref.current = Date.now();
|
|
55
|
+
}, [tableProps.columns, tableId, minColumnWidth]);
|
|
56
|
+
const handleResize = useCallback(
|
|
57
|
+
(column, size) => {
|
|
58
|
+
const list = _.cloneDeep(columns);
|
|
59
|
+
if (!list || list.length === 0) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
const index = list == null ? void 0 : list.findIndex((v) => v.dataIndex === column.dataIndex);
|
|
63
|
+
list[index] = {
|
|
64
|
+
...list[index],
|
|
65
|
+
width: size.width
|
|
66
|
+
};
|
|
67
|
+
if (tableId) {
|
|
68
|
+
const obj = getLocalStorage(storageKey) || {};
|
|
69
|
+
obj[tableId] = obj[tableId] || {};
|
|
70
|
+
list == null ? void 0 : list.forEach((v) => {
|
|
71
|
+
if (typeof v.dataIndex === "string") {
|
|
72
|
+
obj[tableId][v.dataIndex] = v.width;
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
localStorage.setItem(storageKey, JSON.stringify(obj));
|
|
76
|
+
}
|
|
77
|
+
setColumns(list);
|
|
78
|
+
},
|
|
79
|
+
[columns, tableId, storageKey]
|
|
80
|
+
);
|
|
62
81
|
const realColumns = useMemo(() => {
|
|
63
|
-
|
|
82
|
+
if (!ref.current || columns === void 0) {
|
|
83
|
+
return [];
|
|
84
|
+
}
|
|
85
|
+
const result = columns == null ? void 0 : columns.filter((v) => !v.hidden).map((v) => ({
|
|
64
86
|
...v,
|
|
65
|
-
width:
|
|
87
|
+
width: v.width,
|
|
66
88
|
onHeaderCell: (column) => ({
|
|
67
89
|
width: column.width,
|
|
68
90
|
resizeable,
|
|
@@ -73,7 +95,7 @@ function SearchTable(props) {
|
|
|
73
95
|
result[result.length - 1].width = void 0;
|
|
74
96
|
}
|
|
75
97
|
return result;
|
|
76
|
-
}, [resizeable, columns, minColumnWidth]);
|
|
98
|
+
}, [resizeable, columns, ref.current, minColumnWidth]);
|
|
77
99
|
const components = {
|
|
78
100
|
header: {
|
|
79
101
|
cell: ResizeableTitle
|
package/es/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect } from "react";
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
3
|
import ReactDOM from "react-dom/client";
|
|
4
4
|
import { BrowserRouter } from "react-router-dom";
|
|
5
|
+
import { Button } from "antd";
|
|
5
6
|
import useConfig from "./hooks/useConfig";
|
|
6
7
|
import { AES, SearchTable } from "./main";
|
|
7
8
|
let key = "U2FsdGVkX1/dG1NSXNR9hnp3Ech/v6Gh8CDDJxgBm1EPFQel12ySIf84ARXCPwTae7TzwgPvjOyE3S5rAEzl/wAZmId6pbezpFeFcJqxdmIl3FeluYHFxJzQHDETTvrr3G/REvv00kHptOVwg6ecjPH6yk7PNit0sWTBLorROxLxMD8lVDmOA66p7Zp4QnYzqScYJGFbutmfHYXfBRBe1Q2UKummJ798svNY5SIwEwl4spzgyWmhARtuyq4zhysFrj/xODuNDjtwitA6XfX566WcZkj3F+2P+mkYzDYOhXXaomnlybjrZ2hEHfcczQhUfJd89O8PNIuEWo24wjYRgMdKlw5CWSeocFCqV7ZJ/CV/7vNRcaO4awKlFNobLikkwDznxpcX+4UEej+ED+pgfmPQLsKedcfEscStkSAZXaD5pBRTiFU9xGLfDt6seUrEnMBeXkpMIY9j1SZDDK18/G7lSHjDQMZYZP6sfLdBdwY=";
|
|
@@ -38,7 +39,11 @@ const Demo = () => {
|
|
|
38
39
|
title: "c"
|
|
39
40
|
}
|
|
40
41
|
];
|
|
41
|
-
|
|
42
|
+
const [list, setList] = useState([]);
|
|
43
|
+
return /* @__PURE__ */ jsxs("div", { style: { height: "100vh" }, children: [
|
|
44
|
+
/* @__PURE__ */ jsx(Button, { onClick: () => setList(columns), children: "test" }),
|
|
45
|
+
/* @__PURE__ */ jsx(SearchTable, { tableProps: { columns: list, dataSource: [], resizeable: true, tableId: "demo1" } })
|
|
46
|
+
] });
|
|
42
47
|
};
|
|
43
48
|
ReactDOM.createRoot(document.getElementById("root")).render(
|
|
44
49
|
/* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsx(Demo, {}) })
|
|
@@ -29,26 +29,8 @@ function SearchTable(props) {
|
|
|
29
29
|
storageKey = "szld_table_cell_width",
|
|
30
30
|
...rest
|
|
31
31
|
} = tableProps;
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
const list = _.cloneDeep(columns);
|
|
35
|
-
const index = list.findIndex((v) => v.dataIndex === column.dataIndex);
|
|
36
|
-
list[index] = {
|
|
37
|
-
...list[index],
|
|
38
|
-
width: size.width
|
|
39
|
-
};
|
|
40
|
-
if (tableId) {
|
|
41
|
-
const obj = utils.getLocalStorage(storageKey) || {};
|
|
42
|
-
obj[tableId] = obj[tableId] || {};
|
|
43
|
-
list == null ? void 0 : list.forEach((v) => {
|
|
44
|
-
if (typeof v.dataIndex === "string") {
|
|
45
|
-
obj[tableId][v.dataIndex] = v.width;
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
localStorage.setItem(storageKey, JSON.stringify(obj));
|
|
49
|
-
}
|
|
50
|
-
setColumns(list);
|
|
51
|
-
};
|
|
32
|
+
const ref = react.useRef(null);
|
|
33
|
+
const [columns, setColumns] = react.useState([]);
|
|
52
34
|
const getWidth = (v) => {
|
|
53
35
|
var _a, _b;
|
|
54
36
|
let width = v.width || minColumnWidth;
|
|
@@ -60,10 +42,50 @@ function SearchTable(props) {
|
|
|
60
42
|
}
|
|
61
43
|
return width;
|
|
62
44
|
};
|
|
45
|
+
react.useEffect(() => {
|
|
46
|
+
const list = tableProps.columns || [];
|
|
47
|
+
if (list.length === 0) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
const result = list.map((v) => ({
|
|
51
|
+
...v,
|
|
52
|
+
width: getWidth(v)
|
|
53
|
+
}));
|
|
54
|
+
setColumns(result);
|
|
55
|
+
ref.current = Date.now();
|
|
56
|
+
}, [tableProps.columns, tableId, minColumnWidth]);
|
|
57
|
+
const handleResize = react.useCallback(
|
|
58
|
+
(column, size) => {
|
|
59
|
+
const list = _.cloneDeep(columns);
|
|
60
|
+
if (!list || list.length === 0) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
const index = list == null ? void 0 : list.findIndex((v) => v.dataIndex === column.dataIndex);
|
|
64
|
+
list[index] = {
|
|
65
|
+
...list[index],
|
|
66
|
+
width: size.width
|
|
67
|
+
};
|
|
68
|
+
if (tableId) {
|
|
69
|
+
const obj = utils.getLocalStorage(storageKey) || {};
|
|
70
|
+
obj[tableId] = obj[tableId] || {};
|
|
71
|
+
list == null ? void 0 : list.forEach((v) => {
|
|
72
|
+
if (typeof v.dataIndex === "string") {
|
|
73
|
+
obj[tableId][v.dataIndex] = v.width;
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
localStorage.setItem(storageKey, JSON.stringify(obj));
|
|
77
|
+
}
|
|
78
|
+
setColumns(list);
|
|
79
|
+
},
|
|
80
|
+
[columns, tableId, storageKey]
|
|
81
|
+
);
|
|
63
82
|
const realColumns = react.useMemo(() => {
|
|
64
|
-
|
|
83
|
+
if (!ref.current || columns === void 0) {
|
|
84
|
+
return [];
|
|
85
|
+
}
|
|
86
|
+
const result = columns == null ? void 0 : columns.filter((v) => !v.hidden).map((v) => ({
|
|
65
87
|
...v,
|
|
66
|
-
width:
|
|
88
|
+
width: v.width,
|
|
67
89
|
onHeaderCell: (column) => ({
|
|
68
90
|
width: column.width,
|
|
69
91
|
resizeable,
|
|
@@ -74,7 +96,7 @@ function SearchTable(props) {
|
|
|
74
96
|
result[result.length - 1].width = void 0;
|
|
75
97
|
}
|
|
76
98
|
return result;
|
|
77
|
-
}, [resizeable, columns, minColumnWidth]);
|
|
99
|
+
}, [resizeable, columns, ref.current, minColumnWidth]);
|
|
78
100
|
const components = {
|
|
79
101
|
header: {
|
|
80
102
|
cell: ResizeableTitle
|
package/lib/index.js
CHANGED
|
@@ -3,6 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
3
3
|
const react = require("react");
|
|
4
4
|
const ReactDOM = require("react-dom/client");
|
|
5
5
|
const reactRouterDom = require("react-router-dom");
|
|
6
|
+
const antd = require("antd");
|
|
6
7
|
const useConfig = require("./hooks/useConfig");
|
|
7
8
|
const main = require("./main");
|
|
8
9
|
let key = "U2FsdGVkX1/dG1NSXNR9hnp3Ech/v6Gh8CDDJxgBm1EPFQel12ySIf84ARXCPwTae7TzwgPvjOyE3S5rAEzl/wAZmId6pbezpFeFcJqxdmIl3FeluYHFxJzQHDETTvrr3G/REvv00kHptOVwg6ecjPH6yk7PNit0sWTBLorROxLxMD8lVDmOA66p7Zp4QnYzqScYJGFbutmfHYXfBRBe1Q2UKummJ798svNY5SIwEwl4spzgyWmhARtuyq4zhysFrj/xODuNDjtwitA6XfX566WcZkj3F+2P+mkYzDYOhXXaomnlybjrZ2hEHfcczQhUfJd89O8PNIuEWo24wjYRgMdKlw5CWSeocFCqV7ZJ/CV/7vNRcaO4awKlFNobLikkwDznxpcX+4UEej+ED+pgfmPQLsKedcfEscStkSAZXaD5pBRTiFU9xGLfDt6seUrEnMBeXkpMIY9j1SZDDK18/G7lSHjDQMZYZP6sfLdBdwY=";
|
|
@@ -39,7 +40,11 @@ const Demo = () => {
|
|
|
39
40
|
title: "c"
|
|
40
41
|
}
|
|
41
42
|
];
|
|
42
|
-
|
|
43
|
+
const [list, setList] = react.useState([]);
|
|
44
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: "100vh" }, children: [
|
|
45
|
+
/* @__PURE__ */ jsxRuntime.jsx(antd.Button, { onClick: () => setList(columns), children: "test" }),
|
|
46
|
+
/* @__PURE__ */ jsxRuntime.jsx(main.SearchTable, { tableProps: { columns: list, dataSource: [], resizeable: true, tableId: "demo1" } })
|
|
47
|
+
] });
|
|
43
48
|
};
|
|
44
49
|
ReactDOM.createRoot(document.getElementById("root")).render(
|
|
45
50
|
/* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.BrowserRouter, { children: /* @__PURE__ */ jsxRuntime.jsx(Demo, {}) })
|