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

Toolkit for improving physical keyboard support in React Native

import { useState, useMemo, useCallback } from 'react';
import { Platform, Pressable } from 'react-native';
const backgroundTintMap = Platform.select({
  ios: {
    background: true
  },
  default: {
    background: true,
    default: true
  }
});
const DEFAULT_BACKGROUND_TINT = '#dce3f9';
export const useFocusStyle = ({
  focusStyle,
  onFocusChange,
  containerFocusStyle,
  tintColor,
  tintType = 'default',
  style,
  Component,
  withPressedStyle = false
}) => {
  const [focused, setFocusStatus] = useState(false);
  const onFocusChangeHandler = useCallback(isFocused => {
    setFocusStatus(isFocused);
    onFocusChange === null || onFocusChange === void 0 || onFocusChange(isFocused);
  }, [onFocusChange]);
  const componentFocusedStyle = useMemo(() => {
    const specificStyle = typeof focusStyle === 'function' ? focusStyle({
      focused
    }) : focusStyle;
    return focused ? specificStyle : undefined;
  }, [focusStyle, focused]);
  const hoverColor = useMemo(() => ({
    backgroundColor: tintColor
  }), [tintColor]);
  const containerFocusedStyle = useMemo(() => {
    if (backgroundTintMap[tintType] && !containerFocusStyle) {
      return focused ? {
        backgroundColor: tintColor ?? DEFAULT_BACKGROUND_TINT
      } : undefined;
    }
    if (!containerFocusStyle) return undefined;
    const specificStyle = typeof containerFocusStyle === 'function' ? containerFocusStyle({
      focused
    }) : containerFocusStyle;
    return focused ? specificStyle : undefined;
  }, [containerFocusStyle, focused, tintColor, tintType]);
  const dafaultComponentStyle = useMemo(() => [style, componentFocusedStyle], [style, componentFocusedStyle]);
  const styleHandlerPressable = useCallback(({
    pressed
  }) => {
    if (typeof style === 'function') {
      return [style({
        pressed
      }), componentFocusedStyle];
    } else {
      return [style, componentFocusedStyle];
    }
  }, [componentFocusedStyle, style]);
  const componentStyleViewStyle = Component === Pressable || withPressedStyle ? styleHandlerPressable : dafaultComponentStyle;
  return {
    componentStyleViewStyle,
    componentFocusedStyle,
    containerFocusedStyle,
    onFocusChangeHandler,
    hoverColor,
    focused
  };
};
//# sourceMappingURL=useFocusStyle.js.map