es-grid-template 1.4.3 → 1.4.4

package/es/grid-component/InternalTable.js

@@ -171,8 +171,8 @@ const InternalTable = props => {
     ...rest
   } = props;
   const rowKey = React.useMemo(() => {
-    return propRowKey ?? 'rowId';
-  }, [propRowKey]);
+    return editAble ? 'rowId' : propRowKey ?? 'rowId';
+  }, [propRowKey, editAble]);
   const local = lang && lang === 'en' ? en : vi;
   const buddhistLocale = {
     ...local,
@@ -352,6 +352,12 @@ const InternalTable = props => {
       if (transformedColumn.field === '#') {
         return {
           ...transformedColumn,
+          title: () => /*#__PURE__*/React.createElement(HeaderContent, {
+            column: {
+              ...column
+            },
+            t: t
+          }),
           onCell: () => ({
             className: 'cell-number'
           }),
@@ -366,6 +372,12 @@ const InternalTable = props => {
       if (transformedColumn.field === 'command') {
         return {
           ...transformedColumn,
+          title: () => /*#__PURE__*/React.createElement(HeaderContent, {
+            column: {
+              ...column
+            },
+            t: t
+          }),
           onCell: () => ({
             className: 'cell-number',
             style: {

package/es/grid-component/hooks/content/HeaderContent.js

@@ -29,8 +29,8 @@ const HeaderContent = props => {
     return columnGroupText ?? headerText;
   }, [columnGroupText, headerText]);
   const tooltip = React.useMemo(() => {
-    return headerTooltip ?? columnGroupText ?? headerText;
-  }, [columnGroupText, headerText, headerTooltip]);
+    return headerTooltip ?? t ? t(columnGroupText ?? headerText) : columnGroupText ?? headerText;
+  }, [columnGroupText, headerText, headerTooltip, t]);
   //
   //
   // const [isOpen, setIsOpen] = useState(false)
@@ -67,9 +67,7 @@ const HeaderContent = props => {
     // style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'keep-all'}}
     // style={{flex: 1}}
     className: classnames('', {}),
-    "data-tooltip-id": "tooltip-header"
-    // data-tooltip-id="tooltip-cell-content"
-    ,
+    "data-tooltip-id": "tooltip-header",
     "data-tooltip-content": tooltip,
     "data-tooltip-offset": 16
   }, headerTemplate ? getTemplate(headerTemplate) : t ? t(text) : text));

package/es/grid-component/hooks/useColumns.js

@@ -276,8 +276,7 @@ const useColumns = config => {
               className: classNames(transformedColumn?.onCell?.(data, index).className ?? '', {
                 'cell-group': groupColumns && data.children,
                 'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
-              }),
-              'data-tooltip-id': "tooltip-cell-content"
+              })
               // onMouseEnter: () => {
               //   onMouseHover(data, col as any)
               // },

package/es/grid-component/hooks/utils.d.ts

@@ -121,12 +121,14 @@ export declare const sortedSetASC: (setValue: any) => Set<unknown>;
 export declare const sortedSetDSC: (setValue: any) => Set<unknown>;
 export declare function getBottomRowCells(cellSet: any): any[];
 export declare function getCellsByPosition(cellSet: any, position?: string): any[];
-export declare const addBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
+export declare const addBorderClass: (selectedCells: any, type: string, className: string, id?: string, nextCellRight?: boolean) => void;
 export declare const removeBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
 export declare const removeBorderClass2: (className: string, id?: string) => void;
 export declare const onAddBgSelectedCell: (selectedCells: any, id?: string, isFocusCellIndex?: boolean) => void;
-export declare const onAddBorderSelectedCell: (selectedCells: any, id?: string) => void;
 export declare const onRemoveBgSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;
+export declare const onAddBgCellIndex: (selectedCells: any, id?: string, isFocusCellIndex?: boolean) => void;
+export declare const onRemoveBgCellIndex: (selectedCells: any, id?: string, rowsSelected?: any) => void;
+export declare const onAddBorderSelectedCell: (selectedCells: any, id?: string) => void;
 export declare const onRemoveBorderSelectedCell: (selectedCells: any, id?: string) => void;
 export declare const addClassBorderPasteCell: (pasteCells: any, type: 'up' | 'down', id?: string) => void;
 export declare const removeClassBorderPasteCell: (pasteCells: any, type: 'up' | 'down', id?: string) => void;
@@ -134,3 +136,5 @@ export declare const addClassCellIndexSelected: (rowsSelected: any, id?: string)
 export declare const removeClassCellIndexSelected: (rowsSelected: any, id?: string) => void;
 export declare const showDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;
+export declare const isRangeCell: (selectedCells: any, type: string, rowIndex: number, colIndex: number) => boolean;
+export declare const isSelectedCell: (selectedCells: any, rowIndex: number, colIndex: number) => any;

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

@@ -443,12 +443,9 @@ export const getDefaultValue = defaultValue => {
 export 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()
@@ -1526,7 +1523,7 @@ export function getCellsByPosition(cellSet, position = "bottom") {
       return [];
   }
 }
-export const addBorderClass = (selectedCells, type, className, id) => {
+export const addBorderClass = (selectedCells, type, className, id, nextCellRight) => {
   const table = document.querySelector(`#${id}`);
   const typeCells = getCellsByPosition(selectedCells, type);
   const selectorsCells = typeCells.map(pos => {
@@ -1537,7 +1534,24 @@ export const addBorderClass = (selectedCells, type, className, id) => {
   if (cellsFilter && cellsFilter.length > 0) {
     cellsFilter.forEach(cell => {
       cell.classList.add(className);
+      if (nextCellRight) {
+        cell.style.zIndex = 1;
+      }
+    });
+  }
+  if (type === 'left') {
+    const selectorsCells2 = typeCells.map(pos => {
+      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');
+      });
+    }
   }
 };
 export const removeBorderClass = (selectedCells, type, className, id) => {
@@ -1569,10 +1583,20 @@ export 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]))];
@@ -1604,35 +1628,47 @@ export const onAddBgSelectedCell = (selectedCells, id, isFocusCellIndex) => {
   // addBorderClass(selectedCells, 'top', 'cell-border-top', id)
   // addBorderClass(selectedCells, 'left', 'cell-border-left', id)
 };
-export const onAddBorderSelectedCell = (selectedCells, id) => {
+export 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');
+      });
+    }
+  }
 };
-export const onRemoveBgSelectedCell = (selectedCells, id, rowsSelected) => {
+export 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');
     });
   }
+};
+export 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 => {
@@ -1653,6 +1689,35 @@ export const onRemoveBgSelectedCell = (selectedCells, id, rowsSelected) => {
     }
   }
 };
+export 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: any = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-right[data-row-index="${row}"][data-col-index="${col + 1}"]`)
+
+  console.log('nextCell', nextCellLeft);
+  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);
+  addBorderClass(selectedCells, 'top', 'cell-border-top', id);
+  addBorderClass(selectedCells, 'left', 'cell-border-left', id);
+};
 export const onRemoveBorderSelectedCell = (selectedCells, id) => {
   const table = document.querySelector(`#${id}`);
 
@@ -1660,13 +1725,11 @@ export 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;
   }
 
@@ -1676,10 +1739,6 @@ export 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)
 };
 export const addClassBorderPasteCell = (pasteCells, type, id) => {
   //  thêm class border
@@ -1701,6 +1760,8 @@ export const removeClassBorderPasteCell = (pasteCells, type, id) => {
   removeBorderClass(pasteCells, 'top', 'cell-paste-border-top', id);
   removeBorderClass(pasteCells, 'left', 'cell-paste-border-left', id);
 };
+
+///////////////////////////////
 export const addClassCellIndexSelected = (rowsSelected, id) => {
   // thêm class selected vào ô STT
   const table = document.querySelector(`#${id}`);
@@ -1710,7 +1771,7 @@ export 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');
       });
     }
   }
@@ -1724,7 +1785,7 @@ export 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');
       });
     }
   }
@@ -1733,7 +1794,19 @@ export 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');
@@ -1743,19 +1816,37 @@ export const showDraggingPoint = (selectedCells, id) => {
 export 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');
     });
   }
+};
+export const isRangeCell = (selectedCells, type, rowIndex, colIndex) => {
+  const typeCells = getCellsByPosition(selectedCells, type);
+  const key = `${rowIndex}-${colIndex}`;
+  return typeCells.includes(key);
+};
+export const isSelectedCell = (selectedCells, rowIndex, colIndex) => {
+  if (selectedCells.size === 1) {
+    return false;
+  }
+  const key = `${rowIndex}-${colIndex}`;
+  return selectedCells.has(key);
 };

package/es/grid-component/styles.scss

@@ -157,7 +157,11 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         background-color: #f0f0f0;
       }
 
-      &.selected {
+      //&.selected {
+      //  //background: red;
+      //  background-color: $cell-selected-bg !important;
+      //}
+      &.selected-bg {
         //background: red;
         background-color: $cell-selected-bg !important;
       }
@@ -286,10 +290,24 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     }
   }
 
-  .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
-    border-inline-start: 1px solid $tableBorderColor;
+  //.#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
+  //  border-inline-start: 1px solid $tableBorderColor;
+  //}
+
+  .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first {
+    &::before {
+      border-inline-start: 1px solid $tableBorderColor;
+    }
+    &.has-before::before {
+      border-inline-start: 1px solid $border-selected-color;
+    }
+    &.cell-border-left.selected-bg::before {
+      border-inline-start: 1px solid $border-selected-color;
+    }
   }
 
+
+
   .#{$prefix}-table {
 
     &.#{$prefix}-table-bordered {
@@ -428,7 +446,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
           background-color: $cell-index-focus-bg;
           //font-weight: 500;
         }
-        &.selected {
+        &.selected-index {
           background-color: $cell-index-selected-bg !important;
           color: #fff;
           //font-weight: 500;
@@ -439,6 +457,30 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
         &.cell-border-top {
           border-bottom: 1px solid $border-selected-color;
+
+          //&::after {
+          //  content: "";
+          //  position: absolute;
+          //  top: -1px;
+          //  left: 0;
+          //
+          //  height: 1px;
+          //  width: 100%;
+          //  border-top: 1px solid red;
+          //  pointer-events: none;
+          //  z-index: 1;
+          //}
+          //&.ui-rc-table-cell-fix-left {
+          //  &::after {
+          //    left: -100%;
+          //  }
+          //}
+          //&.ui-rc-table-cell-fix-right {
+          //  &::after {
+          //    left: 100%;
+          //  }
+          //}
+
         }
 
         &.cell-border-bottom {
@@ -447,6 +489,17 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
         &.cell-border-left {
           border-inline-end: 1px solid $border-selected-color;
+          //&::before {
+          //  content: "";
+          //  position: absolute;
+          //  top: 0;
+          //  left: 0;
+          //  height: 102%;
+          //  width: 1px;
+          //  border-left: 1px solid red;
+          //  pointer-events: none;
+          //  z-index: 1;
+          //}
         }
 
         &.cell-border-right {
@@ -564,7 +617,11 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
             //  //}
 
             &.#{$prefix}-table-cell-fix-right {
-              z-index: 0;
+              z-index: 0 !important;
+
+              &:has(.dragging-point.show) {
+                z-index: 3 !important;
+            }
 
               &.cell-border-end {
                 z-index: 3;