es-grid-template 1.2.2 → 1.2.4
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/assets/index.css +0 -17
- package/assets/index.scss +1082 -1063
- package/es/grid-component/ColumnsChoose.d.ts +1 -0
- package/es/grid-component/ColumnsChoose.js +351 -61
- package/es/grid-component/GridStyle.js +1 -1
- package/es/grid-component/InternalTable.js +7 -0
- package/es/grid-component/TableGrid.js +3 -2
- package/es/grid-component/hooks/useColumns.js +3 -3
- package/es/grid-component/hooks/useForceUpdate.d.ts +2 -0
- package/es/grid-component/hooks/useForceUpdate.js +5 -0
- package/es/grid-component/hooks/utils.d.ts +2 -0
- package/es/grid-component/hooks/utils.js +77 -16
- package/es/grid-component/styles.scss +22 -3
- package/es/grid-component/table/Grid.js +2 -1
- package/es/grid-component/table/GridEdit.js +72 -9
- package/es/grid-component/type.d.ts +1 -0
- package/lib/grid-component/ColumnsChoose.d.ts +1 -0
- package/lib/grid-component/ColumnsChoose.js +350 -60
- package/lib/grid-component/GridStyle.js +1 -1
- package/lib/grid-component/InternalTable.js +7 -0
- package/lib/grid-component/TableGrid.js +3 -2
- package/lib/grid-component/hooks/useColumns.js +3 -3
- package/lib/grid-component/hooks/useForceUpdate.d.ts +2 -0
- package/lib/grid-component/hooks/useForceUpdate.js +13 -0
- package/lib/grid-component/hooks/utils.d.ts +2 -0
- package/lib/grid-component/hooks/utils.js +81 -17
- package/lib/grid-component/styles.scss +22 -3
- package/lib/grid-component/table/Grid.js +2 -1
- package/lib/grid-component/table/GridEdit.js +71 -8
- package/lib/grid-component/type.d.ts +1 -0
- package/package.json +106 -106
|
@@ -12,9 +12,330 @@ var _icons = require("@ant-design/icons");
|
|
|
12
12
|
var _hooks = require("./hooks");
|
|
13
13
|
var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
|
|
14
14
|
var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
|
|
15
|
-
var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
|
|
16
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
17
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
|
+
// import React, {Fragment, useMemo, useState} from "react"
|
|
18
|
+
//
|
|
19
|
+
// import styled from "styled-components"
|
|
20
|
+
// import {Button, Input, Popover, Tooltip} from "antd";
|
|
21
|
+
// import {SettingOutlined} from "@ant-design/icons";
|
|
22
|
+
// import {
|
|
23
|
+
// getVisibleColumnKeys,
|
|
24
|
+
// updateColumns
|
|
25
|
+
// } from "./hooks";
|
|
26
|
+
//
|
|
27
|
+
// // import type {TableColumnsType} from "rc-master-ui";
|
|
28
|
+
// import Tree from "rc-master-ui/es/tree";
|
|
29
|
+
// import SearchOutlined from "@ant-design/icons/SearchOutlined";
|
|
30
|
+
// import type {ColumnsTable} from "./type";
|
|
31
|
+
// import useMergedState from "rc-util/lib/hooks/useMergedState";
|
|
32
|
+
//
|
|
33
|
+
//
|
|
34
|
+
// const BoxAction = styled.div`
|
|
35
|
+
// border-top: 1px solid #c4c4c4;
|
|
36
|
+
// padding-top: .75rem;
|
|
37
|
+
// display: flex;
|
|
38
|
+
// justify-content: end;
|
|
39
|
+
// gap: 10px;
|
|
40
|
+
//
|
|
41
|
+
// .btn-action {
|
|
42
|
+
// background: none !important;
|
|
43
|
+
// border: none !important;
|
|
44
|
+
// &.btn-action-submit {
|
|
45
|
+
// color: #df4318;
|
|
46
|
+
// &:disabled {
|
|
47
|
+
// background-color: #f0f0f0 !important;
|
|
48
|
+
// }
|
|
49
|
+
// &:hover {
|
|
50
|
+
// color: #df4318 !important;
|
|
51
|
+
// }
|
|
52
|
+
// }
|
|
53
|
+
//
|
|
54
|
+
// &:hover {
|
|
55
|
+
// background-color: #f0f0f0 !important;
|
|
56
|
+
// }
|
|
57
|
+
// }
|
|
58
|
+
// `
|
|
59
|
+
//
|
|
60
|
+
// export type IColumnsChoose<RecordType> = {
|
|
61
|
+
// columns: ColumnsTable<RecordType>
|
|
62
|
+
// columnsGroup?: string[]
|
|
63
|
+
// triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void
|
|
64
|
+
// t?: any
|
|
65
|
+
//
|
|
66
|
+
// }
|
|
67
|
+
//
|
|
68
|
+
//
|
|
69
|
+
// export const ColumnsChoose = <RecordType extends object>(props: IColumnsChoose<RecordType>) => {
|
|
70
|
+
// const {
|
|
71
|
+
// columns: propsColumns,
|
|
72
|
+
// triggerChangeColumns,
|
|
73
|
+
// t,
|
|
74
|
+
// columnsGroup,
|
|
75
|
+
// } = props
|
|
76
|
+
//
|
|
77
|
+
// // const dataList: { key: React.Key; title: string }[] = [];
|
|
78
|
+
//
|
|
79
|
+
// // const defaultColumns = useMemo(() => {
|
|
80
|
+
// // return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
|
|
81
|
+
// // }, [propsColumns])
|
|
82
|
+
//
|
|
83
|
+
//
|
|
84
|
+
// // const columnsChooseRef: any = useRef()
|
|
85
|
+
// // const searchRef: any = useRef()
|
|
86
|
+
//
|
|
87
|
+
//
|
|
88
|
+
//
|
|
89
|
+
// // const [columns, setColumns] = useState<TableColumnsType>([])
|
|
90
|
+
//
|
|
91
|
+
// // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
|
|
92
|
+
//
|
|
93
|
+
// // const [isManualUpdate, setIsManualUpdate] = useState(false);
|
|
94
|
+
//
|
|
95
|
+
//
|
|
96
|
+
// // useEffect(() => {
|
|
97
|
+
// //
|
|
98
|
+
// // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
|
|
99
|
+
// // setColumns(defaultColumns as TableColumnsType)
|
|
100
|
+
// //
|
|
101
|
+
// // }, [propsColumns])
|
|
102
|
+
//
|
|
103
|
+
// const columns = useMemo(() => {
|
|
104
|
+
//
|
|
105
|
+
// // return propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
|
|
106
|
+
// return propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false)
|
|
107
|
+
// // setColumns(defaultColumns as TableColumnsType)
|
|
108
|
+
// }, [columnsGroup, propsColumns])
|
|
109
|
+
//
|
|
110
|
+
//
|
|
111
|
+
// // useEffect(() => {
|
|
112
|
+
// //
|
|
113
|
+
// // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
|
|
114
|
+
// //
|
|
115
|
+
// // const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
|
|
116
|
+
// //
|
|
117
|
+
// // if (!isManualUpdate) {
|
|
118
|
+
// // setSelectedKeys(defaultSelectedKeys)
|
|
119
|
+
// // }
|
|
120
|
+
// // setIsManualUpdate(false);
|
|
121
|
+
// //
|
|
122
|
+
// //
|
|
123
|
+
// // }, [isManualUpdate, propsColumns])
|
|
124
|
+
//
|
|
125
|
+
// const defaultSelectedKeys = React.useMemo(() => {
|
|
126
|
+
//
|
|
127
|
+
// const rs = propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
|
|
128
|
+
// return getVisibleColumnKeys(rs)
|
|
129
|
+
//
|
|
130
|
+
// }, [columnsGroup, propsColumns])
|
|
131
|
+
//
|
|
132
|
+
// const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
|
|
133
|
+
// defaultSelectedKeys || [],
|
|
134
|
+
// {
|
|
135
|
+
// value: defaultSelectedKeys,
|
|
136
|
+
// },
|
|
137
|
+
// );
|
|
138
|
+
//
|
|
139
|
+
// //
|
|
140
|
+
// // const defaultSelectedKeys = useMemo(() => {
|
|
141
|
+
// //
|
|
142
|
+
// // return getVisibleColumnKeys(propsColumns)
|
|
143
|
+
// //
|
|
144
|
+
// // }, [propsColumns])
|
|
145
|
+
//
|
|
146
|
+
//
|
|
147
|
+
// const [clicked, setClicked] = useState(false);
|
|
148
|
+
// const [autoExpandParent, setAutoExpandParent] = useState(true);
|
|
149
|
+
//
|
|
150
|
+
//
|
|
151
|
+
// // const treeData = useMemo(() => {
|
|
152
|
+
// // const loop = (data: TreeDataNode[]): TreeDataNode[] =>
|
|
153
|
+
// // data.map((item) => {
|
|
154
|
+
// // const strTitle = item.title as string;
|
|
155
|
+
// // const index = strTitle.indexOf(searchValue);
|
|
156
|
+
// // const beforeStr = strTitle.substring(0, index);
|
|
157
|
+
// // const afterStr = strTitle.slice(index + searchValue.length);
|
|
158
|
+
// // const title =
|
|
159
|
+
// // index > -1 ? (
|
|
160
|
+
// // <span key={item.key}>
|
|
161
|
+
// // {beforeStr}
|
|
162
|
+
// // <span className="site-tree-search-value">{searchValue}</span>
|
|
163
|
+
// // {afterStr}
|
|
164
|
+
// // </span>
|
|
165
|
+
// // ) : (
|
|
166
|
+
// // <span key={item.key}>{strTitle}</span>
|
|
167
|
+
// // );
|
|
168
|
+
// // if (item.children) {
|
|
169
|
+
// // return { title, key: item.key, children: loop(item.children) };
|
|
170
|
+
// // }
|
|
171
|
+
// //
|
|
172
|
+
// // return {
|
|
173
|
+
// // title,
|
|
174
|
+
// // key: item.key,
|
|
175
|
+
// // };
|
|
176
|
+
// // });
|
|
177
|
+
// //
|
|
178
|
+
// // // return loop(defaultData);
|
|
179
|
+
// // return loop(columns as any);
|
|
180
|
+
// // }, [searchValue, columns]);
|
|
181
|
+
//
|
|
182
|
+
//
|
|
183
|
+
// const hide = () => {
|
|
184
|
+
// setClicked(false)
|
|
185
|
+
// }
|
|
186
|
+
//
|
|
187
|
+
// const handleClickChange = (open: boolean) => {
|
|
188
|
+
// setClicked(open)
|
|
189
|
+
// }
|
|
190
|
+
//
|
|
191
|
+
// const onExpand = () => {
|
|
192
|
+
// // setExpandedKeys(newExpandedKeys)
|
|
193
|
+
// setAutoExpandParent(false)
|
|
194
|
+
// }
|
|
195
|
+
//
|
|
196
|
+
// // const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
|
|
197
|
+
// // let parentKey: React.Key
|
|
198
|
+
// // for (let i = 0; i < tree.length; i++) {
|
|
199
|
+
// // const node = tree[i]
|
|
200
|
+
// // if (node.children) {
|
|
201
|
+
// // if (node.children.some((item) => item.key === key)) {
|
|
202
|
+
// // parentKey = node.key
|
|
203
|
+
// // } else if (getParentKey(key, node.children)) {
|
|
204
|
+
// // parentKey = getParentKey(key, node.children)
|
|
205
|
+
// // }
|
|
206
|
+
// // }
|
|
207
|
+
// // }
|
|
208
|
+
// // return parentKey!
|
|
209
|
+
// // }
|
|
210
|
+
//
|
|
211
|
+
// // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
212
|
+
// const onChange = () => {
|
|
213
|
+
// // const { value } = e.target
|
|
214
|
+
// // const newExpandedKeys = dataList
|
|
215
|
+
// // .map((item) => {
|
|
216
|
+
// // if (item.title.indexOf(value) > -1) {
|
|
217
|
+
// // return getParentKey(item.key, defaultData)
|
|
218
|
+
// // }
|
|
219
|
+
// // return null
|
|
220
|
+
// // })
|
|
221
|
+
// // .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
|
|
222
|
+
// // setExpandedKeys(newExpandedKeys)
|
|
223
|
+
//
|
|
224
|
+
// // setSearchValue(value)
|
|
225
|
+
// setAutoExpandParent(true)
|
|
226
|
+
// };
|
|
227
|
+
//
|
|
228
|
+
// const onCheck = (keys: string[]) => {
|
|
229
|
+
//
|
|
230
|
+
// console.log('keys', keys)
|
|
231
|
+
// // setSelectedKeys(keys)
|
|
232
|
+
// setMergedSelectedKeys(keys)
|
|
233
|
+
// // setIsManualUpdate(true)
|
|
234
|
+
//
|
|
235
|
+
// }
|
|
236
|
+
//
|
|
237
|
+
// const handleAccept = () => {
|
|
238
|
+
//
|
|
239
|
+
// console.log('mergedSelectedKeys', mergedSelectedKeys)
|
|
240
|
+
//
|
|
241
|
+
// // const rs1 = updateColumns(propsColumns, selectedKeys)
|
|
242
|
+
// const rs1 = updateColumns(propsColumns, mergedSelectedKeys)
|
|
243
|
+
//
|
|
244
|
+
// console.log('rs1', rs1)
|
|
245
|
+
//
|
|
246
|
+
// triggerChangeColumns?.(rs1, 'columnChoose')
|
|
247
|
+
//
|
|
248
|
+
// hide()
|
|
249
|
+
//
|
|
250
|
+
// }
|
|
251
|
+
//
|
|
252
|
+
// const handleCancel = () => {
|
|
253
|
+
// // setSelectedKeys(defaultSelectedKeys)
|
|
254
|
+
// hide()
|
|
255
|
+
// }
|
|
256
|
+
//
|
|
257
|
+
//
|
|
258
|
+
// return (
|
|
259
|
+
// <Fragment>
|
|
260
|
+
// <Popover
|
|
261
|
+
// placement={'bottomLeft'}
|
|
262
|
+
// content={
|
|
263
|
+
// <div style={{minWidth: 250}}>
|
|
264
|
+
// <Input style={{ marginBottom: 8 }} placeholder={t ? t("Search") : 'Search'} prefix={<SearchOutlined />} onChange={onChange} />
|
|
265
|
+
//
|
|
266
|
+
// <Tree
|
|
267
|
+
// onExpand={onExpand}
|
|
268
|
+
// // expandedKeys={expandedKeys}
|
|
269
|
+
// autoExpandParent={autoExpandParent}
|
|
270
|
+
// // treeData={treeData}
|
|
271
|
+
// treeData={columns}
|
|
272
|
+
// defaultExpandAll={true}
|
|
273
|
+
// checkable={true}
|
|
274
|
+
// // onSelect={(keys, info) => {
|
|
275
|
+
// // const key = info.node.key
|
|
276
|
+
// //
|
|
277
|
+
// // const find = findItemByKey(columns, 'key', key)
|
|
278
|
+
// //
|
|
279
|
+
// // // const tmpColumn
|
|
280
|
+
// //
|
|
281
|
+
// // // if (selectedKeys.includes(key as string)) {
|
|
282
|
+
// // // const rssss = findKeyPath(columns, key as string)
|
|
283
|
+
// // // const rs = selectedKeys.filter(item => !rssss.includes(item));
|
|
284
|
+
// // //
|
|
285
|
+
// // // setSelectedKeys(rs)
|
|
286
|
+
// // // } else {
|
|
287
|
+
// //
|
|
288
|
+
// // // const rs = [...selectedKeys, keys[0]]
|
|
289
|
+
// //
|
|
290
|
+
// // // setSelectedKeys(keys)
|
|
291
|
+
// // // }
|
|
292
|
+
// // }}
|
|
293
|
+
// onCheck={(keys) => onCheck(keys as string[])}
|
|
294
|
+
//
|
|
295
|
+
//
|
|
296
|
+
// multiple={true}
|
|
297
|
+
// // checkedKeys={selectedKeys}
|
|
298
|
+
//
|
|
299
|
+
// defaultCheckedKeys={mergedSelectedKeys}
|
|
300
|
+
// // defaultCheckedKeys={defaultSelectedKeys}
|
|
301
|
+
// // selectedKeys={[]}
|
|
302
|
+
//
|
|
303
|
+
// height={window.innerHeight - 200}
|
|
304
|
+
//
|
|
305
|
+
// />
|
|
306
|
+
//
|
|
307
|
+
//
|
|
308
|
+
// <BoxAction className={'px-1'}>
|
|
309
|
+
// <Button
|
|
310
|
+
// // className={classnames('btn-action btn-action-submit', {
|
|
311
|
+
// // // disable: !columns.find((item) => item.visible !== false || item.visible)
|
|
312
|
+
// // })}
|
|
313
|
+
// onClick={handleAccept}
|
|
314
|
+
// // disabled={!columns.find((item) => item.visible !== false || item.visible)}
|
|
315
|
+
// >
|
|
316
|
+
// {t ? t('OK') : 'OK'}
|
|
317
|
+
// {/*{'OK'}*/}
|
|
318
|
+
// </Button>
|
|
319
|
+
//
|
|
320
|
+
// {/*<Button className={'btn-action btn-action-cancel'} onClick={hide} >{('Cancel') }</Button>*/}
|
|
321
|
+
// <Button className={'btn-action btn-action-cancel'} onClick={handleCancel} >{t ? t('Cancel') : 'Cancel' }</Button>
|
|
322
|
+
// </BoxAction>
|
|
323
|
+
// </div>
|
|
324
|
+
// }
|
|
325
|
+
// trigger="click"
|
|
326
|
+
// open={clicked}
|
|
327
|
+
// onOpenChange={handleClickChange}
|
|
328
|
+
// arrow={false}
|
|
329
|
+
// >
|
|
330
|
+
// <Tooltip arrow={false} title={'Cài đặt'} >
|
|
331
|
+
// <SettingOutlined size={16} color={'#555555'} style={{fontSize: 16, color: '#555555'}} />
|
|
332
|
+
// </Tooltip>
|
|
333
|
+
//
|
|
334
|
+
// </Popover>
|
|
335
|
+
// </Fragment>
|
|
336
|
+
// )
|
|
337
|
+
// }
|
|
338
|
+
|
|
18
339
|
// import type {TableColumnsType} from "rc-master-ui";
|
|
19
340
|
|
|
20
341
|
const BoxAction = _styledComponents.default.div.withConfig({
|
|
@@ -25,6 +346,7 @@ const ColumnsChoose = props => {
|
|
|
25
346
|
const {
|
|
26
347
|
columns: propsColumns,
|
|
27
348
|
triggerChangeColumns,
|
|
349
|
+
triggerChangeKeys,
|
|
28
350
|
t,
|
|
29
351
|
columnsGroup
|
|
30
352
|
} = props;
|
|
@@ -39,10 +361,8 @@ const ColumnsChoose = props => {
|
|
|
39
361
|
// const searchRef: any = useRef()
|
|
40
362
|
|
|
41
363
|
// const [columns, setColumns] = useState<TableColumnsType>([])
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
// const [isManualUpdate, setIsManualUpdate] = useState(false);
|
|
364
|
+
const [selectedKeys, setSelectedKeys] = (0, _react.useState)([]);
|
|
365
|
+
const [isManualUpdate, setIsManualUpdate] = (0, _react.useState)(false);
|
|
46
366
|
|
|
47
367
|
// useEffect(() => {
|
|
48
368
|
//
|
|
@@ -52,40 +372,22 @@ const ColumnsChoose = props => {
|
|
|
52
372
|
// }, [propsColumns])
|
|
53
373
|
|
|
54
374
|
const columns = (0, _react.useMemo)(() => {
|
|
55
|
-
|
|
56
|
-
return propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false);
|
|
375
|
+
return propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
|
|
57
376
|
// setColumns(defaultColumns as TableColumnsType)
|
|
58
|
-
}, [
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
// }, [isManualUpdate, propsColumns])
|
|
73
|
-
|
|
74
|
-
const defaultSelectedKeys = _react.default.useMemo(() => {
|
|
75
|
-
const rs = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
|
|
76
|
-
return (0, _hooks.getVisibleColumnKeys)(rs);
|
|
77
|
-
}, [columnsGroup, propsColumns]);
|
|
78
|
-
const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(defaultSelectedKeys || [], {
|
|
79
|
-
value: defaultSelectedKeys
|
|
80
|
-
});
|
|
81
|
-
|
|
82
|
-
//
|
|
83
|
-
// const defaultSelectedKeys = useMemo(() => {
|
|
84
|
-
//
|
|
85
|
-
// return getVisibleColumnKeys(propsColumns)
|
|
86
|
-
//
|
|
87
|
-
// }, [propsColumns])
|
|
88
|
-
|
|
377
|
+
}, [propsColumns]);
|
|
378
|
+
(0, _react.useEffect)(() => {
|
|
379
|
+
// const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
|
|
380
|
+
const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
|
|
381
|
+
const defaultSelectedKeys = (0, _hooks.getVisibleColumnKeys)(defaultColumns);
|
|
382
|
+
if (!isManualUpdate) {
|
|
383
|
+
setSelectedKeys(defaultSelectedKeys);
|
|
384
|
+
}
|
|
385
|
+
setIsManualUpdate(false);
|
|
386
|
+
}, [propsColumns]);
|
|
387
|
+
const defaultSelectedKeys = (0, _react.useMemo)(() => {
|
|
388
|
+
const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
|
|
389
|
+
return (0, _hooks.getVisibleColumnKeys)(defaultColumns);
|
|
390
|
+
}, [propsColumns]);
|
|
89
391
|
const [clicked, setClicked] = (0, _react.useState)(false);
|
|
90
392
|
const [autoExpandParent, setAutoExpandParent] = (0, _react.useState)(true);
|
|
91
393
|
|
|
@@ -163,19 +465,17 @@ const ColumnsChoose = props => {
|
|
|
163
465
|
setAutoExpandParent(true);
|
|
164
466
|
};
|
|
165
467
|
const onCheck = keys => {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
setMergedSelectedKeys(keys);
|
|
169
|
-
// setIsManualUpdate(true)
|
|
468
|
+
setSelectedKeys(keys);
|
|
469
|
+
setIsManualUpdate(true);
|
|
170
470
|
};
|
|
171
471
|
const handleAccept = () => {
|
|
172
|
-
|
|
173
|
-
|
|
472
|
+
const rs1 = (0, _hooks.updateColumns)(propsColumns, selectedKeys);
|
|
473
|
+
triggerChangeKeys?.(selectedKeys);
|
|
174
474
|
triggerChangeColumns?.(rs1, 'columnChoose');
|
|
175
475
|
hide();
|
|
176
476
|
};
|
|
177
477
|
const handleCancel = () => {
|
|
178
|
-
|
|
478
|
+
setSelectedKeys(defaultSelectedKeys);
|
|
179
479
|
hide();
|
|
180
480
|
};
|
|
181
481
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
|
|
@@ -222,15 +522,12 @@ const ColumnsChoose = props => {
|
|
|
222
522
|
// }}
|
|
223
523
|
,
|
|
224
524
|
onCheck: keys => onCheck(keys),
|
|
225
|
-
multiple: true
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
defaultCheckedKeys: mergedSelectedKeys
|
|
525
|
+
multiple: true,
|
|
526
|
+
checkedKeys: selectedKeys,
|
|
527
|
+
defaultCheckedKeys: selectedKeys
|
|
230
528
|
// defaultCheckedKeys={defaultSelectedKeys}
|
|
231
|
-
// selectedKeys={[]}
|
|
232
529
|
,
|
|
233
|
-
|
|
530
|
+
selectedKeys: [],
|
|
234
531
|
height: window.innerHeight - 200
|
|
235
532
|
}), /*#__PURE__*/_react.default.createElement(BoxAction, {
|
|
236
533
|
className: 'px-1'
|
|
@@ -252,13 +549,6 @@ const ColumnsChoose = props => {
|
|
|
252
549
|
}, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
|
|
253
550
|
arrow: false,
|
|
254
551
|
title: 'Cài đặt'
|
|
255
|
-
}, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined,
|
|
256
|
-
size: 16,
|
|
257
|
-
color: '#555555',
|
|
258
|
-
style: {
|
|
259
|
-
fontSize: 16,
|
|
260
|
-
color: '#555555'
|
|
261
|
-
}
|
|
262
|
-
}))));
|
|
552
|
+
}, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null))));
|
|
263
553
|
};
|
|
264
554
|
exports.ColumnsChoose = ColumnsChoose;
|
|
@@ -9,4 +9,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
9
9
|
const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
|
|
10
10
|
displayName: "GridStyle",
|
|
11
11
|
componentId: "es-grid-template__sc-sueu2e-0"
|
|
12
|
-
})([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;
|
|
12
|
+
})([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined);
|
|
@@ -100,6 +100,7 @@ const InternalTable = props => {
|
|
|
100
100
|
_react.default.useEffect(() => {
|
|
101
101
|
setColumns(propsColumns);
|
|
102
102
|
}, [propsColumns]);
|
|
103
|
+
// }, [!!propsColumns.length && !!propsColumns])
|
|
103
104
|
|
|
104
105
|
// const [data, setData] = useState<RecordType[]>([]);
|
|
105
106
|
|
|
@@ -152,6 +153,12 @@ const InternalTable = props => {
|
|
|
152
153
|
// const triggerChangeColumns = (newColumns: ColumnsTable<RecordType>) => {
|
|
153
154
|
const triggerChangeColumns = newColumns => {
|
|
154
155
|
setColumns(newColumns);
|
|
156
|
+
if (tableRef.current) {
|
|
157
|
+
tableRef.current.scrollTo({
|
|
158
|
+
left: 0.1,
|
|
159
|
+
behavior: "smooth"
|
|
160
|
+
});
|
|
161
|
+
}
|
|
155
162
|
onChooseColumns?.({
|
|
156
163
|
showColumns: [],
|
|
157
164
|
columns: [],
|
|
@@ -133,6 +133,7 @@ const TableGrid = props => {
|
|
|
133
133
|
getRowKey,
|
|
134
134
|
groupColumns,
|
|
135
135
|
groupToolbar,
|
|
136
|
+
showEmptyText,
|
|
136
137
|
...rest
|
|
137
138
|
} = props;
|
|
138
139
|
const {
|
|
@@ -308,10 +309,10 @@ const TableGrid = props => {
|
|
|
308
309
|
}, rest, {
|
|
309
310
|
locale: {
|
|
310
311
|
...locale,
|
|
311
|
-
emptyText: /*#__PURE__*/_react.default.createElement(_rcMasterUi.Empty, {
|
|
312
|
+
emptyText: showEmptyText !== false ? /*#__PURE__*/_react.default.createElement(_rcMasterUi.Empty, {
|
|
312
313
|
image: _rcMasterUi.Empty.PRESENTED_IMAGE_SIMPLE,
|
|
313
314
|
description: locale?.emptyText
|
|
314
|
-
})
|
|
315
|
+
}) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)
|
|
315
316
|
},
|
|
316
317
|
loading: {
|
|
317
318
|
spinning: columns && columns.length === 0 || loading === true,
|
|
@@ -256,11 +256,11 @@ const useColumns = config => {
|
|
|
256
256
|
}),
|
|
257
257
|
onCell: data => {
|
|
258
258
|
return {
|
|
259
|
-
colSpan: data.children && col.field === firstNonGroupColumn?.field ? 2 : data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
|
|
259
|
+
colSpan: groupColumns && data.children && col.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
|
|
260
260
|
zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
|
|
261
261
|
className: (0, _classnames.default)('', {
|
|
262
|
-
'cell-group': data.children,
|
|
263
|
-
'cell-group-fixed': data.children && col.field === firstNonGroupColumn?.field
|
|
262
|
+
'cell-group': groupColumns && data.children,
|
|
263
|
+
'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
|
|
264
264
|
})
|
|
265
265
|
};
|
|
266
266
|
},
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useForceUpdate;
|
|
7
|
+
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
9
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
10
|
+
function useForceUpdate() {
|
|
11
|
+
const [, forceUpdate] = React.useReducer(x => x + 1, 0);
|
|
12
|
+
return forceUpdate;
|
|
13
|
+
}
|
|
@@ -66,3 +66,5 @@ export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordTyp
|
|
|
66
66
|
export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
|
|
67
67
|
export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordType>, groupColumns: string[]) => ColumnsTable<RecordType>;
|
|
68
68
|
export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];
|
|
69
|
+
export declare const convertColumns: <RecordType>(cols: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
|
|
70
|
+
export declare const checkChild: (inputArray: any[]) => boolean;
|