es-grid-template 1.7.29 → 1.7.30

package/es/table-component/body/TableBodyCellEdit.js

@@ -123,7 +123,9 @@ const TableBodyCellEdit = props => {
     handleDeleteContent,
     reset,
     setValue,
-    handleAddMulti,
+    getValues,
+    handleCellChange,
+    // handleAddMulti,
     dataErrors,
     expanded,
     setExpanded,
@@ -149,12 +151,16 @@ const TableBodyCellEdit = props => {
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+  const selectRowIds = React.useMemo(() => {
+    return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
+  }, [endCell, startCell, table]);
   const isCellSelected = React.useMemo(() => {
     if (!startCell || !endCell) return false;
-    const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
+
+    // const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
     const colIds = getColIdsBetween(table, startCell.colId, endCell.colId);
-    return rowIds.includes(cell.row.id) && colIds.includes(cell.column.id);
-  }, [cell.column.id, cell.row.id, endCell, startCell, table]);
+    return selectRowIds.includes(cell.row.id) && colIds.includes(cell.column.id);
+  }, [cell.column.id, cell.row.id, endCell, selectRowIds, startCell, table]);
   const editType = typeof columnMeta.editType === 'function' ? columnMeta.editType(record) : columnMeta.editType;
   const {
     rowRange,
@@ -185,136 +191,6 @@ const TableBodyCellEdit = props => {
   const isLeftPaste = colIdxPaste === pasteRangeState.startColIndex;
   const isRightPaste = colIdxPaste === pasteRangeState.endColIndex;
   const parrents = cell.row.getParentRows();
-  if (cell.column.id === "#") {
-    return /*#__PURE__*/React.createElement("td", {
-      key: cell.id,
-      className: classNames(`${prefix}-grid-cell`, {
-        [`${prefix}-grid-cell-ellipsis`]: true,
-        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
-      }),
-      style: {
-        display: 'flex',
-        height: '36px',
-        width: cell.column.getSize(),
-        ...getCommonPinningStyles(cell.column)
-      }
-    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
-      className: "ui-rc-table-row-expand-trigger",
-      style: {
-        paddingLeft: `${cell.row.depth * 25}px`
-      }
-    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
-      // onClick: row.getToggleExpandedHandler(),
-      onClick: () => {
-        const keys = Object.keys(expanded);
-        // @ts-ignore
-        const tmp = {
-          ...expanded
-        };
-        if (keys.includes(cell.row.id)) {
-          delete tmp[cell.row.id];
-          setExpanded(tmp);
-        } else {
-          setExpanded(old => ({
-            ...old,
-            [cell.row.id]: true
-          }));
-        }
-      },
-      style: {
-        cursor: "pointer"
-      },
-      className: "ui-rc-table-row-expand"
-    }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-    }) : /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-    })) : /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-    }))), renderCellIndex({
-      parrents,
-      cell
-    }));
-  }
-  if (cell.column.id === "command") {
-    return /*#__PURE__*/React.createElement("td", {
-      key: cell.id,
-      className: classNames(`${prefix}-grid-cell`, {
-        [`${prefix}-grid-cell-ellipsis`]: true,
-        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
-      }),
-      style: {
-        display: 'flex',
-        height: '36px',
-        width: cell.column.getSize(),
-        ...getCommonPinningStyles(cell.column)
-      }
-    }, renderCommand({
-      cell,
-      commandClick,
-      id,
-      data: originData
-    }));
-  }
-  if (cell.column.id === "selection_column") {
-    return /*#__PURE__*/React.createElement("td", {
-      key: cell.id,
-      className: classNames(`${prefix}-grid-cell cell-editable111 `, {
-        [`${prefix}-grid-cell-ellipsis`]: true,
-        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
-      }),
-      style: {
-        display: 'flex',
-        height: '36px',
-        width: cell.column.getSize(),
-        ...getCommonPinningStyles(cell.column)
-      }
-    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
-      className: "ui-rc-table-row-expand-trigger",
-      style: {
-        paddingLeft: `${cell.row.depth * 25}px`
-      }
-    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
-      // onClick: row.getToggleExpandedHandler(),
-      onClick: () => {
-        const keys = Object.keys(expanded);
-        // @ts-ignore
-        const tmp = {
-          ...expanded
-        };
-        if (keys.includes(cell.row.id)) {
-          delete tmp[cell.row.id];
-          setExpanded(tmp);
-        } else {
-          setExpanded(old => ({
-            ...old,
-            [cell.row.id]: true
-          }));
-        }
-      },
-      style: {
-        cursor: "pointer"
-      },
-      className: "ui-rc-table-row-expand"
-    }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-    }) : /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-    })) : /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-    }))), renderSelection({
-      cell
-    }));
-  }
   const triggerDragPaste = (pasteState, ctrlKey) => {
     const tmpCols = table.getVisibleLeafColumns();
     const rowPasteIds = getRowIdsBetween(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
@@ -446,32 +322,6 @@ const TableBodyCellEdit = props => {
     const rs = unFlattenData(rsFilterData);
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
   };
-  function handleMouseDown(rowId, colId) {
-    setIsSelecting?.(true);
-    if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
-      setStartCell?.({
-        rowId,
-        colId
-      });
-      setEndCell?.({
-        rowId,
-        colId
-      });
-      setRangeState?.(getSelectedCellMatrix(table, {
-        rowId,
-        colId
-      }, {
-        rowId,
-        colId
-      }));
-    }
-    if (focusedCell?.rowId !== cell.row.id || focusedCell?.colId !== cell.column.id) {
-      setFocusedCell?.({
-        rowId: cell.row.id,
-        colId: cell.column.id
-      });
-    }
-  }
   function handleMouseEnter(rowId, colId) {
     if (isSelecting) {
       setEndCell?.({
@@ -670,6 +520,7 @@ const TableBodyCellEdit = props => {
           });
         }
       }
+      return;
     }
     if (e.key === 'ArrowRight') {
       e.preventDefault();
@@ -701,6 +552,7 @@ const TableBodyCellEdit = props => {
           align: 'center'
         });
       }
+      return;
     }
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
@@ -733,14 +585,246 @@ const TableBodyCellEdit = props => {
           align: 'center'
         });
       }
+      return;
     }
     if (e.key === 'Delete') {
       handleDeleteContent?.();
+      return;
     }
     if (e.key === 'Enter') {
       handleEdit(e);
+      return;
+    }
+    if (e.key.length === 1) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleEdit(e);
+      // setValue(cell.column.id, editType === 'numeric' ? (!isNaN(Number(e.key)) ? Number(e.key) : '') : e.key)
+    }
+  }
+  function handleMouseDown(rowId, colId) {
+    setIsSelecting?.(true);
+    if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
+      setStartCell?.({
+        rowId,
+        colId
+      });
+      setEndCell?.({
+        rowId,
+        colId
+      });
+      setRangeState?.(getSelectedCellMatrix(table, {
+        rowId,
+        colId
+      }, {
+        rowId,
+        colId
+      }));
+    }
+    if (focusedCell?.rowId !== cell.row.id || focusedCell?.colId !== cell.column.id) {
+      setFocusedCell?.({
+        rowId: cell.row.id,
+        colId: cell.column.id
+      });
     }
   }
+  const handleMouseDownIndex = rowId => {
+    const allColumns = table.getVisibleLeafColumns();
+    const startCol = allColumns[0].id;
+    const endCol = allColumns[allColumns.length - 1].id;
+    setStartCell?.({
+      rowId,
+      colId: startCol
+    });
+    setEndCell?.({
+      rowId,
+      colId: endCol
+    });
+    setRangeState?.(getSelectedCellMatrix(table, {
+      rowId,
+      colId: startCol
+    }, {
+      rowId,
+      colId: endCol
+    }));
+  };
+  if (cell.column.id === "#") {
+    return /*#__PURE__*/React.createElement("td", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-index`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right',
+        // [`${prefix}-grid-cell-index-selected`]: rowRange?.includes(cell.row.id),
+        [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(cell.row.id)
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        userSelect: 'none',
+        width: cell.column.getSize(),
+        // minWidth: cell.column.getSize(),
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      },
+      onMouseDown: () => {
+        if (record[rowKey] === editingKey) {
+          setFocusedCell?.({
+            rowId: cell.row.id,
+            colId: cell.column.id
+          });
+        } else {
+          handleMouseDownIndex(cell.row.id);
+          if (editingKey) {
+            setTimeout(() => {
+              setEditingKey?.('');
+              reset?.();
+            });
+          }
+
+          // reset?.()
+        }
+      }
+    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+      // onClick: row.getToggleExpandedHandler(),
+      onClick: () => {
+        const keys = Object.keys(expanded);
+        // @ts-ignore
+        const tmp = {
+          ...expanded
+        };
+        if (keys.includes(cell.row.id)) {
+          delete tmp[cell.row.id];
+          setExpanded(tmp);
+        } else {
+          setExpanded(old => ({
+            ...old,
+            [cell.row.id]: true
+          }));
+        }
+      },
+      style: {
+        cursor: "pointer"
+      },
+      className: "ui-rc-table-row-expand"
+    }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+    }))), renderCellIndex({
+      parrents,
+      cell
+    }));
+  }
+  if (cell.column.id === "command") {
+    return /*#__PURE__*/React.createElement("td", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        width: cell.column.getSize(),
+        // minWidth: cell.column.getSize(),
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, renderCommand({
+      cell,
+      commandClick,
+      id,
+      data: originData
+    }));
+  }
+  if (cell.column.id === "selection_column") {
+    return /*#__PURE__*/React.createElement("td", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell cell-editable111 `, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        width: cell.column.getSize(),
+        // minWidth: cell.column.getSize(),
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+      // onClick: row.getToggleExpandedHandler(),
+      onClick: () => {
+        const keys = Object.keys(expanded);
+        // @ts-ignore
+        const tmp = {
+          ...expanded
+        };
+        if (keys.includes(cell.row.id)) {
+          delete tmp[cell.row.id];
+          setExpanded(tmp);
+        } else {
+          setExpanded(old => ({
+            ...old,
+            [cell.row.id]: true
+          }));
+        }
+      },
+      style: {
+        cursor: "pointer"
+      },
+      className: "ui-rc-table-row-expand"
+    }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+    }))), renderSelection({
+      cell
+    }));
+  }
+  const handleChange = () => {
+    const currentRowIndex = allRows.findIndex(r => r.id === editingKey);
+    const formState = getValues();
+    const itemState = getValues(cell.column.id);
+    const prevState = record[cell.column.id];
+    const newState = itemState;
+    if (newState !== prevState) {
+      handleCellChange?.({
+        key: cell.row.id,
+        field: cell.column.id,
+        record: formState,
+        prevState,
+        newState,
+        option: newState,
+        indexCol: cell.column.getIndex(),
+        indexRow: currentRowIndex,
+        type: 'blur'
+      });
+    }
+  };
   return /*#__PURE__*/React.createElement("td", {
     key: cell.id,
     ref: el => {
@@ -780,6 +864,8 @@ const TableBodyCellEdit = props => {
     style: {
       display: 'flex',
       width: cell.column.getSize(),
+      // minWidth: cell.column.getSize(),
+      // maxWidth: cell.column.getSize(),
       height: '36px',
       ...getCommonPinningStyles(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
@@ -793,10 +879,14 @@ const TableBodyCellEdit = props => {
       } else {
         handleMouseDown(cell.row.id, cell.column.id);
         if (editingKey) {
-          setTimeout(() => {
-            setEditingKey?.('');
-            reset?.();
-          });
+          // setTimeout(() => {
+          //   setEditingKey?.('')
+          //   reset?.()
+          // })
+
+          handleChange();
+          setEditingKey?.('');
+          reset?.();
         }
 
         // reset?.()
@@ -823,8 +913,6 @@ const TableBodyCellEdit = props => {
           if (e.key === 'Enter') {
             e.preventDefault();
             e.stopPropagation();
-            setEditingKey?.('');
-            reset?.();
             const currentRowIndex = allRows.findIndex(r => r.id === cell.row.id);
             const nextRow = allRows[currentRowIndex + 1];
             if (nextRow) {
@@ -847,47 +935,38 @@ const TableBodyCellEdit = props => {
                 rowId: nextRow.id,
                 colId: cell.column.id
               }));
-
-              // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
-            } else {
-              const newRowId = newGuid();
-              handleAddMulti?.({}, 1, newRowId);
-              setFocusedCell?.({
-                rowId: newRowId,
-                colId: cell.column.id
-              });
-              setStartCell?.({
-                rowId: newRowId,
-                colId: cell.column.id
+              rowVirtualizer.scrollToIndex(nextRow.index, {
+                align: 'center'
               });
-              setEndCell?.({
-                rowId: newRowId,
-                colId: cell.column.id
-              });
-              setTimeout(() => {
-                setRangeState?.(getSelectedCellMatrix(table, {
-                  rowId: newRowId,
-                  colId: cell.column.id
-                }, {
-                  rowId: newRowId,
-                  colId: cell.column.id
-                }));
-                // rowVirtualizer.scrollToIndex(101)
-              }, 0);
-            }
-            if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length) {
-
-              // handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event)
             } else {
-              // // focus cell hiện tại và tắt edit
-              // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
-              // setEditingKey('')
 
-              // thêm dòng mới
+              // const newRowId = newGuid()
+              // handleAddMulti?.({}, 1, newRowId)
 
-              // handleAddSingle()
-              // handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true)
+              // setFocusedCell?.({ rowId: newRowId, colId: cell.column.id });
+
+              // setStartCell?.({ rowId: newRowId, colId: cell.column.id });
+              // setEndCell?.({ rowId: newRowId, colId: cell.column.id });
+
+              // setTimeout(() => {
+              //   setRangeState?.(getSelectedCellMatrix(table, { rowId: newRowId, colId: cell.column.id }, { rowId: newRowId, colId: cell.column.id }))
+              //   // rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'end', })
+
+              // })
+
+              // setTimeout(() => {
+
+              //   rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'center', })
+
+              // }, 100)
             }
+            handleChange();
+            setEditingKey?.('');
+            reset?.();
+
+            // setTimeout(() => {
+
+            // })
           }
         }
       }
@@ -961,6 +1040,8 @@ const TableBodyCellEdit = props => {
     onDoubleClick: handlePointDoubleClick
   }, /*#__PURE__*/React.createElement("span", {
     className: 'dot-point'
-  })));
+  })), !isEditing && rowError && rowError[cell.column.id]?.field === cell.column.id && /*#__PURE__*/React.createElement("span", {
+    className: "isValid"
+  }));
 };
 export default TableBodyCellEdit;

package/es/table-component/footer/TableFooterRow.js

@@ -21,8 +21,6 @@ const TableFooterRow = ({
   // const a  =  table.getVisibleFlatColumns()
   const visibleColumns = table.getVisibleLeafColumns();
 
-  // console.log('a', a)
-
   // const 
 
   return /*#__PURE__*/React.createElement("tr", {

package/es/table-component/hook/utils.js

@@ -309,7 +309,7 @@ export function getFixedFields(columns, type) {
   const result = [];
   function traverse(cols) {
     for (const col of cols) {
-      if ((col.fixed ?? col.fixedType) === type && col.field) {
+      if ((col.fixed ?? col.fixedType) === type && col.field && col.visible !== false) {
         result.push(col.field);
       }
       if (col.children && col.children.length > 0) {

package/es/table-component/index.d.ts

@@ -1,5 +1,4 @@
 import InternalTable from './InternalTable';
-import type { ColumnsTable, TableProps, ColumnTable, CommandItem, ContextMenuItem } from './type';
-import type { ToolbarItem } from "rc-master-ui/es/toolbar";
-export type { ColumnsTable, TableProps, ColumnTable, ToolbarItem, CommandItem, ContextMenuItem };
+import type { ColumnsTable, TableProps, ColumnTable, ContextMenuItem } from './type';
+export type { ColumnsTable, TableProps, ColumnTable, ContextMenuItem };
 export default InternalTable;

package/es/table-component/index.js

@@ -1,2 +1,5 @@
 import InternalTable from "./InternalTable";
+
+// import type {ToolbarItem} from "rc-master-ui/es/toolbar"
+
 export default InternalTable;