frontend-plus-react 0.1.10 → 0.1.11

package/dist/index.js

@@ -1535,11 +1535,11 @@ function InputRenderer({
     localCellChanges,
     initialRowId
   ]);
-  const handleKeyDown = useCallback3((event) => {
-    if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(event.key)) {
-      handleCommit(editingValue, true, true);
+  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);
+        onKeyPress(rowIdx, column.key, event, handleCommit);
       }
     }
   }, [handleCommit, editingValue, column.key, rowIdx, onKeyPress]);
@@ -1608,7 +1608,7 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
             tableDefinition,
             setCellFeedback,
             cellFeedback,
-            onKeyPress: (rowIndex, columnKey, event) => handleKeyPressInEditor(rowIndex, columnKey, event, allColumns),
+            onKeyPress: (rowIndex, columnKey, event, handleCommit) => handleKeyPressInEditor(rowIndex, columnKey, event, allColumns, handleCommit),
             setTableData,
             setLocalCellChanges,
             localCellChanges,
@@ -1719,11 +1719,7 @@ var GenericDataGrid = ({
       }
     };
     fetchDataAndDefinition();
-  }, [
-    tableName,
-    /*fixedFields,*/
-    showError
-  ]);
+  }, [tableName, fixedFields, showError]);
   useEffect(() => {
     if (cellFeedback) {
       if (feedbackTimerRef.current) {
@@ -1881,19 +1877,20 @@ var GenericDataGrid = ({
     }
     return rows;
   }, [tableData, filters, isFilterRowVisible]);
-  const handleKeyPressInEditor = useCallback4((rowIndex, columnKey, event, 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, currentTarget } = event;
-      const input = currentTarget;
+      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);
-        const calcularColumnaSiguienteYHacerFoco = () => {
+        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) {
@@ -1908,9 +1905,9 @@ var GenericDataGrid = ({
           }
           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 calcularColumnaAnteriorYHacerFoco = () => {
+        const calcularColumnaAnterior = () => {
           let nextEditableColumnIndex = currentEditableColumnIndex - 1;
           let nextRowIndex = rowIndex;
           if (nextEditableColumnIndex <= 0) {
@@ -1918,57 +1915,65 @@ var GenericDataGrid = ({
           }
           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 calcularFilaSiguienteYHacerFoco = () => {
+        const calcularFilaSiguiente = () => {
           let nextRowIndex = rowIndex;
           nextRowIndex++;
           while (filteredRows[nextRowIndex] && filteredRows[nextRowIndex][DETAIL_ROW_INDICATOR]) {
             nextRowIndex++;
           }
           if (nextRowIndex >= filteredRows.length) {
-            return;
+            return { rowIdx: rowIndex, idx: currentColumnIndex };
           }
-          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: currentColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+          return { rowIdx: nextRowIndex, idx: currentColumnIndex };
         };
-        const calcularFilaAnteriorYHacerFoco = () => {
+        const calcularFilaAnterior = () => {
           let nextRowIndex = rowIndex;
           nextRowIndex--;
           while (filteredRows[nextRowIndex] && filteredRows[nextRowIndex][DETAIL_ROW_INDICATOR]) {
             nextRowIndex--;
           }
           if (nextRowIndex < 0) {
-            return;
+            return { rowIdx: rowIndex, idx: currentColumnIndex };
           }
-          dataGridRef.current?.selectCell({ rowIdx: nextRowIndex, idx: currentColumnIndex }, { enableEditor: true, shouldFocusCell: true });
+          return { rowIdx: nextRowIndex, idx: currentColumnIndex };
         };
         if (currentEditableColumnIndex !== -1) {
           switch (true) {
             case ["Enter", "Tab"].includes(key): {
-              calcularColumnaSiguienteYHacerFoco();
+              hacerFoco(calcularColumnaSiguiente());
               break;
             }
             case key == "ArrowRight": {
               const cursorPosition = input.selectionStart;
               const inputValueLength = input.value.length;
               if (cursorPosition === inputValueLength) {
-                calcularColumnaSiguienteYHacerFoco();
+                hacerFoco(calcularColumnaSiguiente());
               }
               break;
             }
             case key == "ArrowLeft": {
               const cursorPosition = input.selectionStart;
               if (cursorPosition === 0) {
-                calcularColumnaAnteriorYHacerFoco();
+                hacerFoco(calcularColumnaAnterior());
               }
               break;
             }
             case key == "ArrowUp": {
-              calcularFilaAnteriorYHacerFoco();
+              hacerFoco(calcularFilaAnterior());
               break;
             }
             case key == "ArrowDown": {
-              calcularFilaSiguienteYHacerFoco();
+              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: