forked from koistya/react-body
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.js
106 lines (84 loc) · 3.01 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
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 _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Conditionally adds CSS class name(s) to document.body. For example:
*
* <Body className="dark" if={this.context.theme.isDark} />
*/
/**
* Copyright © 2016-present Konstantin Tarkus <[email protected]>
*/
var Body = function (_React$Component) {
(0, _inherits3.default)(Body, _React$Component);
function Body() {
(0, _classCallCheck3.default)(this, Body);
return (0, _possibleConstructorReturn3.default)(this, (Body.__proto__ || (0, _getPrototypeOf2.default)(Body)).apply(this, arguments));
}
(0, _createClass3.default)(Body, [{
key: 'componentDidMount',
value: function componentDidMount() {
if (this.props.if) {
this.props.className.split(' ').forEach(function (c) {
document.body.classList.add(c);
});
}
}
}, {
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return this.props.if !== nextProps.if || this.props.className !== nextProps;
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
var _this2 = this;
this.props.className.split(' ').forEach(function (c) {
document.body.classList[_this2.props.if ? 'add' : 'remove'](c);
});
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.props.className.split(' ').forEach(function (c) {
document.body.classList.remove(c);
});
}
}, {
key: 'render',
value: function render() {
return this.props.if ? _react2.default.createElement('script', {
dangerouslySetInnerHTML: {
__html: this.props.className.split(' ').map(function (c) {
return 'document.body.classList.add(' + c + ');';
}).join(' ')
}
}) : null;
}
}]);
return Body;
}(_react2.default.Component);
Body.defaultProps = {
if: true
};
Body.propTypes = {
className: _propTypes2.default.string.isRequired,
if: _propTypes2.default.bool.isRequired
};
exports.default = Body;