es-grid-template 1.9.55 → 1.9.57

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 (33) hide show
  1. package/es/ali-table/base-table/styles.js +1 -1
  2. package/es/ali-table/common-views.d.ts +1 -1
  3. package/es/group-component/TableContainerEdit.js +2 -2
  4. package/es/group-component/body/TableBodyRow.js +15 -4
  5. package/es/group-component/hook/utils.d.ts +3 -3
  6. package/es/table-component/ColumnsConfig.js +1 -0
  7. package/es/table-component/TableContainerEdit.js +17 -4
  8. package/es/table-component/body/EditableCell.js +95 -114
  9. package/es/table-component/body/TableBodyCellEdit.js +1 -1
  10. package/es/table-component/style.js +1 -1
  11. package/es/table-virtuoso/ColumnsGroup/ColumnsGroup.js +1 -1
  12. package/es/table-virtuoso/header/TableHeadCell.js +1 -1
  13. package/es/table-virtuoso/hook/utils.d.ts +1 -1
  14. package/es/table-virtuoso/table/Grid.js +1 -1
  15. package/es/table-virtuoso/table/TableContainer.js +1 -1
  16. package/es/table-virtuoso/table/TableWrapper.d.ts +1 -2
  17. package/es/table-virtuoso/table/TableWrapper.js +1 -0
  18. package/lib/ali-table/base-table/styles.js +1 -1
  19. package/lib/group-component/TableContainerEdit.js +2 -2
  20. package/lib/group-component/body/TableBodyRow.js +15 -4
  21. package/lib/table-component/ColumnsConfig.js +1 -0
  22. package/lib/table-component/TableContainerEdit.js +17 -4
  23. package/lib/table-component/body/EditableCell.js +95 -114
  24. package/lib/table-component/body/TableBodyCellEdit.js +1 -1
  25. package/lib/table-component/style.js +1 -1
  26. package/lib/table-virtuoso/ColumnsGroup/ColumnsGroup.js +3 -4
  27. package/lib/table-virtuoso/header/TableHeadCell.js +4 -5
  28. package/lib/table-virtuoso/hook/utils.d.ts +1 -1
  29. package/lib/table-virtuoso/table/Grid.js +2 -2
  30. package/lib/table-virtuoso/table/TableContainer.js +1 -1
  31. package/lib/table-virtuoso/table/TableWrapper.d.ts +1 -2
  32. package/lib/table-virtuoso/table/TableWrapper.js +2 -0
  33. package/package.json +1 -2
@@ -59,7 +59,7 @@ const outerBorderStyleMixin = css(["border-top:var(--cell-border-horizontal);bor
59
59
  export const StyledArtTableWrapper = styled.div.withConfig({
60
60
  displayName: "StyledArtTableWrapper",
61
61
  componentId: "es-grid-template__sc-ipj1ht-0"
62
- })(["box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{width:8px;height:8px;}&::-webkit-scrollbar-track{background:var(--bgcolor);}&::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.4);border-radius:8px;}&::-webkit-scrollbar-thumb:hover{background:#555;}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.", "{border-left:var(--cell-border-vertical);border-right:var(--cell-border-vertical);border-top:var(--cell-border-vertical);border-bottom:0;&.has-footer{border-bottom:0;.", "{td{}}}&.has-vertical-scroll{border-bottom:var(--cell-border-vertical);th.first{border-left:0;}td.first{border-left:0;}&.has-footer{border-bottom:var(--cell-border-vertical);}.", "{tr.last{td{border-bottom:0;}}}.", "{tr.last{td{border-bottom:0;}}}+ .ui-rc-grid-bottom{border-top:0;}&:not(.has-footer){+ .ui-rc-grid-bottom{border-top:var(--cell-border-vertical);}}}&:not(.has-vertical-scroll){border-left:0;border-right:0;}&:not(.has-header){border-top:0;}}&.use-outer-border{}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}td.first{&.lock-left{border-bottom-width:1px;}}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);}tr.first th{}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}tr td.last,tr th.last{border-right:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{display:flex;height:100%;}.", "{height:1px;visibility:hidden;}.", "{position:relative;height:100%;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], Classes.tableWrapper, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
62
+ })(["box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{width:8px;height:8px;}&::-webkit-scrollbar-track{background:var(--bgcolor);}&::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.4);border-radius:8px;}&::-webkit-scrollbar-thumb:hover{background:#555;}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.", "{border-left:var(--cell-border-vertical);border-right:var(--cell-border-vertical);border-top:var(--cell-border-vertical);border-bottom:0;&.has-footer{border-bottom:0;.", "{td{}}}&.has-vertical-scroll{border-bottom:var(--cell-border-vertical);th.first{border-left:0;}td.first{border-left:0;}&.has-footer{border-bottom:var(--cell-border-vertical);}.", "{tr.last{td{border-bottom:0;}}}.", "{tr.last{td{border-bottom:0;}}}+ .ui-rc-grid-bottom{border-top:0;}&:not(.has-footer){+ .ui-rc-grid-bottom{border-top:var(--cell-border-vertical);}}}&:not(.has-vertical-scroll){border-left:0;border-right:0;}&:not(.has-header){border-top:0;}}&.use-outer-border{}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}td.first{&.lock-left{border-bottom-width:1px;}}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);}tr.first th{}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}tr td.last,tr th.last{border-right:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{height:100%;}.", "{height:1px;visibility:hidden;}.", "{position:relative;height:100%;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], Classes.tableWrapper, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
63
63
 
64
64
  // type StyleTableContainerProps = {
65
65
 
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  export declare const InlineFlexCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
3
- export declare const ExpansionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
3
+ export declare const ExpansionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
4
4
  ref?: React.Ref<HTMLDivElement>;
5
5
  }, never>> & string;
6
6
  interface IconProps extends React.SVGProps<SVGElement> {
@@ -1433,7 +1433,7 @@ const TableContainerEdit = props => {
1433
1433
  };
1434
1434
  const toolbarItemsTop = React.useMemo(() => {
1435
1435
  if (!rowsFocus || rowsFocus.length === 0) {
1436
- return toolbarItems?.filter(it => it.position !== 'Bottom' && it.fixedRight !== false && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
1436
+ return toolbarItems?.filter(it => it.position !== 'Bottom' && it.fixedRight !== true && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
1437
1437
  if (item.key === 'ADD') {
1438
1438
  return {
1439
1439
  ...item,
@@ -1484,7 +1484,7 @@ const TableContainerEdit = props => {
1484
1484
  };
1485
1485
  });
1486
1486
  }
1487
- return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
1487
+ return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== true).map(item => {
1488
1488
  if (item.key === 'ADD') {
1489
1489
  return {
1490
1490
  ...item,
@@ -76,11 +76,22 @@ const TableBodyRow = ({
76
76
  rowData: row.original,
77
77
  rowIndex: row.index
78
78
  });
79
- },
79
+ }
80
+
81
+ // onContextMenu={(e) => {
82
+ // if (contextMenuItems && contextMenuItems.length) {
83
+ // onContextMenu?.(row.original)(e)
84
+ // }
85
+ // }}
86
+ ,
87
+
80
88
  onContextMenu: e => {
81
- if (contextMenuItems && contextMenuItems.length) {
82
- onContextMenu?.(row.original)(e);
83
- }
89
+ const cell = e.target.closest('[data-col-key]');
90
+ const colKey = cell?.getAttribute('data-col-key');
91
+ onContextMenu?.({
92
+ rowData: row.original,
93
+ field: colKey
94
+ })(e);
84
95
  }
85
96
  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
86
97
  const cell = row.getVisibleCells().find(c => c.column.id === column.id);
@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
194
194
  value: any;
195
195
  rowData: RecordType;
196
196
  }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
197
- onCellStyles?: Omit<CSSProperties, "left" | "right" | "minWidth" | "position" | "display" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "minWidth" | "position" | "display" | "width">);
198
- onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "minWidth" | "position" | "display" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "minWidth" | "position" | "display" | "width">);
197
+ onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth">);
198
+ onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth">);
199
199
  onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
200
- onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "minWidth" | "position" | "display" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "minWidth" | "position" | "display" | "width">);
200
+ onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth">);
201
201
  getValue?: (row: any, rowIndex: number) => any;
202
202
  getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
203
203
  headerCellProps?: import("./../../grid-component/type").CellProps;
@@ -297,6 +297,7 @@ export const ColumnsConfig = props => {
297
297
  },
298
298
  useOuterBorder: true,
299
299
  allowFiltering: false,
300
+ allowSortering: false,
300
301
  allowResizing: false
301
302
  }))));
302
303
  };
@@ -23,13 +23,13 @@ import { yupResolver } from "@hookform/resolvers/yup";
23
23
  import { Toolbar } from "rc-master-ui";
24
24
  import classNames from "classnames";
25
25
  import { Maximize, Minimize } from "becoxy-icons";
26
- import { ColumnsConfig } from "./ColumnsConfig";
27
26
  import TableWrapper from "./table/TableWrapper";
28
27
  import withReactContent from "sweetalert2-react-content";
29
28
  import Swal from "sweetalert2";
30
29
  import { useLocale } from "rc-master-ui/es/locale";
31
30
  import { getToolbarTemplate } from "../grid-component/hooks";
32
31
  import moment from "moment";
32
+ import { ColumnsConfig } from "./ColumnsConfig";
33
33
  const MySwal = withReactContent(Swal);
34
34
  const {
35
35
  Paragraph,
@@ -378,7 +378,7 @@ const TableContainerEdit = props => {
378
378
  const targetRow = startRow + rowIndex;
379
379
 
380
380
  // Nếu vượt quá số dòng hiện có, thêm dòng mới
381
- if (targetRow > newData.length) {
381
+ if (targetRow >= newData.length) {
382
382
  const newID = newGuid();
383
383
  const defaultRowValue = getDefaultValue(defaultValue);
384
384
  newData.push(defaultValue ? {
@@ -649,11 +649,24 @@ const TableContainerEdit = props => {
649
649
  const isInsideContainer = element.closest(".be-popup-container") && container;
650
650
  const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
651
651
  const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
652
- const isInsideHeader = itemHeader && itemHeader.contains(event.target);
652
+ const isInsideHeader = itemHeader && itemHeader.contains(element);
653
653
  if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext || element.id === id) {
654
654
  return;
655
655
  }
656
- if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
656
+
657
+ // trường hợp đặc biệt select table clear icon
658
+ const path = '<path d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"></path>';
659
+ const expectedD = path.match(/d="([^"]*)"/)?.[1];
660
+ const clickedPath = element.closest('path') ?? element.closest('svg')?.querySelector('path');
661
+ if (clickedPath) {
662
+ const isMatch = clickedPath.getAttribute('d') === expectedD;
663
+ if (isMatch) {
664
+ return;
665
+ }
666
+ }
667
+ // trường hợp đặc biệt select table clear icon
668
+
669
+ if (containerRef.current && tableBody && !tableBody.contains(element)) {
657
670
  if (editingKey) {
658
671
  onBlur?.(dataSource);
659
672
  }
@@ -71,6 +71,7 @@ const EditableCell = props => {
71
71
  const date = !isEmpty(value) ? convertDateToDayjs(new Date(value), dateFormat) : null;
72
72
  const maxDate = convertDateToDayjs(column.maxDate, dateFormat) ?? undefined;
73
73
  const minDate = convertDateToDayjs(column.minDate, dateFormat) ?? undefined;
74
+ const formValues = getValues();
74
75
  const {
75
76
  fieldValue,
76
77
  columns: selectColumns,
@@ -196,41 +197,6 @@ const EditableCell = props => {
196
197
  maxDate: maxDate,
197
198
  minDate: minDate
198
199
  // mode="date"
199
-
200
- // onChange={(newDate, dateString) => {
201
-
202
- // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
203
-
204
- // onChange(newDateValue)
205
-
206
- // setTimeout(() => {
207
- // // @ts-ignore
208
- // dateTimePickerRef.current?.focus()
209
- // }, 0)
210
-
211
- // }}
212
-
213
- // onBlur={() => {
214
- // const formState = getValues()
215
- // const itemState = getValues(dataIndex)
216
- // // @ts-ignore
217
- // const prevState = record[dataIndex]
218
- // const newState = itemState
219
-
220
- // if (prevState !== newState) {
221
- // handleCellChange?.({
222
- // key: key as any,
223
- // field: column.field ?? column.field as any,
224
- // record: formState,
225
- // prevState,
226
- // newState,
227
- // option: newState,
228
- // indexCol,
229
- // indexRow,
230
- // type: 'blur'
231
- // })
232
- // }
233
- // }}
234
200
  ,
235
201
 
236
202
  popupClassName: 'be-popup-container',
@@ -238,8 +204,10 @@ const EditableCell = props => {
238
204
  "data-tooltip-content": message,
239
205
  "data-tooltip-id": `${id}-tooltip-error`,
240
206
  autoFocus: column.field === startCell?.colId,
241
- defaultOpen: column.field === startCell?.colId,
242
- needConfirm: false,
207
+ defaultOpen: column.field === startCell?.colId
208
+ // needConfirm={true}
209
+ ,
210
+
243
211
  onCalendarChange: (newDate, dateString) => {
244
212
  const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
245
213
  onChange(newDateValue);
@@ -499,10 +467,10 @@ const EditableCell = props => {
499
467
  align: colSelect.textAlign
500
468
  };
501
469
  });
502
- let valueSelectTable = value;
470
+ let valueSelectTable = formValues[dataIndex];
503
471
  if (fieldValue) {
504
472
  // @ts-ignore
505
- valueSelectTable = record[fieldValue] ?? value;
473
+ valueSelectTable = record[fieldValue] ?? formValues[dataIndex];
506
474
  }
507
475
  return /*#__PURE__*/React.createElement(AsyncTableSelect, {
508
476
  columns: columnsTable,
@@ -511,17 +479,19 @@ const EditableCell = props => {
511
479
  value: valueSelectTable ?? undefined,
512
480
  autoDestroy: true,
513
481
  onChange: (val, option) => {
514
- onChange(val);
482
+ onChange(val ?? '');
515
483
  const formState = getValues();
516
- // const itemState = getValues(dataIndex)
484
+ const formNewState = {
485
+ ...getValues(),
486
+ [dataIndex]: formState[dataIndex] || undefined
487
+ };
517
488
  // @ts-ignore
518
- const prevState = record[dataIndex];
519
- const newState = val;
489
+ const prevState = record[dataIndex] ?? undefined;
490
+ const newState = val ?? undefined;
520
491
  handleCellChange?.({
521
- // @ts-ignore
522
- key: record[rowKey],
492
+ key,
523
493
  field: column.field ?? column.field,
524
- record: formState,
494
+ record: formNewState,
525
495
  prevState,
526
496
  newState,
527
497
  option: option,
@@ -584,82 +554,90 @@ const EditableCell = props => {
584
554
  fieldNames: fieldNames ? fieldNames : {
585
555
  value: keySelect,
586
556
  label: inputKey ?? 'label'
587
- },
588
- onBlur: event => {
589
- if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
590
- const val = event.inputValue;
591
- onChange(val ?? undefined);
592
- const formState = getValues();
593
- // const itemState = getValues(dataIndex)
594
- // @ts-ignore
595
- const prevState = record[dataIndex];
596
- const newState = val;
597
- handleCellChange?.({
598
- key,
599
- field: column.field ?? column.field,
600
- record: formState,
601
- prevState,
602
- newState,
603
- option: {
604
- value: val,
605
- label: val,
606
- searchTextAsValue: true
607
- },
608
- indexCol,
609
- indexRow,
610
- type: 'blur'
611
- });
612
- }
613
- },
614
- onKeyDown: event => {
615
- if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
616
- const val = event.target.value;
617
- onChange(val);
618
- const formState = getValues();
619
- // const itemState = getValues(dataIndex)
620
- // @ts-ignore
621
- const prevState = record[dataIndex];
622
- const newState = val;
623
- handleCellChange?.({
624
- key,
625
- field: column.field ?? column.field,
626
- record: formState,
627
- prevState,
628
- newState,
629
- option: {
630
- value: val,
631
- label: val,
632
- searchTextAsValue: true
633
- },
634
- indexCol,
635
- indexRow,
636
- type: 'blur'
637
- });
638
- }
639
- },
557
+ }
558
+
559
+ // onBlur={(event: any) => {
560
+
561
+ // if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
562
+ // const val = event.inputValue
563
+ // onChange(val ?? undefined)
564
+
565
+ // const formState = getValues()
566
+ // // const itemState = getValues(dataIndex)
567
+ // // @ts-ignore
568
+ // const prevState = record[dataIndex]
569
+ // const newState = val
570
+
571
+ // handleCellChange?.({
572
+ // key,
573
+ // field: column.field ?? column.field as any,
574
+ // record: formState,
575
+ // prevState,
576
+ // newState,
577
+ // option: { value: val, label: val, searchTextAsValue: true } as any,
578
+ // indexCol,
579
+ // indexRow,
580
+ // type: 'blur'
581
+ // })
582
+ // }
583
+ // }}
584
+
585
+ // onKeyDown={(event: any) => {
586
+
587
+ // if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
588
+
589
+ // const val = event.target.value
590
+ // onChange(val)
591
+
592
+ // const formState = getValues()
593
+ // // const itemState = getValues(dataIndex)
594
+ // // @ts-ignore
595
+ // const prevState = record[dataIndex]
596
+ // const newState = val
597
+
598
+ // handleCellChange?.({
599
+ // key,
600
+ // field: column.field ?? column.field as any,
601
+ // record: formState,
602
+ // prevState,
603
+ // newState,
604
+ // option: { value: val, label: val, searchTextAsValue: true } as any,
605
+ // indexCol,
606
+ // indexRow,
607
+ // type: 'blur'
608
+ // })
609
+
610
+ // }
611
+
612
+ // }}
613
+ ,
614
+
640
615
  "data-tooltip-content": message,
641
616
  "data-tooltip-id": `${id}-tooltip-error`
642
617
  });
643
618
  case 'select':
644
- let valueSelect = value;
619
+ let valueSelect = formValues[dataIndex];
645
620
  if (fieldValue) {
646
621
  // @ts-ignore
647
- valueSelect = record[fieldValue] ?? value;
622
+ valueSelect = record[fieldValue] ?? formValues[dataIndex];
648
623
  }
649
624
  return /*#__PURE__*/React.createElement(Select, {
650
625
  options: options,
651
- value: valueSelect ?? undefined,
626
+ value: valueSelect ?? '',
652
627
  onChange: (val, option) => {
653
- onChange(val);
628
+ onChange(val ?? '');
654
629
  const formState = getValues();
655
- // const itemState = getValues(dataIndex)
630
+ const formNewState = {
631
+ ...getValues(),
632
+ [dataIndex]: formState[dataIndex] || undefined
633
+ };
656
634
  // @ts-ignore
657
- const prevState = record[dataIndex];
658
- const newState = val;
635
+ const prevState = record[dataIndex] ?? undefined;
636
+ const newState = val ?? undefined;
659
637
  handleCellChange?.({
660
638
  key,
661
639
  field: column.field ?? column.field,
662
- record: formState,
640
+ record: formNewState,
663
641
  prevState,
664
642
  newState,
665
643
  option: option,
@@ -781,26 +759,29 @@ const EditableCell = props => {
781
759
  "data-tooltip-id": `${id}-tooltip-error`
782
760
  });
783
761
  case 'asyncSelect':
784
- let valueAsyncSelect = value;
762
+ let valueAsyncSelect = formValues[dataIndex];
785
763
  if (fieldValue) {
786
764
  // @ts-ignore
787
- valueAsyncSelect = record[fieldValue] ?? value;
765
+ valueAsyncSelect = record[fieldValue] ?? formValues[dataIndex];
788
766
  }
789
767
  return /*#__PURE__*/React.createElement(AsyncSelect, {
790
768
  options: options,
791
769
  defaultOptions: options,
792
770
  value: valueAsyncSelect ?? undefined,
793
771
  onChange: (val, option) => {
794
- onChange(val);
772
+ onChange(val ?? '');
795
773
  const formState = getValues();
796
- // const itemState = getValues(dataIndex)
774
+ const formNewState = {
775
+ ...getValues(),
776
+ [dataIndex]: formState[dataIndex] || undefined
777
+ };
797
778
  // @ts-ignore
798
- const prevState = record[dataIndex];
799
- const newState = val;
779
+ const prevState = record[dataIndex] ?? undefined;
780
+ const newState = val ?? undefined;
800
781
  handleCellChange?.({
801
782
  key,
802
783
  field: column.field ?? column.field,
803
- record: formState,
784
+ record: formNewState,
804
785
  prevState,
805
786
  newState,
806
787
  option: option,
@@ -1311,7 +1311,7 @@ const TableBodyCellEdit = props => {
1311
1311
  // rowKey={rowKey}
1312
1312
  }) : /*#__PURE__*/React.createElement("div", {
1313
1313
  className: classNames('ui-rc_cell-content', {
1314
- 'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect'].includes(getEditType(columnMeta, record))
1314
+ 'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes(getEditType(columnMeta, record))
1315
1315
  })
1316
1316
  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
1317
1317
  className: "ui-rc-table-row-expand-trigger",
@@ -48,4 +48,4 @@ const colorDark = '#e6e4f3e6 ';
48
48
  export const GridStyle = styled.div.withConfig({
49
49
  displayName: "GridStyle",
50
50
  componentId: "es-grid-template__sc-hdqm5k-0"
51
- })(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
51
+ })(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
@@ -6,7 +6,7 @@ import React, { useRef, useState } from "react";
6
6
  // // useOnClickOutside
7
7
  // } from "../../hooks"
8
8
 
9
- import { Button, Popover } from "antd";
9
+ import { Button, Popover } from "rc-master-ui";
10
10
  // import {SettingOutlined} from "@ant-design/icons";
11
11
  import { Select } from "rc-master-ui";
12
12
  import styled from "styled-components";
@@ -1,5 +1,5 @@
1
1
  import React, { useContext } from 'react';
2
- import { Button, Space } from 'antd';
2
+ import { Button, Space } from 'rc-master-ui';
3
3
  import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
4
4
  import classNames from 'classnames';
5
5
  import { Checkbox, Dropdown, Select } from 'rc-master-ui';
@@ -6,7 +6,7 @@ import type { Key } from "react";
6
6
  import type { CSSProperties } from "react";
7
7
  import dayjs from "dayjs";
8
8
  import type { ColumnDef } from "@tanstack/react-table";
9
- import type { TreeDataNode } from "antd";
9
+ import type { TreeDataNode } from "rc-master-ui";
10
10
  import type { IPositionCell } from "../../table-component/useContext";
11
11
  export declare const newGuid: () => any;
12
12
  export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
@@ -1,5 +1,5 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
- import { Modal } from 'antd';
2
+ import { Modal } from 'rc-master-ui';
3
3
  import { faker } from '@faker-js/faker';
4
4
  import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
5
5
  import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
@@ -113,7 +113,7 @@ const TableContainer = props => {
113
113
  if (!toolbarItems) {
114
114
  return undefined;
115
115
  }
116
- return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
116
+ return toolbarItems.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== true);
117
117
  }, [toolbarItems]);
118
118
  const toolbarItemTopRight = React.useMemo(() => {
119
119
  if (!toolbarItems) {
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { ColumnDef, Table } from "@tanstack/react-table";
3
- import type { CommandClick, ContextInfo, PaginationConfig } from '../../grid-component/type';
4
- import type { ContextMenuItem } from "../..";
3
+ import type { CommandClick, ContextInfo, ContextMenuItem, PaginationConfig } from '../../grid-component/type';
5
4
  type Props<T> = {
6
5
  tableContainerRef: React.RefObject<HTMLDivElement>;
7
6
  table: Table<T>;
@@ -7,6 +7,7 @@ import { TableContext } from "../useContext";
7
7
  import classNames from 'classnames';
8
8
  import TableBodyRow from "../body/TableBodyRow";
9
9
  import TableFooterCell from "../footer/TableFooterCell";
10
+ // import type { ContextMenuItem } from 'es-grid-template';
10
11
  import { Tooltip } from 'react-tooltip';
11
12
  import ContextMenu from "../../table-component/ContextMenu";
12
13
  const TableWrapper = props => {
@@ -67,7 +67,7 @@ const outerBorderStyleMixin = (0, _styledComponents.css)(["border-top:var(--cell
67
67
  const StyledArtTableWrapper = exports.StyledArtTableWrapper = _styledComponents.default.div.withConfig({
68
68
  displayName: "StyledArtTableWrapper",
69
69
  componentId: "es-grid-template__sc-ipj1ht-0"
70
- })(["box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{width:8px;height:8px;}&::-webkit-scrollbar-track{background:var(--bgcolor);}&::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.4);border-radius:8px;}&::-webkit-scrollbar-thumb:hover{background:#555;}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.", "{border-left:var(--cell-border-vertical);border-right:var(--cell-border-vertical);border-top:var(--cell-border-vertical);border-bottom:0;&.has-footer{border-bottom:0;.", "{td{}}}&.has-vertical-scroll{border-bottom:var(--cell-border-vertical);th.first{border-left:0;}td.first{border-left:0;}&.has-footer{border-bottom:var(--cell-border-vertical);}.", "{tr.last{td{border-bottom:0;}}}.", "{tr.last{td{border-bottom:0;}}}+ .ui-rc-grid-bottom{border-top:0;}&:not(.has-footer){+ .ui-rc-grid-bottom{border-top:var(--cell-border-vertical);}}}&:not(.has-vertical-scroll){border-left:0;border-right:0;}&:not(.has-header){border-top:0;}}&.use-outer-border{}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}td.first{&.lock-left{border-bottom-width:1px;}}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);}tr.first th{}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}tr td.last,tr th.last{border-right:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{display:flex;height:100%;}.", "{height:1px;visibility:hidden;}.", "{position:relative;height:100%;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], Classes.tableWrapper, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
70
+ })(["box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{width:8px;height:8px;}&::-webkit-scrollbar-track{background:var(--bgcolor);}&::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.4);border-radius:8px;}&::-webkit-scrollbar-thumb:hover{background:#555;}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.", "{border-left:var(--cell-border-vertical);border-right:var(--cell-border-vertical);border-top:var(--cell-border-vertical);border-bottom:0;&.has-footer{border-bottom:0;.", "{td{}}}&.has-vertical-scroll{border-bottom:var(--cell-border-vertical);th.first{border-left:0;}td.first{border-left:0;}&.has-footer{border-bottom:var(--cell-border-vertical);}.", "{tr.last{td{border-bottom:0;}}}.", "{tr.last{td{border-bottom:0;}}}+ .ui-rc-grid-bottom{border-top:0;}&:not(.has-footer){+ .ui-rc-grid-bottom{border-top:var(--cell-border-vertical);}}}&:not(.has-vertical-scroll){border-left:0;border-right:0;}&:not(.has-header){border-top:0;}}&.use-outer-border{}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}td.first{&.lock-left{border-bottom-width:1px;}}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);}tr.first th{}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}tr td.last,tr th.last{border-right:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{height:100%;}.", "{height:1px;visibility:hidden;}.", "{position:relative;height:100%;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], Classes.tableWrapper, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
71
71
 
72
72
  // type StyleTableContainerProps = {
73
73
 
@@ -1441,7 +1441,7 @@ const TableContainerEdit = props => {
1441
1441
  };
1442
1442
  const toolbarItemsTop = _react.default.useMemo(() => {
1443
1443
  if (!rowsFocus || rowsFocus.length === 0) {
1444
- return toolbarItems?.filter(it => it.position !== 'Bottom' && it.fixedRight !== false && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
1444
+ return toolbarItems?.filter(it => it.position !== 'Bottom' && it.fixedRight !== true && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
1445
1445
  if (item.key === 'ADD') {
1446
1446
  return {
1447
1447
  ...item,
@@ -1492,7 +1492,7 @@ const TableContainerEdit = props => {
1492
1492
  };
1493
1493
  });
1494
1494
  }
1495
- return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
1495
+ return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== true).map(item => {
1496
1496
  if (item.key === 'ADD') {
1497
1497
  return {
1498
1498
  ...item,
@@ -83,11 +83,22 @@ const TableBodyRow = ({
83
83
  rowData: row.original,
84
84
  rowIndex: row.index
85
85
  });
86
- },
86
+ }
87
+
88
+ // onContextMenu={(e) => {
89
+ // if (contextMenuItems && contextMenuItems.length) {
90
+ // onContextMenu?.(row.original)(e)
91
+ // }
92
+ // }}
93
+ ,
94
+
87
95
  onContextMenu: e => {
88
- if (contextMenuItems && contextMenuItems.length) {
89
- onContextMenu?.(row.original)(e);
90
- }
96
+ const cell = e.target.closest('[data-col-key]');
97
+ const colKey = cell?.getAttribute('data-col-key');
98
+ onContextMenu?.({
99
+ rowData: row.original,
100
+ field: colKey
101
+ })(e);
91
102
  }
92
103
  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
93
104
  const cell = row.getVisibleCells().find(c => c.column.id === column.id);
@@ -306,6 +306,7 @@ const ColumnsConfig = props => {
306
306
  },
307
307
  useOuterBorder: true,
308
308
  allowFiltering: false,
309
+ allowSortering: false,
309
310
  allowResizing: false
310
311
  }))));
311
312
  };
@@ -20,13 +20,13 @@ var _useContext = require("./useContext");
20
20
  var _yup = require("@hookform/resolvers/yup");
21
21
  var _classnames = _interopRequireDefault(require("classnames"));
22
22
  var _becoxyIcons = require("becoxy-icons");
23
- var _ColumnsConfig = require("./ColumnsConfig");
24
23
  var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
25
24
  var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react-content"));
26
25
  var _sweetalert = _interopRequireDefault(require("sweetalert2"));
27
26
  var _locale = require("rc-master-ui/es/locale");
28
27
  var _hooks = require("../grid-component/hooks");
29
28
  var _moment = _interopRequireDefault(require("moment"));
29
+ var _ColumnsConfig = require("./ColumnsConfig");
30
30
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
31
31
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
32
32
  const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
@@ -377,7 +377,7 @@ const TableContainerEdit = props => {
377
377
  const targetRow = startRow + rowIndex;
378
378
 
379
379
  // Nếu vượt quá số dòng hiện có, thêm dòng mới
380
- if (targetRow > newData.length) {
380
+ if (targetRow >= newData.length) {
381
381
  const newID = (0, _utils.newGuid)();
382
382
  const defaultRowValue = (0, _utils.getDefaultValue)(defaultValue);
383
383
  newData.push(defaultValue ? {
@@ -648,11 +648,24 @@ const TableContainerEdit = props => {
648
648
  const isInsideContainer = element.closest(".be-popup-container") && container;
649
649
  const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
650
650
  const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
651
- const isInsideHeader = itemHeader && itemHeader.contains(event.target);
651
+ const isInsideHeader = itemHeader && itemHeader.contains(element);
652
652
  if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext || element.id === id) {
653
653
  return;
654
654
  }
655
- if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
655
+
656
+ // trường hợp đặc biệt select table clear icon
657
+ const path = '<path d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"></path>';
658
+ const expectedD = path.match(/d="([^"]*)"/)?.[1];
659
+ const clickedPath = element.closest('path') ?? element.closest('svg')?.querySelector('path');
660
+ if (clickedPath) {
661
+ const isMatch = clickedPath.getAttribute('d') === expectedD;
662
+ if (isMatch) {
663
+ return;
664
+ }
665
+ }
666
+ // trường hợp đặc biệt select table clear icon
667
+
668
+ if (containerRef.current && tableBody && !tableBody.contains(element)) {
656
669
  if (editingKey) {
657
670
  onBlur?.(dataSource);
658
671
  }
@@ -78,6 +78,7 @@ const EditableCell = props => {
78
78
  const date = !(0, _utils.isEmpty)(value) ? (0, _utils.convertDateToDayjs)(new Date(value), dateFormat) : null;
79
79
  const maxDate = (0, _utils.convertDateToDayjs)(column.maxDate, dateFormat) ?? undefined;
80
80
  const minDate = (0, _utils.convertDateToDayjs)(column.minDate, dateFormat) ?? undefined;
81
+ const formValues = getValues();
81
82
  const {
82
83
  fieldValue,
83
84
  columns: selectColumns,
@@ -203,41 +204,6 @@ const EditableCell = props => {
203
204
  maxDate: maxDate,
204
205
  minDate: minDate
205
206
  // mode="date"
206
-
207
- // onChange={(newDate, dateString) => {
208
-
209
- // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
210
-
211
- // onChange(newDateValue)
212
-
213
- // setTimeout(() => {
214
- // // @ts-ignore
215
- // dateTimePickerRef.current?.focus()
216
- // }, 0)
217
-
218
- // }}
219
-
220
- // onBlur={() => {
221
- // const formState = getValues()
222
- // const itemState = getValues(dataIndex)
223
- // // @ts-ignore
224
- // const prevState = record[dataIndex]
225
- // const newState = itemState
226
-
227
- // if (prevState !== newState) {
228
- // handleCellChange?.({
229
- // key: key as any,
230
- // field: column.field ?? column.field as any,
231
- // record: formState,
232
- // prevState,
233
- // newState,
234
- // option: newState,
235
- // indexCol,
236
- // indexRow,
237
- // type: 'blur'
238
- // })
239
- // }
240
- // }}
241
207
  ,
242
208
 
243
209
  popupClassName: 'be-popup-container',
@@ -245,8 +211,10 @@ const EditableCell = props => {
245
211
  "data-tooltip-content": message,
246
212
  "data-tooltip-id": `${id}-tooltip-error`,
247
213
  autoFocus: column.field === startCell?.colId,
248
- defaultOpen: column.field === startCell?.colId,
249
- needConfirm: false,
214
+ defaultOpen: column.field === startCell?.colId
215
+ // needConfirm={true}
216
+ ,
217
+
250
218
  onCalendarChange: (newDate, dateString) => {
251
219
  const newDateValue = dateString ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString, dateFormat)).format() : null;
252
220
  onChange(newDateValue);
@@ -506,10 +474,10 @@ const EditableCell = props => {
506
474
  align: colSelect.textAlign
507
475
  };
508
476
  });
509
- let valueSelectTable = value;
477
+ let valueSelectTable = formValues[dataIndex];
510
478
  if (fieldValue) {
511
479
  // @ts-ignore
512
- valueSelectTable = record[fieldValue] ?? value;
480
+ valueSelectTable = record[fieldValue] ?? formValues[dataIndex];
513
481
  }
514
482
  return /*#__PURE__*/_react.default.createElement(_asyncTableSelect.AsyncTableSelect, {
515
483
  columns: columnsTable,
@@ -518,17 +486,19 @@ const EditableCell = props => {
518
486
  value: valueSelectTable ?? undefined,
519
487
  autoDestroy: true,
520
488
  onChange: (val, option) => {
521
- onChange(val);
489
+ onChange(val ?? '');
522
490
  const formState = getValues();
523
- // const itemState = getValues(dataIndex)
491
+ const formNewState = {
492
+ ...getValues(),
493
+ [dataIndex]: formState[dataIndex] || undefined
494
+ };
524
495
  // @ts-ignore
525
- const prevState = record[dataIndex];
526
- const newState = val;
496
+ const prevState = record[dataIndex] ?? undefined;
497
+ const newState = val ?? undefined;
527
498
  handleCellChange?.({
528
- // @ts-ignore
529
- key: record[rowKey],
499
+ key,
530
500
  field: column.field ?? column.field,
531
- record: formState,
501
+ record: formNewState,
532
502
  prevState,
533
503
  newState,
534
504
  option: option,
@@ -591,82 +561,90 @@ const EditableCell = props => {
591
561
  fieldNames: fieldNames ? fieldNames : {
592
562
  value: keySelect,
593
563
  label: inputKey ?? 'label'
594
- },
595
- onBlur: event => {
596
- if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
597
- const val = event.inputValue;
598
- onChange(val ?? undefined);
599
- const formState = getValues();
600
- // const itemState = getValues(dataIndex)
601
- // @ts-ignore
602
- const prevState = record[dataIndex];
603
- const newState = val;
604
- handleCellChange?.({
605
- key,
606
- field: column.field ?? column.field,
607
- record: formState,
608
- prevState,
609
- newState,
610
- option: {
611
- value: val,
612
- label: val,
613
- searchTextAsValue: true
614
- },
615
- indexCol,
616
- indexRow,
617
- type: 'blur'
618
- });
619
- }
620
- },
621
- onKeyDown: event => {
622
- if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
623
- const val = event.target.value;
624
- onChange(val);
625
- const formState = getValues();
626
- // const itemState = getValues(dataIndex)
627
- // @ts-ignore
628
- const prevState = record[dataIndex];
629
- const newState = val;
630
- handleCellChange?.({
631
- key,
632
- field: column.field ?? column.field,
633
- record: formState,
634
- prevState,
635
- newState,
636
- option: {
637
- value: val,
638
- label: val,
639
- searchTextAsValue: true
640
- },
641
- indexCol,
642
- indexRow,
643
- type: 'blur'
644
- });
645
- }
646
- },
564
+ }
565
+
566
+ // onBlur={(event: any) => {
567
+
568
+ // if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
569
+ // const val = event.inputValue
570
+ // onChange(val ?? undefined)
571
+
572
+ // const formState = getValues()
573
+ // // const itemState = getValues(dataIndex)
574
+ // // @ts-ignore
575
+ // const prevState = record[dataIndex]
576
+ // const newState = val
577
+
578
+ // handleCellChange?.({
579
+ // key,
580
+ // field: column.field ?? column.field as any,
581
+ // record: formState,
582
+ // prevState,
583
+ // newState,
584
+ // option: { value: val, label: val, searchTextAsValue: true } as any,
585
+ // indexCol,
586
+ // indexRow,
587
+ // type: 'blur'
588
+ // })
589
+ // }
590
+ // }}
591
+
592
+ // onKeyDown={(event: any) => {
593
+
594
+ // if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
595
+
596
+ // const val = event.target.value
597
+ // onChange(val)
598
+
599
+ // const formState = getValues()
600
+ // // const itemState = getValues(dataIndex)
601
+ // // @ts-ignore
602
+ // const prevState = record[dataIndex]
603
+ // const newState = val
604
+
605
+ // handleCellChange?.({
606
+ // key,
607
+ // field: column.field ?? column.field as any,
608
+ // record: formState,
609
+ // prevState,
610
+ // newState,
611
+ // option: { value: val, label: val, searchTextAsValue: true } as any,
612
+ // indexCol,
613
+ // indexRow,
614
+ // type: 'blur'
615
+ // })
616
+
617
+ // }
618
+
619
+ // }}
620
+ ,
621
+
647
622
  "data-tooltip-content": message,
648
623
  "data-tooltip-id": `${id}-tooltip-error`
649
624
  });
650
625
  case 'select':
651
- let valueSelect = value;
626
+ let valueSelect = formValues[dataIndex];
652
627
  if (fieldValue) {
653
628
  // @ts-ignore
654
- valueSelect = record[fieldValue] ?? value;
629
+ valueSelect = record[fieldValue] ?? formValues[dataIndex];
655
630
  }
656
631
  return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
657
632
  options: options,
658
- value: valueSelect ?? undefined,
633
+ value: valueSelect ?? '',
659
634
  onChange: (val, option) => {
660
- onChange(val);
635
+ onChange(val ?? '');
661
636
  const formState = getValues();
662
- // const itemState = getValues(dataIndex)
637
+ const formNewState = {
638
+ ...getValues(),
639
+ [dataIndex]: formState[dataIndex] || undefined
640
+ };
663
641
  // @ts-ignore
664
- const prevState = record[dataIndex];
665
- const newState = val;
642
+ const prevState = record[dataIndex] ?? undefined;
643
+ const newState = val ?? undefined;
666
644
  handleCellChange?.({
667
645
  key,
668
646
  field: column.field ?? column.field,
669
- record: formState,
647
+ record: formNewState,
670
648
  prevState,
671
649
  newState,
672
650
  option: option,
@@ -788,26 +766,29 @@ const EditableCell = props => {
788
766
  "data-tooltip-id": `${id}-tooltip-error`
789
767
  });
790
768
  case 'asyncSelect':
791
- let valueAsyncSelect = value;
769
+ let valueAsyncSelect = formValues[dataIndex];
792
770
  if (fieldValue) {
793
771
  // @ts-ignore
794
- valueAsyncSelect = record[fieldValue] ?? value;
772
+ valueAsyncSelect = record[fieldValue] ?? formValues[dataIndex];
795
773
  }
796
774
  return /*#__PURE__*/_react.default.createElement(_asyncSelect.AsyncSelect, {
797
775
  options: options,
798
776
  defaultOptions: options,
799
777
  value: valueAsyncSelect ?? undefined,
800
778
  onChange: (val, option) => {
801
- onChange(val);
779
+ onChange(val ?? '');
802
780
  const formState = getValues();
803
- // const itemState = getValues(dataIndex)
781
+ const formNewState = {
782
+ ...getValues(),
783
+ [dataIndex]: formState[dataIndex] || undefined
784
+ };
804
785
  // @ts-ignore
805
- const prevState = record[dataIndex];
806
- const newState = val;
786
+ const prevState = record[dataIndex] ?? undefined;
787
+ const newState = val ?? undefined;
807
788
  handleCellChange?.({
808
789
  key,
809
790
  field: column.field ?? column.field,
810
- record: formState,
791
+ record: formNewState,
811
792
  prevState,
812
793
  newState,
813
794
  option: option,
@@ -1318,7 +1318,7 @@ const TableBodyCellEdit = props => {
1318
1318
  // rowKey={rowKey}
1319
1319
  }) : /*#__PURE__*/_react.default.createElement("div", {
1320
1320
  className: (0, _classnames.default)('ui-rc_cell-content', {
1321
- 'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect'].includes((0, _utils.getEditType)(columnMeta, record))
1321
+ 'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes((0, _utils.getEditType)(columnMeta, record))
1322
1322
  })
1323
1323
  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
1324
1324
  className: "ui-rc-table-row-expand-trigger",
@@ -55,4 +55,4 @@ const colorDark = '#e6e4f3e6 ';
55
55
  const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
56
56
  displayName: "GridStyle",
57
57
  componentId: "es-grid-template__sc-hdqm5k-0"
58
- })(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
58
+ })(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.ColumnsGroup = void 0;
8
8
  var _becoxyIcons = require("becoxy-icons");
9
9
  var _react = _interopRequireWildcard(require("react"));
10
- var _antd = require("antd");
11
10
  var _rcMasterUi = require("rc-master-ui");
12
11
  var _styledComponents = _interopRequireDefault(require("styled-components"));
13
12
  var _hooks = require("../../grid-component/hooks");
@@ -105,7 +104,7 @@ const ColumnsGroup = props => {
105
104
  setTempGroup([]);
106
105
  }
107
106
  };
108
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
107
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Popover, {
109
108
  placement: 'bottomLeft',
110
109
  content: /*#__PURE__*/_react.default.createElement("div", {
111
110
  style: {
@@ -213,14 +212,14 @@ const ColumnsGroup = props => {
213
212
  filterOption: _hooks.customFilterOption
214
213
  }))), /*#__PURE__*/_react.default.createElement(BoxAction, {
215
214
  className: 'px-1'
216
- }, /*#__PURE__*/_react.default.createElement(_antd.Button
215
+ }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Button
217
216
  // className={classnames('btn-action btn-action-submit', {
218
217
  // // disable: !columns.find((item) => item.visible !== false || item.visible)
219
218
  // })}
220
219
  , {
221
220
  onClick: handleGroup
222
221
  // disabled={!columns.find((item) => item.visible !== false || item.visible)}
223
- }, t ? t('Thực hiện') : 'Thực hiện'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
222
+ }, t ? t('Thực hiện') : 'Thực hiện'), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Button, {
224
223
  className: 'btn-action btn-action-cancel',
225
224
  onClick: handleClear
226
225
  }, t ? t('Clear') : 'Clear'))),
@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
- var _antd = require("antd");
9
+ var _rcMasterUi = require("rc-master-ui");
10
10
  var _becoxyIcons = require("becoxy-icons");
11
11
  var _classnames = _interopRequireDefault(require("classnames"));
12
- var _rcMasterUi = require("rc-master-ui");
13
12
  var _utils = require("../hook/utils");
14
13
  var _renderFilter = require("./renderFilter");
15
14
  var _useContext = require("../useContext");
@@ -160,12 +159,12 @@ const TableHeadCell = props => {
160
159
  column: column,
161
160
  selectedKeys,
162
161
  setSelectedKeys
163
- })), /*#__PURE__*/_react.default.createElement(_antd.Space, {
162
+ })), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Space, {
164
163
  style: {
165
164
  justifyContent: 'end',
166
165
  width: '100%'
167
166
  }
168
- }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
167
+ }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Button, {
169
168
  type: "primary",
170
169
  onClick: () => {
171
170
  doFilter(true);
@@ -174,7 +173,7 @@ const TableHeadCell = props => {
174
173
  style: {
175
174
  width: 90
176
175
  }
177
- }, t ? t('Filter') : 'Filter'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
176
+ }, t ? t('Filter') : 'Filter'), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Button, {
178
177
  type: "link",
179
178
  size: "small",
180
179
  onClick: () => {
@@ -6,7 +6,7 @@ import type { Key } from "react";
6
6
  import type { CSSProperties } from "react";
7
7
  import dayjs from "dayjs";
8
8
  import type { ColumnDef } from "@tanstack/react-table";
9
- import type { TreeDataNode } from "antd";
9
+ import type { TreeDataNode } from "rc-master-ui";
10
10
  import type { IPositionCell } from "../../table-component/useContext";
11
11
  export declare const newGuid: () => any;
12
12
  export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _antd = require("antd");
9
+ var _rcMasterUi = require("rc-master-ui");
10
10
  var _faker = require("@faker-js/faker");
11
11
  var _core = require("@dnd-kit/core");
12
12
  var _modifiers = require("@dnd-kit/modifiers");
@@ -208,7 +208,7 @@ const Grid = props => {
208
208
  columnSizingInfo: columnSizingInfo,
209
209
  isFullScreen: isFullScreen,
210
210
  setIsFullScreen: setIsFullScreen
211
- })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
211
+ })))), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Modal, {
212
212
  open: isFullScreen,
213
213
  footer: null,
214
214
  centered: true,
@@ -121,7 +121,7 @@ const TableContainer = props => {
121
121
  if (!toolbarItems) {
122
122
  return undefined;
123
123
  }
124
- return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
124
+ return toolbarItems.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== true);
125
125
  }, [toolbarItems]);
126
126
  const toolbarItemTopRight = _react.default.useMemo(() => {
127
127
  if (!toolbarItems) {
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { ColumnDef, Table } from "@tanstack/react-table";
3
- import type { CommandClick, ContextInfo, PaginationConfig } from '../../grid-component/type';
4
- import type { ContextMenuItem } from "../..";
3
+ import type { CommandClick, ContextInfo, ContextMenuItem, PaginationConfig } from '../../grid-component/type';
5
4
  type Props<T> = {
6
5
  tableContainerRef: React.RefObject<HTMLDivElement>;
7
6
  table: Table<T>;
@@ -19,6 +19,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
19
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
20
20
  /* eslint-disable @typescript-eslint/no-shadow */
21
21
 
22
+ // import type { ContextMenuItem } from 'es-grid-template';
23
+
22
24
  const TableWrapper = props => {
23
25
  const {
24
26
  table,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "es-grid-template",
3
- "version": "1.9.55",
3
+ "version": "1.9.57",
4
4
  "description": "es-grid-template",
5
5
  "keywords": [
6
6
  "react",
@@ -55,7 +55,6 @@
55
55
  "@types/react-resizable": "3.0.8",
56
56
  "@types/styled-components": "5.1.34",
57
57
  "@vitest/coverage-v8": "2.0.5",
58
- "antd": "5.24.1",
59
58
  "antd-style": "3.7.1",
60
59
  "becoxy-icons": "^2.1.1",
61
60
  "classnames": "2.3.1",