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

"use strict";

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

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

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

var _Icon = _interopRequireDefault(require("../Icon"));

var _renderNode = _interopRequireDefault(require("../helpers/renderNode"));

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

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

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

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

  /**
   * 传递ref节点添加方法
   */
  const root = _react.default.useRef(null);

  _react.default.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.default.createElement(_reactNative.View, {
    style: _reactNative.StyleSheet.flatten([styles.container, {
      paddingBottom: rest.showWordLimit ? 20 : 8
    }, rest.disabled && styles.disabledInput, rest.disabled && rest.disabledInputStyle, rest.fieldStyle])
  }, rest.label && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [{
      paddingRight: 8
    }, rest.labelStyle]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: {
      fontSize: rest.labelFontSize || 16
    }
  }, rest.label, "\uFF1A")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: _reactNative.StyleSheet.flatten([styles.inputMain, border && styles.border, rest.borderStyle && rest.borderStyle])
  }, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
    ref: root,
    style: _reactNative.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.default.createElement(_reactNative.Text, {
    style: {
      display: rest.value ? "flex" : "none"
    },
    onPress: clearableHandel
  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
    name: rest.clearIcon || "closecircle",
    color: rest.clearIconColor || "#333"
  })), rest.rightIcon && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
    onPress: onRightIconClick
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, null, (0, _renderNode.default)(_Icon.default, rest.rightIcon)))), rest.showWordLimit && rest.maxlength && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.showWordLimit
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, (_rest$value = rest.value) === null || _rest$value === void 0 ? void 0 : _rest$value.length, "/", rest.maxlength)));
});

const styles = _reactNative.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
  }
});

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