es-grid-template 1.4.3 → 1.4.5

package/lib/grid-component/hooks/utils.js

@@ -26,9 +26,9 @@ exports.isContinuous = exports.isColor = exports.isBottomMostInRegion = void 0;
 exports.isDateString = isDateString;
 exports.isEmpty = exports.isEditable = exports.isDisable = void 0;
 exports.isEqualSet = isEqualSet;
-exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = void 0;
+exports.isRangeCell = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = void 0;
 exports.isRightMostInRegion = isRightMostInRegion;
-exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = void 0;
+exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = exports.isSelectedCell = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
@@ -511,12 +511,9 @@ exports.getDefaultValue = getDefaultValue;
 const addRowIdArray = inputArray => {
   if (inputArray) {
     return inputArray.map(item => {
-      if (item.children && item.children.length > 0) {
-        // item.children = convertArrayWithIndent(item.children)
+      if (typeof item.children !== "string" && item.children && item.children.length > 0) {
         item.children = addRowIdArray(item.children);
       }
-
-      // return { ...item, rowId: item.rowId ? item.rowId : (item.id  ? item.id : newGuid())}
       return {
         ...item,
         rowId: item.rowId ?? item.id ?? newGuid()
@@ -1590,7 +1587,7 @@ function getCellsByPosition(cellSet, position = "bottom") {
         const minRow = Math.min(...cells.map(c => c.row));
         if (minRow === 0) return []; // Bỏ qua nếu rowIndex = 0
 
-        return cells.filter(c => c.row === minRow).map(c => `${c.row - 1}-${c.col}`);
+        return cells.filter(c => c.row === minRow).map(c => `${c.row}-${c.col}`);
       }
     case "bottom":
       {
@@ -1611,7 +1608,7 @@ function getCellsByPosition(cellSet, position = "bottom") {
         if (minCol === 0) return []; // Bỏ qua nếu colIndex = 0
 
         // Trả về các ô cùng row, nhưng ở cột bên trái
-        return cells.filter(c => c.col === minCol).map(c => `${c.row}-${c.col - 1}`);
+        return cells.filter(c => c.col === minCol).map(c => `${c.row}-${c.col}`);
       }
     case "right":
       {
@@ -1622,7 +1619,7 @@ function getCellsByPosition(cellSet, position = "bottom") {
       return [];
   }
 }
-const addBorderClass = (selectedCells, type, className, id) => {
+const addBorderClass = (selectedCells, type, className, id, nextCellRight) => {
   const table = document.querySelector(`#${id}`);
   const typeCells = getCellsByPosition(selectedCells, type);
   const selectorsCells = typeCells.map(pos => {
@@ -1633,8 +1630,34 @@ const addBorderClass = (selectedCells, type, className, id) => {
   if (cellsFilter && cellsFilter.length > 0) {
     cellsFilter.forEach(cell => {
       cell.classList.add(className);
+      if (nextCellRight) {
+        cell.style.zIndex = 1;
+      }
     });
   }
+
+  // ui-rc-table-tbody-virtual-scrollbar ui-rc-table-tbody-virtual-scrollbar-horizontal ui-rc-table-tbody-virtual-scrollbar-visible
+
+  // if (type === 'left') {
+  //
+  //   const selectorsCells2 = typeCells.map((pos: any) => {
+  //     const [row, col] = pos.split('-');
+  //     return `[data-row-index="${row}"][data-col-index="${Number(col) + 1}"]`;
+  //   });
+  //
+  //   const fullSelector = selectorsCells2.map(s => `.ui-rc-table-cell-fix-right-first${s}`).join(', ');
+  //
+  //   const cellsFilter2 = typeCells.length > 0 ? table?.querySelectorAll(fullSelector) : null
+  //
+  //   if (cellsFilter2 && cellsFilter2.length > 0) {
+  //
+  //     cellsFilter2.forEach(cell => {
+  //       // cell.classList.add('has-before');
+  //       cell.classList.add('cell-border-left');
+  //     });
+  //   }
+  //
+  // }
 };
 exports.addBorderClass = addBorderClass;
 const removeBorderClass = (selectedCells, type, className, id) => {
@@ -1668,10 +1691,20 @@ const onAddBgSelectedCell = (selectedCells, id, isFocusCellIndex) => {
     return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
   });
   const table = document.querySelector(`#${id}`);
+
+  //// xóa class các ô đã chọn trước đó
+  const cellsSelected = table ? table?.querySelectorAll('.ui-rc-table-cell.selected-bg') : null;
+  if (cellsSelected) {
+    cellsSelected.forEach(cell => {
+      cell.classList.remove('selected-bg');
+    });
+  }
+
+  /// thêm class
   const cells = table && selectors.length > 0 ? table?.querySelectorAll(selectors.join(',')) : null;
   if (cells) {
     cells.forEach(cell => {
-      cell.classList.add('selected');
+      cell.classList.add('selected-bg');
     });
   }
   const rowsArray = [...new Set([...selectedCells].map(item => item.split("-")[0]))];
@@ -1704,36 +1737,49 @@ const onAddBgSelectedCell = (selectedCells, id, isFocusCellIndex) => {
   // addBorderClass(selectedCells, 'left', 'cell-border-left', id)
 };
 exports.onAddBgSelectedCell = onAddBgSelectedCell;
-const onAddBorderSelectedCell = (selectedCells, id) => {
+const onRemoveBgSelectedCell = (selectedCells, id, rowsSelected) => {
   const table = document.querySelector(`#${id}`);
-
-  // tăng z-index để hiển thị round point paste
-  const row = getLastSelectCell(selectedCells).row;
-  const col = getLastSelectCell(selectedCells).col;
-  const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
-  if (cell) {
-    cell.style.zIndex = 1;
+  const cells = table ? table?.querySelectorAll('.ui-rc-table-cell.selected-bg') : null;
+  if (cells) {
+    cells.forEach(cell => {
+      cell.classList.remove('selected-bg');
+    });
   }
-  if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
-    cell.style.zIndex = 3;
+  const cellsIndex = table ? table?.querySelectorAll('.ui-rc-table-cell.focus') : null;
+  if (cellsIndex) {
+    cellsIndex.forEach(cell => {
+      cell.classList.remove('focus');
+    });
   }
 
-  //  thêm class border selected
+  // xóa class selected ô STT
 
-  addBorderClass(selectedCells, 'bottom', 'cell-border-bottom', id);
-  addBorderClass(selectedCells, 'right', 'cell-border-right', id);
-  addBorderClass(selectedCells, 'top', 'cell-border-top', id);
-  addBorderClass(selectedCells, 'left', 'cell-border-left', id);
+  if (rowsSelected && rowsSelected.size > 0) {
+    const rowsSelectedArray = [...new Set([...rowsSelected].map(item => item.split("-")[0]))];
+    const rowsSelectedSelectors = rowsSelectedArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+    const cellsSelectedIndex = table && rowsSelectedSelectors.length > 0 ? table?.querySelectorAll(rowsSelectedSelectors) : null;
+    if (cellsSelectedIndex) {
+      cellsSelectedIndex.forEach(cell => {
+        cell.classList.remove('selected');
+      });
+    }
+  }
 };
-exports.onAddBorderSelectedCell = onAddBorderSelectedCell;
-const onRemoveBgSelectedCell = (selectedCells, id, rowsSelected) => {
+exports.onRemoveBgSelectedCell = onRemoveBgSelectedCell;
+const onAddBgCellIndex = (selectedCells, id, isFocusCellIndex) => {
   const table = document.querySelector(`#${id}`);
-  const cells = table ? table?.querySelectorAll('.ui-rc-table-cell.selected') : null;
-  if (cells) {
-    cells.forEach(cell => {
-      cell.classList.remove('selected');
+  const rowsArray = [...new Set([...selectedCells].map(item => item.split("-")[0]))];
+  const rowsSelectors = rowsArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+  const cellsIndex = table && rowsSelectors.length > 0 ? table?.querySelectorAll(rowsSelectors) : null;
+  if (cellsIndex && isFocusCellIndex !== false) {
+    cellsIndex.forEach(cell => {
+      cell.classList.add('focus');
     });
   }
+};
+exports.onAddBgCellIndex = onAddBgCellIndex;
+const onRemoveBgCellIndex = (selectedCells, id, rowsSelected) => {
+  const table = document.querySelector(`#${id}`);
   const cellsIndex = table ? table?.querySelectorAll('.ui-rc-table-cell.focus') : null;
   if (cellsIndex) {
     cellsIndex.forEach(cell => {
@@ -1754,7 +1800,35 @@ const onRemoveBgSelectedCell = (selectedCells, id, rowsSelected) => {
     }
   }
 };
-exports.onRemoveBgSelectedCell = onRemoveBgSelectedCell;
+exports.onRemoveBgCellIndex = onRemoveBgCellIndex;
+const onAddBorderSelectedCell = (selectedCells, id) => {
+  const table = document.querySelector(`#${id}`);
+
+  // tăng z-index để hiển thị round point paste
+  const row = getLastSelectCell(selectedCells).row;
+  const col = getLastSelectCell(selectedCells).col;
+  const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
+  const nextCellLeft = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-left[data-row-index="${row}"][data-col-index="${col + 1}"]`);
+  const nextCellRight = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-right[data-row-index="${row}"][data-col-index="${col + 1}"]`);
+  if (cell) {
+    cell.style.zIndex = nextCellLeft ? 3 : 1;
+  }
+  if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
+    cell.style.zIndex = 3;
+  }
+  removeBorderClass2('cell-border-bottom', id);
+  removeBorderClass2('cell-border-top', id);
+  removeBorderClass2('cell-border-right', id);
+  removeBorderClass2('cell-border-left', id);
+
+  //  thêm class border selected
+
+  addBorderClass(selectedCells, 'bottom', 'cell-border-bottom', id);
+  addBorderClass(selectedCells, 'right', 'cell-border-right', id, !!nextCellRight);
+  addBorderClass(selectedCells, 'top', 'cell-border-top', id);
+  addBorderClass(selectedCells, 'left', 'cell-border-left', id);
+};
+exports.onAddBorderSelectedCell = onAddBorderSelectedCell;
 const onRemoveBorderSelectedCell = (selectedCells, id) => {
   const table = document.querySelector(`#${id}`);
 
@@ -1762,13 +1836,11 @@ const onRemoveBorderSelectedCell = (selectedCells, id) => {
 
   const row = getLastSelectCell(selectedCells).row;
   const col = getLastSelectCell(selectedCells).col;
-
-  // const cell: any = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`)
   const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
   if (cell) {
     cell.style.zIndex = 0;
   }
-  if (cell && cell.classList.contains('ui-rc-table-cell-fix-left')) {
+  if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
     cell.style.zIndex = 2;
   }
 
@@ -1778,10 +1850,6 @@ const onRemoveBorderSelectedCell = (selectedCells, id) => {
   removeBorderClass2('cell-border-top', id);
   removeBorderClass2('cell-border-right', id);
   removeBorderClass2('cell-border-left', id);
-
-  // removeBorderClass(selectedCells, 'right', 'cell-border-right', id)
-  // removeBorderClass(selectedCells, 'top', 'cell-border-top', id)
-  // removeBorderClass(selectedCells, 'left', 'cell-border-left', id)
 };
 exports.onRemoveBorderSelectedCell = onRemoveBorderSelectedCell;
 const addClassBorderPasteCell = (pasteCells, type, id) => {
@@ -1805,6 +1873,8 @@ const removeClassBorderPasteCell = (pasteCells, type, id) => {
   removeBorderClass(pasteCells, 'top', 'cell-paste-border-top', id);
   removeBorderClass(pasteCells, 'left', 'cell-paste-border-left', id);
 };
+
+///////////////////////////////
 exports.removeClassBorderPasteCell = removeClassBorderPasteCell;
 const addClassCellIndexSelected = (rowsSelected, id) => {
   // thêm class selected vào ô STT
@@ -1815,7 +1885,7 @@ const addClassCellIndexSelected = (rowsSelected, id) => {
     const cellsSelectedIndex = table && rowsSelectedSelectors.length > 0 ? table?.querySelectorAll(rowsSelectedSelectors) : null;
     if (cellsSelectedIndex) {
       cellsSelectedIndex.forEach(cell => {
-        cell.classList.add('selected');
+        cell.classList.add('selected-index');
       });
     }
   }
@@ -1830,7 +1900,7 @@ const removeClassCellIndexSelected = (rowsSelected, id) => {
     const cellsSelectedIndex = table && rowsSelectedSelectors.length > 0 ? table?.querySelectorAll(rowsSelectedSelectors) : null;
     if (cellsSelectedIndex) {
       cellsSelectedIndex.forEach(cell => {
-        cell.classList.remove('selected');
+        cell.classList.remove('selected-index');
       });
     }
   }
@@ -1840,7 +1910,19 @@ const showDraggingPoint = (selectedCells, id) => {
   const row = getLastSelectCell(selectedCells).row;
   const col = getLastSelectCell(selectedCells).col;
   const table = document.querySelector(`#${id}`);
+
+  // tăng z-index để hiển thị round point paste
+
   const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
+
+  // if (cell) {
+  //   cell.style.zIndex = 1
+  // }
+  //
+  // if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
+  //   cell.style.zIndex = 3;
+  // }
+
   const point = cell?.querySelector('.dragging-point');
   if (point) {
     point.classList.add('show');
@@ -1851,20 +1933,40 @@ exports.showDraggingPoint = showDraggingPoint;
 const hideDraggingPoint = (selectedCells, id) => {
   const table = document.querySelector(`#${id}`);
 
-  // const point = table?.querySelector('.dragging-point.show')
-  // const points = document.querySelectorAll('.dragging-point.show')
-  const points = table?.querySelectorAll('.dragging-point.show');
+  // xóa z-index về mặc định
 
-  // if (point) {
-  //   point.classList.add('hidden')
-  //   point.classList.remove('show')
-  // }
+  const row = getLastSelectCell(selectedCells).row;
+  const col = getLastSelectCell(selectedCells).col;
+  const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
+  // const cellRight: any = table?.querySelector(`.ui-rc-table.ui-rc-table-ping-left:not(.ui-rc-table.ui-rc-table-ping-right) .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.ui-rc-table-cell-fix-right.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col + 1}"]`)
 
+  if (cell) {
+    cell.style.zIndex = 0;
+  }
+  if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
+    // cell.style.zIndex = cellRight ? 1 : 2
+    cell.style.zIndex = 2;
+  }
+  const points = table?.querySelectorAll('.dragging-point.show');
   if (points && points.length > 0) {
-    points.forEach(cell => {
-      cell.classList.add('hidden');
-      cell.classList.remove('show');
+    points.forEach(c => {
+      c.classList.add('hidden');
+      c.classList.remove('show');
     });
   }
 };
-exports.hideDraggingPoint = hideDraggingPoint;
+exports.hideDraggingPoint = hideDraggingPoint;
+const isRangeCell = (selectedCells, type, rowIndex, colIndex) => {
+  const typeCells = getCellsByPosition(selectedCells, type);
+  const key = `${rowIndex}-${colIndex}`;
+  return typeCells.includes(key);
+};
+exports.isRangeCell = isRangeCell;
+const isSelectedCell = (selectedCells, rowIndex, colIndex) => {
+  if (selectedCells.size === 1) {
+    return false;
+  }
+  const key = `${rowIndex}-${colIndex}`;
+  return selectedCells.has(key);
+};
+exports.isSelectedCell = isSelectedCell;