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
|
@@ -5,5 +5,6 @@ export type IColumnsChoose<RecordType> = {
|
|
|
5
5
|
columnsGroup?: string[];
|
|
6
6
|
triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
|
|
7
7
|
t?: any;
|
|
8
|
+
triggerChangeKeys?: any;
|
|
8
9
|
};
|
|
9
10
|
export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;
|
|
@@ -1,4 +1,326 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
// import React, {Fragment, useMemo, useState} from "react"
|
|
2
|
+
//
|
|
3
|
+
// import styled from "styled-components"
|
|
4
|
+
// import {Button, Input, Popover, Tooltip} from "antd";
|
|
5
|
+
// import {SettingOutlined} from "@ant-design/icons";
|
|
6
|
+
// import {
|
|
7
|
+
// getVisibleColumnKeys,
|
|
8
|
+
// updateColumns
|
|
9
|
+
// } from "./hooks";
|
|
10
|
+
//
|
|
11
|
+
// // import type {TableColumnsType} from "rc-master-ui";
|
|
12
|
+
// import Tree from "rc-master-ui/es/tree";
|
|
13
|
+
// import SearchOutlined from "@ant-design/icons/SearchOutlined";
|
|
14
|
+
// import type {ColumnsTable} from "./type";
|
|
15
|
+
// import useMergedState from "rc-util/lib/hooks/useMergedState";
|
|
16
|
+
//
|
|
17
|
+
//
|
|
18
|
+
// const BoxAction = styled.div`
|
|
19
|
+
// border-top: 1px solid #c4c4c4;
|
|
20
|
+
// padding-top: .75rem;
|
|
21
|
+
// display: flex;
|
|
22
|
+
// justify-content: end;
|
|
23
|
+
// gap: 10px;
|
|
24
|
+
//
|
|
25
|
+
// .btn-action {
|
|
26
|
+
// background: none !important;
|
|
27
|
+
// border: none !important;
|
|
28
|
+
// &.btn-action-submit {
|
|
29
|
+
// color: #df4318;
|
|
30
|
+
// &:disabled {
|
|
31
|
+
// background-color: #f0f0f0 !important;
|
|
32
|
+
// }
|
|
33
|
+
// &:hover {
|
|
34
|
+
// color: #df4318 !important;
|
|
35
|
+
// }
|
|
36
|
+
// }
|
|
37
|
+
//
|
|
38
|
+
// &:hover {
|
|
39
|
+
// background-color: #f0f0f0 !important;
|
|
40
|
+
// }
|
|
41
|
+
// }
|
|
42
|
+
// `
|
|
43
|
+
//
|
|
44
|
+
// export type IColumnsChoose<RecordType> = {
|
|
45
|
+
// columns: ColumnsTable<RecordType>
|
|
46
|
+
// columnsGroup?: string[]
|
|
47
|
+
// triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void
|
|
48
|
+
// t?: any
|
|
49
|
+
//
|
|
50
|
+
// }
|
|
51
|
+
//
|
|
52
|
+
//
|
|
53
|
+
// export const ColumnsChoose = <RecordType extends object>(props: IColumnsChoose<RecordType>) => {
|
|
54
|
+
// const {
|
|
55
|
+
// columns: propsColumns,
|
|
56
|
+
// triggerChangeColumns,
|
|
57
|
+
// t,
|
|
58
|
+
// columnsGroup,
|
|
59
|
+
// } = props
|
|
60
|
+
//
|
|
61
|
+
// // const dataList: { key: React.Key; title: string }[] = [];
|
|
62
|
+
//
|
|
63
|
+
// // const defaultColumns = useMemo(() => {
|
|
64
|
+
// // return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
|
|
65
|
+
// // }, [propsColumns])
|
|
66
|
+
//
|
|
67
|
+
//
|
|
68
|
+
// // const columnsChooseRef: any = useRef()
|
|
69
|
+
// // const searchRef: any = useRef()
|
|
70
|
+
//
|
|
71
|
+
//
|
|
72
|
+
//
|
|
73
|
+
// // const [columns, setColumns] = useState<TableColumnsType>([])
|
|
74
|
+
//
|
|
75
|
+
// // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
|
|
76
|
+
//
|
|
77
|
+
// // const [isManualUpdate, setIsManualUpdate] = useState(false);
|
|
78
|
+
//
|
|
79
|
+
//
|
|
80
|
+
// // useEffect(() => {
|
|
81
|
+
// //
|
|
82
|
+
// // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
|
|
83
|
+
// // setColumns(defaultColumns as TableColumnsType)
|
|
84
|
+
// //
|
|
85
|
+
// // }, [propsColumns])
|
|
86
|
+
//
|
|
87
|
+
// const columns = useMemo(() => {
|
|
88
|
+
//
|
|
89
|
+
// // return propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
|
|
90
|
+
// return propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false)
|
|
91
|
+
// // setColumns(defaultColumns as TableColumnsType)
|
|
92
|
+
// }, [columnsGroup, propsColumns])
|
|
93
|
+
//
|
|
94
|
+
//
|
|
95
|
+
// // useEffect(() => {
|
|
96
|
+
// //
|
|
97
|
+
// // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
|
|
98
|
+
// //
|
|
99
|
+
// // const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
|
|
100
|
+
// //
|
|
101
|
+
// // if (!isManualUpdate) {
|
|
102
|
+
// // setSelectedKeys(defaultSelectedKeys)
|
|
103
|
+
// // }
|
|
104
|
+
// // setIsManualUpdate(false);
|
|
105
|
+
// //
|
|
106
|
+
// //
|
|
107
|
+
// // }, [isManualUpdate, propsColumns])
|
|
108
|
+
//
|
|
109
|
+
// const defaultSelectedKeys = React.useMemo(() => {
|
|
110
|
+
//
|
|
111
|
+
// const rs = propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
|
|
112
|
+
// return getVisibleColumnKeys(rs)
|
|
113
|
+
//
|
|
114
|
+
// }, [columnsGroup, propsColumns])
|
|
115
|
+
//
|
|
116
|
+
// const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
|
|
117
|
+
// defaultSelectedKeys || [],
|
|
118
|
+
// {
|
|
119
|
+
// value: defaultSelectedKeys,
|
|
120
|
+
// },
|
|
121
|
+
// );
|
|
122
|
+
//
|
|
123
|
+
// //
|
|
124
|
+
// // const defaultSelectedKeys = useMemo(() => {
|
|
125
|
+
// //
|
|
126
|
+
// // return getVisibleColumnKeys(propsColumns)
|
|
127
|
+
// //
|
|
128
|
+
// // }, [propsColumns])
|
|
129
|
+
//
|
|
130
|
+
//
|
|
131
|
+
// const [clicked, setClicked] = useState(false);
|
|
132
|
+
// const [autoExpandParent, setAutoExpandParent] = useState(true);
|
|
133
|
+
//
|
|
134
|
+
//
|
|
135
|
+
// // const treeData = useMemo(() => {
|
|
136
|
+
// // const loop = (data: TreeDataNode[]): TreeDataNode[] =>
|
|
137
|
+
// // data.map((item) => {
|
|
138
|
+
// // const strTitle = item.title as string;
|
|
139
|
+
// // const index = strTitle.indexOf(searchValue);
|
|
140
|
+
// // const beforeStr = strTitle.substring(0, index);
|
|
141
|
+
// // const afterStr = strTitle.slice(index + searchValue.length);
|
|
142
|
+
// // const title =
|
|
143
|
+
// // index > -1 ? (
|
|
144
|
+
// // <span key={item.key}>
|
|
145
|
+
// // {beforeStr}
|
|
146
|
+
// // <span className="site-tree-search-value">{searchValue}</span>
|
|
147
|
+
// // {afterStr}
|
|
148
|
+
// // </span>
|
|
149
|
+
// // ) : (
|
|
150
|
+
// // <span key={item.key}>{strTitle}</span>
|
|
151
|
+
// // );
|
|
152
|
+
// // if (item.children) {
|
|
153
|
+
// // return { title, key: item.key, children: loop(item.children) };
|
|
154
|
+
// // }
|
|
155
|
+
// //
|
|
156
|
+
// // return {
|
|
157
|
+
// // title,
|
|
158
|
+
// // key: item.key,
|
|
159
|
+
// // };
|
|
160
|
+
// // });
|
|
161
|
+
// //
|
|
162
|
+
// // // return loop(defaultData);
|
|
163
|
+
// // return loop(columns as any);
|
|
164
|
+
// // }, [searchValue, columns]);
|
|
165
|
+
//
|
|
166
|
+
//
|
|
167
|
+
// const hide = () => {
|
|
168
|
+
// setClicked(false)
|
|
169
|
+
// }
|
|
170
|
+
//
|
|
171
|
+
// const handleClickChange = (open: boolean) => {
|
|
172
|
+
// setClicked(open)
|
|
173
|
+
// }
|
|
174
|
+
//
|
|
175
|
+
// const onExpand = () => {
|
|
176
|
+
// // setExpandedKeys(newExpandedKeys)
|
|
177
|
+
// setAutoExpandParent(false)
|
|
178
|
+
// }
|
|
179
|
+
//
|
|
180
|
+
// // const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
|
|
181
|
+
// // let parentKey: React.Key
|
|
182
|
+
// // for (let i = 0; i < tree.length; i++) {
|
|
183
|
+
// // const node = tree[i]
|
|
184
|
+
// // if (node.children) {
|
|
185
|
+
// // if (node.children.some((item) => item.key === key)) {
|
|
186
|
+
// // parentKey = node.key
|
|
187
|
+
// // } else if (getParentKey(key, node.children)) {
|
|
188
|
+
// // parentKey = getParentKey(key, node.children)
|
|
189
|
+
// // }
|
|
190
|
+
// // }
|
|
191
|
+
// // }
|
|
192
|
+
// // return parentKey!
|
|
193
|
+
// // }
|
|
194
|
+
//
|
|
195
|
+
// // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
196
|
+
// const onChange = () => {
|
|
197
|
+
// // const { value } = e.target
|
|
198
|
+
// // const newExpandedKeys = dataList
|
|
199
|
+
// // .map((item) => {
|
|
200
|
+
// // if (item.title.indexOf(value) > -1) {
|
|
201
|
+
// // return getParentKey(item.key, defaultData)
|
|
202
|
+
// // }
|
|
203
|
+
// // return null
|
|
204
|
+
// // })
|
|
205
|
+
// // .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
|
|
206
|
+
// // setExpandedKeys(newExpandedKeys)
|
|
207
|
+
//
|
|
208
|
+
// // setSearchValue(value)
|
|
209
|
+
// setAutoExpandParent(true)
|
|
210
|
+
// };
|
|
211
|
+
//
|
|
212
|
+
// const onCheck = (keys: string[]) => {
|
|
213
|
+
//
|
|
214
|
+
// console.log('keys', keys)
|
|
215
|
+
// // setSelectedKeys(keys)
|
|
216
|
+
// setMergedSelectedKeys(keys)
|
|
217
|
+
// // setIsManualUpdate(true)
|
|
218
|
+
//
|
|
219
|
+
// }
|
|
220
|
+
//
|
|
221
|
+
// const handleAccept = () => {
|
|
222
|
+
//
|
|
223
|
+
// console.log('mergedSelectedKeys', mergedSelectedKeys)
|
|
224
|
+
//
|
|
225
|
+
// // const rs1 = updateColumns(propsColumns, selectedKeys)
|
|
226
|
+
// const rs1 = updateColumns(propsColumns, mergedSelectedKeys)
|
|
227
|
+
//
|
|
228
|
+
// console.log('rs1', rs1)
|
|
229
|
+
//
|
|
230
|
+
// triggerChangeColumns?.(rs1, 'columnChoose')
|
|
231
|
+
//
|
|
232
|
+
// hide()
|
|
233
|
+
//
|
|
234
|
+
// }
|
|
235
|
+
//
|
|
236
|
+
// const handleCancel = () => {
|
|
237
|
+
// // setSelectedKeys(defaultSelectedKeys)
|
|
238
|
+
// hide()
|
|
239
|
+
// }
|
|
240
|
+
//
|
|
241
|
+
//
|
|
242
|
+
// return (
|
|
243
|
+
// <Fragment>
|
|
244
|
+
// <Popover
|
|
245
|
+
// placement={'bottomLeft'}
|
|
246
|
+
// content={
|
|
247
|
+
// <div style={{minWidth: 250}}>
|
|
248
|
+
// <Input style={{ marginBottom: 8 }} placeholder={t ? t("Search") : 'Search'} prefix={<SearchOutlined />} onChange={onChange} />
|
|
249
|
+
//
|
|
250
|
+
// <Tree
|
|
251
|
+
// onExpand={onExpand}
|
|
252
|
+
// // expandedKeys={expandedKeys}
|
|
253
|
+
// autoExpandParent={autoExpandParent}
|
|
254
|
+
// // treeData={treeData}
|
|
255
|
+
// treeData={columns}
|
|
256
|
+
// defaultExpandAll={true}
|
|
257
|
+
// checkable={true}
|
|
258
|
+
// // onSelect={(keys, info) => {
|
|
259
|
+
// // const key = info.node.key
|
|
260
|
+
// //
|
|
261
|
+
// // const find = findItemByKey(columns, 'key', key)
|
|
262
|
+
// //
|
|
263
|
+
// // // const tmpColumn
|
|
264
|
+
// //
|
|
265
|
+
// // // if (selectedKeys.includes(key as string)) {
|
|
266
|
+
// // // const rssss = findKeyPath(columns, key as string)
|
|
267
|
+
// // // const rs = selectedKeys.filter(item => !rssss.includes(item));
|
|
268
|
+
// // //
|
|
269
|
+
// // // setSelectedKeys(rs)
|
|
270
|
+
// // // } else {
|
|
271
|
+
// //
|
|
272
|
+
// // // const rs = [...selectedKeys, keys[0]]
|
|
273
|
+
// //
|
|
274
|
+
// // // setSelectedKeys(keys)
|
|
275
|
+
// // // }
|
|
276
|
+
// // }}
|
|
277
|
+
// onCheck={(keys) => onCheck(keys as string[])}
|
|
278
|
+
//
|
|
279
|
+
//
|
|
280
|
+
// multiple={true}
|
|
281
|
+
// // checkedKeys={selectedKeys}
|
|
282
|
+
//
|
|
283
|
+
// defaultCheckedKeys={mergedSelectedKeys}
|
|
284
|
+
// // defaultCheckedKeys={defaultSelectedKeys}
|
|
285
|
+
// // selectedKeys={[]}
|
|
286
|
+
//
|
|
287
|
+
// height={window.innerHeight - 200}
|
|
288
|
+
//
|
|
289
|
+
// />
|
|
290
|
+
//
|
|
291
|
+
//
|
|
292
|
+
// <BoxAction className={'px-1'}>
|
|
293
|
+
// <Button
|
|
294
|
+
// // className={classnames('btn-action btn-action-submit', {
|
|
295
|
+
// // // disable: !columns.find((item) => item.visible !== false || item.visible)
|
|
296
|
+
// // })}
|
|
297
|
+
// onClick={handleAccept}
|
|
298
|
+
// // disabled={!columns.find((item) => item.visible !== false || item.visible)}
|
|
299
|
+
// >
|
|
300
|
+
// {t ? t('OK') : 'OK'}
|
|
301
|
+
// {/*{'OK'}*/}
|
|
302
|
+
// </Button>
|
|
303
|
+
//
|
|
304
|
+
// {/*<Button className={'btn-action btn-action-cancel'} onClick={hide} >{('Cancel') }</Button>*/}
|
|
305
|
+
// <Button className={'btn-action btn-action-cancel'} onClick={handleCancel} >{t ? t('Cancel') : 'Cancel' }</Button>
|
|
306
|
+
// </BoxAction>
|
|
307
|
+
// </div>
|
|
308
|
+
// }
|
|
309
|
+
// trigger="click"
|
|
310
|
+
// open={clicked}
|
|
311
|
+
// onOpenChange={handleClickChange}
|
|
312
|
+
// arrow={false}
|
|
313
|
+
// >
|
|
314
|
+
// <Tooltip arrow={false} title={'Cài đặt'} >
|
|
315
|
+
// <SettingOutlined size={16} color={'#555555'} style={{fontSize: 16, color: '#555555'}} />
|
|
316
|
+
// </Tooltip>
|
|
317
|
+
//
|
|
318
|
+
// </Popover>
|
|
319
|
+
// </Fragment>
|
|
320
|
+
// )
|
|
321
|
+
// }
|
|
322
|
+
|
|
323
|
+
import React, { Fragment, useEffect, useMemo, useState } from "react";
|
|
2
324
|
import styled from "styled-components";
|
|
3
325
|
import { Button, Input, Popover, Tooltip } from "antd";
|
|
4
326
|
import { SettingOutlined } from "@ant-design/icons";
|
|
@@ -7,7 +329,6 @@ import { getVisibleColumnKeys, updateColumns } from "./hooks";
|
|
|
7
329
|
// import type {TableColumnsType} from "rc-master-ui";
|
|
8
330
|
import Tree from "rc-master-ui/es/tree";
|
|
9
331
|
import SearchOutlined from "@ant-design/icons/SearchOutlined";
|
|
10
|
-
import useMergedState from "rc-util/es/hooks/useMergedState";
|
|
11
332
|
const BoxAction = styled.div.withConfig({
|
|
12
333
|
displayName: "BoxAction",
|
|
13
334
|
componentId: "es-grid-template__sc-1ix8yky-0"
|
|
@@ -16,6 +337,7 @@ export const ColumnsChoose = props => {
|
|
|
16
337
|
const {
|
|
17
338
|
columns: propsColumns,
|
|
18
339
|
triggerChangeColumns,
|
|
340
|
+
triggerChangeKeys,
|
|
19
341
|
t,
|
|
20
342
|
columnsGroup
|
|
21
343
|
} = props;
|
|
@@ -30,10 +352,8 @@ export const ColumnsChoose = props => {
|
|
|
30
352
|
// const searchRef: any = useRef()
|
|
31
353
|
|
|
32
354
|
// const [columns, setColumns] = useState<TableColumnsType>([])
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
// const [isManualUpdate, setIsManualUpdate] = useState(false);
|
|
355
|
+
const [selectedKeys, setSelectedKeys] = useState([]);
|
|
356
|
+
const [isManualUpdate, setIsManualUpdate] = useState(false);
|
|
37
357
|
|
|
38
358
|
// useEffect(() => {
|
|
39
359
|
//
|
|
@@ -43,40 +363,22 @@ export const ColumnsChoose = props => {
|
|
|
43
363
|
// }, [propsColumns])
|
|
44
364
|
|
|
45
365
|
const columns = useMemo(() => {
|
|
46
|
-
|
|
47
|
-
return propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false);
|
|
366
|
+
return propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
|
|
48
367
|
// setColumns(defaultColumns as TableColumnsType)
|
|
49
|
-
}, [
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
// }, [isManualUpdate, propsColumns])
|
|
64
|
-
|
|
65
|
-
const defaultSelectedKeys = React.useMemo(() => {
|
|
66
|
-
const rs = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
|
|
67
|
-
return getVisibleColumnKeys(rs);
|
|
68
|
-
}, [columnsGroup, propsColumns]);
|
|
69
|
-
const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(defaultSelectedKeys || [], {
|
|
70
|
-
value: defaultSelectedKeys
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
//
|
|
74
|
-
// const defaultSelectedKeys = useMemo(() => {
|
|
75
|
-
//
|
|
76
|
-
// return getVisibleColumnKeys(propsColumns)
|
|
77
|
-
//
|
|
78
|
-
// }, [propsColumns])
|
|
79
|
-
|
|
368
|
+
}, [propsColumns]);
|
|
369
|
+
useEffect(() => {
|
|
370
|
+
// const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
|
|
371
|
+
const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
|
|
372
|
+
const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns);
|
|
373
|
+
if (!isManualUpdate) {
|
|
374
|
+
setSelectedKeys(defaultSelectedKeys);
|
|
375
|
+
}
|
|
376
|
+
setIsManualUpdate(false);
|
|
377
|
+
}, [propsColumns]);
|
|
378
|
+
const defaultSelectedKeys = useMemo(() => {
|
|
379
|
+
const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
|
|
380
|
+
return getVisibleColumnKeys(defaultColumns);
|
|
381
|
+
}, [propsColumns]);
|
|
80
382
|
const [clicked, setClicked] = useState(false);
|
|
81
383
|
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
|
82
384
|
|
|
@@ -154,19 +456,17 @@ export const ColumnsChoose = props => {
|
|
|
154
456
|
setAutoExpandParent(true);
|
|
155
457
|
};
|
|
156
458
|
const onCheck = keys => {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
setMergedSelectedKeys(keys);
|
|
160
|
-
// setIsManualUpdate(true)
|
|
459
|
+
setSelectedKeys(keys);
|
|
460
|
+
setIsManualUpdate(true);
|
|
161
461
|
};
|
|
162
462
|
const handleAccept = () => {
|
|
163
|
-
|
|
164
|
-
|
|
463
|
+
const rs1 = updateColumns(propsColumns, selectedKeys);
|
|
464
|
+
triggerChangeKeys?.(selectedKeys);
|
|
165
465
|
triggerChangeColumns?.(rs1, 'columnChoose');
|
|
166
466
|
hide();
|
|
167
467
|
};
|
|
168
468
|
const handleCancel = () => {
|
|
169
|
-
|
|
469
|
+
setSelectedKeys(defaultSelectedKeys);
|
|
170
470
|
hide();
|
|
171
471
|
};
|
|
172
472
|
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
|
|
@@ -213,15 +513,12 @@ export const ColumnsChoose = props => {
|
|
|
213
513
|
// }}
|
|
214
514
|
,
|
|
215
515
|
onCheck: keys => onCheck(keys),
|
|
216
|
-
multiple: true
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
defaultCheckedKeys: mergedSelectedKeys
|
|
516
|
+
multiple: true,
|
|
517
|
+
checkedKeys: selectedKeys,
|
|
518
|
+
defaultCheckedKeys: selectedKeys
|
|
221
519
|
// defaultCheckedKeys={defaultSelectedKeys}
|
|
222
|
-
// selectedKeys={[]}
|
|
223
520
|
,
|
|
224
|
-
|
|
521
|
+
selectedKeys: [],
|
|
225
522
|
height: window.innerHeight - 200
|
|
226
523
|
}), /*#__PURE__*/React.createElement(BoxAction, {
|
|
227
524
|
className: 'px-1'
|
|
@@ -243,12 +540,5 @@ export const ColumnsChoose = props => {
|
|
|
243
540
|
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
244
541
|
arrow: false,
|
|
245
542
|
title: 'Cài đặt'
|
|
246
|
-
}, /*#__PURE__*/React.createElement(SettingOutlined,
|
|
247
|
-
size: 16,
|
|
248
|
-
color: '#555555',
|
|
249
|
-
style: {
|
|
250
|
-
fontSize: 16,
|
|
251
|
-
color: '#555555'
|
|
252
|
-
}
|
|
253
|
-
}))));
|
|
543
|
+
}, /*#__PURE__*/React.createElement(SettingOutlined, null))));
|
|
254
544
|
};
|
|
@@ -2,4 +2,4 @@ import styled from "styled-components";
|
|
|
2
2
|
export const GridStyle = styled.div.withConfig({
|
|
3
3
|
displayName: "GridStyle",
|
|
4
4
|
componentId: "es-grid-template__sc-sueu2e-0"
|
|
5
|
-
})([".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;
|
|
5
|
+
})([".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);
|
|
@@ -97,6 +97,7 @@ const InternalTable = props => {
|
|
|
97
97
|
React.useEffect(() => {
|
|
98
98
|
setColumns(propsColumns);
|
|
99
99
|
}, [propsColumns]);
|
|
100
|
+
// }, [!!propsColumns.length && !!propsColumns])
|
|
100
101
|
|
|
101
102
|
// const [data, setData] = useState<RecordType[]>([]);
|
|
102
103
|
|
|
@@ -149,6 +150,12 @@ const InternalTable = props => {
|
|
|
149
150
|
// const triggerChangeColumns = (newColumns: ColumnsTable<RecordType>) => {
|
|
150
151
|
const triggerChangeColumns = newColumns => {
|
|
151
152
|
setColumns(newColumns);
|
|
153
|
+
if (tableRef.current) {
|
|
154
|
+
tableRef.current.scrollTo({
|
|
155
|
+
left: 0.1,
|
|
156
|
+
behavior: "smooth"
|
|
157
|
+
});
|
|
158
|
+
}
|
|
152
159
|
onChooseColumns?.({
|
|
153
160
|
showColumns: [],
|
|
154
161
|
columns: [],
|
|
@@ -129,6 +129,7 @@ const TableGrid = props => {
|
|
|
129
129
|
getRowKey,
|
|
130
130
|
groupColumns,
|
|
131
131
|
groupToolbar,
|
|
132
|
+
showEmptyText,
|
|
132
133
|
...rest
|
|
133
134
|
} = props;
|
|
134
135
|
const {
|
|
@@ -304,10 +305,10 @@ const TableGrid = props => {
|
|
|
304
305
|
}, rest, {
|
|
305
306
|
locale: {
|
|
306
307
|
...locale,
|
|
307
|
-
emptyText: /*#__PURE__*/React.createElement(Empty, {
|
|
308
|
+
emptyText: showEmptyText !== false ? /*#__PURE__*/React.createElement(Empty, {
|
|
308
309
|
image: Empty.PRESENTED_IMAGE_SIMPLE,
|
|
309
310
|
description: locale?.emptyText
|
|
310
|
-
})
|
|
311
|
+
}) : /*#__PURE__*/React.createElement(React.Fragment, null)
|
|
311
312
|
},
|
|
312
313
|
loading: {
|
|
313
314
|
spinning: columns && columns.length === 0 || loading === true,
|
|
@@ -245,11 +245,11 @@ const useColumns = config => {
|
|
|
245
245
|
}),
|
|
246
246
|
onCell: data => {
|
|
247
247
|
return {
|
|
248
|
-
colSpan: data.children && col.field === firstNonGroupColumn?.field ? 2 : data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
|
|
248
|
+
colSpan: groupColumns && data.children && col.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
|
|
249
249
|
zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
|
|
250
250
|
className: classNames('', {
|
|
251
|
-
'cell-group': data.children,
|
|
252
|
-
'cell-group-fixed': data.children && col.field === firstNonGroupColumn?.field
|
|
251
|
+
'cell-group': groupColumns && data.children,
|
|
252
|
+
'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
|
|
253
253
|
})
|
|
254
254
|
};
|
|
255
255
|
},
|
|
@@ -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;
|