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

admin ui for antd

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

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 _form = require('antd/lib/form');

var _form2 = _interopRequireDefault(_form);

require('antd/lib/form/style/css');

var _row = require('antd/lib/row');

var _row2 = _interopRequireDefault(_row);

require('antd/lib/row/style/css');

var _col = require('antd/lib/col');

var _col2 = _interopRequireDefault(_col);

require('antd/lib/col/style/css');

var _button = require('antd/lib/button');

var _button2 = _interopRequireDefault(_button);

require('antd/lib/button/style/css');

var _message = require('antd/lib/message');

var _message2 = _interopRequireDefault(_message);

require('antd/lib/message/style/css');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _objectAssign2 = require('object-assign');

var _objectAssign3 = _interopRequireDefault(_objectAssign2);

var _form3 = require('../form');

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

var createForm = _form2.default.create;

var PlainComp = function PlainComp(_ref) {
  var className = _ref.className,
      children = _ref.children;
  return _react2.default.createElement(
    'div',
    { className: className },
    children
  );
};
PlainComp.propTypes = {
  className: _react.PropTypes.string,
  children: _react.PropTypes.node
};
/**
 * 搜索条
 */

var SearchBar = function (_React$Component) {
  (0, _inherits3.default)(SearchBar, _React$Component);

  function SearchBar() {
    var _ref2;

    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, (_ref2 = SearchBar.__proto__ || (0, _getPrototypeOf2.default)(SearchBar)).call.apply(_ref2, [this].concat(args))), _this), _this.cols = {
      xs: 8,
      md: 6,
      xl: 4
    }, _this.width = {
      'date': 100,
      'monthDate': 100,
      'date~': 280,
      'datetime': 140,
      'select': 100,
      'default': 100,
      'treeSelect': 110,
      'cascade': 110,
      'cascader': 110
    }, _this.rows = {
      gutter: 8
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  // 当type为grid时，指定每行元素个数


  // 内联元素默认宽


  // 当type为grid时，指定每两个元素的间隔


  (0, _createClass3.default)(SearchBar, [{
    key: 'resetForm',
    value: function resetForm(e) {
      this.props.form.resetFields();
      this.searchForm(true);
    }
  }, {
    key: 'searchForm',
    value: function searchForm(isReset) {
      var _this2 = this;

      this.props.form.validateFields(function (errors, values) {
        if (errors) {
          var errs = [];
          (0, _keys2.default)(errors).forEach(function (fieldName) {
            errs = errors[fieldName].errors || [];
          });
          if (errs && errs.length) _message2.default.error(errs[0].message);
          return;
        }

        _this2.props.onSearch && _this2.props.onSearch(values, isReset);
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props = this.props,
          className = _props.className,
          prefixCls = _props.prefixCls,
          type = _props.type,
          rows = _props.rows,
          cols = _props.cols,
          columns = _props.columns,
          group = _props.group,
          children = _props.children,
          form = _props.form,
          otherProps = (0, _objectWithoutProperties3.default)(_props, ['className', 'prefixCls', 'type', 'rows', 'cols', 'columns', 'group', 'children', 'form']);


      var colopts = type === "grid" ? (0, _objectAssign3.default)(this.cols, cols) : {};
      var rowopts = type === "grid" ? (0, _objectAssign3.default)(this.rows, rows) : {};

      var ComponentRow = type === "inline" ? PlainComp : _row2.default;
      var ComponentCol = type === "inline" ? PlainComp : _col2.default;
      var ComponentItem = type === "inline" ? PlainComp : _form2.default.Item;
      var formItemLayout = type === "grid" ? {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
      } : {};

      var ComponentBtnGroup = type === "inline" ? _button2.default.Group : PlainComp;

      var searchFields = columns.filter(function (col) {
        return col.searchItem;
      });
      searchFields = group ? searchFields.filter(function (col) {
        return col.searchItem && col.searchItem.group === group;
      }) : searchFields;

      delete otherProps.onSearch;

      return _react2.default.createElement(
        'div',
        (0, _extends3.default)({ className: (0, _classnames2.default)(prefixCls, className) }, otherProps),
        _react2.default.createElement(
          _form2.default,
          { className: (0, _classnames2.default)({ "form-inline": type === "inline", "form-grid": type === "grid" }) },
          _react2.default.createElement(
            ComponentRow,
            (0, _extends3.default)({ className: 'row-item' }, rowopts),
            searchFields.map(function (field, i) {
              var _objectAssign = (0, _objectAssign3.default)({
                name: field.name,
                title: field.title,
                placeholder: field.title
              }, field.searchItem),
                  placeholder = _objectAssign.placeholder,
                  width = _objectAssign.width,
                  otherField = (0, _objectWithoutProperties3.default)(_objectAssign, ['placeholder', 'width']);

              switch (field.searchItem.type) {
                case 'date~':
                case 'datetime':
                case 'date':
                case 'monthDate':
                  var dateProps = (0, _extends3.default)({
                    form: form,
                    type: field.searchItem.type,
                    style: type === "inline" ? { width: width || _this3.width[field.searchItem.type] } : {},
                    format: field.searchItem.format
                  }, otherField);
                  if (field.searchItem.placeholder) {
                    dateProps.placeholder = field.searchItem.placeholder;
                  }
                  return _react2.default.createElement(
                    ComponentCol,
                    (0, _extends3.default)({ key: 'col-' + i, className: 'col-item' }, colopts),
                    _react2.default.createElement(
                      ComponentItem,
                      (0, _extends3.default)({}, formItemLayout, { label: field.title, className: 'col-item-content' }),
                      _react2.default.createElement(_form3.DateForm, dateProps)
                    )
                  );
                case 'cascade':
                case 'cascader':
                  return _react2.default.createElement(
                    ComponentCol,
                    (0, _extends3.default)({ key: 'col-' + i, className: 'col-item' }, colopts),
                    _react2.default.createElement(
                      ComponentItem,
                      (0, _extends3.default)({}, formItemLayout, { label: field.title, className: 'col-item-content' }),
                      _react2.default.createElement(_form3.CascadeForm, (0, _extends3.default)({
                        form: form,
                        allowClear: true,
                        showSearch: true,
                        style: type === "inline" ? { width: width || _this3.width.default } : {},
                        placeholder: placeholder || '请输入查询条件'
                      }, otherField))
                    )
                  );
                case 'select':
                  return _react2.default.createElement(
                    ComponentCol,
                    (0, _extends3.default)({ key: 'col-' + i, className: 'col-item' }, colopts),
                    _react2.default.createElement(
                      ComponentItem,
                      (0, _extends3.default)({}, formItemLayout, { label: field.title, className: 'col-item-content' }),
                      _react2.default.createElement(_form3.SelectForm, (0, _extends3.default)({
                        form: form,
                        allowClear: true,
                        showSearch: true,
                        dict: field.dict,
                        style: type === "inline" ? { width: width || _this3.width[field.searchItem.type] } : {},
                        placeholder: placeholder || '请输入查询条件'
                      }, otherField))
                    )
                  );
                case 'treeSelect':
                  return _react2.default.createElement(
                    ComponentCol,
                    (0, _extends3.default)({ key: 'col-' + i, className: 'col-item' }, colopts),
                    _react2.default.createElement(
                      ComponentItem,
                      (0, _extends3.default)({}, formItemLayout, { label: field.title, className: 'col-item-content' }),
                      _react2.default.createElement(_form3.TreeSelectForm, (0, _extends3.default)({
                        form: form,
                        allowClear: true,
                        showSearch: true,
                        style: type === "inline" ? { width: width || _this3.width[field.searchItem.type] } : {},
                        placeholder: placeholder || '请输入查询条件'
                      }, otherField))
                    )
                  );
                case 'custom':
                  return _react2.default.createElement(
                    ComponentCol,
                    (0, _extends3.default)({ key: 'col-' + i, className: 'col-item' }, colopts),
                    _react2.default.createElement(
                      ComponentItem,
                      (0, _extends3.default)({}, formItemLayout, { label: field.title, className: 'col-item-content' }),
                      _react2.default.createElement(_form3.CustomForm, (0, _extends3.default)({
                        form: form,
                        render: field.searchItem.render,
                        style: type === "inline" ? { width: width || _this3.width[field.searchItem.type] } : {},
                        placeholder: placeholder || '请输入查询条件'
                      }, otherField))
                    )
                  );
                case 'number':
                  return _react2.default.createElement(
                    ComponentCol,
                    (0, _extends3.default)({ key: 'col-' + i, className: 'col-item' }, colopts),
                    _react2.default.createElement(
                      ComponentItem,
                      (0, _extends3.default)({}, formItemLayout, { label: field.title, className: 'col-item-content' }),
                      _react2.default.createElement(_form3.InputNumberForm, (0, _extends3.default)({
                        form: form,
                        style: type === "inline" ? { width: width || _this3.width.default } : {},
                        placeholder: placeholder || '请输入查询条件',
                        maxLength: field.searchItem.maxLength || "100"
                      }, otherField))
                    )
                  );
                default:
                  return _react2.default.createElement(
                    ComponentCol,
                    (0, _extends3.default)({ key: 'col-' + i, className: 'col-item' }, colopts),
                    _react2.default.createElement(
                      ComponentItem,
                      (0, _extends3.default)({}, formItemLayout, { label: field.title, className: 'col-item-content' }),
                      _react2.default.createElement(_form3.InputForm, (0, _extends3.default)({
                        form: form,
                        formFieldOptions: { rules: [{ pattern: /^[^'_%&<>=?*!]*$/, message: '查询条件中不能包含特殊字符' }] },
                        style: type === "inline" ? { width: width || _this3.width.default } : {},
                        placeholder: placeholder || '请输入查询条件',
                        maxLength: field.searchItem.maxLength || "100"
                      }, otherField))
                    )
                  );
              }
            }),
            children
          ),
          _react2.default.createElement(
            ComponentBtnGroup,
            { className: 'search-btns' },
            _react2.default.createElement(
              _button2.default,
              {
                title: '\u67E5\u8BE2',
                type: type === "grid" ? "primary" : "default",
                onClick: function onClick(e) {
                  return _this3.searchForm();
                },
                htmlType: 'submit',
                icon: 'search'
              },
              '\u67E5\u8BE2'
            ),
            _react2.default.createElement(
              _button2.default,
              {
                title: '\u91CD\u7F6E',
                onClick: function onClick(e) {
                  return _this3.resetForm();
                },
                icon: 'reload'
              },
              '\u91CD\u7F6E'
            )
          )
        )
      );
    }
  }]);
  return SearchBar;
}(_react2.default.Component);

SearchBar.propTypes = {
  prefixCls: _react.PropTypes.string,
  className: _react.PropTypes.string,
  /**
   * 详见帮助文档 column.js 用法
   */
  columns: _react.PropTypes.array.isRequired,
  /**
   * 搜索条类型 inline(行内)，grid(栅格)
   */
  type: _react.PropTypes.string,
  /**
   * 搜索条件分组，设置这个属性后，会在column.js中过滤有相同group值的搜索项
   */
  group: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
  /**
   * 同antd中Grid组件中的Row配置
   */
  rows: _react.PropTypes.object,
  /**
   * 同antd中Grid组件中的Col配置
   */
  cols: _react.PropTypes.object,
  /**
   * 额外搜索项
   */
  children: _react.PropTypes.node,

  form: _react.PropTypes.object,

  /**
   * 点击查询按钮 onSearch(values, isReset) values 查询数据 isReset 是否是重置
   */
  onSearch: _react.PropTypes.func
};
SearchBar.defaultProps = {
  prefixCls: "antui-searchbar",
  type: "inline"
};
exports.default = createForm()(SearchBar);
module.exports = exports['default'];