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

React Native UI library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _cross = _interopRequireDefault(require("../icon/cross"));

var _theme = require("../theme");

var _hooks = require("../hooks");

var _helpers = require("../helpers");

var _style = require("./style");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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); }

const defaultFormatter = t => t;

const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
  let {
    fixGroupStyle,
    prefixTextStyle,
    suffixTextStyle,
    clearable = false,
    clearTrigger = 'focus',
    formatter,
    formatTrigger = 'onChangeText',
    prefix,
    suffix,
    size = 'middle',
    bordered = false,
    textInputHeight,
    // TextInput 的属性
    value,
    defaultValue,
    style,
    onChangeText,
    onEndEditing,
    onFocus,
    onBlur,
    ...resetProps
  } = _ref;
  const onChangeTextPersistFn = (0, _hooks.usePersistFn)(onChangeText || _helpers.noop);
  const onEndEditingPersistFn = (0, _hooks.usePersistFn)(onEndEditing || _helpers.noop);
  const onFocusPersistFn = (0, _hooks.usePersistFn)(onFocus || _helpers.noop);
  const onBlurPersistFn = (0, _hooks.usePersistFn)(onBlur || _helpers.noop);
  const formatterPersistFn = (0, _hooks.usePersistFn)(formatter || defaultFormatter);
  const [localValue, setLocalValue] = (0, _react.useState)((0, _helpers.isValue)(value) ? value : defaultValue);
  const [focus, setFocus] = (0, _react.useState)(false);
  const TextInputRef = (0, _react.useRef)(null);
  const THEME_VAR = (0, _theme.useTheme)();
  const STYLES = (0, _style.createStyles)(THEME_VAR); // 转发实例

  (0, _react.useImperativeHandle)(ref, () => TextInputRef.current); // 同步外部的数据

  (0, _hooks.useUpdateEffect)(() => {
    setLocalValue(value);
  }, [value]);
  /** 显示禁用样子 bordered 才显示 */

  const showDisabledInput = bordered && (0, _helpers.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; // 修正数据

  resetProps.selectionColor = (0, _helpers.getDefaultValue)(resetProps.selectionColor, THEME_VAR.text_input_selection_color);
  resetProps.placeholderTextColor = (0, _helpers.getDefaultValue)(resetProps.placeholderTextColor, THEME_VAR.text_input_placeholder_text_color);
  resetProps.returnKeyType = (0, _helpers.getDefaultValue)(resetProps.returnKeyType, 'done');
  /**
   * 点击清除按钮
   * @description 目前不能在输入框聚焦的时候触发点击，输入框失去焦点后才能触发点击，可能是软键盘的问题？
   */

  const onPressClearable = (0, _react.useCallback)(() => {
    var _TextInputRef$current, _TextInputRef$current2;

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

  const onChangeTextTextInput = (0, _react.useCallback)(t => {
    if (typeof resetProps.maxLength === 'number' && t.length > resetProps.maxLength) {
      t = t.slice(0, resetProps.maxLength);
    }

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

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

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

    setLocalValue(e.nativeEvent.text);
    onEndEditingPersistFn(e);
  }, [onEndEditingPersistFn, formatterPersistFn, formatTrigger]);
  /**
   * 输入框聚焦
   */

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

  const onBlurTextInput = (0, _react.useCallback)(e => {
    setFocus(false);
    onBlurPersistFn(e);
  }, [onBlurPersistFn]);
  /** 输入框不确定是否要排除边框 */

  const inputUncertainHeight = bordered ? 2 : 0;
  const textInputTextStyle = {
    fontSize: textInputFontSize
  };
  const textFixGroupStyle = [STYLES.fix_group, bordered ? STYLES.fix_group_border : null, fixGroupStyle, showDisabledInput ? STYLES.fix_group_disabled : null];
  const textInputStyle = [STYLES.text_input, {
    height: textInputMinHeight - inputUncertainHeight,
    paddingVertical: (textInputMinHeight - inputUncertainHeight - 22) / 2
  }, (0, _helpers.isDef)(textInputHeight) ? _reactNative.Platform.select({
    android: {
      height: textInputHeight - inputUncertainHeight
    },
    ios: {
      paddingVertical: (textInputHeight - (textInputMinHeight - inputUncertainHeight)) / 2
    }
  }) : null, style // showDisabledInput ? STYLES.text_input_disabled : null,
  ];
  const prefixJSX = (0, _helpers.renderTextLikeJSX)(prefix, [STYLES.fix_text, STYLES.fix_text_pre, textInputTextStyle, prefixTextStyle]);
  const suffixJSX = (0, _helpers.renderTextLikeJSX)(suffix, [STYLES.fix_text, STYLES.fix_text_suf, textInputTextStyle, suffixTextStyle]);
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: textFixGroupStyle
  }, prefixJSX, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({}, resetProps, {
    ref: TextInputRef,
    style: textInputStyle,
    value: (0, _helpers.isValue)(value) ? value : localValue,
    defaultValue: defaultValue,
    onChangeText: onChangeTextTextInput,
    onEndEditing: onEndEditingTextInput,
    onFocus: onFocusTextInput,
    onBlur: onBlurTextInput
  })), clearable && (clearTrigger === 'focus' ? focus : true) && localValue && localValue.length ? /*#__PURE__*/_react.default.createElement(_cross.default, {
    style: STYLES.clearable,
    color: THEME_VAR.text_input_clearable_color,
    size: THEME_VAR.text_input_clearable_size / 4 * 3,
    onPress: onPressClearable
  }) : null, suffixJSX);
});

var _default = /*#__PURE__*/(0, _react.memo)(TextInputBase);

exports.default = _default;
//# sourceMappingURL=index.js.map