es-grid-template 1.3.7 → 1.3.9

package/lib/grid-component/table/GridEdit.js

@@ -24,16 +24,9 @@ var _hooks = require("../hooks");
 var _Message = _interopRequireDefault(require("../../Message/Message"));
 var _rcMasterUi = require("rc-master-ui");
 var _becoxyIcons = require("becoxy-icons");
+var _faker = require("@faker-js/faker");
 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); }
 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; }
-// import Command from "../Command";
-
-// import useMergedState from "rc-util/lib/hooks/useMergedState";
-
-// import type {ContextMenuItem} from "../type";
-// import {ContextInfo, ContextMenuItem} from "../type";
-// import useLazyKVMap from "rc-master-ui/es/table/hooks/useLazyKVMap";
-
 const {
   Paragraph,
   Title
@@ -118,8 +111,7 @@ const defaultContext = [{
 }];
 const GridEdit = props => {
   const {
-    // id = newGuid(),
-    id,
+    id: tableId,
     tableRef,
     t,
     columns,
@@ -147,17 +139,6 @@ const GridEdit = props => {
     showDefaultContext,
     ...rest
   } = props;
-
-  // const {
-  //   mode,
-  //   type,
-  //   checkboxOnly,
-  //   hideSelectAll,
-  //   columnWidth,
-  //   selectedRowKeys,
-  //   defaultSelectedRowKeys
-  // } = selectionSettings || {}
-
   const ref = (0, _react.useRef)(null);
   const isSelecting = (0, _react.useRef)(false);
   const startCell = (0, _react.useRef)(null);
@@ -176,10 +157,10 @@ const GridEdit = props => {
   // quét vùng được paste - tiếp tục hiển thị con trỏ crosshair
   // const isPasteDragging = useRef(false);
 
-  // const isPointEnter = useRef(false);
-
-  // const [getRecordByKey] = useLazyKVMap(dataSource, childrenColumnName, getRowKey);
-
+  const id = _react.default.useMemo(() => {
+    return tableId ?? _faker.faker.string.alpha(20);
+    // return tableId ?? newGuid()
+  }, [tableId]);
   const itemsAdd = [{
     key: '10',
     label: '10 rows'
@@ -193,8 +174,8 @@ const GridEdit = props => {
   const [form] = _antd.Form.useForm();
   const [editingKey, setEditingKey] = (0, _react.useState)('');
   const [isFilter, setIsFilter] = _react.default.useState(false);
+  const [rangeCells, setRangeCells] = (0, _react.useState)(new Set());
 
-  // const [selectedCells, setSelectedCells] = useState(new Set())
   // const [pasteCells, setPasteCells] = useState(new Set())
 
   // const defaultModalPaste = {open: false, rowIndex: -1, colIndex: -1, record: {}, rowsPasted: []}
@@ -229,17 +210,9 @@ const GridEdit = props => {
     // return [];
   });
   const mergedExpandedKeys = _react.default.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
-
-  // const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState<any[]>(
-  //   [],
-  //   {
-  //     value: [],
-  //   },
-  // );
-
   const rowsFocus = _react.default.useMemo(() => {
-    return [...new Set(Array.from(selectedCells.current).map(item => parseInt(item.split('-')[0])))] ?? [];
-  }, [selectedCells]);
+    return [...new Set(Array.from(rangeCells).map(item => parseInt(item.split('-')[0])))] ?? [];
+  }, [rangeCells]);
   const contextMenuItems = _react.default.useMemo(() => {
     const a = showDefaultContext !== false ? [...defaultContext] : [];
     const b = propsContext ? [...propsContext, {
@@ -319,6 +292,15 @@ const GridEdit = props => {
 
   // thêm n dòng bên trên
   const handleInsertBefore = (item, n) => {
+    //
+    (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+    (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+    //
+
+    setTimeout(() => {
+      (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+    }, 10);
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
     // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
 
@@ -393,9 +375,6 @@ const GridEdit = props => {
   //thêm 1 dòng bên dưới
   const handleInsertAfter = (item, n) => {
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
-
-    // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
-
     const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
 
     // const record = getRecordByKey()
@@ -428,8 +407,6 @@ const GridEdit = props => {
           rowId: (0, _hooks.newGuid)()
         });
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
-
-        // newData.splice(index + 1, 0, { ...defaultRowValue, rowId, parentId: null })
         newData.splice(index + 1, 0, ...newRows);
         triggerChangeData?.(newData, 'INSERT_AFTER');
       } else {
@@ -511,6 +488,10 @@ const GridEdit = props => {
     }
   };
   const handleDeleteRows = item => {
+    setTimeout(() => {
+      (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+    });
     if (item.onClick) {
       item.onClick({
         toolbar: item
@@ -766,10 +747,8 @@ const GridEdit = props => {
     trigger,
     getValues,
     reset
-    // formState: { errors }
   } = (0, _reactHookForm.useForm)({
     mode: 'onChange'
-    // defaultValues,
     // resolver: yupResolver(formSchema)
   });
   const isEditing = record => record[rowKey] === editingKey;
@@ -805,25 +784,13 @@ const GridEdit = props => {
         // setSelectedCells(new Set())
         // setRowsSelected(new Set())
 
-        (0, _hooks.onRemoveClassSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
         (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
         rowsSelected.current = new Set();
         selectedCells.current = new Set();
+        setRangeCells(new Set());
       }
-
-      // if (tableBodies.length > 0) {
-      //   const tableBody = tableBodies[0]; // Chọn tbody đầu tiên (nếu có nhiều)
-      //
-      //   if (!tableBody.contains(event.target as Node)) {
-      //     setEditingKey('')
-      //     isSelecting.current = false;
-      //     startCell.current = null;
-      //     setSelectedCells(new Set())
-      //     setRowsSelected(new Set())
-      //   } else {
-      //
-      //   }
-      // }
     };
     document.addEventListener("click", handleClickOutside);
     return () => {
@@ -871,16 +838,28 @@ const GridEdit = props => {
 
         const cells = new Set([`${row}-${col}`]);
         if (selectedCells.current && selectedCells.current.size > 0) {
-          (0, _hooks.onRemoveClassSelectedCell)(selectedCells.current, id);
-          if (!(0, _hooks.isEqualSet)(cells, selectedCells.current)) {
-            (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
+          if (!(0, _hooks.isEqualSet)(cells, rangeCells)) {
+            (0, _hooks.onRemoveBgSelectedCell)(rangeCells, id);
+            (0, _hooks.onRemoveBorderSelectedCell)(rangeCells, id);
+            (0, _hooks.hideDraggingPoint)(rangeCells, id);
           }
         }
-        selectedCells.current = cells;
-        (0, _hooks.onAddClassBgSelectedCell)(cells, id);
         if (rowsSelected.current && rowsSelected.current.size > 0) {
           (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
         }
+        if (!(0, _hooks.isEqualSet)(cells, selectedCells.current)) {
+          selectedCells.current = cells;
+          if (editingKey) {
+            setTimeout(() => {
+              (0, _hooks.onAddBgSelectedCell)(cells, id);
+              (0, _hooks.onAddBorderSelectedCell)(cells, id);
+            }, 100);
+          } else {
+            (0, _hooks.onAddBgSelectedCell)(cells, id);
+            (0, _hooks.onAddBorderSelectedCell)(cells, id);
+          }
+        }
+
         // setRowsSelected(new Set())
         rowsSelected.current = new Set();
       }
@@ -888,12 +867,12 @@ const GridEdit = props => {
   };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
+    const tmpCols = (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false));
     const rowSelectedFirst = (0, _hooks.getFirstSelectCell)(selectedCells.current).row;
     const rowPasteLast = (0, _hooks.getLastSelectCell)(pasteCells.current).row;
     const selectedArray = Array.from(selectedCells.current).map(key => {
       const [row, col] = key.split("-").map(Number);
-      // @ts-ignore
-      const columnKey = columns[col].field;
+      const columnKey = tmpCols[col].field;
 
       // @ts-ignore
       return {
@@ -987,13 +966,13 @@ const GridEdit = props => {
         }
         rowValues.forEach((cellValue, colIndex) => {
           const targetCol = startCol + colIndex;
-          if (targetCol >= columns.length) {
+          if (targetCol >= tmpCols.length) {
             // Không vượt quá số cột
             return;
           }
 
           // @ts-ignore
-          const columnKey = columns[targetCol].field;
+          const columnKey = tmpCols[targetCol].field;
 
           // @ts-ignore
           newData[targetRow] = {
@@ -1012,13 +991,15 @@ const GridEdit = props => {
 
     /// cập nhật cell class
     if (selectedCells.current && selectedCells.current.size > 0) {
-      (0, _hooks.onRemoveClassSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onRemoveBgSelectedCell)(rangeCells, id);
+      (0, _hooks.onRemoveBorderSelectedCell)(rangeCells, id);
     }
 
     // selectedCells.current = sortedSetASC(mergedSet)
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     selectedCells.current = (0, _hooks.sortedSetASC)(mergedSet);
-    (0, _hooks.onAddClassBgSelectedCell)((0, _hooks.sortedSetASC)(mergedSet), id);
+    (0, _hooks.onAddBgSelectedCell)((0, _hooks.sortedSetASC)(mergedSet), id);
+    (0, _hooks.onAddBorderSelectedCell)((0, _hooks.sortedSetASC)(mergedSet), id);
     (0, _hooks.showDraggingPoint)((0, _hooks.sortedSetASC)(mergedSet), id);
 
     // setPasteCells(new Set())
@@ -1088,6 +1069,9 @@ const GridEdit = props => {
     if (pasteCells && pasteCells.current.size > 0) {
       triggerDragPaste(pasteCells.current);
     } else {
+      setRangeCells(selectedCells.current);
+      (0, _hooks.onRemoveBorderSelectedCell)(rangeCells, id);
+      (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
       const target = e.target;
       if (target.closest('.dragging-point')) {
         e.stopPropagation();
@@ -1147,10 +1131,10 @@ const GridEdit = props => {
       // setSelectedCells(newSelectedCells)
 
       if (selectedCells.current && selectedCells.current.size > 0) {
-        (0, _hooks.onRemoveClassSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
       }
       selectedCells.current = newSelectedCells;
-      (0, _hooks.onAddClassBgSelectedCell)(newSelectedCells, id);
+      (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
     } else {
       // chọn vùng paste
 
@@ -1230,12 +1214,12 @@ const GridEdit = props => {
   //   // setSelectedCells(newSelectedCells)
   //
   //   if (selectedCells.current && selectedCells.current.size > 0) {
-  //     onRemoveClassSelectedCell(selectedCells.current, id)
+  //     onRemoveBgSelectedCell(selectedCells.current, id)
   //   }
   //
   //   selectedCells.current = newSelectedCells
   //
-  //   onAddClassBgSelectedCell(newSelectedCells, id)
+  //   onAddBgSelectedCell(newSelectedCells, id)
   //
   //
   // };
@@ -1251,13 +1235,15 @@ const GridEdit = props => {
     // setSelectedCells(new Set(newSelectedCells));
 
     if (selectedCells.current && selectedCells.current.size > 0) {
-      (0, _hooks.onRemoveClassSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
     }
     if (rowsSelected.current && rowsSelected.current.size > 0) {
       (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
     }
     selectedCells.current = newSelectedCells;
-    (0, _hooks.onAddClassBgSelectedCell)(newSelectedCells, id);
+    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
+    (0, _hooks.onAddBorderSelectedCell)(newSelectedCells, id);
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     (0, _hooks.showDraggingPoint)(newSelectedCells, id);
   };
@@ -1283,7 +1269,8 @@ const GridEdit = props => {
     // setRowsSelected(new Set([`${row}-${col}`]));
 
     if (selectedCells.current && selectedCells.current.size > 0) {
-      (0, _hooks.onRemoveClassSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
     }
     if (rowsSelected.current && rowsSelected.current.size > 0) {
       (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
@@ -1291,7 +1278,8 @@ const GridEdit = props => {
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     selectedCells.current = newSelectedCells;
     rowsSelected.current = new Set([`${row}-${col}`]);
-    (0, _hooks.onAddClassBgSelectedCell)(newSelectedCells, id);
+    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
+    (0, _hooks.onAddBorderSelectedCell)(newSelectedCells, id);
     (0, _hooks.addClassCellIndexSelected)(new Set([`${row}-${col}`]), id);
   };
   const handleMouseEnterRowHeader = (row, col, e) => {
@@ -1319,11 +1307,11 @@ const GridEdit = props => {
       }
     }
     if (selectedCells.current && selectedCells.current.size > 0) {
-      (0, _hooks.onRemoveClassSelectedCell)(selectedCells.current, id);
+      (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
     }
     // setSelectedCells(newSelectedCells)
     selectedCells.current = newSelectedCells;
-    (0, _hooks.onAddClassBgSelectedCell)(newSelectedCells, id);
+    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
     if (rowsSelected.current && rowsSelected.current.size > 0) {
       (0, _hooks.removeClassCellIndexSelected)(rowsSelected.current, id);
     }
@@ -1701,9 +1689,6 @@ const GridEdit = props => {
       indexRow,
       key
     } = args;
-
-    // const newRecord = getValues()
-
     if (changeType === 'enter') {}
     if (changeType === 'blur') {
       const handleChangeCallback = callbackData => {
@@ -1772,7 +1757,6 @@ const GridEdit = props => {
     }
     if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
       setValue(col.dataIndex, editType === 'numeric' ? !isNaN(Number(e.key)) ? Number(e.key) : '' : e.key);
-      // setValue(col.dataIndex, e.key)
     }
     if (editType === 'select') {
       // setSearchValue(e.key)
@@ -1780,10 +1764,7 @@ const GridEdit = props => {
     }
     if (startSelectedCells.current && startSelectedCells.current.row !== undefined && startSelectedCells.current.col !== undefined) {
       setTimeout(() => {
-        // const input = document.querySelector(`.ui-rc-table-row[data-row-key="${selectedCell.row}"] .cell-editing[data-col-index="${selectedCell.col}"] input`) as HTMLInputElement;
         const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.current.row}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] input`);
-        // const input =  document.getElementById(`col${selectedCell.col}-record${selectedCell.row}`) as HTMLInputElement;
-
         const select = document.querySelector(`div.cell-editing[tabindex="${startSelectedCells.current.col}"] .ant-select-selection-search input`);
         if (input) {
           input.focus();
@@ -1844,15 +1825,17 @@ const GridEdit = props => {
       // setSelectedCells(new Set([`${rowIndex}-${colIndex}`]));
 
       const cells = new Set([`${rowIndex}-${colIndex}`]);
-      console.log('cells', cells);
       if (selectedCells.current && selectedCells.current.size > 0) {
-        (0, _hooks.onRemoveClassSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
       }
       (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
       selectedCells.current = cells;
+      setRangeCells(cells);
       setTimeout(() => {
-        (0, _hooks.onAddClassBgSelectedCell)(selectedCells.current, id);
-      }, 10);
+        (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
+      }, 50);
       (0, _hooks.showDraggingPoint)(cells, id);
     };
     const focusNextCell = (editingCell, cellEditable) => {
@@ -1900,76 +1883,6 @@ const GridEdit = props => {
       focusNextCell(cellEdit, cell);
     }
   };
-
-  // const getCellClass = (record: RecordType, rowIndex: number, colIndex: number) => {
-  //
-  //
-  //   const cellKey = `${rowIndex}-${colIndex}`;
-  //   const topCellKey = `${rowIndex + 1}-${colIndex}`;
-  //   const leftCellKey = `${rowIndex}-${colIndex + 1}`;
-  //   const rightCellKey = `${rowIndex}-${colIndex - 1}`;
-  //
-  //   const isSelected = selectedCells.has(cellKey);
-  //   const isTopSelected = selectedCells.has(topCellKey);
-  //   const isLeftSelected = selectedCells.has(leftCellKey);
-  //   const isRightSelected = selectedCells.has(rightCellKey);
-  //
-  //
-  //   const isPasteSelected = pasteCells.has(cellKey);
-  //   const isPasteLeftSelected = pasteCells.has(leftCellKey);
-  //   const isPasteRightSelected = pasteCells.has(rightCellKey);
-  //
-  //   const cellClass = isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable'
-  //
-  //   const prevRecordEditing =  flattenData(childrenColumnName, dataSource)[rowIndex + 1]
-  //
-  //   const cellStart = getFirstSelectCell(selectedCells)
-  //   const cellEnd = getLastSelectCell(selectedCells)
-  //
-  //   const cellPasteStart = getFirstSelectCell(pasteCells)
-  //   const cellPasteSEnd = getLastSelectCell(pasteCells)
-  //
-  //
-  //   const isPasteBottom = pasteCells.size && cellPasteSEnd && rowIndex === Math.max(cellPasteStart.row, cellPasteSEnd.row)
-  //
-  //
-  //   if (!isSelected && !isPasteSelected){
-  //
-  //     // const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && rowIndex === Math.min(cellStart.row - 1, cellEnd?.row);
-  //     const isTop = prevRecordEditing && !isEditing(prevRecordEditing) && isTopMostInRegion(rowIndex + 1, colIndex, selectedCells)
-  //
-  //     const isLeft = colIndex + 1 === Math.min(cellStart.col, cellEnd?.col);
-  //     const isRight = colIndex - 1 === Math.max(cellStart.col, cellEnd?.col);
-  //
-  //     const isPasteLeft = colIndex + 1 === Math.min(cellPasteStart.col, cellPasteSEnd?.col);
-  //     const isPasteRight = colIndex - 1 === Math.max(cellPasteStart.col, cellPasteSEnd?.col);
-  //
-  //
-  //     return (isTopSelected || isLeftSelected || isRightSelected ) ?
-  //       `${cellClass} ${isTop ? `cell-border-top` : ''} ${isLeft ? `cell-border-left` : ''} ${isPasteBottom ? `cell-paste-border-bottom` :  ''} ${isRight ? `next-cell-border-left` : ''}` :
-  //
-  //       (isPasteLeftSelected || isPasteRightSelected) ? `${cellClass} ${isPasteLeft ? `cell-paste-border-left` :  ''} ${isPasteRight ? `next-cell-paste-border-left` :  ''}` :
-  //
-  //       cellClass
-  //
-  //   }
-  //
-  //   const isBottom = isBottomMostInRegion(rowIndex, colIndex, selectedCells)
-  //   // const isBottom = isBottomMostInRanges(rowIndex, colIndex, [selectedCells, ...ctrlCells])
-  //
-  //   // const isRight = cellEnd && colIndex === Math.max(cellStart.col, cellEnd.col)
-  //   const isRight = isRightMostInRegion(rowIndex, colIndex, selectedCells)
-  //
-  //   const isLeft = colIndex === Math.min(cellStart.col, cellEnd?.col)
-  //
-  //   const isPasteRight = cellPasteSEnd && colIndex === Math.max(cellPasteStart.col, cellPasteSEnd.col)
-  //   const isPasteLeft = colIndex === Math.min(cellPasteStart.col, cellPasteSEnd?.col)
-  //
-  //
-  //   return `${cellClass} ${isPasteBottom ? `cell-paste-border-bottom` :  ''} ${isPasteSelected && isPasteRight ? `cell-paste-border-right` :  ''} ${isPasteSelected && isPasteLeft ? `fixed-cell-paste-border-left` : '' }  ${isBottom ? `cell-border-bottom` :  ''}  ${isRight ? `cell-border-right` : '' } ${isLeft ? `fixed-cell-border-left` : '' } ${isBottom && isRight ? `cell-border-end` : '' }`
-  //
-  // };
-
   const convertColumns = (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false)).map((column, colIndex) => {
     if (!column?.field && !column?.key) {
       return column;
@@ -2005,17 +1918,9 @@ const GridEdit = props => {
         render: (value, record) => {
           const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/_react.default.createElement("div", {
-            className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {
-
-              // selected: rowsSelected.has(`${rowNumber}-${colIndex}`) ,
-
-              // focus: selectedCells && Array.from(selectedCells).some((item: any) => item.startsWith(`${rowNumber}-`))
-            }),
+            className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {}),
             onMouseDown: event => handleMouseDownRowHeader(rowNumber, colIndex, column, event),
-            onMouseEnter: event => handleMouseEnterRowHeader(rowNumber, colIndex, event)
-
-            // onClick={() => handleClickRowHeader(rowNumber, colIndex)}
-            ,
+            onMouseEnter: event => handleMouseEnterRowHeader(rowNumber, colIndex, event),
             onMouseUp: handleMouseUp
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: 'ui-rc_content'
@@ -2035,17 +1940,16 @@ const GridEdit = props => {
         return {
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
-            if (event.key === 'Control' && event.ctrlKey) {
-
-              // setIsCtrlDown(true)
-            } else {
+            if (event.key === 'Control' && event.ctrlKey) {} else {
               if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
                 if (record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
                   // ~~ khi editingKey = ''
                   event.preventDefault();
                   event.stopPropagation();
                   handleEdit(record, column, column.editType, event);
-                  (0, _hooks.onRemoveClassSelectedCell)(selectedCells.current, id);
+                  (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+                  (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
+                  selectedCells.current = new Set();
                   handleCellClick(rowNumber, record, column);
                   const hasKey = mergedExpandedKeys.has(key);
                   if (hasKey) {
@@ -2133,6 +2037,8 @@ const GridEdit = props => {
           onDoubleClick: event => {
             if (!isEditing(record) && record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
               handleEdit(record, column, (0, _hooks.getEditType)(column, record), event);
+              (0, _hooks.onRemoveBgSelectedCell)(selectedCells.current, id);
+              (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
               handleCellClick(rowNumber, record, column);
             }
           },
@@ -2158,7 +2064,6 @@ const GridEdit = props => {
             }
           },
           className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : `rc-ui-cell-editable cell-editable ${!(0, _hooks.isEditable)(column, record) ? 'disable' : ''}`,
-          // className: getCellClass(record, rowNumber, colIndex),
           record,
           column: column,
           editType: (0, _hooks.getEditType)(column, record),
@@ -2175,13 +2080,10 @@ const GridEdit = props => {
           editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
           cellEditing,
           t,
-          // editing: isEditing(record) && rowEditable?.(record) !== false,
           tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
           style: isPasteDragging ? {
             cursor: "crosshair"
           } : {}
-
-          // style: getStyle()
         };
       },
       onHeaderCell: (data, index) => {
@@ -2211,9 +2113,6 @@ const GridEdit = props => {
         const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
         return /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _classnames.default)('ui-rc_cell-content', {
-            // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
-            // selected: selectedCells.has(`${rowNumber}-${colIndex}`) || currentCtrlCells.has(`${rowNumber}-${colIndex}`) || mergedSets([selectedCells, ...ctrlCells]).has(`${rowNumber}-${colIndex}`),
-            // selected: selectedCells.has(`${rowNumber}-${colIndex}`),
             // disable: !isEditable(column as any, record)
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
@@ -2233,7 +2132,7 @@ const GridEdit = props => {
           // }}
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'ui-rc_content'
-        }, (0, _columns.renderContent)(column, value, record, rowIndex, format)),
+        }, (0, _columns.renderContent)(column, value, record, rowIndex, column.format ? typeof column.format === 'function' ? column.format(record) : column.format : format)),
         // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
         // getLastSelectCell(selectedCells.current).col === colIndex &&
         // isEditable(column as any, record) &&
@@ -2245,8 +2144,6 @@ const GridEdit = props => {
             e.preventDefault();
             if (e.button === 0) {
               setIsPasteDragging(true);
-
-              // isPasteDragging.current = true
             }
           },
           onDoubleClick: handlePointDoubleClick
@@ -2301,13 +2198,6 @@ const GridEdit = props => {
       }
     }));
   };
-  //
-  // const onSelectChange = (keys: any[]) => {
-  //
-  //   console.log(keys)
-  //   setMergedSelectedKeys(keys)
-  // }
-
   const contextMenuClick = args => {
     if (args.item?.parentKey && args.item.parentKey === 'INSERT_BEFORE') {
       if (args.item.key === 'INSERT_BEFORE_ADV') {
@@ -2370,7 +2260,6 @@ const GridEdit = props => {
       position: 'relative'
     },
     ref: ref
-    // onMouseUp={handleMouseUp}
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
       rowKey,
@@ -2410,9 +2299,7 @@ const GridEdit = props => {
     components: {
       ...components,
       body: {
-        // wrapper: () => <div></div>,
         cell: _EditableCell.default
-        // cell: () =>  <EditableCell  />,
       }
     },
     className: (0, _classnames.default)(className, 'grid-editable'),
@@ -2473,27 +2360,15 @@ const GridEdit = props => {
       }
     },
     triggerChangeColumns: triggerChangeColumns,
-    clickHeaderToSort: false
-
-    // rowSelection={ columns && columns.length === 0 ? undefined : {
-    //   type: mode,
-    //   columnWidth: columnWidth ?? 50 ,
-    //   onChange: onSelectChange,
-    //
-    //   selectedRowKeys: mergedSelectedKeys,
-    //   preserveSelectedRowKeys: true,
-    //   arrowKey: false
-    //
-    // }}
-    ,
-
+    clickHeaderToSort: false,
     isFilter: isFilter,
     setIsFilter: setIsFilter,
     contextMenuItems: contextMenuItems,
     contextMenuClick: contextMenuClick,
     onScroll: () => {
       if (selectedCells.current && selectedCells.current.size > 0) {
-        (0, _hooks.onAddClassBgSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onAddBgSelectedCell)(selectedCells.current, id);
+        (0, _hooks.onAddBorderSelectedCell)(selectedCells.current, id);
         (0, _hooks.showDraggingPoint)(selectedCells.current, id);
       }
       if (rowsSelected && rowsSelected.current.size > 0) {
@@ -2505,9 +2380,8 @@ const GridEdit = props => {
     toastOptions: {
       className: 'react-hot-toast'
     }
-  }), /*#__PURE__*/_react.default.createElement(_antd.Modal
-  // title="Thêm dòng"
-  , {
+  }), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    title: "Th\xEAm d\xF2ng",
     open: openModalAddRow.open,
     onOk: onOkAddRow,
     onCancel: hideModalAddRow,

package/lib/grid-component/type.d.ts

@@ -84,7 +84,7 @@ export type ToolbarClick = {
     item: any;
     column: any;
 };
-export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title'> & {
+export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title' | 'format' | 'commandItems'> & {
     field?: string;
     key?: any;
     type?: IColumnType;
@@ -93,7 +93,7 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     isSummary?: boolean;
     summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
     maxWidth?: string | number;
-    format?: IFormat;
+    format?: IFormat | ((rowData: any) => IFormat);
     allowFiltering?: boolean;
     allowSorter?: boolean;
     operator?: FilterOperator;
@@ -207,12 +207,12 @@ export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType>;
 export interface CommandItem {
     id: string;
     type?: string;
-    visible?: boolean;
+    visible?: boolean | ((record: any) => boolean);
     title: string;
     color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
     tooltip?: string;
     icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
-    template?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    template?: ReactNode | ReactElement | ((record: any) => ReactNode | ReactElement);
     client?: boolean;
     confirmDialog?: boolean;
 }