ming-demo1/lib/components/common/InputSearch.js

mdf metaui web

"use strict";

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

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

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

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

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

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

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

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

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

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

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

var _redux = require("redux");

var _reactRedux = require("react-redux");

var _baseui = require("@mdf/baseui");

var InputSearch = function (_Component) {
  (0, _inherits2["default"])(InputSearch, _Component);

  function InputSearch(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, InputSearch);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(InputSearch).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentWillReceiveProps", function (nextProps) {
      if (_this.state.value != nextProps.value || _this.state.disabled != nextProps.disabled) {
        _this.setState({
          value: nextProps.value,
          disabled: nextProps.disabled
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function () {
      _this.setState({
        focused: true
      });

      if (_this.props.onFocus) _this.props.onFocus();
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function () {
      if (_this.props.onBlur) _this.props.onBlur();
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBodyClick", function (e) {
      if (_this.contains(_this.refs.input_search, e.target)) return;
      if (e.target && cb.dom(e.target).parents('div.inputsearch').length) return;
      document.body.removeEventListener('click', _this.handleBodyClick);

      _this.setState({
        focused: false
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseEnter", function () {
      _this.setState({
        mouseEnter: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseLeave", function () {
      _this.setState({
        mouseEnter: false
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDelete", function (e) {
      if (_this.props.onDelete) _this.props.onDelete(e);

      _this.refs.input_search.focus();
    });
    _this.state = {
      value: props.value || '',
      placeholder: props.placeholder || '',
      type: props.type || 'text',
      size: props.size || 'default',
      disabled: props.disabled || false,
      focused: false,
      mouseEnter: false,
      isBtn: props.isBtn || false,
      showBtn: props.showBtn,
      id: props.id || '',
      btnText: props.btnText || '搜索'
    };
    return _this;
  }

  (0, _createClass2["default"])(InputSearch, [{
    key: "contains",
    value: function contains(elem, target) {
      if (!elem) return true;
      if (elem === target) return true;
      if (!elem.children || !elem.children.length) return false;

      for (var i = 0, len = elem.children.length; i < len; i++) {
        if (this.contains(elem.children[i], target)) return true;
      }

      return false;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state = this.state,
          value = _this$state.value,
          focused = _this$state.focused,
          placeholder = _this$state.placeholder,
          disabled = _this$state.disabled,
          mouseEnter = _this$state.mouseEnter,
          isBtn = _this$state.isBtn,
          btnText = _this$state.btnText,
          id = _this$state.id,
          showBtn = _this$state.showBtn;
      document.body.addEventListener('click', this.handleBodyClick);
      showBtn = showBtn == null || showBtn == undefined ? true : showBtn;
      var btnControl = isBtn ? _react["default"].createElement(_baseui.Button, {
        onClick: this.props.onSearch,
        className: value == "" ? "has-btn" : "has-btn has-btn-red"
      }, btnText) : _react["default"].createElement("i", {
        onClick: this.props.onSearch,
        className: "anticon anticon-search ant-input-search-icon"
      });
      return _react["default"].createElement("div", {
        className: "inputsearch"
      }, _react["default"].createElement("span", {
        className: "ant-input-search ant-input-affix-wrapper",
        onMouseEnter: this.onMouseEnter,
        onMouseLeave: this.onMouseLeave
      }, _react["default"].createElement(_baseui.Input, {
        ref: "input_search",
        value: value,
        id: id,
        onChange: this.props.onChange,
        onPressEnter: this.props.onPressEnter,
        placeholder: placeholder,
        onFocus: this.onFocus,
        onBlur: this.onBlur,
        disabled: disabled
      }), _react["default"].createElement("span", {
        className: "ant-input-suffix"
      }, value && value != '' && (focused || mouseEnter) ? _react["default"].createElement("i", {
        onClick: this.onDelete,
        className: "anticon anticon-shurukuangshanchu"
      }) : '', showBtn ? btnControl : "")));
    }
  }]);
  return InputSearch;
}(_react.Component);

exports["default"] = InputSearch;
//# sourceMappingURL=InputSearch.js.map