es-grid-template 1.2.5 → 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 +14 -1
- package/es/grid-component/TableGrid.js +8 -5
- package/es/grid-component/hooks/content/HeaderContent.js +1 -1
- package/es/grid-component/table/GridEdit.js +7 -0
- 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 +14 -1
- package/lib/grid-component/TableGrid.js +8 -5
- package/lib/grid-component/hooks/content/HeaderContent.js +1 -1
- package/lib/grid-component/table/GridEdit.js +7 -0
- 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;
|
|
@@ -48,6 +48,7 @@ const EditableCell = props => {
|
|
|
48
48
|
column,
|
|
49
49
|
indexRow,
|
|
50
50
|
indexCol,
|
|
51
|
+
cellEditing,
|
|
51
52
|
...restProps
|
|
52
53
|
} = props;
|
|
53
54
|
const {
|
|
@@ -87,6 +88,9 @@ const EditableCell = props => {
|
|
|
87
88
|
const selectOptions = typeof propsOptions === 'function' ? propsOptions(record, column.dataIndex) : propsOptions;
|
|
88
89
|
const options = validateOption ? validateOption(record, column.dataIndex) : selectOptions ?? [];
|
|
89
90
|
const optionsTree = validateOption ? convertArrayWithIndent(validateOption(record, column.dataIndex)) : selectOptions ? convertArrayWithIndent(selectOptions) : [];
|
|
91
|
+
|
|
92
|
+
// const currt = flatColumns2()
|
|
93
|
+
|
|
90
94
|
switch (editType) {
|
|
91
95
|
case 'date':
|
|
92
96
|
return /*#__PURE__*/React.createElement(DatePicker, {
|
|
@@ -319,6 +323,8 @@ const EditableCell = props => {
|
|
|
319
323
|
width: '100%',
|
|
320
324
|
height: '100%'
|
|
321
325
|
},
|
|
326
|
+
defaultOpen: column.field === cellEditing?.column.field,
|
|
327
|
+
autoFocus: true,
|
|
322
328
|
placeholder: t ? t('Select') : 'Select',
|
|
323
329
|
allowClear: column.isClearable ?? false,
|
|
324
330
|
maxTagCount: 'responsive',
|
|
@@ -391,6 +397,8 @@ const EditableCell = props => {
|
|
|
391
397
|
showSearch: true,
|
|
392
398
|
mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
|
|
393
399
|
valueSelectAble: true,
|
|
400
|
+
defaultOpen: column.field === cellEditing?.column.field,
|
|
401
|
+
autoFocus: true,
|
|
394
402
|
style: {
|
|
395
403
|
width: '100%',
|
|
396
404
|
height: '100%'
|
|
@@ -440,6 +448,8 @@ const EditableCell = props => {
|
|
|
440
448
|
});
|
|
441
449
|
},
|
|
442
450
|
showSearch: true,
|
|
451
|
+
defaultOpen: column.field === cellEditing?.column.field,
|
|
452
|
+
autoFocus: true,
|
|
443
453
|
mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
|
|
444
454
|
valueSelectAble: true,
|
|
445
455
|
style: {
|
|
@@ -518,6 +528,8 @@ const EditableCell = props => {
|
|
|
518
528
|
treeData: newTreeData,
|
|
519
529
|
placeholder: t ? t('Select') : 'Select',
|
|
520
530
|
treeDefaultExpandAll: true,
|
|
531
|
+
defaultOpen: column.field === cellEditing?.column.field,
|
|
532
|
+
autoFocus: true,
|
|
521
533
|
virtual: true,
|
|
522
534
|
allowClear: true
|
|
523
535
|
// maxTagTextLength={column?.editSelectSettings?.showItems}
|
|
@@ -552,7 +564,8 @@ const EditableCell = props => {
|
|
|
552
564
|
alignItems: 'center',
|
|
553
565
|
justifyContent: column.align ?? 'left',
|
|
554
566
|
paddingInline: 5,
|
|
555
|
-
height: '100%'
|
|
567
|
+
height: '100%',
|
|
568
|
+
width: '100%'
|
|
556
569
|
}
|
|
557
570
|
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
558
571
|
checked: Boolean(value)
|
|
@@ -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',
|
|
@@ -65,7 +65,7 @@ const HeaderContent = props => {
|
|
|
65
65
|
// style={{flex: 1}}
|
|
66
66
|
,
|
|
67
67
|
className: classnames('', {})
|
|
68
|
-
}), headerTemplate ? getTemplate(headerTemplate) : text), isOpen && (headerTooltip !== false || headerTemplate || headerTooltip || columnGroupText || headerText) && /*#__PURE__*/React.createElement(FloatingPortal, {
|
|
68
|
+
}), headerTemplate ? getTemplate(headerTemplate) : t ? t(text) : text), isOpen && (headerTooltip !== false || headerTemplate || headerTooltip || columnGroupText || headerText) && /*#__PURE__*/React.createElement(FloatingPortal, {
|
|
69
69
|
root: document.body
|
|
70
70
|
}, /*#__PURE__*/React.createElement(TooltipStyle, _extends({
|
|
71
71
|
className: "Tooltip",
|