qt-public-ui/es/Input/search.js

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["className", "enterButton", "onSearch"];
import React, { useState } from 'react';
import { Button } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import classnames from 'classnames';
import { IconSlim as Icon } from '..';
import Input from './input';
var InputSearch = function InputSearch(props) {
  var className = props.className,
    enterButton = props.enterButton,
    propsSearch = props.onSearch,
    inputProps = _objectWithoutPropertiesLoose(props, _excluded);
  var _useState = useState(props.value),
    value = _useState[0],
    setValue = _useState[1];
  var onSearch = function onSearch(e) {
    !props.loading && propsSearch && propsSearch(value || '', e);
  };
  var icon = props.loading ? /*#__PURE__*/React.createElement(LoadingOutlined, {
    className: "umui-input-search-icon"
  }) : /*#__PURE__*/React.createElement(Icon, {
    type: "umicon-search",
    className: "umui-input-search-icon"
  });
  var btn = /*#__PURE__*/React.createElement(Button, {
    className: "ant-input-search-button",
    size: props.size,
    type: "primary",
    onClick: onSearch
  }, props.enterButton === true ? icon : props.enterButton);
  var _props = _extends({}, inputProps);
  if (enterButton) {
    _props.addonAfter = btn;
  } else {
    _props.suffix = /*#__PURE__*/React.createElement("div", {
      onClick: onSearch
    }, icon);
  }
  return /*#__PURE__*/React.createElement(Input, _extends({}, _props, {
    onChange: function onChange(e) {
      setValue(e.target.value);
      props.onChange && props.onChange(e);
    },
    onPressEnter: function onPressEnter(e) {
      !props.loading && props.onSearch && props.onSearch(value || '', e);
      props.onPressEnter && props.onPressEnter(e);
    },
    className: classnames('umui-input-search', className, {
      'ant-input-search-enter-button': !!props.enterButton
    })
  }));
};
InputSearch.displayName = 'Search';
InputSearch.defaultProps = {
  enterButton: false
};
export default InputSearch;