es-grid-template 1.5.6 → 1.5.8

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,

package/es/grid-component/EditableCell.js

@@ -13,7 +13,7 @@ getDatepickerFormat, getTemplate, isDisable, isEmpty, isNullOrUndefined, customW
 // import dayjs from "dayjs";
 // import {TreeSelect} from "antd";
 import classNames from "classnames";
-import { NumericFormat } from "react-numeric-component";
+import { NumericFormat, numericFormatter } from "react-numeric-component";
 import { TableContext } from "./useContext";
 import dayjs from "dayjs";
 import moment from "moment";
@@ -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`
         });
@@ -797,7 +872,7 @@ const EditableCell = props => {
         // let floatValue = value
 
         const numericFormatProps = {
-          value,
+          // value,
           thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
           decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
           decimalScale: cellFormat?.decimalScale ?? undefined,
@@ -807,7 +882,9 @@ const EditableCell = props => {
           suffix: cellFormat?.suffix ?? undefined
         };
         return /*#__PURE__*/React.createElement(NumericFormat, _extends({
-          id: `col${indexCol}-record${indexRow}`
+          id: `col${indexCol}-record${indexRow}`,
+          value: value ? numericFormatter(value.toString(), numericFormatProps) : ''
+          // value={value}
         }, numericFormatProps, {
           min: column.min,
           max: column.max,
@@ -823,7 +900,7 @@ const EditableCell = props => {
             'be-cell-edit-align-right': !column.align || column.align === 'right'
           }),
           onValueChange: values => {
-            onChange(values?.floatValue);
+            onChange(values?.floatValue || 0);
           },
           onBlur: () => {
             const formState = getValues();

package/es/grid-component/hooks/columns/index.js

@@ -65,7 +65,9 @@ export const getValueCell = (column, value, format) => {
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
       const tmpval = typeof value === 'string' ? Number(value) : value;
-      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
+
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString()) : '0'
+      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? tmpval.toString() : tmpval.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
         decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),

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);