zent/lib/dialog/Dialog.js

一套前端设计语言和基于React的实现

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

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 _portal = require('../portal');

var _portal2 = _interopRequireDefault(_portal);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _DialogEl = require('./DialogEl');

var _DialogEl2 = _interopRequireDefault(_DialogEl);

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

var withNonScrollable = _portal2['default'].withNonScrollable,
    withESCToClose = _portal2['default'].withESCToClose;

var DialogPortal = withNonScrollable(_portal2['default']);
var DialogPortalESCToClose = withESCToClose(DialogPortal);

var Dialog = function (_ref) {
  (0, _inherits3['default'])(Dialog, _ref);

  function Dialog() {
    var _ref2;

    var _temp, _this, _ret;

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

    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 = Dialog.__proto__ || Object.getPrototypeOf(Dialog)).call.apply(_ref2, [this].concat(args))), _this), _this.onClose = function (e) {
      _this.props.onClose(e);
    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  (0, _createClass3['default'])(Dialog, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          visible = _props.visible,
          prefix = _props.prefix,
          closeBtn = _props.closeBtn,
          style = _props.style;

      // load default max/min-width value when width is not specified in style prop

      var elStyle = (0, _extends3['default'])({}, style.width ? {} : { minWidth: '450px', maxWidth: '75%' }, style);

      // 有关闭按钮的时候同时具有ESC关闭的行为
      var PortalComponent = closeBtn ? DialogPortalESCToClose : DialogPortal;

      return _react2['default'].createElement(
        PortalComponent,
        {
          visible: visible,
          onClose: this.onClose,
          className: prefix + '-dialog-r-anchor'
        },
        _react2['default'].createElement(
          _DialogEl2['default'],
          (0, _extends3['default'])({}, this.props, { onClose: this.onClose, style: elStyle }),
          this.props.children
        )
      );
    }
  }]);
  return Dialog;
}(_react.PureComponent || _react.Component);

Dialog.propTypes = {
  prefix: _propTypes2['default'].string,
  onClose: _propTypes2['default'].func,
  visible: _propTypes2['default'].bool,
  className: _propTypes2['default'].string,
  style: _propTypes2['default'].object,
  title: _propTypes2['default'].node,
  closeBtn: _propTypes2['default'].bool,
  mask: _propTypes2['default'].bool,
  maskClosable: _propTypes2['default'].bool,
  footer: _propTypes2['default'].node
};
Dialog.defaultProps = {
  prefix: 'zent',
  onClose: function onClose() {},

  visible: false,
  className: '',
  style: {},
  title: '',
  closeBtn: true,
  mask: true,
  maskClosable: true,
  footer: null
};
exports['default'] = Dialog;