1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.LoadingSpinner = exports.LoadingSpinnerContainer = exports.StartEnhancer = exports.EndEnhancer = exports.BaseButton = void 0;
|
7 |
|
8 | var _index = require("../styles/index.js");
|
9 |
|
10 | var _constants = require("./constants.js");
|
11 |
|
12 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
13 |
|
14 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
15 |
|
16 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
17 |
|
18 | var BaseButton = (0, _index.styled)('button', function (_ref) {
|
19 | var $theme = _ref.$theme,
|
20 | $size = _ref.$size,
|
21 | $kind = _ref.$kind,
|
22 | $shape = _ref.$shape,
|
23 | $isLoading = _ref.$isLoading,
|
24 | $isSelected = _ref.$isSelected,
|
25 | $disabled = _ref.$disabled,
|
26 | $isFocusVisible = _ref.$isFocusVisible;
|
27 | return _objectSpread({
|
28 | display: 'inline-flex',
|
29 |
|
30 | flexDirection: $isLoading ? 'column' : 'row',
|
31 | alignItems: 'center',
|
32 | justifyContent: 'center',
|
33 | borderLeftWidth: 0,
|
34 | borderTopWidth: 0,
|
35 | borderRightWidth: 0,
|
36 | borderBottomWidth: 0,
|
37 | borderLeftStyle: 'none',
|
38 | borderTopStyle: 'none',
|
39 | borderRightStyle: 'none',
|
40 | borderBottomStyle: 'none',
|
41 | outline: 'none',
|
42 | boxShadow: $isFocusVisible ? "inset 0 0 0 3px ".concat($theme.colors.accent) : 'none',
|
43 | textDecoration: 'none',
|
44 | WebkitAppearance: 'none',
|
45 | transitionProperty: 'background',
|
46 | transitionDuration: $theme.animation.timing200,
|
47 | transitionTimingFunction: $theme.animation.linearCurve,
|
48 | cursor: 'pointer',
|
49 | ':disabled': {
|
50 | cursor: 'not-allowed',
|
51 | backgroundColor: $theme.colors.buttonDisabledFill,
|
52 | color: $theme.colors.buttonDisabledText
|
53 | },
|
54 | marginLeft: 0,
|
55 | marginTop: 0,
|
56 | marginRight: 0,
|
57 | marginBottom: 0
|
58 | }, getFontStyles({
|
59 | $theme: $theme,
|
60 | $size: $size
|
61 | }), {}, getBorderRadiiStyles({
|
62 | $theme: $theme,
|
63 | $size: $size,
|
64 | $shape: $shape
|
65 | }), {}, getPaddingStyles({
|
66 | $theme: $theme,
|
67 | $size: $size,
|
68 | $shape: $shape
|
69 | }), {}, getKindStyles({
|
70 | $theme: $theme,
|
71 | $kind: $kind,
|
72 | $isLoading: $isLoading,
|
73 | $isSelected: $isSelected,
|
74 | $disabled: $disabled
|
75 | }), {}, getShapeStyles({
|
76 | $theme: $theme,
|
77 | $shape: $shape,
|
78 | $size: $size
|
79 | }));
|
80 | });
|
81 | exports.BaseButton = BaseButton;
|
82 | BaseButton.displayName = "BaseButton";
|
83 | var EndEnhancer = (0, _index.styled)('div', function (_ref2) {
|
84 | var $theme = _ref2.$theme;
|
85 | var marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
|
86 | return _defineProperty({
|
87 | display: 'flex'
|
88 | }, marginDirection, $theme.sizing.scale500);
|
89 | });
|
90 | exports.EndEnhancer = EndEnhancer;
|
91 | EndEnhancer.displayName = "EndEnhancer";
|
92 | var StartEnhancer = (0, _index.styled)('div', function (_ref4) {
|
93 | var $theme = _ref4.$theme;
|
94 | var marginDirection = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
|
95 | return _defineProperty({
|
96 | display: 'flex'
|
97 | }, marginDirection, $theme.sizing.scale500);
|
98 | });
|
99 | exports.StartEnhancer = StartEnhancer;
|
100 | StartEnhancer.displayName = "StartEnhancer";
|
101 | var LoadingSpinnerContainer = (0, _index.styled)('div', function (_ref6) {
|
102 | var $theme = _ref6.$theme,
|
103 | $size = _ref6.$size;
|
104 |
|
105 | var margins = '3px';
|
106 |
|
107 | if ($size === _constants.SIZE.mini || $size === _constants.SIZE.compact) {
|
108 | margins = $theme.sizing.scale0;
|
109 | }
|
110 |
|
111 | if ($size === _constants.SIZE.large) {
|
112 | margins = $theme.sizing.scale100;
|
113 | }
|
114 |
|
115 | return {
|
116 | lineHeight: 0,
|
117 | position: 'static',
|
118 | marginBottom: margins,
|
119 | marginTop: margins
|
120 | };
|
121 | });
|
122 | exports.LoadingSpinnerContainer = LoadingSpinnerContainer;
|
123 | LoadingSpinnerContainer.displayName = "LoadingSpinnerContainer";
|
124 | var LoadingSpinner = (0, _index.styled)('span', function (_ref7) {
|
125 | var $theme = _ref7.$theme,
|
126 | $kind = _ref7.$kind,
|
127 | $disabled = _ref7.$disabled,
|
128 | $size = _ref7.$size;
|
129 |
|
130 | var _getLoadingSpinnerCol = getLoadingSpinnerColors({
|
131 | $theme: $theme,
|
132 | $kind: $kind,
|
133 | $disabled: $disabled
|
134 | }),
|
135 | foreground = _getLoadingSpinnerCol.foreground,
|
136 | background = _getLoadingSpinnerCol.background;
|
137 |
|
138 | var dimension = $theme.sizing.scale550;
|
139 |
|
140 | if ($size === _constants.SIZE.mini || $size === _constants.SIZE.compact) {
|
141 | dimension = $theme.sizing.scale500;
|
142 | }
|
143 |
|
144 | if ($size === _constants.SIZE.large) {
|
145 | dimension = $theme.sizing.scale600;
|
146 | }
|
147 |
|
148 | return {
|
149 | height: dimension,
|
150 | width: dimension,
|
151 | borderTopLeftRadius: '50%',
|
152 | borderTopRightRadius: '50%',
|
153 | borderBottomRightRadius: '50%',
|
154 | borderBottomLeftRadius: '50%',
|
155 | borderLeftStyle: 'solid',
|
156 | borderTopStyle: 'solid',
|
157 | borderRightStyle: 'solid',
|
158 | borderBottomStyle: 'solid',
|
159 | borderLeftWidth: $theme.sizing.scale0,
|
160 | borderTopWidth: $theme.sizing.scale0,
|
161 | borderRightWidth: $theme.sizing.scale0,
|
162 | borderBottomWidth: $theme.sizing.scale0,
|
163 | borderTopColor: foreground,
|
164 | borderLeftColor: background,
|
165 | borderBottomColor: background,
|
166 | borderRightColor: background,
|
167 | boxSizing: 'border-box',
|
168 | display: 'inline-block',
|
169 | animationDuration: $theme.animation.timing700,
|
170 | animationTimingFunction: 'linear',
|
171 | animationIterationCount: 'infinite',
|
172 | animationName: {
|
173 | to: {
|
174 | transform: 'rotate(360deg)'
|
175 | },
|
176 | from: {
|
177 | transform: 'rotate(0deg)'
|
178 | }
|
179 | }
|
180 | };
|
181 | });
|
182 | exports.LoadingSpinner = LoadingSpinner;
|
183 | LoadingSpinner.displayName = "LoadingSpinner";
|
184 |
|
185 | function getLoadingSpinnerColors(_ref8) {
|
186 | var $theme = _ref8.$theme,
|
187 | $kind = _ref8.$kind,
|
188 | $disabled = _ref8.$disabled;
|
189 |
|
190 | if ($disabled) {
|
191 | return {
|
192 | foreground: $theme.colors.buttonDisabledSpinnerForeground,
|
193 | background: $theme.colors.buttonDisabledSpinnerBackground
|
194 | };
|
195 | }
|
196 |
|
197 | switch ($kind) {
|
198 | case _constants.KIND.secondary:
|
199 | {
|
200 | return {
|
201 | foreground: $theme.colors.buttonSecondarySpinnerForeground,
|
202 | background: $theme.colors.buttonSecondarySpinnerBackground
|
203 | };
|
204 | }
|
205 |
|
206 | case _constants.KIND.tertiary:
|
207 | {
|
208 | return {
|
209 | foreground: $theme.colors.buttonTertiarySpinnerForeground,
|
210 | background: $theme.colors.buttonTertiarySpinnerBackground
|
211 | };
|
212 | }
|
213 |
|
214 | case _constants.KIND.minimal:
|
215 | {
|
216 | return {
|
217 | foreground: $theme.colors.buttonMinimalSpinnerForeground,
|
218 | background: $theme.colors.buttonMinimalSpinnerBackground
|
219 | };
|
220 | }
|
221 |
|
222 | case _constants.KIND.primary:
|
223 | default:
|
224 | {
|
225 | return {
|
226 | foreground: $theme.colors.buttonPrimarySpinnerForeground,
|
227 | background: $theme.colors.buttonPrimarySpinnerBackground
|
228 | };
|
229 | }
|
230 | }
|
231 | }
|
232 |
|
233 | function getBorderRadiiStyles(_ref9) {
|
234 | var $theme = _ref9.$theme,
|
235 | $size = _ref9.$size,
|
236 | $shape = _ref9.$shape;
|
237 | var value = $theme.borders.buttonBorderRadius;
|
238 |
|
239 | if ($shape === _constants.SHAPE.pill) {
|
240 | if ($size === _constants.SIZE.compact) {
|
241 | value = '30px';
|
242 | } else if ($size === _constants.SIZE.large) {
|
243 | value = '42px';
|
244 | } else {
|
245 | value = '38px';
|
246 | }
|
247 | } else if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round) {
|
248 | value = '50%';
|
249 | }
|
250 |
|
251 | return {
|
252 | borderTopRightRadius: value,
|
253 | borderBottomRightRadius: value,
|
254 | borderTopLeftRadius: value,
|
255 | borderBottomLeftRadius: value
|
256 | };
|
257 | }
|
258 |
|
259 | function getFontStyles(_ref10) {
|
260 | var $theme = _ref10.$theme,
|
261 | $size = _ref10.$size;
|
262 |
|
263 | switch ($size) {
|
264 | case _constants.SIZE.mini:
|
265 | return $theme.typography.font150;
|
266 |
|
267 | case _constants.SIZE.compact:
|
268 | return $theme.typography.font250;
|
269 |
|
270 | case _constants.SIZE.large:
|
271 | return $theme.typography.font450;
|
272 |
|
273 | default:
|
274 | return $theme.typography.font350;
|
275 | }
|
276 | }
|
277 |
|
278 | function getPaddingStyles(_ref11) {
|
279 | var $theme = _ref11.$theme,
|
280 | $size = _ref11.$size,
|
281 | $shape = _ref11.$shape;
|
282 | var iconShape = $shape === _constants.SHAPE.square || $shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round;
|
283 |
|
284 | switch ($size) {
|
285 | case _constants.SIZE.mini:
|
286 | return {
|
287 | paddingTop: $theme.sizing.scale200,
|
288 | paddingBottom: $theme.sizing.scale200,
|
289 | paddingLeft: iconShape ? $theme.sizing.scale200 : $theme.sizing.scale300,
|
290 | paddingRight: iconShape ? $theme.sizing.scale200 : $theme.sizing.scale300
|
291 | };
|
292 |
|
293 | case _constants.SIZE.compact:
|
294 | return {
|
295 | paddingTop: $theme.sizing.scale400,
|
296 | paddingBottom: $theme.sizing.scale400,
|
297 | paddingLeft: iconShape ? $theme.sizing.scale400 : $theme.sizing.scale500,
|
298 | paddingRight: iconShape ? $theme.sizing.scale400 : $theme.sizing.scale500
|
299 | };
|
300 |
|
301 | case _constants.SIZE.large:
|
302 | return {
|
303 | paddingTop: $theme.sizing.scale600,
|
304 | paddingBottom: $theme.sizing.scale600,
|
305 | paddingLeft: iconShape ? $theme.sizing.scale600 : $theme.sizing.scale700,
|
306 | paddingRight: iconShape ? $theme.sizing.scale600 : $theme.sizing.scale700
|
307 | };
|
308 |
|
309 | default:
|
310 | return {
|
311 | paddingTop: $theme.sizing.scale550,
|
312 | paddingBottom: $theme.sizing.scale550,
|
313 | paddingLeft: iconShape ? $theme.sizing.scale550 : $theme.sizing.scale600,
|
314 | paddingRight: iconShape ? $theme.sizing.scale550 : $theme.sizing.scale600
|
315 | };
|
316 | }
|
317 | }
|
318 |
|
319 | function getKindStyles(_ref12) {
|
320 | var $theme = _ref12.$theme,
|
321 | $isLoading = _ref12.$isLoading,
|
322 | $isSelected = _ref12.$isSelected,
|
323 | $kind = _ref12.$kind,
|
324 | $disabled = _ref12.$disabled;
|
325 |
|
326 | if ($disabled) {
|
327 | return Object.freeze({});
|
328 | }
|
329 |
|
330 | switch ($kind) {
|
331 | case _constants.KIND.primary:
|
332 | if ($isSelected) {
|
333 | return {
|
334 | color: $theme.colors.buttonPrimarySelectedText,
|
335 | backgroundColor: $theme.colors.buttonPrimarySelectedFill
|
336 | };
|
337 | }
|
338 |
|
339 | return {
|
340 | color: $theme.colors.buttonPrimaryText,
|
341 | backgroundColor: $theme.colors.buttonPrimaryFill,
|
342 | ':hover': {
|
343 | backgroundColor: $isLoading ? $theme.colors.buttonPrimaryActive : $theme.colors.buttonPrimaryHover
|
344 | },
|
345 | ':active': {
|
346 | backgroundColor: $theme.colors.buttonPrimaryActive
|
347 | }
|
348 | };
|
349 |
|
350 | case _constants.KIND.secondary:
|
351 | if ($isSelected) {
|
352 | return {
|
353 | color: $theme.colors.buttonPrimaryText,
|
354 | backgroundColor: $theme.colors.buttonPrimaryFill
|
355 | };
|
356 | }
|
357 |
|
358 | return {
|
359 | color: $theme.colors.buttonSecondaryText,
|
360 | backgroundColor: $theme.colors.buttonSecondaryFill,
|
361 | ':hover': {
|
362 | backgroundColor: $isLoading ? $theme.colors.buttonSecondaryActive : $theme.colors.buttonSecondaryHover
|
363 | },
|
364 | ':active': {
|
365 | backgroundColor: $theme.colors.buttonSecondaryActive
|
366 | }
|
367 | };
|
368 |
|
369 | case _constants.KIND.tertiary:
|
370 | if ($isSelected) {
|
371 | return {
|
372 | color: $theme.colors.buttonTertiarySelectedText,
|
373 | backgroundColor: $theme.colors.buttonTertiarySelectedFill
|
374 | };
|
375 | }
|
376 |
|
377 | return {
|
378 | color: $theme.colors.buttonTertiaryText,
|
379 | backgroundColor: $theme.colors.buttonTertiaryFill,
|
380 | ':hover': {
|
381 | backgroundColor: $isLoading ? $theme.colors.buttonTertiaryActive : $theme.colors.buttonTertiaryHover
|
382 | },
|
383 | ':active': {
|
384 | backgroundColor: $theme.colors.buttonTertiaryActive
|
385 | }
|
386 | };
|
387 |
|
388 | case _constants.KIND.minimal:
|
389 | if ($isSelected) {
|
390 | return {
|
391 | color: $theme.colors.buttonMinimalSelectedText,
|
392 | backgroundColor: $theme.colors.buttonMinimalSelectedFill
|
393 | };
|
394 | }
|
395 |
|
396 | return {
|
397 | color: $theme.colors.buttonMinimalText,
|
398 | backgroundColor: $theme.colors.buttonMinimalFill,
|
399 | ':hover': {
|
400 | backgroundColor: $isLoading ? $theme.colors.buttonMinimalActive : $theme.colors.buttonMinimalHover
|
401 | },
|
402 | ':active': {
|
403 | backgroundColor: $theme.colors.buttonMinimalActive
|
404 | }
|
405 | };
|
406 |
|
407 | default:
|
408 | return Object.freeze({});
|
409 | }
|
410 | }
|
411 |
|
412 | function getShapeStyles(_ref13) {
|
413 | var $theme = _ref13.$theme,
|
414 | $shape = _ref13.$shape,
|
415 | $size = _ref13.$size;
|
416 |
|
417 | if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.square) {
|
418 | var height, width;
|
419 |
|
420 | switch ($size) {
|
421 | case _constants.SIZE.mini:
|
422 | height = '28px';
|
423 | width = '28px';
|
424 | break;
|
425 |
|
426 | case _constants.SIZE.compact:
|
427 | height = '36px';
|
428 | width = '36px';
|
429 | break;
|
430 |
|
431 | case _constants.SIZE.large:
|
432 | height = '56px';
|
433 | width = '56px';
|
434 | break;
|
435 |
|
436 | case _constants.SIZE.default:
|
437 | default:
|
438 | height = '48px';
|
439 | width = '48px';
|
440 | break;
|
441 | }
|
442 |
|
443 | return {
|
444 | height: height,
|
445 | width: width,
|
446 | paddingTop: 0,
|
447 | paddingBottom: 0,
|
448 | paddingLeft: 0,
|
449 | paddingRight: 0
|
450 | };
|
451 | } else {
|
452 | return {};
|
453 | }
|
454 | } |
\ | No newline at end of file |