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 _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
13 |
|
14 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
15 |
|
16 | var _react = require('react');
|
17 |
|
18 | var _react2 = _interopRequireDefault(_react);
|
19 |
|
20 | var _SVGCross = require('./svg/SVGCross');
|
21 |
|
22 | var _SVGCross2 = _interopRequireDefault(_SVGCross);
|
23 |
|
24 | var _SVGFullscreen = require('./svg/SVGFullscreen');
|
25 |
|
26 | var _SVGFullscreen2 = _interopRequireDefault(_SVGFullscreen);
|
27 |
|
28 | var _SVGFullscreenExit = require('./svg/SVGFullscreenExit');
|
29 |
|
30 | var _SVGFullscreenExit2 = _interopRequireDefault(_SVGFullscreenExit);
|
31 |
|
32 | var _StyledButton = require('./StyledButton');
|
33 |
|
34 | var _defaultStyles = require('./defaultStyles');
|
35 |
|
36 | var _helperFunctions = require('./helperFunctions');
|
37 |
|
38 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
39 |
|
40 | var Button = function Button(_ref) {
|
41 | var _ref$colors = _ref.colors,
|
42 | colorsProp = _ref$colors === undefined ? 'transparentNeutral' : _ref$colors,
|
43 | _ref$subcolors = _ref.subcolors,
|
44 | subcolorsProp = _ref$subcolors === undefined ? '' : _ref$subcolors,
|
45 | _ref$shouldRenderIcon = _ref.shouldRenderIcon,
|
46 | shouldRenderIcon = _ref$shouldRenderIcon === undefined ? true : _ref$shouldRenderIcon,
|
47 | _ref$renderIcon = _ref.renderIcon,
|
48 | renderIcon = _ref$renderIcon === undefined ? function () {
|
49 | return null;
|
50 | } : _ref$renderIcon,
|
51 | _ref$dataTestId = _ref.dataTestId,
|
52 | dataTestId = _ref$dataTestId === undefined ? 'button' : _ref$dataTestId,
|
53 | _ref$type = _ref.type,
|
54 | type = _ref$type === undefined ? 'default' : _ref$type,
|
55 | _ref$subtype = _ref.subtype,
|
56 | subtype = _ref$subtype === undefined ? '' : _ref$subtype,
|
57 | _ref$isInverted = _ref.isInverted,
|
58 | isInverted = _ref$isInverted === undefined ? false : _ref$isInverted,
|
59 | children = _ref.children,
|
60 | containerRef = _ref.containerRef,
|
61 | className = _ref.className,
|
62 | style = _ref.style,
|
63 | isOn = _ref.isOn,
|
64 | onClick = _ref.onClick,
|
65 | _ref$isDisabled = _ref.isDisabled,
|
66 | isDisabled = _ref$isDisabled === undefined ? false : _ref$isDisabled,
|
67 | _ref$size = _ref.size,
|
68 | size = _ref$size === undefined ? 15 : _ref$size,
|
69 | _ref$sizeFontRatio = _ref.sizeFontRatio,
|
70 | sizeFontRatio = _ref$sizeFontRatio === undefined ? 1 : _ref$sizeFontRatio,
|
71 | _ref$mercuryRatio = _ref.mercuryRatio,
|
72 | mercuryRatio = _ref$mercuryRatio === undefined ? [20, 10] : _ref$mercuryRatio,
|
73 | _ref$marginLock = _ref.marginLock,
|
74 | marginLock = _ref$marginLock === undefined ? false : _ref$marginLock,
|
75 | _ref$sideTransform = _ref.sideTransform,
|
76 | sideTransform = _ref$sideTransform === undefined ? 0.5 : _ref$sideTransform,
|
77 | props = (0, _objectWithoutProperties3.default)(_ref, ['colors', 'subcolors', 'shouldRenderIcon', 'renderIcon', 'dataTestId', 'type', 'subtype', 'isInverted', 'children', 'containerRef', 'className', 'style', 'isOn', 'onClick', 'isDisabled', 'size', 'sizeFontRatio', 'mercuryRatio', 'marginLock', 'sideTransform']);
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 | var colors = void 0,
|
89 | subcolors = void 0;
|
90 |
|
91 | if (typeof colorsProp === 'string') {
|
92 | colors = _defaultStyles.buttonStyles[colorsProp];
|
93 | } else {
|
94 | colors = colorsProp;
|
95 | }
|
96 |
|
97 | if (typeof subcolorsProp === 'string') {
|
98 | if (subcolorsProp.length > 0) {
|
99 | subcolors = _defaultStyles.buttonStyles[subcolorsProp];
|
100 | } else {
|
101 | subcolors = colors;
|
102 | }
|
103 | } else {
|
104 | subcolors = colors;
|
105 | }
|
106 |
|
107 | var checksForTouch = function checksForTouch() {
|
108 | if (typeof document !== 'undefined') {
|
109 | return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
|
110 | }
|
111 | return false;
|
112 | };
|
113 |
|
114 | var getButtonProps = function getButtonProps() {
|
115 | var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
116 |
|
117 | var _onClick = _ref2.onClick,
|
118 | className = _ref2.className,
|
119 | style = _ref2.style,
|
120 | props = (0, _objectWithoutProperties3.default)(_ref2, ['onClick', 'className', 'style']);
|
121 |
|
122 | var getClassName = function getClassName(_ref3) {
|
123 | var className = _ref3.className,
|
124 | isOn = _ref3.isOn,
|
125 | isDisabled = _ref3.isDisabled;
|
126 |
|
127 | return className + ' ' + (0, _helperFunctions.advancedMulti)({
|
128 | unflattenedBases: ['button', 'button-' + type],
|
129 | flipVars: [[isOn, 'on', 'off'], [isDisabled, 'disabled', null]]
|
130 | });
|
131 | };
|
132 | if (isDisabled) {
|
133 | return {
|
134 | 'data-testid': dataTestId + '-disabled',
|
135 | style: style,
|
136 | className: getClassName({ className: className, isOn: isOn, isDisabled: isDisabled })
|
137 | };
|
138 | }
|
139 | return (0, _extends3.default)({
|
140 | ref: containerRef,
|
141 | 'data-testid': dataTestId,
|
142 | style: style,
|
143 |
|
144 | onClick: function onClick(e) {
|
145 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
146 | args[_key - 1] = arguments[_key];
|
147 | }
|
148 |
|
149 | e.stopPropagation();
|
150 | !isDisabled && _onClick && _onClick.apply(undefined, [e].concat(args));
|
151 | },
|
152 | className: getClassName({ className: className, isOn: isOn, isDisabled: isDisabled })
|
153 | }, props);
|
154 | };
|
155 |
|
156 | var commonProps = (0, _extends3.default)({
|
157 | getButtonProps: getButtonProps,
|
158 | size: size,
|
159 | sizeFontRatio: sizeFontRatio,
|
160 | colors: colors,
|
161 | isOn: isOn,
|
162 | isInverted: isInverted,
|
163 | isDisabled: isDisabled,
|
164 | hasTouch: checksForTouch()
|
165 | }, getButtonProps((0, _extends3.default)({
|
166 | onClick: onClick,
|
167 | className: className,
|
168 | style: style
|
169 | }, props)));
|
170 | var renderButtonWithIcon = function renderButtonWithIcon(_ref4) {
|
171 | var Button = _ref4.Button,
|
172 | Icon = _ref4.Icon;
|
173 |
|
174 | return typeof children === 'function' ? children((0, _extends3.default)({}, commonProps, { Icon: Icon })) : _react2.default.createElement(
|
175 | Button,
|
176 | (0, _extends3.default)({}, commonProps),
|
177 | children ? _react2.default.createElement(
|
178 | _react.Fragment,
|
179 | null,
|
180 | _react2.default.createElement(Icon, null),
|
181 | children
|
182 | ) : _react2.default.createElement(Icon, null)
|
183 | );
|
184 | };
|
185 |
|
186 | var renderMercurySide = function renderMercurySide() {
|
187 | return _react2.default.createElement(_StyledButton.MERCURY_SIDE, {
|
188 | isOn: isOn,
|
189 | size: size,
|
190 | isInverted: isInverted,
|
191 | colors: subcolors,
|
192 | mercuryRatio: mercuryRatio,
|
193 | marginLock: marginLock,
|
194 | sideTransform: sideTransform
|
195 | });
|
196 | };
|
197 | var renderMercuryBSide = function renderMercuryBSide() {
|
198 | return marginLock && _react2.default.createElement(_StyledButton.MERCURY_BSIDE, {
|
199 | isOn: isOn,
|
200 | size: size,
|
201 | isInverted: isInverted,
|
202 | colors: subcolors,
|
203 | mercuryRatio: mercuryRatio,
|
204 | marginLock: marginLock,
|
205 | sideTransform: sideTransform
|
206 | });
|
207 | };
|
208 | var renderMercuryCenter = function renderMercuryCenter() {
|
209 | return _react2.default.createElement(
|
210 | _StyledButton.MERCURY_CENTER,
|
211 | { isOn: isOn, size: size, mercuryRatio: mercuryRatio, marginLock: marginLock },
|
212 | children
|
213 | );
|
214 | };
|
215 |
|
216 | var renderChildren = function renderChildren(type) {
|
217 | var icon = void 0;
|
218 | switch (type) {
|
219 | case 'caretdown':
|
220 | icon = isOn ? _react2.default.createElement(_StyledButton.EXPAND_LESS, null) : _react2.default.createElement(_StyledButton.EXPAND_MORE, null);
|
221 | renderIcon = function renderIcon(props) {
|
222 | return isOn ? _react2.default.createElement(_StyledButton.EXPAND_LESS, (0, _extends3.default)({}, props)) : _react2.default.createElement(_StyledButton.EXPAND_MORE, (0, _extends3.default)({}, props));
|
223 | };
|
224 |
|
225 | return typeof children === 'function' ? children((0, _extends3.default)({ icon: icon, renderIcon: renderIcon }, commonProps)) : _react2.default.createElement(
|
226 | _StyledButton.CARETDOWN_BUTTON,
|
227 | (0, _extends3.default)({}, commonProps),
|
228 | children ? _react2.default.createElement(
|
229 | _react.Fragment,
|
230 | null,
|
231 | children,
|
232 | renderIcon({
|
233 | style: { marginLeft: '0.75rem' }
|
234 | })
|
235 | ) : renderIcon()
|
236 | );
|
237 | case 'cancel':
|
238 | icon = _react2.default.createElement(_SVGCross2.default, { viewBox: '0 0 20 20', size: 16 });
|
239 | renderIcon = function renderIcon(props) {
|
240 | return _react2.default.createElement(_SVGCross2.default, (0, _extends3.default)({ viewBox: '0 0 20 20', size: 16 }, props));
|
241 | };
|
242 | return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver, icon: icon }) : _react2.default.createElement(
|
243 | _StyledButton.CANCEL_BUTTON,
|
244 | (0, _extends3.default)({}, commonProps),
|
245 | children ? _react2.default.createElement(
|
246 | _react.Fragment,
|
247 | null,
|
248 | _react2.default.createElement(
|
249 | 'div',
|
250 | { style: { display: 'flex', justifyContent: 'space-between' } },
|
251 | children
|
252 | ),
|
253 | renderIcon({ style: { pointerEvents: 'none', marginLeft: '0.75rem' } })
|
254 | ) : renderIcon({ style: { pointerEvents: 'none' } })
|
255 | );
|
256 | case 'facebook':
|
257 | return renderButtonWithIcon({ Button: _StyledButton.FACEBOOK_BUTTON, Icon: _StyledButton.FACEBOOK_ICON });
|
258 |
|
259 | case 'google':
|
260 | return renderButtonWithIcon({ Button: _StyledButton.GOOGLE_BUTTON, Icon: _StyledButton.GOOGLE_ICON });
|
261 |
|
262 | case 'mercurydrop':
|
263 | renderIcon = shouldRenderIcon ? renderIcon ? renderIcon : function (props) {
|
264 | 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));
|
265 | } : function () {
|
266 | return null;
|
267 | };
|
268 |
|
269 | var renderMercuryInside = function renderMercuryInside() {
|
270 | switch (subtype) {
|
271 | case '':
|
272 | case 'horizontal':
|
273 | return _react2.default.createElement(
|
274 | _react2.default.Fragment,
|
275 | null,
|
276 | renderMercurySide(),
|
277 | renderMercuryBSide(),
|
278 | renderIcon(),
|
279 | renderMercuryCenter(),
|
280 | renderIcon(),
|
281 | renderMercuryBSide(),
|
282 | renderMercurySide()
|
283 | );
|
284 | case 'right':
|
285 | return _react2.default.createElement(
|
286 | _react2.default.Fragment,
|
287 | null,
|
288 | renderMercuryCenter(),
|
289 | renderIcon(),
|
290 | renderMercuryBSide(),
|
291 | renderMercurySide()
|
292 | );
|
293 | case 'left':
|
294 | return _react2.default.createElement(
|
295 | _react2.default.Fragment,
|
296 | null,
|
297 | renderMercurySide(),
|
298 | renderMercuryBSide(),
|
299 | renderIcon(),
|
300 | renderMercuryCenter()
|
301 | );
|
302 | }
|
303 | };
|
304 | return typeof children === 'function' ? children({
|
305 | getButtonProps: getButtonProps,
|
306 | renderIcon: renderIcon
|
307 | }) : _react2.default.createElement(
|
308 | _StyledButton.MERCURY_BUTTON,
|
309 | (0, _extends3.default)({}, commonProps),
|
310 | renderMercuryInside()
|
311 | );
|
312 | default:
|
313 | return typeof children === 'function' ? children((0, _extends3.default)({}, commonProps)) : _react2.default.createElement(
|
314 | _StyledButton.BUTTON,
|
315 | (0, _extends3.default)({}, commonProps),
|
316 | children
|
317 | );
|
318 | }
|
319 | };
|
320 |
|
321 | return renderChildren(type);
|
322 | };
|
323 |
|
324 | exports.Button = Button;
|
325 | exports.default = _react2.default.memo(Button); |
\ | No newline at end of file |