es-grid-template 1.2.4 → 1.2.6
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/es/grid-component/AdvanceFilter.d.ts +10 -0
- package/es/grid-component/AdvanceFilter.js +544 -0
- package/es/grid-component/EditableCell.d.ts +1 -0
- package/es/grid-component/EditableCell.js +17 -2
- package/es/grid-component/InternalTable.js +2 -2
- package/es/grid-component/TableGrid.js +8 -5
- package/es/grid-component/hooks/content/HeaderContent.js +1 -1
- package/es/grid-component/hooks/utils.d.ts +1 -0
- package/es/grid-component/hooks/utils.js +6 -0
- package/es/grid-component/table/GridEdit.js +12 -3
- package/es/grid-component/type.d.ts +3 -1
- package/lib/grid-component/AdvanceFilter.d.ts +10 -0
- package/lib/grid-component/AdvanceFilter.js +554 -0
- package/lib/grid-component/EditableCell.d.ts +1 -0
- package/lib/grid-component/EditableCell.js +16 -2
- package/lib/grid-component/InternalTable.js +2 -2
- package/lib/grid-component/TableGrid.js +8 -5
- package/lib/grid-component/hooks/content/HeaderContent.js +1 -1
- package/lib/grid-component/hooks/utils.d.ts +1 -0
- package/lib/grid-component/hooks/utils.js +9 -2
- package/lib/grid-component/table/GridEdit.js +11 -2
- package/lib/grid-component/type.d.ts +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ColumnsTable } from "./type";
|
|
3
|
+
export type IColumnsChoose<RecordType> = {
|
|
4
|
+
columns: ColumnsTable<RecordType>;
|
|
5
|
+
columnsGroup?: string[];
|
|
6
|
+
triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
|
|
7
|
+
t?: any;
|
|
8
|
+
triggerChangeKeys?: any;
|
|
9
|
+
};
|
|
10
|
+
export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;
|
|
@@ -0,0 +1,544 @@
|
|
|
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";
|
|
324
|
+
import styled from "styled-components";
|
|
325
|
+
import { Button, Input, Popover, Tooltip } from "antd";
|
|
326
|
+
import { SettingOutlined } from "@ant-design/icons";
|
|
327
|
+
import { getVisibleColumnKeys, updateColumns } from "./hooks";
|
|
328
|
+
|
|
329
|
+
// import type {TableColumnsType} from "rc-master-ui";
|
|
330
|
+
import Tree from "rc-master-ui/es/tree";
|
|
331
|
+
import SearchOutlined from "@ant-design/icons/SearchOutlined";
|
|
332
|
+
const BoxAction = styled.div.withConfig({
|
|
333
|
+
displayName: "BoxAction",
|
|
334
|
+
componentId: "es-grid-template__sc-zdl2xa-0"
|
|
335
|
+
})(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
|
|
336
|
+
export const ColumnsChoose = props => {
|
|
337
|
+
const {
|
|
338
|
+
columns: propsColumns,
|
|
339
|
+
triggerChangeColumns,
|
|
340
|
+
triggerChangeKeys,
|
|
341
|
+
t,
|
|
342
|
+
columnsGroup
|
|
343
|
+
} = props;
|
|
344
|
+
|
|
345
|
+
// const dataList: { key: React.Key; title: string }[] = [];
|
|
346
|
+
|
|
347
|
+
// const defaultColumns = useMemo(() => {
|
|
348
|
+
// return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
|
|
349
|
+
// }, [propsColumns])
|
|
350
|
+
|
|
351
|
+
// const columnsChooseRef: any = useRef()
|
|
352
|
+
// const searchRef: any = useRef()
|
|
353
|
+
|
|
354
|
+
// const [columns, setColumns] = useState<TableColumnsType>([])
|
|
355
|
+
const [selectedKeys, setSelectedKeys] = useState([]);
|
|
356
|
+
const [isManualUpdate, setIsManualUpdate] = useState(false);
|
|
357
|
+
|
|
358
|
+
// useEffect(() => {
|
|
359
|
+
//
|
|
360
|
+
// const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
|
|
361
|
+
// setColumns(defaultColumns as TableColumnsType)
|
|
362
|
+
//
|
|
363
|
+
// }, [propsColumns])
|
|
364
|
+
|
|
365
|
+
const columns = useMemo(() => {
|
|
366
|
+
return propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
|
|
367
|
+
// setColumns(defaultColumns as TableColumnsType)
|
|
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]);
|
|
382
|
+
const [clicked, setClicked] = useState(false);
|
|
383
|
+
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
|
384
|
+
|
|
385
|
+
// const treeData = useMemo(() => {
|
|
386
|
+
// const loop = (data: TreeDataNode[]): TreeDataNode[] =>
|
|
387
|
+
// data.map((item) => {
|
|
388
|
+
// const strTitle = item.title as string;
|
|
389
|
+
// const index = strTitle.indexOf(searchValue);
|
|
390
|
+
// const beforeStr = strTitle.substring(0, index);
|
|
391
|
+
// const afterStr = strTitle.slice(index + searchValue.length);
|
|
392
|
+
// const title =
|
|
393
|
+
// index > -1 ? (
|
|
394
|
+
// <span key={item.key}>
|
|
395
|
+
// {beforeStr}
|
|
396
|
+
// <span className="site-tree-search-value">{searchValue}</span>
|
|
397
|
+
// {afterStr}
|
|
398
|
+
// </span>
|
|
399
|
+
// ) : (
|
|
400
|
+
// <span key={item.key}>{strTitle}</span>
|
|
401
|
+
// );
|
|
402
|
+
// if (item.children) {
|
|
403
|
+
// return { title, key: item.key, children: loop(item.children) };
|
|
404
|
+
// }
|
|
405
|
+
//
|
|
406
|
+
// return {
|
|
407
|
+
// title,
|
|
408
|
+
// key: item.key,
|
|
409
|
+
// };
|
|
410
|
+
// });
|
|
411
|
+
//
|
|
412
|
+
// // return loop(defaultData);
|
|
413
|
+
// return loop(columns as any);
|
|
414
|
+
// }, [searchValue, columns]);
|
|
415
|
+
|
|
416
|
+
const hide = () => {
|
|
417
|
+
setClicked(false);
|
|
418
|
+
};
|
|
419
|
+
const handleClickChange = open => {
|
|
420
|
+
setClicked(open);
|
|
421
|
+
};
|
|
422
|
+
const onExpand = () => {
|
|
423
|
+
// setExpandedKeys(newExpandedKeys)
|
|
424
|
+
setAutoExpandParent(false);
|
|
425
|
+
};
|
|
426
|
+
|
|
427
|
+
// const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
|
|
428
|
+
// let parentKey: React.Key
|
|
429
|
+
// for (let i = 0; i < tree.length; i++) {
|
|
430
|
+
// const node = tree[i]
|
|
431
|
+
// if (node.children) {
|
|
432
|
+
// if (node.children.some((item) => item.key === key)) {
|
|
433
|
+
// parentKey = node.key
|
|
434
|
+
// } else if (getParentKey(key, node.children)) {
|
|
435
|
+
// parentKey = getParentKey(key, node.children)
|
|
436
|
+
// }
|
|
437
|
+
// }
|
|
438
|
+
// }
|
|
439
|
+
// return parentKey!
|
|
440
|
+
// }
|
|
441
|
+
|
|
442
|
+
// const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
443
|
+
const onChange = () => {
|
|
444
|
+
// const { value } = e.target
|
|
445
|
+
// const newExpandedKeys = dataList
|
|
446
|
+
// .map((item) => {
|
|
447
|
+
// if (item.title.indexOf(value) > -1) {
|
|
448
|
+
// return getParentKey(item.key, defaultData)
|
|
449
|
+
// }
|
|
450
|
+
// return null
|
|
451
|
+
// })
|
|
452
|
+
// .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
|
|
453
|
+
// setExpandedKeys(newExpandedKeys)
|
|
454
|
+
|
|
455
|
+
// setSearchValue(value)
|
|
456
|
+
setAutoExpandParent(true);
|
|
457
|
+
};
|
|
458
|
+
const onCheck = keys => {
|
|
459
|
+
setSelectedKeys(keys);
|
|
460
|
+
setIsManualUpdate(true);
|
|
461
|
+
};
|
|
462
|
+
const handleAccept = () => {
|
|
463
|
+
const rs1 = updateColumns(propsColumns, selectedKeys);
|
|
464
|
+
triggerChangeKeys?.(selectedKeys);
|
|
465
|
+
triggerChangeColumns?.(rs1, 'columnChoose');
|
|
466
|
+
hide();
|
|
467
|
+
};
|
|
468
|
+
const handleCancel = () => {
|
|
469
|
+
setSelectedKeys(defaultSelectedKeys);
|
|
470
|
+
hide();
|
|
471
|
+
};
|
|
472
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
|
|
473
|
+
placement: 'bottomLeft',
|
|
474
|
+
content: /*#__PURE__*/React.createElement("div", {
|
|
475
|
+
style: {
|
|
476
|
+
minWidth: 250
|
|
477
|
+
}
|
|
478
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
479
|
+
style: {
|
|
480
|
+
marginBottom: 8
|
|
481
|
+
},
|
|
482
|
+
placeholder: t ? t("Search") : 'Search',
|
|
483
|
+
prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
|
|
484
|
+
onChange: onChange
|
|
485
|
+
}), /*#__PURE__*/React.createElement(Tree, {
|
|
486
|
+
onExpand: onExpand
|
|
487
|
+
// expandedKeys={expandedKeys}
|
|
488
|
+
,
|
|
489
|
+
autoExpandParent: autoExpandParent
|
|
490
|
+
// treeData={treeData}
|
|
491
|
+
,
|
|
492
|
+
treeData: columns,
|
|
493
|
+
defaultExpandAll: true,
|
|
494
|
+
checkable: true
|
|
495
|
+
// onSelect={(keys, info) => {
|
|
496
|
+
// const key = info.node.key
|
|
497
|
+
//
|
|
498
|
+
// const find = findItemByKey(columns, 'key', key)
|
|
499
|
+
//
|
|
500
|
+
// // const tmpColumn
|
|
501
|
+
//
|
|
502
|
+
// // if (selectedKeys.includes(key as string)) {
|
|
503
|
+
// // const rssss = findKeyPath(columns, key as string)
|
|
504
|
+
// // const rs = selectedKeys.filter(item => !rssss.includes(item));
|
|
505
|
+
// //
|
|
506
|
+
// // setSelectedKeys(rs)
|
|
507
|
+
// // } else {
|
|
508
|
+
//
|
|
509
|
+
// // const rs = [...selectedKeys, keys[0]]
|
|
510
|
+
//
|
|
511
|
+
// // setSelectedKeys(keys)
|
|
512
|
+
// // }
|
|
513
|
+
// }}
|
|
514
|
+
,
|
|
515
|
+
onCheck: keys => onCheck(keys),
|
|
516
|
+
multiple: true,
|
|
517
|
+
checkedKeys: selectedKeys,
|
|
518
|
+
defaultCheckedKeys: selectedKeys
|
|
519
|
+
// defaultCheckedKeys={defaultSelectedKeys}
|
|
520
|
+
,
|
|
521
|
+
selectedKeys: [],
|
|
522
|
+
height: window.innerHeight - 200
|
|
523
|
+
}), /*#__PURE__*/React.createElement(BoxAction, {
|
|
524
|
+
className: 'px-1'
|
|
525
|
+
}, /*#__PURE__*/React.createElement(Button
|
|
526
|
+
// className={classnames('btn-action btn-action-submit', {
|
|
527
|
+
// // disable: !columns.find((item) => item.visible !== false || item.visible)
|
|
528
|
+
// })}
|
|
529
|
+
, {
|
|
530
|
+
onClick: handleAccept
|
|
531
|
+
// disabled={!columns.find((item) => item.visible !== false || item.visible)}
|
|
532
|
+
}, t ? t('OK') : 'OK'), /*#__PURE__*/React.createElement(Button, {
|
|
533
|
+
className: 'btn-action btn-action-cancel',
|
|
534
|
+
onClick: handleCancel
|
|
535
|
+
}, t ? t('Cancel') : 'Cancel'))),
|
|
536
|
+
trigger: "click",
|
|
537
|
+
open: clicked,
|
|
538
|
+
onOpenChange: handleClickChange,
|
|
539
|
+
arrow: false
|
|
540
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
541
|
+
arrow: false,
|
|
542
|
+
title: 'Cài đặt'
|
|
543
|
+
}, /*#__PURE__*/React.createElement(SettingOutlined, null))));
|
|
544
|
+
};
|
|
@@ -14,6 +14,7 @@ interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement>
|
|
|
14
14
|
indexRow: number;
|
|
15
15
|
indexCol: number;
|
|
16
16
|
rowKey: any;
|
|
17
|
+
cellEditing: any;
|
|
17
18
|
}
|
|
18
19
|
declare const EditableCell: <T>(props: React.PropsWithChildren<EditableCellProps<T>>) => React.JSX.Element;
|
|
19
20
|
export default EditableCell;
|
|
@@ -6,6 +6,7 @@ import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertAr
|
|
|
6
6
|
convertLabelToTitle,
|
|
7
7
|
// customWeekStartEndFormat,
|
|
8
8
|
getDatepickerFormat, getTemplate, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets
|
|
9
|
+
// isEditable,
|
|
9
10
|
// convertDayjsToDate
|
|
10
11
|
} from "./hooks";
|
|
11
12
|
// import moment from "moment";
|
|
@@ -47,6 +48,7 @@ const EditableCell = props => {
|
|
|
47
48
|
column,
|
|
48
49
|
indexRow,
|
|
49
50
|
indexCol,
|
|
51
|
+
cellEditing,
|
|
50
52
|
...restProps
|
|
51
53
|
} = props;
|
|
52
54
|
const {
|
|
@@ -79,12 +81,16 @@ const EditableCell = props => {
|
|
|
79
81
|
toolbarClick,
|
|
80
82
|
loadOptions,
|
|
81
83
|
validateOption,
|
|
82
|
-
options:
|
|
84
|
+
options: propsOptions
|
|
83
85
|
} = column.editSelectSettings || {};
|
|
84
86
|
const isInvalid = false;
|
|
85
87
|
const keySelect = checkFieldKey(column?.editSelectSettings?.fieldKey);
|
|
88
|
+
const selectOptions = typeof propsOptions === 'function' ? propsOptions(record, column.dataIndex) : propsOptions;
|
|
86
89
|
const options = validateOption ? validateOption(record, column.dataIndex) : selectOptions ?? [];
|
|
87
90
|
const optionsTree = validateOption ? convertArrayWithIndent(validateOption(record, column.dataIndex)) : selectOptions ? convertArrayWithIndent(selectOptions) : [];
|
|
91
|
+
|
|
92
|
+
// const currt = flatColumns2()
|
|
93
|
+
|
|
88
94
|
switch (editType) {
|
|
89
95
|
case 'date':
|
|
90
96
|
return /*#__PURE__*/React.createElement(DatePicker, {
|
|
@@ -317,6 +323,8 @@ const EditableCell = props => {
|
|
|
317
323
|
width: '100%',
|
|
318
324
|
height: '100%'
|
|
319
325
|
},
|
|
326
|
+
defaultOpen: column.field === cellEditing?.column.field,
|
|
327
|
+
autoFocus: true,
|
|
320
328
|
placeholder: t ? t('Select') : 'Select',
|
|
321
329
|
allowClear: column.isClearable ?? false,
|
|
322
330
|
maxTagCount: 'responsive',
|
|
@@ -389,6 +397,8 @@ const EditableCell = props => {
|
|
|
389
397
|
showSearch: true,
|
|
390
398
|
mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
|
|
391
399
|
valueSelectAble: true,
|
|
400
|
+
defaultOpen: column.field === cellEditing?.column.field,
|
|
401
|
+
autoFocus: true,
|
|
392
402
|
style: {
|
|
393
403
|
width: '100%',
|
|
394
404
|
height: '100%'
|
|
@@ -438,6 +448,8 @@ const EditableCell = props => {
|
|
|
438
448
|
});
|
|
439
449
|
},
|
|
440
450
|
showSearch: true,
|
|
451
|
+
defaultOpen: column.field === cellEditing?.column.field,
|
|
452
|
+
autoFocus: true,
|
|
441
453
|
mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
|
|
442
454
|
valueSelectAble: true,
|
|
443
455
|
style: {
|
|
@@ -516,6 +528,8 @@ const EditableCell = props => {
|
|
|
516
528
|
treeData: newTreeData,
|
|
517
529
|
placeholder: t ? t('Select') : 'Select',
|
|
518
530
|
treeDefaultExpandAll: true,
|
|
531
|
+
defaultOpen: column.field === cellEditing?.column.field,
|
|
532
|
+
autoFocus: true,
|
|
519
533
|
virtual: true,
|
|
520
534
|
allowClear: true
|
|
521
535
|
// maxTagTextLength={column?.editSelectSettings?.showItems}
|
|
@@ -550,7 +564,8 @@ const EditableCell = props => {
|
|
|
550
564
|
alignItems: 'center',
|
|
551
565
|
justifyContent: column.align ?? 'left',
|
|
552
566
|
paddingInline: 5,
|
|
553
|
-
height: '100%'
|
|
567
|
+
height: '100%',
|
|
568
|
+
width: '100%'
|
|
554
569
|
}
|
|
555
570
|
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
556
571
|
checked: Boolean(value)
|
|
@@ -148,9 +148,9 @@ const InternalTable = props => {
|
|
|
148
148
|
}, [rowKey]);
|
|
149
149
|
|
|
150
150
|
// const triggerChangeColumns = (newColumns: ColumnsTable<RecordType>) => {
|
|
151
|
-
const triggerChangeColumns = newColumns => {
|
|
151
|
+
const triggerChangeColumns = (newColumns, type) => {
|
|
152
152
|
setColumns(newColumns);
|
|
153
|
-
if (tableRef.current) {
|
|
153
|
+
if (tableRef.current && type === 'columnChoose') {
|
|
154
154
|
tableRef.current.scrollTo({
|
|
155
155
|
left: 0.1,
|
|
156
156
|
behavior: "smooth"
|
|
@@ -401,15 +401,18 @@ const TableGrid = props => {
|
|
|
401
401
|
justifyContent: 'space-between',
|
|
402
402
|
alignItems: 'center'
|
|
403
403
|
}
|
|
404
|
-
}, groupAble && groupToolbar?.(), toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement(
|
|
404
|
+
}, groupAble && groupToolbar?.(), toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement("div", {
|
|
405
|
+
style: {
|
|
406
|
+
flex: 1,
|
|
407
|
+
overflow: 'hidden'
|
|
408
|
+
}
|
|
409
|
+
}, /*#__PURE__*/React.createElement(Toolbar
|
|
405
410
|
// @ts-ignore
|
|
411
|
+
// style={{width: pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' ? `calc(100% - 650px - ${groupAble ? 50 : 0}px` : `calc(100% - 25px - ${groupAble ? 50 : 0}px`}}
|
|
406
412
|
, {
|
|
407
|
-
style: {
|
|
408
|
-
width: pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' ? `calc(100% - 650px - ${groupAble ? 50 : 0}px` : `calc(100% - 25px - ${groupAble ? 50 : 0}px`
|
|
409
|
-
},
|
|
410
413
|
items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
|
|
411
414
|
mode: 'scroll'
|
|
412
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
415
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
413
416
|
style: {
|
|
414
417
|
display: 'flex',
|
|
415
418
|
justifyContent: 'space-between',
|