ps-frame-father/lib/components/Input/index.js

An enterprise-class UI design language and React components implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

require("./index.css");

/**
 * Input input组件
 * @param {icon} ReactNode 是否带icon
 * @param {defaultValue} string 输入框默认内容
 * @param {id} string 输入框id
 * @param {className} string 输入框的类名
 * @param {style} object 输入框的样式
 * @param {placeholder} string 输入框的占位符
 * @param {type} string 输入框类型
 * @param {autoFocus} bool 输入框是否自动聚焦
 * @param {value} string 输入框的值
 * @param {onChange} func 输入框变化时的回调
 * @param {onIconClick} func 当icon按钮点击时的回调
 */
function Input(props) {
  var icon = props.icon,
      defaultValue = props.defaultValue,
      id = props.id,
      className = props.className,
      _props$type = props.type,
      type = _props$type === void 0 ? 'text' : _props$type,
      value = props.value,
      onChange = props.onChange,
      style = props.style,
      autoFocus = props.autoFocus,
      _props$placeholder = props.placeholder,
      placeholder = _props$placeholder === void 0 ? '请输入内容' : _props$placeholder,
      onIconClick = props.onIconClick;

  var textInput = /*#__PURE__*/_react.default.createRef();

  var handleChange = function handleChange(e) {
    onChange && onChange(e.target.value);
  };

  var handleIconClick = function handleIconClick() {
    onIconClick && onIconClick(textInput.current.value);
  };

  (0, _react.useEffect)(function () {
    autoFocus && textInput.current.focus();
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "xInputWrap"
  }, /*#__PURE__*/_react.default.createElement("input", {
    className: (0, _classnames.default)('xInputInner', className),
    type: type,
    id: id,
    ref: textInput,
    style: style,
    placeholder: placeholder,
    value: value || typeof value === 'undefined' ? defaultValue : '',
    onChange: handleChange
  }), !!icon && /*#__PURE__*/_react.default.createElement("span", {
    className: "xIconInput",
    onClick: handleIconClick
  }, icon));
}

Input.propTypes = {
  icon: _propTypes.default.element,
  defaultValue: _propTypes.default.string,
  id: _propTypes.default.string,
  className: _propTypes.default.string,
  placeholder: _propTypes.default.string,
  type: _propTypes.default.string,
  autoFocus: _propTypes.default.bool,
  style: _propTypes.default.object,
  value: _propTypes.default.string,
  onChange: _propTypes.default.func,
  onIconClick: _propTypes.default.func
};
var _default = Input;
exports.default = _default;