mh-rn-component/module/Field/index.js

function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from 'react';
import { View, Text, TextInput, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import Icon from '../Icon';
import renderNode from '../helpers/renderNode';
/**
 * todo 要怎么定义字体大小？
 * todo  报错了 React.ComponentPropsWithRef<typeof TextInput> & 
 */

const Field = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  var _rest$value;

  let {
    onRightIconClick,
    clearable,
    style,
    type,
    border = true,
    ...rest
  } = _ref;

  /**
   * 传递ref节点添加方法
   */
  const root = React.useRef(null);
  React.useImperativeHandle(ref, () => {
    const input = root.current;

    if (input) {
      return {
        focus: () => input.focus(),
        clear: () => input.clear(),
        // setNativeProps: (args: TextInputProps) => input.setNativeProps(args),
        isFocused: () => input.isFocused(),
        blur: () => input.blur()
      };
    }

    const noop = () => {
      throw new Error('TextInput is not available');
    };

    return {
      focus: noop,
      clear: noop,
      blur: noop,
      isFocused: noop
    };
  });

  const clearableHandel = () => {
    var _root$current;

    (rest === null || rest === void 0 ? void 0 : rest.onInput) && (rest === null || rest === void 0 ? void 0 : rest.onInput(""));
    (_root$current = root.current) === null || _root$current === void 0 ? void 0 : _root$current.clear();
  };
  /**
   * [Props]type
   * 输入框形态
   * 软键盘形态
   */


  const keyboardType = type === 'number' ? 'numeric' : 'default';
  return /*#__PURE__*/React.createElement(View, {
    style: StyleSheet.flatten([styles.container, {
      paddingBottom: rest.showWordLimit ? 20 : 8
    }, rest.disabled && styles.disabledInput, rest.disabled && rest.disabledInputStyle, rest.fieldStyle])
  }, rest.label && /*#__PURE__*/React.createElement(View, {
    style: [{
      paddingRight: 8
    }, rest.labelStyle]
  }, /*#__PURE__*/React.createElement(Text, {
    style: {
      fontSize: rest.labelFontSize || 16
    }
  }, rest.label, "\uFF1A")), /*#__PURE__*/React.createElement(View, {
    style: StyleSheet.flatten([styles.inputMain, border && styles.border, rest.borderStyle && rest.borderStyle])
  }, /*#__PURE__*/React.createElement(TextInput, _extends({
    ref: root,
    style: StyleSheet.flatten([styles.input, type === 'textarea' && styles.textarea, style]),
    underlineColorAndroid: "transparent",
    editable: !rest.disabled,
    secureTextEntry: type === 'password',
    keyboardType: keyboardType,
    onChangeText: rest.onInput,
    multiline: type === 'textarea'
  }, rest)), clearable && /*#__PURE__*/React.createElement(Text, {
    style: {
      display: rest.value ? "flex" : "none"
    },
    onPress: clearableHandel
  }, /*#__PURE__*/React.createElement(Icon, {
    name: rest.clearIcon || "closecircle",
    color: rest.clearIconColor || "#333"
  })), rest.rightIcon && /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    onPress: onRightIconClick
  }, /*#__PURE__*/React.createElement(View, null, renderNode(Icon, rest.rightIcon)))), rest.showWordLimit && rest.maxlength && /*#__PURE__*/React.createElement(View, {
    style: styles.showWordLimit
  }, /*#__PURE__*/React.createElement(Text, null, (_rest$value = rest.value) === null || _rest$value === void 0 ? void 0 : _rest$value.length, "/", rest.maxlength)));
});
const styles = StyleSheet.create({
  container: {
    width: "100%",
    flexDirection: 'row',
    alignItems: 'center',
    padding: 8,
    backgroundColor: '#fff',
    position: "relative"
  },
  inputMain: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    paddingLeft: 8,
    paddingRight: 8
  },
  border: {
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 6
  },
  input: {
    flex: 1,
    fontSize: 16,
    minHeight: 40
  },
  textarea: {
    minHeight: 80,
    textAlignVertical: 'top'
  },
  disabledInput: {
    opacity: 0.5
  },
  showWordLimit: {
    position: "absolute",
    right: 12,
    bottom: 0
  }
});
export default Field;
//# sourceMappingURL=index.js.map