Merge pull request #156 from bamlab/feat/on-long-press

remilry · web-flow · commit 5c4913e98dc0 · 2024-09-18T12:16:44.000+02:00
Feat: Add onLongSelect
diff --git a/docs/api.md b/docs/api.md
@@ -51,6 +51,7 @@ The `SpatialNavigationNode` component receives the following props:
 | `onFocus`          | `function`                                                                                                                              | `undefined`  | Callback function to be called when the node gains focus.                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `onBlur`           | `function`                                                                                                                              | `undefined`  | Callback function to be called when the node loses focus.                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `onSelect`         | `function`                                                                                                                              | `undefined`  | Callback function to be called when the node is selected.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `onLongSelect`         | `function`                                                                                                                              | `onSelect`  | Callback function to be called when the node is selected with long key press.                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `onActive`         | `function`                                                                                                                              | `undefined`  | Callback function to be called when the node is made active by either itself or one of its descendants gaining focus.                                                                                                                                                                                                                                                                                                                                                 |
 | `onInactive`       | `function`                                                                                                                              | `undefined`  | Callback function to be called when the node was active and due to an updated focus, is no longer active.                                                                                                                                                                                                                                                                                                                                                             |
 | `orientation`      | `'vertical' \| 'horizontal`                                                                                                             | `'vertical'` | Determines the orientation of the node.                                                                                                                                                                                                                                                                                                                                                                                                                               |
diff --git a/packages/example/App.tsx b/packages/example/App.tsx
@@ -1,3 +1,4 @@
+import './src/components/configureRemoteControl';
 import { ThemeProvider } from '@emotion/react';
 import { NavigationContainer } from '@react-navigation/native';
 import { useWindowDimensions } from 'react-native';
diff --git a/packages/example/babel.jest.config.js b/packages/example/babel.jest.config.js
@@ -22,5 +22,6 @@ module.exports = {
       },
     ],
     ['@babel/plugin-proposal-class-properties', { loose: false }],
+    'react-native-reanimated/plugin',
   ],
 };
diff --git a/packages/example/package.json b/packages/example/package.json
@@ -30,6 +30,7 @@
     "react": "18.2.0",
     "react-native": "npm:react-native-tvos@0.74.1-0",
     "react-native-keyevent": "^0.3.2",
+    "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
diff --git a/packages/example/src/components/configureRemoteControl.ts b/packages/example/src/components/configureRemoteControl.ts
@@ -10,6 +10,7 @@ SpatialNavigation.configureRemoteControl({
       [SupportedKeys.Up]: Directions.UP,
       [SupportedKeys.Down]: Directions.DOWN,
       [SupportedKeys.Enter]: Directions.ENTER,
+      [SupportedKeys.LongEnter]: Directions.LONG_ENTER,
       [SupportedKeys.Back]: null,
     };
 
diff --git a/packages/example/src/components/remote-control/RemoteControlManager.android.ts b/packages/example/src/components/remote-control/RemoteControlManager.android.ts
@@ -3,13 +3,26 @@ import KeyEvent from 'react-native-keyevent';
 import { RemoteControlManagerInterface } from './RemoteControlManager.interface';
 import CustomEventEmitter from './CustomEventEmitter';
 
+const LONG_PRESS_DURATION = 500;
+
 class RemoteControlManager implements RemoteControlManagerInterface {
   constructor() {
     KeyEvent.onKeyDownListener(this.handleKeyDown);
+    KeyEvent.onKeyUpListener(this.handleKeyUp);
   }
 
   private eventEmitter = new CustomEventEmitter<{ keyDown: SupportedKeys }>();
 
+  private isEnterKeyDownPressed = false;
+  private longEnterTimeout: NodeJS.Timeout | null = null;
+
+  private handleLongEnter = () => {
+    this.longEnterTimeout = setTimeout(() => {
+      this.eventEmitter.emit('keyDown', SupportedKeys.LongEnter);
+      this.longEnterTimeout = null;
+    }, LONG_PRESS_DURATION);
+  };
+
   private handleKeyDown = (keyEvent: { keyCode: number }) => {
     const mappedKey = {
       21: SupportedKeys.Left,
@@ -26,9 +39,36 @@ class RemoteControlManager implements RemoteControlManagerInterface {
       return;
     }
 
+    if (mappedKey === SupportedKeys.Enter) {
+      if (!this.isEnterKeyDownPressed) {
+        this.isEnterKeyDownPressed = true;
+        this.handleLongEnter();
+      }
+      return;
+    }
+
     this.eventEmitter.emit('keyDown', mappedKey);
   };
 
+  private handleKeyUp = (keyEvent: { keyCode: number }) => {
+    const mappedKey = {
+      66: SupportedKeys.Enter,
+      23: SupportedKeys.Enter,
+    }[keyEvent.keyCode];
+
+    if (!mappedKey) {
+      return;
+    }
+
+    if (mappedKey === SupportedKeys.Enter) {
+      this.isEnterKeyDownPressed = false;
+      if (this.longEnterTimeout) {
+        clearTimeout(this.longEnterTimeout);
+        this.eventEmitter.emit('keyDown', mappedKey);
+      }
+    }
+  };
+
   addKeydownListener = (listener: (event: SupportedKeys) => boolean) => {
     this.eventEmitter.on('keyDown', listener);
     return listener;
diff --git a/packages/example/src/components/remote-control/RemoteControlManager.ios.ts b/packages/example/src/components/remote-control/RemoteControlManager.ios.ts
@@ -19,12 +19,18 @@ class RemoteControlManager implements RemoteControlManagerInterface {
       up: SupportedKeys.Up,
       down: SupportedKeys.Down,
       select: SupportedKeys.Enter,
+      longSelect: SupportedKeys.LongEnter,
     }[evt.eventType];
 
     if (!mappedKey) {
       return;
     }
 
+    // We only want to handle keydown for long select to avoid triggering the event twice
+    if (mappedKey === SupportedKeys.LongEnter && evt.eventKeyAction === 1) {
+      return;
+    }
+
     this.eventEmitter.emit('keyDown', mappedKey);
   };
 
diff --git a/packages/example/src/components/remote-control/RemoteControlManager.ts b/packages/example/src/components/remote-control/RemoteControlManager.ts
@@ -2,13 +2,26 @@ import { SupportedKeys } from './SupportedKeys';
 import { RemoteControlManagerInterface } from './RemoteControlManager.interface';
 import CustomEventEmitter from './CustomEventEmitter';
 
+const LONG_PRESS_DURATION = 500;
+
 class RemoteControlManager implements RemoteControlManagerInterface {
   constructor() {
     window.addEventListener('keydown', this.handleKeyDown);
+    window.addEventListener('keyup', this.handleKeyUp);
   }
 
   private eventEmitter = new CustomEventEmitter<{ keyDown: SupportedKeys }>();
 
+  private isEnterKeyDown = false;
+  private longEnterTimeout: NodeJS.Timeout | null = null;
+
+  private handleLongEnter = () => {
+    this.longEnterTimeout = setTimeout(() => {
+      this.eventEmitter.emit('keyDown', SupportedKeys.LongEnter);
+      this.longEnterTimeout = null;
+    }, LONG_PRESS_DURATION);
+  };
+
   private handleKeyDown = (event: KeyboardEvent) => {
     const mappedKey = {
       ArrowRight: SupportedKeys.Right,
@@ -23,9 +36,35 @@ class RemoteControlManager implements RemoteControlManagerInterface {
       return;
     }
 
+    if (mappedKey === SupportedKeys.Enter) {
+      if (!this.isEnterKeyDown) {
+        this.isEnterKeyDown = true;
+        this.handleLongEnter();
+      }
+      return;
+    }
+
     this.eventEmitter.emit('keyDown', mappedKey);
   };
 
+  private handleKeyUp = (event: KeyboardEvent) => {
+    const mappedKey = {
+      Enter: SupportedKeys.Enter,
+    }[event.code];
+
+    if (!mappedKey) {
+      return;
+    }
+
+    if (mappedKey === SupportedKeys.Enter) {
+      this.isEnterKeyDown = false;
+      if (this.longEnterTimeout) {
+        clearTimeout(this.longEnterTimeout);
+        this.eventEmitter.emit('keyDown', mappedKey);
+      }
+    }
+  };
+
   addKeydownListener = (listener: (event: SupportedKeys) => boolean) => {
     this.eventEmitter.on('keyDown', listener);
     return listener;
diff --git a/packages/example/src/components/remote-control/SupportedKeys.ts b/packages/example/src/components/remote-control/SupportedKeys.ts
@@ -4,5 +4,6 @@ export enum SupportedKeys {
   Left = 'Left',
   Right = 'Right',
   Enter = 'Enter',
+  LongEnter = 'LongEnter',
   Back = 'Back',
 }
diff --git a/packages/example/src/modules/program/view/ProgramNode.tsx b/packages/example/src/modules/program/view/ProgramNode.tsx
@@ -5,6 +5,8 @@ import { Program } from './Program';
 import { forwardRef } from 'react';
 import { SpatialNavigationNodeRef } from '../../../../../lib/src/spatial-navigation/types/SpatialNavigationNodeRef';
 
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
 type Props = {
   programInfo: ProgramInfo;
   onSelect?: () => void;
@@ -15,20 +17,35 @@ type Props = {
 
 export const ProgramNode = forwardRef<SpatialNavigationNodeRef, Props>(
   ({ programInfo, onSelect, indexRange, label, variant }: Props, ref) => {
+    const rotationZ = useSharedValue(0);
+
+    const rotate360 = () => {
+      rotationZ.value = withTiming(rotationZ.value + 360);
+    };
+
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        transform: [{ rotateZ: `${rotationZ.value}deg` }],
+      };
+    });
+
     return (
       <SpatialNavigationFocusableView
         onSelect={onSelect}
+        onLongSelect={rotate360}
         indexRange={indexRange}
         viewProps={{ accessibilityLabel: programInfo.title }}
         ref={ref}
       >
         {({ isFocused, isRootActive }) => (
-          <Program
-            isFocused={isFocused && isRootActive}
-            programInfo={programInfo}
-            label={label}
-            variant={variant}
-          />
+          <Animated.View style={animatedStyle}>
+            <Program
+              isFocused={isFocused && isRootActive}
+              programInfo={programInfo}
+              label={label}
+              variant={variant}
+            />
+          </Animated.View>
         )}
       </SpatialNavigationFocusableView>
     );
diff --git a/packages/example/src/pages/GridWithLongNodesPage.tsx b/packages/example/src/pages/GridWithLongNodesPage.tsx
@@ -6,7 +6,6 @@ import {
   SpatialNavigationVirtualizedListRef,
 } from 'react-tv-space-navigation';
 import { Page } from '../components/Page';
-import '../components/configureRemoteControl';
 import { programInfos } from '../modules/program/infra/programInfos';
 import styled from '@emotion/native';
 import { scaledPixels } from '../design-system/helpers/scaledPixels';
diff --git a/packages/example/src/pages/Home.tsx b/packages/example/src/pages/Home.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/native';
 import { DefaultFocus, SpatialNavigationScrollView } from 'react-tv-space-navigation';
 import { Page } from '../components/Page';
-import '../components/configureRemoteControl';
 import { Box } from '../design-system/components/Box';
 import { Spacer } from '../design-system/components/Spacer';
 import { Typography } from '../design-system/components/Typography';
diff --git a/packages/example/src/pages/ProgramGridPage.tsx b/packages/example/src/pages/ProgramGridPage.tsx
@@ -2,7 +2,6 @@ import { StyleSheet, View } from 'react-native';
 import { DefaultFocus } from 'react-tv-space-navigation';
 import { Page } from '../components/Page';
 import { VirtualizedSpatialGrid } from '../components/VirtualizedSpatialGrid';
-import '../components/configureRemoteControl';
 import { scaledPixels } from '../design-system/helpers/scaledPixels';
 
 export const ProgramGridPage = () => {
diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -29,7 +29,7 @@
     "build": "webpack --config webpack.config.js"
   },
   "dependencies": {
-    "@bam.tech/lrud": "^8.0.1",
+    "@bam.tech/lrud": "^8.0.2",
     "lodash.uniqueid": "^4.0.1"
   }
 }
diff --git a/packages/lib/src/spatial-navigation/components/Node.tsx b/packages/lib/src/spatial-navigation/components/Node.tsx
@@ -40,6 +40,7 @@ type DefaultProps = {
   onFocus?: () => void;
   onBlur?: () => void;
   onSelect?: () => void;
+  onLongSelect?: () => void;
   onActive?: () => void;
   onInactive?: () => void;
   orientation?: NodeOrientation;
@@ -101,6 +102,7 @@ export const SpatialNavigationNode = forwardRef<SpatialNavigationNodeRef, Props>
       onFocus,
       onBlur,
       onSelect,
+      onLongSelect = onSelect,
       onActive,
       onInactive,
       orientation = 'vertical',
@@ -144,6 +146,9 @@ export const SpatialNavigationNode = forwardRef<SpatialNavigationNodeRef, Props>
     const currentOnSelect = useRef<() => void>();
     currentOnSelect.current = onSelect;
 
+    const currentOnLongSelect = useRef<() => void>();
+    currentOnLongSelect.current = onLongSelect;
+
     const currentOnFocus = useRef<() => void>();
     currentOnFocus.current = () => {
       onFocus?.();
@@ -174,6 +179,7 @@ export const SpatialNavigationNode = forwardRef<SpatialNavigationNodeRef, Props>
           setIsFocused(true);
         },
         onSelect: () => currentOnSelect.current?.(),
+        onLongSelect: () => currentOnLongSelect.current?.(),
         orientation,
         isIndexAlign: alignInGrid,
         indexRange,
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import './src/components/configureRemoteControl';`
`1`	`2`	`import { ThemeProvider } from '@emotion/react';`
`2`	`3`	`import { NavigationContainer } from '@react-navigation/native';`
`3`	`4`	`import { useWindowDimensions } from 'react-native';`
Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,6 @@ export enum SupportedKeys {`
`4`	`4`	`Left = 'Left',`
`5`	`5`	`Right = 'Right',`
`6`	`6`	`Enter = 'Enter',`
	`7`	`+ LongEnter = 'LongEnter',`
`7`	`8`	`Back = 'Back',`
`8`	`9`	`}`