1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
6 |
|
7 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
8 |
|
9 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
10 |
|
11 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
12 |
|
13 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
14 |
|
15 | var _inherits3 = _interopRequireDefault(_inherits2);
|
16 |
|
17 | var _class, _temp;
|
18 |
|
19 | var _react = require('react');
|
20 |
|
21 | var _react2 = _interopRequireDefault(_react);
|
22 |
|
23 | var _reactDom = require('react-dom');
|
24 |
|
25 | var _propTypes = require('prop-types');
|
26 |
|
27 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
28 |
|
29 | var _reactLifecyclesCompat = require('react-lifecycles-compat');
|
30 |
|
31 | var _util = require('../util');
|
32 |
|
33 | var _findNode = require('./utils/find-node');
|
34 |
|
35 | var _findNode2 = _interopRequireDefault(_findNode);
|
36 |
|
37 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
38 |
|
39 | var makeChain = _util.func.makeChain;
|
40 |
|
41 |
|
42 | var getContainerNode = function getContainerNode(props) {
|
43 | var targetNode = (0, _findNode2.default)(props.target);
|
44 | return (0, _findNode2.default)(props.container, targetNode);
|
45 | };
|
46 |
|
47 | var Gateway = (_temp = _class = function (_Component) {
|
48 | (0, _inherits3.default)(Gateway, _Component);
|
49 |
|
50 | function Gateway(props) {
|
51 | (0, _classCallCheck3.default)(this, Gateway);
|
52 |
|
53 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
|
54 |
|
55 | _this.updateContainer = function () {
|
56 | var containerNode = getContainerNode(_this.props);
|
57 |
|
58 | if (containerNode !== _this.state.containerNode) {
|
59 |
|
60 | _this.setState({
|
61 | containerNode: containerNode
|
62 | });
|
63 | }
|
64 | };
|
65 |
|
66 | _this.saveChildRef = function (ref) {
|
67 | _this.child = ref;
|
68 | };
|
69 |
|
70 | _this.state = {
|
71 | containerNode: null
|
72 | };
|
73 | return _this;
|
74 | }
|
75 |
|
76 | Gateway.prototype.componentDidMount = function componentDidMount() {
|
77 | this.updateContainer();
|
78 | };
|
79 |
|
80 | Gateway.prototype.componentDidUpdate = function componentDidUpdate() {
|
81 | this.updateContainer();
|
82 | };
|
83 |
|
84 | Gateway.prototype.getChildNode = function getChildNode() {
|
85 | try {
|
86 | return (0, _reactDom.findDOMNode)(this.child);
|
87 | } catch (err) {
|
88 | return null;
|
89 | }
|
90 | };
|
91 |
|
92 | Gateway.prototype.render = function render() {
|
93 | var containerNode = this.state.containerNode;
|
94 |
|
95 |
|
96 | if (!containerNode) {
|
97 | return null;
|
98 | }
|
99 |
|
100 | var children = this.props.children;
|
101 |
|
102 | var child = children ? _react.Children.only(children) : null;
|
103 | if (!child) {
|
104 | return null;
|
105 | }
|
106 |
|
107 | if (typeof child.ref === 'string') {
|
108 | throw new Error('Can not set ref by string in Gateway, use function instead.');
|
109 | }
|
110 | child = _react2.default.cloneElement(child, {
|
111 | ref: makeChain(this.saveChildRef, child.ref)
|
112 | });
|
113 |
|
114 | return (0, _reactDom.createPortal)(child, containerNode);
|
115 | };
|
116 |
|
117 | return Gateway;
|
118 | }(_react.Component), _class.propTypes = {
|
119 | children: _propTypes2.default.node,
|
120 | container: _propTypes2.default.any,
|
121 | target: _propTypes2.default.any
|
122 | }, _class.defaultProps = {
|
123 | container: function container() {
|
124 | return document.body;
|
125 | }
|
126 | }, _temp);
|
127 | Gateway.displayName = 'Gateway';
|
128 | exports.default = (0, _reactLifecyclesCompat.polyfill)(Gateway);
|
129 | module.exports = exports['default']; |
\ | No newline at end of file |