mr-component/lib/components/MrInput/index.js

A library for Mr components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _reactVant = require("react-vant");
var _excluded = ["value", "defaultValue", "placeholder", "type", "size", "disabled", "readOnly", "clearable", "maxLength", "showWordLimit", "label", "labelWidth", "leftIcon", "rightIcon", "required", "error", "errorMessage", "borderColor", "backgroundColor", "textColor", "borderRadius", "height", "padding", "fontSize", "fontWeight", "theme", "onChange", "onFocus", "onBlur", "onClear", "className", "style"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// 简化的Mr输入框属性

var MrInput = function MrInput(props, ref) {
  var externalValue = props.value,
    defaultValue = props.defaultValue,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? '请输入' : _props$placeholder,
    _props$type = props.type,
    type = _props$type === void 0 ? 'text' : _props$type,
    _props$size = props.size,
    size = _props$size === void 0 ? 'normal' : _props$size,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    _props$readOnly = props.readOnly,
    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
    _props$clearable = props.clearable,
    clearable = _props$clearable === void 0 ? true : _props$clearable,
    maxLength = props.maxLength,
    _props$showWordLimit = props.showWordLimit,
    showWordLimit = _props$showWordLimit === void 0 ? false : _props$showWordLimit,
    label = props.label,
    labelWidth = props.labelWidth,
    leftIcon = props.leftIcon,
    rightIcon = props.rightIcon,
    _props$required = props.required,
    required = _props$required === void 0 ? false : _props$required,
    _props$error = props.error,
    error = _props$error === void 0 ? false : _props$error,
    errorMessage = props.errorMessage,
    borderColor = props.borderColor,
    backgroundColor = props.backgroundColor,
    textColor = props.textColor,
    _props$borderRadius = props.borderRadius,
    borderRadius = _props$borderRadius === void 0 ? 8 : _props$borderRadius,
    _props$height = props.height,
    height = _props$height === void 0 ? 55 : _props$height,
    _props$padding = props.padding,
    padding = _props$padding === void 0 ? '0 12px' : _props$padding,
    _props$fontSize = props.fontSize,
    fontSize = _props$fontSize === void 0 ? 16 : _props$fontSize,
    _props$fontWeight = props.fontWeight,
    fontWeight = _props$fontWeight === void 0 ? 400 : _props$fontWeight,
    _props$theme = props.theme,
    theme = _props$theme === void 0 ? 'default' : _props$theme,
    onChange = props.onChange,
    onFocus = props.onFocus,
    onBlur = props.onBlur,
    onClear = props.onClear,
    className = props.className,
    style = props.style,
    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);

  // 简化的内部状态管理
  var _useState = (0, _react.useState)(function () {
      if (externalValue !== undefined) {
        return externalValue;
      }
      if (defaultValue !== undefined) {
        return defaultValue;
      }
      return '';
    }),
    internalValue = _useState[0],
    setInternalValue = _useState[1];

  // 同步外部value变化
  (0, _react.useEffect)(function () {
    if (externalValue !== undefined) {
      setInternalValue(externalValue);
    }
  }, [externalValue]);

  // 简化的样式处理
  var finalStyle = (0, _extends2["default"])({
    border: '1px solid #CED1D5',
    borderRadius: typeof borderRadius === 'number' ? borderRadius + "px" : borderRadius,
    height: typeof height === 'number' ? height + "px" : height,
    padding: typeof padding === 'number' ? padding + "px" : padding,
    fontSize: typeof fontSize === 'number' ? fontSize + "px" : fontSize,
    fontWeight: fontWeight,
    backgroundColor: backgroundColor || '#FFFFFF',
    color: textColor || '#333333',
    boxSizing: 'border-box',
    width: '100%'
  }, theme === 'primary' && {
    borderColor: '#1989FA',
    backgroundColor: '#F0F8FF',
    color: '#1989FA'
  }, theme === 'success' && {
    borderColor: '#07C160',
    backgroundColor: '#F0F9FF',
    color: '#07C160'
  }, theme === 'warning' && {
    borderColor: '#FFA726',
    backgroundColor: '#FFF3E0',
    color: '#E65100'
  }, theme === 'danger' && {
    borderColor: '#EE0A24',
    backgroundColor: '#FFF1F0',
    color: '#EE0A24'
  }, borderColor && {
    borderColor: borderColor
  }, backgroundColor && {
    backgroundColor: backgroundColor
  }, textColor && {
    color: textColor
  }, error && {
    borderColor: '#EE0A24',
    backgroundColor: '#FFF1F0'
  }, style);

  // 事件处理
  var handleChange = function handleChange(value) {
    setInternalValue(value);
    onChange === null || onChange === void 0 ? void 0 : onChange(value);
  };
  var handleClear = function handleClear() {
    setInternalValue('');
    onChange === null || onChange === void 0 ? void 0 : onChange('');
    onClear === null || onClear === void 0 ? void 0 : onClear();
  };
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%'
    }
  }, label && /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: '8px',
      fontSize: '14px',
      color: '#333',
      fontWeight: 500,
      width: labelWidth || 'auto'
    }
  }, label, required && /*#__PURE__*/React.createElement("span", {
    style: {
      color: '#EE0A24',
      marginLeft: '4px'
    }
  }, "*")), /*#__PURE__*/React.createElement(_reactVant.Input, (0, _extends2["default"])({
    ref: ref,
    value: internalValue,
    placeholder: placeholder,
    type: type,
    size: size,
    disabled: disabled,
    readonly: readOnly,
    clearable: clearable,
    maxLength: maxLength,
    showWordLimit: showWordLimit,
    leftIcon: leftIcon,
    rightIcon: rightIcon,
    required: required,
    error: error,
    errorMessage: errorMessage,
    onChange: handleChange,
    onFocus: onFocus,
    onBlur: onBlur,
    onClear: handleClear,
    className: className,
    style: finalStyle
  }, others)));
};
var RefMrInput = /*#__PURE__*/(0, _react.forwardRef)(MrInput);
RefMrInput.displayName = 'MrInput';
var _default = exports["default"] = RefMrInput;