es-grid-template 1.9.49 → 1.9.51

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

@@ -239,6 +239,7 @@ const TableBodyCellEdit = props => {
     format
   } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
+  const visibleColumns = table.getVisibleLeafColumns();
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
   const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
@@ -316,7 +317,9 @@ const TableBodyCellEdit = props => {
     }
   }, [cell, columnMeta, isOpenTooltip, record, valueCellString]);
   const triggerDragPaste = (pasteState, ctrlKey) => {
-    const tmpCols = table.getVisibleLeafColumns();
+    const tmpCols = {
+      ...visibleColumns
+    };
     const rowPasteIds = (0, _utils.getRowIdsBetween)(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
     const colPasteds = (0, _utils.getColIdsBetween)(table, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
     const rowSelectIds = (0, _utils.getRowIdsBetween)(table, startCell?.rowId ?? '', endCell?.rowId ?? '');
@@ -390,7 +393,9 @@ const TableBodyCellEdit = props => {
     setRangePasteState?.(undefined);
   };
   const triggerPointPaste = (pasteState, cellStart, cellEnd, ctrlKey) => {
-    const tmpCols = table.getVisibleLeafColumns();
+    const tmpCols = {
+      ...visibleColumns
+    };
     const rowPasteIds = (0, _utils.getRowIdsBetween)(table, cellStart?.rowId ?? '', cellEnd?.rowId ?? '');
     const colPasteds = (0, _utils.getColIdsBetween)(table, cellStart?.colId ?? '', cellEnd?.colId ?? '');
     const rowSelectIds = (0, _utils.getRowIdsBetween)(table, startCell?.rowId ?? '', endCell?.rowId ?? '');
@@ -591,7 +596,9 @@ const TableBodyCellEdit = props => {
   function handleKeyDown(e, rowId, colId) {
     if (e.key === 'Tab') {
       e.preventDefault();
-      const allCols = table.getVisibleLeafColumns();
+      const allCols = {
+        ...visibleColumns
+      };
       const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
       const nextCol = allCols[currentColIndex + 1];
       if (nextCol) {
@@ -655,7 +662,7 @@ const TableBodyCellEdit = props => {
     if (e.key === 'ArrowRight') {
       e.preventDefault();
       e.stopPropagation();
-      const allCols = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
+      const allCols = visibleColumns.filter(it => !_hooks.nonActionColumn.includes(it.id));
       const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
       const nextCol = allCols[currentColIndex + 1];
       if (nextCol) {
@@ -686,7 +693,7 @@ const TableBodyCellEdit = props => {
     }
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
-      const allCols = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
+      const allCols = visibleColumns.filter(it => !_hooks.nonActionColumn.includes(it.id));
 
       // const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
       const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
@@ -834,7 +841,7 @@ const TableBodyCellEdit = props => {
   }
   const handleMouseDownIndex = rowId => {
     setIsSelecting?.(true);
-    const allColumns = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
+    const allColumns = visibleColumns.filter(it => !_hooks.nonActionColumn.includes(it.id));
     const firstCOlSpin = (0, _utils.findFirst)(allColumns);
     const startCol = allColumns[0].id;
     const endCol = allColumns[allColumns.length - 1].id;
@@ -868,7 +875,7 @@ const TableBodyCellEdit = props => {
   };
   const handleMouseEnterIndex = rowId => {
     if (isSelecting) {
-      const allColumns = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
+      const allColumns = visibleColumns.filter(it => !_hooks.nonActionColumn.includes(it.id));
 
       // const firstCOl = findFirst(allColumns)
 
@@ -1118,6 +1125,58 @@ const TableBodyCellEdit = props => {
       }, 100);
     }
   };
+  const handleNextCell = () => {
+    const allCols = visibleColumns;
+
+    // const colId = cell.column.id
+    const rowId = cell.row.id;
+
+    // const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
+    // const currentColIndex = indexCol;
+
+    const isNextCol = allCols[colIndex + 1];
+    const nextCol = (0, _utils.getNextEditableColumn)(visibleColumns, colIndex, record);
+    if (isNextCol && nextCol) {
+      setFocusedCell?.({
+        rowId,
+        colId: nextCol.id
+      });
+      setStartCell?.({
+        rowId,
+        colId: nextCol.id
+      });
+      setEndCell?.({
+        rowId,
+        colId: nextCol.id
+      });
+      setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
+        rowId,
+        colId: nextCol.id
+      }, {
+        rowId,
+        colId: nextCol.id
+      }));
+      columnVirtualizer.scrollToIndex(nextCol.getIndex(), {
+        align: 'center'
+      });
+      const nextItem = document.querySelector(`.ui-rc-grid-row .cell-editing[data-row-key="${rowId}"].cell-editing[data-col-key="${nextCol.id}"] input`);
+
+      // const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.current.row}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] input`) as HTMLInputElement
+      // const textarea = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowNumber}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] textarea`) as any
+
+      const textarea = document.querySelector(`.ui-rc-grid-row .cell-editing[data-row-key="${rowId}"].cell-editing[data-col-key="${nextCol.id}"] textarea`);
+      setTimeout(() => {
+        if (textarea) {
+          textarea.focus();
+          textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+          return;
+        }
+        if (nextItem) {
+          nextItem.focus();
+        }
+      });
+    }
+  };
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
   const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
@@ -1253,7 +1312,9 @@ const TableBodyCellEdit = props => {
     editType: (0, _utils.getEditType)(cell.column.columnDef.meta, record),
     indexCol: cell.column.getIndex(),
     indexRow: cell.row.index,
-    record: record
+    record: record,
+    visibleColumns: visibleColumns,
+    handleNextCell: handleNextCell
     // rowKey={rowKey}
   }) : /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ui-rc_cell-content', {

package/lib/table-component/hook/useColumns.js

@@ -48,9 +48,9 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
     case 'date':
       return value ? (0, _dayjs.default)(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
     case 'time':
-      const timeFormat = format?.timeFormat ?? 'HH:mm';
+      const timeFormat = format?.timeFormat;
       const abc = (0, _utils.convertToDate)(value, timeFormat);
-      const timeValue = value ? (0, _dayjs.default)(abc).format(timeFormat) : '';
+      const timeValue = value ? (0, _dayjs.default)(abc).format(timeFormat ?? 'HH:mm') : '';
       return timeValue ?? '';
     case 'year':
       const year = value ? (0, _moment.default)(value).format('yyyy') : '';

package/lib/table-component/hook/utils.d.ts

@@ -81,6 +81,7 @@ export declare function sortData(data: any[], sorter: Sorter[]): any[];
 export declare function filterDataByColumns(data: any[], queries: FilterItem[] | undefined, sorter: Sorter[] | undefined, keysFilter: string[] | undefined, ignoreAccents?: boolean): any[];
 export declare const getAllRowKey: (data: any[]) => any[];
 export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
+export declare const getNextEditableColumn: (columns: any[], currentIndex: number, rowData: any) => any;
 export declare const checkFieldKey: (key: string | undefined) => string;
 export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
 export declare const convertLabelToTitle: (data: any[]) => any[];
@@ -167,3 +168,5 @@ export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType
 export declare function sumFields(columns: ColumnTable[], data: any[], childrenKey?: string): any;
 export declare function sumNumberFields(columns: ColumnTable[], data: any[], childrenKey?: string): any;
 export declare const getTreeDepth: (rows: any[]) => number;
+export type FormatToken = 'YYYY' | 'MM' | 'DD' | 'HH' | 'mm' | 'ss';
+export declare const isDateChanged: (oldDate: string | Date, newDate: string | Date, format: string) => FormatToken | null;

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

@@ -39,12 +39,12 @@ exports.getFormat = exports.getFixedFields = exports.getEditType = exports.getDi
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.getHiddenParentKeys1 = getHiddenParentKeys1;
 exports.getInvisibleColumns = getInvisibleColumns;
-exports.getNewItemsOnly = exports.getLastSelectCell = void 0;
+exports.getNextEditableColumn = exports.getNewItemsOnly = exports.getLastSelectCell = void 0;
 exports.getRowIdsBetween = getRowIdsBetween;
 exports.getVisibleColumnKeys1 = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTreeDepth = exports.getTableHeight = exports.getSelectedCellMatrix = void 0;
 exports.getVisibleFields = getVisibleFields;
 exports.groupArrayByColumns = groupArrayByColumns;
-exports.isColor = void 0;
+exports.isDateChanged = exports.isColor = void 0;
 exports.isDateString = isDateString;
 exports.isEmpty = exports.isEditable = exports.isDisable = exports.isDateValue = void 0;
 exports.isEqualSet = isEqualSet;
@@ -260,6 +260,9 @@ function getDateValueType(value) {
   }
   const datetimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?(\.\d+)?(Z|[+-]\d{2}:\d{2})?$/;
   const timeRegex = /^\d{2}:\d{2}(:\d{2})?$/;
+
+  // const timeRegex = /^(?:[01]\d|2[0-3])\s*:\s*[0-5]\d(?:\s*:\s*[0-5]\d)?$/;
+
   if (datetimeRegex.test(value)) {
     return 'datetime';
   }
@@ -274,7 +277,7 @@ const convertToDate = (value, format) => {
   }
   const valueType = getDateValueType(value);
   if (valueType === 'time') {
-    const date = (0, _dayjs.default)(value, format, true);
+    const date = (0, _dayjs.default)(value, format ?? ['HH:mm:ss', 'HH:mm'], true);
     return date.isValid() ? (0, _moment.default)(date.toDate()).format() : '';
   }
   if (valueType === 'datetime') {
@@ -1336,6 +1339,15 @@ const isEditable = (column, rowData) => {
   return column?.editEnable;
 };
 exports.isEditable = isEditable;
+const getNextEditableColumn = (columns, currentIndex, rowData) => {
+  for (let i = currentIndex + 1; i < columns.length; i++) {
+    if (isEditable(columns[i].columnDef.meta, rowData)) {
+      return columns[i];
+    }
+  }
+  return undefined;
+};
+exports.getNextEditableColumn = getNextEditableColumn;
 const checkFieldKey = key => {
   if (key) {
     return key;
@@ -2853,4 +2865,25 @@ const getTreeDepth = rows => {
   if (!rows?.length) return 0;
   return 1 + Math.max(0, ...rows.map(r => getTreeDepth(r.children)));
 };
-exports.getTreeDepth = getTreeDepth;
+exports.getTreeDepth = getTreeDepth;
+const TOKEN_MAP = {
+  YYYY: 'year',
+  MM: 'month',
+  DD: 'day',
+  HH: 'hour',
+  mm: 'minute',
+  ss: 'second'
+};
+const isDateChanged = (oldDate, newDate, format) => {
+  const prev = (0, _dayjs.default)(oldDate, format, true);
+  const next = (0, _dayjs.default)(newDate, format, true);
+  const tokens = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss'];
+  for (const token of tokens) {
+    if (!format.includes(token)) continue;
+    if (!prev.isSame(next, TOKEN_MAP[token])) {
+      return token;
+    }
+  }
+  return null;
+};
+exports.isDateChanged = isDateChanged;

package/lib/table-component/style.scss

@@ -1195,4 +1195,10 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
   .ui-rc-toolbar-bottom_border-bottom {
     border-bottom-color: $tableBorderColorDark;
   }
+}
+
+.ui-rc-checkbox {
+  &:has(input:focus) span {
+  border-color: red;
+}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.49",
+  "version": "1.9.51",
   "description": "es-grid-template",
   "keywords": [
     "react",