frontend-plus-react 0.1.9 → 0.1.11

package/dist/index.js

@@ -1384,7 +1384,7 @@ function InputRenderer({
   onClose,
   cellFeedback,
   setCellFeedback,
-  onEnterPress,
+  onKeyPress,
   setTableData,
   setLocalCellChanges,
   localCellChanges,
@@ -1535,15 +1535,14 @@ function InputRenderer({
     localCellChanges,
     initialRowId
   ]);
-  const handleKeyDown = useCallback3((event) => {
-    if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight"].includes(event.key)) {
-      handleCommit(editingValue, true, true);
-      event.preventDefault();
-      if (onEnterPress) {
-        onEnterPress(rowIdx, column.key, event.key);
+  const handleKeyDown = useCallback3(async (event) => {
+    if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "F4"].includes(event.key)) {
+      await handleCommit(editingValue, true, true);
+      if (onKeyPress) {
+        onKeyPress(rowIdx, column.key, event, handleCommit);
       }
     }
-  }, [handleCommit, editingValue, column.key, rowIdx, onEnterPress]);
+  }, [handleCommit, editingValue, column.key, rowIdx, onKeyPress]);
   const handleBlur = useCallback3(() => {
     handleCommit(editingValue, true, false);
   }, [handleCommit, editingValue]);
@@ -1590,7 +1589,7 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
         setTableData,
         cellFeedback,
         setCellFeedback,
-        handleEnterKeyPressInEditor,
+        handleKeyPressInEditor,
         localCellChanges,
         setLocalCellChanges
       } = defaultColumn;
@@ -1609,7 +1608,7 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
             tableDefinition,
             setCellFeedback,
             cellFeedback,
-            onEnterPress: (rowIndex, columnKey, key) => handleEnterKeyPressInEditor(rowIndex, columnKey, key, allColumns),
+            onKeyPress: (rowIndex, columnKey, event, handleCommit) => handleKeyPressInEditor(rowIndex, columnKey, event, allColumns, handleCommit),
             setTableData,
             setLocalCellChanges,
             localCellChanges,
@@ -1720,11 +1719,7 @@ var GenericDataGrid = ({
       }
     };
     fetchDataAndDefinition();
-  }, [
-    tableName,
-    /*fixedFields,*/
-    showError
-  ]);
+  }, [tableName, fixedFields, showError]);
   useEffect(() => {
     if (cellFeedback) {
       if (feedbackTimerRef.current) {
@@ -1882,29 +1877,108 @@ var GenericDataGrid = ({
     }
     return rows;
   }, [tableData, filters, isFilterRowVisible]);
-  const handleEnterKeyPressInEditor = useCallback4((rowIndex, columnKey, key, currentColumns) => {
+  const handleKeyPressInEditor = useCallback4((rowIndex, columnKey, event, currentColumns, handleCommit) => {
     if (dataGridRef.current && tableDefinition) {
       const currentColumnIndex = currentColumns.findIndex((col) => col.key === columnKey);
       const editableColumns = currentColumns.filter((col) => {
         const fieldDefinition = tableDefinition.fields.find((f) => f.name === col.key);
         return col.key !== "actionsColumn" && col.customType != "detail" && (fieldDefinition?.editable !== false && !fieldDefinition?.clientSide);
       });
+      const { key, target } = event;
+      const input = target;
       if (currentColumnIndex !== -1 && editableColumns.length > 0) {
         const editableColumnKeys = editableColumns.map((col) => col.key);
         let currentEditableColumnIndex = editableColumnKeys.indexOf(columnKey);
-        if (currentEditableColumnIndex !== -1) {
+        const hacerFoco = ({ rowIdx, idx }) => setTimeout(() => dataGridRef.current?.selectCell({ rowIdx, idx }, { enableEditor: true, shouldFocusCell: true }), 10);
+        const calcularColumnaSiguiente = () => {
           let nextEditableColumnIndex = currentEditableColumnIndex + 1;
           let nextRowIndex = rowIndex;
           if (nextEditableColumnIndex >= editableColumns.length) {
             nextEditableColumnIndex = 0;
             nextRowIndex++;
+            while (filteredRows[nextRowIndex] && filteredRows[nextRowIndex][DETAIL_ROW_INDICATOR]) {
+              nextRowIndex++;
+            }
             if (nextRowIndex >= filteredRows.length) {
               nextRowIndex = 0;
             }
           }
           const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
           const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
-          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: nextColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+          return { rowIdx: nextRowIndex, idx: nextColumnIndex };
+        };
+        const calcularColumnaAnterior = () => {
+          let nextEditableColumnIndex = currentEditableColumnIndex - 1;
+          let nextRowIndex = rowIndex;
+          if (nextEditableColumnIndex <= 0) {
+            nextEditableColumnIndex = 0;
+          }
+          const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
+          const nextColumnIndex = currentColumns.findIndex((col) => col.key === nextColumnKey);
+          return { rowIdx: nextRowIndex, idx: nextColumnIndex };
+        };
+        const calcularFilaSiguiente = () => {
+          let nextRowIndex = rowIndex;
+          nextRowIndex++;
+          while (filteredRows[nextRowIndex] && filteredRows[nextRowIndex][DETAIL_ROW_INDICATOR]) {
+            nextRowIndex++;
+          }
+          if (nextRowIndex >= filteredRows.length) {
+            return { rowIdx: rowIndex, idx: currentColumnIndex };
+          }
+          return { rowIdx: nextRowIndex, idx: currentColumnIndex };
+        };
+        const calcularFilaAnterior = () => {
+          let nextRowIndex = rowIndex;
+          nextRowIndex--;
+          while (filteredRows[nextRowIndex] && filteredRows[nextRowIndex][DETAIL_ROW_INDICATOR]) {
+            nextRowIndex--;
+          }
+          if (nextRowIndex < 0) {
+            return { rowIdx: rowIndex, idx: currentColumnIndex };
+          }
+          return { rowIdx: nextRowIndex, idx: currentColumnIndex };
+        };
+        if (currentEditableColumnIndex !== -1) {
+          switch (true) {
+            case ["Enter", "Tab"].includes(key): {
+              hacerFoco(calcularColumnaSiguiente());
+              break;
+            }
+            case key == "ArrowRight": {
+              const cursorPosition = input.selectionStart;
+              const inputValueLength = input.value.length;
+              if (cursorPosition === inputValueLength) {
+                hacerFoco(calcularColumnaSiguiente());
+              }
+              break;
+            }
+            case key == "ArrowLeft": {
+              const cursorPosition = input.selectionStart;
+              if (cursorPosition === 0) {
+                hacerFoco(calcularColumnaAnterior());
+              }
+              break;
+            }
+            case key == "ArrowUp": {
+              hacerFoco(calcularFilaAnterior());
+              break;
+            }
+            case key == "ArrowDown": {
+              hacerFoco(calcularFilaSiguiente());
+              break;
+            }
+            case key == "F4": {
+              const { rowIdx, idx } = calcularFilaSiguiente();
+              const previousRow = tableData[rowIndex - 1];
+              if (previousRow && !previousRow[DETAIL_ROW_INDICATOR]) {
+                handleCommit(previousRow[columnKey], true, true).then(() => hacerFoco({ rowIdx, idx }));
+              }
+              break;
+            }
+            default:
+              break;
+          }
         }
       }
     }
@@ -1937,7 +2011,7 @@ var GenericDataGrid = ({
         resizable: true,
         sortable: true,
         editable: isFieldEditable,
-        handleEnterKeyPressInEditor,
+        handleKeyPressInEditor,
         flexGrow: 1,
         minWidth: 60,
         renderHeaderCell: (props) => defaultColumnHeaderCellRenderer(props, fieldDef),
@@ -2020,7 +2094,7 @@ var GenericDataGrid = ({
     theme.palette.error.light,
     theme.palette.info.light,
     theme.palette.action.selected,
-    handleEnterKeyPressInEditor,
+    handleKeyPressInEditor,
     setTableData,
     localCellChanges,
     handleDeleteRow,
@@ -2041,16 +2115,24 @@ var GenericDataGrid = ({
     });
   };
   const handleCellKeyDown = (args, event) => {
-    if (["Tab", "Enter"].includes(event.key)) {
+    if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(event.key)) {
       event.preventGridDefault();
     }
   };
-  const handleCellClick = useCallback4((args) => {
-    deselectAllOtherGrids(dataGridRef.current?.element);
-    args.selectCell(true);
+  const handleCellMouseDown = useCallback4((_args, event) => {
+    event.preventGridDefault();
+  }, []);
+  const handlCellDoubleClick = useCallback4((_args, event) => {
+    event.preventGridDefault();
+  }, []);
+  const handleCellClick = useCallback4((args, _event) => {
     const fieldDefinition = tableDefinition?.fields.find((f) => f.name === args.column.key);
     const isFixedField = fixedFields?.some((f) => f.fieldName === args.column.key);
     const isEditable = fieldDefinition?.editable !== false && !isFixedField;
+    if (isEditable) {
+      deselectAllOtherGrids(dataGridRef.current?.element);
+      args.selectCell(true);
+    }
     console.log("Clicked column index:", args.column.idx);
     console.log("Clicked row index:", args.rowIdx);
     console.log("Is editable:", isEditable);
@@ -2124,6 +2206,8 @@ var GenericDataGrid = ({
             topSummaryRows: isFilterRowVisible ? [{ id: "filterRow" }] : void 0,
             summaryRowHeight: isFilterRowVisible ? 30 : 0,
             renderers: { noRowsFallback: /* @__PURE__ */ jsx12(EmptyRowsRenderer, {}) },
+            onCellMouseDown: handleCellMouseDown,
+            onCellDoubleClick: handlCellDoubleClick,
             onCellClick: handleCellClick,
             onCellKeyDown: handleCellKeyDown
           }