1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.Button = undefined;
|
7 |
|
8 | var _extends2 = require('babel-runtime/helpers/extends');
|
9 |
|
10 | var _extends3 = _interopRequireDefault(_extends2);
|
11 |
|
12 | var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
13 |
|
14 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
15 |
|
16 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
17 |
|
18 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
19 |
|
20 | var _react = require('react');
|
21 |
|
22 | var _react2 = _interopRequireDefault(_react);
|
23 |
|
24 | var _propTypes = require('prop-types');
|
25 |
|
26 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
27 |
|
28 | var _reactDeviceDetect = require('react-device-detect');
|
29 |
|
30 | var _recompose = require('recompose');
|
31 |
|
32 | var _helperFunctions = require('./helperFunctions');
|
33 |
|
34 | var _SVGClear = require('./svg/SVGClear');
|
35 |
|
36 | var _SVGClear2 = _interopRequireDefault(_SVGClear);
|
37 |
|
38 | var _SVGDone = require('./svg/SVGDone');
|
39 |
|
40 | var _SVGDone2 = _interopRequireDefault(_SVGDone);
|
41 |
|
42 | var _SVGAdd = require('./svg/SVGAdd');
|
43 |
|
44 | var _SVGAdd2 = _interopRequireDefault(_SVGAdd);
|
45 |
|
46 | var _SVGRemove = require('./svg/SVGRemove');
|
47 |
|
48 | var _SVGRemove2 = _interopRequireDefault(_SVGRemove);
|
49 |
|
50 | var _SVGExpandLess = require('./svg/SVGExpandLess');
|
51 |
|
52 | var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);
|
53 |
|
54 | var _SVGExpandMore = require('./svg/SVGExpandMore');
|
55 |
|
56 | var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);
|
57 |
|
58 | var _defaultStyles = require('./defaultStyles');
|
59 |
|
60 | var _SVGCancel = require('./svg/SVGCancel');
|
61 |
|
62 | var _SVGCancel2 = _interopRequireDefault(_SVGCancel);
|
63 |
|
64 | var _tinycolor = require('tinycolor2');
|
65 |
|
66 | var _tinycolor2 = _interopRequireDefault(_tinycolor);
|
67 |
|
68 | var _SVGCross = require('./svg/SVGCross');
|
69 |
|
70 | var _SVGCross2 = _interopRequireDefault(_SVGCross);
|
71 |
|
72 | var _SVGFullscreen = require('./svg/SVGFullscreen');
|
73 |
|
74 | var _SVGFullscreen2 = _interopRequireDefault(_SVGFullscreen);
|
75 |
|
76 | var _SVGFullscreenExit = require('./svg/SVGFullscreenExit');
|
77 |
|
78 | var _SVGFullscreenExit2 = _interopRequireDefault(_SVGFullscreenExit);
|
79 |
|
80 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
81 |
|
82 |
|
83 | var Button = function Button(_ref) {
|
84 | var _ref$shouldRenderIcon = _ref.shouldRenderIcon,
|
85 | shouldRenderIcon = _ref$shouldRenderIcon === undefined ? true : _ref$shouldRenderIcon,
|
86 | _ref$renderIcon = _ref.renderIcon,
|
87 | renderIcon = _ref$renderIcon === undefined ? null : _ref$renderIcon,
|
88 | _ref$dataTestId = _ref.dataTestId,
|
89 | dataTestId = _ref$dataTestId === undefined ? 'button' : _ref$dataTestId,
|
90 | _ref$type = _ref.type,
|
91 | type = _ref$type === undefined ? 'default' : _ref$type,
|
92 | _ref$invert = _ref.invert,
|
93 | invert = _ref$invert === undefined ? false : _ref$invert,
|
94 | transition = _ref.transition,
|
95 | children = _ref.children,
|
96 | containerRef = _ref.containerRef,
|
97 | className = _ref.className,
|
98 | style = _ref.style,
|
99 | isOn = _ref.isOn,
|
100 | isDisabled = _ref.disabled,
|
101 | onClick = _ref.onClick,
|
102 | _onMouseOver = _ref.onMouseOver,
|
103 | _onTouchStart = _ref.onTouchStart,
|
104 | _onTouchEnd = _ref.onTouchEnd,
|
105 | _onMouseLeave = _ref.onMouseLeave,
|
106 | _onMouseDown = _ref.onMouseDown,
|
107 | _onMouseUp = _ref.onMouseUp,
|
108 | _ref$size = _ref.size,
|
109 | size = _ref$size === undefined ? 'm' : _ref$size,
|
110 | _ref$colors = _ref.colors,
|
111 | colorsProp = _ref$colors === undefined ? _defaultStyles.buttonStyles.neutral : _ref$colors,
|
112 | transparency = _ref.transparency,
|
113 | props = (0, _objectWithoutProperties3.default)(_ref, ['shouldRenderIcon', 'renderIcon', 'dataTestId', 'type', 'invert', 'transition', 'children', 'containerRef', 'className', 'style', 'isOn', 'disabled', 'onClick', 'onMouseOver', 'onTouchStart', 'onTouchEnd', 'onMouseLeave', 'onMouseDown', 'onMouseUp', 'size', 'colors', 'transparency']);
|
114 |
|
115 | var colors = void 0;
|
116 | if (typeof colorsProp === 'string') {
|
117 | colors = _defaultStyles.buttonStyles[colorsProp];
|
118 | } else {
|
119 | colors = colorsProp;
|
120 | }
|
121 |
|
122 | var _useReducer = (0, _react.useReducer)(function (state, newState) {
|
123 | return (0, _extends3.default)({}, state, newState);
|
124 | }, {
|
125 | isMouseOver: false,
|
126 | isMouseDown: false
|
127 | }),
|
128 | _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
|
129 | state = _useReducer2[0],
|
130 | setState = _useReducer2[1];
|
131 |
|
132 | var isMouseOver = state.isMouseOver,
|
133 | isMouseDown = state.isMouseDown;
|
134 |
|
135 | var setIsMouseOver = function setIsMouseOver(x) {
|
136 | return setState({ isMouseOver: x });
|
137 | };
|
138 | var setIsMouseDown = function setIsMouseDown(x) {
|
139 | return setState({ isMouseDown: x });
|
140 | };
|
141 |
|
142 | var hasTouch = function hasTouch() {
|
143 | return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
|
144 | };
|
145 |
|
146 | var getClassName = function getClassName(_ref2) {
|
147 | var className = _ref2.className,
|
148 | isOn = _ref2.isOn,
|
149 | isDisabled = _ref2.isDisabled;
|
150 |
|
151 | var baseClass = 'button button--' + type;
|
152 | var baseDisabledClass = 'button--disabled button--' + type + '--disabled';
|
153 | var baseToggleClass = 'button--' + type + '--' + (isOn ? 'on' : 'off');
|
154 | if (!isDisabled) {
|
155 | if (typeof isOn !== 'undefined') {
|
156 | if (typeof className !== 'undefined') {
|
157 | return baseClass + ' ' + baseToggleClass + ' ' + className;
|
158 | } else {
|
159 | return baseClass + ' ' + baseToggleClass;
|
160 | }
|
161 | } else {
|
162 | if (typeof className !== 'undefined') {
|
163 | return baseClass + ' ' + className;
|
164 | } else {
|
165 | return '' + baseClass;
|
166 | }
|
167 | }
|
168 | } else {
|
169 | if (typeof className !== 'undefined') {
|
170 | return baseClass + ' ' + baseDisabledClass + ' ' + className;
|
171 | } else {
|
172 | return baseClass + ' ' + baseDisabledClass;
|
173 | }
|
174 | }
|
175 | };
|
176 |
|
177 | var getButtonProps = function getButtonProps() {
|
178 | var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
179 |
|
180 | var _onClick = _ref3.onClick,
|
181 | className = _ref3.className,
|
182 | style = _ref3.style,
|
183 | props = (0, _objectWithoutProperties3.default)(_ref3, ['onClick', 'className', 'style']);
|
184 |
|
185 | var transitionType = transition ? transition : colors.transition;
|
186 | var getTransitionStyle = function getTransitionStyle() {
|
187 | var _colors = colors,
|
188 | iOn = _colors.on,
|
189 | iOff = _colors.off,
|
190 | disabled = _colors.disabled;
|
191 |
|
192 | var on = void 0,
|
193 | off = void 0;
|
194 | if (invert) {
|
195 | on = iOff;
|
196 | off = iOn;
|
197 | } else {
|
198 | on = iOn;
|
199 | off = iOff;
|
200 | }
|
201 | var color = void 0,
|
202 | backgroundColor = void 0;
|
203 | if (!isDisabled) {
|
204 | var getBackgroundColor = function getBackgroundColor() {
|
205 | var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
|
206 | var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'on';
|
207 |
|
208 | if (on.backgroundColor && off.backgroundColor) {
|
209 | switch (transitionType) {
|
210 | case 'text':
|
211 | case 'mix':
|
212 | return _tinycolor2.default.mix(on.backgroundColor, off.backgroundColor, amount);
|
213 | case 'smooth':
|
214 | if (prefix === 'on') {
|
215 | return (0, _tinycolor2.default)(on.backgroundColor).darken(amount / 5);
|
216 | } else {
|
217 | return (0, _tinycolor2.default)(off.backgroundColor).darken(amount / 5);
|
218 | }
|
219 | case 'contrast':
|
220 | if (prefix === 'on') {
|
221 | return (0, _tinycolor2.default)(off.backgroundColor).darken(amount / 5);
|
222 | } else {
|
223 | return (0, _tinycolor2.default)(on.backgroundColor).darken(amount / 5);
|
224 | }
|
225 | default:
|
226 | break;
|
227 | }
|
228 | }
|
229 | };
|
230 | var getColor = function getColor() {
|
231 | var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
|
232 | var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'on';
|
233 |
|
234 | switch (transitionType) {
|
235 | case 'text':
|
236 | case 'mix':
|
237 | return _tinycolor2.default.mix(on.color, off.color, amount);
|
238 | case 'smooth':
|
239 | if (prefix === 'on') {
|
240 | return (0, _tinycolor2.default)(on.color).darken(amount / 5);
|
241 | } else {
|
242 | return (0, _tinycolor2.default)(off.color).darken((100 - amount) / 5);
|
243 | }
|
244 | case 'contrast':
|
245 | if (prefix === 'on') {
|
246 | return (0, _tinycolor2.default)(off.color).darken(amount / 5);
|
247 | } else {
|
248 | return (0, _tinycolor2.default)(on.color).darken((100 - amount) / 5);
|
249 | }
|
250 | default:
|
251 | break;
|
252 | }
|
253 | };
|
254 |
|
255 | if (isOn) {
|
256 | if (isMouseDown && isMouseOver) {
|
257 | color = getColor(50, 'on');
|
258 |
|
259 | backgroundColor = getBackgroundColor(50, 'on');
|
260 | } else {
|
261 | if (isMouseOver && !hasTouch()) {
|
262 | color = getColor(25, 'on');
|
263 |
|
264 | backgroundColor = getBackgroundColor(25, 'on');
|
265 | } else {
|
266 | color = on.color;
|
267 | backgroundColor = on.backgroundColor;
|
268 | }
|
269 | }
|
270 | } else {
|
271 | if (isMouseDown && isMouseOver) {
|
272 | color = getColor(50, 'off');
|
273 |
|
274 | backgroundColor = getBackgroundColor(50, 'off');
|
275 | } else {
|
276 | if (isMouseOver && !hasTouch()) {
|
277 | color = getColor(75, 'off');
|
278 |
|
279 | backgroundColor = getBackgroundColor(75, 'off');
|
280 | } else {
|
281 | color = off.color;
|
282 | backgroundColor = off.backgroundColor;
|
283 | }
|
284 | }
|
285 | }
|
286 | } else {
|
287 | color = disabled && disabled.color ? disabled.color : _defaultStyles.buttonStyles.neutral.disabled.color;
|
288 | backgroundColor = disabled && disabled.backgroundColor ? disabled.backgroundColor : _defaultStyles.buttonStyles.neutral.disabled.backgroundColor;
|
289 | }
|
290 | if (transparency) {
|
291 | backgroundColor = (0, _tinycolor2.default)(backgroundColor).setAlpha(transparency);
|
292 | }
|
293 | return {
|
294 | color: color,
|
295 | backgroundColor: backgroundColor
|
296 | };
|
297 | };
|
298 | var getSize = function getSize() {
|
299 | switch (size) {
|
300 | case 'none':
|
301 | return {};
|
302 | case 's':
|
303 | return { padding: '0.25rem 0.5rem', fontSize: '1.25rem' };
|
304 | case 'm':
|
305 | return { padding: '0.5rem 0.75rem', fontSize: '1.5rem' };
|
306 | case 'l':
|
307 | return { padding: '0.75rem 1rem', fontSize: '1.75rem' };
|
308 | default:
|
309 | return {};
|
310 | }
|
311 | };
|
312 | var getDefaultStyle = function getDefaultStyle() {
|
313 | return (0, _extends3.default)({
|
314 | display: 'flex',
|
315 | fontFamily: 'PT Sans, sans-serif',
|
316 | alignItems: 'center',
|
317 | justifyContent: 'center',
|
318 | transition: 'background 250ms ease-in-out, color 250ms ease-in-out',
|
319 |
|
320 | cursor: 'pointer'
|
321 | }, getSize(), getTransitionStyle());
|
322 | };
|
323 | if (isDisabled) {
|
324 | return {
|
325 | 'data-testid': dataTestId + '-disabled',
|
326 | style: (0, _extends3.default)({}, getDefaultStyle(), style),
|
327 | className: getClassName({ className: className, isOn: isOn, isDisabled: isDisabled })
|
328 | };
|
329 | }
|
330 | return (0, _extends3.default)({
|
331 | ref: containerRef,
|
332 | 'data-testid': dataTestId,
|
333 | style: (0, _extends3.default)({}, getDefaultStyle(), style),
|
334 | onClick: function onClick(e) {
|
335 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
336 | args[_key - 1] = arguments[_key];
|
337 | }
|
338 |
|
339 | e.stopPropagation();
|
340 | !isDisabled && _onClick && _onClick.apply(undefined, [e].concat(args));
|
341 |
|
342 | },
|
343 | onMouseOver: function onMouseOver(e) {
|
344 | for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
345 | args[_key2 - 1] = arguments[_key2];
|
346 | }
|
347 |
|
348 | _onMouseOver && _onMouseOver.apply(undefined, [e].concat(args));
|
349 | setIsMouseOver(true);
|
350 | },
|
351 | onMouseLeave: function onMouseLeave(e) {
|
352 | for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
353 | args[_key3 - 1] = arguments[_key3];
|
354 | }
|
355 |
|
356 | _onMouseLeave && _onMouseLeave.apply(undefined, [e].concat(args));
|
357 | setIsMouseOver(false);
|
358 | setIsMouseDown(false);
|
359 | },
|
360 | onMouseDown: function onMouseDown(e) {
|
361 | for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
|
362 | args[_key4 - 1] = arguments[_key4];
|
363 | }
|
364 |
|
365 | _onMouseDown && _onMouseDown.apply(undefined, [e].concat(args));
|
366 | setIsMouseDown(true);
|
367 | },
|
368 | onMouseUp: function onMouseUp(e) {
|
369 | for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
|
370 | args[_key5 - 1] = arguments[_key5];
|
371 | }
|
372 |
|
373 | _onMouseUp && _onMouseUp.apply(undefined, [e].concat(args));
|
374 | setIsMouseDown(false);
|
375 | },
|
376 | onTouchStart: function onTouchStart(e) {
|
377 | for (var _len6 = arguments.length, args = Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
|
378 | args[_key6 - 1] = arguments[_key6];
|
379 | }
|
380 |
|
381 | _onTouchStart && _onTouchStart.apply(undefined, [e].concat(args));
|
382 | },
|
383 | onTouchEnd: function onTouchEnd(e) {
|
384 | for (var _len7 = arguments.length, args = Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) {
|
385 | args[_key7 - 1] = arguments[_key7];
|
386 | }
|
387 |
|
388 | _onTouchEnd && _onTouchEnd.apply(undefined, [e].concat(args));
|
389 | },
|
390 | className: getClassName({ className: className, isOn: isOn, isDisabled: isDisabled })
|
391 | }, props);
|
392 | };
|
393 | var renderChildren = function renderChildren(type) {
|
394 | var icon = void 0;
|
395 |
|
396 | switch (type) {
|
397 | case 'caretdown':
|
398 | icon = isOn ? _react2.default.createElement(_SVGExpandLess2.default, { style: { pointerEvents: 'none' } }) : _react2.default.createElement(_SVGExpandMore2.default, { style: { pointerEvents: 'none' } });
|
399 | renderIcon = function renderIcon(props) {
|
400 | return isOn ? _react2.default.createElement(_SVGExpandLess2.default, (0, _extends3.default)({ style: { pointerEvents: 'none' } }, props)) : _react2.default.createElement(_SVGExpandMore2.default, (0, _extends3.default)({ style: { pointerEvents: 'none' } }, props));
|
401 | };
|
402 | return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver, icon: icon, renderIcon: renderIcon }) : _react2.default.createElement(
|
403 | 'div',
|
404 | (0, _extends3.default)({}, getButtonProps({
|
405 | onClick: onClick,
|
406 | className: className,
|
407 | style: (0, _extends3.default)({ justifyContent: 'space-between' }, style)
|
408 | })),
|
409 | children ? _react2.default.createElement(
|
410 | _react.Fragment,
|
411 | null,
|
412 | _react2.default.createElement(
|
413 | 'div',
|
414 | { style: { display: 'flex', justifyContent: 'space-between' } },
|
415 | children
|
416 | ),
|
417 | renderIcon({ style: { pointerEvents: 'none', marginLeft: '0.75rem' } })
|
418 | ) : renderIcon({ style: { pointerEvents: 'none' } })
|
419 | );
|
420 | case 'cancel':
|
421 | icon = _react2.default.createElement(_SVGCross2.default, { viewBox: '0 0 20 20', size: 16 });
|
422 | renderIcon = function renderIcon(props) {
|
423 | return _react2.default.createElement(_SVGCross2.default, (0, _extends3.default)({ viewBox: '0 0 20 20', size: 16 }, props));
|
424 | };
|
425 | return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver, icon: icon }) : _react2.default.createElement(
|
426 | 'div',
|
427 | (0, _extends3.default)({}, getButtonProps({
|
428 | onClick: onClick,
|
429 | className: className,
|
430 | style: (0, _extends3.default)({ justifyContent: 'center', alignItems: 'center' }, style)
|
431 | })),
|
432 | children ? _react2.default.createElement(
|
433 | _react.Fragment,
|
434 | null,
|
435 | _react2.default.createElement(
|
436 | 'div',
|
437 | { style: { display: 'flex', justifyContent: 'space-between' } },
|
438 | children
|
439 | ),
|
440 | renderIcon({ style: { pointerEvents: 'none', marginLeft: '0.75rem' } })
|
441 | ) : renderIcon({ style: { pointerEvents: 'none' } })
|
442 | );
|
443 | case 'facebook':
|
444 | renderIcon = function renderIcon(props) {
|
445 | return _react2.default.createElement('div', props);
|
446 | };
|
447 | return typeof children === 'function' ? children({
|
448 | getButtonProps: getButtonProps,
|
449 | isMouseOver: isMouseOver,
|
450 | icon: icon
|
451 | }) : _react2.default.createElement(
|
452 | 'div',
|
453 | (0, _extends3.default)({}, getButtonProps({
|
454 | onClick: onClick,
|
455 | className: className,
|
456 | style: (0, _extends3.default)({ justifyContent: 'flex-start', alignItems: 'center' }, style)
|
457 | })),
|
458 | children ? _react2.default.createElement(
|
459 | _react.Fragment,
|
460 | null,
|
461 | renderIcon({
|
462 | style: {
|
463 | pointerEvents: 'none',
|
464 | backgroundImage: 'url(\'/static/facebook.svg\')',
|
465 | backgroundSize: 'contain',
|
466 | backgroundRepeat: 'no-repeat',
|
467 | height: '1.5rem',
|
468 | marginRight: '1.5rem',
|
469 | width: '1.5rem',
|
470 | padding: '0.6rem'
|
471 | }
|
472 | }),
|
473 | _react2.default.createElement(
|
474 | 'div',
|
475 | { style: { display: 'flex', justifyContent: 'space-between' } },
|
476 | children
|
477 | )
|
478 | ) : renderIcon({
|
479 | style: {
|
480 | pointerEvents: 'none',
|
481 | backgroundImage: 'url(\'/static/facebook.svg\')'
|
482 | }
|
483 | })
|
484 | );
|
485 | case 'google':
|
486 | renderIcon = function renderIcon(props) {
|
487 | return _react2.default.createElement('div', props);
|
488 | };
|
489 | return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver, icon: icon }) : _react2.default.createElement(
|
490 | 'div',
|
491 | (0, _extends3.default)({}, getButtonProps({
|
492 | onClick: onClick,
|
493 | className: className,
|
494 | style: (0, _extends3.default)({ justifyContent: 'flex-start', alignItems: 'center' }, style)
|
495 | })),
|
496 | children ? _react2.default.createElement(
|
497 | _react.Fragment,
|
498 | null,
|
499 | renderIcon({
|
500 | style: {
|
501 | pointerEvents: 'none',
|
502 | backgroundImage: 'url(\'/static/google.svg\')',
|
503 | backgroundSize: 'contain',
|
504 | backgroundRepeat: 'no-repeat',
|
505 | height: '1.5rem',
|
506 | marginRight: '1.5rem',
|
507 | width: '1.5rem',
|
508 | padding: '0.6rem'
|
509 | }
|
510 | }),
|
511 | _react2.default.createElement(
|
512 | 'div',
|
513 | { style: { display: 'flex', justifyContent: 'space-between' } },
|
514 | children
|
515 | )
|
516 | ) : renderIcon({
|
517 | style: {
|
518 | pointerEvents: 'none',
|
519 | backgroundImage: 'url(\'/static/facebook.svg\')'
|
520 | }
|
521 | })
|
522 | );
|
523 | case 'mercurydrop':
|
524 | renderIcon = shouldRenderIcon ? renderIcon ? renderIcon : function (props) {
|
525 | 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));
|
526 | } : function () {
|
527 | return null;
|
528 | };
|
529 |
|
530 | return typeof children === 'function' ? children({
|
531 | getButtonProps: getButtonProps,
|
532 | renderIcon: renderIcon
|
533 | }) : _react2.default.createElement(
|
534 | 'div',
|
535 | (0, _extends3.default)({}, getButtonProps({
|
536 | onClick: onClick,
|
537 | className: className,
|
538 | style: (0, _extends3.default)({ justifyContent: 'center', alignItems: 'center' }, style)
|
539 | })),
|
540 | _react2.default.createElement('div', {
|
541 | style: {
|
542 | flexGrow: isOn ? 1 : 0.5,
|
543 | backgroundColor: '#33b',
|
544 | transition: 'flex-grow 0.5s ease-in-out',
|
545 | height: '1rem'
|
546 | },
|
547 | className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__left', 'collapsed', 'expanded')
|
548 | }),
|
549 | renderIcon(),
|
550 | _react2.default.createElement(
|
551 | 'div',
|
552 | {
|
553 | style: {
|
554 | display: 'flex',
|
555 | alignItems: 'center',
|
556 | justifyContent: 'center',
|
557 | flexGrow: isOn ? 0.5 : 1
|
558 | },
|
559 | className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__center', 'collapsed', 'expanded')
|
560 | },
|
561 | children
|
562 | ),
|
563 | renderIcon(),
|
564 | _react2.default.createElement('div', {
|
565 | style: {
|
566 | flexGrow: isOn ? 1 : 0.5,
|
567 | backgroundColor: '#33b',
|
568 | transition: 'flex-grow 0.5s ease-in-out',
|
569 | height: '1rem'
|
570 | },
|
571 | className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__right', 'collapsed', 'expanded')
|
572 | })
|
573 | );
|
574 | default:
|
575 | return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver }) : _react2.default.createElement(
|
576 | 'div',
|
577 | (0, _extends3.default)({}, getButtonProps((0, _extends3.default)({ onClick: onClick, className: className, style: style }, props))),
|
578 | children
|
579 | );
|
580 | }
|
581 | };
|
582 |
|
583 | return renderChildren(type);
|
584 | };
|
585 |
|
586 | exports.Button = Button;
|
587 | Button.defaultProps = {
|
588 | colors: _defaultStyles.buttonStyles.transparentNeutral
|
589 | };
|
590 |
|
591 | var enhance = (0, _recompose.compose)();
|
592 |
|
593 |
|
594 | Button.propTypes = {
|
595 | type: _propTypes2.default.string,
|
596 | onClick: _propTypes2.default.func
|
597 | };
|
598 | exports.default = enhance(Button); |
\ | No newline at end of file |