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,97 @@
1
+ import type { Dispatch, SetStateAction } from 'react';
2
+ import type { ColumnTable, ExpandableConfig, IFormat, IGroupSetting, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings } from "../table-component/type";
3
+ import type { SubmitHandler } from "react-hook-form";
4
+ import type { ExpandedState, Row, Table } from '@tanstack/react-table';
5
+ export type IPositionCell = {
6
+ rowId: string;
7
+ colId: string;
8
+ } | undefined;
9
+ export interface IContext<T> {
10
+ t?: any;
11
+ prefix: string;
12
+ id: string;
13
+ rowKey: string;
14
+ originData: any[];
15
+ dataSource: any[];
16
+ format?: IFormat;
17
+ expandable?: ExpandableConfig<T>;
18
+ wrapSettings?: IWrapSettings;
19
+ setExpanded: Dispatch<SetStateAction<ExpandedState>>;
20
+ expanded: ExpandedState;
21
+ recordDoubleClick?: (args: RecordDoubleClickEventArgs<T>) => void;
22
+ selectionSettings?: SelectionSettings;
23
+ isSelectionChange?: {
24
+ isChange: boolean;
25
+ type: string;
26
+ rowData: T;
27
+ rowsData: T[];
28
+ };
29
+ setIsSelectionChange: Dispatch<SetStateAction<{
30
+ isChange: boolean;
31
+ type: string;
32
+ rowData: T;
33
+ rowsData: T[];
34
+ }>>;
35
+ setSorterChange: Dispatch<SetStateAction<boolean>>;
36
+ setFilterChange: Dispatch<SetStateAction<boolean>>;
37
+ onContextMenu?: (data: T) => (event: any) => void;
38
+ locale?: Locale;
39
+ windowSize: {
40
+ innerHeight: number;
41
+ innerWidth: number;
42
+ };
43
+ control?: any;
44
+ errors?: any;
45
+ handleSubmit?: any;
46
+ onSubmit?: SubmitHandler<any>;
47
+ getValues?: any;
48
+ reset?: any;
49
+ setValue?: any;
50
+ handleCellChange?: (args: ContextCellChange) => void;
51
+ editingKey?: string;
52
+ setEditingKey?: Dispatch<SetStateAction<string>>;
53
+ rangeState?: RangeState;
54
+ setRangeState?: Dispatch<SetStateAction<RangeState | undefined>>;
55
+ rangePasteState?: RangeState;
56
+ setRangePasteState?: Dispatch<SetStateAction<RangeState | undefined>>;
57
+ startCell?: IPositionCell;
58
+ setStartCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
59
+ endCell?: IPositionCell;
60
+ setEndCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
61
+ startPasteCell?: IPositionCell;
62
+ setStartPasteCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
63
+ endPasteCell?: IPositionCell;
64
+ setEndPasteCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
65
+ isSelecting?: boolean;
66
+ setIsSelecting?: Dispatch<SetStateAction<boolean>>;
67
+ isPasting?: boolean;
68
+ setIsPasting?: Dispatch<SetStateAction<boolean>>;
69
+ focusedCell?: IPositionCell;
70
+ setFocusedCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
71
+ triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
72
+ handleDeleteContent?: () => void;
73
+ handleAddMulti?: (item: any, n: number, id?: string) => void;
74
+ dataErrors?: any[];
75
+ isDataTree: boolean;
76
+ handleCellClick?: (rowNumber: number, record: T, column: ColumnTable, rowId: string, cellValue: any) => void;
77
+ pagination?: false | PaginationConfig;
78
+ rowClassName?: string | RowClassName<T>;
79
+ table?: Table<T>;
80
+ rowEditable?: (rowData: T) => boolean;
81
+ onRowStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | ((data: T, row: Row<T>) => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
82
+ onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
83
+ onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
84
+ groupSetting?: IGroupSetting;
85
+ }
86
+ export declare const TableContext: import("react").Context<IContext<any>>;
87
+ export type ContextCellChange = {
88
+ key: string;
89
+ record: any;
90
+ field: string | undefined;
91
+ option: any;
92
+ indexRow: number;
93
+ indexCol: number;
94
+ newState?: any;
95
+ prevState?: any;
96
+ type: 'enter' | 'blur' | 'outClick';
97
+ };
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TableContext = void 0;
7
+ var _react = require("react");
8
+ const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContext)({
9
+ prefix: 'ui-rc',
10
+ id: '',
11
+ isDataTree: false,
12
+ rowKey: 'rowId',
13
+ dataSource: [],
14
+ originData: [],
15
+ expanded: {},
16
+ windowSize: {
17
+ innerHeight: 0,
18
+ innerWidth: 0
19
+ },
20
+ // triggerFilter: () => { },
21
+
22
+ setIsSelectionChange: () => {},
23
+ setSorterChange: () => {},
24
+ setFilterChange: () => {},
25
+ setExpanded: () => {},
26
+ handleCellClick: () => {}
27
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "es-grid-template",
3
- "version": "1.8.64",
3
+ "version": "1.8.66",
4
4
  "description": "es-grid-template",
5
5
  "keywords": [
6
6
  "react",
@@ -75,6 +75,7 @@
75
75
  "react-numeric-component": "^1.0.7",
76
76
  "react-resizable": "^3.0.5",
77
77
  "react-tooltip": "^5.28.1",
78
+ "react-virtuoso": "^4.17.0",
78
79
  "rimraf": "5.0.10",
79
80
  "sass": "^1.81.0",
80
81
  "styled-components": "^6.1.15",
@@ -1,14 +0,0 @@
1
- import React from "react";
2
- import type { IFormat } from "./type";
3
- type Props = {
4
- columns: any[];
5
- dataSourceFilter?: any[];
6
- onFilter?: (query: any, col?: any[]) => void;
7
- mode?: 'sidebar' | 'dropdown';
8
- defaultFilter?: any[];
9
- leftFilterWidth?: number;
10
- format?: IFormat;
11
- t?: any;
12
- };
13
- declare const AdvanceFilter: (props: Props) => React.JSX.Element;
14
- export default AdvanceFilter;
@@ -1,454 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import React, { Fragment, useState } from "react";
3
- import styled from "styled-components";
4
- import { Badge, Button, Tooltip } from "antd";
5
- import { Filter } from "becoxy-icons";
6
- import { DatePicker, TimePicker, TreeSelect, Popover, Input } from "rc-master-ui";
7
- import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, isArraysEqual, isEmpty, isObjEmpty } from "./hooks";
8
- import CheckboxControl from "./checkbox-control";
9
- import { AsyncSelect } from "./async-select";
10
- import { NumericFormat } from 'react-numeric-component';
11
- import classnames from "classnames";
12
- import { getDefaultOperator } from "rc-master-ui/es/table/util";
13
- const {
14
- RangePicker
15
- } = DatePicker;
16
- const MainFilter = styled.div.withConfig({
17
- displayName: "MainFilter",
18
- componentId: "es-grid-template__sc-zdl2xa-0"
19
- })([".filter-left{display:flex;flex-direction:column;gap:1rem;width:", ";border-right:1px solid #c4c4c4;}@media (max-width:576px){flex-direction:column-reverse;gap:1rem;.filter-left{width:100%;border-right:0;}}"], props => `${props.leftFilterWidth}px`);
20
- const GridFilter = styled.div.withConfig({
21
- displayName: "GridFilter",
22
- componentId: "es-grid-template__sc-zdl2xa-1"
23
- })(["display:grid;gap:10px;padding-right:1rem;padding-left:1rem;max-height:500px;overflow:auto;overflow-x:hidden;flex-wrap:wrap;grid-template-columns:repeat(2,minmax(250px,1fr));.grid-item-filter{}.adv-form-input{height:32px;}@media (max-width:720px){grid-template-columns:repeat(1,minmax(250px,1fr));}"]);
24
- const BoxAction = styled.div.withConfig({
25
- displayName: "BoxAction",
26
- componentId: "es-grid-template__sc-zdl2xa-2"
27
- })(["border-top:1px solid #c4c4c4;padding-top:0.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;}}"]);
28
-
29
- // const FilterContainer = styled.div<{ contentWidth?: number }>`
30
- // .customizer {
31
- // right: ${props => (props.contentWidth ? `-${props.contentWidth}px` : '-400px')};
32
- // width: ${props => (props.contentWidth ? `${props.contentWidth}px` : '400px')};
33
- // }
34
- // .customizer.open {
35
- // right: 0;
36
- // }
37
- // .adv-form-input {
38
- // height: 32px;
39
- // }
40
- // .checkbox-dropdown {
41
- // .ant-select-tree-treenode {
42
- // .ant-select-tree-switcher.ant-select-tree-switcher-noop {
43
- // width: 0 !important;
44
- // }
45
- // }
46
- // }
47
- // `
48
-
49
- const AdvanceFilter = props => {
50
- const {
51
- columns: defaultColumns,
52
- dataSourceFilter,
53
- onFilter,
54
- // mode = 'dropdown',
55
- defaultFilter,
56
- leftFilterWidth = 280,
57
- format,
58
- t
59
- } = props;
60
-
61
- // const columnsChooseRef: any = useRef(null)
62
- const menuRef = React.useRef(null);
63
-
64
- // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
65
- // const [isManualUpdate, setIsManualUpdate] = useState(false);
66
-
67
- const [prevFilter, setPrevFilter] = useState([]);
68
- const [filterColumns, setFilterColumns] = useState([]);
69
- const [clicked, setClicked] = useState(false);
70
- const [columns, setColumns] = useState([]);
71
- const count = 4;
72
- // const count = useMemo(() => {
73
- //
74
- // const uniqueItems = prevFilter.filter((item, index, arr) => {
75
- // return arr.findIndex(el => el.field === item.field) === index
76
- // })
77
- //
78
- // return uniqueItems?.filter((quer: any) => quer.filterOption && quer.filterOption?.value).length ?? 0
79
- //
80
- // }, [prevFilter])
81
-
82
- React.useEffect(() => {
83
- if (defaultColumns) {
84
- const filter = defaultColumns.filter(it => it.visible !== false && it.allowFiltering !== false && it.field !== '#' && it.field !== 'command');
85
- const tmpFilter = filter.map(it => ({
86
- ...it,
87
- filterOption: {
88
- key: it.field,
89
- field: it.field,
90
- value: undefined,
91
- predicate: undefined,
92
- operator: it?.filterOption?.operator ? it.filterOption.operator : getDefaultOperator(it)
93
- }
94
- }));
95
- setColumns(filter);
96
- setPrevFilter(tmpFilter);
97
- setFilterColumns(tmpFilter);
98
- }
99
- }, [defaultColumns, defaultFilter]);
100
- const hide = () => {
101
- setClicked(false);
102
- };
103
- const handleClickChange = open => {
104
- setClicked(open);
105
- if (defaultFilter) {
106
- setFilterColumns(defaultFilter ?? []);
107
- }
108
- };
109
- const handleAccept = () => {
110
- const query = filterColumns.filter(quer => quer.filterOption && (quer.filterOption?.value || quer.filterOption?.value === 0)).map(quer => quer.filterOption);
111
- if (onFilter && !isArraysEqual(filterColumns, defaultFilter ?? [])) {
112
- onFilter(query, filterColumns);
113
- }
114
- hide();
115
- setPrevFilter(filterColumns);
116
- };
117
- const handleReset = () => {
118
- setFilterColumns(columns);
119
- };
120
- const handleCancel = () => {
121
- hide();
122
- setFilterColumns(prevFilter);
123
- };
124
- const renderFilter = (tmpColumn, index) => {
125
- const find = filterColumns.find(it => it.field === tmpColumn.field);
126
- const column = find ? find : tmpColumn;
127
- let valueFilter;
128
- if (column?.typeFilter === 'Checkbox' || column?.typeFilter === 'CheckboxDropdown' || tmpColumn?.filterOption?.multiple) {
129
- const currentValueFilter = filterColumns.filter(it => it.field === column?.field && (it.filterOption?.value || it.filterOption?.value === 0));
130
- valueFilter = currentValueFilter.map(it => it.filterOption?.value);
131
- } else if (column?.typeFilter === 'DateRange') {
132
- const currentValueFilter = filterColumns.filter(it => it.field === column?.field);
133
- const findStartDate = currentValueFilter.find(it => it.filterOption?.operator === 'greaterthanorequal');
134
- const findEndDate = currentValueFilter.find(it => it.filterOption?.operator === 'lessthanorequal');
135
- const startDate = findStartDate ? convertDateToDayjs(findStartDate.filterOption?.value, column?.format?.dateFormat ?? 'DD/MM/YYYY') : '';
136
- const endDate = findEndDate ? convertDateToDayjs(findEndDate.filterOption?.value, column?.format?.dateFormat ?? 'DD/MM/YYYY') : '';
137
- valueFilter = [startDate, endDate];
138
- } else {
139
- // single Value
140
- valueFilter = column?.filterOption?.value;
141
- }
142
- const options = dataSourceFilter?.find(it => it.key === column?.field)?.data;
143
- const loadOptions = dataSourceFilter?.find(it => it.key === column?.field)?.loadOptions;
144
- switch (column?.typeFilter) {
145
- case "Checkbox":
146
- return /*#__PURE__*/React.createElement(CheckboxControl, {
147
- value: valueFilter,
148
- options: options ?? [],
149
- onChange: val => {
150
- console.log(val);
151
- // onChangeValueFilter(column, val, true)
152
- }
153
- });
154
- case 'Dropdown':
155
- return (
156
- /*#__PURE__*/
157
- // <Select
158
- // showSearch
159
- // allowClear
160
- // style={{ width: '100%' }}
161
- // placeholder='Search to Select'
162
- // optionFilterProp='label'
163
- // value={valueFilter}
164
- // mode={tmpColumn.filterOption?.multiple ? 'multiple' : undefined}
165
- // options={options ?? []}
166
- // onChange={val => {
167
- // onChangeValueFilter(column, val)
168
- // }}
169
- // dropdownStyle={{ zIndex: 9999 }}
170
- // popupClassName={'adv-popup-container'}
171
- // getPopupContainer={() => menuRef.current}
172
- // className='filter-item-control'
173
- // />
174
- React.createElement(AsyncSelect, {
175
- showSearch: true,
176
- allowClear: true,
177
- style: {
178
- width: '100%'
179
- },
180
- placeholder: "Search to Select",
181
- optionFilterProp: "label",
182
- value: valueFilter,
183
- mode: tmpColumn.filterOption?.multiple ? 'multiple' : undefined,
184
- options: options ?? [],
185
- defaultOptions: options ?? [],
186
- onChange: val => {
187
- console.log(val);
188
- // onChangeValueFilter(column, val)
189
- },
190
- loadOptions: loadOptions,
191
- dropdownStyle: {
192
- zIndex: 9999
193
- },
194
- popupClassName: 'adv-popup-container'
195
- // getPopupContainer={() => menuRef.current}
196
- ,
197
- className: "filter-item-control"
198
- })
199
- );
200
- case 'CheckboxDropdown':
201
- return /*#__PURE__*/React.createElement(TreeSelect, {
202
- showSearch: true,
203
- style: {
204
- width: '100%'
205
- },
206
- value: valueFilter,
207
- multiple: true,
208
- treeCheckable: true,
209
- dropdownStyle: {
210
- maxHeight: 400,
211
- overflow: 'auto',
212
- zIndex: 9999
213
- },
214
- placeholder: "Please select",
215
- allowClear: true,
216
- maxTagCount: 'responsive',
217
- onChange: val => {
218
- console.log(val);
219
- // onChangeValueFilter(column, val, true)
220
- },
221
- treeData: options,
222
- popupClassName: 'adv-popup-container checkbox-dropdown'
223
- // getPopupContainer={() => menuRef.current}
224
- });
225
- case 'DateRange':
226
- return /*#__PURE__*/React.createElement(RangePicker, {
227
- format: {
228
- format: column.format?.dateFormat ?? 'DD/MM/YYYY',
229
- type: 'mask'
230
- },
231
- defaultValue: valueFilter,
232
- value: valueFilter,
233
- placeholder: ['Ngày bắt đầu', 'Ngày kết thúc'],
234
- popupStyle: {
235
- zIndex: 9999
236
- },
237
- onChange: (value, dateString) => {
238
- const newDateRangeValue = [dateString[0] ? convertDayjsToDate(dateString[0], column.format?.dateFormat ?? 'DD/MM/YYYY') : '', dateString[1] ? convertDayjsToDate(dateString[1], column.format?.dateFormat ?? 'DD/MM/YYYY') : ''];
239
- console.log(newDateRangeValue);
240
-
241
- // onChangeValueFilter(column, newDateRangeValue)
242
- },
243
- style: {
244
- width: '100%'
245
- },
246
- popupClassName: 'adv-popup-container'
247
- // getPopupContainer={() => menuRef.current}
248
- });
249
- case 'Date':
250
- const dateValue = valueFilter ? convertDateToDayjs(valueFilter, column.format?.dateFormat ?? 'DD/MM/YYYY') : null;
251
- return /*#__PURE__*/React.createElement(DatePicker, {
252
- format: {
253
- format: column.format?.dateFormat ?? 'DD/MM/YYYY',
254
- type: 'mask'
255
- },
256
- style: {
257
- width: '100%'
258
- },
259
- defaultValue: dateValue,
260
- value: dateValue,
261
- placeholder: 'Chọn ngày',
262
- onChange: (val, dateString) => {
263
- const newDateTimeValue = dateString ? convertDayjsToDate(dateString, column.format?.dateFormat ?? 'DD/MM/YYYY') : null;
264
- // onChangeValueFilter(column, newDateTimeValue)
265
- console.log(newDateTimeValue);
266
- },
267
- popupStyle: {
268
- zIndex: 9999
269
- },
270
- popupClassName: 'adv-popup-container'
271
- // getPopupContainer={() => menuRef.current}
272
- });
273
- case 'Datetime':
274
- const dateTimeValue = valueFilter ? convertDateToDayjs(valueFilter, column.format?.dateFormat ?? 'DD/MM/YYYY HH:mm') : null;
275
- return /*#__PURE__*/React.createElement(DatePicker, {
276
- format: {
277
- format: column.format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm',
278
- type: 'mask'
279
- },
280
- style: {
281
- width: '100%'
282
- },
283
- showTime: column.typeFilter === 'Datetime',
284
- defaultValue: dateTimeValue,
285
- value: dateTimeValue,
286
- placeholder: 'Chọn ngày',
287
- onChange: (val, dateString) => {
288
- const newDateTimeValue = dateString ? convertDayjsToDate(dateString, column.format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : null;
289
- console.log('newDateTimeValue', newDateTimeValue);
290
- // onChangeValueFilter(column, newDateTimeValue)
291
- },
292
- popupStyle: {
293
- zIndex: 9999
294
- },
295
- popupClassName: 'adv-popup-container'
296
- });
297
- case 'DropTree':
298
- return /*#__PURE__*/React.createElement(TreeSelect, {
299
- showSearch: true,
300
- style: {
301
- width: '100%'
302
- },
303
- value: valueFilter,
304
- multiple: tmpColumn.filterOption?.multiple,
305
- treeCheckable: tmpColumn.filterOption?.treeCheckable,
306
- dropdownStyle: {
307
- maxHeight: 400,
308
- overflow: 'auto',
309
- zIndex: 9999
310
- },
311
- placeholder: "Please select",
312
- allowClear: true,
313
- onChange: () => {
314
- // onChangeValueFilter(column, val, tmpColumn.filterOption?.multiple)
315
- },
316
- treeData: options,
317
- maxTagCount: 'responsive',
318
- popupClassName: 'adv-popup-container'
319
- });
320
- case 'Time':
321
- return /*#__PURE__*/React.createElement(TimePicker, {
322
- format: {
323
- format: column.format?.timeFormat ?? 'HH:mm',
324
- type: 'mask'
325
- },
326
- defaultValue: valueFilter ?? null,
327
- onChange: (values, timeString) => {
328
- const newTimeValue = timeString ? timeString : null;
329
- console.log(newTimeValue);
330
- // onChangeValueFilter(column, newTimeValue)
331
- },
332
- style: {
333
- width: '100%'
334
- },
335
- popupStyle: {
336
- zIndex: 9999
337
- },
338
- popupClassName: 'adv-popup-container'
339
- });
340
- case 'Number':
341
- const thousandSeparator = column.format?.thousandSeparator ? column.format?.thousandSeparator : format?.thousandSeparator;
342
- const decimalSeparator = column.format?.decimalSeparator ? column.format?.decimalSeparator : format?.decimalSeparator;
343
- const numericFormatProps = {
344
- thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
345
- decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
346
- decimalScale: !isObjEmpty(column.format?.decimalScale) ? column.format?.decimalScale : undefined,
347
- fixedDecimalScale: !isEmpty(column.format?.fixedDecimalScale) ? column.format?.fixedDecimalScale : false,
348
- allowNegative: column.format?.allowNegative ?? false,
349
- prefix: column.format?.prefix ?? undefined,
350
- suffix: column.format?.suffix ?? undefined
351
- };
352
- const valueNumeric = valueFilter || valueFilter === 0 ? valueFilter.toString() : '';
353
- return /*#__PURE__*/React.createElement(NumericFormat, _extends({}, numericFormatProps, {
354
- value: valueNumeric,
355
- customInput: Input
356
- // valueIsNumericString={true}
357
- ,
358
- autoComplete: 'off',
359
- className: classnames('adv-form-input form-control', {}),
360
- onValueChange: values => {
361
- console.log('values', values);
362
- // onChangeValueFilter(column as any, values.floatValue)
363
- }
364
- }));
365
- default:
366
- return /*#__PURE__*/React.createElement(Input, {
367
- placeholder: 'Nhập giá trị',
368
- value: valueFilter ? valueFilter : '',
369
- style: {
370
- padding: '0.3rem 0.5rem',
371
- lineHeight: '1.25'
372
- },
373
- autoFocus: index === 0,
374
- onChange: val => {
375
- console.log(val);
376
- // onChangeValueFilter(column as any, val.target.value)
377
- },
378
- className: "adv-form-input"
379
- });
380
- }
381
- };
382
- const content = /*#__PURE__*/React.createElement("div", {
383
- ref: menuRef,
384
- className: 'd-flex flex-column'
385
- }, /*#__PURE__*/React.createElement(MainFilter, {
386
- leftFilterWidth: leftFilterWidth,
387
- className: 'd-flex pb-1'
388
- }, /*#__PURE__*/React.createElement("div", {
389
- style: {
390
- flex: 1
391
- }
392
- }, /*#__PURE__*/React.createElement(GridFilter, {
393
- className: 'grid-filter'
394
- }, columns.map((it, index) => {
395
- return /*#__PURE__*/React.createElement("div", {
396
- className: 'grid-item-filter',
397
- key: index
398
- }, /*#__PURE__*/React.createElement("p", {
399
- className: 'm-0',
400
- style: {
401
- minHeight: 21
402
- }
403
- }, t ? t(it.headerText ?? '') : it.headerText), renderFilter(it, index));
404
- })))), /*#__PURE__*/React.createElement(BoxAction, {
405
- className: ''
406
- }, /*#__PURE__*/React.createElement(Button, {
407
- className: 'btn-action btn-action-cancel',
408
- variant: "outlined",
409
- onClick: handleReset
410
- }, t ? t('Reset') : 'Reset'), /*#__PURE__*/React.createElement(Button, {
411
- className: 'btn-action btn-action-cancel',
412
- variant: "outlined",
413
- onClick: handleCancel
414
- }, t ? t('Cancel') : 'Cancel'), /*#__PURE__*/React.createElement(Button, {
415
- className: classnames('btn-action btn-action-submit', {
416
- disable: !columns.find(item => item.visible !== false || item.visible)
417
- }),
418
- variant: "outlined",
419
- onClick: handleAccept,
420
- disabled: !columns.find(item => item.visible !== false || item.visible)
421
- }, t ? t('Accept') : 'Accept')));
422
- return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
423
- placement: 'bottomLeft'
424
- // content={
425
- // <div style={{minWidth: 250}}>
426
- //
427
- // </div>
428
- // }
429
- ,
430
- content: content,
431
- trigger: "click",
432
- open: clicked,
433
- onOpenChange: handleClickChange,
434
- arrow: false
435
- }, /*#__PURE__*/React.createElement(Tooltip, {
436
- arrow: false,
437
- title: 'Cài đặt'
438
- }, count > 0 ? /*#__PURE__*/React.createElement(Badge, {
439
- size: "small",
440
- count: count,
441
- color: "danger"
442
- }, /*#__PURE__*/React.createElement(Filter, {
443
- fontSize: 16,
444
- style: {
445
- cursor: 'pointer'
446
- }
447
- })) : /*#__PURE__*/React.createElement(Filter, {
448
- fontSize: 16,
449
- style: {
450
- cursor: 'pointer'
451
- }
452
- }))));
453
- };
454
- export default AdvanceFilter;
@@ -1,20 +0,0 @@
1
- import * as React from "react";
2
- import type { TableLocale } from "rc-master-ui/es/table/interface";
3
- type Props = {
4
- options: any[];
5
- filterSearch?: boolean;
6
- open?: boolean;
7
- tablePrefixCls?: string;
8
- prefixCls?: string;
9
- dropdownPrefixCls?: string;
10
- filterMultiple: boolean;
11
- showFilter?: boolean;
12
- onSelect?: (value: any) => void;
13
- selectedKeys: string[];
14
- locale?: TableLocale;
15
- filterMode?: 'menu' | 'tree';
16
- searchValue: string;
17
- setSearchValue: (value: any) => void;
18
- };
19
- declare const CheckboxFilter: (props: Props) => React.JSX.Element;
20
- export default CheckboxFilter;