Skip to content

Commit d03c692

Browse files
yrokhlinyrokhlin
committed
Refactored so that RenderInBody can be used as a decorator or as JSX
1 parent e0a677e commit d03c692

File tree

2 files changed

+113
-12
lines changed

2 files changed

+113
-12
lines changed

‎lib/RenderInBody/RenderInBody.js

+71-10
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
'use strict';
22

3-
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
3+
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
4+
5+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
46

57
Object.defineProperty(exports, "__esModule", {
68
value: true
79
});
8-
exports.RenderInBody = undefined;
910

1011
var _react = require('react');
1112

@@ -23,30 +24,73 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
2324

2425
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
2526

26-
var RenderInBody = exports.RenderInBody = function RenderInBody(ComposedComponent) {
27+
var RenderInBody = function (_Component) {
28+
_inherits(RenderInBody, _Component);
29+
30+
function RenderInBody() {
31+
_classCallCheck(this, RenderInBody);
32+
33+
return _possibleConstructorReturn(this, Object.getPrototypeOf(RenderInBody).apply(this, arguments));
34+
}
35+
36+
_createClass(RenderInBody, [{
37+
key: 'componentDidMount',
38+
value: function componentDidMount() {
39+
this.child = document.createElement("div");
40+
document.body.appendChild(this.child);
41+
this._renderLayer();
42+
}
43+
}, {
44+
key: 'componentDidUpdate',
45+
value: function componentDidUpdate() {
46+
this._renderLayer();
47+
}
48+
}, {
49+
key: 'componentWillUnmount',
50+
value: function componentWillUnmount() {
51+
_react2.default.unmountComponentAtNode(this.child);
52+
document.body.removeChild(this.child);
53+
}
54+
}, {
55+
key: '_renderLayer',
56+
value: function _renderLayer() {
57+
_reactDom2.default.render(this.props.children, this.child);
58+
}
59+
}, {
60+
key: 'render',
61+
value: function render() {
62+
// Render a placeholder
63+
return _react2.default.DOM.div();
64+
}
65+
}]);
66+
67+
return RenderInBody;
68+
}(_react.Component);
69+
70+
var decorateRenderInBody = function decorateRenderInBody(ComposedComponent) {
2771
var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
2872

29-
return (function (_Component) {
30-
_inherits(_class2, _Component);
73+
return function (_Component2) {
74+
_inherits(_class2, _Component2);
3175

3276
function _class2() {
3377
var _Object$getPrototypeO;
3478

35-
var _temp, _this, _ret;
79+
var _temp, _this2, _ret;
3680

3781
_classCallCheck(this, _class2);
3882

3983
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
4084
args[_key] = arguments[_key];
4185
}
4286

43-
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(_class2)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.child = null, _temp), _possibleConstructorReturn(_this, _ret);
87+
return _ret = (_temp = (_this2 = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(_class2)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this2), _this2.child = null, _temp), _possibleConstructorReturn(_this2, _ret);
4488
}
4589

4690
_createClass(_class2, [{
4791
key: 'componentDidMount',
4892
value: function componentDidMount() {
49-
this.child = document.createElement("div");
93+
this.child = document.createElement('div');
5094
document.body.appendChild(this.child);
5195
this._renderLayer();
5296
}
@@ -75,7 +119,24 @@ var RenderInBody = exports.RenderInBody = function RenderInBody(ComposedComponen
75119
}]);
76120

77121
return _class2;
78-
})(_react.Component);
122+
}(_react.Component);
123+
};
124+
125+
var _RenderInBody = function _RenderInBody(element) {
126+
var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
127+
128+
switch (typeof element === 'undefined' ? 'undefined' : _typeof(element)) {
129+
case 'object':
130+
return _react2.default.createElement(
131+
RenderInBody,
132+
null,
133+
element.children
134+
);
135+
case 'function':
136+
return decorateRenderInBody(element);
137+
default:
138+
return;
139+
}
79140
};
80141

81-
exports.default = RenderInBody;
142+
exports.default = _RenderInBody;

‎src/RenderInBody/RenderInBody.js

+42-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,37 @@
11
import React, { Component } from 'react';
22
import ReactDOM from 'react-dom';
33

4+
class RenderInBody extends Component {
5+
6+
componentDidMount() {
7+
this.child = document.createElement("div");
8+
document.body.appendChild(this.child);
9+
this._renderLayer();
10+
}
11+
12+
componentDidUpdate() {
13+
this._renderLayer();
14+
}
15+
16+
componentWillUnmount() {
17+
React.unmountComponentAtNode(this.child);
18+
document.body.removeChild(this.child);
19+
}
20+
421

5-
export const RenderInBody = (ComposedComponent, options = {}) => {
22+
_renderLayer() {
23+
ReactDOM.render(this.props.children, this.child);
24+
}
25+
26+
render() {
27+
// Render a placeholder
28+
return React.DOM.div();
29+
}
30+
31+
32+
}
33+
34+
const decorateRenderInBody = (ComposedComponent, options = {}) => {
635

736
return class extends Component {
837

@@ -36,4 +65,15 @@ export const RenderInBody = (ComposedComponent, options = {}) => {
3665

3766
}
3867

39-
export default RenderInBody;
68+
const _RenderInBody = (element, options = {}) => {
69+
switch(typeof element) {
70+
case 'object':
71+
return (<RenderInBody>{element.children}</RenderInBody>);
72+
case 'function':
73+
return decorateRenderInBody(element);
74+
default:
75+
return;
76+
}
77+
}
78+
79+
export default _RenderInBody;

0 commit comments

Comments
 (0)