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

An enterprise-class UI design language and React components implementation

import React, { useEffect } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import "./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.createRef();

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

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

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

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