es-grid-template 1.8.64 → 1.8.66

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 (222) hide show
  1. package/es/grid-component/TempTable.d.ts +2 -2
  2. package/es/grid-component/TempTable.js +5 -5
  3. package/es/grid-component/hooks/index.js +0 -1
  4. package/es/grid-component/hooks/useLazyKVMap.d.ts +1 -1
  5. package/es/grid-component/hooks/useLazyKVMap.js +0 -4
  6. package/es/grid-component/hooks/utils.d.ts +1 -8
  7. package/es/grid-component/hooks/utils.js +176 -144
  8. package/es/grid-component/index.d.ts +1 -1
  9. package/es/grid-component/index.js +0 -4
  10. package/es/grid-component/styles.scss +1394 -1394
  11. package/es/grid-component/type.d.ts +0 -407
  12. package/es/grid-component/type.js +490 -1
  13. package/es/table-component/type.d.ts +10 -0
  14. package/es/{grid-component → table-virtuoso}/ColumnsGroup/ColumnsGroup.js +4 -3
  15. package/es/{grid-component → table-virtuoso}/InternalTable.d.ts +2 -3
  16. package/es/table-virtuoso/InternalTable.js +391 -0
  17. package/es/table-virtuoso/body/TableBodyCell.d.ts +14 -0
  18. package/es/table-virtuoso/body/TableBodyCell.js +457 -0
  19. package/es/table-virtuoso/body/TableBodyRow.d.ts +13 -0
  20. package/es/table-virtuoso/body/TableBodyRow.js +112 -0
  21. package/es/table-virtuoso/footer/TableFooterCell.d.ts +7 -0
  22. package/es/table-virtuoso/footer/TableFooterCell.js +54 -0
  23. package/es/table-virtuoso/header/TableHeadCell.d.ts +14 -0
  24. package/es/table-virtuoso/header/TableHeadCell.js +265 -0
  25. package/es/table-virtuoso/header/renderFilter.d.ts +20 -0
  26. package/es/table-virtuoso/header/renderFilter.js +289 -0
  27. package/es/table-virtuoso/hook/constant.d.ts +73 -0
  28. package/es/table-virtuoso/hook/constant.js +240 -0
  29. package/es/table-virtuoso/hook/convert.d.ts +1 -0
  30. package/es/table-virtuoso/hook/convert.js +28 -0
  31. package/es/table-virtuoso/hook/useColumns.d.ts +28 -0
  32. package/es/table-virtuoso/hook/useColumns.js +302 -0
  33. package/es/table-virtuoso/hook/useFilterOperator.d.ts +7 -0
  34. package/es/table-virtuoso/hook/useFilterOperator.js +33 -0
  35. package/es/table-virtuoso/hook/utils.d.ts +159 -0
  36. package/es/table-virtuoso/hook/utils.js +2263 -0
  37. package/es/table-virtuoso/index.d.ts +2 -0
  38. package/es/table-virtuoso/index.js +2 -0
  39. package/es/table-virtuoso/style.d.ts +22 -0
  40. package/es/table-virtuoso/style.js +12 -0
  41. package/es/table-virtuoso/style.scss +1441 -0
  42. package/es/table-virtuoso/table/Grid.d.ts +37 -0
  43. package/es/table-virtuoso/table/Grid.js +298 -0
  44. package/es/table-virtuoso/table/TableContainer.d.ts +49 -0
  45. package/es/table-virtuoso/table/TableContainer.js +292 -0
  46. package/es/table-virtuoso/table/TableWrapper.d.ts +22 -0
  47. package/es/table-virtuoso/table/TableWrapper.js +161 -0
  48. package/es/table-virtuoso/type.d.ts +0 -0
  49. package/es/table-virtuoso/type.js +785 -0
  50. package/es/table-virtuoso/useContext.d.ts +97 -0
  51. package/es/table-virtuoso/useContext.js +21 -0
  52. package/lib/grid-component/TempTable.d.ts +2 -2
  53. package/lib/grid-component/TempTable.js +5 -7
  54. package/lib/grid-component/hooks/useLazyKVMap.d.ts +1 -1
  55. package/lib/grid-component/hooks/useLazyKVMap.js +0 -3
  56. package/lib/grid-component/hooks/utils.d.ts +1 -8
  57. package/lib/grid-component/hooks/utils.js +179 -152
  58. package/lib/grid-component/index.d.ts +1 -1
  59. package/lib/grid-component/index.js +0 -3
  60. package/lib/grid-component/styles.scss +1394 -1394
  61. package/lib/grid-component/type.d.ts +0 -407
  62. package/lib/grid-component/type.js +490 -4
  63. package/lib/table-component/type.d.ts +10 -0
  64. package/lib/{grid-component → table-virtuoso}/ColumnsGroup/ColumnsGroup.js +4 -3
  65. package/lib/{grid-component → table-virtuoso}/InternalTable.d.ts +2 -3
  66. package/lib/table-virtuoso/InternalTable.js +400 -0
  67. package/lib/table-virtuoso/body/TableBodyCell.d.ts +14 -0
  68. package/lib/table-virtuoso/body/TableBodyCell.js +464 -0
  69. package/lib/table-virtuoso/body/TableBodyRow.d.ts +13 -0
  70. package/lib/table-virtuoso/body/TableBodyRow.js +119 -0
  71. package/lib/table-virtuoso/footer/TableFooterCell.d.ts +7 -0
  72. package/lib/table-virtuoso/footer/TableFooterCell.js +63 -0
  73. package/lib/table-virtuoso/header/TableHeadCell.d.ts +14 -0
  74. package/lib/table-virtuoso/header/TableHeadCell.js +274 -0
  75. package/lib/table-virtuoso/header/renderFilter.d.ts +20 -0
  76. package/lib/table-virtuoso/header/renderFilter.js +299 -0
  77. package/lib/table-virtuoso/hook/constant.d.ts +73 -0
  78. package/lib/table-virtuoso/hook/constant.js +247 -0
  79. package/lib/table-virtuoso/hook/convert.d.ts +1 -0
  80. package/lib/table-virtuoso/hook/convert.js +34 -0
  81. package/lib/table-virtuoso/hook/useColumns.d.ts +28 -0
  82. package/lib/table-virtuoso/hook/useColumns.js +315 -0
  83. package/lib/table-virtuoso/hook/useFilterOperator.d.ts +7 -0
  84. package/lib/table-virtuoso/hook/useFilterOperator.js +40 -0
  85. package/lib/table-virtuoso/hook/utils.d.ts +159 -0
  86. package/lib/table-virtuoso/hook/utils.js +2389 -0
  87. package/lib/table-virtuoso/index.d.ts +2 -0
  88. package/lib/table-virtuoso/index.js +9 -0
  89. package/lib/table-virtuoso/style.d.ts +22 -0
  90. package/lib/table-virtuoso/style.js +19 -0
  91. package/lib/table-virtuoso/style.scss +1441 -0
  92. package/lib/table-virtuoso/table/Grid.d.ts +37 -0
  93. package/lib/table-virtuoso/table/Grid.js +307 -0
  94. package/lib/table-virtuoso/table/TableContainer.d.ts +49 -0
  95. package/lib/table-virtuoso/table/TableContainer.js +300 -0
  96. package/lib/table-virtuoso/table/TableWrapper.d.ts +22 -0
  97. package/lib/table-virtuoso/table/TableWrapper.js +166 -0
  98. package/lib/table-virtuoso/type.d.ts +0 -0
  99. package/lib/table-virtuoso/type.js +786 -0
  100. package/lib/table-virtuoso/useContext.d.ts +97 -0
  101. package/lib/table-virtuoso/useContext.js +27 -0
  102. package/package.json +2 -1
  103. package/es/grid-component/AdvanceFilter.d.ts +0 -14
  104. package/es/grid-component/AdvanceFilter.js +0 -454
  105. package/es/grid-component/CheckboxFilter.d.ts +0 -20
  106. package/es/grid-component/CheckboxFilter.js +0 -244
  107. package/es/grid-component/CheckboxFilter2.d.ts +0 -20
  108. package/es/grid-component/CheckboxFilter2.js +0 -244
  109. package/es/grid-component/ColumnsChoose.d.ts +0 -10
  110. package/es/grid-component/ColumnsChoose.js +0 -230
  111. package/es/grid-component/Command.d.ts +0 -8
  112. package/es/grid-component/Command.js +0 -80
  113. package/es/grid-component/ContextMenu.d.ts +0 -20
  114. package/es/grid-component/ContextMenu.js +0 -130
  115. package/es/grid-component/ConvertColumnTable.d.ts +0 -7
  116. package/es/grid-component/ConvertColumnTable.js +0 -144
  117. package/es/grid-component/EditForm/EditForm.d.ts +0 -27
  118. package/es/grid-component/EditForm/EditForm.js +0 -394
  119. package/es/grid-component/EditForm/index.d.ts +0 -1
  120. package/es/grid-component/EditForm/index.js +0 -1
  121. package/es/grid-component/EditableCell.d.ts +0 -20
  122. package/es/grid-component/EditableCell.js +0 -1030
  123. package/es/grid-component/FilterSearch.d.ts +0 -12
  124. package/es/grid-component/FilterSearch.js +0 -33
  125. package/es/grid-component/GridStyle.d.ts +0 -8
  126. package/es/grid-component/GridStyle.js +0 -5
  127. package/es/grid-component/InternalTable.js +0 -1170
  128. package/es/grid-component/TableGrid.d.ts +0 -21
  129. package/es/grid-component/TableGrid.js +0 -493
  130. package/es/grid-component/async-select/index.d.ts +0 -11
  131. package/es/grid-component/async-select/index.js +0 -38
  132. package/es/grid-component/async-table-select/index.d.ts +0 -11
  133. package/es/grid-component/async-table-select/index.js +0 -40
  134. package/es/grid-component/checkbox-control/index.d.ts +0 -13
  135. package/es/grid-component/checkbox-control/index.js +0 -40
  136. package/es/grid-component/hooks/columns/index.d.ts +0 -10
  137. package/es/grid-component/hooks/columns/index.js +0 -503
  138. package/es/grid-component/hooks/content/ControlCheckbox.d.ts +0 -13
  139. package/es/grid-component/hooks/content/ControlCheckbox.js +0 -87
  140. package/es/grid-component/hooks/content/HeaderContent.d.ts +0 -14
  141. package/es/grid-component/hooks/content/HeaderContent.js +0 -44
  142. package/es/grid-component/hooks/content/TooltipContent.d.ts +0 -13
  143. package/es/grid-component/hooks/content/TooltipContent.js +0 -74
  144. package/es/grid-component/hooks/useColumns.d.ts +0 -19
  145. package/es/grid-component/hooks/useColumns.js +0 -317
  146. package/es/grid-component/number/index.d.ts +0 -10
  147. package/es/grid-component/number/index.js +0 -39
  148. package/es/grid-component/number-range/index.d.ts +0 -11
  149. package/es/grid-component/number-range/index.js +0 -63
  150. package/es/grid-component/table/Grid.d.ts +0 -23
  151. package/es/grid-component/table/Grid.js +0 -49
  152. package/es/grid-component/table/GridEdit.d.ts +0 -23
  153. package/es/grid-component/table/GridEdit.js +0 -2726
  154. package/es/grid-component/table/Group.d.ts +0 -21
  155. package/es/grid-component/table/Group.js +0 -195
  156. package/es/grid-component/table/InfiniteTable.d.ts +0 -23
  157. package/es/grid-component/table/InfiniteTable.js +0 -101
  158. package/es/grid-component/useContext.d.ts +0 -34
  159. package/es/grid-component/useContext.js +0 -8
  160. package/lib/grid-component/AdvanceFilter.d.ts +0 -14
  161. package/lib/grid-component/AdvanceFilter.js +0 -463
  162. package/lib/grid-component/CheckboxFilter.d.ts +0 -20
  163. package/lib/grid-component/CheckboxFilter.js +0 -253
  164. package/lib/grid-component/CheckboxFilter2.d.ts +0 -20
  165. package/lib/grid-component/CheckboxFilter2.js +0 -253
  166. package/lib/grid-component/ColumnsChoose.d.ts +0 -10
  167. package/lib/grid-component/ColumnsChoose.js +0 -240
  168. package/lib/grid-component/Command.d.ts +0 -8
  169. package/lib/grid-component/Command.js +0 -88
  170. package/lib/grid-component/ContextMenu.d.ts +0 -20
  171. package/lib/grid-component/ContextMenu.js +0 -140
  172. package/lib/grid-component/ConvertColumnTable.d.ts +0 -7
  173. package/lib/grid-component/ConvertColumnTable.js +0 -153
  174. package/lib/grid-component/EditForm/EditForm.d.ts +0 -27
  175. package/lib/grid-component/EditForm/EditForm.js +0 -404
  176. package/lib/grid-component/EditForm/index.d.ts +0 -1
  177. package/lib/grid-component/EditForm/index.js +0 -16
  178. package/lib/grid-component/EditableCell.d.ts +0 -20
  179. package/lib/grid-component/EditableCell.js +0 -1032
  180. package/lib/grid-component/FilterSearch.d.ts +0 -12
  181. package/lib/grid-component/FilterSearch.js +0 -42
  182. package/lib/grid-component/GridStyle.d.ts +0 -8
  183. package/lib/grid-component/GridStyle.js +0 -12
  184. package/lib/grid-component/InternalTable.js +0 -1178
  185. package/lib/grid-component/TableGrid.d.ts +0 -21
  186. package/lib/grid-component/TableGrid.js +0 -493
  187. package/lib/grid-component/async-select/index.d.ts +0 -11
  188. package/lib/grid-component/async-select/index.js +0 -47
  189. package/lib/grid-component/async-table-select/index.d.ts +0 -11
  190. package/lib/grid-component/async-table-select/index.js +0 -49
  191. package/lib/grid-component/checkbox-control/index.d.ts +0 -13
  192. package/lib/grid-component/checkbox-control/index.js +0 -48
  193. package/lib/grid-component/hooks/columns/index.d.ts +0 -10
  194. package/lib/grid-component/hooks/columns/index.js +0 -518
  195. package/lib/grid-component/hooks/content/ControlCheckbox.d.ts +0 -13
  196. package/lib/grid-component/hooks/content/ControlCheckbox.js +0 -95
  197. package/lib/grid-component/hooks/content/HeaderContent.d.ts +0 -14
  198. package/lib/grid-component/hooks/content/HeaderContent.js +0 -53
  199. package/lib/grid-component/hooks/content/TooltipContent.d.ts +0 -13
  200. package/lib/grid-component/hooks/content/TooltipContent.js +0 -81
  201. package/lib/grid-component/hooks/useColumns.d.ts +0 -19
  202. package/lib/grid-component/hooks/useColumns.js +0 -328
  203. package/lib/grid-component/number/index.d.ts +0 -10
  204. package/lib/grid-component/number/index.js +0 -47
  205. package/lib/grid-component/number-range/index.d.ts +0 -11
  206. package/lib/grid-component/number-range/index.js +0 -71
  207. package/lib/grid-component/table/Grid.d.ts +0 -23
  208. package/lib/grid-component/table/Grid.js +0 -58
  209. package/lib/grid-component/table/GridEdit.d.ts +0 -23
  210. package/lib/grid-component/table/GridEdit.js +0 -2723
  211. package/lib/grid-component/table/Group.d.ts +0 -21
  212. package/lib/grid-component/table/Group.js +0 -204
  213. package/lib/grid-component/table/InfiniteTable.d.ts +0 -23
  214. package/lib/grid-component/table/InfiniteTable.js +0 -109
  215. package/lib/grid-component/useContext.d.ts +0 -34
  216. package/lib/grid-component/useContext.js +0 -13
  217. /package/es/{grid-component → table-virtuoso}/ColumnsGroup/ColumnsGroup.d.ts +0 -0
  218. /package/es/{grid-component → table-virtuoso}/ColumnsGroup/index.d.ts +0 -0
  219. /package/es/{grid-component → table-virtuoso}/ColumnsGroup/index.js +0 -0
  220. /package/lib/{grid-component → table-virtuoso}/ColumnsGroup/ColumnsGroup.d.ts +0 -0
  221. /package/lib/{grid-component → table-virtuoso}/ColumnsGroup/index.d.ts +0 -0
  222. /package/lib/{grid-component → table-virtuoso}/ColumnsGroup/index.js +0 -0
@@ -0,0 +1,265 @@
1
+ import { flexRender } from '@tanstack/react-table';
2
+ import React, { useContext } from 'react';
3
+ import { Button, Space } from 'antd';
4
+ import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
5
+ import classNames from 'classnames';
6
+ import { Checkbox, Dropdown, Select } from 'rc-master-ui';
7
+ import { booleanOperator, nonActionColumn, numberOperator, stringOperator, translateOption } from "../hook/constant";
8
+ import { extendsObject, getCommonPinningHeaderStyles, getDefaultOperator, getTypeFilter } from "../hook/utils";
9
+ import { renderFilter } from "./renderFilter";
10
+ import ReactDOMServer from 'react-dom/server';
11
+ import { TableContext } from "../useContext";
12
+ // import type { MenuProps } from 'rc-master-ui/es'
13
+
14
+ const TableHeadCell = props => {
15
+ const {
16
+ header,
17
+ getPopupContainer,
18
+ table,
19
+ colSpan,
20
+ rowSpan,
21
+ rowIndex
22
+ } = props;
23
+ const {
24
+ t,
25
+ prefix,
26
+ setSorterChange,
27
+ setFilterChange,
28
+ wrapSettings,
29
+ selectionSettings,
30
+ setIsSelectionChange,
31
+ id,
32
+ locale
33
+ } = useContext(TableContext);
34
+ const isPinned = header.column.getIsPinned();
35
+ const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
36
+ const isFirstRightPinnedColumn = isPinned === 'right' && header.column.getIsFirstColumn('right');
37
+ const [selectedKeys, setSelectedKeys] = React.useState([]);
38
+ const [currentFilter, setCurrentFilter] = React.useState({});
39
+ const column = header.column.columnDef;
40
+ const originalColumn = header.column.columnDef.meta ?? {};
41
+ const filterValue = header.column.getFilterValue() ?? [];
42
+ const operatorValue = header.column.getFilterOperator() ?? getDefaultOperator(column?.meta ?? {});
43
+ const {
44
+ filterIcon
45
+ } = header.column.columnDef.meta ?? {};
46
+ const filtered = (header.column.getFilterValue() ?? []).length > 0;
47
+ const cellContent = flexRender(header.column.columnDef.header, header.getContext());
48
+ const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
49
+ const hasValue = html.trim().length > 0;
50
+ React.useEffect(() => {
51
+ setCurrentFilter(prev => ({
52
+ ...prev,
53
+ ope: operatorValue
54
+ }));
55
+ }, []);
56
+ React.useEffect(() => {
57
+ setSelectedKeys(filterValue);
58
+ }, []);
59
+ const style = {
60
+ transition: 'width transform 0.2s ease-in-out',
61
+ whiteSpace: 'nowrap',
62
+ borderTopWidth: rowIndex > 0 ? 0 : undefined
63
+ };
64
+ const getDropdownTrigger = () => {
65
+ let iconFilter;
66
+ if (typeof filterIcon === 'function') {
67
+ iconFilter = filterIcon(filtered);
68
+ } else if (filterIcon) {
69
+ iconFilter = filterIcon;
70
+ } else {
71
+ iconFilter = /*#__PURE__*/React.createElement(FilterFill, {
72
+ style: {
73
+ color: filtered ? '#E3165B' : '#283046'
74
+ },
75
+ fontSize: 12
76
+ });
77
+ }
78
+ return /*#__PURE__*/React.createElement("span", {
79
+ role: "button",
80
+ tabIndex: -1,
81
+ className: classNames(`${prefix}-trigger`, {
82
+ active: filtered
83
+ }),
84
+ onClick: e => {
85
+ e.stopPropagation();
86
+ }
87
+ }, iconFilter);
88
+ };
89
+ const doFilter = type => {
90
+ if (type) {
91
+ header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
92
+ header.column.setFilterOperator?.(currentFilter.ope);
93
+ } else {
94
+ header.column.setFilterValue(undefined);
95
+ setSelectedKeys([]);
96
+ }
97
+ setFilterChange(true);
98
+ setTimeout(() => {
99
+ setFilterChange(false);
100
+ }, 10);
101
+ };
102
+ const mergedDropdownProps = extendsObject({
103
+ trigger: ['click'],
104
+ placement: 'bottomRight',
105
+ children: getDropdownTrigger(),
106
+ getPopupContainer
107
+ }, {
108
+ // open: visible,
109
+ // open: visible.visible && visible.column === header.column.id,
110
+ // onOpenChange: onVisibleChange,
111
+
112
+ destroyPopupOnHide: true,
113
+ dropdownRender: () => {
114
+ const type = getTypeFilter(originalColumn);
115
+
116
+ // const operatorValue = (header.column.getFilterOperator() ?? getDefaultOperator(originalColumn)) as string
117
+
118
+ const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
119
+ return /*#__PURE__*/React.createElement("div", {
120
+ className: classNames(`${prefix}-grid-filter-dropdown`, {}),
121
+ style: {}
122
+ }, /*#__PURE__*/React.createElement("div", {
123
+ style: {
124
+ minWidth: 275,
125
+ padding: '8px'
126
+ }
127
+ }, column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
128
+ className: 'mb-1'
129
+ }, /*#__PURE__*/React.createElement(Select, {
130
+ options: translateOption(operatorOptions, t),
131
+ style: {
132
+ width: '100%',
133
+ marginBottom: 8
134
+ }
135
+
136
+ // value={operatorValue}
137
+ ,
138
+ value: currentFilter.ope,
139
+ onChange: val => {
140
+ setCurrentFilter(prev => ({
141
+ ...prev,
142
+ ope: val
143
+ }));
144
+ // header.column.setFilterOperator(val)
145
+ }
146
+ })), /*#__PURE__*/React.createElement("div", {
147
+ style: {
148
+ marginBottom: 8
149
+ }
150
+ }, renderFilter({
151
+ column: column,
152
+ selectedKeys,
153
+ setSelectedKeys
154
+ })), /*#__PURE__*/React.createElement(Space, {
155
+ style: {
156
+ justifyContent: 'end',
157
+ width: '100%'
158
+ }
159
+ }, /*#__PURE__*/React.createElement(Button, {
160
+ type: "primary",
161
+ onClick: () => {
162
+ doFilter(true);
163
+ },
164
+ size: "small",
165
+ style: {
166
+ width: 90
167
+ }
168
+ }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
169
+ type: "link",
170
+ size: "small",
171
+ onClick: () => {
172
+ setSelectedKeys([]);
173
+ doFilter(false);
174
+ }
175
+ }, t ? t('Clear') : 'Clear'))));
176
+ }
177
+ });
178
+ return /*#__PURE__*/React.createElement("th", {
179
+ className: classNames(`${prefix}-grid-cell`, {
180
+ [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
181
+ [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
182
+ [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
183
+ [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
184
+ [`${prefix}-grid-cell-text-center`]: (originalColumn?.headerTextAlign ?? originalColumn?.textAlign) === 'center',
185
+ [`${prefix}-grid-cell-text-right`]: (originalColumn?.headerTextAlign ?? originalColumn.textAlign) === 'right'
186
+ }),
187
+ colSpan: colSpan,
188
+ rowSpan: rowSpan,
189
+ key: header.id,
190
+ style: {
191
+ width: header.getSize(),
192
+ ...getCommonPinningHeaderStyles(header.column),
193
+ ...style
194
+ },
195
+ "data-tooltip-id": `${id}-tooltip-content`,
196
+ "data-tooltip-html": !hasValue ? '' : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement("div", null, cellContent))
197
+ }, /*#__PURE__*/React.createElement("div", {
198
+ className: classNames('', {
199
+ [`${prefix}-grid-filter-column`]: header.column.id !== 'selection_column',
200
+ [`${prefix}-grid-selection-column`]: header.column.id === 'selection_column'
201
+ })
202
+ }, header.column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== false && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
203
+ checked: table.getIsAllRowsSelected(),
204
+ indeterminate: table.getIsSomeRowsSelected(),
205
+ onChange: e => {
206
+ setIsSelectionChange({
207
+ isChange: true,
208
+ type: 'all',
209
+ rowData: {},
210
+ rowsData: []
211
+ });
212
+ table.getToggleAllRowsSelectedHandler()(e);
213
+ }
214
+ }), header.column.id !== 'selection_column' && /*#__PURE__*/React.createElement("span", {
215
+ className: "ui-rc-table-column-title",
216
+ style: {
217
+ flex: 1
218
+ }
219
+ }, /*#__PURE__*/React.createElement("div", {
220
+ className: classNames('', {
221
+ [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
222
+ [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
223
+ })
224
+ }, cellContent)), !nonActionColumn.includes(header.column.id) && header.subHeaders.length < 2 && /*#__PURE__*/React.createElement("span", {
225
+ className: "ui-rc-header-trigger"
226
+ }, header.column.getCanSort() && /*#__PURE__*/React.createElement("div", {
227
+ style: {
228
+ marginInlineEnd: 6,
229
+ cursor: 'pointer'
230
+ },
231
+ onClick: e => {
232
+ setSorterChange(true);
233
+ const toggleSortingHandler = header.column.getToggleSortingHandler();
234
+ if (typeof toggleSortingHandler === 'function') {
235
+ toggleSortingHandler(e);
236
+ }
237
+ }
238
+ }, header.column.getIsSorted() ? header.column.getIsSorted() === 'asc' ? /*#__PURE__*/React.createElement(ArrowUp, {
239
+ fontSize: 15,
240
+ color: '#000',
241
+ "data-tooltip-id": `${id}-tooltip-content`,
242
+ "data-tooltip-content": locale?.triggerDesc ?? 'Click to sort descending'
243
+ }) : /*#__PURE__*/React.createElement(ArrowDown, {
244
+ fontSize: 15,
245
+ color: '#000',
246
+ "data-tooltip-id": `${id}-tooltip-content`,
247
+ "data-tooltip-content": locale?.cancelSort ?? 'Click to cancel sorting'
248
+ }) : /*#__PURE__*/React.createElement(SortCancel, {
249
+ "data-tooltip-id": `${id}-tooltip-content`,
250
+ "data-tooltip-content": locale?.triggerAsc ?? 'Click to sort ascending',
251
+ fontSize: 15,
252
+ style: {
253
+ display: 'flex'
254
+ },
255
+ className: classNames(`ui-rc-table-column-sorter-cancel`, {
256
+ active: true
257
+ })
258
+ })), header.column.getCanFilter() && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown, mergedDropdownProps)))), header.column.getCanResize() && /*#__PURE__*/React.createElement("div", {
259
+ onDoubleClick: () => header.column.resetSize(),
260
+ onMouseDown: header.getResizeHandler(),
261
+ onTouchStart: header.getResizeHandler(),
262
+ className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`
263
+ }));
264
+ };
265
+ export default TableHeadCell;
@@ -0,0 +1,20 @@
1
+ import type { ColumnDef } from "@tanstack/react-table";
2
+ import React from "react";
3
+ import type { IFormat } from "../../table-component/type";
4
+ type RenderFilterProps<RecordType> = {
5
+ column: ColumnDef<RecordType, unknown>;
6
+ selectedKeys: any[];
7
+ setSelectedKeys: (keys: any[]) => void;
8
+ t?: any;
9
+ locale?: any;
10
+ dataSourceFilter?: {
11
+ key: string;
12
+ data: any[];
13
+ }[];
14
+ format?: IFormat;
15
+ buddhistLocale?: any;
16
+ dateRangeLocale?: any;
17
+ doFilter?: (type: boolean) => void;
18
+ };
19
+ export declare const renderFilter: <RecordType>(args: RenderFilterProps<RecordType>) => React.JSX.Element;
20
+ export {};
@@ -0,0 +1,289 @@
1
+ // import type { IFormat } from "../../tanstack-table/type";
2
+
3
+ // import type { AnyObject } from './type';
4
+
5
+ import React, { Fragment } from "react";
6
+ import moment from "moment/moment";
7
+ import { CustomProvider, DatePicker, DateRangePicker, Empty, Input, Select } from "rc-master-ui";
8
+ import dayjs from "dayjs";
9
+ import { convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateRangeFormat, getTypeFilter, isEmpty } from "../hook/utils";
10
+ import CheckboxFilter from "../../table-component/components/checkbox-filter/CheckboxFilter";
11
+ import NumberInput from "../../table-component/components/number";
12
+ import NumberRange from "../../table-component/components/number-range";
13
+ export const renderFilter = args => {
14
+ const {
15
+ column,
16
+ selectedKeys,
17
+ setSelectedKeys,
18
+ // confirm,
19
+ t,
20
+ locale,
21
+ buddhistLocale,
22
+ dateRangeLocale,
23
+ dataSourceFilter,
24
+ format,
25
+ doFilter
26
+ } = args;
27
+ const {
28
+ format: columnFormat,
29
+ typeFilter,
30
+ type: columnType,
31
+ field,
32
+ source
33
+ } = column?.meta ?? {};
34
+ const cellFormat = columnFormat ? typeof columnFormat === 'function' ? columnFormat({}) : columnFormat : format;
35
+ const type = getTypeFilter(column.meta ?? {});
36
+ const dateFormat = getDatepickerFormat(typeFilter ?? columnType, cellFormat) ?? 'DD/MM/YYYY';
37
+ const dateRangeFormat = convertFormat(getDateRangeFormat(columnType, cellFormat) ?? 'dd/MM/yyyy');
38
+ const find = dataSourceFilter?.find(it => it.key === field);
39
+ const options = find ? find.data : [];
40
+ switch (type) {
41
+ case 'Number':
42
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
43
+ className: 'mb-1'
44
+ }, /*#__PURE__*/React.createElement(NumberInput, {
45
+ t: t,
46
+ value: selectedKeys[0],
47
+ onChange: vals => {
48
+ setSelectedKeys(vals);
49
+ },
50
+ onPressEnter: () => doFilter?.(true)
51
+ }))));
52
+ case 'NumberRange':
53
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumberRange, {
54
+ t: t,
55
+ min: selectedKeys[0],
56
+ max: selectedKeys[1],
57
+ onChange: vals => {
58
+ setSelectedKeys(vals);
59
+ },
60
+ onPressEnter: () => doFilter?.(true)
61
+ })));
62
+ case 'Date':
63
+ const dateValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null;
64
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
65
+ className: 'mb-1'
66
+ }, /*#__PURE__*/React.createElement(DatePicker, {
67
+ format: {
68
+ format: dateFormat,
69
+ type: 'mask'
70
+ },
71
+ locale: buddhistLocale,
72
+ style: {
73
+ width: '100%',
74
+ height: '100%'
75
+ },
76
+ value: dateValue,
77
+ defaultValue: dateValue
78
+ // placeholder={t ? t(column?.placeholder) : column?.placeholder}
79
+ ,
80
+ onChange: (date, dateString) => {
81
+ const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
82
+ setSelectedKeys(newDateValue ? [newDateValue] : []);
83
+ }
84
+ }))));
85
+ case 'DateRange':
86
+ // const dateRangeValue: any = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : '']
87
+ const dateRangeValue = selectedKeys && selectedKeys.length > 0 ? [selectedKeys[0] ? new Date(selectedKeys[0]) : '', selectedKeys[1] ? new Date(selectedKeys[1]) : ''] : null;
88
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
89
+ className: 'mb-1'
90
+ }, /*#__PURE__*/React.createElement(CustomProvider, {
91
+ locale: dateRangeLocale
92
+ }, /*#__PURE__*/React.createElement(DateRangePicker
93
+ // placeholder={['Ngày bắt đầu', 'Ngày bắt đầu']}
94
+ , {
95
+ style: {
96
+ width: 300
97
+ },
98
+ format: dateRangeFormat,
99
+ value: dateRangeValue,
100
+ onChange: value => {
101
+ const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(value[1]).format() : ''] : [];
102
+ setSelectedKeys(newDateRangeValue);
103
+ },
104
+ menuClassName: "rc-menu-popup"
105
+ })))));
106
+ case 'Week':
107
+ const weekValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
108
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
109
+ className: 'mb-1'
110
+ }, /*#__PURE__*/React.createElement(DatePicker, {
111
+ format: {
112
+ format: dateFormat,
113
+ type: 'mask'
114
+ },
115
+ picker: 'week',
116
+ locale: buddhistLocale,
117
+ style: {
118
+ width: '100%',
119
+ height: '100%'
120
+ },
121
+ value: weekValue,
122
+ defaultValue: weekValue
123
+ // placeholder={column?.placeholder}
124
+ ,
125
+ onChange: (date, dateString) => {
126
+ const newDateValue = dateString ?? null;
127
+ setSelectedKeys(newDateValue ? [newDateValue] : []);
128
+ }
129
+ }))));
130
+ case 'Month':
131
+ const monthValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
132
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
133
+ className: 'mb-1'
134
+ }, /*#__PURE__*/React.createElement(DatePicker, {
135
+ format: {
136
+ format: dateFormat,
137
+ type: 'mask'
138
+ },
139
+ picker: 'month',
140
+ locale: buddhistLocale,
141
+ style: {
142
+ width: '100%',
143
+ height: '100%'
144
+ },
145
+ value: monthValue,
146
+ defaultValue: monthValue
147
+ // placeholder={column?.placeholder}
148
+ ,
149
+ onChange: (date, dateString) => {
150
+ const newDateValue = dateString ?? null;
151
+ setSelectedKeys(newDateValue ? [newDateValue] : []);
152
+ }
153
+ })));
154
+
155
+ // // case 'Quarter':
156
+ // //
157
+ // // // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
158
+ // //
159
+ // // const pickerFormat = getDatepickerFormat(getEditType(col) as IEditType, col)
160
+ // // const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
161
+ // //
162
+ // // return (
163
+ // // <Fragment>
164
+ // // <div>
165
+ // //
166
+ // //
167
+ // // <div className={'mb-1'}>
168
+ // //
169
+ // // <DatePicker
170
+ // // format={{
171
+ // // format: dateFormat,
172
+ // // type: 'mask'
173
+ // // }}
174
+ // // locale={buddhistLocale}
175
+ // // style={{width: '100%', height: '100%'}}
176
+ // // value={pickerValue}
177
+ // // defaultValue={pickerValue}
178
+ // // placeholder={column.placeholder}
179
+ // // onChange={(date, dateString) => {
180
+ // // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
181
+ // // setSelectedKeys(newDateValue ? [newDateValue] : [])
182
+ // //
183
+ // // }}
184
+ // //
185
+ // // />
186
+ // // </div>
187
+ // //
188
+ // //
189
+ // // </div>
190
+ // // </Fragment>
191
+ // // )
192
+ // //
193
+ // // case 'Year':
194
+ // //
195
+ // // // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
196
+ // //
197
+ // // const pickerFormat = getDatepickerFormat(getEditType(col) as IEditType, col)
198
+ // // const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
199
+ // //
200
+ // // return (
201
+ // // <Fragment>
202
+ // // <div>
203
+ // //
204
+ // //
205
+ // // <div className={'mb-1'}>
206
+ // //
207
+ // // <DatePicker
208
+ // // format={{
209
+ // // format: dateFormat,
210
+ // // type: 'mask'
211
+ // // }}
212
+ // // locale={buddhistLocale}
213
+ // // style={{width: '100%', height: '100%'}}
214
+ // // value={pickerValue}
215
+ // // defaultValue={pickerValue}
216
+ // // placeholder={column.placeholder}
217
+ // // onChange={(date, dateString) => {
218
+ // // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
219
+ // // setSelectedKeys(newDateValue ? [newDateValue] : [])
220
+ // //
221
+ // // }}
222
+ // //
223
+ // // />
224
+ // // </div>
225
+ // //
226
+ // //
227
+ // // </div>
228
+ // // </Fragment>
229
+ // // )
230
+
231
+ case 'Dropdown':
232
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
233
+ className: 'mb-1'
234
+ }, /*#__PURE__*/React.createElement(Select
235
+ // options={translateOption(numberOperator, t)}
236
+ // options={find ? options : column.source ?? []}
237
+ , {
238
+ options: source ? source : options ?? [],
239
+ style: {
240
+ width: '100%',
241
+ marginBottom: 8
242
+ },
243
+ value: selectedKeys[0],
244
+ notFoundContent: /*#__PURE__*/React.createElement(Empty, {
245
+ image: Empty.PRESENTED_IMAGE_SIMPLE,
246
+ description: locale?.emptyText
247
+ }),
248
+ onChange: val => {
249
+ // setOperatorKey(val)
250
+ setSelectedKeys(val ? [val] : []);
251
+ },
252
+ showSearch: true,
253
+ allowClear: true
254
+ }))));
255
+ case 'Checkbox':
256
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
257
+ className: 'mb-1'
258
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter, {
259
+ locale: locale,
260
+ selectedKeys: selectedKeys,
261
+ onSelect: setSelectedKeys
262
+ // options={options}
263
+ ,
264
+ options: source ? source : options ?? [],
265
+ filterMultiple: true
266
+ // open={visible}
267
+ // searchValue={searchValue}
268
+ // setSearchValue={setSearchValue}
269
+ })))));
270
+ case 'Text':
271
+ default:
272
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
273
+ className: 'mb-1'
274
+ }, /*#__PURE__*/React.createElement(Input, {
275
+ className: "aaaa",
276
+ classNames: {
277
+ input: 'filter-input'
278
+ },
279
+ placeholder: t ? t('Search') : `Search`,
280
+ value: selectedKeys[0],
281
+ onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
282
+ // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
283
+ ,
284
+ onPressEnter: () => doFilter?.(true),
285
+ allowClear: true
286
+ // autoFocus={true}
287
+ }))));
288
+ }
289
+ };
@@ -0,0 +1,73 @@
1
+ export declare const defaultWidth: number;
2
+ export declare const defaultRowHeight: number;
3
+ export type IOperator = {
4
+ value: string;
5
+ label: string;
6
+ key: string;
7
+ };
8
+ export declare const numberOperator: IOperator[];
9
+ export declare const stringOperator: IOperator[];
10
+ export declare const dateOperator: IOperator[];
11
+ export declare const dateTimeOperator: IOperator[];
12
+ export declare const booleanOperator: IOperator[];
13
+ export declare const translateOption: (options: IOperator[], t: any) => any[];
14
+ export declare const transferFontSize: any;
15
+ export declare const defaultDateFormat = "d/m/Y";
16
+ export declare const defaultDateTimeFormat = "d/m/Y H:i";
17
+ export declare const defaultTimeFormat = "H:i";
18
+ export declare const defaultPageSizes: number[];
19
+ export declare const alignToFlex: any;
20
+ export declare const optionsSize: {
21
+ label: string;
22
+ value: string;
23
+ width: number;
24
+ height: number;
25
+ }[];
26
+ export declare const paperSize: {
27
+ a4: {
28
+ width: number;
29
+ height: number;
30
+ };
31
+ a3: {
32
+ width: number;
33
+ height: number;
34
+ };
35
+ letter: {
36
+ width: number;
37
+ height: number;
38
+ };
39
+ };
40
+ export declare const optionFont: {
41
+ value: string;
42
+ label: string;
43
+ }[];
44
+ export declare const optionsPaperOrientation: any[];
45
+ export declare const optionFontSize: {
46
+ value: number;
47
+ label: string;
48
+ }[];
49
+ /**
50
+ * Sort order for BaseTable
51
+ */
52
+ declare const SortOrder: {
53
+ /**
54
+ * Sort data in ascending order
55
+ */
56
+ ascend: string;
57
+ /**
58
+ * Sort data in descending order
59
+ */
60
+ descend: string;
61
+ };
62
+ export default SortOrder;
63
+ export declare const valueToBoolean: {
64
+ true: boolean;
65
+ false: boolean;
66
+ 1: boolean;
67
+ 0: boolean;
68
+ };
69
+ export declare const booleanToValue: {
70
+ true: number;
71
+ false: number;
72
+ };
73
+ export declare const nonActionColumn: string[];