es-grid-template 1.5.5 → 1.5.7

package/es/grid-component/ColumnsGroup/ColumnsGroup.js

@@ -13,7 +13,7 @@ import styled from "styled-components";
 const BoxAction = styled.div.withConfig({
   displayName: "BoxAction",
   componentId: "es-grid-template__sc-1uj3tyy-0"
-})(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
+})(["padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
 export const ColumnsGroup = props => {
   const {
     columns,
@@ -27,7 +27,7 @@ export const ColumnsGroup = props => {
   const [tempGroup, setTempGroup] = useState([]);
   const [clicked, setClicked] = useState(false);
   const rsCol = React.useMemo(() => {
-    return columns.filter(it => it.hidden !== true && !tempGroup.includes(it.field));
+    return columns.filter(it => it.hidden !== true && !tempGroup.includes(it.field) && it.field !== '#' && it.field !== 'command');
   }, [columns, tempGroup]);
   const options = React.useMemo(() => {
     return rsCol.map(it => ({

package/es/grid-component/EditableCell.js

@@ -397,6 +397,31 @@ const EditableCell = props => {
             value: keySelect,
             label: inputKey ?? 'label'
           },
+          onBlur: event => {
+            if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
+              const val = event.inputValue;
+              onChange(val ?? '');
+              const formState = getValues();
+              // const itemState = getValues(dataIndex)
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = val;
+              handleCellChange?.({
+                key: getRowKey?.(record, index),
+                field: column.field ?? column.dataIndex,
+                record: formState,
+                prevState,
+                newState,
+                option: {
+                  value: val,
+                  label: val
+                },
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-form-error`
         });
@@ -455,6 +480,31 @@ const EditableCell = props => {
             value: keySelect,
             label: inputKey ?? 'label'
           },
+          onBlur: event => {
+            if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
+              const val = event.inputValue;
+              onChange(val ?? '');
+              const formState = getValues();
+              // const itemState = getValues(dataIndex)
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = val;
+              handleCellChange?.({
+                key: getRowKey?.(record, index),
+                field: column.field ?? column.dataIndex,
+                record: formState,
+                prevState,
+                newState,
+                option: {
+                  value: val,
+                  label: val
+                },
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-form-error`
         });
@@ -552,6 +602,31 @@ const EditableCell = props => {
             value: keySelect,
             label: inputKey ?? 'label'
           },
+          onBlur: event => {
+            if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
+              const val = event.inputValue;
+              onChange(val ?? '');
+              const formState = getValues();
+              // const itemState = getValues(dataIndex)
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = val;
+              handleCellChange?.({
+                key: getRowKey?.(record, index),
+                field: column.field ?? column.dataIndex,
+                record: formState,
+                prevState,
+                newState,
+                option: {
+                  value: val,
+                  label: val
+                },
+                indexCol,
+                indexRow,
+                type: 'blur'
+              });
+            }
+          },
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-form-error`
         });

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

@@ -1653,34 +1653,20 @@ export const addBorderClass = (selectedCells, type, className, id, nextCellRight
   if (cellsFilter && cellsFilter.length > 0) {
     cellsFilter.forEach(cell => {
       cell.classList.add(className);
-      if (nextCellRight) {
-        cell.style.zIndex = 1;
+
+      // if (nextCellRight) {
+      //   // 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;
+      } else {
+        if (cell) {
+          cell.style.zIndex = nextCellRight ? 3 : 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');
-  //     });
-  //   }
-  //
-  // }
 };
 export const removeBorderClass = (selectedCells, type, className, id) => {
   const table = document.querySelector(`#${id}`);
@@ -1874,18 +1860,26 @@ export const onRemoveBgCellIndex = (selectedCells, id, rowsSelected) => {
 export const onAddBorderSelectedCell = (selectedCells, id) => {
   const table = document.querySelector(`#${id}`);
 
-  // tăng z-index để hiển thị round point paste
+  // // 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 cell: any = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`)
+  //
+  // const nextCellLeft: any = 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;
-  }
+  //
+  // // 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
+  // } else {
+  //   if (cell) {
+  //     cell.style.zIndex = nextCellLeft ? 3 :  3
+  //   }
+  // }
+
   removeBorderClass2('cell-border-bottom', id);
   removeBorderClass2('cell-border-top', id);
   removeBorderClass2('cell-border-right', id);