antui-mobile/lib/components/searchbar/searchbar.js

mobile ui for antd

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _icon = require('../icon');

var _icon2 = _interopRequireDefault(_icon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * 搜索条组件
 */
var SearchBar = function (_Component) {
  (0, _inherits3.default)(SearchBar, _Component);

  function SearchBar() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, SearchBar);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = SearchBar.__proto__ || (0, _getPrototypeOf2.default)(SearchBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      focus: false,
      clearing: false,
      text: ''
    }, _this.changeHandle = function (e) {
      var text = e.target.value;
      if (_this.props.onChange) _this.props.onChange(text, e);
      _this.setState({ text: text });
    }, _this.cancelHandle = function (e) {
      _this.setState({
        focus: false,
        text: ''
      });
      if (_this.props.onCancel) _this.props.onCancel(e);
      if (_this.props.onChange) _this.props.onChange('', e);
    }, _this.clearHandle = function (e) {
      e.preventDefault();
      e.stopPropagation();

      _this.setState({ text: '', clearing: true });
      if (_this.props.onClear) _this.props.onClear(e);
      _this.refs.searchInput.focus();
      if (_this.props.onChange) _this.props.onChange('', e);
    }, _this.blurHandle = function (e) {
      if (_this.state.text === '') {
        _this.setState({ focus: false });
      }
    }, _this.submitHandle = function (e) {
      if (_this.props.onSubmit) {
        e.preventDefault();
        e.stopPropagation();
        _this.props.onSubmit(_this.state.text, e);
      }
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(SearchBar, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          prefixCls = _props.prefixCls,
          placeholder = _props.placeholder,
          className = _props.className,
          searchName = _props.searchName;

      var classes = (0, _classnames2.default)(prefixCls, (0, _defineProperty3.default)({}, prefixCls + '_focusing', this.state.focus), className);

      return _react2.default.createElement(
        'div',
        { className: classes },
        _react2.default.createElement(
          'form',
          { className: prefixCls + '__form', onSubmit: this.submitHandle },
          _react2.default.createElement(
            'div',
            { className: prefixCls + '__box' },
            _react2.default.createElement(_icon2.default, { type: 'search', svg: 'antd', className: 'antui-icon-search' }),
            _react2.default.createElement('input', {
              ref: 'searchInput',
              type: 'search',
              name: searchName,
              className: prefixCls + '__input',
              placeholder: placeholder,
              onFocus: function onFocus(e) {
                return _this2.setState({ focus: true });
              },
              onBlur: this.blurHandle,
              onChange: this.changeHandle,
              value: this.state.text
            }),
            _react2.default.createElement(_icon2.default, { type: 'cross-circle', svg: 'antd', className: 'antui-icon-clear', onClick: this.clearHandle })
          ),
          _react2.default.createElement(
            'label',
            {
              className: prefixCls + '__label',
              onClick: function onClick() {
                var searchInput = _this2.refs.searchInput;
                if (searchInput) {
                  searchInput.focus();
                }
              },
              style: { display: this.state.text ? "none" : null }
            },
            _react2.default.createElement(
              'span',
              null,
              _react2.default.createElement(_icon2.default, { type: 'search', svg: 'antd', className: 'antui-icon-search' }),
              placeholder
            )
          )
        ),
        _react2.default.createElement(
          'a',
          { className: prefixCls + '__cancel-btn', onClick: this.cancelHandle },
          '\u53D6\u6D88'
        )
      );
    }
  }]);
  return SearchBar;
}(_react.Component);

SearchBar.propTypes = {
  /**
   * 占位符
   */
  placeholder: _react.PropTypes.string,
  /**
   * input的name名
   */
  searchName: _react.PropTypes.string,
  /**
   * 当搜索内容改变时触发
   */
  onChange: _react.PropTypes.func,
  /**
   * 当点击取消icon图标时触发
   */
  onClear: _react.PropTypes.func,
  /**
   * 当点击取消按钮时触发
   */
  onCancel: _react.PropTypes.func,
  /**
   * 当点击搜索按钮时触发
   */
  onSubmit: _react.PropTypes.func,
  className: _react.PropTypes.string,
  prefixCls: _react.PropTypes.string
};
SearchBar.defaultProps = {
  prefixCls: 'antui-search-bar',
  placeholder: '搜索',
  searchName: 'q',
  autocomplete: 'off'
};
exports.default = SearchBar;
module.exports = exports['default'];