@fruits-chain/react-native-xiaoshu/lib/module/text-input/index.js

React Native UI library

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useState, useRef, useCallback, useMemo, useImperativeHandle, memo, forwardRef } from 'react';
import { View, InputAccessoryView, Text, TextInput as RNTextInput, TouchableOpacity, Keyboard, Platform, useColorScheme } from 'react-native';
import IconSvgCross from '../icon/cross';
import { useTheme } from '../theme';
import { usePersistFn, useUpdateEffect } from '../hooks';
import { getDefaultValue, renderTextLikeJSX, noop, isValue, isDef, formatNumber } from '../helpers';
import { createStyles } from './style';

const defaultFormatter = t => t;

let nextInputAccessoryViewID = 0;

const getNextInputAccessoryViewID = () => ++nextInputAccessoryViewID;

const iOSPlatform = Platform.OS === 'ios';
/**
 * 自定义输入项
 * @description 在和 react-native-keyboard-aware-scroll-view 配合做软键盘适配时，如果是 textarea 类型默认 scrollEnabled 禁用，避免软键盘遮挡输入内容
 * @description 动态切换输入内容可见，请手动控制 secureTextEntry，如果只是切换 type 在 iOS 正式环境可能会不生效
 */

const TextInputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    addonGroupStyle,
    addonBeforeTextStyle,
    addonAfterTextStyle,
    fixGroupStyles,
    prefixTextStyle,
    suffixTextStyle,
    type = 'text',
    rows = 2,
    clearable = false,
    clearTrigger = 'focus',
    formatter,
    formatTrigger = 'onChangeText',
    showWordLimit = false,
    bordered = false,
    addonAfter,
    addonBefore,
    prefix,
    suffix,
    inputWidth,
    size = 'middle',
    onChange,
    // TextInput 的属性
    value,
    defaultValue,
    style,
    multiline,
    selectionColor,
    secureTextEntry,
    placeholderTextColor,
    keyboardType,
    onChangeText,
    onEndEditing,
    onFocus,
    onBlur,
    maxLength,
    scrollEnabled = false,
    returnKeyType,
    ...resetProps
  } = _ref;

  // 修正数据
  if (type === 'textarea') {
    multiline = true;
    clearable = false;
  } else {
    returnKeyType = getDefaultValue(returnKeyType, 'done');
  }

  if (type === 'password') {
    secureTextEntry = true;
  }

  if (type === 'number') {
    keyboardType = 'numeric';
  }

  if (type === 'digit') {
    keyboardType = 'number-pad';
  }

  if (showWordLimit && isValue(maxLength)) {
    showWordLimit = false;
  }

  const onChangeTextPersistFn = usePersistFn(onChangeText || noop);
  const onEndEditingPersistFn = usePersistFn(onEndEditing || noop);
  const onFocusPersistFn = usePersistFn(onFocus || noop);
  const onBlurPersistFn = usePersistFn(onBlur || noop);
  const onChangePersistFn = usePersistFn(onChange || noop);
  const formatterPersistFn = usePersistFn(formatter || defaultFormatter);
  const [localValue, setLocalValue] = useState(isValue(value) ? value : defaultValue);
  const [focus, setFocus] = useState(false);
  const TextInputRef = useRef(null);
  const colorScheme = useColorScheme();
  const THEME_VAR = useTheme();
  const inputAccessoryViewID = useMemo(() => `TextInputBase_${getNextInputAccessoryViewID()}`, []);
  const STYLES = createStyles(THEME_VAR);
  /** 显示禁用样子 bordered 才显示 */

  const showDisabledInput = bordered && isDef(resetProps.editable) && !resetProps.editable;
  /** 输入框最小高度 */

  const textInputMinHeight = THEME_VAR[`text_input_${size}_min_height`] || THEME_VAR.text_input_middle_min_height;
  /** 所有文字/文案相关的大小 */

  const textInputFontSize = THEME_VAR[`text_input_${size}_font_size`] || THEME_VAR.text_input_middle_font_size;
  selectionColor = getDefaultValue(selectionColor, THEME_VAR.text_input_selection_color);
  placeholderTextColor = getDefaultValue(placeholderTextColor, THEME_VAR.text_input_placeholder_text_color);
  /**
   * 转发实例
   */

  useImperativeHandle(ref, () => {
    return TextInputRef.current;
  }); // 同步外部的数据

  useUpdateEffect(() => {
    setLocalValue(value);
  }, [value]);
  /**
   * 点击完成收起软键盘
   */

  const onPressFinish = useCallback(() => {
    Keyboard.dismiss();
    setFocus(false);
  }, []);
  /** 点击视觉上的输入框，聚焦，多行文本 */

  const onPressTextInput = useCallback(() => {
    var _TextInputRef$current;

    (_TextInputRef$current = TextInputRef.current) === null || _TextInputRef$current === void 0 ? void 0 : _TextInputRef$current.focus();
  }, []);
  /**
   * 当文字变化
   * @description 在这个阶段判断字符长度、格式化数据
   */

  const onChangeTextTextInput = useCallback(t => {
    // 部分数据开始格式化
    // 允许输入正整数
    if (type === 'digit' || type === 'number') {
      const isNumber = type === 'number';
      t = formatNumber(t, isNumber, isNumber);
    }

    if (typeof maxLength === 'number' && t.length > maxLength) {
      t = t.slice(0, maxLength);
    }

    if (formatTrigger === 'onChangeText') {
      t = formatterPersistFn(t);
    }

    setLocalValue(t);
    onChangeTextPersistFn(t);
  }, [type, maxLength, formatTrigger, formatterPersistFn, onChangeTextPersistFn]);
  /**
   * 编辑结束的时候
   */

  const onEndEditingTextInput = useCallback(e => {
    if (formatTrigger === 'onEndEditing') {
      e.nativeEvent.text = formatterPersistFn(e.nativeEvent.text);
    }

    setLocalValue(e.nativeEvent.text);
    onEndEditingPersistFn(e);
  }, [onEndEditingPersistFn, formatterPersistFn, formatTrigger]);
  /**
   * 当文本框内容变化时
   */

  const onChangeTextInput = useCallback(e => {
    onChangePersistFn(e.nativeEvent.text);
  }, [onChangePersistFn]);
  /**
   * 点击清除按钮
   * @description 目前不能在输入框聚焦的时候触发点击，输入框失去焦点后才能触发点击，可能是软键盘的问题？
   */

  const onPressClearable = useCallback(() => {
    var _TextInputRef$current2;

    (_TextInputRef$current2 = TextInputRef.current) === null || _TextInputRef$current2 === void 0 ? void 0 : _TextInputRef$current2.clear();
    setLocalValue('');
    onChangeTextPersistFn('');
    onPressTextInput();
  }, [onChangeTextPersistFn, onPressTextInput]);
  /**
   * 输入框聚焦
   */

  const onFocusTextInput = useCallback(e => {
    setFocus(true);
    onFocusPersistFn(e);
  }, [onFocusPersistFn]);
  /**
   * 输入框失焦
   */

  const onBlurTextInput = useCallback(e => {
    setFocus(false);
    onBlurPersistFn(e);
  }, [onBlurPersistFn]);
  const textInputTextStyle = {
    fontSize: textInputFontSize
  };
  const isTextarea = type === 'textarea'; // textarea 模式就是纯输入框

  const addonBeforeJSX = isTextarea ? null : renderTextLikeJSX(addonBefore, [STYLES.addon_text, STYLES.addon_text_before, textInputTextStyle, addonBeforeTextStyle]);
  const addonAfterJSX = isTextarea ? null : renderTextLikeJSX(addonAfter, [STYLES.addon_text, STYLES.addon_text_after, textInputTextStyle, addonAfterTextStyle]);
  const prefixJSX = isTextarea ? null : renderTextLikeJSX(prefix, [STYLES.input_fix_text, STYLES.input_fix_text_pre, textInputTextStyle, prefixTextStyle]);
  const suffixJSX = isTextarea ? null : renderTextLikeJSX(suffix, [STYLES.input_fix_text, STYLES.input_fix_text_suf, textInputTextStyle, suffixTextStyle]);
  const customTextInputWidthStyle = isDef(inputWidth) ? {
    flexShrink: 1,
    flexGrow: 0,
    flexBasis: inputWidth,
    width: inputWidth
  } : {};
  /** 在添加了 addonXxx 的情况下，需要输入框部分自适应宽 */

  const inputAddonModeStyle = {
    flex: 1
  };
  /** 输入框不确定是否要排除边框 */

  const inputUncertainHeight = bordered ? 2 : 0;
  const inputStyles = [STYLES.input, isTextarea ? {
    minHeight: textInputMinHeight * rows - inputUncertainHeight,
    paddingVertical: 2,
    alignItems: 'flex-start'
  } : {
    minHeight: textInputMinHeight - inputUncertainHeight,
    alignContent: 'center'
  }, (addonAfterJSX || addonBeforeJSX) && bordered ? inputAddonModeStyle : null, customTextInputWidthStyle];
  /**
   * 显示辅助工具栏
   * @description 单行输入框回车键已具备收起键盘的作用
   */

  const showInputAccessoryView = iOSPlatform && type !== 'text' && type !== 'password';
  const keyboardAppearance = !isValue(resetProps.keyboardAppearance) || resetProps.keyboardAppearance === 'default' ? colorScheme || 'light' : resetProps.keyboardAppearance;
  const textInputJSX = /*#__PURE__*/React.createElement(TouchableOpacity, {
    activeOpacity: 1,
    style: inputStyles,
    onPress: onPressTextInput
  }, /*#__PURE__*/React.createElement(RNTextInput, _extends({}, resetProps, {
    ref: TextInputRef,
    style: [STYLES.text_input, textInputTextStyle, showDisabledInput ? STYLES.text_input_disabled : null, style],
    placeholder: focus && resetProps.textAlign === 'center' ? undefined : resetProps.placeholder,
    value: isValue(value) ? value : localValue,
    defaultValue: defaultValue,
    multiline: multiline,
    secureTextEntry: secureTextEntry,
    keyboardType: keyboardType,
    returnKeyType: returnKeyType,
    scrollEnabled: scrollEnabled,
    selectionColor: selectionColor,
    placeholderTextColor: placeholderTextColor,
    onChangeText: onChangeTextTextInput,
    onEndEditing: onEndEditingTextInput,
    onChange: onChangeTextInput,
    onFocus: onFocusTextInput,
    onBlur: onBlurTextInput,
    inputAccessoryViewID: resetProps.inputAccessoryViewID || (showInputAccessoryView ? inputAccessoryViewID : undefined)
  })), clearable && (clearTrigger === 'focus' ? focus : true) && localValue && localValue.length ? /*#__PURE__*/React.createElement(IconSvgCross, {
    style: STYLES.clearable,
    color: THEME_VAR.text_input_clearable_color,
    size: THEME_VAR.text_input_clearable_size / 4 * 3,
    onPress: onPressClearable
  }) : null, showWordLimit ? /*#__PURE__*/React.createElement(Text, {
    style: STYLES.word_limit_text
  }, (localValue === null || localValue === void 0 ? void 0 : localValue.length) || 0, "/", maxLength) : null);
  const inputJSX = /*#__PURE__*/React.createElement(React.Fragment, null, showInputAccessoryView ? /*#__PURE__*/React.createElement(InputAccessoryView, {
    nativeID: inputAccessoryViewID,
    backgroundColor: THEME_VAR[`text_input_${keyboardAppearance}_accessory_background_color`]
  }, /*#__PURE__*/React.createElement(View, {
    style: STYLES.accessory
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: onPressFinish,
    activeOpacity: THEME_VAR.active_opacity
  }, /*#__PURE__*/React.createElement(Text, {
    style: STYLES.accessory_text
  }, "\u5B8C\u6210")))) : null, prefixJSX || suffixJSX || bordered ? /*#__PURE__*/React.createElement(View, {
    style: [STYLES.input_fix_group, bordered ? [STYLES.input_border, addonAfterJSX || addonBeforeJSX ? inputAddonModeStyle : null, isDef(resetProps.editable) && !resetProps.editable ? STYLES.input_disabled : null] : null, prefixJSX || suffixJSX ? null : customTextInputWidthStyle, fixGroupStyles]
  }, prefixJSX, textInputJSX, suffixJSX) : textInputJSX);

  if (addonAfterJSX || addonBeforeJSX) {
    return /*#__PURE__*/React.createElement(View, {
      style: [STYLES.addon_group, addonGroupStyle]
    }, addonBeforeJSX, inputJSX, addonAfterJSX);
  }

  return inputJSX;
});
export default /*#__PURE__*/memo(TextInputBase);
//# sourceMappingURL=index.js.map