jc-biz-components/lib/jc-filter/index.js

jc component library based on Antd

'use strict';

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

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

var _row2 = _interopRequireDefault(_row);

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

var _button2 = _interopRequireDefault(_button);

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

var _col2 = _interopRequireDefault(_col);

var _input = require('antd/lib/input');

var _input2 = _interopRequireDefault(_input);

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 _treeSelect = require('antd/lib/tree-select');

var _treeSelect2 = _interopRequireDefault(_treeSelect);

var _form = require('antd/lib/form');

var _form2 = _interopRequireDefault(_form);

var _select = require('antd/lib/select');

var _select2 = _interopRequireDefault(_select);

var _datePicker = require('antd/lib/date-picker');

var _datePicker2 = _interopRequireDefault(_datePicker);

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

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

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

require('antd/lib/input/style');

require('antd/lib/tree-select/style');

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

require('antd/lib/select/style');

require('antd/lib/date-picker/style');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _lang = require('../jc-_utils/lang');

var _reactRouterDom = require('react-router-dom');

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

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

var RangePicker = _datePicker2['default'].RangePicker;
var Option = _select2['default'].Option;
var FormItem = _form2['default'].Item;
var TreeNode = _treeSelect2['default'].TreeNode;

var JcFilter = function (_Component) {
  (0, _inherits3['default'])(JcFilter, _Component);

  function JcFilter() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3['default'])(this, JcFilter);

    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 = JcFilter.__proto__ || Object.getPrototypeOf(JcFilter)).call.apply(_ref, [this].concat(args))), _this), _this._renderInput = function (formItem) {
      var getFieldDecorator = _this.props.form.getFieldDecorator;

      return getFieldDecorator(formItem.fieldName, {
        initialValue: formItem.initialValue || '',
        rules: formItem.rules
      })(_react2['default'].createElement(_input2['default'], { style: { width: '100%' }, placeholder: '请输入' + formItem.label, autoComplete: 'off' }));
    }, _this._filterOption = function (input, option) {
      return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    }, _this._renderSelect = function (formItem) {
      var getFieldDecorator = _this.props.form.getFieldDecorator;

      return getFieldDecorator(formItem.fieldName, {
        initialValue: formItem.initialValue || undefined,
        rules: formItem.rules
      })(_react2['default'].createElement(
        _select2['default'],
        {
          allowClear: true,
          style: { width: '100%' },
          showSearch: formItem.showSearch || false,
          placeholder: '请选择' + formItem.label,
          getPopupContainer: function getPopupContainer() {
            return document.getElementById('form');
          },
          filterOption: _this._filterOption
        },
        _this._renderOption(formItem.dictionary)
      ));
    }, _this._renderOption = function (obj) {
      if ((0, _lang.isArray)(obj)) {
        return obj.map(function (item) {
          return _react2['default'].createElement(
            Option,
            { key: item.key, value: item.key },
            item.value
          );
        });
      } else {
        return Object.keys(obj).map(function (key) {
          return _react2['default'].createElement(
            Option,
            { key: key, value: key },
            obj[key]
          );
        });
      }
    }, _this._renderTreeSelect = function (formItem) {
      var getFieldDecorator = _this.props.form.getFieldDecorator;

      return getFieldDecorator(formItem.fieldName, {
        initialValue: formItem.initialValue || undefined,
        rules: formItem.rules
      })(_react2['default'].createElement(
        _treeSelect2['default'],
        {
          showSearch: false,
          allowClear: true,
          dropdownStyle: { maxHeight: 200, overflow: 'auto' },
          getPopupContainer: function getPopupContainer() {
            return document.getElementById('form');
          },
          placeholder: '请选择' + formItem.label,
          treeDefaultExpandAll: true
        },
        _this._loopTree(formItem.treeData)
      ));
    }, _this._loopTree = function (treeData) {
      if (!treeData || treeData.length === 0) {
        return;
      }
      return treeData.map(function (item, index) {
        if (item.childrens && item.childrens.length > 0) {
          return _react2['default'].createElement(
            TreeNode,
            {
              title: item.categoryName,
              value: item.categoryId,
              key: item.categoryId + '-' + index,
              disabled: !item.categoryId
            },
            _this._loopTree(item.childrens)
          );
        } else {
          return _react2['default'].createElement(TreeNode, { title: item.categoryName, value: item.categoryId, key: item.categoryId });
        }
      });
    }, _this._renderRangePicker = function (formItem) {
      var getFieldDecorator = _this.props.form.getFieldDecorator;

      return getFieldDecorator(formItem.fieldName, {
        initialValue: formItem.initialValue.length > 0 ? [(0, _moment2['default'])(formItem.initialValue[0]), (0, _moment2['default'])(formItem.initialValue[1])] : [],
        rules: formItem.rules
      })(_react2['default'].createElement(RangePicker, {
        style: { width: '100%' },
        format: formItem.format || 'YYYY-MM-DD HH:mm:ss',
        placeholder: ['开始日期', '结束日期'],
        showTime: {
          hideDisabledOptions: false
        }
      }));
    }, _this._renderFormItem = function (formItems) {
      return formItems.map(function (formItem, index) {
        return _react2['default'].createElement(
          _col2['default'],
          { md: 8, sm: 24, key: index },
          _react2['default'].createElement(
            FormItem,
            { label: formItem.label },
            function () {
              switch (formItem.componentType) {
                case 'Input':
                  return _this._renderInput(formItem);
                case 'Select':
                  return _this._renderSelect(formItem);
                case 'RangePicker':
                  return _this._renderRangePicker(formItem);
                case 'ClassifyTree':
                  return _this._renderClassifyTree(formItem);
                case 'TreeSelect':
                  return _this._renderTreeSelect(formItem);
                default:
                  return _react2['default'].createElement(
                    'p',
                    null,
                    '\u6682\u4E0D\u652F\u6301'
                  );
              }
            }()
          )
        );
      });
    }, _this._renderButtons = function (buttons) {
      return _react2['default'].createElement(
        'span',
        { className: 'jc-filter-btn' },
        buttons.map(function (button, index) {
          if (button.type === 'action') {
            return _react2['default'].createElement(
              _button2['default'],
              {
                style: { marginLeft: index === 0 ? 0 : 8 },
                key: index,
                type: button.btnType || 'default',
                onClick: function onClick() {
                  return button.onClick(_this.props.form.getFieldsValue());
                },
                disabled: button.btnDisabled
              },
              button.desc
            );
          } else if (button.type === 'link') {
            return _react2['default'].createElement(
              _reactRouterDom.Link,
              { key: index, to: button.url },
              _react2['default'].createElement(
                _button2['default'],
                { type: 'default', style: { marginLeft: index === 0 ? 0 : 8 } },
                button.desc
              )
            );
          }
        })
      );
    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  (0, _createClass3['default'])(JcFilter, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          fields = _props.fields,
          buttons = _props.buttons;

      return _react2['default'].createElement(
        'div',
        { className: 'jc-filter' },
        _react2['default'].createElement(
          _form2['default'],
          { id: 'form', layout: 'inline' },
          _react2['default'].createElement(
            _row2['default'],
            { gutter: { md: 8, lg: 24, xl: 48 }, type: 'flex', align: 'middle' },
            this._renderFormItem(fields),
            fields.length % 3 !== 0 && _react2['default'].createElement(
              'div',
              { style: { overflow: 'hidden', flex: '1' } },
              _react2['default'].createElement(
                'div',
                { style: { float: 'right' } },
                this._renderButtons(buttons)
              )
            )
          ),
          fields.length % 3 === 0 && _react2['default'].createElement(
            'div',
            { style: { overflow: 'hidden' } },
            _react2['default'].createElement(
              'div',
              { style: { float: 'right' } },
              this._renderButtons(buttons)
            )
          )
        )
      );
    }
  }]);
  return JcFilter;
}(_react.Component);

JcFilter.propTypes = {
  fields: _propTypes2['default'].array,
  buttons: _propTypes2['default'].array
};

exports['default'] = _form2['default'].create()(JcFilter);
module.exports = exports['default'];