1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
12 |
|
13 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
14 |
|
15 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
16 |
|
17 | var _createClass3 = _interopRequireDefault(_createClass2);
|
18 |
|
19 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
20 |
|
21 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
22 |
|
23 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
24 |
|
25 | var _inherits3 = _interopRequireDefault(_inherits2);
|
26 |
|
27 | var _react = require('react');
|
28 |
|
29 | var _react2 = _interopRequireDefault(_react);
|
30 |
|
31 | var _reactDom = require('react-dom');
|
32 |
|
33 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
34 |
|
35 | var _Dialog = require('./Dialog');
|
36 |
|
37 | var _Dialog2 = _interopRequireDefault(_Dialog);
|
38 |
|
39 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
40 |
|
41 | function noop() {}
|
42 | var IS_REACT_16 = !!_reactDom2['default'].createPortal;
|
43 |
|
44 | var DialogWrap = function (_React$Component) {
|
45 | (0, _inherits3['default'])(DialogWrap, _React$Component);
|
46 |
|
47 | function DialogWrap() {
|
48 | (0, _classCallCheck3['default'])(this, DialogWrap);
|
49 |
|
50 | var _this = (0, _possibleConstructorReturn3['default'])(this, (DialogWrap.__proto__ || Object.getPrototypeOf(DialogWrap)).apply(this, arguments));
|
51 |
|
52 | _this.saveRef = function (node) {
|
53 | if (IS_REACT_16) {
|
54 | _this._component = node;
|
55 | }
|
56 | };
|
57 | _this.getComponent = function (visible) {
|
58 | var props = (0, _extends3['default'])({}, _this.props);
|
59 | ['visible', 'onAnimateLeave'].forEach(function (key) {
|
60 | if (props.hasOwnProperty(key)) {
|
61 | delete props[key];
|
62 | }
|
63 | });
|
64 | return _react2['default'].createElement(_Dialog2['default'], (0, _extends3['default'])({}, props, { visible: visible, onAnimateLeave: _this.removeContainer, ref: _this.saveRef }));
|
65 | };
|
66 | _this.removeContainer = function () {
|
67 | if (_this.container) {
|
68 | if (!IS_REACT_16) {
|
69 | _reactDom2['default'].unmountComponentAtNode(_this.container);
|
70 | }
|
71 | _this.container.parentNode.removeChild(_this.container);
|
72 | _this.container = null;
|
73 | }
|
74 | };
|
75 | _this.getContainer = function () {
|
76 | if (!_this.container) {
|
77 | var container = document.createElement('div');
|
78 | var containerId = _this.props.prefixCls + '-container-' + new Date().getTime();
|
79 | container.setAttribute('id', containerId);
|
80 | document.body.appendChild(container);
|
81 | _this.container = container;
|
82 | }
|
83 | return _this.container;
|
84 | };
|
85 | return _this;
|
86 | }
|
87 |
|
88 | (0, _createClass3['default'])(DialogWrap, [{
|
89 | key: 'componentDidMount',
|
90 | value: function componentDidMount() {
|
91 | if (this.props.visible) {
|
92 | this.componentDidUpdate();
|
93 | }
|
94 | }
|
95 | }, {
|
96 | key: 'shouldComponentUpdate',
|
97 | value: function shouldComponentUpdate(_ref) {
|
98 | var visible = _ref.visible;
|
99 |
|
100 | return !!(this.props.visible || visible);
|
101 | }
|
102 | }, {
|
103 | key: 'componentWillUnmount',
|
104 | value: function componentWillUnmount() {
|
105 | if (this.props.visible) {
|
106 | if (!IS_REACT_16) {
|
107 | this.renderDialog(false);
|
108 | } else {
|
109 |
|
110 | this.removeContainer();
|
111 | }
|
112 | } else {
|
113 | this.removeContainer();
|
114 | }
|
115 | }
|
116 | }, {
|
117 | key: 'componentDidUpdate',
|
118 | value: function componentDidUpdate() {
|
119 | if (!IS_REACT_16) {
|
120 | this.renderDialog(this.props.visible);
|
121 | }
|
122 | }
|
123 | }, {
|
124 | key: 'renderDialog',
|
125 | value: function renderDialog(visible) {
|
126 | _reactDom2['default'].unstable_renderSubtreeIntoContainer(this, this.getComponent(visible), this.getContainer());
|
127 | }
|
128 | }, {
|
129 | key: 'render',
|
130 | value: function render() {
|
131 | var visible = this.props.visible;
|
132 |
|
133 | if (IS_REACT_16 && (visible || this._component)) {
|
134 | return _reactDom2['default'].createPortal(this.getComponent(visible), this.getContainer());
|
135 | }
|
136 | return null;
|
137 | }
|
138 | }]);
|
139 | return DialogWrap;
|
140 | }(_react2['default'].Component);
|
141 |
|
142 | exports['default'] = DialogWrap;
|
143 |
|
144 | DialogWrap.defaultProps = {
|
145 | visible: false,
|
146 | prefixCls: 'rmc-dialog',
|
147 | onClose: noop
|
148 | };
|
149 | module.exports = exports['default']; |
\ | No newline at end of file |