jc-biz-components/lib/jc-modal/ModalForm.js

jc component library based on Antd

'use strict';

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

var _modal = require('antd/lib/modal');

var _modal2 = _interopRequireDefault(_modal);

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

var _button2 = _interopRequireDefault(_button);

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _input2 = _interopRequireDefault(_input);

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

var _message3 = _interopRequireDefault(_message2);

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

var _form2 = _interopRequireDefault(_form);

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

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

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

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

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

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

// import './ModalForm.css'

var defaultFormItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 }
};

var FormItem = _form2['default'].Item;

var showModalForm = function showModalForm() {
  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var maskDiv = document.createElement('div');
  document.body.appendChild(maskDiv);

  var _close = function _close() {
    var unmountResult = _reactDom2['default'].unmountComponentAtNode(maskDiv);
    if (unmountResult) {
      maskDiv.parentNode.removeChild(maskDiv);
    }
  };

  var title = params.title,
      onOk = params.onOk,
      okText = params.okText,
      _params$showCancel = params.showCancel,
      showCancel = _params$showCancel === undefined ? true : _params$showCancel,
      fields = params.fields,
      validator = params.validator,
      formItemLayout = params.formItemLayout;

  var ModalForm = function (_React$Component) {
    (0, _inherits3['default'])(ModalForm, _React$Component);

    function ModalForm() {
      var _ref;

      var _temp, _this, _ret;

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

      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 = ModalForm.__proto__ || Object.getPrototypeOf(ModalForm)).call.apply(_ref, [this].concat(args))), _this), _this._onSubmit = function (e) {
        e.preventDefault();
        _this.props.form.validateFields(function (err, values) {
          if (!err) {
            var isFinish = true;
            if (validator) {
              var validateResult = validator(values);
              if (validateResult.error) {
                _message3['default'].error(validateResult.payload, 3);
                isFinish = false;
              }
            }

            if (isFinish) {
              onOk && onOk(values);
              _close();
            }
          }
        });
      }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
    }

    (0, _createClass3['default'])(ModalForm, [{
      key: 'render',
      value: function render() {
        var form = this.props.form;
        var getFieldDecorator = form.getFieldDecorator;

        return _react2['default'].createElement(
          _modal2['default'],
          {
            visible: true,
            onCancel: _close,
            maskClosable: false,
            footer: null,
            title: title || '输入框',
            style: { minWidth: '580px' }
          },
          _react2['default'].createElement(
            'div',
            null,
            _react2['default'].createElement(
              _form2['default'],
              {
                className: this.props.prefixCls,
                onSubmit: this._onSubmit
              },
              fields.map(function (field) {
                return _react2['default'].createElement(
                  FormItem,
                  (0, _extends3['default'])({
                    key: field.id
                  }, formItemLayout || defaultFormItemLayout, field.props),
                  getFieldDecorator(field.id, field.options)(field.element || _react2['default'].createElement(_input2['default'], { placeholder: field.placeHolder }))
                );
              }),
              _react2['default'].createElement(
                FormItem,
                { className: this.props.prefixCls + '-footer' },
                showCancel && _react2['default'].createElement(
                  _button2['default'],
                  {
                    key: 'cancel',
                    onClick: _close,
                    className: this.props.prefixCls + '-btn'
                  },
                  '\u53D6\u6D88'
                ),
                _react2['default'].createElement(
                  _button2['default'],
                  {
                    key: 'confirm',
                    type: 'primary',
                    htmlType: 'submit'
                  },
                  okText || '确定'
                )
              )
            )
          )
        );
      }
    }]);
    return ModalForm;
  }(_react2['default'].Component);

  ModalForm.defaultProps = {
    prefixCls: 'jc-modal-form'
  };


  _reactDom2['default'].render(_react2['default'].createElement(_form2['default'].create()(ModalForm)), maskDiv);
};

exports.showModalForm = showModalForm;