es-grid-template 1.5.6 → 1.5.8

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

@@ -973,7 +973,7 @@ const GridEdit = props => {
       // const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
       const container = document.querySelector(".be-popup-container");
       const containerContextMenu = document.querySelector(".popup-context-menu");
-      const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody`);
+      const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody .ui-rc-table-tbody-virtual-holder`);
       // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
 
       // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");

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

@@ -53,6 +53,8 @@ export type IEditSelectSettings = {
     fieldValue?: string;
     /** get label form other field **/
     fieldLabel?: string;
+    /** cho phép nhập giá trị - onBlur: giá trị search được set thành value **/
+    searchTextAsValue?: boolean;
     inputKey?: string;
     filterKey?: string[];
     selectMode?: SelectMode;

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

@@ -23,7 +23,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const BoxAction = _styledComponents.default.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;}}"]);
 const ColumnsGroup = props => {
   const {
     columns,

package/lib/grid-component/EditableCell.js

@@ -399,6 +399,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`
         });
@@ -457,6 +482,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`
         });
@@ -554,6 +604,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`
         });
@@ -799,7 +874,7 @@ const EditableCell = props => {
         // let floatValue = value
 
         const numericFormatProps = {
-          value,
+          // value,
           thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
           decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
           decimalScale: cellFormat?.decimalScale ?? undefined,
@@ -809,7 +884,9 @@ const EditableCell = props => {
           suffix: cellFormat?.suffix ?? undefined
         };
         return /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, (0, _extends2.default)({
-          id: `col${indexCol}-record${indexRow}`
+          id: `col${indexCol}-record${indexRow}`,
+          value: value ? (0, _reactNumericComponent.numericFormatter)(value.toString(), numericFormatProps) : ''
+          // value={value}
         }, numericFormatProps, {
           min: column.min,
           max: column.max,
@@ -825,7 +902,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/lib/grid-component/hooks/columns/index.js

@@ -76,7 +76,9 @@ 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 = !(0, _utils.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 = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? tmpval.toString() : tmpval.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),

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

@@ -1756,34 +1756,20 @@ 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');
-  //     });
-  //   }
-  //
-  // }
 };
 exports.addBorderClass = addBorderClass;
 const removeBorderClass = (selectedCells, type, className, id) => {
@@ -1986,18 +1972,26 @@ exports.onRemoveBgCellIndex = onRemoveBgCellIndex;
 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);