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.
- package/es/ali-table/base-table/styles.js +1 -1
- package/es/ali-table/common-views.d.ts +1 -1
- package/es/group-component/TableContainerEdit.js +2 -2
- package/es/group-component/body/TableBodyRow.js +15 -4
- package/es/group-component/hook/utils.d.ts +3 -3
- package/es/table-component/ColumnsConfig.js +1 -0
- package/es/table-component/TableContainerEdit.js +17 -4
- package/es/table-component/body/EditableCell.js +95 -114
- package/es/table-component/body/TableBodyCellEdit.js +1 -1
- package/es/table-component/style.js +1 -1
- package/es/table-virtuoso/ColumnsGroup/ColumnsGroup.js +1 -1
- package/es/table-virtuoso/header/TableHeadCell.js +1 -1
- package/es/table-virtuoso/hook/utils.d.ts +1 -1
- package/es/table-virtuoso/table/Grid.js +1 -1
- package/es/table-virtuoso/table/TableContainer.js +1 -1
- package/es/table-virtuoso/table/TableWrapper.d.ts +1 -2
- package/es/table-virtuoso/table/TableWrapper.js +1 -0
- package/lib/ali-table/base-table/styles.js +1 -1
- package/lib/group-component/TableContainerEdit.js +2 -2
- package/lib/group-component/body/TableBodyRow.js +15 -4
- package/lib/table-component/ColumnsConfig.js +1 -0
- package/lib/table-component/TableContainerEdit.js +17 -4
- package/lib/table-component/body/EditableCell.js +95 -114
- package/lib/table-component/body/TableBodyCellEdit.js +1 -1
- package/lib/table-component/style.js +1 -1
- package/lib/table-virtuoso/ColumnsGroup/ColumnsGroup.js +3 -4
- package/lib/table-virtuoso/header/TableHeadCell.js +4 -5
- package/lib/table-virtuoso/hook/utils.d.ts +1 -1
- package/lib/table-virtuoso/table/Grid.js +2 -2
- package/lib/table-virtuoso/table/TableContainer.js +1 -1
- package/lib/table-virtuoso/table/TableWrapper.d.ts +1 -2
- package/lib/table-virtuoso/table/TableWrapper.js +2 -0
- 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{
|
|
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
|
|
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 !==
|
|
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
|
|
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
|
-
|
|
82
|
-
|
|
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, "
|
|
198
|
-
onCellHeaderStyles?: Omit<CSSProperties, "
|
|
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, "
|
|
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;
|
|
@@ -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
|
|
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(
|
|
652
|
+
const isInsideHeader = itemHeader && itemHeader.contains(element);
|
|
653
653
|
if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext || element.id === id) {
|
|
654
654
|
return;
|
|
655
655
|
}
|
|
656
|
-
|
|
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
|
|
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 =
|
|
470
|
+
let valueSelectTable = formValues[dataIndex];
|
|
503
471
|
if (fieldValue) {
|
|
504
472
|
// @ts-ignore
|
|
505
|
-
valueSelectTable = record[fieldValue] ??
|
|
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
|
-
|
|
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
|
-
|
|
522
|
-
key: record[rowKey],
|
|
492
|
+
key,
|
|
523
493
|
field: column.field ?? column.field,
|
|
524
|
-
record:
|
|
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
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
}
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
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 =
|
|
619
|
+
let valueSelect = formValues[dataIndex];
|
|
645
620
|
if (fieldValue) {
|
|
646
621
|
// @ts-ignore
|
|
647
|
-
valueSelect = record[fieldValue] ??
|
|
622
|
+
valueSelect = record[fieldValue] ?? formValues[dataIndex];
|
|
648
623
|
}
|
|
649
624
|
return /*#__PURE__*/React.createElement(Select, {
|
|
650
625
|
options: options,
|
|
651
|
-
value: valueSelect ??
|
|
626
|
+
value: valueSelect ?? '',
|
|
652
627
|
onChange: (val, option) => {
|
|
653
|
-
onChange(val);
|
|
628
|
+
onChange(val ?? '');
|
|
654
629
|
const formState = getValues();
|
|
655
|
-
|
|
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:
|
|
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 =
|
|
762
|
+
let valueAsyncSelect = formValues[dataIndex];
|
|
785
763
|
if (fieldValue) {
|
|
786
764
|
// @ts-ignore
|
|
787
|
-
valueAsyncSelect = record[fieldValue] ??
|
|
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
|
-
|
|
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:
|
|
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 "
|
|
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 '
|
|
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 "
|
|
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 '
|
|
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 !==
|
|
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{
|
|
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 !==
|
|
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
|
|
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
|
-
|
|
89
|
-
|
|
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);
|
|
@@ -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
|
|
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(
|
|
651
|
+
const isInsideHeader = itemHeader && itemHeader.contains(element);
|
|
652
652
|
if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext || element.id === id) {
|
|
653
653
|
return;
|
|
654
654
|
}
|
|
655
|
-
|
|
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
|
|
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 =
|
|
477
|
+
let valueSelectTable = formValues[dataIndex];
|
|
510
478
|
if (fieldValue) {
|
|
511
479
|
// @ts-ignore
|
|
512
|
-
valueSelectTable = record[fieldValue] ??
|
|
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
|
-
|
|
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
|
-
|
|
529
|
-
key: record[rowKey],
|
|
499
|
+
key,
|
|
530
500
|
field: column.field ?? column.field,
|
|
531
|
-
record:
|
|
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
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
}
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
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 =
|
|
626
|
+
let valueSelect = formValues[dataIndex];
|
|
652
627
|
if (fieldValue) {
|
|
653
628
|
// @ts-ignore
|
|
654
|
-
valueSelect = record[fieldValue] ??
|
|
629
|
+
valueSelect = record[fieldValue] ?? formValues[dataIndex];
|
|
655
630
|
}
|
|
656
631
|
return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
|
|
657
632
|
options: options,
|
|
658
|
-
value: valueSelect ??
|
|
633
|
+
value: valueSelect ?? '',
|
|
659
634
|
onChange: (val, option) => {
|
|
660
|
-
onChange(val);
|
|
635
|
+
onChange(val ?? '');
|
|
661
636
|
const formState = getValues();
|
|
662
|
-
|
|
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:
|
|
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 =
|
|
769
|
+
let valueAsyncSelect = formValues[dataIndex];
|
|
792
770
|
if (fieldValue) {
|
|
793
771
|
// @ts-ignore
|
|
794
|
-
valueAsyncSelect = record[fieldValue] ??
|
|
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
|
-
|
|
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:
|
|
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(
|
|
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(
|
|
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(
|
|
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
|
|
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(
|
|
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(
|
|
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(
|
|
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 "
|
|
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
|
|
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(
|
|
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 !==
|
|
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.
|
|
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",
|