react-native-external-keyboard/lib/module/components/KeyboardExtendedInput/KeyboardExtendedInput.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, TextInput, Platform, StyleSheet } 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';
const isIOS = Platform.OS === 'ios';
const focusMap = {
  default: 0,
  press: 1,
  auto: 2
};
const blurMap = {
  default: 0,
  disable: 1,
  auto: 2
};
export const KeyboardExtendedInput = /*#__PURE__*/React.forwardRef(({
  focusType = 'default',
  blurType = 'default',
  containerStyle,
  onFocusChange,
  focusStyle,
  style,
  haloEffect = true,
  canBeFocusable = true,
  focusable = true,
  containerFocusStyle,
  tintColor,
  tintType = 'default',
  FocusHoverComponent,
  onSubmitEditing,
  submitBehavior,
  groupIdentifier,
  ...props
}, ref) => {
  const {
    focused,
    containerFocusedStyle,
    componentFocusedStyle,
    onFocusChangeHandler,
    hoverColor
  } = useFocusStyle({
    onFocusChange,
    tintColor,
    focusStyle,
    containerFocusStyle,
    tintType
  });
  const contextIdentifier = useGroupIdentifierContext();
  const withHaloEffect = tintType === 'default' && haloEffect;
  const nativeFocusHandler = useMemo(() => focusEventMapper(onFocusChangeHandler), [onFocusChangeHandler]);
  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 blurOnSubmit = submitBehavior ? submitBehavior === 'blurAndSubmit' : props.blurOnSubmit ?? true;
  return /*#__PURE__*/React.createElement(TextInputFocusWrapperNative, {
    onFocusChange: nativeFocusHandler //ToDo update type
    ,
    focusType: focusMap[focusType],
    blurType: blurMap[blurType],
    style: [containerStyle, containerFocusedStyle],
    haloEffect: withHaloEffect,
    multiline: props.multiline,
    blurOnSubmit: blurOnSubmit,
    onMultiplyTextSubmit: onSubmitEditing,
    canBeFocused: canBeFocusable && focusable,
    tintColor: isIOS ? tintColor : undefined,
    groupIdentifier: groupIdentifier ?? contextIdentifier
  }, /*#__PURE__*/React.createElement(TextInput, _extends({
    ref: ref,
    editable: canBeFocusable && focusable,
    style: [style, componentFocusedStyle],
    onSubmitEditing: onSubmitEditing,
    submitBehavior: submitBehavior
  }, props)), 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=KeyboardExtendedInput.js.map