react-native-external-keyboard 0.9.1 → 1.0.0

package/src/components/KeyboardExtendedInput/KeyboardExtendedInput.tsx

@@ -1,49 +1,16 @@
-import React, { useEffect, useMemo } from 'react';
-import { View, TextInput, Platform, StyleSheet } from 'react-native';
+import React, { useMemo } from 'react';
+import { TextInput, Platform } from 'react-native';
 
 import { TextInputFocusWrapperNative } from '../../nativeSpec';
 import { useFocusStyle } from '../../utils/useFocusStyle';
 import { focusEventMapper } from '../../utils/focusEventMapper';
-import { RenderPropComponent } from '../RenderPropComponent/RenderPropComponent';
 import { useGroupIdentifierContext } from '../../context/GroupIdentifierContext';
 import { useOrderFocusGroup } from '../../context/OrderFocusContext';
-import type { KeyboardInputProps } from './KeyboardExtendedInput.types';
+import { mapLockFocus } from '../../utils/mapLockFocus';
+import { useOrderValidation } from '../../utils/useOrderValidation';
+import { useWrappedOrderProps } from '../../utils/useWrappedOrderProps';
+import type { KeyboardInputProps } from '../../types';
 import { blurMap, focusMap } from './KeyboardExtendedInput.consts';
-import { wrapOrderPrefix } from '../../utils/wrapOrderPrefix';
-import {
-  LockFocusEnum,
-  type LockFocusType,
-} from '../../types/BaseKeyboardView';
-
-enum BITS {
-  BIT_01 = 0b1,
-  BIT_02 = 0b10,
-  BIT_03 = 0b100,
-  BIT_04 = 0b1000,
-  BIT_05 = 0b10000,
-  BIT_06 = 0b100000,
-  BIT_07 = 0b1000000,
-  BIT_08 = 0b10000000,
-  BIT_09 = 0b100000000,
-  BIT_10 = 0b1000000000,
-}
-
-const focusBinaryValue: Record<LockFocusEnum, number> = {
-  [LockFocusEnum.Up]: BITS.BIT_01,
-  [LockFocusEnum.Down]: BITS.BIT_02,
-  [LockFocusEnum.Left]: BITS.BIT_03,
-  [LockFocusEnum.Right]: BITS.BIT_04,
-  [LockFocusEnum.Forward]: BITS.BIT_05,
-  [LockFocusEnum.Backward]: BITS.BIT_06,
-  [LockFocusEnum.First]: BITS.BIT_09,
-  [LockFocusEnum.Last]: BITS.BIT_10,
-};
-
-const mapLockFocus = (values: LockFocusType[] | undefined): number => {
-  if (!values || !values.length) return 0;
-  // eslint-disable-next-line no-bitwise
-  return values.reduce((acc, item) => acc | focusBinaryValue[item], 0);
-};
 
 const isIOS = Platform.OS === 'ios';
 
@@ -60,12 +27,10 @@ export const KeyboardExtendedInput = React.forwardRef<
       focusStyle,
       style,
       haloEffect = true,
-      canBeFocusable = true,
+      roundedHaloFix = false,
       focusable = true,
       containerFocusStyle,
       tintColor,
-      tintType = 'default',
-      FocusHoverComponent,
       onSubmitEditing,
       submitBehavior,
       groupIdentifier,
@@ -79,88 +44,51 @@ export const KeyboardExtendedInput = React.forwardRef<
       orderRight,
       orderUp,
       orderDown,
+      orderFirst,
+      orderLast,
       rejectResponderTermination,
       selectionHandleColor,
       cursorColor,
       maxFontSizeMultiplier,
-      orderFirst,
-      orderLast,
       defaultFocusHighlightEnabled = true,
+      tintType,
       orderPrefix: _orderPrefix,
       ...props
     },
     ref
   ) => {
     const {
-      focused,
       containerFocusedStyle,
       componentFocusedStyle,
       onFocusChangeHandler,
-      hoverColor,
     } = useFocusStyle({
       onFocusChange,
-      tintColor,
       focusStyle,
       containerFocusStyle,
-      tintType,
     });
 
     const contextIdentifier = useGroupIdentifierContext();
     const contextGroupId = useOrderFocusGroup();
     const groupId = orderGroup ?? contextGroupId;
-
     const orderPrefix = _orderPrefix ?? contextGroupId ?? '';
 
-    const withHaloEffect = Platform.select({
-      ios: tintType === 'default' && haloEffect,
-      android: defaultFocusHighlightEnabled,
+    useOrderValidation({
+      groupId,
+      orderPrefix,
+      orderIndex,
+      orderId,
+      orderForward,
+      orderBackward,
+      orderFirst,
+      orderLast,
+      orderLeft,
+      orderRight,
+      orderUp,
+      orderDown,
     });
 
-    const nativeFocusHandler = useMemo(
-      () => focusEventMapper(onFocusChangeHandler),
-      [onFocusChangeHandler]
-    );
-
-    const HoverComonent = useMemo(() => {
-      if (FocusHoverComponent) return FocusHoverComponent;
-      if (tintType === 'hover')
-        return <View style={[hoverColor, styles.absolute, styles.opacity]} />;
-
-      return undefined;
-    }, [FocusHoverComponent, hoverColor, tintType]);
-
-    const blurOnSubmit = submitBehavior
-      ? submitBehavior === 'blurAndSubmit'
-      : props.blurOnSubmit ?? true;
-
-    useEffect(() => {
-      if (!__DEV__) return;
-      if (orderIndex !== undefined && !groupId)
-        console.warn(
-          '`orderIndex` must be declared alongside `orderGroup` for proper functionality. Ensure components are wrapped with `KeyboardOrderFocusGroup` or provide `orderGroup` directly.'
-        );
-    }, [groupId, orderIndex]);
-
-    useEffect(() => {
-      if (!__DEV__) return;
-      const hasOrderLinkProp =
-        orderId !== undefined ||
-        orderForward !== undefined ||
-        orderBackward !== undefined ||
-        orderFirst !== undefined ||
-        orderLast !== undefined ||
-        orderLeft !== undefined ||
-        orderRight !== undefined ||
-        orderUp !== undefined ||
-        orderDown !== undefined;
-      if (hasOrderLinkProp && orderPrefix === '') {
-        console.warn(
-          '[react-native-external-keyboard] orderId, orderForward, orderBackward, orderFirst, orderLast, ' +
-            'orderLeft, orderRight, orderUp, and orderDown are global IDs. ' +
-            'Wrap the component in <KeyboardOrderFocusGroup> or pass orderPrefix to avoid ID collisions across screens.'
-        );
-      }
-    }, [
+    const wrappedOrderProps = useWrappedOrderProps({
+      orderPrefix,
       orderId,
       orderForward,
       orderBackward,
@@ -170,55 +98,43 @@ export const KeyboardExtendedInput = React.forwardRef<
       orderRight,
       orderUp,
       orderDown,
-      orderPrefix,
-    ]);
+    });
 
-    const wrapPrefix = useMemo(
-      () => wrapOrderPrefix(orderPrefix),
-      [orderPrefix]
+    const hasFocusListener = Boolean(
+      onFocusChange || focusStyle || containerFocusStyle
     );
 
-    const wrappedOrderProps = useMemo(
-      () => ({
-        orderId: wrapPrefix(orderId),
-        orderForward: wrapPrefix(orderForward),
-        orderBackward: wrapPrefix(orderBackward),
-        orderLeft: wrapPrefix(orderLeft),
-        orderRight: wrapPrefix(orderRight),
-        orderUp: wrapPrefix(orderUp),
-        orderDown: wrapPrefix(orderDown),
-        orderFirst: wrapPrefix(
-          orderFirst === null ? undefined : orderFirst ?? orderForward
-        ),
-        orderLast: wrapPrefix(
-          orderLast === null ? undefined : orderLast ?? orderBackward
-        ),
-      }),
-      [
-        wrapPrefix,
-        orderId,
-        orderForward,
-        orderBackward,
-        orderLeft,
-        orderRight,
-        orderUp,
-        orderDown,
-        orderFirst,
-        orderLast,
-      ]
+    const nativeFocusHandler = useMemo(
+      () => focusEventMapper(onFocusChangeHandler),
+      [onFocusChangeHandler]
     );
 
+    const blurOnSubmit = submitBehavior
+      ? submitBehavior === 'blurAndSubmit'
+      : props.blurOnSubmit ?? true;
+
+    const withHaloEffect =
+      tintType !== 'none' &&
+      Platform.select({
+        ios: haloEffect,
+        android: defaultFocusHighlightEnabled,
+      });
+
+    const isContainerFocusable = !isIOS && focusable ? undefined : false;
+
     return (
       <TextInputFocusWrapperNative
-        onFocusChange={nativeFocusHandler as unknown as undefined} //ToDo update type
+        onFocusChange={hasFocusListener ? nativeFocusHandler : undefined}
+        hasOnFocusChanged={hasFocusListener}
         focusType={focusMap[focusType]}
         blurType={blurMap[blurType]}
         style={[containerStyle, containerFocusedStyle]}
         haloEffect={withHaloEffect}
+        roundedHaloFix={withHaloEffect === false && roundedHaloFix}
         multiline={props.multiline}
         blurOnSubmit={blurOnSubmit}
         onMultiplyTextSubmit={onSubmitEditing}
-        canBeFocused={canBeFocusable && focusable}
+        canBeFocused={isContainerFocusable}
         tintColor={isIOS ? tintColor : undefined}
         groupIdentifier={groupIdentifier ?? contextIdentifier}
         lockFocus={mapLockFocus(lockFocus)}
@@ -228,7 +144,7 @@ export const KeyboardExtendedInput = React.forwardRef<
       >
         <TextInput
           ref={ref as React.RefObject<any>}
-          editable={canBeFocusable && focusable}
+          editable={focusable}
           style={[style, componentFocusedStyle]}
           onSubmitEditing={onSubmitEditing}
           submitBehavior={submitBehavior}
@@ -238,23 +154,7 @@ export const KeyboardExtendedInput = React.forwardRef<
           maxFontSizeMultiplier={maxFontSizeMultiplier ?? undefined}
           {...props}
         />
-        {focused && HoverComonent && (
-          <RenderPropComponent render={HoverComonent} />
-        )}
       </TextInputFocusWrapperNative>
     );
   }
 );
-
-const styles = StyleSheet.create({
-  absolute: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  opacity: {
-    opacity: 0.3,
-  },
-});

package/src/components/KeyboardFocusGroup/KeyboardFocusGroup.android.tsx

@@ -1,39 +1,30 @@
-import React, { type PropsWithChildren } from 'react';
-import { type ColorValue, type ViewProps } from 'react-native';
+import React from 'react';
 import { KeyboardFocusGroupNative } from '../../nativeSpec';
 import { useOnFocusChange } from '../../utils/useOnFocusChange';
 import { useFocusStyle } from '../../utils/useFocusStyle';
-import type { FocusStyle } from '../../types';
+import type { KeyboardFocusGroupProps } from './KeyboardFocusGroup.types';
 
-export type KeyboardFocusGroupProps = PropsWithChildren<{
-  groupIdentifier?: string;
-  tintColor?: ColorValue;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  onFocusChange?: (isFocused: boolean) => void;
-  orderGroup?: string;
-  focusStyle?: FocusStyle;
-}>;
+export type { KeyboardFocusGroupProps };
 
-export const KeyboardFocusGroup = React.memo<
-  ViewProps & KeyboardFocusGroupProps
->((props) => {
-  const { containerFocusedStyle: focusStyle, onFocusChangeHandler } =
-    useFocusStyle({
-      onFocusChange: props.onFocusChange,
-      containerFocusStyle: props.focusStyle,
-    });
+export const KeyboardFocusGroup = React.memo<KeyboardFocusGroupProps>(
+  (props) => {
+    const { containerFocusedStyle: focusStyle, onFocusChangeHandler } =
+      useFocusStyle({
+        onFocusChange: props.onFocusChange,
+        containerFocusStyle: props.focusStyle,
+      });
 
-  const onGroupFocusChangeHandler = useOnFocusChange({
-    ...props,
-    onFocusChange: onFocusChangeHandler,
-  });
+    const onGroupFocusChangeHandler = useOnFocusChange({
+      ...props,
+      onFocusChange: onFocusChangeHandler,
+    });
 
-  return (
-    <KeyboardFocusGroupNative
-      {...props}
-      style={[props.style, focusStyle]}
-      onGroupFocusChange={onGroupFocusChangeHandler}
-    />
-  );
-});
+    return (
+      <KeyboardFocusGroupNative
+        {...props}
+        style={[props.style, focusStyle]}
+        onGroupFocusChange={onGroupFocusChangeHandler}
+      />
+    );
+  }
+);

package/src/components/KeyboardFocusGroup/KeyboardFocusGroup.ios.tsx

@@ -1,53 +1,44 @@
-import React, { type PropsWithChildren } from 'react';
-import { type ColorValue, type ViewProps } from 'react-native';
+import React from 'react';
 import { KeyboardFocusGroupNative } from '../../nativeSpec';
 import { GroupIdentifierContext } from '../../context/GroupIdentifierContext';
 import { useOnFocusChange } from '../../utils/useOnFocusChange';
 import { useFocusStyle } from '../../utils/useFocusStyle';
-import type { FocusStyle } from '../../types';
+import type { KeyboardFocusGroupProps } from './KeyboardFocusGroup.types';
 
-export type KeyboardFocusGroupProps = PropsWithChildren<{
-  groupIdentifier?: string;
-  tintColor?: ColorValue;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  onFocusChange?: (isFocused: boolean) => void;
-  focusStyle?: FocusStyle;
-  orderGroup?: string;
-}>;
+export type { KeyboardFocusGroupProps };
 
-export const KeyboardFocusGroup = React.memo<
-  ViewProps & KeyboardFocusGroupProps
->((props) => {
-  const { groupIdentifier } = props;
+export const KeyboardFocusGroup = React.memo<KeyboardFocusGroupProps>(
+  (props) => {
+    const { groupIdentifier } = props;
 
-  const { containerFocusedStyle: focusStyle, onFocusChangeHandler } =
-    useFocusStyle({
-      onFocusChange: props.onFocusChange,
-      containerFocusStyle: props.focusStyle,
+    const { containerFocusedStyle: focusStyle, onFocusChangeHandler } =
+      useFocusStyle({
+        onFocusChange: props.onFocusChange,
+        containerFocusStyle: props.focusStyle,
+      });
+
+    const onGroupFocusChangeHandler = useOnFocusChange({
+      ...props,
+      onFocusChange: onFocusChangeHandler,
     });
 
-  const onGroupFocusChangeHandler = useOnFocusChange({
-    ...props,
-    onFocusChange: onFocusChangeHandler,
-  });
+    if (!groupIdentifier)
+      return (
+        <KeyboardFocusGroupNative
+          {...props}
+          style={[props.style, focusStyle]}
+          onGroupFocusChange={onGroupFocusChangeHandler}
+        />
+      );
 
-  if (!groupIdentifier)
     return (
-      <KeyboardFocusGroupNative
-        {...props}
-        style={[props.style, focusStyle]}
-        onGroupFocusChange={onGroupFocusChangeHandler}
-      />
+      <GroupIdentifierContext.Provider value={groupIdentifier}>
+        <KeyboardFocusGroupNative
+          {...props}
+          style={[props.style, focusStyle]}
+          onGroupFocusChange={onGroupFocusChangeHandler}
+        />
+      </GroupIdentifierContext.Provider>
     );
-
-  return (
-    <GroupIdentifierContext.Provider value={groupIdentifier}>
-      <KeyboardFocusGroupNative
-        {...props}
-        style={[props.style, focusStyle]}
-        onGroupFocusChange={onGroupFocusChangeHandler}
-      />
-    </GroupIdentifierContext.Provider>
-  );
-});
+  }
+);

package/src/components/KeyboardFocusGroup/KeyboardFocusGroup.tsx

@@ -1,18 +1,7 @@
-import { type PropsWithChildren } from 'react';
-import { type ColorValue, View, type ViewProps } from 'react-native';
-import type { FocusStyle } from '../../types';
+import { View } from 'react-native';
+import type { KeyboardFocusGroupProps } from './KeyboardFocusGroup.types';
 
-export type KeyboardFocusGroupProps = PropsWithChildren<
-  ViewProps & {
-    groupIdentifier?: string;
-    tintColor?: ColorValue;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    onFocusChange?: (isFocused: boolean) => void;
-    focusStyle?: FocusStyle;
-    orderGroup?: string;
-  }
->;
+export type { KeyboardFocusGroupProps };
 
 export const KeyboardFocusGroup =
   View as unknown as React.FC<KeyboardFocusGroupProps>;

package/src/components/KeyboardFocusGroup/KeyboardFocusGroup.types.ts

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import type { ColorValue, ViewProps } from 'react-native';
+import type { FocusStyle } from '../../types';
+
+export type KeyboardFocusGroupProps = PropsWithChildren<
+  ViewProps & {
+    groupIdentifier?: string;
+    tintColor?: ColorValue;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onFocusChange?: (isFocused: boolean) => void;
+    focusStyle?: FocusStyle;
+    orderGroup?: string;
+  }
+>;

package/src/components/KeyboardFocusLock/FocusFrame/FocusFrame.android.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FrameProvider } from '../../../context/FocusFrameProviderContext';
 import { KeyboardFocusLockBase } from '../KeyboardFocusLockBase/KeyboardFocusLockBase';
-import type { KeyboardFocusLockProps } from '../../../types/KeyboardFocusLock.types';
+import { LockComponentType, type KeyboardFocusLockProps } from '../../../types';
 
 export const FocusFrame = React.memo<KeyboardFocusLockProps>(
   ({ lockDisabled = false, ...props }) => {
@@ -9,7 +9,7 @@ export const FocusFrame = React.memo<KeyboardFocusLockProps>(
       <FrameProvider>
         <KeyboardFocusLockBase
           {...props}
-          componentType={1}
+          componentType={LockComponentType.Frame}
           lockDisabled={lockDisabled}
         />
       </FrameProvider>

package/src/components/KeyboardFocusLock/FocusTrap/FocusTrap.android.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 
 import { FocusTrapMountWrapper } from './FocusTrapMountWrapper';
 import { KeyboardFocusLockBase } from '../KeyboardFocusLockBase/KeyboardFocusLockBase';
-import type { KeyboardFocusLockProps } from '../../../types/KeyboardFocusLock.types';
+import { LockComponentType, type KeyboardFocusLockProps } from '../../../types';
 
 export const FocusTrap = React.memo<KeyboardFocusLockProps>(
   ({ lockDisabled = false, ...props }) => (
     <FocusTrapMountWrapper>
       <KeyboardFocusLockBase
         {...props}
-        componentType={0}
+        componentType={LockComponentType.Trap}
         lockDisabled={lockDisabled}
       />
     </FocusTrapMountWrapper>

package/src/components/KeyboardFocusLock/FocusTrap/FocusTrap.tsx

@@ -1,6 +1,6 @@
 import { View } from 'react-native';
 import { FocusTrapMountWrapper } from './FocusTrapMountWrapper';
-import type { KeyboardFocusLockProps } from '../../../types/KeyboardFocusLock.types';
+import type { KeyboardFocusLockProps } from '../../../types';
 import { KeyboardFocusLockBase } from '../KeyboardFocusLockBase/KeyboardFocusLockBase';
 
 export const FocusTrap = ({

package/src/components/KeyboardFocusLock/KeyboardFocusLockBase/KeyboardFocusLockBase.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import ExternalKeyboardLockView from '../../../nativeSpec/ExternalKeyboardLockViewNativeComponent';
 
-import type { KeyboardFocusLockProps } from '../../../types/KeyboardFocusLock.types';
+import { LockComponentType, type KeyboardFocusLockProps } from '../../../types';
 
 export const KeyboardFocusLockBase = React.memo<KeyboardFocusLockProps>(
   ({
     lockDisabled = false,
-    componentType = 0,
+    componentType = LockComponentType.Trap,
     forceLock = false,
     ...props
   }) => {