react-native-external-keyboard/lib/module/utils/withKeyboardFocus.js

Toolkit for improving physical keyboard support in React Native

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useCallback, useMemo } from 'react';
import { View, StyleSheet } from 'react-native';
import { BaseKeyboardView } from '../components';
import { useFocusStyle } from './useFocusStyle';
import { RenderPropComponent } from '../components/RenderPropComponent/RenderPropComponent';
import { useKeyboardPress } from './useKeyboardPress/useKeyboardPress';
import { IsViewFocusedContext } from '../context/IsViewFocusedContext';
export const withKeyboardFocus = Component => {
  const WithKeyboardFocus = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(({
    tintType = 'default',
    autoFocus,
    focusStyle,
    style,
    containerStyle,
    onFocusChange,
    onPress,
    onLongPress,
    onKeyUpPress,
    onKeyDownPress,
    onPressIn,
    onPressOut,
    group = false,
    haloEffect = true,
    canBeFocused = true,
    focusable = true,
    tintColor,
    onFocus,
    onBlur,
    containerFocusStyle,
    FocusHoverComponent,
    viewRef,
    componentRef,
    haloCornerRadius,
    haloExpendX,
    haloExpendY,
    groupIdentifier,
    withPressedStyle = false,
    triggerCodes,
    exposeMethods,
    enableA11yFocus,
    screenAutoA11yFocus,
    screenAutoA11yFocusDelay = 300,
    // ToDo align with BaseKeyboardView
    orderIndex,
    orderGroup,
    orderId,
    orderLeft,
    orderRight,
    orderUp,
    orderDown,
    orderForward,
    orderBackward,
    orderFirst,
    orderLast,
    lockFocus,
    ...props
  }, ref) => {
    const {
      focused,
      containerFocusedStyle,
      componentStyleViewStyle,
      onFocusChangeHandler,
      hoverColor
    } = useFocusStyle({
      onFocusChange,
      tintColor,
      focusStyle,
      containerFocusStyle,
      tintType,
      style,
      withPressedStyle,
      Component
    });
    const withHaloEffect = tintType === 'default' && haloEffect;
    const {
      onKeyUpPressHandler,
      onKeyDownPressHandler,
      onPressHandler
    } = useKeyboardPress({
      onKeyUpPress,
      onKeyDownPress,
      onPress: onPress,
      onLongPress: onLongPress,
      onPressIn: onPressIn,
      onPressOut: onPressOut,
      triggerCodes
    });
    const HoverComponent = useMemo(() => {
      if (FocusHoverComponent) return FocusHoverComponent;
      if (tintType === 'hover') {
        return /*#__PURE__*/React.createElement(View, {
          style: [hoverColor, styles.absolute, styles.opacity]
        });
      }
      return undefined;
    }, [FocusHoverComponent, hoverColor, tintType]);
    const onContextMenuHandler = useCallback(() => {
      onLongPress === null || onLongPress === void 0 || onLongPress();
    }, [onLongPress]);
    return /*#__PURE__*/React.createElement(IsViewFocusedContext.Provider, {
      value: focused
    }, /*#__PURE__*/React.createElement(BaseKeyboardView, {
      style: [containerStyle, containerFocusedStyle],
      ref: ref,
      viewRef: viewRef,
      onKeyUpPress: onKeyUpPressHandler,
      onKeyDownPress: onKeyDownPressHandler,
      onFocus: onFocus,
      onBlur: onBlur,
      onFocusChange: onFocusChangeHandler,
      onContextMenuPress: onContextMenuHandler,
      haloEffect: withHaloEffect,
      haloCornerRadius: haloCornerRadius,
      haloExpendX: haloExpendX,
      haloExpendY: haloExpendY,
      autoFocus: autoFocus,
      canBeFocused: canBeFocused,
      focusable: focusable,
      tintColor: tintColor,
      group: group,
      groupIdentifier: groupIdentifier,
      exposeMethods: exposeMethods,
      enableA11yFocus: enableA11yFocus,
      screenAutoA11yFocus: screenAutoA11yFocus,
      screenAutoA11yFocusDelay: screenAutoA11yFocusDelay,
      orderIndex: orderIndex,
      orderGroup: orderGroup,
      lockFocus: lockFocus,
      orderId: orderId,
      orderLeft: orderLeft,
      orderRight: orderRight,
      orderUp: orderUp,
      orderDown: orderDown,
      orderForward: orderForward,
      orderBackward: orderBackward,
      orderFirst: orderFirst,
      orderLast: orderLast
    }, /*#__PURE__*/React.createElement(Component, _extends({
      ref: componentRef,
      style: componentStyleViewStyle,
      onPress: onPressHandler,
      onLongPress: onLongPress,
      onPressIn: onPressIn,
      onPressOut: onPressOut
    }, props)), focused && HoverComponent && /*#__PURE__*/React.createElement(RenderPropComponent, {
      render: HoverComponent
    })));
  }));
  const wrappedComponentName = Component.displayName || Component.name || 'Component';
  WithKeyboardFocus.displayName = `withKeyboardFocus(${wrappedComponentName})`;
  return WithKeyboardFocus;
};
const styles = StyleSheet.create({
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  opacity: {
    opacity: 0.3
  }
});
//# sourceMappingURL=withKeyboardFocus.js.map