react-native-external-keyboard/lib/module/components/KeyboardFocusView/KeyboardFocusView.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, { useMemo } from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { BaseKeyboardView } from '../BaseKeyboardView/BaseKeyboardView';
import { RenderPropComponent } from '../RenderPropComponent/RenderPropComponent';
import { useFocusStyle } from '../../utils/useFocusStyle';
import { useKeyboardPress } from '../../utils/useKeyboardPress/useKeyboardPress';
import { IsViewFocusedContext } from '../../context/IsViewFocusedContext';
export const KeyboardFocusView = /*#__PURE__*/React.forwardRef(({
  tintType = 'default',
  autoFocus,
  focusStyle,
  style,
  onFocusChange,
  onPress,
  onLongPress,
  onKeyUpPress,
  onKeyDownPress,
  group = false,
  haloEffect = true,
  canBeFocused = true,
  focusable = true,
  withView = true,
  //ToDo RNCEKV-9 update and rename Discussion #63
  tintColor,
  onFocus,
  onBlur,
  FocusHoverComponent,
  children,
  accessible,
  triggerCodes,
  ...props
}, ref) => {
  const {
    focused,
    containerFocusedStyle,
    onFocusChangeHandler,
    hoverColor
  } = useFocusStyle({
    onFocusChange,
    tintColor,
    containerFocusStyle: focusStyle,
    tintType
  });
  const withHaloEffect = tintType === 'default' && haloEffect;
  const {
    onKeyUpPressHandler,
    onKeyDownPressHandler
  } = useKeyboardPress({
    onKeyUpPress,
    onKeyDownPress,
    onPress,
    onLongPress,
    triggerCodes
  });
  const HoverComonent = 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 a11y = useMemo(() => {
    return Platform.OS === 'android' && withView && accessible !== false || accessible;
  }, [accessible, withView]);
  return /*#__PURE__*/React.createElement(IsViewFocusedContext.Provider, {
    value: focused
  }, /*#__PURE__*/React.createElement(BaseKeyboardView, _extends({
    style: [style, containerFocusedStyle],
    ref: ref,
    onKeyUpPress: onKeyUpPressHandler,
    onKeyDownPress: onKeyDownPressHandler,
    onFocus: onFocus,
    onBlur: onBlur,
    onFocusChange: onFocusChangeHandler,
    onContextMenuPress: onLongPress,
    haloEffect: withHaloEffect,
    autoFocus: autoFocus,
    canBeFocused: canBeFocused,
    focusable: focusable,
    tintColor: tintColor,
    group: group,
    accessible: a11y
  }, props), children, focused && HoverComonent && /*#__PURE__*/React.createElement(RenderPropComponent, {
    render: HoverComonent
  })));
});
const styles = StyleSheet.create({
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  opacity: {
    opacity: 0.3
  }
});
//# sourceMappingURL=KeyboardFocusView.js.map