es-grid-template 1.7.23 → 1.7.24

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.
Files changed (167) hide show
  1. package/es/index.d.ts +1 -0
  2. package/es/index.js +3 -1
  3. package/es/table-component/ColumnsChoose.d.ts +10 -0
  4. package/es/table-component/ColumnsChoose.js +557 -0
  5. package/es/table-component/ContextMenu.d.ts +20 -0
  6. package/es/table-component/ContextMenu.js +75 -0
  7. package/es/table-component/InternalTable.d.ts +9 -0
  8. package/es/table-component/InternalTable.js +295 -0
  9. package/es/table-component/TableContainer.d.ts +22 -0
  10. package/es/table-component/TableContainer.js +130 -0
  11. package/es/table-component/TableContainerEdit.d.ts +28 -0
  12. package/es/table-component/TableContainerEdit.js +1211 -0
  13. package/es/table-component/body/EditableCell.d.ts +16 -0
  14. package/es/table-component/body/EditableCell.js +1036 -0
  15. package/es/table-component/body/TableBody.d.ts +19 -0
  16. package/es/table-component/body/TableBody.js +64 -0
  17. package/es/table-component/body/TableBodyCell.d.ts +10 -0
  18. package/es/table-component/body/TableBodyCell.js +139 -0
  19. package/es/table-component/body/TableBodyCellEdit.d.ts +15 -0
  20. package/es/table-component/body/TableBodyCellEdit.js +814 -0
  21. package/es/table-component/body/TableBodyRow.d.ts +21 -0
  22. package/es/table-component/body/TableBodyRow.js +146 -0
  23. package/es/table-component/components/ControlCheckbox.d.ts +13 -0
  24. package/es/table-component/components/ControlCheckbox.js +87 -0
  25. package/es/table-component/components/EditForm/EditForm.d.ts +27 -0
  26. package/es/table-component/components/EditForm/EditForm.js +395 -0
  27. package/es/table-component/components/EditForm/index.d.ts +1 -0
  28. package/es/table-component/components/EditForm/index.js +1 -0
  29. package/es/table-component/components/InputControl/InputControl.d.ts +27 -0
  30. package/es/table-component/components/InputControl/InputControl.js +121 -0
  31. package/es/table-component/components/InputControl/index.d.ts +1 -0
  32. package/es/table-component/components/InputControl/index.js +1 -0
  33. package/es/table-component/components/async-select/index.d.ts +11 -0
  34. package/es/table-component/components/async-select/index.js +41 -0
  35. package/es/table-component/components/async-table-select/index.d.ts +11 -0
  36. package/es/table-component/components/async-table-select/index.js +43 -0
  37. package/es/table-component/components/checkbox-control/index.d.ts +13 -0
  38. package/es/table-component/components/checkbox-control/index.js +40 -0
  39. package/es/table-component/components/checkbox-filter/CheckboxFilter.d.ts +18 -0
  40. package/es/table-component/components/checkbox-filter/CheckboxFilter.js +240 -0
  41. package/es/table-component/components/checkbox-filter/FilterSearch.d.ts +12 -0
  42. package/es/table-component/components/checkbox-filter/FilterSearch.js +36 -0
  43. package/es/table-component/components/command/Command.d.ts +9 -0
  44. package/es/table-component/components/command/Command.js +28 -0
  45. package/es/table-component/components/number/index.d.ts +10 -0
  46. package/es/table-component/components/number/index.js +42 -0
  47. package/es/table-component/components/number-range/index.d.ts +11 -0
  48. package/es/table-component/components/number-range/index.js +66 -0
  49. package/es/table-component/features/operator.d.ts +24 -0
  50. package/es/table-component/features/operator.js +62 -0
  51. package/es/table-component/footer/TableFooter.d.ts +13 -0
  52. package/es/table-component/footer/TableFooter.js +33 -0
  53. package/es/table-component/footer/TableFooterCell.d.ts +10 -0
  54. package/es/table-component/footer/TableFooterCell.js +24 -0
  55. package/es/table-component/footer/TableFooterRow.d.ts +14 -0
  56. package/es/table-component/footer/TableFooterRow.js +71 -0
  57. package/es/table-component/header/TableHead.d.ts +14 -0
  58. package/es/table-component/header/TableHead.js +60 -0
  59. package/es/table-component/header/TableHeadCell.d.ts +14 -0
  60. package/es/table-component/header/TableHeadCell.js +324 -0
  61. package/es/table-component/header/TableHeadRow.d.ts +16 -0
  62. package/es/table-component/header/TableHeadRow.js +86 -0
  63. package/es/table-component/header/renderFilter.d.ts +20 -0
  64. package/es/table-component/header/renderFilter.js +281 -0
  65. package/es/table-component/hook/constant.d.ts +73 -0
  66. package/es/table-component/hook/constant.js +240 -0
  67. package/es/table-component/hook/useColumns.d.ts +11 -0
  68. package/es/table-component/hook/useColumns.js +209 -0
  69. package/es/table-component/hook/useFilterOperator.d.ts +7 -0
  70. package/es/table-component/hook/useFilterOperator.js +33 -0
  71. package/es/table-component/hook/utils.d.ts +121 -0
  72. package/es/table-component/hook/utils.js +1727 -0
  73. package/es/table-component/index.d.ts +5 -0
  74. package/es/table-component/index.js +2 -0
  75. package/es/table-component/style.scss +1083 -0
  76. package/es/table-component/table/Grid.d.ts +23 -0
  77. package/es/table-component/table/Grid.js +310 -0
  78. package/es/table-component/table/GridEdit.d.ts +23 -0
  79. package/es/table-component/table/GridEdit.js +282 -0
  80. package/es/table-component/type.d.ts +482 -0
  81. package/es/table-component/type.js +1 -0
  82. package/es/table-component/useContext.d.ts +119 -0
  83. package/es/table-component/useContext.js +61 -0
  84. package/lib/index.d.ts +1 -0
  85. package/lib/index.js +8 -1
  86. package/lib/table-component/ColumnsChoose.d.ts +10 -0
  87. package/lib/table-component/ColumnsChoose.js +568 -0
  88. package/lib/table-component/ContextMenu.d.ts +20 -0
  89. package/lib/table-component/ContextMenu.js +85 -0
  90. package/lib/table-component/InternalTable.d.ts +9 -0
  91. package/lib/table-component/InternalTable.js +299 -0
  92. package/lib/table-component/TableContainer.d.ts +22 -0
  93. package/lib/table-component/TableContainer.js +137 -0
  94. package/lib/table-component/TableContainerEdit.d.ts +28 -0
  95. package/lib/table-component/TableContainerEdit.js +1220 -0
  96. package/lib/table-component/body/EditableCell.d.ts +16 -0
  97. package/lib/table-component/body/EditableCell.js +1038 -0
  98. package/lib/table-component/body/TableBody.d.ts +19 -0
  99. package/lib/table-component/body/TableBody.js +72 -0
  100. package/lib/table-component/body/TableBodyCell.d.ts +10 -0
  101. package/lib/table-component/body/TableBodyCell.js +148 -0
  102. package/lib/table-component/body/TableBodyCellEdit.d.ts +15 -0
  103. package/lib/table-component/body/TableBodyCellEdit.js +821 -0
  104. package/lib/table-component/body/TableBodyRow.d.ts +21 -0
  105. package/lib/table-component/body/TableBodyRow.js +153 -0
  106. package/lib/table-component/components/ControlCheckbox.d.ts +13 -0
  107. package/lib/table-component/components/ControlCheckbox.js +95 -0
  108. package/lib/table-component/components/EditForm/EditForm.d.ts +27 -0
  109. package/lib/table-component/components/EditForm/EditForm.js +406 -0
  110. package/lib/table-component/components/EditForm/index.d.ts +1 -0
  111. package/lib/table-component/components/EditForm/index.js +16 -0
  112. package/lib/table-component/components/InputControl/InputControl.d.ts +27 -0
  113. package/lib/table-component/components/InputControl/InputControl.js +131 -0
  114. package/lib/table-component/components/InputControl/index.d.ts +1 -0
  115. package/lib/table-component/components/InputControl/index.js +16 -0
  116. package/lib/table-component/components/async-select/index.d.ts +11 -0
  117. package/lib/table-component/components/async-select/index.js +49 -0
  118. package/lib/table-component/components/async-table-select/index.d.ts +11 -0
  119. package/lib/table-component/components/async-table-select/index.js +51 -0
  120. package/lib/table-component/components/checkbox-control/index.d.ts +13 -0
  121. package/lib/table-component/components/checkbox-control/index.js +48 -0
  122. package/lib/table-component/components/checkbox-filter/CheckboxFilter.d.ts +18 -0
  123. package/lib/table-component/components/checkbox-filter/CheckboxFilter.js +249 -0
  124. package/lib/table-component/components/checkbox-filter/FilterSearch.d.ts +12 -0
  125. package/lib/table-component/components/checkbox-filter/FilterSearch.js +44 -0
  126. package/lib/table-component/components/command/Command.d.ts +9 -0
  127. package/lib/table-component/components/command/Command.js +37 -0
  128. package/lib/table-component/components/number/index.d.ts +10 -0
  129. package/lib/table-component/components/number/index.js +50 -0
  130. package/lib/table-component/components/number-range/index.d.ts +11 -0
  131. package/lib/table-component/components/number-range/index.js +74 -0
  132. package/lib/table-component/features/operator.d.ts +24 -0
  133. package/lib/table-component/features/operator.js +67 -0
  134. package/lib/table-component/footer/TableFooter.d.ts +13 -0
  135. package/lib/table-component/footer/TableFooter.js +42 -0
  136. package/lib/table-component/footer/TableFooterCell.d.ts +10 -0
  137. package/lib/table-component/footer/TableFooterCell.js +32 -0
  138. package/lib/table-component/footer/TableFooterRow.d.ts +14 -0
  139. package/lib/table-component/footer/TableFooterRow.js +79 -0
  140. package/lib/table-component/header/TableHead.d.ts +14 -0
  141. package/lib/table-component/header/TableHead.js +69 -0
  142. package/lib/table-component/header/TableHeadCell.d.ts +14 -0
  143. package/lib/table-component/header/TableHeadCell.js +333 -0
  144. package/lib/table-component/header/TableHeadRow.d.ts +16 -0
  145. package/lib/table-component/header/TableHeadRow.js +94 -0
  146. package/lib/table-component/header/renderFilter.d.ts +20 -0
  147. package/lib/table-component/header/renderFilter.js +291 -0
  148. package/lib/table-component/hook/constant.d.ts +73 -0
  149. package/lib/table-component/hook/constant.js +247 -0
  150. package/lib/table-component/hook/useColumns.d.ts +11 -0
  151. package/lib/table-component/hook/useColumns.js +220 -0
  152. package/lib/table-component/hook/useFilterOperator.d.ts +7 -0
  153. package/lib/table-component/hook/useFilterOperator.js +40 -0
  154. package/lib/table-component/hook/utils.d.ts +121 -0
  155. package/lib/table-component/hook/utils.js +1817 -0
  156. package/lib/table-component/index.d.ts +5 -0
  157. package/lib/table-component/index.js +9 -0
  158. package/lib/table-component/style.scss +1083 -0
  159. package/lib/table-component/table/Grid.d.ts +23 -0
  160. package/lib/table-component/table/Grid.js +313 -0
  161. package/lib/table-component/table/GridEdit.d.ts +23 -0
  162. package/lib/table-component/table/GridEdit.js +284 -0
  163. package/lib/table-component/type.d.ts +482 -0
  164. package/lib/table-component/type.js +5 -0
  165. package/lib/table-component/useContext.d.ts +119 -0
  166. package/lib/table-component/useContext.js +67 -0
  167. package/package.json +3 -1
package/es/index.d.ts CHANGED
@@ -16,3 +16,4 @@ export { default as Splitter } from './splitter';
16
16
  export type { SplitterProps } from './splitter';
17
17
  export { default as Collapse } from './collapse';
18
18
  export type { CollapsePanelProps, CollapseProps } from './collapse';
19
+ export { default as TableComponent } from './table-component';
package/es/index.js CHANGED
@@ -6,4 +6,6 @@ export { default as Select } from "./select";
6
6
  export { default as DateRangePicker } from "./date-range-picker";
7
7
  export { default as DatePicker } from "./datepicker";
8
8
  export { default as Splitter } from "./splitter";
9
- export { default as Collapse } from "./collapse";
9
+ export { default as Collapse } from "./collapse";
10
+ export { default as TableComponent } from "./table-component";
11
+ // export type { ColumnsTable, TableProps, ColumnTable, CommandItem, ToolbarItem, ContextMenuItem } from './table-component';
@@ -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,557 @@
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
+ // // setSelectedKeys(keys)
215
+ // setMergedSelectedKeys(keys)
216
+ // // setIsManualUpdate(true)
217
+ //
218
+ // }
219
+ //
220
+ // const handleAccept = () => {
221
+ //
222
+ // console.log('mergedSelectedKeys', mergedSelectedKeys)
223
+ //
224
+ // // const rs1 = updateColumns(propsColumns, selectedKeys)
225
+ // const rs1 = updateColumns(propsColumns, mergedSelectedKeys)
226
+ //
227
+ //
228
+ // triggerChangeColumns?.(rs1, 'columnChoose')
229
+ //
230
+ // hide()
231
+ //
232
+ // }
233
+ //
234
+ // const handleCancel = () => {
235
+ // // setSelectedKeys(defaultSelectedKeys)
236
+ // hide()
237
+ // }
238
+ //
239
+ //
240
+ // return (
241
+ // <Fragment>
242
+ // <Popover
243
+ // placement={'bottomLeft'}
244
+ // content={
245
+ // <div style={{minWidth: 250}}>
246
+ // <Input style={{ marginBottom: 8 }} placeholder={t ? t("Search") : 'Search'} prefix={<SearchOutlined />} onChange={onChange} />
247
+ //
248
+ // <Tree
249
+ // onExpand={onExpand}
250
+ // // expandedKeys={expandedKeys}
251
+ // autoExpandParent={autoExpandParent}
252
+ // // treeData={treeData}
253
+ // treeData={columns}
254
+ // defaultExpandAll={true}
255
+ // checkable={true}
256
+ // // onSelect={(keys, info) => {
257
+ // // const key = info.node.key
258
+ // //
259
+ // // const find = findItemByKey(columns, 'key', key)
260
+ // //
261
+ // // // const tmpColumn
262
+ // //
263
+ // // // if (selectedKeys.includes(key as string)) {
264
+ // // // const rssss = findKeyPath(columns, key as string)
265
+ // // // const rs = selectedKeys.filter(item => !rssss.includes(item));
266
+ // // //
267
+ // // // setSelectedKeys(rs)
268
+ // // // } else {
269
+ // //
270
+ // // // const rs = [...selectedKeys, keys[0]]
271
+ // //
272
+ // // // setSelectedKeys(keys)
273
+ // // // }
274
+ // // }}
275
+ // onCheck={(keys) => onCheck(keys as string[])}
276
+ //
277
+ //
278
+ // multiple={true}
279
+ // // checkedKeys={selectedKeys}
280
+ //
281
+ // defaultCheckedKeys={mergedSelectedKeys}
282
+ // // defaultCheckedKeys={defaultSelectedKeys}
283
+ // // selectedKeys={[]}
284
+ //
285
+ // height={window.innerHeight - 200}
286
+ //
287
+ // />
288
+ //
289
+ //
290
+ // <BoxAction className={'px-1'}>
291
+ // <Button
292
+ // // className={classnames('btn-action btn-action-submit', {
293
+ // // // disable: !columns.find((item) => item.visible !== false || item.visible)
294
+ // // })}
295
+ // onClick={handleAccept}
296
+ // // disabled={!columns.find((item) => item.visible !== false || item.visible)}
297
+ // >
298
+ // {t ? t('OK') : 'OK'}
299
+ // {/*{'OK'}*/}
300
+ // </Button>
301
+ //
302
+ // {/*<Button className={'btn-action btn-action-cancel'} onClick={hide} >{('Cancel') }</Button>*/}
303
+ // <Button className={'btn-action btn-action-cancel'} onClick={handleCancel} >{t ? t('Cancel') : 'Cancel' }</Button>
304
+ // </BoxAction>
305
+ // </div>
306
+ // }
307
+ // trigger="click"
308
+ // open={clicked}
309
+ // onOpenChange={handleClickChange}
310
+ // arrow={false}
311
+ // >
312
+ // <Tooltip arrow={false} title={'Cài đặt'} >
313
+ // <SettingOutlined size={16} color={'#555555'} style={{fontSize: 16, color: '#555555'}} />
314
+ // </Tooltip>
315
+ //
316
+ // </Popover>
317
+ // </Fragment>
318
+ // )
319
+ // }
320
+
321
+ import React, { Fragment, useEffect, useMemo, useState } from "react";
322
+ import styled from "styled-components";
323
+ import { Button, Input, Popover, Tooltip } from "antd";
324
+ import { SettingOutlined } from "@ant-design/icons";
325
+ // import {
326
+ // getVisibleColumnKeys,
327
+ // updateColumns
328
+ // } from "./hooks"
329
+
330
+ // import type {TableColumnsType} from "rc-master-ui";
331
+ import Tree from "rc-master-ui/es/tree";
332
+ import SearchOutlined from "@ant-design/icons/SearchOutlined";
333
+ import { getVisibleColumnKeys } from "./hook/utils";
334
+ const BoxAction = styled.div.withConfig({
335
+ displayName: "BoxAction",
336
+ componentId: "es-grid-template__sc-jfujqh-0"
337
+ })(["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;}}"]);
338
+ export const ColumnsChoose = props => {
339
+ const {
340
+ columns: propsColumns,
341
+ // triggerChangeColumns,
342
+ // triggerChangeKeys,
343
+ t,
344
+ columnsGroup
345
+ } = props;
346
+
347
+ // const dataList: { key: React.Key; title: string }[] = [];
348
+
349
+ // const defaultColumns = useMemo(() => {
350
+ // return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
351
+ // }, [propsColumns])
352
+
353
+ // const columnsChooseRef: any = useRef()
354
+ // const searchRef: any = useRef()
355
+
356
+ // const [columns, setColumns] = useState<TableColumnsType>([])
357
+ const [selectedKeys, setSelectedKeys] = useState([]);
358
+ const [isManualUpdate, setIsManualUpdate] = useState(false);
359
+
360
+ // useEffect(() => {
361
+ //
362
+ // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
363
+ // setColumns(defaultColumns as TableColumnsType)
364
+ //
365
+ // }, [propsColumns])
366
+
367
+ const columns = useMemo(() => {
368
+ return propsColumns.filter(it => it.field && it.showInColumnChoose !== false);
369
+ // setColumns(defaultColumns as TableColumnsType)
370
+ }, [propsColumns]);
371
+ console.log('columns', columns);
372
+ useEffect(() => {
373
+ // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
374
+ const defaultColumns = propsColumns.filter(it => it.field && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
375
+ const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns);
376
+ if (!isManualUpdate) {
377
+ setSelectedKeys(defaultSelectedKeys);
378
+ }
379
+ setIsManualUpdate(false);
380
+ }, [propsColumns]);
381
+ const defaultSelectedKeys = useMemo(() => {
382
+ const defaultColumns = propsColumns.filter(it => it.field && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
383
+ return getVisibleColumnKeys(defaultColumns);
384
+ }, [columnsGroup, propsColumns]);
385
+ const [clicked, setClicked] = useState(false);
386
+ const [autoExpandParent, setAutoExpandParent] = useState(true);
387
+
388
+ // const treeData = useMemo(() => {
389
+ // const loop = (data: TreeDataNode[]): TreeDataNode[] =>
390
+ // data.map((item) => {
391
+ // const strTitle = item.title as string;
392
+ // const index = strTitle.indexOf(searchValue);
393
+ // const beforeStr = strTitle.substring(0, index);
394
+ // const afterStr = strTitle.slice(index + searchValue.length);
395
+ // const title =
396
+ // index > -1 ? (
397
+ // <span key={item.key}>
398
+ // {beforeStr}
399
+ // <span className="site-tree-search-value">{searchValue}</span>
400
+ // {afterStr}
401
+ // </span>
402
+ // ) : (
403
+ // <span key={item.key}>{strTitle}</span>
404
+ // );
405
+ // if (item.children) {
406
+ // return { title, key: item.key, children: loop(item.children) };
407
+ // }
408
+ //
409
+ // return {
410
+ // title,
411
+ // key: item.key,
412
+ // };
413
+ // });
414
+ //
415
+ // // return loop(defaultData);
416
+ // return loop(columns as any);
417
+ // }, [searchValue, columns]);
418
+
419
+ const hide = () => {
420
+ setClicked(false);
421
+ };
422
+ const handleClickChange = open => {
423
+ setClicked(open);
424
+ };
425
+ const onExpand = () => {
426
+ // setExpandedKeys(newExpandedKeys)
427
+ setAutoExpandParent(false);
428
+ };
429
+
430
+ // const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
431
+ // let parentKey: React.Key
432
+ // for (let i = 0; i < tree.length; i++) {
433
+ // const node = tree[i]
434
+ // if (node.children) {
435
+ // if (node.children.some((item) => item.key === key)) {
436
+ // parentKey = node.key
437
+ // } else if (getParentKey(key, node.children)) {
438
+ // parentKey = getParentKey(key, node.children)
439
+ // }
440
+ // }
441
+ // }
442
+ // return parentKey!
443
+ // }
444
+
445
+ // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
446
+ const onChange = () => {
447
+ // const { value } = e.target
448
+ // const newExpandedKeys = dataList
449
+ // .map((item) => {
450
+ // if (item.title.indexOf(value) > -1) {
451
+ // return getParentKey(item.key, defaultData)
452
+ // }
453
+ // return null
454
+ // })
455
+ // .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
456
+ // setExpandedKeys(newExpandedKeys)
457
+
458
+ // setSearchValue(value)
459
+ setAutoExpandParent(true);
460
+ };
461
+ const onCheck = keys => {
462
+ setSelectedKeys(keys);
463
+ setIsManualUpdate(true);
464
+ };
465
+ const handleAccept = () => {
466
+ // const rs1 = updateColumns(propsColumns, selectedKeys)
467
+
468
+ // triggerChangeKeys?.(selectedKeys)
469
+
470
+ // triggerChangeColumns?.(rs1, 'columnChoose')
471
+
472
+ hide();
473
+ };
474
+ const handleCancel = () => {
475
+ setSelectedKeys(defaultSelectedKeys);
476
+ hide();
477
+ };
478
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
479
+ placement: 'bottomLeft',
480
+ content: /*#__PURE__*/React.createElement("div", {
481
+ style: {
482
+ minWidth: 250,
483
+ maxWidth: 320
484
+ }
485
+ }, /*#__PURE__*/React.createElement(Input, {
486
+ style: {
487
+ marginBottom: 8
488
+ },
489
+ placeholder: t ? t("Search") : 'Search',
490
+ prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
491
+ onChange: onChange
492
+ }), /*#__PURE__*/React.createElement(Tree, {
493
+ onExpand: onExpand
494
+ // expandedKeys={expandedKeys}
495
+ ,
496
+ autoExpandParent: autoExpandParent
497
+ // treeData={treeData}
498
+ // treeData={columns.filter((it) => !columnsGroup?.includes(it.field as string))}
499
+ ,
500
+ treeData: [],
501
+ defaultExpandAll: true,
502
+ checkable: true
503
+ // onSelect={(keys, info) => {
504
+ // const key = info.node.key
505
+ //
506
+ // const find = findItemByKey(columns, 'key', key)
507
+ //
508
+ // // const tmpColumn
509
+ //
510
+ // // if (selectedKeys.includes(key as string)) {
511
+ // // const rssss = findKeyPath(columns, key as string)
512
+ // // const rs = selectedKeys.filter(item => !rssss.includes(item));
513
+ // //
514
+ // // setSelectedKeys(rs)
515
+ // // } else {
516
+ //
517
+ // // const rs = [...selectedKeys, keys[0]]
518
+ //
519
+ // // setSelectedKeys(keys)
520
+ // // }
521
+ // }}
522
+ ,
523
+ onCheck: keys => onCheck(keys),
524
+ multiple: true,
525
+ checkedKeys: selectedKeys,
526
+ defaultCheckedKeys: selectedKeys
527
+ // defaultCheckedKeys={defaultSelectedKeys}
528
+ ,
529
+ selectedKeys: []
530
+
531
+ // height={window.innerHeight - 200}
532
+ ,
533
+ height: window.innerHeight / 2 > 450 ? 450 : window.innerHeight / 2 - 110
534
+ // style={{height: 300}}
535
+ }), /*#__PURE__*/React.createElement(BoxAction, {
536
+ className: 'px-1'
537
+ }, /*#__PURE__*/React.createElement(Button
538
+ // className={classnames('btn-action btn-action-submit', {
539
+ // // disable: !columns.find((item) => item.visible !== false || item.visible)
540
+ // })}
541
+ , {
542
+ onClick: handleAccept
543
+ // disabled={!columns.find((item) => item.visible !== false || item.visible)}
544
+ }, t ? t('OK') : 'OK'), /*#__PURE__*/React.createElement(Button, {
545
+ className: 'btn-action btn-action-cancel',
546
+ onClick: handleCancel
547
+ }, t ? t('Cancel') : 'Cancel'))),
548
+ trigger: "click",
549
+ open: clicked,
550
+ onOpenChange: handleClickChange,
551
+ arrow: false,
552
+ zIndex: 1065
553
+ }, /*#__PURE__*/React.createElement(Tooltip, {
554
+ arrow: false,
555
+ title: 'Cài đặt'
556
+ }, /*#__PURE__*/React.createElement(SettingOutlined, null))));
557
+ };
@@ -0,0 +1,20 @@
1
+ import * as React from "react";
2
+ import type { ContextInfo } from "./type";
3
+ import type { ContextMenuItem } from "./type";
4
+ export declare const findItemByKey: (array: any[], key: string, value: any) => any;
5
+ type Props<RecordType> = {
6
+ rowData: RecordType | null;
7
+ contextMenuItems: ContextMenuItem[];
8
+ contextMenuClick?: (args: ContextInfo<RecordType>) => void;
9
+ open: boolean;
10
+ menuRef?: any;
11
+ setOpen: (open: boolean) => void;
12
+ pos: {
13
+ x: number | undefined;
14
+ y: number | undefined;
15
+ viewportWidth: number;
16
+ viewportHeight: number;
17
+ };
18
+ };
19
+ declare const ContextMenu: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
20
+ export default ContextMenu;
@@ -0,0 +1,75 @@
1
+ import * as React from "react";
2
+ // import type { MenuProps } from "antd";
3
+ import { Dropdown, Menu } from "antd";
4
+ export const findItemByKey = (array, key, value) => {
5
+ for (let i = 0; i < array.length; i++) {
6
+ const item = array[i];
7
+ if (item[key] === value) {
8
+ return item;
9
+ }
10
+ if (item.children && item.children.length > 0) {
11
+ const foundInChildren = findItemByKey(item.children, key, value);
12
+ if (foundInChildren) {
13
+ return foundInChildren;
14
+ }
15
+ }
16
+ }
17
+ return null;
18
+ };
19
+ const ContextMenu = props => {
20
+ const {
21
+ menuRef,
22
+ open,
23
+ setOpen,
24
+ pos,
25
+ contextMenuClick,
26
+ contextMenuItems,
27
+ rowData
28
+ } = props;
29
+ return /*#__PURE__*/React.createElement(Dropdown, {
30
+ placement: 'topRight',
31
+ open: open,
32
+ overlayClassName: 'be-popup-container',
33
+ overlayStyle: {
34
+ left: `${pos.x}px`,
35
+ top: `${pos.y}px`
36
+ },
37
+ dropdownRender: () => {
38
+ return /*#__PURE__*/React.createElement("div", {
39
+ ref: menuRef
40
+ }, /*#__PURE__*/React.createElement(Menu, {
41
+ items: contextMenuItems,
42
+ style: {
43
+ minWidth: 200,
44
+ maxHeight: pos.viewportHeight - 20,
45
+ width: 'fit-content'
46
+ },
47
+ rootClassName: 'popup-context-menu'
48
+ // rootClassName={'be-popup-container'}
49
+ ,
50
+
51
+ onClick: e => {
52
+ setOpen(false);
53
+ contextMenuClick?.({
54
+ rowInfo: {
55
+ rowData
56
+ },
57
+ event: e.domEvent,
58
+ item: {
59
+ ...findItemByKey(contextMenuItems, 'key', e.key),
60
+ id: e.key
61
+ }
62
+ });
63
+
64
+ // if (!open) {
65
+ // document.addEventListener(`click`, function onClickOutside() {
66
+ // setOpen(false);
67
+ // document.removeEventListener(`click`, onClickOutside);
68
+ // });
69
+ // }
70
+ }
71
+ }));
72
+ }
73
+ }, /*#__PURE__*/React.createElement(React.Fragment, null));
74
+ };
75
+ export default ContextMenu;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import 'react-resizable/css/styles.css';
3
+ import 'dayjs/locale/es';
4
+ import 'dayjs/locale/vi';
5
+ import './style.scss';
6
+ import type { TableProps } from './type';
7
+ export declare const SELECTION_COLUMN: {};
8
+ declare const InternalTable: <RecordType extends object>(props: TableProps<RecordType>) => React.JSX.Element;
9
+ export default InternalTable;