UNPKG

7.15 kBJavaScriptView Raw
1'use strict';
2
3Object.defineProperty(exports, '__esModule', { value: true });
4
5var _extends = require('@babel/runtime/helpers/extends');
6var React = require('react');
7var isPropValid = require('@emotion/is-prop-valid');
8var react = require('@emotion/react');
9var utils = require('@emotion/utils');
10var serialize = require('@emotion/serialize');
11
12function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
13
14function _interopNamespace(e) {
15 if (e && e.__esModule) return e;
16 var n = Object.create(null);
17 if (e) {
18 Object.keys(e).forEach(function (k) {
19 if (k !== 'default') {
20 var d = Object.getOwnPropertyDescriptor(e, k);
21 Object.defineProperty(n, k, d.get ? d : {
22 enumerable: true,
23 get: function () {
24 return e[k];
25 }
26 });
27 }
28 });
29 }
30 n['default'] = e;
31 return Object.freeze(n);
32}
33
34var React__namespace = /*#__PURE__*/_interopNamespace(React);
35var isPropValid__default = /*#__PURE__*/_interopDefault(isPropValid);
36
37var testOmitPropsOnStringTag = isPropValid__default['default'];
38
39var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
40 return key !== 'theme';
41};
42
43var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
44 return typeof tag === 'string' && // 96 is one less than the char code
45 // for "a" so this is checking that
46 // it's a lowercase character
47 tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
48};
49var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {
50 var shouldForwardProp;
51
52 if (options) {
53 var optionsShouldForwardProp = options.shouldForwardProp;
54 shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {
55 return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
56 } : optionsShouldForwardProp;
57 }
58
59 if (typeof shouldForwardProp !== 'function' && isReal) {
60 shouldForwardProp = tag.__emotion_forwardProp;
61 }
62
63 return shouldForwardProp;
64};
65
66var isBrowser = typeof document !== 'undefined';
67var useInsertionEffect = React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : function useInsertionEffect(create) {
68 create();
69};
70function useInsertionEffectMaybe(create) {
71 if (!isBrowser) {
72 return create();
73 }
74
75 useInsertionEffect(create);
76}
77
78var isBrowser$1 = typeof document !== 'undefined';
79
80var Insertion = function Insertion(_ref) {
81 var cache = _ref.cache,
82 serialized = _ref.serialized,
83 isStringTag = _ref.isStringTag;
84 utils.registerStyles(cache, serialized, isStringTag);
85 var rules = useInsertionEffectMaybe(function () {
86 return utils.insertStyles(cache, serialized, isStringTag);
87 });
88
89 if (!isBrowser$1 && rules !== undefined) {
90 var _ref2;
91
92 var serializedNames = serialized.name;
93 var next = serialized.next;
94
95 while (next !== undefined) {
96 serializedNames += ' ' + next.name;
97 next = next.next;
98 }
99
100 return /*#__PURE__*/React.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
101 __html: rules
102 }, _ref2.nonce = cache.sheet.nonce, _ref2));
103 }
104
105 return null;
106};
107
108var createStyled = function createStyled(tag, options) {
109
110 var isReal = tag.__emotion_real === tag;
111 var baseTag = isReal && tag.__emotion_base || tag;
112 var identifierName;
113 var targetClassName;
114
115 if (options !== undefined) {
116 identifierName = options.label;
117 targetClassName = options.target;
118 }
119
120 var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
121 var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
122 var shouldUseAs = !defaultShouldForwardProp('as');
123 return function () {
124 var args = arguments;
125 var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
126
127 if (identifierName !== undefined) {
128 styles.push("label:" + identifierName + ";");
129 }
130
131 if (args[0] == null || args[0].raw === undefined) {
132 styles.push.apply(styles, args);
133 } else {
134
135 styles.push(args[0][0]);
136 var len = args.length;
137 var i = 1;
138
139 for (; i < len; i++) {
140
141 styles.push(args[i], args[0][i]);
142 }
143 } // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class
144
145
146 var Styled = react.withEmotionCache(function (props, cache, ref) {
147 var FinalTag = shouldUseAs && props.as || baseTag;
148 var className = '';
149 var classInterpolations = [];
150 var mergedProps = props;
151
152 if (props.theme == null) {
153 mergedProps = {};
154
155 for (var key in props) {
156 mergedProps[key] = props[key];
157 }
158
159 mergedProps.theme = React.useContext(react.ThemeContext);
160 }
161
162 if (typeof props.className === 'string') {
163 className = utils.getRegisteredStyles(cache.registered, classInterpolations, props.className);
164 } else if (props.className != null) {
165 className = props.className + " ";
166 }
167
168 var serialized = serialize.serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
169 className += cache.key + "-" + serialized.name;
170
171 if (targetClassName !== undefined) {
172 className += " " + targetClassName;
173 }
174
175 var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
176 var newProps = {};
177
178 for (var _key in props) {
179 if (shouldUseAs && _key === 'as') continue;
180
181 if ( // $FlowFixMe
182 finalShouldForwardProp(_key)) {
183 newProps[_key] = props[_key];
184 }
185 }
186
187 newProps.className = className;
188 newProps.ref = ref;
189 return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {
190 cache: cache,
191 serialized: serialized,
192 isStringTag: typeof FinalTag === 'string'
193 }), /*#__PURE__*/React.createElement(FinalTag, newProps));
194 });
195 Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
196 Styled.defaultProps = tag.defaultProps;
197 Styled.__emotion_real = Styled;
198 Styled.__emotion_base = baseTag;
199 Styled.__emotion_styles = styles;
200 Styled.__emotion_forwardProp = shouldForwardProp;
201 Object.defineProperty(Styled, 'toString', {
202 value: function value() {
203 if (targetClassName === undefined && "production" !== 'production') {
204 return 'NO_COMPONENT_SELECTOR';
205 } // $FlowFixMe: coerce undefined to string
206
207
208 return "." + targetClassName;
209 }
210 });
211
212 Styled.withComponent = function (nextTag, nextOptions) {
213 return createStyled(nextTag, _extends({}, options, nextOptions, {
214 shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
215 })).apply(void 0, styles);
216 };
217
218 return Styled;
219 };
220};
221
222exports.default = createStyled;