Add tab hotkey on table page (#457)

* wip * wip * - Added scopes on useHotkeys - Use new EditableCellV2 - Implemented Recoil Scoped State with specific context - Implemented soft focus position - Factorized open/close editable cell - Removed editable relation old components - Broke down entity table into multiple components - Added Recoil Scope by CellContext - Added Recoil Scope by RowContext * First working version * Use a new EditableCellSoftFocusMode * Fixed initialize soft focus * Fixed enter mode * Added TODO * Fix * Fixes * Fix tests * Fix lint * Fixes --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2023-06-28 14:06:44 +02:00
parent a6b2fd75ba
commit aa612b5fc9
58 changed files with 958 additions and 332 deletions
--- a/front/src/modules/ui/tables/hooks/useMapKeyboardToSoftFocus.ts
+++ b/front/src/modules/ui/tables/hooks/useMapKeyboardToSoftFocus.ts
@ -0,0 +1,72 @@
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useRecoilState } from 'recoil';
+
+import { isSomeInputInEditModeState } from '../states/isSomeInputInEditModeState';
+
+import { useMoveSoftFocus } from './useMoveSoftFocus';
+
+export function useMapKeyboardToSoftFocus() {
+  const { moveDown, moveLeft, moveRight, moveUp } = useMoveSoftFocus();
+
+  const [isSomeInputInEditMode] = useRecoilState(isSomeInputInEditModeState);
+
+  useHotkeys(
+    'up, shift+enter',
+    () => {
+      if (!isSomeInputInEditMode) {
+        moveUp();
+      }
+    },
+    [moveUp, isSomeInputInEditMode],
+    {
+      preventDefault: true,
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+  );
+
+  useHotkeys(
+    'down',
+    () => {
+      if (!isSomeInputInEditMode) {
+        moveDown();
+      }
+    },
+    [moveDown, isSomeInputInEditMode],
+    {
+      preventDefault: true,
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+  );
+
+  useHotkeys(
+    ['left', 'shift+tab'],
+    () => {
+      if (!isSomeInputInEditMode) {
+        moveLeft();
+      }
+    },
+    [moveLeft, isSomeInputInEditMode],
+    {
+      preventDefault: true,
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+  );
+
+  useHotkeys(
+    ['right', 'tab'],
+    () => {
+      if (!isSomeInputInEditMode) {
+        moveRight();
+      }
+    },
+    [moveRight, isSomeInputInEditMode],
+    {
+      preventDefault: true,
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+  );
+}