1 | import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
2 | import _createClass from "@babel/runtime/helpers/esm/createClass";
|
3 | import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
4 | import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
5 | import _get from "@babel/runtime/helpers/esm/get";
|
6 | import _inherits from "@babel/runtime/helpers/esm/inherits";
|
7 | import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
8 | import { warn as _warn } from "@instructure/console";
|
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 | import React from 'react';
|
34 | import PropTypes from 'prop-types';
|
35 | import { decorator } from '@instructure/ui-decorator';
|
36 | import { isEmpty, shallowEqual, deepEqual, hash } from '@instructure/ui-utils';
|
37 | import { uid } from '@instructure/uid';
|
38 | import { findDOMNode } from '@instructure/ui-dom-utils';
|
39 | import { ThemeContext } from "./ThemeContext.js";
|
40 | import { applyVariablesToNode } from "./applyVariablesToNode.js";
|
41 | import { setTextDirection } from "./setTextDirection.js";
|
42 | import { generateComponentTheme, generateTheme, registerComponentTheme, mountComponentStyles } from "./ThemeRegistry.js";
|
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 | var emptyObj = {};
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 | var themeable = decorator(function (ComposedComponent, theme) {
|
102 | var styles = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
|
103 | var adapter = arguments.length > 3 ? arguments[3] : void 0;
|
104 | var displayName = ComposedComponent.displayName || ComposedComponent.name;
|
105 | var componentId = "".concat(styles && styles.componentId || hash(ComposedComponent, 8));
|
106 |
|
107 | if (process.env.NODE_ENV !== 'production') {
|
108 | componentId = "".concat(displayName, "__").concat(componentId);
|
109 |
|
110 |
|
111 |
|
112 |
|
113 | _warn(parseInt(React.version) >= 15, "[themeable] React 15 or higher is required. You are running React version ".concat(React.version, "."));
|
114 | }
|
115 |
|
116 | var contextKey = Symbol(componentId);
|
117 |
|
118 | var template = function template() {};
|
119 |
|
120 | if (styles && styles.template) {
|
121 | template = typeof styles.template === 'function' ? styles.template : function () {
|
122 |
|
123 |
|
124 |
|
125 | _warn(false, '[themeable] Invalid styles for: %O. Use @instructure/babel-plugin-themeable-styles to transform CSS imports.', displayName);
|
126 |
|
127 | return '';
|
128 | };
|
129 | }
|
130 |
|
131 | registerComponentTheme(contextKey, theme);
|
132 |
|
133 | var getContext = function getContext(context) {
|
134 | var themeContext = ThemeContext.getThemeContext(context);
|
135 | return themeContext || emptyObj;
|
136 | };
|
137 |
|
138 | var getThemeFromContext = function getThemeFromContext(context) {
|
139 | var _getContext = getContext(context),
|
140 | theme = _getContext.theme;
|
141 |
|
142 | if (theme && theme[contextKey]) {
|
143 | return Object.assign({}, theme[contextKey]);
|
144 | } else {
|
145 | return emptyObj;
|
146 | }
|
147 | };
|
148 |
|
149 | var generateThemeForContextKey = function generateThemeForContextKey(themeKey, overrides) {
|
150 | return generateComponentTheme(contextKey, themeKey, overrides);
|
151 | };
|
152 |
|
153 | var ThemeableComponent = function (_ComposedComponent) {
|
154 | _inherits(ThemeableComponent, _ComposedComponent);
|
155 |
|
156 | var _super = _createSuper(ThemeableComponent);
|
157 |
|
158 | function ThemeableComponent() {
|
159 | var _this;
|
160 |
|
161 | _classCallCheck(this, ThemeableComponent);
|
162 |
|
163 | var res = _this = _super.apply(this, arguments);
|
164 |
|
165 | _this._themeCache = null;
|
166 | _this._instanceId = uid(displayName);
|
167 | var defaultTheme = generateThemeForContextKey();
|
168 | mountComponentStyles(template, defaultTheme, componentId);
|
169 | return _possibleConstructorReturn(_this, res);
|
170 | }
|
171 |
|
172 | _createClass(ThemeableComponent, [{
|
173 | key: "componentDidMount",
|
174 | value: function componentDidMount() {
|
175 | this.applyTheme();
|
176 | setTextDirection();
|
177 |
|
178 | if (_get(_getPrototypeOf(ThemeableComponent.prototype), "componentDidMount", this)) {
|
179 | _get(_getPrototypeOf(ThemeableComponent.prototype), "componentDidMount", this).call(this);
|
180 | }
|
181 | }
|
182 | }, {
|
183 | key: "shouldComponentUpdate",
|
184 | value: function shouldComponentUpdate(nextProps, nextState, nextContext) {
|
185 | var themeContextWillChange = !deepEqual(ThemeContext.getThemeContext(this.context), ThemeContext.getThemeContext(nextContext));
|
186 | if (themeContextWillChange) return true;
|
187 |
|
188 | if (_get(_getPrototypeOf(ThemeableComponent.prototype), "shouldComponentUpdate", this)) {
|
189 | return _get(_getPrototypeOf(ThemeableComponent.prototype), "shouldComponentUpdate", this).call(this, nextProps, nextState, nextContext);
|
190 | }
|
191 |
|
192 | return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState) || !shallowEqual(this.context, nextContext);
|
193 | }
|
194 | }, {
|
195 | key: "componentDidUpdate",
|
196 | value: function componentDidUpdate(prevProps, prevState, prevContext) {
|
197 | if (!deepEqual(prevProps.theme, this.props.theme) || !deepEqual(getThemeFromContext(prevContext), getThemeFromContext(this.context))) {
|
198 | this._themeCache = null;
|
199 | }
|
200 |
|
201 | this.applyTheme();
|
202 |
|
203 | if (_get(_getPrototypeOf(ThemeableComponent.prototype), "componentDidUpdate", this)) {
|
204 | _get(_getPrototypeOf(ThemeableComponent.prototype), "componentDidUpdate", this).call(this, prevProps, prevState, prevContext);
|
205 | }
|
206 | }
|
207 | }, {
|
208 | key: "applyTheme",
|
209 | value: function applyTheme(DOMNode) {
|
210 | if (isEmpty(this.theme)) {
|
211 | return;
|
212 | }
|
213 |
|
214 | var defaultTheme = generateThemeForContextKey();
|
215 | applyVariablesToNode(DOMNode || findDOMNode(this),
|
216 | this.theme, defaultTheme, componentId);
|
217 | }
|
218 | }, {
|
219 | key: "scope",
|
220 | get: function get() {
|
221 | return "".concat(componentId, "__").concat(this._instanceId);
|
222 | }
|
223 | }, {
|
224 | key: "theme",
|
225 | get: function get() {
|
226 | if (this._themeCache !== null) {
|
227 | return this._themeCache;
|
228 | }
|
229 |
|
230 | var _getContext2 = getContext(this.context),
|
231 | immutable = _getContext2.immutable;
|
232 |
|
233 | var theme = getThemeFromContext(this.context);
|
234 |
|
235 | if (this.props.theme && !isEmpty(this.props.theme)) {
|
236 | if (!theme) {
|
237 | theme = this.props.theme;
|
238 | } else if (immutable) {
|
239 |
|
240 |
|
241 |
|
242 | _warn(false, '[themeable] Parent theme is immutable. Cannot apply theme: %O', this.props.theme);
|
243 | } else {
|
244 | theme = isEmpty(theme) ? this.props.theme : Object.assign({}, theme, this.props.theme);
|
245 | }
|
246 | }
|
247 |
|
248 |
|
249 | if (typeof adapter === 'function') {
|
250 | theme = adapter({
|
251 | theme: theme,
|
252 | displayName: displayName
|
253 | });
|
254 | }
|
255 |
|
256 |
|
257 | this._themeCache = generateThemeForContextKey(null, theme);
|
258 | return this._themeCache;
|
259 | }
|
260 | }]);
|
261 |
|
262 | return ThemeableComponent;
|
263 | }(ComposedComponent);
|
264 |
|
265 | ThemeableComponent.componentId = componentId;
|
266 | ThemeableComponent.theme = contextKey;
|
267 | ThemeableComponent.contextTypes = Object.assign({}, ComposedComponent.contextTypes, ThemeContext.types);
|
268 | ThemeableComponent.propTypes = Object.assign({}, ComposedComponent.propTypes, {
|
269 | theme: PropTypes.object
|
270 | }
|
271 | );
|
272 | ThemeableComponent.generateTheme = generateThemeForContextKey;
|
273 | return ThemeableComponent;
|
274 | });
|
275 |
|
276 |
|
277 |
|
278 |
|
279 |
|
280 |
|
281 |
|
282 |
|
283 |
|
284 | themeable.generateTheme = generateTheme;
|
285 | export default themeable;
|
286 | export { themeable }; |
\ | No newline at end of file |