1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.SCButton = undefined;
|
7 |
|
8 | var _extends2 = require('babel-runtime/helpers/extends');
|
9 |
|
10 | var _extends3 = _interopRequireDefault(_extends2);
|
11 |
|
12 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
13 |
|
14 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
15 |
|
16 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
|
17 |
|
18 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
19 |
|
20 | var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n padding: ', ';\n font-size: ', ';\n display: flex;\n font-family: PT Sans, sans-serif;\n align-items: center;\n justify-content: center;\n transition: background 250ms ease-in-out, color 250ms ease-in-out;\n\n cursor: pointer;\n background-color: ', ';\n color: ', ';\n :hover {\n background-color: ', ';\n color: ', ';\n }\n :active {\n background-color: ', ';\n color: ', ';\n }\n'], ['\n padding: ', ';\n font-size: ', ';\n display: flex;\n font-family: PT Sans, sans-serif;\n align-items: center;\n justify-content: center;\n transition: background 250ms ease-in-out, color 250ms ease-in-out;\n\n cursor: pointer;\n background-color: ', ';\n color: ', ';\n :hover {\n background-color: ', ';\n color: ', ';\n }\n :active {\n background-color: ', ';\n color: ', ';\n }\n']),
|
21 | _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n pointer-events: none;\n'], ['\n pointer-events: none;\n']),
|
22 | _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n justify-content: flex-start;\n align-items: center;\n'], ['\n justify-content: flex-start;\n align-items: center;\n']),
|
23 | _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n justify-content: space-between;\n'], ['\n justify-content: space-between;\n']),
|
24 | _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n justify-content: flex-start;\n align-items: center;\n padding: 0;\n height: 2.25rem;\n'], ['\n justify-content: flex-start;\n align-items: center;\n padding: 0;\n height: 2.25rem;\n']),
|
25 | _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n justify-content: flex-start;\n align-items: center;\n flex-grow: ', ';\n background-color: ', ';\n transition: flex-grow 0.5s ease-in-out, background-color 0.5s ease-in-out;\n height: 2.25rem;\n'], ['\n justify-content: flex-start;\n align-items: center;\n flex-grow: ', ';\n background-color: ', ';\n transition: flex-grow 0.5s ease-in-out, background-color 0.5s ease-in-out;\n height: 2.25rem;\n']),
|
26 | _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n align-items: center;\n justify-content: center;\n\n flex-grow: ', ';\n\n transition: flex-grow 0.5s ease-in-out;\n'], ['\n display: flex;\n align-items: center;\n justify-content: center;\n\n flex-grow: ', ';\n\n transition: flex-grow 0.5s ease-in-out;\n']),
|
27 | _templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n pointer-events: none;\n background-size: contain;\n background-repeat: no-repeat;\n height: 1.5rem;\n margin-right: 1.5rem;\n width: 1.5rem;\n padding: 0.6rem;\n'], ['\n pointer-events: none;\n background-size: contain;\n background-repeat: no-repeat;\n height: 1.5rem;\n margin-right: 1.5rem;\n width: 1.5rem;\n padding: 0.6rem;\n']),
|
28 | _templateObject9 = (0, _taggedTemplateLiteral3.default)(['\n background-image: url(/static/google.svg);\n'], ['\n background-image: url(/static/google.svg);\n']),
|
29 | _templateObject10 = (0, _taggedTemplateLiteral3.default)(['\n background-image: url(/static/facebook.svg);\n'], ['\n background-image: url(/static/facebook.svg);\n']);
|
30 |
|
31 | var _react = require('react');
|
32 |
|
33 | var _react2 = _interopRequireDefault(_react);
|
34 |
|
35 | var _SVGExpandLess = require('./svg/SVGExpandLess');
|
36 |
|
37 | var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);
|
38 |
|
39 | var _SVGExpandMore = require('./svg/SVGExpandMore');
|
40 |
|
41 | var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);
|
42 |
|
43 | var _defaultStyles = require('./defaultStyles');
|
44 |
|
45 | var _tinycolor = require('tinycolor2');
|
46 |
|
47 | var _tinycolor2 = _interopRequireDefault(_tinycolor);
|
48 |
|
49 | var _SVGCross = require('./svg/SVGCross');
|
50 |
|
51 | var _SVGCross2 = _interopRequireDefault(_SVGCross);
|
52 |
|
53 | var _SVGFullscreen = require('./svg/SVGFullscreen');
|
54 |
|
55 | var _SVGFullscreen2 = _interopRequireDefault(_SVGFullscreen);
|
56 |
|
57 | var _SVGFullscreenExit = require('./svg/SVGFullscreenExit');
|
58 |
|
59 | var _SVGFullscreenExit2 = _interopRequireDefault(_SVGFullscreenExit);
|
60 |
|
61 | var _styledComponents = require('styled-components');
|
62 |
|
63 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
64 |
|
65 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
66 |
|
67 | var getBackgroundColor = function getBackgroundColor(_ref) {
|
68 | var _ref$balance = _ref.balance,
|
69 | balance = _ref$balance === undefined ? 50 : _ref$balance,
|
70 | _ref$isOn = _ref.isOn,
|
71 | isOn = _ref$isOn === undefined ? true : _ref$isOn,
|
72 | colors = _ref.colors,
|
73 | invert = _ref.invert;
|
74 | var iOn = colors.on,
|
75 | iOff = colors.off,
|
76 | transitionType = colors.transition;
|
77 |
|
78 | var on = void 0,
|
79 | off = void 0;
|
80 | if (invert) {
|
81 | on = iOff;
|
82 | off = iOn;
|
83 | } else {
|
84 | on = iOn;
|
85 | off = iOff;
|
86 | }
|
87 |
|
88 | switch (transitionType) {
|
89 | case 'text':
|
90 | case 'mix':
|
91 | return _tinycolor2.default.mix(on.backgroundColor, off.backgroundColor, balance);
|
92 | case 'smooth':
|
93 | if (isOn === true) {
|
94 | return (0, _tinycolor2.default)(on.backgroundColor).darken(balance / 5);
|
95 | } else {
|
96 | return (0, _tinycolor2.default)(off.backgroundColor).darken(balance / 5);
|
97 | }
|
98 | case 'contrast':
|
99 | if (isOn === true) {
|
100 | return (0, _tinycolor2.default)(off.backgroundColor).darken(balance / 5);
|
101 | } else {
|
102 | return (0, _tinycolor2.default)(on.backgroundColor).darken(balance / 5);
|
103 | }
|
104 | default:
|
105 | break;
|
106 | }
|
107 | };
|
108 | var getColor = function getColor(_ref2) {
|
109 | var _ref2$balance = _ref2.balance,
|
110 | balance = _ref2$balance === undefined ? 50 : _ref2$balance,
|
111 | _ref2$isOn = _ref2.isOn,
|
112 | isOn = _ref2$isOn === undefined ? true : _ref2$isOn,
|
113 | colors = _ref2.colors,
|
114 | invert = _ref2.invert;
|
115 | var iOn = colors.on,
|
116 | iOff = colors.off,
|
117 | transitionType = colors.transition;
|
118 |
|
119 | var on = void 0,
|
120 | off = void 0;
|
121 | if (invert) {
|
122 | on = iOff;
|
123 | off = iOn;
|
124 | } else {
|
125 | on = iOn;
|
126 | off = iOff;
|
127 | }
|
128 | switch (transitionType) {
|
129 | case 'text':
|
130 | case 'mix':
|
131 | return _tinycolor2.default.mix(on.color, off.color, balance);
|
132 | case 'smooth':
|
133 | if (isOn === true) {
|
134 | return (0, _tinycolor2.default)(on.color).darken(balance / 5);
|
135 | } else {
|
136 | return (0, _tinycolor2.default)(off.color).darken((100 - balance) / 5);
|
137 | }
|
138 | case 'contrast':
|
139 | if (isOn === true) {
|
140 | return (0, _tinycolor2.default)(off.color).darken(balance / 5);
|
141 | } else {
|
142 | return (0, _tinycolor2.default)(on.color).darken((100 - balance) / 5);
|
143 | }
|
144 | default:
|
145 | break;
|
146 | }
|
147 | };
|
148 |
|
149 | var StyledButton = _styledComponents2.default.div(_templateObject, function (_ref3) {
|
150 | var size = _ref3.size;
|
151 |
|
152 | switch (size) {
|
153 | case 'none':
|
154 | return {};
|
155 | case 's':
|
156 | return '0.25rem 0.5rem';
|
157 | case 'm':
|
158 | return '0.5rem 0.75rem';
|
159 | case 'l':
|
160 | return '0.75rem 1rem';
|
161 | default:
|
162 | return {};
|
163 | }
|
164 | }, function (_ref4) {
|
165 | var size = _ref4.size;
|
166 |
|
167 | switch (size) {
|
168 | case 'none':
|
169 | return {};
|
170 | case 's':
|
171 | return '1.25rem';
|
172 | case 'm':
|
173 | return '1.5rem';
|
174 | case 'l':
|
175 | return '1.75rem';
|
176 | default:
|
177 | return {};
|
178 | }
|
179 | }, function (_ref5) {
|
180 | var _ref5$invert = _ref5.invert,
|
181 | invert = _ref5$invert === undefined ? false : _ref5$invert,
|
182 | isOn = _ref5.isOn,
|
183 | colors = _ref5.colors,
|
184 | _ref5$isDisabled = _ref5.isDisabled,
|
185 | isDisabled = _ref5$isDisabled === undefined ? false : _ref5$isDisabled;
|
186 |
|
187 | if (isDisabled) {
|
188 | return colors.disabled && colors.disabled.backgroundColor || '#fff';
|
189 | }
|
190 | if (isOn) {
|
191 | return !invert ? colors.on.backgroundColor : colors.off.backgroundColor;
|
192 | } else {
|
193 | return !invert ? colors.off.backgroundColor : colors.on.backgroundColor;
|
194 | }
|
195 | }, function (_ref6) {
|
196 | var _ref6$invert = _ref6.invert,
|
197 | invert = _ref6$invert === undefined ? false : _ref6$invert,
|
198 | isOn = _ref6.isOn,
|
199 | colors = _ref6.colors,
|
200 | _ref6$isDisabled = _ref6.isDisabled,
|
201 | isDisabled = _ref6$isDisabled === undefined ? false : _ref6$isDisabled;
|
202 |
|
203 | if (isDisabled) {
|
204 | return colors.disabled && colors.disabled.color || '#000';
|
205 | }
|
206 | if (isOn) {
|
207 | return !invert ? colors.on.color : colors.off.color;
|
208 | } else {
|
209 | return !invert ? colors.off.color : colors.on.color;
|
210 | }
|
211 | }, function (_ref7) {
|
212 | var _ref7$invert = _ref7.invert,
|
213 | invert = _ref7$invert === undefined ? false : _ref7$invert,
|
214 | _ref7$balance = _ref7.balance,
|
215 | balance = _ref7$balance === undefined ? isOn ? 25 : 75 : _ref7$balance,
|
216 | isOn = _ref7.isOn,
|
217 | colors = _ref7.colors,
|
218 | _ref7$isDisabled = _ref7.isDisabled,
|
219 | isDisabled = _ref7$isDisabled === undefined ? false : _ref7$isDisabled,
|
220 | hasTouch = _ref7.hasTouch;
|
221 | return !isDisabled && !hasTouch && getBackgroundColor({ invert: invert, balance: balance, isOn: isOn, colors: colors, isDisabled: isDisabled }).toString();
|
222 | }, function (_ref8) {
|
223 | var _ref8$invert = _ref8.invert,
|
224 | invert = _ref8$invert === undefined ? false : _ref8$invert,
|
225 | _ref8$balance = _ref8.balance,
|
226 | balance = _ref8$balance === undefined ? isOn ? 25 : 75 : _ref8$balance,
|
227 | isOn = _ref8.isOn,
|
228 | colors = _ref8.colors,
|
229 | _ref8$isDisabled = _ref8.isDisabled,
|
230 | isDisabled = _ref8$isDisabled === undefined ? false : _ref8$isDisabled,
|
231 | hasTouch = _ref8.hasTouch;
|
232 | return !isDisabled && !hasTouch && getColor({ invert: invert, balance: balance, isOn: isOn, colors: colors, isDisabled: isDisabled }).toString();
|
233 | }, function (_ref9) {
|
234 | var _ref9$invert = _ref9.invert,
|
235 | invert = _ref9$invert === undefined ? false : _ref9$invert,
|
236 | isOn = _ref9.isOn,
|
237 | _ref9$balance = _ref9.balance,
|
238 | balance = _ref9$balance === undefined ? 50 : _ref9$balance,
|
239 | colors = _ref9.colors,
|
240 | _ref9$isDisabled = _ref9.isDisabled,
|
241 | isDisabled = _ref9$isDisabled === undefined ? false : _ref9$isDisabled;
|
242 | return !isDisabled && getBackgroundColor({ invert: invert, balance: balance, isOn: isOn, colors: colors, isDisabled: isDisabled }).toString();
|
243 | }, function (_ref10) {
|
244 | var _ref10$invert = _ref10.invert,
|
245 | invert = _ref10$invert === undefined ? false : _ref10$invert,
|
246 | _ref10$balance = _ref10.balance,
|
247 | balance = _ref10$balance === undefined ? 50 : _ref10$balance,
|
248 | isOn = _ref10.isOn,
|
249 | colors = _ref10.colors,
|
250 | _ref10$isDisabled = _ref10.isDisabled,
|
251 | isDisabled = _ref10$isDisabled === undefined ? false : _ref10$isDisabled;
|
252 | return !isDisabled && getColor({ invert: invert, balance: balance, isOn: isOn, colors: colors, isDisabled: isDisabled }).toString();
|
253 | });
|
254 | var StyledExpandLess = (0, _styledComponents2.default)(_SVGExpandLess2.default)(_templateObject2);
|
255 | var StyledExpandMore = (0, _styledComponents2.default)(_SVGExpandMore2.default)(_templateObject2);
|
256 | var GoogleButton = (0, _styledComponents2.default)(StyledButton)(_templateObject3);
|
257 | var CaretdownButton = (0, _styledComponents2.default)(StyledButton)(_templateObject4);
|
258 | var CancelButton = (0, _styledComponents2.default)(StyledButton)(_templateObject4);
|
259 | var FacebookButton = (0, _styledComponents2.default)(StyledButton)(_templateObject3);
|
260 | var MercuryButton = (0, _styledComponents2.default)(StyledButton)(_templateObject5);
|
261 | var MercurySide = _styledComponents2.default.div(_templateObject6, function (_ref11) {
|
262 | var isOn = _ref11.isOn;
|
263 | return isOn ? 1 : 0.5;
|
264 | }, function (_ref12) {
|
265 | var colors = _ref12.colors,
|
266 | isOn = _ref12.isOn;
|
267 | return isOn ? colors.off.backgroundColor : colors.on.backgroundColor;
|
268 | });
|
269 | var MercuryCenter = _styledComponents2.default.div(_templateObject7, function (_ref13) {
|
270 | var isOn = _ref13.isOn;
|
271 | return isOn ? 0.5 : 1;
|
272 | });
|
273 |
|
274 | var Icon = _styledComponents2.default.div(_templateObject8);
|
275 |
|
276 | var GoogleIcon = (0, _styledComponents2.default)(Icon)(_templateObject9);
|
277 |
|
278 | var FacebookIcon = (0, _styledComponents2.default)(Icon)(_templateObject10);
|
279 |
|
280 | var SCButton = function SCButton(_ref14) {
|
281 | var _ref14$shouldRenderIc = _ref14.shouldRenderIcon,
|
282 | shouldRenderIcon = _ref14$shouldRenderIc === undefined ? true : _ref14$shouldRenderIc,
|
283 | _ref14$renderIcon = _ref14.renderIcon,
|
284 | renderIcon = _ref14$renderIcon === undefined ? function () {
|
285 | return null;
|
286 | } : _ref14$renderIcon,
|
287 | _ref14$dataTestId = _ref14.dataTestId,
|
288 | dataTestId = _ref14$dataTestId === undefined ? 'button' : _ref14$dataTestId,
|
289 | _ref14$type = _ref14.type,
|
290 | type = _ref14$type === undefined ? 'default' : _ref14$type,
|
291 | _ref14$invert = _ref14.invert,
|
292 | invert = _ref14$invert === undefined ? false : _ref14$invert,
|
293 | children = _ref14.children,
|
294 | containerRef = _ref14.containerRef,
|
295 | className = _ref14.className,
|
296 | style = _ref14.style,
|
297 | isOn = _ref14.isOn,
|
298 | onClick = _ref14.onClick,
|
299 | isDisabled = _ref14.isDisabled,
|
300 | _ref14$size = _ref14.size,
|
301 | size = _ref14$size === undefined ? 'm' : _ref14$size,
|
302 | _ref14$colors = _ref14.colors,
|
303 | colorsProp = _ref14$colors === undefined ? _defaultStyles.buttonStyles.neutral : _ref14$colors,
|
304 | props = (0, _objectWithoutProperties3.default)(_ref14, ['shouldRenderIcon', 'renderIcon', 'dataTestId', 'type', 'invert', 'children', 'containerRef', 'className', 'style', 'isOn', 'onClick', 'isDisabled', 'size', 'colors']);
|
305 |
|
306 | var colors = void 0;
|
307 | if (typeof colorsProp === 'string') {
|
308 | colors = _defaultStyles.buttonStyles[colorsProp];
|
309 | } else {
|
310 | colors = colorsProp;
|
311 | }
|
312 |
|
313 | var checksForTouch = function checksForTouch() {
|
314 | return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
|
315 | };
|
316 |
|
317 | var getButtonProps = function getButtonProps() {
|
318 | var _ref15 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
319 |
|
320 | var _onClick = _ref15.onClick,
|
321 | className = _ref15.className,
|
322 | style = _ref15.style,
|
323 | props = (0, _objectWithoutProperties3.default)(_ref15, ['onClick', 'className', 'style']);
|
324 |
|
325 |
|
326 |
|
327 |
|
328 |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 |
|
339 |
|
340 |
|
341 |
|
342 |
|
343 |
|
344 |
|
345 |
|
346 |
|
347 |
|
348 |
|
349 |
|
350 |
|
351 | if (isDisabled) {
|
352 | return {
|
353 | 'data-testid': dataTestId + '-disabled',
|
354 | style: style
|
355 |
|
356 | };
|
357 | }
|
358 | return (0, _extends3.default)({
|
359 | ref: containerRef,
|
360 | 'data-testid': dataTestId,
|
361 | style: style,
|
362 | className: className,
|
363 | onClick: function onClick(e) {
|
364 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
365 | args[_key - 1] = arguments[_key];
|
366 | }
|
367 |
|
368 | e.stopPropagation();
|
369 | !isDisabled && _onClick && _onClick.apply(undefined, [e].concat(args));
|
370 | }
|
371 | }, props);
|
372 | };
|
373 |
|
374 | var commonProps = (0, _extends3.default)({
|
375 | getButtonProps: getButtonProps,
|
376 | size: size,
|
377 | colors: colors,
|
378 | isOn: isOn,
|
379 | isDisabled: isDisabled,
|
380 | hasTouch: checksForTouch()
|
381 | }, getButtonProps((0, _extends3.default)({
|
382 | onClick: onClick,
|
383 | className: className,
|
384 | style: style
|
385 | }, props)));
|
386 | var renderButtonWithIcon = function renderButtonWithIcon(_ref16) {
|
387 | var Button = _ref16.Button,
|
388 | Icon = _ref16.Icon;
|
389 |
|
390 | return typeof children === 'function' ? children((0, _extends3.default)({}, commonProps, { Icon: Icon })) : _react2.default.createElement(
|
391 | Button,
|
392 | (0, _extends3.default)({}, commonProps),
|
393 | children ? _react2.default.createElement(
|
394 | _react.Fragment,
|
395 | null,
|
396 | _react2.default.createElement(Icon, null),
|
397 | children
|
398 | ) : _react2.default.createElement(Icon, null)
|
399 | );
|
400 | };
|
401 | var renderChildren = function renderChildren(type) {
|
402 | var icon = void 0;
|
403 | switch (type) {
|
404 | case 'caretdown':
|
405 | icon = isOn ? _react2.default.createElement(StyledExpandLess, null) : _react2.default.createElement(StyledExpandMore, null);
|
406 | renderIcon = function renderIcon(props) {
|
407 | return isOn ? _react2.default.createElement(StyledExpandLess, (0, _extends3.default)({}, props)) : _react2.default.createElement(StyledExpandMore, (0, _extends3.default)({}, props));
|
408 | };
|
409 |
|
410 | return typeof children === 'function' ? children((0, _extends3.default)({ icon: icon, renderIcon: renderIcon }, commonProps)) : _react2.default.createElement(
|
411 | CaretdownButton,
|
412 | (0, _extends3.default)({}, commonProps),
|
413 | children ? _react2.default.createElement(
|
414 | _react.Fragment,
|
415 | null,
|
416 | children,
|
417 | renderIcon({
|
418 | style: { marginLeft: '0.75rem' }
|
419 | })
|
420 | ) : renderIcon()
|
421 | );
|
422 | case 'cancel':
|
423 | icon = _react2.default.createElement(_SVGCross2.default, { viewBox: '0 0 20 20', size: 16 });
|
424 | renderIcon = function renderIcon(props) {
|
425 | return _react2.default.createElement(_SVGCross2.default, (0, _extends3.default)({ viewBox: '0 0 20 20', size: 16 }, props));
|
426 | };
|
427 | return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver, icon: icon }) : _react2.default.createElement(
|
428 | CancelButton,
|
429 | (0, _extends3.default)({}, commonProps),
|
430 | children ? _react2.default.createElement(
|
431 | _react.Fragment,
|
432 | null,
|
433 | _react2.default.createElement(
|
434 | 'div',
|
435 | { style: { display: 'flex', justifyContent: 'space-between' } },
|
436 | children
|
437 | ),
|
438 | renderIcon({ style: { pointerEvents: 'none', marginLeft: '0.75rem' } })
|
439 | ) : renderIcon({ style: { pointerEvents: 'none' } })
|
440 | );
|
441 | case 'facebook':
|
442 | return renderButtonWithIcon({ Button: FacebookButton, Icon: FacebookIcon });
|
443 |
|
444 | case 'google':
|
445 | return renderButtonWithIcon({ Button: GoogleButton, Icon: GoogleIcon });
|
446 |
|
447 | case 'mercurydrop':
|
448 | renderIcon = shouldRenderIcon ? renderIcon ? renderIcon : function (props) {
|
449 | return isOn ? _react2.default.createElement(_SVGFullscreenExit2.default, (0, _extends3.default)({ viewBox: '0 0 20 20', size: 16 }, props)) : _react2.default.createElement(_SVGFullscreen2.default, (0, _extends3.default)({ viewBox: '0 0 20 20', size: 16 }, props));
|
450 | } : function () {
|
451 | return null;
|
452 | };
|
453 |
|
454 | return typeof children === 'function' ? children({
|
455 | getButtonProps: getButtonProps,
|
456 | renderIcon: renderIcon
|
457 | }) : _react2.default.createElement(
|
458 | MercuryButton,
|
459 | (0, _extends3.default)({}, commonProps),
|
460 | _react2.default.createElement(MercurySide, { isOn: isOn, colors: colors }),
|
461 | renderIcon(),
|
462 | _react2.default.createElement(
|
463 | MercuryCenter,
|
464 | { isOn: isOn },
|
465 | children
|
466 | ),
|
467 | renderIcon(),
|
468 | _react2.default.createElement(MercurySide, { isOn: isOn, colors: colors })
|
469 | );
|
470 | default:
|
471 | return typeof children === 'function' ? children((0, _extends3.default)({}, commonProps)) : _react2.default.createElement(
|
472 | StyledButton,
|
473 | (0, _extends3.default)({}, commonProps),
|
474 | children
|
475 | );
|
476 | }
|
477 | };
|
478 |
|
479 | return renderChildren(type);
|
480 | };
|
481 |
|
482 | exports.SCButton = SCButton;
|
483 | exports.default = _react2.default.memo(SCButton); |
\ | No newline at end of file |