fix: Remove FocusGroup in ScrollView

Author: WillsonHaw

.changeset/lemon-dots-build.md

@@ -0,0 +1,5 @@
+---
+"@plextv/react-native-lightning": patch
+---
+
+fix: Remove FocusGroup in ScrollView

packages/react-native-lightning/src/exports/ScrollView.tsx

@@ -2,24 +2,21 @@ import {
   type LightningElement,
   LightningViewElement,
   type LightningViewElementProps,
-  simpleDiff,
 } from '@plextv/react-lightning';
-import { Component, createRef } from 'react';
+import { createRef, PureComponent } from 'react';
 import type { JSX } from 'react/jsx-runtime';
 import type {
   NativeScrollEvent,
   ScrollView as RNScrollView,
   ScrollViewProps as RNScrollViewProps,
 } from 'react-native';
-import { View } from 'react-native';
 import type { LightningViewElementStyle } from '../../../react-lightning/src/types';
+import { createHandler } from '../hooks/useFocusHandler';
 import { createNativeSyntheticEvent } from '../utils/createNativeSyntheticEvent';
-import { FocusGroup } from './FocusGroup';
-import { defaultViewStyle } from './View';
+import { defaultViewStyle, View } from './View';
 
 type ScrollViewProps = RNScrollViewProps & {
   animated?: boolean;
-  onChildFocused?: (el: LightningElement) => void;
 };
 
 type ScrollViewState = {
@@ -108,7 +105,10 @@ function getScrollInfo(
   };
 }
 
-export class ScrollView extends Component<ScrollViewProps, ScrollViewState> {
+export class ScrollView extends PureComponent<
+  ScrollViewProps,
+  ScrollViewState
+> {
   private _containerRef = createRef<LightningViewElement>();
   private _viewportRef = createRef<LightningViewElement>();
 
@@ -189,24 +189,9 @@ export class ScrollView extends Component<ScrollViewProps, ScrollViewState> {
     return this._containerRef.current;
   }
 
-  public shouldComponentUpdate(
-    nextProps: ScrollViewProps,
-    nextState: ScrollViewState,
-  ): boolean {
-    return (
-      !!simpleDiff(this.props, nextProps) || !!simpleDiff(this.state, nextState)
-    );
-  }
-
   public render(): JSX.Element {
-    const {
-      children,
-      style,
-      contentContainerStyle,
-      horizontal,
-      onChildFocused,
-      ...props
-    } = this.props;
+    const { children, style, contentContainerStyle, horizontal, ...props } =
+      this.props;
     const flexDirection = horizontal ? 'row' : 'column';
 
     return (
@@ -218,8 +203,10 @@ export class ScrollView extends Component<ScrollViewProps, ScrollViewState> {
           { overflow: 'hidden', flexDirection, flexGrow: 1, flexShrink: 1 },
         ]}
         {...props}
+        onFocus={createHandler(this.props.onFocus)}
+        onBlur={createHandler(this.props.onBlur)}
       >
-        <FocusGroup
+        <View
           ref={this._containerRef}
           transition={
             this.state.animated
@@ -229,7 +216,6 @@ export class ScrollView extends Component<ScrollViewProps, ScrollViewState> {
                 }
               : undefined
           }
-          onChildFocused={onChildFocused}
           style={[
             defaultViewStyle,
             { display: 'flex', flexDirection },
@@ -238,7 +224,7 @@ export class ScrollView extends Component<ScrollViewProps, ScrollViewState> {
           ]}
         >
           {children}
-        </FocusGroup>
+        </View>
       </View>
     );
   }
@@ -264,9 +250,7 @@ export class ScrollView extends Component<ScrollViewProps, ScrollViewState> {
   };
 
   private _setViewRef = (ref: View | null) => {
-    this._viewportRef.current = ref
-      ? (ref as unknown as LightningViewElement)
-      : null;
+    this._viewportRef.current = ref ?? null;
   };
 
   private _doScroll(newOffset: NativeScrollEvent) {

packages/react-native-lightning/src/hooks/useFocusHandler.ts

@@ -19,35 +19,45 @@ export type FocusHandler<T extends 'focus' | 'blur', TEvent> = (
     | LightningElement,
 ) => void | Promise<void>;
 
+function handleEvent<T extends 'focus' | 'blur'>(
+  element: Parameters<FocusHandler<T, TargetedEvent>>[0],
+  onEvent: ViewProps[`on${Capitalize<T>}`] | undefined,
+): void {
+  if (element instanceof LightningViewElement) {
+    onEvent?.(
+      createNativeSyntheticEvent<TargetedEvent>(
+        { target: element.id },
+        element,
+      ),
+    );
+  }
+}
+
 function useHandler<T extends 'focus' | 'blur'>(
-  _eventType: T,
   onEvent?: ViewProps[`on${Capitalize<T>}`],
 ): FocusHandler<T, TargetedEvent> | undefined {
   const handler = useCallback<FocusHandler<T, TargetedEvent>>(
-    (element) => {
-      if (element instanceof LightningViewElement) {
-        onEvent?.(
-          createNativeSyntheticEvent<TargetedEvent>(
-            { target: element.id },
-            element,
-          ),
-        );
-      }
-    },
+    (element) => handleEvent(element, onEvent),
     [onEvent],
   );
 
   return onEvent ? handler : undefined;
 }
 
+export function createHandler<T extends 'focus' | 'blur'>(
+  onEvent?: ViewProps[`on${Capitalize<T>}`],
+): FocusHandler<T, TargetedEvent> | undefined {
+  return (element) => handleEvent(element, onEvent);
+}
+
 export function useFocusHandler(
   onFocus?: ViewProps['onFocus'],
 ): FocusHandler<'focus', TargetedEvent> | undefined {
-  return useHandler('focus', onFocus);
+  return useHandler(onFocus);
 }
 
 export function useBlurHandler(
   onBlur?: ViewProps['onBlur'],
 ): FocusHandler<'blur', TargetedEvent> | undefined {
-  return useHandler('blur', onBlur);
+  return useHandler(onBlur);
 }