@burnsred/ui 0.6.3 → 0.6.4-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,1601 +0,0 @@
1
- import PropTypes from 'prop-types';
2
- import PropTypesImmutable from 'react-immutable-proptypes';
3
- import PropTypesPlus from '@burnsred/prop-types-plus';
4
- import React from 'react';
5
- import { withEnhanceProps, colorFromPalette, mixins, color, useEnhanceProps, useCleanProps, media, image, component } from '@burnsred/theme';
6
- import 'core-js/modules/es6.object.assign';
7
- import classnames from 'classnames';
8
- import { useDefault } from '@burnsred/default';
9
- import 'core-js/modules/es6.function.name';
10
- import styled, { css, keyframes, withTheme } from 'styled-components';
11
- import 'core-js/modules/es6.regexp.to-string';
12
- import 'core-js/modules/web.dom.iterable';
13
- import 'core-js/modules/es6.array.iterator';
14
- import { Map, List } from 'immutable';
15
- import _flowRight from 'lodash/flowRight';
16
- import { withProps } from '@burnsred/higher-order-component';
17
- import exact from 'prop-types-exact';
18
- import withOnClickOutside from 'react-onclickoutside';
19
- import ReactDOM from 'react-dom';
20
- import _isFunction from 'lodash/isFunction';
21
- import 'core-js/modules/es6.regexp.split';
22
-
23
- function _classCallCheck(instance, Constructor) {
24
- if (!(instance instanceof Constructor)) {
25
- throw new TypeError("Cannot call a class as a function");
26
- }
27
- }
28
-
29
- function _defineProperties(target, props) {
30
- for (var i = 0; i < props.length; i++) {
31
- var descriptor = props[i];
32
- descriptor.enumerable = descriptor.enumerable || false;
33
- descriptor.configurable = true;
34
- if ("value" in descriptor) descriptor.writable = true;
35
- Object.defineProperty(target, descriptor.key, descriptor);
36
- }
37
- }
38
-
39
- function _createClass(Constructor, protoProps, staticProps) {
40
- if (protoProps) _defineProperties(Constructor.prototype, protoProps);
41
- if (staticProps) _defineProperties(Constructor, staticProps);
42
- return Constructor;
43
- }
44
-
45
- function _defineProperty(obj, key, value) {
46
- if (key in obj) {
47
- Object.defineProperty(obj, key, {
48
- value: value,
49
- enumerable: true,
50
- configurable: true,
51
- writable: true
52
- });
53
- } else {
54
- obj[key] = value;
55
- }
56
-
57
- return obj;
58
- }
59
-
60
- function _extends() {
61
- _extends = Object.assign || function (target) {
62
- for (var i = 1; i < arguments.length; i++) {
63
- var source = arguments[i];
64
-
65
- for (var key in source) {
66
- if (Object.prototype.hasOwnProperty.call(source, key)) {
67
- target[key] = source[key];
68
- }
69
- }
70
- }
71
-
72
- return target;
73
- };
74
-
75
- return _extends.apply(this, arguments);
76
- }
77
-
78
- function _objectSpread(target) {
79
- for (var i = 1; i < arguments.length; i++) {
80
- var source = arguments[i] != null ? arguments[i] : {};
81
- var ownKeys = Object.keys(source);
82
-
83
- if (typeof Object.getOwnPropertySymbols === 'function') {
84
- ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
85
- return Object.getOwnPropertyDescriptor(source, sym).enumerable;
86
- }));
87
- }
88
-
89
- ownKeys.forEach(function (key) {
90
- _defineProperty(target, key, source[key]);
91
- });
92
- }
93
-
94
- return target;
95
- }
96
-
97
- function _inherits(subClass, superClass) {
98
- if (typeof superClass !== "function" && superClass !== null) {
99
- throw new TypeError("Super expression must either be null or a function");
100
- }
101
-
102
- subClass.prototype = Object.create(superClass && superClass.prototype, {
103
- constructor: {
104
- value: subClass,
105
- writable: true,
106
- configurable: true
107
- }
108
- });
109
- if (superClass) _setPrototypeOf(subClass, superClass);
110
- }
111
-
112
- function _getPrototypeOf(o) {
113
- _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
114
- return o.__proto__ || Object.getPrototypeOf(o);
115
- };
116
- return _getPrototypeOf(o);
117
- }
118
-
119
- function _setPrototypeOf(o, p) {
120
- _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
121
- o.__proto__ = p;
122
- return o;
123
- };
124
-
125
- return _setPrototypeOf(o, p);
126
- }
127
-
128
- function _assertThisInitialized(self) {
129
- if (self === void 0) {
130
- throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
131
- }
132
-
133
- return self;
134
- }
135
-
136
- function _possibleConstructorReturn(self, call) {
137
- if (call && (typeof call === "object" || typeof call === "function")) {
138
- return call;
139
- }
140
-
141
- return _assertThisInitialized(self);
142
- }
143
-
144
- function _taggedTemplateLiteral(strings, raw) {
145
- if (!raw) {
146
- raw = strings.slice(0);
147
- }
148
-
149
- return Object.freeze(Object.defineProperties(strings, {
150
- raw: {
151
- value: Object.freeze(raw)
152
- }
153
- }));
154
- }
155
-
156
- function _slicedToArray(arr, i) {
157
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
158
- }
159
-
160
- function _toConsumableArray(arr) {
161
- return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
162
- }
163
-
164
- function _arrayWithoutHoles(arr) {
165
- if (Array.isArray(arr)) {
166
- for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
167
-
168
- return arr2;
169
- }
170
- }
171
-
172
- function _arrayWithHoles(arr) {
173
- if (Array.isArray(arr)) return arr;
174
- }
175
-
176
- function _iterableToArray(iter) {
177
- if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
178
- }
179
-
180
- function _iterableToArrayLimit(arr, i) {
181
- var _arr = [];
182
- var _n = true;
183
- var _d = false;
184
- var _e = undefined;
185
-
186
- try {
187
- for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
188
- _arr.push(_s.value);
189
-
190
- if (i && _arr.length === i) break;
191
- }
192
- } catch (err) {
193
- _d = true;
194
- _e = err;
195
- } finally {
196
- try {
197
- if (!_n && _i["return"] != null) _i["return"]();
198
- } finally {
199
- if (_d) throw _e;
200
- }
201
- }
202
-
203
- return _arr;
204
- }
205
-
206
- function _nonIterableSpread() {
207
- throw new TypeError("Invalid attempt to spread non-iterable instance");
208
- }
209
-
210
- function _nonIterableRest() {
211
- throw new TypeError("Invalid attempt to destructure non-iterable instance");
212
- }
213
-
214
- var UIIcon = withEnhanceProps(styled.i.attrs(function (props) {
215
- var _classnames;
216
-
217
- return {
218
- className: classnames((_classnames = {
219
- 'material-icons': props.material
220
- }, _defineProperty(_classnames, "fa fa-".concat(props.name), props.fontawesome), _defineProperty(_classnames, "icon icon-".concat(props.name), !props.fontawesome && !props.material), _defineProperty(_classnames, props.className, props.className), _classnames)),
221
- children: props.material ? props.name : props.children
222
- };
223
- }).withConfig({
224
- displayName: "Icon__UIIcon",
225
- componentId: "sc-10obg3m-0"
226
- })(["&&{font-size:", ";}", " ", " ", ""], function (props) {
227
- return props.fontSize || '1rem';
228
- }, function (props) {
229
- return props.$palette && css(["color:", ";"], colorFromPalette());
230
- }, mixins.space, function (props) {
231
- return props.css;
232
- }));
233
- UIIcon.propTypes = {
234
- fontawesome: PropTypes.bool,
235
- fontSize: PropTypes.string,
236
- hidden: PropTypes.bool,
237
- material: PropTypes.bool,
238
- margin: PropTypes.string,
239
- name: PropTypes.string.isRequired,
240
- namespace: PropTypes.string,
241
- padding: PropTypes.string,
242
- palette: PropTypes.string,
243
- paletteAsBackground: PropTypes.bool,
244
- paletteWeight: PropTypes.string,
245
- variant: PropTypes.string
246
- };
247
- UIIcon.defaultProps = {
248
- fontawesome: false,
249
- fontSize: undefined,
250
- hidden: undefined,
251
- material: false,
252
- margin: undefined,
253
- namespace: 'component_uiIcon',
254
- padding: undefined,
255
- palette: undefined,
256
- paletteAsBackground: false,
257
- paletteWeight: undefined,
258
- variant: 'standard'
259
- };
260
-
261
- var spinnerRotateLinear =
262
- /*#__PURE__*/
263
- keyframes(["0%{transform:rotate(0);}100%{transform:rotate(360deg);}"]);
264
-
265
- var spinnerStrokeRotate = function spinnerStrokeRotate(props) {
266
- return keyframes(["0%{stroke-dashoffset:", ";transform:rotate(0);}12.5%{stroke-dashoffset:", ";transform:rotate(0);}12.5001%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(72.5deg);}25%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(72.5deg);}25.0001%{stroke-dashoffset:", ";transform:rotate(270deg);}37.5%{stroke-dashoffset:", ";transform:rotate(270deg);}37.5001%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(161.5deg);}50%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(161.5deg);}50.0001%{stroke-dashoffset:", ";transform:rotate(180deg);}62.5%{stroke-dashoffset:", ";transform:rotate(180deg);}62.5001%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(251.5deg);}75%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(251.5deg);}75.0001%{stroke-dashoffset:", ";transform:rotate(90deg);}87.5%{stroke-dashoffset:", ";transform:rotate(90deg);}87.5001%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(341.5deg);}100%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(341.5deg);}"], "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"));
267
- };
268
-
269
- var Circle =
270
- /*#__PURE__*/
271
- styled.circle.withConfig({
272
- displayName: "ProgressCirclestyles__Circle",
273
- componentId: "hm517x-0"
274
- })(["animation-name:", ";fill:transparent;stroke:", ";stroke-dasharray:", ";stroke-width:", ";transition:stroke-dashoffset ", " linear;transform-box:view-box;transform-origin:center;", " ", ""], function (props) {
275
- return spinnerStrokeRotate(props);
276
- }, function (props) {
277
- return color({
278
- palette: props.palette || 'primary',
279
- paletteWeight: props.paletteWeight
280
- })(props);
281
- }, function (props) {
282
- return "".concat((100 - props.thickness) * Math.PI, "px");
283
- }, function (props) {
284
- return "".concat(props.thickness, "%");
285
- }, function (props) {
286
- return props.transitionDuration || '225ms';
287
- }, function (props) {
288
- return props.value === null && css(["animation-duration:4s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0.35,0,0.25,1);transition-property:stroke;"]);
289
- }, function (props) {
290
- return props.value !== null && css(["stroke-dashoffset:", "px;"], (100 - props.thickness) * Math.PI * (100 - props.value) / 100);
291
- });
292
- var Container =
293
- /*#__PURE__*/
294
- styled.div.withConfig({
295
- displayName: "ProgressCirclestyles__Container",
296
- componentId: "hm517x-1"
297
- })(["display:inline-block;height:", ";position:relative;width:", ";", " ", ""], function (props) {
298
- return props.size;
299
- }, function (props) {
300
- return props.size;
301
- }, mixins.margin, mixins.padding);
302
- var SVG =
303
- /*#__PURE__*/
304
- styled.svg.withConfig({
305
- displayName: "ProgressCirclestyles__SVG",
306
- componentId: "hm517x-2"
307
- })(["height:100%;left:0;top:0;overflow:visible;position:absolute;transform:rotate(-90deg);transform-origin:center;width:100%;", ""], function (props) {
308
- return props.value === null && css(["animation:", " 2s linear infinite;"], spinnerRotateLinear);
309
- });
310
-
311
- function _templateObject() {
312
- var data = _taggedTemplateLiteral(["", ""]);
313
-
314
- _templateObject = function _templateObject() {
315
- return data;
316
- };
317
-
318
- return data;
319
- }
320
-
321
- function ProgressCircle(_props) {
322
- var props = useEnhanceProps(_props);
323
-
324
- var _React$useState = React.useState(props.valueInitial === undefined ? props.value : props.valueInitial),
325
- _React$useState2 = _slicedToArray(_React$useState, 2),
326
- value = _React$useState2[0],
327
- setValue = _React$useState2[1];
328
-
329
- React.useEffect(function () {
330
- setTimeout(function () {
331
- return setValue(props.value);
332
- }, 0);
333
- }, [props.value]);
334
- return React.createElement(_StyledContainer, _extends({}, useCleanProps(props), {
335
- _css: props.css
336
- }), React.createElement(SVG, {
337
- focusable: "false",
338
- preserveAspectRatio: "xMidYMid meet",
339
- value: value,
340
- viewBox: "0 0 100 100"
341
- }, props.bufferPalette && React.createElement(Circle, {
342
- cx: "50%",
343
- cy: "50%",
344
- palette: props.bufferPalette,
345
- paletteWeight: props.bufferPaletteWeight,
346
- r: (50 - props.thickness / 2).toString(),
347
- thickness: props.thickness,
348
- transitionDuration: props.transitionDuration,
349
- value: 100
350
- }), React.createElement(Circle, {
351
- cx: "50%",
352
- cy: "50%",
353
- palette: props.$palette // eslint-disable-line react/prop-types
354
- ,
355
- paletteWeight: props.$paletteWeight // eslint-disable-line react/prop-types
356
- ,
357
- r: (50 - props.thickness / 2).toString(),
358
- thickness: props.thickness,
359
- transitionDuration: props.transitionDuration,
360
- value: value
361
- })));
362
- }
363
-
364
- ProgressCircle.propTypes = {
365
- bufferPalette: PropTypesPlus.string,
366
- bufferPaletteWeight: PropTypes.string,
367
- css: PropTypesPlus.css,
368
- namespace: PropTypes.string,
369
- palette: PropTypesPlus.string,
370
- paletteWeight: PropTypes.string,
371
- size: PropTypes.string,
372
- transitionDuration: PropTypes.string,
373
- value: PropTypes.number,
374
- valueInitial: PropTypes.number,
375
- thickness: PropTypes.number
376
- };
377
- ProgressCircle.defaultProps = {
378
- bufferPalette: undefined,
379
- bufferPaletteWeight: undefined,
380
- css: undefined,
381
- namespace: 'component_uiProgressCircle',
382
- palette: undefined,
383
- paletteWeight: undefined,
384
- size: '32px',
385
- transitionDuration: undefined,
386
- value: null,
387
- valueInitial: undefined,
388
- thickness: 20
389
- };
390
-
391
- var _StyledContainer = styled(Container)(_templateObject(), function (p) {
392
- return p._css;
393
- });
394
-
395
- function _templateObject$1() {
396
- var data = _taggedTemplateLiteral(["\n color: ", ";\n "]);
397
-
398
- _templateObject$1 = function _templateObject() {
399
- return data;
400
- };
401
-
402
- return data;
403
- }
404
- var local = ['onChangeInput', 'value'];
405
-
406
- var StringComponent = function StringComponent(props) {
407
- return props.children;
408
- };
409
-
410
- var Component =
411
- /*#__PURE__*/
412
- styled.span.withConfig({
413
- displayName: "Typehooks__Component",
414
- componentId: "rbnsuu-0"
415
- })(["", " ", " ", " ", ""], function (props) {
416
- return props.$palette && css(["color:", ";"], colorFromPalette());
417
- }, mixins.space, media.print(_templateObject$1(), color({
418
- palette: 'black'
419
- })), function (props) {
420
- return props.css;
421
- });
422
- var hooks = {
423
- useComponent: function useComponent(props) {
424
- return props.as === null ? StringComponent : Component;
425
- },
426
- useProps: function useProps(props) {
427
- return useCleanProps(props, {
428
- local: local
429
- });
430
- }
431
- };
432
-
433
- function render(props, intl) {
434
- var _ref;
435
-
436
- var value = props.children || props.value;
437
-
438
- if (props.hidden) {
439
- return null;
440
- }
441
-
442
- if (value instanceof Error) {
443
- return value.message;
444
- }
445
-
446
- if (props.field) {
447
- return props.field.toString(value);
448
- }
449
-
450
- if (intl && ((_ref = value) != null ? _ref.id : _ref)) {
451
- return intl.formatMessage(value, props.values);
452
- }
453
-
454
- return value;
455
- }
456
-
457
- var DummyContext = React.createContext({});
458
- var mapDefault = {
459
- intlContext: ['uiType_context_intl', 'context_intl']
460
- };
461
-
462
- function UIType(_props) {
463
- var props = useEnhanceProps(_props);
464
- var Component = hooks.useComponent(props);
465
-
466
- var _useDefault = useDefault(mapDefault, props),
467
- _useDefault$intlConte = _useDefault.intlContext,
468
- intlContext = _useDefault$intlConte === void 0 ? DummyContext : _useDefault$intlConte;
469
-
470
- var intl = React.useContext(intlContext);
471
- return React.createElement(Component, hooks.useProps(props), (props.render || render)(props, intl));
472
- }
473
-
474
- UIType.propTypes = {
475
- as: PropTypesPlus.component,
476
- children: PropTypes.oneOfType([PropTypes.node, PropTypesPlus.typography]),
477
- className: PropTypesPlus.string,
478
- field: PropTypes.shape({
479
- toString: PropTypes.func.isRequired
480
- }),
481
- hidden: PropTypes.bool,
482
- intlContext: PropTypes.shape({}),
483
- mediaPrintDisabled: PropTypes.bool,
484
- namespace: PropTypesPlus.string,
485
- palette: PropTypes.string,
486
- paletteAsBackground: PropTypes.bool,
487
- paletteWeight: PropTypes.string,
488
- render: PropTypes.func,
489
- value: PropTypes.oneOfType([PropTypesPlus.typography, PropTypesPlus.value]),
490
- variant: PropTypes.string
491
- };
492
- UIType.defaultProps = {
493
- as: undefined,
494
- children: undefined,
495
- className: '',
496
- field: undefined,
497
- hidden: undefined,
498
- intlContext: undefined,
499
- mediaPrintDisabled: undefined,
500
- namespace: 'component_uiType',
501
- palette: undefined,
502
- paletteAsBackground: undefined,
503
- paletteWeight: undefined,
504
- render: undefined,
505
- value: undefined,
506
- variant: undefined
507
- };
508
- var UIType$1 = React.memo(UIType);
509
-
510
- var local$1 = ['contentPaletteAsBackground', 'iconCss', 'iconFont', 'iconHidden', 'iconName', 'iconPaletteAsBackground', 'processingPaletteAsBackground'];
511
- var mapDefault$1 = {
512
- contentComponent: ['uiButton_component_type', 'component_type'],
513
- iconComponent: ['uiButton_component_icon', 'component_icon'],
514
- linkComponent: ['uiButton_component_link', 'component_link'],
515
- processingComponent: ['uiButton_component_processing', 'component_processing']
516
- };
517
- var hooks$1 = {
518
- useComponents: function useComponents(props) {
519
- var defaults = useDefault(mapDefault$1, props);
520
- return {
521
- Content: defaults.contentComponent || UIType$1,
522
- Icon: defaults.iconComponent || UIIcon,
523
- Processing: defaults.processingComponent || ProgressCircle
524
- };
525
- },
526
- useProps: function useProps(props) {
527
- var _useDefault = useDefault(mapDefault$1, props),
528
- linkComponent = _useDefault.linkComponent;
529
-
530
- return useCleanProps(Object.assign({
531
- href: props.to
532
- }, props, props.to && {
533
- as: props.as || !/^https?:\/\//.exec(props.to) && linkComponent || 'a'
534
- }, {
535
- disabled: props.processing || props.disabled
536
- }), {
537
- local: local$1
538
- });
539
- },
540
- usePropsIcon: function usePropsIcon(props) {
541
- var _ref2;
542
-
543
- return Object.assign({
544
- css: props.iconCss,
545
- fontSize: props.iconFontSize,
546
- hidden: props.processing || props.iconHidden === undefined || props.iconHidden,
547
- name: props.iconName || 'name',
548
- palette: props.$palette,
549
- paletteAsBackground: props.iconPaletteAsBackground,
550
- paletteWeight: props.$paletteWeight,
551
- variant: 'button'
552
- }, props.iconFont && _defineProperty({}, props.iconFont, true), props.iconComponentProps, {
553
- className: classnames('uiButton-Icon', (_ref2 = props) != null ? (_ref2 = _ref2.iconComponentProps) != null ? _ref2.className : _ref2 : _ref2)
554
- });
555
- },
556
- usePropsContent: function usePropsContent(props) {
557
- var _ref;
558
-
559
- return _objectSpread({
560
- children: props.children,
561
- hidden: props.contentHidden || props.processing,
562
- palette: props.$palette,
563
- paletteAsBackground: props.contentPaletteAsBackground,
564
- paletteWeight: props.$paletteWeight,
565
- value: props.content,
566
- variant: 'button'
567
- }, props.contentComponentProps, {
568
- className: classnames('uiButton-Content', (_ref = props) != null ? (_ref = _ref.contentComponentProps) != null ? _ref.className : _ref : _ref)
569
- });
570
- },
571
- usePropsProcessing: function usePropsProcessing(props) {
572
- return _objectSpread({
573
- hidden: !props.processing,
574
- palette: props.$palette,
575
- paletteAsBackground: props.processingPaletteAsBackground,
576
- paletteWeight: props.$paletteWeight,
577
- variant: 'button'
578
- }, props.processingComponentProps);
579
- }
580
- };
581
-
582
- function _templateObject$2() {
583
- var data = _taggedTemplateLiteral(["\n display: none;\n "]);
584
-
585
- _templateObject$2 = function _templateObject() {
586
- return data;
587
- };
588
-
589
- return data;
590
- }
591
- var Button = styled.button.withConfig({
592
- displayName: "Buttonstyles",
593
- componentId: "ym92z0-0"
594
- })(["align-items:center;background-color:", ";border:0;border-radius:0.25em;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0.5em 1.5em;position:relative;text-decoration:none;", " &:hover{background-color:", ";}&:focus{background-color:", ";}&:disabled{background-color:", ";cursor:auto;*{color:", ";}}", " ", " ", ""], function (props) {
595
- return props.$paletteAsBackground ? colorFromPalette()(props) : 'transparent';
596
- }, mixins.space, color({
597
- palette: 'gray',
598
- paletteWeight: '50'
599
- }), color({
600
- palette: 'gray',
601
- paletteWeight: '100'
602
- }), color({
603
- palette: 'gray',
604
- paletteWeight: '200'
605
- }), color({
606
- palette: 'gray',
607
- paletteWeight: '800'
608
- }), function (props) {
609
- return props.$media && css(["@media only screen and (", "){padding:0.5em 1em;.uiButton-Content{display:none;}.uiButton-Icon{display:inline-block;}}"], props.$media);
610
- }, media.print(_templateObject$2()), function (props) {
611
- return props.css;
612
- });
613
-
614
- function UIButton(_props) {
615
- var props = useEnhanceProps(_props);
616
-
617
- var _hooks$useComponents = hooks$1.useComponents(props),
618
- Content = _hooks$useComponents.Content,
619
- Icon = _hooks$useComponents.Icon,
620
- Processing = _hooks$useComponents.Processing;
621
-
622
- var processingProps = hooks$1.usePropsProcessing(props);
623
- return React.createElement(Button, hooks$1.useProps(props), React.createElement(Icon, hooks$1.usePropsIcon(props)), !processingProps.hidden && React.createElement(Processing, processingProps), React.createElement(Content, hooks$1.usePropsContent(props)));
624
- }
625
-
626
- UIButton.propTypes = {
627
- as: PropTypesPlus.component,
628
- children: PropTypes.node,
629
- content: PropTypes.oneOfType([PropTypes.string, PropTypesPlus.locale, PropTypesImmutable.map]),
630
- contentComponent: PropTypesPlus.component,
631
- contentComponentProps: PropTypes.shape({}),
632
- contentHidden: PropTypes.bool,
633
- contentPaletteAsBackground: PropTypes.bool,
634
- css: PropTypesPlus.css,
635
- disabled: PropTypes.bool,
636
- hidden: PropTypes.bool,
637
- iconComponent: PropTypesPlus.component,
638
- iconComponentProps: PropTypes.shape({}),
639
- iconCss: PropTypesPlus.css,
640
- iconFont: PropTypesPlus.string,
641
- iconHidden: PropTypes.bool,
642
- iconName: PropTypesPlus.string,
643
- iconPaletteAsBackground: PropTypes.bool,
644
- media: PropTypesPlus.string,
645
- mediaPrintDisabled: PropTypes.bool,
646
- namespace: PropTypesPlus.string,
647
- onClick: PropTypes.func,
648
- palette: PropTypesPlus.string,
649
- paletteAsBackground: PropTypes.bool,
650
- paletteWeight: PropTypes.string,
651
- processing: PropTypes.bool,
652
- processingComponent: PropTypesPlus.component,
653
- processingComponentProps: PropTypes.shape({}),
654
- processingDidFail: PropTypes.bool,
655
- processingPaletteAsBackground: PropTypes.bool,
656
- to: PropTypesPlus.string,
657
- variant: PropTypesPlus.string
658
- };
659
- UIButton.defaultProps = {
660
- as: undefined,
661
- children: undefined,
662
- content: undefined,
663
- contentComponent: undefined,
664
- contentComponentProps: undefined,
665
- contentHidden: undefined,
666
- contentPaletteAsBackground: undefined,
667
- css: undefined,
668
- disabled: undefined,
669
- hidden: undefined,
670
- iconComponent: undefined,
671
- iconComponentProps: undefined,
672
- iconCss: undefined,
673
- iconFont: undefined,
674
- iconHidden: undefined,
675
- iconName: undefined,
676
- iconPaletteAsBackground: undefined,
677
- media: undefined,
678
- mediaPrintDisabled: undefined,
679
- namespace: 'component_uiButton',
680
- onClick: undefined,
681
- palette: undefined,
682
- paletteAsBackground: undefined,
683
- paletteWeight: undefined,
684
- processing: undefined,
685
- processingComponent: undefined,
686
- processingComponentProps: undefined,
687
- processingDidFail: undefined,
688
- processingPaletteAsBackground: undefined,
689
- to: undefined,
690
- variant: 'standard'
691
- };
692
- var Button$1 = React.memo(UIButton);
693
-
694
- var UICard = withEnhanceProps(styled.div.withConfig({
695
- displayName: "Card__UICard",
696
- componentId: "zuegsg-0"
697
- })(["background-color:", ";", " ", ""], function (props) {
698
- return props.$palette && colorFromPalette({
699
- paletteAsBackground: props.$paletteAsBackground !== undefined && !props.$paletteAsBackground
700
- })(props);
701
- }, mixins.space, function (props) {
702
- return props.css;
703
- }));
704
- UICard.propTypes = {
705
- css: PropTypesPlus.css,
706
- margin: PropTypesPlus.string,
707
- namespace: PropTypesPlus.string,
708
- padding: PropTypesPlus.string,
709
- palette: PropTypes.string,
710
- paletteAsBackground: PropTypes.bool,
711
- paletteWeight: PropTypes.string,
712
- variant: PropTypes.string
713
- };
714
- UICard.defaultProps = {
715
- css: undefined,
716
- margin: undefined,
717
- padding: undefined,
718
- palette: undefined,
719
- paletteAsBackground: undefined,
720
- paletteWeight: undefined,
721
- namespace: 'component_uiCard',
722
- variant: 'standard'
723
- };
724
-
725
- var UIError = function UIError(props) {
726
- return React.createElement(UIType$1, _extends({
727
- variant: "body2",
728
- palette: "danger"
729
- }, props), Map.isMap(props.children) ? props.children.get('message') : props.children);
730
- };
731
-
732
- UIError.propTypes = {
733
- children: PropTypes.oneOfType([PropTypes.node, PropTypesImmutable.map])
734
- };
735
- UIError.defaultProps = {
736
- children: undefined
737
- };
738
- var UIError$1 = React.memo(UIError);
739
-
740
- var UIErrorWell = function UIErrorWell(props) {
741
- return props.errors.size > 0 && React.createElement(UICard, {
742
- className: props.className,
743
- variant: "danger"
744
- }, props.errors.map(function (error, index) {
745
- return React.createElement(UIError$1, {
746
- key: index
747
- }, error) // eslint-disable-line react/no-array-index-key
748
- ;
749
- }));
750
- };
751
-
752
- UIErrorWell.propTypes = {
753
- errors: PropTypesImmutable.list.isRequired
754
- };
755
- var ErrorWell = React.memo(UIErrorWell);
756
-
757
- var ErrorBoundary =
758
- /*#__PURE__*/
759
- function (_React$Component) {
760
- _inherits(ErrorBoundary, _React$Component);
761
-
762
- function ErrorBoundary() {
763
- var _getPrototypeOf2;
764
-
765
- var _this;
766
-
767
- _classCallCheck(this, ErrorBoundary);
768
-
769
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
770
- args[_key] = arguments[_key];
771
- }
772
-
773
- _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ErrorBoundary)).call.apply(_getPrototypeOf2, [this].concat(args)));
774
-
775
- _defineProperty(_assertThisInitialized(_this), "state", {
776
- hasError: false
777
- });
778
-
779
- return _this;
780
- }
781
-
782
- _createClass(ErrorBoundary, [{
783
- key: "componentDidCatch",
784
- value: function componentDidCatch(error, info) {
785
- this.props.onError(error, info);
786
- }
787
- }, {
788
- key: "render",
789
- value: function render() {
790
- if (!this.state.hasError) return this.props.children;
791
- var Fallback = this.props.fallbackComponent;
792
- return React.createElement(Fallback, _extends({
793
- errors: List([this.state.error.message])
794
- }, this.props.fallbackComponentProps));
795
- }
796
- }], [{
797
- key: "getDerivedStateFromError",
798
- value: function getDerivedStateFromError(error) {
799
- return {
800
- error: error,
801
- hasError: true
802
- };
803
- }
804
- }]);
805
-
806
- return ErrorBoundary;
807
- }(React.Component);
808
-
809
- ErrorBoundary.propTypes = {
810
- children: PropTypes.node.isRequired,
811
- fallbackComponent: PropTypesPlus.component,
812
- fallbackComponentProps: PropTypes.shape({}),
813
- onError: PropTypes.func
814
- };
815
- ErrorBoundary.defaultProps = {
816
- fallbackComponent: ErrorWell,
817
- fallbackComponentProps: {},
818
- onError: function onError() {
819
- return undefined;
820
- }
821
- };
822
-
823
- var UIFlexBox = withEnhanceProps(styled.div.withConfig({
824
- displayName: "FlexBox__UIFlexBox",
825
- componentId: "sc-13ev10s-0"
826
- })(["align-items:", ";display:flex;", " ", " ", " ", " ", ""], function (props) {
827
- return props.alignItems;
828
- }, function (props) {
829
- return props.$palette && css(["background-color:", ";"], colorFromPalette({
830
- paletteAsBackground: props.$paletteAsBackground !== undefined && !props.$paletteAsBackground
831
- })(props));
832
- }, function (props) {
833
- return props.flexDirection && css(["flex-direction:", ";"], props.flexDirection);
834
- }, function (props) {
835
- return props.justifyContent && css(["justify-content:", ";"], props.justifyContent);
836
- }, mixins.space, function (props) {
837
- return props.css;
838
- }));
839
- UIFlexBox.propTypes = {
840
- alignItems: PropTypes.string,
841
- justifyContent: PropTypes.string,
842
- namespace: PropTypes.string,
843
- palette: PropTypes.string,
844
- paletteAsBackground: PropTypes.bool,
845
- paletteWeight: PropTypes.string,
846
- variant: PropTypes.string
847
- };
848
- UIFlexBox.defaultProps = {
849
- alignItems: 'center',
850
- namespace: 'component_uiFlexBox',
851
- palette: undefined,
852
- paletteAsBackground: undefined,
853
- paletteWeight: undefined,
854
- variant: 'standard'
855
- };
856
-
857
- var UIImage =
858
- /*#__PURE__*/
859
- styled.img.withConfig({
860
- displayName: "Image__UIImage",
861
- componentId: "sc-1fmo7bh-0"
862
- })(["", " ", ""], component(), function (props) {
863
- return props.css;
864
- });
865
- UIImage.propTypes = {
866
- alt: PropTypes.string.isRequired,
867
- namespace: PropTypesPlus.string,
868
- src: PropTypes.string.isRequired,
869
- variant: PropTypes.string
870
- };
871
- UIImage.defaultProps = {
872
- namespace: 'component_uiImage',
873
- variant: 'standard'
874
- };
875
- var Image = _flowRight([withTheme, withProps(function (props) {
876
- return {
877
- alt: props.name,
878
- src: image(props)
879
- };
880
- })])(UIImage);
881
-
882
- var hooks$2 = {
883
- usePropsTrigger: function usePropsTrigger(props, styles, hidden, setHidden) {
884
- return React.useMemo(function () {
885
- var _Object$assign;
886
-
887
- return Object.assign((_Object$assign = {}, _defineProperty(_Object$assign, props.event, function () {
888
- return setHidden(!hidden);
889
- }), _defineProperty(_Object$assign, "css", styles.icon), _Object$assign), props.componentProps);
890
- }, [hidden, setHidden, props.componentProps, props.event, styles.icon]);
891
- }
892
- };
893
-
894
- var Wrapper =
895
- /*#__PURE__*/
896
- styled.div.withConfig({
897
- displayName: "Tooltipstyles__Wrapper",
898
- componentId: "bv396u-0"
899
- })(["display:inline-block;position:relative;", ""], function (props) {
900
- return props.css;
901
- });
902
- var Popup =
903
- /*#__PURE__*/
904
- styled.div.withConfig({
905
- displayName: "Tooltipstyles__Popup",
906
- componentId: "bv396u-1"
907
- })(["background-color:white;border:1px solid black;border-radius:3px;top:0;left:0;padding:8px;position:absolute;transform:translateY(-100%);"]);
908
- var styles = {
909
- icon: css(["color:", ";"], color({
910
- palette: 'danger'
911
- }))
912
- };
913
-
914
- function _templateObject$3() {
915
- var data = _taggedTemplateLiteral(["", ""]);
916
-
917
- _templateObject$3 = function _templateObject() {
918
- return data;
919
- };
920
-
921
- return data;
922
- }
923
-
924
- function UITooltip(_props) {
925
- var _React$useState = React.useState(true),
926
- _React$useState2 = _slicedToArray(_React$useState, 2),
927
- hidden = _React$useState2[0],
928
- setHidden = _React$useState2[1];
929
-
930
- var props = useEnhanceProps(_props);
931
- var Component = props.component;
932
- return React.createElement(_StyledWrapper, {
933
- className: props.className,
934
- _css: props.css
935
- }, React.createElement(Component, hooks$2.usePropsTrigger(props, styles, hidden, setHidden)), React.createElement(Popup, {
936
- hidden: hidden
937
- }, props.children));
938
- }
939
-
940
- UITooltip.propTypes = {
941
- children: PropTypes.node.isRequired,
942
- component: PropTypesPlus.component,
943
- componentProps: PropTypes.shape({}),
944
- css: PropTypesPlus.css,
945
- event: PropTypes.string,
946
- namespace: PropTypesPlus.string
947
- };
948
- UITooltip.defaultProps = {
949
- component: UIIcon,
950
- componentProps: {},
951
- css: undefined,
952
- event: 'onClick',
953
- namespace: 'component_uiTooltip'
954
- };
955
- var UITooltip$1 = React.memo(UITooltip);
956
-
957
- var _StyledWrapper = styled(Wrapper)(_templateObject$3(), function (p) {
958
- return p._css;
959
- });
960
-
961
- var hooks$3 = {
962
- usePropsTooltip: function usePropsTooltip(props, styles) {
963
- return React.useMemo(function () {
964
- return {
965
- componentProps: {
966
- css: styles.icon,
967
- name: 'error',
968
- material: true
969
- },
970
- css: styles.tooltip
971
- };
972
- }, [styles.icon, styles.tooltip]);
973
- }
974
- };
975
-
976
- var UILabelRoot =
977
- /*#__PURE__*/
978
- styled.div.withConfig({
979
- displayName: "Labelstyles__UILabelRoot",
980
- componentId: "sc-1i2zjma-0"
981
- })(["", " ", ""], mixins.margin, function (props) {
982
- return props.css;
983
- });
984
- var Label =
985
- /*#__PURE__*/
986
- styled.label.withConfig({
987
- displayName: "Labelstyles__Label",
988
- componentId: "sc-1i2zjma-1"
989
- })(["", ""], function (props) {
990
- return props.css;
991
- });
992
- var styles$1 = {
993
- icon: css(["color:", ";&&{font-size:0.8rem;}"], color({
994
- palette: 'danger'
995
- })),
996
- tooltip: css(["margin-left:0.5rem;"])
997
- };
998
-
999
- function _templateObject$4() {
1000
- var data = _taggedTemplateLiteral(["", ""]);
1001
-
1002
- _templateObject$4 = function _templateObject() {
1003
- return data;
1004
- };
1005
-
1006
- return data;
1007
- }
1008
-
1009
- function UILabel(_props) {
1010
- var props = useEnhanceProps(_props);
1011
- var propsTooltip = hooks$3.usePropsTooltip(props, styles$1);
1012
- return React.createElement(_StyledUILabelRoot, {
1013
- className: props.className,
1014
- $margin: props.$margin // eslint-disable-line react/prop-types
1015
- ,
1016
- $marginBottom: props.$marginBottom // eslint-disable-line react/prop-types
1017
- ,
1018
- $marginLeft: props.$marginLeft // eslint-disable-line react/prop-types
1019
- ,
1020
- $marginRight: props.$marginRight // eslint-disable-line react/prop-types
1021
- ,
1022
- $marginTop: props.$marginTop // eslint-disable-line react/prop-types
1023
- ,
1024
- _css: props.css
1025
- }, props.label && React.createElement(UIType$1, _extends({
1026
- as: Label,
1027
- palette: props.labelComponentPalette,
1028
- variant: props.labelComponentVariant || 'label',
1029
- value: props.label
1030
- }, props.labelComponentProps)), props.label && !props.errorComponentHidden && props.inputProps.errors && props.inputProps.errors.size > 0 && React.createElement(UITooltip$1, propsTooltip, props.inputProps.errors.map(function (error, index) {
1031
- return React.createElement(UIError$1, {
1032
- key: index
1033
- }, error) // eslint-disable-line react/no-array-index-key
1034
- ;
1035
- })), props.children);
1036
- }
1037
-
1038
- UILabel.propTypes = {
1039
- children: PropTypes.node,
1040
- css: PropTypesPlus.css,
1041
- errorComponentHidden: PropTypes.bool,
1042
- inputProps: PropTypes.shape({
1043
- errors: PropTypesImmutable.list
1044
- }).isRequired,
1045
- label: PropTypesPlus.typography,
1046
- labelComponentPalette: PropTypes.string,
1047
- labelComponentProps: PropTypes.shape({}),
1048
- labelComponentVariant: PropTypes.string,
1049
- margin: PropTypes.string,
1050
- marginBottom: PropTypes.string,
1051
- marginLeft: PropTypes.string,
1052
- marginRight: PropTypes.string,
1053
- marginTop: PropTypes.string,
1054
- namespace: PropTypesPlus.string,
1055
- variant: PropTypes.string
1056
- };
1057
- UILabel.defaultProps = {
1058
- children: undefined,
1059
- css: undefined,
1060
- errorComponentHidden: undefined,
1061
- label: undefined,
1062
- labelComponentPalette: undefined,
1063
- labelComponentProps: {},
1064
- labelComponentVariant: undefined,
1065
- margin: undefined,
1066
- marginBottom: undefined,
1067
- marginLeft: undefined,
1068
- marginRight: undefined,
1069
- marginTop: undefined,
1070
- namespace: 'component_uiLabel',
1071
- variant: 'standard'
1072
- };
1073
- var Label$1 = React.memo(UILabel);
1074
-
1075
- var _StyledUILabelRoot = styled(UILabelRoot)(_templateObject$4(), function (p) {
1076
- return p._css;
1077
- });
1078
-
1079
- var UILine = withEnhanceProps(styled.hr.withConfig({
1080
- displayName: "Line__UILine",
1081
- componentId: "sc-2dkwme-0"
1082
- })(["border:0;border-bottom:1px ", " ", ";", " ", ""], function (props) {
1083
- return props.borderStyle || 'solid';
1084
- }, colorFromPalette(), mixins.margin, function (props) {
1085
- return props.css;
1086
- }));
1087
- UILine.propTypes = {
1088
- namespace: PropTypes.string,
1089
- variant: PropTypes.string
1090
- };
1091
- UILine.defaultProps = {
1092
- namespace: 'component_uiLine',
1093
- variant: undefined
1094
- };
1095
-
1096
- var Overlay =
1097
- /*#__PURE__*/
1098
- styled.div.withConfig({
1099
- displayName: "Overlay",
1100
- componentId: "sc-15ca6dc-0"
1101
- })(["background-color:", ";display:", ";position:absolute;", ""], color({
1102
- palette: 'white'
1103
- }), function (props) {
1104
- return props.visible ? 'block' : 'none';
1105
- }, component());
1106
- Overlay.propTypes = {
1107
- namespace: PropTypes.string,
1108
- variant: PropTypes.string
1109
- };
1110
- Overlay.defaultProps = {
1111
- namespace: 'component_uiPopup_Overlay',
1112
- variant: 'standard'
1113
- };
1114
-
1115
- var Container$1 =
1116
- /*#__PURE__*/
1117
- styled.div.withConfig({
1118
- displayName: "Portalstyles__Container",
1119
- componentId: "sc-11pm1fj-0"
1120
- })(["align-items:center;background-color:rgba(0,0,0,0.65);display:flex;height:100%;justify-content:center;overflow:auto;"]);
1121
- var Content =
1122
- /*#__PURE__*/
1123
- styled.div.withConfig({
1124
- displayName: "Portalstyles__Content",
1125
- componentId: "sc-11pm1fj-1"
1126
- })(["background-color:", ";border:2px solid ", ";border-radius:5px;max-width:1024px;min-height:100px;width:80%;@media (max-width:539px){width:95%;}"], color({
1127
- palette: 'white'
1128
- }), color({
1129
- palette: 'black'
1130
- }));
1131
-
1132
- var Portal =
1133
- /*#__PURE__*/
1134
- function (_React$Component) {
1135
- _inherits(Portal, _React$Component);
1136
-
1137
- function Portal() {
1138
- var _getPrototypeOf2;
1139
-
1140
- var _this;
1141
-
1142
- _classCallCheck(this, Portal);
1143
-
1144
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1145
- args[_key] = arguments[_key];
1146
- }
1147
-
1148
- _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Portal)).call.apply(_getPrototypeOf2, [this].concat(args)));
1149
-
1150
- _defineProperty(_assertThisInitialized(_this), "state", {
1151
- prop_visible: _this.props.visible,
1152
- ref: null
1153
- });
1154
-
1155
- return _this;
1156
- }
1157
-
1158
- _createClass(Portal, [{
1159
- key: "componentDidUpdate",
1160
- value: function componentDidUpdate(prevProps, prevState) {
1161
- if (this.props.visible === true && prevProps.visible === false) {
1162
- this.state.ref.style.position = 'fixed';
1163
- this.state.ref.style.top = '0';
1164
- this.state.ref.style.right = '0';
1165
- this.state.ref.style.bottom = '0';
1166
- this.state.ref.style.left = '0';
1167
- document.body.appendChild(this.state.ref);
1168
- }
1169
-
1170
- if (this.props.visible === false && prevProps.visible === true && prevState.ref) {
1171
- document.body.removeChild(prevState.ref);
1172
- }
1173
- }
1174
- }, {
1175
- key: "componentWillUnmount",
1176
- value: function componentWillUnmount() {
1177
- if (this.state.ref) {
1178
- document.body.removeChild(this.state.ref);
1179
- }
1180
- }
1181
- }, {
1182
- key: "getPropsContainer",
1183
- value: function getPropsContainer() {
1184
- return this.props.containerComponentProps;
1185
- }
1186
- }, {
1187
- key: "getPropsContent",
1188
- value: function getPropsContent() {
1189
- return Object.assign({}, this.props.contentComponentProps, {
1190
- className: this.props.contentComponentProps.className ? "".concat(this.props.contentComponentProps.className, " ignore-react-onclickoutside") : 'ignore-react-onclickoutside'
1191
- });
1192
- }
1193
- }, {
1194
- key: "renderContent",
1195
- value: function renderContent() {
1196
- var ContainerComponent = this.props.containerComponent;
1197
- var ContentComponent = this.props.contentComponent;
1198
- return React.createElement(ContainerComponent, this.getPropsContainer(), React.createElement(ContentComponent, this.getPropsContent(), this.props.children));
1199
- }
1200
- }, {
1201
- key: "render",
1202
- value: function render() {
1203
- return this.state.ref && ReactDOM.createPortal(this.renderContent(), this.state.ref);
1204
- }
1205
- }], [{
1206
- key: "getDerivedStateFromProps",
1207
- value: function getDerivedStateFromProps(nextProps, prevState) {
1208
- if (prevState.prop_visible === nextProps.visible) {
1209
- return {
1210
- prop_visible: nextProps.visible,
1211
- ref: prevState.ref
1212
- };
1213
- }
1214
-
1215
- return {
1216
- prop_visible: nextProps.visible,
1217
- ref: prevState.prop_visible === true ? null : document.createElement('div')
1218
- };
1219
- }
1220
- }]);
1221
-
1222
- return Portal;
1223
- }(React.Component);
1224
-
1225
- Portal.propTypes = exact({
1226
- children: PropTypes.node.isRequired,
1227
- containerComponent: PropTypesPlus.component,
1228
- containerComponentProps: PropTypes.shape({}),
1229
- contentComponent: PropTypesPlus.component,
1230
- contentComponentProps: PropTypes.shape({
1231
- className: PropTypesPlus.string
1232
- }),
1233
- visible: PropTypes.bool.isRequired
1234
- });
1235
- Portal.defaultProps = {
1236
- containerComponent: Container$1,
1237
- containerComponentProps: {},
1238
- contentComponent: Content,
1239
- contentComponentProps: {}
1240
- };
1241
-
1242
- var hooks$4 = {
1243
- useComponents: function useComponents(props) {
1244
- var mapDefault = React.useMemo(function () {
1245
- return {
1246
- wrapperComponent: "uiPopup_component_".concat(props.type),
1247
- controlComponent: ['uiPopup_control', 'component_button']
1248
- };
1249
- }, [props.type]);
1250
- var defaults = useDefault(mapDefault, props);
1251
- return {
1252
- Component: props.component,
1253
- Container: props.containerComponent,
1254
- Control: defaults.controlComponent,
1255
- Wrapper: defaults.wrapperComponent || Portal
1256
- };
1257
- },
1258
-
1259
- /**
1260
- * HACK(thierry): react-onclickoutside use the first instance of the
1261
- * onClose provided. So it is unabled to capture the changing values around it.
1262
- * Hence mutating the staticObject giving it a new onClose
1263
- */
1264
- useGetClickOutside: function useGetClickOutside(componentProps) {
1265
- var _React$useState = React.useState({}),
1266
- _React$useState2 = _slicedToArray(_React$useState, 1),
1267
- staticObject = _React$useState2[0];
1268
-
1269
- staticObject.onClose = componentProps.onClose;
1270
- return function () {
1271
- return staticObject.onClose();
1272
- };
1273
- },
1274
- usePropsComponent: function usePropsComponent(props, opened, setOpened) {
1275
- var handleClose = React.useCallback(function (x) {
1276
- if (!opened) return x;
1277
- setOpened(false);
1278
- props.onClose();
1279
- return x;
1280
- }, [opened, props.onClose]);
1281
- return Object.assign({
1282
- onClose: handleClose
1283
- }, _isFunction(props.componentProps) ? props.componentProps() : props.componentProps);
1284
- },
1285
- usePropsContainer: function usePropsContainer(props) {
1286
- return props.containerComponentProps;
1287
- },
1288
- usePropsControl: function usePropsControl(props, opened, setOpened) {
1289
- var handleEvent = React.useCallback(function () {
1290
- return setOpened(!opened);
1291
- }, [opened]);
1292
- return Object.assign(_defineProperty({}, props.event, handleEvent), props.controlComponentProps);
1293
- },
1294
- usePropsWrapper: function usePropsWrapper(props, opened) {
1295
- return Object.assign({
1296
- visible: opened
1297
- }, _isFunction(props.wrapperComponentProps) ? props.wrapperComponentProps() : props.wrapperComponentProps);
1298
- }
1299
- };
1300
-
1301
- var ContainerComponent =
1302
- /*#__PURE__*/
1303
- styled.div.withConfig({
1304
- displayName: "Popup__ContainerComponent",
1305
- componentId: "sc-1an9fmj-0"
1306
- })(["display:inline-block;position:", ";"], function (props) {
1307
- return props.static ? 'static' : 'relative';
1308
- });
1309
- /**
1310
- * To ignore element outside container, attach className 'ignore-react-onclickoutside' to it
1311
- * https://github.com/Pomax/react-onclickoutside#marking-elements-as-skip-over-this-one-during-the-event-loop
1312
- */
1313
-
1314
- function Popup$1(_props) {
1315
- var _React$useState = React.useState(false),
1316
- _React$useState2 = _slicedToArray(_React$useState, 2),
1317
- opened = _React$useState2[0],
1318
- setOpened = _React$useState2[1];
1319
-
1320
- var props = useEnhanceProps(_props);
1321
-
1322
- var _hooks$useComponents = hooks$4.useComponents(props),
1323
- Container = _hooks$useComponents.Container,
1324
- Control = _hooks$useComponents.Control,
1325
- Component = _hooks$useComponents.Component,
1326
- Wrapper = _hooks$useComponents.Wrapper;
1327
-
1328
- var componentProps = hooks$4.usePropsComponent(props, opened, setOpened);
1329
- Popup$1.handleClickOutside = hooks$4.useGetClickOutside(componentProps);
1330
- return React.createElement(Container, hooks$4.usePropsContainer(props), React.createElement(Control, hooks$4.usePropsControl(props, opened, setOpened)), React.createElement(Wrapper, hooks$4.usePropsWrapper(props, opened), React.createElement(Component, componentProps)));
1331
- }
1332
-
1333
- Popup$1.propTypes = exact({
1334
- component: PropTypesPlus.component.isRequired,
1335
- componentProps: PropTypes.shape({}),
1336
- containerComponent: PropTypesPlus.component,
1337
- containerComponentProps: PropTypes.shape({}),
1338
- controlComponent: PropTypesPlus.component,
1339
- controlComponentProps: PropTypes.shape({}),
1340
- event: PropTypesPlus.string,
1341
- namespace: PropTypesPlus.string,
1342
- onClose: PropTypes.func,
1343
- type: PropTypesPlus.string,
1344
- wrapperComponent: PropTypesPlus.component,
1345
- wrapperComponentProps: PropTypes.shape({}),
1346
- // form props
1347
- name: PropTypesPlus.string,
1348
- // onclickoutside props
1349
- disableOnClickOutside: PropTypes.func.isRequired,
1350
- enableOnClickOutside: PropTypes.func.isRequired,
1351
- eventTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
1352
- outsideClickIgnoreClass: PropTypes.string.isRequired,
1353
- preventDefault: PropTypes.bool.isRequired,
1354
- stopPropagation: PropTypes.bool.isRequired,
1355
- wrappedRef: PropTypes.func.isRequired
1356
- });
1357
- Popup$1.defaultProps = {
1358
- componentProps: {},
1359
- containerComponent: ContainerComponent,
1360
- containerComponentProps: {},
1361
- controlComponent: undefined,
1362
- controlComponentProps: {},
1363
- event: 'onClick',
1364
- namespace: 'component_uiPopup',
1365
- onClose: function onClose() {
1366
- return undefined;
1367
- },
1368
- type: undefined,
1369
- wrapperComponent: undefined,
1370
- wrapperComponentProps: {},
1371
- // form props
1372
- name: undefined
1373
- };
1374
- var clickOutsideConfig = {
1375
- handleClickOutside: function handleClickOutside() {
1376
- return Popup$1.handleClickOutside;
1377
- }
1378
- };
1379
- var EnhancedPopup = withOnClickOutside(Popup$1, clickOutsideConfig);
1380
- EnhancedPopup.Overlay = Overlay;
1381
- EnhancedPopup.Portal = Portal;
1382
-
1383
- function Portal$1(props) {
1384
- var _React$useState = React.useState(null),
1385
- _React$useState2 = _slicedToArray(_React$useState, 2),
1386
- elementRef = _React$useState2[0],
1387
- setElementRef = _React$useState2[1];
1388
-
1389
- var previousClassNameRef = React.useRef(props.className);
1390
- var previousClassName = previousClassNameRef.current;
1391
- React.useEffect(function () {
1392
- previousClassNameRef.current = props.className;
1393
- });
1394
- React.useEffect(function () {
1395
- var element = document.createElement('div');
1396
- setElementRef(element);
1397
- document.body.appendChild(element);
1398
- return function () {
1399
- return document.body.removeChild(element);
1400
- };
1401
- }, []);
1402
- React.useEffect(function () {
1403
- if (elementRef && previousClassName) {
1404
- var _elementRef$classList;
1405
-
1406
- (_elementRef$classList = elementRef.classList).remove.apply(_elementRef$classList, _toConsumableArray(previousClassName.split(' ')));
1407
- }
1408
-
1409
- if (elementRef && props.className) {
1410
- var _elementRef$classList2;
1411
-
1412
- (_elementRef$classList2 = elementRef.classList).add.apply(_elementRef$classList2, _toConsumableArray(props.className.split(' ')));
1413
- }
1414
- }, [elementRef, props.className, previousClassName]);
1415
- return elementRef && ReactDOM.createPortal(props.children, elementRef);
1416
- }
1417
-
1418
- var primaryScale =
1419
- /*#__PURE__*/
1420
- keyframes(["0%{transform:scaleX(0.08);}36.65%{animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);transform:scaleX(0.08);}65.15%{animation-timing-function:cubmic-bezier(0.06,0.11,0.6,1);transform:scaleX(0.661479);}100%{transform:scaleX(0.08);}"]);
1421
- var primaryTranslate =
1422
- /*#__PURE__*/
1423
- keyframes(["0%{transform:translateX(0);}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0);}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(83.67142%);}100%{transform:translateX(200.611057%);}"]);
1424
- var secondaryScale =
1425
- /*#__PURE__*/
1426
- keyframes(["0%{animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.45397);transform:scaleX(0.08);}19.15%{animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.004315);transform:scaleX(0.457104);}44.15%{animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);transform:scaleX(0.72796);}100%{transform:scaleX(0.08);}"]);
1427
- var secondaryTranslate =
1428
- /*#__PURE__*/
1429
- keyframes(["0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0);}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(37.651913%);}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(84.386165%);}100%{transform:translateX(160.277782%);}"]);
1430
- var Block =
1431
- /*#__PURE__*/
1432
- styled.div.withConfig({
1433
- displayName: "ProgressLinestyles__Block",
1434
- componentId: "gwo5u1-0"
1435
- })(["display:flex;align-items:center;height:", ";min-width:2rem;overflow:hidden;position:relative;transition:opacity 0.25s cubic-bezier(0.4,0,0.6,1) 0ms;transform:translateZ(0);", ""], function (props) {
1436
- return props.height;
1437
- }, mixins.margin);
1438
- var BarWrapper =
1439
- /*#__PURE__*/
1440
- styled.div.withConfig({
1441
- displayName: "ProgressLinestyles__BarWrapper",
1442
- componentId: "gwo5u1-1"
1443
- })(["height:", ";position:relative;flex:1;"], function (props) {
1444
- return props.thickness;
1445
- });
1446
- var Buffer =
1447
- /*#__PURE__*/
1448
- styled.div.withConfig({
1449
- displayName: "ProgressLinestyles__Buffer",
1450
- componentId: "gwo5u1-2"
1451
- })(["background-color:", ";height:100%;position:absolute;transition:transform ", ";transform-origin:left top;width:100%;", ""], function (props) {
1452
- return color({
1453
- palette: props.palette || 'gray',
1454
- paletteWeight: props.paletteWeight
1455
- })(props);
1456
- }, function (props) {
1457
- return props.transitionDuration || '225ms';
1458
- }, function (props) {
1459
- return props.value !== null && css(["transform:translateX(", "%);"], props.value - 100);
1460
- });
1461
- var BarPrimary =
1462
- /*#__PURE__*/
1463
- styled.div.withConfig({
1464
- displayName: "ProgressLinestyles__BarPrimary",
1465
- componentId: "gwo5u1-3"
1466
- })(["height:100%;position:absolute;transform-origin:left top;width:100%;", ""], function (props) {
1467
- return props.value === null && css(["transform:scaleX(0);animation:", " 2s infinite linear;left:-145.166611%;transition:none;"], primaryTranslate);
1468
- });
1469
- var BarPrimaryInner =
1470
- /*#__PURE__*/
1471
- styled.span.withConfig({
1472
- displayName: "ProgressLinestyles__BarPrimaryInner",
1473
- componentId: "gwo5u1-4"
1474
- })(["background-color:", ";display:inline-block;height:100%;position:absolute;width:100%;", " ", ""], function (props) {
1475
- return color({
1476
- palette: props.palette || 'primary',
1477
- paletteWeight: props.paletteWeight
1478
- })(props);
1479
- }, function (props) {
1480
- return props.value === null && css(["animation:", " 2s infinite linear;"], primaryScale);
1481
- }, function (props) {
1482
- return props.value !== null && css(["transform:translateX(", "%);transition:transform ", " cubic-bezier(0.4,0,0.6,1) 0ms;"], props.value - 100, props.transitionDuration || '225ms');
1483
- });
1484
- var BarSecondary =
1485
- /*#__PURE__*/
1486
- styled.div.withConfig({
1487
- displayName: "ProgressLinestyles__BarSecondary",
1488
- componentId: "gwo5u1-5"
1489
- })(["animation:", " 2s infinite linear;height:100%;left:-54.888891%;position:absolute;transition:none;transform-origin:left top;visibility:visible;width:100%;"], secondaryTranslate);
1490
- var BarSecondaryInner =
1491
- /*#__PURE__*/
1492
- styled.span.withConfig({
1493
- displayName: "ProgressLinestyles__BarSecondaryInner",
1494
- componentId: "gwo5u1-6"
1495
- })(["animation:", " 2s infinite linear;background-color:", ";display:inline-block;height:100%;position:absolute;visibility:visible;width:100%;"], secondaryScale, function (props) {
1496
- return color({
1497
- palette: props.palette || 'primary',
1498
- paletteWeight: props.paletteWeight
1499
- })(props);
1500
- });
1501
-
1502
- function UIProgressLine(props) {
1503
- var _React$useState = React.useState(props.valueInitial === undefined ? props.value : props.valueInitial),
1504
- _React$useState2 = _slicedToArray(_React$useState, 2),
1505
- value = _React$useState2[0],
1506
- setValue = _React$useState2[1];
1507
-
1508
- var _React$useState3 = React.useState(props.bufferValueInitial === undefined ? props.bufferValue : props.bufferValueInitial),
1509
- _React$useState4 = _slicedToArray(_React$useState3, 2),
1510
- bufferValue = _React$useState4[0],
1511
- setBufferValue = _React$useState4[1];
1512
-
1513
- React.useEffect(function () {
1514
- setTimeout(function () {
1515
- setValue(props.value);
1516
- setBufferValue(props.bufferValue);
1517
- }, 0);
1518
- }, [props.value, props.bufferValue]);
1519
- return React.createElement(Block, {
1520
- className: props.className,
1521
- height: props.height,
1522
- $margin: props.margin,
1523
- $marginBottom: props.marginBottom,
1524
- $marginLeft: props.marginLeft,
1525
- $marginRight: props.marginRight,
1526
- $marginTop: props.marginTop
1527
- }, React.createElement(Buffer, {
1528
- palette: props.bufferPalette,
1529
- paletteWeight: props.bufferPaletteWeight,
1530
- transitionDuration: props.transitionDuration,
1531
- value: bufferValue
1532
- }), React.createElement(BarWrapper, {
1533
- thickness: props.thickness || props.height
1534
- }, React.createElement(BarPrimary, {
1535
- value: props.value,
1536
- transitionDuration: props.transitionDuration
1537
- }, React.createElement(BarPrimaryInner, {
1538
- palette: props.palette,
1539
- paletteWeight: props.paletteWeight,
1540
- transitionDuration: props.transitionDuration,
1541
- value: value
1542
- })), value === null && React.createElement(BarSecondary, null, React.createElement(BarSecondaryInner, {
1543
- palette: props.palette,
1544
- paletteWeight: props.paletteWeight
1545
- }))));
1546
- }
1547
-
1548
- UIProgressLine.propTypes = {
1549
- bufferPalette: PropTypes.string,
1550
- bufferPaletteWeight: PropTypes.string,
1551
- bufferValue: PropTypes.number,
1552
- bufferValueInitial: PropTypes.number,
1553
- height: PropTypes.string,
1554
- margin: PropTypes.string,
1555
- marginBottom: PropTypes.string,
1556
- marginLeft: PropTypes.string,
1557
- marginRight: PropTypes.string,
1558
- marginTop: PropTypes.string,
1559
- palette: PropTypes.string,
1560
- paletteWeight: PropTypes.string,
1561
- thickness: PropTypes.string,
1562
- transitionDuration: PropTypes.string,
1563
- value: PropTypes.number,
1564
- valueInitial: PropTypes.number
1565
- };
1566
- UIProgressLine.defaultProps = {
1567
- bufferPalette: undefined,
1568
- bufferPaletteWeight: undefined,
1569
- bufferValue: 100,
1570
- bufferValueInitial: undefined,
1571
- height: '4px',
1572
- margin: undefined,
1573
- marginBottom: undefined,
1574
- marginLeft: undefined,
1575
- marginRight: undefined,
1576
- marginTop: undefined,
1577
- palette: undefined,
1578
- paletteWeight: undefined,
1579
- thickness: undefined,
1580
- transitionDuration: undefined,
1581
- value: null,
1582
- valueInitial: undefined
1583
- };
1584
-
1585
- var UISpacer = withEnhanceProps(styled.div.withConfig({
1586
- displayName: "Spacer__UISpacer",
1587
- componentId: "sc-62ugl2-0"
1588
- })(["flex:", ";", ""], function (props) {
1589
- return props.flex === undefined ? 1 : props.flex;
1590
- }, mixins.space));
1591
- UISpacer.propTypes = {
1592
- namespace: PropTypes.string,
1593
- variant: PropTypes.string
1594
- };
1595
- UISpacer.defaultProps = {
1596
- namespace: 'component_uiSpacer',
1597
- variant: 'standard'
1598
- };
1599
-
1600
- export { Button$1 as UIButton, UICard, UIError$1 as UIError, ErrorBoundary as UIErrorBoundary, ErrorWell as UIErrorWell, UIFlexBox, UIIcon, Image as UIImage, Label$1 as UILabel, UILine, EnhancedPopup as UIPopup, Portal$1 as UIPortal, ProgressCircle as UIProgressCircle, UIProgressLine, UISpacer, UIType$1 as UIType };
1601
- //# sourceMappingURL=development.js.map