1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | (function (global, factory) {
|
7 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) :
|
8 | typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) :
|
9 | (global = global || self, factory(global.MaterialUI = {}, global.React, global.ReactDOM));
|
10 | }(this, (function (exports, React, ReactDOM) { 'use strict';
|
11 |
|
12 | var React__default = 'default' in React ? React['default'] : React;
|
13 | ReactDOM = ReactDOM && ReactDOM.hasOwnProperty('default') ? ReactDOM['default'] : ReactDOM;
|
14 |
|
15 | var common = {
|
16 | black: '#000',
|
17 | white: '#fff'
|
18 | };
|
19 |
|
20 | var red = {
|
21 | 50: '#ffebee',
|
22 | 100: '#ffcdd2',
|
23 | 200: '#ef9a9a',
|
24 | 300: '#e57373',
|
25 | 400: '#ef5350',
|
26 | 500: '#f44336',
|
27 | 600: '#e53935',
|
28 | 700: '#d32f2f',
|
29 | 800: '#c62828',
|
30 | 900: '#b71c1c',
|
31 | A100: '#ff8a80',
|
32 | A200: '#ff5252',
|
33 | A400: '#ff1744',
|
34 | A700: '#d50000'
|
35 | };
|
36 |
|
37 | var pink = {
|
38 | 50: '#fce4ec',
|
39 | 100: '#f8bbd0',
|
40 | 200: '#f48fb1',
|
41 | 300: '#f06292',
|
42 | 400: '#ec407a',
|
43 | 500: '#e91e63',
|
44 | 600: '#d81b60',
|
45 | 700: '#c2185b',
|
46 | 800: '#ad1457',
|
47 | 900: '#880e4f',
|
48 | A100: '#ff80ab',
|
49 | A200: '#ff4081',
|
50 | A400: '#f50057',
|
51 | A700: '#c51162'
|
52 | };
|
53 |
|
54 | var purple = {
|
55 | 50: '#f3e5f5',
|
56 | 100: '#e1bee7',
|
57 | 200: '#ce93d8',
|
58 | 300: '#ba68c8',
|
59 | 400: '#ab47bc',
|
60 | 500: '#9c27b0',
|
61 | 600: '#8e24aa',
|
62 | 700: '#7b1fa2',
|
63 | 800: '#6a1b9a',
|
64 | 900: '#4a148c',
|
65 | A100: '#ea80fc',
|
66 | A200: '#e040fb',
|
67 | A400: '#d500f9',
|
68 | A700: '#aa00ff'
|
69 | };
|
70 |
|
71 | var deepPurple = {
|
72 | 50: '#ede7f6',
|
73 | 100: '#d1c4e9',
|
74 | 200: '#b39ddb',
|
75 | 300: '#9575cd',
|
76 | 400: '#7e57c2',
|
77 | 500: '#673ab7',
|
78 | 600: '#5e35b1',
|
79 | 700: '#512da8',
|
80 | 800: '#4527a0',
|
81 | 900: '#311b92',
|
82 | A100: '#b388ff',
|
83 | A200: '#7c4dff',
|
84 | A400: '#651fff',
|
85 | A700: '#6200ea'
|
86 | };
|
87 |
|
88 | var indigo = {
|
89 | 50: '#e8eaf6',
|
90 | 100: '#c5cae9',
|
91 | 200: '#9fa8da',
|
92 | 300: '#7986cb',
|
93 | 400: '#5c6bc0',
|
94 | 500: '#3f51b5',
|
95 | 600: '#3949ab',
|
96 | 700: '#303f9f',
|
97 | 800: '#283593',
|
98 | 900: '#1a237e',
|
99 | A100: '#8c9eff',
|
100 | A200: '#536dfe',
|
101 | A400: '#3d5afe',
|
102 | A700: '#304ffe'
|
103 | };
|
104 |
|
105 | var blue = {
|
106 | 50: '#e3f2fd',
|
107 | 100: '#bbdefb',
|
108 | 200: '#90caf9',
|
109 | 300: '#64b5f6',
|
110 | 400: '#42a5f5',
|
111 | 500: '#2196f3',
|
112 | 600: '#1e88e5',
|
113 | 700: '#1976d2',
|
114 | 800: '#1565c0',
|
115 | 900: '#0d47a1',
|
116 | A100: '#82b1ff',
|
117 | A200: '#448aff',
|
118 | A400: '#2979ff',
|
119 | A700: '#2962ff'
|
120 | };
|
121 |
|
122 | var lightBlue = {
|
123 | 50: '#e1f5fe',
|
124 | 100: '#b3e5fc',
|
125 | 200: '#81d4fa',
|
126 | 300: '#4fc3f7',
|
127 | 400: '#29b6f6',
|
128 | 500: '#03a9f4',
|
129 | 600: '#039be5',
|
130 | 700: '#0288d1',
|
131 | 800: '#0277bd',
|
132 | 900: '#01579b',
|
133 | A100: '#80d8ff',
|
134 | A200: '#40c4ff',
|
135 | A400: '#00b0ff',
|
136 | A700: '#0091ea'
|
137 | };
|
138 |
|
139 | var cyan = {
|
140 | 50: '#e0f7fa',
|
141 | 100: '#b2ebf2',
|
142 | 200: '#80deea',
|
143 | 300: '#4dd0e1',
|
144 | 400: '#26c6da',
|
145 | 500: '#00bcd4',
|
146 | 600: '#00acc1',
|
147 | 700: '#0097a7',
|
148 | 800: '#00838f',
|
149 | 900: '#006064',
|
150 | A100: '#84ffff',
|
151 | A200: '#18ffff',
|
152 | A400: '#00e5ff',
|
153 | A700: '#00b8d4'
|
154 | };
|
155 |
|
156 | var teal = {
|
157 | 50: '#e0f2f1',
|
158 | 100: '#b2dfdb',
|
159 | 200: '#80cbc4',
|
160 | 300: '#4db6ac',
|
161 | 400: '#26a69a',
|
162 | 500: '#009688',
|
163 | 600: '#00897b',
|
164 | 700: '#00796b',
|
165 | 800: '#00695c',
|
166 | 900: '#004d40',
|
167 | A100: '#a7ffeb',
|
168 | A200: '#64ffda',
|
169 | A400: '#1de9b6',
|
170 | A700: '#00bfa5'
|
171 | };
|
172 |
|
173 | var green = {
|
174 | 50: '#e8f5e9',
|
175 | 100: '#c8e6c9',
|
176 | 200: '#a5d6a7',
|
177 | 300: '#81c784',
|
178 | 400: '#66bb6a',
|
179 | 500: '#4caf50',
|
180 | 600: '#43a047',
|
181 | 700: '#388e3c',
|
182 | 800: '#2e7d32',
|
183 | 900: '#1b5e20',
|
184 | A100: '#b9f6ca',
|
185 | A200: '#69f0ae',
|
186 | A400: '#00e676',
|
187 | A700: '#00c853'
|
188 | };
|
189 |
|
190 | var lightGreen = {
|
191 | 50: '#f1f8e9',
|
192 | 100: '#dcedc8',
|
193 | 200: '#c5e1a5',
|
194 | 300: '#aed581',
|
195 | 400: '#9ccc65',
|
196 | 500: '#8bc34a',
|
197 | 600: '#7cb342',
|
198 | 700: '#689f38',
|
199 | 800: '#558b2f',
|
200 | 900: '#33691e',
|
201 | A100: '#ccff90',
|
202 | A200: '#b2ff59',
|
203 | A400: '#76ff03',
|
204 | A700: '#64dd17'
|
205 | };
|
206 |
|
207 | var lime = {
|
208 | 50: '#f9fbe7',
|
209 | 100: '#f0f4c3',
|
210 | 200: '#e6ee9c',
|
211 | 300: '#dce775',
|
212 | 400: '#d4e157',
|
213 | 500: '#cddc39',
|
214 | 600: '#c0ca33',
|
215 | 700: '#afb42b',
|
216 | 800: '#9e9d24',
|
217 | 900: '#827717',
|
218 | A100: '#f4ff81',
|
219 | A200: '#eeff41',
|
220 | A400: '#c6ff00',
|
221 | A700: '#aeea00'
|
222 | };
|
223 |
|
224 | var yellow = {
|
225 | 50: '#fffde7',
|
226 | 100: '#fff9c4',
|
227 | 200: '#fff59d',
|
228 | 300: '#fff176',
|
229 | 400: '#ffee58',
|
230 | 500: '#ffeb3b',
|
231 | 600: '#fdd835',
|
232 | 700: '#fbc02d',
|
233 | 800: '#f9a825',
|
234 | 900: '#f57f17',
|
235 | A100: '#ffff8d',
|
236 | A200: '#ffff00',
|
237 | A400: '#ffea00',
|
238 | A700: '#ffd600'
|
239 | };
|
240 |
|
241 | var amber = {
|
242 | 50: '#fff8e1',
|
243 | 100: '#ffecb3',
|
244 | 200: '#ffe082',
|
245 | 300: '#ffd54f',
|
246 | 400: '#ffca28',
|
247 | 500: '#ffc107',
|
248 | 600: '#ffb300',
|
249 | 700: '#ffa000',
|
250 | 800: '#ff8f00',
|
251 | 900: '#ff6f00',
|
252 | A100: '#ffe57f',
|
253 | A200: '#ffd740',
|
254 | A400: '#ffc400',
|
255 | A700: '#ffab00'
|
256 | };
|
257 |
|
258 | var orange = {
|
259 | 50: '#fff3e0',
|
260 | 100: '#ffe0b2',
|
261 | 200: '#ffcc80',
|
262 | 300: '#ffb74d',
|
263 | 400: '#ffa726',
|
264 | 500: '#ff9800',
|
265 | 600: '#fb8c00',
|
266 | 700: '#f57c00',
|
267 | 800: '#ef6c00',
|
268 | 900: '#e65100',
|
269 | A100: '#ffd180',
|
270 | A200: '#ffab40',
|
271 | A400: '#ff9100',
|
272 | A700: '#ff6d00'
|
273 | };
|
274 |
|
275 | var deepOrange = {
|
276 | 50: '#fbe9e7',
|
277 | 100: '#ffccbc',
|
278 | 200: '#ffab91',
|
279 | 300: '#ff8a65',
|
280 | 400: '#ff7043',
|
281 | 500: '#ff5722',
|
282 | 600: '#f4511e',
|
283 | 700: '#e64a19',
|
284 | 800: '#d84315',
|
285 | 900: '#bf360c',
|
286 | A100: '#ff9e80',
|
287 | A200: '#ff6e40',
|
288 | A400: '#ff3d00',
|
289 | A700: '#dd2c00'
|
290 | };
|
291 |
|
292 | var brown = {
|
293 | 50: '#efebe9',
|
294 | 100: '#d7ccc8',
|
295 | 200: '#bcaaa4',
|
296 | 300: '#a1887f',
|
297 | 400: '#8d6e63',
|
298 | 500: '#795548',
|
299 | 600: '#6d4c41',
|
300 | 700: '#5d4037',
|
301 | 800: '#4e342e',
|
302 | 900: '#3e2723',
|
303 | A100: '#d7ccc8',
|
304 | A200: '#bcaaa4',
|
305 | A400: '#8d6e63',
|
306 | A700: '#5d4037'
|
307 | };
|
308 |
|
309 | var grey = {
|
310 | 50: '#fafafa',
|
311 | 100: '#f5f5f5',
|
312 | 200: '#eeeeee',
|
313 | 300: '#e0e0e0',
|
314 | 400: '#bdbdbd',
|
315 | 500: '#9e9e9e',
|
316 | 600: '#757575',
|
317 | 700: '#616161',
|
318 | 800: '#424242',
|
319 | 900: '#212121',
|
320 | A100: '#d5d5d5',
|
321 | A200: '#aaaaaa',
|
322 | A400: '#303030',
|
323 | A700: '#616161'
|
324 | };
|
325 |
|
326 | var blueGrey = {
|
327 | 50: '#eceff1',
|
328 | 100: '#cfd8dc',
|
329 | 200: '#b0bec5',
|
330 | 300: '#90a4ae',
|
331 | 400: '#78909c',
|
332 | 500: '#607d8b',
|
333 | 600: '#546e7a',
|
334 | 700: '#455a64',
|
335 | 800: '#37474f',
|
336 | 900: '#263238',
|
337 | A100: '#cfd8dc',
|
338 | A200: '#b0bec5',
|
339 | A400: '#78909c',
|
340 | A700: '#455a64'
|
341 | };
|
342 |
|
343 |
|
344 |
|
345 | var index = Object.freeze({
|
346 | __proto__: null,
|
347 | common: common,
|
348 | red: red,
|
349 | pink: pink,
|
350 | purple: purple,
|
351 | deepPurple: deepPurple,
|
352 | indigo: indigo,
|
353 | blue: blue,
|
354 | lightBlue: lightBlue,
|
355 | cyan: cyan,
|
356 | teal: teal,
|
357 | green: green,
|
358 | lightGreen: lightGreen,
|
359 | lime: lime,
|
360 | yellow: yellow,
|
361 | amber: amber,
|
362 | orange: orange,
|
363 | deepOrange: deepOrange,
|
364 | brown: brown,
|
365 | grey: grey,
|
366 | blueGrey: blueGrey
|
367 | });
|
368 |
|
369 | var global$1 = (typeof global !== "undefined" ? global :
|
370 | typeof self !== "undefined" ? self :
|
371 | typeof window !== "undefined" ? window : {});
|
372 |
|
373 |
|
374 | var performance$1 = global$1.performance || {};
|
375 | var performanceNow =
|
376 | performance$1.now ||
|
377 | performance$1.mozNow ||
|
378 | performance$1.msNow ||
|
379 | performance$1.oNow ||
|
380 | performance$1.webkitNow ||
|
381 | function(){ return (new Date()).getTime() };
|
382 |
|
383 |
|
384 |
|
385 | |
386 |
|
387 |
|
388 |
|
389 |
|
390 |
|
391 |
|
392 |
|
393 | function clamp(value) {
|
394 | var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
395 | var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
|
396 |
|
397 | {
|
398 | if (value < min || value > max) {
|
399 | console.error("Material-UI: the value provided ".concat(value, " is out of range [").concat(min, ", ").concat(max, "]."));
|
400 | }
|
401 | }
|
402 |
|
403 | return Math.min(Math.max(min, value), max);
|
404 | }
|
405 | |
406 |
|
407 |
|
408 |
|
409 |
|
410 |
|
411 |
|
412 |
|
413 | function hexToRgb(color) {
|
414 | color = color.substr(1);
|
415 | var re = new RegExp(".{1,".concat(color.length / 3, "}"), 'g');
|
416 | var colors = color.match(re);
|
417 |
|
418 | if (colors && colors[0].length === 1) {
|
419 | colors = colors.map(function (n) {
|
420 | return n + n;
|
421 | });
|
422 | }
|
423 |
|
424 | return colors ? "rgb(".concat(colors.map(function (n) {
|
425 | return parseInt(n, 16);
|
426 | }).join(', '), ")") : '';
|
427 | }
|
428 |
|
429 | function intToHex(int) {
|
430 | var hex = int.toString(16);
|
431 | return hex.length === 1 ? "0".concat(hex) : hex;
|
432 | }
|
433 | |
434 |
|
435 |
|
436 |
|
437 |
|
438 |
|
439 |
|
440 |
|
441 | function rgbToHex(color) {
|
442 |
|
443 | if (color.indexOf('#') === 0) {
|
444 | return color;
|
445 | }
|
446 |
|
447 | var _decomposeColor = decomposeColor(color),
|
448 | values = _decomposeColor.values;
|
449 |
|
450 | return "#".concat(values.map(function (n) {
|
451 | return intToHex(n);
|
452 | }).join(''));
|
453 | }
|
454 | |
455 |
|
456 |
|
457 |
|
458 |
|
459 |
|
460 |
|
461 | function hslToRgb(color) {
|
462 | color = decomposeColor(color);
|
463 | var _color = color,
|
464 | values = _color.values;
|
465 | var h = values[0];
|
466 | var s = values[1] / 100;
|
467 | var l = values[2] / 100;
|
468 | var a = s * Math.min(l, 1 - l);
|
469 |
|
470 | var f = function f(n) {
|
471 | var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12;
|
472 | return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
473 | };
|
474 |
|
475 | var type = 'rgb';
|
476 | var rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
|
477 |
|
478 | if (color.type === 'hsla') {
|
479 | type += 'a';
|
480 | rgb.push(values[3]);
|
481 | }
|
482 |
|
483 | return recomposeColor({
|
484 | type: type,
|
485 | values: rgb
|
486 | });
|
487 | }
|
488 | |
489 |
|
490 |
|
491 |
|
492 |
|
493 |
|
494 |
|
495 |
|
496 |
|
497 | function decomposeColor(color) {
|
498 |
|
499 | if (color.type) {
|
500 | return color;
|
501 | }
|
502 |
|
503 | if (color.charAt(0) === '#') {
|
504 | return decomposeColor(hexToRgb(color));
|
505 | }
|
506 |
|
507 | var marker = color.indexOf('(');
|
508 | var type = color.substring(0, marker);
|
509 |
|
510 | if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {
|
511 | throw new Error(["Material-UI: unsupported `".concat(color, "` color."), 'We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().'].join('\n'));
|
512 | }
|
513 |
|
514 | var values = color.substring(marker + 1, color.length - 1).split(',');
|
515 | values = values.map(function (value) {
|
516 | return parseFloat(value);
|
517 | });
|
518 | return {
|
519 | type: type,
|
520 | values: values
|
521 | };
|
522 | }
|
523 | |
524 |
|
525 |
|
526 |
|
527 |
|
528 |
|
529 |
|
530 |
|
531 |
|
532 | function recomposeColor(color) {
|
533 | var type = color.type;
|
534 | var values = color.values;
|
535 |
|
536 | if (type.indexOf('rgb') !== -1) {
|
537 |
|
538 | values = values.map(function (n, i) {
|
539 | return i < 3 ? parseInt(n, 10) : n;
|
540 | });
|
541 | } else if (type.indexOf('hsl') !== -1) {
|
542 | values[1] = "".concat(values[1], "%");
|
543 | values[2] = "".concat(values[2], "%");
|
544 | }
|
545 |
|
546 | return "".concat(type, "(").concat(values.join(', '), ")");
|
547 | }
|
548 | |
549 |
|
550 |
|
551 |
|
552 |
|
553 |
|
554 |
|
555 |
|
556 |
|
557 |
|
558 | function getContrastRatio(foreground, background) {
|
559 | var lumA = getLuminance(foreground);
|
560 | var lumB = getLuminance(background);
|
561 | return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
|
562 | }
|
563 | |
564 |
|
565 |
|
566 |
|
567 |
|
568 |
|
569 |
|
570 |
|
571 |
|
572 |
|
573 | function getLuminance(color) {
|
574 | color = decomposeColor(color);
|
575 | var rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values;
|
576 | rgb = rgb.map(function (val) {
|
577 | val /= 255;
|
578 |
|
579 | return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
|
580 | });
|
581 |
|
582 | return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
|
583 | }
|
584 | |
585 |
|
586 |
|
587 |
|
588 |
|
589 |
|
590 |
|
591 |
|
592 |
|
593 | function emphasize(color) {
|
594 | var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15;
|
595 | return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
|
596 | }
|
597 | |
598 |
|
599 |
|
600 |
|
601 |
|
602 |
|
603 |
|
604 |
|
605 |
|
606 | function fade(color, value) {
|
607 | color = decomposeColor(color);
|
608 | value = clamp(value);
|
609 |
|
610 | if (color.type === 'rgb' || color.type === 'hsl') {
|
611 | color.type += 'a';
|
612 | }
|
613 |
|
614 | color.values[3] = value;
|
615 | return recomposeColor(color);
|
616 | }
|
617 | |
618 |
|
619 |
|
620 |
|
621 |
|
622 |
|
623 |
|
624 |
|
625 | function darken(color, coefficient) {
|
626 | color = decomposeColor(color);
|
627 | coefficient = clamp(coefficient);
|
628 |
|
629 | if (color.type.indexOf('hsl') !== -1) {
|
630 | color.values[2] *= 1 - coefficient;
|
631 | } else if (color.type.indexOf('rgb') !== -1) {
|
632 | for (var i = 0; i < 3; i += 1) {
|
633 | color.values[i] *= 1 - coefficient;
|
634 | }
|
635 | }
|
636 |
|
637 | return recomposeColor(color);
|
638 | }
|
639 | |
640 |
|
641 |
|
642 |
|
643 |
|
644 |
|
645 |
|
646 |
|
647 | function lighten(color, coefficient) {
|
648 | color = decomposeColor(color);
|
649 | coefficient = clamp(coefficient);
|
650 |
|
651 | if (color.type.indexOf('hsl') !== -1) {
|
652 | color.values[2] += (100 - color.values[2]) * coefficient;
|
653 | } else if (color.type.indexOf('rgb') !== -1) {
|
654 | for (var i = 0; i < 3; i += 1) {
|
655 | color.values[i] += (255 - color.values[i]) * coefficient;
|
656 | }
|
657 | }
|
658 |
|
659 | return recomposeColor(color);
|
660 | }
|
661 |
|
662 | function _defineProperty(obj, key, value) {
|
663 | if (key in obj) {
|
664 | Object.defineProperty(obj, key, {
|
665 | value: value,
|
666 | enumerable: true,
|
667 | configurable: true,
|
668 | writable: true
|
669 | });
|
670 | } else {
|
671 | obj[key] = value;
|
672 | }
|
673 |
|
674 | return obj;
|
675 | }
|
676 |
|
677 | function _objectWithoutPropertiesLoose(source, excluded) {
|
678 | if (source == null) return {};
|
679 | var target = {};
|
680 | var sourceKeys = Object.keys(source);
|
681 | var key, i;
|
682 |
|
683 | for (i = 0; i < sourceKeys.length; i++) {
|
684 | key = sourceKeys[i];
|
685 | if (excluded.indexOf(key) >= 0) continue;
|
686 | target[key] = source[key];
|
687 | }
|
688 |
|
689 | return target;
|
690 | }
|
691 |
|
692 | function _objectWithoutProperties(source, excluded) {
|
693 | if (source == null) return {};
|
694 | var target = _objectWithoutPropertiesLoose(source, excluded);
|
695 | var key, i;
|
696 |
|
697 | if (Object.getOwnPropertySymbols) {
|
698 | var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
699 |
|
700 | for (i = 0; i < sourceSymbolKeys.length; i++) {
|
701 | key = sourceSymbolKeys[i];
|
702 | if (excluded.indexOf(key) >= 0) continue;
|
703 | if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
704 | target[key] = source[key];
|
705 | }
|
706 | }
|
707 |
|
708 | return target;
|
709 | }
|
710 |
|
711 | function chainPropTypes(propType1, propType2) {
|
712 |
|
713 | return function validate() {
|
714 | return propType1.apply(void 0, arguments) || propType2.apply(void 0, arguments);
|
715 | };
|
716 | }
|
717 |
|
718 | function _extends() {
|
719 | _extends = Object.assign || function (target) {
|
720 | for (var i = 1; i < arguments.length; i++) {
|
721 | var source = arguments[i];
|
722 |
|
723 | for (var key in source) {
|
724 | if (Object.prototype.hasOwnProperty.call(source, key)) {
|
725 | target[key] = source[key];
|
726 | }
|
727 | }
|
728 | }
|
729 |
|
730 | return target;
|
731 | };
|
732 |
|
733 | return _extends.apply(this, arguments);
|
734 | }
|
735 |
|
736 | function _typeof(obj) {
|
737 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
738 | _typeof = function _typeof(obj) {
|
739 | return typeof obj;
|
740 | };
|
741 | } else {
|
742 | _typeof = function _typeof(obj) {
|
743 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
744 | };
|
745 | }
|
746 |
|
747 | return _typeof(obj);
|
748 | }
|
749 |
|
750 | function isObject(item) {
|
751 | return item && _typeof(item) === 'object' && !Array.isArray(item);
|
752 | }
|
753 | function deepmerge(target, source) {
|
754 | var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
|
755 | clone: true
|
756 | };
|
757 | var output = options.clone ? _extends({}, target) : target;
|
758 |
|
759 | if (isObject(target) && isObject(source)) {
|
760 | Object.keys(source).forEach(function (key) {
|
761 |
|
762 | if (key === '__proto__') {
|
763 | return;
|
764 | }
|
765 |
|
766 | if (isObject(source[key]) && key in target) {
|
767 | output[key] = deepmerge(target[key], source[key], options);
|
768 | } else {
|
769 | output[key] = source[key];
|
770 | }
|
771 | });
|
772 | }
|
773 |
|
774 | return output;
|
775 | }
|
776 |
|
777 | function unwrapExports (x) {
|
778 | return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
779 | }
|
780 |
|
781 | function createCommonjsModule(fn, module) {
|
782 | return module = { exports: {} }, fn(module, module.exports), module.exports;
|
783 | }
|
784 |
|
785 | var reactIs_production_min = createCommonjsModule(function (module, exports) {
|
786 | Object.defineProperty(exports,"__esModule",{value:!0});
|
787 | var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.suspense_list"):
|
788 | 60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.fundamental"):60117,w=b?Symbol.for("react.responder"):60118,x=b?Symbol.for("react.scope"):60119;function y(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function z(a){return y(a)===m}
|
789 | exports.typeOf=y;exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d;exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;
|
790 | exports.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===v||a.$$typeof===w||a.$$typeof===x)};exports.isAsyncMode=function(a){return z(a)||y(a)===l};exports.isConcurrentMode=z;exports.isContextConsumer=function(a){return y(a)===k};exports.isContextProvider=function(a){return y(a)===h};
|
791 | exports.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return y(a)===n};exports.isFragment=function(a){return y(a)===e};exports.isLazy=function(a){return y(a)===t};exports.isMemo=function(a){return y(a)===r};exports.isPortal=function(a){return y(a)===d};exports.isProfiler=function(a){return y(a)===g};exports.isStrictMode=function(a){return y(a)===f};exports.isSuspense=function(a){return y(a)===p};
|
792 | });
|
793 |
|
794 | unwrapExports(reactIs_production_min);
|
795 | var reactIs_production_min_1 = reactIs_production_min.typeOf;
|
796 | var reactIs_production_min_2 = reactIs_production_min.AsyncMode;
|
797 | var reactIs_production_min_3 = reactIs_production_min.ConcurrentMode;
|
798 | var reactIs_production_min_4 = reactIs_production_min.ContextConsumer;
|
799 | var reactIs_production_min_5 = reactIs_production_min.ContextProvider;
|
800 | var reactIs_production_min_6 = reactIs_production_min.Element;
|
801 | var reactIs_production_min_7 = reactIs_production_min.ForwardRef;
|
802 | var reactIs_production_min_8 = reactIs_production_min.Fragment;
|
803 | var reactIs_production_min_9 = reactIs_production_min.Lazy;
|
804 | var reactIs_production_min_10 = reactIs_production_min.Memo;
|
805 | var reactIs_production_min_11 = reactIs_production_min.Portal;
|
806 | var reactIs_production_min_12 = reactIs_production_min.Profiler;
|
807 | var reactIs_production_min_13 = reactIs_production_min.StrictMode;
|
808 | var reactIs_production_min_14 = reactIs_production_min.Suspense;
|
809 | var reactIs_production_min_15 = reactIs_production_min.isValidElementType;
|
810 | var reactIs_production_min_16 = reactIs_production_min.isAsyncMode;
|
811 | var reactIs_production_min_17 = reactIs_production_min.isConcurrentMode;
|
812 | var reactIs_production_min_18 = reactIs_production_min.isContextConsumer;
|
813 | var reactIs_production_min_19 = reactIs_production_min.isContextProvider;
|
814 | var reactIs_production_min_20 = reactIs_production_min.isElement;
|
815 | var reactIs_production_min_21 = reactIs_production_min.isForwardRef;
|
816 | var reactIs_production_min_22 = reactIs_production_min.isFragment;
|
817 | var reactIs_production_min_23 = reactIs_production_min.isLazy;
|
818 | var reactIs_production_min_24 = reactIs_production_min.isMemo;
|
819 | var reactIs_production_min_25 = reactIs_production_min.isPortal;
|
820 | var reactIs_production_min_26 = reactIs_production_min.isProfiler;
|
821 | var reactIs_production_min_27 = reactIs_production_min.isStrictMode;
|
822 | var reactIs_production_min_28 = reactIs_production_min.isSuspense;
|
823 |
|
824 | var reactIs_development = createCommonjsModule(function (module, exports) {
|
825 |
|
826 |
|
827 |
|
828 | {
|
829 | (function() {
|
830 |
|
831 | Object.defineProperty(exports, '__esModule', { value: true });
|
832 |
|
833 |
|
834 |
|
835 | var hasSymbol = typeof Symbol === 'function' && Symbol.for;
|
836 | var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
|
837 | var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
|
838 | var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
|
839 | var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
|
840 | var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
|
841 | var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
|
842 | var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
|
843 |
|
844 |
|
845 | var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
|
846 | var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
|
847 | var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
|
848 | var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
|
849 | var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
|
850 | var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
|
851 | var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
|
852 | var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
|
853 | var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
|
854 | var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
|
855 |
|
856 | function isValidElementType(type) {
|
857 | return typeof type === 'string' || typeof type === 'function' ||
|
858 | type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE);
|
859 | }
|
860 |
|
861 | |
862 |
|
863 |
|
864 |
|
865 |
|
866 |
|
867 |
|
868 |
|
869 |
|
870 |
|
871 |
|
872 |
|
873 |
|
874 | var lowPriorityWarningWithoutStack = function () {};
|
875 |
|
876 | {
|
877 | var printWarning = function (format) {
|
878 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
879 | args[_key - 1] = arguments[_key];
|
880 | }
|
881 |
|
882 | var argIndex = 0;
|
883 | var message = 'Warning: ' + format.replace(/%s/g, function () {
|
884 | return args[argIndex++];
|
885 | });
|
886 |
|
887 | if (typeof console !== 'undefined') {
|
888 | console.warn(message);
|
889 | }
|
890 |
|
891 | try {
|
892 |
|
893 |
|
894 |
|
895 | throw new Error(message);
|
896 | } catch (x) {}
|
897 | };
|
898 |
|
899 | lowPriorityWarningWithoutStack = function (condition, format) {
|
900 | if (format === undefined) {
|
901 | throw new Error('`lowPriorityWarningWithoutStack(condition, format, ...args)` requires a warning ' + 'message argument');
|
902 | }
|
903 |
|
904 | if (!condition) {
|
905 | for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
|
906 | args[_key2 - 2] = arguments[_key2];
|
907 | }
|
908 |
|
909 | printWarning.apply(void 0, [format].concat(args));
|
910 | }
|
911 | };
|
912 | }
|
913 |
|
914 | var lowPriorityWarningWithoutStack$1 = lowPriorityWarningWithoutStack;
|
915 |
|
916 | function typeOf(object) {
|
917 | if (typeof object === 'object' && object !== null) {
|
918 | var $$typeof = object.$$typeof;
|
919 |
|
920 | switch ($$typeof) {
|
921 | case REACT_ELEMENT_TYPE:
|
922 | var type = object.type;
|
923 |
|
924 | switch (type) {
|
925 | case REACT_ASYNC_MODE_TYPE:
|
926 | case REACT_CONCURRENT_MODE_TYPE:
|
927 | case REACT_FRAGMENT_TYPE:
|
928 | case REACT_PROFILER_TYPE:
|
929 | case REACT_STRICT_MODE_TYPE:
|
930 | case REACT_SUSPENSE_TYPE:
|
931 | return type;
|
932 |
|
933 | default:
|
934 | var $$typeofType = type && type.$$typeof;
|
935 |
|
936 | switch ($$typeofType) {
|
937 | case REACT_CONTEXT_TYPE:
|
938 | case REACT_FORWARD_REF_TYPE:
|
939 | case REACT_LAZY_TYPE:
|
940 | case REACT_MEMO_TYPE:
|
941 | case REACT_PROVIDER_TYPE:
|
942 | return $$typeofType;
|
943 |
|
944 | default:
|
945 | return $$typeof;
|
946 | }
|
947 |
|
948 | }
|
949 |
|
950 | case REACT_PORTAL_TYPE:
|
951 | return $$typeof;
|
952 | }
|
953 | }
|
954 |
|
955 | return undefined;
|
956 | }
|
957 |
|
958 | var AsyncMode = REACT_ASYNC_MODE_TYPE;
|
959 | var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
|
960 | var ContextConsumer = REACT_CONTEXT_TYPE;
|
961 | var ContextProvider = REACT_PROVIDER_TYPE;
|
962 | var Element = REACT_ELEMENT_TYPE;
|
963 | var ForwardRef = REACT_FORWARD_REF_TYPE;
|
964 | var Fragment = REACT_FRAGMENT_TYPE;
|
965 | var Lazy = REACT_LAZY_TYPE;
|
966 | var Memo = REACT_MEMO_TYPE;
|
967 | var Portal = REACT_PORTAL_TYPE;
|
968 | var Profiler = REACT_PROFILER_TYPE;
|
969 | var StrictMode = REACT_STRICT_MODE_TYPE;
|
970 | var Suspense = REACT_SUSPENSE_TYPE;
|
971 | var hasWarnedAboutDeprecatedIsAsyncMode = false;
|
972 |
|
973 | function isAsyncMode(object) {
|
974 | {
|
975 | if (!hasWarnedAboutDeprecatedIsAsyncMode) {
|
976 | hasWarnedAboutDeprecatedIsAsyncMode = true;
|
977 | lowPriorityWarningWithoutStack$1(false, 'The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
|
978 | }
|
979 | }
|
980 |
|
981 | return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
|
982 | }
|
983 | function isConcurrentMode(object) {
|
984 | return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
|
985 | }
|
986 | function isContextConsumer(object) {
|
987 | return typeOf(object) === REACT_CONTEXT_TYPE;
|
988 | }
|
989 | function isContextProvider(object) {
|
990 | return typeOf(object) === REACT_PROVIDER_TYPE;
|
991 | }
|
992 | function isElement(object) {
|
993 | return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
|
994 | }
|
995 | function isForwardRef(object) {
|
996 | return typeOf(object) === REACT_FORWARD_REF_TYPE;
|
997 | }
|
998 | function isFragment(object) {
|
999 | return typeOf(object) === REACT_FRAGMENT_TYPE;
|
1000 | }
|
1001 | function isLazy(object) {
|
1002 | return typeOf(object) === REACT_LAZY_TYPE;
|
1003 | }
|
1004 | function isMemo(object) {
|
1005 | return typeOf(object) === REACT_MEMO_TYPE;
|
1006 | }
|
1007 | function isPortal(object) {
|
1008 | return typeOf(object) === REACT_PORTAL_TYPE;
|
1009 | }
|
1010 | function isProfiler(object) {
|
1011 | return typeOf(object) === REACT_PROFILER_TYPE;
|
1012 | }
|
1013 | function isStrictMode(object) {
|
1014 | return typeOf(object) === REACT_STRICT_MODE_TYPE;
|
1015 | }
|
1016 | function isSuspense(object) {
|
1017 | return typeOf(object) === REACT_SUSPENSE_TYPE;
|
1018 | }
|
1019 |
|
1020 | exports.typeOf = typeOf;
|
1021 | exports.AsyncMode = AsyncMode;
|
1022 | exports.ConcurrentMode = ConcurrentMode;
|
1023 | exports.ContextConsumer = ContextConsumer;
|
1024 | exports.ContextProvider = ContextProvider;
|
1025 | exports.Element = Element;
|
1026 | exports.ForwardRef = ForwardRef;
|
1027 | exports.Fragment = Fragment;
|
1028 | exports.Lazy = Lazy;
|
1029 | exports.Memo = Memo;
|
1030 | exports.Portal = Portal;
|
1031 | exports.Profiler = Profiler;
|
1032 | exports.StrictMode = StrictMode;
|
1033 | exports.Suspense = Suspense;
|
1034 | exports.isValidElementType = isValidElementType;
|
1035 | exports.isAsyncMode = isAsyncMode;
|
1036 | exports.isConcurrentMode = isConcurrentMode;
|
1037 | exports.isContextConsumer = isContextConsumer;
|
1038 | exports.isContextProvider = isContextProvider;
|
1039 | exports.isElement = isElement;
|
1040 | exports.isForwardRef = isForwardRef;
|
1041 | exports.isFragment = isFragment;
|
1042 | exports.isLazy = isLazy;
|
1043 | exports.isMemo = isMemo;
|
1044 | exports.isPortal = isPortal;
|
1045 | exports.isProfiler = isProfiler;
|
1046 | exports.isStrictMode = isStrictMode;
|
1047 | exports.isSuspense = isSuspense;
|
1048 | })();
|
1049 | }
|
1050 | });
|
1051 |
|
1052 | unwrapExports(reactIs_development);
|
1053 | var reactIs_development_1 = reactIs_development.typeOf;
|
1054 | var reactIs_development_2 = reactIs_development.AsyncMode;
|
1055 | var reactIs_development_3 = reactIs_development.ConcurrentMode;
|
1056 | var reactIs_development_4 = reactIs_development.ContextConsumer;
|
1057 | var reactIs_development_5 = reactIs_development.ContextProvider;
|
1058 | var reactIs_development_6 = reactIs_development.Element;
|
1059 | var reactIs_development_7 = reactIs_development.ForwardRef;
|
1060 | var reactIs_development_8 = reactIs_development.Fragment;
|
1061 | var reactIs_development_9 = reactIs_development.Lazy;
|
1062 | var reactIs_development_10 = reactIs_development.Memo;
|
1063 | var reactIs_development_11 = reactIs_development.Portal;
|
1064 | var reactIs_development_12 = reactIs_development.Profiler;
|
1065 | var reactIs_development_13 = reactIs_development.StrictMode;
|
1066 | var reactIs_development_14 = reactIs_development.Suspense;
|
1067 | var reactIs_development_15 = reactIs_development.isValidElementType;
|
1068 | var reactIs_development_16 = reactIs_development.isAsyncMode;
|
1069 | var reactIs_development_17 = reactIs_development.isConcurrentMode;
|
1070 | var reactIs_development_18 = reactIs_development.isContextConsumer;
|
1071 | var reactIs_development_19 = reactIs_development.isContextProvider;
|
1072 | var reactIs_development_20 = reactIs_development.isElement;
|
1073 | var reactIs_development_21 = reactIs_development.isForwardRef;
|
1074 | var reactIs_development_22 = reactIs_development.isFragment;
|
1075 | var reactIs_development_23 = reactIs_development.isLazy;
|
1076 | var reactIs_development_24 = reactIs_development.isMemo;
|
1077 | var reactIs_development_25 = reactIs_development.isPortal;
|
1078 | var reactIs_development_26 = reactIs_development.isProfiler;
|
1079 | var reactIs_development_27 = reactIs_development.isStrictMode;
|
1080 | var reactIs_development_28 = reactIs_development.isSuspense;
|
1081 |
|
1082 | var reactIs = createCommonjsModule(function (module) {
|
1083 |
|
1084 | {
|
1085 | module.exports = reactIs_development;
|
1086 | }
|
1087 | });
|
1088 | var reactIs_1 = reactIs.ForwardRef;
|
1089 | var reactIs_2 = reactIs.isFragment;
|
1090 | var reactIs_3 = reactIs.isLazy;
|
1091 | var reactIs_4 = reactIs.isMemo;
|
1092 | var reactIs_5 = reactIs.isValidElementType;
|
1093 |
|
1094 | |
1095 |
|
1096 |
|
1097 |
|
1098 |
|
1099 |
|
1100 | var getOwnPropertySymbols = Object.getOwnPropertySymbols;
|
1101 | var hasOwnProperty = Object.prototype.hasOwnProperty;
|
1102 | var propIsEnumerable = Object.prototype.propertyIsEnumerable;
|
1103 |
|
1104 | function toObject(val) {
|
1105 | if (val === null || val === undefined) {
|
1106 | throw new TypeError('Object.assign cannot be called with null or undefined');
|
1107 | }
|
1108 |
|
1109 | return Object(val);
|
1110 | }
|
1111 |
|
1112 | function shouldUseNative() {
|
1113 | try {
|
1114 | if (!Object.assign) {
|
1115 | return false;
|
1116 | }
|
1117 |
|
1118 |
|
1119 |
|
1120 |
|
1121 | var test1 = new String('abc');
|
1122 | test1[5] = 'de';
|
1123 | if (Object.getOwnPropertyNames(test1)[0] === '5') {
|
1124 | return false;
|
1125 | }
|
1126 |
|
1127 |
|
1128 | var test2 = {};
|
1129 | for (var i = 0; i < 10; i++) {
|
1130 | test2['_' + String.fromCharCode(i)] = i;
|
1131 | }
|
1132 | var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
|
1133 | return test2[n];
|
1134 | });
|
1135 | if (order2.join('') !== '0123456789') {
|
1136 | return false;
|
1137 | }
|
1138 |
|
1139 |
|
1140 | var test3 = {};
|
1141 | 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
|
1142 | test3[letter] = letter;
|
1143 | });
|
1144 | if (Object.keys(Object.assign({}, test3)).join('') !==
|
1145 | 'abcdefghijklmnopqrst') {
|
1146 | return false;
|
1147 | }
|
1148 |
|
1149 | return true;
|
1150 | } catch (err) {
|
1151 |
|
1152 | return false;
|
1153 | }
|
1154 | }
|
1155 |
|
1156 | var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
|
1157 | var from;
|
1158 | var to = toObject(target);
|
1159 | var symbols;
|
1160 |
|
1161 | for (var s = 1; s < arguments.length; s++) {
|
1162 | from = Object(arguments[s]);
|
1163 |
|
1164 | for (var key in from) {
|
1165 | if (hasOwnProperty.call(from, key)) {
|
1166 | to[key] = from[key];
|
1167 | }
|
1168 | }
|
1169 |
|
1170 | if (getOwnPropertySymbols) {
|
1171 | symbols = getOwnPropertySymbols(from);
|
1172 | for (var i = 0; i < symbols.length; i++) {
|
1173 | if (propIsEnumerable.call(from, symbols[i])) {
|
1174 | to[symbols[i]] = from[symbols[i]];
|
1175 | }
|
1176 | }
|
1177 | }
|
1178 | }
|
1179 |
|
1180 | return to;
|
1181 | };
|
1182 |
|
1183 | |
1184 |
|
1185 |
|
1186 |
|
1187 |
|
1188 |
|
1189 |
|
1190 | var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
|
1191 |
|
1192 | var ReactPropTypesSecret_1 = ReactPropTypesSecret;
|
1193 |
|
1194 | var printWarning = function() {};
|
1195 |
|
1196 | {
|
1197 | var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
|
1198 | var loggedTypeFailures = {};
|
1199 | var has = Function.call.bind(Object.prototype.hasOwnProperty);
|
1200 |
|
1201 | printWarning = function(text) {
|
1202 | var message = 'Warning: ' + text;
|
1203 | if (typeof console !== 'undefined') {
|
1204 | console.error(message);
|
1205 | }
|
1206 | try {
|
1207 |
|
1208 |
|
1209 |
|
1210 | throw new Error(message);
|
1211 | } catch (x) {}
|
1212 | };
|
1213 | }
|
1214 |
|
1215 | |
1216 |
|
1217 |
|
1218 |
|
1219 |
|
1220 |
|
1221 |
|
1222 |
|
1223 |
|
1224 |
|
1225 |
|
1226 | function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
|
1227 | {
|
1228 | for (var typeSpecName in typeSpecs) {
|
1229 | if (has(typeSpecs, typeSpecName)) {
|
1230 | var error;
|
1231 |
|
1232 |
|
1233 |
|
1234 | try {
|
1235 |
|
1236 |
|
1237 | if (typeof typeSpecs[typeSpecName] !== 'function') {
|
1238 | var err = Error(
|
1239 | (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
|
1240 | 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
|
1241 | );
|
1242 | err.name = 'Invariant Violation';
|
1243 | throw err;
|
1244 | }
|
1245 | error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
|
1246 | } catch (ex) {
|
1247 | error = ex;
|
1248 | }
|
1249 | if (error && !(error instanceof Error)) {
|
1250 | printWarning(
|
1251 | (componentName || 'React class') + ': type specification of ' +
|
1252 | location + ' `' + typeSpecName + '` is invalid; the type checker ' +
|
1253 | 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
|
1254 | 'You may have forgotten to pass an argument to the type checker ' +
|
1255 | 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
|
1256 | 'shape all require an argument).'
|
1257 | );
|
1258 | }
|
1259 | if (error instanceof Error && !(error.message in loggedTypeFailures)) {
|
1260 |
|
1261 |
|
1262 | loggedTypeFailures[error.message] = true;
|
1263 |
|
1264 | var stack = getStack ? getStack() : '';
|
1265 |
|
1266 | printWarning(
|
1267 | 'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
|
1268 | );
|
1269 | }
|
1270 | }
|
1271 | }
|
1272 | }
|
1273 | }
|
1274 |
|
1275 | |
1276 |
|
1277 |
|
1278 |
|
1279 |
|
1280 | checkPropTypes.resetWarningCache = function() {
|
1281 | {
|
1282 | loggedTypeFailures = {};
|
1283 | }
|
1284 | };
|
1285 |
|
1286 | var checkPropTypes_1 = checkPropTypes;
|
1287 |
|
1288 | var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
|
1289 | var printWarning$1 = function() {};
|
1290 |
|
1291 | {
|
1292 | printWarning$1 = function(text) {
|
1293 | var message = 'Warning: ' + text;
|
1294 | if (typeof console !== 'undefined') {
|
1295 | console.error(message);
|
1296 | }
|
1297 | try {
|
1298 |
|
1299 |
|
1300 |
|
1301 | throw new Error(message);
|
1302 | } catch (x) {}
|
1303 | };
|
1304 | }
|
1305 |
|
1306 | function emptyFunctionThatReturnsNull() {
|
1307 | return null;
|
1308 | }
|
1309 |
|
1310 | var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
1311 |
|
1312 | var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
|
1313 | var FAUX_ITERATOR_SYMBOL = '@@iterator';
|
1314 |
|
1315 | |
1316 |
|
1317 |
|
1318 |
|
1319 |
|
1320 |
|
1321 |
|
1322 |
|
1323 |
|
1324 |
|
1325 |
|
1326 |
|
1327 |
|
1328 |
|
1329 | function getIteratorFn(maybeIterable) {
|
1330 | var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
|
1331 | if (typeof iteratorFn === 'function') {
|
1332 | return iteratorFn;
|
1333 | }
|
1334 | }
|
1335 |
|
1336 | |
1337 |
|
1338 |
|
1339 |
|
1340 |
|
1341 |
|
1342 |
|
1343 |
|
1344 |
|
1345 |
|
1346 |
|
1347 |
|
1348 |
|
1349 |
|
1350 |
|
1351 |
|
1352 |
|
1353 |
|
1354 |
|
1355 |
|
1356 |
|
1357 |
|
1358 |
|
1359 |
|
1360 |
|
1361 |
|
1362 |
|
1363 |
|
1364 |
|
1365 |
|
1366 |
|
1367 |
|
1368 |
|
1369 |
|
1370 |
|
1371 |
|
1372 |
|
1373 |
|
1374 |
|
1375 |
|
1376 |
|
1377 |
|
1378 |
|
1379 |
|
1380 |
|
1381 |
|
1382 |
|
1383 | var ANONYMOUS = '<<anonymous>>';
|
1384 |
|
1385 |
|
1386 |
|
1387 | var ReactPropTypes = {
|
1388 | array: createPrimitiveTypeChecker('array'),
|
1389 | bool: createPrimitiveTypeChecker('boolean'),
|
1390 | func: createPrimitiveTypeChecker('function'),
|
1391 | number: createPrimitiveTypeChecker('number'),
|
1392 | object: createPrimitiveTypeChecker('object'),
|
1393 | string: createPrimitiveTypeChecker('string'),
|
1394 | symbol: createPrimitiveTypeChecker('symbol'),
|
1395 |
|
1396 | any: createAnyTypeChecker(),
|
1397 | arrayOf: createArrayOfTypeChecker,
|
1398 | element: createElementTypeChecker(),
|
1399 | elementType: createElementTypeTypeChecker(),
|
1400 | instanceOf: createInstanceTypeChecker,
|
1401 | node: createNodeChecker(),
|
1402 | objectOf: createObjectOfTypeChecker,
|
1403 | oneOf: createEnumTypeChecker,
|
1404 | oneOfType: createUnionTypeChecker,
|
1405 | shape: createShapeTypeChecker,
|
1406 | exact: createStrictShapeTypeChecker,
|
1407 | };
|
1408 |
|
1409 | |
1410 |
|
1411 |
|
1412 |
|
1413 |
|
1414 | function is(x, y) {
|
1415 |
|
1416 | if (x === y) {
|
1417 |
|
1418 |
|
1419 | return x !== 0 || 1 / x === 1 / y;
|
1420 | } else {
|
1421 |
|
1422 | return x !== x && y !== y;
|
1423 | }
|
1424 | }
|
1425 |
|
1426 |
|
1427 | |
1428 |
|
1429 |
|
1430 |
|
1431 |
|
1432 |
|
1433 |
|
1434 | function PropTypeError(message) {
|
1435 | this.message = message;
|
1436 | this.stack = '';
|
1437 | }
|
1438 |
|
1439 | PropTypeError.prototype = Error.prototype;
|
1440 |
|
1441 | function createChainableTypeChecker(validate) {
|
1442 | {
|
1443 | var manualPropTypeCallCache = {};
|
1444 | var manualPropTypeWarningCount = 0;
|
1445 | }
|
1446 | function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
|
1447 | componentName = componentName || ANONYMOUS;
|
1448 | propFullName = propFullName || propName;
|
1449 |
|
1450 | if (secret !== ReactPropTypesSecret_1) {
|
1451 | if (throwOnDirectAccess) {
|
1452 |
|
1453 | var err = new Error(
|
1454 | 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
|
1455 | 'Use `PropTypes.checkPropTypes()` to call them. ' +
|
1456 | 'Read more at http://fb.me/use-check-prop-types'
|
1457 | );
|
1458 | err.name = 'Invariant Violation';
|
1459 | throw err;
|
1460 | } else if ( typeof console !== 'undefined') {
|
1461 |
|
1462 | var cacheKey = componentName + ':' + propName;
|
1463 | if (
|
1464 | !manualPropTypeCallCache[cacheKey] &&
|
1465 |
|
1466 | manualPropTypeWarningCount < 3
|
1467 | ) {
|
1468 | printWarning$1(
|
1469 | 'You are manually calling a React.PropTypes validation ' +
|
1470 | 'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
|
1471 | 'and will throw in the standalone `prop-types` package. ' +
|
1472 | 'You may be seeing this warning due to a third-party PropTypes ' +
|
1473 | 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
|
1474 | );
|
1475 | manualPropTypeCallCache[cacheKey] = true;
|
1476 | manualPropTypeWarningCount++;
|
1477 | }
|
1478 | }
|
1479 | }
|
1480 | if (props[propName] == null) {
|
1481 | if (isRequired) {
|
1482 | if (props[propName] === null) {
|
1483 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
|
1484 | }
|
1485 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
|
1486 | }
|
1487 | return null;
|
1488 | } else {
|
1489 | return validate(props, propName, componentName, location, propFullName);
|
1490 | }
|
1491 | }
|
1492 |
|
1493 | var chainedCheckType = checkType.bind(null, false);
|
1494 | chainedCheckType.isRequired = checkType.bind(null, true);
|
1495 |
|
1496 | return chainedCheckType;
|
1497 | }
|
1498 |
|
1499 | function createPrimitiveTypeChecker(expectedType) {
|
1500 | function validate(props, propName, componentName, location, propFullName, secret) {
|
1501 | var propValue = props[propName];
|
1502 | var propType = getPropType(propValue);
|
1503 | if (propType !== expectedType) {
|
1504 |
|
1505 |
|
1506 |
|
1507 | var preciseType = getPreciseType(propValue);
|
1508 |
|
1509 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
|
1510 | }
|
1511 | return null;
|
1512 | }
|
1513 | return createChainableTypeChecker(validate);
|
1514 | }
|
1515 |
|
1516 | function createAnyTypeChecker() {
|
1517 | return createChainableTypeChecker(emptyFunctionThatReturnsNull);
|
1518 | }
|
1519 |
|
1520 | function createArrayOfTypeChecker(typeChecker) {
|
1521 | function validate(props, propName, componentName, location, propFullName) {
|
1522 | if (typeof typeChecker !== 'function') {
|
1523 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
|
1524 | }
|
1525 | var propValue = props[propName];
|
1526 | if (!Array.isArray(propValue)) {
|
1527 | var propType = getPropType(propValue);
|
1528 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
|
1529 | }
|
1530 | for (var i = 0; i < propValue.length; i++) {
|
1531 | var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
|
1532 | if (error instanceof Error) {
|
1533 | return error;
|
1534 | }
|
1535 | }
|
1536 | return null;
|
1537 | }
|
1538 | return createChainableTypeChecker(validate);
|
1539 | }
|
1540 |
|
1541 | function createElementTypeChecker() {
|
1542 | function validate(props, propName, componentName, location, propFullName) {
|
1543 | var propValue = props[propName];
|
1544 | if (!isValidElement(propValue)) {
|
1545 | var propType = getPropType(propValue);
|
1546 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
|
1547 | }
|
1548 | return null;
|
1549 | }
|
1550 | return createChainableTypeChecker(validate);
|
1551 | }
|
1552 |
|
1553 | function createElementTypeTypeChecker() {
|
1554 | function validate(props, propName, componentName, location, propFullName) {
|
1555 | var propValue = props[propName];
|
1556 | if (!reactIs.isValidElementType(propValue)) {
|
1557 | var propType = getPropType(propValue);
|
1558 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
|
1559 | }
|
1560 | return null;
|
1561 | }
|
1562 | return createChainableTypeChecker(validate);
|
1563 | }
|
1564 |
|
1565 | function createInstanceTypeChecker(expectedClass) {
|
1566 | function validate(props, propName, componentName, location, propFullName) {
|
1567 | if (!(props[propName] instanceof expectedClass)) {
|
1568 | var expectedClassName = expectedClass.name || ANONYMOUS;
|
1569 | var actualClassName = getClassName(props[propName]);
|
1570 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
|
1571 | }
|
1572 | return null;
|
1573 | }
|
1574 | return createChainableTypeChecker(validate);
|
1575 | }
|
1576 |
|
1577 | function createEnumTypeChecker(expectedValues) {
|
1578 | if (!Array.isArray(expectedValues)) {
|
1579 | {
|
1580 | if (arguments.length > 1) {
|
1581 | printWarning$1(
|
1582 | 'Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' +
|
1583 | 'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).'
|
1584 | );
|
1585 | } else {
|
1586 | printWarning$1('Invalid argument supplied to oneOf, expected an array.');
|
1587 | }
|
1588 | }
|
1589 | return emptyFunctionThatReturnsNull;
|
1590 | }
|
1591 |
|
1592 | function validate(props, propName, componentName, location, propFullName) {
|
1593 | var propValue = props[propName];
|
1594 | for (var i = 0; i < expectedValues.length; i++) {
|
1595 | if (is(propValue, expectedValues[i])) {
|
1596 | return null;
|
1597 | }
|
1598 | }
|
1599 |
|
1600 | var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
|
1601 | var type = getPreciseType(value);
|
1602 | if (type === 'symbol') {
|
1603 | return String(value);
|
1604 | }
|
1605 | return value;
|
1606 | });
|
1607 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
|
1608 | }
|
1609 | return createChainableTypeChecker(validate);
|
1610 | }
|
1611 |
|
1612 | function createObjectOfTypeChecker(typeChecker) {
|
1613 | function validate(props, propName, componentName, location, propFullName) {
|
1614 | if (typeof typeChecker !== 'function') {
|
1615 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
|
1616 | }
|
1617 | var propValue = props[propName];
|
1618 | var propType = getPropType(propValue);
|
1619 | if (propType !== 'object') {
|
1620 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
|
1621 | }
|
1622 | for (var key in propValue) {
|
1623 | if (has$1(propValue, key)) {
|
1624 | var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
|
1625 | if (error instanceof Error) {
|
1626 | return error;
|
1627 | }
|
1628 | }
|
1629 | }
|
1630 | return null;
|
1631 | }
|
1632 | return createChainableTypeChecker(validate);
|
1633 | }
|
1634 |
|
1635 | function createUnionTypeChecker(arrayOfTypeCheckers) {
|
1636 | if (!Array.isArray(arrayOfTypeCheckers)) {
|
1637 | printWarning$1('Invalid argument supplied to oneOfType, expected an instance of array.') ;
|
1638 | return emptyFunctionThatReturnsNull;
|
1639 | }
|
1640 |
|
1641 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
|
1642 | var checker = arrayOfTypeCheckers[i];
|
1643 | if (typeof checker !== 'function') {
|
1644 | printWarning$1(
|
1645 | 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
|
1646 | 'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
|
1647 | );
|
1648 | return emptyFunctionThatReturnsNull;
|
1649 | }
|
1650 | }
|
1651 |
|
1652 | function validate(props, propName, componentName, location, propFullName) {
|
1653 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
|
1654 | var checker = arrayOfTypeCheckers[i];
|
1655 | if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1) == null) {
|
1656 | return null;
|
1657 | }
|
1658 | }
|
1659 |
|
1660 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
|
1661 | }
|
1662 | return createChainableTypeChecker(validate);
|
1663 | }
|
1664 |
|
1665 | function createNodeChecker() {
|
1666 | function validate(props, propName, componentName, location, propFullName) {
|
1667 | if (!isNode(props[propName])) {
|
1668 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
|
1669 | }
|
1670 | return null;
|
1671 | }
|
1672 | return createChainableTypeChecker(validate);
|
1673 | }
|
1674 |
|
1675 | function createShapeTypeChecker(shapeTypes) {
|
1676 | function validate(props, propName, componentName, location, propFullName) {
|
1677 | var propValue = props[propName];
|
1678 | var propType = getPropType(propValue);
|
1679 | if (propType !== 'object') {
|
1680 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
|
1681 | }
|
1682 | for (var key in shapeTypes) {
|
1683 | var checker = shapeTypes[key];
|
1684 | if (!checker) {
|
1685 | continue;
|
1686 | }
|
1687 | var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
|
1688 | if (error) {
|
1689 | return error;
|
1690 | }
|
1691 | }
|
1692 | return null;
|
1693 | }
|
1694 | return createChainableTypeChecker(validate);
|
1695 | }
|
1696 |
|
1697 | function createStrictShapeTypeChecker(shapeTypes) {
|
1698 | function validate(props, propName, componentName, location, propFullName) {
|
1699 | var propValue = props[propName];
|
1700 | var propType = getPropType(propValue);
|
1701 | if (propType !== 'object') {
|
1702 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
|
1703 | }
|
1704 |
|
1705 |
|
1706 | var allKeys = objectAssign({}, props[propName], shapeTypes);
|
1707 | for (var key in allKeys) {
|
1708 | var checker = shapeTypes[key];
|
1709 | if (!checker) {
|
1710 | return new PropTypeError(
|
1711 | 'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
|
1712 | '\nBad object: ' + JSON.stringify(props[propName], null, ' ') +
|
1713 | '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ')
|
1714 | );
|
1715 | }
|
1716 | var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
|
1717 | if (error) {
|
1718 | return error;
|
1719 | }
|
1720 | }
|
1721 | return null;
|
1722 | }
|
1723 |
|
1724 | return createChainableTypeChecker(validate);
|
1725 | }
|
1726 |
|
1727 | function isNode(propValue) {
|
1728 | switch (typeof propValue) {
|
1729 | case 'number':
|
1730 | case 'string':
|
1731 | case 'undefined':
|
1732 | return true;
|
1733 | case 'boolean':
|
1734 | return !propValue;
|
1735 | case 'object':
|
1736 | if (Array.isArray(propValue)) {
|
1737 | return propValue.every(isNode);
|
1738 | }
|
1739 | if (propValue === null || isValidElement(propValue)) {
|
1740 | return true;
|
1741 | }
|
1742 |
|
1743 | var iteratorFn = getIteratorFn(propValue);
|
1744 | if (iteratorFn) {
|
1745 | var iterator = iteratorFn.call(propValue);
|
1746 | var step;
|
1747 | if (iteratorFn !== propValue.entries) {
|
1748 | while (!(step = iterator.next()).done) {
|
1749 | if (!isNode(step.value)) {
|
1750 | return false;
|
1751 | }
|
1752 | }
|
1753 | } else {
|
1754 |
|
1755 | while (!(step = iterator.next()).done) {
|
1756 | var entry = step.value;
|
1757 | if (entry) {
|
1758 | if (!isNode(entry[1])) {
|
1759 | return false;
|
1760 | }
|
1761 | }
|
1762 | }
|
1763 | }
|
1764 | } else {
|
1765 | return false;
|
1766 | }
|
1767 |
|
1768 | return true;
|
1769 | default:
|
1770 | return false;
|
1771 | }
|
1772 | }
|
1773 |
|
1774 | function isSymbol(propType, propValue) {
|
1775 |
|
1776 | if (propType === 'symbol') {
|
1777 | return true;
|
1778 | }
|
1779 |
|
1780 |
|
1781 | if (!propValue) {
|
1782 | return false;
|
1783 | }
|
1784 |
|
1785 |
|
1786 | if (propValue['@@toStringTag'] === 'Symbol') {
|
1787 | return true;
|
1788 | }
|
1789 |
|
1790 |
|
1791 | if (typeof Symbol === 'function' && propValue instanceof Symbol) {
|
1792 | return true;
|
1793 | }
|
1794 |
|
1795 | return false;
|
1796 | }
|
1797 |
|
1798 |
|
1799 | function getPropType(propValue) {
|
1800 | var propType = typeof propValue;
|
1801 | if (Array.isArray(propValue)) {
|
1802 | return 'array';
|
1803 | }
|
1804 | if (propValue instanceof RegExp) {
|
1805 |
|
1806 |
|
1807 |
|
1808 | return 'object';
|
1809 | }
|
1810 | if (isSymbol(propType, propValue)) {
|
1811 | return 'symbol';
|
1812 | }
|
1813 | return propType;
|
1814 | }
|
1815 |
|
1816 |
|
1817 |
|
1818 | function getPreciseType(propValue) {
|
1819 | if (typeof propValue === 'undefined' || propValue === null) {
|
1820 | return '' + propValue;
|
1821 | }
|
1822 | var propType = getPropType(propValue);
|
1823 | if (propType === 'object') {
|
1824 | if (propValue instanceof Date) {
|
1825 | return 'date';
|
1826 | } else if (propValue instanceof RegExp) {
|
1827 | return 'regexp';
|
1828 | }
|
1829 | }
|
1830 | return propType;
|
1831 | }
|
1832 |
|
1833 |
|
1834 |
|
1835 | function getPostfixForTypeWarning(value) {
|
1836 | var type = getPreciseType(value);
|
1837 | switch (type) {
|
1838 | case 'array':
|
1839 | case 'object':
|
1840 | return 'an ' + type;
|
1841 | case 'boolean':
|
1842 | case 'date':
|
1843 | case 'regexp':
|
1844 | return 'a ' + type;
|
1845 | default:
|
1846 | return type;
|
1847 | }
|
1848 | }
|
1849 |
|
1850 |
|
1851 | function getClassName(propValue) {
|
1852 | if (!propValue.constructor || !propValue.constructor.name) {
|
1853 | return ANONYMOUS;
|
1854 | }
|
1855 | return propValue.constructor.name;
|
1856 | }
|
1857 |
|
1858 | ReactPropTypes.checkPropTypes = checkPropTypes_1;
|
1859 | ReactPropTypes.resetWarningCache = checkPropTypes_1.resetWarningCache;
|
1860 | ReactPropTypes.PropTypes = ReactPropTypes;
|
1861 |
|
1862 | return ReactPropTypes;
|
1863 | };
|
1864 |
|
1865 | var propTypes = createCommonjsModule(function (module) {
|
1866 | |
1867 |
|
1868 |
|
1869 |
|
1870 |
|
1871 |
|
1872 |
|
1873 | {
|
1874 | var ReactIs = reactIs;
|
1875 |
|
1876 |
|
1877 |
|
1878 | var throwOnDirectAccess = true;
|
1879 | module.exports = factoryWithTypeCheckers(ReactIs.isElement, throwOnDirectAccess);
|
1880 | }
|
1881 | });
|
1882 | var propTypes_1 = propTypes.elementType;
|
1883 | var propTypes_2 = propTypes.bool;
|
1884 | var propTypes_3 = propTypes.func;
|
1885 | var propTypes_4 = propTypes.object;
|
1886 | var propTypes_5 = propTypes.oneOfType;
|
1887 | var propTypes_6 = propTypes.element;
|
1888 |
|
1889 | function isClassComponent(elementType) {
|
1890 |
|
1891 | var _elementType$prototyp = elementType.prototype,
|
1892 | prototype = _elementType$prototyp === void 0 ? {} : _elementType$prototyp;
|
1893 | return Boolean(prototype.isReactComponent);
|
1894 | }
|
1895 |
|
1896 | function acceptingRef(props, propName, componentName, location, propFullName) {
|
1897 | var element = props[propName];
|
1898 | var safePropName = propFullName || propName;
|
1899 |
|
1900 | if (element == null) {
|
1901 | return null;
|
1902 | }
|
1903 |
|
1904 | var warningHint;
|
1905 | var elementType = element.type;
|
1906 | |
1907 |
|
1908 |
|
1909 |
|
1910 |
|
1911 |
|
1912 |
|
1913 |
|
1914 |
|
1915 |
|
1916 | if (typeof elementType === 'function' && !isClassComponent(elementType)) {
|
1917 | warningHint = 'Did you accidentally use a plain function component for an element instead?';
|
1918 | }
|
1919 |
|
1920 | if (warningHint !== undefined) {
|
1921 | return new Error("Invalid ".concat(location, " `").concat(safePropName, "` supplied to `").concat(componentName, "`. ") + "Expected an element that can hold a ref. ".concat(warningHint, " ") + 'For more information see https://material-ui.com/r/caveat-with-refs-guide');
|
1922 | }
|
1923 |
|
1924 | return null;
|
1925 | }
|
1926 |
|
1927 | var elementAcceptingRef = chainPropTypes(propTypes.element, acceptingRef);
|
1928 | elementAcceptingRef.isRequired = chainPropTypes(propTypes.element.isRequired, acceptingRef);
|
1929 |
|
1930 | function isClassComponent$1(elementType) {
|
1931 |
|
1932 | var _elementType$prototyp = elementType.prototype,
|
1933 | prototype = _elementType$prototyp === void 0 ? {} : _elementType$prototyp;
|
1934 | return Boolean(prototype.isReactComponent);
|
1935 | }
|
1936 |
|
1937 | function elementTypeAcceptingRef(props, propName, componentName, location, propFullName) {
|
1938 | var propValue = props[propName];
|
1939 | var safePropName = propFullName || propName;
|
1940 |
|
1941 | if (propValue == null) {
|
1942 | return null;
|
1943 | }
|
1944 |
|
1945 | var warningHint;
|
1946 | |
1947 |
|
1948 |
|
1949 |
|
1950 |
|
1951 |
|
1952 |
|
1953 |
|
1954 |
|
1955 |
|
1956 | if (typeof propValue === 'function' && !isClassComponent$1(propValue)) {
|
1957 | warningHint = 'Did you accidentally provide a plain function component instead?';
|
1958 | }
|
1959 |
|
1960 | if (warningHint !== undefined) {
|
1961 | return new Error("Invalid ".concat(location, " `").concat(safePropName, "` supplied to `").concat(componentName, "`. ") + "Expected an element type that can hold a ref. ".concat(warningHint, " ") + 'For more information see https://material-ui.com/r/caveat-with-refs-guide');
|
1962 | }
|
1963 |
|
1964 | return null;
|
1965 | }
|
1966 |
|
1967 | var elementTypeAcceptingRef$1 = chainPropTypes(propTypes_1, elementTypeAcceptingRef);
|
1968 |
|
1969 |
|
1970 |
|
1971 |
|
1972 |
|
1973 | var specialProperty = "exact-prop: \u200B";
|
1974 | function exactProp(propTypes) {
|
1975 |
|
1976 | return _extends({}, propTypes, _defineProperty({}, specialProperty, function (props) {
|
1977 | var unsupportedProps = Object.keys(props).filter(function (prop) {
|
1978 | return !propTypes.hasOwnProperty(prop);
|
1979 | });
|
1980 |
|
1981 | if (unsupportedProps.length > 0) {
|
1982 | return new Error("The following props are not supported: ".concat(unsupportedProps.map(function (prop) {
|
1983 | return "`".concat(prop, "`");
|
1984 | }).join(', '), ". Please remove them."));
|
1985 | }
|
1986 |
|
1987 | return null;
|
1988 | }));
|
1989 | }
|
1990 |
|
1991 |
|
1992 |
|
1993 | var fnNameMatchRegex = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
|
1994 | function getFunctionName(fn) {
|
1995 | var match = "".concat(fn).match(fnNameMatchRegex);
|
1996 | var name = match && match[1];
|
1997 | return name || '';
|
1998 | }
|
1999 | |
2000 |
|
2001 |
|
2002 |
|
2003 |
|
2004 |
|
2005 | function getFunctionComponentName(Component) {
|
2006 | var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
2007 | return Component.displayName || Component.name || getFunctionName(Component) || fallback;
|
2008 | }
|
2009 |
|
2010 | function getWrappedName(outerType, innerType, wrapperName) {
|
2011 | var functionName = getFunctionComponentName(innerType);
|
2012 | return outerType.displayName || (functionName !== '' ? "".concat(wrapperName, "(").concat(functionName, ")") : wrapperName);
|
2013 | }
|
2014 | |
2015 |
|
2016 |
|
2017 |
|
2018 |
|
2019 |
|
2020 |
|
2021 |
|
2022 |
|
2023 |
|
2024 | function getDisplayName(Component) {
|
2025 | if (Component == null) {
|
2026 | return undefined;
|
2027 | }
|
2028 |
|
2029 | if (typeof Component === 'string') {
|
2030 | return Component;
|
2031 | }
|
2032 |
|
2033 | if (typeof Component === 'function') {
|
2034 | return getFunctionComponentName(Component, 'Component');
|
2035 | }
|
2036 |
|
2037 | if (_typeof(Component) === 'object') {
|
2038 | switch (Component.$$typeof) {
|
2039 | case reactIs_1:
|
2040 | return getWrappedName(Component, Component.render, 'ForwardRef');
|
2041 |
|
2042 | default:
|
2043 | return undefined;
|
2044 | }
|
2045 | }
|
2046 |
|
2047 | return undefined;
|
2048 | }
|
2049 |
|
2050 | var refType = propTypes.oneOfType([propTypes.func, propTypes.object]);
|
2051 |
|
2052 |
|
2053 |
|
2054 | var keys = ['xs', 'sm', 'md', 'lg', 'xl'];
|
2055 |
|
2056 | function createBreakpoints(breakpoints) {
|
2057 | var _breakpoints$values = breakpoints.values,
|
2058 | values = _breakpoints$values === void 0 ? {
|
2059 | xs: 0,
|
2060 | sm: 600,
|
2061 | md: 960,
|
2062 | lg: 1280,
|
2063 | xl: 1920
|
2064 | } : _breakpoints$values,
|
2065 | _breakpoints$unit = breakpoints.unit,
|
2066 | unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit,
|
2067 | _breakpoints$step = breakpoints.step,
|
2068 | step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
|
2069 | other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);
|
2070 |
|
2071 | function up(key) {
|
2072 | var value = typeof values[key] === 'number' ? values[key] : key;
|
2073 | return "@media (min-width:".concat(value).concat(unit, ")");
|
2074 | }
|
2075 |
|
2076 | function down(key) {
|
2077 | var endIndex = keys.indexOf(key) + 1;
|
2078 | var upperbound = values[keys[endIndex]];
|
2079 |
|
2080 | if (endIndex === keys.length) {
|
2081 |
|
2082 | return up('xs');
|
2083 | }
|
2084 |
|
2085 | var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
|
2086 | return "@media (max-width:".concat(value - step / 100).concat(unit, ")");
|
2087 | }
|
2088 |
|
2089 | function between(start, end) {
|
2090 | var endIndex = keys.indexOf(end) + 1;
|
2091 |
|
2092 | if (endIndex === keys.length) {
|
2093 | return up(start);
|
2094 | }
|
2095 |
|
2096 | return "@media (min-width:".concat(values[start]).concat(unit, ") and ") + "(max-width:".concat(values[keys[endIndex]] - step / 100).concat(unit, ")");
|
2097 | }
|
2098 |
|
2099 | function only(key) {
|
2100 | return between(key, key);
|
2101 | }
|
2102 |
|
2103 | function width(key) {
|
2104 | return values[key];
|
2105 | }
|
2106 |
|
2107 | return _extends({
|
2108 | keys: keys,
|
2109 | values: values,
|
2110 | up: up,
|
2111 | down: down,
|
2112 | between: between,
|
2113 | only: only,
|
2114 | width: width
|
2115 | }, other);
|
2116 | }
|
2117 |
|
2118 | function createMixins(breakpoints, spacing, mixins) {
|
2119 | var _toolbar;
|
2120 |
|
2121 | return _extends({
|
2122 | gutters: function gutters() {
|
2123 | var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
2124 |
|
2125 |
|
2126 |
|
2127 |
|
2128 |
|
2129 |
|
2130 |
|
2131 |
|
2132 |
|
2133 |
|
2134 |
|
2135 |
|
2136 |
|
2137 |
|
2138 |
|
2139 |
|
2140 | return _extends({
|
2141 | paddingLeft: spacing(2),
|
2142 | paddingRight: spacing(2)
|
2143 | }, styles, _defineProperty({}, breakpoints.up('sm'), _extends({
|
2144 | paddingLeft: spacing(3),
|
2145 | paddingRight: spacing(3)
|
2146 | }, styles[breakpoints.up('sm')])));
|
2147 | },
|
2148 | toolbar: (_toolbar = {
|
2149 | minHeight: 56
|
2150 | }, _defineProperty(_toolbar, "".concat(breakpoints.up('xs'), " and (orientation: landscape)"), {
|
2151 | minHeight: 48
|
2152 | }), _defineProperty(_toolbar, breakpoints.up('sm'), {
|
2153 | minHeight: 64
|
2154 | }), _toolbar)
|
2155 | }, mixins);
|
2156 | }
|
2157 |
|
2158 | var light = {
|
2159 |
|
2160 | text: {
|
2161 |
|
2162 | primary: 'rgba(0, 0, 0, 0.87)',
|
2163 |
|
2164 | secondary: 'rgba(0, 0, 0, 0.54)',
|
2165 |
|
2166 | disabled: 'rgba(0, 0, 0, 0.38)',
|
2167 |
|
2168 | hint: 'rgba(0, 0, 0, 0.38)'
|
2169 | },
|
2170 |
|
2171 | divider: 'rgba(0, 0, 0, 0.12)',
|
2172 |
|
2173 |
|
2174 | background: {
|
2175 | paper: common.white,
|
2176 | default: grey[50]
|
2177 | },
|
2178 |
|
2179 | action: {
|
2180 |
|
2181 | active: 'rgba(0, 0, 0, 0.54)',
|
2182 |
|
2183 | hover: 'rgba(0, 0, 0, 0.08)',
|
2184 | hoverOpacity: 0.08,
|
2185 |
|
2186 | selected: 'rgba(0, 0, 0, 0.14)',
|
2187 |
|
2188 | disabled: 'rgba(0, 0, 0, 0.26)',
|
2189 |
|
2190 | disabledBackground: 'rgba(0, 0, 0, 0.12)'
|
2191 | }
|
2192 | };
|
2193 | var dark = {
|
2194 | text: {
|
2195 | primary: common.white,
|
2196 | secondary: 'rgba(255, 255, 255, 0.7)',
|
2197 | disabled: 'rgba(255, 255, 255, 0.5)',
|
2198 | hint: 'rgba(255, 255, 255, 0.5)',
|
2199 | icon: 'rgba(255, 255, 255, 0.5)'
|
2200 | },
|
2201 | divider: 'rgba(255, 255, 255, 0.12)',
|
2202 | background: {
|
2203 | paper: grey[800],
|
2204 | default: '#303030'
|
2205 | },
|
2206 | action: {
|
2207 | active: common.white,
|
2208 | hover: 'rgba(255, 255, 255, 0.1)',
|
2209 | hoverOpacity: 0.1,
|
2210 | selected: 'rgba(255, 255, 255, 0.2)',
|
2211 | disabled: 'rgba(255, 255, 255, 0.3)',
|
2212 | disabledBackground: 'rgba(255, 255, 255, 0.12)'
|
2213 | }
|
2214 | };
|
2215 |
|
2216 | function addLightOrDark(intent, direction, shade, tonalOffset) {
|
2217 | if (!intent[direction]) {
|
2218 | if (intent.hasOwnProperty(shade)) {
|
2219 | intent[direction] = intent[shade];
|
2220 | } else if (direction === 'light') {
|
2221 | intent.light = lighten(intent.main, tonalOffset);
|
2222 | } else if (direction === 'dark') {
|
2223 | intent.dark = darken(intent.main, tonalOffset * 1.5);
|
2224 | }
|
2225 | }
|
2226 | }
|
2227 |
|
2228 | function createPalette(palette) {
|
2229 | var _palette$primary = palette.primary,
|
2230 | primary = _palette$primary === void 0 ? {
|
2231 | light: indigo[300],
|
2232 | main: indigo[500],
|
2233 | dark: indigo[700]
|
2234 | } : _palette$primary,
|
2235 | _palette$secondary = palette.secondary,
|
2236 | secondary = _palette$secondary === void 0 ? {
|
2237 | light: pink.A200,
|
2238 | main: pink.A400,
|
2239 | dark: pink.A700
|
2240 | } : _palette$secondary,
|
2241 | _palette$error = palette.error,
|
2242 | error = _palette$error === void 0 ? {
|
2243 | light: red[300],
|
2244 | main: red[500],
|
2245 | dark: red[700]
|
2246 | } : _palette$error,
|
2247 | _palette$type = palette.type,
|
2248 | type = _palette$type === void 0 ? 'light' : _palette$type,
|
2249 | _palette$contrastThre = palette.contrastThreshold,
|
2250 | contrastThreshold = _palette$contrastThre === void 0 ? 3 : _palette$contrastThre,
|
2251 | _palette$tonalOffset = palette.tonalOffset,
|
2252 | tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
|
2253 | other = _objectWithoutProperties(palette, ["primary", "secondary", "error", "type", "contrastThreshold", "tonalOffset"]);
|
2254 |
|
2255 |
|
2256 |
|
2257 |
|
2258 | function getContrastText(background) {
|
2259 | if (!background) {
|
2260 | throw new TypeError("Material-UI: missing background argument in getContrastText(".concat(background, ")."));
|
2261 | }
|
2262 |
|
2263 | var contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
|
2264 |
|
2265 | {
|
2266 | var contrast = getContrastRatio(background, contrastText);
|
2267 |
|
2268 | if (contrast < 3) {
|
2269 | console.error(["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
|
2270 | }
|
2271 | }
|
2272 |
|
2273 | return contrastText;
|
2274 | }
|
2275 |
|
2276 | function augmentColor(color) {
|
2277 | var mainShade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
|
2278 | var lightShade = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
|
2279 | var darkShade = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 700;
|
2280 | color = _extends({}, color);
|
2281 |
|
2282 | if (!color.main && color[mainShade]) {
|
2283 | color.main = color[mainShade];
|
2284 | }
|
2285 |
|
2286 | {
|
2287 | if (!color.main) {
|
2288 | throw new Error(['Material-UI: the color provided to augmentColor(color) is invalid.', "The color object needs to have a `main` property or a `".concat(mainShade, "` property.")].join('\n'));
|
2289 | }
|
2290 | }
|
2291 |
|
2292 | addLightOrDark(color, 'light', lightShade, tonalOffset);
|
2293 | addLightOrDark(color, 'dark', darkShade, tonalOffset);
|
2294 |
|
2295 | if (!color.contrastText) {
|
2296 | color.contrastText = getContrastText(color.main);
|
2297 | }
|
2298 |
|
2299 | return color;
|
2300 | }
|
2301 |
|
2302 | var types = {
|
2303 | dark: dark,
|
2304 | light: light
|
2305 | };
|
2306 |
|
2307 | {
|
2308 | if (!types[type]) {
|
2309 | console.error("Material-UI: the palette type `".concat(type, "` is not supported."));
|
2310 | }
|
2311 | }
|
2312 |
|
2313 | var paletteOutput = deepmerge(_extends({
|
2314 |
|
2315 | common: common,
|
2316 |
|
2317 | type: type,
|
2318 |
|
2319 | primary: augmentColor(primary),
|
2320 |
|
2321 | secondary: augmentColor(secondary, 'A400', 'A200', 'A700'),
|
2322 |
|
2323 | error: augmentColor(error),
|
2324 |
|
2325 | grey: grey,
|
2326 |
|
2327 |
|
2328 | contrastThreshold: contrastThreshold,
|
2329 |
|
2330 | getContrastText: getContrastText,
|
2331 |
|
2332 | augmentColor: augmentColor,
|
2333 |
|
2334 |
|
2335 |
|
2336 | tonalOffset: tonalOffset
|
2337 | }, types[type]), other);
|
2338 | return paletteOutput;
|
2339 | }
|
2340 |
|
2341 | function round(value) {
|
2342 | return Math.round(value * 1e5) / 1e5;
|
2343 | }
|
2344 |
|
2345 | var caseAllCaps = {
|
2346 | textTransform: 'uppercase'
|
2347 | };
|
2348 | var defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
|
2349 | |
2350 |
|
2351 |
|
2352 |
|
2353 |
|
2354 | function createTypography(palette, typography) {
|
2355 | var _ref = typeof typography === 'function' ? typography(palette) : typography,
|
2356 | _ref$fontFamily = _ref.fontFamily,
|
2357 | fontFamily = _ref$fontFamily === void 0 ? defaultFontFamily : _ref$fontFamily,
|
2358 | _ref$fontSize = _ref.fontSize,
|
2359 | fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
|
2360 | _ref$fontWeightLight = _ref.fontWeightLight,
|
2361 | fontWeightLight = _ref$fontWeightLight === void 0 ? 300 : _ref$fontWeightLight,
|
2362 | _ref$fontWeightRegula = _ref.fontWeightRegular,
|
2363 | fontWeightRegular = _ref$fontWeightRegula === void 0 ? 400 : _ref$fontWeightRegula,
|
2364 | _ref$fontWeightMedium = _ref.fontWeightMedium,
|
2365 | fontWeightMedium = _ref$fontWeightMedium === void 0 ? 500 : _ref$fontWeightMedium,
|
2366 | _ref$fontWeightBold = _ref.fontWeightBold,
|
2367 | fontWeightBold = _ref$fontWeightBold === void 0 ? 700 : _ref$fontWeightBold,
|
2368 | _ref$htmlFontSize = _ref.htmlFontSize,
|
2369 | htmlFontSize = _ref$htmlFontSize === void 0 ? 16 : _ref$htmlFontSize,
|
2370 | allVariants = _ref.allVariants,
|
2371 | pxToRem2 = _ref.pxToRem,
|
2372 | other = _objectWithoutProperties(_ref, ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"]);
|
2373 |
|
2374 | {
|
2375 | if (typeof fontSize !== 'number') {
|
2376 | console.error('Material-UI: `fontSize` is required to be a number.');
|
2377 | }
|
2378 |
|
2379 | if (typeof htmlFontSize !== 'number') {
|
2380 | console.error('Material-UI: `htmlFontSize` is required to be a number.');
|
2381 | }
|
2382 | }
|
2383 |
|
2384 | var coef = fontSize / 14;
|
2385 |
|
2386 | var pxToRem = pxToRem2 || function (size) {
|
2387 | return "".concat(size / htmlFontSize * coef, "rem");
|
2388 | };
|
2389 |
|
2390 | var buildVariant = function buildVariant(fontWeight, size, lineHeight, letterSpacing, casing) {
|
2391 | return _extends({
|
2392 | fontFamily: fontFamily,
|
2393 | fontWeight: fontWeight,
|
2394 | fontSize: pxToRem(size),
|
2395 |
|
2396 | lineHeight: lineHeight
|
2397 | }, fontFamily === defaultFontFamily ? {
|
2398 | letterSpacing: "".concat(round(letterSpacing / size), "em")
|
2399 | } : {}, {}, casing, {}, allVariants);
|
2400 | };
|
2401 |
|
2402 | var variants = {
|
2403 | h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
|
2404 | h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
|
2405 | h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
|
2406 | h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
|
2407 | h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
|
2408 | h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
|
2409 | subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
|
2410 | subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
|
2411 | body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
|
2412 | body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
|
2413 | button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
|
2414 | caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
|
2415 | overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
|
2416 | };
|
2417 | return deepmerge(_extends({
|
2418 | htmlFontSize: htmlFontSize,
|
2419 | pxToRem: pxToRem,
|
2420 | round: round,
|
2421 |
|
2422 | fontFamily: fontFamily,
|
2423 | fontSize: fontSize,
|
2424 | fontWeightLight: fontWeightLight,
|
2425 | fontWeightRegular: fontWeightRegular,
|
2426 | fontWeightMedium: fontWeightMedium,
|
2427 | fontWeightBold: fontWeightBold
|
2428 | }, variants), other, {
|
2429 | clone: false
|
2430 |
|
2431 | });
|
2432 | }
|
2433 |
|
2434 | var shadowKeyUmbraOpacity = 0.2;
|
2435 | var shadowKeyPenumbraOpacity = 0.14;
|
2436 | var shadowAmbientShadowOpacity = 0.12;
|
2437 |
|
2438 | function createShadow() {
|
2439 | return ["".concat(arguments.length <= 0 ? undefined : arguments[0], "px ").concat(arguments.length <= 1 ? undefined : arguments[1], "px ").concat(arguments.length <= 2 ? undefined : arguments[2], "px ").concat(arguments.length <= 3 ? undefined : arguments[3], "px rgba(0,0,0,").concat(shadowKeyUmbraOpacity, ")"), "".concat(arguments.length <= 4 ? undefined : arguments[4], "px ").concat(arguments.length <= 5 ? undefined : arguments[5], "px ").concat(arguments.length <= 6 ? undefined : arguments[6], "px ").concat(arguments.length <= 7 ? undefined : arguments[7], "px rgba(0,0,0,").concat(shadowKeyPenumbraOpacity, ")"), "".concat(arguments.length <= 8 ? undefined : arguments[8], "px ").concat(arguments.length <= 9 ? undefined : arguments[9], "px ").concat(arguments.length <= 10 ? undefined : arguments[10], "px ").concat(arguments.length <= 11 ? undefined : arguments[11], "px rgba(0,0,0,").concat(shadowAmbientShadowOpacity, ")")].join(',');
|
2440 | }
|
2441 |
|
2442 |
|
2443 | var shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
|
2444 |
|
2445 | var shape = {
|
2446 | borderRadius: 4
|
2447 | };
|
2448 |
|
2449 | var warnOnce;
|
2450 | function createSpacing() {
|
2451 | var spacingInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8;
|
2452 |
|
2453 |
|
2454 | if (spacingInput.mui) {
|
2455 | return spacingInput;
|
2456 | }
|
2457 |
|
2458 |
|
2459 |
|
2460 | var transform;
|
2461 |
|
2462 | if (typeof spacingInput === 'function') {
|
2463 | transform = spacingInput;
|
2464 | } else {
|
2465 | {
|
2466 | if (typeof spacingInput !== 'number') {
|
2467 | console.error(["Material-UI: the `theme.spacing` value (".concat(spacingInput, ") is invalid."), 'It should be a number or a function.'].join('\n'));
|
2468 | }
|
2469 | }
|
2470 |
|
2471 | transform = function transform(factor) {
|
2472 | {
|
2473 | if (typeof factor !== 'number') {
|
2474 | console.error("Expected spacing argument to be a number, got ".concat(factor));
|
2475 | }
|
2476 | }
|
2477 |
|
2478 | return spacingInput * factor;
|
2479 | };
|
2480 | }
|
2481 |
|
2482 | var spacing = function spacing() {
|
2483 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
2484 | args[_key] = arguments[_key];
|
2485 | }
|
2486 |
|
2487 | {
|
2488 | if (!(args.length <= 4)) {
|
2489 | console.error("Material-UI: Too many arguments provided, expected between 0 and 4, got ".concat(args.length));
|
2490 | }
|
2491 | }
|
2492 |
|
2493 | if (args.length === 0) {
|
2494 | return transform(1);
|
2495 | }
|
2496 |
|
2497 | if (args.length === 1) {
|
2498 | return transform(args[0]);
|
2499 | }
|
2500 |
|
2501 | return args.map(function (factor) {
|
2502 | var output = transform(factor);
|
2503 | return typeof output === 'number' ? "".concat(output, "px") : output;
|
2504 | }).join(' ');
|
2505 | };
|
2506 |
|
2507 |
|
2508 | Object.defineProperty(spacing, 'unit', {
|
2509 | get: function get() {
|
2510 | {
|
2511 | if (!warnOnce || "development" === 'test') {
|
2512 | console.error(['Material-UI: theme.spacing.unit usage has been deprecated.', 'It will be removed in v5.', 'You can replace `theme.spacing.unit * y` with `theme.spacing(y)`.', '', 'You can use the `https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api` migration helper to make the process smoother.'].join('\n'));
|
2513 | }
|
2514 |
|
2515 | warnOnce = true;
|
2516 | }
|
2517 |
|
2518 | return spacingInput;
|
2519 | }
|
2520 | });
|
2521 | spacing.mui = true;
|
2522 | return spacing;
|
2523 | }
|
2524 |
|
2525 |
|
2526 |
|
2527 | var easing = {
|
2528 |
|
2529 | easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
2530 |
|
2531 |
|
2532 | easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
|
2533 |
|
2534 | easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
2535 |
|
2536 | sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
|
2537 | };
|
2538 |
|
2539 |
|
2540 | var duration = {
|
2541 | shortest: 150,
|
2542 | shorter: 200,
|
2543 | short: 250,
|
2544 |
|
2545 | standard: 300,
|
2546 |
|
2547 | complex: 375,
|
2548 |
|
2549 | enteringScreen: 225,
|
2550 |
|
2551 | leavingScreen: 195
|
2552 | };
|
2553 | var formatMs = function formatMs(milliseconds) {
|
2554 | return "".concat(Math.round(milliseconds), "ms");
|
2555 | };
|
2556 | var isString = function isString(value) {
|
2557 | return typeof value === 'string';
|
2558 | };
|
2559 | var isNumber = function isNumber(value) {
|
2560 | return !isNaN(parseFloat(value));
|
2561 | };
|
2562 | |
2563 |
|
2564 |
|
2565 |
|
2566 |
|
2567 |
|
2568 |
|
2569 |
|
2570 |
|
2571 | var transitions = {
|
2572 | easing: easing,
|
2573 | duration: duration,
|
2574 | create: function create() {
|
2575 | var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['all'];
|
2576 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
2577 |
|
2578 | var _options$duration = options.duration,
|
2579 | durationOption = _options$duration === void 0 ? duration.standard : _options$duration,
|
2580 | _options$easing = options.easing,
|
2581 | easingOption = _options$easing === void 0 ? easing.easeInOut : _options$easing,
|
2582 | _options$delay = options.delay,
|
2583 | delay = _options$delay === void 0 ? 0 : _options$delay,
|
2584 | other = _objectWithoutProperties(options, ["duration", "easing", "delay"]);
|
2585 |
|
2586 | {
|
2587 | if (!isString(props) && !Array.isArray(props)) {
|
2588 | console.error('Material-UI: argument "props" must be a string or Array.');
|
2589 | }
|
2590 |
|
2591 | if (!isNumber(durationOption) && !isString(durationOption)) {
|
2592 | console.error("Material-UI: argument \"duration\" must be a number or a string but found ".concat(durationOption, "."));
|
2593 | }
|
2594 |
|
2595 | if (!isString(easingOption)) {
|
2596 | console.error('Material-UI: argument "easing" must be a string.');
|
2597 | }
|
2598 |
|
2599 | if (!isNumber(delay) && !isString(delay)) {
|
2600 | console.error('Material-UI: argument "delay" must be a number or a string.');
|
2601 | }
|
2602 |
|
2603 | if (Object.keys(other).length !== 0) {
|
2604 | console.error("Material-UI: unrecognized argument(s) [".concat(Object.keys(other).join(','), "]"));
|
2605 | }
|
2606 | }
|
2607 |
|
2608 | return (Array.isArray(props) ? props : [props]).map(function (animatedProp) {
|
2609 | return "".concat(animatedProp, " ").concat(typeof durationOption === 'string' ? durationOption : formatMs(durationOption), " ").concat(easingOption, " ").concat(typeof delay === 'string' ? delay : formatMs(delay));
|
2610 | }).join(',');
|
2611 | },
|
2612 | getAutoHeightDuration: function getAutoHeightDuration(height) {
|
2613 | if (!height) {
|
2614 | return 0;
|
2615 | }
|
2616 |
|
2617 | var constant = height / 36;
|
2618 |
|
2619 | return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10);
|
2620 | }
|
2621 | };
|
2622 |
|
2623 |
|
2624 |
|
2625 | var zIndex = {
|
2626 | mobileStepper: 1000,
|
2627 | speedDial: 1050,
|
2628 | appBar: 1100,
|
2629 | drawer: 1200,
|
2630 | modal: 1300,
|
2631 | snackbar: 1400,
|
2632 | tooltip: 1500
|
2633 | };
|
2634 |
|
2635 | function createMuiTheme() {
|
2636 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
2637 |
|
2638 | var _options$breakpoints = options.breakpoints,
|
2639 | breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
|
2640 | _options$mixins = options.mixins,
|
2641 | mixinsInput = _options$mixins === void 0 ? {} : _options$mixins,
|
2642 | _options$palette = options.palette,
|
2643 | paletteInput = _options$palette === void 0 ? {} : _options$palette,
|
2644 | spacingInput = options.spacing,
|
2645 | _options$typography = options.typography,
|
2646 | typographyInput = _options$typography === void 0 ? {} : _options$typography,
|
2647 | other = _objectWithoutProperties(options, ["breakpoints", "mixins", "palette", "spacing", "typography"]);
|
2648 |
|
2649 | var palette = createPalette(paletteInput);
|
2650 | var breakpoints = createBreakpoints(breakpointsInput);
|
2651 | var spacing = createSpacing(spacingInput);
|
2652 | var muiTheme = deepmerge({
|
2653 | breakpoints: breakpoints,
|
2654 | direction: 'ltr',
|
2655 | mixins: createMixins(breakpoints, spacing, mixinsInput),
|
2656 | overrides: {},
|
2657 |
|
2658 | palette: palette,
|
2659 | props: {},
|
2660 |
|
2661 | shadows: shadows,
|
2662 | typography: createTypography(palette, typographyInput),
|
2663 | spacing: spacing,
|
2664 | shape: shape,
|
2665 | transitions: transitions,
|
2666 | zIndex: zIndex
|
2667 | }, other);
|
2668 |
|
2669 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
2670 | args[_key - 1] = arguments[_key];
|
2671 | }
|
2672 |
|
2673 | muiTheme = args.reduce(function (acc, argument) {
|
2674 | return deepmerge(acc, argument);
|
2675 | }, muiTheme);
|
2676 |
|
2677 | {
|
2678 | var pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected'];
|
2679 |
|
2680 | var traverse = function traverse(node, parentKey) {
|
2681 | var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
|
2682 | var key;
|
2683 |
|
2684 | for (key in node) {
|
2685 | var child = node[key];
|
2686 |
|
2687 | if (depth === 1) {
|
2688 | if (key.indexOf('Mui') === 0 && child) {
|
2689 | traverse(child, key, depth + 1);
|
2690 | }
|
2691 | } else if (pseudoClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
|
2692 | {
|
2693 | console.error(["Material-UI: the `".concat(parentKey, "` component increases ") + "the CSS specificity of the `".concat(key, "` internal state."), 'You can not override it like this: ', JSON.stringify(node, null, 2), '', 'Instead, you need to use the $ruleName syntax:', JSON.stringify({
|
2694 | root: _defineProperty({}, "&$".concat(key), child)
|
2695 | }, null, 2), '', 'https://material-ui.com/r/pseudo-classes-guide'].join('\n'));
|
2696 | }
|
2697 |
|
2698 |
|
2699 | node[key] = {};
|
2700 | }
|
2701 | }
|
2702 | };
|
2703 |
|
2704 | traverse(muiTheme.overrides);
|
2705 | }
|
2706 |
|
2707 | return muiTheme;
|
2708 | }
|
2709 |
|
2710 | var hasSymbol = typeof Symbol === 'function' && Symbol.for;
|
2711 | var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
|
2712 |
|
2713 | |
2714 |
|
2715 |
|
2716 |
|
2717 |
|
2718 |
|
2719 |
|
2720 |
|
2721 |
|
2722 |
|
2723 | var pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected'];
|
2724 |
|
2725 |
|
2726 |
|
2727 |
|
2728 |
|
2729 |
|
2730 | function createGenerateClassName() {
|
2731 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
2732 | var _options$disableGloba = options.disableGlobal,
|
2733 | disableGlobal = _options$disableGloba === void 0 ? false : _options$disableGloba,
|
2734 | _options$productionPr = options.productionPrefix,
|
2735 | _options$seed = options.seed,
|
2736 | seed = _options$seed === void 0 ? '' : _options$seed;
|
2737 | var seedPrefix = seed === '' ? '' : "".concat(seed, "-");
|
2738 | var ruleCounter = 0;
|
2739 | return function (rule, styleSheet) {
|
2740 | ruleCounter += 1;
|
2741 |
|
2742 | {
|
2743 | if (ruleCounter >= 1e10) {
|
2744 | console.warn(['Material-UI: you might have a memory leak.', 'The ruleCounter is not supposed to grow that much.'].join(''));
|
2745 | }
|
2746 | }
|
2747 |
|
2748 | var name = styleSheet.options.name;
|
2749 |
|
2750 | if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
|
2751 |
|
2752 | if (pseudoClasses.indexOf(rule.key) !== -1) {
|
2753 | return "Mui-".concat(rule.key);
|
2754 | }
|
2755 |
|
2756 | var prefix = "".concat(seedPrefix).concat(name, "-").concat(rule.key);
|
2757 |
|
2758 | if (!styleSheet.options.theme[nested] || seed !== '') {
|
2759 | return prefix;
|
2760 | }
|
2761 |
|
2762 | return "".concat(prefix, "-").concat(ruleCounter);
|
2763 | }
|
2764 |
|
2765 | var suffix = "".concat(rule.key, "-").concat(ruleCounter);
|
2766 |
|
2767 | if (styleSheet.options.classNamePrefix) {
|
2768 | return "".concat(seedPrefix).concat(styleSheet.options.classNamePrefix, "-").concat(suffix);
|
2769 | }
|
2770 |
|
2771 | return "".concat(seedPrefix).concat(suffix);
|
2772 | };
|
2773 | }
|
2774 |
|
2775 | function createStyles(styles) {
|
2776 | return styles;
|
2777 | }
|
2778 |
|
2779 |
|
2780 | function getThemeProps(params) {
|
2781 | var theme = params.theme,
|
2782 | name = params.name,
|
2783 | props = params.props;
|
2784 |
|
2785 | if (!theme || !theme.props || !theme.props[name]) {
|
2786 | return props;
|
2787 | }
|
2788 |
|
2789 |
|
2790 |
|
2791 | var defaultProps = theme.props[name];
|
2792 | var propName;
|
2793 |
|
2794 | for (propName in defaultProps) {
|
2795 | if (props[propName] === undefined) {
|
2796 | props[propName] = defaultProps[propName];
|
2797 | }
|
2798 | }
|
2799 |
|
2800 | return props;
|
2801 | }
|
2802 |
|
2803 | var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
2804 |
|
2805 | var isBrowser = (typeof window === "undefined" ? "undefined" : _typeof$1(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$1(document)) === 'object' && document.nodeType === 9;
|
2806 |
|
2807 | function warning(condition, message) {
|
2808 | {
|
2809 | if (condition) {
|
2810 | return;
|
2811 | }
|
2812 |
|
2813 | var text = "Warning: " + message;
|
2814 |
|
2815 | if (typeof console !== 'undefined') {
|
2816 | console.warn(text);
|
2817 | }
|
2818 |
|
2819 | try {
|
2820 | throw Error(text);
|
2821 | } catch (x) {}
|
2822 | }
|
2823 | }
|
2824 |
|
2825 | function _defineProperties(target, props) {
|
2826 | for (var i = 0; i < props.length; i++) {
|
2827 | var descriptor = props[i];
|
2828 | descriptor.enumerable = descriptor.enumerable || false;
|
2829 | descriptor.configurable = true;
|
2830 | if ("value" in descriptor) descriptor.writable = true;
|
2831 | Object.defineProperty(target, descriptor.key, descriptor);
|
2832 | }
|
2833 | }
|
2834 |
|
2835 | function _createClass(Constructor, protoProps, staticProps) {
|
2836 | if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
2837 | if (staticProps) _defineProperties(Constructor, staticProps);
|
2838 | return Constructor;
|
2839 | }
|
2840 |
|
2841 | function _inheritsLoose(subClass, superClass) {
|
2842 | subClass.prototype = Object.create(superClass.prototype);
|
2843 | subClass.prototype.constructor = subClass;
|
2844 | subClass.__proto__ = superClass;
|
2845 | }
|
2846 |
|
2847 | function _assertThisInitialized(self) {
|
2848 | if (self === void 0) {
|
2849 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
2850 | }
|
2851 |
|
2852 | return self;
|
2853 | }
|
2854 |
|
2855 | var plainObjectConstrurctor = {}.constructor;
|
2856 | function cloneStyle(style) {
|
2857 | if (style == null || typeof style !== 'object') return style;
|
2858 | if (Array.isArray(style)) return style.map(cloneStyle);
|
2859 | if (style.constructor !== plainObjectConstrurctor) return style;
|
2860 | var newStyle = {};
|
2861 |
|
2862 | for (var name in style) {
|
2863 | newStyle[name] = cloneStyle(style[name]);
|
2864 | }
|
2865 |
|
2866 | return newStyle;
|
2867 | }
|
2868 |
|
2869 | |
2870 |
|
2871 |
|
2872 |
|
2873 | function createRule(name, decl, options) {
|
2874 | if (name === void 0) {
|
2875 | name = 'unnamed';
|
2876 | }
|
2877 |
|
2878 | var jss = options.jss;
|
2879 | var declCopy = cloneStyle(decl);
|
2880 | var rule = jss.plugins.onCreateRule(name, declCopy, options);
|
2881 | if (rule) return rule;
|
2882 |
|
2883 | if (name[0] === '@') {
|
2884 | warning(false, "[JSS] Unknown rule " + name) ;
|
2885 | }
|
2886 |
|
2887 | return null;
|
2888 | }
|
2889 |
|
2890 | var join = function join(value, by) {
|
2891 | var result = '';
|
2892 |
|
2893 | for (var i = 0; i < value.length; i++) {
|
2894 |
|
2895 | if (value[i] === '!important') break;
|
2896 | if (result) result += by;
|
2897 | result += value[i];
|
2898 | }
|
2899 |
|
2900 | return result;
|
2901 | };
|
2902 | |
2903 |
|
2904 |
|
2905 |
|
2906 |
|
2907 |
|
2908 |
|
2909 |
|
2910 |
|
2911 |
|
2912 | function toCssValue(value, ignoreImportant) {
|
2913 | if (ignoreImportant === void 0) {
|
2914 | ignoreImportant = false;
|
2915 | }
|
2916 |
|
2917 | if (!Array.isArray(value)) return value;
|
2918 | var cssValue = '';
|
2919 |
|
2920 | if (Array.isArray(value[0])) {
|
2921 | for (var i = 0; i < value.length; i++) {
|
2922 | if (value[i] === '!important') break;
|
2923 | if (cssValue) cssValue += ', ';
|
2924 | cssValue += join(value[i], ' ');
|
2925 | }
|
2926 | } else cssValue = join(value, ', ');
|
2927 |
|
2928 |
|
2929 | if (!ignoreImportant && value[value.length - 1] === '!important') {
|
2930 | cssValue += ' !important';
|
2931 | }
|
2932 |
|
2933 | return cssValue;
|
2934 | }
|
2935 |
|
2936 | |
2937 |
|
2938 |
|
2939 |
|
2940 | function indentStr(str, indent) {
|
2941 | var result = '';
|
2942 |
|
2943 | for (var index = 0; index < indent; index++) {
|
2944 | result += ' ';
|
2945 | }
|
2946 |
|
2947 | return result + str;
|
2948 | }
|
2949 | |
2950 |
|
2951 |
|
2952 |
|
2953 |
|
2954 | function toCss(selector, style, options) {
|
2955 | if (options === void 0) {
|
2956 | options = {};
|
2957 | }
|
2958 |
|
2959 | var result = '';
|
2960 | if (!style) return result;
|
2961 | var _options = options,
|
2962 | _options$indent = _options.indent,
|
2963 | indent = _options$indent === void 0 ? 0 : _options$indent;
|
2964 | var fallbacks = style.fallbacks;
|
2965 | if (selector) indent++;
|
2966 |
|
2967 | if (fallbacks) {
|
2968 |
|
2969 | if (Array.isArray(fallbacks)) {
|
2970 | for (var index = 0; index < fallbacks.length; index++) {
|
2971 | var fallback = fallbacks[index];
|
2972 |
|
2973 | for (var prop in fallback) {
|
2974 | var value = fallback[prop];
|
2975 |
|
2976 | if (value != null) {
|
2977 | if (result) result += '\n';
|
2978 | result += "" + indentStr(prop + ": " + toCssValue(value) + ";", indent);
|
2979 | }
|
2980 | }
|
2981 | }
|
2982 | } else {
|
2983 |
|
2984 | for (var _prop in fallbacks) {
|
2985 | var _value = fallbacks[_prop];
|
2986 |
|
2987 | if (_value != null) {
|
2988 | if (result) result += '\n';
|
2989 | result += "" + indentStr(_prop + ": " + toCssValue(_value) + ";", indent);
|
2990 | }
|
2991 | }
|
2992 | }
|
2993 | }
|
2994 |
|
2995 | for (var _prop2 in style) {
|
2996 | var _value2 = style[_prop2];
|
2997 |
|
2998 | if (_value2 != null && _prop2 !== 'fallbacks') {
|
2999 | if (result) result += '\n';
|
3000 | result += "" + indentStr(_prop2 + ": " + toCssValue(_value2) + ";", indent);
|
3001 | }
|
3002 | }
|
3003 |
|
3004 |
|
3005 | if (!result && !options.allowEmpty) return result;
|
3006 |
|
3007 | if (!selector) return result;
|
3008 | indent--;
|
3009 | if (result) result = "\n" + result + "\n";
|
3010 | return indentStr(selector + " {" + result, indent) + indentStr('}', indent);
|
3011 | }
|
3012 |
|
3013 | var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
|
3014 | var nativeEscape = typeof CSS !== 'undefined' && CSS.escape;
|
3015 | var escape = (function (str) {
|
3016 | return nativeEscape ? nativeEscape(str) : str.replace(escapeRegex, '\\$1');
|
3017 | });
|
3018 |
|
3019 | var BaseStyleRule =
|
3020 |
|
3021 | function () {
|
3022 | function BaseStyleRule(key, style, options) {
|
3023 | this.type = 'style';
|
3024 | this.key = void 0;
|
3025 | this.isProcessed = false;
|
3026 | this.style = void 0;
|
3027 | this.renderer = void 0;
|
3028 | this.renderable = void 0;
|
3029 | this.options = void 0;
|
3030 | var sheet = options.sheet,
|
3031 | Renderer = options.Renderer;
|
3032 | this.key = key;
|
3033 | this.options = options;
|
3034 | this.style = style;
|
3035 | if (sheet) this.renderer = sheet.renderer;else if (Renderer) this.renderer = new Renderer();
|
3036 | }
|
3037 | |
3038 |
|
3039 |
|
3040 |
|
3041 |
|
3042 | var _proto = BaseStyleRule.prototype;
|
3043 |
|
3044 | _proto.prop = function prop(name, value, options) {
|
3045 |
|
3046 | if (value === undefined) return this.style[name];
|
3047 |
|
3048 | var force = options ? options.force : false;
|
3049 | if (!force && this.style[name] === value) return this;
|
3050 | var newValue = value;
|
3051 |
|
3052 | if (!options || options.process !== false) {
|
3053 | newValue = this.options.jss.plugins.onChangeValue(value, name, this);
|
3054 | }
|
3055 |
|
3056 | var isEmpty = newValue == null || newValue === false;
|
3057 | var isDefined = name in this.style;
|
3058 |
|
3059 | if (isEmpty && !isDefined && !force) return this;
|
3060 |
|
3061 | var remove = isEmpty && isDefined;
|
3062 | if (remove) delete this.style[name];else this.style[name] = newValue;
|
3063 |
|
3064 | if (this.renderable && this.renderer) {
|
3065 | if (remove) this.renderer.removeProperty(this.renderable, name);else this.renderer.setProperty(this.renderable, name, newValue);
|
3066 | return this;
|
3067 | }
|
3068 |
|
3069 | var sheet = this.options.sheet;
|
3070 |
|
3071 | if (sheet && sheet.attached) {
|
3072 | warning(false, '[JSS] Rule is not linked. Missing sheet option "link: true".') ;
|
3073 | }
|
3074 |
|
3075 | return this;
|
3076 | };
|
3077 |
|
3078 | return BaseStyleRule;
|
3079 | }();
|
3080 | var StyleRule =
|
3081 |
|
3082 | function (_BaseStyleRule) {
|
3083 | _inheritsLoose(StyleRule, _BaseStyleRule);
|
3084 |
|
3085 | function StyleRule(key, style, options) {
|
3086 | var _this;
|
3087 |
|
3088 | _this = _BaseStyleRule.call(this, key, style, options) || this;
|
3089 | _this.selectorText = void 0;
|
3090 | _this.id = void 0;
|
3091 | _this.renderable = void 0;
|
3092 | var selector = options.selector,
|
3093 | scoped = options.scoped,
|
3094 | sheet = options.sheet,
|
3095 | generateId = options.generateId;
|
3096 |
|
3097 | if (selector) {
|
3098 | _this.selectorText = selector;
|
3099 | } else if (scoped !== false) {
|
3100 | _this.id = generateId(_assertThisInitialized(_assertThisInitialized(_this)), sheet);
|
3101 | _this.selectorText = "." + escape(_this.id);
|
3102 | }
|
3103 |
|
3104 | return _this;
|
3105 | }
|
3106 | |
3107 |
|
3108 |
|
3109 |
|
3110 |
|
3111 |
|
3112 |
|
3113 | var _proto2 = StyleRule.prototype;
|
3114 |
|
3115 | |
3116 |
|
3117 |
|
3118 | _proto2.applyTo = function applyTo(renderable) {
|
3119 | var renderer = this.renderer;
|
3120 |
|
3121 | if (renderer) {
|
3122 | var json = this.toJSON();
|
3123 |
|
3124 | for (var prop in json) {
|
3125 | renderer.setProperty(renderable, prop, json[prop]);
|
3126 | }
|
3127 | }
|
3128 |
|
3129 | return this;
|
3130 | }
|
3131 | |
3132 |
|
3133 |
|
3134 |
|
3135 |
|
3136 | ;
|
3137 |
|
3138 | _proto2.toJSON = function toJSON() {
|
3139 | var json = {};
|
3140 |
|
3141 | for (var prop in this.style) {
|
3142 | var value = this.style[prop];
|
3143 | if (typeof value !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = toCssValue(value);
|
3144 | }
|
3145 |
|
3146 | return json;
|
3147 | }
|
3148 | |
3149 |
|
3150 |
|
3151 | ;
|
3152 |
|
3153 | _proto2.toString = function toString(options) {
|
3154 | var sheet = this.options.sheet;
|
3155 | var link = sheet ? sheet.options.link : false;
|
3156 | var opts = link ? _extends({}, options, {
|
3157 | allowEmpty: true
|
3158 | }) : options;
|
3159 | return toCss(this.selectorText, this.style, opts);
|
3160 | };
|
3161 |
|
3162 | _createClass(StyleRule, [{
|
3163 | key: "selector",
|
3164 | set: function set(selector) {
|
3165 | if (selector === this.selectorText) return;
|
3166 | this.selectorText = selector;
|
3167 | var renderer = this.renderer,
|
3168 | renderable = this.renderable;
|
3169 | if (!renderable || !renderer) return;
|
3170 | var hasChanged = renderer.setSelector(renderable, selector);
|
3171 |
|
3172 | if (!hasChanged) {
|
3173 | renderer.replaceRule(renderable, this);
|
3174 | }
|
3175 | }
|
3176 | |
3177 |
|
3178 |
|
3179 | ,
|
3180 | get: function get() {
|
3181 | return this.selectorText;
|
3182 | }
|
3183 | }]);
|
3184 |
|
3185 | return StyleRule;
|
3186 | }(BaseStyleRule);
|
3187 | var pluginStyleRule = {
|
3188 | onCreateRule: function onCreateRule(name, style, options) {
|
3189 | if (name[0] === '@' || options.parent && options.parent.type === 'keyframes') {
|
3190 | return null;
|
3191 | }
|
3192 |
|
3193 | return new StyleRule(name, style, options);
|
3194 | }
|
3195 | };
|
3196 |
|
3197 | var defaultToStringOptions = {
|
3198 | indent: 1,
|
3199 | children: true
|
3200 | };
|
3201 | var atRegExp = /@([\w-]+)/;
|
3202 | |
3203 |
|
3204 |
|
3205 |
|
3206 | var ConditionalRule =
|
3207 |
|
3208 | function () {
|
3209 | function ConditionalRule(key, styles, options) {
|
3210 | this.type = 'conditional';
|
3211 | this.at = void 0;
|
3212 | this.key = void 0;
|
3213 | this.rules = void 0;
|
3214 | this.options = void 0;
|
3215 | this.isProcessed = false;
|
3216 | this.renderable = void 0;
|
3217 | this.key = key;
|
3218 | var atMatch = key.match(atRegExp);
|
3219 | this.at = atMatch ? atMatch[1] : 'unknown';
|
3220 | this.options = options;
|
3221 | this.rules = new RuleList(_extends({}, options, {
|
3222 | parent: this
|
3223 | }));
|
3224 |
|
3225 | for (var name in styles) {
|
3226 | this.rules.add(name, styles[name]);
|
3227 | }
|
3228 |
|
3229 | this.rules.process();
|
3230 | }
|
3231 | |
3232 |
|
3233 |
|
3234 |
|
3235 |
|
3236 | var _proto = ConditionalRule.prototype;
|
3237 |
|
3238 | _proto.getRule = function getRule(name) {
|
3239 | return this.rules.get(name);
|
3240 | }
|
3241 | |
3242 |
|
3243 |
|
3244 | ;
|
3245 |
|
3246 | _proto.indexOf = function indexOf(rule) {
|
3247 | return this.rules.indexOf(rule);
|
3248 | }
|
3249 | |
3250 |
|
3251 |
|
3252 | ;
|
3253 |
|
3254 | _proto.addRule = function addRule(name, style, options) {
|
3255 | var rule = this.rules.add(name, style, options);
|
3256 | if (!rule) return null;
|
3257 | this.options.jss.plugins.onProcessRule(rule);
|
3258 | return rule;
|
3259 | }
|
3260 | |
3261 |
|
3262 |
|
3263 | ;
|
3264 |
|
3265 | _proto.toString = function toString(options) {
|
3266 | if (options === void 0) {
|
3267 | options = defaultToStringOptions;
|
3268 | }
|
3269 |
|
3270 | if (options.indent == null) options.indent = defaultToStringOptions.indent;
|
3271 | if (options.children == null) options.children = defaultToStringOptions.children;
|
3272 |
|
3273 | if (options.children === false) {
|
3274 | return this.key + " {}";
|
3275 | }
|
3276 |
|
3277 | var children = this.rules.toString(options);
|
3278 | return children ? this.key + " {\n" + children + "\n}" : '';
|
3279 | };
|
3280 |
|
3281 | return ConditionalRule;
|
3282 | }();
|
3283 | var keyRegExp = /@media|@supports\s+/;
|
3284 | var pluginConditionalRule = {
|
3285 | onCreateRule: function onCreateRule(key, styles, options) {
|
3286 | return keyRegExp.test(key) ? new ConditionalRule(key, styles, options) : null;
|
3287 | }
|
3288 | };
|
3289 |
|
3290 | var defaultToStringOptions$1 = {
|
3291 | indent: 1,
|
3292 | children: true
|
3293 | };
|
3294 | var nameRegExp = /@keyframes\s+([\w-]+)/;
|
3295 | |
3296 |
|
3297 |
|
3298 |
|
3299 | var KeyframesRule =
|
3300 |
|
3301 | function () {
|
3302 | function KeyframesRule(key, frames, options) {
|
3303 | this.type = 'keyframes';
|
3304 | this.at = '@keyframes';
|
3305 | this.key = void 0;
|
3306 | this.name = void 0;
|
3307 | this.id = void 0;
|
3308 | this.rules = void 0;
|
3309 | this.options = void 0;
|
3310 | this.isProcessed = false;
|
3311 | this.renderable = void 0;
|
3312 | var nameMatch = key.match(nameRegExp);
|
3313 |
|
3314 | if (nameMatch && nameMatch[1]) {
|
3315 | this.name = nameMatch[1];
|
3316 | } else {
|
3317 | this.name = 'noname';
|
3318 | warning(false, "[JSS] Bad keyframes name " + key) ;
|
3319 | }
|
3320 |
|
3321 | this.key = this.type + "-" + this.name;
|
3322 | this.options = options;
|
3323 | var scoped = options.scoped,
|
3324 | sheet = options.sheet,
|
3325 | generateId = options.generateId;
|
3326 | this.id = scoped === false ? this.name : escape(generateId(this, sheet));
|
3327 | this.rules = new RuleList(_extends({}, options, {
|
3328 | parent: this
|
3329 | }));
|
3330 |
|
3331 | for (var name in frames) {
|
3332 | this.rules.add(name, frames[name], _extends({}, options, {
|
3333 | parent: this
|
3334 | }));
|
3335 | }
|
3336 |
|
3337 | this.rules.process();
|
3338 | }
|
3339 | |
3340 |
|
3341 |
|
3342 |
|
3343 |
|
3344 | var _proto = KeyframesRule.prototype;
|
3345 |
|
3346 | _proto.toString = function toString(options) {
|
3347 | if (options === void 0) {
|
3348 | options = defaultToStringOptions$1;
|
3349 | }
|
3350 |
|
3351 | if (options.indent == null) options.indent = defaultToStringOptions$1.indent;
|
3352 | if (options.children == null) options.children = defaultToStringOptions$1.children;
|
3353 |
|
3354 | if (options.children === false) {
|
3355 | return this.at + " " + this.id + " {}";
|
3356 | }
|
3357 |
|
3358 | var children = this.rules.toString(options);
|
3359 | if (children) children = "\n" + children + "\n";
|
3360 | return this.at + " " + this.id + " {" + children + "}";
|
3361 | };
|
3362 |
|
3363 | return KeyframesRule;
|
3364 | }();
|
3365 | var keyRegExp$1 = /@keyframes\s+/;
|
3366 | var refRegExp = /\$([\w-]+)/g;
|
3367 |
|
3368 | var findReferencedKeyframe = function findReferencedKeyframe(val, keyframes) {
|
3369 | if (typeof val === 'string') {
|
3370 | return val.replace(refRegExp, function (match, name) {
|
3371 | if (name in keyframes) {
|
3372 | return keyframes[name];
|
3373 | }
|
3374 |
|
3375 | warning(false, "[JSS] Referenced keyframes rule \"" + name + "\" is not defined.") ;
|
3376 | return match;
|
3377 | });
|
3378 | }
|
3379 |
|
3380 | return val;
|
3381 | };
|
3382 | |
3383 |
|
3384 |
|
3385 |
|
3386 |
|
3387 | var replaceRef = function replaceRef(style, prop, keyframes) {
|
3388 | var value = style[prop];
|
3389 | var refKeyframe = findReferencedKeyframe(value, keyframes);
|
3390 |
|
3391 | if (refKeyframe !== value) {
|
3392 | style[prop] = refKeyframe;
|
3393 | }
|
3394 | };
|
3395 |
|
3396 | var plugin = {
|
3397 | onCreateRule: function onCreateRule(key, frames, options) {
|
3398 | return typeof key === 'string' && keyRegExp$1.test(key) ? new KeyframesRule(key, frames, options) : null;
|
3399 | },
|
3400 |
|
3401 | onProcessStyle: function onProcessStyle(style, rule, sheet) {
|
3402 | if (rule.type !== 'style' || !sheet) return style;
|
3403 | if ('animation-name' in style) replaceRef(style, 'animation-name', sheet.keyframes);
|
3404 | if ('animation' in style) replaceRef(style, 'animation', sheet.keyframes);
|
3405 | return style;
|
3406 | },
|
3407 | onChangeValue: function onChangeValue(val, prop, rule) {
|
3408 | var sheet = rule.options.sheet;
|
3409 |
|
3410 | if (!sheet) {
|
3411 | return val;
|
3412 | }
|
3413 |
|
3414 | switch (prop) {
|
3415 | case 'animation':
|
3416 | return findReferencedKeyframe(val, sheet.keyframes);
|
3417 |
|
3418 | case 'animation-name':
|
3419 | return findReferencedKeyframe(val, sheet.keyframes);
|
3420 |
|
3421 | default:
|
3422 | return val;
|
3423 | }
|
3424 | }
|
3425 | };
|
3426 |
|
3427 | var KeyframeRule =
|
3428 |
|
3429 | function (_BaseStyleRule) {
|
3430 | _inheritsLoose(KeyframeRule, _BaseStyleRule);
|
3431 |
|
3432 | function KeyframeRule() {
|
3433 | var _this;
|
3434 |
|
3435 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
3436 | args[_key] = arguments[_key];
|
3437 | }
|
3438 |
|
3439 | _this = _BaseStyleRule.call.apply(_BaseStyleRule, [this].concat(args)) || this;
|
3440 | _this.renderable = void 0;
|
3441 | return _this;
|
3442 | }
|
3443 |
|
3444 | var _proto = KeyframeRule.prototype;
|
3445 |
|
3446 | |
3447 |
|
3448 |
|
3449 | _proto.toString = function toString(options) {
|
3450 | var sheet = this.options.sheet;
|
3451 | var link = sheet ? sheet.options.link : false;
|
3452 | var opts = link ? _extends({}, options, {
|
3453 | allowEmpty: true
|
3454 | }) : options;
|
3455 | return toCss(this.key, this.style, opts);
|
3456 | };
|
3457 |
|
3458 | return KeyframeRule;
|
3459 | }(BaseStyleRule);
|
3460 | var pluginKeyframeRule = {
|
3461 | onCreateRule: function onCreateRule(key, style, options) {
|
3462 | if (options.parent && options.parent.type === 'keyframes') {
|
3463 | return new KeyframeRule(key, style, options);
|
3464 | }
|
3465 |
|
3466 | return null;
|
3467 | }
|
3468 | };
|
3469 |
|
3470 | var FontFaceRule =
|
3471 |
|
3472 | function () {
|
3473 | function FontFaceRule(key, style, options) {
|
3474 | this.type = 'font-face';
|
3475 | this.at = '@font-face';
|
3476 | this.key = void 0;
|
3477 | this.style = void 0;
|
3478 | this.options = void 0;
|
3479 | this.isProcessed = false;
|
3480 | this.renderable = void 0;
|
3481 | this.key = key;
|
3482 | this.style = style;
|
3483 | this.options = options;
|
3484 | }
|
3485 | |
3486 |
|
3487 |
|
3488 |
|
3489 |
|
3490 | var _proto = FontFaceRule.prototype;
|
3491 |
|
3492 | _proto.toString = function toString(options) {
|
3493 | if (Array.isArray(this.style)) {
|
3494 | var str = '';
|
3495 |
|
3496 | for (var index = 0; index < this.style.length; index++) {
|
3497 | str += toCss(this.key, this.style[index]);
|
3498 | if (this.style[index + 1]) str += '\n';
|
3499 | }
|
3500 |
|
3501 | return str;
|
3502 | }
|
3503 |
|
3504 | return toCss(this.key, this.style, options);
|
3505 | };
|
3506 |
|
3507 | return FontFaceRule;
|
3508 | }();
|
3509 | var pluginFontFaceRule = {
|
3510 | onCreateRule: function onCreateRule(key, style, options) {
|
3511 | return key === '@font-face' ? new FontFaceRule(key, style, options) : null;
|
3512 | }
|
3513 | };
|
3514 |
|
3515 | var ViewportRule =
|
3516 |
|
3517 | function () {
|
3518 | function ViewportRule(key, style, options) {
|
3519 | this.type = 'viewport';
|
3520 | this.at = '@viewport';
|
3521 | this.key = void 0;
|
3522 | this.style = void 0;
|
3523 | this.options = void 0;
|
3524 | this.isProcessed = false;
|
3525 | this.renderable = void 0;
|
3526 | this.key = key;
|
3527 | this.style = style;
|
3528 | this.options = options;
|
3529 | }
|
3530 | |
3531 |
|
3532 |
|
3533 |
|
3534 |
|
3535 | var _proto = ViewportRule.prototype;
|
3536 |
|
3537 | _proto.toString = function toString(options) {
|
3538 | return toCss(this.key, this.style, options);
|
3539 | };
|
3540 |
|
3541 | return ViewportRule;
|
3542 | }();
|
3543 | var pluginViewportRule = {
|
3544 | onCreateRule: function onCreateRule(key, style, options) {
|
3545 | return key === '@viewport' || key === '@-ms-viewport' ? new ViewportRule(key, style, options) : null;
|
3546 | }
|
3547 | };
|
3548 |
|
3549 | var SimpleRule =
|
3550 |
|
3551 | function () {
|
3552 | function SimpleRule(key, value, options) {
|
3553 | this.type = 'simple';
|
3554 | this.key = void 0;
|
3555 | this.value = void 0;
|
3556 | this.options = void 0;
|
3557 | this.isProcessed = false;
|
3558 | this.renderable = void 0;
|
3559 | this.key = key;
|
3560 | this.value = value;
|
3561 | this.options = options;
|
3562 | }
|
3563 | |
3564 |
|
3565 |
|
3566 |
|
3567 |
|
3568 |
|
3569 | var _proto = SimpleRule.prototype;
|
3570 |
|
3571 | _proto.toString = function toString(options) {
|
3572 | if (Array.isArray(this.value)) {
|
3573 | var str = '';
|
3574 |
|
3575 | for (var index = 0; index < this.value.length; index++) {
|
3576 | str += this.key + " " + this.value[index] + ";";
|
3577 | if (this.value[index + 1]) str += '\n';
|
3578 | }
|
3579 |
|
3580 | return str;
|
3581 | }
|
3582 |
|
3583 | return this.key + " " + this.value + ";";
|
3584 | };
|
3585 |
|
3586 | return SimpleRule;
|
3587 | }();
|
3588 | var keysMap = {
|
3589 | '@charset': true,
|
3590 | '@import': true,
|
3591 | '@namespace': true
|
3592 | };
|
3593 | var pluginSimpleRule = {
|
3594 | onCreateRule: function onCreateRule(key, value, options) {
|
3595 | return key in keysMap ? new SimpleRule(key, value, options) : null;
|
3596 | }
|
3597 | };
|
3598 |
|
3599 | var plugins = [pluginStyleRule, pluginConditionalRule, plugin, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];
|
3600 |
|
3601 | var defaultUpdateOptions = {
|
3602 | process: true
|
3603 | };
|
3604 | var forceUpdateOptions = {
|
3605 | force: true,
|
3606 | process: true
|
3607 | |
3608 |
|
3609 |
|
3610 |
|
3611 |
|
3612 | };
|
3613 |
|
3614 | var RuleList =
|
3615 |
|
3616 | function () {
|
3617 |
|
3618 |
|
3619 |
|
3620 |
|
3621 | function RuleList(options) {
|
3622 | this.map = {};
|
3623 | this.raw = {};
|
3624 | this.index = [];
|
3625 | this.options = void 0;
|
3626 | this.classes = void 0;
|
3627 | this.keyframes = void 0;
|
3628 | this.options = options;
|
3629 | this.classes = options.classes;
|
3630 | this.keyframes = options.keyframes;
|
3631 | }
|
3632 | |
3633 |
|
3634 |
|
3635 |
|
3636 |
|
3637 |
|
3638 |
|
3639 | var _proto = RuleList.prototype;
|
3640 |
|
3641 | _proto.add = function add(key, decl, ruleOptions) {
|
3642 | var _this$options = this.options,
|
3643 | parent = _this$options.parent,
|
3644 | sheet = _this$options.sheet,
|
3645 | jss = _this$options.jss,
|
3646 | Renderer = _this$options.Renderer,
|
3647 | generateId = _this$options.generateId,
|
3648 | scoped = _this$options.scoped;
|
3649 |
|
3650 | var options = _extends({
|
3651 | classes: this.classes,
|
3652 | parent: parent,
|
3653 | sheet: sheet,
|
3654 | jss: jss,
|
3655 | Renderer: Renderer,
|
3656 | generateId: generateId,
|
3657 | scoped: scoped
|
3658 | }, ruleOptions);
|
3659 |
|
3660 |
|
3661 |
|
3662 | this.raw[key] = decl;
|
3663 |
|
3664 | if (key in this.classes) {
|
3665 |
|
3666 | options.selector = "." + escape(this.classes[key]);
|
3667 | }
|
3668 |
|
3669 | var rule = createRule(key, decl, options);
|
3670 | if (!rule) return null;
|
3671 | this.register(rule);
|
3672 | var index = options.index === undefined ? this.index.length : options.index;
|
3673 | this.index.splice(index, 0, rule);
|
3674 | return rule;
|
3675 | }
|
3676 | |
3677 |
|
3678 |
|
3679 | ;
|
3680 |
|
3681 | _proto.get = function get(name) {
|
3682 | return this.map[name];
|
3683 | }
|
3684 | |
3685 |
|
3686 |
|
3687 | ;
|
3688 |
|
3689 | _proto.remove = function remove(rule) {
|
3690 | this.unregister(rule);
|
3691 | delete this.raw[rule.key];
|
3692 | this.index.splice(this.indexOf(rule), 1);
|
3693 | }
|
3694 | |
3695 |
|
3696 |
|
3697 | ;
|
3698 |
|
3699 | _proto.indexOf = function indexOf(rule) {
|
3700 | return this.index.indexOf(rule);
|
3701 | }
|
3702 | |
3703 |
|
3704 |
|
3705 | ;
|
3706 |
|
3707 | _proto.process = function process() {
|
3708 | var plugins$$1 = this.options.jss.plugins;
|
3709 |
|
3710 |
|
3711 | this.index.slice(0).forEach(plugins$$1.onProcessRule, plugins$$1);
|
3712 | }
|
3713 | |
3714 |
|
3715 |
|
3716 | ;
|
3717 |
|
3718 | _proto.register = function register(rule) {
|
3719 | this.map[rule.key] = rule;
|
3720 |
|
3721 | if (rule instanceof StyleRule) {
|
3722 | this.map[rule.selector] = rule;
|
3723 | if (rule.id) this.classes[rule.key] = rule.id;
|
3724 | } else if (rule instanceof KeyframesRule && this.keyframes) {
|
3725 | this.keyframes[rule.name] = rule.id;
|
3726 | }
|
3727 | }
|
3728 | |
3729 |
|
3730 |
|
3731 | ;
|
3732 |
|
3733 | _proto.unregister = function unregister(rule) {
|
3734 | delete this.map[rule.key];
|
3735 |
|
3736 | if (rule instanceof StyleRule) {
|
3737 | delete this.map[rule.selector];
|
3738 | delete this.classes[rule.key];
|
3739 | } else if (rule instanceof KeyframesRule) {
|
3740 | delete this.keyframes[rule.name];
|
3741 | }
|
3742 | }
|
3743 | |
3744 |
|
3745 |
|
3746 | ;
|
3747 |
|
3748 | _proto.update = function update() {
|
3749 | var name;
|
3750 | var data;
|
3751 | var options;
|
3752 |
|
3753 | if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
|
3754 | name = arguments.length <= 0 ? undefined : arguments[0];
|
3755 |
|
3756 | data = arguments.length <= 1 ? undefined : arguments[1];
|
3757 |
|
3758 | options = arguments.length <= 2 ? undefined : arguments[2];
|
3759 | } else {
|
3760 | data = arguments.length <= 0 ? undefined : arguments[0];
|
3761 |
|
3762 | options = arguments.length <= 1 ? undefined : arguments[1];
|
3763 | name = null;
|
3764 | }
|
3765 |
|
3766 | if (name) {
|
3767 | this.onUpdate(data, this.get(name), options);
|
3768 | } else {
|
3769 | for (var index = 0; index < this.index.length; index++) {
|
3770 | this.onUpdate(data, this.index[index], options);
|
3771 | }
|
3772 | }
|
3773 | }
|
3774 | |
3775 |
|
3776 |
|
3777 | ;
|
3778 |
|
3779 | _proto.onUpdate = function onUpdate(data, rule, options) {
|
3780 | if (options === void 0) {
|
3781 | options = defaultUpdateOptions;
|
3782 | }
|
3783 |
|
3784 | var _this$options2 = this.options,
|
3785 | plugins$$1 = _this$options2.jss.plugins,
|
3786 | sheet = _this$options2.sheet;
|
3787 |
|
3788 | if (rule.rules instanceof RuleList) {
|
3789 | rule.rules.update(data, options);
|
3790 | return;
|
3791 | }
|
3792 |
|
3793 | var styleRule = rule;
|
3794 | var style = styleRule.style;
|
3795 | plugins$$1.onUpdate(data, rule, sheet, options);
|
3796 |
|
3797 | if (options.process && style && style !== styleRule.style) {
|
3798 |
|
3799 | plugins$$1.onProcessStyle(styleRule.style, styleRule, sheet);
|
3800 |
|
3801 | for (var prop in styleRule.style) {
|
3802 | var nextValue = styleRule.style[prop];
|
3803 | var prevValue = style[prop];
|
3804 |
|
3805 |
|
3806 | if (nextValue !== prevValue) {
|
3807 | styleRule.prop(prop, nextValue, forceUpdateOptions);
|
3808 | }
|
3809 | }
|
3810 |
|
3811 |
|
3812 | for (var _prop in style) {
|
3813 | var _nextValue = styleRule.style[_prop];
|
3814 | var _prevValue = style[_prop];
|
3815 |
|
3816 |
|
3817 | if (_nextValue == null && _nextValue !== _prevValue) {
|
3818 | styleRule.prop(_prop, null, forceUpdateOptions);
|
3819 | }
|
3820 | }
|
3821 | }
|
3822 | }
|
3823 | |
3824 |
|
3825 |
|
3826 | ;
|
3827 |
|
3828 | _proto.toString = function toString(options) {
|
3829 | var str = '';
|
3830 | var sheet = this.options.sheet;
|
3831 | var link = sheet ? sheet.options.link : false;
|
3832 |
|
3833 | for (var index = 0; index < this.index.length; index++) {
|
3834 | var rule = this.index[index];
|
3835 | var css = rule.toString(options);
|
3836 |
|
3837 | if (!css && !link) continue;
|
3838 | if (str) str += '\n';
|
3839 | str += css;
|
3840 | }
|
3841 |
|
3842 | return str;
|
3843 | };
|
3844 |
|
3845 | return RuleList;
|
3846 | }();
|
3847 |
|
3848 | var StyleSheet =
|
3849 |
|
3850 | function () {
|
3851 | function StyleSheet(styles, options) {
|
3852 | this.options = void 0;
|
3853 | this.deployed = void 0;
|
3854 | this.attached = void 0;
|
3855 | this.rules = void 0;
|
3856 | this.renderer = void 0;
|
3857 | this.classes = void 0;
|
3858 | this.keyframes = void 0;
|
3859 | this.queue = void 0;
|
3860 | this.attached = false;
|
3861 | this.deployed = false;
|
3862 | this.classes = {};
|
3863 | this.keyframes = {};
|
3864 | this.options = _extends({}, options, {
|
3865 | sheet: this,
|
3866 | parent: this,
|
3867 | classes: this.classes,
|
3868 | keyframes: this.keyframes
|
3869 | });
|
3870 |
|
3871 | if (options.Renderer) {
|
3872 | this.renderer = new options.Renderer(this);
|
3873 | }
|
3874 |
|
3875 | this.rules = new RuleList(this.options);
|
3876 |
|
3877 | for (var name in styles) {
|
3878 | this.rules.add(name, styles[name]);
|
3879 | }
|
3880 |
|
3881 | this.rules.process();
|
3882 | }
|
3883 | |
3884 |
|
3885 |
|
3886 |
|
3887 |
|
3888 | var _proto = StyleSheet.prototype;
|
3889 |
|
3890 | _proto.attach = function attach() {
|
3891 | if (this.attached) return this;
|
3892 | if (this.renderer) this.renderer.attach();
|
3893 | this.attached = true;
|
3894 |
|
3895 | if (!this.deployed) this.deploy();
|
3896 | return this;
|
3897 | }
|
3898 | |
3899 |
|
3900 |
|
3901 | ;
|
3902 |
|
3903 | _proto.detach = function detach() {
|
3904 | if (!this.attached) return this;
|
3905 | if (this.renderer) this.renderer.detach();
|
3906 | this.attached = false;
|
3907 | return this;
|
3908 | }
|
3909 | |
3910 |
|
3911 |
|
3912 |
|
3913 | ;
|
3914 |
|
3915 | _proto.addRule = function addRule(name, decl, options) {
|
3916 | var queue = this.queue;
|
3917 |
|
3918 |
|
3919 |
|
3920 | if (this.attached && !queue) this.queue = [];
|
3921 | var rule = this.rules.add(name, decl, options);
|
3922 | if (!rule) return null;
|
3923 | this.options.jss.plugins.onProcessRule(rule);
|
3924 |
|
3925 | if (this.attached) {
|
3926 | if (!this.deployed) return rule;
|
3927 |
|
3928 |
|
3929 | if (queue) queue.push(rule);else {
|
3930 | this.insertRule(rule);
|
3931 |
|
3932 | if (this.queue) {
|
3933 | this.queue.forEach(this.insertRule, this);
|
3934 | this.queue = undefined;
|
3935 | }
|
3936 | }
|
3937 | return rule;
|
3938 | }
|
3939 |
|
3940 |
|
3941 |
|
3942 | this.deployed = false;
|
3943 | return rule;
|
3944 | }
|
3945 | |
3946 |
|
3947 |
|
3948 | ;
|
3949 |
|
3950 | _proto.insertRule = function insertRule(rule) {
|
3951 | if (this.renderer) {
|
3952 | this.renderer.insertRule(rule);
|
3953 | }
|
3954 | }
|
3955 | |
3956 |
|
3957 |
|
3958 |
|
3959 | ;
|
3960 |
|
3961 | _proto.addRules = function addRules(styles, options) {
|
3962 | var added = [];
|
3963 |
|
3964 | for (var name in styles) {
|
3965 | var rule = this.addRule(name, styles[name], options);
|
3966 | if (rule) added.push(rule);
|
3967 | }
|
3968 |
|
3969 | return added;
|
3970 | }
|
3971 | |
3972 |
|
3973 |
|
3974 | ;
|
3975 |
|
3976 | _proto.getRule = function getRule(name) {
|
3977 | return this.rules.get(name);
|
3978 | }
|
3979 | |
3980 |
|
3981 |
|
3982 |
|
3983 | ;
|
3984 |
|
3985 | _proto.deleteRule = function deleteRule(name) {
|
3986 | var rule = this.rules.get(name);
|
3987 | if (!rule) return false;
|
3988 | this.rules.remove(rule);
|
3989 |
|
3990 | if (this.attached && rule.renderable && this.renderer) {
|
3991 | return this.renderer.deleteRule(rule.renderable);
|
3992 | }
|
3993 |
|
3994 | return true;
|
3995 | }
|
3996 | |
3997 |
|
3998 |
|
3999 | ;
|
4000 |
|
4001 | _proto.indexOf = function indexOf(rule) {
|
4002 | return this.rules.indexOf(rule);
|
4003 | }
|
4004 | |
4005 |
|
4006 |
|
4007 | ;
|
4008 |
|
4009 | _proto.deploy = function deploy() {
|
4010 | if (this.renderer) this.renderer.deploy();
|
4011 | this.deployed = true;
|
4012 | return this;
|
4013 | }
|
4014 | |
4015 |
|
4016 |
|
4017 | ;
|
4018 |
|
4019 | _proto.update = function update() {
|
4020 | var _this$rules;
|
4021 |
|
4022 | (_this$rules = this.rules).update.apply(_this$rules, arguments);
|
4023 |
|
4024 | return this;
|
4025 | }
|
4026 | |
4027 |
|
4028 |
|
4029 | ;
|
4030 |
|
4031 | _proto.toString = function toString(options) {
|
4032 | return this.rules.toString(options);
|
4033 | };
|
4034 |
|
4035 | return StyleSheet;
|
4036 | }();
|
4037 |
|
4038 | var PluginsRegistry =
|
4039 |
|
4040 | function () {
|
4041 | function PluginsRegistry() {
|
4042 | this.plugins = {
|
4043 | internal: [],
|
4044 | external: []
|
4045 | };
|
4046 | this.registry = void 0;
|
4047 | }
|
4048 |
|
4049 | var _proto = PluginsRegistry.prototype;
|
4050 |
|
4051 | |
4052 |
|
4053 |
|
4054 | _proto.onCreateRule = function onCreateRule(name, decl, options) {
|
4055 | for (var i = 0; i < this.registry.onCreateRule.length; i++) {
|
4056 | var rule = this.registry.onCreateRule[i](name, decl, options);
|
4057 | if (rule) return rule;
|
4058 | }
|
4059 |
|
4060 | return null;
|
4061 | }
|
4062 | |
4063 |
|
4064 |
|
4065 | ;
|
4066 |
|
4067 | _proto.onProcessRule = function onProcessRule(rule) {
|
4068 | if (rule.isProcessed) return;
|
4069 | var sheet = rule.options.sheet;
|
4070 |
|
4071 | for (var i = 0; i < this.registry.onProcessRule.length; i++) {
|
4072 | this.registry.onProcessRule[i](rule, sheet);
|
4073 | }
|
4074 |
|
4075 | if (rule.style) this.onProcessStyle(rule.style, rule, sheet);
|
4076 | rule.isProcessed = true;
|
4077 | }
|
4078 | |
4079 |
|
4080 |
|
4081 | ;
|
4082 |
|
4083 | _proto.onProcessStyle = function onProcessStyle(style, rule, sheet) {
|
4084 | for (var i = 0; i < this.registry.onProcessStyle.length; i++) {
|
4085 |
|
4086 | rule.style = this.registry.onProcessStyle[i](rule.style, rule, sheet);
|
4087 | }
|
4088 | }
|
4089 | |
4090 |
|
4091 |
|
4092 | ;
|
4093 |
|
4094 | _proto.onProcessSheet = function onProcessSheet(sheet) {
|
4095 | for (var i = 0; i < this.registry.onProcessSheet.length; i++) {
|
4096 | this.registry.onProcessSheet[i](sheet);
|
4097 | }
|
4098 | }
|
4099 | |
4100 |
|
4101 |
|
4102 | ;
|
4103 |
|
4104 | _proto.onUpdate = function onUpdate(data, rule, sheet, options) {
|
4105 | for (var i = 0; i < this.registry.onUpdate.length; i++) {
|
4106 | this.registry.onUpdate[i](data, rule, sheet, options);
|
4107 | }
|
4108 | }
|
4109 | |
4110 |
|
4111 |
|
4112 | ;
|
4113 |
|
4114 | _proto.onChangeValue = function onChangeValue(value, prop, rule) {
|
4115 | var processedValue = value;
|
4116 |
|
4117 | for (var i = 0; i < this.registry.onChangeValue.length; i++) {
|
4118 | processedValue = this.registry.onChangeValue[i](processedValue, prop, rule);
|
4119 | }
|
4120 |
|
4121 | return processedValue;
|
4122 | }
|
4123 | |
4124 |
|
4125 |
|
4126 | ;
|
4127 |
|
4128 | _proto.use = function use(newPlugin, options) {
|
4129 | if (options === void 0) {
|
4130 | options = {
|
4131 | queue: 'external'
|
4132 | };
|
4133 | }
|
4134 |
|
4135 | var plugins = this.plugins[options.queue];
|
4136 |
|
4137 | if (plugins.indexOf(newPlugin) !== -1) {
|
4138 | return;
|
4139 | }
|
4140 |
|
4141 | plugins.push(newPlugin);
|
4142 | this.registry = [].concat(this.plugins.external, this.plugins.internal).reduce(function (registry, plugin) {
|
4143 | for (var name in plugin) {
|
4144 | if (name in registry) {
|
4145 | registry[name].push(plugin[name]);
|
4146 | } else {
|
4147 | warning(false, "[JSS] Unknown hook \"" + name + "\".") ;
|
4148 | }
|
4149 | }
|
4150 |
|
4151 | return registry;
|
4152 | }, {
|
4153 | onCreateRule: [],
|
4154 | onProcessRule: [],
|
4155 | onProcessStyle: [],
|
4156 | onProcessSheet: [],
|
4157 | onChangeValue: [],
|
4158 | onUpdate: []
|
4159 | });
|
4160 | };
|
4161 |
|
4162 | return PluginsRegistry;
|
4163 | }();
|
4164 |
|
4165 | |
4166 |
|
4167 |
|
4168 | var SheetsRegistry =
|
4169 |
|
4170 | function () {
|
4171 | function SheetsRegistry() {
|
4172 | this.registry = [];
|
4173 | }
|
4174 |
|
4175 | var _proto = SheetsRegistry.prototype;
|
4176 |
|
4177 | |
4178 |
|
4179 |
|
4180 | _proto.add = function add(sheet) {
|
4181 | var registry = this.registry;
|
4182 | var index = sheet.options.index;
|
4183 | if (registry.indexOf(sheet) !== -1) return;
|
4184 |
|
4185 | if (registry.length === 0 || index >= this.index) {
|
4186 | registry.push(sheet);
|
4187 | return;
|
4188 | }
|
4189 |
|
4190 |
|
4191 | for (var i = 0; i < registry.length; i++) {
|
4192 | if (registry[i].options.index > index) {
|
4193 | registry.splice(i, 0, sheet);
|
4194 | return;
|
4195 | }
|
4196 | }
|
4197 | }
|
4198 | |
4199 |
|
4200 |
|
4201 | ;
|
4202 |
|
4203 | _proto.reset = function reset() {
|
4204 | this.registry = [];
|
4205 | }
|
4206 | |
4207 |
|
4208 |
|
4209 | ;
|
4210 |
|
4211 | _proto.remove = function remove(sheet) {
|
4212 | var index = this.registry.indexOf(sheet);
|
4213 | this.registry.splice(index, 1);
|
4214 | }
|
4215 | |
4216 |
|
4217 |
|
4218 | ;
|
4219 |
|
4220 | _proto.toString = function toString(_temp) {
|
4221 | var _ref = _temp === void 0 ? {} : _temp,
|
4222 | attached = _ref.attached,
|
4223 | options = _objectWithoutPropertiesLoose(_ref, ["attached"]);
|
4224 |
|
4225 | var css = '';
|
4226 |
|
4227 | for (var i = 0; i < this.registry.length; i++) {
|
4228 | var sheet = this.registry[i];
|
4229 |
|
4230 | if (attached != null && sheet.attached !== attached) {
|
4231 | continue;
|
4232 | }
|
4233 |
|
4234 | if (css) css += '\n';
|
4235 | css += sheet.toString(options);
|
4236 | }
|
4237 |
|
4238 | return css;
|
4239 | };
|
4240 |
|
4241 | _createClass(SheetsRegistry, [{
|
4242 | key: "index",
|
4243 |
|
4244 | |
4245 |
|
4246 |
|
4247 | get: function get() {
|
4248 | return this.registry.length === 0 ? 0 : this.registry[this.registry.length - 1].options.index;
|
4249 | }
|
4250 | }]);
|
4251 |
|
4252 | return SheetsRegistry;
|
4253 | }();
|
4254 |
|
4255 | |
4256 |
|
4257 |
|
4258 |
|
4259 |
|
4260 |
|
4261 |
|
4262 | var sheets = new SheetsRegistry();
|
4263 |
|
4264 |
|
4265 |
|
4266 | var globalThis = typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();
|
4267 |
|
4268 | var ns = '2f1acc6c3a606b082e5eef5e54414ffb';
|
4269 | if (globalThis[ns] == null) globalThis[ns] = 0;
|
4270 |
|
4271 |
|
4272 |
|
4273 |
|
4274 | var moduleId = globalThis[ns]++;
|
4275 |
|
4276 | var maxRules = 1e10;
|
4277 |
|
4278 | |
4279 |
|
4280 |
|
4281 |
|
4282 |
|
4283 | var createGenerateId = function createGenerateId(options) {
|
4284 | if (options === void 0) {
|
4285 | options = {};
|
4286 | }
|
4287 |
|
4288 | var ruleCounter = 0;
|
4289 | return function (rule, sheet) {
|
4290 | ruleCounter += 1;
|
4291 |
|
4292 | if (ruleCounter > maxRules) {
|
4293 | warning(false, "[JSS] You might have a memory leak. Rule counter is at " + ruleCounter + ".") ;
|
4294 | }
|
4295 |
|
4296 | var jssId = '';
|
4297 | var prefix = '';
|
4298 |
|
4299 | if (sheet) {
|
4300 | if (sheet.options.classNamePrefix) {
|
4301 | prefix = sheet.options.classNamePrefix;
|
4302 | }
|
4303 |
|
4304 | if (sheet.options.jss.id != null) {
|
4305 | jssId = String(sheet.options.jss.id);
|
4306 | }
|
4307 | }
|
4308 |
|
4309 | if (options.minify) {
|
4310 |
|
4311 | return "" + (prefix || 'c') + moduleId + jssId + ruleCounter;
|
4312 | }
|
4313 |
|
4314 | return prefix + rule.key + "-" + moduleId + (jssId ? "-" + jssId : '') + "-" + ruleCounter;
|
4315 | };
|
4316 | };
|
4317 |
|
4318 | |
4319 |
|
4320 |
|
4321 | var memoize = function memoize(fn) {
|
4322 | var value;
|
4323 | return function () {
|
4324 | if (!value) value = fn();
|
4325 | return value;
|
4326 | };
|
4327 | };
|
4328 | |
4329 |
|
4330 |
|
4331 |
|
4332 |
|
4333 | function getPropertyValue(cssRule, prop) {
|
4334 | try {
|
4335 |
|
4336 | if (cssRule.attributeStyleMap) {
|
4337 | return cssRule.attributeStyleMap.get(prop);
|
4338 | }
|
4339 |
|
4340 | return cssRule.style.getPropertyValue(prop);
|
4341 | } catch (err) {
|
4342 |
|
4343 | return '';
|
4344 | }
|
4345 | }
|
4346 | |
4347 |
|
4348 |
|
4349 |
|
4350 |
|
4351 | function setProperty(cssRule, prop, value) {
|
4352 | try {
|
4353 | var cssValue = value;
|
4354 |
|
4355 | if (Array.isArray(value)) {
|
4356 | cssValue = toCssValue(value, true);
|
4357 |
|
4358 | if (value[value.length - 1] === '!important') {
|
4359 | cssRule.style.setProperty(prop, cssValue, 'important');
|
4360 | return true;
|
4361 | }
|
4362 | }
|
4363 |
|
4364 |
|
4365 | if (cssRule.attributeStyleMap) {
|
4366 | cssRule.attributeStyleMap.set(prop, cssValue);
|
4367 | } else {
|
4368 | cssRule.style.setProperty(prop, cssValue);
|
4369 | }
|
4370 | } catch (err) {
|
4371 |
|
4372 | return false;
|
4373 | }
|
4374 |
|
4375 | return true;
|
4376 | }
|
4377 | |
4378 |
|
4379 |
|
4380 |
|
4381 |
|
4382 | function removeProperty(cssRule, prop) {
|
4383 | try {
|
4384 |
|
4385 | if (cssRule.attributeStyleMap) {
|
4386 | cssRule.attributeStyleMap.delete(prop);
|
4387 | } else {
|
4388 | cssRule.style.removeProperty(prop);
|
4389 | }
|
4390 | } catch (err) {
|
4391 | warning(false, "[JSS] DOMException \"" + err.message + "\" was thrown. Tried to remove property \"" + prop + "\".") ;
|
4392 | }
|
4393 | }
|
4394 | |
4395 |
|
4396 |
|
4397 |
|
4398 |
|
4399 | function setSelector(cssRule, selectorText) {
|
4400 | cssRule.selectorText = selectorText;
|
4401 |
|
4402 |
|
4403 | return cssRule.selectorText === selectorText;
|
4404 | }
|
4405 | |
4406 |
|
4407 |
|
4408 |
|
4409 |
|
4410 |
|
4411 | var getHead = memoize(function () {
|
4412 | return document.querySelector('head');
|
4413 | });
|
4414 | |
4415 |
|
4416 |
|
4417 |
|
4418 | function findHigherSheet(registry, options) {
|
4419 | for (var i = 0; i < registry.length; i++) {
|
4420 | var sheet = registry[i];
|
4421 |
|
4422 | if (sheet.attached && sheet.options.index > options.index && sheet.options.insertionPoint === options.insertionPoint) {
|
4423 | return sheet;
|
4424 | }
|
4425 | }
|
4426 |
|
4427 | return null;
|
4428 | }
|
4429 | |
4430 |
|
4431 |
|
4432 |
|
4433 |
|
4434 | function findHighestSheet(registry, options) {
|
4435 | for (var i = registry.length - 1; i >= 0; i--) {
|
4436 | var sheet = registry[i];
|
4437 |
|
4438 | if (sheet.attached && sheet.options.insertionPoint === options.insertionPoint) {
|
4439 | return sheet;
|
4440 | }
|
4441 | }
|
4442 |
|
4443 | return null;
|
4444 | }
|
4445 | |
4446 |
|
4447 |
|
4448 |
|
4449 |
|
4450 | function findCommentNode(text) {
|
4451 | var head = getHead();
|
4452 |
|
4453 | for (var i = 0; i < head.childNodes.length; i++) {
|
4454 | var node = head.childNodes[i];
|
4455 |
|
4456 | if (node.nodeType === 8 && node.nodeValue.trim() === text) {
|
4457 | return node;
|
4458 | }
|
4459 | }
|
4460 |
|
4461 | return null;
|
4462 | }
|
4463 |
|
4464 | |
4465 |
|
4466 |
|
4467 | function findPrevNode(options) {
|
4468 | var registry = sheets.registry;
|
4469 |
|
4470 | if (registry.length > 0) {
|
4471 |
|
4472 | var sheet = findHigherSheet(registry, options);
|
4473 |
|
4474 | if (sheet && sheet.renderer) {
|
4475 | return {
|
4476 | parent: sheet.renderer.element.parentNode,
|
4477 | node: sheet.renderer.element
|
4478 | };
|
4479 | }
|
4480 |
|
4481 |
|
4482 | sheet = findHighestSheet(registry, options);
|
4483 |
|
4484 | if (sheet && sheet.renderer) {
|
4485 | return {
|
4486 | parent: sheet.renderer.element.parentNode,
|
4487 | node: sheet.renderer.element.nextSibling
|
4488 | };
|
4489 | }
|
4490 | }
|
4491 |
|
4492 |
|
4493 | var insertionPoint = options.insertionPoint;
|
4494 |
|
4495 | if (insertionPoint && typeof insertionPoint === 'string') {
|
4496 | var comment = findCommentNode(insertionPoint);
|
4497 |
|
4498 | if (comment) {
|
4499 | return {
|
4500 | parent: comment.parentNode,
|
4501 | node: comment.nextSibling
|
4502 | };
|
4503 | }
|
4504 |
|
4505 |
|
4506 |
|
4507 | warning(false, "[JSS] Insertion point \"" + insertionPoint + "\" not found.") ;
|
4508 | }
|
4509 |
|
4510 | return false;
|
4511 | }
|
4512 | |
4513 |
|
4514 |
|
4515 |
|
4516 |
|
4517 | function insertStyle(style, options) {
|
4518 | var insertionPoint = options.insertionPoint;
|
4519 | var nextNode = findPrevNode(options);
|
4520 |
|
4521 | if (nextNode !== false && nextNode.parent) {
|
4522 | nextNode.parent.insertBefore(style, nextNode.node);
|
4523 | return;
|
4524 | }
|
4525 |
|
4526 |
|
4527 | if (insertionPoint && typeof insertionPoint.nodeType === 'number') {
|
4528 |
|
4529 | var insertionPointElement = insertionPoint;
|
4530 | var parentNode = insertionPointElement.parentNode;
|
4531 | if (parentNode) parentNode.insertBefore(style, insertionPointElement.nextSibling);else warning(false, '[JSS] Insertion point is not in the DOM.') ;
|
4532 | return;
|
4533 | }
|
4534 |
|
4535 | getHead().appendChild(style);
|
4536 | }
|
4537 | |
4538 |
|
4539 |
|
4540 |
|
4541 |
|
4542 | var getNonce = memoize(function () {
|
4543 | var node = document.querySelector('meta[property="csp-nonce"]');
|
4544 | return node ? node.getAttribute('content') : null;
|
4545 | });
|
4546 |
|
4547 | var _insertRule = function insertRule(container, rule, index) {
|
4548 | var maxIndex = container.cssRules.length;
|
4549 |
|
4550 | if (index === undefined || index > maxIndex) {
|
4551 |
|
4552 | index = maxIndex;
|
4553 | }
|
4554 |
|
4555 | try {
|
4556 | if ('insertRule' in container) {
|
4557 | var c = container;
|
4558 | c.insertRule(rule, index);
|
4559 | }
|
4560 | else if ('appendRule' in container) {
|
4561 | var _c = container;
|
4562 |
|
4563 | _c.appendRule(rule);
|
4564 | }
|
4565 | } catch (err) {
|
4566 | warning(false, "[JSS] " + err.message) ;
|
4567 | return false;
|
4568 | }
|
4569 |
|
4570 | return container.cssRules[index];
|
4571 | };
|
4572 |
|
4573 | var createStyle = function createStyle() {
|
4574 | var el = document.createElement('style');
|
4575 |
|
4576 |
|
4577 |
|
4578 | el.textContent = '\n';
|
4579 | return el;
|
4580 | };
|
4581 |
|
4582 | var DomRenderer =
|
4583 |
|
4584 | function () {
|
4585 |
|
4586 | function DomRenderer(sheet) {
|
4587 | this.getPropertyValue = getPropertyValue;
|
4588 | this.setProperty = setProperty;
|
4589 | this.removeProperty = removeProperty;
|
4590 | this.setSelector = setSelector;
|
4591 | this.element = void 0;
|
4592 | this.sheet = void 0;
|
4593 | this.hasInsertedRules = false;
|
4594 |
|
4595 | if (sheet) sheets.add(sheet);
|
4596 | this.sheet = sheet;
|
4597 |
|
4598 | var _ref = this.sheet ? this.sheet.options : {},
|
4599 | media = _ref.media,
|
4600 | meta = _ref.meta,
|
4601 | element = _ref.element;
|
4602 |
|
4603 | this.element = element || createStyle();
|
4604 | this.element.setAttribute('data-jss', '');
|
4605 | if (media) this.element.setAttribute('media', media);
|
4606 | if (meta) this.element.setAttribute('data-meta', meta);
|
4607 | var nonce = getNonce();
|
4608 | if (nonce) this.element.setAttribute('nonce', nonce);
|
4609 | }
|
4610 | |
4611 |
|
4612 |
|
4613 |
|
4614 |
|
4615 | var _proto = DomRenderer.prototype;
|
4616 |
|
4617 | _proto.attach = function attach() {
|
4618 |
|
4619 | if (this.element.parentNode || !this.sheet) return;
|
4620 | insertStyle(this.element, this.sheet.options);
|
4621 |
|
4622 |
|
4623 | var deployed = Boolean(this.sheet && this.sheet.deployed);
|
4624 |
|
4625 | if (this.hasInsertedRules && deployed) {
|
4626 | this.hasInsertedRules = false;
|
4627 | this.deploy();
|
4628 | }
|
4629 | }
|
4630 | |
4631 |
|
4632 |
|
4633 | ;
|
4634 |
|
4635 | _proto.detach = function detach() {
|
4636 | var parentNode = this.element.parentNode;
|
4637 | if (parentNode) parentNode.removeChild(this.element);
|
4638 | }
|
4639 | |
4640 |
|
4641 |
|
4642 | ;
|
4643 |
|
4644 | _proto.deploy = function deploy() {
|
4645 | var sheet = this.sheet;
|
4646 | if (!sheet) return;
|
4647 |
|
4648 | if (sheet.options.link) {
|
4649 | this.insertRules(sheet.rules);
|
4650 | return;
|
4651 | }
|
4652 |
|
4653 | this.element.textContent = "\n" + sheet.toString() + "\n";
|
4654 | }
|
4655 | |
4656 |
|
4657 |
|
4658 | ;
|
4659 |
|
4660 | _proto.insertRules = function insertRules(rules, nativeParent) {
|
4661 | for (var i = 0; i < rules.index.length; i++) {
|
4662 | this.insertRule(rules.index[i], i, nativeParent);
|
4663 | }
|
4664 | }
|
4665 | |
4666 |
|
4667 |
|
4668 | ;
|
4669 |
|
4670 | _proto.insertRule = function insertRule(rule, index, nativeParent) {
|
4671 | if (nativeParent === void 0) {
|
4672 | nativeParent = this.element.sheet;
|
4673 | }
|
4674 |
|
4675 | if (rule.rules) {
|
4676 | var parent = rule;
|
4677 | var latestNativeParent = nativeParent;
|
4678 |
|
4679 | if (rule.type === 'conditional' || rule.type === 'keyframes') {
|
4680 |
|
4681 | latestNativeParent = _insertRule(nativeParent, parent.toString({
|
4682 | children: false
|
4683 | }), index);
|
4684 |
|
4685 | if (latestNativeParent === false) {
|
4686 | return false;
|
4687 | }
|
4688 | }
|
4689 |
|
4690 | this.insertRules(parent.rules, latestNativeParent);
|
4691 | return latestNativeParent;
|
4692 | }
|
4693 |
|
4694 |
|
4695 |
|
4696 |
|
4697 | if (rule.renderable && rule.renderable.parentStyleSheet === this.element.sheet) {
|
4698 | return rule.renderable;
|
4699 | }
|
4700 |
|
4701 | var ruleStr = rule.toString();
|
4702 | if (!ruleStr) return false;
|
4703 |
|
4704 | var nativeRule = _insertRule(nativeParent, ruleStr, index);
|
4705 |
|
4706 | if (nativeRule === false) {
|
4707 | return false;
|
4708 | }
|
4709 |
|
4710 | this.hasInsertedRules = true;
|
4711 | rule.renderable = nativeRule;
|
4712 | return nativeRule;
|
4713 | }
|
4714 | |
4715 |
|
4716 |
|
4717 | ;
|
4718 |
|
4719 | _proto.deleteRule = function deleteRule(cssRule) {
|
4720 | var sheet = this.element.sheet;
|
4721 | var index = this.indexOf(cssRule);
|
4722 | if (index === -1) return false;
|
4723 | sheet.deleteRule(index);
|
4724 | return true;
|
4725 | }
|
4726 | |
4727 |
|
4728 |
|
4729 | ;
|
4730 |
|
4731 | _proto.indexOf = function indexOf(cssRule) {
|
4732 | var cssRules = this.element.sheet.cssRules;
|
4733 |
|
4734 | for (var index = 0; index < cssRules.length; index++) {
|
4735 | if (cssRule === cssRules[index]) return index;
|
4736 | }
|
4737 |
|
4738 | return -1;
|
4739 | }
|
4740 | |
4741 |
|
4742 |
|
4743 |
|
4744 |
|
4745 | ;
|
4746 |
|
4747 | _proto.replaceRule = function replaceRule(cssRule, rule) {
|
4748 | var index = this.indexOf(cssRule);
|
4749 | if (index === -1) return false;
|
4750 | this.element.sheet.deleteRule(index);
|
4751 | return this.insertRule(rule, index);
|
4752 | }
|
4753 | |
4754 |
|
4755 |
|
4756 | ;
|
4757 |
|
4758 | _proto.getRules = function getRules() {
|
4759 | return this.element.sheet.cssRules;
|
4760 | };
|
4761 |
|
4762 | return DomRenderer;
|
4763 | }();
|
4764 |
|
4765 | var instanceCounter = 0;
|
4766 |
|
4767 | var Jss =
|
4768 |
|
4769 | function () {
|
4770 | function Jss(options) {
|
4771 | this.id = instanceCounter++;
|
4772 | this.version = "10.0.0";
|
4773 | this.plugins = new PluginsRegistry();
|
4774 | this.options = {
|
4775 | id: {
|
4776 | minify: false
|
4777 | },
|
4778 | createGenerateId: createGenerateId,
|
4779 | Renderer: isBrowser ? DomRenderer : null,
|
4780 | plugins: []
|
4781 | };
|
4782 | this.generateId = createGenerateId({
|
4783 | minify: false
|
4784 | });
|
4785 |
|
4786 | for (var i = 0; i < plugins.length; i++) {
|
4787 | this.plugins.use(plugins[i], {
|
4788 | queue: 'internal'
|
4789 | });
|
4790 | }
|
4791 |
|
4792 | this.setup(options);
|
4793 | }
|
4794 | |
4795 |
|
4796 |
|
4797 |
|
4798 |
|
4799 |
|
4800 |
|
4801 | var _proto = Jss.prototype;
|
4802 |
|
4803 | _proto.setup = function setup(options) {
|
4804 | if (options === void 0) {
|
4805 | options = {};
|
4806 | }
|
4807 |
|
4808 | if (options.createGenerateId) {
|
4809 | this.options.createGenerateId = options.createGenerateId;
|
4810 | }
|
4811 |
|
4812 | if (options.id) {
|
4813 | this.options.id = _extends({}, this.options.id, options.id);
|
4814 | }
|
4815 |
|
4816 | if (options.createGenerateId || options.id) {
|
4817 | this.generateId = this.options.createGenerateId(this.options.id);
|
4818 | }
|
4819 |
|
4820 | if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint;
|
4821 |
|
4822 | if ('Renderer' in options) {
|
4823 | this.options.Renderer = options.Renderer;
|
4824 | }
|
4825 |
|
4826 |
|
4827 | if (options.plugins) this.use.apply(this, options.plugins);
|
4828 | return this;
|
4829 | }
|
4830 | |
4831 |
|
4832 |
|
4833 | ;
|
4834 |
|
4835 | _proto.createStyleSheet = function createStyleSheet(styles, options) {
|
4836 | if (options === void 0) {
|
4837 | options = {};
|
4838 | }
|
4839 |
|
4840 | var _options = options,
|
4841 | index = _options.index;
|
4842 |
|
4843 | if (typeof index !== 'number') {
|
4844 | index = sheets.index === 0 ? 0 : sheets.index + 1;
|
4845 | }
|
4846 |
|
4847 | var sheet = new StyleSheet(styles, _extends({}, options, {
|
4848 | jss: this,
|
4849 | generateId: options.generateId || this.generateId,
|
4850 | insertionPoint: this.options.insertionPoint,
|
4851 | Renderer: this.options.Renderer,
|
4852 | index: index
|
4853 | }));
|
4854 | this.plugins.onProcessSheet(sheet);
|
4855 | return sheet;
|
4856 | }
|
4857 | |
4858 |
|
4859 |
|
4860 | ;
|
4861 |
|
4862 | _proto.removeStyleSheet = function removeStyleSheet(sheet) {
|
4863 | sheet.detach();
|
4864 | sheets.remove(sheet);
|
4865 | return this;
|
4866 | }
|
4867 | |
4868 |
|
4869 |
|
4870 | ;
|
4871 |
|
4872 | _proto.createRule = function createRule$$1(name, style, options) {
|
4873 | if (style === void 0) {
|
4874 | style = {};
|
4875 | }
|
4876 |
|
4877 | if (options === void 0) {
|
4878 | options = {};
|
4879 | }
|
4880 |
|
4881 |
|
4882 | if (typeof name === 'object') {
|
4883 | return this.createRule(undefined, name, style);
|
4884 | }
|
4885 |
|
4886 | var ruleOptions = _extends({}, options, {
|
4887 | jss: this,
|
4888 | Renderer: this.options.Renderer
|
4889 | });
|
4890 |
|
4891 | if (!ruleOptions.generateId) ruleOptions.generateId = this.generateId;
|
4892 | if (!ruleOptions.classes) ruleOptions.classes = {};
|
4893 | if (!ruleOptions.keyframes) ruleOptions.keyframes = {};
|
4894 |
|
4895 | var rule = createRule(name, style, ruleOptions);
|
4896 |
|
4897 | if (rule) this.plugins.onProcessRule(rule);
|
4898 | return rule;
|
4899 | }
|
4900 | |
4901 |
|
4902 |
|
4903 | ;
|
4904 |
|
4905 | _proto.use = function use() {
|
4906 | var _this = this;
|
4907 |
|
4908 | for (var _len = arguments.length, plugins$$1 = new Array(_len), _key = 0; _key < _len; _key++) {
|
4909 | plugins$$1[_key] = arguments[_key];
|
4910 | }
|
4911 |
|
4912 | plugins$$1.forEach(function (plugin) {
|
4913 | _this.plugins.use(plugin);
|
4914 | });
|
4915 | return this;
|
4916 | };
|
4917 |
|
4918 | return Jss;
|
4919 | }();
|
4920 |
|
4921 | |
4922 |
|
4923 |
|
4924 | function getDynamicStyles(styles) {
|
4925 | var to = null;
|
4926 |
|
4927 | for (var key in styles) {
|
4928 | var value = styles[key];
|
4929 | var type = typeof value;
|
4930 |
|
4931 | if (type === 'function') {
|
4932 | if (!to) to = {};
|
4933 | to[key] = value;
|
4934 | } else if (type === 'object' && value !== null && !Array.isArray(value)) {
|
4935 | var extracted = getDynamicStyles(value);
|
4936 |
|
4937 | if (extracted) {
|
4938 | if (!to) to = {};
|
4939 | to[key] = extracted;
|
4940 | }
|
4941 | }
|
4942 | }
|
4943 |
|
4944 | return to;
|
4945 | }
|
4946 |
|
4947 | |
4948 |
|
4949 |
|
4950 |
|
4951 |
|
4952 |
|
4953 |
|
4954 |
|
4955 | |
4956 |
|
4957 |
|
4958 |
|
4959 | var hasCSSTOMSupport = typeof CSS !== 'undefined' && CSS && 'number' in CSS;
|
4960 | |
4961 |
|
4962 |
|
4963 |
|
4964 | var create = function create(options) {
|
4965 | return new Jss(options);
|
4966 | };
|
4967 | |
4968 |
|
4969 |
|
4970 |
|
4971 | var index$1 = create();
|
4972 |
|
4973 | var now = Date.now();
|
4974 | var fnValuesNs = "fnValues" + now;
|
4975 | var fnRuleNs = "fnStyle" + ++now;
|
4976 | function functionPlugin() {
|
4977 | return {
|
4978 | onCreateRule: function onCreateRule(name, decl, options) {
|
4979 | if (typeof decl !== 'function') return null;
|
4980 | var rule = createRule(name, {}, options);
|
4981 | rule[fnRuleNs] = decl;
|
4982 | return rule;
|
4983 | },
|
4984 | onProcessStyle: function onProcessStyle(style, rule) {
|
4985 |
|
4986 |
|
4987 |
|
4988 |
|
4989 | if (fnValuesNs in rule || fnRuleNs in rule) return style;
|
4990 | var fnValues = {};
|
4991 |
|
4992 | for (var prop in style) {
|
4993 | var value = style[prop];
|
4994 | if (typeof value !== 'function') continue;
|
4995 | delete style[prop];
|
4996 | fnValues[prop] = value;
|
4997 | }
|
4998 |
|
4999 |
|
5000 | rule[fnValuesNs] = fnValues;
|
5001 | return style;
|
5002 | },
|
5003 | onUpdate: function onUpdate(data, rule, sheet, options) {
|
5004 | var styleRule = rule;
|
5005 | var fnRule = styleRule[fnRuleNs];
|
5006 |
|
5007 |
|
5008 | if (fnRule) {
|
5009 |
|
5010 |
|
5011 | styleRule.style = fnRule(data) || {};
|
5012 | }
|
5013 |
|
5014 | var fnValues = styleRule[fnValuesNs];
|
5015 |
|
5016 | if (fnValues) {
|
5017 | for (var prop in fnValues) {
|
5018 | styleRule.prop(prop, fnValues[prop](data), options);
|
5019 | }
|
5020 | }
|
5021 | }
|
5022 | };
|
5023 | }
|
5024 |
|
5025 | var at = '@global';
|
5026 | var atPrefix = '@global ';
|
5027 |
|
5028 | var GlobalContainerRule =
|
5029 |
|
5030 | function () {
|
5031 | function GlobalContainerRule(key, styles, options) {
|
5032 | this.type = 'global';
|
5033 | this.at = at;
|
5034 | this.rules = void 0;
|
5035 | this.options = void 0;
|
5036 | this.key = void 0;
|
5037 | this.isProcessed = false;
|
5038 | this.key = key;
|
5039 | this.options = options;
|
5040 | this.rules = new RuleList(_extends({}, options, {
|
5041 | parent: this
|
5042 | }));
|
5043 |
|
5044 | for (var selector in styles) {
|
5045 | this.rules.add(selector, styles[selector]);
|
5046 | }
|
5047 |
|
5048 | this.rules.process();
|
5049 | }
|
5050 | |
5051 |
|
5052 |
|
5053 |
|
5054 |
|
5055 | var _proto = GlobalContainerRule.prototype;
|
5056 |
|
5057 | _proto.getRule = function getRule(name) {
|
5058 | return this.rules.get(name);
|
5059 | }
|
5060 | |
5061 |
|
5062 |
|
5063 | ;
|
5064 |
|
5065 | _proto.addRule = function addRule(name, style, options) {
|
5066 | var rule = this.rules.add(name, style, options);
|
5067 | this.options.jss.plugins.onProcessRule(rule);
|
5068 | return rule;
|
5069 | }
|
5070 | |
5071 |
|
5072 |
|
5073 | ;
|
5074 |
|
5075 | _proto.indexOf = function indexOf(rule) {
|
5076 | return this.rules.indexOf(rule);
|
5077 | }
|
5078 | |
5079 |
|
5080 |
|
5081 | ;
|
5082 |
|
5083 | _proto.toString = function toString() {
|
5084 | return this.rules.toString();
|
5085 | };
|
5086 |
|
5087 | return GlobalContainerRule;
|
5088 | }();
|
5089 |
|
5090 | var GlobalPrefixedRule =
|
5091 |
|
5092 | function () {
|
5093 | function GlobalPrefixedRule(key, style, options) {
|
5094 | this.type = 'global';
|
5095 | this.at = at;
|
5096 | this.options = void 0;
|
5097 | this.rule = void 0;
|
5098 | this.isProcessed = false;
|
5099 | this.key = void 0;
|
5100 | this.key = key;
|
5101 | this.options = options;
|
5102 | var selector = key.substr(atPrefix.length);
|
5103 | this.rule = options.jss.createRule(selector, style, _extends({}, options, {
|
5104 | parent: this
|
5105 | }));
|
5106 | }
|
5107 |
|
5108 | var _proto2 = GlobalPrefixedRule.prototype;
|
5109 |
|
5110 | _proto2.toString = function toString(options) {
|
5111 | return this.rule ? this.rule.toString(options) : '';
|
5112 | };
|
5113 |
|
5114 | return GlobalPrefixedRule;
|
5115 | }();
|
5116 |
|
5117 | var separatorRegExp = /\s*,\s*/g;
|
5118 |
|
5119 | function addScope(selector, scope) {
|
5120 | var parts = selector.split(separatorRegExp);
|
5121 | var scoped = '';
|
5122 |
|
5123 | for (var i = 0; i < parts.length; i++) {
|
5124 | scoped += scope + " " + parts[i].trim();
|
5125 | if (parts[i + 1]) scoped += ', ';
|
5126 | }
|
5127 |
|
5128 | return scoped;
|
5129 | }
|
5130 |
|
5131 | function handleNestedGlobalContainerRule(rule) {
|
5132 | var options = rule.options,
|
5133 | style = rule.style;
|
5134 | var rules = style ? style[at] : null;
|
5135 | if (!rules) return;
|
5136 |
|
5137 | for (var name in rules) {
|
5138 | options.sheet.addRule(name, rules[name], _extends({}, options, {
|
5139 | selector: addScope(name, rule.selector)
|
5140 | }));
|
5141 | }
|
5142 |
|
5143 | delete style[at];
|
5144 | }
|
5145 |
|
5146 | function handlePrefixedGlobalRule(rule) {
|
5147 | var options = rule.options,
|
5148 | style = rule.style;
|
5149 |
|
5150 | for (var prop in style) {
|
5151 | if (prop[0] !== '@' || prop.substr(0, at.length) !== at) continue;
|
5152 | var selector = addScope(prop.substr(at.length), rule.selector);
|
5153 | options.sheet.addRule(selector, style[prop], _extends({}, options, {
|
5154 | selector: selector
|
5155 | }));
|
5156 | delete style[prop];
|
5157 | }
|
5158 | }
|
5159 | |
5160 |
|
5161 |
|
5162 |
|
5163 |
|
5164 |
|
5165 |
|
5166 |
|
5167 | function jssGlobal() {
|
5168 | function onCreateRule(name, styles, options) {
|
5169 | if (!name) return null;
|
5170 |
|
5171 | if (name === at) {
|
5172 | return new GlobalContainerRule(name, styles, options);
|
5173 | }
|
5174 |
|
5175 | if (name[0] === '@' && name.substr(0, atPrefix.length) === atPrefix) {
|
5176 | return new GlobalPrefixedRule(name, styles, options);
|
5177 | }
|
5178 |
|
5179 | var parent = options.parent;
|
5180 |
|
5181 | if (parent) {
|
5182 | if (parent.type === 'global' || parent.options.parent && parent.options.parent.type === 'global') {
|
5183 | options.scoped = false;
|
5184 | }
|
5185 | }
|
5186 |
|
5187 | if (options.scoped === false) {
|
5188 | options.selector = name;
|
5189 | }
|
5190 |
|
5191 | return null;
|
5192 | }
|
5193 |
|
5194 | function onProcessRule(rule) {
|
5195 | if (rule.type !== 'style') return;
|
5196 | handleNestedGlobalContainerRule(rule);
|
5197 | handlePrefixedGlobalRule(rule);
|
5198 | }
|
5199 |
|
5200 | return {
|
5201 | onCreateRule: onCreateRule,
|
5202 | onProcessRule: onProcessRule
|
5203 | };
|
5204 | }
|
5205 |
|
5206 | var separatorRegExp$1 = /\s*,\s*/g;
|
5207 | var parentRegExp = /&/g;
|
5208 | var refRegExp$1 = /\$([\w-]+)/g;
|
5209 | |
5210 |
|
5211 |
|
5212 |
|
5213 |
|
5214 |
|
5215 |
|
5216 | function jssNested() {
|
5217 |
|
5218 | function getReplaceRef(container, sheet) {
|
5219 | return function (match, key) {
|
5220 | var rule = container.getRule(key) || sheet && sheet.getRule(key);
|
5221 |
|
5222 | if (rule) {
|
5223 | rule = rule;
|
5224 | return rule.selector;
|
5225 | }
|
5226 |
|
5227 | warning(false, "[JSS] Could not find the referenced rule \"" + key + "\" in \"" + (container.options.meta || container.toString()) + "\".") ;
|
5228 | return key;
|
5229 | };
|
5230 | }
|
5231 |
|
5232 | function replaceParentRefs(nestedProp, parentProp) {
|
5233 | var parentSelectors = parentProp.split(separatorRegExp$1);
|
5234 | var nestedSelectors = nestedProp.split(separatorRegExp$1);
|
5235 | var result = '';
|
5236 |
|
5237 | for (var i = 0; i < parentSelectors.length; i++) {
|
5238 | var parent = parentSelectors[i];
|
5239 |
|
5240 | for (var j = 0; j < nestedSelectors.length; j++) {
|
5241 | var nested = nestedSelectors[j];
|
5242 | if (result) result += ', ';
|
5243 |
|
5244 | result += nested.indexOf('&') !== -1 ? nested.replace(parentRegExp, parent) : parent + " " + nested;
|
5245 | }
|
5246 | }
|
5247 |
|
5248 | return result;
|
5249 | }
|
5250 |
|
5251 | function getOptions(rule, container, options) {
|
5252 |
|
5253 | if (options) return _extends({}, options, {
|
5254 | index: options.index + 1
|
5255 | });
|
5256 | var nestingLevel = rule.options.nestingLevel;
|
5257 | nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
|
5258 | return _extends({}, rule.options, {
|
5259 | nestingLevel: nestingLevel,
|
5260 | index: container.indexOf(rule) + 1
|
5261 | });
|
5262 | }
|
5263 |
|
5264 | function onProcessStyle(style, rule, sheet) {
|
5265 | if (rule.type !== 'style') return style;
|
5266 | var styleRule = rule;
|
5267 | var container = styleRule.options.parent;
|
5268 | var options;
|
5269 | var replaceRef;
|
5270 |
|
5271 | for (var prop in style) {
|
5272 | var isNested = prop.indexOf('&') !== -1;
|
5273 | var isNestedConditional = prop[0] === '@';
|
5274 | if (!isNested && !isNestedConditional) continue;
|
5275 | options = getOptions(styleRule, container, options);
|
5276 |
|
5277 | if (isNested) {
|
5278 | var selector = replaceParentRefs(prop, styleRule.selector);
|
5279 |
|
5280 |
|
5281 | if (!replaceRef) replaceRef = getReplaceRef(container, sheet);
|
5282 |
|
5283 | selector = selector.replace(refRegExp$1, replaceRef);
|
5284 | container.addRule(selector, style[prop], _extends({}, options, {
|
5285 | selector: selector
|
5286 | }));
|
5287 | } else if (isNestedConditional) {
|
5288 |
|
5289 | container.addRule(prop, {}, options)
|
5290 |
|
5291 |
|
5292 | .addRule(styleRule.key, style[prop], {
|
5293 | selector: styleRule.selector
|
5294 | });
|
5295 | }
|
5296 |
|
5297 | delete style[prop];
|
5298 | }
|
5299 |
|
5300 | return style;
|
5301 | }
|
5302 |
|
5303 | return {
|
5304 | onProcessStyle: onProcessStyle
|
5305 | };
|
5306 | }
|
5307 |
|
5308 |
|
5309 | var uppercasePattern = /[A-Z]/g;
|
5310 | var msPattern = /^ms-/;
|
5311 | var cache = {};
|
5312 |
|
5313 | function toHyphenLower(match) {
|
5314 | return '-' + match.toLowerCase()
|
5315 | }
|
5316 |
|
5317 | function hyphenateStyleName(name) {
|
5318 | if (cache.hasOwnProperty(name)) {
|
5319 | return cache[name]
|
5320 | }
|
5321 |
|
5322 | var hName = name.replace(uppercasePattern, toHyphenLower);
|
5323 | return (cache[name] = msPattern.test(hName) ? '-' + hName : hName)
|
5324 | }
|
5325 |
|
5326 | |
5327 |
|
5328 |
|
5329 |
|
5330 |
|
5331 |
|
5332 |
|
5333 | function convertCase(style) {
|
5334 | var converted = {};
|
5335 |
|
5336 | for (var prop in style) {
|
5337 | var key = prop.indexOf('--') === 0 ? prop : hyphenateStyleName(prop);
|
5338 | converted[key] = style[prop];
|
5339 | }
|
5340 |
|
5341 | if (style.fallbacks) {
|
5342 | if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);
|
5343 | }
|
5344 |
|
5345 | return converted;
|
5346 | }
|
5347 | |
5348 |
|
5349 |
|
5350 |
|
5351 |
|
5352 |
|
5353 |
|
5354 | function camelCase() {
|
5355 | function onProcessStyle(style) {
|
5356 | if (Array.isArray(style)) {
|
5357 |
|
5358 | for (var index = 0; index < style.length; index++) {
|
5359 | style[index] = convertCase(style[index]);
|
5360 | }
|
5361 |
|
5362 | return style;
|
5363 | }
|
5364 |
|
5365 | return convertCase(style);
|
5366 | }
|
5367 |
|
5368 | function onChangeValue(value, prop, rule) {
|
5369 | if (prop.indexOf('--') === 0) {
|
5370 | return value;
|
5371 | }
|
5372 |
|
5373 | var hyphenatedProp = hyphenateStyleName(prop);
|
5374 |
|
5375 | if (prop === hyphenatedProp) return value;
|
5376 | rule.prop(hyphenatedProp, value);
|
5377 |
|
5378 | return null;
|
5379 | }
|
5380 |
|
5381 | return {
|
5382 | onProcessStyle: onProcessStyle,
|
5383 | onChangeValue: onChangeValue
|
5384 | };
|
5385 | }
|
5386 |
|
5387 | var px = hasCSSTOMSupport && CSS ? CSS.px : 'px';
|
5388 | var ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';
|
5389 | var percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';
|
5390 | |
5391 |
|
5392 |
|
5393 |
|
5394 |
|
5395 |
|
5396 | var defaultUnits = {
|
5397 |
|
5398 | 'animation-delay': ms,
|
5399 | 'animation-duration': ms,
|
5400 |
|
5401 | 'background-position': px,
|
5402 | 'background-position-x': px,
|
5403 | 'background-position-y': px,
|
5404 | 'background-size': px,
|
5405 |
|
5406 | border: px,
|
5407 | 'border-bottom': px,
|
5408 | 'border-bottom-left-radius': px,
|
5409 | 'border-bottom-right-radius': px,
|
5410 | 'border-bottom-width': px,
|
5411 | 'border-left': px,
|
5412 | 'border-left-width': px,
|
5413 | 'border-radius': px,
|
5414 | 'border-right': px,
|
5415 | 'border-right-width': px,
|
5416 | 'border-top': px,
|
5417 | 'border-top-left-radius': px,
|
5418 | 'border-top-right-radius': px,
|
5419 | 'border-top-width': px,
|
5420 | 'border-width': px,
|
5421 |
|
5422 | margin: px,
|
5423 | 'margin-bottom': px,
|
5424 | 'margin-left': px,
|
5425 | 'margin-right': px,
|
5426 | 'margin-top': px,
|
5427 |
|
5428 | padding: px,
|
5429 | 'padding-bottom': px,
|
5430 | 'padding-left': px,
|
5431 | 'padding-right': px,
|
5432 | 'padding-top': px,
|
5433 |
|
5434 | 'mask-position-x': px,
|
5435 | 'mask-position-y': px,
|
5436 | 'mask-size': px,
|
5437 |
|
5438 | height: px,
|
5439 | width: px,
|
5440 | 'min-height': px,
|
5441 | 'max-height': px,
|
5442 | 'min-width': px,
|
5443 | 'max-width': px,
|
5444 |
|
5445 | bottom: px,
|
5446 | left: px,
|
5447 | top: px,
|
5448 | right: px,
|
5449 |
|
5450 | 'box-shadow': px,
|
5451 | 'text-shadow': px,
|
5452 |
|
5453 | 'column-gap': px,
|
5454 | 'column-rule': px,
|
5455 | 'column-rule-width': px,
|
5456 | 'column-width': px,
|
5457 |
|
5458 | 'font-size': px,
|
5459 | 'font-size-delta': px,
|
5460 | 'letter-spacing': px,
|
5461 | 'text-indent': px,
|
5462 | 'text-stroke': px,
|
5463 | 'text-stroke-width': px,
|
5464 | 'word-spacing': px,
|
5465 |
|
5466 | motion: px,
|
5467 | 'motion-offset': px,
|
5468 |
|
5469 | outline: px,
|
5470 | 'outline-offset': px,
|
5471 | 'outline-width': px,
|
5472 |
|
5473 | perspective: px,
|
5474 | 'perspective-origin-x': percent,
|
5475 | 'perspective-origin-y': percent,
|
5476 |
|
5477 | 'transform-origin': percent,
|
5478 | 'transform-origin-x': percent,
|
5479 | 'transform-origin-y': percent,
|
5480 | 'transform-origin-z': percent,
|
5481 |
|
5482 | 'transition-delay': ms,
|
5483 | 'transition-duration': ms,
|
5484 |
|
5485 | 'vertical-align': px,
|
5486 | 'flex-basis': px,
|
5487 |
|
5488 | 'shape-margin': px,
|
5489 | size: px,
|
5490 |
|
5491 | grid: px,
|
5492 | 'grid-gap': px,
|
5493 | 'grid-row-gap': px,
|
5494 | 'grid-column-gap': px,
|
5495 | 'grid-template-rows': px,
|
5496 | 'grid-template-columns': px,
|
5497 | 'grid-auto-rows': px,
|
5498 | 'grid-auto-columns': px,
|
5499 |
|
5500 |
|
5501 | 'box-shadow-x': px,
|
5502 | 'box-shadow-y': px,
|
5503 | 'box-shadow-blur': px,
|
5504 | 'box-shadow-spread': px,
|
5505 | 'font-line-height': px,
|
5506 | 'text-shadow-x': px,
|
5507 | 'text-shadow-y': px,
|
5508 | 'text-shadow-blur': px
|
5509 | };
|
5510 |
|
5511 | |
5512 |
|
5513 |
|
5514 | function addCamelCasedVersion(obj) {
|
5515 | var regExp = /(-[a-z])/g;
|
5516 |
|
5517 | var replace = function replace(str) {
|
5518 | return str[1].toUpperCase();
|
5519 | };
|
5520 |
|
5521 | var newObj = {};
|
5522 |
|
5523 | for (var _key in obj) {
|
5524 | newObj[_key] = obj[_key];
|
5525 | newObj[_key.replace(regExp, replace)] = obj[_key];
|
5526 | }
|
5527 |
|
5528 | return newObj;
|
5529 | }
|
5530 |
|
5531 | var units = addCamelCasedVersion(defaultUnits);
|
5532 | |
5533 |
|
5534 |
|
5535 |
|
5536 | function iterate(prop, value, options) {
|
5537 | if (!value) return value;
|
5538 |
|
5539 | if (Array.isArray(value)) {
|
5540 | for (var i = 0; i < value.length; i++) {
|
5541 | value[i] = iterate(prop, value[i], options);
|
5542 | }
|
5543 | } else if (typeof value === 'object') {
|
5544 | if (prop === 'fallbacks') {
|
5545 | for (var innerProp in value) {
|
5546 | value[innerProp] = iterate(innerProp, value[innerProp], options);
|
5547 | }
|
5548 | } else {
|
5549 | for (var _innerProp in value) {
|
5550 | value[_innerProp] = iterate(prop + "-" + _innerProp, value[_innerProp], options);
|
5551 | }
|
5552 | }
|
5553 | } else if (typeof value === 'number') {
|
5554 | if (options[prop]) {
|
5555 | return "" + value + options[prop];
|
5556 | }
|
5557 |
|
5558 | if (units[prop]) {
|
5559 | return typeof units[prop] === 'function' ? units[prop](value).toString() : "" + value + units[prop];
|
5560 | }
|
5561 |
|
5562 | return value.toString();
|
5563 | }
|
5564 |
|
5565 | return value;
|
5566 | }
|
5567 | |
5568 |
|
5569 |
|
5570 |
|
5571 |
|
5572 | function defaultUnit(options) {
|
5573 | if (options === void 0) {
|
5574 | options = {};
|
5575 | }
|
5576 |
|
5577 | var camelCasedOptions = addCamelCasedVersion(options);
|
5578 |
|
5579 | function onProcessStyle(style, rule) {
|
5580 | if (rule.type !== 'style') return style;
|
5581 |
|
5582 | for (var prop in style) {
|
5583 | style[prop] = iterate(prop, style[prop], camelCasedOptions);
|
5584 | }
|
5585 |
|
5586 | return style;
|
5587 | }
|
5588 |
|
5589 | function onChangeValue(value, prop) {
|
5590 | return iterate(prop, value, camelCasedOptions);
|
5591 | }
|
5592 |
|
5593 | return {
|
5594 | onProcessStyle: onProcessStyle,
|
5595 | onChangeValue: onChangeValue
|
5596 | };
|
5597 | }
|
5598 |
|
5599 | function _arrayWithoutHoles(arr) {
|
5600 | if (Array.isArray(arr)) {
|
5601 | for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
|
5602 | arr2[i] = arr[i];
|
5603 | }
|
5604 |
|
5605 | return arr2;
|
5606 | }
|
5607 | }
|
5608 |
|
5609 | function _iterableToArray(iter) {
|
5610 | if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
|
5611 | }
|
5612 |
|
5613 | function _nonIterableSpread() {
|
5614 | throw new TypeError("Invalid attempt to spread non-iterable instance");
|
5615 | }
|
5616 |
|
5617 | function _toConsumableArray(arr) {
|
5618 | return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
|
5619 | }
|
5620 |
|
5621 |
|
5622 | var js = '';
|
5623 | var css = '';
|
5624 | var vendor = '';
|
5625 | var browser = '';
|
5626 | var isTouch = isBrowser && 'ontouchstart' in document.documentElement;
|
5627 |
|
5628 | if (isBrowser) {
|
5629 |
|
5630 |
|
5631 | var jsCssMap = {
|
5632 | Moz: '-moz-',
|
5633 | ms: '-ms-',
|
5634 | O: '-o-',
|
5635 | Webkit: '-webkit-'
|
5636 | };
|
5637 |
|
5638 | var _document$createEleme = document.createElement('p'),
|
5639 | style = _document$createEleme.style;
|
5640 |
|
5641 | var testProp = 'Transform';
|
5642 |
|
5643 | for (var key in jsCssMap) {
|
5644 | if (key + testProp in style) {
|
5645 | js = key;
|
5646 | css = jsCssMap[key];
|
5647 | break;
|
5648 | }
|
5649 | }
|
5650 |
|
5651 |
|
5652 | if (js === 'Webkit' && 'msHyphens' in style) {
|
5653 | js = 'ms';
|
5654 | css = jsCssMap.ms;
|
5655 | browser = 'edge';
|
5656 | }
|
5657 |
|
5658 |
|
5659 | if (js === 'Webkit' && '-apple-trailing-word' in style) {
|
5660 | vendor = 'apple';
|
5661 | }
|
5662 | }
|
5663 | |
5664 |
|
5665 |
|
5666 |
|
5667 |
|
5668 |
|
5669 |
|
5670 |
|
5671 | var prefix = {
|
5672 | js: js,
|
5673 | css: css,
|
5674 | vendor: vendor,
|
5675 | browser: browser,
|
5676 | isTouch: isTouch
|
5677 | };
|
5678 |
|
5679 | |
5680 |
|
5681 |
|
5682 |
|
5683 |
|
5684 |
|
5685 |
|
5686 |
|
5687 | function supportedKeyframes(key) {
|
5688 |
|
5689 | if (key[1] === '-') return key;
|
5690 |
|
5691 |
|
5692 | if (prefix.js === 'ms') return key;
|
5693 | return "@" + prefix.css + "keyframes" + key.substr(10);
|
5694 | }
|
5695 |
|
5696 |
|
5697 |
|
5698 | var appearence = {
|
5699 | noPrefill: ['appearance'],
|
5700 | supportedProperty: function supportedProperty(prop) {
|
5701 | if (prop !== 'appearance') return false;
|
5702 | if (prefix.js === 'ms') return "-webkit-" + prop;
|
5703 | return prefix.css + prop;
|
5704 | }
|
5705 | };
|
5706 |
|
5707 | var regExp = /[-\s]+(.)?/g;
|
5708 | |
5709 |
|
5710 |
|
5711 |
|
5712 |
|
5713 |
|
5714 |
|
5715 |
|
5716 |
|
5717 | function toUpper(match, c) {
|
5718 | return c ? c.toUpperCase() : '';
|
5719 | }
|
5720 | |
5721 |
|
5722 |
|
5723 |
|
5724 |
|
5725 |
|
5726 |
|
5727 |
|
5728 |
|
5729 | function camelize(str) {
|
5730 | return str.replace(regExp, toUpper);
|
5731 | }
|
5732 |
|
5733 | |
5734 |
|
5735 |
|
5736 |
|
5737 |
|
5738 |
|
5739 |
|
5740 |
|
5741 | function pascalize(str) {
|
5742 | return camelize("-" + str);
|
5743 | }
|
5744 |
|
5745 |
|
5746 |
|
5747 |
|
5748 |
|
5749 | var breakPropsOld = {
|
5750 | supportedProperty: function supportedProperty(prop, style) {
|
5751 | if (!/^break-/.test(prop)) return false;
|
5752 |
|
5753 | if (prefix.js === 'Webkit') {
|
5754 | var jsProp = "WebkitColumn" + pascalize(prop);
|
5755 | return jsProp in style ? prefix.css + "column-" + prop : false;
|
5756 | }
|
5757 |
|
5758 | if (prefix.js === 'Moz') {
|
5759 | var _jsProp = "page" + pascalize(prop);
|
5760 |
|
5761 | return _jsProp in style ? "page-" + prop : false;
|
5762 | }
|
5763 |
|
5764 | return false;
|
5765 | }
|
5766 | };
|
5767 |
|
5768 |
|
5769 |
|
5770 | var colorAdjust = {
|
5771 | noPrefill: ['color-adjust'],
|
5772 | supportedProperty: function supportedProperty(prop) {
|
5773 | if (prop !== 'color-adjust') return false;
|
5774 | if (prefix.js === 'Webkit') return prefix.css + "print-" + prop;
|
5775 | return prop;
|
5776 | }
|
5777 | };
|
5778 |
|
5779 | var propMap = {
|
5780 | flex: 'box-flex',
|
5781 | 'flex-grow': 'box-flex',
|
5782 | 'flex-direction': ['box-orient', 'box-direction'],
|
5783 | order: 'box-ordinal-group',
|
5784 | 'align-items': 'box-align',
|
5785 | 'flex-flow': ['box-orient', 'box-direction'],
|
5786 | 'justify-content': 'box-pack'
|
5787 | };
|
5788 | var propKeys = Object.keys(propMap);
|
5789 |
|
5790 | var prefixCss = function prefixCss(p) {
|
5791 | return prefix.css + p;
|
5792 | };
|
5793 |
|
5794 |
|
5795 | var flex2009 = {
|
5796 | supportedProperty: function supportedProperty(prop, style, _ref) {
|
5797 | var multiple = _ref.multiple;
|
5798 |
|
5799 | if (propKeys.indexOf(prop) > -1) {
|
5800 | var newProp = propMap[prop];
|
5801 |
|
5802 | if (!Array.isArray(newProp)) {
|
5803 | return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
|
5804 | }
|
5805 |
|
5806 | if (!multiple) return false;
|
5807 |
|
5808 | for (var i = 0; i < newProp.length; i++) {
|
5809 | if (!(prefix.js + pascalize(newProp[0]) in style)) {
|
5810 | return false;
|
5811 | }
|
5812 | }
|
5813 |
|
5814 | return newProp.map(prefixCss);
|
5815 | }
|
5816 |
|
5817 | return false;
|
5818 | }
|
5819 | };
|
5820 |
|
5821 | var propMap$1 = {
|
5822 | 'flex-grow': 'flex-positive',
|
5823 | 'flex-shrink': 'flex-negative',
|
5824 | 'flex-basis': 'flex-preferred-size',
|
5825 | 'justify-content': 'flex-pack',
|
5826 | order: 'flex-order',
|
5827 | 'align-items': 'flex-align',
|
5828 | 'align-content': 'flex-line-pack'
|
5829 |
|
5830 |
|
5831 | };
|
5832 | var flex2012 = {
|
5833 | supportedProperty: function supportedProperty(prop, style) {
|
5834 | var newProp = propMap$1[prop];
|
5835 | if (!newProp) return false;
|
5836 | return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
|
5837 | }
|
5838 | };
|
5839 |
|
5840 |
|
5841 |
|
5842 | var inlineLogicalOld = {
|
5843 | supportedProperty: function supportedProperty(prop, style) {
|
5844 | if (!/^(border|margin|padding)-inline/.test(prop)) return false;
|
5845 | if (prefix.js === 'Moz') return prop;
|
5846 | var newProp = prop.replace('-inline', '');
|
5847 | return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
|
5848 | }
|
5849 | };
|
5850 |
|
5851 |
|
5852 |
|
5853 |
|
5854 | var mask = {
|
5855 | noPrefill: ['mask'],
|
5856 | supportedProperty: function supportedProperty(prop, style) {
|
5857 | if (!/^mask/.test(prop)) return false;
|
5858 |
|
5859 | if (prefix.js === 'Webkit') {
|
5860 | var longhand = 'mask-image';
|
5861 |
|
5862 | if (camelize(longhand) in style) {
|
5863 | return prop;
|
5864 | }
|
5865 |
|
5866 | if (prefix.js + pascalize(longhand) in style) {
|
5867 | return prefix.css + prop;
|
5868 | }
|
5869 | }
|
5870 |
|
5871 | return prop;
|
5872 | }
|
5873 | };
|
5874 |
|
5875 |
|
5876 |
|
5877 | var overscrollBehavior = {
|
5878 | supportedProperty: function supportedProperty(prop) {
|
5879 | if (prop !== 'overscroll-behavior') return false;
|
5880 |
|
5881 | if (prefix.js === 'ms') {
|
5882 | return prefix.css + "scroll-chaining";
|
5883 | }
|
5884 |
|
5885 | return prop;
|
5886 | }
|
5887 | };
|
5888 |
|
5889 | var prefixed = {
|
5890 | supportedProperty: function supportedProperty(prop, style) {
|
5891 | var pascalized = pascalize(prop);
|
5892 |
|
5893 | if (prop[0] === '-') return prop;
|
5894 |
|
5895 | if (prop[0] === '-' && prop[1] === '-') return prop;
|
5896 | if (prefix.js + pascalized in style) return prefix.css + prop;
|
5897 |
|
5898 | if (prefix.js !== 'Webkit' && "Webkit" + pascalized in style) return "-webkit-" + prop;
|
5899 | return false;
|
5900 | }
|
5901 | };
|
5902 |
|
5903 |
|
5904 |
|
5905 | var scrollSnap = {
|
5906 | supportedProperty: function supportedProperty(prop) {
|
5907 | if (prop.substring(0, 11) !== 'scroll-snap') return false;
|
5908 |
|
5909 | if (prefix.js === 'ms') {
|
5910 | return "" + prefix.css + prop;
|
5911 | }
|
5912 |
|
5913 | return prop;
|
5914 | }
|
5915 | };
|
5916 |
|
5917 |
|
5918 |
|
5919 | var textOrientation = {
|
5920 | noPrefill: ['text-orientation'],
|
5921 | supportedProperty: function supportedProperty(prop) {
|
5922 | if (prop !== 'text-orientation') return false;
|
5923 |
|
5924 | if (prefix.vendor === 'apple' && !prefix.isTouch) {
|
5925 | return prefix.css + prop;
|
5926 | }
|
5927 |
|
5928 | return prop;
|
5929 | }
|
5930 | };
|
5931 |
|
5932 |
|
5933 |
|
5934 | var transform = {
|
5935 | noPrefill: ['transform'],
|
5936 | supportedProperty: function supportedProperty(prop, style, options) {
|
5937 | if (prop !== 'transform') return false;
|
5938 |
|
5939 | if (options.transform) {
|
5940 | return prop;
|
5941 | }
|
5942 |
|
5943 | return prefix.css + prop;
|
5944 | }
|
5945 | };
|
5946 |
|
5947 |
|
5948 |
|
5949 | var transition = {
|
5950 | noPrefill: ['transition'],
|
5951 | supportedProperty: function supportedProperty(prop, style, options) {
|
5952 | if (prop !== 'transition') return false;
|
5953 |
|
5954 | if (options.transition) {
|
5955 | return prop;
|
5956 | }
|
5957 |
|
5958 | return prefix.css + prop;
|
5959 | }
|
5960 | };
|
5961 |
|
5962 |
|
5963 |
|
5964 |
|
5965 | var unprefixed = {
|
5966 | supportedProperty: function supportedProperty(prop, style) {
|
5967 | return camelize(prop) in style ? prop : false;
|
5968 | }
|
5969 | };
|
5970 |
|
5971 |
|
5972 |
|
5973 | var writingMode = {
|
5974 | noPrefill: ['writing-mode'],
|
5975 | supportedProperty: function supportedProperty(prop) {
|
5976 | if (prop !== 'writing-mode') return false;
|
5977 |
|
5978 | if (prefix.js === 'Webkit' || prefix.js === 'ms') {
|
5979 | return prefix.css + prop;
|
5980 | }
|
5981 |
|
5982 | return prop;
|
5983 | }
|
5984 | };
|
5985 |
|
5986 |
|
5987 |
|
5988 |
|
5989 |
|
5990 |
|
5991 |
|
5992 |
|
5993 |
|
5994 |
|
5995 |
|
5996 |
|
5997 |
|
5998 |
|
5999 |
|
6000 |
|
6001 | var plugins$1 = [appearence, colorAdjust, mask, textOrientation, transform, transition, writingMode, breakPropsOld, inlineLogicalOld, unprefixed, prefixed, scrollSnap, overscrollBehavior, flex2012, flex2009];
|
6002 | var propertyDetectors = plugins$1.filter(function (p) {
|
6003 | return p.supportedProperty;
|
6004 | }).map(function (p) {
|
6005 | return p.supportedProperty;
|
6006 | });
|
6007 | var noPrefill = plugins$1.filter(function (p) {
|
6008 | return p.noPrefill;
|
6009 | }).reduce(function (a, p) {
|
6010 | a.push.apply(a, _toConsumableArray(p.noPrefill));
|
6011 | return a;
|
6012 | }, []);
|
6013 |
|
6014 | var el;
|
6015 | var cache$1 = {};
|
6016 |
|
6017 | if (isBrowser) {
|
6018 | el = document.createElement('p');
|
6019 |
|
6020 |
|
6021 |
|
6022 |
|
6023 |
|
6024 |
|
6025 |
|
6026 | var computed = window.getComputedStyle(document.documentElement, '');
|
6027 |
|
6028 | for (var key$1 in computed) {
|
6029 |
|
6030 | if (!isNaN(key$1)) cache$1[computed[key$1]] = computed[key$1];
|
6031 | }
|
6032 |
|
6033 |
|
6034 |
|
6035 | noPrefill.forEach(function (x) {
|
6036 | return delete cache$1[x];
|
6037 | });
|
6038 | }
|
6039 | |
6040 |
|
6041 |
|
6042 |
|
6043 |
|
6044 |
|
6045 |
|
6046 |
|
6047 |
|
6048 |
|
6049 |
|
6050 | function supportedProperty(prop, options) {
|
6051 | if (options === void 0) {
|
6052 | options = {};
|
6053 | }
|
6054 |
|
6055 |
|
6056 | if (!el) return prop;
|
6057 |
|
6058 | if ( cache$1[prop] != null) {
|
6059 | return cache$1[prop];
|
6060 | }
|
6061 |
|
6062 |
|
6063 | if (prop === 'transition' || prop === 'transform') {
|
6064 | options[prop] = prop in el.style;
|
6065 | }
|
6066 |
|
6067 |
|
6068 | for (var i = 0; i < propertyDetectors.length; i++) {
|
6069 | cache$1[prop] = propertyDetectors[i](prop, el.style, options);
|
6070 |
|
6071 | if (cache$1[prop]) break;
|
6072 | }
|
6073 |
|
6074 |
|
6075 |
|
6076 | try {
|
6077 | el.style[prop] = '';
|
6078 | } catch (err) {
|
6079 | return false;
|
6080 | }
|
6081 |
|
6082 | return cache$1[prop];
|
6083 | }
|
6084 |
|
6085 | var cache$1$1 = {};
|
6086 | var transitionProperties = {
|
6087 | transition: 1,
|
6088 | 'transition-property': 1,
|
6089 | '-webkit-transition': 1,
|
6090 | '-webkit-transition-property': 1
|
6091 | };
|
6092 | var transPropsRegExp = /(^\s*[\w-]+)|, (\s*[\w-]+)(?![^()]*\))/g;
|
6093 | var el$1;
|
6094 | |
6095 |
|
6096 |
|
6097 |
|
6098 |
|
6099 |
|
6100 |
|
6101 |
|
6102 |
|
6103 |
|
6104 | function prefixTransitionCallback(match, p1, p2) {
|
6105 | if (p1 === 'var') return 'var';
|
6106 | if (p1 === 'all') return 'all';
|
6107 | if (p2 === 'all') return ', all';
|
6108 | return p1 ? supportedProperty(p1) : ", " + supportedProperty(p2);
|
6109 | }
|
6110 |
|
6111 | if (isBrowser) el$1 = document.createElement('p');
|
6112 | |
6113 |
|
6114 |
|
6115 |
|
6116 |
|
6117 |
|
6118 |
|
6119 |
|
6120 |
|
6121 | function supportedValue(property, value) {
|
6122 |
|
6123 | var prefixedValue = value;
|
6124 | if (!el$1 || property === 'content') return value;
|
6125 |
|
6126 |
|
6127 |
|
6128 | if (typeof prefixedValue !== 'string' || !isNaN(parseInt(prefixedValue, 10))) {
|
6129 | return prefixedValue;
|
6130 | }
|
6131 |
|
6132 |
|
6133 | var cacheKey = property + prefixedValue;
|
6134 |
|
6135 | if ( cache$1$1[cacheKey] != null) {
|
6136 | return cache$1$1[cacheKey];
|
6137 | }
|
6138 |
|
6139 |
|
6140 | try {
|
6141 |
|
6142 | el$1.style[property] = prefixedValue;
|
6143 | } catch (err) {
|
6144 |
|
6145 | cache$1$1[cacheKey] = false;
|
6146 | return false;
|
6147 | }
|
6148 |
|
6149 |
|
6150 | if (transitionProperties[property]) {
|
6151 | prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback);
|
6152 | } else if (el$1.style[property] === '') {
|
6153 |
|
6154 | prefixedValue = prefix.css + prefixedValue;
|
6155 |
|
6156 | if (prefixedValue === '-ms-flex') el$1.style[property] = '-ms-flexbox';
|
6157 |
|
6158 | el$1.style[property] = prefixedValue;
|
6159 |
|
6160 | if (el$1.style[property] === '') {
|
6161 | cache$1$1[cacheKey] = false;
|
6162 | return false;
|
6163 | }
|
6164 | }
|
6165 |
|
6166 |
|
6167 | el$1.style[property] = '';
|
6168 |
|
6169 | cache$1$1[cacheKey] = prefixedValue;
|
6170 | return cache$1$1[cacheKey];
|
6171 | }
|
6172 |
|
6173 | |
6174 |
|
6175 |
|
6176 |
|
6177 |
|
6178 |
|
6179 | function jssVendorPrefixer() {
|
6180 | function onProcessRule(rule) {
|
6181 | if (rule.type === 'keyframes') {
|
6182 | var atRule = rule;
|
6183 | atRule.at = supportedKeyframes(atRule.at);
|
6184 | }
|
6185 | }
|
6186 |
|
6187 | function prefixStyle(style) {
|
6188 | for (var prop in style) {
|
6189 | var value = style[prop];
|
6190 |
|
6191 | if (prop === 'fallbacks' && Array.isArray(value)) {
|
6192 | style[prop] = value.map(prefixStyle);
|
6193 | continue;
|
6194 | }
|
6195 |
|
6196 | var changeProp = false;
|
6197 | var supportedProp = supportedProperty(prop);
|
6198 | if (supportedProp && supportedProp !== prop) changeProp = true;
|
6199 | var changeValue = false;
|
6200 | var supportedValue$$1 = supportedValue(supportedProp, toCssValue(value));
|
6201 | if (supportedValue$$1 && supportedValue$$1 !== value) changeValue = true;
|
6202 |
|
6203 | if (changeProp || changeValue) {
|
6204 | if (changeProp) delete style[prop];
|
6205 | style[supportedProp || prop] = supportedValue$$1 || value;
|
6206 | }
|
6207 | }
|
6208 |
|
6209 | return style;
|
6210 | }
|
6211 |
|
6212 | function onProcessStyle(style, rule) {
|
6213 | if (rule.type !== 'style') return style;
|
6214 | return prefixStyle(style);
|
6215 | }
|
6216 |
|
6217 | function onChangeValue(value, prop) {
|
6218 | return supportedValue(prop, toCssValue(value)) || value;
|
6219 | }
|
6220 |
|
6221 | return {
|
6222 | onProcessRule: onProcessRule,
|
6223 | onProcessStyle: onProcessStyle,
|
6224 | onChangeValue: onChangeValue
|
6225 | };
|
6226 | }
|
6227 |
|
6228 | |
6229 |
|
6230 |
|
6231 | function jssPropsSort() {
|
6232 | var sort = function sort(prop0, prop1) {
|
6233 | if (prop0.length === prop1.length) {
|
6234 | return prop0 > prop1 ? 1 : -1;
|
6235 | }
|
6236 |
|
6237 | return prop0.length - prop1.length;
|
6238 | };
|
6239 |
|
6240 | return {
|
6241 | onProcessStyle: function onProcessStyle(style, rule) {
|
6242 | if (rule.type !== 'style') return style;
|
6243 | var newStyle = {};
|
6244 | var props = Object.keys(style).sort(sort);
|
6245 |
|
6246 | for (var i = 0; i < props.length; i++) {
|
6247 | newStyle[props[i]] = style[props[i]];
|
6248 | }
|
6249 |
|
6250 | return newStyle;
|
6251 | }
|
6252 | };
|
6253 | }
|
6254 |
|
6255 | function jssPreset() {
|
6256 | return {
|
6257 | plugins: [functionPlugin(), jssGlobal(), jssNested(), camelCase(), defaultUnit(),
|
6258 |
|
6259 |
|
6260 | typeof window === 'undefined' ? null : jssVendorPrefixer(), jssPropsSort()]
|
6261 | };
|
6262 | }
|
6263 |
|
6264 | function mergeClasses() {
|
6265 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
6266 | var baseClasses = options.baseClasses,
|
6267 | newClasses = options.newClasses,
|
6268 | Component = options.Component;
|
6269 |
|
6270 | if (!newClasses) {
|
6271 | return baseClasses;
|
6272 | }
|
6273 |
|
6274 | var nextClasses = _extends({}, baseClasses);
|
6275 |
|
6276 | {
|
6277 | if (typeof newClasses === 'string') {
|
6278 | console.error(["Material-UI: the value `".concat(newClasses, "` ") + "provided to the classes prop of ".concat(getDisplayName(Component), " is incorrect."), 'You might want to use the className prop instead.'].join('\n'));
|
6279 | return baseClasses;
|
6280 | }
|
6281 | }
|
6282 |
|
6283 | Object.keys(newClasses).forEach(function (key) {
|
6284 | {
|
6285 | if (!baseClasses[key] && newClasses[key]) {
|
6286 | console.error(["Material-UI: the key `".concat(key, "` ") + "provided to the classes prop is not implemented in ".concat(getDisplayName(Component), "."), "You can only override one of the following: ".concat(Object.keys(baseClasses).join(','), ".")].join('\n'));
|
6287 | }
|
6288 |
|
6289 | if (newClasses[key] && typeof newClasses[key] !== 'string') {
|
6290 | console.error(["Material-UI: the key `".concat(key, "` ") + "provided to the classes prop is not valid for ".concat(getDisplayName(Component), "."), "You need to provide a non empty string instead of: ".concat(newClasses[key], ".")].join('\n'));
|
6291 | }
|
6292 | }
|
6293 |
|
6294 | if (newClasses[key]) {
|
6295 | nextClasses[key] = "".concat(baseClasses[key], " ").concat(newClasses[key]);
|
6296 | }
|
6297 | });
|
6298 | return nextClasses;
|
6299 | }
|
6300 |
|
6301 |
|
6302 | var multiKeyStore = {
|
6303 | set: function set(cache, key1, key2, value) {
|
6304 | var subCache = cache.get(key1);
|
6305 |
|
6306 | if (!subCache) {
|
6307 | subCache = new Map();
|
6308 | cache.set(key1, subCache);
|
6309 | }
|
6310 |
|
6311 | subCache.set(key2, value);
|
6312 | },
|
6313 | get: function get(cache, key1, key2) {
|
6314 | var subCache = cache.get(key1);
|
6315 | return subCache ? subCache.get(key2) : undefined;
|
6316 | },
|
6317 | delete: function _delete(cache, key1, key2) {
|
6318 | var subCache = cache.get(key1);
|
6319 | subCache.delete(key2);
|
6320 | }
|
6321 | };
|
6322 |
|
6323 | var ThemeContext = React__default.createContext(null);
|
6324 |
|
6325 | {
|
6326 | ThemeContext.displayName = 'ThemeContext';
|
6327 | }
|
6328 |
|
6329 | function useTheme() {
|
6330 | return React__default.useContext(ThemeContext);
|
6331 | }
|
6332 |
|
6333 | var jss = create(jssPreset());
|
6334 |
|
6335 |
|
6336 |
|
6337 |
|
6338 | var generateClassName = createGenerateClassName();
|
6339 |
|
6340 | var sheetsManager = new Map();
|
6341 | var defaultOptions = {
|
6342 | disableGeneration: false,
|
6343 | generateClassName: generateClassName,
|
6344 | jss: jss,
|
6345 | sheetsCache: null,
|
6346 | sheetsManager: sheetsManager,
|
6347 | sheetsRegistry: null
|
6348 | };
|
6349 | var StylesContext = React__default.createContext(defaultOptions);
|
6350 |
|
6351 | {
|
6352 | StylesContext.displayName = 'StylesContext';
|
6353 | }
|
6354 |
|
6355 | var injectFirstNode;
|
6356 |
|
6357 | function StylesProvider(props) {
|
6358 | var children = props.children,
|
6359 | _props$injectFirst = props.injectFirst,
|
6360 | injectFirst = _props$injectFirst === void 0 ? false : _props$injectFirst,
|
6361 | _props$disableGenerat = props.disableGeneration,
|
6362 | disableGeneration = _props$disableGenerat === void 0 ? false : _props$disableGenerat,
|
6363 | localOptions = _objectWithoutProperties(props, ["children", "injectFirst", "disableGeneration"]);
|
6364 |
|
6365 | var outerOptions = React__default.useContext(StylesContext);
|
6366 |
|
6367 | var context = _extends({}, outerOptions, {
|
6368 | disableGeneration: disableGeneration
|
6369 | }, localOptions);
|
6370 |
|
6371 | {
|
6372 | if (typeof window === 'undefined' && !context.sheetsManager) {
|
6373 | console.error('Material-UI: you need to use the ServerStyleSheets API when rendering on the server.');
|
6374 | }
|
6375 | }
|
6376 |
|
6377 | {
|
6378 | if (context.jss.options.insertionPoint && injectFirst) {
|
6379 | console.error('Material-UI: you cannot use a custom insertionPoint and <StylesContext injectFirst> at the same time.');
|
6380 | }
|
6381 | }
|
6382 |
|
6383 | {
|
6384 | if (injectFirst && localOptions.jss) {
|
6385 | console.error('Material-UI: you cannot use the jss and injectFirst props at the same time.');
|
6386 | }
|
6387 | }
|
6388 |
|
6389 | if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') {
|
6390 | if (!injectFirstNode) {
|
6391 | var head = document.head;
|
6392 | injectFirstNode = document.createComment('mui-inject-first');
|
6393 | head.insertBefore(injectFirstNode, head.firstChild);
|
6394 | }
|
6395 |
|
6396 | context.jss = create({
|
6397 | plugins: jssPreset().plugins,
|
6398 | insertionPoint: injectFirstNode
|
6399 | });
|
6400 | }
|
6401 |
|
6402 | return React__default.createElement(StylesContext.Provider, {
|
6403 | value: context
|
6404 | }, children);
|
6405 | }
|
6406 |
|
6407 | StylesProvider.propTypes = {
|
6408 | |
6409 |
|
6410 |
|
6411 | children: propTypes.node.isRequired,
|
6412 |
|
6413 | |
6414 |
|
6415 |
|
6416 |
|
6417 |
|
6418 |
|
6419 |
|
6420 | disableGeneration: propTypes.bool,
|
6421 |
|
6422 | |
6423 |
|
6424 |
|
6425 | generateClassName: propTypes.func,
|
6426 |
|
6427 | |
6428 |
|
6429 |
|
6430 |
|
6431 |
|
6432 | injectFirst: propTypes.bool,
|
6433 |
|
6434 | |
6435 |
|
6436 |
|
6437 | jss: propTypes.object,
|
6438 |
|
6439 | |
6440 |
|
6441 |
|
6442 | serverGenerateClassName: propTypes.func,
|
6443 |
|
6444 | |
6445 |
|
6446 |
|
6447 |
|
6448 |
|
6449 |
|
6450 |
|
6451 | sheetsCache: propTypes.object,
|
6452 |
|
6453 | |
6454 |
|
6455 |
|
6456 |
|
6457 |
|
6458 |
|
6459 |
|
6460 | sheetsManager: propTypes.object,
|
6461 |
|
6462 | |
6463 |
|
6464 |
|
6465 |
|
6466 |
|
6467 | sheetsRegistry: propTypes.object
|
6468 | } ;
|
6469 |
|
6470 | {
|
6471 | StylesProvider.propTypes = exactProp(StylesProvider.propTypes) ;
|
6472 | }
|
6473 |
|
6474 |
|
6475 |
|
6476 |
|
6477 |
|
6478 |
|
6479 |
|
6480 |
|
6481 |
|
6482 |
|
6483 | var indexCounter = -1e9;
|
6484 | function increment() {
|
6485 | indexCounter += 1;
|
6486 |
|
6487 | {
|
6488 | if (indexCounter >= 0) {
|
6489 | console.warn(['Material-UI: you might have a memory leak.', 'The indexCounter is not supposed to grow that much.'].join('\n'));
|
6490 | }
|
6491 | }
|
6492 |
|
6493 | return indexCounter;
|
6494 | }
|
6495 |
|
6496 |
|
6497 | var noopTheme = {};
|
6498 |
|
6499 | function getStylesCreator(stylesOrCreator) {
|
6500 | var themingEnabled = typeof stylesOrCreator === 'function';
|
6501 |
|
6502 | {
|
6503 | if (_typeof(stylesOrCreator) !== 'object' && !themingEnabled) {
|
6504 | console.error(['Material-UI: the `styles` argument provided is invalid.', 'You need to provide a function generating the styles or a styles object.'].join('\n'));
|
6505 | }
|
6506 | }
|
6507 |
|
6508 | return {
|
6509 | create: function create(theme, name) {
|
6510 | var styles;
|
6511 |
|
6512 | try {
|
6513 | styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
|
6514 | } catch (err) {
|
6515 | {
|
6516 | if (themingEnabled === true && theme === noopTheme) {
|
6517 |
|
6518 | console.error(['Material-UI: the `styles` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
|
6519 | }
|
6520 | }
|
6521 |
|
6522 | throw err;
|
6523 | }
|
6524 |
|
6525 | if (!name || !theme.overrides || !theme.overrides[name]) {
|
6526 | return styles;
|
6527 | }
|
6528 |
|
6529 | var overrides = theme.overrides[name];
|
6530 |
|
6531 | var stylesWithOverrides = _extends({}, styles);
|
6532 |
|
6533 | Object.keys(overrides).forEach(function (key) {
|
6534 | {
|
6535 | if (!stylesWithOverrides[key]) {
|
6536 | console.warn(['Material-UI: you are trying to override a style that does not exist.', "Fix the `".concat(key, "` key of `theme.overrides.").concat(name, "`.")].join('\n'));
|
6537 | }
|
6538 | }
|
6539 |
|
6540 | stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);
|
6541 | });
|
6542 | return stylesWithOverrides;
|
6543 | },
|
6544 | options: {}
|
6545 | };
|
6546 | }
|
6547 |
|
6548 | function getClasses(_ref, classes, Component) {
|
6549 | var state = _ref.state,
|
6550 | stylesOptions = _ref.stylesOptions;
|
6551 |
|
6552 | if (stylesOptions.disableGeneration) {
|
6553 | return classes || {};
|
6554 | }
|
6555 |
|
6556 | if (!state.cacheClasses) {
|
6557 | state.cacheClasses = {
|
6558 |
|
6559 | value: null,
|
6560 |
|
6561 | lastProp: null,
|
6562 |
|
6563 | lastJSS: {}
|
6564 | };
|
6565 | }
|
6566 |
|
6567 |
|
6568 |
|
6569 | var generate = false;
|
6570 |
|
6571 | if (state.classes !== state.cacheClasses.lastJSS) {
|
6572 | state.cacheClasses.lastJSS = state.classes;
|
6573 | generate = true;
|
6574 | }
|
6575 |
|
6576 | if (classes !== state.cacheClasses.lastProp) {
|
6577 | state.cacheClasses.lastProp = classes;
|
6578 | generate = true;
|
6579 | }
|
6580 |
|
6581 | if (generate) {
|
6582 | state.cacheClasses.value = mergeClasses({
|
6583 | baseClasses: state.cacheClasses.lastJSS,
|
6584 | newClasses: classes,
|
6585 | Component: Component
|
6586 | });
|
6587 | }
|
6588 |
|
6589 | return state.cacheClasses.value;
|
6590 | }
|
6591 |
|
6592 | function attach(_ref2, props) {
|
6593 | var state = _ref2.state,
|
6594 | theme = _ref2.theme,
|
6595 | stylesOptions = _ref2.stylesOptions,
|
6596 | stylesCreator = _ref2.stylesCreator,
|
6597 | name = _ref2.name;
|
6598 |
|
6599 | if (stylesOptions.disableGeneration) {
|
6600 | return;
|
6601 | }
|
6602 |
|
6603 | var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
|
6604 |
|
6605 | if (!sheetManager) {
|
6606 | sheetManager = {
|
6607 | refs: 0,
|
6608 | staticSheet: null,
|
6609 | dynamicStyles: null
|
6610 | };
|
6611 | multiKeyStore.set(stylesOptions.sheetsManager, stylesCreator, theme, sheetManager);
|
6612 | }
|
6613 |
|
6614 | var options = _extends({}, stylesCreator.options, {}, stylesOptions, {
|
6615 | theme: theme,
|
6616 | flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'
|
6617 | });
|
6618 |
|
6619 | options.generateId = options.serverGenerateClassName || options.generateClassName;
|
6620 | var sheetsRegistry = stylesOptions.sheetsRegistry;
|
6621 |
|
6622 | if (sheetManager.refs === 0) {
|
6623 | var staticSheet;
|
6624 |
|
6625 | if (stylesOptions.sheetsCache) {
|
6626 | staticSheet = multiKeyStore.get(stylesOptions.sheetsCache, stylesCreator, theme);
|
6627 | }
|
6628 |
|
6629 | var styles = stylesCreator.create(theme, name);
|
6630 |
|
6631 | if (!staticSheet) {
|
6632 | staticSheet = stylesOptions.jss.createStyleSheet(styles, _extends({
|
6633 | link: false
|
6634 | }, options));
|
6635 | staticSheet.attach();
|
6636 |
|
6637 | if (stylesOptions.sheetsCache) {
|
6638 | multiKeyStore.set(stylesOptions.sheetsCache, stylesCreator, theme, staticSheet);
|
6639 | }
|
6640 | }
|
6641 |
|
6642 | if (sheetsRegistry) {
|
6643 | sheetsRegistry.add(staticSheet);
|
6644 | }
|
6645 |
|
6646 | sheetManager.staticSheet = staticSheet;
|
6647 | sheetManager.dynamicStyles = getDynamicStyles(styles);
|
6648 | }
|
6649 |
|
6650 | if (sheetManager.dynamicStyles) {
|
6651 | var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({
|
6652 | link: true
|
6653 | }, options));
|
6654 | dynamicSheet.update(props).attach();
|
6655 | state.dynamicSheet = dynamicSheet;
|
6656 | state.classes = mergeClasses({
|
6657 | baseClasses: sheetManager.staticSheet.classes,
|
6658 | newClasses: dynamicSheet.classes
|
6659 | });
|
6660 |
|
6661 | if (sheetsRegistry) {
|
6662 | sheetsRegistry.add(dynamicSheet);
|
6663 | }
|
6664 | } else {
|
6665 | state.classes = sheetManager.staticSheet.classes;
|
6666 | }
|
6667 |
|
6668 | sheetManager.refs += 1;
|
6669 | }
|
6670 |
|
6671 | function update(_ref3, props) {
|
6672 | var state = _ref3.state;
|
6673 |
|
6674 | if (state.dynamicSheet) {
|
6675 | state.dynamicSheet.update(props);
|
6676 | }
|
6677 | }
|
6678 |
|
6679 | function detach(_ref4) {
|
6680 | var state = _ref4.state,
|
6681 | theme = _ref4.theme,
|
6682 | stylesOptions = _ref4.stylesOptions,
|
6683 | stylesCreator = _ref4.stylesCreator;
|
6684 |
|
6685 | if (stylesOptions.disableGeneration) {
|
6686 | return;
|
6687 | }
|
6688 |
|
6689 | var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
|
6690 | sheetManager.refs -= 1;
|
6691 | var sheetsRegistry = stylesOptions.sheetsRegistry;
|
6692 |
|
6693 | if (sheetManager.refs === 0) {
|
6694 | multiKeyStore.delete(stylesOptions.sheetsManager, stylesCreator, theme);
|
6695 | stylesOptions.jss.removeStyleSheet(sheetManager.staticSheet);
|
6696 |
|
6697 | if (sheetsRegistry) {
|
6698 | sheetsRegistry.remove(sheetManager.staticSheet);
|
6699 | }
|
6700 | }
|
6701 |
|
6702 | if (state.dynamicSheet) {
|
6703 | stylesOptions.jss.removeStyleSheet(state.dynamicSheet);
|
6704 |
|
6705 | if (sheetsRegistry) {
|
6706 | sheetsRegistry.remove(state.dynamicSheet);
|
6707 | }
|
6708 | }
|
6709 | }
|
6710 |
|
6711 | function useSynchronousEffect(func, values) {
|
6712 | var key = React__default.useRef([]);
|
6713 | var output;
|
6714 |
|
6715 | var currentKey = React__default.useMemo(function () {
|
6716 | return {};
|
6717 | }, values);
|
6718 |
|
6719 |
|
6720 | if (key.current !== currentKey) {
|
6721 | key.current = currentKey;
|
6722 | output = func();
|
6723 | }
|
6724 |
|
6725 | React__default.useEffect(function () {
|
6726 | return function () {
|
6727 | if (output) {
|
6728 | output();
|
6729 | }
|
6730 | };
|
6731 | }, [currentKey]
|
6732 | );
|
6733 | }
|
6734 |
|
6735 | function makeStyles(stylesOrCreator) {
|
6736 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
6737 |
|
6738 | var name = options.name,
|
6739 | classNamePrefixOption = options.classNamePrefix,
|
6740 | Component = options.Component,
|
6741 | _options$defaultTheme = options.defaultTheme,
|
6742 | defaultTheme = _options$defaultTheme === void 0 ? noopTheme : _options$defaultTheme,
|
6743 | stylesOptions2 = _objectWithoutProperties(options, ["name", "classNamePrefix", "Component", "defaultTheme"]);
|
6744 |
|
6745 | var stylesCreator = getStylesCreator(stylesOrCreator);
|
6746 | var classNamePrefix = name || classNamePrefixOption || 'makeStyles';
|
6747 | stylesCreator.options = {
|
6748 | index: increment(),
|
6749 | name: name,
|
6750 | meta: classNamePrefix,
|
6751 | classNamePrefix: classNamePrefix
|
6752 | };
|
6753 | return function () {
|
6754 | var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
6755 | var theme = useTheme() || defaultTheme;
|
6756 |
|
6757 | var stylesOptions = _extends({}, React__default.useContext(StylesContext), {}, stylesOptions2);
|
6758 |
|
6759 | var instance = React__default.useRef();
|
6760 | var shouldUpdate = React__default.useRef();
|
6761 | useSynchronousEffect(function () {
|
6762 | var current = {
|
6763 | name: name,
|
6764 | state: {},
|
6765 | stylesCreator: stylesCreator,
|
6766 | stylesOptions: stylesOptions,
|
6767 | theme: theme
|
6768 | };
|
6769 | attach(current, props);
|
6770 | shouldUpdate.current = false;
|
6771 | instance.current = current;
|
6772 | return function () {
|
6773 | detach(current);
|
6774 | };
|
6775 | }, [theme, stylesCreator]);
|
6776 | React__default.useEffect(function () {
|
6777 | if (shouldUpdate.current) {
|
6778 | update(instance.current, props);
|
6779 | }
|
6780 |
|
6781 | shouldUpdate.current = true;
|
6782 | });
|
6783 | return getClasses(instance.current, props.classes, Component);
|
6784 | };
|
6785 | }
|
6786 |
|
6787 | function _classCallCheck(instance, Constructor) {
|
6788 | if (!(instance instanceof Constructor)) {
|
6789 | throw new TypeError("Cannot call a class as a function");
|
6790 | }
|
6791 | }
|
6792 |
|
6793 | var ServerStyleSheets =
|
6794 |
|
6795 | function () {
|
6796 | function ServerStyleSheets() {
|
6797 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
6798 |
|
6799 | _classCallCheck(this, ServerStyleSheets);
|
6800 |
|
6801 | this.options = options;
|
6802 | }
|
6803 |
|
6804 | _createClass(ServerStyleSheets, [{
|
6805 | key: "collect",
|
6806 | value: function collect(children) {
|
6807 |
|
6808 | var sheetsManager = new Map();
|
6809 |
|
6810 | this.sheetsRegistry = new SheetsRegistry();
|
6811 |
|
6812 | var generateClassName = createGenerateClassName();
|
6813 | return React__default.createElement(StylesProvider, _extends({
|
6814 | sheetsManager: sheetsManager,
|
6815 | serverGenerateClassName: generateClassName,
|
6816 | sheetsRegistry: this.sheetsRegistry
|
6817 | }, this.options), children);
|
6818 | }
|
6819 | }, {
|
6820 | key: "toString",
|
6821 | value: function toString() {
|
6822 | return this.sheetsRegistry ? this.sheetsRegistry.toString() : '';
|
6823 | }
|
6824 | }, {
|
6825 | key: "getStyleElement",
|
6826 | value: function getStyleElement(props) {
|
6827 | return React__default.createElement('style', _extends({
|
6828 | id: 'jss-server-side',
|
6829 | key: 'jss-server-side',
|
6830 | dangerouslySetInnerHTML: {
|
6831 | __html: this.toString()
|
6832 | }
|
6833 | }, props));
|
6834 | }
|
6835 | }]);
|
6836 |
|
6837 | return ServerStyleSheets;
|
6838 | }();
|
6839 |
|
6840 | function toVal(mix) {
|
6841 | var k, y, str='';
|
6842 | if (mix) {
|
6843 | if (typeof mix === 'object') {
|
6844 | if (!!mix.push) {
|
6845 | for (k=0; k < mix.length; k++) {
|
6846 | if (mix[k] && (y = toVal(mix[k]))) {
|
6847 | str && (str += ' ');
|
6848 | str += y;
|
6849 | }
|
6850 | }
|
6851 | } else {
|
6852 | for (k in mix) {
|
6853 | if (mix[k] && (y = toVal(k))) {
|
6854 | str && (str += ' ');
|
6855 | str += y;
|
6856 | }
|
6857 | }
|
6858 | }
|
6859 | } else if (typeof mix !== 'boolean' && !mix.call) {
|
6860 | str && (str += ' ');
|
6861 | str += mix;
|
6862 | }
|
6863 | }
|
6864 | return str;
|
6865 | }
|
6866 |
|
6867 | function clsx () {
|
6868 | var i=0, x, str='';
|
6869 | while (i < arguments.length) {
|
6870 | if (x = toVal(arguments[i++])) {
|
6871 | str && (str += ' ');
|
6872 | str += x;
|
6873 | }
|
6874 | }
|
6875 | return str;
|
6876 | }
|
6877 |
|
6878 | |
6879 |
|
6880 |
|
6881 |
|
6882 | var REACT_STATICS = {
|
6883 | childContextTypes: true,
|
6884 | contextType: true,
|
6885 | contextTypes: true,
|
6886 | defaultProps: true,
|
6887 | displayName: true,
|
6888 | getDefaultProps: true,
|
6889 | getDerivedStateFromError: true,
|
6890 | getDerivedStateFromProps: true,
|
6891 | mixins: true,
|
6892 | propTypes: true,
|
6893 | type: true
|
6894 | };
|
6895 | var KNOWN_STATICS = {
|
6896 | name: true,
|
6897 | length: true,
|
6898 | prototype: true,
|
6899 | caller: true,
|
6900 | callee: true,
|
6901 | arguments: true,
|
6902 | arity: true
|
6903 | };
|
6904 | var FORWARD_REF_STATICS = {
|
6905 | '$$typeof': true,
|
6906 | render: true,
|
6907 | defaultProps: true,
|
6908 | displayName: true,
|
6909 | propTypes: true
|
6910 | };
|
6911 | var MEMO_STATICS = {
|
6912 | '$$typeof': true,
|
6913 | compare: true,
|
6914 | defaultProps: true,
|
6915 | displayName: true,
|
6916 | propTypes: true,
|
6917 | type: true
|
6918 | };
|
6919 | var TYPE_STATICS = {};
|
6920 | TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
|
6921 |
|
6922 | function getStatics(component) {
|
6923 | if (reactIs.isMemo(component)) {
|
6924 | return MEMO_STATICS;
|
6925 | }
|
6926 |
|
6927 | return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
|
6928 | }
|
6929 |
|
6930 | var defineProperty = Object.defineProperty;
|
6931 | var getOwnPropertyNames = Object.getOwnPropertyNames;
|
6932 | var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols;
|
6933 | var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
|
6934 | var getPrototypeOf = Object.getPrototypeOf;
|
6935 | var objectPrototype = Object.prototype;
|
6936 | function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
|
6937 | if (typeof sourceComponent !== 'string') {
|
6938 |
|
6939 | if (objectPrototype) {
|
6940 | var inheritedComponent = getPrototypeOf(sourceComponent);
|
6941 |
|
6942 | if (inheritedComponent && inheritedComponent !== objectPrototype) {
|
6943 | hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
|
6944 | }
|
6945 | }
|
6946 |
|
6947 | var keys = getOwnPropertyNames(sourceComponent);
|
6948 |
|
6949 | if (getOwnPropertySymbols$1) {
|
6950 | keys = keys.concat(getOwnPropertySymbols$1(sourceComponent));
|
6951 | }
|
6952 |
|
6953 | var targetStatics = getStatics(targetComponent);
|
6954 | var sourceStatics = getStatics(sourceComponent);
|
6955 |
|
6956 | for (var i = 0; i < keys.length; ++i) {
|
6957 | var key = keys[i];
|
6958 |
|
6959 | if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
|
6960 | var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
|
6961 |
|
6962 | try {
|
6963 |
|
6964 | defineProperty(targetComponent, key, descriptor);
|
6965 | } catch (e) {}
|
6966 | }
|
6967 | }
|
6968 | }
|
6969 |
|
6970 | return targetComponent;
|
6971 | }
|
6972 |
|
6973 | var hoistNonReactStatics_cjs = hoistNonReactStatics;
|
6974 |
|
6975 | function omit(input, fields) {
|
6976 | var output = {};
|
6977 | Object.keys(input).forEach(function (prop) {
|
6978 | if (fields.indexOf(prop) === -1) {
|
6979 | output[prop] = input[prop];
|
6980 | }
|
6981 | });
|
6982 | return output;
|
6983 | }
|
6984 |
|
6985 |
|
6986 |
|
6987 | function styled(Component) {
|
6988 | var componentCreator = function componentCreator(style) {
|
6989 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
6990 |
|
6991 | var name = options.name,
|
6992 | stylesOptions = _objectWithoutProperties(options, ["name"]);
|
6993 |
|
6994 | if ( Component === undefined) {
|
6995 | throw new Error(['You are calling styled(Component)(style) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
|
6996 | }
|
6997 |
|
6998 | var classNamePrefix = name;
|
6999 |
|
7000 | {
|
7001 | if (!name) {
|
7002 |
|
7003 | var displayName = getDisplayName(Component);
|
7004 |
|
7005 | if (displayName !== undefined) {
|
7006 | classNamePrefix = displayName;
|
7007 | }
|
7008 | }
|
7009 | }
|
7010 |
|
7011 | var stylesOrCreator = typeof style === 'function' ? function (theme) {
|
7012 | return {
|
7013 | root: function root(props) {
|
7014 | return style(_extends({
|
7015 | theme: theme
|
7016 | }, props));
|
7017 | }
|
7018 | };
|
7019 | } : {
|
7020 | root: style
|
7021 | };
|
7022 | var useStyles = makeStyles(stylesOrCreator, _extends({
|
7023 | Component: Component,
|
7024 | name: name || Component.displayName,
|
7025 | classNamePrefix: classNamePrefix
|
7026 | }, stylesOptions));
|
7027 | var filterProps;
|
7028 | var propTypes$1 = {};
|
7029 |
|
7030 | if (style.filterProps) {
|
7031 | filterProps = style.filterProps;
|
7032 | delete style.filterProps;
|
7033 | }
|
7034 |
|
7035 |
|
7036 |
|
7037 | if (style.propTypes) {
|
7038 | propTypes$1 = style.propTypes;
|
7039 | delete style.propTypes;
|
7040 | }
|
7041 |
|
7042 |
|
7043 |
|
7044 | var StyledComponent = React__default.forwardRef(function StyledComponent(props, ref) {
|
7045 | var children = props.children,
|
7046 | classNameProp = props.className,
|
7047 | clone = props.clone,
|
7048 | ComponentProp = props.component,
|
7049 | other = _objectWithoutProperties(props, ["children", "className", "clone", "component"]);
|
7050 |
|
7051 | var classes = useStyles(props);
|
7052 | var className = clsx(classes.root, classNameProp);
|
7053 | var spread = other;
|
7054 |
|
7055 | if (filterProps) {
|
7056 | spread = omit(spread, filterProps);
|
7057 | }
|
7058 |
|
7059 | if (clone) {
|
7060 | return React__default.cloneElement(children, _extends({
|
7061 | className: clsx(children.props.className, className)
|
7062 | }, spread));
|
7063 | }
|
7064 |
|
7065 | if (typeof children === 'function') {
|
7066 | return children(_extends({
|
7067 | className: className
|
7068 | }, spread));
|
7069 | }
|
7070 |
|
7071 | var FinalComponent = ComponentProp || Component;
|
7072 | return React__default.createElement(FinalComponent, _extends({
|
7073 | ref: ref,
|
7074 | className: className
|
7075 | }, spread), children);
|
7076 | });
|
7077 | StyledComponent.propTypes = _extends({
|
7078 | |
7079 |
|
7080 |
|
7081 | children: propTypes.oneOfType([propTypes.node, propTypes.func]),
|
7082 |
|
7083 | |
7084 |
|
7085 |
|
7086 | className: propTypes.string,
|
7087 |
|
7088 | |
7089 |
|
7090 |
|
7091 |
|
7092 |
|
7093 |
|
7094 | clone: chainPropTypes(propTypes.bool, function (props) {
|
7095 | if (props.clone && props.component) {
|
7096 | return new Error('You can not use the clone and component prop at the same time.');
|
7097 | }
|
7098 |
|
7099 | return null;
|
7100 | }),
|
7101 |
|
7102 | |
7103 |
|
7104 |
|
7105 |
|
7106 | component: propTypes.elementType
|
7107 | }, propTypes$1) ;
|
7108 |
|
7109 | {
|
7110 | StyledComponent.displayName = "Styled(".concat(classNamePrefix, ")");
|
7111 | }
|
7112 |
|
7113 | hoistNonReactStatics_cjs(StyledComponent, Component);
|
7114 | return StyledComponent;
|
7115 | };
|
7116 |
|
7117 | return componentCreator;
|
7118 | }
|
7119 |
|
7120 | function mergeOuterLocalTheme(outerTheme, localTheme) {
|
7121 | if (typeof localTheme === 'function') {
|
7122 | var mergedTheme = localTheme(outerTheme);
|
7123 |
|
7124 | {
|
7125 | if (!mergedTheme) {
|
7126 | console.error(['Material-UI: you should return an object from your theme function, i.e.', '<ThemeProvider theme={() => ({})} />'].join('\n'));
|
7127 | }
|
7128 | }
|
7129 |
|
7130 | return mergedTheme;
|
7131 | }
|
7132 |
|
7133 | return _extends({}, outerTheme, {}, localTheme);
|
7134 | }
|
7135 | |
7136 |
|
7137 |
|
7138 |
|
7139 |
|
7140 |
|
7141 |
|
7142 | function ThemeProvider(props) {
|
7143 | var children = props.children,
|
7144 | localTheme = props.theme;
|
7145 | var outerTheme = useTheme();
|
7146 |
|
7147 | {
|
7148 | if (outerTheme === null && typeof localTheme === 'function') {
|
7149 | console.error(['Material-UI: you are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
|
7150 | }
|
7151 | }
|
7152 |
|
7153 | var theme = React__default.useMemo(function () {
|
7154 | var output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
|
7155 |
|
7156 | if (output != null) {
|
7157 | output[nested] = outerTheme !== null;
|
7158 | }
|
7159 |
|
7160 | return output;
|
7161 | }, [localTheme, outerTheme]);
|
7162 | return React__default.createElement(ThemeContext.Provider, {
|
7163 | value: theme
|
7164 | }, children);
|
7165 | }
|
7166 |
|
7167 | ThemeProvider.propTypes = {
|
7168 | |
7169 |
|
7170 |
|
7171 | children: propTypes.node.isRequired,
|
7172 |
|
7173 | |
7174 |
|
7175 |
|
7176 | theme: propTypes.oneOfType([propTypes.object, propTypes.func]).isRequired
|
7177 | } ;
|
7178 |
|
7179 | {
|
7180 | ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) ;
|
7181 | }
|
7182 |
|
7183 |
|
7184 |
|
7185 |
|
7186 | var withStyles = function withStyles(stylesOrCreator) {
|
7187 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
7188 | return function (Component) {
|
7189 | var defaultTheme = options.defaultTheme,
|
7190 | _options$withTheme = options.withTheme,
|
7191 | withTheme = _options$withTheme === void 0 ? false : _options$withTheme,
|
7192 | name = options.name,
|
7193 | stylesOptions = _objectWithoutProperties(options, ["defaultTheme", "withTheme", "name"]);
|
7194 |
|
7195 | {
|
7196 | if (Component === undefined) {
|
7197 | throw new Error(['You are calling withStyles(styles)(Component) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
|
7198 | }
|
7199 | }
|
7200 |
|
7201 | var classNamePrefix = name;
|
7202 |
|
7203 | {
|
7204 | if (!name) {
|
7205 |
|
7206 | var displayName = getDisplayName(Component);
|
7207 |
|
7208 | if (displayName !== undefined) {
|
7209 | classNamePrefix = displayName;
|
7210 | }
|
7211 | }
|
7212 | }
|
7213 |
|
7214 | var useStyles = makeStyles(stylesOrCreator, _extends({
|
7215 | defaultTheme: defaultTheme,
|
7216 | Component: Component,
|
7217 | name: name || Component.displayName,
|
7218 | classNamePrefix: classNamePrefix
|
7219 | }, stylesOptions));
|
7220 | var WithStyles = React__default.forwardRef(function WithStyles(props, ref) {
|
7221 | var classesProp = props.classes,
|
7222 | innerRef = props.innerRef,
|
7223 | other = _objectWithoutProperties(props, ["classes", "innerRef"]);
|
7224 |
|
7225 | var classes = useStyles(props);
|
7226 | var theme;
|
7227 | var more = other;
|
7228 |
|
7229 | if (typeof name === 'string' || withTheme) {
|
7230 |
|
7231 |
|
7232 | theme = useTheme() || defaultTheme;
|
7233 |
|
7234 | if (name) {
|
7235 | more = getThemeProps({
|
7236 | theme: theme,
|
7237 | name: name,
|
7238 | props: other
|
7239 | });
|
7240 | }
|
7241 |
|
7242 |
|
7243 |
|
7244 | if (withTheme && !more.theme) {
|
7245 | more.theme = theme;
|
7246 | }
|
7247 | }
|
7248 |
|
7249 | return React__default.createElement(Component, _extends({
|
7250 | ref: innerRef || ref,
|
7251 | classes: classes
|
7252 | }, more));
|
7253 | });
|
7254 | WithStyles.propTypes = {
|
7255 | |
7256 |
|
7257 |
|
7258 | classes: propTypes.object,
|
7259 |
|
7260 | |
7261 |
|
7262 |
|
7263 |
|
7264 | innerRef: chainPropTypes(propTypes.oneOfType([propTypes.func, propTypes.object]), function (props) {
|
7265 | if (props.innerRef == null) {
|
7266 | return null;
|
7267 | }
|
7268 |
|
7269 | return null;
|
7270 |
|
7271 |
|
7272 |
|
7273 | })
|
7274 | } ;
|
7275 |
|
7276 |
|
7277 |
|
7278 | WithStyles.defaultProps = Component.defaultProps;
|
7279 |
|
7280 | {
|
7281 | WithStyles.displayName = "WithStyles(".concat(getDisplayName(Component), ")");
|
7282 | }
|
7283 |
|
7284 | hoistNonReactStatics_cjs(WithStyles, Component);
|
7285 |
|
7286 | {
|
7287 |
|
7288 | WithStyles.Naked = Component;
|
7289 | WithStyles.options = options;
|
7290 | WithStyles.useStyles = useStyles;
|
7291 | }
|
7292 |
|
7293 | return WithStyles;
|
7294 | };
|
7295 | };
|
7296 |
|
7297 | function withThemeCreator() {
|
7298 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
7299 | var defaultTheme = options.defaultTheme;
|
7300 |
|
7301 | var withTheme = function withTheme(Component) {
|
7302 | {
|
7303 | if (Component === undefined) {
|
7304 | throw new Error(['You are calling withTheme(Component) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
|
7305 | }
|
7306 | }
|
7307 |
|
7308 | var WithTheme = React__default.forwardRef(function WithTheme(props, ref) {
|
7309 | var innerRef = props.innerRef,
|
7310 | other = _objectWithoutProperties(props, ["innerRef"]);
|
7311 |
|
7312 | var theme = useTheme() || defaultTheme;
|
7313 | return React__default.createElement(Component, _extends({
|
7314 | theme: theme,
|
7315 | ref: innerRef || ref
|
7316 | }, other));
|
7317 | });
|
7318 | WithTheme.propTypes = {
|
7319 | |
7320 |
|
7321 |
|
7322 |
|
7323 | innerRef: chainPropTypes(propTypes.oneOfType([propTypes.func, propTypes.object]), function (props) {
|
7324 | if (props.innerRef == null) {
|
7325 | return null;
|
7326 | }
|
7327 |
|
7328 | return new Error('Material-UI: the `innerRef` prop is deprecated and will be removed in v5. ' + 'Refs are now automatically forwarded to the inner component.');
|
7329 | })
|
7330 | } ;
|
7331 |
|
7332 | {
|
7333 | WithTheme.displayName = "WithTheme(".concat(getDisplayName(Component), ")");
|
7334 | }
|
7335 |
|
7336 | hoistNonReactStatics_cjs(WithTheme, Component);
|
7337 |
|
7338 | {
|
7339 |
|
7340 | WithTheme.Naked = Component;
|
7341 | }
|
7342 |
|
7343 | return WithTheme;
|
7344 | };
|
7345 |
|
7346 | return withTheme;
|
7347 | }
|
7348 |
|
7349 |
|
7350 |
|
7351 | var withTheme = withThemeCreator();
|
7352 |
|
7353 |
|
7354 |
|
7355 | function createStyles$1(styles) {
|
7356 |
|
7357 |
|
7358 |
|
7359 |
|
7360 |
|
7361 |
|
7362 |
|
7363 |
|
7364 | return createStyles(styles);
|
7365 | }
|
7366 |
|
7367 | var defaultTheme = createMuiTheme();
|
7368 |
|
7369 | function makeStyles$1(stylesOrCreator) {
|
7370 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
7371 | return makeStyles(stylesOrCreator, _extends({
|
7372 | defaultTheme: defaultTheme
|
7373 | }, options));
|
7374 | }
|
7375 |
|
7376 | var e=function(e){return parseFloat(e)};function convertLength(r){return null==r&&(r=r),function(n,t,i,f){null==i&&(i=r),null==f&&(f=i);var l=String(n).match(/[\d.\-\+]*\s*(.*)/)[1]||"";if(l===t)return n;var u=e(n);if("px"!==l)if("em"===l)u=e(n)*e(i);else if("rem"===l)u=e(n)*e(r);else{if("ex"!==l)return n;u=e(n)*e(i)*2;}var a=u;if("px"!==t)if("em"===t)a=u/e(f);else if("rem"===t)a=u/e(r);else{if("ex"!==t)return n;a=u/e(f)/2;}return parseFloat(a.toFixed(5))+t}}
|
7377 |
|
7378 | function alignProperty(_ref) {
|
7379 | var size = _ref.size,
|
7380 | grid = _ref.grid;
|
7381 | var sizeBelow = size - size % grid;
|
7382 | var sizeAbove = sizeBelow + grid;
|
7383 | return size - sizeBelow < sizeAbove - size ? sizeBelow : sizeAbove;
|
7384 | }
|
7385 |
|
7386 |
|
7387 |
|
7388 | function fontGrid(_ref2) {
|
7389 | var lineHeight = _ref2.lineHeight,
|
7390 | pixels = _ref2.pixels,
|
7391 | htmlFontSize = _ref2.htmlFontSize;
|
7392 | return pixels / (lineHeight * htmlFontSize);
|
7393 | }
|
7394 | |
7395 |
|
7396 |
|
7397 |
|
7398 |
|
7399 |
|
7400 |
|
7401 |
|
7402 |
|
7403 |
|
7404 |
|
7405 |
|
7406 |
|
7407 |
|
7408 |
|
7409 |
|
7410 |
|
7411 |
|
7412 |
|
7413 |
|
7414 |
|
7415 |
|
7416 |
|
7417 |
|
7418 |
|
7419 |
|
7420 |
|
7421 |
|
7422 |
|
7423 |
|
7424 |
|
7425 |
|
7426 |
|
7427 | function responsiveProperty(_ref3) {
|
7428 | var cssProperty = _ref3.cssProperty,
|
7429 | min = _ref3.min,
|
7430 | max = _ref3.max,
|
7431 | _ref3$unit = _ref3.unit,
|
7432 | unit = _ref3$unit === void 0 ? 'rem' : _ref3$unit,
|
7433 | _ref3$breakpoints = _ref3.breakpoints,
|
7434 | breakpoints = _ref3$breakpoints === void 0 ? [600, 960, 1280] : _ref3$breakpoints,
|
7435 | _ref3$transform = _ref3.transform,
|
7436 | transform = _ref3$transform === void 0 ? null : _ref3$transform;
|
7437 |
|
7438 | var output = _defineProperty({}, cssProperty, "".concat(min).concat(unit));
|
7439 |
|
7440 | var factor = (max - min) / breakpoints[breakpoints.length - 1];
|
7441 | breakpoints.forEach(function (breakpoint) {
|
7442 | var value = min + factor * breakpoint;
|
7443 |
|
7444 | if (transform !== null) {
|
7445 | value = transform(value);
|
7446 | }
|
7447 |
|
7448 | output["@media (min-width:".concat(breakpoint, "px)")] = _defineProperty({}, cssProperty, "".concat(Math.round(value * 10000) / 10000).concat(unit));
|
7449 | });
|
7450 | return output;
|
7451 | }
|
7452 |
|
7453 | function isUnitless(value) {
|
7454 | return String(parseFloat(value)).length === String(value).length;
|
7455 | }
|
7456 |
|
7457 | function responsiveFontSizes(themeInput) {
|
7458 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
7459 | var _options$breakpoints = options.breakpoints,
|
7460 | breakpoints = _options$breakpoints === void 0 ? ['sm', 'md', 'lg'] : _options$breakpoints,
|
7461 | _options$disableAlign = options.disableAlign,
|
7462 | disableAlign = _options$disableAlign === void 0 ? false : _options$disableAlign,
|
7463 | _options$factor = options.factor,
|
7464 | factor = _options$factor === void 0 ? 2 : _options$factor,
|
7465 | _options$variants = options.variants,
|
7466 | variants = _options$variants === void 0 ? ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline'] : _options$variants;
|
7467 |
|
7468 | var theme = _extends({}, themeInput);
|
7469 |
|
7470 | theme.typography = _extends({}, theme.typography);
|
7471 | var typography = theme.typography;
|
7472 |
|
7473 |
|
7474 | var convert = convertLength(typography.htmlFontSize);
|
7475 | var breakpointValues = breakpoints.map(function (x) {
|
7476 | return theme.breakpoints.values[x];
|
7477 | });
|
7478 | variants.forEach(function (variant) {
|
7479 | var style = typography[variant];
|
7480 | var remFontSize = parseFloat(convert(style.fontSize, 'rem'));
|
7481 |
|
7482 | if (remFontSize <= 1) {
|
7483 | return;
|
7484 | }
|
7485 |
|
7486 | var maxFontSize = remFontSize;
|
7487 | var minFontSize = 1 + (maxFontSize - 1) / factor;
|
7488 | var lineHeight = style.lineHeight;
|
7489 |
|
7490 | if (!isUnitless(lineHeight) && !disableAlign) {
|
7491 | throw new Error(["Material-UI: unsupported non-unitless line height with grid alignment.", 'Use unitless line heights instead.'].join('\n'));
|
7492 | }
|
7493 |
|
7494 | if (!isUnitless(lineHeight)) {
|
7495 |
|
7496 | lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
|
7497 | }
|
7498 |
|
7499 | var transform = null;
|
7500 |
|
7501 | if (!disableAlign) {
|
7502 | transform = function transform(value) {
|
7503 | return alignProperty({
|
7504 | size: value,
|
7505 | grid: fontGrid({
|
7506 | pixels: 4,
|
7507 | lineHeight: lineHeight,
|
7508 | htmlFontSize: typography.htmlFontSize
|
7509 | })
|
7510 | });
|
7511 | };
|
7512 | }
|
7513 |
|
7514 | typography[variant] = _extends({}, style, {}, responsiveProperty({
|
7515 | cssProperty: 'fontSize',
|
7516 | min: minFontSize,
|
7517 | max: maxFontSize,
|
7518 | unit: 'rem',
|
7519 | breakpoints: breakpointValues,
|
7520 | transform: transform
|
7521 | }));
|
7522 | });
|
7523 | return theme;
|
7524 | }
|
7525 |
|
7526 | var styled$1 = function styled$1(Component) {
|
7527 | var componentCreator = styled(Component);
|
7528 | return function (style, options) {
|
7529 | return componentCreator(style, _extends({
|
7530 | defaultTheme: defaultTheme
|
7531 | }, options));
|
7532 | };
|
7533 | };
|
7534 |
|
7535 | function useTheme$1() {
|
7536 | return useTheme() || defaultTheme;
|
7537 | }
|
7538 |
|
7539 | function withStyles$1(stylesOrCreator, options) {
|
7540 | return withStyles(stylesOrCreator, _extends({
|
7541 | defaultTheme: defaultTheme
|
7542 | }, options));
|
7543 | }
|
7544 |
|
7545 | var withTheme$1 = withThemeCreator({
|
7546 | defaultTheme: defaultTheme
|
7547 | });
|
7548 |
|
7549 |
|
7550 |
|
7551 |
|
7552 |
|
7553 | function capitalize(string) {
|
7554 | {
|
7555 | if (typeof string !== 'string') {
|
7556 | throw new Error('Material-UI: capitalize(string) expects a string argument.');
|
7557 | }
|
7558 | }
|
7559 |
|
7560 | return string.charAt(0).toUpperCase() + string.slice(1);
|
7561 | }
|
7562 |
|
7563 | var styles = function styles(theme) {
|
7564 | var elevations = {};
|
7565 | theme.shadows.forEach(function (shadow, index) {
|
7566 | elevations["elevation".concat(index)] = {
|
7567 | boxShadow: shadow
|
7568 | };
|
7569 | });
|
7570 | return _extends({
|
7571 |
|
7572 | root: {
|
7573 | backgroundColor: theme.palette.background.paper,
|
7574 | color: theme.palette.text.primary,
|
7575 | transition: theme.transitions.create('box-shadow')
|
7576 | },
|
7577 |
|
7578 |
|
7579 | rounded: {
|
7580 | borderRadius: theme.shape.borderRadius
|
7581 | }
|
7582 | }, elevations);
|
7583 | };
|
7584 | var Paper = React__default.forwardRef(function Paper(props, ref) {
|
7585 | var classes = props.classes,
|
7586 | className = props.className,
|
7587 | _props$component = props.component,
|
7588 | Component = _props$component === void 0 ? 'div' : _props$component,
|
7589 | _props$square = props.square,
|
7590 | square = _props$square === void 0 ? false : _props$square,
|
7591 | _props$elevation = props.elevation,
|
7592 | elevation = _props$elevation === void 0 ? 1 : _props$elevation,
|
7593 | other = _objectWithoutProperties(props, ["classes", "className", "component", "square", "elevation"]);
|
7594 |
|
7595 | {
|
7596 | if (classes["elevation".concat(elevation)] === undefined) {
|
7597 | console.error("Material-UI: this elevation `".concat(elevation, "` is not implemented."));
|
7598 | }
|
7599 | }
|
7600 |
|
7601 | return React__default.createElement(Component, _extends({
|
7602 | className: clsx(classes.root, classes["elevation".concat(elevation)], className, !square && classes.rounded),
|
7603 | ref: ref
|
7604 | }, other));
|
7605 | });
|
7606 | Paper.propTypes = {
|
7607 | |
7608 |
|
7609 |
|
7610 | children: propTypes.node,
|
7611 |
|
7612 | |
7613 |
|
7614 |
|
7615 |
|
7616 | classes: propTypes.object.isRequired,
|
7617 |
|
7618 | |
7619 |
|
7620 |
|
7621 | className: propTypes.string,
|
7622 |
|
7623 | |
7624 |
|
7625 |
|
7626 |
|
7627 | component: propTypes.elementType,
|
7628 |
|
7629 | |
7630 |
|
7631 |
|
7632 |
|
7633 | elevation: propTypes.number,
|
7634 |
|
7635 | |
7636 |
|
7637 |
|
7638 | square: propTypes.bool
|
7639 | } ;
|
7640 | var Paper$1 = withStyles$1(styles, {
|
7641 | name: 'MuiPaper'
|
7642 | })(Paper);
|
7643 |
|
7644 | var styles$1 = function styles(theme) {
|
7645 | var backgroundColorDefault = theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
|
7646 | return {
|
7647 |
|
7648 | root: {
|
7649 | display: 'flex',
|
7650 | flexDirection: 'column',
|
7651 | width: '100%',
|
7652 | boxSizing: 'border-box',
|
7653 |
|
7654 | zIndex: theme.zIndex.appBar,
|
7655 | flexShrink: 0
|
7656 | },
|
7657 |
|
7658 |
|
7659 | positionFixed: {
|
7660 | position: 'fixed',
|
7661 | top: 0,
|
7662 | left: 'auto',
|
7663 | right: 0,
|
7664 | '@media print': {
|
7665 |
|
7666 | position: 'absolute'
|
7667 | }
|
7668 | },
|
7669 |
|
7670 |
|
7671 | positionAbsolute: {
|
7672 | position: 'absolute',
|
7673 | top: 0,
|
7674 | left: 'auto',
|
7675 | right: 0
|
7676 | },
|
7677 |
|
7678 |
|
7679 | positionSticky: {
|
7680 |
|
7681 | position: 'sticky',
|
7682 | top: 0,
|
7683 | left: 'auto',
|
7684 | right: 0
|
7685 | },
|
7686 |
|
7687 |
|
7688 | positionStatic: {
|
7689 | position: 'static',
|
7690 | transform: 'translateZ(0)'
|
7691 |
|
7692 | },
|
7693 |
|
7694 |
|
7695 | positionRelative: {
|
7696 | position: 'relative'
|
7697 | },
|
7698 |
|
7699 |
|
7700 | colorDefault: {
|
7701 | backgroundColor: backgroundColorDefault,
|
7702 | color: theme.palette.getContrastText(backgroundColorDefault)
|
7703 | },
|
7704 |
|
7705 |
|
7706 | colorPrimary: {
|
7707 | backgroundColor: theme.palette.primary.main,
|
7708 | color: theme.palette.primary.contrastText
|
7709 | },
|
7710 |
|
7711 |
|
7712 | colorSecondary: {
|
7713 | backgroundColor: theme.palette.secondary.main,
|
7714 | color: theme.palette.secondary.contrastText
|
7715 | }
|
7716 | };
|
7717 | };
|
7718 | var AppBar = React__default.forwardRef(function AppBar(props, ref) {
|
7719 | var classes = props.classes,
|
7720 | className = props.className,
|
7721 | _props$color = props.color,
|
7722 | color = _props$color === void 0 ? 'primary' : _props$color,
|
7723 | _props$position = props.position,
|
7724 | position = _props$position === void 0 ? 'fixed' : _props$position,
|
7725 | other = _objectWithoutProperties(props, ["classes", "className", "color", "position"]);
|
7726 |
|
7727 | return React__default.createElement(Paper$1, _extends({
|
7728 | square: true,
|
7729 | component: "header",
|
7730 | elevation: 4,
|
7731 | className: clsx(classes.root, classes["position".concat(capitalize(position))], className, color !== 'inherit' && classes["color".concat(capitalize(color))], {
|
7732 | fixed: 'mui-fixed'
|
7733 | }[position]),
|
7734 | ref: ref
|
7735 | }, other));
|
7736 | });
|
7737 | AppBar.propTypes = {
|
7738 |
|
7739 |
|
7740 |
|
7741 |
|
7742 |
|
7743 | |
7744 |
|
7745 |
|
7746 | children: propTypes.node,
|
7747 |
|
7748 | |
7749 |
|
7750 |
|
7751 |
|
7752 | classes: propTypes.object,
|
7753 |
|
7754 | |
7755 |
|
7756 |
|
7757 | className: propTypes.string,
|
7758 |
|
7759 | |
7760 |
|
7761 |
|
7762 | color: propTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
7763 |
|
7764 | |
7765 |
|
7766 |
|
7767 |
|
7768 |
|
7769 | position: propTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky'])
|
7770 | } ;
|
7771 | var AppBar$1 = withStyles$1(styles$1, {
|
7772 | name: 'MuiAppBar'
|
7773 | })(AppBar);
|
7774 |
|
7775 | var styles$2 = function styles(theme) {
|
7776 | return {
|
7777 |
|
7778 | root: {
|
7779 | userSelect: 'none',
|
7780 | width: '1em',
|
7781 | height: '1em',
|
7782 | display: 'inline-block',
|
7783 | fill: 'currentColor',
|
7784 | flexShrink: 0,
|
7785 | fontSize: theme.typography.pxToRem(24),
|
7786 | transition: theme.transitions.create('fill', {
|
7787 | duration: theme.transitions.duration.shorter
|
7788 | })
|
7789 | },
|
7790 |
|
7791 |
|
7792 | colorPrimary: {
|
7793 | color: theme.palette.primary.main
|
7794 | },
|
7795 |
|
7796 |
|
7797 | colorSecondary: {
|
7798 | color: theme.palette.secondary.main
|
7799 | },
|
7800 |
|
7801 |
|
7802 | colorAction: {
|
7803 | color: theme.palette.action.active
|
7804 | },
|
7805 |
|
7806 |
|
7807 | colorError: {
|
7808 | color: theme.palette.error.main
|
7809 | },
|
7810 |
|
7811 |
|
7812 | colorDisabled: {
|
7813 | color: theme.palette.action.disabled
|
7814 | },
|
7815 |
|
7816 |
|
7817 | fontSizeInherit: {
|
7818 | fontSize: 'inherit'
|
7819 | },
|
7820 |
|
7821 |
|
7822 | fontSizeSmall: {
|
7823 | fontSize: theme.typography.pxToRem(20)
|
7824 | },
|
7825 |
|
7826 |
|
7827 | fontSizeLarge: {
|
7828 | fontSize: theme.typography.pxToRem(35)
|
7829 | }
|
7830 | };
|
7831 | };
|
7832 | var SvgIcon = React__default.forwardRef(function SvgIcon(props, ref) {
|
7833 | var children = props.children,
|
7834 | classes = props.classes,
|
7835 | className = props.className,
|
7836 | _props$color = props.color,
|
7837 | color = _props$color === void 0 ? 'inherit' : _props$color,
|
7838 | _props$component = props.component,
|
7839 | Component = _props$component === void 0 ? 'svg' : _props$component,
|
7840 | _props$fontSize = props.fontSize,
|
7841 | fontSize = _props$fontSize === void 0 ? 'default' : _props$fontSize,
|
7842 | htmlColor = props.htmlColor,
|
7843 | titleAccess = props.titleAccess,
|
7844 | _props$viewBox = props.viewBox,
|
7845 | viewBox = _props$viewBox === void 0 ? '0 0 24 24' : _props$viewBox,
|
7846 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "fontSize", "htmlColor", "titleAccess", "viewBox"]);
|
7847 |
|
7848 | return React__default.createElement(Component, _extends({
|
7849 | className: clsx(classes.root, className, color !== 'inherit' && classes["color".concat(capitalize(color))], fontSize !== 'default' && classes["fontSize".concat(capitalize(fontSize))]),
|
7850 | focusable: "false",
|
7851 | viewBox: viewBox,
|
7852 | color: htmlColor,
|
7853 | "aria-hidden": titleAccess ? 'false' : 'true',
|
7854 | role: titleAccess ? 'img' : 'presentation',
|
7855 | ref: ref
|
7856 | }, other), children, titleAccess ? React__default.createElement("title", null, titleAccess) : null);
|
7857 | });
|
7858 | SvgIcon.propTypes = {
|
7859 |
|
7860 |
|
7861 |
|
7862 |
|
7863 |
|
7864 | |
7865 |
|
7866 |
|
7867 | children: propTypes.node,
|
7868 |
|
7869 | |
7870 |
|
7871 |
|
7872 |
|
7873 | classes: propTypes.object,
|
7874 |
|
7875 | |
7876 |
|
7877 |
|
7878 | className: propTypes.string,
|
7879 |
|
7880 | |
7881 |
|
7882 |
|
7883 |
|
7884 | color: propTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']),
|
7885 |
|
7886 | |
7887 |
|
7888 |
|
7889 |
|
7890 | component: propTypes.elementType,
|
7891 |
|
7892 | |
7893 |
|
7894 |
|
7895 | fontSize: propTypes.oneOf(['default', 'inherit', 'large', 'small']),
|
7896 |
|
7897 | |
7898 |
|
7899 |
|
7900 | htmlColor: propTypes.string,
|
7901 |
|
7902 | |
7903 |
|
7904 |
|
7905 |
|
7906 |
|
7907 | shapeRendering: propTypes.string,
|
7908 |
|
7909 | |
7910 |
|
7911 |
|
7912 |
|
7913 | titleAccess: propTypes.string,
|
7914 |
|
7915 | |
7916 |
|
7917 |
|
7918 |
|
7919 |
|
7920 |
|
7921 |
|
7922 | viewBox: propTypes.string
|
7923 | } ;
|
7924 | SvgIcon.muiName = 'SvgIcon';
|
7925 | var SvgIcon$1 = withStyles$1(styles$2, {
|
7926 | name: 'MuiSvgIcon'
|
7927 | })(SvgIcon);
|
7928 |
|
7929 | function createSvgIcon(path, displayName) {
|
7930 | var Component = React__default.memo(React__default.forwardRef(function (props, ref) {
|
7931 | return React__default.createElement(SvgIcon$1, _extends({}, props, {
|
7932 | ref: ref
|
7933 | }), path);
|
7934 | }));
|
7935 |
|
7936 | {
|
7937 | Component.displayName = "".concat(displayName, "Icon");
|
7938 | }
|
7939 |
|
7940 | Component.muiName = SvgIcon$1.muiName;
|
7941 | return Component;
|
7942 | }
|
7943 |
|
7944 | |
7945 |
|
7946 |
|
7947 |
|
7948 | var Person = createSvgIcon(React__default.createElement("path", {
|
7949 | d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
|
7950 | }), 'Person');
|
7951 |
|
7952 | var styles$3 = function styles(theme) {
|
7953 | return {
|
7954 |
|
7955 | root: {
|
7956 | position: 'relative',
|
7957 | display: 'flex',
|
7958 | alignItems: 'center',
|
7959 | justifyContent: 'center',
|
7960 | flexShrink: 0,
|
7961 | width: 40,
|
7962 | height: 40,
|
7963 | fontFamily: theme.typography.fontFamily,
|
7964 | fontSize: theme.typography.pxToRem(20),
|
7965 | lineHeight: 1,
|
7966 | borderRadius: '50%',
|
7967 | overflow: 'hidden',
|
7968 | userSelect: 'none'
|
7969 | },
|
7970 |
|
7971 |
|
7972 | colorDefault: {
|
7973 | color: theme.palette.background.default,
|
7974 | backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
|
7975 | },
|
7976 |
|
7977 |
|
7978 | circle: {},
|
7979 |
|
7980 |
|
7981 | rounded: {
|
7982 | borderRadius: theme.shape.borderRadius
|
7983 | },
|
7984 |
|
7985 |
|
7986 | square: {
|
7987 | borderRadius: 0
|
7988 | },
|
7989 |
|
7990 |
|
7991 | img: {
|
7992 | width: '100%',
|
7993 | height: '100%',
|
7994 | textAlign: 'center',
|
7995 |
|
7996 | objectFit: 'cover',
|
7997 |
|
7998 | color: 'transparent',
|
7999 |
|
8000 | backgroundColor: theme.palette.action.hover,
|
8001 |
|
8002 | textIndent: 10000
|
8003 | },
|
8004 |
|
8005 |
|
8006 | fallback: {
|
8007 | width: '75%',
|
8008 | height: '75%'
|
8009 | }
|
8010 | };
|
8011 | };
|
8012 |
|
8013 | function useLoaded(_ref) {
|
8014 | var src = _ref.src,
|
8015 | srcSet = _ref.srcSet;
|
8016 |
|
8017 | var _React$useState = React__default.useState(false),
|
8018 | loaded = _React$useState[0],
|
8019 | setLoaded = _React$useState[1];
|
8020 |
|
8021 | React__default.useEffect(function () {
|
8022 | if (!src && !srcSet) {
|
8023 | return undefined;
|
8024 | }
|
8025 |
|
8026 | setLoaded(false);
|
8027 | var active = true;
|
8028 | var image = new Image();
|
8029 | image.src = src;
|
8030 | image.srcSet = srcSet;
|
8031 |
|
8032 | image.onload = function () {
|
8033 | if (!active) {
|
8034 | return;
|
8035 | }
|
8036 |
|
8037 | setLoaded('loaded');
|
8038 | };
|
8039 |
|
8040 | image.onerror = function () {
|
8041 | if (!active) {
|
8042 | return;
|
8043 | }
|
8044 |
|
8045 | setLoaded('error');
|
8046 | };
|
8047 |
|
8048 | return function () {
|
8049 | active = false;
|
8050 | };
|
8051 | }, [src, srcSet]);
|
8052 | return loaded;
|
8053 | }
|
8054 |
|
8055 | var Avatar = React__default.forwardRef(function Avatar(props, ref) {
|
8056 | var alt = props.alt,
|
8057 | childrenProp = props.children,
|
8058 | classes = props.classes,
|
8059 | className = props.className,
|
8060 | _props$component = props.component,
|
8061 | Component = _props$component === void 0 ? 'div' : _props$component,
|
8062 | imgProps = props.imgProps,
|
8063 | sizes = props.sizes,
|
8064 | src = props.src,
|
8065 | srcSet = props.srcSet,
|
8066 | _props$variant = props.variant,
|
8067 | variant = _props$variant === void 0 ? 'circle' : _props$variant,
|
8068 | other = _objectWithoutProperties(props, ["alt", "children", "classes", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"]);
|
8069 |
|
8070 | var children = null;
|
8071 |
|
8072 | var loaded = useLoaded({
|
8073 | src: src,
|
8074 | srcSet: srcSet
|
8075 | });
|
8076 | var hasImg = src || srcSet;
|
8077 | var hasImgNotFailing = hasImg && loaded !== 'error';
|
8078 |
|
8079 | if (hasImgNotFailing) {
|
8080 | children = React__default.createElement("img", _extends({
|
8081 | alt: alt,
|
8082 | src: src,
|
8083 | srcSet: srcSet,
|
8084 | sizes: sizes,
|
8085 | className: classes.img
|
8086 | }, imgProps));
|
8087 | } else if (childrenProp != null) {
|
8088 | children = childrenProp;
|
8089 | } else if (hasImg && alt) {
|
8090 | children = alt[0];
|
8091 | } else {
|
8092 | children = React__default.createElement(Person, {
|
8093 | className: classes.fallback
|
8094 | });
|
8095 | }
|
8096 |
|
8097 | return React__default.createElement(Component, _extends({
|
8098 | className: clsx(classes.root, classes.system, classes[variant], className, !hasImgNotFailing && classes.colorDefault),
|
8099 | ref: ref
|
8100 | }, other), children);
|
8101 | });
|
8102 | Avatar.propTypes = {
|
8103 | |
8104 |
|
8105 |
|
8106 |
|
8107 | alt: propTypes.string,
|
8108 |
|
8109 | |
8110 |
|
8111 |
|
8112 |
|
8113 | children: propTypes.node,
|
8114 |
|
8115 | |
8116 |
|
8117 |
|
8118 |
|
8119 | classes: propTypes.object.isRequired,
|
8120 |
|
8121 | |
8122 |
|
8123 |
|
8124 | className: propTypes.string,
|
8125 |
|
8126 | |
8127 |
|
8128 |
|
8129 |
|
8130 | component: propTypes.elementType,
|
8131 |
|
8132 | |
8133 |
|
8134 |
|
8135 |
|
8136 | imgProps: propTypes.object,
|
8137 |
|
8138 | |
8139 |
|
8140 |
|
8141 | sizes: propTypes.string,
|
8142 |
|
8143 | |
8144 |
|
8145 |
|
8146 | src: propTypes.string,
|
8147 |
|
8148 | |
8149 |
|
8150 |
|
8151 |
|
8152 | srcSet: propTypes.string,
|
8153 |
|
8154 | |
8155 |
|
8156 |
|
8157 | variant: propTypes.oneOf(['circle', 'rounded', 'square'])
|
8158 | } ;
|
8159 | var Avatar$1 = withStyles$1(styles$3, {
|
8160 | name: 'MuiAvatar'
|
8161 | })(Avatar);
|
8162 |
|
8163 | var config = {
|
8164 | disabled: false
|
8165 | };
|
8166 |
|
8167 | var timeoutsShape = propTypes.oneOfType([propTypes.number, propTypes.shape({
|
8168 | enter: propTypes.number,
|
8169 | exit: propTypes.number,
|
8170 | appear: propTypes.number
|
8171 | }).isRequired]) ;
|
8172 | var classNamesShape = propTypes.oneOfType([propTypes.string, propTypes.shape({
|
8173 | enter: propTypes.string,
|
8174 | exit: propTypes.string,
|
8175 | active: propTypes.string
|
8176 | }), propTypes.shape({
|
8177 | enter: propTypes.string,
|
8178 | enterDone: propTypes.string,
|
8179 | enterActive: propTypes.string,
|
8180 | exit: propTypes.string,
|
8181 | exitDone: propTypes.string,
|
8182 | exitActive: propTypes.string
|
8183 | })]) ;
|
8184 |
|
8185 | var TransitionGroupContext = React__default.createContext(null);
|
8186 |
|
8187 | var UNMOUNTED = 'unmounted';
|
8188 | var EXITED = 'exited';
|
8189 | var ENTERING = 'entering';
|
8190 | var ENTERED = 'entered';
|
8191 | var EXITING = 'exiting';
|
8192 | |
8193 |
|
8194 |
|
8195 |
|
8196 |
|
8197 |
|
8198 |
|
8199 |
|
8200 |
|
8201 |
|
8202 |
|
8203 |
|
8204 |
|
8205 |
|
8206 |
|
8207 |
|
8208 |
|
8209 |
|
8210 |
|
8211 |
|
8212 |
|
8213 |
|
8214 |
|
8215 |
|
8216 |
|
8217 |
|
8218 |
|
8219 |
|
8220 |
|
8221 |
|
8222 |
|
8223 |
|
8224 |
|
8225 |
|
8226 |
|
8227 |
|
8228 |
|
8229 |
|
8230 |
|
8231 |
|
8232 |
|
8233 |
|
8234 |
|
8235 |
|
8236 |
|
8237 |
|
8238 |
|
8239 |
|
8240 |
|
8241 |
|
8242 |
|
8243 |
|
8244 |
|
8245 |
|
8246 |
|
8247 |
|
8248 |
|
8249 |
|
8250 |
|
8251 |
|
8252 |
|
8253 |
|
8254 |
|
8255 |
|
8256 |
|
8257 |
|
8258 |
|
8259 |
|
8260 |
|
8261 |
|
8262 |
|
8263 |
|
8264 |
|
8265 |
|
8266 |
|
8267 |
|
8268 |
|
8269 |
|
8270 |
|
8271 |
|
8272 |
|
8273 |
|
8274 |
|
8275 |
|
8276 |
|
8277 |
|
8278 |
|
8279 |
|
8280 |
|
8281 |
|
8282 |
|
8283 |
|
8284 | var Transition =
|
8285 |
|
8286 | function (_React$Component) {
|
8287 | _inheritsLoose(Transition, _React$Component);
|
8288 |
|
8289 | function Transition(props, context) {
|
8290 | var _this;
|
8291 |
|
8292 | _this = _React$Component.call(this, props, context) || this;
|
8293 | var parentGroup = context;
|
8294 |
|
8295 | var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
|
8296 | var initialStatus;
|
8297 | _this.appearStatus = null;
|
8298 |
|
8299 | if (props.in) {
|
8300 | if (appear) {
|
8301 | initialStatus = EXITED;
|
8302 | _this.appearStatus = ENTERING;
|
8303 | } else {
|
8304 | initialStatus = ENTERED;
|
8305 | }
|
8306 | } else {
|
8307 | if (props.unmountOnExit || props.mountOnEnter) {
|
8308 | initialStatus = UNMOUNTED;
|
8309 | } else {
|
8310 | initialStatus = EXITED;
|
8311 | }
|
8312 | }
|
8313 |
|
8314 | _this.state = {
|
8315 | status: initialStatus
|
8316 | };
|
8317 | _this.nextCallback = null;
|
8318 | return _this;
|
8319 | }
|
8320 |
|
8321 | Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
|
8322 | var nextIn = _ref.in;
|
8323 |
|
8324 | if (nextIn && prevState.status === UNMOUNTED) {
|
8325 | return {
|
8326 | status: EXITED
|
8327 | };
|
8328 | }
|
8329 |
|
8330 | return null;
|
8331 | };
|
8332 |
|
8333 |
|
8334 |
|
8335 |
|
8336 |
|
8337 |
|
8338 |
|
8339 |
|
8340 |
|
8341 |
|
8342 |
|
8343 |
|
8344 |
|
8345 |
|
8346 |
|
8347 |
|
8348 |
|
8349 | var _proto = Transition.prototype;
|
8350 |
|
8351 | _proto.componentDidMount = function componentDidMount() {
|
8352 | this.updateStatus(true, this.appearStatus);
|
8353 | };
|
8354 |
|
8355 | _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
|
8356 | var nextStatus = null;
|
8357 |
|
8358 | if (prevProps !== this.props) {
|
8359 | var status = this.state.status;
|
8360 |
|
8361 | if (this.props.in) {
|
8362 | if (status !== ENTERING && status !== ENTERED) {
|
8363 | nextStatus = ENTERING;
|
8364 | }
|
8365 | } else {
|
8366 | if (status === ENTERING || status === ENTERED) {
|
8367 | nextStatus = EXITING;
|
8368 | }
|
8369 | }
|
8370 | }
|
8371 |
|
8372 | this.updateStatus(false, nextStatus);
|
8373 | };
|
8374 |
|
8375 | _proto.componentWillUnmount = function componentWillUnmount() {
|
8376 | this.cancelNextCallback();
|
8377 | };
|
8378 |
|
8379 | _proto.getTimeouts = function getTimeouts() {
|
8380 | var timeout = this.props.timeout;
|
8381 | var exit, enter, appear;
|
8382 | exit = enter = appear = timeout;
|
8383 |
|
8384 | if (timeout != null && typeof timeout !== 'number') {
|
8385 | exit = timeout.exit;
|
8386 | enter = timeout.enter;
|
8387 |
|
8388 | appear = timeout.appear !== undefined ? timeout.appear : enter;
|
8389 | }
|
8390 |
|
8391 | return {
|
8392 | exit: exit,
|
8393 | enter: enter,
|
8394 | appear: appear
|
8395 | };
|
8396 | };
|
8397 |
|
8398 | _proto.updateStatus = function updateStatus(mounting, nextStatus) {
|
8399 | if (mounting === void 0) {
|
8400 | mounting = false;
|
8401 | }
|
8402 |
|
8403 | if (nextStatus !== null) {
|
8404 |
|
8405 | this.cancelNextCallback();
|
8406 | var node = ReactDOM.findDOMNode(this);
|
8407 |
|
8408 | if (nextStatus === ENTERING) {
|
8409 | this.performEnter(node, mounting);
|
8410 | } else {
|
8411 | this.performExit(node);
|
8412 | }
|
8413 | } else if (this.props.unmountOnExit && this.state.status === EXITED) {
|
8414 | this.setState({
|
8415 | status: UNMOUNTED
|
8416 | });
|
8417 | }
|
8418 | };
|
8419 |
|
8420 | _proto.performEnter = function performEnter(node, mounting) {
|
8421 | var _this2 = this;
|
8422 |
|
8423 | var enter = this.props.enter;
|
8424 | var appearing = this.context ? this.context.isMounting : mounting;
|
8425 | var timeouts = this.getTimeouts();
|
8426 | var enterTimeout = appearing ? timeouts.appear : timeouts.enter;
|
8427 |
|
8428 |
|
8429 | if (!mounting && !enter || config.disabled) {
|
8430 | this.safeSetState({
|
8431 | status: ENTERED
|
8432 | }, function () {
|
8433 | _this2.props.onEntered(node);
|
8434 | });
|
8435 | return;
|
8436 | }
|
8437 |
|
8438 | this.props.onEnter(node, appearing);
|
8439 | this.safeSetState({
|
8440 | status: ENTERING
|
8441 | }, function () {
|
8442 | _this2.props.onEntering(node, appearing);
|
8443 |
|
8444 | _this2.onTransitionEnd(node, enterTimeout, function () {
|
8445 | _this2.safeSetState({
|
8446 | status: ENTERED
|
8447 | }, function () {
|
8448 | _this2.props.onEntered(node, appearing);
|
8449 | });
|
8450 | });
|
8451 | });
|
8452 | };
|
8453 |
|
8454 | _proto.performExit = function performExit(node) {
|
8455 | var _this3 = this;
|
8456 |
|
8457 | var exit = this.props.exit;
|
8458 | var timeouts = this.getTimeouts();
|
8459 |
|
8460 | if (!exit || config.disabled) {
|
8461 | this.safeSetState({
|
8462 | status: EXITED
|
8463 | }, function () {
|
8464 | _this3.props.onExited(node);
|
8465 | });
|
8466 | return;
|
8467 | }
|
8468 |
|
8469 | this.props.onExit(node);
|
8470 | this.safeSetState({
|
8471 | status: EXITING
|
8472 | }, function () {
|
8473 | _this3.props.onExiting(node);
|
8474 |
|
8475 | _this3.onTransitionEnd(node, timeouts.exit, function () {
|
8476 | _this3.safeSetState({
|
8477 | status: EXITED
|
8478 | }, function () {
|
8479 | _this3.props.onExited(node);
|
8480 | });
|
8481 | });
|
8482 | });
|
8483 | };
|
8484 |
|
8485 | _proto.cancelNextCallback = function cancelNextCallback() {
|
8486 | if (this.nextCallback !== null) {
|
8487 | this.nextCallback.cancel();
|
8488 | this.nextCallback = null;
|
8489 | }
|
8490 | };
|
8491 |
|
8492 | _proto.safeSetState = function safeSetState(nextState, callback) {
|
8493 |
|
8494 |
|
8495 |
|
8496 | callback = this.setNextCallback(callback);
|
8497 | this.setState(nextState, callback);
|
8498 | };
|
8499 |
|
8500 | _proto.setNextCallback = function setNextCallback(callback) {
|
8501 | var _this4 = this;
|
8502 |
|
8503 | var active = true;
|
8504 |
|
8505 | this.nextCallback = function (event) {
|
8506 | if (active) {
|
8507 | active = false;
|
8508 | _this4.nextCallback = null;
|
8509 | callback(event);
|
8510 | }
|
8511 | };
|
8512 |
|
8513 | this.nextCallback.cancel = function () {
|
8514 | active = false;
|
8515 | };
|
8516 |
|
8517 | return this.nextCallback;
|
8518 | };
|
8519 |
|
8520 | _proto.onTransitionEnd = function onTransitionEnd(node, timeout, handler) {
|
8521 | this.setNextCallback(handler);
|
8522 | var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
|
8523 |
|
8524 | if (!node || doesNotHaveTimeoutOrListener) {
|
8525 | setTimeout(this.nextCallback, 0);
|
8526 | return;
|
8527 | }
|
8528 |
|
8529 | if (this.props.addEndListener) {
|
8530 | this.props.addEndListener(node, this.nextCallback);
|
8531 | }
|
8532 |
|
8533 | if (timeout != null) {
|
8534 | setTimeout(this.nextCallback, timeout);
|
8535 | }
|
8536 | };
|
8537 |
|
8538 | _proto.render = function render() {
|
8539 | var status = this.state.status;
|
8540 |
|
8541 | if (status === UNMOUNTED) {
|
8542 | return null;
|
8543 | }
|
8544 |
|
8545 | var _this$props = this.props,
|
8546 | children = _this$props.children,
|
8547 | childProps = _objectWithoutPropertiesLoose(_this$props, ["children"]);
|
8548 |
|
8549 |
|
8550 | delete childProps.in;
|
8551 | delete childProps.mountOnEnter;
|
8552 | delete childProps.unmountOnExit;
|
8553 | delete childProps.appear;
|
8554 | delete childProps.enter;
|
8555 | delete childProps.exit;
|
8556 | delete childProps.timeout;
|
8557 | delete childProps.addEndListener;
|
8558 | delete childProps.onEnter;
|
8559 | delete childProps.onEntering;
|
8560 | delete childProps.onEntered;
|
8561 | delete childProps.onExit;
|
8562 | delete childProps.onExiting;
|
8563 | delete childProps.onExited;
|
8564 |
|
8565 | if (typeof children === 'function') {
|
8566 |
|
8567 | return React__default.createElement(TransitionGroupContext.Provider, {
|
8568 | value: null
|
8569 | }, children(status, childProps));
|
8570 | }
|
8571 |
|
8572 | var child = React__default.Children.only(children);
|
8573 | return (
|
8574 | React__default.createElement(TransitionGroupContext.Provider, {
|
8575 | value: null
|
8576 | }, React__default.cloneElement(child, childProps))
|
8577 | );
|
8578 | };
|
8579 |
|
8580 | return Transition;
|
8581 | }(React__default.Component);
|
8582 |
|
8583 | Transition.contextType = TransitionGroupContext;
|
8584 | Transition.propTypes = {
|
8585 | |
8586 |
|
8587 |
|
8588 |
|
8589 |
|
8590 |
|
8591 |
|
8592 |
|
8593 |
|
8594 |
|
8595 |
|
8596 |
|
8597 |
|
8598 |
|
8599 | children: propTypes.oneOfType([propTypes.func.isRequired, propTypes.element.isRequired]).isRequired,
|
8600 |
|
8601 | |
8602 |
|
8603 |
|
8604 | in: propTypes.bool,
|
8605 |
|
8606 | |
8607 |
|
8608 |
|
8609 |
|
8610 |
|
8611 |
|
8612 | mountOnEnter: propTypes.bool,
|
8613 |
|
8614 | |
8615 |
|
8616 |
|
8617 |
|
8618 | unmountOnExit: propTypes.bool,
|
8619 |
|
8620 | |
8621 |
|
8622 |
|
8623 |
|
8624 |
|
8625 |
|
8626 |
|
8627 |
|
8628 |
|
8629 |
|
8630 |
|
8631 |
|
8632 | appear: propTypes.bool,
|
8633 |
|
8634 | |
8635 |
|
8636 |
|
8637 | enter: propTypes.bool,
|
8638 |
|
8639 | |
8640 |
|
8641 |
|
8642 | exit: propTypes.bool,
|
8643 |
|
8644 | |
8645 |
|
8646 |
|
8647 |
|
8648 |
|
8649 |
|
8650 |
|
8651 |
|
8652 |
|
8653 |
|
8654 |
|
8655 |
|
8656 |
|
8657 |
|
8658 |
|
8659 |
|
8660 |
|
8661 |
|
8662 |
|
8663 |
|
8664 |
|
8665 |
|
8666 |
|
8667 |
|
8668 |
|
8669 |
|
8670 | timeout: function timeout(props) {
|
8671 | var pt = timeoutsShape;
|
8672 | if (!props.addEndListener) pt = pt.isRequired;
|
8673 |
|
8674 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
8675 | args[_key - 1] = arguments[_key];
|
8676 | }
|
8677 |
|
8678 | return pt.apply(void 0, [props].concat(args));
|
8679 | },
|
8680 |
|
8681 | |
8682 |
|
8683 |
|
8684 |
|
8685 |
|
8686 |
|
8687 |
|
8688 |
|
8689 |
|
8690 |
|
8691 |
|
8692 |
|
8693 | addEndListener: propTypes.func,
|
8694 |
|
8695 | |
8696 |
|
8697 |
|
8698 |
|
8699 |
|
8700 |
|
8701 | onEnter: propTypes.func,
|
8702 |
|
8703 | |
8704 |
|
8705 |
|
8706 |
|
8707 |
|
8708 |
|
8709 | onEntering: propTypes.func,
|
8710 |
|
8711 | |
8712 |
|
8713 |
|
8714 |
|
8715 |
|
8716 |
|
8717 | onEntered: propTypes.func,
|
8718 |
|
8719 | |
8720 |
|
8721 |
|
8722 |
|
8723 |
|
8724 | onExit: propTypes.func,
|
8725 |
|
8726 | |
8727 |
|
8728 |
|
8729 |
|
8730 |
|
8731 | onExiting: propTypes.func,
|
8732 |
|
8733 | |
8734 |
|
8735 |
|
8736 |
|
8737 |
|
8738 | onExited: propTypes.func
|
8739 |
|
8740 | } ;
|
8741 |
|
8742 | function noop() {}
|
8743 |
|
8744 | Transition.defaultProps = {
|
8745 | in: false,
|
8746 | mountOnEnter: false,
|
8747 | unmountOnExit: false,
|
8748 | appear: false,
|
8749 | enter: true,
|
8750 | exit: true,
|
8751 | onEnter: noop,
|
8752 | onEntering: noop,
|
8753 | onEntered: noop,
|
8754 | onExit: noop,
|
8755 | onExiting: noop,
|
8756 | onExited: noop
|
8757 | };
|
8758 | Transition.UNMOUNTED = 0;
|
8759 | Transition.EXITED = 1;
|
8760 | Transition.ENTERING = 2;
|
8761 | Transition.ENTERED = 3;
|
8762 | Transition.EXITING = 4;
|
8763 |
|
8764 | |
8765 |
|
8766 |
|
8767 |
|
8768 |
|
8769 |
|
8770 |
|
8771 | function getChildMapping(children, mapFn) {
|
8772 | var mapper = function mapper(child) {
|
8773 | return mapFn && React.isValidElement(child) ? mapFn(child) : child;
|
8774 | };
|
8775 |
|
8776 | var result = Object.create(null);
|
8777 | if (children) React.Children.map(children, function (c) {
|
8778 | return c;
|
8779 | }).forEach(function (child) {
|
8780 |
|
8781 | result[child.key] = mapper(child);
|
8782 | });
|
8783 | return result;
|
8784 | }
|
8785 | |
8786 |
|
8787 |
|
8788 |
|
8789 |
|
8790 |
|
8791 |
|
8792 |
|
8793 |
|
8794 |
|
8795 |
|
8796 |
|
8797 |
|
8798 |
|
8799 |
|
8800 |
|
8801 |
|
8802 |
|
8803 | function mergeChildMappings(prev, next) {
|
8804 | prev = prev || {};
|
8805 | next = next || {};
|
8806 |
|
8807 | function getValueForKey(key) {
|
8808 | return key in next ? next[key] : prev[key];
|
8809 | }
|
8810 |
|
8811 |
|
8812 |
|
8813 | var nextKeysPending = Object.create(null);
|
8814 | var pendingKeys = [];
|
8815 |
|
8816 | for (var prevKey in prev) {
|
8817 | if (prevKey in next) {
|
8818 | if (pendingKeys.length) {
|
8819 | nextKeysPending[prevKey] = pendingKeys;
|
8820 | pendingKeys = [];
|
8821 | }
|
8822 | } else {
|
8823 | pendingKeys.push(prevKey);
|
8824 | }
|
8825 | }
|
8826 |
|
8827 | var i;
|
8828 | var childMapping = {};
|
8829 |
|
8830 | for (var nextKey in next) {
|
8831 | if (nextKeysPending[nextKey]) {
|
8832 | for (i = 0; i < nextKeysPending[nextKey].length; i++) {
|
8833 | var pendingNextKey = nextKeysPending[nextKey][i];
|
8834 | childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
|
8835 | }
|
8836 | }
|
8837 |
|
8838 | childMapping[nextKey] = getValueForKey(nextKey);
|
8839 | }
|
8840 |
|
8841 |
|
8842 | for (i = 0; i < pendingKeys.length; i++) {
|
8843 | childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
|
8844 | }
|
8845 |
|
8846 | return childMapping;
|
8847 | }
|
8848 |
|
8849 | function getProp(child, prop, props) {
|
8850 | return props[prop] != null ? props[prop] : child.props[prop];
|
8851 | }
|
8852 |
|
8853 | function getInitialChildMapping(props, onExited) {
|
8854 | return getChildMapping(props.children, function (child) {
|
8855 | return React.cloneElement(child, {
|
8856 | onExited: onExited.bind(null, child),
|
8857 | in: true,
|
8858 | appear: getProp(child, 'appear', props),
|
8859 | enter: getProp(child, 'enter', props),
|
8860 | exit: getProp(child, 'exit', props)
|
8861 | });
|
8862 | });
|
8863 | }
|
8864 | function getNextChildMapping(nextProps, prevChildMapping, onExited) {
|
8865 | var nextChildMapping = getChildMapping(nextProps.children);
|
8866 | var children = mergeChildMappings(prevChildMapping, nextChildMapping);
|
8867 | Object.keys(children).forEach(function (key) {
|
8868 | var child = children[key];
|
8869 | if (!React.isValidElement(child)) return;
|
8870 | var hasPrev = key in prevChildMapping;
|
8871 | var hasNext = key in nextChildMapping;
|
8872 | var prevChild = prevChildMapping[key];
|
8873 | var isLeaving = React.isValidElement(prevChild) && !prevChild.props.in;
|
8874 |
|
8875 | if (hasNext && (!hasPrev || isLeaving)) {
|
8876 |
|
8877 | children[key] = React.cloneElement(child, {
|
8878 | onExited: onExited.bind(null, child),
|
8879 | in: true,
|
8880 | exit: getProp(child, 'exit', nextProps),
|
8881 | enter: getProp(child, 'enter', nextProps)
|
8882 | });
|
8883 | } else if (!hasNext && hasPrev && !isLeaving) {
|
8884 |
|
8885 |
|
8886 | children[key] = React.cloneElement(child, {
|
8887 | in: false
|
8888 | });
|
8889 | } else if (hasNext && hasPrev && React.isValidElement(prevChild)) {
|
8890 |
|
8891 |
|
8892 |
|
8893 | children[key] = React.cloneElement(child, {
|
8894 | onExited: onExited.bind(null, child),
|
8895 | in: prevChild.props.in,
|
8896 | exit: getProp(child, 'exit', nextProps),
|
8897 | enter: getProp(child, 'enter', nextProps)
|
8898 | });
|
8899 | }
|
8900 | });
|
8901 | return children;
|
8902 | }
|
8903 |
|
8904 | var values = Object.values || function (obj) {
|
8905 | return Object.keys(obj).map(function (k) {
|
8906 | return obj[k];
|
8907 | });
|
8908 | };
|
8909 |
|
8910 | var defaultProps = {
|
8911 | component: 'div',
|
8912 | childFactory: function childFactory(child) {
|
8913 | return child;
|
8914 | }
|
8915 | |
8916 |
|
8917 |
|
8918 |
|
8919 |
|
8920 |
|
8921 |
|
8922 |
|
8923 |
|
8924 |
|
8925 |
|
8926 |
|
8927 |
|
8928 |
|
8929 |
|
8930 | };
|
8931 |
|
8932 | var TransitionGroup =
|
8933 |
|
8934 | function (_React$Component) {
|
8935 | _inheritsLoose(TransitionGroup, _React$Component);
|
8936 |
|
8937 | function TransitionGroup(props, context) {
|
8938 | var _this;
|
8939 |
|
8940 | _this = _React$Component.call(this, props, context) || this;
|
8941 |
|
8942 | var handleExited = _this.handleExited.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
8943 |
|
8944 |
|
8945 | _this.state = {
|
8946 | contextValue: {
|
8947 | isMounting: true
|
8948 | },
|
8949 | handleExited: handleExited,
|
8950 | firstRender: true
|
8951 | };
|
8952 | return _this;
|
8953 | }
|
8954 |
|
8955 | var _proto = TransitionGroup.prototype;
|
8956 |
|
8957 | _proto.componentDidMount = function componentDidMount() {
|
8958 | this.mounted = true;
|
8959 | this.setState({
|
8960 | contextValue: {
|
8961 | isMounting: false
|
8962 | }
|
8963 | });
|
8964 | };
|
8965 |
|
8966 | _proto.componentWillUnmount = function componentWillUnmount() {
|
8967 | this.mounted = false;
|
8968 | };
|
8969 |
|
8970 | TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
|
8971 | var prevChildMapping = _ref.children,
|
8972 | handleExited = _ref.handleExited,
|
8973 | firstRender = _ref.firstRender;
|
8974 | return {
|
8975 | children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
|
8976 | firstRender: false
|
8977 | };
|
8978 | };
|
8979 |
|
8980 | _proto.handleExited = function handleExited(child, node) {
|
8981 | var currentChildMapping = getChildMapping(this.props.children);
|
8982 | if (child.key in currentChildMapping) return;
|
8983 |
|
8984 | if (child.props.onExited) {
|
8985 | child.props.onExited(node);
|
8986 | }
|
8987 |
|
8988 | if (this.mounted) {
|
8989 | this.setState(function (state) {
|
8990 | var children = _extends({}, state.children);
|
8991 |
|
8992 | delete children[child.key];
|
8993 | return {
|
8994 | children: children
|
8995 | };
|
8996 | });
|
8997 | }
|
8998 | };
|
8999 |
|
9000 | _proto.render = function render() {
|
9001 | var _this$props = this.props,
|
9002 | Component = _this$props.component,
|
9003 | childFactory = _this$props.childFactory,
|
9004 | props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
|
9005 |
|
9006 | var contextValue = this.state.contextValue;
|
9007 | var children = values(this.state.children).map(childFactory);
|
9008 | delete props.appear;
|
9009 | delete props.enter;
|
9010 | delete props.exit;
|
9011 |
|
9012 | if (Component === null) {
|
9013 | return React__default.createElement(TransitionGroupContext.Provider, {
|
9014 | value: contextValue
|
9015 | }, children);
|
9016 | }
|
9017 |
|
9018 | return React__default.createElement(TransitionGroupContext.Provider, {
|
9019 | value: contextValue
|
9020 | }, React__default.createElement(Component, props, children));
|
9021 | };
|
9022 |
|
9023 | return TransitionGroup;
|
9024 | }(React__default.Component);
|
9025 |
|
9026 | TransitionGroup.propTypes = {
|
9027 | |
9028 |
|
9029 |
|
9030 |
|
9031 |
|
9032 |
|
9033 |
|
9034 | component: propTypes.any,
|
9035 |
|
9036 | |
9037 |
|
9038 |
|
9039 |
|
9040 |
|
9041 |
|
9042 |
|
9043 |
|
9044 |
|
9045 |
|
9046 |
|
9047 |
|
9048 |
|
9049 | children: propTypes.node,
|
9050 |
|
9051 | |
9052 |
|
9053 |
|
9054 |
|
9055 |
|
9056 | appear: propTypes.bool,
|
9057 |
|
9058 | |
9059 |
|
9060 |
|
9061 |
|
9062 |
|
9063 | enter: propTypes.bool,
|
9064 |
|
9065 | |
9066 |
|
9067 |
|
9068 |
|
9069 |
|
9070 | exit: propTypes.bool,
|
9071 |
|
9072 | |
9073 |
|
9074 |
|
9075 |
|
9076 |
|
9077 |
|
9078 |
|
9079 |
|
9080 |
|
9081 |
|
9082 | childFactory: propTypes.func
|
9083 | } ;
|
9084 | TransitionGroup.defaultProps = defaultProps;
|
9085 |
|
9086 | var reflow = function reflow(node) {
|
9087 | return node.scrollTop;
|
9088 | };
|
9089 | function getTransitionProps(props, options) {
|
9090 | var timeout = props.timeout,
|
9091 | _props$style = props.style,
|
9092 | style = _props$style === void 0 ? {} : _props$style;
|
9093 | return {
|
9094 | duration: style.transitionDuration || typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,
|
9095 | delay: style.transitionDelay
|
9096 | };
|
9097 | }
|
9098 |
|
9099 |
|
9100 | function setRef(ref, value) {
|
9101 | if (typeof ref === 'function') {
|
9102 | ref(value);
|
9103 | } else if (ref) {
|
9104 | ref.current = value;
|
9105 | }
|
9106 | }
|
9107 |
|
9108 | function useForkRef(refA, refB) {
|
9109 | |
9110 |
|
9111 |
|
9112 |
|
9113 |
|
9114 | return React__default.useMemo(function () {
|
9115 | if (refA == null && refB == null) {
|
9116 | return null;
|
9117 | }
|
9118 |
|
9119 | return function (refValue) {
|
9120 | setRef(refA, refValue);
|
9121 | setRef(refB, refValue);
|
9122 | };
|
9123 | }, [refA, refB]);
|
9124 | }
|
9125 |
|
9126 | var styles$4 = {
|
9127 | entering: {
|
9128 | opacity: 1
|
9129 | },
|
9130 | entered: {
|
9131 | opacity: 1
|
9132 | }
|
9133 | };
|
9134 | var defaultTimeout = {
|
9135 | enter: duration.enteringScreen,
|
9136 | exit: duration.leavingScreen
|
9137 | };
|
9138 | |
9139 |
|
9140 |
|
9141 |
|
9142 |
|
9143 | var Fade = React__default.forwardRef(function Fade(props, ref) {
|
9144 | var children = props.children,
|
9145 | inProp = props.in,
|
9146 | onEnter = props.onEnter,
|
9147 | onExit = props.onExit,
|
9148 | style = props.style,
|
9149 | _props$timeout = props.timeout,
|
9150 | timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,
|
9151 | other = _objectWithoutProperties(props, ["children", "in", "onEnter", "onExit", "style", "timeout"]);
|
9152 |
|
9153 | var theme = useTheme$1();
|
9154 | var handleRef = useForkRef(children.ref, ref);
|
9155 |
|
9156 | var handleEnter = function handleEnter(node, isAppearing) {
|
9157 | reflow(node);
|
9158 |
|
9159 | var transitionProps = getTransitionProps({
|
9160 | style: style,
|
9161 | timeout: timeout
|
9162 | }, {
|
9163 | mode: 'enter'
|
9164 | });
|
9165 | node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
|
9166 | node.style.transition = theme.transitions.create('opacity', transitionProps);
|
9167 |
|
9168 | if (onEnter) {
|
9169 | onEnter(node, isAppearing);
|
9170 | }
|
9171 | };
|
9172 |
|
9173 | var handleExit = function handleExit(node) {
|
9174 | var transitionProps = getTransitionProps({
|
9175 | style: style,
|
9176 | timeout: timeout
|
9177 | }, {
|
9178 | mode: 'exit'
|
9179 | });
|
9180 | node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
|
9181 | node.style.transition = theme.transitions.create('opacity', transitionProps);
|
9182 |
|
9183 | if (onExit) {
|
9184 | onExit(node);
|
9185 | }
|
9186 | };
|
9187 |
|
9188 | return React__default.createElement(Transition, _extends({
|
9189 | appear: true,
|
9190 | in: inProp,
|
9191 | onEnter: handleEnter,
|
9192 | onExit: handleExit,
|
9193 | timeout: timeout
|
9194 | }, other), function (state, childProps) {
|
9195 | return React__default.cloneElement(children, _extends({
|
9196 | style: _extends({
|
9197 | opacity: 0,
|
9198 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
9199 | }, styles$4[state], {}, style, {}, children.props.style),
|
9200 | ref: handleRef
|
9201 | }, childProps));
|
9202 | });
|
9203 | });
|
9204 | Fade.propTypes = {
|
9205 | |
9206 |
|
9207 |
|
9208 | children: propTypes.element,
|
9209 |
|
9210 | |
9211 |
|
9212 |
|
9213 | in: propTypes.bool,
|
9214 |
|
9215 | |
9216 |
|
9217 |
|
9218 | onEnter: propTypes.func,
|
9219 |
|
9220 | |
9221 |
|
9222 |
|
9223 | onExit: propTypes.func,
|
9224 |
|
9225 | |
9226 |
|
9227 |
|
9228 | style: propTypes.object,
|
9229 |
|
9230 | |
9231 |
|
9232 |
|
9233 |
|
9234 | timeout: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
9235 | enter: propTypes.number,
|
9236 | exit: propTypes.number
|
9237 | })])
|
9238 | } ;
|
9239 |
|
9240 | var styles$5 = {
|
9241 |
|
9242 | root: {
|
9243 |
|
9244 | zIndex: -1,
|
9245 | position: 'fixed',
|
9246 | display: 'flex',
|
9247 | alignItems: 'center',
|
9248 | justifyContent: 'center',
|
9249 | right: 0,
|
9250 | bottom: 0,
|
9251 | top: 0,
|
9252 | left: 0,
|
9253 | backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
9254 | WebkitTapHighlightColor: 'transparent',
|
9255 |
|
9256 | touchAction: 'none'
|
9257 | },
|
9258 |
|
9259 |
|
9260 | invisible: {
|
9261 | backgroundColor: 'transparent'
|
9262 | }
|
9263 | };
|
9264 | var Backdrop = React__default.forwardRef(function Backdrop(props, ref) {
|
9265 | var children = props.children,
|
9266 | classes = props.classes,
|
9267 | className = props.className,
|
9268 | _props$invisible = props.invisible,
|
9269 | invisible = _props$invisible === void 0 ? false : _props$invisible,
|
9270 | open = props.open,
|
9271 | transitionDuration = props.transitionDuration,
|
9272 | other = _objectWithoutProperties(props, ["children", "classes", "className", "invisible", "open", "transitionDuration"]);
|
9273 |
|
9274 | return React__default.createElement(Fade, _extends({
|
9275 | in: open,
|
9276 | timeout: transitionDuration
|
9277 | }, other), React__default.createElement("div", {
|
9278 | className: clsx(classes.root, className, invisible && classes.invisible),
|
9279 | "aria-hidden": true,
|
9280 | ref: ref
|
9281 | }, children));
|
9282 | });
|
9283 | Backdrop.propTypes = {
|
9284 |
|
9285 |
|
9286 |
|
9287 |
|
9288 |
|
9289 | |
9290 |
|
9291 |
|
9292 | children: propTypes.node,
|
9293 |
|
9294 | |
9295 |
|
9296 |
|
9297 |
|
9298 | classes: propTypes.object,
|
9299 |
|
9300 | |
9301 |
|
9302 |
|
9303 | className: propTypes.string,
|
9304 |
|
9305 | |
9306 |
|
9307 |
|
9308 |
|
9309 | invisible: propTypes.bool,
|
9310 |
|
9311 | |
9312 |
|
9313 |
|
9314 | open: propTypes.bool.isRequired,
|
9315 |
|
9316 | |
9317 |
|
9318 |
|
9319 |
|
9320 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
9321 | appear: propTypes.number,
|
9322 | enter: propTypes.number,
|
9323 | exit: propTypes.number
|
9324 | })])
|
9325 | } ;
|
9326 | var Backdrop$1 = withStyles$1(styles$5, {
|
9327 | name: 'MuiBackdrop'
|
9328 | })(Backdrop);
|
9329 |
|
9330 | var RADIUS_STANDARD = 10;
|
9331 | var RADIUS_DOT = 4;
|
9332 | var styles$6 = function styles(theme) {
|
9333 | return {
|
9334 |
|
9335 | root: {
|
9336 | position: 'relative',
|
9337 | display: 'inline-flex',
|
9338 |
|
9339 | verticalAlign: 'middle',
|
9340 | flexShrink: 0
|
9341 | },
|
9342 |
|
9343 |
|
9344 | badge: {
|
9345 | display: 'flex',
|
9346 | flexDirection: 'row',
|
9347 | flexWrap: 'wrap',
|
9348 | justifyContent: 'center',
|
9349 | alignContent: 'center',
|
9350 | alignItems: 'center',
|
9351 | position: 'absolute',
|
9352 | boxSizing: 'border-box',
|
9353 | fontFamily: theme.typography.fontFamily,
|
9354 | fontWeight: theme.typography.fontWeightMedium,
|
9355 | fontSize: theme.typography.pxToRem(12),
|
9356 | minWidth: RADIUS_STANDARD * 2,
|
9357 | lineHeight: 1,
|
9358 | padding: '0 6px',
|
9359 | height: RADIUS_STANDARD * 2,
|
9360 | borderRadius: RADIUS_STANDARD,
|
9361 | zIndex: 1,
|
9362 |
|
9363 | transition: theme.transitions.create('transform', {
|
9364 | easing: theme.transitions.easing.easeInOut,
|
9365 | duration: theme.transitions.duration.enteringScreen
|
9366 | })
|
9367 | },
|
9368 |
|
9369 |
|
9370 | colorPrimary: {
|
9371 | backgroundColor: theme.palette.primary.main,
|
9372 | color: theme.palette.primary.contrastText
|
9373 | },
|
9374 |
|
9375 |
|
9376 | colorSecondary: {
|
9377 | backgroundColor: theme.palette.secondary.main,
|
9378 | color: theme.palette.secondary.contrastText
|
9379 | },
|
9380 |
|
9381 |
|
9382 | colorError: {
|
9383 | backgroundColor: theme.palette.error.main,
|
9384 | color: theme.palette.error.contrastText
|
9385 | },
|
9386 |
|
9387 |
|
9388 | dot: {
|
9389 | borderRadius: RADIUS_DOT,
|
9390 | height: RADIUS_DOT * 2,
|
9391 | minWidth: RADIUS_DOT * 2,
|
9392 | padding: 0
|
9393 | },
|
9394 |
|
9395 |
|
9396 | anchorOriginTopRightRectangle: {
|
9397 | top: 0,
|
9398 | right: 0,
|
9399 | transform: 'scale(1) translate(50%, -50%)',
|
9400 | transformOrigin: '100% 0%',
|
9401 | '&$invisible': {
|
9402 | transform: 'scale(0) translate(50%, -50%)'
|
9403 | }
|
9404 | },
|
9405 |
|
9406 |
|
9407 | anchorOriginBottomRightRectangle: {
|
9408 | bottom: 0,
|
9409 | right: 0,
|
9410 | transform: 'scale(1) translate(50%, 50%)',
|
9411 | transformOrigin: '100% 100%',
|
9412 | '&$invisible': {
|
9413 | transform: 'scale(0) translate(50%, 50%)'
|
9414 | }
|
9415 | },
|
9416 |
|
9417 |
|
9418 | anchorOriginTopLeftRectangle: {
|
9419 | top: 0,
|
9420 | left: 0,
|
9421 | transform: 'scale(1) translate(-50%, -50%)',
|
9422 | transformOrigin: '0% 0%',
|
9423 | '&$invisible': {
|
9424 | transform: 'scale(0) translate(-50%, -50%)'
|
9425 | }
|
9426 | },
|
9427 |
|
9428 |
|
9429 | anchorOriginBottomLeftRectangle: {
|
9430 | bottom: 0,
|
9431 | left: 0,
|
9432 | transform: 'scale(1) translate(-50%, 50%)',
|
9433 | transformOrigin: '0% 100%',
|
9434 | '&$invisible': {
|
9435 | transform: 'scale(0) translate(-50%, 50%)'
|
9436 | }
|
9437 | },
|
9438 |
|
9439 |
|
9440 | anchorOriginTopRightCircle: {
|
9441 | top: '14%',
|
9442 | right: '14%',
|
9443 | transform: 'scale(1) translate(50%, -50%)',
|
9444 | transformOrigin: '100% 0%',
|
9445 | '&$invisible': {
|
9446 | transform: 'scale(0) translate(50%, -50%)'
|
9447 | }
|
9448 | },
|
9449 |
|
9450 |
|
9451 | anchorOriginBottomRightCircle: {
|
9452 | bottom: '14%',
|
9453 | right: '14%',
|
9454 | transform: 'scale(1) translate(50%, 50%)',
|
9455 | transformOrigin: '100% 100%',
|
9456 | '&$invisible': {
|
9457 | transform: 'scale(0) translate(50%, 50%)'
|
9458 | }
|
9459 | },
|
9460 |
|
9461 |
|
9462 | anchorOriginTopLeftCircle: {
|
9463 | top: '14%',
|
9464 | left: '14%',
|
9465 | transform: 'scale(1) translate(-50%, -50%)',
|
9466 | transformOrigin: '0% 0%',
|
9467 | '&$invisible': {
|
9468 | transform: 'scale(0) translate(-50%, -50%)'
|
9469 | }
|
9470 | },
|
9471 |
|
9472 |
|
9473 | anchorOriginBottomLeftCircle: {
|
9474 | bottom: '14%',
|
9475 | left: '14%',
|
9476 | transform: 'scale(1) translate(-50%, 50%)',
|
9477 | transformOrigin: '0% 100%',
|
9478 | '&$invisible': {
|
9479 | transform: 'scale(0) translate(-50%, 50%)'
|
9480 | }
|
9481 | },
|
9482 |
|
9483 |
|
9484 | invisible: {
|
9485 | transition: theme.transitions.create('transform', {
|
9486 | easing: theme.transitions.easing.easeInOut,
|
9487 | duration: theme.transitions.duration.leavingScreen
|
9488 | })
|
9489 | }
|
9490 | };
|
9491 | };
|
9492 | var Badge = React__default.forwardRef(function Badge(props, ref) {
|
9493 | var _props$anchorOrigin = props.anchorOrigin,
|
9494 | anchorOrigin = _props$anchorOrigin === void 0 ? {
|
9495 | vertical: 'top',
|
9496 | horizontal: 'right'
|
9497 | } : _props$anchorOrigin,
|
9498 | badgeContent = props.badgeContent,
|
9499 | children = props.children,
|
9500 | classes = props.classes,
|
9501 | className = props.className,
|
9502 | _props$color = props.color,
|
9503 | color = _props$color === void 0 ? 'default' : _props$color,
|
9504 | _props$component = props.component,
|
9505 | ComponentProp = _props$component === void 0 ? 'span' : _props$component,
|
9506 | invisibleProp = props.invisible,
|
9507 | _props$max = props.max,
|
9508 | max = _props$max === void 0 ? 99 : _props$max,
|
9509 | _props$overlap = props.overlap,
|
9510 | overlap = _props$overlap === void 0 ? 'rectangle' : _props$overlap,
|
9511 | _props$showZero = props.showZero,
|
9512 | showZero = _props$showZero === void 0 ? false : _props$showZero,
|
9513 | _props$variant = props.variant,
|
9514 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
9515 | other = _objectWithoutProperties(props, ["anchorOrigin", "badgeContent", "children", "classes", "className", "color", "component", "invisible", "max", "overlap", "showZero", "variant"]);
|
9516 |
|
9517 | var invisible = invisibleProp;
|
9518 |
|
9519 | if (invisibleProp == null && (badgeContent === 0 && !showZero || badgeContent == null && variant !== 'dot')) {
|
9520 | invisible = true;
|
9521 | }
|
9522 |
|
9523 | var displayValue = '';
|
9524 |
|
9525 | if (variant !== 'dot') {
|
9526 | displayValue = badgeContent > max ? "".concat(max, "+") : badgeContent;
|
9527 | }
|
9528 |
|
9529 | return React__default.createElement(ComponentProp, _extends({
|
9530 | className: clsx(classes.root, className),
|
9531 | ref: ref
|
9532 | }, other), children, React__default.createElement("span", {
|
9533 | className: clsx(classes.badge, classes["".concat(anchorOrigin.horizontal).concat(capitalize(anchorOrigin.vertical), "}")], classes["anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)).concat(capitalize(overlap))], color !== 'default' && classes["color".concat(capitalize(color))], invisible && classes.invisible, {
|
9534 | dot: classes.dot
|
9535 | }[variant])
|
9536 | }, displayValue));
|
9537 | });
|
9538 | Badge.propTypes = {
|
9539 |
|
9540 |
|
9541 |
|
9542 |
|
9543 |
|
9544 | |
9545 |
|
9546 |
|
9547 | anchorOrigin: propTypes.shape({
|
9548 | horizontal: propTypes.oneOf(['left', 'right']).isRequired,
|
9549 | vertical: propTypes.oneOf(['bottom', 'top']).isRequired
|
9550 | }),
|
9551 |
|
9552 | |
9553 |
|
9554 |
|
9555 | badgeContent: propTypes.node,
|
9556 |
|
9557 | |
9558 |
|
9559 |
|
9560 | children: propTypes.node,
|
9561 |
|
9562 | |
9563 |
|
9564 |
|
9565 |
|
9566 | classes: propTypes.object,
|
9567 |
|
9568 | |
9569 |
|
9570 |
|
9571 | className: propTypes.string,
|
9572 |
|
9573 | |
9574 |
|
9575 |
|
9576 | color: propTypes.oneOf(['default', 'error', 'primary', 'secondary']),
|
9577 |
|
9578 | |
9579 |
|
9580 |
|
9581 |
|
9582 | component: propTypes.elementType,
|
9583 |
|
9584 | |
9585 |
|
9586 |
|
9587 | invisible: propTypes.bool,
|
9588 |
|
9589 | |
9590 |
|
9591 |
|
9592 | max: propTypes.number,
|
9593 |
|
9594 | |
9595 |
|
9596 |
|
9597 | overlap: propTypes.oneOf(['circle', 'rectangle']),
|
9598 |
|
9599 | |
9600 |
|
9601 |
|
9602 | showZero: propTypes.bool,
|
9603 |
|
9604 | |
9605 |
|
9606 |
|
9607 | variant: propTypes.oneOf(['dot', 'standard'])
|
9608 | } ;
|
9609 | var Badge$1 = withStyles$1(styles$6, {
|
9610 | name: 'MuiBadge'
|
9611 | })(Badge);
|
9612 |
|
9613 | var styles$7 = function styles(theme) {
|
9614 | return {
|
9615 |
|
9616 | root: {
|
9617 | display: 'flex',
|
9618 | justifyContent: 'center',
|
9619 | height: 56,
|
9620 | backgroundColor: theme.palette.background.paper
|
9621 | }
|
9622 | };
|
9623 | };
|
9624 | var BottomNavigation = React__default.forwardRef(function BottomNavigation(props, ref) {
|
9625 | var children = props.children,
|
9626 | classes = props.classes,
|
9627 | className = props.className,
|
9628 | _props$component = props.component,
|
9629 | Component = _props$component === void 0 ? 'div' : _props$component,
|
9630 | onChange = props.onChange,
|
9631 | _props$showLabels = props.showLabels,
|
9632 | showLabels = _props$showLabels === void 0 ? false : _props$showLabels,
|
9633 | value = props.value,
|
9634 | other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "onChange", "showLabels", "value"]);
|
9635 |
|
9636 | return React__default.createElement(Component, _extends({
|
9637 | className: clsx(classes.root, className),
|
9638 | ref: ref
|
9639 | }, other), React__default.Children.map(children, function (child, childIndex) {
|
9640 | if (!React__default.isValidElement(child)) {
|
9641 | return null;
|
9642 | }
|
9643 |
|
9644 | {
|
9645 | if (reactIs_2(child)) {
|
9646 | console.error(["Material-UI: the BottomNavigation component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
9647 | }
|
9648 | }
|
9649 |
|
9650 | var childValue = child.props.value === undefined ? childIndex : child.props.value;
|
9651 | return React__default.cloneElement(child, {
|
9652 | selected: childValue === value,
|
9653 | showLabel: child.props.showLabel !== undefined ? child.props.showLabel : showLabels,
|
9654 | value: childValue,
|
9655 | onChange: onChange
|
9656 | });
|
9657 | }));
|
9658 | });
|
9659 | BottomNavigation.propTypes = {
|
9660 |
|
9661 |
|
9662 |
|
9663 |
|
9664 |
|
9665 | |
9666 |
|
9667 |
|
9668 | children: propTypes.node,
|
9669 |
|
9670 | |
9671 |
|
9672 |
|
9673 |
|
9674 | classes: propTypes.object,
|
9675 |
|
9676 | |
9677 |
|
9678 |
|
9679 | className: propTypes.string,
|
9680 |
|
9681 | |
9682 |
|
9683 |
|
9684 |
|
9685 | component: propTypes.elementType,
|
9686 |
|
9687 | |
9688 |
|
9689 |
|
9690 |
|
9691 |
|
9692 |
|
9693 | onChange: propTypes.func,
|
9694 |
|
9695 | |
9696 |
|
9697 |
|
9698 |
|
9699 | showLabels: propTypes.bool,
|
9700 |
|
9701 | |
9702 |
|
9703 |
|
9704 | value: propTypes.any
|
9705 | } ;
|
9706 | var BottomNavigation$1 = withStyles$1(styles$7, {
|
9707 | name: 'MuiBottomNavigation'
|
9708 | })(BottomNavigation);
|
9709 |
|
9710 | var useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
|
9711 | |
9712 |
|
9713 |
|
9714 |
|
9715 |
|
9716 |
|
9717 | function useEventCallback(fn) {
|
9718 | var ref = React__default.useRef(fn);
|
9719 | useEnhancedEffect(function () {
|
9720 | ref.current = fn;
|
9721 | });
|
9722 | return React__default.useCallback(function () {
|
9723 | return (ref.current).apply(void 0, arguments);
|
9724 | }, []);
|
9725 | }
|
9726 |
|
9727 | var useEnhancedEffect$1 = typeof window !== 'undefined' && "development" !== 'test' ? React__default.useLayoutEffect : React__default.useEffect;
|
9728 | |
9729 |
|
9730 |
|
9731 |
|
9732 |
|
9733 |
|
9734 |
|
9735 |
|
9736 |
|
9737 |
|
9738 | function NoSsr(props) {
|
9739 | var children = props.children,
|
9740 | _props$defer = props.defer,
|
9741 | defer = _props$defer === void 0 ? false : _props$defer,
|
9742 | _props$fallback = props.fallback,
|
9743 | fallback = _props$fallback === void 0 ? null : _props$fallback;
|
9744 |
|
9745 | var _React$useState = React__default.useState(false),
|
9746 | mountedState = _React$useState[0],
|
9747 | setMountedState = _React$useState[1];
|
9748 |
|
9749 | useEnhancedEffect$1(function () {
|
9750 | if (!defer) {
|
9751 | setMountedState(true);
|
9752 | }
|
9753 | }, [defer]);
|
9754 | React__default.useEffect(function () {
|
9755 | if (defer) {
|
9756 | setMountedState(true);
|
9757 | }
|
9758 | }, [defer]);
|
9759 |
|
9760 | return React__default.createElement(React__default.Fragment, null, mountedState ? children : fallback);
|
9761 | }
|
9762 |
|
9763 | NoSsr.propTypes = {
|
9764 | |
9765 |
|
9766 |
|
9767 | children: propTypes.node.isRequired,
|
9768 |
|
9769 | |
9770 |
|
9771 |
|
9772 |
|
9773 | defer: propTypes.bool,
|
9774 |
|
9775 | |
9776 |
|
9777 |
|
9778 | fallback: propTypes.node
|
9779 | } ;
|
9780 |
|
9781 | {
|
9782 |
|
9783 | NoSsr['propTypes' + ''] = exactProp(NoSsr.propTypes);
|
9784 | }
|
9785 |
|
9786 |
|
9787 | var hadKeyboardEvent = true;
|
9788 | var hadFocusVisibleRecently = false;
|
9789 | var hadFocusVisibleRecentlyTimeout = null;
|
9790 | var inputTypesWhitelist = {
|
9791 | text: true,
|
9792 | search: true,
|
9793 | url: true,
|
9794 | tel: true,
|
9795 | email: true,
|
9796 | password: true,
|
9797 | number: true,
|
9798 | date: true,
|
9799 | month: true,
|
9800 | week: true,
|
9801 | time: true,
|
9802 | datetime: true,
|
9803 | 'datetime-local': true
|
9804 | };
|
9805 | |
9806 |
|
9807 |
|
9808 |
|
9809 |
|
9810 |
|
9811 |
|
9812 |
|
9813 | function focusTriggersKeyboardModality(node) {
|
9814 | var type = node.type,
|
9815 | tagName = node.tagName;
|
9816 |
|
9817 | if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
|
9818 | return true;
|
9819 | }
|
9820 |
|
9821 | if (tagName === 'TEXTAREA' && !node.readOnly) {
|
9822 | return true;
|
9823 | }
|
9824 |
|
9825 | if (node.isContentEditable) {
|
9826 | return true;
|
9827 | }
|
9828 |
|
9829 | return false;
|
9830 | }
|
9831 | |
9832 |
|
9833 |
|
9834 |
|
9835 |
|
9836 |
|
9837 |
|
9838 |
|
9839 |
|
9840 | function handleKeyDown(event) {
|
9841 | if (event.metaKey || event.altKey || event.ctrlKey) {
|
9842 | return;
|
9843 | }
|
9844 |
|
9845 | hadKeyboardEvent = true;
|
9846 | }
|
9847 | |
9848 |
|
9849 |
|
9850 |
|
9851 |
|
9852 |
|
9853 |
|
9854 |
|
9855 |
|
9856 | function handlePointerDown() {
|
9857 | hadKeyboardEvent = false;
|
9858 | }
|
9859 |
|
9860 | function handleVisibilityChange() {
|
9861 | if (this.visibilityState === 'hidden') {
|
9862 |
|
9863 |
|
9864 |
|
9865 |
|
9866 | if (hadFocusVisibleRecently) {
|
9867 | hadKeyboardEvent = true;
|
9868 | }
|
9869 | }
|
9870 | }
|
9871 |
|
9872 | function prepare(ownerDocument) {
|
9873 | ownerDocument.addEventListener('keydown', handleKeyDown, true);
|
9874 | ownerDocument.addEventListener('mousedown', handlePointerDown, true);
|
9875 | ownerDocument.addEventListener('pointerdown', handlePointerDown, true);
|
9876 | ownerDocument.addEventListener('touchstart', handlePointerDown, true);
|
9877 | ownerDocument.addEventListener('visibilitychange', handleVisibilityChange, true);
|
9878 | }
|
9879 |
|
9880 | function isFocusVisible(event) {
|
9881 | var target = event.target;
|
9882 |
|
9883 | try {
|
9884 | return target.matches(':focus-visible');
|
9885 | } catch (error) {}
|
9886 |
|
9887 |
|
9888 |
|
9889 |
|
9890 |
|
9891 |
|
9892 |
|
9893 | return hadKeyboardEvent || focusTriggersKeyboardModality(target);
|
9894 | }
|
9895 | |
9896 |
|
9897 |
|
9898 |
|
9899 |
|
9900 | function handleBlurVisible() {
|
9901 |
|
9902 |
|
9903 |
|
9904 |
|
9905 | hadFocusVisibleRecently = true;
|
9906 | window.clearTimeout(hadFocusVisibleRecentlyTimeout);
|
9907 | hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
|
9908 | hadFocusVisibleRecently = false;
|
9909 | }, 100);
|
9910 | }
|
9911 |
|
9912 | function useIsFocusVisible() {
|
9913 | var ref = React__default.useCallback(function (instance) {
|
9914 | var node = ReactDOM.findDOMNode(instance);
|
9915 |
|
9916 | if (node != null) {
|
9917 | prepare(node.ownerDocument);
|
9918 | }
|
9919 | }, []);
|
9920 | return {
|
9921 | isFocusVisible: isFocusVisible,
|
9922 | onBlurVisible: handleBlurVisible,
|
9923 | ref: ref
|
9924 | };
|
9925 | }
|
9926 |
|
9927 | var useEnhancedEffect$2 = typeof window === 'undefined' ? React__default.useEffect : React__default.useLayoutEffect;
|
9928 | |
9929 |
|
9930 |
|
9931 |
|
9932 | function Ripple(props) {
|
9933 | var classes = props.classes,
|
9934 | _props$pulsate = props.pulsate,
|
9935 | pulsate = _props$pulsate === void 0 ? false : _props$pulsate,
|
9936 | rippleX = props.rippleX,
|
9937 | rippleY = props.rippleY,
|
9938 | rippleSize = props.rippleSize,
|
9939 | inProp = props.in,
|
9940 | _props$onExited = props.onExited,
|
9941 | onExited = _props$onExited === void 0 ? function () {} : _props$onExited,
|
9942 | timeout = props.timeout;
|
9943 |
|
9944 | var _React$useState = React__default.useState(false),
|
9945 | leaving = _React$useState[0],
|
9946 | setLeaving = _React$useState[1];
|
9947 |
|
9948 | var rippleClassName = clsx(classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
|
9949 | var rippleStyles = {
|
9950 | width: rippleSize,
|
9951 | height: rippleSize,
|
9952 | top: -(rippleSize / 2) + rippleY,
|
9953 | left: -(rippleSize / 2) + rippleX
|
9954 | };
|
9955 | var childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
|
9956 | var handleExited = useEventCallback(onExited);
|
9957 |
|
9958 | useEnhancedEffect$2(function () {
|
9959 | if (!inProp) {
|
9960 |
|
9961 | setLeaving(true);
|
9962 |
|
9963 | var timeoutId = setTimeout(handleExited, timeout);
|
9964 | return function () {
|
9965 | clearTimeout(timeoutId);
|
9966 | };
|
9967 | }
|
9968 |
|
9969 | return undefined;
|
9970 | }, [handleExited, inProp, timeout]);
|
9971 | return React__default.createElement("span", {
|
9972 | className: rippleClassName,
|
9973 | style: rippleStyles
|
9974 | }, React__default.createElement("span", {
|
9975 | className: childClassName
|
9976 | }));
|
9977 | }
|
9978 |
|
9979 | Ripple.propTypes = {
|
9980 | |
9981 |
|
9982 |
|
9983 |
|
9984 | classes: propTypes.object.isRequired,
|
9985 |
|
9986 | |
9987 |
|
9988 |
|
9989 | in: propTypes.bool,
|
9990 |
|
9991 | |
9992 |
|
9993 |
|
9994 | onExited: propTypes.func,
|
9995 |
|
9996 | |
9997 |
|
9998 |
|
9999 | pulsate: propTypes.bool,
|
10000 |
|
10001 | |
10002 |
|
10003 |
|
10004 | rippleSize: propTypes.number,
|
10005 |
|
10006 | |
10007 |
|
10008 |
|
10009 | rippleX: propTypes.number,
|
10010 |
|
10011 | |
10012 |
|
10013 |
|
10014 | rippleY: propTypes.number,
|
10015 |
|
10016 | |
10017 |
|
10018 |
|
10019 | timeout: propTypes.number.isRequired
|
10020 | } ;
|
10021 |
|
10022 | var DURATION = 550;
|
10023 | var DELAY_RIPPLE = 80;
|
10024 | var styles$8 = function styles(theme) {
|
10025 | return {
|
10026 |
|
10027 | root: {
|
10028 | overflow: 'hidden',
|
10029 | pointerEvents: 'none',
|
10030 | position: 'absolute',
|
10031 | zIndex: 0,
|
10032 | top: 0,
|
10033 | right: 0,
|
10034 | bottom: 0,
|
10035 | left: 0,
|
10036 | borderRadius: 'inherit'
|
10037 | },
|
10038 |
|
10039 |
|
10040 | ripple: {
|
10041 | opacity: 0,
|
10042 | position: 'absolute'
|
10043 | },
|
10044 |
|
10045 |
|
10046 | rippleVisible: {
|
10047 | opacity: 0.3,
|
10048 | transform: 'scale(1)',
|
10049 | animation: "$enter ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut)
|
10050 | },
|
10051 |
|
10052 |
|
10053 | ripplePulsate: {
|
10054 | animationDuration: "".concat(theme.transitions.duration.shorter, "ms")
|
10055 | },
|
10056 |
|
10057 |
|
10058 | child: {
|
10059 | opacity: 1,
|
10060 | display: 'block',
|
10061 | width: '100%',
|
10062 | height: '100%',
|
10063 | borderRadius: '50%',
|
10064 | backgroundColor: 'currentColor'
|
10065 | },
|
10066 |
|
10067 |
|
10068 | childLeaving: {
|
10069 | opacity: 0,
|
10070 | animation: "$exit ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut)
|
10071 | },
|
10072 |
|
10073 |
|
10074 | childPulsate: {
|
10075 | position: 'absolute',
|
10076 | left: 0,
|
10077 | top: 0,
|
10078 | animation: "$pulsate 2500ms ".concat(theme.transitions.easing.easeInOut, " 200ms infinite")
|
10079 | },
|
10080 | '@keyframes enter': {
|
10081 | '0%': {
|
10082 | transform: 'scale(0)',
|
10083 | opacity: 0.1
|
10084 | },
|
10085 | '100%': {
|
10086 | transform: 'scale(1)',
|
10087 | opacity: 0.3
|
10088 | }
|
10089 | },
|
10090 | '@keyframes exit': {
|
10091 | '0%': {
|
10092 | opacity: 1
|
10093 | },
|
10094 | '100%': {
|
10095 | opacity: 0
|
10096 | }
|
10097 | },
|
10098 | '@keyframes pulsate': {
|
10099 | '0%': {
|
10100 | transform: 'scale(1)'
|
10101 | },
|
10102 | '50%': {
|
10103 | transform: 'scale(0.92)'
|
10104 | },
|
10105 | '100%': {
|
10106 | transform: 'scale(1)'
|
10107 | }
|
10108 | }
|
10109 | };
|
10110 | };
|
10111 | |
10112 |
|
10113 |
|
10114 |
|
10115 |
|
10116 |
|
10117 | var TouchRipple = React__default.forwardRef(function TouchRipple(props, ref) {
|
10118 | var _props$center = props.center,
|
10119 | centerProp = _props$center === void 0 ? false : _props$center,
|
10120 | classes = props.classes,
|
10121 | className = props.className,
|
10122 | other = _objectWithoutProperties(props, ["center", "classes", "className"]);
|
10123 |
|
10124 | var _React$useState = React__default.useState([]),
|
10125 | ripples = _React$useState[0],
|
10126 | setRipples = _React$useState[1];
|
10127 |
|
10128 | var nextKey = React__default.useRef(0);
|
10129 | var rippleCallback = React__default.useRef(null);
|
10130 | React__default.useEffect(function () {
|
10131 | if (rippleCallback.current) {
|
10132 | rippleCallback.current();
|
10133 | rippleCallback.current = null;
|
10134 | }
|
10135 | }, [ripples]);
|
10136 |
|
10137 | var ignoringMouseDown = React__default.useRef(false);
|
10138 |
|
10139 |
|
10140 | var startTimer = React__default.useRef(null);
|
10141 |
|
10142 | var startTimerCommit = React__default.useRef(null);
|
10143 | var container = React__default.useRef(null);
|
10144 | React__default.useEffect(function () {
|
10145 | return function () {
|
10146 | clearTimeout(startTimer.current);
|
10147 | };
|
10148 | }, []);
|
10149 | var startCommit = React__default.useCallback(function (params) {
|
10150 | var pulsate = params.pulsate,
|
10151 | rippleX = params.rippleX,
|
10152 | rippleY = params.rippleY,
|
10153 | rippleSize = params.rippleSize,
|
10154 | cb = params.cb;
|
10155 | setRipples(function (oldRipples) {
|
10156 | return [].concat(_toConsumableArray(oldRipples), [React__default.createElement(Ripple, {
|
10157 | key: nextKey.current,
|
10158 | classes: classes,
|
10159 | timeout: DURATION,
|
10160 | pulsate: pulsate,
|
10161 | rippleX: rippleX,
|
10162 | rippleY: rippleY,
|
10163 | rippleSize: rippleSize
|
10164 | })]);
|
10165 | });
|
10166 | nextKey.current += 1;
|
10167 | rippleCallback.current = cb;
|
10168 | }, [classes]);
|
10169 | var start = React__default.useCallback(function () {
|
10170 | var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
10171 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
10172 | var cb = arguments.length > 2 ? arguments[2] : undefined;
|
10173 | var _options$pulsate = options.pulsate,
|
10174 | pulsate = _options$pulsate === void 0 ? false : _options$pulsate,
|
10175 | _options$center = options.center,
|
10176 | center = _options$center === void 0 ? centerProp || options.pulsate : _options$center,
|
10177 | _options$fakeElement = options.fakeElement,
|
10178 | fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;
|
10179 |
|
10180 | if (event.type === 'mousedown' && ignoringMouseDown.current) {
|
10181 | ignoringMouseDown.current = false;
|
10182 | return;
|
10183 | }
|
10184 |
|
10185 | if (event.type === 'touchstart') {
|
10186 | ignoringMouseDown.current = true;
|
10187 | }
|
10188 |
|
10189 | var element = fakeElement ? null : container.current;
|
10190 | var rect = element ? element.getBoundingClientRect() : {
|
10191 | width: 0,
|
10192 | height: 0,
|
10193 | left: 0,
|
10194 | top: 0
|
10195 | };
|
10196 |
|
10197 | var rippleX;
|
10198 | var rippleY;
|
10199 | var rippleSize;
|
10200 |
|
10201 | if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
|
10202 | rippleX = Math.round(rect.width / 2);
|
10203 | rippleY = Math.round(rect.height / 2);
|
10204 | } else {
|
10205 | var clientX = event.clientX ? event.clientX : event.touches[0].clientX;
|
10206 | var clientY = event.clientY ? event.clientY : event.touches[0].clientY;
|
10207 | rippleX = Math.round(clientX - rect.left);
|
10208 | rippleY = Math.round(clientY - rect.top);
|
10209 | }
|
10210 |
|
10211 | if (center) {
|
10212 | rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3);
|
10213 |
|
10214 | if (rippleSize % 2 === 0) {
|
10215 | rippleSize += 1;
|
10216 | }
|
10217 | } else {
|
10218 | var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
|
10219 | var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
|
10220 | rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));
|
10221 | }
|
10222 |
|
10223 |
|
10224 | if (event.touches) {
|
10225 |
|
10226 | startTimerCommit.current = function () {
|
10227 | startCommit({
|
10228 | pulsate: pulsate,
|
10229 | rippleX: rippleX,
|
10230 | rippleY: rippleY,
|
10231 | rippleSize: rippleSize,
|
10232 | cb: cb
|
10233 | });
|
10234 | };
|
10235 |
|
10236 |
|
10237 | startTimer.current = setTimeout(function () {
|
10238 | if (startTimerCommit.current) {
|
10239 | startTimerCommit.current();
|
10240 | startTimerCommit.current = null;
|
10241 | }
|
10242 | }, DELAY_RIPPLE);
|
10243 | } else {
|
10244 | startCommit({
|
10245 | pulsate: pulsate,
|
10246 | rippleX: rippleX,
|
10247 | rippleY: rippleY,
|
10248 | rippleSize: rippleSize,
|
10249 | cb: cb
|
10250 | });
|
10251 | }
|
10252 | }, [centerProp, startCommit]);
|
10253 | var pulsate = React__default.useCallback(function () {
|
10254 | start({}, {
|
10255 | pulsate: true
|
10256 | });
|
10257 | }, [start]);
|
10258 | var stop = React__default.useCallback(function (event, cb) {
|
10259 | clearTimeout(startTimer.current);
|
10260 |
|
10261 |
|
10262 | if (event.type === 'touchend' && startTimerCommit.current) {
|
10263 | event.persist();
|
10264 | startTimerCommit.current();
|
10265 | startTimerCommit.current = null;
|
10266 | startTimer.current = setTimeout(function () {
|
10267 | stop(event, cb);
|
10268 | });
|
10269 | return;
|
10270 | }
|
10271 |
|
10272 | startTimerCommit.current = null;
|
10273 | setRipples(function (oldRipples) {
|
10274 | if (oldRipples.length > 0) {
|
10275 | return oldRipples.slice(1);
|
10276 | }
|
10277 |
|
10278 | return oldRipples;
|
10279 | });
|
10280 | rippleCallback.current = cb;
|
10281 | }, []);
|
10282 | React__default.useImperativeHandle(ref, function () {
|
10283 | return {
|
10284 | pulsate: pulsate,
|
10285 | start: start,
|
10286 | stop: stop
|
10287 | };
|
10288 | }, [pulsate, start, stop]);
|
10289 | return React__default.createElement("span", _extends({
|
10290 | className: clsx(classes.root, className),
|
10291 | ref: container
|
10292 | }, other), React__default.createElement(TransitionGroup, {
|
10293 | component: null,
|
10294 | exit: true
|
10295 | }, ripples));
|
10296 | });
|
10297 |
|
10298 | function withMuiName(Component) {
|
10299 | Component.muiName = 'MuiTouchRipple';
|
10300 | return Component;
|
10301 | }
|
10302 |
|
10303 | TouchRipple.propTypes = {
|
10304 | |
10305 |
|
10306 |
|
10307 |
|
10308 | center: propTypes.bool,
|
10309 |
|
10310 | |
10311 |
|
10312 |
|
10313 |
|
10314 | classes: propTypes.object.isRequired,
|
10315 |
|
10316 | |
10317 |
|
10318 |
|
10319 | className: propTypes.string
|
10320 | } ;
|
10321 | var TouchRipple$1 = withStyles$1(styles$8, {
|
10322 | flip: false,
|
10323 | name: 'MuiTouchRipple'
|
10324 | })(withMuiName(React__default.memo(TouchRipple)));
|
10325 |
|
10326 | var styles$9 = {
|
10327 |
|
10328 | root: {
|
10329 | display: 'inline-flex',
|
10330 | alignItems: 'center',
|
10331 | justifyContent: 'center',
|
10332 | position: 'relative',
|
10333 | WebkitTapHighlightColor: 'transparent',
|
10334 | backgroundColor: 'transparent',
|
10335 |
|
10336 |
|
10337 | outline: 0,
|
10338 | border: 0,
|
10339 | margin: 0,
|
10340 |
|
10341 | borderRadius: 0,
|
10342 | padding: 0,
|
10343 |
|
10344 | cursor: 'pointer',
|
10345 | userSelect: 'none',
|
10346 | verticalAlign: 'middle',
|
10347 | '-moz-appearance': 'none',
|
10348 |
|
10349 | '-webkit-appearance': 'none',
|
10350 |
|
10351 | textDecoration: 'none',
|
10352 |
|
10353 | color: 'inherit',
|
10354 | '&::-moz-focus-inner': {
|
10355 | borderStyle: 'none'
|
10356 |
|
10357 | },
|
10358 | '&$disabled': {
|
10359 | pointerEvents: 'none',
|
10360 |
|
10361 | cursor: 'default'
|
10362 | }
|
10363 | },
|
10364 |
|
10365 |
|
10366 | disabled: {},
|
10367 |
|
10368 |
|
10369 | focusVisible: {}
|
10370 | };
|
10371 | |
10372 |
|
10373 |
|
10374 |
|
10375 |
|
10376 |
|
10377 | var ButtonBase = React__default.forwardRef(function ButtonBase(props, ref) {
|
10378 | var action = props.action,
|
10379 | buttonRefProp = props.buttonRef,
|
10380 | _props$centerRipple = props.centerRipple,
|
10381 | centerRipple = _props$centerRipple === void 0 ? false : _props$centerRipple,
|
10382 | children = props.children,
|
10383 | classes = props.classes,
|
10384 | className = props.className,
|
10385 | _props$component = props.component,
|
10386 | component = _props$component === void 0 ? 'button' : _props$component,
|
10387 | _props$disabled = props.disabled,
|
10388 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
10389 | _props$disableRipple = props.disableRipple,
|
10390 | disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,
|
10391 | _props$disableTouchRi = props.disableTouchRipple,
|
10392 | disableTouchRipple = _props$disableTouchRi === void 0 ? false : _props$disableTouchRi,
|
10393 | _props$focusRipple = props.focusRipple,
|
10394 | focusRipple = _props$focusRipple === void 0 ? false : _props$focusRipple,
|
10395 | focusVisibleClassName = props.focusVisibleClassName,
|
10396 | onBlur = props.onBlur,
|
10397 | onClick = props.onClick,
|
10398 | onFocus = props.onFocus,
|
10399 | onFocusVisible = props.onFocusVisible,
|
10400 | onKeyDown = props.onKeyDown,
|
10401 | onKeyUp = props.onKeyUp,
|
10402 | onMouseDown = props.onMouseDown,
|
10403 | onMouseLeave = props.onMouseLeave,
|
10404 | onMouseUp = props.onMouseUp,
|
10405 | onTouchEnd = props.onTouchEnd,
|
10406 | onTouchMove = props.onTouchMove,
|
10407 | onTouchStart = props.onTouchStart,
|
10408 | onDragLeave = props.onDragLeave,
|
10409 | _props$tabIndex = props.tabIndex,
|
10410 | tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
|
10411 | TouchRippleProps = props.TouchRippleProps,
|
10412 | _props$type = props.type,
|
10413 | type = _props$type === void 0 ? 'button' : _props$type,
|
10414 | other = _objectWithoutProperties(props, ["action", "buttonRef", "centerRipple", "children", "classes", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "onDragLeave", "tabIndex", "TouchRippleProps", "type"]);
|
10415 |
|
10416 | var buttonRef = React__default.useRef(null);
|
10417 |
|
10418 | function getButtonNode() {
|
10419 |
|
10420 | return ReactDOM.findDOMNode(buttonRef.current);
|
10421 | }
|
10422 |
|
10423 | var rippleRef = React__default.useRef(null);
|
10424 |
|
10425 | var _React$useState = React__default.useState(false),
|
10426 | focusVisible = _React$useState[0],
|
10427 | setFocusVisible = _React$useState[1];
|
10428 |
|
10429 | if (disabled && focusVisible) {
|
10430 | setFocusVisible(false);
|
10431 | }
|
10432 |
|
10433 | var _useIsFocusVisible = useIsFocusVisible(),
|
10434 | isFocusVisible = _useIsFocusVisible.isFocusVisible,
|
10435 | onBlurVisible = _useIsFocusVisible.onBlurVisible,
|
10436 | focusVisibleRef = _useIsFocusVisible.ref;
|
10437 |
|
10438 | React__default.useImperativeHandle(action, function () {
|
10439 | return {
|
10440 | focusVisible: function focusVisible() {
|
10441 | setFocusVisible(true);
|
10442 | buttonRef.current.focus();
|
10443 | }
|
10444 | };
|
10445 | }, []);
|
10446 | React__default.useEffect(function () {
|
10447 | if (focusVisible && focusRipple && !disableRipple) {
|
10448 | rippleRef.current.pulsate();
|
10449 | }
|
10450 | }, [disableRipple, focusRipple, focusVisible]);
|
10451 |
|
10452 | function useRippleHandler(rippleAction, eventCallback) {
|
10453 | var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple;
|
10454 | return useEventCallback(function (event) {
|
10455 | if (eventCallback) {
|
10456 | eventCallback(event);
|
10457 | }
|
10458 |
|
10459 | var ignore = skipRippleAction;
|
10460 |
|
10461 | if (!ignore && rippleRef.current) {
|
10462 | rippleRef.current[rippleAction](event);
|
10463 | }
|
10464 |
|
10465 | return true;
|
10466 | });
|
10467 | }
|
10468 |
|
10469 | var handleMouseDown = useRippleHandler('start', onMouseDown);
|
10470 | var handleDragLeave = useRippleHandler('stop', onDragLeave);
|
10471 | var handleMouseUp = useRippleHandler('stop', onMouseUp);
|
10472 | var handleMouseLeave = useRippleHandler('stop', function (event) {
|
10473 | if (focusVisible) {
|
10474 | event.preventDefault();
|
10475 | }
|
10476 |
|
10477 | if (onMouseLeave) {
|
10478 | onMouseLeave(event);
|
10479 | }
|
10480 | });
|
10481 | var handleTouchStart = useRippleHandler('start', onTouchStart);
|
10482 | var handleTouchEnd = useRippleHandler('stop', onTouchEnd);
|
10483 | var handleTouchMove = useRippleHandler('stop', onTouchMove);
|
10484 | var handleBlur = useRippleHandler('stop', function (event) {
|
10485 | if (focusVisible) {
|
10486 | onBlurVisible(event);
|
10487 | setFocusVisible(false);
|
10488 | }
|
10489 |
|
10490 | if (onBlur) {
|
10491 | onBlur(event);
|
10492 | }
|
10493 | }, false);
|
10494 | var handleFocus = useEventCallback(function (event) {
|
10495 | if (disabled) {
|
10496 | return;
|
10497 | }
|
10498 |
|
10499 |
|
10500 | if (!buttonRef.current) {
|
10501 | buttonRef.current = event.currentTarget;
|
10502 | }
|
10503 |
|
10504 | if (isFocusVisible(event)) {
|
10505 | setFocusVisible(true);
|
10506 |
|
10507 | if (onFocusVisible) {
|
10508 | onFocusVisible(event);
|
10509 | }
|
10510 | }
|
10511 |
|
10512 | if (onFocus) {
|
10513 | onFocus(event);
|
10514 | }
|
10515 | });
|
10516 |
|
10517 | var isNonNativeButton = function isNonNativeButton() {
|
10518 | var button = getButtonNode();
|
10519 | return component && component !== 'button' && !(button.tagName === 'A' && button.href);
|
10520 | };
|
10521 | |
10522 |
|
10523 |
|
10524 |
|
10525 |
|
10526 | var keydownRef = React__default.useRef(false);
|
10527 | var handleKeyDown = useEventCallback(function (event) {
|
10528 |
|
10529 | if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
|
10530 | keydownRef.current = true;
|
10531 | event.persist();
|
10532 | rippleRef.current.stop(event, function () {
|
10533 | rippleRef.current.start(event);
|
10534 | });
|
10535 | }
|
10536 |
|
10537 | if (onKeyDown) {
|
10538 | onKeyDown(event);
|
10539 | }
|
10540 |
|
10541 |
|
10542 | if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter') {
|
10543 | event.preventDefault();
|
10544 |
|
10545 | if (onClick) {
|
10546 | onClick(event);
|
10547 | }
|
10548 | }
|
10549 | });
|
10550 | var handleKeyUp = useEventCallback(function (event) {
|
10551 |
|
10552 |
|
10553 | if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
|
10554 | keydownRef.current = false;
|
10555 | event.persist();
|
10556 | rippleRef.current.stop(event, function () {
|
10557 | rippleRef.current.pulsate(event);
|
10558 | });
|
10559 | }
|
10560 |
|
10561 | if (onKeyUp) {
|
10562 | onKeyUp(event);
|
10563 | }
|
10564 |
|
10565 |
|
10566 | if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
|
10567 | event.preventDefault();
|
10568 |
|
10569 | if (onClick) {
|
10570 | onClick(event);
|
10571 | }
|
10572 | }
|
10573 | });
|
10574 | var ComponentProp = component;
|
10575 |
|
10576 | if (ComponentProp === 'button' && other.href) {
|
10577 | ComponentProp = 'a';
|
10578 | }
|
10579 |
|
10580 | var buttonProps = {};
|
10581 |
|
10582 | if (ComponentProp === 'button') {
|
10583 | buttonProps.type = type;
|
10584 | buttonProps.disabled = disabled;
|
10585 | } else {
|
10586 | if (ComponentProp !== 'a' || !other.href) {
|
10587 | buttonProps.role = 'button';
|
10588 | }
|
10589 |
|
10590 | buttonProps['aria-disabled'] = disabled;
|
10591 | }
|
10592 |
|
10593 | var handleUserRef = useForkRef(buttonRefProp, ref);
|
10594 | var handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
|
10595 | var handleRef = useForkRef(handleUserRef, handleOwnRef);
|
10596 | return React__default.createElement(ComponentProp, _extends({
|
10597 | className: clsx(classes.root, className, focusVisible && [classes.focusVisible, focusVisibleClassName], disabled && classes.disabled),
|
10598 | onBlur: handleBlur,
|
10599 | onClick: onClick,
|
10600 | onFocus: handleFocus,
|
10601 | onKeyDown: handleKeyDown,
|
10602 | onKeyUp: handleKeyUp,
|
10603 | onMouseDown: handleMouseDown,
|
10604 | onMouseLeave: handleMouseLeave,
|
10605 | onMouseUp: handleMouseUp,
|
10606 | onDragLeave: handleDragLeave,
|
10607 | onTouchEnd: handleTouchEnd,
|
10608 | onTouchMove: handleTouchMove,
|
10609 | onTouchStart: handleTouchStart,
|
10610 | ref: handleRef,
|
10611 | tabIndex: disabled ? -1 : tabIndex
|
10612 | }, buttonProps, other), children, !disableRipple && !disabled ? React__default.createElement(NoSsr, null, React__default.createElement(TouchRipple$1, _extends({
|
10613 | ref: rippleRef,
|
10614 | center: centerRipple
|
10615 | }, TouchRippleProps))) : null);
|
10616 | });
|
10617 | ButtonBase.propTypes = {
|
10618 | |
10619 |
|
10620 |
|
10621 |
|
10622 | action: refType,
|
10623 |
|
10624 | |
10625 |
|
10626 |
|
10627 |
|
10628 |
|
10629 |
|
10630 | buttonRef: refType,
|
10631 |
|
10632 | |
10633 |
|
10634 |
|
10635 |
|
10636 | centerRipple: propTypes.bool,
|
10637 |
|
10638 | |
10639 |
|
10640 |
|
10641 | children: propTypes.node,
|
10642 |
|
10643 | |
10644 |
|
10645 |
|
10646 |
|
10647 | classes: propTypes.object.isRequired,
|
10648 |
|
10649 | |
10650 |
|
10651 |
|
10652 | className: propTypes.string,
|
10653 |
|
10654 | |
10655 |
|
10656 |
|
10657 |
|
10658 | component: elementTypeAcceptingRef$1,
|
10659 |
|
10660 | |
10661 |
|
10662 |
|
10663 | disabled: propTypes.bool,
|
10664 |
|
10665 | |
10666 |
|
10667 |
|
10668 |
|
10669 |
|
10670 |
|
10671 | disableRipple: propTypes.bool,
|
10672 |
|
10673 | |
10674 |
|
10675 |
|
10676 | disableTouchRipple: propTypes.bool,
|
10677 |
|
10678 | |
10679 |
|
10680 |
|
10681 |
|
10682 | focusRipple: propTypes.bool,
|
10683 |
|
10684 | |
10685 |
|
10686 |
|
10687 |
|
10688 |
|
10689 |
|
10690 |
|
10691 |
|
10692 | focusVisibleClassName: propTypes.string,
|
10693 |
|
10694 | |
10695 |
|
10696 |
|
10697 | onBlur: propTypes.func,
|
10698 |
|
10699 | |
10700 |
|
10701 |
|
10702 | onClick: propTypes.func,
|
10703 |
|
10704 | |
10705 |
|
10706 |
|
10707 | onDragLeave: propTypes.func,
|
10708 |
|
10709 | |
10710 |
|
10711 |
|
10712 | onFocus: propTypes.func,
|
10713 |
|
10714 | |
10715 |
|
10716 |
|
10717 |
|
10718 | onFocusVisible: propTypes.func,
|
10719 |
|
10720 | |
10721 |
|
10722 |
|
10723 | onKeyDown: propTypes.func,
|
10724 |
|
10725 | |
10726 |
|
10727 |
|
10728 | onKeyUp: propTypes.func,
|
10729 |
|
10730 | |
10731 |
|
10732 |
|
10733 | onMouseDown: propTypes.func,
|
10734 |
|
10735 | |
10736 |
|
10737 |
|
10738 | onMouseLeave: propTypes.func,
|
10739 |
|
10740 | |
10741 |
|
10742 |
|
10743 | onMouseUp: propTypes.func,
|
10744 |
|
10745 | |
10746 |
|
10747 |
|
10748 | onTouchEnd: propTypes.func,
|
10749 |
|
10750 | |
10751 |
|
10752 |
|
10753 | onTouchMove: propTypes.func,
|
10754 |
|
10755 | |
10756 |
|
10757 |
|
10758 | onTouchStart: propTypes.func,
|
10759 |
|
10760 | |
10761 |
|
10762 |
|
10763 | role: propTypes.string,
|
10764 |
|
10765 | |
10766 |
|
10767 |
|
10768 | tabIndex: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
10769 |
|
10770 | |
10771 |
|
10772 |
|
10773 | TouchRippleProps: propTypes.object,
|
10774 |
|
10775 | |
10776 |
|
10777 |
|
10778 |
|
10779 | type: propTypes.oneOf(['submit', 'reset', 'button'])
|
10780 | } ;
|
10781 | var ButtonBase$1 = withStyles$1(styles$9, {
|
10782 | name: 'MuiButtonBase'
|
10783 | })(ButtonBase);
|
10784 |
|
10785 | function unsupportedProp(props, propName, componentName, location, propFullName) {
|
10786 |
|
10787 | var propFullNameSafe = propFullName || propName;
|
10788 |
|
10789 | if (typeof props[propName] !== 'undefined') {
|
10790 | return new Error("The prop `".concat(propFullNameSafe, "` is not supported. Please remove it."));
|
10791 | }
|
10792 |
|
10793 | return null;
|
10794 | }
|
10795 |
|
10796 | var styles$a = function styles(theme) {
|
10797 | return {
|
10798 |
|
10799 | root: {
|
10800 | transition: theme.transitions.create(['color', 'padding-top'], {
|
10801 | duration: theme.transitions.duration.short
|
10802 | }),
|
10803 | padding: '6px 12px 8px',
|
10804 | minWidth: 80,
|
10805 | maxWidth: 168,
|
10806 | color: theme.palette.text.secondary,
|
10807 | flex: '1',
|
10808 | '&$iconOnly': {
|
10809 | paddingTop: 16
|
10810 | },
|
10811 | '&$selected': {
|
10812 | paddingTop: 6,
|
10813 | color: theme.palette.primary.main
|
10814 | }
|
10815 | },
|
10816 |
|
10817 |
|
10818 | selected: {},
|
10819 |
|
10820 |
|
10821 | iconOnly: {},
|
10822 |
|
10823 |
|
10824 | wrapper: {
|
10825 | display: 'inline-flex',
|
10826 | alignItems: 'center',
|
10827 | justifyContent: 'center',
|
10828 | width: '100%',
|
10829 | flexDirection: 'column'
|
10830 | },
|
10831 |
|
10832 |
|
10833 | label: {
|
10834 | fontFamily: theme.typography.fontFamily,
|
10835 | fontSize: theme.typography.pxToRem(12),
|
10836 | opacity: 1,
|
10837 | transition: 'font-size 0.2s, opacity 0.2s',
|
10838 | transitionDelay: '0.1s',
|
10839 | '&$iconOnly': {
|
10840 | opacity: 0,
|
10841 | transitionDelay: '0s'
|
10842 | },
|
10843 | '&$selected': {
|
10844 | fontSize: theme.typography.pxToRem(14)
|
10845 | }
|
10846 | }
|
10847 | };
|
10848 | };
|
10849 | var BottomNavigationAction = React__default.forwardRef(function BottomNavigationAction(props, ref) {
|
10850 | var classes = props.classes,
|
10851 | className = props.className,
|
10852 | icon = props.icon,
|
10853 | label = props.label,
|
10854 | onChange = props.onChange,
|
10855 | onClick = props.onClick,
|
10856 | selected = props.selected,
|
10857 | showLabel = props.showLabel,
|
10858 | value = props.value,
|
10859 | other = _objectWithoutProperties(props, ["classes", "className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"]);
|
10860 |
|
10861 | var handleChange = function handleChange(event) {
|
10862 | if (onChange) {
|
10863 | onChange(event, value);
|
10864 | }
|
10865 |
|
10866 | if (onClick) {
|
10867 | onClick(event);
|
10868 | }
|
10869 | };
|
10870 |
|
10871 | return React__default.createElement(ButtonBase$1, _extends({
|
10872 | ref: ref,
|
10873 | className: clsx(classes.root, className, selected ? classes.selected : !showLabel && classes.iconOnly),
|
10874 | focusRipple: true,
|
10875 | onClick: handleChange
|
10876 | }, other), React__default.createElement("span", {
|
10877 | className: classes.wrapper
|
10878 | }, icon, React__default.createElement("span", {
|
10879 | className: clsx(classes.label, selected ? classes.selected : !showLabel && classes.iconOnly)
|
10880 | }, label)));
|
10881 | });
|
10882 | BottomNavigationAction.propTypes = {
|
10883 | |
10884 |
|
10885 |
|
10886 |
|
10887 | children: unsupportedProp,
|
10888 |
|
10889 | |
10890 |
|
10891 |
|
10892 |
|
10893 | classes: propTypes.object.isRequired,
|
10894 |
|
10895 | |
10896 |
|
10897 |
|
10898 | className: propTypes.string,
|
10899 |
|
10900 | |
10901 |
|
10902 |
|
10903 | icon: propTypes.node,
|
10904 |
|
10905 | |
10906 |
|
10907 |
|
10908 | label: propTypes.node,
|
10909 |
|
10910 | |
10911 |
|
10912 |
|
10913 | onChange: propTypes.func,
|
10914 |
|
10915 | |
10916 |
|
10917 |
|
10918 | onClick: propTypes.func,
|
10919 |
|
10920 | |
10921 |
|
10922 |
|
10923 | selected: propTypes.bool,
|
10924 |
|
10925 | |
10926 |
|
10927 |
|
10928 |
|
10929 |
|
10930 | showLabel: propTypes.bool,
|
10931 |
|
10932 | |
10933 |
|
10934 |
|
10935 | value: propTypes.any
|
10936 | } ;
|
10937 | var BottomNavigationAction$1 = withStyles$1(styles$a, {
|
10938 | name: 'MuiBottomNavigationAction'
|
10939 | })(BottomNavigationAction);
|
10940 |
|
10941 | var responsivePropType = propTypes.oneOfType([propTypes.number, propTypes.string, propTypes.object, propTypes.array]) ;
|
10942 |
|
10943 | function merge(acc, item) {
|
10944 | if (!item) {
|
10945 | return acc;
|
10946 | }
|
10947 |
|
10948 | return deepmerge(acc, item, {
|
10949 | clone: false
|
10950 |
|
10951 | });
|
10952 | }
|
10953 |
|
10954 |
|
10955 |
|
10956 | var values$1 = {
|
10957 | xs: 0,
|
10958 | sm: 600,
|
10959 | md: 960,
|
10960 | lg: 1280,
|
10961 | xl: 1920
|
10962 | };
|
10963 | var defaultBreakpoints = {
|
10964 |
|
10965 |
|
10966 | keys: ['xs', 'sm', 'md', 'lg', 'xl'],
|
10967 | up: function up(key) {
|
10968 | return "@media (min-width:".concat(values$1[key], "px)");
|
10969 | }
|
10970 | };
|
10971 | function handleBreakpoints(props, propValue, styleFromPropValue) {
|
10972 | {
|
10973 | if (!props.theme) {
|
10974 | console.error('@material-ui/system: you are calling a style function without a theme value.');
|
10975 | }
|
10976 | }
|
10977 |
|
10978 | if (Array.isArray(propValue)) {
|
10979 | var themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
|
10980 | return propValue.reduce(function (acc, item, index) {
|
10981 | acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
|
10982 | return acc;
|
10983 | }, {});
|
10984 | }
|
10985 |
|
10986 | if (_typeof(propValue) === 'object') {
|
10987 | var _themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
|
10988 |
|
10989 | return Object.keys(propValue).reduce(function (acc, breakpoint) {
|
10990 | acc[_themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
|
10991 | return acc;
|
10992 | }, {});
|
10993 | }
|
10994 |
|
10995 | var output = styleFromPropValue(propValue);
|
10996 | return output;
|
10997 | }
|
10998 |
|
10999 | function getPath(obj, path) {
|
11000 | if (!path || typeof path !== 'string') {
|
11001 | return null;
|
11002 | }
|
11003 |
|
11004 | return path.split('.').reduce(function (acc, item) {
|
11005 | return acc && acc[item] ? acc[item] : null;
|
11006 | }, obj);
|
11007 | }
|
11008 |
|
11009 | function style$1(options) {
|
11010 | var prop = options.prop,
|
11011 | _options$cssProperty = options.cssProperty,
|
11012 | cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,
|
11013 | themeKey = options.themeKey,
|
11014 | transform = options.transform;
|
11015 |
|
11016 | var fn = function fn(props) {
|
11017 | if (props[prop] == null) {
|
11018 | return null;
|
11019 | }
|
11020 |
|
11021 | var propValue = props[prop];
|
11022 | var theme = props.theme;
|
11023 | var themeMapping = getPath(theme, themeKey) || {};
|
11024 |
|
11025 | var styleFromPropValue = function styleFromPropValue(propValueFinal) {
|
11026 | var value;
|
11027 |
|
11028 | if (typeof themeMapping === 'function') {
|
11029 | value = themeMapping(propValueFinal);
|
11030 | } else if (Array.isArray(themeMapping)) {
|
11031 | value = themeMapping[propValueFinal] || propValueFinal;
|
11032 | } else {
|
11033 | value = getPath(themeMapping, propValueFinal) || propValueFinal;
|
11034 |
|
11035 | if (transform) {
|
11036 | value = transform(value);
|
11037 | }
|
11038 | }
|
11039 |
|
11040 | if (cssProperty === false) {
|
11041 | return value;
|
11042 | }
|
11043 |
|
11044 | return _defineProperty({}, cssProperty, value);
|
11045 | };
|
11046 |
|
11047 | return handleBreakpoints(props, propValue, styleFromPropValue);
|
11048 | };
|
11049 |
|
11050 | fn.propTypes = _defineProperty({}, prop, responsivePropType) ;
|
11051 | fn.filterProps = [prop];
|
11052 | return fn;
|
11053 | }
|
11054 |
|
11055 | function compose() {
|
11056 | for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
|
11057 | styles[_key] = arguments[_key];
|
11058 | }
|
11059 |
|
11060 | var fn = function fn(props) {
|
11061 | return styles.reduce(function (acc, style) {
|
11062 | var output = style(props);
|
11063 |
|
11064 | if (output) {
|
11065 | return merge(acc, output);
|
11066 | }
|
11067 |
|
11068 | return acc;
|
11069 | }, {});
|
11070 | };
|
11071 |
|
11072 |
|
11073 |
|
11074 |
|
11075 |
|
11076 |
|
11077 |
|
11078 |
|
11079 |
|
11080 |
|
11081 |
|
11082 |
|
11083 |
|
11084 |
|
11085 |
|
11086 |
|
11087 | fn.propTypes = styles.reduce(function (acc, style) {
|
11088 | return _extends(acc, style.propTypes);
|
11089 | }, {}) ;
|
11090 | fn.filterProps = styles.reduce(function (acc, style) {
|
11091 | return acc.concat(style.filterProps);
|
11092 | }, []);
|
11093 | return fn;
|
11094 | }
|
11095 |
|
11096 | function getBorder(value) {
|
11097 | if (typeof value !== 'number') {
|
11098 | return value;
|
11099 | }
|
11100 |
|
11101 | return "".concat(value, "px solid");
|
11102 | }
|
11103 |
|
11104 | var border = style$1({
|
11105 | prop: 'border',
|
11106 | themeKey: 'borders',
|
11107 | transform: getBorder
|
11108 | });
|
11109 | var borderTop = style$1({
|
11110 | prop: 'borderTop',
|
11111 | themeKey: 'borders',
|
11112 | transform: getBorder
|
11113 | });
|
11114 | var borderRight = style$1({
|
11115 | prop: 'borderRight',
|
11116 | themeKey: 'borders',
|
11117 | transform: getBorder
|
11118 | });
|
11119 | var borderBottom = style$1({
|
11120 | prop: 'borderBottom',
|
11121 | themeKey: 'borders',
|
11122 | transform: getBorder
|
11123 | });
|
11124 | var borderLeft = style$1({
|
11125 | prop: 'borderLeft',
|
11126 | themeKey: 'borders',
|
11127 | transform: getBorder
|
11128 | });
|
11129 | var borderColor = style$1({
|
11130 | prop: 'borderColor',
|
11131 | themeKey: 'palette'
|
11132 | });
|
11133 | var borderRadius = style$1({
|
11134 | prop: 'borderRadius',
|
11135 | themeKey: 'shape'
|
11136 | });
|
11137 | var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
|
11138 |
|
11139 | function omit$1(input, fields) {
|
11140 | var output = {};
|
11141 | Object.keys(input).forEach(function (prop) {
|
11142 | if (fields.indexOf(prop) === -1) {
|
11143 | output[prop] = input[prop];
|
11144 | }
|
11145 | });
|
11146 | return output;
|
11147 | }
|
11148 |
|
11149 | function css$1(styleFunction) {
|
11150 | var newStyleFunction = function newStyleFunction(props) {
|
11151 | var output = styleFunction(props);
|
11152 |
|
11153 | if (props.css) {
|
11154 | return _extends({}, merge(output, styleFunction(_extends({
|
11155 | theme: props.theme
|
11156 | }, props.css))), {}, omit$1(props.css, [styleFunction.filterProps]));
|
11157 | }
|
11158 |
|
11159 | return output;
|
11160 | };
|
11161 |
|
11162 | newStyleFunction.propTypes = _extends({}, styleFunction.propTypes, {
|
11163 | css: propTypes.object
|
11164 | }) ;
|
11165 | newStyleFunction.filterProps = ['css'].concat(_toConsumableArray(styleFunction.filterProps));
|
11166 | return newStyleFunction;
|
11167 | }
|
11168 |
|
11169 | var displayPrint = style$1({
|
11170 | prop: 'displayPrint',
|
11171 | cssProperty: false,
|
11172 | transform: function transform(value) {
|
11173 | return {
|
11174 | '@media print': {
|
11175 | display: value
|
11176 | }
|
11177 | };
|
11178 | }
|
11179 | });
|
11180 | var displayRaw = style$1({
|
11181 | prop: 'display'
|
11182 | });
|
11183 | var overflow = style$1({
|
11184 | prop: 'overflow'
|
11185 | });
|
11186 | var textOverflow = style$1({
|
11187 | prop: 'textOverflow'
|
11188 | });
|
11189 | var visibility = style$1({
|
11190 | prop: 'visibility'
|
11191 | });
|
11192 | var whiteSpace = style$1({
|
11193 | prop: 'whiteSpace'
|
11194 | });
|
11195 | var display = compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
|
11196 |
|
11197 | var flexBasis = style$1({
|
11198 | prop: 'flexBasis'
|
11199 | });
|
11200 | var flexDirection = style$1({
|
11201 | prop: 'flexDirection'
|
11202 | });
|
11203 | var flexWrap = style$1({
|
11204 | prop: 'flexWrap'
|
11205 | });
|
11206 | var justifyContent = style$1({
|
11207 | prop: 'justifyContent'
|
11208 | });
|
11209 | var alignItems = style$1({
|
11210 | prop: 'alignItems'
|
11211 | });
|
11212 | var alignContent = style$1({
|
11213 | prop: 'alignContent'
|
11214 | });
|
11215 | var order = style$1({
|
11216 | prop: 'order'
|
11217 | });
|
11218 | var flex = style$1({
|
11219 | prop: 'flex'
|
11220 | });
|
11221 | var flexGrow = style$1({
|
11222 | prop: 'flexGrow'
|
11223 | });
|
11224 | var flexShrink = style$1({
|
11225 | prop: 'flexShrink'
|
11226 | });
|
11227 | var alignSelf = style$1({
|
11228 | prop: 'alignSelf'
|
11229 | });
|
11230 | var justifyItems = style$1({
|
11231 | prop: 'justifyItems'
|
11232 | });
|
11233 | var justifySelf = style$1({
|
11234 | prop: 'justifySelf'
|
11235 | });
|
11236 | var flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
|
11237 |
|
11238 | var color = style$1({
|
11239 | prop: 'color',
|
11240 | themeKey: 'palette'
|
11241 | });
|
11242 | var bgcolor = style$1({
|
11243 | prop: 'bgcolor',
|
11244 | cssProperty: 'backgroundColor',
|
11245 | themeKey: 'palette'
|
11246 | });
|
11247 | var palette = compose(color, bgcolor);
|
11248 |
|
11249 | var position = style$1({
|
11250 | prop: 'position'
|
11251 | });
|
11252 | var zIndex$1 = style$1({
|
11253 | prop: 'zIndex',
|
11254 | themeKey: 'zIndex'
|
11255 | });
|
11256 | var top = style$1({
|
11257 | prop: 'top'
|
11258 | });
|
11259 | var right = style$1({
|
11260 | prop: 'right'
|
11261 | });
|
11262 | var bottom = style$1({
|
11263 | prop: 'bottom'
|
11264 | });
|
11265 | var left = style$1({
|
11266 | prop: 'left'
|
11267 | });
|
11268 | var positions = compose(position, zIndex$1, top, right, bottom, left);
|
11269 |
|
11270 | var boxShadow = style$1({
|
11271 | prop: 'boxShadow',
|
11272 | themeKey: 'shadows'
|
11273 | });
|
11274 |
|
11275 | function transform$1(value) {
|
11276 | return value <= 1 ? "".concat(value * 100, "%") : value;
|
11277 | }
|
11278 |
|
11279 | var width = style$1({
|
11280 | prop: 'width',
|
11281 | transform: transform$1
|
11282 | });
|
11283 | var maxWidth = style$1({
|
11284 | prop: 'maxWidth',
|
11285 | transform: transform$1
|
11286 | });
|
11287 | var minWidth = style$1({
|
11288 | prop: 'minWidth',
|
11289 | transform: transform$1
|
11290 | });
|
11291 | var height = style$1({
|
11292 | prop: 'height',
|
11293 | transform: transform$1
|
11294 | });
|
11295 | var maxHeight = style$1({
|
11296 | prop: 'maxHeight',
|
11297 | transform: transform$1
|
11298 | });
|
11299 | var minHeight = style$1({
|
11300 | prop: 'minHeight',
|
11301 | transform: transform$1
|
11302 | });
|
11303 | var sizeWidth = style$1({
|
11304 | prop: 'size',
|
11305 | cssProperty: 'width',
|
11306 | transform: transform$1
|
11307 | });
|
11308 | var sizeHeight = style$1({
|
11309 | prop: 'size',
|
11310 | cssProperty: 'height',
|
11311 | transform: transform$1
|
11312 | });
|
11313 | var sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight);
|
11314 |
|
11315 | function _arrayWithHoles(arr) {
|
11316 | if (Array.isArray(arr)) return arr;
|
11317 | }
|
11318 |
|
11319 | function _iterableToArrayLimit(arr, i) {
|
11320 | if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
|
11321 | return;
|
11322 | }
|
11323 |
|
11324 | var _arr = [];
|
11325 | var _n = true;
|
11326 | var _d = false;
|
11327 | var _e = undefined;
|
11328 |
|
11329 | try {
|
11330 | for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
11331 | _arr.push(_s.value);
|
11332 |
|
11333 | if (i && _arr.length === i) break;
|
11334 | }
|
11335 | } catch (err) {
|
11336 | _d = true;
|
11337 | _e = err;
|
11338 | } finally {
|
11339 | try {
|
11340 | if (!_n && _i["return"] != null) _i["return"]();
|
11341 | } finally {
|
11342 | if (_d) throw _e;
|
11343 | }
|
11344 | }
|
11345 |
|
11346 | return _arr;
|
11347 | }
|
11348 |
|
11349 | function _nonIterableRest() {
|
11350 | throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
11351 | }
|
11352 |
|
11353 | function _slicedToArray(arr, i) {
|
11354 | return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
|
11355 | }
|
11356 |
|
11357 | function memoize$1(fn) {
|
11358 | var cache = {};
|
11359 | return function (arg) {
|
11360 | if (cache[arg] === undefined) {
|
11361 | cache[arg] = fn(arg);
|
11362 | }
|
11363 |
|
11364 | return cache[arg];
|
11365 | };
|
11366 | }
|
11367 |
|
11368 | var properties = {
|
11369 | m: 'margin',
|
11370 | p: 'padding'
|
11371 | };
|
11372 | var directions = {
|
11373 | t: 'Top',
|
11374 | r: 'Right',
|
11375 | b: 'Bottom',
|
11376 | l: 'Left',
|
11377 | x: ['Left', 'Right'],
|
11378 | y: ['Top', 'Bottom']
|
11379 | };
|
11380 | var aliases = {
|
11381 | marginX: 'mx',
|
11382 | marginY: 'my',
|
11383 | paddingX: 'px',
|
11384 | paddingY: 'py'
|
11385 | };
|
11386 |
|
11387 |
|
11388 |
|
11389 | var getCssProperties = memoize$1(function (prop) {
|
11390 |
|
11391 | if (prop.length > 2) {
|
11392 | if (aliases[prop]) {
|
11393 | prop = aliases[prop];
|
11394 | } else {
|
11395 | return [prop];
|
11396 | }
|
11397 | }
|
11398 |
|
11399 | var _prop$split = prop.split(''),
|
11400 | _prop$split2 = _slicedToArray(_prop$split, 2),
|
11401 | a = _prop$split2[0],
|
11402 | b = _prop$split2[1];
|
11403 |
|
11404 | var property = properties[a];
|
11405 | var direction = directions[b] || '';
|
11406 | return Array.isArray(direction) ? direction.map(function (dir) {
|
11407 | return property + dir;
|
11408 | }) : [property + direction];
|
11409 | });
|
11410 | var spacingKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY'];
|
11411 |
|
11412 | function getTransformer(theme) {
|
11413 | var themeSpacing = theme.spacing || 8;
|
11414 |
|
11415 | if (typeof themeSpacing === 'number') {
|
11416 | return function (abs) {
|
11417 | return themeSpacing * abs;
|
11418 | };
|
11419 | }
|
11420 |
|
11421 | if (Array.isArray(themeSpacing)) {
|
11422 | return function (abs) {
|
11423 | {
|
11424 | if (abs > themeSpacing.length - 1) {
|
11425 | console.error(["@material-ui/system: the value provided (".concat(abs, ") overflows."), "The supported values are: ".concat(JSON.stringify(themeSpacing), "."), "".concat(abs, " > ").concat(themeSpacing.length - 1, ", you need to add the missing values.")].join('\n'));
|
11426 | }
|
11427 | }
|
11428 |
|
11429 | return themeSpacing[abs];
|
11430 | };
|
11431 | }
|
11432 |
|
11433 | if (typeof themeSpacing === 'function') {
|
11434 | return themeSpacing;
|
11435 | }
|
11436 |
|
11437 | {
|
11438 | console.error(["@material-ui/system: the `theme.spacing` value (".concat(themeSpacing, ") is invalid."), 'It should be a number, an array or a function.'].join('\n'));
|
11439 | }
|
11440 |
|
11441 | return function () {
|
11442 | return undefined;
|
11443 | };
|
11444 | }
|
11445 |
|
11446 | function getValue(transformer, propValue) {
|
11447 | if (typeof propValue === 'string') {
|
11448 | return propValue;
|
11449 | }
|
11450 |
|
11451 | var abs = Math.abs(propValue);
|
11452 | var transformed = transformer(abs);
|
11453 |
|
11454 | if (propValue >= 0) {
|
11455 | return transformed;
|
11456 | }
|
11457 |
|
11458 | if (typeof transformed === 'number') {
|
11459 | return -transformed;
|
11460 | }
|
11461 |
|
11462 | return "-".concat(transformed);
|
11463 | }
|
11464 |
|
11465 | function getStyleFromPropValue(cssProperties, transformer) {
|
11466 | return function (propValue) {
|
11467 | return cssProperties.reduce(function (acc, cssProperty) {
|
11468 | acc[cssProperty] = getValue(transformer, propValue);
|
11469 | return acc;
|
11470 | }, {});
|
11471 | };
|
11472 | }
|
11473 |
|
11474 | function spacing(props) {
|
11475 | var theme = props.theme;
|
11476 | var transformer = getTransformer(theme);
|
11477 | return Object.keys(props).map(function (prop) {
|
11478 |
|
11479 |
|
11480 | if (spacingKeys.indexOf(prop) === -1) {
|
11481 | return null;
|
11482 | }
|
11483 |
|
11484 | var cssProperties = getCssProperties(prop);
|
11485 | var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
|
11486 | var propValue = props[prop];
|
11487 | return handleBreakpoints(props, propValue, styleFromPropValue);
|
11488 | }).reduce(merge, {});
|
11489 | }
|
11490 |
|
11491 | spacing.propTypes = spacingKeys.reduce(function (obj, key) {
|
11492 | obj[key] = responsivePropType;
|
11493 | return obj;
|
11494 | }, {}) ;
|
11495 | spacing.filterProps = spacingKeys;
|
11496 |
|
11497 | var fontFamily = style$1({
|
11498 | prop: 'fontFamily',
|
11499 | themeKey: 'typography'
|
11500 | });
|
11501 | var fontSize = style$1({
|
11502 | prop: 'fontSize',
|
11503 | themeKey: 'typography'
|
11504 | });
|
11505 | var fontStyle = style$1({
|
11506 | prop: 'fontStyle',
|
11507 | themeKey: 'typography'
|
11508 | });
|
11509 | var fontWeight = style$1({
|
11510 | prop: 'fontWeight',
|
11511 | themeKey: 'typography'
|
11512 | });
|
11513 | var letterSpacing = style$1({
|
11514 | prop: 'letterSpacing'
|
11515 | });
|
11516 | var lineHeight = style$1({
|
11517 | prop: 'lineHeight'
|
11518 | });
|
11519 | var textAlign = style$1({
|
11520 | prop: 'textAlign'
|
11521 | });
|
11522 | var typography = compose(fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
|
11523 |
|
11524 | var styleFunction = css$1(compose(borders, display, flexbox, positions, palette, boxShadow, sizing, spacing, typography));
|
11525 | |
11526 |
|
11527 |
|
11528 |
|
11529 | var Box = styled$1('div')(styleFunction, {
|
11530 | name: 'MuiBox'
|
11531 | });
|
11532 |
|
11533 | var styles$b = function styles(theme) {
|
11534 | return {
|
11535 |
|
11536 | root: {
|
11537 | margin: 0
|
11538 | },
|
11539 |
|
11540 |
|
11541 | body2: theme.typography.body2,
|
11542 |
|
11543 |
|
11544 | body1: theme.typography.body1,
|
11545 |
|
11546 |
|
11547 | caption: theme.typography.caption,
|
11548 |
|
11549 |
|
11550 | button: theme.typography.button,
|
11551 |
|
11552 |
|
11553 | h1: theme.typography.h1,
|
11554 |
|
11555 |
|
11556 | h2: theme.typography.h2,
|
11557 |
|
11558 |
|
11559 | h3: theme.typography.h3,
|
11560 |
|
11561 |
|
11562 | h4: theme.typography.h4,
|
11563 |
|
11564 |
|
11565 | h5: theme.typography.h5,
|
11566 |
|
11567 |
|
11568 | h6: theme.typography.h6,
|
11569 |
|
11570 |
|
11571 | subtitle1: theme.typography.subtitle1,
|
11572 |
|
11573 |
|
11574 | subtitle2: theme.typography.subtitle2,
|
11575 |
|
11576 |
|
11577 | overline: theme.typography.overline,
|
11578 |
|
11579 |
|
11580 | srOnly: {
|
11581 | position: 'absolute',
|
11582 | height: 1,
|
11583 | width: 1,
|
11584 | overflow: 'hidden'
|
11585 | },
|
11586 |
|
11587 |
|
11588 | alignLeft: {
|
11589 | textAlign: 'left'
|
11590 | },
|
11591 |
|
11592 |
|
11593 | alignCenter: {
|
11594 | textAlign: 'center'
|
11595 | },
|
11596 |
|
11597 |
|
11598 | alignRight: {
|
11599 | textAlign: 'right'
|
11600 | },
|
11601 |
|
11602 |
|
11603 | alignJustify: {
|
11604 | textAlign: 'justify'
|
11605 | },
|
11606 |
|
11607 |
|
11608 | noWrap: {
|
11609 | overflow: 'hidden',
|
11610 | textOverflow: 'ellipsis',
|
11611 | whiteSpace: 'nowrap'
|
11612 | },
|
11613 |
|
11614 |
|
11615 | gutterBottom: {
|
11616 | marginBottom: '0.35em'
|
11617 | },
|
11618 |
|
11619 |
|
11620 | paragraph: {
|
11621 | marginBottom: 16
|
11622 | },
|
11623 |
|
11624 |
|
11625 | colorInherit: {
|
11626 | color: 'inherit'
|
11627 | },
|
11628 |
|
11629 |
|
11630 | colorPrimary: {
|
11631 | color: theme.palette.primary.main
|
11632 | },
|
11633 |
|
11634 |
|
11635 | colorSecondary: {
|
11636 | color: theme.palette.secondary.main
|
11637 | },
|
11638 |
|
11639 |
|
11640 | colorTextPrimary: {
|
11641 | color: theme.palette.text.primary
|
11642 | },
|
11643 |
|
11644 |
|
11645 | colorTextSecondary: {
|
11646 | color: theme.palette.text.secondary
|
11647 | },
|
11648 |
|
11649 |
|
11650 | colorError: {
|
11651 | color: theme.palette.error.main
|
11652 | },
|
11653 |
|
11654 |
|
11655 | displayInline: {
|
11656 | display: 'inline'
|
11657 | },
|
11658 |
|
11659 |
|
11660 | displayBlock: {
|
11661 | display: 'block'
|
11662 | }
|
11663 | };
|
11664 | };
|
11665 | var defaultVariantMapping = {
|
11666 | h1: 'h1',
|
11667 | h2: 'h2',
|
11668 | h3: 'h3',
|
11669 | h4: 'h4',
|
11670 | h5: 'h5',
|
11671 | h6: 'h6',
|
11672 | subtitle1: 'h6',
|
11673 | subtitle2: 'h6',
|
11674 | body1: 'p',
|
11675 | body2: 'p'
|
11676 | };
|
11677 | var Typography = React__default.forwardRef(function Typography(props, ref) {
|
11678 | var _props$align = props.align,
|
11679 | align = _props$align === void 0 ? 'inherit' : _props$align,
|
11680 | classes = props.classes,
|
11681 | className = props.className,
|
11682 | _props$color = props.color,
|
11683 | color = _props$color === void 0 ? 'initial' : _props$color,
|
11684 | component = props.component,
|
11685 | _props$display = props.display,
|
11686 | display = _props$display === void 0 ? 'initial' : _props$display,
|
11687 | _props$gutterBottom = props.gutterBottom,
|
11688 | gutterBottom = _props$gutterBottom === void 0 ? false : _props$gutterBottom,
|
11689 | _props$noWrap = props.noWrap,
|
11690 | noWrap = _props$noWrap === void 0 ? false : _props$noWrap,
|
11691 | _props$paragraph = props.paragraph,
|
11692 | paragraph = _props$paragraph === void 0 ? false : _props$paragraph,
|
11693 | _props$variant = props.variant,
|
11694 | variant = _props$variant === void 0 ? 'body1' : _props$variant,
|
11695 | _props$variantMapping = props.variantMapping,
|
11696 | variantMapping = _props$variantMapping === void 0 ? defaultVariantMapping : _props$variantMapping,
|
11697 | other = _objectWithoutProperties(props, ["align", "classes", "className", "color", "component", "display", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"]);
|
11698 |
|
11699 | var Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
|
11700 | return React__default.createElement(Component, _extends({
|
11701 | className: clsx(classes.root, className, variant !== 'inherit' && classes[variant], color !== 'initial' && classes["color".concat(capitalize(color))], noWrap && classes.noWrap, gutterBottom && classes.gutterBottom, paragraph && classes.paragraph, align !== 'inherit' && classes["align".concat(capitalize(align))], display !== 'initial' && classes["display".concat(capitalize(display))]),
|
11702 | ref: ref
|
11703 | }, other));
|
11704 | });
|
11705 | Typography.propTypes = {
|
11706 | |
11707 |
|
11708 |
|
11709 | align: propTypes.oneOf(['inherit', 'left', 'center', 'right', 'justify']),
|
11710 |
|
11711 | |
11712 |
|
11713 |
|
11714 | children: propTypes.node,
|
11715 |
|
11716 | |
11717 |
|
11718 |
|
11719 |
|
11720 | classes: propTypes.object.isRequired,
|
11721 |
|
11722 | |
11723 |
|
11724 |
|
11725 | className: propTypes.string,
|
11726 |
|
11727 | |
11728 |
|
11729 |
|
11730 | color: propTypes.oneOf(['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']),
|
11731 |
|
11732 | |
11733 |
|
11734 |
|
11735 |
|
11736 |
|
11737 | component: propTypes.elementType,
|
11738 |
|
11739 | |
11740 |
|
11741 |
|
11742 | display: propTypes.oneOf(['initial', 'block', 'inline']),
|
11743 |
|
11744 | |
11745 |
|
11746 |
|
11747 | gutterBottom: propTypes.bool,
|
11748 |
|
11749 | |
11750 |
|
11751 |
|
11752 |
|
11753 |
|
11754 |
|
11755 | noWrap: propTypes.bool,
|
11756 |
|
11757 | |
11758 |
|
11759 |
|
11760 | paragraph: propTypes.bool,
|
11761 |
|
11762 | |
11763 |
|
11764 |
|
11765 | variant: propTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit']),
|
11766 |
|
11767 | |
11768 |
|
11769 |
|
11770 |
|
11771 |
|
11772 |
|
11773 | variantMapping: propTypes.object
|
11774 | } ;
|
11775 | var Typography$1 = withStyles$1(styles$b, {
|
11776 | name: 'MuiTypography'
|
11777 | })(Typography);
|
11778 |
|
11779 | |
11780 |
|
11781 |
|
11782 |
|
11783 | var MoreHorizIcon = createSvgIcon(React__default.createElement("path", {
|
11784 | d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
|
11785 | }), 'MoreHoriz');
|
11786 |
|
11787 | var styles$c = function styles(theme) {
|
11788 | return {
|
11789 | root: {
|
11790 | display: 'flex'
|
11791 | },
|
11792 | icon: {
|
11793 | width: 24,
|
11794 | height: 16,
|
11795 | backgroundColor: theme.palette.grey[100],
|
11796 | color: theme.palette.grey[700],
|
11797 | borderRadius: 2,
|
11798 | marginLeft: theme.spacing(0.5),
|
11799 | marginRight: theme.spacing(0.5),
|
11800 | cursor: 'pointer',
|
11801 | '&:hover, &:focus': {
|
11802 | backgroundColor: theme.palette.grey[200]
|
11803 | },
|
11804 | '&:active': {
|
11805 | boxShadow: theme.shadows[0],
|
11806 | backgroundColor: emphasize(theme.palette.grey[200], 0.12)
|
11807 | }
|
11808 | }
|
11809 | };
|
11810 | };
|
11811 | |
11812 |
|
11813 |
|
11814 |
|
11815 |
|
11816 | function BreadcrumbCollapsed(props) {
|
11817 | var classes = props.classes,
|
11818 | other = _objectWithoutProperties(props, ["classes"]);
|
11819 |
|
11820 | return React__default.createElement("li", _extends({
|
11821 | className: classes.root
|
11822 | }, other), React__default.createElement(MoreHorizIcon, {
|
11823 | className: classes.icon
|
11824 | }));
|
11825 | }
|
11826 |
|
11827 | BreadcrumbCollapsed.propTypes = {
|
11828 | |
11829 |
|
11830 |
|
11831 | classes: propTypes.object.isRequired
|
11832 | } ;
|
11833 | var BreadcrumbCollapsed$1 = withStyles$1(styles$c, {
|
11834 | name: 'PrivateBreadcrumbCollapsed'
|
11835 | })(BreadcrumbCollapsed);
|
11836 |
|
11837 | var styles$d = {
|
11838 | root: {
|
11839 | display: 'flex',
|
11840 | userSelect: 'none',
|
11841 | marginLeft: 8,
|
11842 | marginRight: 8
|
11843 | }
|
11844 | };
|
11845 | |
11846 |
|
11847 |
|
11848 |
|
11849 | function BreadcrumbSeparator(props) {
|
11850 | var classes = props.classes,
|
11851 | className = props.className,
|
11852 | other = _objectWithoutProperties(props, ["classes", "className"]);
|
11853 |
|
11854 | return React__default.createElement("li", _extends({
|
11855 | "aria-hidden": true,
|
11856 | className: clsx(classes.root, className)
|
11857 | }, other));
|
11858 | }
|
11859 |
|
11860 | BreadcrumbSeparator.propTypes = {
|
11861 | children: propTypes.node.isRequired,
|
11862 | classes: propTypes.object.isRequired,
|
11863 | className: propTypes.string
|
11864 | } ;
|
11865 | var BreadcrumbSeparator$1 = withStyles$1(styles$d, {
|
11866 | name: 'PrivateBreadcrumbSeparator'
|
11867 | })(BreadcrumbSeparator);
|
11868 |
|
11869 | var styles$e = {
|
11870 |
|
11871 | root: {},
|
11872 |
|
11873 |
|
11874 | ol: {
|
11875 | display: 'flex',
|
11876 | flexWrap: 'wrap',
|
11877 | alignItems: 'center',
|
11878 | padding: 0,
|
11879 |
|
11880 | margin: 0
|
11881 |
|
11882 | },
|
11883 |
|
11884 |
|
11885 | li: {
|
11886 | listStyle: 'none'
|
11887 | },
|
11888 |
|
11889 |
|
11890 | separator: {}
|
11891 | };
|
11892 |
|
11893 | function insertSeparators(items, className, separator) {
|
11894 | return items.reduce(function (acc, current, index) {
|
11895 | if (index < items.length - 1) {
|
11896 | acc = acc.concat(current, React__default.createElement(BreadcrumbSeparator$1, {
|
11897 | key: "separator-".concat(index),
|
11898 | className: className
|
11899 | }, separator));
|
11900 | } else {
|
11901 | acc.push(current);
|
11902 | }
|
11903 |
|
11904 | return acc;
|
11905 | }, []);
|
11906 | }
|
11907 |
|
11908 | var Breadcrumbs = React__default.forwardRef(function Breadcrumbs(props, ref) {
|
11909 | var children = props.children,
|
11910 | classes = props.classes,
|
11911 | className = props.className,
|
11912 | _props$component = props.component,
|
11913 | Component = _props$component === void 0 ? 'nav' : _props$component,
|
11914 | _props$itemsAfterColl = props.itemsAfterCollapse,
|
11915 | itemsAfterCollapse = _props$itemsAfterColl === void 0 ? 1 : _props$itemsAfterColl,
|
11916 | _props$itemsBeforeCol = props.itemsBeforeCollapse,
|
11917 | itemsBeforeCollapse = _props$itemsBeforeCol === void 0 ? 1 : _props$itemsBeforeCol,
|
11918 | _props$maxItems = props.maxItems,
|
11919 | maxItems = _props$maxItems === void 0 ? 8 : _props$maxItems,
|
11920 | _props$separator = props.separator,
|
11921 | separator = _props$separator === void 0 ? '/' : _props$separator,
|
11922 | other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"]);
|
11923 |
|
11924 | var _React$useState = React__default.useState(false),
|
11925 | expanded = _React$useState[0],
|
11926 | setExpanded = _React$useState[1];
|
11927 |
|
11928 | var renderItemsBeforeAndAfter = function renderItemsBeforeAndAfter(allItems) {
|
11929 | var handleClickExpand = function handleClickExpand() {
|
11930 | setExpanded(true);
|
11931 | };
|
11932 |
|
11933 |
|
11934 |
|
11935 | if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
|
11936 | {
|
11937 | console.error(['Material-UI: you have provided an invalid combination of props to the Breadcrumbs.', "itemsAfterCollapse={".concat(itemsAfterCollapse, "} + itemsBeforeCollapse={").concat(itemsBeforeCollapse, "} >= maxItems={").concat(maxItems, "}")].join('\n'));
|
11938 | }
|
11939 |
|
11940 | return allItems;
|
11941 | }
|
11942 |
|
11943 | return [].concat(_toConsumableArray(allItems.slice(0, itemsBeforeCollapse)), [React__default.createElement(BreadcrumbCollapsed$1, {
|
11944 | key: "ellipsis",
|
11945 | onClick: handleClickExpand
|
11946 | })], _toConsumableArray(allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)));
|
11947 | };
|
11948 |
|
11949 | var allItems = React__default.Children.toArray(children).filter(function (child) {
|
11950 | {
|
11951 | if (reactIs_2(child)) {
|
11952 | console.error(["Material-UI: the Breadcrumbs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
11953 | }
|
11954 | }
|
11955 |
|
11956 | return React__default.isValidElement(child);
|
11957 | }).map(function (child, index) {
|
11958 | return React__default.createElement("li", {
|
11959 | className: classes.li,
|
11960 | key: "child-".concat(index)
|
11961 | }, child);
|
11962 | });
|
11963 | return React__default.createElement(Typography$1, _extends({
|
11964 | ref: ref,
|
11965 | component: Component,
|
11966 | color: "textSecondary",
|
11967 | className: clsx(classes.root, className)
|
11968 | }, other), React__default.createElement("ol", {
|
11969 | className: classes.ol
|
11970 | }, insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator)));
|
11971 | });
|
11972 | Breadcrumbs.propTypes = {
|
11973 | |
11974 |
|
11975 |
|
11976 | children: propTypes.node.isRequired,
|
11977 |
|
11978 | |
11979 |
|
11980 |
|
11981 |
|
11982 | classes: propTypes.object.isRequired,
|
11983 |
|
11984 | |
11985 |
|
11986 |
|
11987 | className: propTypes.string,
|
11988 |
|
11989 | |
11990 |
|
11991 |
|
11992 |
|
11993 |
|
11994 | component: propTypes.elementType,
|
11995 |
|
11996 | |
11997 |
|
11998 |
|
11999 | itemsAfterCollapse: propTypes.number,
|
12000 |
|
12001 | |
12002 |
|
12003 |
|
12004 | itemsBeforeCollapse: propTypes.number,
|
12005 |
|
12006 | |
12007 |
|
12008 |
|
12009 |
|
12010 |
|
12011 | maxItems: propTypes.number,
|
12012 |
|
12013 | |
12014 |
|
12015 |
|
12016 | separator: propTypes.node
|
12017 | } ;
|
12018 | var Breadcrumbs$1 = withStyles$1(styles$e, {
|
12019 | name: 'MuiBreadcrumbs'
|
12020 | })(Breadcrumbs);
|
12021 |
|
12022 | var styles$f = function styles(theme) {
|
12023 | return {
|
12024 |
|
12025 | root: _extends({}, theme.typography.button, {
|
12026 | boxSizing: 'border-box',
|
12027 | minWidth: 64,
|
12028 | padding: '6px 16px',
|
12029 | borderRadius: theme.shape.borderRadius,
|
12030 | color: theme.palette.text.primary,
|
12031 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
|
12032 | duration: theme.transitions.duration.short
|
12033 | }),
|
12034 | '&:hover': {
|
12035 | textDecoration: 'none',
|
12036 | backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
|
12037 |
|
12038 | '@media (hover: none)': {
|
12039 | backgroundColor: 'transparent'
|
12040 | },
|
12041 | '&$disabled': {
|
12042 | backgroundColor: 'transparent'
|
12043 | }
|
12044 | },
|
12045 | '&$disabled': {
|
12046 | color: theme.palette.action.disabled
|
12047 | }
|
12048 | }),
|
12049 |
|
12050 |
|
12051 | label: {
|
12052 | width: '100%',
|
12053 |
|
12054 | display: 'inherit',
|
12055 | alignItems: 'inherit',
|
12056 | justifyContent: 'inherit'
|
12057 | },
|
12058 |
|
12059 |
|
12060 | text: {
|
12061 | padding: '6px 8px'
|
12062 | },
|
12063 |
|
12064 |
|
12065 | textPrimary: {
|
12066 | color: theme.palette.primary.main,
|
12067 | '&:hover': {
|
12068 | backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
12069 |
|
12070 | '@media (hover: none)': {
|
12071 | backgroundColor: 'transparent'
|
12072 | }
|
12073 | }
|
12074 | },
|
12075 |
|
12076 |
|
12077 | textSecondary: {
|
12078 | color: theme.palette.secondary.main,
|
12079 | '&:hover': {
|
12080 | backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
12081 |
|
12082 | '@media (hover: none)': {
|
12083 | backgroundColor: 'transparent'
|
12084 | }
|
12085 | }
|
12086 | },
|
12087 |
|
12088 |
|
12089 | outlined: {
|
12090 | padding: '5px 15px',
|
12091 | border: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'),
|
12092 | '&$disabled': {
|
12093 | border: "1px solid ".concat(theme.palette.action.disabled)
|
12094 | }
|
12095 | },
|
12096 |
|
12097 |
|
12098 | outlinedPrimary: {
|
12099 | color: theme.palette.primary.main,
|
12100 | border: "1px solid ".concat(fade(theme.palette.primary.main, 0.5)),
|
12101 | '&:hover': {
|
12102 | border: "1px solid ".concat(theme.palette.primary.main),
|
12103 | backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
12104 |
|
12105 | '@media (hover: none)': {
|
12106 | backgroundColor: 'transparent'
|
12107 | }
|
12108 | }
|
12109 | },
|
12110 |
|
12111 |
|
12112 | outlinedSecondary: {
|
12113 | color: theme.palette.secondary.main,
|
12114 | border: "1px solid ".concat(fade(theme.palette.secondary.main, 0.5)),
|
12115 | '&:hover': {
|
12116 | border: "1px solid ".concat(theme.palette.secondary.main),
|
12117 | backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
12118 |
|
12119 | '@media (hover: none)': {
|
12120 | backgroundColor: 'transparent'
|
12121 | }
|
12122 | },
|
12123 | '&$disabled': {
|
12124 | border: "1px solid ".concat(theme.palette.action.disabled)
|
12125 | }
|
12126 | },
|
12127 |
|
12128 |
|
12129 | contained: {
|
12130 | color: theme.palette.getContrastText(theme.palette.grey[300]),
|
12131 | backgroundColor: theme.palette.grey[300],
|
12132 | boxShadow: theme.shadows[2],
|
12133 | '&:hover': {
|
12134 | backgroundColor: theme.palette.grey.A100,
|
12135 | boxShadow: theme.shadows[4],
|
12136 |
|
12137 | '@media (hover: none)': {
|
12138 | boxShadow: theme.shadows[2],
|
12139 | backgroundColor: theme.palette.grey[300]
|
12140 | },
|
12141 | '&$disabled': {
|
12142 | backgroundColor: theme.palette.action.disabledBackground
|
12143 | }
|
12144 | },
|
12145 | '&$focusVisible': {
|
12146 | boxShadow: theme.shadows[6]
|
12147 | },
|
12148 | '&:active': {
|
12149 | boxShadow: theme.shadows[8]
|
12150 | },
|
12151 | '&$disabled': {
|
12152 | color: theme.palette.action.disabled,
|
12153 | boxShadow: theme.shadows[0],
|
12154 | backgroundColor: theme.palette.action.disabledBackground
|
12155 | }
|
12156 | },
|
12157 |
|
12158 |
|
12159 | containedPrimary: {
|
12160 | color: theme.palette.primary.contrastText,
|
12161 | backgroundColor: theme.palette.primary.main,
|
12162 | '&:hover': {
|
12163 | backgroundColor: theme.palette.primary.dark,
|
12164 |
|
12165 | '@media (hover: none)': {
|
12166 | backgroundColor: theme.palette.primary.main
|
12167 | }
|
12168 | }
|
12169 | },
|
12170 |
|
12171 |
|
12172 | containedSecondary: {
|
12173 | color: theme.palette.secondary.contrastText,
|
12174 | backgroundColor: theme.palette.secondary.main,
|
12175 | '&:hover': {
|
12176 | backgroundColor: theme.palette.secondary.dark,
|
12177 |
|
12178 | '@media (hover: none)': {
|
12179 | backgroundColor: theme.palette.secondary.main
|
12180 | }
|
12181 | }
|
12182 | },
|
12183 |
|
12184 |
|
12185 | disableElevation: {
|
12186 | boxShadow: 'none',
|
12187 | '&:hover': {
|
12188 | boxShadow: 'none'
|
12189 | },
|
12190 | '&$focusVisible': {
|
12191 | boxShadow: 'none'
|
12192 | },
|
12193 | '&:active': {
|
12194 | boxShadow: 'none'
|
12195 | },
|
12196 | '&$disabled': {
|
12197 | boxShadow: 'none'
|
12198 | }
|
12199 | },
|
12200 |
|
12201 |
|
12202 | focusVisible: {},
|
12203 |
|
12204 |
|
12205 | disabled: {},
|
12206 |
|
12207 |
|
12208 | colorInherit: {
|
12209 | color: 'inherit',
|
12210 | borderColor: 'currentColor'
|
12211 | },
|
12212 |
|
12213 |
|
12214 | textSizeSmall: {
|
12215 | padding: '4px 5px',
|
12216 | fontSize: theme.typography.pxToRem(13)
|
12217 | },
|
12218 |
|
12219 |
|
12220 | textSizeLarge: {
|
12221 | padding: '8px 11px',
|
12222 | fontSize: theme.typography.pxToRem(15)
|
12223 | },
|
12224 |
|
12225 |
|
12226 | outlinedSizeSmall: {
|
12227 | padding: '3px 9px',
|
12228 | fontSize: theme.typography.pxToRem(13)
|
12229 | },
|
12230 |
|
12231 |
|
12232 | outlinedSizeLarge: {
|
12233 | padding: '7px 21px',
|
12234 | fontSize: theme.typography.pxToRem(15)
|
12235 | },
|
12236 |
|
12237 |
|
12238 | containedSizeSmall: {
|
12239 | padding: '4px 10px',
|
12240 | fontSize: theme.typography.pxToRem(13)
|
12241 | },
|
12242 |
|
12243 |
|
12244 | containedSizeLarge: {
|
12245 | padding: '8px 22px',
|
12246 | fontSize: theme.typography.pxToRem(15)
|
12247 | },
|
12248 |
|
12249 |
|
12250 | sizeSmall: {},
|
12251 |
|
12252 |
|
12253 | sizeLarge: {},
|
12254 |
|
12255 |
|
12256 | fullWidth: {
|
12257 | width: '100%'
|
12258 | },
|
12259 |
|
12260 |
|
12261 | startIcon: {
|
12262 | display: 'inherit',
|
12263 | marginRight: 8,
|
12264 | marginLeft: -4,
|
12265 | '&$iconSizeSmall': {
|
12266 | marginLeft: -2
|
12267 | }
|
12268 | },
|
12269 |
|
12270 |
|
12271 | endIcon: {
|
12272 | display: 'inherit',
|
12273 | marginRight: -4,
|
12274 | marginLeft: 8,
|
12275 | '&$iconSizeSmall': {
|
12276 | marginRight: -2
|
12277 | }
|
12278 | },
|
12279 |
|
12280 |
|
12281 | iconSizeSmall: {
|
12282 | '& > *:first-child': {
|
12283 | fontSize: 18
|
12284 | }
|
12285 | },
|
12286 |
|
12287 |
|
12288 | iconSizeMedium: {
|
12289 | '& > *:first-child': {
|
12290 | fontSize: 20
|
12291 | }
|
12292 | },
|
12293 |
|
12294 |
|
12295 | iconSizeLarge: {
|
12296 | '& > *:first-child': {
|
12297 | fontSize: 22
|
12298 | }
|
12299 | }
|
12300 | };
|
12301 | };
|
12302 | var Button = React__default.forwardRef(function Button(props, ref) {
|
12303 | var children = props.children,
|
12304 | classes = props.classes,
|
12305 | className = props.className,
|
12306 | _props$color = props.color,
|
12307 | color = _props$color === void 0 ? 'default' : _props$color,
|
12308 | _props$component = props.component,
|
12309 | component = _props$component === void 0 ? 'button' : _props$component,
|
12310 | _props$disabled = props.disabled,
|
12311 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
12312 | _props$disableElevati = props.disableElevation,
|
12313 | disableElevation = _props$disableElevati === void 0 ? false : _props$disableElevati,
|
12314 | _props$disableFocusRi = props.disableFocusRipple,
|
12315 | disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
|
12316 | endIconProp = props.endIcon,
|
12317 | focusVisibleClassName = props.focusVisibleClassName,
|
12318 | _props$fullWidth = props.fullWidth,
|
12319 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
12320 | _props$size = props.size,
|
12321 | size = _props$size === void 0 ? 'medium' : _props$size,
|
12322 | startIconProp = props.startIcon,
|
12323 | _props$type = props.type,
|
12324 | type = _props$type === void 0 ? 'button' : _props$type,
|
12325 | _props$variant = props.variant,
|
12326 | variant = _props$variant === void 0 ? 'text' : _props$variant,
|
12327 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"]);
|
12328 |
|
12329 | var startIcon = startIconProp && React__default.createElement("span", {
|
12330 | className: clsx(classes.startIcon, classes["iconSize".concat(capitalize(size))])
|
12331 | }, startIconProp);
|
12332 | var endIcon = endIconProp && React__default.createElement("span", {
|
12333 | className: clsx(classes.endIcon, classes["iconSize".concat(capitalize(size))])
|
12334 | }, endIconProp);
|
12335 | return React__default.createElement(ButtonBase$1, _extends({
|
12336 | className: clsx(classes.root, classes[variant], className, color === 'inherit' ? classes.colorInherit : color !== 'default' && classes["".concat(variant).concat(capitalize(color))], size !== 'medium' && [classes["".concat(variant, "Size").concat(capitalize(size))], classes["size".concat(capitalize(size))]], disableElevation && classes.disableElevation, disabled && classes.disabled, fullWidth && classes.fullWidth),
|
12337 | component: component,
|
12338 | disabled: disabled,
|
12339 | focusRipple: !disableFocusRipple,
|
12340 | focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
|
12341 | ref: ref,
|
12342 | type: type
|
12343 | }, other), React__default.createElement("span", {
|
12344 | className: classes.label
|
12345 | }, startIcon, children, endIcon));
|
12346 | });
|
12347 | Button.propTypes = {
|
12348 | |
12349 |
|
12350 |
|
12351 | children: propTypes.node.isRequired,
|
12352 |
|
12353 | |
12354 |
|
12355 |
|
12356 |
|
12357 | classes: propTypes.object.isRequired,
|
12358 |
|
12359 | |
12360 |
|
12361 |
|
12362 | className: propTypes.string,
|
12363 |
|
12364 | |
12365 |
|
12366 |
|
12367 | color: propTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
12368 |
|
12369 | |
12370 |
|
12371 |
|
12372 |
|
12373 | component: propTypes.elementType,
|
12374 |
|
12375 | |
12376 |
|
12377 |
|
12378 | disabled: propTypes.bool,
|
12379 |
|
12380 | |
12381 |
|
12382 |
|
12383 | disableElevation: propTypes.bool,
|
12384 |
|
12385 | |
12386 |
|
12387 |
|
12388 |
|
12389 | disableFocusRipple: propTypes.bool,
|
12390 |
|
12391 | |
12392 |
|
12393 |
|
12394 |
|
12395 |
|
12396 |
|
12397 | disableRipple: propTypes.bool,
|
12398 |
|
12399 | |
12400 |
|
12401 |
|
12402 | endIcon: propTypes.node,
|
12403 |
|
12404 | |
12405 |
|
12406 |
|
12407 | focusVisibleClassName: propTypes.string,
|
12408 |
|
12409 | |
12410 |
|
12411 |
|
12412 | fullWidth: propTypes.bool,
|
12413 |
|
12414 | |
12415 |
|
12416 |
|
12417 |
|
12418 | href: propTypes.string,
|
12419 |
|
12420 | |
12421 |
|
12422 |
|
12423 |
|
12424 | size: propTypes.oneOf(['small', 'medium', 'large']),
|
12425 |
|
12426 | |
12427 |
|
12428 |
|
12429 | startIcon: propTypes.node,
|
12430 |
|
12431 | |
12432 |
|
12433 |
|
12434 | type: propTypes.string,
|
12435 |
|
12436 | |
12437 |
|
12438 |
|
12439 | variant: propTypes.oneOf(['text', 'outlined', 'contained'])
|
12440 | } ;
|
12441 | var Button$1 = withStyles$1(styles$f, {
|
12442 | name: 'MuiButton'
|
12443 | })(Button);
|
12444 |
|
12445 |
|
12446 |
|
12447 | Button$1.styles;
|
12448 | var styles$g = function styles(theme) {
|
12449 | return {
|
12450 |
|
12451 | root: {
|
12452 | display: 'inline-flex',
|
12453 | borderRadius: theme.shape.borderRadius
|
12454 | },
|
12455 |
|
12456 |
|
12457 | contained: {
|
12458 | boxShadow: theme.shadows[2]
|
12459 | },
|
12460 |
|
12461 |
|
12462 | disabled: {},
|
12463 |
|
12464 |
|
12465 | fullWidth: {
|
12466 | width: '100%'
|
12467 | },
|
12468 |
|
12469 |
|
12470 | vertical: {
|
12471 | flexDirection: 'column'
|
12472 | },
|
12473 |
|
12474 |
|
12475 | grouped: {
|
12476 | minWidth: 40
|
12477 | },
|
12478 |
|
12479 |
|
12480 | groupedHorizontal: {
|
12481 | '&:not(:first-child)': {
|
12482 | borderTopLeftRadius: 0,
|
12483 | borderBottomLeftRadius: 0
|
12484 | },
|
12485 | '&:not(:last-child)': {
|
12486 | borderTopRightRadius: 0,
|
12487 | borderBottomRightRadius: 0
|
12488 | }
|
12489 | },
|
12490 |
|
12491 |
|
12492 | groupedVertical: {
|
12493 | '&:not(:first-child)': {
|
12494 | borderTopRightRadius: 0,
|
12495 | borderTopLeftRadius: 0
|
12496 | },
|
12497 | '&:not(:last-child)': {
|
12498 | borderBottomRightRadius: 0,
|
12499 | borderBottomLeftRadius: 0
|
12500 | }
|
12501 | },
|
12502 |
|
12503 |
|
12504 | groupedText: {},
|
12505 |
|
12506 |
|
12507 | groupedTextHorizontal: {
|
12508 | '&:not(:last-child)': {
|
12509 | borderRight: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
|
12510 | }
|
12511 | },
|
12512 |
|
12513 |
|
12514 | groupedTextVertical: {
|
12515 | '&:not(:last-child)': {
|
12516 | borderBottom: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
|
12517 | }
|
12518 | },
|
12519 |
|
12520 |
|
12521 | groupedTextPrimary: {
|
12522 | '&:not(:last-child)': {
|
12523 | borderColor: fade(theme.palette.primary.main, 0.5)
|
12524 | }
|
12525 | },
|
12526 |
|
12527 |
|
12528 | groupedTextSecondary: {
|
12529 | '&:not(:last-child)': {
|
12530 | borderColor: fade(theme.palette.secondary.main, 0.5)
|
12531 | }
|
12532 | },
|
12533 |
|
12534 |
|
12535 | groupedOutlined: {},
|
12536 |
|
12537 |
|
12538 | groupedOutlinedHorizontal: {
|
12539 | '&:not(:first-child)': {
|
12540 | marginLeft: -1
|
12541 | },
|
12542 | '&:not(:last-child)': {
|
12543 | borderRightColor: 'transparent'
|
12544 | }
|
12545 | },
|
12546 |
|
12547 |
|
12548 | groupedOutlinedVertical: {
|
12549 | '&:not(:first-child)': {
|
12550 | marginTop: -1
|
12551 | },
|
12552 | '&:not(:last-child)': {
|
12553 | borderBottomColor: 'transparent'
|
12554 | }
|
12555 | },
|
12556 |
|
12557 |
|
12558 | groupedOutlinedPrimary: {
|
12559 | '&:hover': {
|
12560 | borderColor: theme.palette.primary.main
|
12561 | }
|
12562 | },
|
12563 |
|
12564 |
|
12565 | groupedOutlinedSecondary: {
|
12566 | '&:hover': {
|
12567 | borderColor: theme.palette.secondary.main
|
12568 | }
|
12569 | },
|
12570 |
|
12571 |
|
12572 | groupedContained: {
|
12573 | boxShadow: 'none'
|
12574 | },
|
12575 |
|
12576 |
|
12577 | groupedContainedHorizontal: {
|
12578 | '&:not(:last-child)': {
|
12579 | borderRight: "1px solid ".concat(theme.palette.grey[400]),
|
12580 | '&$disabled': {
|
12581 | borderRight: "1px solid ".concat(theme.palette.action.disabled)
|
12582 | }
|
12583 | }
|
12584 | },
|
12585 |
|
12586 |
|
12587 | groupedContainedVertical: {
|
12588 | '&:not(:last-child)': {
|
12589 | borderBottom: "1px solid ".concat(theme.palette.grey[400]),
|
12590 | '&$disabled': {
|
12591 | borderBottom: "1px solid ".concat(theme.palette.action.disabled)
|
12592 | }
|
12593 | }
|
12594 | },
|
12595 |
|
12596 |
|
12597 | groupedContainedPrimary: {
|
12598 | '&:not(:last-child)': {
|
12599 | borderColor: theme.palette.primary.dark
|
12600 | }
|
12601 | },
|
12602 |
|
12603 |
|
12604 | groupedContainedSecondary: {
|
12605 | '&:not(:last-child)': {
|
12606 | borderColor: theme.palette.secondary.dark
|
12607 | }
|
12608 | }
|
12609 | };
|
12610 | };
|
12611 | var ButtonGroup = React__default.forwardRef(function ButtonGroup(props, ref) {
|
12612 | var children = props.children,
|
12613 | classes = props.classes,
|
12614 | className = props.className,
|
12615 | _props$color = props.color,
|
12616 | color = _props$color === void 0 ? 'default' : _props$color,
|
12617 | _props$component = props.component,
|
12618 | Component = _props$component === void 0 ? 'div' : _props$component,
|
12619 | _props$disabled = props.disabled,
|
12620 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
12621 | _props$disableFocusRi = props.disableFocusRipple,
|
12622 | disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
|
12623 | _props$disableRipple = props.disableRipple,
|
12624 | disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,
|
12625 | _props$fullWidth = props.fullWidth,
|
12626 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
12627 | _props$orientation = props.orientation,
|
12628 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
12629 | _props$size = props.size,
|
12630 | size = _props$size === void 0 ? 'medium' : _props$size,
|
12631 | _props$variant = props.variant,
|
12632 | variant = _props$variant === void 0 ? 'outlined' : _props$variant,
|
12633 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"]);
|
12634 |
|
12635 | var buttonClassName = clsx(classes.grouped, classes["grouped".concat(capitalize(orientation))], classes["grouped".concat(capitalize(variant))], classes["grouped".concat(capitalize(variant)).concat(capitalize(orientation))], classes["grouped".concat(capitalize(variant)).concat(color !== 'default' ? capitalize(color) : '')], disabled && classes.disabled);
|
12636 | return React__default.createElement(Component, _extends({
|
12637 | role: "group",
|
12638 | className: clsx(classes.root, className, fullWidth && classes.fullWidth, {
|
12639 | contained: classes.contained
|
12640 | }[variant], {
|
12641 | vertical: classes.vertical
|
12642 | }[orientation]),
|
12643 | ref: ref
|
12644 | }, other), React__default.Children.map(children, function (child) {
|
12645 | if (!React__default.isValidElement(child)) {
|
12646 | return null;
|
12647 | }
|
12648 |
|
12649 | {
|
12650 | if (reactIs_2(child)) {
|
12651 | console.error(["Material-UI: the ButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
12652 | }
|
12653 | }
|
12654 |
|
12655 | return React__default.cloneElement(child, {
|
12656 | className: clsx(buttonClassName, child.props.className),
|
12657 | disabled: child.props.disabled || disabled,
|
12658 | color: child.props.color || color,
|
12659 | disableFocusRipple: disableFocusRipple,
|
12660 | disableRipple: disableRipple,
|
12661 | fullWidth: fullWidth,
|
12662 | size: child.props.size || size,
|
12663 | variant: child.props.variant || variant
|
12664 | });
|
12665 | }));
|
12666 | });
|
12667 | ButtonGroup.propTypes = {
|
12668 | |
12669 |
|
12670 |
|
12671 | children: propTypes.node.isRequired,
|
12672 |
|
12673 | |
12674 |
|
12675 |
|
12676 |
|
12677 | classes: propTypes.object.isRequired,
|
12678 |
|
12679 | |
12680 |
|
12681 |
|
12682 | className: propTypes.string,
|
12683 |
|
12684 | |
12685 |
|
12686 |
|
12687 | color: propTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
12688 |
|
12689 | |
12690 |
|
12691 |
|
12692 |
|
12693 | component: propTypes.elementType,
|
12694 |
|
12695 | |
12696 |
|
12697 |
|
12698 | disabled: propTypes.bool,
|
12699 |
|
12700 | |
12701 |
|
12702 |
|
12703 |
|
12704 | disableFocusRipple: propTypes.bool,
|
12705 |
|
12706 | |
12707 |
|
12708 |
|
12709 | disableRipple: propTypes.bool,
|
12710 |
|
12711 | |
12712 |
|
12713 |
|
12714 | fullWidth: propTypes.bool,
|
12715 |
|
12716 | |
12717 |
|
12718 |
|
12719 | orientation: propTypes.oneOf(['vertical', 'horizontal']),
|
12720 |
|
12721 | |
12722 |
|
12723 |
|
12724 |
|
12725 | size: propTypes.oneOf(['small', 'medium', 'large']),
|
12726 |
|
12727 | |
12728 |
|
12729 |
|
12730 | variant: propTypes.oneOf(['text', 'outlined', 'contained'])
|
12731 | } ;
|
12732 | var ButtonGroup$1 = withStyles$1(styles$g, {
|
12733 | name: 'MuiButtonGroup'
|
12734 | })(ButtonGroup);
|
12735 |
|
12736 | var styles$h = {
|
12737 |
|
12738 | root: {
|
12739 | overflow: 'hidden'
|
12740 | }
|
12741 | };
|
12742 | var Card = React__default.forwardRef(function Card(props, ref) {
|
12743 | var classes = props.classes,
|
12744 | className = props.className,
|
12745 | _props$raised = props.raised,
|
12746 | raised = _props$raised === void 0 ? false : _props$raised,
|
12747 | other = _objectWithoutProperties(props, ["classes", "className", "raised"]);
|
12748 |
|
12749 | return React__default.createElement(Paper$1, _extends({
|
12750 | className: clsx(classes.root, className),
|
12751 | elevation: raised ? 8 : 1,
|
12752 | ref: ref
|
12753 | }, other));
|
12754 | });
|
12755 | Card.propTypes = {
|
12756 | |
12757 |
|
12758 |
|
12759 | children: propTypes.node,
|
12760 |
|
12761 | |
12762 |
|
12763 |
|
12764 |
|
12765 | classes: propTypes.object.isRequired,
|
12766 |
|
12767 | |
12768 |
|
12769 |
|
12770 | className: propTypes.string,
|
12771 |
|
12772 | |
12773 |
|
12774 |
|
12775 | raised: propTypes.bool
|
12776 | } ;
|
12777 | var Card$1 = withStyles$1(styles$h, {
|
12778 | name: 'MuiCard'
|
12779 | })(Card);
|
12780 |
|
12781 | var styles$i = function styles(theme) {
|
12782 | return {
|
12783 |
|
12784 | root: {
|
12785 | display: 'block',
|
12786 | textAlign: 'inherit',
|
12787 | width: '100%',
|
12788 | '&:hover $focusHighlight': {
|
12789 | opacity: theme.palette.action.hoverOpacity
|
12790 | },
|
12791 | '&$focusVisible $focusHighlight': {
|
12792 | opacity: 0.12
|
12793 | }
|
12794 | },
|
12795 |
|
12796 |
|
12797 | focusVisible: {},
|
12798 |
|
12799 |
|
12800 | focusHighlight: {
|
12801 | overflow: 'hidden',
|
12802 | pointerEvents: 'none',
|
12803 | position: 'absolute',
|
12804 | top: 0,
|
12805 | right: 0,
|
12806 | bottom: 0,
|
12807 | left: 0,
|
12808 | borderRadius: 'inherit',
|
12809 | opacity: 0,
|
12810 | backgroundColor: 'currentcolor',
|
12811 | transition: theme.transitions.create('opacity', {
|
12812 | duration: theme.transitions.duration.short
|
12813 | })
|
12814 | }
|
12815 | };
|
12816 | };
|
12817 | var CardActionArea = React__default.forwardRef(function CardActionArea(props, ref) {
|
12818 | var children = props.children,
|
12819 | classes = props.classes,
|
12820 | className = props.className,
|
12821 | focusVisibleClassName = props.focusVisibleClassName,
|
12822 | other = _objectWithoutProperties(props, ["children", "classes", "className", "focusVisibleClassName"]);
|
12823 |
|
12824 | return React__default.createElement(ButtonBase$1, _extends({
|
12825 | className: clsx(classes.root, className),
|
12826 | focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
|
12827 | ref: ref
|
12828 | }, other), children, React__default.createElement("span", {
|
12829 | className: classes.focusHighlight
|
12830 | }));
|
12831 | });
|
12832 | CardActionArea.propTypes = {
|
12833 | |
12834 |
|
12835 |
|
12836 | children: propTypes.node,
|
12837 |
|
12838 | |
12839 |
|
12840 |
|
12841 |
|
12842 | classes: propTypes.object.isRequired,
|
12843 |
|
12844 | |
12845 |
|
12846 |
|
12847 | className: propTypes.string,
|
12848 |
|
12849 | |
12850 |
|
12851 |
|
12852 | focusVisibleClassName: propTypes.string
|
12853 | } ;
|
12854 | var CardActionArea$1 = withStyles$1(styles$i, {
|
12855 | name: 'MuiCardActionArea'
|
12856 | })(CardActionArea);
|
12857 |
|
12858 | var styles$j = {
|
12859 |
|
12860 | root: {
|
12861 | display: 'flex',
|
12862 | alignItems: 'center',
|
12863 | padding: 8
|
12864 | },
|
12865 |
|
12866 |
|
12867 | spacing: {
|
12868 | '& > :not(:first-child)': {
|
12869 | marginLeft: 8
|
12870 | }
|
12871 | }
|
12872 | };
|
12873 | var CardActions = React__default.forwardRef(function CardActions(props, ref) {
|
12874 | var _props$disableSpacing = props.disableSpacing,
|
12875 | disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,
|
12876 | classes = props.classes,
|
12877 | className = props.className,
|
12878 | other = _objectWithoutProperties(props, ["disableSpacing", "classes", "className"]);
|
12879 |
|
12880 | return React__default.createElement("div", _extends({
|
12881 | className: clsx(classes.root, className, !disableSpacing && classes.spacing),
|
12882 | ref: ref
|
12883 | }, other));
|
12884 | });
|
12885 | CardActions.propTypes = {
|
12886 | |
12887 |
|
12888 |
|
12889 | children: propTypes.node,
|
12890 |
|
12891 | |
12892 |
|
12893 |
|
12894 |
|
12895 | classes: propTypes.object.isRequired,
|
12896 |
|
12897 | |
12898 |
|
12899 |
|
12900 | className: propTypes.string,
|
12901 |
|
12902 | |
12903 |
|
12904 |
|
12905 | disableSpacing: propTypes.bool
|
12906 | } ;
|
12907 | var CardActions$1 = withStyles$1(styles$j, {
|
12908 | name: 'MuiCardActions'
|
12909 | })(CardActions);
|
12910 |
|
12911 | var styles$k = {
|
12912 |
|
12913 | root: {
|
12914 | padding: 16,
|
12915 | '&:last-child': {
|
12916 | paddingBottom: 24
|
12917 | }
|
12918 | }
|
12919 | };
|
12920 | var CardContent = React__default.forwardRef(function CardContent(props, ref) {
|
12921 | var classes = props.classes,
|
12922 | className = props.className,
|
12923 | _props$component = props.component,
|
12924 | Component = _props$component === void 0 ? 'div' : _props$component,
|
12925 | other = _objectWithoutProperties(props, ["classes", "className", "component"]);
|
12926 |
|
12927 | return React__default.createElement(Component, _extends({
|
12928 | className: clsx(classes.root, className),
|
12929 | ref: ref
|
12930 | }, other));
|
12931 | });
|
12932 | CardContent.propTypes = {
|
12933 | |
12934 |
|
12935 |
|
12936 | children: propTypes.node,
|
12937 |
|
12938 | |
12939 |
|
12940 |
|
12941 |
|
12942 | classes: propTypes.object.isRequired,
|
12943 |
|
12944 | |
12945 |
|
12946 |
|
12947 | className: propTypes.string,
|
12948 |
|
12949 | |
12950 |
|
12951 |
|
12952 |
|
12953 | component: propTypes.elementType
|
12954 | } ;
|
12955 | var CardContent$1 = withStyles$1(styles$k, {
|
12956 | name: 'MuiCardContent'
|
12957 | })(CardContent);
|
12958 |
|
12959 | var styles$l = {
|
12960 |
|
12961 | root: {
|
12962 | display: 'flex',
|
12963 | alignItems: 'center',
|
12964 | padding: 16
|
12965 | },
|
12966 |
|
12967 |
|
12968 | avatar: {
|
12969 | flex: '0 0 auto',
|
12970 | marginRight: 16
|
12971 | },
|
12972 |
|
12973 |
|
12974 | action: {
|
12975 | flex: '0 0 auto',
|
12976 | alignSelf: 'flex-start',
|
12977 | marginTop: -8,
|
12978 | marginRight: -8
|
12979 | },
|
12980 |
|
12981 |
|
12982 | content: {
|
12983 | flex: '1 1 auto'
|
12984 | },
|
12985 |
|
12986 |
|
12987 | title: {},
|
12988 |
|
12989 |
|
12990 | subheader: {}
|
12991 | };
|
12992 | var CardHeader = React__default.forwardRef(function CardHeader(props, ref) {
|
12993 | var action = props.action,
|
12994 | avatar = props.avatar,
|
12995 | classes = props.classes,
|
12996 | className = props.className,
|
12997 | _props$component = props.component,
|
12998 | Component = _props$component === void 0 ? 'div' : _props$component,
|
12999 | _props$disableTypogra = props.disableTypography,
|
13000 | disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
|
13001 | subheaderProp = props.subheader,
|
13002 | subheaderTypographyProps = props.subheaderTypographyProps,
|
13003 | titleProp = props.title,
|
13004 | titleTypographyProps = props.titleTypographyProps,
|
13005 | other = _objectWithoutProperties(props, ["action", "avatar", "classes", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"]);
|
13006 |
|
13007 | var title = titleProp;
|
13008 |
|
13009 | if (title != null && title.type !== Typography$1 && !disableTypography) {
|
13010 | title = React__default.createElement(Typography$1, _extends({
|
13011 | variant: avatar ? 'body2' : 'h5',
|
13012 | className: classes.title,
|
13013 | component: "span",
|
13014 | display: "block"
|
13015 | }, titleTypographyProps), title);
|
13016 | }
|
13017 |
|
13018 | var subheader = subheaderProp;
|
13019 |
|
13020 | if (subheader != null && subheader.type !== Typography$1 && !disableTypography) {
|
13021 | subheader = React__default.createElement(Typography$1, _extends({
|
13022 | variant: avatar ? 'body2' : 'body1',
|
13023 | className: classes.subheader,
|
13024 | color: "textSecondary",
|
13025 | component: "span",
|
13026 | display: "block"
|
13027 | }, subheaderTypographyProps), subheader);
|
13028 | }
|
13029 |
|
13030 | return React__default.createElement(Component, _extends({
|
13031 | className: clsx(classes.root, className),
|
13032 | ref: ref
|
13033 | }, other), avatar && React__default.createElement("div", {
|
13034 | className: classes.avatar
|
13035 | }, avatar), React__default.createElement("div", {
|
13036 | className: classes.content
|
13037 | }, title, subheader), action && React__default.createElement("div", {
|
13038 | className: classes.action
|
13039 | }, action));
|
13040 | });
|
13041 | CardHeader.propTypes = {
|
13042 | |
13043 |
|
13044 |
|
13045 | action: propTypes.node,
|
13046 |
|
13047 | |
13048 |
|
13049 |
|
13050 | avatar: propTypes.node,
|
13051 |
|
13052 | |
13053 |
|
13054 |
|
13055 |
|
13056 | classes: propTypes.object.isRequired,
|
13057 |
|
13058 | |
13059 |
|
13060 |
|
13061 | className: propTypes.string,
|
13062 |
|
13063 | |
13064 |
|
13065 |
|
13066 |
|
13067 | component: propTypes.elementType,
|
13068 |
|
13069 | |
13070 |
|
13071 |
|
13072 |
|
13073 |
|
13074 |
|
13075 | disableTypography: propTypes.bool,
|
13076 |
|
13077 | |
13078 |
|
13079 |
|
13080 | subheader: propTypes.node,
|
13081 |
|
13082 | |
13083 |
|
13084 |
|
13085 |
|
13086 | subheaderTypographyProps: propTypes.object,
|
13087 |
|
13088 | |
13089 |
|
13090 |
|
13091 | title: propTypes.node,
|
13092 |
|
13093 | |
13094 |
|
13095 |
|
13096 |
|
13097 | titleTypographyProps: propTypes.object
|
13098 | } ;
|
13099 | var CardHeader$1 = withStyles$1(styles$l, {
|
13100 | name: 'MuiCardHeader'
|
13101 | })(CardHeader);
|
13102 |
|
13103 | var styles$m = {
|
13104 |
|
13105 | root: {
|
13106 | display: 'block',
|
13107 | backgroundSize: 'cover',
|
13108 | backgroundRepeat: 'no-repeat',
|
13109 | backgroundPosition: 'center'
|
13110 | },
|
13111 |
|
13112 |
|
13113 | media: {
|
13114 | width: '100%'
|
13115 | },
|
13116 |
|
13117 |
|
13118 | img: {
|
13119 |
|
13120 | objectFit: 'cover'
|
13121 | }
|
13122 | };
|
13123 | var MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
|
13124 | var CardMedia = React__default.forwardRef(function CardMedia(props, ref) {
|
13125 | var children = props.children,
|
13126 | classes = props.classes,
|
13127 | className = props.className,
|
13128 | _props$component = props.component,
|
13129 | Component = _props$component === void 0 ? 'div' : _props$component,
|
13130 | image = props.image,
|
13131 | src = props.src,
|
13132 | style = props.style,
|
13133 | other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "image", "src", "style"]);
|
13134 |
|
13135 | var isMediaComponent = MEDIA_COMPONENTS.indexOf(Component) !== -1;
|
13136 | var composedStyle = !isMediaComponent && image ? _extends({
|
13137 | backgroundImage: "url(\"".concat(image, "\")")
|
13138 | }, style) : style;
|
13139 | return React__default.createElement(Component, _extends({
|
13140 | className: clsx(classes.root, className, isMediaComponent && classes.media, "picture img".indexOf(Component) !== -1 && classes.img),
|
13141 | ref: ref,
|
13142 | style: composedStyle,
|
13143 | src: isMediaComponent ? image || src : undefined
|
13144 | }, other), children);
|
13145 | });
|
13146 | CardMedia.propTypes = {
|
13147 | |
13148 |
|
13149 |
|
13150 | children: chainPropTypes(propTypes.node, function (props) {
|
13151 | if (!props.children && !props.image && !props.src) {
|
13152 | return new Error('Material-UI: either `children`, `image` or `src` prop must be specified.');
|
13153 | }
|
13154 |
|
13155 | return null;
|
13156 | }),
|
13157 |
|
13158 | |
13159 |
|
13160 |
|
13161 |
|
13162 | classes: propTypes.object.isRequired,
|
13163 |
|
13164 | |
13165 |
|
13166 |
|
13167 | className: propTypes.string,
|
13168 |
|
13169 | |
13170 |
|
13171 |
|
13172 |
|
13173 | component: propTypes.elementType,
|
13174 |
|
13175 | |
13176 |
|
13177 |
|
13178 |
|
13179 |
|
13180 | image: propTypes.string,
|
13181 |
|
13182 | |
13183 |
|
13184 |
|
13185 |
|
13186 |
|
13187 | src: propTypes.string,
|
13188 |
|
13189 | |
13190 |
|
13191 |
|
13192 | style: propTypes.object
|
13193 | } ;
|
13194 | var CardMedia$1 = withStyles$1(styles$m, {
|
13195 | name: 'MuiCardMedia'
|
13196 | })(CardMedia);
|
13197 |
|
13198 | |
13199 |
|
13200 |
|
13201 |
|
13202 | var FormControlContext = React__default.createContext();
|
13203 |
|
13204 | {
|
13205 | FormControlContext.displayName = 'FormControlContext';
|
13206 | }
|
13207 |
|
13208 | function useFormControl() {
|
13209 | return React__default.useContext(FormControlContext);
|
13210 | }
|
13211 |
|
13212 | function useFormControl$1() {
|
13213 | return React__default.useContext(FormControlContext);
|
13214 | }
|
13215 |
|
13216 | var styles$n = function styles(theme) {
|
13217 | return {
|
13218 |
|
13219 | root: {
|
13220 | textAlign: 'center',
|
13221 | flex: '0 0 auto',
|
13222 | fontSize: theme.typography.pxToRem(24),
|
13223 | padding: 12,
|
13224 | borderRadius: '50%',
|
13225 | overflow: 'visible',
|
13226 |
|
13227 | color: theme.palette.action.active,
|
13228 | transition: theme.transitions.create('background-color', {
|
13229 | duration: theme.transitions.duration.shortest
|
13230 | }),
|
13231 | '&:hover': {
|
13232 | backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity),
|
13233 |
|
13234 | '@media (hover: none)': {
|
13235 | backgroundColor: 'transparent'
|
13236 | }
|
13237 | },
|
13238 | '&$disabled': {
|
13239 | backgroundColor: 'transparent',
|
13240 | color: theme.palette.action.disabled
|
13241 | }
|
13242 | },
|
13243 |
|
13244 |
|
13245 | edgeStart: {
|
13246 | marginLeft: -12,
|
13247 | '$sizeSmall&': {
|
13248 | marginLeft: -3
|
13249 | }
|
13250 | },
|
13251 |
|
13252 |
|
13253 | edgeEnd: {
|
13254 | marginRight: -12,
|
13255 | '$sizeSmall&': {
|
13256 | marginRight: -3
|
13257 | }
|
13258 | },
|
13259 |
|
13260 |
|
13261 | colorInherit: {
|
13262 | color: 'inherit'
|
13263 | },
|
13264 |
|
13265 |
|
13266 | colorPrimary: {
|
13267 | color: theme.palette.primary.main,
|
13268 | '&:hover': {
|
13269 | backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
13270 |
|
13271 | '@media (hover: none)': {
|
13272 | backgroundColor: 'transparent'
|
13273 | }
|
13274 | }
|
13275 | },
|
13276 |
|
13277 |
|
13278 | colorSecondary: {
|
13279 | color: theme.palette.secondary.main,
|
13280 | '&:hover': {
|
13281 | backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
13282 |
|
13283 | '@media (hover: none)': {
|
13284 | backgroundColor: 'transparent'
|
13285 | }
|
13286 | }
|
13287 | },
|
13288 |
|
13289 |
|
13290 | disabled: {},
|
13291 |
|
13292 |
|
13293 | sizeSmall: {
|
13294 | padding: 3,
|
13295 | fontSize: theme.typography.pxToRem(18)
|
13296 | },
|
13297 |
|
13298 |
|
13299 | label: {
|
13300 | width: '100%',
|
13301 | display: 'flex',
|
13302 | alignItems: 'inherit',
|
13303 | justifyContent: 'inherit'
|
13304 | }
|
13305 | };
|
13306 | };
|
13307 | |
13308 |
|
13309 |
|
13310 |
|
13311 |
|
13312 | var IconButton = React__default.forwardRef(function IconButton(props, ref) {
|
13313 | var _props$edge = props.edge,
|
13314 | edge = _props$edge === void 0 ? false : _props$edge,
|
13315 | children = props.children,
|
13316 | classes = props.classes,
|
13317 | className = props.className,
|
13318 | _props$color = props.color,
|
13319 | color = _props$color === void 0 ? 'default' : _props$color,
|
13320 | _props$disabled = props.disabled,
|
13321 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
13322 | _props$disableFocusRi = props.disableFocusRipple,
|
13323 | disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
|
13324 | _props$size = props.size,
|
13325 | size = _props$size === void 0 ? 'medium' : _props$size,
|
13326 | other = _objectWithoutProperties(props, ["edge", "children", "classes", "className", "color", "disabled", "disableFocusRipple", "size"]);
|
13327 |
|
13328 | return React__default.createElement(ButtonBase$1, _extends({
|
13329 | className: clsx(classes.root, className, color !== 'default' && classes["color".concat(capitalize(color))], disabled && classes.disabled, {
|
13330 | small: classes["size".concat(capitalize(size))]
|
13331 | }[size], {
|
13332 | start: classes.edgeStart,
|
13333 | end: classes.edgeEnd
|
13334 | }[edge]),
|
13335 | centerRipple: true,
|
13336 | focusRipple: !disableFocusRipple,
|
13337 | disabled: disabled,
|
13338 | ref: ref
|
13339 | }, other), React__default.createElement("span", {
|
13340 | className: classes.label
|
13341 | }, children));
|
13342 | });
|
13343 | IconButton.propTypes = {
|
13344 | |
13345 |
|
13346 |
|
13347 | children: chainPropTypes(propTypes.node, function (props) {
|
13348 | var found = React__default.Children.toArray(props.children).some(function (child) {
|
13349 | return React__default.isValidElement(child) && child.props.onClick;
|
13350 | });
|
13351 |
|
13352 | if (found) {
|
13353 | return new Error(['Material-UI: you are providing an onClick event listener ' + 'to a child of a button element.', 'Firefox will never trigger the event.', 'You should move the onClick listener to the parent button element.', 'https://github.com/mui-org/material-ui/issues/13957'].join('\n'));
|
13354 | }
|
13355 |
|
13356 | return null;
|
13357 | }),
|
13358 |
|
13359 | |
13360 |
|
13361 |
|
13362 |
|
13363 | classes: propTypes.object.isRequired,
|
13364 |
|
13365 | |
13366 |
|
13367 |
|
13368 | className: propTypes.string,
|
13369 |
|
13370 | |
13371 |
|
13372 |
|
13373 | color: propTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
13374 |
|
13375 | |
13376 |
|
13377 |
|
13378 | disabled: propTypes.bool,
|
13379 |
|
13380 | |
13381 |
|
13382 |
|
13383 |
|
13384 | disableFocusRipple: propTypes.bool,
|
13385 |
|
13386 | |
13387 |
|
13388 |
|
13389 | disableRipple: propTypes.bool,
|
13390 |
|
13391 | |
13392 |
|
13393 |
|
13394 |
|
13395 |
|
13396 |
|
13397 | edge: propTypes.oneOf(['start', 'end', false]),
|
13398 |
|
13399 | |
13400 |
|
13401 |
|
13402 |
|
13403 | size: propTypes.oneOf(['small', 'medium'])
|
13404 | } ;
|
13405 | var IconButton$1 = withStyles$1(styles$n, {
|
13406 | name: 'MuiIconButton'
|
13407 | })(IconButton);
|
13408 |
|
13409 | var styles$o = {
|
13410 | root: {
|
13411 | padding: 9
|
13412 | },
|
13413 | checked: {},
|
13414 | disabled: {},
|
13415 | input: {
|
13416 | cursor: 'inherit',
|
13417 | position: 'absolute',
|
13418 | opacity: 0,
|
13419 | width: '100%',
|
13420 | height: '100%',
|
13421 | top: 0,
|
13422 | left: 0,
|
13423 | margin: 0,
|
13424 | padding: 0,
|
13425 | zIndex: 1
|
13426 | }
|
13427 | };
|
13428 | |
13429 |
|
13430 |
|
13431 |
|
13432 | var SwitchBase = React__default.forwardRef(function SwitchBase(props, ref) {
|
13433 | var autoFocus = props.autoFocus,
|
13434 | checkedProp = props.checked,
|
13435 | checkedIcon = props.checkedIcon,
|
13436 | classes = props.classes,
|
13437 | className = props.className,
|
13438 | defaultChecked = props.defaultChecked,
|
13439 | disabledProp = props.disabled,
|
13440 | icon = props.icon,
|
13441 | id = props.id,
|
13442 | inputProps = props.inputProps,
|
13443 | inputRef = props.inputRef,
|
13444 | name = props.name,
|
13445 | onBlur = props.onBlur,
|
13446 | onChange = props.onChange,
|
13447 | onFocus = props.onFocus,
|
13448 | readOnly = props.readOnly,
|
13449 | required = props.required,
|
13450 | tabIndex = props.tabIndex,
|
13451 | type = props.type,
|
13452 | value = props.value,
|
13453 | other = _objectWithoutProperties(props, ["autoFocus", "checked", "checkedIcon", "classes", "className", "defaultChecked", "disabled", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"]);
|
13454 |
|
13455 | var _React$useRef = React__default.useRef(checkedProp != null),
|
13456 | isControlled = _React$useRef.current;
|
13457 |
|
13458 | var _React$useState = React__default.useState(Boolean(defaultChecked)),
|
13459 | checkedState = _React$useState[0],
|
13460 | setCheckedState = _React$useState[1];
|
13461 |
|
13462 | var checked = isControlled ? checkedProp : checkedState;
|
13463 | var muiFormControl = useFormControl$1();
|
13464 |
|
13465 | var handleFocus = function handleFocus(event) {
|
13466 | if (onFocus) {
|
13467 | onFocus(event);
|
13468 | }
|
13469 |
|
13470 | if (muiFormControl && muiFormControl.onFocus) {
|
13471 | muiFormControl.onFocus(event);
|
13472 | }
|
13473 | };
|
13474 |
|
13475 | var handleBlur = function handleBlur(event) {
|
13476 | if (onBlur) {
|
13477 | onBlur(event);
|
13478 | }
|
13479 |
|
13480 | if (muiFormControl && muiFormControl.onBlur) {
|
13481 | muiFormControl.onBlur(event);
|
13482 | }
|
13483 | };
|
13484 |
|
13485 | var handleInputChange = function handleInputChange(event) {
|
13486 | var newChecked = event.target.checked;
|
13487 |
|
13488 | if (!isControlled) {
|
13489 | setCheckedState(newChecked);
|
13490 | }
|
13491 |
|
13492 | if (onChange) {
|
13493 | onChange(event, newChecked);
|
13494 | }
|
13495 | };
|
13496 |
|
13497 | var disabled = disabledProp;
|
13498 |
|
13499 | if (muiFormControl) {
|
13500 | if (typeof disabled === 'undefined') {
|
13501 | disabled = muiFormControl.disabled;
|
13502 | }
|
13503 | }
|
13504 |
|
13505 | var hasLabelFor = type === 'checkbox' || type === 'radio';
|
13506 | return React__default.createElement(IconButton$1, _extends({
|
13507 | component: "span",
|
13508 | className: clsx(classes.root, className, checked && classes.checked, disabled && classes.disabled),
|
13509 | disabled: disabled,
|
13510 | tabIndex: null,
|
13511 | role: undefined,
|
13512 | onFocus: handleFocus,
|
13513 | onBlur: handleBlur,
|
13514 | ref: ref
|
13515 | }, other), React__default.createElement("input", _extends({
|
13516 | autoFocus: autoFocus,
|
13517 | checked: checkedProp,
|
13518 | defaultChecked: defaultChecked,
|
13519 | className: classes.input,
|
13520 | disabled: disabled,
|
13521 | id: hasLabelFor && id,
|
13522 | name: name,
|
13523 | onChange: handleInputChange,
|
13524 | readOnly: readOnly,
|
13525 | ref: inputRef,
|
13526 | required: required,
|
13527 | tabIndex: tabIndex,
|
13528 | type: type,
|
13529 | value: value
|
13530 | }, inputProps)), checked ? checkedIcon : icon);
|
13531 | });
|
13532 |
|
13533 |
|
13534 | SwitchBase.propTypes = {
|
13535 | |
13536 |
|
13537 |
|
13538 | autoFocus: propTypes.bool,
|
13539 |
|
13540 | |
13541 |
|
13542 |
|
13543 | checked: propTypes.bool,
|
13544 |
|
13545 | |
13546 |
|
13547 |
|
13548 | checkedIcon: propTypes.node.isRequired,
|
13549 |
|
13550 | |
13551 |
|
13552 |
|
13553 |
|
13554 | classes: propTypes.object.isRequired,
|
13555 |
|
13556 | |
13557 |
|
13558 |
|
13559 | className: propTypes.string,
|
13560 |
|
13561 | |
13562 |
|
13563 |
|
13564 | defaultChecked: propTypes.bool,
|
13565 |
|
13566 | |
13567 |
|
13568 |
|
13569 | disabled: propTypes.bool,
|
13570 |
|
13571 | |
13572 |
|
13573 |
|
13574 | icon: propTypes.node.isRequired,
|
13575 |
|
13576 | |
13577 |
|
13578 |
|
13579 | id: propTypes.string,
|
13580 |
|
13581 | |
13582 |
|
13583 |
|
13584 | inputProps: propTypes.object,
|
13585 |
|
13586 | |
13587 |
|
13588 |
|
13589 | inputRef: refType,
|
13590 |
|
13591 | |
13592 |
|
13593 |
|
13594 | name: propTypes.string,
|
13595 |
|
13596 | |
13597 |
|
13598 |
|
13599 | onBlur: propTypes.func,
|
13600 |
|
13601 | |
13602 |
|
13603 |
|
13604 |
|
13605 |
|
13606 |
|
13607 | onChange: propTypes.func,
|
13608 |
|
13609 | |
13610 |
|
13611 |
|
13612 | onFocus: propTypes.func,
|
13613 |
|
13614 | |
13615 |
|
13616 |
|
13617 |
|
13618 | readOnly: propTypes.bool,
|
13619 |
|
13620 | |
13621 |
|
13622 |
|
13623 | required: propTypes.bool,
|
13624 |
|
13625 | |
13626 |
|
13627 |
|
13628 | tabIndex: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
13629 |
|
13630 | |
13631 |
|
13632 |
|
13633 | type: propTypes.string.isRequired,
|
13634 |
|
13635 | |
13636 |
|
13637 |
|
13638 | value: propTypes.any
|
13639 | } ;
|
13640 | var SwitchBase$1 = withStyles$1(styles$o, {
|
13641 | name: 'PrivateSwitchBase'
|
13642 | })(SwitchBase);
|
13643 |
|
13644 | |
13645 |
|
13646 |
|
13647 |
|
13648 | var CheckBoxOutlineBlankIcon = createSvgIcon(React__default.createElement("path", {
|
13649 | d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
13650 | }), 'CheckBoxOutlineBlank');
|
13651 |
|
13652 | |
13653 |
|
13654 |
|
13655 |
|
13656 | var CheckBoxIcon = createSvgIcon(React__default.createElement("path", {
|
13657 | d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
13658 | }), 'CheckBox');
|
13659 |
|
13660 | |
13661 |
|
13662 |
|
13663 |
|
13664 | var IndeterminateCheckBoxIcon = createSvgIcon(React__default.createElement("path", {
|
13665 | d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
|
13666 | }), 'IndeterminateCheckBox');
|
13667 |
|
13668 | var styles$p = function styles(theme) {
|
13669 | return {
|
13670 |
|
13671 | root: {
|
13672 | color: theme.palette.text.secondary
|
13673 | },
|
13674 |
|
13675 |
|
13676 | checked: {},
|
13677 |
|
13678 |
|
13679 | disabled: {},
|
13680 |
|
13681 |
|
13682 | indeterminate: {},
|
13683 |
|
13684 |
|
13685 | colorPrimary: {
|
13686 | '&$checked': {
|
13687 | color: theme.palette.primary.main,
|
13688 | '&:hover': {
|
13689 | backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
13690 |
|
13691 | '@media (hover: none)': {
|
13692 | backgroundColor: 'transparent'
|
13693 | }
|
13694 | }
|
13695 | },
|
13696 | '&$disabled': {
|
13697 | color: theme.palette.action.disabled
|
13698 | }
|
13699 | },
|
13700 |
|
13701 |
|
13702 | colorSecondary: {
|
13703 | '&$checked': {
|
13704 | color: theme.palette.secondary.main,
|
13705 | '&:hover': {
|
13706 | backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
13707 |
|
13708 | '@media (hover: none)': {
|
13709 | backgroundColor: 'transparent'
|
13710 | }
|
13711 | }
|
13712 | },
|
13713 | '&$disabled': {
|
13714 | color: theme.palette.action.disabled
|
13715 | }
|
13716 | }
|
13717 | };
|
13718 | };
|
13719 | var defaultCheckedIcon = React__default.createElement(CheckBoxIcon, null);
|
13720 | var defaultIcon = React__default.createElement(CheckBoxOutlineBlankIcon, null);
|
13721 | var defaultIndeterminateIcon = React__default.createElement(IndeterminateCheckBoxIcon, null);
|
13722 | var Checkbox = React__default.forwardRef(function Checkbox(props, ref) {
|
13723 | var _props$checkedIcon = props.checkedIcon,
|
13724 | checkedIcon = _props$checkedIcon === void 0 ? defaultCheckedIcon : _props$checkedIcon,
|
13725 | classes = props.classes,
|
13726 | _props$color = props.color,
|
13727 | color = _props$color === void 0 ? 'secondary' : _props$color,
|
13728 | _props$disabled = props.disabled,
|
13729 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
13730 | _props$icon = props.icon,
|
13731 | icon = _props$icon === void 0 ? defaultIcon : _props$icon,
|
13732 | _props$indeterminate = props.indeterminate,
|
13733 | indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,
|
13734 | _props$indeterminateI = props.indeterminateIcon,
|
13735 | indeterminateIcon = _props$indeterminateI === void 0 ? defaultIndeterminateIcon : _props$indeterminateI,
|
13736 | inputProps = props.inputProps,
|
13737 | _props$size = props.size,
|
13738 | size = _props$size === void 0 ? 'medium' : _props$size,
|
13739 | other = _objectWithoutProperties(props, ["checkedIcon", "classes", "color", "disabled", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"]);
|
13740 |
|
13741 | return React__default.createElement(SwitchBase$1, _extends({
|
13742 | type: "checkbox",
|
13743 | classes: {
|
13744 | root: clsx(classes.root, classes["color".concat(capitalize(color))], indeterminate && classes.indeterminate),
|
13745 | checked: classes.checked,
|
13746 | disabled: classes.disabled
|
13747 | },
|
13748 | color: color,
|
13749 | inputProps: _extends({
|
13750 | 'data-indeterminate': indeterminate
|
13751 | }, inputProps),
|
13752 | icon: React__default.cloneElement(indeterminate ? indeterminateIcon : icon, {
|
13753 | fontSize: size === 'small' ? 'small' : 'default'
|
13754 | }),
|
13755 | checkedIcon: React__default.cloneElement(indeterminate ? indeterminateIcon : checkedIcon, {
|
13756 | fontSize: size === 'small' ? 'small' : 'default'
|
13757 | }),
|
13758 | ref: ref,
|
13759 | disabled: disabled
|
13760 | }, other));
|
13761 | });
|
13762 | Checkbox.propTypes = {
|
13763 | |
13764 |
|
13765 |
|
13766 | checked: propTypes.bool,
|
13767 |
|
13768 | |
13769 |
|
13770 |
|
13771 | checkedIcon: propTypes.node,
|
13772 |
|
13773 | |
13774 |
|
13775 |
|
13776 |
|
13777 | classes: propTypes.object.isRequired,
|
13778 |
|
13779 | |
13780 |
|
13781 |
|
13782 | color: propTypes.oneOf(['primary', 'secondary', 'default']),
|
13783 |
|
13784 | |
13785 |
|
13786 |
|
13787 | disabled: propTypes.bool,
|
13788 |
|
13789 | |
13790 |
|
13791 |
|
13792 | disableRipple: propTypes.bool,
|
13793 |
|
13794 | |
13795 |
|
13796 |
|
13797 | icon: propTypes.node,
|
13798 |
|
13799 | |
13800 |
|
13801 |
|
13802 | id: propTypes.string,
|
13803 |
|
13804 | |
13805 |
|
13806 |
|
13807 |
|
13808 |
|
13809 |
|
13810 | indeterminate: propTypes.bool,
|
13811 |
|
13812 | |
13813 |
|
13814 |
|
13815 | indeterminateIcon: propTypes.node,
|
13816 |
|
13817 | |
13818 |
|
13819 |
|
13820 | inputProps: propTypes.object,
|
13821 |
|
13822 | |
13823 |
|
13824 |
|
13825 | inputRef: refType,
|
13826 |
|
13827 | |
13828 |
|
13829 |
|
13830 |
|
13831 |
|
13832 |
|
13833 | onChange: propTypes.func,
|
13834 |
|
13835 | |
13836 |
|
13837 |
|
13838 | required: propTypes.bool,
|
13839 |
|
13840 | |
13841 |
|
13842 |
|
13843 |
|
13844 | size: propTypes.oneOf(['small', 'medium']),
|
13845 |
|
13846 | |
13847 |
|
13848 |
|
13849 | type: propTypes.string,
|
13850 |
|
13851 | |
13852 |
|
13853 |
|
13854 | value: propTypes.any
|
13855 | } ;
|
13856 | var Checkbox$1 = withStyles$1(styles$p, {
|
13857 | name: 'MuiCheckbox'
|
13858 | })(Checkbox);
|
13859 |
|
13860 | |
13861 |
|
13862 |
|
13863 |
|
13864 | var CancelIcon = createSvgIcon(React__default.createElement("path", {
|
13865 | d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
|
13866 | }), 'Cancel');
|
13867 |
|
13868 | var styles$q = function styles(theme) {
|
13869 | var backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];
|
13870 | var deleteIconColor = fade(theme.palette.text.primary, 0.26);
|
13871 | return {
|
13872 |
|
13873 | root: {
|
13874 | fontFamily: theme.typography.fontFamily,
|
13875 | fontSize: theme.typography.pxToRem(13),
|
13876 | display: 'inline-flex',
|
13877 | alignItems: 'center',
|
13878 | justifyContent: 'center',
|
13879 | height: 32,
|
13880 | color: theme.palette.getContrastText(backgroundColor),
|
13881 | backgroundColor: backgroundColor,
|
13882 | borderRadius: 32 / 2,
|
13883 | whiteSpace: 'nowrap',
|
13884 | transition: theme.transitions.create(['background-color', 'box-shadow']),
|
13885 |
|
13886 | cursor: 'default',
|
13887 |
|
13888 | outline: 0,
|
13889 | textDecoration: 'none',
|
13890 | border: 'none',
|
13891 |
|
13892 | padding: 0,
|
13893 |
|
13894 | verticalAlign: 'middle',
|
13895 | boxSizing: 'border-box',
|
13896 | '&$disabled': {
|
13897 | opacity: 0.5,
|
13898 | pointerEvents: 'none'
|
13899 | },
|
13900 | '& $avatar': {
|
13901 | marginLeft: 5,
|
13902 | marginRight: -6,
|
13903 | width: 24,
|
13904 | height: 24,
|
13905 | color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
|
13906 | fontSize: theme.typography.pxToRem(12)
|
13907 | },
|
13908 | '& $avatarColorPrimary': {
|
13909 | color: theme.palette.primary.contrastText,
|
13910 | backgroundColor: theme.palette.primary.dark
|
13911 | },
|
13912 | '& $avatarColorSecondary': {
|
13913 | color: theme.palette.secondary.contrastText,
|
13914 | backgroundColor: theme.palette.secondary.dark
|
13915 | },
|
13916 | '& $avatarSmall': {
|
13917 | marginLeft: 4,
|
13918 | marginRight: -4,
|
13919 | width: 18,
|
13920 | height: 18,
|
13921 | fontSize: theme.typography.pxToRem(10)
|
13922 | }
|
13923 | },
|
13924 |
|
13925 |
|
13926 | sizeSmall: {
|
13927 | height: 24
|
13928 | },
|
13929 |
|
13930 |
|
13931 | colorPrimary: {
|
13932 | backgroundColor: theme.palette.primary.main,
|
13933 | color: theme.palette.primary.contrastText
|
13934 | },
|
13935 |
|
13936 |
|
13937 | colorSecondary: {
|
13938 | backgroundColor: theme.palette.secondary.main,
|
13939 | color: theme.palette.secondary.contrastText
|
13940 | },
|
13941 |
|
13942 |
|
13943 | disabled: {},
|
13944 |
|
13945 |
|
13946 | clickable: {
|
13947 | userSelect: 'none',
|
13948 | WebkitTapHighlightColor: 'transparent',
|
13949 | cursor: 'pointer',
|
13950 | '&:hover, &:focus': {
|
13951 | backgroundColor: emphasize(backgroundColor, 0.08)
|
13952 | },
|
13953 | '&:active': {
|
13954 | boxShadow: theme.shadows[1]
|
13955 | }
|
13956 | },
|
13957 |
|
13958 |
|
13959 | clickableColorPrimary: {
|
13960 | '&:hover, &:focus': {
|
13961 | backgroundColor: emphasize(theme.palette.primary.main, 0.08)
|
13962 | }
|
13963 | },
|
13964 |
|
13965 |
|
13966 | clickableColorSecondary: {
|
13967 | '&:hover, &:focus': {
|
13968 | backgroundColor: emphasize(theme.palette.secondary.main, 0.08)
|
13969 | }
|
13970 | },
|
13971 |
|
13972 |
|
13973 | deletable: {
|
13974 | '&:focus': {
|
13975 | backgroundColor: emphasize(backgroundColor, 0.08)
|
13976 | }
|
13977 | },
|
13978 |
|
13979 |
|
13980 | deletableColorPrimary: {
|
13981 | '&:focus': {
|
13982 | backgroundColor: emphasize(theme.palette.primary.main, 0.2)
|
13983 | }
|
13984 | },
|
13985 |
|
13986 |
|
13987 | deletableColorSecondary: {
|
13988 | '&:focus': {
|
13989 | backgroundColor: emphasize(theme.palette.secondary.main, 0.2)
|
13990 | }
|
13991 | },
|
13992 |
|
13993 |
|
13994 | outlined: {
|
13995 | backgroundColor: 'transparent',
|
13996 | border: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'),
|
13997 | '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
|
13998 | backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity)
|
13999 | },
|
14000 | '& $avatar': {
|
14001 | marginLeft: 4
|
14002 | },
|
14003 | '& $avatarSmall': {
|
14004 | marginLeft: 2
|
14005 | },
|
14006 | '& $icon': {
|
14007 | marginLeft: 4
|
14008 | },
|
14009 | '& $iconSmall': {
|
14010 | marginLeft: 2
|
14011 | },
|
14012 | '& $deleteIcon': {
|
14013 | marginRight: 5
|
14014 | },
|
14015 | '& $deleteIconSmall': {
|
14016 | marginRight: 3
|
14017 | }
|
14018 | },
|
14019 |
|
14020 |
|
14021 | outlinedPrimary: {
|
14022 | color: theme.palette.primary.main,
|
14023 | border: "1px solid ".concat(theme.palette.primary.main),
|
14024 | '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
|
14025 | backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity)
|
14026 | }
|
14027 | },
|
14028 |
|
14029 |
|
14030 | outlinedSecondary: {
|
14031 | color: theme.palette.secondary.main,
|
14032 | border: "1px solid ".concat(theme.palette.secondary.main),
|
14033 | '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
|
14034 | backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity)
|
14035 | }
|
14036 | },
|
14037 |
|
14038 |
|
14039 |
|
14040 | avatar: {},
|
14041 |
|
14042 |
|
14043 | avatarSmall: {},
|
14044 |
|
14045 |
|
14046 | avatarColorPrimary: {},
|
14047 |
|
14048 |
|
14049 | avatarColorSecondary: {},
|
14050 |
|
14051 |
|
14052 | icon: {
|
14053 | color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
|
14054 | marginLeft: 5,
|
14055 | marginRight: -6
|
14056 | },
|
14057 |
|
14058 |
|
14059 | iconSmall: {
|
14060 | width: 18,
|
14061 | height: 18,
|
14062 | marginLeft: 4,
|
14063 | marginRight: -4
|
14064 | },
|
14065 |
|
14066 |
|
14067 | iconColorPrimary: {
|
14068 | color: 'inherit'
|
14069 | },
|
14070 |
|
14071 |
|
14072 | iconColorSecondary: {
|
14073 | color: 'inherit'
|
14074 | },
|
14075 |
|
14076 |
|
14077 | label: {
|
14078 | overflow: 'hidden',
|
14079 | textOverflow: 'ellipsis',
|
14080 | paddingLeft: 12,
|
14081 | paddingRight: 12,
|
14082 | whiteSpace: 'nowrap'
|
14083 | },
|
14084 | labelSmall: {
|
14085 | paddingLeft: 8,
|
14086 | paddingRight: 8
|
14087 | },
|
14088 |
|
14089 |
|
14090 | deleteIcon: {
|
14091 | WebkitTapHighlightColor: 'transparent',
|
14092 | color: deleteIconColor,
|
14093 | height: 22,
|
14094 | width: 22,
|
14095 | cursor: 'pointer',
|
14096 | margin: '0 5px 0 -6px',
|
14097 | '&:hover': {
|
14098 | color: fade(deleteIconColor, 0.4)
|
14099 | }
|
14100 | },
|
14101 |
|
14102 |
|
14103 | deleteIconSmall: {
|
14104 | height: 16,
|
14105 | width: 16,
|
14106 | marginRight: 4,
|
14107 | marginLeft: -4
|
14108 | },
|
14109 |
|
14110 |
|
14111 | deleteIconColorPrimary: {
|
14112 | color: fade(theme.palette.primary.contrastText, 0.7),
|
14113 | '&:hover, &:active': {
|
14114 | color: theme.palette.primary.contrastText
|
14115 | }
|
14116 | },
|
14117 |
|
14118 |
|
14119 | deleteIconColorSecondary: {
|
14120 | color: fade(theme.palette.secondary.contrastText, 0.7),
|
14121 | '&:hover, &:active': {
|
14122 | color: theme.palette.secondary.contrastText
|
14123 | }
|
14124 | },
|
14125 |
|
14126 |
|
14127 | deleteIconOutlinedColorPrimary: {
|
14128 | color: fade(theme.palette.primary.main, 0.7),
|
14129 | '&:hover, &:active': {
|
14130 | color: theme.palette.primary.main
|
14131 | }
|
14132 | },
|
14133 |
|
14134 |
|
14135 | deleteIconOutlinedColorSecondary: {
|
14136 | color: fade(theme.palette.secondary.main, 0.7),
|
14137 | '&:hover, &:active': {
|
14138 | color: theme.palette.secondary.main
|
14139 | }
|
14140 | }
|
14141 | };
|
14142 | };
|
14143 | |
14144 |
|
14145 |
|
14146 |
|
14147 | var Chip = React__default.forwardRef(function Chip(props, ref) {
|
14148 | var avatarProp = props.avatar,
|
14149 | classes = props.classes,
|
14150 | className = props.className,
|
14151 | clickableProp = props.clickable,
|
14152 | _props$color = props.color,
|
14153 | color = _props$color === void 0 ? 'default' : _props$color,
|
14154 | ComponentProp = props.component,
|
14155 | deleteIconProp = props.deleteIcon,
|
14156 | _props$disabled = props.disabled,
|
14157 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
14158 | iconProp = props.icon,
|
14159 | label = props.label,
|
14160 | onClick = props.onClick,
|
14161 | onDelete = props.onDelete,
|
14162 | onKeyUp = props.onKeyUp,
|
14163 | _props$size = props.size,
|
14164 | size = _props$size === void 0 ? 'medium' : _props$size,
|
14165 | _props$variant = props.variant,
|
14166 | variant = _props$variant === void 0 ? 'default' : _props$variant,
|
14167 | other = _objectWithoutProperties(props, ["avatar", "classes", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyUp", "size", "variant"]);
|
14168 |
|
14169 | var chipRef = React__default.useRef(null);
|
14170 | var handleRef = useForkRef(chipRef, ref);
|
14171 |
|
14172 | var handleDeleteIconClick = function handleDeleteIconClick(event) {
|
14173 |
|
14174 | event.stopPropagation();
|
14175 |
|
14176 | if (onDelete) {
|
14177 | onDelete(event);
|
14178 | }
|
14179 | };
|
14180 |
|
14181 | var handleKeyUp = function handleKeyUp(event) {
|
14182 | if (onKeyUp) {
|
14183 | onKeyUp(event);
|
14184 | }
|
14185 |
|
14186 |
|
14187 | if (event.currentTarget !== event.target) {
|
14188 | return;
|
14189 | }
|
14190 |
|
14191 | var key = event.key;
|
14192 |
|
14193 | if (onDelete && (key === 'Backspace' || key === 'Delete')) {
|
14194 | onDelete(event);
|
14195 | } else if (key === 'Escape' && chipRef.current) {
|
14196 | chipRef.current.blur();
|
14197 | }
|
14198 | };
|
14199 |
|
14200 | var clickable = clickableProp !== false && onClick ? true : clickableProp;
|
14201 | var small = size === 'small';
|
14202 | var Component = ComponentProp || (clickable ? ButtonBase$1 : 'div');
|
14203 | var moreProps = Component === ButtonBase$1 ? {
|
14204 | component: 'div'
|
14205 | } : {};
|
14206 | var deleteIcon = null;
|
14207 |
|
14208 | if (onDelete) {
|
14209 | var customClasses = clsx(color !== 'default' && (variant === "default" ? classes["deleteIconColor".concat(capitalize(color))] : classes["deleteIconOutlinedColor".concat(capitalize(color))]), small && classes.deleteIconSmall);
|
14210 | deleteIcon = deleteIconProp && React__default.isValidElement(deleteIconProp) ? React__default.cloneElement(deleteIconProp, {
|
14211 | className: clsx(deleteIconProp.props.className, classes.deleteIcon, customClasses),
|
14212 | onClick: handleDeleteIconClick
|
14213 | }) : React__default.createElement(CancelIcon, {
|
14214 | className: clsx(classes.deleteIcon, customClasses),
|
14215 | onClick: handleDeleteIconClick
|
14216 | });
|
14217 | }
|
14218 |
|
14219 | var avatar = null;
|
14220 |
|
14221 | if (avatarProp && React__default.isValidElement(avatarProp)) {
|
14222 | avatar = React__default.cloneElement(avatarProp, {
|
14223 | className: clsx(classes.avatar, avatarProp.props.className, small && classes.avatarSmall, color !== 'default' && classes["avatarColor".concat(capitalize(color))])
|
14224 | });
|
14225 | }
|
14226 |
|
14227 | var icon = null;
|
14228 |
|
14229 | if (iconProp && React__default.isValidElement(iconProp)) {
|
14230 | icon = React__default.cloneElement(iconProp, {
|
14231 | className: clsx(classes.icon, iconProp.props.className, small && classes.iconSmall, color !== 'default' && classes["iconColor".concat(capitalize(color))])
|
14232 | });
|
14233 | }
|
14234 |
|
14235 | {
|
14236 | if (avatar && icon) {
|
14237 | console.error('Material-UI: the Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
|
14238 | }
|
14239 | }
|
14240 |
|
14241 | return React__default.createElement(Component, _extends({
|
14242 | role: clickable || onDelete ? 'button' : undefined,
|
14243 | className: clsx(classes.root, className, color !== 'default' && [classes["color".concat(capitalize(color))], clickable && classes["clickableColor".concat(capitalize(color))], onDelete && classes["deletableColor".concat(capitalize(color))]], variant !== "default" && [classes.outlined, {
|
14244 | primary: classes.outlinedPrimary,
|
14245 | secondary: classes.outlinedSecondary
|
14246 | }[color]], disabled && classes.disabled, small && classes.sizeSmall, clickable && classes.clickable, onDelete && classes.deletable),
|
14247 | "aria-disabled": disabled ? true : undefined,
|
14248 | tabIndex: clickable || onDelete ? 0 : undefined,
|
14249 | onClick: onClick,
|
14250 | onKeyUp: handleKeyUp,
|
14251 | ref: handleRef
|
14252 | }, moreProps, other), avatar || icon, React__default.createElement("span", {
|
14253 | className: clsx(classes.label, small && classes.labelSmall)
|
14254 | }, label), deleteIcon);
|
14255 | });
|
14256 | Chip.propTypes = {
|
14257 | |
14258 |
|
14259 |
|
14260 | avatar: propTypes.element,
|
14261 |
|
14262 | |
14263 |
|
14264 |
|
14265 |
|
14266 | children: unsupportedProp,
|
14267 |
|
14268 | |
14269 |
|
14270 |
|
14271 |
|
14272 | classes: propTypes.object.isRequired,
|
14273 |
|
14274 | |
14275 |
|
14276 |
|
14277 | className: propTypes.string,
|
14278 |
|
14279 | |
14280 |
|
14281 |
|
14282 |
|
14283 |
|
14284 |
|
14285 |
|
14286 | clickable: propTypes.bool,
|
14287 |
|
14288 | |
14289 |
|
14290 |
|
14291 | color: propTypes.oneOf(['default', 'primary', 'secondary']),
|
14292 |
|
14293 | |
14294 |
|
14295 |
|
14296 |
|
14297 | component: propTypes.elementType,
|
14298 |
|
14299 | |
14300 |
|
14301 |
|
14302 | deleteIcon: propTypes.element,
|
14303 |
|
14304 | |
14305 |
|
14306 |
|
14307 | disabled: propTypes.bool,
|
14308 |
|
14309 | |
14310 |
|
14311 |
|
14312 | icon: propTypes.element,
|
14313 |
|
14314 | |
14315 |
|
14316 |
|
14317 | label: propTypes.node,
|
14318 |
|
14319 | |
14320 |
|
14321 |
|
14322 | onClick: propTypes.func,
|
14323 |
|
14324 | |
14325 |
|
14326 |
|
14327 |
|
14328 | onDelete: propTypes.func,
|
14329 |
|
14330 | |
14331 |
|
14332 |
|
14333 | onKeyDown: propTypes.func,
|
14334 |
|
14335 | |
14336 |
|
14337 |
|
14338 | onKeyUp: propTypes.func,
|
14339 |
|
14340 | |
14341 |
|
14342 |
|
14343 | size: propTypes.oneOf(['small', 'medium']),
|
14344 |
|
14345 | |
14346 |
|
14347 |
|
14348 | variant: propTypes.oneOf(['default', 'outlined'])
|
14349 | } ;
|
14350 | var Chip$1 = withStyles$1(styles$q, {
|
14351 | name: 'MuiChip'
|
14352 | })(Chip);
|
14353 |
|
14354 | var SIZE = 44;
|
14355 |
|
14356 | function getRelativeValue(value, min, max) {
|
14357 | return (Math.min(Math.max(min, value), max) - min) / (max - min);
|
14358 | }
|
14359 |
|
14360 | function easeOut(t) {
|
14361 | t = getRelativeValue(t, 0, 1);
|
14362 |
|
14363 | t = (t -= 1) * t * t + 1;
|
14364 | return t;
|
14365 | }
|
14366 |
|
14367 | function easeIn(t) {
|
14368 | return t * t;
|
14369 | }
|
14370 |
|
14371 | var styles$r = function styles(theme) {
|
14372 | return {
|
14373 |
|
14374 | root: {
|
14375 | display: 'inline-block'
|
14376 | },
|
14377 |
|
14378 |
|
14379 | static: {
|
14380 | transition: theme.transitions.create('transform')
|
14381 | },
|
14382 |
|
14383 |
|
14384 | indeterminate: {
|
14385 | animation: '$circular-rotate 1.4s linear infinite'
|
14386 | },
|
14387 |
|
14388 |
|
14389 | colorPrimary: {
|
14390 | color: theme.palette.primary.main
|
14391 | },
|
14392 |
|
14393 |
|
14394 | colorSecondary: {
|
14395 | color: theme.palette.secondary.main
|
14396 | },
|
14397 |
|
14398 |
|
14399 | svg: {
|
14400 | display: 'block'
|
14401 |
|
14402 | },
|
14403 |
|
14404 |
|
14405 | circle: {
|
14406 | stroke: 'currentColor'
|
14407 |
|
14408 |
|
14409 | },
|
14410 |
|
14411 |
|
14412 | circleStatic: {
|
14413 | transition: theme.transitions.create('stroke-dashoffset')
|
14414 | },
|
14415 |
|
14416 |
|
14417 | circleIndeterminate: {
|
14418 | animation: '$circular-dash 1.4s ease-in-out infinite',
|
14419 |
|
14420 | strokeDasharray: '80px, 200px',
|
14421 | strokeDashoffset: '0px'
|
14422 |
|
14423 | },
|
14424 | '@keyframes circular-rotate': {
|
14425 | '100%': {
|
14426 | transform: 'rotate(360deg)'
|
14427 | }
|
14428 | },
|
14429 | '@keyframes circular-dash': {
|
14430 | '0%': {
|
14431 | strokeDasharray: '1px, 200px',
|
14432 | strokeDashoffset: '0px'
|
14433 | },
|
14434 | '50%': {
|
14435 | strokeDasharray: '100px, 200px',
|
14436 | strokeDashoffset: '-15px'
|
14437 | },
|
14438 | '100%': {
|
14439 | strokeDasharray: '100px, 200px',
|
14440 | strokeDashoffset: '-125px'
|
14441 | }
|
14442 | },
|
14443 |
|
14444 |
|
14445 | circleDisableShrink: {
|
14446 | animation: 'none'
|
14447 | }
|
14448 | };
|
14449 | };
|
14450 | |
14451 |
|
14452 |
|
14453 |
|
14454 |
|
14455 |
|
14456 |
|
14457 |
|
14458 | var CircularProgress = React__default.forwardRef(function CircularProgress(props, ref) {
|
14459 | var classes = props.classes,
|
14460 | className = props.className,
|
14461 | _props$color = props.color,
|
14462 | color = _props$color === void 0 ? 'primary' : _props$color,
|
14463 | _props$disableShrink = props.disableShrink,
|
14464 | disableShrink = _props$disableShrink === void 0 ? false : _props$disableShrink,
|
14465 | _props$size = props.size,
|
14466 | size = _props$size === void 0 ? 40 : _props$size,
|
14467 | style = props.style,
|
14468 | _props$thickness = props.thickness,
|
14469 | thickness = _props$thickness === void 0 ? 3.6 : _props$thickness,
|
14470 | _props$value = props.value,
|
14471 | value = _props$value === void 0 ? 0 : _props$value,
|
14472 | _props$variant = props.variant,
|
14473 | variant = _props$variant === void 0 ? 'indeterminate' : _props$variant,
|
14474 | other = _objectWithoutProperties(props, ["classes", "className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"]);
|
14475 |
|
14476 | var circleStyle = {};
|
14477 | var rootStyle = {};
|
14478 | var rootProps = {};
|
14479 |
|
14480 | if (variant === 'determinate' || variant === 'static') {
|
14481 | var circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
|
14482 | circleStyle.strokeDasharray = circumference.toFixed(3);
|
14483 | rootProps['aria-valuenow'] = Math.round(value);
|
14484 |
|
14485 | if (variant === 'static') {
|
14486 | circleStyle.strokeDashoffset = "".concat(((100 - value) / 100 * circumference).toFixed(3), "px");
|
14487 | rootStyle.transform = 'rotate(-90deg)';
|
14488 | } else {
|
14489 | circleStyle.strokeDashoffset = "".concat((easeIn((100 - value) / 100) * circumference).toFixed(3), "px");
|
14490 | rootStyle.transform = "rotate(".concat((easeOut(value / 70) * 270).toFixed(3), "deg)");
|
14491 | }
|
14492 | }
|
14493 |
|
14494 | return React__default.createElement("div", _extends({
|
14495 | className: clsx(classes.root, className, color !== 'inherit' && classes["color".concat(capitalize(color))], {
|
14496 | indeterminate: classes.indeterminate,
|
14497 | static: classes.static
|
14498 | }[variant]),
|
14499 | style: _extends({
|
14500 | width: size,
|
14501 | height: size
|
14502 | }, rootStyle, {}, style),
|
14503 | ref: ref,
|
14504 | role: "progressbar"
|
14505 | }, rootProps, other), React__default.createElement("svg", {
|
14506 | className: classes.svg,
|
14507 | viewBox: "".concat(SIZE / 2, " ").concat(SIZE / 2, " ").concat(SIZE, " ").concat(SIZE)
|
14508 | }, React__default.createElement("circle", {
|
14509 | className: clsx(classes.circle, disableShrink && classes.circleDisableShrink, {
|
14510 | indeterminate: classes.circleIndeterminate,
|
14511 | static: classes.circleStatic
|
14512 | }[variant]),
|
14513 | style: circleStyle,
|
14514 | cx: SIZE,
|
14515 | cy: SIZE,
|
14516 | r: (SIZE - thickness) / 2,
|
14517 | fill: "none",
|
14518 | strokeWidth: thickness
|
14519 | })));
|
14520 | });
|
14521 | CircularProgress.propTypes = {
|
14522 | |
14523 |
|
14524 |
|
14525 |
|
14526 | classes: propTypes.object.isRequired,
|
14527 |
|
14528 | |
14529 |
|
14530 |
|
14531 | className: propTypes.string,
|
14532 |
|
14533 | |
14534 |
|
14535 |
|
14536 | color: propTypes.oneOf(['primary', 'secondary', 'inherit']),
|
14537 |
|
14538 | |
14539 |
|
14540 |
|
14541 |
|
14542 | disableShrink: chainPropTypes(propTypes.bool, function (props) {
|
14543 | if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {
|
14544 | return new Error('Material-UI: you have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');
|
14545 | }
|
14546 |
|
14547 | return null;
|
14548 | }),
|
14549 |
|
14550 | |
14551 |
|
14552 |
|
14553 |
|
14554 |
|
14555 | size: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
14556 |
|
14557 | |
14558 |
|
14559 |
|
14560 | style: propTypes.object,
|
14561 |
|
14562 | |
14563 |
|
14564 |
|
14565 | thickness: propTypes.number,
|
14566 |
|
14567 | |
14568 |
|
14569 |
|
14570 |
|
14571 | value: propTypes.number,
|
14572 |
|
14573 | |
14574 |
|
14575 |
|
14576 |
|
14577 | variant: propTypes.oneOf(['determinate', 'indeterminate', 'static'])
|
14578 | } ;
|
14579 | var CircularProgress$1 = withStyles$1(styles$r, {
|
14580 | name: 'MuiCircularProgress',
|
14581 | flip: false
|
14582 | })(CircularProgress);
|
14583 |
|
14584 | function ownerDocument(node) {
|
14585 | return node && node.ownerDocument || document;
|
14586 | }
|
14587 |
|
14588 | function mapEventPropToEvent(eventProp) {
|
14589 | return eventProp.substring(2).toLowerCase();
|
14590 | }
|
14591 | |
14592 |
|
14593 |
|
14594 |
|
14595 |
|
14596 |
|
14597 | var ClickAwayListener = React__default.forwardRef(function ClickAwayListener(props, ref) {
|
14598 | var children = props.children,
|
14599 | _props$mouseEvent = props.mouseEvent,
|
14600 | mouseEvent = _props$mouseEvent === void 0 ? 'onClick' : _props$mouseEvent,
|
14601 | _props$touchEvent = props.touchEvent,
|
14602 | touchEvent = _props$touchEvent === void 0 ? 'onTouchEnd' : _props$touchEvent,
|
14603 | onClickAway = props.onClickAway;
|
14604 | var movedRef = React__default.useRef(false);
|
14605 | var nodeRef = React__default.useRef(null);
|
14606 | var mountedRef = React__default.useRef(false);
|
14607 | React__default.useEffect(function () {
|
14608 | mountedRef.current = true;
|
14609 | return function () {
|
14610 | mountedRef.current = false;
|
14611 | };
|
14612 | }, []);
|
14613 | var handleNodeRef = useForkRef(nodeRef, ref);
|
14614 |
|
14615 | var handleOwnRef = React__default.useCallback(function (instance) {
|
14616 |
|
14617 | setRef(handleNodeRef, ReactDOM.findDOMNode(instance));
|
14618 | }, [handleNodeRef]);
|
14619 | var handleRef = useForkRef(children.ref, handleOwnRef);
|
14620 | var handleClickAway = useEventCallback(function (event) {
|
14621 |
|
14622 |
|
14623 |
|
14624 |
|
14625 |
|
14626 |
|
14627 |
|
14628 | if (!mountedRef.current) {
|
14629 | return;
|
14630 | }
|
14631 |
|
14632 |
|
14633 | if (movedRef.current) {
|
14634 | movedRef.current = false;
|
14635 | return;
|
14636 | }
|
14637 |
|
14638 |
|
14639 | if (!nodeRef.current) {
|
14640 | return;
|
14641 | }
|
14642 |
|
14643 |
|
14644 | var doc = ownerDocument(nodeRef.current);
|
14645 |
|
14646 | if (doc.documentElement && doc.documentElement.contains(event.target) && !nodeRef.current.contains(event.target)) {
|
14647 | onClickAway(event);
|
14648 | }
|
14649 | });
|
14650 | var handleTouchMove = React__default.useCallback(function () {
|
14651 | movedRef.current = true;
|
14652 | }, []);
|
14653 | React__default.useEffect(function () {
|
14654 | if (touchEvent !== false) {
|
14655 | var mappedTouchEvent = mapEventPropToEvent(touchEvent);
|
14656 | var doc = ownerDocument(nodeRef.current);
|
14657 | doc.addEventListener(mappedTouchEvent, handleClickAway);
|
14658 | doc.addEventListener('touchmove', handleTouchMove);
|
14659 | return function () {
|
14660 | doc.removeEventListener(mappedTouchEvent, handleClickAway);
|
14661 | doc.removeEventListener('touchmove', handleTouchMove);
|
14662 | };
|
14663 | }
|
14664 |
|
14665 | return undefined;
|
14666 | }, [handleClickAway, handleTouchMove, touchEvent]);
|
14667 | React__default.useEffect(function () {
|
14668 | if (mouseEvent !== false) {
|
14669 | var mappedMouseEvent = mapEventPropToEvent(mouseEvent);
|
14670 | var doc = ownerDocument(nodeRef.current);
|
14671 | doc.addEventListener(mappedMouseEvent, handleClickAway);
|
14672 | return function () {
|
14673 | doc.removeEventListener(mappedMouseEvent, handleClickAway);
|
14674 | };
|
14675 | }
|
14676 |
|
14677 | return undefined;
|
14678 | }, [handleClickAway, mouseEvent]);
|
14679 | return React__default.createElement(React__default.Fragment, null, React__default.cloneElement(children, {
|
14680 | ref: handleRef
|
14681 | }));
|
14682 | });
|
14683 | ClickAwayListener.propTypes = {
|
14684 | |
14685 |
|
14686 |
|
14687 | children: elementAcceptingRef.isRequired,
|
14688 |
|
14689 | |
14690 |
|
14691 |
|
14692 | mouseEvent: propTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', false]),
|
14693 |
|
14694 | |
14695 |
|
14696 |
|
14697 | onClickAway: propTypes.func.isRequired,
|
14698 |
|
14699 | |
14700 |
|
14701 |
|
14702 | touchEvent: propTypes.oneOf(['onTouchStart', 'onTouchEnd', false])
|
14703 | } ;
|
14704 |
|
14705 | {
|
14706 |
|
14707 | ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
|
14708 | }
|
14709 |
|
14710 | var styles$s = function styles(theme) {
|
14711 | return {
|
14712 |
|
14713 | container: {
|
14714 | height: 0,
|
14715 | overflow: 'hidden',
|
14716 | transition: theme.transitions.create('height')
|
14717 | },
|
14718 |
|
14719 |
|
14720 | entered: {
|
14721 | height: 'auto',
|
14722 | overflow: 'visible'
|
14723 | },
|
14724 |
|
14725 |
|
14726 | hidden: {
|
14727 | visibility: 'hidden'
|
14728 | },
|
14729 |
|
14730 |
|
14731 | wrapper: {
|
14732 |
|
14733 | display: 'flex'
|
14734 | },
|
14735 |
|
14736 |
|
14737 | wrapperInner: {
|
14738 | width: '100%'
|
14739 | }
|
14740 | };
|
14741 | };
|
14742 | |
14743 |
|
14744 |
|
14745 |
|
14746 |
|
14747 |
|
14748 | var Collapse = React__default.forwardRef(function Collapse(props, ref) {
|
14749 | var children = props.children,
|
14750 | classes = props.classes,
|
14751 | className = props.className,
|
14752 | _props$collapsedHeigh = props.collapsedHeight,
|
14753 | collapsedHeightProp = _props$collapsedHeigh === void 0 ? '0px' : _props$collapsedHeigh,
|
14754 | _props$component = props.component,
|
14755 | Component = _props$component === void 0 ? 'div' : _props$component,
|
14756 | inProp = props.in,
|
14757 | onEnter = props.onEnter,
|
14758 | onEntered = props.onEntered,
|
14759 | onEntering = props.onEntering,
|
14760 | onExit = props.onExit,
|
14761 | onExiting = props.onExiting,
|
14762 | style = props.style,
|
14763 | _props$timeout = props.timeout,
|
14764 | timeout = _props$timeout === void 0 ? duration.standard : _props$timeout,
|
14765 | other = _objectWithoutProperties(props, ["children", "classes", "className", "collapsedHeight", "component", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExiting", "style", "timeout"]);
|
14766 |
|
14767 | var theme = useTheme$1();
|
14768 | var timer = React__default.useRef();
|
14769 | var wrapperRef = React__default.useRef(null);
|
14770 | var autoTransitionDuration = React__default.useRef();
|
14771 | var collapsedHeight = typeof collapsedHeightProp === 'number' ? "".concat(collapsedHeightProp, "px") : collapsedHeightProp;
|
14772 | React__default.useEffect(function () {
|
14773 | return function () {
|
14774 | clearTimeout(timer.current);
|
14775 | };
|
14776 | }, []);
|
14777 |
|
14778 | var handleEnter = function handleEnter(node, isAppearing) {
|
14779 | node.style.height = collapsedHeight;
|
14780 |
|
14781 | if (onEnter) {
|
14782 | onEnter(node, isAppearing);
|
14783 | }
|
14784 | };
|
14785 |
|
14786 | var handleEntering = function handleEntering(node, isAppearing) {
|
14787 | var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
|
14788 |
|
14789 | var _getTransitionProps = getTransitionProps({
|
14790 | style: style,
|
14791 | timeout: timeout
|
14792 | }, {
|
14793 | mode: 'enter'
|
14794 | }),
|
14795 | transitionDuration = _getTransitionProps.duration;
|
14796 |
|
14797 | if (timeout === 'auto') {
|
14798 | var duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
|
14799 | node.style.transitionDuration = "".concat(duration2, "ms");
|
14800 | autoTransitionDuration.current = duration2;
|
14801 | } else {
|
14802 | node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : "".concat(transitionDuration, "ms");
|
14803 | }
|
14804 |
|
14805 | node.style.height = "".concat(wrapperHeight, "px");
|
14806 |
|
14807 | if (onEntering) {
|
14808 | onEntering(node, isAppearing);
|
14809 | }
|
14810 | };
|
14811 |
|
14812 | var handleEntered = function handleEntered(node, isAppearing) {
|
14813 | node.style.height = 'auto';
|
14814 |
|
14815 | if (onEntered) {
|
14816 | onEntered(node, isAppearing);
|
14817 | }
|
14818 | };
|
14819 |
|
14820 | var handleExit = function handleExit(node) {
|
14821 | var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
|
14822 | node.style.height = "".concat(wrapperHeight, "px");
|
14823 |
|
14824 | if (onExit) {
|
14825 | onExit(node);
|
14826 | }
|
14827 | };
|
14828 |
|
14829 | var handleExiting = function handleExiting(node) {
|
14830 | var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
|
14831 |
|
14832 | var _getTransitionProps2 = getTransitionProps({
|
14833 | style: style,
|
14834 | timeout: timeout
|
14835 | }, {
|
14836 | mode: 'exit'
|
14837 | }),
|
14838 | transitionDuration = _getTransitionProps2.duration;
|
14839 |
|
14840 | if (timeout === 'auto') {
|
14841 | var duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
|
14842 | node.style.transitionDuration = "".concat(duration2, "ms");
|
14843 | autoTransitionDuration.current = duration2;
|
14844 | } else {
|
14845 | node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : "".concat(transitionDuration, "ms");
|
14846 | }
|
14847 |
|
14848 | node.style.height = collapsedHeight;
|
14849 |
|
14850 | if (onExiting) {
|
14851 | onExiting(node);
|
14852 | }
|
14853 | };
|
14854 |
|
14855 | var addEndListener = function addEndListener(_, next) {
|
14856 | if (timeout === 'auto') {
|
14857 | timer.current = setTimeout(next, autoTransitionDuration.current || 0);
|
14858 | }
|
14859 | };
|
14860 |
|
14861 | return React__default.createElement(Transition, _extends({
|
14862 | in: inProp,
|
14863 | onEnter: handleEnter,
|
14864 | onEntered: handleEntered,
|
14865 | onEntering: handleEntering,
|
14866 | onExit: handleExit,
|
14867 | onExiting: handleExiting,
|
14868 | addEndListener: addEndListener,
|
14869 | timeout: timeout === 'auto' ? null : timeout
|
14870 | }, other), function (state, childProps) {
|
14871 | return React__default.createElement(Component, _extends({
|
14872 | className: clsx(classes.container, className, {
|
14873 | entered: classes.entered,
|
14874 | exited: !inProp && collapsedHeight === '0px' && classes.hidden
|
14875 | }[state]),
|
14876 | style: _extends({
|
14877 | minHeight: collapsedHeight
|
14878 | }, style),
|
14879 | ref: ref
|
14880 | }, childProps), React__default.createElement("div", {
|
14881 | className: classes.wrapper,
|
14882 | ref: wrapperRef
|
14883 | }, React__default.createElement("div", {
|
14884 | className: classes.wrapperInner
|
14885 | }, children)));
|
14886 | });
|
14887 | });
|
14888 | Collapse.propTypes = {
|
14889 | |
14890 |
|
14891 |
|
14892 | children: propTypes.node,
|
14893 |
|
14894 | |
14895 |
|
14896 |
|
14897 |
|
14898 | classes: propTypes.object.isRequired,
|
14899 |
|
14900 | |
14901 |
|
14902 |
|
14903 | className: propTypes.string,
|
14904 |
|
14905 | |
14906 |
|
14907 |
|
14908 | collapsedHeight: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
14909 |
|
14910 | |
14911 |
|
14912 |
|
14913 |
|
14914 | component: propTypes.elementType,
|
14915 |
|
14916 | |
14917 |
|
14918 |
|
14919 | in: propTypes.bool,
|
14920 |
|
14921 | |
14922 |
|
14923 |
|
14924 | onEnter: propTypes.func,
|
14925 |
|
14926 | |
14927 |
|
14928 |
|
14929 | onEntered: propTypes.func,
|
14930 |
|
14931 | |
14932 |
|
14933 |
|
14934 | onEntering: propTypes.func,
|
14935 |
|
14936 | |
14937 |
|
14938 |
|
14939 | onExit: propTypes.func,
|
14940 |
|
14941 | |
14942 |
|
14943 |
|
14944 | onExiting: propTypes.func,
|
14945 |
|
14946 | |
14947 |
|
14948 |
|
14949 | style: propTypes.object,
|
14950 |
|
14951 | |
14952 |
|
14953 |
|
14954 |
|
14955 |
|
14956 |
|
14957 | timeout: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
14958 | enter: propTypes.number,
|
14959 | exit: propTypes.number
|
14960 | }), propTypes.oneOf(['auto'])])
|
14961 | } ;
|
14962 | Collapse.muiSupportAuto = true;
|
14963 | var Collapse$1 = withStyles$1(styles$s, {
|
14964 | name: 'MuiCollapse'
|
14965 | })(Collapse);
|
14966 |
|
14967 | var styles$t = function styles(theme) {
|
14968 | var _root;
|
14969 |
|
14970 | return {
|
14971 |
|
14972 | root: (_root = {
|
14973 | width: '100%',
|
14974 | marginLeft: 'auto',
|
14975 | boxSizing: 'border-box',
|
14976 | marginRight: 'auto',
|
14977 | paddingLeft: theme.spacing(2),
|
14978 | paddingRight: theme.spacing(2)
|
14979 | }, _defineProperty(_root, theme.breakpoints.up('sm'), {
|
14980 | paddingLeft: theme.spacing(3),
|
14981 | paddingRight: theme.spacing(3)
|
14982 | }), _defineProperty(_root, theme.breakpoints.up('md'), {
|
14983 | paddingLeft: theme.spacing(4),
|
14984 | paddingRight: theme.spacing(4)
|
14985 | }), _root),
|
14986 |
|
14987 |
|
14988 | disableGutters: {
|
14989 | paddingLeft: 0,
|
14990 | paddingRight: 0
|
14991 | },
|
14992 |
|
14993 |
|
14994 | fixed: Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
|
14995 | var value = theme.breakpoints.values[breakpoint];
|
14996 |
|
14997 | if (value !== 0) {
|
14998 | acc[theme.breakpoints.up(breakpoint)] = {
|
14999 | maxWidth: value
|
15000 | };
|
15001 | }
|
15002 |
|
15003 | return acc;
|
15004 | }, {}),
|
15005 |
|
15006 |
|
15007 | maxWidthXs: _defineProperty({}, theme.breakpoints.up('xs'), {
|
15008 | maxWidth: Math.max(theme.breakpoints.values.xs, 444)
|
15009 | }),
|
15010 |
|
15011 |
|
15012 | maxWidthSm: _defineProperty({}, theme.breakpoints.up('sm'), {
|
15013 | maxWidth: theme.breakpoints.values.sm
|
15014 | }),
|
15015 |
|
15016 |
|
15017 | maxWidthMd: _defineProperty({}, theme.breakpoints.up('md'), {
|
15018 | maxWidth: theme.breakpoints.values.md
|
15019 | }),
|
15020 |
|
15021 |
|
15022 | maxWidthLg: _defineProperty({}, theme.breakpoints.up('lg'), {
|
15023 | maxWidth: theme.breakpoints.values.lg
|
15024 | }),
|
15025 |
|
15026 |
|
15027 | maxWidthXl: _defineProperty({}, theme.breakpoints.up('xl'), {
|
15028 | maxWidth: theme.breakpoints.values.xl
|
15029 | })
|
15030 | };
|
15031 | };
|
15032 | var Container = React__default.forwardRef(function Container(props, ref) {
|
15033 | var classes = props.classes,
|
15034 | className = props.className,
|
15035 | _props$component = props.component,
|
15036 | Component = _props$component === void 0 ? 'div' : _props$component,
|
15037 | _props$disableGutters = props.disableGutters,
|
15038 | disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
|
15039 | _props$fixed = props.fixed,
|
15040 | fixed = _props$fixed === void 0 ? false : _props$fixed,
|
15041 | _props$maxWidth = props.maxWidth,
|
15042 | maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
|
15043 | other = _objectWithoutProperties(props, ["classes", "className", "component", "disableGutters", "fixed", "maxWidth"]);
|
15044 |
|
15045 | return React__default.createElement(Component, _extends({
|
15046 | className: clsx(classes.root, className, fixed && classes.fixed, disableGutters && classes.disableGutters, maxWidth !== false && classes["maxWidth".concat(capitalize(String(maxWidth)))]),
|
15047 | ref: ref
|
15048 | }, other));
|
15049 | });
|
15050 | Container.propTypes = {
|
15051 | children: propTypes.node.isRequired,
|
15052 |
|
15053 | |
15054 |
|
15055 |
|
15056 |
|
15057 | classes: propTypes.object.isRequired,
|
15058 |
|
15059 | |
15060 |
|
15061 |
|
15062 | className: propTypes.string,
|
15063 |
|
15064 | |
15065 |
|
15066 |
|
15067 |
|
15068 | component: propTypes.elementType,
|
15069 |
|
15070 | |
15071 |
|
15072 |
|
15073 | disableGutters: propTypes.bool,
|
15074 |
|
15075 | |
15076 |
|
15077 |
|
15078 |
|
15079 |
|
15080 |
|
15081 | fixed: propTypes.bool,
|
15082 |
|
15083 | |
15084 |
|
15085 |
|
15086 |
|
15087 |
|
15088 | maxWidth: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])
|
15089 | } ;
|
15090 | var Container$1 = withStyles$1(styles$t, {
|
15091 | name: 'MuiContainer'
|
15092 | })(Container);
|
15093 |
|
15094 | var useStyles = makeStyles$1(function (theme) {
|
15095 | return {
|
15096 | '@global': {
|
15097 | html: {
|
15098 | WebkitFontSmoothing: 'antialiased',
|
15099 |
|
15100 | MozOsxFontSmoothing: 'grayscale',
|
15101 |
|
15102 |
|
15103 |
|
15104 | boxSizing: 'border-box'
|
15105 | },
|
15106 | '*, *::before, *::after': {
|
15107 | boxSizing: 'inherit'
|
15108 | },
|
15109 | 'strong, b': {
|
15110 | fontWeight: 'bolder'
|
15111 | },
|
15112 | body: _extends({
|
15113 | margin: 0,
|
15114 |
|
15115 | color: theme.palette.text.primary
|
15116 | }, theme.typography.body2, {
|
15117 | backgroundColor: theme.palette.background.default,
|
15118 | '@media print': {
|
15119 |
|
15120 | backgroundColor: theme.palette.common.white
|
15121 | },
|
15122 |
|
15123 |
|
15124 | '&::backdrop': {
|
15125 | backgroundColor: theme.palette.background.default
|
15126 | }
|
15127 | })
|
15128 | }
|
15129 | };
|
15130 | }, {
|
15131 | name: 'MuiCssBaseline'
|
15132 | });
|
15133 | |
15134 |
|
15135 |
|
15136 |
|
15137 | function CssBaseline(props) {
|
15138 | var _props$children = props.children,
|
15139 | children = _props$children === void 0 ? null : _props$children;
|
15140 | useStyles();
|
15141 | return React__default.createElement(React__default.Fragment, null, children);
|
15142 | }
|
15143 |
|
15144 | CssBaseline.propTypes = {
|
15145 | |
15146 |
|
15147 |
|
15148 | children: propTypes.node
|
15149 | } ;
|
15150 |
|
15151 | {
|
15152 |
|
15153 | CssBaseline['propTypes' + ''] = exactProp(CssBaseline.propTypes);
|
15154 | }
|
15155 |
|
15156 | function getContainer(container) {
|
15157 | container = typeof container === 'function' ? container() : container;
|
15158 |
|
15159 | return ReactDOM.findDOMNode(container);
|
15160 | }
|
15161 |
|
15162 | var useEnhancedEffect$3 = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
|
15163 | |
15164 |
|
15165 |
|
15166 |
|
15167 |
|
15168 | var Portal = React__default.forwardRef(function Portal(props, ref) {
|
15169 | var children = props.children,
|
15170 | container = props.container,
|
15171 | _props$disablePortal = props.disablePortal,
|
15172 | disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
|
15173 | onRendered = props.onRendered;
|
15174 |
|
15175 | var _React$useState = React__default.useState(null),
|
15176 | mountNode = _React$useState[0],
|
15177 | setMountNode = _React$useState[1];
|
15178 |
|
15179 | var handleRef = useForkRef(React__default.isValidElement(children) ? children.ref : null, ref);
|
15180 | useEnhancedEffect$3(function () {
|
15181 | if (!disablePortal) {
|
15182 | setMountNode(getContainer(container) || document.body);
|
15183 | }
|
15184 | }, [container, disablePortal]);
|
15185 | useEnhancedEffect$3(function () {
|
15186 | if (mountNode && !disablePortal) {
|
15187 | setRef(ref, mountNode);
|
15188 | return function () {
|
15189 | setRef(ref, null);
|
15190 | };
|
15191 | }
|
15192 |
|
15193 | return undefined;
|
15194 | }, [ref, mountNode, disablePortal]);
|
15195 | useEnhancedEffect$3(function () {
|
15196 | if (onRendered && (mountNode || disablePortal)) {
|
15197 | onRendered();
|
15198 | }
|
15199 | }, [onRendered, mountNode, disablePortal]);
|
15200 |
|
15201 | if (disablePortal) {
|
15202 | if (React__default.isValidElement(children)) {
|
15203 | return React__default.cloneElement(children, {
|
15204 | ref: handleRef
|
15205 | });
|
15206 | }
|
15207 |
|
15208 | return children;
|
15209 | }
|
15210 |
|
15211 | return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode;
|
15212 | });
|
15213 | Portal.propTypes = {
|
15214 |
|
15215 |
|
15216 |
|
15217 |
|
15218 |
|
15219 | |
15220 |
|
15221 |
|
15222 | children: propTypes.node,
|
15223 |
|
15224 | |
15225 |
|
15226 |
|
15227 |
|
15228 |
|
15229 |
|
15230 | container: propTypes.oneOfType([propTypes.func, propTypes.instanceOf(React__default.Component), propTypes.instanceOf(typeof Element === 'undefined' ? Object : Element)]),
|
15231 |
|
15232 | |
15233 |
|
15234 |
|
15235 |
|
15236 | disablePortal: propTypes.bool,
|
15237 |
|
15238 | |
15239 |
|
15240 |
|
15241 |
|
15242 |
|
15243 | onRendered: propTypes.func
|
15244 | } ;
|
15245 |
|
15246 | {
|
15247 |
|
15248 | Portal['propTypes' + ''] = exactProp(Portal.propTypes);
|
15249 | }
|
15250 |
|
15251 | |
15252 |
|
15253 |
|
15254 |
|
15255 |
|
15256 |
|
15257 |
|
15258 |
|
15259 |
|
15260 | function createChainedFunction() {
|
15261 | for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
|
15262 | funcs[_key] = arguments[_key];
|
15263 | }
|
15264 |
|
15265 | return funcs.reduce(function (acc, func) {
|
15266 | if (func == null) {
|
15267 | return acc;
|
15268 | }
|
15269 |
|
15270 | {
|
15271 | if (typeof func !== 'function') {
|
15272 | console.error('Material-UI: invalid Argument Type, must only provide functions, undefined, or null.');
|
15273 | }
|
15274 | }
|
15275 |
|
15276 | return function chainedFunction() {
|
15277 | for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
15278 | args[_key2] = arguments[_key2];
|
15279 | }
|
15280 |
|
15281 | acc.apply(this, args);
|
15282 | func.apply(this, args);
|
15283 | };
|
15284 | }, function () {});
|
15285 | }
|
15286 |
|
15287 |
|
15288 |
|
15289 | function getScrollbarSize() {
|
15290 | var scrollDiv = document.createElement('div');
|
15291 | scrollDiv.style.width = '99px';
|
15292 | scrollDiv.style.height = '99px';
|
15293 | scrollDiv.style.position = 'absolute';
|
15294 | scrollDiv.style.top = '-9999px';
|
15295 | scrollDiv.style.overflow = 'scroll';
|
15296 | document.body.appendChild(scrollDiv);
|
15297 | var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
15298 | document.body.removeChild(scrollDiv);
|
15299 | return scrollbarSize;
|
15300 | }
|
15301 |
|
15302 | function ownerWindow(node) {
|
15303 | var doc = ownerDocument(node);
|
15304 | return doc.defaultView || window;
|
15305 | }
|
15306 |
|
15307 | function isOverflowing(container) {
|
15308 | var doc = ownerDocument(container);
|
15309 |
|
15310 | if (doc.body === container) {
|
15311 | return ownerWindow(doc).innerWidth > doc.documentElement.clientWidth;
|
15312 | }
|
15313 |
|
15314 | return container.scrollHeight > container.clientHeight;
|
15315 | }
|
15316 |
|
15317 | function ariaHidden(node, show) {
|
15318 | if (show) {
|
15319 | node.setAttribute('aria-hidden', 'true');
|
15320 | } else {
|
15321 | node.removeAttribute('aria-hidden');
|
15322 | }
|
15323 | }
|
15324 |
|
15325 | function getPaddingRight(node) {
|
15326 | return parseInt(window.getComputedStyle(node)['padding-right'], 10) || 0;
|
15327 | }
|
15328 |
|
15329 | function ariaHiddenSiblings(container, mountNode, currentNode) {
|
15330 | var nodesToExclude = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
|
15331 | var show = arguments.length > 4 ? arguments[4] : undefined;
|
15332 | var blacklist = [mountNode, currentNode].concat(_toConsumableArray(nodesToExclude));
|
15333 | var blacklistTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE'];
|
15334 | [].forEach.call(container.children, function (node) {
|
15335 | if (node.nodeType === 1 && blacklist.indexOf(node) === -1 && blacklistTagNames.indexOf(node.tagName) === -1) {
|
15336 | ariaHidden(node, show);
|
15337 | }
|
15338 | });
|
15339 | }
|
15340 |
|
15341 | function findIndexOf(containerInfo, callback) {
|
15342 | var idx = -1;
|
15343 | containerInfo.some(function (item, index) {
|
15344 | if (callback(item)) {
|
15345 | idx = index;
|
15346 | return true;
|
15347 | }
|
15348 |
|
15349 | return false;
|
15350 | });
|
15351 | return idx;
|
15352 | }
|
15353 |
|
15354 | function handleContainer(containerInfo, props) {
|
15355 | var restoreStyle = [];
|
15356 | var restorePaddings = [];
|
15357 | var container = containerInfo.container;
|
15358 | var fixedNodes;
|
15359 |
|
15360 | if (!props.disableScrollLock) {
|
15361 | if (isOverflowing(container)) {
|
15362 |
|
15363 | var scrollbarSize = getScrollbarSize();
|
15364 | restoreStyle.push({
|
15365 | value: container.style.paddingRight,
|
15366 | key: 'padding-right',
|
15367 | el: container
|
15368 | });
|
15369 |
|
15370 | container.style['padding-right'] = "".concat(getPaddingRight(container) + scrollbarSize, "px");
|
15371 |
|
15372 | fixedNodes = ownerDocument(container).querySelectorAll('.mui-fixed');
|
15373 | [].forEach.call(fixedNodes, function (node) {
|
15374 | restorePaddings.push(node.style.paddingRight);
|
15375 | node.style.paddingRight = "".concat(getPaddingRight(node) + scrollbarSize, "px");
|
15376 | });
|
15377 | }
|
15378 |
|
15379 |
|
15380 |
|
15381 | var parent = container.parentElement;
|
15382 | var scrollContainer = parent.nodeName === 'HTML' && window.getComputedStyle(parent)['overflow-y'] === 'scroll' ? parent : container;
|
15383 |
|
15384 |
|
15385 | restoreStyle.push({
|
15386 | value: scrollContainer.style.overflow,
|
15387 | key: 'overflow',
|
15388 | el: scrollContainer
|
15389 | });
|
15390 | scrollContainer.style.overflow = 'hidden';
|
15391 | }
|
15392 |
|
15393 | var restore = function restore() {
|
15394 | if (fixedNodes) {
|
15395 | [].forEach.call(fixedNodes, function (node, i) {
|
15396 | if (restorePaddings[i]) {
|
15397 | node.style.paddingRight = restorePaddings[i];
|
15398 | } else {
|
15399 | node.style.removeProperty('padding-right');
|
15400 | }
|
15401 | });
|
15402 | }
|
15403 |
|
15404 | restoreStyle.forEach(function (_ref) {
|
15405 | var value = _ref.value,
|
15406 | el = _ref.el,
|
15407 | key = _ref.key;
|
15408 |
|
15409 | if (value) {
|
15410 | el.style.setProperty(key, value);
|
15411 | } else {
|
15412 | el.style.removeProperty(key);
|
15413 | }
|
15414 | });
|
15415 | };
|
15416 |
|
15417 | return restore;
|
15418 | }
|
15419 |
|
15420 | function getHiddenSiblings(container) {
|
15421 | var hiddenSiblings = [];
|
15422 | [].forEach.call(container.children, function (node) {
|
15423 | if (node.getAttribute && node.getAttribute('aria-hidden') === 'true') {
|
15424 | hiddenSiblings.push(node);
|
15425 | }
|
15426 | });
|
15427 | return hiddenSiblings;
|
15428 | }
|
15429 | |
15430 |
|
15431 |
|
15432 |
|
15433 |
|
15434 |
|
15435 |
|
15436 |
|
15437 |
|
15438 | var ModalManager =
|
15439 |
|
15440 | function () {
|
15441 | function ModalManager() {
|
15442 | _classCallCheck(this, ModalManager);
|
15443 |
|
15444 |
|
15445 | this.modals = [];
|
15446 |
|
15447 |
|
15448 |
|
15449 |
|
15450 |
|
15451 | this.containers = [];
|
15452 | }
|
15453 |
|
15454 | _createClass(ModalManager, [{
|
15455 | key: "add",
|
15456 | value: function add(modal, container) {
|
15457 | var modalIndex = this.modals.indexOf(modal);
|
15458 |
|
15459 | if (modalIndex !== -1) {
|
15460 | return modalIndex;
|
15461 | }
|
15462 |
|
15463 | modalIndex = this.modals.length;
|
15464 | this.modals.push(modal);
|
15465 |
|
15466 | if (modal.modalRef) {
|
15467 | ariaHidden(modal.modalRef, false);
|
15468 | }
|
15469 |
|
15470 | var hiddenSiblingNodes = getHiddenSiblings(container);
|
15471 | ariaHiddenSiblings(container, modal.mountNode, modal.modalRef, hiddenSiblingNodes, true);
|
15472 | var containerIndex = findIndexOf(this.containers, function (item) {
|
15473 | return item.container === container;
|
15474 | });
|
15475 |
|
15476 | if (containerIndex !== -1) {
|
15477 | this.containers[containerIndex].modals.push(modal);
|
15478 | return modalIndex;
|
15479 | }
|
15480 |
|
15481 | this.containers.push({
|
15482 | modals: [modal],
|
15483 | container: container,
|
15484 | restore: null,
|
15485 | hiddenSiblingNodes: hiddenSiblingNodes
|
15486 | });
|
15487 | return modalIndex;
|
15488 | }
|
15489 | }, {
|
15490 | key: "mount",
|
15491 | value: function mount(modal, props) {
|
15492 | var containerIndex = findIndexOf(this.containers, function (item) {
|
15493 | return item.modals.indexOf(modal) !== -1;
|
15494 | });
|
15495 | var containerInfo = this.containers[containerIndex];
|
15496 |
|
15497 | if (!containerInfo.restore) {
|
15498 | containerInfo.restore = handleContainer(containerInfo, props);
|
15499 | }
|
15500 | }
|
15501 | }, {
|
15502 | key: "remove",
|
15503 | value: function remove(modal) {
|
15504 | var modalIndex = this.modals.indexOf(modal);
|
15505 |
|
15506 | if (modalIndex === -1) {
|
15507 | return modalIndex;
|
15508 | }
|
15509 |
|
15510 | var containerIndex = findIndexOf(this.containers, function (item) {
|
15511 | return item.modals.indexOf(modal) !== -1;
|
15512 | });
|
15513 | var containerInfo = this.containers[containerIndex];
|
15514 | containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
|
15515 | this.modals.splice(modalIndex, 1);
|
15516 |
|
15517 | if (containerInfo.modals.length === 0) {
|
15518 |
|
15519 | if (containerInfo.restore) {
|
15520 | containerInfo.restore();
|
15521 | }
|
15522 |
|
15523 | if (modal.modalRef) {
|
15524 |
|
15525 | ariaHidden(modal.modalRef, true);
|
15526 | }
|
15527 |
|
15528 | ariaHiddenSiblings(containerInfo.container, modal.mountNode, modal.modalRef, containerInfo.hiddenSiblingNodes, false);
|
15529 | this.containers.splice(containerIndex, 1);
|
15530 | } else {
|
15531 |
|
15532 | var nextTop = containerInfo.modals[containerInfo.modals.length - 1];
|
15533 |
|
15534 |
|
15535 |
|
15536 | if (nextTop.modalRef) {
|
15537 | ariaHidden(nextTop.modalRef, false);
|
15538 | }
|
15539 | }
|
15540 |
|
15541 | return modalIndex;
|
15542 | }
|
15543 | }, {
|
15544 | key: "isTopModal",
|
15545 | value: function isTopModal(modal) {
|
15546 | return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
|
15547 | }
|
15548 | }]);
|
15549 |
|
15550 | return ModalManager;
|
15551 | }();
|
15552 |
|
15553 | |
15554 |
|
15555 |
|
15556 |
|
15557 | function TrapFocus(props) {
|
15558 | var children = props.children,
|
15559 | _props$disableAutoFoc = props.disableAutoFocus,
|
15560 | disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
|
15561 | _props$disableEnforce = props.disableEnforceFocus,
|
15562 | disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,
|
15563 | _props$disableRestore = props.disableRestoreFocus,
|
15564 | disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,
|
15565 | getDoc = props.getDoc,
|
15566 | isEnabled = props.isEnabled,
|
15567 | open = props.open;
|
15568 | var ignoreNextEnforceFocus = React__default.useRef();
|
15569 | var sentinelStart = React__default.useRef(null);
|
15570 | var sentinelEnd = React__default.useRef(null);
|
15571 | var nodeToRestore = React__default.useRef();
|
15572 | var rootRef = React__default.useRef(null);
|
15573 |
|
15574 | var handleOwnRef = React__default.useCallback(function (instance) {
|
15575 |
|
15576 | rootRef.current = ReactDOM.findDOMNode(instance);
|
15577 | }, []);
|
15578 | var handleRef = useForkRef(children.ref, handleOwnRef);
|
15579 |
|
15580 |
|
15581 | React__default.useMemo(function () {
|
15582 | if (!open || typeof window === 'undefined') {
|
15583 | return;
|
15584 | }
|
15585 |
|
15586 | nodeToRestore.current = getDoc().activeElement;
|
15587 | }, [open]);
|
15588 |
|
15589 | React__default.useEffect(function () {
|
15590 | if (!open) {
|
15591 | return;
|
15592 | }
|
15593 |
|
15594 | var doc = ownerDocument(rootRef.current);
|
15595 |
|
15596 | if (!disableAutoFocus && rootRef.current && !rootRef.current.contains(doc.activeElement)) {
|
15597 | if (!rootRef.current.hasAttribute('tabIndex')) {
|
15598 | {
|
15599 | console.error(['Material-UI: the modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
|
15600 | }
|
15601 |
|
15602 | rootRef.current.setAttribute('tabIndex', -1);
|
15603 | }
|
15604 |
|
15605 | rootRef.current.focus();
|
15606 | }
|
15607 |
|
15608 | var contain = function contain() {
|
15609 | if (disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {
|
15610 | ignoreNextEnforceFocus.current = false;
|
15611 | return;
|
15612 | }
|
15613 |
|
15614 | if (rootRef.current && !rootRef.current.contains(doc.activeElement)) {
|
15615 | rootRef.current.focus();
|
15616 | }
|
15617 | };
|
15618 |
|
15619 | var loopFocus = function loopFocus(event) {
|
15620 |
|
15621 | if (disableEnforceFocus || !isEnabled() || event.keyCode !== 9) {
|
15622 | return;
|
15623 | }
|
15624 |
|
15625 |
|
15626 | if (doc.activeElement === rootRef.current) {
|
15627 |
|
15628 |
|
15629 | ignoreNextEnforceFocus.current = true;
|
15630 |
|
15631 | if (event.shiftKey) {
|
15632 | sentinelEnd.current.focus();
|
15633 | } else {
|
15634 | sentinelStart.current.focus();
|
15635 | }
|
15636 | }
|
15637 | };
|
15638 |
|
15639 | doc.addEventListener('focus', contain, true);
|
15640 | doc.addEventListener('keydown', loopFocus, true);
|
15641 |
|
15642 |
|
15643 |
|
15644 |
|
15645 |
|
15646 | var interval = setInterval(function () {
|
15647 | contain();
|
15648 | }, 50);
|
15649 | return function () {
|
15650 | clearInterval(interval);
|
15651 | doc.removeEventListener('focus', contain, true);
|
15652 | doc.removeEventListener('keydown', loopFocus, true);
|
15653 |
|
15654 | if (!disableRestoreFocus) {
|
15655 |
|
15656 |
|
15657 |
|
15658 |
|
15659 | if (nodeToRestore.current && nodeToRestore.current.focus) {
|
15660 | nodeToRestore.current.focus();
|
15661 | }
|
15662 |
|
15663 | nodeToRestore.current = null;
|
15664 | }
|
15665 | };
|
15666 | }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open]);
|
15667 | return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
|
15668 | tabIndex: 0,
|
15669 | ref: sentinelStart,
|
15670 | "data-test": "sentinelStart"
|
15671 | }), React__default.cloneElement(children, {
|
15672 | ref: handleRef
|
15673 | }), React__default.createElement("div", {
|
15674 | tabIndex: 0,
|
15675 | ref: sentinelEnd,
|
15676 | "data-test": "sentinelEnd"
|
15677 | }));
|
15678 | }
|
15679 |
|
15680 | TrapFocus.propTypes = {
|
15681 | |
15682 |
|
15683 |
|
15684 | children: propTypes.element.isRequired,
|
15685 |
|
15686 | |
15687 |
|
15688 |
|
15689 |
|
15690 |
|
15691 |
|
15692 |
|
15693 |
|
15694 | disableAutoFocus: propTypes.bool,
|
15695 |
|
15696 | |
15697 |
|
15698 |
|
15699 |
|
15700 |
|
15701 |
|
15702 | disableEnforceFocus: propTypes.bool,
|
15703 |
|
15704 | |
15705 |
|
15706 |
|
15707 |
|
15708 | disableRestoreFocus: propTypes.bool,
|
15709 |
|
15710 | |
15711 |
|
15712 |
|
15713 |
|
15714 | getDoc: propTypes.func.isRequired,
|
15715 |
|
15716 | |
15717 |
|
15718 |
|
15719 |
|
15720 | isEnabled: propTypes.func.isRequired,
|
15721 |
|
15722 | |
15723 |
|
15724 |
|
15725 | open: propTypes.bool.isRequired
|
15726 | } ;
|
15727 |
|
15728 | var styles$u = {
|
15729 |
|
15730 | root: {
|
15731 | zIndex: -1,
|
15732 | position: 'fixed',
|
15733 | right: 0,
|
15734 | bottom: 0,
|
15735 | top: 0,
|
15736 | left: 0,
|
15737 | backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
15738 | WebkitTapHighlightColor: 'transparent',
|
15739 |
|
15740 | touchAction: 'none'
|
15741 | },
|
15742 |
|
15743 |
|
15744 | invisible: {
|
15745 | backgroundColor: 'transparent'
|
15746 | }
|
15747 | };
|
15748 | |
15749 |
|
15750 |
|
15751 |
|
15752 | var SimpleBackdrop = React__default.forwardRef(function SimpleBackdrop(props, ref) {
|
15753 | var _props$invisible = props.invisible,
|
15754 | invisible = _props$invisible === void 0 ? false : _props$invisible,
|
15755 | open = props.open,
|
15756 | other = _objectWithoutProperties(props, ["invisible", "open"]);
|
15757 |
|
15758 | return open ? React__default.createElement("div", _extends({
|
15759 | "aria-hidden": true,
|
15760 | ref: ref
|
15761 | }, other, {
|
15762 | style: _extends({}, styles$u.root, {}, invisible ? styles$u.invisible : {}, {}, other.style)
|
15763 | })) : null;
|
15764 | });
|
15765 | SimpleBackdrop.propTypes = {
|
15766 | |
15767 |
|
15768 |
|
15769 |
|
15770 | invisible: propTypes.bool,
|
15771 |
|
15772 | |
15773 |
|
15774 |
|
15775 | open: propTypes.bool.isRequired
|
15776 | } ;
|
15777 |
|
15778 | function getContainer$1(container) {
|
15779 | container = typeof container === 'function' ? container() : container;
|
15780 | return ReactDOM.findDOMNode(container);
|
15781 | }
|
15782 |
|
15783 | function getHasTransition(props) {
|
15784 | return props.children ? props.children.props.hasOwnProperty('in') : false;
|
15785 | }
|
15786 |
|
15787 |
|
15788 |
|
15789 | var defaultManager = new ModalManager();
|
15790 | var styles$v = function styles(theme) {
|
15791 | return {
|
15792 |
|
15793 | root: {
|
15794 | position: 'fixed',
|
15795 | zIndex: theme.zIndex.modal,
|
15796 | right: 0,
|
15797 | bottom: 0,
|
15798 | top: 0,
|
15799 | left: 0
|
15800 | },
|
15801 |
|
15802 |
|
15803 | hidden: {
|
15804 | visibility: 'hidden'
|
15805 | }
|
15806 | };
|
15807 | };
|
15808 | |
15809 |
|
15810 |
|
15811 |
|
15812 |
|
15813 |
|
15814 |
|
15815 |
|
15816 |
|
15817 |
|
15818 |
|
15819 |
|
15820 |
|
15821 |
|
15822 | var Modal = React__default.forwardRef(function Modal(inProps, ref) {
|
15823 | var theme = useTheme();
|
15824 | var props = getThemeProps({
|
15825 | name: 'MuiModal',
|
15826 | props: _extends({}, inProps),
|
15827 | theme: theme
|
15828 | });
|
15829 |
|
15830 | var _props$BackdropCompon = props.BackdropComponent,
|
15831 | BackdropComponent = _props$BackdropCompon === void 0 ? SimpleBackdrop : _props$BackdropCompon,
|
15832 | BackdropProps = props.BackdropProps,
|
15833 | children = props.children,
|
15834 | _props$closeAfterTran = props.closeAfterTransition,
|
15835 | closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
|
15836 | container = props.container,
|
15837 | _props$disableAutoFoc = props.disableAutoFocus,
|
15838 | disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
|
15839 | _props$disableBackdro = props.disableBackdropClick,
|
15840 | disableBackdropClick = _props$disableBackdro === void 0 ? false : _props$disableBackdro,
|
15841 | _props$disableEnforce = props.disableEnforceFocus,
|
15842 | disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,
|
15843 | _props$disableEscapeK = props.disableEscapeKeyDown,
|
15844 | disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,
|
15845 | _props$disablePortal = props.disablePortal,
|
15846 | disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
|
15847 | _props$disableRestore = props.disableRestoreFocus,
|
15848 | disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,
|
15849 | _props$disableScrollL = props.disableScrollLock,
|
15850 | disableScrollLock = _props$disableScrollL === void 0 ? false : _props$disableScrollL,
|
15851 | _props$hideBackdrop = props.hideBackdrop,
|
15852 | hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
|
15853 | _props$keepMounted = props.keepMounted,
|
15854 | keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
|
15855 | _props$manager = props.manager,
|
15856 | manager = _props$manager === void 0 ? defaultManager : _props$manager,
|
15857 | onBackdropClick = props.onBackdropClick,
|
15858 | onClose = props.onClose,
|
15859 | onEscapeKeyDown = props.onEscapeKeyDown,
|
15860 | onRendered = props.onRendered,
|
15861 | open = props.open,
|
15862 | other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "children", "closeAfterTransition", "container", "disableAutoFocus", "disableBackdropClick", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onEscapeKeyDown", "onRendered", "open"]);
|
15863 |
|
15864 | var _React$useState = React__default.useState(true),
|
15865 | exited = _React$useState[0],
|
15866 | setExited = _React$useState[1];
|
15867 |
|
15868 | var modal = React__default.useRef({});
|
15869 | var mountNodeRef = React__default.useRef(null);
|
15870 | var modalRef = React__default.useRef(null);
|
15871 | var handleRef = useForkRef(modalRef, ref);
|
15872 | var hasTransition = getHasTransition(props);
|
15873 |
|
15874 | var getDoc = function getDoc() {
|
15875 | return ownerDocument(mountNodeRef.current);
|
15876 | };
|
15877 |
|
15878 | var getModal = function getModal() {
|
15879 | modal.current.modalRef = modalRef.current;
|
15880 | modal.current.mountNode = mountNodeRef.current;
|
15881 | return modal.current;
|
15882 | };
|
15883 |
|
15884 | var handleMounted = function handleMounted() {
|
15885 | manager.mount(getModal(), {
|
15886 | disableScrollLock: disableScrollLock
|
15887 | });
|
15888 |
|
15889 | modalRef.current.scrollTop = 0;
|
15890 | };
|
15891 |
|
15892 | var handleOpen = useEventCallback(function () {
|
15893 | var resolvedContainer = getContainer$1(container) || getDoc().body;
|
15894 | manager.add(getModal(), resolvedContainer);
|
15895 |
|
15896 | if (modalRef.current) {
|
15897 | handleMounted();
|
15898 | }
|
15899 | });
|
15900 | var isTopModal = React__default.useCallback(function () {
|
15901 | return manager.isTopModal(getModal());
|
15902 | }, [manager]);
|
15903 | var handlePortalRef = useEventCallback(function (node) {
|
15904 | mountNodeRef.current = node;
|
15905 |
|
15906 | if (!node) {
|
15907 | return;
|
15908 | }
|
15909 |
|
15910 | if (onRendered) {
|
15911 | onRendered();
|
15912 | }
|
15913 |
|
15914 | if (open && isTopModal()) {
|
15915 | handleMounted();
|
15916 | } else {
|
15917 | ariaHidden(modalRef.current, true);
|
15918 | }
|
15919 | });
|
15920 | var handleClose = React__default.useCallback(function () {
|
15921 | manager.remove(getModal());
|
15922 | }, [manager]);
|
15923 | React__default.useEffect(function () {
|
15924 | return function () {
|
15925 | handleClose();
|
15926 | };
|
15927 | }, [handleClose]);
|
15928 | React__default.useEffect(function () {
|
15929 | if (open) {
|
15930 | handleOpen();
|
15931 | } else if (!hasTransition || !closeAfterTransition) {
|
15932 | handleClose();
|
15933 | }
|
15934 | }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
|
15935 |
|
15936 | if (!keepMounted && !open && (!hasTransition || exited)) {
|
15937 | return null;
|
15938 | }
|
15939 |
|
15940 | var handleEnter = function handleEnter() {
|
15941 | setExited(false);
|
15942 | };
|
15943 |
|
15944 | var handleExited = function handleExited() {
|
15945 | setExited(true);
|
15946 |
|
15947 | if (closeAfterTransition) {
|
15948 | handleClose();
|
15949 | }
|
15950 | };
|
15951 |
|
15952 | var handleBackdropClick = function handleBackdropClick(event) {
|
15953 | if (event.target !== event.currentTarget) {
|
15954 | return;
|
15955 | }
|
15956 |
|
15957 | if (onBackdropClick) {
|
15958 | onBackdropClick(event);
|
15959 | }
|
15960 |
|
15961 | if (!disableBackdropClick && onClose) {
|
15962 | onClose(event, 'backdropClick');
|
15963 | }
|
15964 | };
|
15965 |
|
15966 | var handleKeyDown = function handleKeyDown(event) {
|
15967 |
|
15968 |
|
15969 |
|
15970 |
|
15971 |
|
15972 |
|
15973 | if (event.key !== 'Escape' || !isTopModal()) {
|
15974 | return;
|
15975 | }
|
15976 |
|
15977 |
|
15978 | event.stopPropagation();
|
15979 |
|
15980 | if (onEscapeKeyDown) {
|
15981 | onEscapeKeyDown(event);
|
15982 | }
|
15983 |
|
15984 | if (!disableEscapeKeyDown && onClose) {
|
15985 | onClose(event, 'escapeKeyDown');
|
15986 | }
|
15987 | };
|
15988 |
|
15989 | var inlineStyle = styles$v(theme || {
|
15990 | zIndex: zIndex
|
15991 | });
|
15992 | var childProps = {};
|
15993 |
|
15994 | if (children.props.tabIndex === undefined) {
|
15995 | childProps.tabIndex = children.props.tabIndex || '-1';
|
15996 | }
|
15997 |
|
15998 |
|
15999 | if (hasTransition) {
|
16000 | childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);
|
16001 | childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
|
16002 | }
|
16003 |
|
16004 | return React__default.createElement(Portal, {
|
16005 | ref: handlePortalRef,
|
16006 | container: container,
|
16007 | disablePortal: disablePortal
|
16008 | }, React__default.createElement("div", _extends({
|
16009 | ref: handleRef,
|
16010 | onKeyDown: handleKeyDown,
|
16011 | role: "presentation"
|
16012 | }, other, {
|
16013 | style: _extends({}, inlineStyle.root, {}, !open && exited ? inlineStyle.hidden : {}, {}, other.style)
|
16014 | }), hideBackdrop ? null : React__default.createElement(BackdropComponent, _extends({
|
16015 | open: open,
|
16016 | onClick: handleBackdropClick
|
16017 | }, BackdropProps)), React__default.createElement(TrapFocus, {
|
16018 | disableEnforceFocus: disableEnforceFocus,
|
16019 | disableAutoFocus: disableAutoFocus,
|
16020 | disableRestoreFocus: disableRestoreFocus,
|
16021 | getDoc: getDoc,
|
16022 | isEnabled: isTopModal,
|
16023 | open: open
|
16024 | }, React__default.cloneElement(children, childProps))));
|
16025 | });
|
16026 | Modal.propTypes = {
|
16027 | |
16028 |
|
16029 |
|
16030 | BackdropComponent: propTypes.elementType,
|
16031 |
|
16032 | |
16033 |
|
16034 |
|
16035 | BackdropProps: propTypes.object,
|
16036 |
|
16037 | |
16038 |
|
16039 |
|
16040 | children: elementAcceptingRef.isRequired,
|
16041 |
|
16042 | |
16043 |
|
16044 |
|
16045 | closeAfterTransition: propTypes.bool,
|
16046 |
|
16047 | |
16048 |
|
16049 |
|
16050 |
|
16051 | container: propTypes.oneOfType([propTypes.object, propTypes.func]),
|
16052 |
|
16053 | |
16054 |
|
16055 |
|
16056 |
|
16057 |
|
16058 |
|
16059 |
|
16060 |
|
16061 | disableAutoFocus: propTypes.bool,
|
16062 |
|
16063 | |
16064 |
|
16065 |
|
16066 | disableBackdropClick: propTypes.bool,
|
16067 |
|
16068 | |
16069 |
|
16070 |
|
16071 |
|
16072 |
|
16073 |
|
16074 | disableEnforceFocus: propTypes.bool,
|
16075 |
|
16076 | |
16077 |
|
16078 |
|
16079 | disableEscapeKeyDown: propTypes.bool,
|
16080 |
|
16081 | |
16082 |
|
16083 |
|
16084 |
|
16085 | disablePortal: propTypes.bool,
|
16086 |
|
16087 | |
16088 |
|
16089 |
|
16090 |
|
16091 | disableRestoreFocus: propTypes.bool,
|
16092 |
|
16093 | |
16094 |
|
16095 |
|
16096 | disableScrollLock: propTypes.bool,
|
16097 |
|
16098 | |
16099 |
|
16100 |
|
16101 | hideBackdrop: propTypes.bool,
|
16102 |
|
16103 | |
16104 |
|
16105 |
|
16106 |
|
16107 |
|
16108 | keepMounted: propTypes.bool,
|
16109 |
|
16110 | |
16111 |
|
16112 |
|
16113 | manager: propTypes.object,
|
16114 |
|
16115 | |
16116 |
|
16117 |
|
16118 | onBackdropClick: propTypes.func,
|
16119 |
|
16120 | |
16121 |
|
16122 |
|
16123 |
|
16124 |
|
16125 |
|
16126 |
|
16127 | onClose: propTypes.func,
|
16128 |
|
16129 | |
16130 |
|
16131 |
|
16132 |
|
16133 | onEscapeKeyDown: propTypes.func,
|
16134 |
|
16135 | |
16136 |
|
16137 |
|
16138 |
|
16139 |
|
16140 |
|
16141 | onRendered: propTypes.func,
|
16142 |
|
16143 | |
16144 |
|
16145 |
|
16146 | open: propTypes.bool.isRequired
|
16147 | } ;
|
16148 |
|
16149 | var styles$w = function styles(theme) {
|
16150 | return {
|
16151 |
|
16152 | root: {
|
16153 | '@media print': {
|
16154 |
|
16155 | position: 'absolute !important'
|
16156 | }
|
16157 | },
|
16158 |
|
16159 |
|
16160 | scrollPaper: {
|
16161 | display: 'flex',
|
16162 | justifyContent: 'center',
|
16163 | alignItems: 'center'
|
16164 | },
|
16165 |
|
16166 |
|
16167 | scrollBody: {
|
16168 | overflowY: 'auto',
|
16169 | overflowX: 'hidden',
|
16170 | textAlign: 'center',
|
16171 | '&:after': {
|
16172 | content: '""',
|
16173 | display: 'inline-block',
|
16174 | verticalAlign: 'middle',
|
16175 | height: '100%',
|
16176 | width: '0'
|
16177 | }
|
16178 | },
|
16179 |
|
16180 |
|
16181 | container: {
|
16182 | height: '100%',
|
16183 | '@media print': {
|
16184 | height: 'auto'
|
16185 | },
|
16186 |
|
16187 | outline: 0
|
16188 | },
|
16189 |
|
16190 |
|
16191 | paper: {
|
16192 | margin: 32,
|
16193 | position: 'relative',
|
16194 | overflowY: 'auto',
|
16195 |
|
16196 | '@media print': {
|
16197 | overflowY: 'visible',
|
16198 | boxShadow: 'none'
|
16199 | }
|
16200 | },
|
16201 |
|
16202 |
|
16203 | paperScrollPaper: {
|
16204 | display: 'flex',
|
16205 | flexDirection: 'column',
|
16206 | maxHeight: 'calc(100% - 64px)'
|
16207 | },
|
16208 |
|
16209 |
|
16210 | paperScrollBody: {
|
16211 | display: 'inline-block',
|
16212 | verticalAlign: 'middle',
|
16213 | textAlign: 'left'
|
16214 |
|
16215 | },
|
16216 |
|
16217 |
|
16218 | paperWidthFalse: {
|
16219 | maxWidth: 'calc(100% - 64px)'
|
16220 | },
|
16221 |
|
16222 |
|
16223 | paperWidthXs: {
|
16224 | maxWidth: Math.max(theme.breakpoints.values.xs, 444),
|
16225 | '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2), {
|
16226 | maxWidth: 'calc(100% - 64px)'
|
16227 | })
|
16228 | },
|
16229 |
|
16230 |
|
16231 | paperWidthSm: {
|
16232 | maxWidth: theme.breakpoints.values.sm,
|
16233 | '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.sm + 32 * 2), {
|
16234 | maxWidth: 'calc(100% - 64px)'
|
16235 | })
|
16236 | },
|
16237 |
|
16238 |
|
16239 | paperWidthMd: {
|
16240 | maxWidth: theme.breakpoints.values.md,
|
16241 | '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.md + 32 * 2), {
|
16242 | maxWidth: 'calc(100% - 64px)'
|
16243 | })
|
16244 | },
|
16245 |
|
16246 |
|
16247 | paperWidthLg: {
|
16248 | maxWidth: theme.breakpoints.values.lg,
|
16249 | '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.lg + 32 * 2), {
|
16250 | maxWidth: 'calc(100% - 64px)'
|
16251 | })
|
16252 | },
|
16253 |
|
16254 |
|
16255 | paperWidthXl: {
|
16256 | maxWidth: theme.breakpoints.values.xl,
|
16257 | '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.xl + 32 * 2), {
|
16258 | maxWidth: 'calc(100% - 64px)'
|
16259 | })
|
16260 | },
|
16261 |
|
16262 |
|
16263 | paperFullWidth: {
|
16264 | width: 'calc(100% - 64px)'
|
16265 | },
|
16266 |
|
16267 |
|
16268 | paperFullScreen: {
|
16269 | margin: 0,
|
16270 | width: '100%',
|
16271 | maxWidth: '100%',
|
16272 | height: '100%',
|
16273 | maxHeight: 'none',
|
16274 | borderRadius: 0,
|
16275 | '&$paperScrollBody': {
|
16276 | margin: 0,
|
16277 | maxWidth: '100%'
|
16278 | }
|
16279 | }
|
16280 | };
|
16281 | };
|
16282 | var defaultTransitionDuration = {
|
16283 | enter: duration.enteringScreen,
|
16284 | exit: duration.leavingScreen
|
16285 | };
|
16286 | |
16287 |
|
16288 |
|
16289 |
|
16290 | var Dialog = React__default.forwardRef(function Dialog(props, ref) {
|
16291 | var BackdropProps = props.BackdropProps,
|
16292 | children = props.children,
|
16293 | classes = props.classes,
|
16294 | className = props.className,
|
16295 | _props$disableBackdro = props.disableBackdropClick,
|
16296 | disableBackdropClick = _props$disableBackdro === void 0 ? false : _props$disableBackdro,
|
16297 | _props$disableEscapeK = props.disableEscapeKeyDown,
|
16298 | disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,
|
16299 | _props$fullScreen = props.fullScreen,
|
16300 | fullScreen = _props$fullScreen === void 0 ? false : _props$fullScreen,
|
16301 | _props$fullWidth = props.fullWidth,
|
16302 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
16303 | _props$maxWidth = props.maxWidth,
|
16304 | maxWidth = _props$maxWidth === void 0 ? 'sm' : _props$maxWidth,
|
16305 | onBackdropClick = props.onBackdropClick,
|
16306 | onClose = props.onClose,
|
16307 | onEnter = props.onEnter,
|
16308 | onEntered = props.onEntered,
|
16309 | onEntering = props.onEntering,
|
16310 | onEscapeKeyDown = props.onEscapeKeyDown,
|
16311 | onExit = props.onExit,
|
16312 | onExited = props.onExited,
|
16313 | onExiting = props.onExiting,
|
16314 | open = props.open,
|
16315 | _props$PaperComponent = props.PaperComponent,
|
16316 | PaperComponent = _props$PaperComponent === void 0 ? Paper$1 : _props$PaperComponent,
|
16317 | _props$PaperProps = props.PaperProps,
|
16318 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
16319 | _props$scroll = props.scroll,
|
16320 | scroll = _props$scroll === void 0 ? 'paper' : _props$scroll,
|
16321 | _props$TransitionComp = props.TransitionComponent,
|
16322 | TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
|
16323 | _props$transitionDura = props.transitionDuration,
|
16324 | transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
|
16325 | TransitionProps = props.TransitionProps,
|
16326 | ariaDescribedby = props['aria-describedby'],
|
16327 | ariaLabelledby = props['aria-labelledby'],
|
16328 | other = _objectWithoutProperties(props, ["BackdropProps", "children", "classes", "className", "disableBackdropClick", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClose", "onEnter", "onEntered", "onEntering", "onEscapeKeyDown", "onExit", "onExited", "onExiting", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps", "aria-describedby", "aria-labelledby"]);
|
16329 |
|
16330 | var mouseDownTarget = React__default.useRef();
|
16331 |
|
16332 | var handleMouseDown = function handleMouseDown(event) {
|
16333 | mouseDownTarget.current = event.target;
|
16334 | };
|
16335 |
|
16336 | var handleBackdropClick = function handleBackdropClick(event) {
|
16337 |
|
16338 |
|
16339 | if (event.target !== event.currentTarget) {
|
16340 | return;
|
16341 | }
|
16342 |
|
16343 |
|
16344 | if (event.target !== mouseDownTarget.current) {
|
16345 | return;
|
16346 | }
|
16347 |
|
16348 | mouseDownTarget.current = null;
|
16349 |
|
16350 | if (onBackdropClick) {
|
16351 | onBackdropClick(event);
|
16352 | }
|
16353 |
|
16354 | if (!disableBackdropClick && onClose) {
|
16355 | onClose(event, 'backdropClick');
|
16356 | }
|
16357 | };
|
16358 |
|
16359 | return React__default.createElement(Modal, _extends({
|
16360 | className: clsx(classes.root, className),
|
16361 | BackdropComponent: Backdrop$1,
|
16362 | BackdropProps: _extends({
|
16363 | transitionDuration: transitionDuration
|
16364 | }, BackdropProps),
|
16365 | closeAfterTransition: true,
|
16366 | disableBackdropClick: disableBackdropClick,
|
16367 | disableEscapeKeyDown: disableEscapeKeyDown,
|
16368 | onEscapeKeyDown: onEscapeKeyDown,
|
16369 | onClose: onClose,
|
16370 | open: open,
|
16371 | ref: ref
|
16372 | }, other), React__default.createElement(TransitionComponent, _extends({
|
16373 | appear: true,
|
16374 | in: open,
|
16375 | timeout: transitionDuration,
|
16376 | onEnter: onEnter,
|
16377 | onEntering: onEntering,
|
16378 | onEntered: onEntered,
|
16379 | onExit: onExit,
|
16380 | onExiting: onExiting,
|
16381 | onExited: onExited,
|
16382 | role: "none presentation"
|
16383 | }, TransitionProps), React__default.createElement("div", {
|
16384 | className: clsx(classes.container, classes["scroll".concat(capitalize(scroll))]),
|
16385 | onClick: handleBackdropClick,
|
16386 | onMouseDown: handleMouseDown
|
16387 | }, React__default.createElement(PaperComponent, _extends({
|
16388 | elevation: 24,
|
16389 | role: "dialog",
|
16390 | "aria-describedby": ariaDescribedby,
|
16391 | "aria-labelledby": ariaLabelledby
|
16392 | }, PaperProps, {
|
16393 | className: clsx(classes.paper, classes["paperScroll".concat(capitalize(scroll))], classes["paperWidth".concat(capitalize(String(maxWidth)))], PaperProps.className, fullScreen && classes.paperFullScreen, fullWidth && classes.paperFullWidth)
|
16394 | }), children))));
|
16395 | });
|
16396 | Dialog.propTypes = {
|
16397 | |
16398 |
|
16399 |
|
16400 | 'aria-describedby': propTypes.string,
|
16401 |
|
16402 | |
16403 |
|
16404 |
|
16405 | 'aria-labelledby': propTypes.string,
|
16406 |
|
16407 | |
16408 |
|
16409 |
|
16410 | BackdropProps: propTypes.object,
|
16411 |
|
16412 | |
16413 |
|
16414 |
|
16415 | children: propTypes.node.isRequired,
|
16416 |
|
16417 | |
16418 |
|
16419 |
|
16420 |
|
16421 | classes: propTypes.object.isRequired,
|
16422 |
|
16423 | |
16424 |
|
16425 |
|
16426 | className: propTypes.string,
|
16427 |
|
16428 | |
16429 |
|
16430 |
|
16431 | disableBackdropClick: propTypes.bool,
|
16432 |
|
16433 | |
16434 |
|
16435 |
|
16436 | disableEscapeKeyDown: propTypes.bool,
|
16437 |
|
16438 | |
16439 |
|
16440 |
|
16441 | fullScreen: propTypes.bool,
|
16442 |
|
16443 | |
16444 |
|
16445 |
|
16446 |
|
16447 |
|
16448 | fullWidth: propTypes.bool,
|
16449 |
|
16450 | |
16451 |
|
16452 |
|
16453 |
|
16454 |
|
16455 | maxWidth: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]),
|
16456 |
|
16457 | |
16458 |
|
16459 |
|
16460 | onBackdropClick: propTypes.func,
|
16461 |
|
16462 | |
16463 |
|
16464 |
|
16465 |
|
16466 |
|
16467 |
|
16468 | onClose: propTypes.func,
|
16469 |
|
16470 | |
16471 |
|
16472 |
|
16473 | onEnter: propTypes.func,
|
16474 |
|
16475 | |
16476 |
|
16477 |
|
16478 | onEntered: propTypes.func,
|
16479 |
|
16480 | |
16481 |
|
16482 |
|
16483 | onEntering: propTypes.func,
|
16484 |
|
16485 | |
16486 |
|
16487 |
|
16488 |
|
16489 | onEscapeKeyDown: propTypes.func,
|
16490 |
|
16491 | |
16492 |
|
16493 |
|
16494 | onExit: propTypes.func,
|
16495 |
|
16496 | |
16497 |
|
16498 |
|
16499 | onExited: propTypes.func,
|
16500 |
|
16501 | |
16502 |
|
16503 |
|
16504 | onExiting: propTypes.func,
|
16505 |
|
16506 | |
16507 |
|
16508 |
|
16509 | open: propTypes.bool.isRequired,
|
16510 |
|
16511 | |
16512 |
|
16513 |
|
16514 | PaperComponent: propTypes.elementType,
|
16515 |
|
16516 | |
16517 |
|
16518 |
|
16519 | PaperProps: propTypes.object,
|
16520 |
|
16521 | |
16522 |
|
16523 |
|
16524 | scroll: propTypes.oneOf(['body', 'paper']),
|
16525 |
|
16526 | |
16527 |
|
16528 |
|
16529 | TransitionComponent: propTypes.elementType,
|
16530 |
|
16531 | |
16532 |
|
16533 |
|
16534 |
|
16535 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
16536 | enter: propTypes.number,
|
16537 | exit: propTypes.number
|
16538 | })]),
|
16539 |
|
16540 | |
16541 |
|
16542 |
|
16543 | TransitionProps: propTypes.object
|
16544 | } ;
|
16545 | var Dialog$1 = withStyles$1(styles$w, {
|
16546 | name: 'MuiDialog'
|
16547 | })(Dialog);
|
16548 |
|
16549 | var styles$x = {
|
16550 |
|
16551 | root: {
|
16552 | display: 'flex',
|
16553 | alignItems: 'center',
|
16554 | padding: 8,
|
16555 | justifyContent: 'flex-end',
|
16556 | flex: '0 0 auto'
|
16557 | },
|
16558 |
|
16559 |
|
16560 | spacing: {
|
16561 | '& > :not(:first-child)': {
|
16562 | marginLeft: 8
|
16563 | }
|
16564 | }
|
16565 | };
|
16566 | var DialogActions = React__default.forwardRef(function DialogActions(props, ref) {
|
16567 | var _props$disableSpacing = props.disableSpacing,
|
16568 | disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,
|
16569 | classes = props.classes,
|
16570 | className = props.className,
|
16571 | other = _objectWithoutProperties(props, ["disableSpacing", "classes", "className"]);
|
16572 |
|
16573 | return React__default.createElement("div", _extends({
|
16574 | className: clsx(classes.root, className, !disableSpacing && classes.spacing),
|
16575 | ref: ref
|
16576 | }, other));
|
16577 | });
|
16578 | DialogActions.propTypes = {
|
16579 | |
16580 |
|
16581 |
|
16582 | children: propTypes.node,
|
16583 |
|
16584 | |
16585 |
|
16586 |
|
16587 |
|
16588 | classes: propTypes.object.isRequired,
|
16589 |
|
16590 | |
16591 |
|
16592 |
|
16593 | className: propTypes.string,
|
16594 |
|
16595 | |
16596 |
|
16597 |
|
16598 | disableSpacing: propTypes.bool
|
16599 | } ;
|
16600 | var DialogActions$1 = withStyles$1(styles$x, {
|
16601 | name: 'MuiDialogActions'
|
16602 | })(DialogActions);
|
16603 |
|
16604 | var styles$y = function styles(theme) {
|
16605 | return {
|
16606 |
|
16607 | root: {
|
16608 | flex: '1 1 auto',
|
16609 | WebkitOverflowScrolling: 'touch',
|
16610 |
|
16611 | overflowY: 'auto',
|
16612 | padding: '8px 24px',
|
16613 | '&:first-child': {
|
16614 |
|
16615 | paddingTop: 20
|
16616 | }
|
16617 | },
|
16618 |
|
16619 |
|
16620 | dividers: {
|
16621 | padding: '16px 24px',
|
16622 | borderTop: "1px solid ".concat(theme.palette.divider),
|
16623 | borderBottom: "1px solid ".concat(theme.palette.divider)
|
16624 | }
|
16625 | };
|
16626 | };
|
16627 | var DialogContent = React__default.forwardRef(function DialogContent(props, ref) {
|
16628 | var classes = props.classes,
|
16629 | className = props.className,
|
16630 | _props$dividers = props.dividers,
|
16631 | dividers = _props$dividers === void 0 ? false : _props$dividers,
|
16632 | other = _objectWithoutProperties(props, ["classes", "className", "dividers"]);
|
16633 |
|
16634 | return React__default.createElement("div", _extends({
|
16635 | className: clsx(classes.root, className, dividers && classes.dividers),
|
16636 | ref: ref
|
16637 | }, other));
|
16638 | });
|
16639 | DialogContent.propTypes = {
|
16640 | |
16641 |
|
16642 |
|
16643 | children: propTypes.node,
|
16644 |
|
16645 | |
16646 |
|
16647 |
|
16648 |
|
16649 | classes: propTypes.object.isRequired,
|
16650 |
|
16651 | |
16652 |
|
16653 |
|
16654 | className: propTypes.string,
|
16655 |
|
16656 | |
16657 |
|
16658 |
|
16659 | dividers: propTypes.bool
|
16660 | } ;
|
16661 | var DialogContent$1 = withStyles$1(styles$y, {
|
16662 | name: 'MuiDialogContent'
|
16663 | })(DialogContent);
|
16664 |
|
16665 | var styles$z = {
|
16666 |
|
16667 | root: {
|
16668 | marginBottom: 12
|
16669 | }
|
16670 | };
|
16671 | var DialogContentText = React__default.forwardRef(function DialogContentText(props, ref) {
|
16672 | return React__default.createElement(Typography$1, _extends({
|
16673 | component: "p",
|
16674 | variant: "body1",
|
16675 | color: "textSecondary",
|
16676 | ref: ref
|
16677 | }, props));
|
16678 | });
|
16679 | DialogContentText.propTypes = {
|
16680 | |
16681 |
|
16682 |
|
16683 | children: propTypes.node,
|
16684 |
|
16685 | |
16686 |
|
16687 |
|
16688 |
|
16689 | classes: propTypes.object.isRequired
|
16690 | } ;
|
16691 | var DialogContentText$1 = withStyles$1(styles$z, {
|
16692 | name: 'MuiDialogContentText'
|
16693 | })(DialogContentText);
|
16694 |
|
16695 | var styles$A = {
|
16696 |
|
16697 | root: {
|
16698 | margin: 0,
|
16699 | padding: '16px 24px',
|
16700 | flex: '0 0 auto'
|
16701 | }
|
16702 | };
|
16703 | var DialogTitle = React__default.forwardRef(function DialogTitle(props, ref) {
|
16704 | var children = props.children,
|
16705 | classes = props.classes,
|
16706 | className = props.className,
|
16707 | _props$disableTypogra = props.disableTypography,
|
16708 | disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
|
16709 | other = _objectWithoutProperties(props, ["children", "classes", "className", "disableTypography"]);
|
16710 |
|
16711 | return React__default.createElement("div", _extends({
|
16712 | className: clsx(classes.root, className),
|
16713 | ref: ref
|
16714 | }, other), disableTypography ? children : React__default.createElement(Typography$1, {
|
16715 | component: "h2",
|
16716 | variant: "h6"
|
16717 | }, children));
|
16718 | });
|
16719 | DialogTitle.propTypes = {
|
16720 | |
16721 |
|
16722 |
|
16723 | children: propTypes.node.isRequired,
|
16724 |
|
16725 | |
16726 |
|
16727 |
|
16728 |
|
16729 | classes: propTypes.object.isRequired,
|
16730 |
|
16731 | |
16732 |
|
16733 |
|
16734 | className: propTypes.string,
|
16735 |
|
16736 | |
16737 |
|
16738 |
|
16739 |
|
16740 | disableTypography: propTypes.bool
|
16741 | } ;
|
16742 | var DialogTitle$1 = withStyles$1(styles$A, {
|
16743 | name: 'MuiDialogTitle'
|
16744 | })(DialogTitle);
|
16745 |
|
16746 | var styles$B = function styles(theme) {
|
16747 | return {
|
16748 |
|
16749 | root: {
|
16750 | height: 1,
|
16751 | margin: 0,
|
16752 |
|
16753 | border: 'none',
|
16754 | flexShrink: 0,
|
16755 | backgroundColor: theme.palette.divider
|
16756 | },
|
16757 |
|
16758 |
|
16759 | absolute: {
|
16760 | position: 'absolute',
|
16761 | bottom: 0,
|
16762 | left: 0,
|
16763 | width: '100%'
|
16764 | },
|
16765 |
|
16766 |
|
16767 | inset: {
|
16768 | marginLeft: 72
|
16769 | },
|
16770 |
|
16771 |
|
16772 | light: {
|
16773 | backgroundColor: fade(theme.palette.divider, 0.08)
|
16774 | },
|
16775 |
|
16776 |
|
16777 | middle: {
|
16778 | marginLeft: theme.spacing(2),
|
16779 | marginRight: theme.spacing(2)
|
16780 | },
|
16781 |
|
16782 |
|
16783 | vertical: {
|
16784 | height: '100%',
|
16785 | width: 1
|
16786 | }
|
16787 | };
|
16788 | };
|
16789 | var Divider = React__default.forwardRef(function Divider(props, ref) {
|
16790 | var _props$absolute = props.absolute,
|
16791 | absolute = _props$absolute === void 0 ? false : _props$absolute,
|
16792 | classes = props.classes,
|
16793 | className = props.className,
|
16794 | _props$component = props.component,
|
16795 | Component = _props$component === void 0 ? 'hr' : _props$component,
|
16796 | _props$light = props.light,
|
16797 | light = _props$light === void 0 ? false : _props$light,
|
16798 | _props$orientation = props.orientation,
|
16799 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
16800 | _props$role = props.role,
|
16801 | role = _props$role === void 0 ? Component !== 'hr' ? 'separator' : undefined : _props$role,
|
16802 | _props$variant = props.variant,
|
16803 | variant = _props$variant === void 0 ? 'fullWidth' : _props$variant,
|
16804 | other = _objectWithoutProperties(props, ["absolute", "classes", "className", "component", "light", "orientation", "role", "variant"]);
|
16805 |
|
16806 | return React__default.createElement(Component, _extends({
|
16807 | className: clsx(classes.root, className, variant !== 'fullWidth' && classes[variant], absolute && classes.absolute, light && classes.light, {
|
16808 | vertical: classes.vertical
|
16809 | }[orientation]),
|
16810 | role: role,
|
16811 | ref: ref
|
16812 | }, other));
|
16813 | });
|
16814 | Divider.propTypes = {
|
16815 | |
16816 |
|
16817 |
|
16818 | absolute: propTypes.bool,
|
16819 |
|
16820 | |
16821 |
|
16822 |
|
16823 |
|
16824 | classes: propTypes.object.isRequired,
|
16825 |
|
16826 | |
16827 |
|
16828 |
|
16829 | className: propTypes.string,
|
16830 |
|
16831 | |
16832 |
|
16833 |
|
16834 |
|
16835 | component: propTypes.elementType,
|
16836 |
|
16837 | |
16838 |
|
16839 |
|
16840 | light: propTypes.bool,
|
16841 |
|
16842 | |
16843 |
|
16844 |
|
16845 | orientation: propTypes.oneOf(['horizontal', 'vertical']),
|
16846 |
|
16847 | |
16848 |
|
16849 |
|
16850 | role: propTypes.string,
|
16851 |
|
16852 | |
16853 |
|
16854 |
|
16855 | variant: propTypes.oneOf(['fullWidth', 'inset', 'middle'])
|
16856 | } ;
|
16857 | var Divider$1 = withStyles$1(styles$B, {
|
16858 | name: 'MuiDivider'
|
16859 | })(Divider);
|
16860 |
|
16861 |
|
16862 |
|
16863 | function debounce(func) {
|
16864 | var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 166;
|
16865 | var timeout;
|
16866 |
|
16867 | function debounced() {
|
16868 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
16869 | args[_key] = arguments[_key];
|
16870 | }
|
16871 |
|
16872 |
|
16873 | var that = this;
|
16874 |
|
16875 | var later = function later() {
|
16876 | func.apply(that, args);
|
16877 | };
|
16878 |
|
16879 | clearTimeout(timeout);
|
16880 | timeout = setTimeout(later, wait);
|
16881 | }
|
16882 |
|
16883 | debounced.clear = function () {
|
16884 | clearTimeout(timeout);
|
16885 | };
|
16886 |
|
16887 | return debounced;
|
16888 | }
|
16889 |
|
16890 |
|
16891 |
|
16892 |
|
16893 | function getTranslateValue(direction, node) {
|
16894 | var rect = node.getBoundingClientRect();
|
16895 | var transform;
|
16896 |
|
16897 | if (node.fakeTransform) {
|
16898 | transform = node.fakeTransform;
|
16899 | } else {
|
16900 | var computedStyle = window.getComputedStyle(node);
|
16901 | transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
|
16902 | }
|
16903 |
|
16904 | var offsetX = 0;
|
16905 | var offsetY = 0;
|
16906 |
|
16907 | if (transform && transform !== 'none' && typeof transform === 'string') {
|
16908 | var transformValues = transform.split('(')[1].split(')')[0].split(',');
|
16909 | offsetX = parseInt(transformValues[4], 10);
|
16910 | offsetY = parseInt(transformValues[5], 10);
|
16911 | }
|
16912 |
|
16913 | if (direction === 'left') {
|
16914 | return "translateX(".concat(window.innerWidth, "px) translateX(-").concat(rect.left - offsetX, "px)");
|
16915 | }
|
16916 |
|
16917 | if (direction === 'right') {
|
16918 | return "translateX(-".concat(rect.left + rect.width - offsetX, "px)");
|
16919 | }
|
16920 |
|
16921 | if (direction === 'up') {
|
16922 | return "translateY(".concat(window.innerHeight, "px) translateY(-").concat(rect.top - offsetY, "px)");
|
16923 | }
|
16924 |
|
16925 |
|
16926 | return "translateY(-".concat(rect.top + rect.height - offsetY, "px)");
|
16927 | }
|
16928 |
|
16929 | function setTranslateValue(direction, node) {
|
16930 | var transform = getTranslateValue(direction, node);
|
16931 |
|
16932 | if (transform) {
|
16933 | node.style.webkitTransform = transform;
|
16934 | node.style.transform = transform;
|
16935 | }
|
16936 | }
|
16937 | var defaultTimeout$1 = {
|
16938 | enter: duration.enteringScreen,
|
16939 | exit: duration.leavingScreen
|
16940 | };
|
16941 | |
16942 |
|
16943 |
|
16944 |
|
16945 |
|
16946 | var Slide = React__default.forwardRef(function Slide(props, ref) {
|
16947 | var children = props.children,
|
16948 | _props$direction = props.direction,
|
16949 | direction = _props$direction === void 0 ? 'down' : _props$direction,
|
16950 | inProp = props.in,
|
16951 | onEnter = props.onEnter,
|
16952 | onEntering = props.onEntering,
|
16953 | onExit = props.onExit,
|
16954 | onExited = props.onExited,
|
16955 | style = props.style,
|
16956 | _props$timeout = props.timeout,
|
16957 | timeout = _props$timeout === void 0 ? defaultTimeout$1 : _props$timeout,
|
16958 | other = _objectWithoutProperties(props, ["children", "direction", "in", "onEnter", "onEntering", "onExit", "onExited", "style", "timeout"]);
|
16959 |
|
16960 | var theme = useTheme$1();
|
16961 | var childrenRef = React__default.useRef(null);
|
16962 | |
16963 |
|
16964 |
|
16965 |
|
16966 | var handleOwnRef = React__default.useCallback(function (instance) {
|
16967 |
|
16968 | childrenRef.current = ReactDOM.findDOMNode(instance);
|
16969 | }, []);
|
16970 | var handleRefIntermediary = useForkRef(children.ref, handleOwnRef);
|
16971 | var handleRef = useForkRef(handleRefIntermediary, ref);
|
16972 |
|
16973 | var handleEnter = function handleEnter(_, isAppearing) {
|
16974 | var node = childrenRef.current;
|
16975 | setTranslateValue(direction, node);
|
16976 | reflow(node);
|
16977 |
|
16978 | if (onEnter) {
|
16979 | onEnter(node, isAppearing);
|
16980 | }
|
16981 | };
|
16982 |
|
16983 | var handleEntering = function handleEntering(_, isAppearing) {
|
16984 | var node = childrenRef.current;
|
16985 | var transitionProps = getTransitionProps({
|
16986 | timeout: timeout,
|
16987 | style: style
|
16988 | }, {
|
16989 | mode: 'enter'
|
16990 | });
|
16991 | node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps, {
|
16992 | easing: theme.transitions.easing.easeOut
|
16993 | }));
|
16994 | node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps, {
|
16995 | easing: theme.transitions.easing.easeOut
|
16996 | }));
|
16997 | node.style.webkitTransform = 'none';
|
16998 | node.style.transform = 'none';
|
16999 |
|
17000 | if (onEntering) {
|
17001 | onEntering(node, isAppearing);
|
17002 | }
|
17003 | };
|
17004 |
|
17005 | var handleExit = function handleExit() {
|
17006 | var node = childrenRef.current;
|
17007 | var transitionProps = getTransitionProps({
|
17008 | timeout: timeout,
|
17009 | style: style
|
17010 | }, {
|
17011 | mode: 'exit'
|
17012 | });
|
17013 | node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps, {
|
17014 | easing: theme.transitions.easing.sharp
|
17015 | }));
|
17016 | node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps, {
|
17017 | easing: theme.transitions.easing.sharp
|
17018 | }));
|
17019 | setTranslateValue(direction, node);
|
17020 |
|
17021 | if (onExit) {
|
17022 | onExit(node);
|
17023 | }
|
17024 | };
|
17025 |
|
17026 | var handleExited = function handleExited() {
|
17027 | var node = childrenRef.current;
|
17028 |
|
17029 | node.style.webkitTransition = '';
|
17030 | node.style.transition = '';
|
17031 |
|
17032 | if (onExited) {
|
17033 | onExited(node);
|
17034 | }
|
17035 | };
|
17036 |
|
17037 | var updatePosition = React__default.useCallback(function () {
|
17038 | if (childrenRef.current) {
|
17039 | setTranslateValue(direction, childrenRef.current);
|
17040 | }
|
17041 | }, [direction]);
|
17042 | React__default.useEffect(function () {
|
17043 |
|
17044 | if (!inProp && direction !== 'down' && direction !== 'right') {
|
17045 | var handleResize = debounce(function () {
|
17046 | if (childrenRef.current) {
|
17047 | setTranslateValue(direction, childrenRef.current);
|
17048 | }
|
17049 | });
|
17050 | window.addEventListener('resize', handleResize);
|
17051 | return function () {
|
17052 | handleResize.clear();
|
17053 | window.removeEventListener('resize', handleResize);
|
17054 | };
|
17055 | }
|
17056 |
|
17057 | return undefined;
|
17058 | }, [direction, inProp]);
|
17059 | React__default.useEffect(function () {
|
17060 | if (!inProp) {
|
17061 |
|
17062 |
|
17063 | updatePosition();
|
17064 | }
|
17065 | }, [inProp, updatePosition]);
|
17066 | return React__default.createElement(Transition, _extends({
|
17067 | onEnter: handleEnter,
|
17068 | onEntering: handleEntering,
|
17069 | onExit: handleExit,
|
17070 | onExited: handleExited,
|
17071 | appear: true,
|
17072 | in: inProp,
|
17073 | timeout: timeout
|
17074 | }, other), function (state, childProps) {
|
17075 | return React__default.cloneElement(children, _extends({
|
17076 | ref: handleRef,
|
17077 | style: _extends({
|
17078 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
17079 | }, style, {}, children.props.style)
|
17080 | }, childProps));
|
17081 | });
|
17082 | });
|
17083 | Slide.propTypes = {
|
17084 | |
17085 |
|
17086 |
|
17087 | children: elementAcceptingRef,
|
17088 |
|
17089 | |
17090 |
|
17091 |
|
17092 | direction: propTypes.oneOf(['left', 'right', 'up', 'down']),
|
17093 |
|
17094 | |
17095 |
|
17096 |
|
17097 | in: propTypes.bool,
|
17098 |
|
17099 | |
17100 |
|
17101 |
|
17102 | onEnter: propTypes.func,
|
17103 |
|
17104 | |
17105 |
|
17106 |
|
17107 | onEntering: propTypes.func,
|
17108 |
|
17109 | |
17110 |
|
17111 |
|
17112 | onExit: propTypes.func,
|
17113 |
|
17114 | |
17115 |
|
17116 |
|
17117 | onExited: propTypes.func,
|
17118 |
|
17119 | |
17120 |
|
17121 |
|
17122 | style: propTypes.object,
|
17123 |
|
17124 | |
17125 |
|
17126 |
|
17127 |
|
17128 | timeout: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
17129 | enter: propTypes.number,
|
17130 | exit: propTypes.number
|
17131 | })])
|
17132 | } ;
|
17133 |
|
17134 | var styles$C = function styles(theme) {
|
17135 | return {
|
17136 |
|
17137 | root: {},
|
17138 |
|
17139 |
|
17140 | docked: {
|
17141 | flex: '0 0 auto'
|
17142 | },
|
17143 |
|
17144 |
|
17145 | paper: {
|
17146 | overflowY: 'auto',
|
17147 | display: 'flex',
|
17148 | flexDirection: 'column',
|
17149 | height: '100%',
|
17150 | flex: '1 0 auto',
|
17151 | zIndex: theme.zIndex.drawer,
|
17152 | WebkitOverflowScrolling: 'touch',
|
17153 |
|
17154 |
|
17155 | position: 'fixed',
|
17156 | top: 0,
|
17157 |
|
17158 |
|
17159 |
|
17160 | outline: 0
|
17161 | },
|
17162 |
|
17163 |
|
17164 | paperAnchorLeft: {
|
17165 | left: 0,
|
17166 | right: 'auto'
|
17167 | },
|
17168 |
|
17169 |
|
17170 | paperAnchorRight: {
|
17171 | left: 'auto',
|
17172 | right: 0
|
17173 | },
|
17174 |
|
17175 |
|
17176 | paperAnchorTop: {
|
17177 | top: 0,
|
17178 | left: 0,
|
17179 | bottom: 'auto',
|
17180 | right: 0,
|
17181 | height: 'auto',
|
17182 | maxHeight: '100%'
|
17183 | },
|
17184 |
|
17185 |
|
17186 | paperAnchorBottom: {
|
17187 | top: 'auto',
|
17188 | left: 0,
|
17189 | bottom: 0,
|
17190 | right: 0,
|
17191 | height: 'auto',
|
17192 | maxHeight: '100%'
|
17193 | },
|
17194 |
|
17195 |
|
17196 | paperAnchorDockedLeft: {
|
17197 | borderRight: "1px solid ".concat(theme.palette.divider)
|
17198 | },
|
17199 |
|
17200 |
|
17201 | paperAnchorDockedTop: {
|
17202 | borderBottom: "1px solid ".concat(theme.palette.divider)
|
17203 | },
|
17204 |
|
17205 |
|
17206 | paperAnchorDockedRight: {
|
17207 | borderLeft: "1px solid ".concat(theme.palette.divider)
|
17208 | },
|
17209 |
|
17210 |
|
17211 | paperAnchorDockedBottom: {
|
17212 | borderTop: "1px solid ".concat(theme.palette.divider)
|
17213 | },
|
17214 |
|
17215 |
|
17216 | modal: {}
|
17217 | };
|
17218 | };
|
17219 | var oppositeDirection = {
|
17220 | left: 'right',
|
17221 | right: 'left',
|
17222 | top: 'down',
|
17223 | bottom: 'up'
|
17224 | };
|
17225 | function isHorizontal(anchor) {
|
17226 | return ['left', 'right'].indexOf(anchor) !== -1;
|
17227 | }
|
17228 | function getAnchor(theme, anchor) {
|
17229 | return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
|
17230 | }
|
17231 | var defaultTransitionDuration$1 = {
|
17232 | enter: duration.enteringScreen,
|
17233 | exit: duration.leavingScreen
|
17234 | };
|
17235 | |
17236 |
|
17237 |
|
17238 |
|
17239 |
|
17240 | var Drawer = React__default.forwardRef(function Drawer(props, ref) {
|
17241 | var _props$anchor = props.anchor,
|
17242 | anchorProp = _props$anchor === void 0 ? 'left' : _props$anchor,
|
17243 | BackdropProps = props.BackdropProps,
|
17244 | children = props.children,
|
17245 | classes = props.classes,
|
17246 | className = props.className,
|
17247 | _props$elevation = props.elevation,
|
17248 | elevation = _props$elevation === void 0 ? 16 : _props$elevation,
|
17249 | _props$ModalProps = props.ModalProps;
|
17250 | _props$ModalProps = _props$ModalProps === void 0 ? {} : _props$ModalProps;
|
17251 |
|
17252 | var BackdropPropsProp = _props$ModalProps.BackdropProps,
|
17253 | ModalProps = _objectWithoutProperties(_props$ModalProps, ["BackdropProps"]),
|
17254 | onClose = props.onClose,
|
17255 | _props$open = props.open,
|
17256 | open = _props$open === void 0 ? false : _props$open,
|
17257 | _props$PaperProps = props.PaperProps,
|
17258 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
17259 | SlideProps = props.SlideProps,
|
17260 | _props$transitionDura = props.transitionDuration,
|
17261 | transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration$1 : _props$transitionDura,
|
17262 | _props$variant = props.variant,
|
17263 | variant = _props$variant === void 0 ? 'temporary' : _props$variant,
|
17264 | other = _objectWithoutProperties(props, ["anchor", "BackdropProps", "children", "classes", "className", "elevation", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "transitionDuration", "variant"]);
|
17265 |
|
17266 | var theme = useTheme$1();
|
17267 |
|
17268 |
|
17269 |
|
17270 | var mounted = React__default.useRef(false);
|
17271 | React__default.useEffect(function () {
|
17272 | mounted.current = true;
|
17273 | }, []);
|
17274 | var anchor = getAnchor(theme, anchorProp);
|
17275 | var drawer = React__default.createElement(Paper$1, _extends({
|
17276 | elevation: variant === 'temporary' ? elevation : 0,
|
17277 | square: true,
|
17278 | className: clsx(classes.paper, classes["paperAnchor".concat(capitalize(anchor))], PaperProps.className, variant !== 'temporary' && classes["paperAnchorDocked".concat(capitalize(anchor))])
|
17279 | }, PaperProps), children);
|
17280 |
|
17281 | if (variant === 'permanent') {
|
17282 | return React__default.createElement("div", _extends({
|
17283 | className: clsx(classes.root, classes.docked, className),
|
17284 | ref: ref
|
17285 | }, other), drawer);
|
17286 | }
|
17287 |
|
17288 | var slidingDrawer = React__default.createElement(Slide, _extends({
|
17289 | in: open,
|
17290 | direction: oppositeDirection[anchor],
|
17291 | timeout: transitionDuration,
|
17292 | appear: mounted.current
|
17293 | }, SlideProps), drawer);
|
17294 |
|
17295 | if (variant === 'persistent') {
|
17296 | return React__default.createElement("div", _extends({
|
17297 | className: clsx(classes.root, classes.docked, className),
|
17298 | ref: ref
|
17299 | }, other), slidingDrawer);
|
17300 | }
|
17301 |
|
17302 |
|
17303 | return React__default.createElement(Modal, _extends({
|
17304 | BackdropProps: _extends({}, BackdropProps, {}, BackdropPropsProp, {
|
17305 | transitionDuration: transitionDuration
|
17306 | }),
|
17307 | BackdropComponent: Backdrop$1,
|
17308 | className: clsx(classes.root, classes.modal, className),
|
17309 | open: open,
|
17310 | onClose: onClose,
|
17311 | ref: ref
|
17312 | }, other, ModalProps), slidingDrawer);
|
17313 | });
|
17314 | Drawer.propTypes = {
|
17315 | |
17316 |
|
17317 |
|
17318 | anchor: propTypes.oneOf(['left', 'top', 'right', 'bottom']),
|
17319 |
|
17320 | |
17321 |
|
17322 |
|
17323 | BackdropProps: propTypes.object,
|
17324 |
|
17325 | |
17326 |
|
17327 |
|
17328 | children: propTypes.node,
|
17329 |
|
17330 | |
17331 |
|
17332 |
|
17333 |
|
17334 | classes: propTypes.object.isRequired,
|
17335 |
|
17336 | |
17337 |
|
17338 |
|
17339 | className: propTypes.string,
|
17340 |
|
17341 | |
17342 |
|
17343 |
|
17344 | elevation: propTypes.number,
|
17345 |
|
17346 | |
17347 |
|
17348 |
|
17349 | ModalProps: propTypes.object,
|
17350 |
|
17351 | |
17352 |
|
17353 |
|
17354 |
|
17355 |
|
17356 | onClose: propTypes.func,
|
17357 |
|
17358 | |
17359 |
|
17360 |
|
17361 | open: propTypes.bool,
|
17362 |
|
17363 | |
17364 |
|
17365 |
|
17366 | PaperProps: propTypes.object,
|
17367 |
|
17368 | |
17369 |
|
17370 |
|
17371 | SlideProps: propTypes.object,
|
17372 |
|
17373 | |
17374 |
|
17375 |
|
17376 |
|
17377 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
17378 | enter: propTypes.number,
|
17379 | exit: propTypes.number
|
17380 | })]),
|
17381 |
|
17382 | |
17383 |
|
17384 |
|
17385 | variant: propTypes.oneOf(['permanent', 'persistent', 'temporary'])
|
17386 | } ;
|
17387 | var Drawer$1 = withStyles$1(styles$C, {
|
17388 | name: 'MuiDrawer',
|
17389 | flip: false
|
17390 | })(Drawer);
|
17391 |
|
17392 | function _toArray(arr) {
|
17393 | return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest();
|
17394 | }
|
17395 |
|
17396 | |
17397 |
|
17398 |
|
17399 |
|
17400 |
|
17401 | var ExpansionPanelContext = React__default.createContext({});
|
17402 |
|
17403 | {
|
17404 | ExpansionPanelContext.displayName = 'ExpansionPanelContext';
|
17405 | }
|
17406 |
|
17407 | var styles$D = function styles(theme) {
|
17408 | var transition = {
|
17409 | duration: theme.transitions.duration.shortest
|
17410 | };
|
17411 | return {
|
17412 |
|
17413 | root: {
|
17414 | position: 'relative',
|
17415 | transition: theme.transitions.create(['margin'], transition),
|
17416 | '&:before': {
|
17417 | position: 'absolute',
|
17418 | left: 0,
|
17419 | top: -1,
|
17420 | right: 0,
|
17421 | height: 1,
|
17422 | content: '""',
|
17423 | opacity: 1,
|
17424 | backgroundColor: theme.palette.divider,
|
17425 | transition: theme.transitions.create(['opacity', 'background-color'], transition)
|
17426 | },
|
17427 | '&:first-child': {
|
17428 | '&:before': {
|
17429 | display: 'none'
|
17430 | }
|
17431 | },
|
17432 | '&$expanded': {
|
17433 | margin: '16px 0',
|
17434 | '&:first-child': {
|
17435 | marginTop: 0
|
17436 | },
|
17437 | '&:last-child': {
|
17438 | marginBottom: 0
|
17439 | },
|
17440 | '&:before': {
|
17441 | opacity: 0
|
17442 | }
|
17443 | },
|
17444 | '&$expanded + &': {
|
17445 | '&:before': {
|
17446 | display: 'none'
|
17447 | }
|
17448 | },
|
17449 | '&$disabled': {
|
17450 | backgroundColor: theme.palette.action.disabledBackground
|
17451 | }
|
17452 | },
|
17453 |
|
17454 |
|
17455 | rounded: {
|
17456 | borderRadius: 0,
|
17457 | '&:first-child': {
|
17458 | borderTopLeftRadius: theme.shape.borderRadius,
|
17459 | borderTopRightRadius: theme.shape.borderRadius
|
17460 | },
|
17461 | '&:last-child': {
|
17462 | borderBottomLeftRadius: theme.shape.borderRadius,
|
17463 | borderBottomRightRadius: theme.shape.borderRadius,
|
17464 |
|
17465 | '@supports (-ms-ime-align: auto)': {
|
17466 | borderBottomLeftRadius: 0,
|
17467 | borderBottomRightRadius: 0
|
17468 | }
|
17469 | }
|
17470 | },
|
17471 |
|
17472 |
|
17473 | expanded: {},
|
17474 |
|
17475 |
|
17476 | disabled: {}
|
17477 | };
|
17478 | };
|
17479 | var ExpansionPanel = React__default.forwardRef(function ExpansionPanel(props, ref) {
|
17480 | var childrenProp = props.children,
|
17481 | classes = props.classes,
|
17482 | className = props.className,
|
17483 | _props$defaultExpande = props.defaultExpanded,
|
17484 | defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
|
17485 | _props$disabled = props.disabled,
|
17486 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
17487 | expandedProp = props.expanded,
|
17488 | onChange = props.onChange,
|
17489 | _props$square = props.square,
|
17490 | square = _props$square === void 0 ? false : _props$square,
|
17491 | _props$TransitionComp = props.TransitionComponent,
|
17492 | TransitionComponent = _props$TransitionComp === void 0 ? Collapse$1 : _props$TransitionComp,
|
17493 | TransitionProps = props.TransitionProps,
|
17494 | other = _objectWithoutProperties(props, ["children", "classes", "className", "defaultExpanded", "disabled", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"]);
|
17495 |
|
17496 | var _React$useRef = React__default.useRef(expandedProp != null),
|
17497 | isControlled = _React$useRef.current;
|
17498 |
|
17499 | var _React$useState = React__default.useState(defaultExpanded),
|
17500 | expandedState = _React$useState[0],
|
17501 | setExpandedState = _React$useState[1];
|
17502 |
|
17503 | var expanded = isControlled ? expandedProp : expandedState;
|
17504 |
|
17505 | {
|
17506 |
|
17507 | React__default.useEffect(function () {
|
17508 | if (isControlled !== (expandedProp != null)) {
|
17509 | console.error(["Material-UI: A component is changing ".concat(isControlled ? 'a ' : 'an un', "controlled ExpansionPanel to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled ExpansionPanel ' + 'element for the lifetime of the component.', 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
17510 | }
|
17511 | }, [expandedProp, isControlled]);
|
17512 | }
|
17513 |
|
17514 | var handleChange = React__default.useCallback(function (event) {
|
17515 | if (!isControlled) {
|
17516 | setExpandedState(!expanded);
|
17517 | }
|
17518 |
|
17519 | if (onChange) {
|
17520 | onChange(event, !expanded);
|
17521 | }
|
17522 | }, [expanded, isControlled, onChange]);
|
17523 |
|
17524 | var _React$Children$toArr = React__default.Children.toArray(childrenProp),
|
17525 | _React$Children$toArr2 = _toArray(_React$Children$toArr),
|
17526 | summary = _React$Children$toArr2[0],
|
17527 | children = _React$Children$toArr2.slice(1);
|
17528 |
|
17529 | var contextValue = React__default.useMemo(function () {
|
17530 | return {
|
17531 | expanded: expanded,
|
17532 | disabled: disabled,
|
17533 | toggle: handleChange
|
17534 | };
|
17535 | }, [expanded, disabled, handleChange]);
|
17536 | return React__default.createElement(Paper$1, _extends({
|
17537 | className: clsx(classes.root, className, expanded && classes.expanded, disabled && classes.disabled, !square && classes.rounded),
|
17538 | ref: ref,
|
17539 | square: square
|
17540 | }, other), React__default.createElement(ExpansionPanelContext.Provider, {
|
17541 | value: contextValue
|
17542 | }, summary), React__default.createElement(TransitionComponent, _extends({
|
17543 | in: expanded,
|
17544 | timeout: "auto"
|
17545 | }, TransitionProps), React__default.createElement("div", {
|
17546 | "aria-labelledby": summary.props.id,
|
17547 | id: summary.props['aria-controls'],
|
17548 | role: "region"
|
17549 | }, children)));
|
17550 | });
|
17551 | ExpansionPanel.propTypes = {
|
17552 | |
17553 |
|
17554 |
|
17555 | children: chainPropTypes(propTypes.node.isRequired, function (props) {
|
17556 | var summary = React__default.Children.toArray(props.children)[0];
|
17557 |
|
17558 | if (reactIs_2(summary)) {
|
17559 | return new Error("Material-UI: the ExpansionPanel doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
|
17560 | }
|
17561 |
|
17562 | if (!React__default.isValidElement(summary)) {
|
17563 | return new Error('Material-UI: expected the first child of ExpansionPanel to be a valid element.');
|
17564 | }
|
17565 |
|
17566 | return null;
|
17567 | }),
|
17568 |
|
17569 | |
17570 |
|
17571 |
|
17572 |
|
17573 | classes: propTypes.object.isRequired,
|
17574 |
|
17575 | |
17576 |
|
17577 |
|
17578 | className: propTypes.string,
|
17579 |
|
17580 | |
17581 |
|
17582 |
|
17583 | defaultExpanded: propTypes.bool,
|
17584 |
|
17585 | |
17586 |
|
17587 |
|
17588 | disabled: propTypes.bool,
|
17589 |
|
17590 | |
17591 |
|
17592 |
|
17593 |
|
17594 | expanded: propTypes.bool,
|
17595 |
|
17596 | |
17597 |
|
17598 |
|
17599 |
|
17600 |
|
17601 |
|
17602 | onChange: propTypes.func,
|
17603 |
|
17604 | |
17605 |
|
17606 |
|
17607 | square: propTypes.bool,
|
17608 |
|
17609 | |
17610 |
|
17611 |
|
17612 | TransitionComponent: propTypes.elementType,
|
17613 |
|
17614 | |
17615 |
|
17616 |
|
17617 | TransitionProps: propTypes.object
|
17618 | } ;
|
17619 | var ExpansionPanel$1 = withStyles$1(styles$D, {
|
17620 | name: 'MuiExpansionPanel'
|
17621 | })(ExpansionPanel);
|
17622 |
|
17623 | var styles$E = {
|
17624 |
|
17625 | root: {
|
17626 | display: 'flex',
|
17627 | alignItems: 'center',
|
17628 | padding: 8,
|
17629 | justifyContent: 'flex-end'
|
17630 | },
|
17631 |
|
17632 |
|
17633 | spacing: {
|
17634 | '& > :not(:first-child)': {
|
17635 | marginLeft: 8
|
17636 | }
|
17637 | }
|
17638 | };
|
17639 | var ExpansionPanelActions = React__default.forwardRef(function ExpansionPanelActions(props, ref) {
|
17640 | var classes = props.classes,
|
17641 | className = props.className,
|
17642 | _props$disableSpacing = props.disableSpacing,
|
17643 | disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,
|
17644 | other = _objectWithoutProperties(props, ["classes", "className", "disableSpacing"]);
|
17645 |
|
17646 | return React__default.createElement("div", _extends({
|
17647 | className: clsx(classes.root, className, !disableSpacing && classes.spacing),
|
17648 | ref: ref
|
17649 | }, other));
|
17650 | });
|
17651 | ExpansionPanelActions.propTypes = {
|
17652 | |
17653 |
|
17654 |
|
17655 | children: propTypes.node.isRequired,
|
17656 |
|
17657 | |
17658 |
|
17659 |
|
17660 |
|
17661 | classes: propTypes.object.isRequired,
|
17662 |
|
17663 | |
17664 |
|
17665 |
|
17666 | className: propTypes.string,
|
17667 |
|
17668 | |
17669 |
|
17670 |
|
17671 | disableSpacing: propTypes.bool
|
17672 | } ;
|
17673 | var ExpansionPanelActions$1 = withStyles$1(styles$E, {
|
17674 | name: 'MuiExpansionPanelActions'
|
17675 | })(ExpansionPanelActions);
|
17676 |
|
17677 | var styles$F = {
|
17678 |
|
17679 | root: {
|
17680 | display: 'flex',
|
17681 | padding: '8px 24px 24px'
|
17682 | }
|
17683 | };
|
17684 | var ExpansionPanelDetails = React__default.forwardRef(function ExpansionPanelDetails(props, ref) {
|
17685 | var classes = props.classes,
|
17686 | className = props.className,
|
17687 | other = _objectWithoutProperties(props, ["classes", "className"]);
|
17688 |
|
17689 | return React__default.createElement("div", _extends({
|
17690 | className: clsx(classes.root, className),
|
17691 | ref: ref
|
17692 | }, other));
|
17693 | });
|
17694 | ExpansionPanelDetails.propTypes = {
|
17695 | |
17696 |
|
17697 |
|
17698 | children: propTypes.node.isRequired,
|
17699 |
|
17700 | |
17701 |
|
17702 |
|
17703 |
|
17704 | classes: propTypes.object.isRequired,
|
17705 |
|
17706 | |
17707 |
|
17708 |
|
17709 | className: propTypes.string
|
17710 | } ;
|
17711 | var ExpansionPanelDetails$1 = withStyles$1(styles$F, {
|
17712 | name: 'MuiExpansionPanelDetails'
|
17713 | })(ExpansionPanelDetails);
|
17714 |
|
17715 | var styles$G = function styles(theme) {
|
17716 | var transition = {
|
17717 | duration: theme.transitions.duration.shortest
|
17718 | };
|
17719 | return {
|
17720 |
|
17721 | root: {
|
17722 | display: 'flex',
|
17723 | minHeight: 8 * 6,
|
17724 | transition: theme.transitions.create(['min-height', 'background-color'], transition),
|
17725 | padding: '0 24px 0 24px',
|
17726 | '&:hover:not($disabled)': {
|
17727 | cursor: 'pointer'
|
17728 | },
|
17729 | '&$expanded': {
|
17730 | minHeight: 64
|
17731 | },
|
17732 | '&$focused': {
|
17733 | backgroundColor: theme.palette.grey[300]
|
17734 | },
|
17735 | '&$disabled': {
|
17736 | opacity: 0.38
|
17737 | }
|
17738 | },
|
17739 |
|
17740 |
|
17741 | expanded: {},
|
17742 |
|
17743 |
|
17744 | focused: {},
|
17745 |
|
17746 |
|
17747 | disabled: {},
|
17748 |
|
17749 |
|
17750 | content: {
|
17751 | display: 'flex',
|
17752 | flexGrow: 1,
|
17753 | transition: theme.transitions.create(['margin'], transition),
|
17754 | margin: '12px 0',
|
17755 | '&$expanded': {
|
17756 | margin: '20px 0'
|
17757 | }
|
17758 | },
|
17759 |
|
17760 |
|
17761 | expandIcon: {
|
17762 | transform: 'rotate(0deg)',
|
17763 | transition: theme.transitions.create('transform', transition),
|
17764 | '&:hover': {
|
17765 |
|
17766 |
|
17767 |
|
17768 | backgroundColor: 'transparent'
|
17769 | },
|
17770 | '&$expanded': {
|
17771 | transform: 'rotate(180deg)'
|
17772 | }
|
17773 | }
|
17774 | };
|
17775 | };
|
17776 | var ExpansionPanelSummary = React__default.forwardRef(function ExpansionPanelSummary(props, ref) {
|
17777 | var children = props.children,
|
17778 | classes = props.classes,
|
17779 | className = props.className,
|
17780 | expandIcon = props.expandIcon,
|
17781 | IconButtonProps = props.IconButtonProps,
|
17782 | onBlur = props.onBlur,
|
17783 | onClick = props.onClick,
|
17784 | onFocusVisible = props.onFocusVisible,
|
17785 | other = _objectWithoutProperties(props, ["children", "classes", "className", "expandIcon", "IconButtonProps", "onBlur", "onClick", "onFocusVisible"]);
|
17786 |
|
17787 | var _React$useState = React__default.useState(false),
|
17788 | focusedState = _React$useState[0],
|
17789 | setFocusedState = _React$useState[1];
|
17790 |
|
17791 | var handleFocusVisible = function handleFocusVisible(event) {
|
17792 | setFocusedState(true);
|
17793 |
|
17794 | if (onFocusVisible) {
|
17795 | onFocusVisible(event);
|
17796 | }
|
17797 | };
|
17798 |
|
17799 | var handleBlur = function handleBlur(event) {
|
17800 | setFocusedState(false);
|
17801 |
|
17802 | if (onBlur) {
|
17803 | onBlur(event);
|
17804 | }
|
17805 | };
|
17806 |
|
17807 | var _React$useContext = React__default.useContext(ExpansionPanelContext),
|
17808 | _React$useContext$dis = _React$useContext.disabled,
|
17809 | disabled = _React$useContext$dis === void 0 ? false : _React$useContext$dis,
|
17810 | expanded = _React$useContext.expanded,
|
17811 | toggle = _React$useContext.toggle;
|
17812 |
|
17813 | var handleChange = function handleChange(event) {
|
17814 | if (toggle) {
|
17815 | toggle(event);
|
17816 | }
|
17817 |
|
17818 | if (onClick) {
|
17819 | onClick(event);
|
17820 | }
|
17821 | };
|
17822 |
|
17823 | return React__default.createElement(ButtonBase$1, _extends({
|
17824 | focusRipple: false,
|
17825 | disableRipple: true,
|
17826 | disabled: disabled,
|
17827 | component: "div",
|
17828 | "aria-expanded": expanded,
|
17829 | className: clsx(classes.root, className, disabled && classes.disabled, expanded && classes.expanded, focusedState && classes.focused),
|
17830 | onFocusVisible: handleFocusVisible,
|
17831 | onBlur: handleBlur,
|
17832 | onClick: handleChange,
|
17833 | ref: ref
|
17834 | }, other), React__default.createElement("div", {
|
17835 | className: clsx(classes.content, expanded && classes.expanded)
|
17836 | }, children), expandIcon && React__default.createElement(IconButton$1, _extends({
|
17837 | className: clsx(classes.expandIcon, expanded && classes.expanded),
|
17838 | edge: "end",
|
17839 | component: "div",
|
17840 | tabIndex: null,
|
17841 | role: null,
|
17842 | "aria-hidden": true
|
17843 | }, IconButtonProps), expandIcon));
|
17844 | });
|
17845 | ExpansionPanelSummary.propTypes = {
|
17846 | |
17847 |
|
17848 |
|
17849 | children: propTypes.node,
|
17850 |
|
17851 | |
17852 |
|
17853 |
|
17854 |
|
17855 | classes: propTypes.object.isRequired,
|
17856 |
|
17857 | |
17858 |
|
17859 |
|
17860 | className: propTypes.string,
|
17861 |
|
17862 | |
17863 |
|
17864 |
|
17865 | expandIcon: propTypes.node,
|
17866 |
|
17867 | |
17868 |
|
17869 |
|
17870 | IconButtonProps: propTypes.object,
|
17871 |
|
17872 | |
17873 |
|
17874 |
|
17875 | onBlur: propTypes.func,
|
17876 |
|
17877 | |
17878 |
|
17879 |
|
17880 | onClick: propTypes.func,
|
17881 |
|
17882 | |
17883 |
|
17884 |
|
17885 | onFocusVisible: propTypes.func
|
17886 | } ;
|
17887 | var ExpansionPanelSummary$1 = withStyles$1(styles$G, {
|
17888 | name: 'MuiExpansionPanelSummary'
|
17889 | })(ExpansionPanelSummary);
|
17890 |
|
17891 | var styles$H = function styles(theme) {
|
17892 | return {
|
17893 |
|
17894 | root: _extends({}, theme.typography.button, {
|
17895 | boxSizing: 'border-box',
|
17896 | minHeight: 36,
|
17897 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
|
17898 | duration: theme.transitions.duration.short
|
17899 | }),
|
17900 | borderRadius: '50%',
|
17901 | padding: 0,
|
17902 | minWidth: 0,
|
17903 | width: 56,
|
17904 | height: 56,
|
17905 | boxShadow: theme.shadows[6],
|
17906 | '&:active': {
|
17907 | boxShadow: theme.shadows[12]
|
17908 | },
|
17909 | color: theme.palette.getContrastText(theme.palette.grey[300]),
|
17910 | backgroundColor: theme.palette.grey[300],
|
17911 | '&$focusVisible': {
|
17912 | boxShadow: theme.shadows[6]
|
17913 | },
|
17914 | '&:hover': {
|
17915 | backgroundColor: theme.palette.grey.A100,
|
17916 |
|
17917 | '@media (hover: none)': {
|
17918 | backgroundColor: theme.palette.grey[300]
|
17919 | },
|
17920 | '&$disabled': {
|
17921 | backgroundColor: theme.palette.action.disabledBackground
|
17922 | },
|
17923 | textDecoration: 'none'
|
17924 | },
|
17925 | '&$disabled': {
|
17926 | color: theme.palette.action.disabled,
|
17927 | boxShadow: theme.shadows[0],
|
17928 | backgroundColor: theme.palette.action.disabledBackground
|
17929 | }
|
17930 | }),
|
17931 |
|
17932 |
|
17933 | label: {
|
17934 | width: '100%',
|
17935 |
|
17936 | display: 'inherit',
|
17937 | alignItems: 'inherit',
|
17938 | justifyContent: 'inherit'
|
17939 | },
|
17940 |
|
17941 |
|
17942 | primary: {
|
17943 | color: theme.palette.primary.contrastText,
|
17944 | backgroundColor: theme.palette.primary.main,
|
17945 | '&:hover': {
|
17946 | backgroundColor: theme.palette.primary.dark,
|
17947 |
|
17948 | '@media (hover: none)': {
|
17949 | backgroundColor: theme.palette.primary.main
|
17950 | }
|
17951 | }
|
17952 | },
|
17953 |
|
17954 |
|
17955 | secondary: {
|
17956 | color: theme.palette.secondary.contrastText,
|
17957 | backgroundColor: theme.palette.secondary.main,
|
17958 | '&:hover': {
|
17959 | backgroundColor: theme.palette.secondary.dark,
|
17960 |
|
17961 | '@media (hover: none)': {
|
17962 | backgroundColor: theme.palette.secondary.main
|
17963 | }
|
17964 | }
|
17965 | },
|
17966 |
|
17967 |
|
17968 | extended: {
|
17969 | borderRadius: 48 / 2,
|
17970 | padding: '0 16px',
|
17971 | width: 'auto',
|
17972 | minHeight: 'auto',
|
17973 | minWidth: 48,
|
17974 | height: 48,
|
17975 | '&$sizeSmall': {
|
17976 | width: 'auto',
|
17977 | padding: '0 8px',
|
17978 | borderRadius: 34 / 2,
|
17979 | minWidth: 34,
|
17980 | height: 34
|
17981 | },
|
17982 | '&$sizeMedium': {
|
17983 | width: 'auto',
|
17984 | padding: '0 16px',
|
17985 | borderRadius: 40 / 2,
|
17986 | minWidth: 40,
|
17987 | height: 40
|
17988 | }
|
17989 | },
|
17990 |
|
17991 |
|
17992 | focusVisible: {},
|
17993 |
|
17994 |
|
17995 | disabled: {},
|
17996 |
|
17997 |
|
17998 | colorInherit: {
|
17999 | color: 'inherit'
|
18000 | },
|
18001 |
|
18002 |
|
18003 | sizeSmall: {
|
18004 | width: 40,
|
18005 | height: 40
|
18006 | },
|
18007 |
|
18008 |
|
18009 | sizeMedium: {
|
18010 | width: 48,
|
18011 | height: 48
|
18012 | }
|
18013 | };
|
18014 | };
|
18015 | var Fab = React__default.forwardRef(function Fab(props, ref) {
|
18016 | var children = props.children,
|
18017 | classes = props.classes,
|
18018 | className = props.className,
|
18019 | _props$color = props.color,
|
18020 | color = _props$color === void 0 ? 'default' : _props$color,
|
18021 | _props$component = props.component,
|
18022 | component = _props$component === void 0 ? 'button' : _props$component,
|
18023 | _props$disabled = props.disabled,
|
18024 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
18025 | _props$disableFocusRi = props.disableFocusRipple,
|
18026 | disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
|
18027 | focusVisibleClassName = props.focusVisibleClassName,
|
18028 | _props$size = props.size,
|
18029 | size = _props$size === void 0 ? 'large' : _props$size,
|
18030 | _props$variant = props.variant,
|
18031 | variant = _props$variant === void 0 ? 'round' : _props$variant,
|
18032 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "variant"]);
|
18033 |
|
18034 | return React__default.createElement(ButtonBase$1, _extends({
|
18035 | className: clsx(classes.root, className, variant !== "round" && classes.extended, size !== 'large' && classes["size".concat(capitalize(size))], disabled && classes.disabled, {
|
18036 | primary: classes.primary,
|
18037 | secondary: classes.secondary,
|
18038 | inherit: classes.colorInherit
|
18039 | }[color]),
|
18040 | component: component,
|
18041 | disabled: disabled,
|
18042 | focusRipple: !disableFocusRipple,
|
18043 | focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
|
18044 | ref: ref
|
18045 | }, other), React__default.createElement("span", {
|
18046 | className: classes.label
|
18047 | }, children));
|
18048 | });
|
18049 | Fab.propTypes = {
|
18050 | |
18051 |
|
18052 |
|
18053 | children: propTypes.node.isRequired,
|
18054 |
|
18055 | |
18056 |
|
18057 |
|
18058 |
|
18059 | classes: propTypes.object.isRequired,
|
18060 |
|
18061 | |
18062 |
|
18063 |
|
18064 | className: propTypes.string,
|
18065 |
|
18066 | |
18067 |
|
18068 |
|
18069 | color: propTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
18070 |
|
18071 | |
18072 |
|
18073 |
|
18074 |
|
18075 | component: propTypes.elementType,
|
18076 |
|
18077 | |
18078 |
|
18079 |
|
18080 | disabled: propTypes.bool,
|
18081 |
|
18082 | |
18083 |
|
18084 |
|
18085 |
|
18086 | disableFocusRipple: propTypes.bool,
|
18087 |
|
18088 | |
18089 |
|
18090 |
|
18091 | disableRipple: propTypes.bool,
|
18092 |
|
18093 | |
18094 |
|
18095 |
|
18096 | focusVisibleClassName: propTypes.string,
|
18097 |
|
18098 | |
18099 |
|
18100 |
|
18101 |
|
18102 | href: propTypes.string,
|
18103 |
|
18104 | |
18105 |
|
18106 |
|
18107 |
|
18108 | size: propTypes.oneOf(['small', 'medium', 'large']),
|
18109 |
|
18110 | |
18111 |
|
18112 |
|
18113 | type: propTypes.string,
|
18114 |
|
18115 | |
18116 |
|
18117 |
|
18118 | variant: propTypes.oneOf(['round', 'extended'])
|
18119 | } ;
|
18120 | var Fab$1 = withStyles$1(styles$H, {
|
18121 | name: 'MuiFab'
|
18122 | })(Fab);
|
18123 |
|
18124 | function formControlState(_ref) {
|
18125 | var props = _ref.props,
|
18126 | states = _ref.states,
|
18127 | muiFormControl = _ref.muiFormControl;
|
18128 | return states.reduce(function (acc, state) {
|
18129 | acc[state] = props[state];
|
18130 |
|
18131 | if (muiFormControl) {
|
18132 | if (typeof props[state] === 'undefined') {
|
18133 | acc[state] = muiFormControl[state];
|
18134 | }
|
18135 | }
|
18136 |
|
18137 | return acc;
|
18138 | }, {});
|
18139 | }
|
18140 |
|
18141 | function getStyleValue(computedStyle, property) {
|
18142 | return parseInt(computedStyle[property], 10) || 0;
|
18143 | }
|
18144 |
|
18145 | var useEnhancedEffect$4 = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
|
18146 | var styles$I = {
|
18147 |
|
18148 | shadow: {
|
18149 |
|
18150 | visibility: 'hidden',
|
18151 |
|
18152 | position: 'absolute',
|
18153 |
|
18154 | overflow: 'hidden',
|
18155 | height: 0,
|
18156 | top: 0,
|
18157 | left: 0,
|
18158 |
|
18159 | transform: 'translateZ(0)'
|
18160 | }
|
18161 | };
|
18162 | var TextareaAutosize = React__default.forwardRef(function TextareaAutosize(props, ref) {
|
18163 | var onChange = props.onChange,
|
18164 | rows = props.rows,
|
18165 | rowsMax = props.rowsMax,
|
18166 | _props$rowsMin = props.rowsMin,
|
18167 | rowsMinProp = _props$rowsMin === void 0 ? 1 : _props$rowsMin,
|
18168 | style = props.style,
|
18169 | value = props.value,
|
18170 | other = _objectWithoutProperties(props, ["onChange", "rows", "rowsMax", "rowsMin", "style", "value"]);
|
18171 |
|
18172 | var rowsMin = rows || rowsMinProp;
|
18173 |
|
18174 | var _React$useRef = React__default.useRef(value != null),
|
18175 | isControlled = _React$useRef.current;
|
18176 |
|
18177 | var inputRef = React__default.useRef(null);
|
18178 | var handleRef = useForkRef(ref, inputRef);
|
18179 | var shadowRef = React__default.useRef(null);
|
18180 |
|
18181 | var _React$useState = React__default.useState({}),
|
18182 | state = _React$useState[0],
|
18183 | setState = _React$useState[1];
|
18184 |
|
18185 | var syncHeight = React__default.useCallback(function () {
|
18186 | var input = inputRef.current;
|
18187 | var computedStyle = window.getComputedStyle(input);
|
18188 | var inputShallow = shadowRef.current;
|
18189 | inputShallow.style.width = computedStyle.width;
|
18190 | inputShallow.value = input.value || props.placeholder || 'x';
|
18191 | var boxSizing = computedStyle['box-sizing'];
|
18192 | var padding = getStyleValue(computedStyle, 'padding-bottom') + getStyleValue(computedStyle, 'padding-top');
|
18193 | var border = getStyleValue(computedStyle, 'border-bottom-width') + getStyleValue(computedStyle, 'border-top-width');
|
18194 |
|
18195 | var innerHeight = inputShallow.scrollHeight - padding;
|
18196 |
|
18197 | inputShallow.value = 'x';
|
18198 | var singleRowHeight = inputShallow.scrollHeight - padding;
|
18199 |
|
18200 | var outerHeight = innerHeight;
|
18201 |
|
18202 | if (rowsMin) {
|
18203 | outerHeight = Math.max(Number(rowsMin) * singleRowHeight, outerHeight);
|
18204 | }
|
18205 |
|
18206 | if (rowsMax) {
|
18207 | outerHeight = Math.min(Number(rowsMax) * singleRowHeight, outerHeight);
|
18208 | }
|
18209 |
|
18210 | outerHeight = Math.max(outerHeight, singleRowHeight);
|
18211 |
|
18212 | var outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
|
18213 | var overflow = Math.abs(outerHeight - innerHeight) <= 1;
|
18214 | setState(function (prevState) {
|
18215 |
|
18216 |
|
18217 | if (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow) {
|
18218 | return {
|
18219 | overflow: overflow,
|
18220 | outerHeightStyle: outerHeightStyle
|
18221 | };
|
18222 | }
|
18223 |
|
18224 | return prevState;
|
18225 | });
|
18226 | }, [rowsMax, rowsMin, props.placeholder]);
|
18227 | React__default.useEffect(function () {
|
18228 | var handleResize = debounce(function () {
|
18229 | syncHeight();
|
18230 | });
|
18231 | window.addEventListener('resize', handleResize);
|
18232 | return function () {
|
18233 | handleResize.clear();
|
18234 | window.removeEventListener('resize', handleResize);
|
18235 | };
|
18236 | }, [syncHeight]);
|
18237 | useEnhancedEffect$4(function () {
|
18238 | syncHeight();
|
18239 | });
|
18240 |
|
18241 | var handleChange = function handleChange(event) {
|
18242 | if (!isControlled) {
|
18243 | syncHeight();
|
18244 | }
|
18245 |
|
18246 | if (onChange) {
|
18247 | onChange(event);
|
18248 | }
|
18249 | };
|
18250 |
|
18251 | return React__default.createElement(React__default.Fragment, null, React__default.createElement("textarea", _extends({
|
18252 | value: value,
|
18253 | onChange: handleChange,
|
18254 | ref: handleRef
|
18255 | ,
|
18256 | rows: rowsMin,
|
18257 | style: _extends({
|
18258 | height: state.outerHeightStyle,
|
18259 |
|
18260 |
|
18261 | overflow: state.overflow ? 'hidden' : null
|
18262 | }, style)
|
18263 | }, other)), React__default.createElement("textarea", {
|
18264 | "aria-hidden": true,
|
18265 | className: props.className,
|
18266 | readOnly: true,
|
18267 | ref: shadowRef,
|
18268 | tabIndex: -1,
|
18269 | style: _extends({}, styles$I.shadow, {}, style)
|
18270 | }));
|
18271 | });
|
18272 | TextareaAutosize.propTypes = {
|
18273 | |
18274 |
|
18275 |
|
18276 | className: propTypes.string,
|
18277 |
|
18278 | |
18279 |
|
18280 |
|
18281 | onChange: propTypes.func,
|
18282 |
|
18283 | |
18284 |
|
18285 |
|
18286 | placeholder: propTypes.string,
|
18287 |
|
18288 | |
18289 |
|
18290 |
|
18291 |
|
18292 |
|
18293 | rows: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
18294 |
|
18295 | |
18296 |
|
18297 |
|
18298 | rowsMax: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
18299 |
|
18300 | |
18301 |
|
18302 |
|
18303 | rowsMin: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
18304 |
|
18305 | |
18306 |
|
18307 |
|
18308 | style: propTypes.object,
|
18309 |
|
18310 | |
18311 |
|
18312 |
|
18313 | value: propTypes.any
|
18314 | } ;
|
18315 |
|
18316 |
|
18317 |
|
18318 |
|
18319 |
|
18320 |
|
18321 |
|
18322 | function hasValue(value) {
|
18323 | return value != null && !(Array.isArray(value) && value.length === 0);
|
18324 | }
|
18325 |
|
18326 |
|
18327 |
|
18328 |
|
18329 |
|
18330 |
|
18331 |
|
18332 | function isFilled(obj) {
|
18333 | var SSR = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
18334 | return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
|
18335 | }
|
18336 |
|
18337 |
|
18338 |
|
18339 |
|
18340 |
|
18341 |
|
18342 | function isAdornedStart(obj) {
|
18343 | return obj.startAdornment;
|
18344 | }
|
18345 |
|
18346 | var styles$J = function styles(theme) {
|
18347 | var light = theme.palette.type === 'light';
|
18348 | var placeholder = {
|
18349 | color: 'currentColor',
|
18350 | opacity: light ? 0.42 : 0.5,
|
18351 | transition: theme.transitions.create('opacity', {
|
18352 | duration: theme.transitions.duration.shorter
|
18353 | })
|
18354 | };
|
18355 | var placeholderHidden = {
|
18356 | opacity: '0 !important'
|
18357 | };
|
18358 | var placeholderVisible = {
|
18359 | opacity: light ? 0.42 : 0.5
|
18360 | };
|
18361 | return {
|
18362 |
|
18363 | root: {
|
18364 |
|
18365 | fontFamily: theme.typography.fontFamily,
|
18366 | color: theme.palette.text.primary,
|
18367 | fontSize: theme.typography.pxToRem(16),
|
18368 | lineHeight: '1.1875em',
|
18369 |
|
18370 | boxSizing: 'border-box',
|
18371 |
|
18372 | position: 'relative',
|
18373 | cursor: 'text',
|
18374 | display: 'inline-flex',
|
18375 | alignItems: 'center',
|
18376 | '&$disabled': {
|
18377 | color: theme.palette.text.disabled,
|
18378 | cursor: 'default'
|
18379 | }
|
18380 | },
|
18381 |
|
18382 |
|
18383 | formControl: {},
|
18384 |
|
18385 |
|
18386 | focused: {},
|
18387 |
|
18388 |
|
18389 | disabled: {},
|
18390 |
|
18391 |
|
18392 | adornedStart: {},
|
18393 |
|
18394 |
|
18395 | adornedEnd: {},
|
18396 |
|
18397 |
|
18398 | error: {},
|
18399 |
|
18400 |
|
18401 | marginDense: {},
|
18402 |
|
18403 |
|
18404 | multiline: {
|
18405 | padding: "".concat(8 - 2, "px 0 ").concat(8 - 1, "px"),
|
18406 | '&$marginDense': {
|
18407 | paddingTop: 4 - 1
|
18408 | }
|
18409 | },
|
18410 |
|
18411 |
|
18412 | colorSecondary: {},
|
18413 |
|
18414 |
|
18415 | fullWidth: {
|
18416 | width: '100%'
|
18417 | },
|
18418 |
|
18419 |
|
18420 | input: {
|
18421 | font: 'inherit',
|
18422 | color: 'currentColor',
|
18423 | padding: "".concat(8 - 2, "px 0 ").concat(8 - 1, "px"),
|
18424 | border: 0,
|
18425 | boxSizing: 'content-box',
|
18426 | background: 'none',
|
18427 | height: '1.1875em',
|
18428 |
|
18429 | margin: 0,
|
18430 |
|
18431 | WebkitTapHighlightColor: 'transparent',
|
18432 | display: 'block',
|
18433 |
|
18434 | minWidth: 0,
|
18435 | width: '100%',
|
18436 |
|
18437 | animationName: '$auto-fill-cancel',
|
18438 | '&::-webkit-input-placeholder': placeholder,
|
18439 | '&::-moz-placeholder': placeholder,
|
18440 |
|
18441 | '&:-ms-input-placeholder': placeholder,
|
18442 |
|
18443 | '&::-ms-input-placeholder': placeholder,
|
18444 |
|
18445 | '&:focus': {
|
18446 | outline: 0
|
18447 | },
|
18448 |
|
18449 | '&:invalid': {
|
18450 | boxShadow: 'none'
|
18451 | },
|
18452 | '&::-webkit-search-decoration': {
|
18453 |
|
18454 | '-webkit-appearance': 'none'
|
18455 | },
|
18456 |
|
18457 | 'label[data-shrink=false] + $formControl &': {
|
18458 | '&::-webkit-input-placeholder': placeholderHidden,
|
18459 | '&::-moz-placeholder': placeholderHidden,
|
18460 |
|
18461 | '&:-ms-input-placeholder': placeholderHidden,
|
18462 |
|
18463 | '&::-ms-input-placeholder': placeholderHidden,
|
18464 |
|
18465 | '&:focus::-webkit-input-placeholder': placeholderVisible,
|
18466 | '&:focus::-moz-placeholder': placeholderVisible,
|
18467 |
|
18468 | '&:focus:-ms-input-placeholder': placeholderVisible,
|
18469 |
|
18470 | '&:focus::-ms-input-placeholder': placeholderVisible
|
18471 |
|
18472 | },
|
18473 | '&$disabled': {
|
18474 | opacity: 1
|
18475 |
|
18476 | },
|
18477 | '&:-webkit-autofill': {
|
18478 | animationDuration: '5000s',
|
18479 | animationName: '$auto-fill'
|
18480 | }
|
18481 | },
|
18482 | '@keyframes auto-fill': {
|
18483 | from: {}
|
18484 | },
|
18485 | '@keyframes auto-fill-cancel': {
|
18486 | from: {}
|
18487 | },
|
18488 |
|
18489 |
|
18490 | inputMarginDense: {
|
18491 | paddingTop: 4 - 1
|
18492 | },
|
18493 |
|
18494 |
|
18495 | inputMultiline: {
|
18496 | height: 'auto',
|
18497 | resize: 'none',
|
18498 | padding: 0
|
18499 | },
|
18500 |
|
18501 |
|
18502 | inputTypeSearch: {
|
18503 |
|
18504 | '-moz-appearance': 'textfield',
|
18505 | '-webkit-appearance': 'textfield'
|
18506 | },
|
18507 |
|
18508 |
|
18509 | inputAdornedStart: {},
|
18510 |
|
18511 |
|
18512 | inputAdornedEnd: {},
|
18513 |
|
18514 |
|
18515 | inputHiddenLabel: {}
|
18516 | };
|
18517 | };
|
18518 | var useEnhancedEffect$5 = typeof window === 'undefined' ? React__default.useEffect : React__default.useLayoutEffect;
|
18519 | |
18520 |
|
18521 |
|
18522 |
|
18523 |
|
18524 |
|
18525 | var InputBase = React__default.forwardRef(function InputBase(props, ref) {
|
18526 | var ariaDescribedby = props['aria-describedby'],
|
18527 | autoComplete = props.autoComplete,
|
18528 | autoFocus = props.autoFocus,
|
18529 | classes = props.classes,
|
18530 | className = props.className,
|
18531 | color = props.color,
|
18532 | defaultValue = props.defaultValue,
|
18533 | disabled = props.disabled,
|
18534 | endAdornment = props.endAdornment,
|
18535 | error = props.error,
|
18536 | _props$fullWidth = props.fullWidth,
|
18537 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
18538 | id = props.id,
|
18539 | _props$inputComponent = props.inputComponent,
|
18540 | inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
|
18541 | _props$inputProps = props.inputProps,
|
18542 | inputPropsProp = _props$inputProps === void 0 ? {} : _props$inputProps,
|
18543 | inputRefProp = props.inputRef,
|
18544 | margin = props.margin,
|
18545 | _props$multiline = props.multiline,
|
18546 | multiline = _props$multiline === void 0 ? false : _props$multiline,
|
18547 | name = props.name,
|
18548 | onBlur = props.onBlur,
|
18549 | onChange = props.onChange,
|
18550 | onClick = props.onClick,
|
18551 | onFocus = props.onFocus,
|
18552 | onKeyDown = props.onKeyDown,
|
18553 | onKeyUp = props.onKeyUp,
|
18554 | placeholder = props.placeholder,
|
18555 | readOnly = props.readOnly,
|
18556 | renderSuffix = props.renderSuffix,
|
18557 | rows = props.rows,
|
18558 | rowsMax = props.rowsMax,
|
18559 | rowsMin = props.rowsMin,
|
18560 | startAdornment = props.startAdornment,
|
18561 | _props$type = props.type,
|
18562 | type = _props$type === void 0 ? 'text' : _props$type,
|
18563 | valueProp = props.value,
|
18564 | other = _objectWithoutProperties(props, ["aria-describedby", "autoComplete", "autoFocus", "classes", "className", "color", "defaultValue", "disabled", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "rowsMax", "rowsMin", "startAdornment", "type", "value"]);
|
18565 |
|
18566 | var value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
|
18567 |
|
18568 | var _React$useRef = React__default.useRef(value != null),
|
18569 | isControlled = _React$useRef.current;
|
18570 |
|
18571 | var inputRef = React__default.useRef();
|
18572 | var handleInputRefWarning = React__default.useCallback(function (instance) {
|
18573 | {
|
18574 | if (instance && !(instance instanceof HTMLInputElement) && !instance.focus) {
|
18575 | console.error(['Material-UI: you have provided a `inputComponent` to the input component', 'that does not correctly handle the `inputRef` prop.', 'Make sure the `inputRef` prop is called with a HTMLInputElement.'].join('\n'));
|
18576 | }
|
18577 | }
|
18578 | }, []);
|
18579 | var handleInputPropsRefProp = useForkRef(inputPropsProp.ref, handleInputRefWarning);
|
18580 | var handleInputRefProp = useForkRef(inputRefProp, handleInputPropsRefProp);
|
18581 | var handleInputRef = useForkRef(inputRef, handleInputRefProp);
|
18582 |
|
18583 | var _React$useState = React__default.useState(false),
|
18584 | focused = _React$useState[0],
|
18585 | setFocused = _React$useState[1];
|
18586 |
|
18587 | var muiFormControl = useFormControl();
|
18588 |
|
18589 | {
|
18590 |
|
18591 | React__default.useEffect(function () {
|
18592 | if (muiFormControl) {
|
18593 | return muiFormControl.registerEffect();
|
18594 | }
|
18595 |
|
18596 | return undefined;
|
18597 | }, [muiFormControl]);
|
18598 | }
|
18599 |
|
18600 | var fcs = formControlState({
|
18601 | props: props,
|
18602 | muiFormControl: muiFormControl,
|
18603 | states: ['color', 'disabled', 'error', 'hiddenLabel', 'margin', 'required', 'filled']
|
18604 | });
|
18605 | fcs.focused = muiFormControl ? muiFormControl.focused : focused;
|
18606 |
|
18607 |
|
18608 | React__default.useEffect(function () {
|
18609 | if (!muiFormControl && disabled && focused) {
|
18610 | setFocused(false);
|
18611 |
|
18612 | if (onBlur) {
|
18613 | onBlur();
|
18614 | }
|
18615 | }
|
18616 | }, [muiFormControl, disabled, focused, onBlur]);
|
18617 | var onFilled = muiFormControl && muiFormControl.onFilled;
|
18618 | var onEmpty = muiFormControl && muiFormControl.onEmpty;
|
18619 | var checkDirty = React__default.useCallback(function (obj) {
|
18620 | if (isFilled(obj)) {
|
18621 | if (onFilled) {
|
18622 | onFilled();
|
18623 | }
|
18624 | } else if (onEmpty) {
|
18625 | onEmpty();
|
18626 | }
|
18627 | }, [onFilled, onEmpty]);
|
18628 | useEnhancedEffect$5(function () {
|
18629 | if (isControlled) {
|
18630 | checkDirty({
|
18631 | value: value
|
18632 | });
|
18633 | }
|
18634 | }, [value, checkDirty, isControlled]);
|
18635 |
|
18636 | var handleFocus = function handleFocus(event) {
|
18637 |
|
18638 |
|
18639 | if (fcs.disabled) {
|
18640 | event.stopPropagation();
|
18641 | return;
|
18642 | }
|
18643 |
|
18644 | if (onFocus) {
|
18645 | onFocus(event);
|
18646 | }
|
18647 |
|
18648 | if (inputPropsProp.onFocus) {
|
18649 | inputPropsProp.onFocus(event);
|
18650 | }
|
18651 |
|
18652 | if (muiFormControl && muiFormControl.onFocus) {
|
18653 | muiFormControl.onFocus(event);
|
18654 | } else {
|
18655 | setFocused(true);
|
18656 | }
|
18657 | };
|
18658 |
|
18659 | var handleBlur = function handleBlur(event) {
|
18660 | if (onBlur) {
|
18661 | onBlur(event);
|
18662 | }
|
18663 |
|
18664 | if (inputPropsProp.onBlur) {
|
18665 | inputPropsProp.onBlur(event);
|
18666 | }
|
18667 |
|
18668 | if (muiFormControl && muiFormControl.onBlur) {
|
18669 | muiFormControl.onBlur(event);
|
18670 | } else {
|
18671 | setFocused(false);
|
18672 | }
|
18673 | };
|
18674 |
|
18675 | var handleChange = function handleChange(event) {
|
18676 | if (!isControlled) {
|
18677 | var element = event.target || inputRef.current;
|
18678 |
|
18679 | if (element == null) {
|
18680 | throw new TypeError('Material-UI: Expected valid input target. ' + 'Did you use a custom `inputComponent` and forget to forward refs? ' + 'See https://material-ui.com/r/input-component-ref-interface for more info.');
|
18681 | }
|
18682 |
|
18683 | checkDirty({
|
18684 | value: element.value
|
18685 | });
|
18686 | }
|
18687 |
|
18688 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
18689 | args[_key - 1] = arguments[_key];
|
18690 | }
|
18691 |
|
18692 | if (inputPropsProp.onChange) {
|
18693 | inputPropsProp.onChange.apply(inputPropsProp, [event].concat(args));
|
18694 | }
|
18695 |
|
18696 |
|
18697 | if (onChange) {
|
18698 | onChange.apply(void 0, [event].concat(args));
|
18699 | }
|
18700 | };
|
18701 |
|
18702 |
|
18703 |
|
18704 | React__default.useEffect(function () {
|
18705 | checkDirty(inputRef.current);
|
18706 | }, []);
|
18707 |
|
18708 | var handleClick = function handleClick(event) {
|
18709 | if (inputRef.current && event.currentTarget === event.target) {
|
18710 | inputRef.current.focus();
|
18711 | }
|
18712 |
|
18713 | if (onClick) {
|
18714 | onClick(event);
|
18715 | }
|
18716 | };
|
18717 |
|
18718 | var InputComponent = inputComponent;
|
18719 |
|
18720 | var inputProps = _extends({}, inputPropsProp, {
|
18721 | ref: handleInputRef
|
18722 | });
|
18723 |
|
18724 | if (typeof InputComponent !== 'string') {
|
18725 | inputProps = _extends({
|
18726 |
|
18727 |
|
18728 | inputRef: handleInputRef,
|
18729 | type: type
|
18730 | }, inputProps, {
|
18731 | ref: null
|
18732 | });
|
18733 | } else if (multiline) {
|
18734 | if (rows && !rowsMax && !rowsMin) {
|
18735 | InputComponent = 'textarea';
|
18736 | } else {
|
18737 | inputProps = _extends({
|
18738 | rows: rows,
|
18739 | rowsMax: rowsMax
|
18740 | }, inputProps);
|
18741 | InputComponent = TextareaAutosize;
|
18742 | }
|
18743 | } else {
|
18744 | inputProps = _extends({
|
18745 | type: type
|
18746 | }, inputProps);
|
18747 | }
|
18748 |
|
18749 | var handleAutoFill = function handleAutoFill(event) {
|
18750 |
|
18751 | checkDirty(event.animationName.indexOf('auto-fill-cancel') !== -1 ? inputRef.current : {
|
18752 | value: 'x'
|
18753 | });
|
18754 | };
|
18755 |
|
18756 | React__default.useEffect(function () {
|
18757 | if (muiFormControl) {
|
18758 | muiFormControl.setAdornedStart(Boolean(startAdornment));
|
18759 | }
|
18760 | }, [muiFormControl, startAdornment]);
|
18761 | return React__default.createElement("div", _extends({
|
18762 | className: clsx(classes.root, classes["color".concat(capitalize(fcs.color || 'primary'))], className, fcs.disabled && classes.disabled, fcs.error && classes.error, fullWidth && classes.fullWidth, fcs.focused && classes.focused, muiFormControl && classes.formControl, multiline && classes.multiline, startAdornment && classes.adornedStart, endAdornment && classes.adornedEnd, {
|
18763 | dense: classes.marginDense
|
18764 | }[fcs.margin]),
|
18765 | onClick: handleClick,
|
18766 | ref: ref
|
18767 | }, other), startAdornment, React__default.createElement(FormControlContext.Provider, {
|
18768 | value: null
|
18769 | }, React__default.createElement(InputComponent, _extends({
|
18770 | "aria-invalid": fcs.error,
|
18771 | "aria-describedby": ariaDescribedby,
|
18772 | autoComplete: autoComplete,
|
18773 | autoFocus: autoFocus,
|
18774 | defaultValue: defaultValue,
|
18775 | disabled: fcs.disabled,
|
18776 | id: id,
|
18777 | onAnimationStart: handleAutoFill,
|
18778 | name: name,
|
18779 | placeholder: placeholder,
|
18780 | readOnly: readOnly,
|
18781 | required: fcs.required,
|
18782 | rows: rows,
|
18783 | value: value,
|
18784 | onKeyDown: onKeyDown,
|
18785 | onKeyUp: onKeyUp
|
18786 | }, inputProps, {
|
18787 | className: clsx(classes.input, inputPropsProp.className, fcs.disabled && classes.disabled, multiline && classes.inputMultiline, fcs.hiddenLabel && classes.inputHiddenLabel, startAdornment && classes.inputAdornedStart, endAdornment && classes.inputAdornedEnd, {
|
18788 | search: classes.inputTypeSearch
|
18789 | }[type], {
|
18790 | dense: classes.inputMarginDense
|
18791 | }[fcs.margin]),
|
18792 | onBlur: handleBlur,
|
18793 | onChange: handleChange,
|
18794 | onFocus: handleFocus
|
18795 | }))), endAdornment, renderSuffix ? renderSuffix(_extends({}, fcs, {
|
18796 | startAdornment: startAdornment
|
18797 | })) : null);
|
18798 | });
|
18799 | InputBase.propTypes = {
|
18800 | |
18801 |
|
18802 |
|
18803 | 'aria-describedby': propTypes.string,
|
18804 |
|
18805 | |
18806 |
|
18807 |
|
18808 |
|
18809 |
|
18810 | autoComplete: propTypes.string,
|
18811 |
|
18812 | |
18813 |
|
18814 |
|
18815 | autoFocus: propTypes.bool,
|
18816 |
|
18817 | |
18818 |
|
18819 |
|
18820 |
|
18821 | classes: propTypes.object.isRequired,
|
18822 |
|
18823 | |
18824 |
|
18825 |
|
18826 | className: propTypes.string,
|
18827 |
|
18828 | |
18829 |
|
18830 |
|
18831 | color: propTypes.oneOf(['primary', 'secondary']),
|
18832 |
|
18833 | |
18834 |
|
18835 |
|
18836 | defaultValue: propTypes.any,
|
18837 |
|
18838 | |
18839 |
|
18840 |
|
18841 | disabled: propTypes.bool,
|
18842 |
|
18843 | |
18844 |
|
18845 |
|
18846 | endAdornment: propTypes.node,
|
18847 |
|
18848 | |
18849 |
|
18850 |
|
18851 |
|
18852 | error: propTypes.bool,
|
18853 |
|
18854 | |
18855 |
|
18856 |
|
18857 | fullWidth: propTypes.bool,
|
18858 |
|
18859 | |
18860 |
|
18861 |
|
18862 | id: propTypes.string,
|
18863 |
|
18864 | |
18865 |
|
18866 |
|
18867 |
|
18868 | inputComponent: propTypes.elementType,
|
18869 |
|
18870 | |
18871 |
|
18872 |
|
18873 | inputProps: propTypes.object,
|
18874 |
|
18875 | |
18876 |
|
18877 |
|
18878 | inputRef: refType,
|
18879 |
|
18880 | |
18881 |
|
18882 |
|
18883 |
|
18884 | margin: propTypes.oneOf(['dense', 'none']),
|
18885 |
|
18886 | |
18887 |
|
18888 |
|
18889 | multiline: propTypes.bool,
|
18890 |
|
18891 | |
18892 |
|
18893 |
|
18894 | name: propTypes.string,
|
18895 |
|
18896 | |
18897 |
|
18898 |
|
18899 | onBlur: propTypes.func,
|
18900 |
|
18901 | |
18902 |
|
18903 |
|
18904 |
|
18905 |
|
18906 |
|
18907 | onChange: propTypes.func,
|
18908 |
|
18909 | |
18910 |
|
18911 |
|
18912 | onClick: propTypes.func,
|
18913 |
|
18914 | |
18915 |
|
18916 |
|
18917 | onFocus: propTypes.func,
|
18918 |
|
18919 | |
18920 |
|
18921 |
|
18922 | onKeyDown: propTypes.func,
|
18923 |
|
18924 | |
18925 |
|
18926 |
|
18927 | onKeyUp: propTypes.func,
|
18928 |
|
18929 | |
18930 |
|
18931 |
|
18932 | placeholder: propTypes.string,
|
18933 |
|
18934 | |
18935 |
|
18936 |
|
18937 |
|
18938 | readOnly: propTypes.bool,
|
18939 |
|
18940 | |
18941 |
|
18942 |
|
18943 | renderSuffix: propTypes.func,
|
18944 |
|
18945 | |
18946 |
|
18947 |
|
18948 | required: propTypes.bool,
|
18949 |
|
18950 | |
18951 |
|
18952 |
|
18953 | rows: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
18954 |
|
18955 | |
18956 |
|
18957 |
|
18958 | rowsMax: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
18959 |
|
18960 | |
18961 |
|
18962 |
|
18963 | rowsMin: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
18964 |
|
18965 | |
18966 |
|
18967 |
|
18968 | startAdornment: propTypes.node,
|
18969 |
|
18970 | |
18971 |
|
18972 |
|
18973 | type: propTypes.string,
|
18974 |
|
18975 | |
18976 |
|
18977 |
|
18978 | value: propTypes.any
|
18979 | } ;
|
18980 | var InputBase$1 = withStyles$1(styles$J, {
|
18981 | name: 'MuiInputBase'
|
18982 | })(InputBase);
|
18983 |
|
18984 | var styles$K = function styles(theme) {
|
18985 | var light = theme.palette.type === 'light';
|
18986 | var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
|
18987 | var backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';
|
18988 | return {
|
18989 |
|
18990 | root: {
|
18991 | position: 'relative',
|
18992 | backgroundColor: backgroundColor,
|
18993 | borderTopLeftRadius: theme.shape.borderRadius,
|
18994 | borderTopRightRadius: theme.shape.borderRadius,
|
18995 | transition: theme.transitions.create('background-color', {
|
18996 | duration: theme.transitions.duration.shorter,
|
18997 | easing: theme.transitions.easing.easeOut
|
18998 | }),
|
18999 | '&:hover': {
|
19000 | backgroundColor: light ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)',
|
19001 |
|
19002 | '@media (hover: none)': {
|
19003 | backgroundColor: backgroundColor
|
19004 | }
|
19005 | },
|
19006 | '&$focused': {
|
19007 | backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)'
|
19008 | },
|
19009 | '&$disabled': {
|
19010 | backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'
|
19011 | }
|
19012 | },
|
19013 |
|
19014 |
|
19015 | colorSecondary: {
|
19016 | '&$underline:after': {
|
19017 | borderBottomColor: theme.palette.secondary.main
|
19018 | }
|
19019 | },
|
19020 |
|
19021 |
|
19022 | underline: {
|
19023 | '&:after': {
|
19024 | borderBottom: "2px solid ".concat(theme.palette.primary.main),
|
19025 | left: 0,
|
19026 | bottom: 0,
|
19027 |
|
19028 | content: '""',
|
19029 | position: 'absolute',
|
19030 | right: 0,
|
19031 | transform: 'scaleX(0)',
|
19032 | transition: theme.transitions.create('transform', {
|
19033 | duration: theme.transitions.duration.shorter,
|
19034 | easing: theme.transitions.easing.easeOut
|
19035 | }),
|
19036 | pointerEvents: 'none'
|
19037 |
|
19038 | },
|
19039 | '&$focused:after': {
|
19040 | transform: 'scaleX(1)'
|
19041 | },
|
19042 | '&$error:after': {
|
19043 | borderBottomColor: theme.palette.error.main,
|
19044 | transform: 'scaleX(1)'
|
19045 |
|
19046 | },
|
19047 | '&:before': {
|
19048 | borderBottom: "1px solid ".concat(bottomLineColor),
|
19049 | left: 0,
|
19050 | bottom: 0,
|
19051 |
|
19052 | content: '"\\00a0"',
|
19053 | position: 'absolute',
|
19054 | right: 0,
|
19055 | transition: theme.transitions.create('border-bottom-color', {
|
19056 | duration: theme.transitions.duration.shorter
|
19057 | }),
|
19058 | pointerEvents: 'none'
|
19059 |
|
19060 | },
|
19061 | '&:hover:before': {
|
19062 | borderBottom: "1px solid ".concat(theme.palette.text.primary)
|
19063 | },
|
19064 | '&$disabled:before': {
|
19065 | borderBottomStyle: 'dotted'
|
19066 | }
|
19067 | },
|
19068 |
|
19069 |
|
19070 | focused: {},
|
19071 |
|
19072 |
|
19073 | disabled: {},
|
19074 |
|
19075 |
|
19076 | adornedStart: {
|
19077 | paddingLeft: 12
|
19078 | },
|
19079 |
|
19080 |
|
19081 | adornedEnd: {
|
19082 | paddingRight: 12
|
19083 | },
|
19084 |
|
19085 |
|
19086 | error: {},
|
19087 |
|
19088 |
|
19089 | marginDense: {},
|
19090 |
|
19091 |
|
19092 | multiline: {
|
19093 | padding: '27px 12px 10px',
|
19094 | '&$marginDense': {
|
19095 | paddingTop: 23,
|
19096 | paddingBottom: 6
|
19097 | }
|
19098 | },
|
19099 |
|
19100 |
|
19101 | input: {
|
19102 | padding: '27px 12px 10px',
|
19103 | '&:-webkit-autofill': {
|
19104 | WebkitBoxShadow: theme.palette.type === 'dark' ? '0 0 0 100px #266798 inset' : null,
|
19105 | WebkitTextFillColor: theme.palette.type === 'dark' ? '#fff' : null,
|
19106 | borderTopLeftRadius: 'inherit',
|
19107 | borderTopRightRadius: 'inherit'
|
19108 | }
|
19109 | },
|
19110 |
|
19111 |
|
19112 | inputMarginDense: {
|
19113 | paddingTop: 23,
|
19114 | paddingBottom: 6
|
19115 | },
|
19116 |
|
19117 |
|
19118 | inputHiddenLabel: {
|
19119 | paddingTop: 18,
|
19120 | paddingBottom: 19,
|
19121 | '&$inputMarginDense': {
|
19122 | paddingTop: 10,
|
19123 | paddingBottom: 11
|
19124 | }
|
19125 | },
|
19126 |
|
19127 |
|
19128 | inputMultiline: {
|
19129 | padding: 0
|
19130 | },
|
19131 |
|
19132 |
|
19133 | inputAdornedStart: {
|
19134 | paddingLeft: 0
|
19135 | },
|
19136 |
|
19137 |
|
19138 | inputAdornedEnd: {
|
19139 | paddingRight: 0
|
19140 | }
|
19141 | };
|
19142 | };
|
19143 | var FilledInput = React__default.forwardRef(function FilledInput(props, ref) {
|
19144 | var disableUnderline = props.disableUnderline,
|
19145 | classes = props.classes,
|
19146 | _props$fullWidth = props.fullWidth,
|
19147 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
19148 | _props$inputComponent = props.inputComponent,
|
19149 | inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
|
19150 | _props$multiline = props.multiline,
|
19151 | multiline = _props$multiline === void 0 ? false : _props$multiline,
|
19152 | _props$type = props.type,
|
19153 | type = _props$type === void 0 ? 'text' : _props$type,
|
19154 | other = _objectWithoutProperties(props, ["disableUnderline", "classes", "fullWidth", "inputComponent", "multiline", "type"]);
|
19155 |
|
19156 | return React__default.createElement(InputBase$1, _extends({
|
19157 | classes: _extends({}, classes, {
|
19158 | root: clsx(classes.root, !disableUnderline && classes.underline),
|
19159 | underline: null
|
19160 | }),
|
19161 | fullWidth: fullWidth,
|
19162 | inputComponent: inputComponent,
|
19163 | multiline: multiline,
|
19164 | ref: ref,
|
19165 | type: type
|
19166 | }, other));
|
19167 | });
|
19168 | FilledInput.propTypes = {
|
19169 | |
19170 |
|
19171 |
|
19172 |
|
19173 |
|
19174 | autoComplete: propTypes.string,
|
19175 |
|
19176 | |
19177 |
|
19178 |
|
19179 | autoFocus: propTypes.bool,
|
19180 |
|
19181 | |
19182 |
|
19183 |
|
19184 |
|
19185 | classes: propTypes.object.isRequired,
|
19186 |
|
19187 | |
19188 |
|
19189 |
|
19190 | className: propTypes.string,
|
19191 |
|
19192 | |
19193 |
|
19194 |
|
19195 | color: propTypes.oneOf(['primary', 'secondary']),
|
19196 |
|
19197 | |
19198 |
|
19199 |
|
19200 | defaultValue: propTypes.any,
|
19201 |
|
19202 | |
19203 |
|
19204 |
|
19205 | disabled: propTypes.bool,
|
19206 |
|
19207 | |
19208 |
|
19209 |
|
19210 | disableUnderline: propTypes.bool,
|
19211 |
|
19212 | |
19213 |
|
19214 |
|
19215 | endAdornment: propTypes.node,
|
19216 |
|
19217 | |
19218 |
|
19219 |
|
19220 |
|
19221 | error: propTypes.bool,
|
19222 |
|
19223 | |
19224 |
|
19225 |
|
19226 | fullWidth: propTypes.bool,
|
19227 |
|
19228 | |
19229 |
|
19230 |
|
19231 | id: propTypes.string,
|
19232 |
|
19233 | |
19234 |
|
19235 |
|
19236 |
|
19237 | inputComponent: propTypes.elementType,
|
19238 |
|
19239 | |
19240 |
|
19241 |
|
19242 | inputProps: propTypes.object,
|
19243 |
|
19244 | |
19245 |
|
19246 |
|
19247 | inputRef: refType,
|
19248 |
|
19249 | |
19250 |
|
19251 |
|
19252 |
|
19253 | margin: propTypes.oneOf(['dense', 'none']),
|
19254 |
|
19255 | |
19256 |
|
19257 |
|
19258 | multiline: propTypes.bool,
|
19259 |
|
19260 | |
19261 |
|
19262 |
|
19263 | name: propTypes.string,
|
19264 |
|
19265 | |
19266 |
|
19267 |
|
19268 |
|
19269 |
|
19270 |
|
19271 | onChange: propTypes.func,
|
19272 |
|
19273 | |
19274 |
|
19275 |
|
19276 | placeholder: propTypes.string,
|
19277 |
|
19278 | |
19279 |
|
19280 |
|
19281 |
|
19282 | readOnly: propTypes.bool,
|
19283 |
|
19284 | |
19285 |
|
19286 |
|
19287 | required: propTypes.bool,
|
19288 |
|
19289 | |
19290 |
|
19291 |
|
19292 | rows: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
19293 |
|
19294 | |
19295 |
|
19296 |
|
19297 | rowsMax: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
19298 |
|
19299 | |
19300 |
|
19301 |
|
19302 | startAdornment: propTypes.node,
|
19303 |
|
19304 | |
19305 |
|
19306 |
|
19307 | type: propTypes.string,
|
19308 |
|
19309 | |
19310 |
|
19311 |
|
19312 | value: propTypes.any
|
19313 | } ;
|
19314 | FilledInput.muiName = 'Input';
|
19315 | var FilledInput$1 = withStyles$1(styles$K, {
|
19316 | name: 'MuiFilledInput'
|
19317 | })(FilledInput);
|
19318 |
|
19319 | function isMuiElement(element, muiNames) {
|
19320 | return React__default.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
|
19321 | }
|
19322 |
|
19323 | var styles$L = {
|
19324 |
|
19325 | root: {
|
19326 | display: 'inline-flex',
|
19327 | flexDirection: 'column',
|
19328 | position: 'relative',
|
19329 |
|
19330 | minWidth: 0,
|
19331 | padding: 0,
|
19332 | margin: 0,
|
19333 | border: 0,
|
19334 | verticalAlign: 'top'
|
19335 |
|
19336 | },
|
19337 |
|
19338 |
|
19339 | marginNormal: {
|
19340 | marginTop: 16,
|
19341 | marginBottom: 8
|
19342 | },
|
19343 |
|
19344 |
|
19345 | marginDense: {
|
19346 | marginTop: 8,
|
19347 | marginBottom: 4
|
19348 | },
|
19349 |
|
19350 |
|
19351 | fullWidth: {
|
19352 | width: '100%'
|
19353 | }
|
19354 | };
|
19355 | |
19356 |
|
19357 |
|
19358 |
|
19359 |
|
19360 |
|
19361 |
|
19362 |
|
19363 |
|
19364 |
|
19365 |
|
19366 |
|
19367 |
|
19368 |
|
19369 |
|
19370 |
|
19371 |
|
19372 |
|
19373 |
|
19374 |
|
19375 |
|
19376 |
|
19377 |
|
19378 |
|
19379 | var FormControl = React__default.forwardRef(function FormControl(props, ref) {
|
19380 | var children = props.children,
|
19381 | classes = props.classes,
|
19382 | className = props.className,
|
19383 | _props$color = props.color,
|
19384 | color = _props$color === void 0 ? 'primary' : _props$color,
|
19385 | _props$component = props.component,
|
19386 | Component = _props$component === void 0 ? 'div' : _props$component,
|
19387 | _props$disabled = props.disabled,
|
19388 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
19389 | _props$error = props.error,
|
19390 | error = _props$error === void 0 ? false : _props$error,
|
19391 | _props$fullWidth = props.fullWidth,
|
19392 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
19393 | _props$hiddenLabel = props.hiddenLabel,
|
19394 | hiddenLabel = _props$hiddenLabel === void 0 ? false : _props$hiddenLabel,
|
19395 | _props$margin = props.margin,
|
19396 | margin = _props$margin === void 0 ? 'none' : _props$margin,
|
19397 | _props$required = props.required,
|
19398 | required = _props$required === void 0 ? false : _props$required,
|
19399 | size = props.size,
|
19400 | _props$variant = props.variant,
|
19401 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
19402 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "error", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"]);
|
19403 |
|
19404 | var _React$useState = React__default.useState(function () {
|
19405 |
|
19406 |
|
19407 | var initialAdornedStart = false;
|
19408 |
|
19409 | if (children) {
|
19410 | React__default.Children.forEach(children, function (child) {
|
19411 | if (!isMuiElement(child, ['Input', 'Select'])) {
|
19412 | return;
|
19413 | }
|
19414 |
|
19415 | var input = isMuiElement(child, ['Select']) ? child.props.input : child;
|
19416 |
|
19417 | if (input && isAdornedStart(input.props)) {
|
19418 | initialAdornedStart = true;
|
19419 | }
|
19420 | });
|
19421 | }
|
19422 |
|
19423 | return initialAdornedStart;
|
19424 | }),
|
19425 | adornedStart = _React$useState[0],
|
19426 | setAdornedStart = _React$useState[1];
|
19427 |
|
19428 | var _React$useState2 = React__default.useState(function () {
|
19429 |
|
19430 |
|
19431 | var initialFilled = false;
|
19432 |
|
19433 | if (children) {
|
19434 | React__default.Children.forEach(children, function (child) {
|
19435 | if (!isMuiElement(child, ['Input', 'Select'])) {
|
19436 | return;
|
19437 | }
|
19438 |
|
19439 | if (isFilled(child.props, true)) {
|
19440 | initialFilled = true;
|
19441 | }
|
19442 | });
|
19443 | }
|
19444 |
|
19445 | return initialFilled;
|
19446 | }),
|
19447 | filled = _React$useState2[0],
|
19448 | setFilled = _React$useState2[1];
|
19449 |
|
19450 | var _React$useState3 = React__default.useState(false),
|
19451 | focused = _React$useState3[0],
|
19452 | setFocused = _React$useState3[1];
|
19453 |
|
19454 | if (disabled && focused) {
|
19455 | setFocused(false);
|
19456 | }
|
19457 |
|
19458 | var registerEffect;
|
19459 |
|
19460 | {
|
19461 |
|
19462 | var registeredInput = React__default.useRef(false);
|
19463 |
|
19464 | registerEffect = function registerEffect() {
|
19465 | if (registeredInput.current) {
|
19466 | console.error(['Material-UI: there are multiple InputBase components inside a FormControl.', 'This is not supported. It might cause infinite rendering loops.', 'Only use one InputBase.'].join('\n'));
|
19467 | }
|
19468 |
|
19469 | registeredInput.current = true;
|
19470 | return function () {
|
19471 | registeredInput.current = false;
|
19472 | };
|
19473 | };
|
19474 | }
|
19475 |
|
19476 | var onFilled = React__default.useCallback(function () {
|
19477 | setFilled(true);
|
19478 | }, []);
|
19479 | var onEmpty = React__default.useCallback(function () {
|
19480 | setFilled(false);
|
19481 | }, []);
|
19482 | var childContext = {
|
19483 | adornedStart: adornedStart,
|
19484 | setAdornedStart: setAdornedStart,
|
19485 | color: color,
|
19486 | disabled: disabled,
|
19487 | error: error,
|
19488 | filled: filled,
|
19489 | focused: focused,
|
19490 | hiddenLabel: hiddenLabel,
|
19491 | margin: (size === 'small' ? 'dense' : undefined) || margin,
|
19492 | onBlur: function onBlur() {
|
19493 | setFocused(false);
|
19494 | },
|
19495 | onEmpty: onEmpty,
|
19496 | onFilled: onFilled,
|
19497 | onFocus: function onFocus() {
|
19498 | setFocused(true);
|
19499 | },
|
19500 | registerEffect: registerEffect,
|
19501 | required: required,
|
19502 | variant: variant
|
19503 | };
|
19504 | return React__default.createElement(FormControlContext.Provider, {
|
19505 | value: childContext
|
19506 | }, React__default.createElement(Component, _extends({
|
19507 | className: clsx(classes.root, className, margin !== 'none' && classes["margin".concat(capitalize(margin))], fullWidth && classes.fullWidth),
|
19508 | ref: ref
|
19509 | }, other), children));
|
19510 | });
|
19511 | FormControl.propTypes = {
|
19512 | |
19513 |
|
19514 |
|
19515 | children: propTypes.node,
|
19516 |
|
19517 | |
19518 |
|
19519 |
|
19520 |
|
19521 | classes: propTypes.object.isRequired,
|
19522 |
|
19523 | |
19524 |
|
19525 |
|
19526 | className: propTypes.string,
|
19527 |
|
19528 | |
19529 |
|
19530 |
|
19531 | color: propTypes.oneOf(['primary', 'secondary']),
|
19532 |
|
19533 | |
19534 |
|
19535 |
|
19536 |
|
19537 | component: propTypes.elementType,
|
19538 |
|
19539 | |
19540 |
|
19541 |
|
19542 | disabled: propTypes.bool,
|
19543 |
|
19544 | |
19545 |
|
19546 |
|
19547 | error: propTypes.bool,
|
19548 |
|
19549 | |
19550 |
|
19551 |
|
19552 | fullWidth: propTypes.bool,
|
19553 |
|
19554 | |
19555 |
|
19556 |
|
19557 |
|
19558 |
|
19559 | hiddenLabel: propTypes.bool,
|
19560 |
|
19561 | |
19562 |
|
19563 |
|
19564 | margin: propTypes.oneOf(['none', 'dense', 'normal']),
|
19565 |
|
19566 | |
19567 |
|
19568 |
|
19569 | required: propTypes.bool,
|
19570 |
|
19571 | |
19572 |
|
19573 |
|
19574 | size: propTypes.oneOf(['small', 'medium']),
|
19575 |
|
19576 | |
19577 |
|
19578 |
|
19579 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
19580 | } ;
|
19581 | var FormControl$1 = withStyles$1(styles$L, {
|
19582 | name: 'MuiFormControl'
|
19583 | })(FormControl);
|
19584 |
|
19585 | var styles$M = function styles(theme) {
|
19586 | return {
|
19587 |
|
19588 | root: {
|
19589 | display: 'inline-flex',
|
19590 | alignItems: 'center',
|
19591 | cursor: 'pointer',
|
19592 |
|
19593 | verticalAlign: 'middle',
|
19594 | WebkitTapHighlightColor: 'transparent',
|
19595 | marginLeft: -11,
|
19596 | marginRight: 16,
|
19597 |
|
19598 | '&$disabled': {
|
19599 | cursor: 'default'
|
19600 | }
|
19601 | },
|
19602 |
|
19603 |
|
19604 | labelPlacementStart: {
|
19605 | flexDirection: 'row-reverse',
|
19606 | marginLeft: 16,
|
19607 |
|
19608 | marginRight: -11
|
19609 | },
|
19610 |
|
19611 |
|
19612 | labelPlacementTop: {
|
19613 | flexDirection: 'column-reverse',
|
19614 | marginLeft: 16
|
19615 | },
|
19616 |
|
19617 |
|
19618 | labelPlacementBottom: {
|
19619 | flexDirection: 'column',
|
19620 | marginLeft: 16
|
19621 | },
|
19622 |
|
19623 |
|
19624 | disabled: {},
|
19625 |
|
19626 |
|
19627 | label: {
|
19628 | '&$disabled': {
|
19629 | color: theme.palette.text.disabled
|
19630 | }
|
19631 | }
|
19632 | };
|
19633 | };
|
19634 | |
19635 |
|
19636 |
|
19637 |
|
19638 |
|
19639 | var FormControlLabel = React__default.forwardRef(function FormControlLabel(props, ref) {
|
19640 | var checked = props.checked,
|
19641 | classes = props.classes,
|
19642 | className = props.className,
|
19643 | control = props.control,
|
19644 | disabledProp = props.disabled,
|
19645 | inputRef = props.inputRef,
|
19646 | label = props.label,
|
19647 | _props$labelPlacement = props.labelPlacement,
|
19648 | labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement,
|
19649 | name = props.name,
|
19650 | onChange = props.onChange,
|
19651 | value = props.value,
|
19652 | other = _objectWithoutProperties(props, ["checked", "classes", "className", "control", "disabled", "inputRef", "label", "labelPlacement", "name", "onChange", "value"]);
|
19653 |
|
19654 | var muiFormControl = useFormControl$1();
|
19655 | var disabled = disabledProp;
|
19656 |
|
19657 | if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
|
19658 | disabled = control.props.disabled;
|
19659 | }
|
19660 |
|
19661 | if (typeof disabled === 'undefined' && muiFormControl) {
|
19662 | disabled = muiFormControl.disabled;
|
19663 | }
|
19664 |
|
19665 | var controlProps = {
|
19666 | disabled: disabled
|
19667 | };
|
19668 | ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(function (key) {
|
19669 | if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
|
19670 | controlProps[key] = props[key];
|
19671 | }
|
19672 | });
|
19673 | return React__default.createElement("label", _extends({
|
19674 | className: clsx(classes.root, className, labelPlacement !== 'end' && classes["labelPlacement".concat(capitalize(labelPlacement))], disabled && classes.disabled),
|
19675 | ref: ref
|
19676 | }, other), React__default.cloneElement(control, controlProps), React__default.createElement(Typography$1, {
|
19677 | component: "span",
|
19678 | className: clsx(classes.label, disabled && classes.disabled)
|
19679 | }, label));
|
19680 | });
|
19681 | FormControlLabel.propTypes = {
|
19682 | |
19683 |
|
19684 |
|
19685 | checked: propTypes.bool,
|
19686 |
|
19687 | |
19688 |
|
19689 |
|
19690 |
|
19691 | classes: propTypes.object.isRequired,
|
19692 |
|
19693 | |
19694 |
|
19695 |
|
19696 | className: propTypes.string,
|
19697 |
|
19698 | |
19699 |
|
19700 |
|
19701 | control: propTypes.element,
|
19702 |
|
19703 | |
19704 |
|
19705 |
|
19706 | disabled: propTypes.bool,
|
19707 |
|
19708 | |
19709 |
|
19710 |
|
19711 | inputRef: refType,
|
19712 |
|
19713 | |
19714 |
|
19715 |
|
19716 | label: propTypes.node,
|
19717 |
|
19718 | |
19719 |
|
19720 |
|
19721 | labelPlacement: propTypes.oneOf(['end', 'start', 'top', 'bottom']),
|
19722 |
|
19723 | |
19724 |
|
19725 |
|
19726 | name: propTypes.string,
|
19727 |
|
19728 | |
19729 |
|
19730 |
|
19731 |
|
19732 |
|
19733 |
|
19734 | onChange: propTypes.func,
|
19735 |
|
19736 | |
19737 |
|
19738 |
|
19739 | value: propTypes.any
|
19740 | } ;
|
19741 | var FormControlLabel$1 = withStyles$1(styles$M, {
|
19742 | name: 'MuiFormControlLabel'
|
19743 | })(FormControlLabel);
|
19744 |
|
19745 | var styles$N = {
|
19746 |
|
19747 | root: {
|
19748 | display: 'flex',
|
19749 | flexDirection: 'column',
|
19750 | flexWrap: 'wrap'
|
19751 | },
|
19752 |
|
19753 |
|
19754 | row: {
|
19755 | flexDirection: 'row'
|
19756 | }
|
19757 | };
|
19758 | |
19759 |
|
19760 |
|
19761 |
|
19762 |
|
19763 |
|
19764 | var FormGroup = React__default.forwardRef(function FormGroup(props, ref) {
|
19765 | var classes = props.classes,
|
19766 | className = props.className,
|
19767 | _props$row = props.row,
|
19768 | row = _props$row === void 0 ? false : _props$row,
|
19769 | other = _objectWithoutProperties(props, ["classes", "className", "row"]);
|
19770 |
|
19771 | return React__default.createElement("div", _extends({
|
19772 | className: clsx(classes.root, className, row && classes.row),
|
19773 | ref: ref
|
19774 | }, other));
|
19775 | });
|
19776 | FormGroup.propTypes = {
|
19777 | |
19778 |
|
19779 |
|
19780 | children: propTypes.node,
|
19781 |
|
19782 | |
19783 |
|
19784 |
|
19785 |
|
19786 | classes: propTypes.object.isRequired,
|
19787 |
|
19788 | |
19789 |
|
19790 |
|
19791 | className: propTypes.string,
|
19792 |
|
19793 | |
19794 |
|
19795 |
|
19796 | row: propTypes.bool
|
19797 | } ;
|
19798 | var FormGroup$1 = withStyles$1(styles$N, {
|
19799 | name: 'MuiFormGroup'
|
19800 | })(FormGroup);
|
19801 |
|
19802 | var styles$O = function styles(theme) {
|
19803 | return {
|
19804 |
|
19805 | root: _extends({
|
19806 | color: theme.palette.text.secondary
|
19807 | }, theme.typography.caption, {
|
19808 | textAlign: 'left',
|
19809 | marginTop: 8,
|
19810 | lineHeight: '1em',
|
19811 | minHeight: '1em',
|
19812 | margin: 0,
|
19813 | '&$disabled': {
|
19814 | color: theme.palette.text.disabled
|
19815 | },
|
19816 | '&$error': {
|
19817 | color: theme.palette.error.main
|
19818 | }
|
19819 | }),
|
19820 |
|
19821 |
|
19822 | error: {},
|
19823 |
|
19824 |
|
19825 | disabled: {},
|
19826 |
|
19827 |
|
19828 | marginDense: {
|
19829 | marginTop: 4
|
19830 | },
|
19831 |
|
19832 |
|
19833 | contained: {
|
19834 | margin: '8px 14px 0'
|
19835 | },
|
19836 |
|
19837 |
|
19838 | focused: {},
|
19839 |
|
19840 |
|
19841 | filled: {},
|
19842 |
|
19843 |
|
19844 | required: {}
|
19845 | };
|
19846 | };
|
19847 | var FormHelperText = React__default.forwardRef(function FormHelperText(props, ref) {
|
19848 | var classes = props.classes,
|
19849 | className = props.className,
|
19850 | _props$component = props.component,
|
19851 | Component = _props$component === void 0 ? 'p' : _props$component,
|
19852 | disabled = props.disabled,
|
19853 | error = props.error,
|
19854 | filled = props.filled,
|
19855 | focused = props.focused,
|
19856 | margin = props.margin,
|
19857 | required = props.required,
|
19858 | variant = props.variant,
|
19859 | other = _objectWithoutProperties(props, ["classes", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"]);
|
19860 |
|
19861 | var muiFormControl = useFormControl$1();
|
19862 | var fcs = formControlState({
|
19863 | props: props,
|
19864 | muiFormControl: muiFormControl,
|
19865 | states: ['variant', 'margin', 'disabled', 'error', 'filled', 'focused', 'required']
|
19866 | });
|
19867 | return React__default.createElement(Component, _extends({
|
19868 | className: clsx(classes.root, (fcs.variant === 'filled' || fcs.variant === 'outlined') && classes.contained, className, fcs.disabled && classes.disabled, fcs.error && classes.error, fcs.filled && classes.filled, fcs.focused && classes.focused, fcs.required && classes.required, {
|
19869 | dense: classes.marginDense
|
19870 | }[fcs.margin]),
|
19871 | ref: ref
|
19872 | }, other));
|
19873 | });
|
19874 | FormHelperText.propTypes = {
|
19875 | |
19876 |
|
19877 |
|
19878 | children: propTypes.node,
|
19879 |
|
19880 | |
19881 |
|
19882 |
|
19883 |
|
19884 | classes: propTypes.object.isRequired,
|
19885 |
|
19886 | |
19887 |
|
19888 |
|
19889 | className: propTypes.string,
|
19890 |
|
19891 | |
19892 |
|
19893 |
|
19894 |
|
19895 | component: propTypes.elementType,
|
19896 |
|
19897 | |
19898 |
|
19899 |
|
19900 | disabled: propTypes.bool,
|
19901 |
|
19902 | |
19903 |
|
19904 |
|
19905 | error: propTypes.bool,
|
19906 |
|
19907 | |
19908 |
|
19909 |
|
19910 | filled: propTypes.bool,
|
19911 |
|
19912 | |
19913 |
|
19914 |
|
19915 | focused: propTypes.bool,
|
19916 |
|
19917 | |
19918 |
|
19919 |
|
19920 |
|
19921 | margin: propTypes.oneOf(['dense']),
|
19922 |
|
19923 | |
19924 |
|
19925 |
|
19926 | required: propTypes.bool,
|
19927 |
|
19928 | |
19929 |
|
19930 |
|
19931 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
19932 | } ;
|
19933 | var FormHelperText$1 = withStyles$1(styles$O, {
|
19934 | name: 'MuiFormHelperText'
|
19935 | })(FormHelperText);
|
19936 |
|
19937 | var styles$P = function styles(theme) {
|
19938 | return {
|
19939 |
|
19940 | root: _extends({
|
19941 | color: theme.palette.text.secondary
|
19942 | }, theme.typography.body1, {
|
19943 | lineHeight: 1,
|
19944 | padding: 0,
|
19945 | '&$focused': {
|
19946 | color: theme.palette.primary.main
|
19947 | },
|
19948 | '&$disabled': {
|
19949 | color: theme.palette.text.disabled
|
19950 | },
|
19951 | '&$error': {
|
19952 | color: theme.palette.error.main
|
19953 | }
|
19954 | }),
|
19955 |
|
19956 |
|
19957 | colorSecondary: {
|
19958 | '&$focused': {
|
19959 | color: theme.palette.secondary.main
|
19960 | }
|
19961 | },
|
19962 |
|
19963 |
|
19964 | focused: {},
|
19965 |
|
19966 |
|
19967 | disabled: {},
|
19968 |
|
19969 |
|
19970 | error: {},
|
19971 |
|
19972 |
|
19973 | filled: {},
|
19974 |
|
19975 |
|
19976 | required: {},
|
19977 |
|
19978 |
|
19979 | asterisk: {
|
19980 | '&$error': {
|
19981 | color: theme.palette.error.main
|
19982 | }
|
19983 | }
|
19984 | };
|
19985 | };
|
19986 | var FormLabel = React__default.forwardRef(function FormLabel(props, ref) {
|
19987 | var children = props.children,
|
19988 | classes = props.classes,
|
19989 | className = props.className,
|
19990 | color = props.color,
|
19991 | _props$component = props.component,
|
19992 | Component = _props$component === void 0 ? 'label' : _props$component,
|
19993 | disabled = props.disabled,
|
19994 | error = props.error,
|
19995 | filled = props.filled,
|
19996 | focused = props.focused,
|
19997 | required = props.required,
|
19998 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "error", "filled", "focused", "required"]);
|
19999 |
|
20000 | var muiFormControl = useFormControl$1();
|
20001 | var fcs = formControlState({
|
20002 | props: props,
|
20003 | muiFormControl: muiFormControl,
|
20004 | states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
|
20005 | });
|
20006 | return React__default.createElement(Component, _extends({
|
20007 | className: clsx(classes.root, classes["color".concat(capitalize(fcs.color || 'primary'))], className, fcs.disabled && classes.disabled, fcs.error && classes.error, fcs.filled && classes.filled, fcs.focused && classes.focused, fcs.required && classes.required),
|
20008 | ref: ref
|
20009 | }, other), children, fcs.required && React__default.createElement("span", {
|
20010 | className: clsx(classes.asterisk, fcs.error && classes.error)
|
20011 | }, "\u2009", '*'));
|
20012 | });
|
20013 | FormLabel.propTypes = {
|
20014 | |
20015 |
|
20016 |
|
20017 | children: propTypes.node,
|
20018 |
|
20019 | |
20020 |
|
20021 |
|
20022 |
|
20023 | classes: propTypes.object.isRequired,
|
20024 |
|
20025 | |
20026 |
|
20027 |
|
20028 | className: propTypes.string,
|
20029 |
|
20030 | |
20031 |
|
20032 |
|
20033 | color: propTypes.oneOf(['primary', 'secondary']),
|
20034 |
|
20035 | |
20036 |
|
20037 |
|
20038 |
|
20039 | component: propTypes.elementType,
|
20040 |
|
20041 | |
20042 |
|
20043 |
|
20044 | disabled: propTypes.bool,
|
20045 |
|
20046 | |
20047 |
|
20048 |
|
20049 | error: propTypes.bool,
|
20050 |
|
20051 | |
20052 |
|
20053 |
|
20054 | filled: propTypes.bool,
|
20055 |
|
20056 | |
20057 |
|
20058 |
|
20059 | focused: propTypes.bool,
|
20060 |
|
20061 | |
20062 |
|
20063 |
|
20064 | required: propTypes.bool
|
20065 | } ;
|
20066 | var FormLabel$1 = withStyles$1(styles$P, {
|
20067 | name: 'MuiFormLabel'
|
20068 | })(FormLabel);
|
20069 |
|
20070 | function requirePropFactory(componentNameInError) {
|
20071 |
|
20072 | var requireProp = function requireProp(requiredProp) {
|
20073 | return function (props, propName, componentName, location, propFullName) {
|
20074 | var propFullNameSafe = propFullName || propName;
|
20075 |
|
20076 | if (typeof props[propName] !== 'undefined' && !props[requiredProp]) {
|
20077 | return new Error("The prop `".concat(propFullNameSafe, "` of ") + "`".concat(componentNameInError, "` must be used on `").concat(requiredProp, "`."));
|
20078 | }
|
20079 |
|
20080 | return null;
|
20081 | };
|
20082 | };
|
20083 |
|
20084 | return requireProp;
|
20085 | }
|
20086 |
|
20087 | var SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
20088 | var GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
20089 |
|
20090 | function generateGrid(globalStyles, theme, breakpoint) {
|
20091 | var styles = {};
|
20092 | GRID_SIZES.forEach(function (size) {
|
20093 | var key = "grid-".concat(breakpoint, "-").concat(size);
|
20094 |
|
20095 | if (size === true) {
|
20096 |
|
20097 | styles[key] = {
|
20098 | flexBasis: 0,
|
20099 | flexGrow: 1,
|
20100 | maxWidth: '100%'
|
20101 | };
|
20102 | return;
|
20103 | }
|
20104 |
|
20105 | if (size === 'auto') {
|
20106 | styles[key] = {
|
20107 | flexBasis: 'auto',
|
20108 | flexGrow: 0,
|
20109 | maxWidth: 'none'
|
20110 | };
|
20111 | return;
|
20112 | }
|
20113 |
|
20114 |
|
20115 | var width = "".concat(Math.round(size / 12 * 10e7) / 10e5, "%");
|
20116 |
|
20117 |
|
20118 | styles[key] = {
|
20119 | flexBasis: width,
|
20120 | flexGrow: 0,
|
20121 | maxWidth: width
|
20122 | };
|
20123 | });
|
20124 |
|
20125 | if (breakpoint === 'xs') {
|
20126 | _extends(globalStyles, styles);
|
20127 | } else {
|
20128 | globalStyles[theme.breakpoints.up(breakpoint)] = styles;
|
20129 | }
|
20130 | }
|
20131 |
|
20132 | function getOffset(val) {
|
20133 | var div = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
|
20134 | var parse = parseFloat(val);
|
20135 | return "".concat(parse / div).concat(String(val).replace(String(parse), '') || 'px');
|
20136 | }
|
20137 |
|
20138 | function generateGutter(theme, breakpoint) {
|
20139 | var styles = {};
|
20140 | SPACINGS.forEach(function (spacing) {
|
20141 | var themeSpacing = theme.spacing(spacing);
|
20142 |
|
20143 | if (themeSpacing === 0) {
|
20144 | return;
|
20145 | }
|
20146 |
|
20147 | styles["spacing-".concat(breakpoint, "-").concat(spacing)] = {
|
20148 | margin: "-".concat(getOffset(themeSpacing, 2)),
|
20149 | width: "calc(100% + ".concat(getOffset(themeSpacing), ")"),
|
20150 | '& > $item': {
|
20151 | padding: getOffset(themeSpacing, 2)
|
20152 | }
|
20153 | };
|
20154 | });
|
20155 | return styles;
|
20156 | }
|
20157 |
|
20158 |
|
20159 |
|
20160 |
|
20161 |
|
20162 |
|
20163 |
|
20164 | var styles$Q = function styles(theme) {
|
20165 | return _extends({
|
20166 |
|
20167 | root: {},
|
20168 |
|
20169 |
|
20170 | container: {
|
20171 | boxSizing: 'border-box',
|
20172 | display: 'flex',
|
20173 | flexWrap: 'wrap',
|
20174 | width: '100%'
|
20175 | },
|
20176 |
|
20177 |
|
20178 | item: {
|
20179 | boxSizing: 'border-box',
|
20180 | margin: '0'
|
20181 |
|
20182 | },
|
20183 |
|
20184 |
|
20185 | zeroMinWidth: {
|
20186 | minWidth: 0
|
20187 | },
|
20188 |
|
20189 |
|
20190 | 'direction-xs-column': {
|
20191 | flexDirection: 'column'
|
20192 | },
|
20193 |
|
20194 |
|
20195 | 'direction-xs-column-reverse': {
|
20196 | flexDirection: 'column-reverse'
|
20197 | },
|
20198 |
|
20199 |
|
20200 | 'direction-xs-row-reverse': {
|
20201 | flexDirection: 'row-reverse'
|
20202 | },
|
20203 |
|
20204 |
|
20205 | 'wrap-xs-nowrap': {
|
20206 | flexWrap: 'nowrap'
|
20207 | },
|
20208 |
|
20209 |
|
20210 | 'wrap-xs-wrap-reverse': {
|
20211 | flexWrap: 'wrap-reverse'
|
20212 | },
|
20213 |
|
20214 |
|
20215 | 'align-items-xs-center': {
|
20216 | alignItems: 'center'
|
20217 | },
|
20218 |
|
20219 |
|
20220 | 'align-items-xs-flex-start': {
|
20221 | alignItems: 'flex-start'
|
20222 | },
|
20223 |
|
20224 |
|
20225 | 'align-items-xs-flex-end': {
|
20226 | alignItems: 'flex-end'
|
20227 | },
|
20228 |
|
20229 |
|
20230 | 'align-items-xs-baseline': {
|
20231 | alignItems: 'baseline'
|
20232 | },
|
20233 |
|
20234 |
|
20235 | 'align-content-xs-center': {
|
20236 | alignContent: 'center'
|
20237 | },
|
20238 |
|
20239 |
|
20240 | 'align-content-xs-flex-start': {
|
20241 | alignContent: 'flex-start'
|
20242 | },
|
20243 |
|
20244 |
|
20245 | 'align-content-xs-flex-end': {
|
20246 | alignContent: 'flex-end'
|
20247 | },
|
20248 |
|
20249 |
|
20250 | 'align-content-xs-space-between': {
|
20251 | alignContent: 'space-between'
|
20252 | },
|
20253 |
|
20254 |
|
20255 | 'align-content-xs-space-around': {
|
20256 | alignContent: 'space-around'
|
20257 | },
|
20258 |
|
20259 |
|
20260 | 'justify-xs-center': {
|
20261 | justifyContent: 'center'
|
20262 | },
|
20263 |
|
20264 |
|
20265 | 'justify-xs-flex-end': {
|
20266 | justifyContent: 'flex-end'
|
20267 | },
|
20268 |
|
20269 |
|
20270 | 'justify-xs-space-between': {
|
20271 | justifyContent: 'space-between'
|
20272 | },
|
20273 |
|
20274 |
|
20275 | 'justify-xs-space-around': {
|
20276 | justifyContent: 'space-around'
|
20277 | },
|
20278 |
|
20279 |
|
20280 | 'justify-xs-space-evenly': {
|
20281 | justifyContent: 'space-evenly'
|
20282 | }
|
20283 | }, generateGutter(theme, 'xs'), {}, theme.breakpoints.keys.reduce(function (accumulator, key) {
|
20284 |
|
20285 | generateGrid(accumulator, theme, key);
|
20286 | return accumulator;
|
20287 | }, {}));
|
20288 | };
|
20289 | var Grid = React__default.forwardRef(function Grid(props, ref) {
|
20290 | var _props$alignContent = props.alignContent,
|
20291 | alignContent = _props$alignContent === void 0 ? 'stretch' : _props$alignContent,
|
20292 | _props$alignItems = props.alignItems,
|
20293 | alignItems = _props$alignItems === void 0 ? 'stretch' : _props$alignItems,
|
20294 | classes = props.classes,
|
20295 | classNameProp = props.className,
|
20296 | _props$component = props.component,
|
20297 | Component = _props$component === void 0 ? 'div' : _props$component,
|
20298 | _props$container = props.container,
|
20299 | container = _props$container === void 0 ? false : _props$container,
|
20300 | _props$direction = props.direction,
|
20301 | direction = _props$direction === void 0 ? 'row' : _props$direction,
|
20302 | _props$item = props.item,
|
20303 | item = _props$item === void 0 ? false : _props$item,
|
20304 | _props$justify = props.justify,
|
20305 | justify = _props$justify === void 0 ? 'flex-start' : _props$justify,
|
20306 | _props$lg = props.lg,
|
20307 | lg = _props$lg === void 0 ? false : _props$lg,
|
20308 | _props$md = props.md,
|
20309 | md = _props$md === void 0 ? false : _props$md,
|
20310 | _props$sm = props.sm,
|
20311 | sm = _props$sm === void 0 ? false : _props$sm,
|
20312 | _props$spacing = props.spacing,
|
20313 | spacing = _props$spacing === void 0 ? 0 : _props$spacing,
|
20314 | _props$wrap = props.wrap,
|
20315 | wrap = _props$wrap === void 0 ? 'wrap' : _props$wrap,
|
20316 | _props$xl = props.xl,
|
20317 | xl = _props$xl === void 0 ? false : _props$xl,
|
20318 | _props$xs = props.xs,
|
20319 | xs = _props$xs === void 0 ? false : _props$xs,
|
20320 | _props$zeroMinWidth = props.zeroMinWidth,
|
20321 | zeroMinWidth = _props$zeroMinWidth === void 0 ? false : _props$zeroMinWidth,
|
20322 | other = _objectWithoutProperties(props, ["alignContent", "alignItems", "classes", "className", "component", "container", "direction", "item", "justify", "lg", "md", "sm", "spacing", "wrap", "xl", "xs", "zeroMinWidth"]);
|
20323 |
|
20324 | var className = clsx(classes.root, classNameProp, container && [classes.container, spacing !== 0 && classes["spacing-xs-".concat(String(spacing))]], item && classes.item, zeroMinWidth && classes.zeroMinWidth, direction !== 'row' && classes["direction-xs-".concat(String(direction))], wrap !== 'wrap' && classes["wrap-xs-".concat(String(wrap))], alignItems !== 'stretch' && classes["align-items-xs-".concat(String(alignItems))], alignContent !== 'stretch' && classes["align-content-xs-".concat(String(alignContent))], justify !== 'flex-start' && classes["justify-xs-".concat(String(justify))], xs !== false && classes["grid-xs-".concat(String(xs))], sm !== false && classes["grid-sm-".concat(String(sm))], md !== false && classes["grid-md-".concat(String(md))], lg !== false && classes["grid-lg-".concat(String(lg))], xl !== false && classes["grid-xl-".concat(String(xl))]);
|
20325 | return React__default.createElement(Component, _extends({
|
20326 | className: className,
|
20327 | ref: ref
|
20328 | }, other));
|
20329 | });
|
20330 | Grid.propTypes = {
|
20331 | |
20332 |
|
20333 |
|
20334 |
|
20335 | alignContent: propTypes.oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around']),
|
20336 |
|
20337 | |
20338 |
|
20339 |
|
20340 |
|
20341 | alignItems: propTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
|
20342 |
|
20343 | |
20344 |
|
20345 |
|
20346 | children: propTypes.node,
|
20347 |
|
20348 | |
20349 |
|
20350 |
|
20351 |
|
20352 | classes: propTypes.object.isRequired,
|
20353 |
|
20354 | |
20355 |
|
20356 |
|
20357 | className: propTypes.string,
|
20358 |
|
20359 | |
20360 |
|
20361 |
|
20362 |
|
20363 | component: propTypes.elementType,
|
20364 |
|
20365 | |
20366 |
|
20367 |
|
20368 |
|
20369 | container: propTypes.bool,
|
20370 |
|
20371 | |
20372 |
|
20373 |
|
20374 |
|
20375 | direction: propTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
|
20376 |
|
20377 | |
20378 |
|
20379 |
|
20380 |
|
20381 | item: propTypes.bool,
|
20382 |
|
20383 | |
20384 |
|
20385 |
|
20386 |
|
20387 | justify: propTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly']),
|
20388 |
|
20389 | |
20390 |
|
20391 |
|
20392 |
|
20393 | lg: propTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
20394 |
|
20395 | |
20396 |
|
20397 |
|
20398 |
|
20399 | md: propTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
20400 |
|
20401 | |
20402 |
|
20403 |
|
20404 |
|
20405 | sm: propTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
20406 |
|
20407 | |
20408 |
|
20409 |
|
20410 |
|
20411 | spacing: propTypes.oneOf(SPACINGS),
|
20412 |
|
20413 | |
20414 |
|
20415 |
|
20416 |
|
20417 | wrap: propTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
|
20418 |
|
20419 | |
20420 |
|
20421 |
|
20422 |
|
20423 | xl: propTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
20424 |
|
20425 | |
20426 |
|
20427 |
|
20428 |
|
20429 | xs: propTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
20430 |
|
20431 | |
20432 |
|
20433 |
|
20434 |
|
20435 | zeroMinWidth: propTypes.bool
|
20436 | } ;
|
20437 | var StyledGrid = withStyles$1(styles$Q, {
|
20438 | name: 'MuiGrid'
|
20439 | })(Grid);
|
20440 |
|
20441 | {
|
20442 | var requireProp = requirePropFactory('Grid');
|
20443 | StyledGrid.propTypes = _extends({}, StyledGrid.propTypes, {
|
20444 | alignContent: requireProp('container'),
|
20445 | alignItems: requireProp('container'),
|
20446 | direction: requireProp('container'),
|
20447 | justify: requireProp('container'),
|
20448 | lg: requireProp('item'),
|
20449 | md: requireProp('item'),
|
20450 | sm: requireProp('item'),
|
20451 | spacing: requireProp('container'),
|
20452 | wrap: requireProp('container'),
|
20453 | xs: requireProp('item'),
|
20454 | zeroMinWidth: requireProp('item')
|
20455 | });
|
20456 | }
|
20457 |
|
20458 | var styles$R = {
|
20459 |
|
20460 | root: {
|
20461 | display: 'flex',
|
20462 | flexWrap: 'wrap',
|
20463 | overflowY: 'auto',
|
20464 | listStyle: 'none',
|
20465 | padding: 0,
|
20466 | WebkitOverflowScrolling: 'touch'
|
20467 |
|
20468 | }
|
20469 | };
|
20470 | var GridList = React__default.forwardRef(function GridList(props, ref) {
|
20471 | var _props$cellHeight = props.cellHeight,
|
20472 | cellHeight = _props$cellHeight === void 0 ? 180 : _props$cellHeight,
|
20473 | children = props.children,
|
20474 | classes = props.classes,
|
20475 | className = props.className,
|
20476 | _props$cols = props.cols,
|
20477 | cols = _props$cols === void 0 ? 2 : _props$cols,
|
20478 | _props$component = props.component,
|
20479 | Component = _props$component === void 0 ? 'ul' : _props$component,
|
20480 | _props$spacing = props.spacing,
|
20481 | spacing = _props$spacing === void 0 ? 4 : _props$spacing,
|
20482 | style = props.style,
|
20483 | other = _objectWithoutProperties(props, ["cellHeight", "children", "classes", "className", "cols", "component", "spacing", "style"]);
|
20484 |
|
20485 | return React__default.createElement(Component, _extends({
|
20486 | className: clsx(classes.root, className),
|
20487 | ref: ref,
|
20488 | style: _extends({
|
20489 | margin: -spacing / 2
|
20490 | }, style)
|
20491 | }, other), React__default.Children.map(children, function (child) {
|
20492 | if (!React__default.isValidElement(child)) {
|
20493 | return null;
|
20494 | }
|
20495 |
|
20496 | {
|
20497 | if (reactIs_2(child)) {
|
20498 | console.error(["Material-UI: the GridList component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
20499 | }
|
20500 | }
|
20501 |
|
20502 | var childCols = child.props.cols || 1;
|
20503 | var childRows = child.props.rows || 1;
|
20504 | return React__default.cloneElement(child, {
|
20505 | style: _extends({
|
20506 | width: "".concat(100 / cols * childCols, "%"),
|
20507 | height: cellHeight === 'auto' ? 'auto' : cellHeight * childRows + spacing,
|
20508 | padding: spacing / 2
|
20509 | }, child.props.style)
|
20510 | });
|
20511 | }));
|
20512 | });
|
20513 | GridList.propTypes = {
|
20514 | |
20515 |
|
20516 |
|
20517 |
|
20518 | cellHeight: propTypes.oneOfType([propTypes.number, propTypes.oneOf(['auto'])]),
|
20519 |
|
20520 | |
20521 |
|
20522 |
|
20523 | children: propTypes.node.isRequired,
|
20524 |
|
20525 | |
20526 |
|
20527 |
|
20528 |
|
20529 | classes: propTypes.object.isRequired,
|
20530 |
|
20531 | |
20532 |
|
20533 |
|
20534 | className: propTypes.string,
|
20535 |
|
20536 | |
20537 |
|
20538 |
|
20539 | cols: propTypes.number,
|
20540 |
|
20541 | |
20542 |
|
20543 |
|
20544 |
|
20545 | component: propTypes.elementType,
|
20546 |
|
20547 | |
20548 |
|
20549 |
|
20550 | spacing: propTypes.number,
|
20551 |
|
20552 | |
20553 |
|
20554 |
|
20555 | style: propTypes.object
|
20556 | } ;
|
20557 | var GridList$1 = withStyles$1(styles$R, {
|
20558 | name: 'MuiGridList'
|
20559 | })(GridList);
|
20560 |
|
20561 | var styles$S = {
|
20562 |
|
20563 | root: {
|
20564 | boxSizing: 'border-box',
|
20565 | flexShrink: 0
|
20566 | },
|
20567 |
|
20568 |
|
20569 | tile: {
|
20570 | position: 'relative',
|
20571 | display: 'block',
|
20572 |
|
20573 | height: '100%',
|
20574 | overflow: 'hidden'
|
20575 | },
|
20576 |
|
20577 |
|
20578 | imgFullHeight: {
|
20579 | height: '100%',
|
20580 | transform: 'translateX(-50%)',
|
20581 | position: 'relative',
|
20582 | left: '50%'
|
20583 | },
|
20584 |
|
20585 |
|
20586 | imgFullWidth: {
|
20587 | width: '100%',
|
20588 | position: 'relative',
|
20589 | transform: 'translateY(-50%)',
|
20590 | top: '50%'
|
20591 | }
|
20592 | };
|
20593 |
|
20594 | var fit = function fit(imgEl, classes) {
|
20595 | if (!imgEl || !imgEl.complete) {
|
20596 | return;
|
20597 | }
|
20598 |
|
20599 | if (imgEl.width / imgEl.height > imgEl.parentElement.offsetWidth / imgEl.parentElement.offsetHeight) {
|
20600 | var _imgEl$classList, _imgEl$classList2;
|
20601 |
|
20602 | (_imgEl$classList = imgEl.classList).remove.apply(_imgEl$classList, _toConsumableArray(classes.imgFullWidth.split(' ')));
|
20603 |
|
20604 | (_imgEl$classList2 = imgEl.classList).add.apply(_imgEl$classList2, _toConsumableArray(classes.imgFullHeight.split(' ')));
|
20605 | } else {
|
20606 | var _imgEl$classList3, _imgEl$classList4;
|
20607 |
|
20608 | (_imgEl$classList3 = imgEl.classList).remove.apply(_imgEl$classList3, _toConsumableArray(classes.imgFullHeight.split(' ')));
|
20609 |
|
20610 | (_imgEl$classList4 = imgEl.classList).add.apply(_imgEl$classList4, _toConsumableArray(classes.imgFullWidth.split(' ')));
|
20611 | }
|
20612 | };
|
20613 |
|
20614 | function ensureImageCover(imgEl, classes) {
|
20615 | if (!imgEl) {
|
20616 | return;
|
20617 | }
|
20618 |
|
20619 | if (imgEl.complete) {
|
20620 | fit(imgEl, classes);
|
20621 | } else {
|
20622 | imgEl.addEventListener('load', function () {
|
20623 | fit(imgEl, classes);
|
20624 | });
|
20625 | }
|
20626 | }
|
20627 |
|
20628 | var GridListTile = React__default.forwardRef(function GridListTile(props, ref) {
|
20629 |
|
20630 | var children = props.children,
|
20631 | classes = props.classes,
|
20632 | className = props.className,
|
20633 | _props$cols = props.cols,
|
20634 | _props$component = props.component,
|
20635 | Component = _props$component === void 0 ? 'li' : _props$component,
|
20636 | _props$rows = props.rows,
|
20637 | other = _objectWithoutProperties(props, ["children", "classes", "className", "cols", "component", "rows"]);
|
20638 |
|
20639 | var imgRef = React__default.useRef(null);
|
20640 | React__default.useEffect(function () {
|
20641 | ensureImageCover(imgRef.current, classes);
|
20642 | });
|
20643 | React__default.useEffect(function () {
|
20644 | var handleResize = debounce(function () {
|
20645 | fit(imgRef.current, classes);
|
20646 | });
|
20647 | window.addEventListener('resize', handleResize);
|
20648 | return function () {
|
20649 | handleResize.clear();
|
20650 | window.removeEventListener('resize', handleResize);
|
20651 | };
|
20652 | }, [classes]);
|
20653 | return React__default.createElement(Component, _extends({
|
20654 | className: clsx(classes.root, className),
|
20655 | ref: ref
|
20656 | }, other), React__default.createElement("div", {
|
20657 | className: classes.tile
|
20658 | }, React__default.Children.map(children, function (child) {
|
20659 | if (!React__default.isValidElement(child)) {
|
20660 | return null;
|
20661 | }
|
20662 |
|
20663 | if (child.type === 'img' || isMuiElement(child, ['Image'])) {
|
20664 | return React__default.cloneElement(child, {
|
20665 | ref: imgRef
|
20666 | });
|
20667 | }
|
20668 |
|
20669 | return child;
|
20670 | })));
|
20671 | });
|
20672 | GridListTile.propTypes = {
|
20673 | |
20674 |
|
20675 |
|
20676 |
|
20677 |
|
20678 | children: propTypes.node,
|
20679 |
|
20680 | |
20681 |
|
20682 |
|
20683 |
|
20684 | classes: propTypes.object.isRequired,
|
20685 |
|
20686 | |
20687 |
|
20688 |
|
20689 | className: propTypes.string,
|
20690 |
|
20691 | |
20692 |
|
20693 |
|
20694 | cols: propTypes.number,
|
20695 |
|
20696 | |
20697 |
|
20698 |
|
20699 |
|
20700 | component: propTypes.elementType,
|
20701 |
|
20702 | |
20703 |
|
20704 |
|
20705 | rows: propTypes.number
|
20706 | } ;
|
20707 | var GridListTile$1 = withStyles$1(styles$S, {
|
20708 | name: 'MuiGridListTile'
|
20709 | })(GridListTile);
|
20710 |
|
20711 | var styles$T = function styles(theme) {
|
20712 | return {
|
20713 |
|
20714 | root: {
|
20715 | position: 'absolute',
|
20716 | left: 0,
|
20717 | right: 0,
|
20718 | height: 48,
|
20719 | background: 'rgba(0, 0, 0, 0.5)',
|
20720 | display: 'flex',
|
20721 | alignItems: 'center',
|
20722 | fontFamily: theme.typography.fontFamily
|
20723 | },
|
20724 |
|
20725 |
|
20726 | titlePositionBottom: {
|
20727 | bottom: 0
|
20728 | },
|
20729 |
|
20730 |
|
20731 | titlePositionTop: {
|
20732 | top: 0
|
20733 | },
|
20734 |
|
20735 |
|
20736 | rootSubtitle: {
|
20737 | height: 68
|
20738 | },
|
20739 |
|
20740 |
|
20741 | titleWrap: {
|
20742 | flexGrow: 1,
|
20743 | marginLeft: 16,
|
20744 | marginRight: 16,
|
20745 | color: theme.palette.common.white,
|
20746 | overflow: 'hidden'
|
20747 | },
|
20748 |
|
20749 |
|
20750 | titleWrapActionPosLeft: {
|
20751 | marginLeft: 0
|
20752 | },
|
20753 |
|
20754 |
|
20755 | titleWrapActionPosRight: {
|
20756 | marginRight: 0
|
20757 | },
|
20758 |
|
20759 |
|
20760 | title: {
|
20761 | fontSize: theme.typography.pxToRem(16),
|
20762 | lineHeight: '24px',
|
20763 | textOverflow: 'ellipsis',
|
20764 | overflow: 'hidden',
|
20765 | whiteSpace: 'nowrap'
|
20766 | },
|
20767 |
|
20768 |
|
20769 | subtitle: {
|
20770 | fontSize: theme.typography.pxToRem(12),
|
20771 | lineHeight: 1,
|
20772 | textOverflow: 'ellipsis',
|
20773 | overflow: 'hidden',
|
20774 | whiteSpace: 'nowrap'
|
20775 | },
|
20776 |
|
20777 |
|
20778 | actionIcon: {},
|
20779 |
|
20780 |
|
20781 | actionIconActionPosLeft: {
|
20782 | order: -1
|
20783 | }
|
20784 | };
|
20785 | };
|
20786 | var GridListTileBar = React__default.forwardRef(function GridListTileBar(props, ref) {
|
20787 | var actionIcon = props.actionIcon,
|
20788 | _props$actionPosition = props.actionPosition,
|
20789 | actionPosition = _props$actionPosition === void 0 ? 'right' : _props$actionPosition,
|
20790 | classes = props.classes,
|
20791 | className = props.className,
|
20792 | subtitle = props.subtitle,
|
20793 | title = props.title,
|
20794 | _props$titlePosition = props.titlePosition,
|
20795 | titlePosition = _props$titlePosition === void 0 ? 'bottom' : _props$titlePosition,
|
20796 | other = _objectWithoutProperties(props, ["actionIcon", "actionPosition", "classes", "className", "subtitle", "title", "titlePosition"]);
|
20797 |
|
20798 | var actionPos = actionIcon && actionPosition;
|
20799 | return React__default.createElement("div", _extends({
|
20800 | className: clsx(classes.root, className, titlePosition === 'top' ? classes.titlePositionTop : classes.titlePositionBottom, subtitle && classes.rootSubtitle),
|
20801 | ref: ref
|
20802 | }, other), React__default.createElement("div", {
|
20803 | className: clsx(classes.titleWrap, {
|
20804 | left: classes.titleWrapActionPosLeft,
|
20805 | right: classes.titleWrapActionPosRight
|
20806 | }[actionPos])
|
20807 | }, React__default.createElement("div", {
|
20808 | className: classes.title
|
20809 | }, title), subtitle ? React__default.createElement("div", {
|
20810 | className: classes.subtitle
|
20811 | }, subtitle) : null), actionIcon ? React__default.createElement("div", {
|
20812 | className: clsx(classes.actionIcon, {
|
20813 | left: classes.actionIconActionPosLeft
|
20814 | }[actionPos])
|
20815 | }, actionIcon) : null);
|
20816 | });
|
20817 | GridListTileBar.propTypes = {
|
20818 | |
20819 |
|
20820 |
|
20821 |
|
20822 | actionIcon: propTypes.node,
|
20823 |
|
20824 | |
20825 |
|
20826 |
|
20827 | actionPosition: propTypes.oneOf(['left', 'right']),
|
20828 |
|
20829 | |
20830 |
|
20831 |
|
20832 |
|
20833 | classes: propTypes.object.isRequired,
|
20834 |
|
20835 | |
20836 |
|
20837 |
|
20838 | className: propTypes.string,
|
20839 |
|
20840 | |
20841 |
|
20842 |
|
20843 | subtitle: propTypes.node,
|
20844 |
|
20845 | |
20846 |
|
20847 |
|
20848 | title: propTypes.node,
|
20849 |
|
20850 | |
20851 |
|
20852 |
|
20853 | titlePosition: propTypes.oneOf(['top', 'bottom'])
|
20854 | } ;
|
20855 | var GridListTileBar$1 = withStyles$1(styles$T, {
|
20856 | name: 'MuiGridListTileBar'
|
20857 | })(GridListTileBar);
|
20858 |
|
20859 | function getScale(value) {
|
20860 | return "scale(".concat(value, ", ").concat(Math.pow(value, 2), ")");
|
20861 | }
|
20862 |
|
20863 | var styles$U = {
|
20864 | entering: {
|
20865 | opacity: 1,
|
20866 | transform: getScale(1)
|
20867 | },
|
20868 | entered: {
|
20869 | opacity: 1,
|
20870 | transform: 'none'
|
20871 | }
|
20872 | };
|
20873 | |
20874 |
|
20875 |
|
20876 |
|
20877 |
|
20878 |
|
20879 | var Grow = React__default.forwardRef(function Grow(props, ref) {
|
20880 | var children = props.children,
|
20881 | inProp = props.in,
|
20882 | onEnter = props.onEnter,
|
20883 | onExit = props.onExit,
|
20884 | style = props.style,
|
20885 | _props$timeout = props.timeout,
|
20886 | timeout = _props$timeout === void 0 ? 'auto' : _props$timeout,
|
20887 | other = _objectWithoutProperties(props, ["children", "in", "onEnter", "onExit", "style", "timeout"]);
|
20888 |
|
20889 | var timer = React__default.useRef();
|
20890 | var autoTimeout = React__default.useRef();
|
20891 | var handleRef = useForkRef(children.ref, ref);
|
20892 | var theme = useTheme$1();
|
20893 |
|
20894 | var handleEnter = function handleEnter(node, isAppearing) {
|
20895 | reflow(node);
|
20896 |
|
20897 | var _getTransitionProps = getTransitionProps({
|
20898 | style: style,
|
20899 | timeout: timeout
|
20900 | }, {
|
20901 | mode: 'enter'
|
20902 | }),
|
20903 | transitionDuration = _getTransitionProps.duration,
|
20904 | delay = _getTransitionProps.delay;
|
20905 |
|
20906 | var duration;
|
20907 |
|
20908 | if (timeout === 'auto') {
|
20909 | duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
|
20910 | autoTimeout.current = duration;
|
20911 | } else {
|
20912 | duration = transitionDuration;
|
20913 | }
|
20914 |
|
20915 | node.style.transition = [theme.transitions.create('opacity', {
|
20916 | duration: duration,
|
20917 | delay: delay
|
20918 | }), theme.transitions.create('transform', {
|
20919 | duration: duration * 0.666,
|
20920 | delay: delay
|
20921 | })].join(',');
|
20922 |
|
20923 | if (onEnter) {
|
20924 | onEnter(node, isAppearing);
|
20925 | }
|
20926 | };
|
20927 |
|
20928 | var handleExit = function handleExit(node) {
|
20929 | var _getTransitionProps2 = getTransitionProps({
|
20930 | style: style,
|
20931 | timeout: timeout
|
20932 | }, {
|
20933 | mode: 'exit'
|
20934 | }),
|
20935 | transitionDuration = _getTransitionProps2.duration,
|
20936 | delay = _getTransitionProps2.delay;
|
20937 |
|
20938 | var duration;
|
20939 |
|
20940 | if (timeout === 'auto') {
|
20941 | duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
|
20942 | autoTimeout.current = duration;
|
20943 | } else {
|
20944 | duration = transitionDuration;
|
20945 | }
|
20946 |
|
20947 | node.style.transition = [theme.transitions.create('opacity', {
|
20948 | duration: duration,
|
20949 | delay: delay
|
20950 | }), theme.transitions.create('transform', {
|
20951 | duration: duration * 0.666,
|
20952 | delay: delay || duration * 0.333
|
20953 | })].join(',');
|
20954 | node.style.opacity = '0';
|
20955 | node.style.transform = getScale(0.75);
|
20956 |
|
20957 | if (onExit) {
|
20958 | onExit(node);
|
20959 | }
|
20960 | };
|
20961 |
|
20962 | var addEndListener = function addEndListener(_, next) {
|
20963 | if (timeout === 'auto') {
|
20964 | timer.current = setTimeout(next, autoTimeout.current || 0);
|
20965 | }
|
20966 | };
|
20967 |
|
20968 | React__default.useEffect(function () {
|
20969 | return function () {
|
20970 | clearTimeout(timer.current);
|
20971 | };
|
20972 | }, []);
|
20973 | return React__default.createElement(Transition, _extends({
|
20974 | appear: true,
|
20975 | in: inProp,
|
20976 | onEnter: handleEnter,
|
20977 | onExit: handleExit,
|
20978 | addEndListener: addEndListener,
|
20979 | timeout: timeout === 'auto' ? null : timeout
|
20980 | }, other), function (state, childProps) {
|
20981 | return React__default.cloneElement(children, _extends({
|
20982 | style: _extends({
|
20983 | opacity: 0,
|
20984 | transform: getScale(0.75),
|
20985 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
20986 | }, styles$U[state], {}, style, {}, children.props.style),
|
20987 | ref: handleRef
|
20988 | }, childProps));
|
20989 | });
|
20990 | });
|
20991 | Grow.propTypes = {
|
20992 | |
20993 |
|
20994 |
|
20995 | children: propTypes.element,
|
20996 |
|
20997 | |
20998 |
|
20999 |
|
21000 | in: propTypes.bool,
|
21001 |
|
21002 | |
21003 |
|
21004 |
|
21005 | onEnter: propTypes.func,
|
21006 |
|
21007 | |
21008 |
|
21009 |
|
21010 | onExit: propTypes.func,
|
21011 |
|
21012 | |
21013 |
|
21014 |
|
21015 | style: propTypes.object,
|
21016 |
|
21017 | |
21018 |
|
21019 |
|
21020 |
|
21021 |
|
21022 |
|
21023 | timeout: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
21024 | enter: propTypes.number,
|
21025 | exit: propTypes.number
|
21026 | }), propTypes.oneOf(['auto'])])
|
21027 | } ;
|
21028 | Grow.muiSupportAuto = true;
|
21029 |
|
21030 | function useMediaQuery(queryInput) {
|
21031 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
21032 | var theme = useTheme();
|
21033 | var props = getThemeProps({
|
21034 | theme: theme,
|
21035 | name: 'MuiUseMediaQuery',
|
21036 | props: {}
|
21037 | });
|
21038 |
|
21039 | {
|
21040 | if (typeof queryInput === 'function' && theme === null) {
|
21041 | console.error(['Material-UI: the `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
|
21042 | }
|
21043 | }
|
21044 |
|
21045 | var query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
|
21046 | query = query.replace(/^@media( ?)/m, '');
|
21047 |
|
21048 |
|
21049 |
|
21050 |
|
21051 | var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
|
21052 |
|
21053 | var _props$options = _extends({}, props, {}, options),
|
21054 | _props$options$defaul = _props$options.defaultMatches,
|
21055 | defaultMatches = _props$options$defaul === void 0 ? false : _props$options$defaul,
|
21056 | _props$options$matchM = _props$options.matchMedia,
|
21057 | matchMedia = _props$options$matchM === void 0 ? supportMatchMedia ? window.matchMedia : null : _props$options$matchM,
|
21058 | _props$options$noSsr = _props$options.noSsr,
|
21059 | noSsr = _props$options$noSsr === void 0 ? false : _props$options$noSsr,
|
21060 | _props$options$ssrMat = _props$options.ssrMatchMedia,
|
21061 | ssrMatchMedia = _props$options$ssrMat === void 0 ? null : _props$options$ssrMat;
|
21062 |
|
21063 | var _React$useState = React__default.useState(function () {
|
21064 | if (noSsr && supportMatchMedia) {
|
21065 | return matchMedia(query).matches;
|
21066 | }
|
21067 |
|
21068 | if (ssrMatchMedia) {
|
21069 | return ssrMatchMedia(query).matches;
|
21070 | }
|
21071 |
|
21072 |
|
21073 |
|
21074 | return defaultMatches;
|
21075 | }),
|
21076 | match = _React$useState[0],
|
21077 | setMatch = _React$useState[1];
|
21078 |
|
21079 | React__default.useEffect(function () {
|
21080 | var active = true;
|
21081 |
|
21082 | if (!supportMatchMedia) {
|
21083 | return undefined;
|
21084 | }
|
21085 |
|
21086 | var queryList = matchMedia(query);
|
21087 |
|
21088 | var updateMatch = function updateMatch() {
|
21089 |
|
21090 |
|
21091 |
|
21092 | if (active) {
|
21093 | setMatch(queryList.matches);
|
21094 | }
|
21095 | };
|
21096 |
|
21097 | updateMatch();
|
21098 | queryList.addListener(updateMatch);
|
21099 | return function () {
|
21100 | active = false;
|
21101 | queryList.removeListener(updateMatch);
|
21102 | };
|
21103 | }, [query, matchMedia, supportMatchMedia]);
|
21104 | return match;
|
21105 | }
|
21106 |
|
21107 | var isWidthUp = function isWidthUp(breakpoint, width) {
|
21108 | var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
21109 |
|
21110 | if (inclusive) {
|
21111 | return keys.indexOf(breakpoint) <= keys.indexOf(width);
|
21112 | }
|
21113 |
|
21114 | return keys.indexOf(breakpoint) < keys.indexOf(width);
|
21115 | };
|
21116 |
|
21117 | var isWidthDown = function isWidthDown(breakpoint, width) {
|
21118 | var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
21119 |
|
21120 | if (inclusive) {
|
21121 | return keys.indexOf(width) <= keys.indexOf(breakpoint);
|
21122 | }
|
21123 |
|
21124 | return keys.indexOf(width) < keys.indexOf(breakpoint);
|
21125 | };
|
21126 | var useEnhancedEffect$6 = typeof window === 'undefined' ? React__default.useEffect : React__default.useLayoutEffect;
|
21127 |
|
21128 | var withWidth = function withWidth() {
|
21129 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
21130 | return function (Component) {
|
21131 | var _options$withTheme = options.withTheme,
|
21132 | withThemeOption = _options$withTheme === void 0 ? false : _options$withTheme,
|
21133 | _options$noSSR = options.noSSR,
|
21134 | noSSR = _options$noSSR === void 0 ? false : _options$noSSR,
|
21135 | initialWidthOption = options.initialWidth;
|
21136 |
|
21137 | function WithWidth(props) {
|
21138 | var contextTheme = useTheme$1();
|
21139 | var theme = props.theme || contextTheme;
|
21140 |
|
21141 | var _getThemeProps = getThemeProps({
|
21142 | theme: theme,
|
21143 | name: 'MuiWithWidth',
|
21144 | props: _extends({}, props)
|
21145 | }),
|
21146 | initialWidth = _getThemeProps.initialWidth,
|
21147 | width = _getThemeProps.width,
|
21148 | other = _objectWithoutProperties(_getThemeProps, ["initialWidth", "width"]);
|
21149 |
|
21150 | var _React$useState = React__default.useState(false),
|
21151 | mountedState = _React$useState[0],
|
21152 | setMountedState = _React$useState[1];
|
21153 |
|
21154 | useEnhancedEffect$6(function () {
|
21155 | setMountedState(true);
|
21156 | }, []);
|
21157 | |
21158 |
|
21159 |
|
21160 |
|
21161 |
|
21162 |
|
21163 | var keys = _toConsumableArray(theme.breakpoints.keys).reverse();
|
21164 |
|
21165 | var widthComputed = keys.reduce(function (output, key) {
|
21166 |
|
21167 | var matches = useMediaQuery(theme.breakpoints.up(key));
|
21168 | return !output && matches ? key : output;
|
21169 | }, null);
|
21170 |
|
21171 | var more = _extends({
|
21172 | width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption
|
21173 | }, withThemeOption ? {
|
21174 | theme: theme
|
21175 | } : {}, {}, other);
|
21176 |
|
21177 |
|
21178 |
|
21179 |
|
21180 |
|
21181 |
|
21182 |
|
21183 | if (more.width === undefined) {
|
21184 | return null;
|
21185 | }
|
21186 |
|
21187 | return React__default.createElement(Component, more);
|
21188 | }
|
21189 |
|
21190 | WithWidth.propTypes = {
|
21191 | |
21192 |
|
21193 |
|
21194 |
|
21195 |
|
21196 |
|
21197 |
|
21198 |
|
21199 |
|
21200 | initialWidth: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
|
21201 |
|
21202 | |
21203 |
|
21204 |
|
21205 | theme: propTypes.object,
|
21206 |
|
21207 | |
21208 |
|
21209 |
|
21210 | width: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
|
21211 | } ;
|
21212 |
|
21213 | {
|
21214 | WithWidth.displayName = "WithWidth(".concat(getDisplayName(Component), ")");
|
21215 | }
|
21216 |
|
21217 | hoistNonReactStatics_cjs(WithWidth, Component);
|
21218 | return WithWidth;
|
21219 | };
|
21220 | };
|
21221 |
|
21222 | |
21223 |
|
21224 |
|
21225 |
|
21226 | function HiddenJs(props) {
|
21227 | var children = props.children,
|
21228 | only = props.only,
|
21229 | width = props.width;
|
21230 | var theme = useTheme$1();
|
21231 | var visible = true;
|
21232 |
|
21233 | if (only) {
|
21234 | if (Array.isArray(only)) {
|
21235 | for (var i = 0; i < only.length; i += 1) {
|
21236 | var breakpoint = only[i];
|
21237 |
|
21238 | if (width === breakpoint) {
|
21239 | visible = false;
|
21240 | break;
|
21241 | }
|
21242 | }
|
21243 | } else if (only && width === only) {
|
21244 | visible = false;
|
21245 | }
|
21246 | }
|
21247 |
|
21248 |
|
21249 | if (visible) {
|
21250 |
|
21251 | for (var _i = 0; _i < theme.breakpoints.keys.length; _i += 1) {
|
21252 | var _breakpoint = theme.breakpoints.keys[_i];
|
21253 | var breakpointUp = props["".concat(_breakpoint, "Up")];
|
21254 | var breakpointDown = props["".concat(_breakpoint, "Down")];
|
21255 |
|
21256 | if (breakpointUp && isWidthUp(_breakpoint, width) || breakpointDown && isWidthDown(_breakpoint, width)) {
|
21257 | visible = false;
|
21258 | break;
|
21259 | }
|
21260 | }
|
21261 | }
|
21262 |
|
21263 | if (!visible) {
|
21264 | return null;
|
21265 | }
|
21266 |
|
21267 | return children;
|
21268 | }
|
21269 |
|
21270 | HiddenJs.propTypes = {
|
21271 | |
21272 |
|
21273 |
|
21274 | children: propTypes.node,
|
21275 |
|
21276 | |
21277 |
|
21278 |
|
21279 | className: propTypes.string,
|
21280 |
|
21281 | |
21282 |
|
21283 |
|
21284 |
|
21285 | implementation: propTypes.oneOf(['js', 'css']),
|
21286 |
|
21287 | |
21288 |
|
21289 |
|
21290 |
|
21291 |
|
21292 |
|
21293 |
|
21294 |
|
21295 |
|
21296 |
|
21297 |
|
21298 | initialWidth: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
|
21299 |
|
21300 | |
21301 |
|
21302 |
|
21303 | lgDown: propTypes.bool,
|
21304 |
|
21305 | |
21306 |
|
21307 |
|
21308 | lgUp: propTypes.bool,
|
21309 |
|
21310 | |
21311 |
|
21312 |
|
21313 | mdDown: propTypes.bool,
|
21314 |
|
21315 | |
21316 |
|
21317 |
|
21318 | mdUp: propTypes.bool,
|
21319 |
|
21320 | |
21321 |
|
21322 |
|
21323 | only: propTypes.oneOfType([propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), propTypes.arrayOf(propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
|
21324 |
|
21325 | |
21326 |
|
21327 |
|
21328 | smDown: propTypes.bool,
|
21329 |
|
21330 | |
21331 |
|
21332 |
|
21333 | smUp: propTypes.bool,
|
21334 |
|
21335 | |
21336 |
|
21337 |
|
21338 |
|
21339 | width: propTypes.string.isRequired,
|
21340 |
|
21341 | |
21342 |
|
21343 |
|
21344 | xlDown: propTypes.bool,
|
21345 |
|
21346 | |
21347 |
|
21348 |
|
21349 | xlUp: propTypes.bool,
|
21350 |
|
21351 | |
21352 |
|
21353 |
|
21354 | xsDown: propTypes.bool,
|
21355 |
|
21356 | |
21357 |
|
21358 |
|
21359 | xsUp: propTypes.bool
|
21360 | };
|
21361 |
|
21362 | {
|
21363 | HiddenJs.propTypes = exactProp(HiddenJs.propTypes);
|
21364 | }
|
21365 |
|
21366 | var HiddenJs$1 = withWidth()(HiddenJs);
|
21367 |
|
21368 | var styles$V = function styles(theme) {
|
21369 | var hidden = {
|
21370 | display: 'none'
|
21371 | };
|
21372 | return theme.breakpoints.keys.reduce(function (acc, key) {
|
21373 | acc["only".concat(capitalize(key))] = _defineProperty({}, theme.breakpoints.only(key), hidden);
|
21374 | acc["".concat(key, "Up")] = _defineProperty({}, theme.breakpoints.up(key), hidden);
|
21375 | acc["".concat(key, "Down")] = _defineProperty({}, theme.breakpoints.down(key), hidden);
|
21376 | return acc;
|
21377 | }, {});
|
21378 | };
|
21379 | |
21380 |
|
21381 |
|
21382 |
|
21383 |
|
21384 | function HiddenCss(props) {
|
21385 | var children = props.children,
|
21386 | classes = props.classes,
|
21387 | className = props.className,
|
21388 | only = props.only,
|
21389 | other = _objectWithoutProperties(props, ["children", "classes", "className", "only"]);
|
21390 |
|
21391 | var theme = useTheme$1();
|
21392 |
|
21393 | {
|
21394 | var unknownProps = Object.keys(other).filter(function (propName) {
|
21395 | var isUndeclaredBreakpoint = !theme.breakpoints.keys.some(function (breakpoint) {
|
21396 | return "".concat(breakpoint, "Up") === propName || "".concat(breakpoint, "Down") === propName;
|
21397 | });
|
21398 | return isUndeclaredBreakpoint;
|
21399 | });
|
21400 |
|
21401 | if (unknownProps.length > 0) {
|
21402 | console.error("Material-UI: unsupported props received by `<Hidden implementation=\"css\" />`: ".concat(unknownProps.join(', '), ". Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?"));
|
21403 | }
|
21404 | }
|
21405 |
|
21406 | var clsx = [];
|
21407 |
|
21408 | if (className) {
|
21409 | clsx.push(className);
|
21410 | }
|
21411 |
|
21412 | for (var i = 0; i < theme.breakpoints.keys.length; i += 1) {
|
21413 | var breakpoint = theme.breakpoints.keys[i];
|
21414 | var breakpointUp = props["".concat(breakpoint, "Up")];
|
21415 | var breakpointDown = props["".concat(breakpoint, "Down")];
|
21416 |
|
21417 | if (breakpointUp) {
|
21418 | clsx.push(classes["".concat(breakpoint, "Up")]);
|
21419 | }
|
21420 |
|
21421 | if (breakpointDown) {
|
21422 | clsx.push(classes["".concat(breakpoint, "Down")]);
|
21423 | }
|
21424 | }
|
21425 |
|
21426 | if (only) {
|
21427 | var onlyBreakpoints = Array.isArray(only) ? only : [only];
|
21428 | onlyBreakpoints.forEach(function (breakpoint) {
|
21429 | clsx.push(classes["only".concat(capitalize(breakpoint))]);
|
21430 | });
|
21431 | }
|
21432 |
|
21433 | return React__default.createElement("div", {
|
21434 | className: clsx.join(' ')
|
21435 | }, children);
|
21436 | }
|
21437 |
|
21438 | HiddenCss.propTypes = {
|
21439 | |
21440 |
|
21441 |
|
21442 | children: propTypes.node,
|
21443 |
|
21444 | |
21445 |
|
21446 |
|
21447 |
|
21448 | classes: propTypes.object.isRequired,
|
21449 |
|
21450 | |
21451 |
|
21452 |
|
21453 | className: propTypes.string,
|
21454 |
|
21455 | |
21456 |
|
21457 |
|
21458 |
|
21459 | implementation: propTypes.oneOf(['js', 'css']),
|
21460 |
|
21461 | |
21462 |
|
21463 |
|
21464 | lgDown: propTypes.bool,
|
21465 |
|
21466 | |
21467 |
|
21468 |
|
21469 | lgUp: propTypes.bool,
|
21470 |
|
21471 | |
21472 |
|
21473 |
|
21474 | mdDown: propTypes.bool,
|
21475 |
|
21476 | |
21477 |
|
21478 |
|
21479 | mdUp: propTypes.bool,
|
21480 |
|
21481 | |
21482 |
|
21483 |
|
21484 | only: propTypes.oneOfType([propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), propTypes.arrayOf(propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
|
21485 |
|
21486 | |
21487 |
|
21488 |
|
21489 | smDown: propTypes.bool,
|
21490 |
|
21491 | |
21492 |
|
21493 |
|
21494 | smUp: propTypes.bool,
|
21495 |
|
21496 | |
21497 |
|
21498 |
|
21499 | xlDown: propTypes.bool,
|
21500 |
|
21501 | |
21502 |
|
21503 |
|
21504 | xlUp: propTypes.bool,
|
21505 |
|
21506 | |
21507 |
|
21508 |
|
21509 | xsDown: propTypes.bool,
|
21510 |
|
21511 | |
21512 |
|
21513 |
|
21514 | xsUp: propTypes.bool
|
21515 | } ;
|
21516 | var HiddenCss$1 = withStyles$1(styles$V, {
|
21517 | name: 'PrivateHiddenCss'
|
21518 | })(HiddenCss);
|
21519 |
|
21520 | |
21521 |
|
21522 |
|
21523 |
|
21524 | function Hidden(props) {
|
21525 | var _props$implementation = props.implementation,
|
21526 | implementation = _props$implementation === void 0 ? 'js' : _props$implementation,
|
21527 | _props$lgDown = props.lgDown,
|
21528 | lgDown = _props$lgDown === void 0 ? false : _props$lgDown,
|
21529 | _props$lgUp = props.lgUp,
|
21530 | lgUp = _props$lgUp === void 0 ? false : _props$lgUp,
|
21531 | _props$mdDown = props.mdDown,
|
21532 | mdDown = _props$mdDown === void 0 ? false : _props$mdDown,
|
21533 | _props$mdUp = props.mdUp,
|
21534 | mdUp = _props$mdUp === void 0 ? false : _props$mdUp,
|
21535 | _props$smDown = props.smDown,
|
21536 | smDown = _props$smDown === void 0 ? false : _props$smDown,
|
21537 | _props$smUp = props.smUp,
|
21538 | smUp = _props$smUp === void 0 ? false : _props$smUp,
|
21539 | _props$xlDown = props.xlDown,
|
21540 | xlDown = _props$xlDown === void 0 ? false : _props$xlDown,
|
21541 | _props$xlUp = props.xlUp,
|
21542 | xlUp = _props$xlUp === void 0 ? false : _props$xlUp,
|
21543 | _props$xsDown = props.xsDown,
|
21544 | xsDown = _props$xsDown === void 0 ? false : _props$xsDown,
|
21545 | _props$xsUp = props.xsUp,
|
21546 | xsUp = _props$xsUp === void 0 ? false : _props$xsUp,
|
21547 | other = _objectWithoutProperties(props, ["implementation", "lgDown", "lgUp", "mdDown", "mdUp", "smDown", "smUp", "xlDown", "xlUp", "xsDown", "xsUp"]);
|
21548 |
|
21549 | if (implementation === 'js') {
|
21550 | return React__default.createElement(HiddenJs$1, _extends({
|
21551 | lgDown: lgDown,
|
21552 | lgUp: lgUp,
|
21553 | mdDown: mdDown,
|
21554 | mdUp: mdUp,
|
21555 | smDown: smDown,
|
21556 | smUp: smUp,
|
21557 | xlDown: xlDown,
|
21558 | xlUp: xlUp,
|
21559 | xsDown: xsDown,
|
21560 | xsUp: xsUp
|
21561 | }, other));
|
21562 | }
|
21563 |
|
21564 | return React__default.createElement(HiddenCss$1, _extends({
|
21565 | lgDown: lgDown,
|
21566 | lgUp: lgUp,
|
21567 | mdDown: mdDown,
|
21568 | mdUp: mdUp,
|
21569 | smDown: smDown,
|
21570 | smUp: smUp,
|
21571 | xlDown: xlDown,
|
21572 | xlUp: xlUp,
|
21573 | xsDown: xsDown,
|
21574 | xsUp: xsUp
|
21575 | }, other));
|
21576 | }
|
21577 |
|
21578 | Hidden.propTypes = {
|
21579 | |
21580 |
|
21581 |
|
21582 | children: propTypes.node,
|
21583 |
|
21584 | |
21585 |
|
21586 |
|
21587 | className: propTypes.string,
|
21588 |
|
21589 | |
21590 |
|
21591 |
|
21592 |
|
21593 | implementation: propTypes.oneOf(['js', 'css']),
|
21594 |
|
21595 | |
21596 |
|
21597 |
|
21598 |
|
21599 |
|
21600 |
|
21601 |
|
21602 |
|
21603 |
|
21604 |
|
21605 |
|
21606 | initialWidth: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
|
21607 |
|
21608 | |
21609 |
|
21610 |
|
21611 | lgDown: propTypes.bool,
|
21612 |
|
21613 | |
21614 |
|
21615 |
|
21616 | lgUp: propTypes.bool,
|
21617 |
|
21618 | |
21619 |
|
21620 |
|
21621 | mdDown: propTypes.bool,
|
21622 |
|
21623 | |
21624 |
|
21625 |
|
21626 | mdUp: propTypes.bool,
|
21627 |
|
21628 | |
21629 |
|
21630 |
|
21631 | only: propTypes.oneOfType([propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), propTypes.arrayOf(propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
|
21632 |
|
21633 | |
21634 |
|
21635 |
|
21636 | smDown: propTypes.bool,
|
21637 |
|
21638 | |
21639 |
|
21640 |
|
21641 | smUp: propTypes.bool,
|
21642 |
|
21643 | |
21644 |
|
21645 |
|
21646 | xlDown: propTypes.bool,
|
21647 |
|
21648 | |
21649 |
|
21650 |
|
21651 | xlUp: propTypes.bool,
|
21652 |
|
21653 | |
21654 |
|
21655 |
|
21656 | xsDown: propTypes.bool,
|
21657 |
|
21658 | |
21659 |
|
21660 |
|
21661 | xsUp: propTypes.bool
|
21662 | } ;
|
21663 |
|
21664 | var styles$W = function styles(theme) {
|
21665 | return {
|
21666 |
|
21667 | root: {
|
21668 | userSelect: 'none',
|
21669 | fontSize: theme.typography.pxToRem(24),
|
21670 | width: '1em',
|
21671 | height: '1em',
|
21672 |
|
21673 |
|
21674 | overflow: 'hidden',
|
21675 | flexShrink: 0
|
21676 | },
|
21677 |
|
21678 |
|
21679 | colorPrimary: {
|
21680 | color: theme.palette.primary.main
|
21681 | },
|
21682 |
|
21683 |
|
21684 | colorSecondary: {
|
21685 | color: theme.palette.secondary.main
|
21686 | },
|
21687 |
|
21688 |
|
21689 | colorAction: {
|
21690 | color: theme.palette.action.active
|
21691 | },
|
21692 |
|
21693 |
|
21694 | colorError: {
|
21695 | color: theme.palette.error.main
|
21696 | },
|
21697 |
|
21698 |
|
21699 | colorDisabled: {
|
21700 | color: theme.palette.action.disabled
|
21701 | },
|
21702 | fontSizeInherit: {
|
21703 | fontSize: 'inherit'
|
21704 | },
|
21705 |
|
21706 |
|
21707 | fontSizeSmall: {
|
21708 | fontSize: theme.typography.pxToRem(20)
|
21709 | },
|
21710 |
|
21711 |
|
21712 | fontSizeLarge: {
|
21713 | fontSize: theme.typography.pxToRem(36)
|
21714 | }
|
21715 | };
|
21716 | };
|
21717 | var Icon = React__default.forwardRef(function Icon(props, ref) {
|
21718 | var classes = props.classes,
|
21719 | className = props.className,
|
21720 | _props$color = props.color,
|
21721 | color = _props$color === void 0 ? 'inherit' : _props$color,
|
21722 | _props$component = props.component,
|
21723 | Component = _props$component === void 0 ? 'span' : _props$component,
|
21724 | _props$fontSize = props.fontSize,
|
21725 | fontSize = _props$fontSize === void 0 ? 'default' : _props$fontSize,
|
21726 | other = _objectWithoutProperties(props, ["classes", "className", "color", "component", "fontSize"]);
|
21727 |
|
21728 | return React__default.createElement(Component, _extends({
|
21729 | className: clsx('material-icons', classes.root, className, color !== 'inherit' && classes["color".concat(capitalize(color))], fontSize !== 'default' && classes["fontSize".concat(capitalize(fontSize))]),
|
21730 | "aria-hidden": true,
|
21731 | ref: ref
|
21732 | }, other));
|
21733 | });
|
21734 | Icon.propTypes = {
|
21735 | |
21736 |
|
21737 |
|
21738 | children: propTypes.node,
|
21739 |
|
21740 | |
21741 |
|
21742 |
|
21743 |
|
21744 | classes: propTypes.object.isRequired,
|
21745 |
|
21746 | |
21747 |
|
21748 |
|
21749 | className: propTypes.string,
|
21750 |
|
21751 | |
21752 |
|
21753 |
|
21754 | color: propTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled']),
|
21755 |
|
21756 | |
21757 |
|
21758 |
|
21759 |
|
21760 | component: propTypes.elementType,
|
21761 |
|
21762 | |
21763 |
|
21764 |
|
21765 | fontSize: propTypes.oneOf(['inherit', 'default', 'small', 'large'])
|
21766 | } ;
|
21767 | Icon.muiName = 'Icon';
|
21768 | var Icon$1 = withStyles$1(styles$W, {
|
21769 | name: 'MuiIcon'
|
21770 | })(Icon);
|
21771 |
|
21772 | var styles$X = function styles(theme) {
|
21773 | var light = theme.palette.type === 'light';
|
21774 | var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
|
21775 | return {
|
21776 |
|
21777 | root: {
|
21778 | position: 'relative'
|
21779 | },
|
21780 |
|
21781 |
|
21782 | formControl: {
|
21783 | 'label + &': {
|
21784 | marginTop: 16
|
21785 | }
|
21786 | },
|
21787 |
|
21788 |
|
21789 | focused: {},
|
21790 |
|
21791 |
|
21792 | disabled: {},
|
21793 |
|
21794 |
|
21795 | colorSecondary: {
|
21796 | '&$underline:after': {
|
21797 | borderBottomColor: theme.palette.secondary.main
|
21798 | }
|
21799 | },
|
21800 |
|
21801 |
|
21802 | underline: {
|
21803 | '&:after': {
|
21804 | borderBottom: "2px solid ".concat(theme.palette.primary.main),
|
21805 | left: 0,
|
21806 | bottom: 0,
|
21807 |
|
21808 | content: '""',
|
21809 | position: 'absolute',
|
21810 | right: 0,
|
21811 | transform: 'scaleX(0)',
|
21812 | transition: theme.transitions.create('transform', {
|
21813 | duration: theme.transitions.duration.shorter,
|
21814 | easing: theme.transitions.easing.easeOut
|
21815 | }),
|
21816 | pointerEvents: 'none'
|
21817 |
|
21818 | },
|
21819 | '&$focused:after': {
|
21820 | transform: 'scaleX(1)'
|
21821 | },
|
21822 | '&$error:after': {
|
21823 | borderBottomColor: theme.palette.error.main,
|
21824 | transform: 'scaleX(1)'
|
21825 |
|
21826 | },
|
21827 | '&:before': {
|
21828 | borderBottom: "1px solid ".concat(bottomLineColor),
|
21829 | left: 0,
|
21830 | bottom: 0,
|
21831 |
|
21832 | content: '"\\00a0"',
|
21833 | position: 'absolute',
|
21834 | right: 0,
|
21835 | transition: theme.transitions.create('border-bottom-color', {
|
21836 | duration: theme.transitions.duration.shorter
|
21837 | }),
|
21838 | pointerEvents: 'none'
|
21839 |
|
21840 | },
|
21841 | '&:hover:not($disabled):before': {
|
21842 | borderBottom: "2px solid ".concat(theme.palette.text.primary),
|
21843 |
|
21844 | '@media (hover: none)': {
|
21845 | borderBottom: "1px solid ".concat(bottomLineColor)
|
21846 | }
|
21847 | },
|
21848 | '&$disabled:before': {
|
21849 | borderBottomStyle: 'dotted'
|
21850 | }
|
21851 | },
|
21852 |
|
21853 |
|
21854 | error: {},
|
21855 |
|
21856 |
|
21857 | marginDense: {},
|
21858 |
|
21859 |
|
21860 | multiline: {},
|
21861 |
|
21862 |
|
21863 | fullWidth: {},
|
21864 |
|
21865 |
|
21866 | input: {},
|
21867 |
|
21868 |
|
21869 | inputMarginDense: {},
|
21870 |
|
21871 |
|
21872 | inputMultiline: {},
|
21873 |
|
21874 |
|
21875 | inputTypeSearch: {}
|
21876 | };
|
21877 | };
|
21878 | var Input = React__default.forwardRef(function Input(props, ref) {
|
21879 | var disableUnderline = props.disableUnderline,
|
21880 | classes = props.classes,
|
21881 | _props$fullWidth = props.fullWidth,
|
21882 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
21883 | _props$inputComponent = props.inputComponent,
|
21884 | inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
|
21885 | _props$multiline = props.multiline,
|
21886 | multiline = _props$multiline === void 0 ? false : _props$multiline,
|
21887 | _props$type = props.type,
|
21888 | type = _props$type === void 0 ? 'text' : _props$type,
|
21889 | other = _objectWithoutProperties(props, ["disableUnderline", "classes", "fullWidth", "inputComponent", "multiline", "type"]);
|
21890 |
|
21891 | return React__default.createElement(InputBase$1, _extends({
|
21892 | classes: _extends({}, classes, {
|
21893 | root: clsx(classes.root, !disableUnderline && classes.underline),
|
21894 | underline: null
|
21895 | }),
|
21896 | fullWidth: fullWidth,
|
21897 | inputComponent: inputComponent,
|
21898 | multiline: multiline,
|
21899 | ref: ref,
|
21900 | type: type
|
21901 | }, other));
|
21902 | });
|
21903 | Input.propTypes = {
|
21904 | |
21905 |
|
21906 |
|
21907 |
|
21908 |
|
21909 | autoComplete: propTypes.string,
|
21910 |
|
21911 | |
21912 |
|
21913 |
|
21914 | autoFocus: propTypes.bool,
|
21915 |
|
21916 | |
21917 |
|
21918 |
|
21919 |
|
21920 | classes: propTypes.object.isRequired,
|
21921 |
|
21922 | |
21923 |
|
21924 |
|
21925 | className: propTypes.string,
|
21926 |
|
21927 | |
21928 |
|
21929 |
|
21930 | color: propTypes.oneOf(['primary', 'secondary']),
|
21931 |
|
21932 | |
21933 |
|
21934 |
|
21935 | defaultValue: propTypes.any,
|
21936 |
|
21937 | |
21938 |
|
21939 |
|
21940 | disabled: propTypes.bool,
|
21941 |
|
21942 | |
21943 |
|
21944 |
|
21945 | disableUnderline: propTypes.bool,
|
21946 |
|
21947 | |
21948 |
|
21949 |
|
21950 | endAdornment: propTypes.node,
|
21951 |
|
21952 | |
21953 |
|
21954 |
|
21955 |
|
21956 | error: propTypes.bool,
|
21957 |
|
21958 | |
21959 |
|
21960 |
|
21961 | fullWidth: propTypes.bool,
|
21962 |
|
21963 | |
21964 |
|
21965 |
|
21966 | id: propTypes.string,
|
21967 |
|
21968 | |
21969 |
|
21970 |
|
21971 |
|
21972 | inputComponent: propTypes.elementType,
|
21973 |
|
21974 | |
21975 |
|
21976 |
|
21977 | inputProps: propTypes.object,
|
21978 |
|
21979 | |
21980 |
|
21981 |
|
21982 | inputRef: refType,
|
21983 |
|
21984 | |
21985 |
|
21986 |
|
21987 |
|
21988 | margin: propTypes.oneOf(['dense', 'none']),
|
21989 |
|
21990 | |
21991 |
|
21992 |
|
21993 | multiline: propTypes.bool,
|
21994 |
|
21995 | |
21996 |
|
21997 |
|
21998 | name: propTypes.string,
|
21999 |
|
22000 | |
22001 |
|
22002 |
|
22003 |
|
22004 |
|
22005 |
|
22006 | onChange: propTypes.func,
|
22007 |
|
22008 | |
22009 |
|
22010 |
|
22011 | placeholder: propTypes.string,
|
22012 |
|
22013 | |
22014 |
|
22015 |
|
22016 |
|
22017 | readOnly: propTypes.bool,
|
22018 |
|
22019 | |
22020 |
|
22021 |
|
22022 | required: propTypes.bool,
|
22023 |
|
22024 | |
22025 |
|
22026 |
|
22027 | rows: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
22028 |
|
22029 | |
22030 |
|
22031 |
|
22032 | rowsMax: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
22033 |
|
22034 | |
22035 |
|
22036 |
|
22037 | startAdornment: propTypes.node,
|
22038 |
|
22039 | |
22040 |
|
22041 |
|
22042 | type: propTypes.string,
|
22043 |
|
22044 | |
22045 |
|
22046 |
|
22047 | value: propTypes.any
|
22048 | } ;
|
22049 | Input.muiName = 'Input';
|
22050 | var Input$1 = withStyles$1(styles$X, {
|
22051 | name: 'MuiInput'
|
22052 | })(Input);
|
22053 |
|
22054 | var styles$Y = {
|
22055 |
|
22056 | root: {
|
22057 | display: 'flex',
|
22058 | height: '0.01em',
|
22059 |
|
22060 | maxHeight: '2em',
|
22061 | alignItems: 'center',
|
22062 | whiteSpace: 'nowrap'
|
22063 | },
|
22064 |
|
22065 |
|
22066 | filled: {
|
22067 | '&$positionStart:not($hiddenLabel)': {
|
22068 | marginTop: 16
|
22069 | }
|
22070 | },
|
22071 |
|
22072 |
|
22073 | positionStart: {
|
22074 | marginRight: 8
|
22075 | },
|
22076 |
|
22077 |
|
22078 | positionEnd: {
|
22079 | marginLeft: 8
|
22080 | },
|
22081 |
|
22082 |
|
22083 | disablePointerEvents: {
|
22084 | pointerEvents: 'none'
|
22085 | },
|
22086 |
|
22087 |
|
22088 | hiddenLabel: {},
|
22089 |
|
22090 |
|
22091 | marginDense: {}
|
22092 | };
|
22093 | var InputAdornment = React__default.forwardRef(function InputAdornment(props, ref) {
|
22094 | var children = props.children,
|
22095 | classes = props.classes,
|
22096 | className = props.className,
|
22097 | _props$component = props.component,
|
22098 | Component = _props$component === void 0 ? 'div' : _props$component,
|
22099 | _props$disablePointer = props.disablePointerEvents,
|
22100 | disablePointerEvents = _props$disablePointer === void 0 ? false : _props$disablePointer,
|
22101 | _props$disableTypogra = props.disableTypography,
|
22102 | disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
|
22103 | position = props.position,
|
22104 | variantProp = props.variant,
|
22105 | other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"]);
|
22106 |
|
22107 | var muiFormControl = useFormControl() || {};
|
22108 | var variant = variantProp;
|
22109 |
|
22110 | if (variantProp && muiFormControl.variant) {
|
22111 | {
|
22112 | if (variantProp === muiFormControl.variant) {
|
22113 | console.error('Material-UI: The `InputAdornment` variant infers the variant prop ' + 'you do not have to provide one.');
|
22114 | }
|
22115 | }
|
22116 | }
|
22117 |
|
22118 | if (muiFormControl && !variant) {
|
22119 | variant = muiFormControl.variant;
|
22120 | }
|
22121 |
|
22122 | return React__default.createElement(FormControlContext.Provider, {
|
22123 | value: null
|
22124 | }, React__default.createElement(Component, _extends({
|
22125 | className: clsx(classes.root, className, disablePointerEvents && classes.disablePointerEvents, muiFormControl.hiddenLabel && classes.hiddenLabel, {
|
22126 | filled: classes.filled
|
22127 | }[variant], {
|
22128 | start: classes.positionStart,
|
22129 | end: classes.positionEnd
|
22130 | }[position], {
|
22131 | dense: classes.marginDense
|
22132 | }[muiFormControl.margin]),
|
22133 | ref: ref
|
22134 | }, other), typeof children === 'string' && !disableTypography ? React__default.createElement(Typography$1, {
|
22135 | color: "textSecondary"
|
22136 | }, children) : children));
|
22137 | });
|
22138 | InputAdornment.propTypes = {
|
22139 | |
22140 |
|
22141 |
|
22142 | children: propTypes.node.isRequired,
|
22143 |
|
22144 | |
22145 |
|
22146 |
|
22147 |
|
22148 | classes: propTypes.object.isRequired,
|
22149 |
|
22150 | |
22151 |
|
22152 |
|
22153 | className: propTypes.string,
|
22154 |
|
22155 | |
22156 |
|
22157 |
|
22158 |
|
22159 | component: propTypes.elementType,
|
22160 |
|
22161 | |
22162 |
|
22163 |
|
22164 |
|
22165 | disablePointerEvents: propTypes.bool,
|
22166 |
|
22167 | |
22168 |
|
22169 |
|
22170 | disableTypography: propTypes.bool,
|
22171 |
|
22172 | |
22173 |
|
22174 |
|
22175 | muiFormControl: propTypes.object,
|
22176 |
|
22177 | |
22178 |
|
22179 |
|
22180 | position: propTypes.oneOf(['start', 'end']),
|
22181 |
|
22182 | |
22183 |
|
22184 |
|
22185 |
|
22186 |
|
22187 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
22188 | } ;
|
22189 | var InputAdornment$1 = withStyles$1(styles$Y, {
|
22190 | name: 'MuiInputAdornment'
|
22191 | })(InputAdornment);
|
22192 |
|
22193 | var styles$Z = function styles(theme) {
|
22194 | return {
|
22195 |
|
22196 | root: {
|
22197 | display: 'block',
|
22198 | transformOrigin: 'top left'
|
22199 | },
|
22200 |
|
22201 |
|
22202 | focused: {},
|
22203 |
|
22204 |
|
22205 | disabled: {},
|
22206 |
|
22207 |
|
22208 | error: {},
|
22209 |
|
22210 |
|
22211 | required: {},
|
22212 |
|
22213 |
|
22214 | asterisk: {},
|
22215 |
|
22216 |
|
22217 | formControl: {
|
22218 | position: 'absolute',
|
22219 | left: 0,
|
22220 | top: 0,
|
22221 |
|
22222 | transform: 'translate(0, 24px) scale(1)'
|
22223 | },
|
22224 |
|
22225 |
|
22226 | marginDense: {
|
22227 |
|
22228 | transform: 'translate(0, 21px) scale(1)'
|
22229 | },
|
22230 |
|
22231 |
|
22232 | shrink: {
|
22233 | transform: 'translate(0, 1.5px) scale(0.75)',
|
22234 | transformOrigin: 'top left'
|
22235 | },
|
22236 |
|
22237 |
|
22238 | animated: {
|
22239 | transition: theme.transitions.create(['color', 'transform'], {
|
22240 | duration: theme.transitions.duration.shorter,
|
22241 | easing: theme.transitions.easing.easeOut
|
22242 | })
|
22243 | },
|
22244 |
|
22245 |
|
22246 | filled: {
|
22247 |
|
22248 |
|
22249 |
|
22250 |
|
22251 | zIndex: 1,
|
22252 | pointerEvents: 'none',
|
22253 | transform: 'translate(12px, 20px) scale(1)',
|
22254 | '&$marginDense': {
|
22255 | transform: 'translate(12px, 17px) scale(1)'
|
22256 | },
|
22257 | '&$shrink': {
|
22258 | transform: 'translate(12px, 10px) scale(0.75)',
|
22259 | '&$marginDense': {
|
22260 | transform: 'translate(12px, 7px) scale(0.75)'
|
22261 | }
|
22262 | }
|
22263 | },
|
22264 |
|
22265 |
|
22266 | outlined: {
|
22267 |
|
22268 | zIndex: 1,
|
22269 | pointerEvents: 'none',
|
22270 | transform: 'translate(14px, 20px) scale(1)',
|
22271 | '&$marginDense': {
|
22272 | transform: 'translate(14px, 12px) scale(1)'
|
22273 | },
|
22274 | '&$shrink': {
|
22275 | transform: 'translate(14px, -6px) scale(0.75)'
|
22276 | }
|
22277 | }
|
22278 | };
|
22279 | };
|
22280 | var InputLabel = React__default.forwardRef(function InputLabel(props, ref) {
|
22281 | var classes = props.classes,
|
22282 | className = props.className,
|
22283 | _props$disableAnimati = props.disableAnimation,
|
22284 | disableAnimation = _props$disableAnimati === void 0 ? false : _props$disableAnimati,
|
22285 | margin = props.margin,
|
22286 | shrinkProp = props.shrink,
|
22287 | variant = props.variant,
|
22288 | other = _objectWithoutProperties(props, ["classes", "className", "disableAnimation", "margin", "shrink", "variant"]);
|
22289 |
|
22290 | var muiFormControl = useFormControl$1();
|
22291 | var shrink = shrinkProp;
|
22292 |
|
22293 | if (typeof shrink === 'undefined' && muiFormControl) {
|
22294 | shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
|
22295 | }
|
22296 |
|
22297 | var fcs = formControlState({
|
22298 | props: props,
|
22299 | muiFormControl: muiFormControl,
|
22300 | states: ['margin', 'variant']
|
22301 | });
|
22302 | return React__default.createElement(FormLabel$1, _extends({
|
22303 | "data-shrink": shrink,
|
22304 | className: clsx(classes.root, className, muiFormControl && classes.formControl, !disableAnimation && classes.animated, shrink && classes.shrink, {
|
22305 | dense: classes.marginDense
|
22306 | }[fcs.margin], {
|
22307 | filled: classes.filled,
|
22308 | outlined: classes.outlined
|
22309 | }[fcs.variant]),
|
22310 | classes: {
|
22311 | focused: classes.focused,
|
22312 | disabled: classes.disabled,
|
22313 | error: classes.error,
|
22314 | required: classes.required,
|
22315 | asterisk: classes.asterisk
|
22316 | },
|
22317 | ref: ref
|
22318 | }, other));
|
22319 | });
|
22320 | InputLabel.propTypes = {
|
22321 | |
22322 |
|
22323 |
|
22324 | children: propTypes.node,
|
22325 |
|
22326 | |
22327 |
|
22328 |
|
22329 |
|
22330 | classes: propTypes.object.isRequired,
|
22331 |
|
22332 | |
22333 |
|
22334 |
|
22335 | className: propTypes.string,
|
22336 |
|
22337 | |
22338 |
|
22339 |
|
22340 | color: propTypes.oneOf(['primary', 'secondary']),
|
22341 |
|
22342 | |
22343 |
|
22344 |
|
22345 | disableAnimation: propTypes.bool,
|
22346 |
|
22347 | |
22348 |
|
22349 |
|
22350 | disabled: propTypes.bool,
|
22351 |
|
22352 | |
22353 |
|
22354 |
|
22355 | error: propTypes.bool,
|
22356 |
|
22357 | |
22358 |
|
22359 |
|
22360 | focused: propTypes.bool,
|
22361 |
|
22362 | |
22363 |
|
22364 |
|
22365 |
|
22366 | margin: propTypes.oneOf(['dense']),
|
22367 |
|
22368 | |
22369 |
|
22370 |
|
22371 | required: propTypes.bool,
|
22372 |
|
22373 | |
22374 |
|
22375 |
|
22376 | shrink: propTypes.bool,
|
22377 |
|
22378 | |
22379 |
|
22380 |
|
22381 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
22382 | } ;
|
22383 | var InputLabel$1 = withStyles$1(styles$Z, {
|
22384 | name: 'MuiInputLabel'
|
22385 | })(InputLabel);
|
22386 |
|
22387 | var TRANSITION_DURATION = 4;
|
22388 |
|
22389 | var styles$_ = function styles(theme) {
|
22390 | var getColor = function getColor(color) {
|
22391 | return theme.palette.type === 'light' ? lighten(color, 0.62) : darken(color, 0.5);
|
22392 | };
|
22393 |
|
22394 | var backgroundPrimary = getColor(theme.palette.primary.main);
|
22395 | var backgroundSecondary = getColor(theme.palette.secondary.main);
|
22396 | return {
|
22397 |
|
22398 | root: {
|
22399 | position: 'relative',
|
22400 | overflow: 'hidden',
|
22401 | height: 4
|
22402 | },
|
22403 |
|
22404 |
|
22405 | colorPrimary: {
|
22406 | backgroundColor: backgroundPrimary
|
22407 | },
|
22408 |
|
22409 |
|
22410 | colorSecondary: {
|
22411 | backgroundColor: backgroundSecondary
|
22412 | },
|
22413 |
|
22414 |
|
22415 | determinate: {},
|
22416 |
|
22417 |
|
22418 | indeterminate: {},
|
22419 |
|
22420 |
|
22421 | buffer: {
|
22422 | backgroundColor: 'transparent'
|
22423 | },
|
22424 |
|
22425 |
|
22426 | query: {
|
22427 | transform: 'rotate(180deg)'
|
22428 | },
|
22429 |
|
22430 |
|
22431 | dashed: {
|
22432 | position: 'absolute',
|
22433 | marginTop: 0,
|
22434 | height: '100%',
|
22435 | width: '100%',
|
22436 | animation: '$buffer 3s infinite linear'
|
22437 | },
|
22438 |
|
22439 |
|
22440 | dashedColorPrimary: {
|
22441 | backgroundImage: "radial-gradient(".concat(backgroundPrimary, " 0%, ").concat(backgroundPrimary, " 16%, transparent 42%)"),
|
22442 | backgroundSize: '10px 10px',
|
22443 | backgroundPosition: '0px -23px'
|
22444 | },
|
22445 |
|
22446 |
|
22447 | dashedColorSecondary: {
|
22448 | backgroundImage: "radial-gradient(".concat(backgroundSecondary, " 0%, ").concat(backgroundSecondary, " 16%, transparent 42%)"),
|
22449 | backgroundSize: '10px 10px',
|
22450 | backgroundPosition: '0px -23px'
|
22451 | },
|
22452 |
|
22453 |
|
22454 | bar: {
|
22455 | width: '100%',
|
22456 | position: 'absolute',
|
22457 | left: 0,
|
22458 | bottom: 0,
|
22459 | top: 0,
|
22460 | transition: 'transform 0.2s linear',
|
22461 | transformOrigin: 'left'
|
22462 | },
|
22463 |
|
22464 |
|
22465 | barColorPrimary: {
|
22466 | backgroundColor: theme.palette.primary.main
|
22467 | },
|
22468 |
|
22469 |
|
22470 | barColorSecondary: {
|
22471 | backgroundColor: theme.palette.secondary.main
|
22472 | },
|
22473 |
|
22474 |
|
22475 | bar1Indeterminate: {
|
22476 | width: 'auto',
|
22477 | animation: '$indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite'
|
22478 | },
|
22479 |
|
22480 |
|
22481 | bar1Determinate: {
|
22482 | transition: "transform .".concat(TRANSITION_DURATION, "s linear")
|
22483 | },
|
22484 |
|
22485 |
|
22486 | bar1Buffer: {
|
22487 | zIndex: 1,
|
22488 | transition: "transform .".concat(TRANSITION_DURATION, "s linear")
|
22489 | },
|
22490 |
|
22491 |
|
22492 | bar2Indeterminate: {
|
22493 | width: 'auto',
|
22494 | animation: '$indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite',
|
22495 | animationDelay: '1.15s'
|
22496 | },
|
22497 |
|
22498 |
|
22499 | bar2Buffer: {
|
22500 | transition: "transform .".concat(TRANSITION_DURATION, "s linear")
|
22501 | },
|
22502 |
|
22503 |
|
22504 |
|
22505 |
|
22506 | '@keyframes indeterminate1': {
|
22507 |
|
22508 | '0%': {
|
22509 | left: '-35%',
|
22510 | right: '100%'
|
22511 | },
|
22512 |
|
22513 | '60%': {
|
22514 | left: '100%',
|
22515 | right: '-90%'
|
22516 | },
|
22517 | '100%': {
|
22518 | left: '100%',
|
22519 | right: '-90%'
|
22520 | }
|
22521 | },
|
22522 | '@keyframes indeterminate2': {
|
22523 |
|
22524 | '0%': {
|
22525 | left: '-200%',
|
22526 | right: '100%'
|
22527 | },
|
22528 |
|
22529 | '60%': {
|
22530 | left: '107%',
|
22531 | right: '-8%'
|
22532 | },
|
22533 | '100%': {
|
22534 | left: '107%',
|
22535 | right: '-8%'
|
22536 | }
|
22537 | },
|
22538 | '@keyframes buffer': {
|
22539 | '0%': {
|
22540 | opacity: 1,
|
22541 | backgroundPosition: '0px -23px'
|
22542 | },
|
22543 | '50%': {
|
22544 | opacity: 0,
|
22545 | backgroundPosition: '0px -23px'
|
22546 | },
|
22547 | '100%': {
|
22548 | opacity: 1,
|
22549 | backgroundPosition: '-200px -23px'
|
22550 | }
|
22551 | }
|
22552 | };
|
22553 | };
|
22554 | |
22555 |
|
22556 |
|
22557 |
|
22558 |
|
22559 |
|
22560 |
|
22561 |
|
22562 | var LinearProgress = React__default.forwardRef(function LinearProgress(props, ref) {
|
22563 | var classes = props.classes,
|
22564 | className = props.className,
|
22565 | _props$color = props.color,
|
22566 | color = _props$color === void 0 ? 'primary' : _props$color,
|
22567 | value = props.value,
|
22568 | valueBuffer = props.valueBuffer,
|
22569 | _props$variant = props.variant,
|
22570 | variant = _props$variant === void 0 ? 'indeterminate' : _props$variant,
|
22571 | other = _objectWithoutProperties(props, ["classes", "className", "color", "value", "valueBuffer", "variant"]);
|
22572 |
|
22573 | var theme = useTheme$1();
|
22574 | var rootProps = {};
|
22575 | var inlineStyles = {
|
22576 | bar1: {},
|
22577 | bar2: {}
|
22578 | };
|
22579 |
|
22580 | if (variant === 'determinate' || variant === 'buffer') {
|
22581 | if (value !== undefined) {
|
22582 | rootProps['aria-valuenow'] = Math.round(value);
|
22583 | var transform = value - 100;
|
22584 |
|
22585 | if (theme.direction === 'rtl') {
|
22586 | transform = -transform;
|
22587 | }
|
22588 |
|
22589 | inlineStyles.bar1.transform = "translateX(".concat(transform, "%)");
|
22590 | } else {
|
22591 | console.error('Material-UI: you need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
|
22592 | }
|
22593 | }
|
22594 |
|
22595 | if (variant === 'buffer') {
|
22596 | if (valueBuffer !== undefined) {
|
22597 | var _transform = (valueBuffer || 0) - 100;
|
22598 |
|
22599 | if (theme.direction === 'rtl') {
|
22600 | _transform = -_transform;
|
22601 | }
|
22602 |
|
22603 | inlineStyles.bar2.transform = "translateX(".concat(_transform, "%)");
|
22604 | } else {
|
22605 | console.error('Material-UI: you need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
|
22606 | }
|
22607 | }
|
22608 |
|
22609 | return React__default.createElement("div", _extends({
|
22610 | className: clsx(classes.root, classes["color".concat(capitalize(color))], className, {
|
22611 | determinate: classes.determinate,
|
22612 | indeterminate: classes.indeterminate,
|
22613 | buffer: classes.buffer,
|
22614 | query: classes.query
|
22615 | }[variant]),
|
22616 | role: "progressbar"
|
22617 | }, rootProps, {
|
22618 | ref: ref
|
22619 | }, other), variant === 'buffer' ? React__default.createElement("div", {
|
22620 | className: clsx(classes.dashed, classes["dashedColor".concat(capitalize(color))])
|
22621 | }) : null, React__default.createElement("div", {
|
22622 | className: clsx(classes.bar, classes["barColor".concat(capitalize(color))], (variant === 'indeterminate' || variant === 'query') && classes.bar1Indeterminate, {
|
22623 | determinate: classes.bar1Determinate,
|
22624 | buffer: classes.bar1Buffer
|
22625 | }[variant]),
|
22626 | style: inlineStyles.bar1
|
22627 | }), variant === 'determinate' ? null : React__default.createElement("div", {
|
22628 | className: clsx(classes.bar, (variant === 'indeterminate' || variant === 'query') && classes.bar2Indeterminate, variant === 'buffer' ? [classes["color".concat(capitalize(color))], classes.bar2Buffer] : classes["barColor".concat(capitalize(color))]),
|
22629 | style: inlineStyles.bar2
|
22630 | }));
|
22631 | });
|
22632 | LinearProgress.propTypes = {
|
22633 | |
22634 |
|
22635 |
|
22636 |
|
22637 | classes: propTypes.object.isRequired,
|
22638 |
|
22639 | |
22640 |
|
22641 |
|
22642 | className: propTypes.string,
|
22643 |
|
22644 | |
22645 |
|
22646 |
|
22647 | color: propTypes.oneOf(['primary', 'secondary']),
|
22648 |
|
22649 | |
22650 |
|
22651 |
|
22652 |
|
22653 | value: propTypes.number,
|
22654 |
|
22655 | |
22656 |
|
22657 |
|
22658 |
|
22659 | valueBuffer: propTypes.number,
|
22660 |
|
22661 | |
22662 |
|
22663 |
|
22664 |
|
22665 | variant: propTypes.oneOf(['determinate', 'indeterminate', 'buffer', 'query'])
|
22666 | } ;
|
22667 | var LinearProgress$1 = withStyles$1(styles$_, {
|
22668 | name: 'MuiLinearProgress'
|
22669 | })(LinearProgress);
|
22670 |
|
22671 | var styles$$ = {
|
22672 |
|
22673 | root: {},
|
22674 |
|
22675 |
|
22676 | underlineNone: {
|
22677 | textDecoration: 'none'
|
22678 | },
|
22679 |
|
22680 |
|
22681 | underlineHover: {
|
22682 | textDecoration: 'none',
|
22683 | '&:hover': {
|
22684 | textDecoration: 'underline'
|
22685 | }
|
22686 | },
|
22687 |
|
22688 |
|
22689 | underlineAlways: {
|
22690 | textDecoration: 'underline'
|
22691 | },
|
22692 |
|
22693 |
|
22694 |
|
22695 | button: {
|
22696 | position: 'relative',
|
22697 | WebkitTapHighlightColor: 'transparent',
|
22698 | backgroundColor: 'transparent',
|
22699 |
|
22700 |
|
22701 | outline: 0,
|
22702 | border: 0,
|
22703 | margin: 0,
|
22704 |
|
22705 | borderRadius: 0,
|
22706 | padding: 0,
|
22707 |
|
22708 | cursor: 'pointer',
|
22709 | userSelect: 'none',
|
22710 | verticalAlign: 'middle',
|
22711 | '-moz-appearance': 'none',
|
22712 |
|
22713 | '-webkit-appearance': 'none',
|
22714 |
|
22715 | '&::-moz-focus-inner': {
|
22716 | borderStyle: 'none'
|
22717 |
|
22718 | },
|
22719 | '&$focusVisible': {
|
22720 | outline: 'auto'
|
22721 | }
|
22722 | },
|
22723 |
|
22724 |
|
22725 | focusVisible: {}
|
22726 | };
|
22727 | var Link = React__default.forwardRef(function Link(props, ref) {
|
22728 | var classes = props.classes,
|
22729 | className = props.className,
|
22730 | _props$color = props.color,
|
22731 | color = _props$color === void 0 ? 'primary' : _props$color,
|
22732 | _props$component = props.component,
|
22733 | component = _props$component === void 0 ? 'a' : _props$component,
|
22734 | onBlur = props.onBlur,
|
22735 | onFocus = props.onFocus,
|
22736 | TypographyClasses = props.TypographyClasses,
|
22737 | _props$underline = props.underline,
|
22738 | underline = _props$underline === void 0 ? 'hover' : _props$underline,
|
22739 | _props$variant = props.variant,
|
22740 | variant = _props$variant === void 0 ? 'inherit' : _props$variant,
|
22741 | other = _objectWithoutProperties(props, ["classes", "className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"]);
|
22742 |
|
22743 | var _useIsFocusVisible = useIsFocusVisible(),
|
22744 | isFocusVisible = _useIsFocusVisible.isFocusVisible,
|
22745 | onBlurVisible = _useIsFocusVisible.onBlurVisible,
|
22746 | focusVisibleRef = _useIsFocusVisible.ref;
|
22747 |
|
22748 | var _React$useState = React__default.useState(false),
|
22749 | focusVisible = _React$useState[0],
|
22750 | setFocusVisible = _React$useState[1];
|
22751 |
|
22752 | var handlerRef = useForkRef(ref, focusVisibleRef);
|
22753 |
|
22754 | var handleBlur = function handleBlur(event) {
|
22755 | if (focusVisible) {
|
22756 | onBlurVisible();
|
22757 | setFocusVisible(false);
|
22758 | }
|
22759 |
|
22760 | if (onBlur) {
|
22761 | onBlur(event);
|
22762 | }
|
22763 | };
|
22764 |
|
22765 | var handleFocus = function handleFocus(event) {
|
22766 | if (isFocusVisible(event)) {
|
22767 | setFocusVisible(true);
|
22768 | }
|
22769 |
|
22770 | if (onFocus) {
|
22771 | onFocus(event);
|
22772 | }
|
22773 | };
|
22774 |
|
22775 | return React__default.createElement(Typography$1, _extends({
|
22776 | className: clsx(classes.root, classes["underline".concat(capitalize(underline))], className, focusVisible && classes.focusVisible, {
|
22777 | button: classes.button
|
22778 | }[component]),
|
22779 | classes: TypographyClasses,
|
22780 | color: color,
|
22781 | component: component,
|
22782 | onBlur: handleBlur,
|
22783 | onFocus: handleFocus,
|
22784 | ref: handlerRef,
|
22785 | variant: variant
|
22786 | }, other));
|
22787 | });
|
22788 | Link.propTypes = {
|
22789 | |
22790 |
|
22791 |
|
22792 | children: propTypes.node.isRequired,
|
22793 |
|
22794 | |
22795 |
|
22796 |
|
22797 |
|
22798 | classes: propTypes.object.isRequired,
|
22799 |
|
22800 | |
22801 |
|
22802 |
|
22803 | className: propTypes.string,
|
22804 |
|
22805 | |
22806 |
|
22807 |
|
22808 | color: propTypes.oneOf(['default', 'error', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary']),
|
22809 |
|
22810 | |
22811 |
|
22812 |
|
22813 |
|
22814 | component: elementTypeAcceptingRef$1,
|
22815 |
|
22816 | |
22817 |
|
22818 |
|
22819 | onBlur: propTypes.func,
|
22820 |
|
22821 | |
22822 |
|
22823 |
|
22824 | onFocus: propTypes.func,
|
22825 |
|
22826 | |
22827 |
|
22828 |
|
22829 | TypographyClasses: propTypes.object,
|
22830 |
|
22831 | |
22832 |
|
22833 |
|
22834 | underline: propTypes.oneOf(['none', 'hover', 'always']),
|
22835 |
|
22836 | |
22837 |
|
22838 |
|
22839 | variant: propTypes.string
|
22840 | } ;
|
22841 | var Link$1 = withStyles$1(styles$$, {
|
22842 | name: 'MuiLink'
|
22843 | })(Link);
|
22844 |
|
22845 | |
22846 |
|
22847 |
|
22848 |
|
22849 | var ListContext = React__default.createContext({});
|
22850 |
|
22851 | {
|
22852 | ListContext.displayName = 'ListContext';
|
22853 | }
|
22854 |
|
22855 | var styles$10 = {
|
22856 |
|
22857 | root: {
|
22858 | listStyle: 'none',
|
22859 | margin: 0,
|
22860 | padding: 0,
|
22861 | position: 'relative'
|
22862 | },
|
22863 |
|
22864 |
|
22865 | padding: {
|
22866 | paddingTop: 8,
|
22867 | paddingBottom: 8
|
22868 | },
|
22869 |
|
22870 |
|
22871 | dense: {},
|
22872 |
|
22873 |
|
22874 | subheader: {
|
22875 | paddingTop: 0
|
22876 | }
|
22877 | };
|
22878 | var List = React__default.forwardRef(function List(props, ref) {
|
22879 | var children = props.children,
|
22880 | classes = props.classes,
|
22881 | className = props.className,
|
22882 | _props$component = props.component,
|
22883 | Component = _props$component === void 0 ? 'ul' : _props$component,
|
22884 | _props$dense = props.dense,
|
22885 | dense = _props$dense === void 0 ? false : _props$dense,
|
22886 | _props$disablePadding = props.disablePadding,
|
22887 | disablePadding = _props$disablePadding === void 0 ? false : _props$disablePadding,
|
22888 | subheader = props.subheader,
|
22889 | other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "dense", "disablePadding", "subheader"]);
|
22890 |
|
22891 | var context = React__default.useMemo(function () {
|
22892 | return {
|
22893 | dense: dense
|
22894 | };
|
22895 | }, [dense]);
|
22896 | return React__default.createElement(ListContext.Provider, {
|
22897 | value: context
|
22898 | }, React__default.createElement(Component, _extends({
|
22899 | className: clsx(classes.root, className, dense && classes.dense, !disablePadding && classes.padding, subheader && classes.subheader),
|
22900 | ref: ref
|
22901 | }, other), subheader, children));
|
22902 | });
|
22903 | List.propTypes = {
|
22904 | |
22905 |
|
22906 |
|
22907 | children: propTypes.node,
|
22908 |
|
22909 | |
22910 |
|
22911 |
|
22912 |
|
22913 | classes: propTypes.object.isRequired,
|
22914 |
|
22915 | |
22916 |
|
22917 |
|
22918 | className: propTypes.string,
|
22919 |
|
22920 | |
22921 |
|
22922 |
|
22923 |
|
22924 | component: propTypes.elementType,
|
22925 |
|
22926 | |
22927 |
|
22928 |
|
22929 |
|
22930 |
|
22931 | dense: propTypes.bool,
|
22932 |
|
22933 | |
22934 |
|
22935 |
|
22936 | disablePadding: propTypes.bool,
|
22937 |
|
22938 | |
22939 |
|
22940 |
|
22941 | subheader: propTypes.node
|
22942 | } ;
|
22943 | var List$1 = withStyles$1(styles$10, {
|
22944 | name: 'MuiList'
|
22945 | })(List);
|
22946 |
|
22947 | var styles$11 = function styles(theme) {
|
22948 | return {
|
22949 |
|
22950 | root: {
|
22951 | display: 'flex',
|
22952 | justifyContent: 'flex-start',
|
22953 | alignItems: 'center',
|
22954 | position: 'relative',
|
22955 | textDecoration: 'none',
|
22956 | width: '100%',
|
22957 | boxSizing: 'border-box',
|
22958 | textAlign: 'left',
|
22959 | paddingTop: 8,
|
22960 | paddingBottom: 8,
|
22961 | '&$focusVisible': {
|
22962 | backgroundColor: theme.palette.action.selected
|
22963 | },
|
22964 | '&$selected, &$selected:hover': {
|
22965 | backgroundColor: theme.palette.action.selected
|
22966 | },
|
22967 | '&$disabled': {
|
22968 | opacity: 0.5
|
22969 | }
|
22970 | },
|
22971 |
|
22972 |
|
22973 | container: {
|
22974 | position: 'relative'
|
22975 | },
|
22976 |
|
22977 |
|
22978 | focusVisible: {},
|
22979 |
|
22980 |
|
22981 | dense: {
|
22982 | paddingTop: 4,
|
22983 | paddingBottom: 4
|
22984 | },
|
22985 |
|
22986 |
|
22987 | alignItemsFlexStart: {
|
22988 | alignItems: 'flex-start'
|
22989 | },
|
22990 |
|
22991 |
|
22992 | disabled: {},
|
22993 |
|
22994 |
|
22995 | divider: {
|
22996 | borderBottom: "1px solid ".concat(theme.palette.divider),
|
22997 | backgroundClip: 'padding-box'
|
22998 | },
|
22999 |
|
23000 |
|
23001 | gutters: {
|
23002 | paddingLeft: 16,
|
23003 | paddingRight: 16
|
23004 | },
|
23005 |
|
23006 |
|
23007 | button: {
|
23008 | transition: theme.transitions.create('background-color', {
|
23009 | duration: theme.transitions.duration.shortest
|
23010 | }),
|
23011 | '&:hover': {
|
23012 | textDecoration: 'none',
|
23013 | backgroundColor: theme.palette.action.hover,
|
23014 |
|
23015 | '@media (hover: none)': {
|
23016 | backgroundColor: 'transparent'
|
23017 | }
|
23018 | }
|
23019 | },
|
23020 |
|
23021 |
|
23022 | secondaryAction: {
|
23023 |
|
23024 |
|
23025 | paddingRight: 48
|
23026 | },
|
23027 |
|
23028 |
|
23029 | selected: {}
|
23030 | };
|
23031 | };
|
23032 | var useEnhancedEffect$7 = typeof window === 'undefined' ? React__default.useEffect : React__default.useLayoutEffect;
|
23033 | |
23034 |
|
23035 |
|
23036 |
|
23037 | var ListItem = React__default.forwardRef(function ListItem(props, ref) {
|
23038 | var _props$alignItems = props.alignItems,
|
23039 | alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,
|
23040 | _props$autoFocus = props.autoFocus,
|
23041 | autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
|
23042 | _props$button = props.button,
|
23043 | button = _props$button === void 0 ? false : _props$button,
|
23044 | childrenProp = props.children,
|
23045 | classes = props.classes,
|
23046 | className = props.className,
|
23047 | componentProp = props.component,
|
23048 | _props$ContainerCompo = props.ContainerComponent,
|
23049 | ContainerComponent = _props$ContainerCompo === void 0 ? 'li' : _props$ContainerCompo,
|
23050 | _props$ContainerProps = props.ContainerProps;
|
23051 | _props$ContainerProps = _props$ContainerProps === void 0 ? {} : _props$ContainerProps;
|
23052 |
|
23053 | var ContainerClassName = _props$ContainerProps.className,
|
23054 | ContainerProps = _objectWithoutProperties(_props$ContainerProps, ["className"]),
|
23055 | _props$dense = props.dense,
|
23056 | dense = _props$dense === void 0 ? false : _props$dense,
|
23057 | _props$disabled = props.disabled,
|
23058 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
23059 | _props$disableGutters = props.disableGutters,
|
23060 | disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
|
23061 | _props$divider = props.divider,
|
23062 | divider = _props$divider === void 0 ? false : _props$divider,
|
23063 | focusVisibleClassName = props.focusVisibleClassName,
|
23064 | _props$selected = props.selected,
|
23065 | selected = _props$selected === void 0 ? false : _props$selected,
|
23066 | other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "button", "children", "classes", "className", "component", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "divider", "focusVisibleClassName", "selected"]);
|
23067 |
|
23068 | var context = React__default.useContext(ListContext);
|
23069 | var childContext = {
|
23070 | dense: dense || context.dense || false,
|
23071 | alignItems: alignItems
|
23072 | };
|
23073 | var listItemRef = React__default.useRef(null);
|
23074 | useEnhancedEffect$7(function () {
|
23075 | if (autoFocus) {
|
23076 | if (listItemRef.current) {
|
23077 | listItemRef.current.focus();
|
23078 | } else {
|
23079 | console.error('Material-UI: unable to set focus to a ListItem whose component has not been rendered.');
|
23080 | }
|
23081 | }
|
23082 | }, [autoFocus]);
|
23083 | var children = React__default.Children.toArray(childrenProp);
|
23084 | var hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
|
23085 | var handleOwnRef = React__default.useCallback(function (instance) {
|
23086 |
|
23087 | listItemRef.current = ReactDOM.findDOMNode(instance);
|
23088 | }, []);
|
23089 | var handleRef = useForkRef(handleOwnRef, ref);
|
23090 |
|
23091 | var componentProps = _extends({
|
23092 | className: clsx(classes.root, className, childContext.dense && classes.dense, !disableGutters && classes.gutters, divider && classes.divider, disabled && classes.disabled, button && classes.button, alignItems !== "center" && classes.alignItemsFlexStart, hasSecondaryAction && classes.secondaryAction, selected && classes.selected),
|
23093 | disabled: disabled
|
23094 | }, other);
|
23095 |
|
23096 | var Component = componentProp || 'li';
|
23097 |
|
23098 | if (button) {
|
23099 | componentProps.component = componentProp || 'div';
|
23100 | componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);
|
23101 | Component = ButtonBase$1;
|
23102 | }
|
23103 |
|
23104 | if (hasSecondaryAction) {
|
23105 |
|
23106 | Component = !componentProps.component && !componentProp ? 'div' : Component;
|
23107 |
|
23108 | if (ContainerComponent === 'li') {
|
23109 | if (Component === 'li') {
|
23110 | Component = 'div';
|
23111 | } else if (componentProps.component === 'li') {
|
23112 | componentProps.component = 'div';
|
23113 | }
|
23114 | }
|
23115 |
|
23116 | return React__default.createElement(ListContext.Provider, {
|
23117 | value: childContext
|
23118 | }, React__default.createElement(ContainerComponent, _extends({
|
23119 | className: clsx(classes.container, ContainerClassName),
|
23120 | ref: handleRef
|
23121 | }, ContainerProps), React__default.createElement(Component, componentProps, children), children.pop()));
|
23122 | }
|
23123 |
|
23124 | return React__default.createElement(ListContext.Provider, {
|
23125 | value: childContext
|
23126 | }, React__default.createElement(Component, _extends({
|
23127 | ref: handleRef
|
23128 | }, componentProps), children));
|
23129 | });
|
23130 | ListItem.propTypes = {
|
23131 | |
23132 |
|
23133 |
|
23134 | alignItems: propTypes.oneOf(['flex-start', 'center']),
|
23135 |
|
23136 | |
23137 |
|
23138 |
|
23139 |
|
23140 | autoFocus: propTypes.bool,
|
23141 |
|
23142 | |
23143 |
|
23144 |
|
23145 |
|
23146 | button: propTypes.bool,
|
23147 |
|
23148 | |
23149 |
|
23150 |
|
23151 |
|
23152 | children: chainPropTypes(propTypes.node, function (props) {
|
23153 | var children = React__default.Children.toArray(props.children);
|
23154 |
|
23155 | var secondaryActionIndex = -1;
|
23156 |
|
23157 | for (var i = children.length - 1; i >= 0; i -= 1) {
|
23158 | var child = children[i];
|
23159 |
|
23160 | if (isMuiElement(child, ['ListItemSecondaryAction'])) {
|
23161 | secondaryActionIndex = i;
|
23162 | break;
|
23163 | }
|
23164 | }
|
23165 |
|
23166 |
|
23167 | if (secondaryActionIndex !== -1 && secondaryActionIndex !== children.length - 1) {
|
23168 | return new Error('Material-UI: you used an element after ListItemSecondaryAction. ' + 'For ListItem to detect that it has a secondary action ' + 'you must pass it as the last child to ListItem.');
|
23169 | }
|
23170 |
|
23171 | return null;
|
23172 | }),
|
23173 |
|
23174 | |
23175 |
|
23176 |
|
23177 |
|
23178 | classes: propTypes.object.isRequired,
|
23179 |
|
23180 | |
23181 |
|
23182 |
|
23183 | className: propTypes.string,
|
23184 |
|
23185 | |
23186 |
|
23187 |
|
23188 |
|
23189 |
|
23190 | component: propTypes.elementType,
|
23191 |
|
23192 | |
23193 |
|
23194 |
|
23195 | ContainerComponent: propTypes.elementType,
|
23196 |
|
23197 | |
23198 |
|
23199 |
|
23200 | ContainerProps: propTypes.object,
|
23201 |
|
23202 | |
23203 |
|
23204 |
|
23205 | dense: propTypes.bool,
|
23206 |
|
23207 | |
23208 |
|
23209 |
|
23210 | disabled: propTypes.bool,
|
23211 |
|
23212 | |
23213 |
|
23214 |
|
23215 | disableGutters: propTypes.bool,
|
23216 |
|
23217 | |
23218 |
|
23219 |
|
23220 | divider: propTypes.bool,
|
23221 |
|
23222 | |
23223 |
|
23224 |
|
23225 | focusVisibleClassName: propTypes.string,
|
23226 |
|
23227 | |
23228 |
|
23229 |
|
23230 | selected: propTypes.bool
|
23231 | } ;
|
23232 | var ListItem$1 = withStyles$1(styles$11, {
|
23233 | name: 'MuiListItem'
|
23234 | })(ListItem);
|
23235 |
|
23236 | var styles$12 = {
|
23237 |
|
23238 | root: {
|
23239 | minWidth: 56,
|
23240 | flexShrink: 0
|
23241 | },
|
23242 |
|
23243 |
|
23244 | alignItemsFlexStart: {
|
23245 | marginTop: 8
|
23246 | }
|
23247 | };
|
23248 | |
23249 |
|
23250 |
|
23251 |
|
23252 | var ListItemAvatar = React__default.forwardRef(function ListItemAvatar(props, ref) {
|
23253 | var classes = props.classes,
|
23254 | className = props.className,
|
23255 | other = _objectWithoutProperties(props, ["classes", "className"]);
|
23256 |
|
23257 | var context = React__default.useContext(ListContext);
|
23258 | return React__default.createElement("div", _extends({
|
23259 | className: clsx(classes.root, className, context.alignItems === 'flex-start' && classes.alignItemsFlexStart),
|
23260 | ref: ref
|
23261 | }, other));
|
23262 | });
|
23263 | ListItemAvatar.propTypes = {
|
23264 | |
23265 |
|
23266 |
|
23267 | children: propTypes.element.isRequired,
|
23268 |
|
23269 | |
23270 |
|
23271 |
|
23272 |
|
23273 | classes: propTypes.object.isRequired,
|
23274 |
|
23275 | |
23276 |
|
23277 |
|
23278 | className: propTypes.string
|
23279 | } ;
|
23280 | var ListItemAvatar$1 = withStyles$1(styles$12, {
|
23281 | name: 'MuiListItemAvatar'
|
23282 | })(ListItemAvatar);
|
23283 |
|
23284 | var styles$13 = function styles(theme) {
|
23285 | return {
|
23286 |
|
23287 | root: {
|
23288 | minWidth: 56,
|
23289 | color: theme.palette.action.active,
|
23290 | flexShrink: 0,
|
23291 | display: 'inline-flex'
|
23292 | },
|
23293 |
|
23294 |
|
23295 | alignItemsFlexStart: {
|
23296 | marginTop: 8
|
23297 | }
|
23298 | };
|
23299 | };
|
23300 | |
23301 |
|
23302 |
|
23303 |
|
23304 | var ListItemIcon = React__default.forwardRef(function ListItemIcon(props, ref) {
|
23305 | var classes = props.classes,
|
23306 | className = props.className,
|
23307 | other = _objectWithoutProperties(props, ["classes", "className"]);
|
23308 |
|
23309 | var context = React__default.useContext(ListContext);
|
23310 | return React__default.createElement("div", _extends({
|
23311 | className: clsx(classes.root, className, context.alignItems === 'flex-start' && classes.alignItemsFlexStart),
|
23312 | ref: ref
|
23313 | }, other));
|
23314 | });
|
23315 | ListItemIcon.propTypes = {
|
23316 | |
23317 |
|
23318 |
|
23319 |
|
23320 | children: propTypes.element.isRequired,
|
23321 |
|
23322 | |
23323 |
|
23324 |
|
23325 |
|
23326 | classes: propTypes.object.isRequired,
|
23327 |
|
23328 | |
23329 |
|
23330 |
|
23331 | className: propTypes.string
|
23332 | } ;
|
23333 | var ListItemIcon$1 = withStyles$1(styles$13, {
|
23334 | name: 'MuiListItemIcon'
|
23335 | })(ListItemIcon);
|
23336 |
|
23337 | var styles$14 = {
|
23338 |
|
23339 | root: {
|
23340 | position: 'absolute',
|
23341 | right: 16,
|
23342 | top: '50%',
|
23343 | transform: 'translateY(-50%)'
|
23344 | }
|
23345 | };
|
23346 | |
23347 |
|
23348 |
|
23349 |
|
23350 | var ListItemSecondaryAction = React__default.forwardRef(function ListItemSecondaryAction(props, ref) {
|
23351 | var classes = props.classes,
|
23352 | className = props.className,
|
23353 | other = _objectWithoutProperties(props, ["classes", "className"]);
|
23354 |
|
23355 | return React__default.createElement("div", _extends({
|
23356 | className: clsx(classes.root, className),
|
23357 | ref: ref
|
23358 | }, other));
|
23359 | });
|
23360 | ListItemSecondaryAction.propTypes = {
|
23361 | |
23362 |
|
23363 |
|
23364 | children: propTypes.node,
|
23365 |
|
23366 | |
23367 |
|
23368 |
|
23369 |
|
23370 | classes: propTypes.object.isRequired,
|
23371 |
|
23372 | |
23373 |
|
23374 |
|
23375 | className: propTypes.string
|
23376 | } ;
|
23377 | ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
|
23378 | var ListItemSecondaryAction$1 = withStyles$1(styles$14, {
|
23379 | name: 'MuiListItemSecondaryAction'
|
23380 | })(ListItemSecondaryAction);
|
23381 |
|
23382 | var styles$15 = {
|
23383 |
|
23384 | root: {
|
23385 | flex: '1 1 auto',
|
23386 | minWidth: 0,
|
23387 | marginTop: 4,
|
23388 | marginBottom: 4
|
23389 | },
|
23390 |
|
23391 |
|
23392 | multiline: {
|
23393 | marginTop: 6,
|
23394 | marginBottom: 6
|
23395 | },
|
23396 |
|
23397 |
|
23398 | dense: {},
|
23399 |
|
23400 |
|
23401 | inset: {
|
23402 | paddingLeft: 56
|
23403 | },
|
23404 |
|
23405 |
|
23406 | primary: {},
|
23407 |
|
23408 |
|
23409 | secondary: {}
|
23410 | };
|
23411 | var ListItemText = React__default.forwardRef(function ListItemText(props, ref) {
|
23412 | var children = props.children,
|
23413 | classes = props.classes,
|
23414 | className = props.className,
|
23415 | _props$disableTypogra = props.disableTypography,
|
23416 | disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
|
23417 | _props$inset = props.inset,
|
23418 | inset = _props$inset === void 0 ? false : _props$inset,
|
23419 | primaryProp = props.primary,
|
23420 | primaryTypographyProps = props.primaryTypographyProps,
|
23421 | secondaryProp = props.secondary,
|
23422 | secondaryTypographyProps = props.secondaryTypographyProps,
|
23423 | other = _objectWithoutProperties(props, ["children", "classes", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"]);
|
23424 |
|
23425 | var _React$useContext = React__default.useContext(ListContext),
|
23426 | dense = _React$useContext.dense;
|
23427 |
|
23428 | var primary = primaryProp != null ? primaryProp : children;
|
23429 |
|
23430 | if (primary != null && primary.type !== Typography$1 && !disableTypography) {
|
23431 | primary = React__default.createElement(Typography$1, _extends({
|
23432 | variant: dense ? 'body2' : 'body1',
|
23433 | className: classes.primary,
|
23434 | component: "span"
|
23435 | }, primaryTypographyProps), primary);
|
23436 | }
|
23437 |
|
23438 | var secondary = secondaryProp;
|
23439 |
|
23440 | if (secondary != null && secondary.type !== Typography$1 && !disableTypography) {
|
23441 | secondary = React__default.createElement(Typography$1, _extends({
|
23442 | variant: "body2",
|
23443 | className: classes.secondary,
|
23444 | color: "textSecondary"
|
23445 | }, secondaryTypographyProps), secondary);
|
23446 | }
|
23447 |
|
23448 | return React__default.createElement("div", _extends({
|
23449 | className: clsx(classes.root, className, dense && classes.dense, inset && classes.inset, primary && secondary && classes.multiline),
|
23450 | ref: ref
|
23451 | }, other), primary, secondary);
|
23452 | });
|
23453 | ListItemText.propTypes = {
|
23454 | |
23455 |
|
23456 |
|
23457 | children: propTypes.node,
|
23458 |
|
23459 | |
23460 |
|
23461 |
|
23462 |
|
23463 | classes: propTypes.object.isRequired,
|
23464 |
|
23465 | |
23466 |
|
23467 |
|
23468 | className: propTypes.string,
|
23469 |
|
23470 | |
23471 |
|
23472 |
|
23473 |
|
23474 |
|
23475 |
|
23476 | disableTypography: propTypes.bool,
|
23477 |
|
23478 | |
23479 |
|
23480 |
|
23481 |
|
23482 | inset: propTypes.bool,
|
23483 |
|
23484 | |
23485 |
|
23486 |
|
23487 | primary: propTypes.node,
|
23488 |
|
23489 | |
23490 |
|
23491 |
|
23492 |
|
23493 | primaryTypographyProps: propTypes.object,
|
23494 |
|
23495 | |
23496 |
|
23497 |
|
23498 | secondary: propTypes.node,
|
23499 |
|
23500 | |
23501 |
|
23502 |
|
23503 |
|
23504 | secondaryTypographyProps: propTypes.object
|
23505 | } ;
|
23506 | var ListItemText$1 = withStyles$1(styles$15, {
|
23507 | name: 'MuiListItemText'
|
23508 | })(ListItemText);
|
23509 |
|
23510 | var styles$16 = function styles(theme) {
|
23511 | return {
|
23512 |
|
23513 | root: {
|
23514 | boxSizing: 'border-box',
|
23515 | lineHeight: '48px',
|
23516 | listStyle: 'none',
|
23517 | color: theme.palette.text.secondary,
|
23518 | fontFamily: theme.typography.fontFamily,
|
23519 | fontWeight: theme.typography.fontWeightMedium,
|
23520 | fontSize: theme.typography.pxToRem(14)
|
23521 | },
|
23522 |
|
23523 |
|
23524 | colorPrimary: {
|
23525 | color: theme.palette.primary.main
|
23526 | },
|
23527 |
|
23528 |
|
23529 | colorInherit: {
|
23530 | color: 'inherit'
|
23531 | },
|
23532 |
|
23533 |
|
23534 | gutters: {
|
23535 | paddingLeft: 16,
|
23536 | paddingRight: 16
|
23537 | },
|
23538 |
|
23539 |
|
23540 | inset: {
|
23541 | paddingLeft: 72
|
23542 | },
|
23543 |
|
23544 |
|
23545 | sticky: {
|
23546 | position: 'sticky',
|
23547 | top: 0,
|
23548 | zIndex: 1,
|
23549 | backgroundColor: 'inherit'
|
23550 | }
|
23551 | };
|
23552 | };
|
23553 | var ListSubheader = React__default.forwardRef(function ListSubheader(props, ref) {
|
23554 | var classes = props.classes,
|
23555 | className = props.className,
|
23556 | _props$color = props.color,
|
23557 | color = _props$color === void 0 ? 'default' : _props$color,
|
23558 | _props$component = props.component,
|
23559 | Component = _props$component === void 0 ? 'li' : _props$component,
|
23560 | _props$disableGutters = props.disableGutters,
|
23561 | disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
|
23562 | _props$disableSticky = props.disableSticky,
|
23563 | disableSticky = _props$disableSticky === void 0 ? false : _props$disableSticky,
|
23564 | _props$inset = props.inset,
|
23565 | inset = _props$inset === void 0 ? false : _props$inset,
|
23566 | other = _objectWithoutProperties(props, ["classes", "className", "color", "component", "disableGutters", "disableSticky", "inset"]);
|
23567 |
|
23568 | return React__default.createElement(Component, _extends({
|
23569 | className: clsx(classes.root, className, color !== 'default' && classes["color".concat(capitalize(color))], inset && classes.inset, !disableSticky && classes.sticky, !disableGutters && classes.gutters),
|
23570 | ref: ref
|
23571 | }, other));
|
23572 | });
|
23573 | ListSubheader.propTypes = {
|
23574 | |
23575 |
|
23576 |
|
23577 | children: propTypes.node,
|
23578 |
|
23579 | |
23580 |
|
23581 |
|
23582 |
|
23583 | classes: propTypes.object.isRequired,
|
23584 |
|
23585 | |
23586 |
|
23587 |
|
23588 | className: propTypes.string,
|
23589 |
|
23590 | |
23591 |
|
23592 |
|
23593 | color: propTypes.oneOf(['default', 'primary', 'inherit']),
|
23594 |
|
23595 | |
23596 |
|
23597 |
|
23598 |
|
23599 | component: propTypes.elementType,
|
23600 |
|
23601 | |
23602 |
|
23603 |
|
23604 | disableGutters: propTypes.bool,
|
23605 |
|
23606 | |
23607 |
|
23608 |
|
23609 | disableSticky: propTypes.bool,
|
23610 |
|
23611 | |
23612 |
|
23613 |
|
23614 | inset: propTypes.bool
|
23615 | } ;
|
23616 | var ListSubheader$1 = withStyles$1(styles$16, {
|
23617 | name: 'MuiListSubheader'
|
23618 | })(ListSubheader);
|
23619 |
|
23620 | function getOffsetTop(rect, vertical) {
|
23621 | var offset = 0;
|
23622 |
|
23623 | if (typeof vertical === 'number') {
|
23624 | offset = vertical;
|
23625 | } else if (vertical === 'center') {
|
23626 | offset = rect.height / 2;
|
23627 | } else if (vertical === 'bottom') {
|
23628 | offset = rect.height;
|
23629 | }
|
23630 |
|
23631 | return offset;
|
23632 | }
|
23633 | function getOffsetLeft(rect, horizontal) {
|
23634 | var offset = 0;
|
23635 |
|
23636 | if (typeof horizontal === 'number') {
|
23637 | offset = horizontal;
|
23638 | } else if (horizontal === 'center') {
|
23639 | offset = rect.width / 2;
|
23640 | } else if (horizontal === 'right') {
|
23641 | offset = rect.width;
|
23642 | }
|
23643 |
|
23644 | return offset;
|
23645 | }
|
23646 |
|
23647 | function getTransformOriginValue(transformOrigin) {
|
23648 | return [transformOrigin.horizontal, transformOrigin.vertical].map(function (n) {
|
23649 | return typeof n === 'number' ? "".concat(n, "px") : n;
|
23650 | }).join(' ');
|
23651 | }
|
23652 |
|
23653 |
|
23654 | function getScrollParent(parent, child) {
|
23655 | var element = child;
|
23656 | var scrollTop = 0;
|
23657 |
|
23658 | while (element && element !== parent) {
|
23659 | element = element.parentElement;
|
23660 | scrollTop += element.scrollTop;
|
23661 | }
|
23662 |
|
23663 | return scrollTop;
|
23664 | }
|
23665 |
|
23666 | function getAnchorEl(anchorEl) {
|
23667 | return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
|
23668 | }
|
23669 |
|
23670 | var styles$17 = {
|
23671 |
|
23672 | root: {},
|
23673 |
|
23674 |
|
23675 | paper: {
|
23676 | position: 'absolute',
|
23677 | overflowY: 'auto',
|
23678 | overflowX: 'hidden',
|
23679 |
|
23680 |
|
23681 | minWidth: 16,
|
23682 | minHeight: 16,
|
23683 | maxWidth: 'calc(100% - 32px)',
|
23684 | maxHeight: 'calc(100% - 32px)',
|
23685 |
|
23686 | outline: 0
|
23687 | }
|
23688 | };
|
23689 | var Popover = React__default.forwardRef(function Popover(props, ref) {
|
23690 | var action = props.action,
|
23691 | anchorEl = props.anchorEl,
|
23692 | _props$anchorOrigin = props.anchorOrigin,
|
23693 | anchorOrigin = _props$anchorOrigin === void 0 ? {
|
23694 | vertical: 'top',
|
23695 | horizontal: 'left'
|
23696 | } : _props$anchorOrigin,
|
23697 | anchorPosition = props.anchorPosition,
|
23698 | _props$anchorReferenc = props.anchorReference,
|
23699 | anchorReference = _props$anchorReferenc === void 0 ? 'anchorEl' : _props$anchorReferenc,
|
23700 | children = props.children,
|
23701 | classes = props.classes,
|
23702 | className = props.className,
|
23703 | containerProp = props.container,
|
23704 | _props$elevation = props.elevation,
|
23705 | elevation = _props$elevation === void 0 ? 8 : _props$elevation,
|
23706 | getContentAnchorEl = props.getContentAnchorEl,
|
23707 | _props$marginThreshol = props.marginThreshold,
|
23708 | marginThreshold = _props$marginThreshol === void 0 ? 16 : _props$marginThreshol,
|
23709 | onEnter = props.onEnter,
|
23710 | onEntered = props.onEntered,
|
23711 | onEntering = props.onEntering,
|
23712 | onExit = props.onExit,
|
23713 | onExited = props.onExited,
|
23714 | onExiting = props.onExiting,
|
23715 | open = props.open,
|
23716 | _props$PaperProps = props.PaperProps,
|
23717 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
23718 | _props$transformOrigi = props.transformOrigin,
|
23719 | transformOrigin = _props$transformOrigi === void 0 ? {
|
23720 | vertical: 'top',
|
23721 | horizontal: 'left'
|
23722 | } : _props$transformOrigi,
|
23723 | _props$TransitionComp = props.TransitionComponent,
|
23724 | TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
|
23725 | _props$transitionDura = props.transitionDuration,
|
23726 | transitionDurationProp = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
|
23727 | _props$TransitionProp = props.TransitionProps,
|
23728 | TransitionProps = _props$TransitionProp === void 0 ? {} : _props$TransitionProp,
|
23729 | other = _objectWithoutProperties(props, ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "classes", "className", "container", "elevation", "getContentAnchorEl", "marginThreshold", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"]);
|
23730 |
|
23731 | var paperRef = React__default.useRef();
|
23732 |
|
23733 |
|
23734 | var getAnchorOffset = React__default.useCallback(function (contentAnchorOffset) {
|
23735 | if (anchorReference === 'anchorPosition') {
|
23736 | {
|
23737 | if (!anchorPosition) {
|
23738 | console.error('Material-UI: you need to provide a `anchorPosition` prop when using ' + '<Popover anchorReference="anchorPosition" />.');
|
23739 | }
|
23740 | }
|
23741 |
|
23742 | return anchorPosition;
|
23743 | }
|
23744 |
|
23745 | var resolvedAnchorEl = getAnchorEl(anchorEl);
|
23746 | var containerWindow = ownerWindow(resolvedAnchorEl);
|
23747 |
|
23748 | var anchorElement = resolvedAnchorEl instanceof containerWindow.Element ? resolvedAnchorEl : ownerDocument(paperRef.current).body;
|
23749 | var anchorRect = anchorElement.getBoundingClientRect();
|
23750 |
|
23751 | {
|
23752 | var box = anchorElement.getBoundingClientRect();
|
23753 |
|
23754 | if ( box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
23755 | console.warn(['Material-UI: the `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
|
23756 | }
|
23757 | }
|
23758 |
|
23759 | var anchorVertical = contentAnchorOffset === 0 ? anchorOrigin.vertical : 'center';
|
23760 | return {
|
23761 | top: anchorRect.top + getOffsetTop(anchorRect, anchorVertical),
|
23762 | left: anchorRect.left + getOffsetLeft(anchorRect, anchorOrigin.horizontal)
|
23763 | };
|
23764 | }, [anchorEl, anchorOrigin.horizontal, anchorOrigin.vertical, anchorPosition, anchorReference]);
|
23765 |
|
23766 | var getContentAnchorOffset = React__default.useCallback(function (element) {
|
23767 | var contentAnchorOffset = 0;
|
23768 |
|
23769 | if (getContentAnchorEl && anchorReference === 'anchorEl') {
|
23770 | var contentAnchorEl = getContentAnchorEl(element);
|
23771 |
|
23772 | if (contentAnchorEl && element.contains(contentAnchorEl)) {
|
23773 | var scrollTop = getScrollParent(element, contentAnchorEl);
|
23774 | contentAnchorOffset = contentAnchorEl.offsetTop + contentAnchorEl.clientHeight / 2 - scrollTop || 0;
|
23775 | }
|
23776 |
|
23777 |
|
23778 | {
|
23779 | if (anchorOrigin.vertical !== 'top') {
|
23780 | console.error(['Material-UI: you can not change the default `anchorOrigin.vertical` value ', 'when also providing the `getContentAnchorEl` prop to the popover component.', 'Only use one of the two props.', 'Set `getContentAnchorEl` to `null | undefined`' + ' or leave `anchorOrigin.vertical` unchanged.'].join('\n'));
|
23781 | }
|
23782 | }
|
23783 | }
|
23784 |
|
23785 | return contentAnchorOffset;
|
23786 | }, [anchorOrigin.vertical, anchorReference, getContentAnchorEl]);
|
23787 |
|
23788 |
|
23789 | var getTransformOrigin = React__default.useCallback(function (elemRect) {
|
23790 | var contentAnchorOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
23791 | return {
|
23792 | vertical: getOffsetTop(elemRect, transformOrigin.vertical) + contentAnchorOffset,
|
23793 | horizontal: getOffsetLeft(elemRect, transformOrigin.horizontal)
|
23794 | };
|
23795 | }, [transformOrigin.horizontal, transformOrigin.vertical]);
|
23796 | var getPositioningStyle = React__default.useCallback(function (element) {
|
23797 |
|
23798 | var contentAnchorOffset = getContentAnchorOffset(element);
|
23799 | var elemRect = {
|
23800 | width: element.offsetWidth,
|
23801 | height: element.offsetHeight
|
23802 | };
|
23803 |
|
23804 | var elemTransformOrigin = getTransformOrigin(elemRect, contentAnchorOffset);
|
23805 |
|
23806 | if (anchorReference === 'none') {
|
23807 | return {
|
23808 | top: null,
|
23809 | left: null,
|
23810 | transformOrigin: getTransformOriginValue(elemTransformOrigin)
|
23811 | };
|
23812 | }
|
23813 |
|
23814 |
|
23815 | var anchorOffset = getAnchorOffset(contentAnchorOffset);
|
23816 |
|
23817 | var top = anchorOffset.top - elemTransformOrigin.vertical;
|
23818 | var left = anchorOffset.left - elemTransformOrigin.horizontal;
|
23819 | var bottom = top + elemRect.height;
|
23820 | var right = left + elemRect.width;
|
23821 |
|
23822 | var containerWindow = ownerWindow(getAnchorEl(anchorEl));
|
23823 |
|
23824 | var heightThreshold = containerWindow.innerHeight - marginThreshold;
|
23825 | var widthThreshold = containerWindow.innerWidth - marginThreshold;
|
23826 |
|
23827 | if (top < marginThreshold) {
|
23828 | var diff = top - marginThreshold;
|
23829 | top -= diff;
|
23830 | elemTransformOrigin.vertical += diff;
|
23831 | } else if (bottom > heightThreshold) {
|
23832 | var _diff = bottom - heightThreshold;
|
23833 |
|
23834 | top -= _diff;
|
23835 | elemTransformOrigin.vertical += _diff;
|
23836 | }
|
23837 |
|
23838 | {
|
23839 | if (elemRect.height > heightThreshold && elemRect.height && heightThreshold) {
|
23840 | console.error(['Material-UI: the popover component is too tall.', "Some part of it can not be seen on the screen (".concat(elemRect.height - heightThreshold, "px)."), 'Please consider adding a `max-height` to improve the user-experience.'].join('\n'));
|
23841 | }
|
23842 | }
|
23843 |
|
23844 |
|
23845 | if (left < marginThreshold) {
|
23846 | var _diff2 = left - marginThreshold;
|
23847 |
|
23848 | left -= _diff2;
|
23849 | elemTransformOrigin.horizontal += _diff2;
|
23850 | } else if (right > widthThreshold) {
|
23851 | var _diff3 = right - widthThreshold;
|
23852 |
|
23853 | left -= _diff3;
|
23854 | elemTransformOrigin.horizontal += _diff3;
|
23855 | }
|
23856 |
|
23857 | return {
|
23858 | top: "".concat(top, "px"),
|
23859 | left: "".concat(left, "px"),
|
23860 | transformOrigin: getTransformOriginValue(elemTransformOrigin)
|
23861 | };
|
23862 | }, [anchorEl, anchorReference, getAnchorOffset, getContentAnchorOffset, getTransformOrigin, marginThreshold]);
|
23863 | var setPositioningStyles = React__default.useCallback(function (element) {
|
23864 | var positioning = getPositioningStyle(element);
|
23865 |
|
23866 | if (positioning.top !== null) {
|
23867 | element.style.top = positioning.top;
|
23868 | }
|
23869 |
|
23870 | if (positioning.left !== null) {
|
23871 | element.style.left = positioning.left;
|
23872 | }
|
23873 |
|
23874 | element.style.transformOrigin = positioning.transformOrigin;
|
23875 | }, [getPositioningStyle]);
|
23876 |
|
23877 | var handleEntering = function handleEntering(element, isAppearing) {
|
23878 | if (onEntering) {
|
23879 | onEntering(element, isAppearing);
|
23880 | }
|
23881 |
|
23882 | setPositioningStyles(element);
|
23883 | };
|
23884 |
|
23885 | var handlePaperRef = React__default.useCallback(function (instance) {
|
23886 |
|
23887 | paperRef.current = ReactDOM.findDOMNode(instance);
|
23888 | }, []);
|
23889 | var updatePosition = React__default.useMemo(function () {
|
23890 | if (!open) {
|
23891 | return undefined;
|
23892 | }
|
23893 |
|
23894 | return debounce(function () {
|
23895 | setPositioningStyles(paperRef.current);
|
23896 | });
|
23897 | }, [open, setPositioningStyles]);
|
23898 | React__default.useImperativeHandle(action, function () {
|
23899 | return open ? {
|
23900 | updatePosition: updatePosition
|
23901 | } : null;
|
23902 | }, [open, updatePosition]);
|
23903 | React__default.useEffect(function () {
|
23904 | if (!updatePosition) {
|
23905 | return undefined;
|
23906 | }
|
23907 |
|
23908 | window.addEventListener('resize', updatePosition);
|
23909 | return function () {
|
23910 | window.removeEventListener('resize', updatePosition);
|
23911 | updatePosition.clear();
|
23912 | };
|
23913 | }, [updatePosition]);
|
23914 | var transitionDuration = transitionDurationProp;
|
23915 |
|
23916 | if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
|
23917 | transitionDuration = undefined;
|
23918 | }
|
23919 |
|
23920 |
|
23921 |
|
23922 |
|
23923 | var container = containerProp || (anchorEl ? ownerDocument(getAnchorEl(anchorEl)).body : undefined);
|
23924 | return React__default.createElement(Modal, _extends({
|
23925 | container: container,
|
23926 | open: open,
|
23927 | ref: ref,
|
23928 | BackdropProps: {
|
23929 | invisible: true
|
23930 | },
|
23931 | className: clsx(classes.root, className)
|
23932 | }, other), React__default.createElement(TransitionComponent, _extends({
|
23933 | appear: true,
|
23934 | in: open,
|
23935 | onEnter: onEnter,
|
23936 | onEntered: onEntered,
|
23937 | onExit: onExit,
|
23938 | onExited: onExited,
|
23939 | onExiting: onExiting,
|
23940 | timeout: transitionDuration
|
23941 | }, TransitionProps, {
|
23942 | onEntering: createChainedFunction(handleEntering, TransitionProps.onEntering)
|
23943 | }), React__default.createElement(Paper$1, _extends({
|
23944 | elevation: elevation,
|
23945 | ref: handlePaperRef
|
23946 | }, PaperProps, {
|
23947 | className: clsx(classes.paper, PaperProps.className)
|
23948 | }), children)));
|
23949 | });
|
23950 | Popover.propTypes = {
|
23951 | |
23952 |
|
23953 |
|
23954 |
|
23955 | action: refType,
|
23956 |
|
23957 | |
23958 |
|
23959 |
|
23960 |
|
23961 | anchorEl: chainPropTypes(propTypes.oneOfType([propTypes.object, propTypes.func]), function (props) {
|
23962 | if (props.open && (!props.anchorReference || props.anchorReference === 'anchorEl')) {
|
23963 | var resolvedAnchorEl = getAnchorEl(props.anchorEl);
|
23964 | var containerWindow = ownerWindow(resolvedAnchorEl);
|
23965 |
|
23966 | if (resolvedAnchorEl instanceof containerWindow.Element) {
|
23967 | var box = resolvedAnchorEl.getBoundingClientRect();
|
23968 |
|
23969 | if ( box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
23970 | return new Error(['Material-UI: the `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
|
23971 | }
|
23972 | } else {
|
23973 | return new Error(['Material-UI: the `anchorEl` prop provided to the component is invalid.', "It should be an Element instance but it's `".concat(resolvedAnchorEl, "` instead.")].join('\n'));
|
23974 | }
|
23975 | }
|
23976 |
|
23977 | return null;
|
23978 | }),
|
23979 |
|
23980 | |
23981 |
|
23982 |
|
23983 |
|
23984 |
|
23985 |
|
23986 |
|
23987 |
|
23988 |
|
23989 | anchorOrigin: propTypes.shape({
|
23990 | horizontal: propTypes.oneOfType([propTypes.number, propTypes.oneOf(['left', 'center', 'right'])]).isRequired,
|
23991 | vertical: propTypes.oneOfType([propTypes.number, propTypes.oneOf(['top', 'center', 'bottom'])]).isRequired
|
23992 | }),
|
23993 |
|
23994 | |
23995 |
|
23996 |
|
23997 |
|
23998 |
|
23999 |
|
24000 | anchorPosition: propTypes.shape({
|
24001 | left: propTypes.number.isRequired,
|
24002 | top: propTypes.number.isRequired
|
24003 | }),
|
24004 |
|
24005 | |
24006 |
|
24007 |
|
24008 |
|
24009 | anchorReference: propTypes.oneOf(['anchorEl', 'anchorPosition', 'none']),
|
24010 |
|
24011 | |
24012 |
|
24013 |
|
24014 | children: propTypes.node,
|
24015 |
|
24016 | |
24017 |
|
24018 |
|
24019 |
|
24020 | classes: propTypes.object.isRequired,
|
24021 |
|
24022 | |
24023 |
|
24024 |
|
24025 | className: propTypes.string,
|
24026 |
|
24027 | |
24028 |
|
24029 |
|
24030 |
|
24031 |
|
24032 |
|
24033 | container: propTypes.oneOfType([propTypes.object, propTypes.func]),
|
24034 |
|
24035 | |
24036 |
|
24037 |
|
24038 | elevation: propTypes.number,
|
24039 |
|
24040 | |
24041 |
|
24042 |
|
24043 |
|
24044 |
|
24045 |
|
24046 |
|
24047 |
|
24048 | getContentAnchorEl: propTypes.func,
|
24049 |
|
24050 | |
24051 |
|
24052 |
|
24053 | marginThreshold: propTypes.number,
|
24054 |
|
24055 | |
24056 |
|
24057 |
|
24058 |
|
24059 |
|
24060 |
|
24061 | onClose: propTypes.func,
|
24062 |
|
24063 | |
24064 |
|
24065 |
|
24066 | onEnter: propTypes.func,
|
24067 |
|
24068 | |
24069 |
|
24070 |
|
24071 | onEntered: propTypes.func,
|
24072 |
|
24073 | |
24074 |
|
24075 |
|
24076 | onEntering: propTypes.func,
|
24077 |
|
24078 | |
24079 |
|
24080 |
|
24081 | onExit: propTypes.func,
|
24082 |
|
24083 | |
24084 |
|
24085 |
|
24086 | onExited: propTypes.func,
|
24087 |
|
24088 | |
24089 |
|
24090 |
|
24091 | onExiting: propTypes.func,
|
24092 |
|
24093 | |
24094 |
|
24095 |
|
24096 | open: propTypes.bool.isRequired,
|
24097 |
|
24098 | |
24099 |
|
24100 |
|
24101 | PaperProps: propTypes.shape({
|
24102 | component: elementTypeAcceptingRef$1
|
24103 | }),
|
24104 |
|
24105 | |
24106 |
|
24107 |
|
24108 |
|
24109 |
|
24110 |
|
24111 |
|
24112 |
|
24113 | transformOrigin: propTypes.shape({
|
24114 | horizontal: propTypes.oneOfType([propTypes.number, propTypes.oneOf(['left', 'center', 'right'])]).isRequired,
|
24115 | vertical: propTypes.oneOfType([propTypes.number, propTypes.oneOf(['top', 'center', 'bottom'])]).isRequired
|
24116 | }),
|
24117 |
|
24118 | |
24119 |
|
24120 |
|
24121 | TransitionComponent: propTypes.elementType,
|
24122 |
|
24123 | |
24124 |
|
24125 |
|
24126 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
24127 | enter: propTypes.number,
|
24128 | exit: propTypes.number
|
24129 | }), propTypes.oneOf(['auto'])]),
|
24130 |
|
24131 | |
24132 |
|
24133 |
|
24134 | TransitionProps: propTypes.object
|
24135 | } ;
|
24136 | var Popover$1 = withStyles$1(styles$17, {
|
24137 | name: 'MuiPopover'
|
24138 | })(Popover);
|
24139 |
|
24140 | function nextItem(list, item, disableListWrap) {
|
24141 | if (list === item) {
|
24142 | return list.firstChild;
|
24143 | }
|
24144 |
|
24145 | if (item && item.nextElementSibling) {
|
24146 | return item.nextElementSibling;
|
24147 | }
|
24148 |
|
24149 | return disableListWrap ? null : list.firstChild;
|
24150 | }
|
24151 |
|
24152 | function previousItem(list, item, disableListWrap) {
|
24153 | if (list === item) {
|
24154 | return disableListWrap ? list.firstChild : list.lastChild;
|
24155 | }
|
24156 |
|
24157 | if (item && item.previousElementSibling) {
|
24158 | return item.previousElementSibling;
|
24159 | }
|
24160 |
|
24161 | return disableListWrap ? null : list.lastChild;
|
24162 | }
|
24163 |
|
24164 | function textCriteriaMatches(nextFocus, textCriteria) {
|
24165 | if (textCriteria === undefined) {
|
24166 | return true;
|
24167 | }
|
24168 |
|
24169 | var text = nextFocus.innerText;
|
24170 |
|
24171 | if (text === undefined) {
|
24172 |
|
24173 | text = nextFocus.textContent;
|
24174 | }
|
24175 |
|
24176 | text = text.trim().toLowerCase();
|
24177 |
|
24178 | if (text.length === 0) {
|
24179 | return false;
|
24180 | }
|
24181 |
|
24182 | if (textCriteria.repeating) {
|
24183 | return text[0] === textCriteria.keys[0];
|
24184 | }
|
24185 |
|
24186 | return text.indexOf(textCriteria.keys.join('')) === 0;
|
24187 | }
|
24188 |
|
24189 | function moveFocus(list, currentFocus, disableListWrap, traversalFunction, textCriteria) {
|
24190 | var wrappedOnce = false;
|
24191 | var nextFocus = traversalFunction(list, currentFocus, currentFocus ? disableListWrap : false);
|
24192 |
|
24193 | while (nextFocus) {
|
24194 |
|
24195 | if (nextFocus === list.firstChild) {
|
24196 | if (wrappedOnce) {
|
24197 | return false;
|
24198 | }
|
24199 |
|
24200 | wrappedOnce = true;
|
24201 | }
|
24202 |
|
24203 |
|
24204 | if (!nextFocus.hasAttribute('tabindex') || nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true' || !textCriteriaMatches(nextFocus, textCriteria)) {
|
24205 | nextFocus = traversalFunction(list, nextFocus, disableListWrap);
|
24206 | } else {
|
24207 | nextFocus.focus();
|
24208 | return true;
|
24209 | }
|
24210 | }
|
24211 |
|
24212 | return false;
|
24213 | }
|
24214 |
|
24215 | var useEnhancedEffect$8 = typeof window === 'undefined' ? React__default.useEffect : React__default.useLayoutEffect;
|
24216 | |
24217 |
|
24218 |
|
24219 |
|
24220 |
|
24221 |
|
24222 |
|
24223 | var MenuList = React__default.forwardRef(function MenuList(props, ref) {
|
24224 | var actions = props.actions,
|
24225 | _props$autoFocus = props.autoFocus,
|
24226 | autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
|
24227 | _props$autoFocusItem = props.autoFocusItem,
|
24228 | autoFocusItem = _props$autoFocusItem === void 0 ? false : _props$autoFocusItem,
|
24229 | children = props.children,
|
24230 | className = props.className,
|
24231 | onKeyDown = props.onKeyDown,
|
24232 | _props$disableListWra = props.disableListWrap,
|
24233 | disableListWrap = _props$disableListWra === void 0 ? false : _props$disableListWra,
|
24234 | _props$variant = props.variant,
|
24235 | variant = _props$variant === void 0 ? 'selectedMenu' : _props$variant,
|
24236 | other = _objectWithoutProperties(props, ["actions", "autoFocus", "autoFocusItem", "children", "className", "onKeyDown", "disableListWrap", "variant"]);
|
24237 |
|
24238 | var listRef = React__default.useRef(null);
|
24239 | var textCriteriaRef = React__default.useRef({
|
24240 | keys: [],
|
24241 | repeating: true,
|
24242 | previousKeyMatched: true,
|
24243 | lastTime: null
|
24244 | });
|
24245 | useEnhancedEffect$8(function () {
|
24246 | if (autoFocus) {
|
24247 | listRef.current.focus();
|
24248 | }
|
24249 | }, [autoFocus]);
|
24250 | React__default.useImperativeHandle(actions, function () {
|
24251 | return {
|
24252 | adjustStyleForScrollbar: function adjustStyleForScrollbar(containerElement, theme) {
|
24253 |
|
24254 |
|
24255 | var noExplicitWidth = !listRef.current.style.width;
|
24256 |
|
24257 | if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
|
24258 | var scrollbarSize = "".concat(getScrollbarSize(), "px");
|
24259 | listRef.current.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
|
24260 | listRef.current.style.width = "calc(100% + ".concat(scrollbarSize, ")");
|
24261 | }
|
24262 |
|
24263 | return listRef.current;
|
24264 | }
|
24265 | };
|
24266 | }, []);
|
24267 |
|
24268 | var handleKeyDown = function handleKeyDown(event) {
|
24269 | var list = listRef.current;
|
24270 | var key = event.key;
|
24271 | |
24272 |
|
24273 |
|
24274 |
|
24275 |
|
24276 |
|
24277 |
|
24278 | var currentFocus = ownerDocument(list).activeElement;
|
24279 |
|
24280 | if (key === 'ArrowDown') {
|
24281 |
|
24282 | event.preventDefault();
|
24283 | moveFocus(list, currentFocus, disableListWrap, nextItem);
|
24284 | } else if (key === 'ArrowUp') {
|
24285 | event.preventDefault();
|
24286 | moveFocus(list, currentFocus, disableListWrap, previousItem);
|
24287 | } else if (key === 'Home') {
|
24288 | event.preventDefault();
|
24289 | moveFocus(list, null, disableListWrap, nextItem);
|
24290 | } else if (key === 'End') {
|
24291 | event.preventDefault();
|
24292 | moveFocus(list, null, disableListWrap, previousItem);
|
24293 | } else if (key.length === 1) {
|
24294 | var criteria = textCriteriaRef.current;
|
24295 | var lowerKey = key.toLowerCase();
|
24296 | var currTime = performance.now();
|
24297 |
|
24298 | if (criteria.keys.length > 0) {
|
24299 |
|
24300 | if (currTime - criteria.lastTime > 500) {
|
24301 | criteria.keys = [];
|
24302 | criteria.repeating = true;
|
24303 | criteria.previousKeyMatched = true;
|
24304 | } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
|
24305 | criteria.repeating = false;
|
24306 | }
|
24307 | }
|
24308 |
|
24309 | criteria.lastTime = currTime;
|
24310 | criteria.keys.push(lowerKey);
|
24311 | var keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
|
24312 |
|
24313 | if (criteria.previousKeyMatched && (keepFocusOnCurrent || moveFocus(list, currentFocus, false, nextItem, criteria))) {
|
24314 | event.preventDefault();
|
24315 | } else {
|
24316 | criteria.previousKeyMatched = false;
|
24317 | }
|
24318 | }
|
24319 |
|
24320 | if (onKeyDown) {
|
24321 | onKeyDown(event);
|
24322 | }
|
24323 | };
|
24324 |
|
24325 | var handleOwnRef = React__default.useCallback(function (instance) {
|
24326 |
|
24327 | listRef.current = ReactDOM.findDOMNode(instance);
|
24328 | }, []);
|
24329 | var handleRef = useForkRef(handleOwnRef, ref);
|
24330 | |
24331 |
|
24332 |
|
24333 |
|
24334 |
|
24335 |
|
24336 | var activeItemIndex = -1;
|
24337 |
|
24338 |
|
24339 |
|
24340 | React__default.Children.forEach(children, function (child, index) {
|
24341 | if (!React__default.isValidElement(child)) {
|
24342 | return;
|
24343 | }
|
24344 |
|
24345 | {
|
24346 | if (reactIs_2(child)) {
|
24347 | console.error(["Material-UI: the Menu component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
24348 | }
|
24349 | }
|
24350 |
|
24351 | if (!child.props.disabled) {
|
24352 | if (variant === 'selectedMenu' && child.props.selected) {
|
24353 | activeItemIndex = index;
|
24354 | } else if (activeItemIndex === -1) {
|
24355 | activeItemIndex = index;
|
24356 | }
|
24357 | }
|
24358 | });
|
24359 | var items = React__default.Children.map(children, function (child, index) {
|
24360 | if (index === activeItemIndex) {
|
24361 | var newChildProps = {};
|
24362 |
|
24363 | if (autoFocusItem) {
|
24364 | newChildProps.autoFocus = true;
|
24365 | }
|
24366 |
|
24367 | if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
|
24368 | newChildProps.tabIndex = 0;
|
24369 | }
|
24370 |
|
24371 | if (newChildProps !== null) {
|
24372 | return React__default.cloneElement(child, newChildProps);
|
24373 | }
|
24374 | }
|
24375 |
|
24376 | return child;
|
24377 | });
|
24378 | return React__default.createElement(List$1, _extends({
|
24379 | role: "menu",
|
24380 | ref: handleRef,
|
24381 | className: className,
|
24382 | onKeyDown: handleKeyDown,
|
24383 | tabIndex: autoFocus ? 0 : -1
|
24384 | }, other), items);
|
24385 | });
|
24386 | MenuList.propTypes = {
|
24387 | |
24388 |
|
24389 |
|
24390 | actions: propTypes.shape({
|
24391 | current: propTypes.object
|
24392 | }),
|
24393 |
|
24394 | |
24395 |
|
24396 |
|
24397 | autoFocus: propTypes.bool,
|
24398 |
|
24399 | |
24400 |
|
24401 |
|
24402 |
|
24403 | autoFocusItem: propTypes.bool,
|
24404 |
|
24405 | |
24406 |
|
24407 |
|
24408 | children: propTypes.node,
|
24409 |
|
24410 | |
24411 |
|
24412 |
|
24413 | className: propTypes.string,
|
24414 |
|
24415 | |
24416 |
|
24417 |
|
24418 | disableListWrap: propTypes.bool,
|
24419 |
|
24420 | |
24421 |
|
24422 |
|
24423 | onKeyDown: propTypes.func,
|
24424 |
|
24425 | |
24426 |
|
24427 |
|
24428 |
|
24429 | variant: propTypes.oneOf(['menu', 'selectedMenu'])
|
24430 | } ;
|
24431 |
|
24432 | var RTL_ORIGIN = {
|
24433 | vertical: 'top',
|
24434 | horizontal: 'right'
|
24435 | };
|
24436 | var LTR_ORIGIN = {
|
24437 | vertical: 'top',
|
24438 | horizontal: 'left'
|
24439 | };
|
24440 | var styles$18 = {
|
24441 |
|
24442 | paper: {
|
24443 |
|
24444 |
|
24445 |
|
24446 | maxHeight: 'calc(100% - 96px)',
|
24447 |
|
24448 | WebkitOverflowScrolling: 'touch'
|
24449 | },
|
24450 |
|
24451 |
|
24452 | list: {
|
24453 |
|
24454 | outline: 0
|
24455 | }
|
24456 | };
|
24457 | var Menu = React__default.forwardRef(function Menu(props, ref) {
|
24458 | var _props$autoFocus = props.autoFocus,
|
24459 | autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
|
24460 | children = props.children,
|
24461 | classes = props.classes,
|
24462 | _props$disableAutoFoc = props.disableAutoFocusItem,
|
24463 | disableAutoFocusItem = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
|
24464 | _props$MenuListProps = props.MenuListProps,
|
24465 | MenuListProps = _props$MenuListProps === void 0 ? {} : _props$MenuListProps,
|
24466 | onClose = props.onClose,
|
24467 | onEntering = props.onEntering,
|
24468 | open = props.open,
|
24469 | _props$PaperProps = props.PaperProps,
|
24470 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
24471 | PopoverClasses = props.PopoverClasses,
|
24472 | _props$transitionDura = props.transitionDuration,
|
24473 | transitionDuration = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
|
24474 | _props$variant = props.variant,
|
24475 | variant = _props$variant === void 0 ? 'selectedMenu' : _props$variant,
|
24476 | other = _objectWithoutProperties(props, ["autoFocus", "children", "classes", "disableAutoFocusItem", "MenuListProps", "onClose", "onEntering", "open", "PaperProps", "PopoverClasses", "transitionDuration", "variant"]);
|
24477 |
|
24478 | var theme = useTheme$1();
|
24479 | var autoFocusItem = autoFocus && !disableAutoFocusItem && open;
|
24480 | var menuListActionsRef = React__default.useRef(null);
|
24481 | var contentAnchorRef = React__default.useRef(null);
|
24482 |
|
24483 | var getContentAnchorEl = function getContentAnchorEl() {
|
24484 | return contentAnchorRef.current;
|
24485 | };
|
24486 |
|
24487 | var handleEntering = function handleEntering(element, isAppearing) {
|
24488 | if (menuListActionsRef.current) {
|
24489 | menuListActionsRef.current.adjustStyleForScrollbar(element, theme);
|
24490 | }
|
24491 |
|
24492 | if (onEntering) {
|
24493 | onEntering(element, isAppearing);
|
24494 | }
|
24495 | };
|
24496 |
|
24497 | var handleListKeyDown = function handleListKeyDown(event) {
|
24498 | if (event.key === 'Tab') {
|
24499 | event.preventDefault();
|
24500 |
|
24501 | if (onClose) {
|
24502 | onClose(event, 'tabKeyDown');
|
24503 | }
|
24504 | }
|
24505 | };
|
24506 | |
24507 |
|
24508 |
|
24509 |
|
24510 |
|
24511 |
|
24512 |
|
24513 | var activeItemIndex = -1;
|
24514 |
|
24515 |
|
24516 |
|
24517 | React__default.Children.map(children, function (child, index) {
|
24518 | if (!React__default.isValidElement(child)) {
|
24519 | return;
|
24520 | }
|
24521 |
|
24522 | {
|
24523 | if (reactIs_2(child)) {
|
24524 | console.error(["Material-UI: the Menu component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
24525 | }
|
24526 | }
|
24527 |
|
24528 | if (!child.props.disabled) {
|
24529 | if (variant !== "menu" && child.props.selected) {
|
24530 | activeItemIndex = index;
|
24531 | } else if (activeItemIndex === -1) {
|
24532 | activeItemIndex = index;
|
24533 | }
|
24534 | }
|
24535 | });
|
24536 | var items = React__default.Children.map(children, function (child, index) {
|
24537 | if (index === activeItemIndex) {
|
24538 | return React__default.cloneElement(child, {
|
24539 | ref: function ref(instance) {
|
24540 |
|
24541 | contentAnchorRef.current = ReactDOM.findDOMNode(instance);
|
24542 | setRef(child.ref, instance);
|
24543 | }
|
24544 | });
|
24545 | }
|
24546 |
|
24547 | return child;
|
24548 | });
|
24549 | return React__default.createElement(Popover$1, _extends({
|
24550 | getContentAnchorEl: getContentAnchorEl,
|
24551 | classes: PopoverClasses,
|
24552 | onClose: onClose,
|
24553 | onEntering: handleEntering,
|
24554 | anchorOrigin: theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN,
|
24555 | transformOrigin: theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN,
|
24556 | PaperProps: _extends({}, PaperProps, {
|
24557 | classes: _extends({}, PaperProps.classes, {
|
24558 | root: classes.paper
|
24559 | })
|
24560 | }),
|
24561 | open: open,
|
24562 | ref: ref,
|
24563 | transitionDuration: transitionDuration
|
24564 | }, other), React__default.createElement(MenuList, _extends({
|
24565 | onKeyDown: handleListKeyDown,
|
24566 | actions: menuListActionsRef,
|
24567 | autoFocus: autoFocus && (activeItemIndex === -1 || disableAutoFocusItem),
|
24568 | autoFocusItem: autoFocusItem,
|
24569 | variant: variant
|
24570 | }, MenuListProps, {
|
24571 | className: clsx(classes.list, MenuListProps.className)
|
24572 | }), items));
|
24573 | });
|
24574 | Menu.propTypes = {
|
24575 | |
24576 |
|
24577 |
|
24578 | anchorEl: propTypes.oneOfType([propTypes.object, propTypes.func]),
|
24579 |
|
24580 | |
24581 |
|
24582 |
|
24583 |
|
24584 |
|
24585 |
|
24586 | autoFocus: propTypes.bool,
|
24587 |
|
24588 | |
24589 |
|
24590 |
|
24591 | children: propTypes.node,
|
24592 |
|
24593 | |
24594 |
|
24595 |
|
24596 |
|
24597 | classes: propTypes.object.isRequired,
|
24598 |
|
24599 | |
24600 |
|
24601 |
|
24602 |
|
24603 |
|
24604 |
|
24605 | disableAutoFocusItem: propTypes.bool,
|
24606 |
|
24607 | |
24608 |
|
24609 |
|
24610 | MenuListProps: propTypes.object,
|
24611 |
|
24612 | |
24613 |
|
24614 |
|
24615 |
|
24616 |
|
24617 |
|
24618 | onClose: propTypes.func,
|
24619 |
|
24620 | |
24621 |
|
24622 |
|
24623 | onEnter: propTypes.func,
|
24624 |
|
24625 | |
24626 |
|
24627 |
|
24628 | onEntered: propTypes.func,
|
24629 |
|
24630 | |
24631 |
|
24632 |
|
24633 | onEntering: propTypes.func,
|
24634 |
|
24635 | |
24636 |
|
24637 |
|
24638 | onExit: propTypes.func,
|
24639 |
|
24640 | |
24641 |
|
24642 |
|
24643 | onExited: propTypes.func,
|
24644 |
|
24645 | |
24646 |
|
24647 |
|
24648 | onExiting: propTypes.func,
|
24649 |
|
24650 | |
24651 |
|
24652 |
|
24653 | open: propTypes.bool.isRequired,
|
24654 |
|
24655 | |
24656 |
|
24657 |
|
24658 | PaperProps: propTypes.object,
|
24659 |
|
24660 | |
24661 |
|
24662 |
|
24663 | PopoverClasses: propTypes.object,
|
24664 |
|
24665 | |
24666 |
|
24667 |
|
24668 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
24669 | enter: propTypes.number,
|
24670 | exit: propTypes.number
|
24671 | }), propTypes.oneOf(['auto'])]),
|
24672 |
|
24673 | |
24674 |
|
24675 |
|
24676 |
|
24677 | variant: propTypes.oneOf(['menu', 'selectedMenu'])
|
24678 | } ;
|
24679 | var Menu$1 = withStyles$1(styles$18, {
|
24680 | name: 'MuiMenu'
|
24681 | })(Menu);
|
24682 |
|
24683 | var styles$19 = function styles(theme) {
|
24684 | return {
|
24685 |
|
24686 | root: _extends({}, theme.typography.body1, _defineProperty({
|
24687 | minHeight: 48,
|
24688 | paddingTop: 6,
|
24689 | paddingBottom: 6,
|
24690 | boxSizing: 'border-box',
|
24691 | width: 'auto',
|
24692 | overflow: 'hidden',
|
24693 | whiteSpace: 'nowrap'
|
24694 | }, theme.breakpoints.up('sm'), {
|
24695 | minHeight: 'auto'
|
24696 | })),
|
24697 |
|
24698 |
|
24699 |
|
24700 | gutters: {},
|
24701 |
|
24702 |
|
24703 | selected: {},
|
24704 |
|
24705 |
|
24706 | dense: _extends({}, theme.typography.body2, {
|
24707 | minHeight: 'auto'
|
24708 | })
|
24709 | };
|
24710 | };
|
24711 | var MenuItem = React__default.forwardRef(function MenuItem(props, ref) {
|
24712 | var classes = props.classes,
|
24713 | className = props.className,
|
24714 | _props$component = props.component,
|
24715 | component = _props$component === void 0 ? 'li' : _props$component,
|
24716 | _props$disableGutters = props.disableGutters,
|
24717 | disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
|
24718 | _props$role = props.role,
|
24719 | role = _props$role === void 0 ? 'menuitem' : _props$role,
|
24720 | selected = props.selected,
|
24721 | tabIndexProp = props.tabIndex,
|
24722 | other = _objectWithoutProperties(props, ["classes", "className", "component", "disableGutters", "role", "selected", "tabIndex"]);
|
24723 |
|
24724 | var tabIndex;
|
24725 |
|
24726 | if (!props.disabled) {
|
24727 | tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
|
24728 | }
|
24729 |
|
24730 | return React__default.createElement(ListItem$1, _extends({
|
24731 | button: true,
|
24732 | role: role,
|
24733 | tabIndex: tabIndex,
|
24734 | component: component,
|
24735 | selected: selected,
|
24736 | disableGutters: disableGutters,
|
24737 | classes: {
|
24738 | dense: classes.dense
|
24739 | },
|
24740 | className: clsx(classes.root, className, selected && classes.selected, !disableGutters && classes.gutters),
|
24741 | ref: ref
|
24742 | }, other));
|
24743 | });
|
24744 | MenuItem.propTypes = {
|
24745 | |
24746 |
|
24747 |
|
24748 | children: propTypes.node,
|
24749 |
|
24750 | |
24751 |
|
24752 |
|
24753 |
|
24754 | classes: propTypes.object.isRequired,
|
24755 |
|
24756 | |
24757 |
|
24758 |
|
24759 | className: propTypes.string,
|
24760 |
|
24761 | |
24762 |
|
24763 |
|
24764 |
|
24765 | component: propTypes.elementType,
|
24766 |
|
24767 | |
24768 |
|
24769 |
|
24770 | dense: propTypes.bool,
|
24771 |
|
24772 | |
24773 |
|
24774 |
|
24775 | disabled: propTypes.bool,
|
24776 |
|
24777 | |
24778 |
|
24779 |
|
24780 | disableGutters: propTypes.bool,
|
24781 |
|
24782 | |
24783 |
|
24784 |
|
24785 | role: propTypes.string,
|
24786 |
|
24787 | |
24788 |
|
24789 |
|
24790 | selected: propTypes.bool,
|
24791 |
|
24792 | |
24793 |
|
24794 |
|
24795 | tabIndex: propTypes.number
|
24796 | } ;
|
24797 | var MenuItem$1 = withStyles$1(styles$19, {
|
24798 | name: 'MuiMenuItem'
|
24799 | })(MenuItem);
|
24800 |
|
24801 | var styles$1a = function styles(theme) {
|
24802 | return {
|
24803 |
|
24804 | root: {
|
24805 | display: 'flex',
|
24806 | flexDirection: 'row',
|
24807 | justifyContent: 'space-between',
|
24808 | alignItems: 'center',
|
24809 | background: theme.palette.background.default,
|
24810 | padding: 8
|
24811 | },
|
24812 |
|
24813 |
|
24814 | positionBottom: {
|
24815 | position: 'fixed',
|
24816 | bottom: 0,
|
24817 | left: 0,
|
24818 | right: 0,
|
24819 | zIndex: theme.zIndex.mobileStepper
|
24820 | },
|
24821 |
|
24822 |
|
24823 | positionTop: {
|
24824 | position: 'fixed',
|
24825 | top: 0,
|
24826 | left: 0,
|
24827 | right: 0,
|
24828 | zIndex: theme.zIndex.mobileStepper
|
24829 | },
|
24830 |
|
24831 |
|
24832 | positionStatic: {},
|
24833 |
|
24834 |
|
24835 | dots: {
|
24836 | display: 'flex',
|
24837 | flexDirection: 'row'
|
24838 | },
|
24839 |
|
24840 |
|
24841 | dot: {
|
24842 | backgroundColor: theme.palette.action.disabled,
|
24843 | borderRadius: '50%',
|
24844 | width: 8,
|
24845 | height: 8,
|
24846 | margin: '0 2px'
|
24847 | },
|
24848 |
|
24849 |
|
24850 | dotActive: {
|
24851 | backgroundColor: theme.palette.primary.main
|
24852 | },
|
24853 |
|
24854 |
|
24855 | progress: {
|
24856 | width: '50%'
|
24857 | }
|
24858 | };
|
24859 | };
|
24860 | var MobileStepper = React__default.forwardRef(function MobileStepper(props, ref) {
|
24861 | var _props$activeStep = props.activeStep,
|
24862 | activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
|
24863 | backButton = props.backButton,
|
24864 | classes = props.classes,
|
24865 | className = props.className,
|
24866 | LinearProgressProps = props.LinearProgressProps,
|
24867 | nextButton = props.nextButton,
|
24868 | _props$position = props.position,
|
24869 | position = _props$position === void 0 ? 'bottom' : _props$position,
|
24870 | steps = props.steps,
|
24871 | _props$variant = props.variant,
|
24872 | variant = _props$variant === void 0 ? 'dots' : _props$variant,
|
24873 | other = _objectWithoutProperties(props, ["activeStep", "backButton", "classes", "className", "LinearProgressProps", "nextButton", "position", "steps", "variant"]);
|
24874 |
|
24875 | return React__default.createElement(Paper$1, _extends({
|
24876 | square: true,
|
24877 | elevation: 0,
|
24878 | className: clsx(classes.root, classes["position".concat(capitalize(position))], className),
|
24879 | ref: ref
|
24880 | }, other), backButton, variant === 'text' && React__default.createElement(React__default.Fragment, null, activeStep + 1, " / ", steps), variant === 'dots' && React__default.createElement("div", {
|
24881 | className: classes.dots
|
24882 | }, _toConsumableArray(new Array(steps)).map(function (_, index) {
|
24883 | return React__default.createElement("div", {
|
24884 | key: index,
|
24885 | className: clsx(classes.dot, index === activeStep && classes.dotActive)
|
24886 | });
|
24887 | })), variant === 'progress' && React__default.createElement(LinearProgress$1, _extends({
|
24888 | className: classes.progress,
|
24889 | variant: "determinate",
|
24890 | value: Math.ceil(activeStep / (steps - 1) * 100)
|
24891 | }, LinearProgressProps)), nextButton);
|
24892 | });
|
24893 | MobileStepper.propTypes = {
|
24894 | |
24895 |
|
24896 |
|
24897 |
|
24898 | activeStep: propTypes.number,
|
24899 |
|
24900 | |
24901 |
|
24902 |
|
24903 | backButton: propTypes.node,
|
24904 |
|
24905 | |
24906 |
|
24907 |
|
24908 |
|
24909 | classes: propTypes.object.isRequired,
|
24910 |
|
24911 | |
24912 |
|
24913 |
|
24914 | className: propTypes.string,
|
24915 |
|
24916 | |
24917 |
|
24918 |
|
24919 | LinearProgressProps: propTypes.object,
|
24920 |
|
24921 | |
24922 |
|
24923 |
|
24924 | nextButton: propTypes.node,
|
24925 |
|
24926 | |
24927 |
|
24928 |
|
24929 | position: propTypes.oneOf(['bottom', 'top', 'static']),
|
24930 |
|
24931 | |
24932 |
|
24933 |
|
24934 | steps: propTypes.number.isRequired,
|
24935 |
|
24936 | |
24937 |
|
24938 |
|
24939 | variant: propTypes.oneOf(['text', 'dots', 'progress'])
|
24940 | } ;
|
24941 | var MobileStepper$1 = withStyles$1(styles$1a, {
|
24942 | name: 'MuiMobileStepper'
|
24943 | })(MobileStepper);
|
24944 |
|
24945 | |
24946 |
|
24947 |
|
24948 |
|
24949 | var NativeSelectInput = React__default.forwardRef(function NativeSelectInput(props, ref) {
|
24950 | var classes = props.classes,
|
24951 | className = props.className,
|
24952 | disabled = props.disabled,
|
24953 | IconComponent = props.IconComponent,
|
24954 | inputRef = props.inputRef,
|
24955 | _props$variant = props.variant,
|
24956 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
24957 | other = _objectWithoutProperties(props, ["classes", "className", "disabled", "IconComponent", "inputRef", "variant"]);
|
24958 |
|
24959 | return React__default.createElement(React__default.Fragment, null, React__default.createElement("select", _extends({
|
24960 | className: clsx(classes.root,
|
24961 | classes.select, classes[variant], className, disabled && classes.disabled),
|
24962 | disabled: disabled,
|
24963 | ref: inputRef || ref
|
24964 | }, other)), props.multiple ? null : React__default.createElement(IconComponent, {
|
24965 | className: clsx(classes.icon, classes["icon".concat(capitalize(variant))])
|
24966 | }));
|
24967 | });
|
24968 | NativeSelectInput.propTypes = {
|
24969 | |
24970 |
|
24971 |
|
24972 |
|
24973 | children: propTypes.node,
|
24974 |
|
24975 | |
24976 |
|
24977 |
|
24978 |
|
24979 | classes: propTypes.object.isRequired,
|
24980 |
|
24981 | |
24982 |
|
24983 |
|
24984 | className: propTypes.string,
|
24985 |
|
24986 | |
24987 |
|
24988 |
|
24989 | disabled: propTypes.bool,
|
24990 |
|
24991 | |
24992 |
|
24993 |
|
24994 | IconComponent: propTypes.elementType.isRequired,
|
24995 |
|
24996 | |
24997 |
|
24998 |
|
24999 |
|
25000 | inputRef: refType,
|
25001 |
|
25002 | |
25003 |
|
25004 |
|
25005 | multiple: propTypes.bool,
|
25006 |
|
25007 | |
25008 |
|
25009 |
|
25010 | name: propTypes.string,
|
25011 |
|
25012 | |
25013 |
|
25014 |
|
25015 |
|
25016 |
|
25017 |
|
25018 | onChange: propTypes.func,
|
25019 |
|
25020 | |
25021 |
|
25022 |
|
25023 | value: propTypes.any,
|
25024 |
|
25025 | |
25026 |
|
25027 |
|
25028 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
25029 | } ;
|
25030 |
|
25031 | |
25032 |
|
25033 |
|
25034 |
|
25035 | var ArrowDropDownIcon = createSvgIcon(React__default.createElement("path", {
|
25036 | d: "M7 10l5 5 5-5z"
|
25037 | }), 'ArrowDropDown');
|
25038 |
|
25039 | var styles$1b = function styles(theme) {
|
25040 | return {
|
25041 |
|
25042 | root: {},
|
25043 |
|
25044 |
|
25045 | select: {
|
25046 | '-moz-appearance': 'none',
|
25047 |
|
25048 | '-webkit-appearance': 'none',
|
25049 |
|
25050 |
|
25051 |
|
25052 | userSelect: 'none',
|
25053 | borderRadius: 0,
|
25054 |
|
25055 | minWidth: 16,
|
25056 |
|
25057 | cursor: 'pointer',
|
25058 | '&:focus': {
|
25059 |
|
25060 | backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
|
25061 | borderRadius: 0
|
25062 |
|
25063 | },
|
25064 |
|
25065 | '&::-ms-expand': {
|
25066 | display: 'none'
|
25067 | },
|
25068 | '&$disabled': {
|
25069 | cursor: 'default'
|
25070 | },
|
25071 | '&[multiple]': {
|
25072 | height: 'auto'
|
25073 | },
|
25074 | '&:not([multiple]) option, &:not([multiple]) optgroup': {
|
25075 | backgroundColor: theme.palette.background.paper
|
25076 | },
|
25077 | '&&': {
|
25078 | paddingRight: 24
|
25079 | }
|
25080 | },
|
25081 |
|
25082 |
|
25083 | filled: {
|
25084 | '&&': {
|
25085 | paddingRight: 32
|
25086 | }
|
25087 | },
|
25088 |
|
25089 |
|
25090 | outlined: {
|
25091 | borderRadius: theme.shape.borderRadius,
|
25092 | '&&': {
|
25093 | paddingRight: 32
|
25094 | }
|
25095 | },
|
25096 |
|
25097 |
|
25098 | selectMenu: {
|
25099 | height: 'auto',
|
25100 |
|
25101 | textOverflow: 'ellipsis',
|
25102 | whiteSpace: 'nowrap',
|
25103 | overflow: 'hidden'
|
25104 | },
|
25105 |
|
25106 |
|
25107 | disabled: {},
|
25108 |
|
25109 |
|
25110 | icon: {
|
25111 |
|
25112 |
|
25113 | position: 'absolute',
|
25114 | right: 0,
|
25115 | top: 'calc(50% - 12px)',
|
25116 |
|
25117 | color: theme.palette.action.active,
|
25118 | pointerEvents: 'none'
|
25119 |
|
25120 | },
|
25121 |
|
25122 |
|
25123 | iconOpen: {
|
25124 | transform: 'rotate(180deg)'
|
25125 | },
|
25126 |
|
25127 |
|
25128 | iconFilled: {
|
25129 | right: 7
|
25130 | },
|
25131 |
|
25132 |
|
25133 | iconOutlined: {
|
25134 | right: 7
|
25135 | }
|
25136 | };
|
25137 | };
|
25138 | var defaultInput = React__default.createElement(Input$1, null);
|
25139 | |
25140 |
|
25141 |
|
25142 |
|
25143 | var NativeSelect = React__default.forwardRef(function NativeSelect(props, ref) {
|
25144 | var children = props.children,
|
25145 | classes = props.classes,
|
25146 | _props$IconComponent = props.IconComponent,
|
25147 | IconComponent = _props$IconComponent === void 0 ? ArrowDropDownIcon : _props$IconComponent,
|
25148 | _props$input = props.input,
|
25149 | input = _props$input === void 0 ? defaultInput : _props$input,
|
25150 | inputProps = props.inputProps,
|
25151 | variant = props.variant,
|
25152 | other = _objectWithoutProperties(props, ["children", "classes", "IconComponent", "input", "inputProps", "variant"]);
|
25153 |
|
25154 | var muiFormControl = useFormControl$1();
|
25155 | var fcs = formControlState({
|
25156 | props: props,
|
25157 | muiFormControl: muiFormControl,
|
25158 | states: ['variant']
|
25159 | });
|
25160 | return React__default.cloneElement(input, _extends({
|
25161 |
|
25162 |
|
25163 | inputComponent: NativeSelectInput,
|
25164 | inputProps: _extends({
|
25165 | children: children,
|
25166 | classes: classes,
|
25167 | IconComponent: IconComponent,
|
25168 | variant: fcs.variant,
|
25169 | type: undefined
|
25170 | }, inputProps, {}, input ? input.props.inputProps : {}),
|
25171 | ref: ref
|
25172 | }, other));
|
25173 | });
|
25174 | NativeSelect.propTypes = {
|
25175 | |
25176 |
|
25177 |
|
25178 |
|
25179 | children: propTypes.node,
|
25180 |
|
25181 | |
25182 |
|
25183 |
|
25184 |
|
25185 | classes: propTypes.object.isRequired,
|
25186 |
|
25187 | |
25188 |
|
25189 |
|
25190 | IconComponent: propTypes.elementType,
|
25191 |
|
25192 | |
25193 |
|
25194 |
|
25195 | input: propTypes.element,
|
25196 |
|
25197 | |
25198 |
|
25199 |
|
25200 | inputProps: propTypes.object,
|
25201 |
|
25202 | |
25203 |
|
25204 |
|
25205 |
|
25206 |
|
25207 |
|
25208 | onChange: propTypes.func,
|
25209 |
|
25210 | |
25211 |
|
25212 |
|
25213 | value: propTypes.any,
|
25214 |
|
25215 | |
25216 |
|
25217 |
|
25218 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
25219 | } ;
|
25220 | NativeSelect.muiName = 'Select';
|
25221 | var NativeSelect$1 = withStyles$1(styles$1b, {
|
25222 | name: 'MuiNativeSelect'
|
25223 | })(NativeSelect);
|
25224 |
|
25225 | var styles$1c = function styles(theme) {
|
25226 | var align = theme.direction === 'rtl' ? 'right' : 'left';
|
25227 | return {
|
25228 |
|
25229 | root: {
|
25230 | position: 'absolute',
|
25231 | bottom: 0,
|
25232 | right: 0,
|
25233 | top: -5,
|
25234 | left: 0,
|
25235 | margin: 0,
|
25236 | padding: 0,
|
25237 | pointerEvents: 'none',
|
25238 | borderRadius: 'inherit',
|
25239 | borderStyle: 'solid',
|
25240 | borderWidth: 1,
|
25241 |
|
25242 | transition: theme.transitions.create(["padding-".concat(align), 'border-color', 'border-width'], {
|
25243 | duration: theme.transitions.duration.shorter,
|
25244 | easing: theme.transitions.easing.easeOut
|
25245 | })
|
25246 | },
|
25247 |
|
25248 |
|
25249 | legend: {
|
25250 | textAlign: 'left',
|
25251 | padding: 0,
|
25252 | lineHeight: '11px',
|
25253 | transition: theme.transitions.create('width', {
|
25254 | duration: theme.transitions.duration.shorter,
|
25255 | easing: theme.transitions.easing.easeOut
|
25256 | })
|
25257 | }
|
25258 | };
|
25259 | };
|
25260 | |
25261 |
|
25262 |
|
25263 |
|
25264 | var NotchedOutline = React__default.forwardRef(function NotchedOutline(props, ref) {
|
25265 | var children = props.children,
|
25266 | classes = props.classes,
|
25267 | className = props.className,
|
25268 | labelWidthProp = props.labelWidth,
|
25269 | notched = props.notched,
|
25270 | style = props.style,
|
25271 | other = _objectWithoutProperties(props, ["children", "classes", "className", "labelWidth", "notched", "style"]);
|
25272 |
|
25273 | var theme = useTheme$1();
|
25274 | var align = theme.direction === 'rtl' ? 'right' : 'left';
|
25275 | var labelWidth = labelWidthProp > 0 ? labelWidthProp * 0.75 + 8 : 0;
|
25276 | return React__default.createElement("fieldset", _extends({
|
25277 | "aria-hidden": true,
|
25278 | style: _extends(_defineProperty({}, "padding".concat(capitalize(align)), 8 + (notched ? 0 : labelWidth / 2)), style),
|
25279 | className: clsx(classes.root, className),
|
25280 | ref: ref
|
25281 | }, other), React__default.createElement("legend", {
|
25282 | className: classes.legend,
|
25283 | style: {
|
25284 |
|
25285 |
|
25286 |
|
25287 | width: notched ? labelWidth : 0.01
|
25288 | }
|
25289 | }, React__default.createElement("span", {
|
25290 | dangerouslySetInnerHTML: {
|
25291 | __html: '​'
|
25292 | }
|
25293 | })));
|
25294 | });
|
25295 | NotchedOutline.propTypes = {
|
25296 | |
25297 |
|
25298 |
|
25299 | children: propTypes.node,
|
25300 |
|
25301 | |
25302 |
|
25303 |
|
25304 |
|
25305 | classes: propTypes.object,
|
25306 |
|
25307 | |
25308 |
|
25309 |
|
25310 | className: propTypes.string,
|
25311 |
|
25312 | |
25313 |
|
25314 |
|
25315 | labelWidth: propTypes.number.isRequired,
|
25316 |
|
25317 | |
25318 |
|
25319 |
|
25320 | notched: propTypes.bool.isRequired,
|
25321 |
|
25322 | |
25323 |
|
25324 |
|
25325 | style: propTypes.object
|
25326 | } ;
|
25327 | var NotchedOutline$1 = withStyles$1(styles$1c, {
|
25328 | name: 'PrivateNotchedOutline'
|
25329 | })(NotchedOutline);
|
25330 |
|
25331 | var styles$1d = function styles(theme) {
|
25332 | var borderColor = theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
|
25333 | return {
|
25334 |
|
25335 | root: {
|
25336 | position: 'relative',
|
25337 | borderRadius: theme.shape.borderRadius,
|
25338 | '&:hover $notchedOutline': {
|
25339 | borderColor: theme.palette.text.primary
|
25340 | },
|
25341 |
|
25342 | '@media (hover: none)': {
|
25343 | '&:hover $notchedOutline': {
|
25344 | borderColor: borderColor
|
25345 | }
|
25346 | },
|
25347 | '&$focused $notchedOutline': {
|
25348 | borderColor: theme.palette.primary.main,
|
25349 | borderWidth: 2
|
25350 | },
|
25351 | '&$error $notchedOutline': {
|
25352 | borderColor: theme.palette.error.main
|
25353 | },
|
25354 | '&$disabled $notchedOutline': {
|
25355 | borderColor: theme.palette.action.disabled
|
25356 | }
|
25357 | },
|
25358 |
|
25359 |
|
25360 | colorSecondary: {
|
25361 | '&$focused $notchedOutline': {
|
25362 | borderColor: theme.palette.secondary.main
|
25363 | }
|
25364 | },
|
25365 |
|
25366 |
|
25367 | focused: {},
|
25368 |
|
25369 |
|
25370 | disabled: {},
|
25371 |
|
25372 |
|
25373 | adornedStart: {
|
25374 | paddingLeft: 14
|
25375 | },
|
25376 |
|
25377 |
|
25378 | adornedEnd: {
|
25379 | paddingRight: 14
|
25380 | },
|
25381 |
|
25382 |
|
25383 | error: {},
|
25384 |
|
25385 |
|
25386 | marginDense: {},
|
25387 |
|
25388 |
|
25389 | multiline: {
|
25390 | padding: '18.5px 14px',
|
25391 | '&$marginDense': {
|
25392 | paddingTop: 10.5,
|
25393 | paddingBottom: 10.5
|
25394 | }
|
25395 | },
|
25396 |
|
25397 |
|
25398 | notchedOutline: {
|
25399 | borderColor: borderColor
|
25400 | },
|
25401 |
|
25402 |
|
25403 | input: {
|
25404 | padding: '18.5px 14px',
|
25405 | '&:-webkit-autofill': {
|
25406 | WebkitBoxShadow: theme.palette.type === 'dark' ? '0 0 0 100px #266798 inset' : null,
|
25407 | WebkitTextFillColor: theme.palette.type === 'dark' ? '#fff' : null,
|
25408 | borderRadius: 'inherit'
|
25409 | }
|
25410 | },
|
25411 |
|
25412 |
|
25413 | inputMarginDense: {
|
25414 | paddingTop: 10.5,
|
25415 | paddingBottom: 10.5
|
25416 | },
|
25417 |
|
25418 |
|
25419 | inputMultiline: {
|
25420 | padding: 0
|
25421 | },
|
25422 |
|
25423 |
|
25424 | inputAdornedStart: {
|
25425 | paddingLeft: 0
|
25426 | },
|
25427 |
|
25428 |
|
25429 | inputAdornedEnd: {
|
25430 | paddingRight: 0
|
25431 | }
|
25432 | };
|
25433 | };
|
25434 | var OutlinedInput = React__default.forwardRef(function OutlinedInput(props, ref) {
|
25435 | var classes = props.classes,
|
25436 | _props$fullWidth = props.fullWidth,
|
25437 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
25438 | _props$inputComponent = props.inputComponent,
|
25439 | inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
|
25440 | _props$labelWidth = props.labelWidth,
|
25441 | labelWidth = _props$labelWidth === void 0 ? 0 : _props$labelWidth,
|
25442 | _props$multiline = props.multiline,
|
25443 | multiline = _props$multiline === void 0 ? false : _props$multiline,
|
25444 | notched = props.notched,
|
25445 | _props$type = props.type,
|
25446 | type = _props$type === void 0 ? 'text' : _props$type,
|
25447 | other = _objectWithoutProperties(props, ["classes", "fullWidth", "inputComponent", "labelWidth", "multiline", "notched", "type"]);
|
25448 |
|
25449 | return React__default.createElement(InputBase$1, _extends({
|
25450 | renderSuffix: function renderSuffix(state) {
|
25451 | return React__default.createElement(NotchedOutline$1, {
|
25452 | className: classes.notchedOutline,
|
25453 | labelWidth: labelWidth,
|
25454 | notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
|
25455 | });
|
25456 | },
|
25457 | classes: _extends({}, classes, {
|
25458 | root: clsx(classes.root, classes.underline),
|
25459 | notchedOutline: null
|
25460 | }),
|
25461 | fullWidth: fullWidth,
|
25462 | inputComponent: inputComponent,
|
25463 | multiline: multiline,
|
25464 | ref: ref,
|
25465 | type: type
|
25466 | }, other));
|
25467 | });
|
25468 | OutlinedInput.propTypes = {
|
25469 | |
25470 |
|
25471 |
|
25472 |
|
25473 |
|
25474 | autoComplete: propTypes.string,
|
25475 |
|
25476 | |
25477 |
|
25478 |
|
25479 | autoFocus: propTypes.bool,
|
25480 |
|
25481 | |
25482 |
|
25483 |
|
25484 |
|
25485 | classes: propTypes.object.isRequired,
|
25486 |
|
25487 | |
25488 |
|
25489 |
|
25490 | className: propTypes.string,
|
25491 |
|
25492 | |
25493 |
|
25494 |
|
25495 | color: propTypes.oneOf(['primary', 'secondary']),
|
25496 |
|
25497 | |
25498 |
|
25499 |
|
25500 | defaultValue: propTypes.any,
|
25501 |
|
25502 | |
25503 |
|
25504 |
|
25505 | disabled: propTypes.bool,
|
25506 |
|
25507 | |
25508 |
|
25509 |
|
25510 | endAdornment: propTypes.node,
|
25511 |
|
25512 | |
25513 |
|
25514 |
|
25515 |
|
25516 | error: propTypes.bool,
|
25517 |
|
25518 | |
25519 |
|
25520 |
|
25521 | fullWidth: propTypes.bool,
|
25522 |
|
25523 | |
25524 |
|
25525 |
|
25526 | id: propTypes.string,
|
25527 |
|
25528 | |
25529 |
|
25530 |
|
25531 |
|
25532 | inputComponent: propTypes.elementType,
|
25533 |
|
25534 | |
25535 |
|
25536 |
|
25537 | inputProps: propTypes.object,
|
25538 |
|
25539 | |
25540 |
|
25541 |
|
25542 | inputRef: refType,
|
25543 |
|
25544 | |
25545 |
|
25546 |
|
25547 | labelWidth: propTypes.number,
|
25548 |
|
25549 | |
25550 |
|
25551 |
|
25552 |
|
25553 | margin: propTypes.oneOf(['dense', 'none']),
|
25554 |
|
25555 | |
25556 |
|
25557 |
|
25558 | multiline: propTypes.bool,
|
25559 |
|
25560 | |
25561 |
|
25562 |
|
25563 | name: propTypes.string,
|
25564 |
|
25565 | |
25566 |
|
25567 |
|
25568 | notched: propTypes.bool,
|
25569 |
|
25570 | |
25571 |
|
25572 |
|
25573 |
|
25574 |
|
25575 |
|
25576 | onChange: propTypes.func,
|
25577 |
|
25578 | |
25579 |
|
25580 |
|
25581 | placeholder: propTypes.string,
|
25582 |
|
25583 | |
25584 |
|
25585 |
|
25586 |
|
25587 | readOnly: propTypes.bool,
|
25588 |
|
25589 | |
25590 |
|
25591 |
|
25592 | required: propTypes.bool,
|
25593 |
|
25594 | |
25595 |
|
25596 |
|
25597 | rows: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
25598 |
|
25599 | |
25600 |
|
25601 |
|
25602 | rowsMax: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
25603 |
|
25604 | |
25605 |
|
25606 |
|
25607 | startAdornment: propTypes.node,
|
25608 |
|
25609 | |
25610 |
|
25611 |
|
25612 | type: propTypes.string,
|
25613 |
|
25614 | |
25615 |
|
25616 |
|
25617 | value: propTypes.any
|
25618 | } ;
|
25619 | OutlinedInput.muiName = 'Input';
|
25620 | var OutlinedInput$1 = withStyles$1(styles$1d, {
|
25621 | name: 'MuiOutlinedInput'
|
25622 | })(OutlinedInput);
|
25623 |
|
25624 | |
25625 |
|
25626 |
|
25627 |
|
25628 |
|
25629 |
|
25630 |
|
25631 |
|
25632 |
|
25633 |
|
25634 |
|
25635 |
|
25636 |
|
25637 |
|
25638 |
|
25639 |
|
25640 |
|
25641 |
|
25642 |
|
25643 |
|
25644 |
|
25645 |
|
25646 |
|
25647 |
|
25648 | var isBrowser$1 = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
|
25649 |
|
25650 | var timeoutDuration = function () {
|
25651 | var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
|
25652 | for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
|
25653 | if (isBrowser$1 && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
|
25654 | return 1;
|
25655 | }
|
25656 | }
|
25657 | return 0;
|
25658 | }();
|
25659 |
|
25660 | function microtaskDebounce(fn) {
|
25661 | var called = false;
|
25662 | return function () {
|
25663 | if (called) {
|
25664 | return;
|
25665 | }
|
25666 | called = true;
|
25667 | window.Promise.resolve().then(function () {
|
25668 | called = false;
|
25669 | fn();
|
25670 | });
|
25671 | };
|
25672 | }
|
25673 |
|
25674 | function taskDebounce(fn) {
|
25675 | var scheduled = false;
|
25676 | return function () {
|
25677 | if (!scheduled) {
|
25678 | scheduled = true;
|
25679 | setTimeout(function () {
|
25680 | scheduled = false;
|
25681 | fn();
|
25682 | }, timeoutDuration);
|
25683 | }
|
25684 | };
|
25685 | }
|
25686 |
|
25687 | var supportsMicroTasks = isBrowser$1 && window.Promise;
|
25688 |
|
25689 | |
25690 |
|
25691 |
|
25692 |
|
25693 |
|
25694 |
|
25695 |
|
25696 |
|
25697 |
|
25698 | var debounce$1 = supportsMicroTasks ? microtaskDebounce : taskDebounce;
|
25699 |
|
25700 | |
25701 |
|
25702 |
|
25703 |
|
25704 |
|
25705 |
|
25706 |
|
25707 | function isFunction(functionToCheck) {
|
25708 | var getType = {};
|
25709 | return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
|
25710 | }
|
25711 |
|
25712 | |
25713 |
|
25714 |
|
25715 |
|
25716 |
|
25717 |
|
25718 |
|
25719 | function getStyleComputedProperty(element, property) {
|
25720 | if (element.nodeType !== 1) {
|
25721 | return [];
|
25722 | }
|
25723 |
|
25724 | var window = element.ownerDocument.defaultView;
|
25725 | var css = window.getComputedStyle(element, null);
|
25726 | return property ? css[property] : css;
|
25727 | }
|
25728 |
|
25729 | |
25730 |
|
25731 |
|
25732 |
|
25733 |
|
25734 |
|
25735 |
|
25736 | function getParentNode(element) {
|
25737 | if (element.nodeName === 'HTML') {
|
25738 | return element;
|
25739 | }
|
25740 | return element.parentNode || element.host;
|
25741 | }
|
25742 |
|
25743 | |
25744 |
|
25745 |
|
25746 |
|
25747 |
|
25748 |
|
25749 |
|
25750 | function getScrollParent$1(element) {
|
25751 |
|
25752 | if (!element) {
|
25753 | return document.body;
|
25754 | }
|
25755 |
|
25756 | switch (element.nodeName) {
|
25757 | case 'HTML':
|
25758 | case 'BODY':
|
25759 | return element.ownerDocument.body;
|
25760 | case '#document':
|
25761 | return element.body;
|
25762 | }
|
25763 |
|
25764 |
|
25765 |
|
25766 | var _getStyleComputedProp = getStyleComputedProperty(element),
|
25767 | overflow = _getStyleComputedProp.overflow,
|
25768 | overflowX = _getStyleComputedProp.overflowX,
|
25769 | overflowY = _getStyleComputedProp.overflowY;
|
25770 |
|
25771 | if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
|
25772 | return element;
|
25773 | }
|
25774 |
|
25775 | return getScrollParent$1(getParentNode(element));
|
25776 | }
|
25777 |
|
25778 | |
25779 |
|
25780 |
|
25781 |
|
25782 |
|
25783 |
|
25784 |
|
25785 | function getReferenceNode(reference) {
|
25786 | return reference && reference.referenceNode ? reference.referenceNode : reference;
|
25787 | }
|
25788 |
|
25789 | var isIE11 = isBrowser$1 && !!(window.MSInputMethodContext && document.documentMode);
|
25790 | var isIE10 = isBrowser$1 && /MSIE 10/.test(navigator.userAgent);
|
25791 |
|
25792 | |
25793 |
|
25794 |
|
25795 |
|
25796 |
|
25797 |
|
25798 |
|
25799 | function isIE(version) {
|
25800 | if (version === 11) {
|
25801 | return isIE11;
|
25802 | }
|
25803 | if (version === 10) {
|
25804 | return isIE10;
|
25805 | }
|
25806 | return isIE11 || isIE10;
|
25807 | }
|
25808 |
|
25809 | |
25810 |
|
25811 |
|
25812 |
|
25813 |
|
25814 |
|
25815 |
|
25816 | function getOffsetParent(element) {
|
25817 | if (!element) {
|
25818 | return document.documentElement;
|
25819 | }
|
25820 |
|
25821 | var noOffsetParent = isIE(10) ? document.body : null;
|
25822 |
|
25823 |
|
25824 | var offsetParent = element.offsetParent || null;
|
25825 |
|
25826 | while (offsetParent === noOffsetParent && element.nextElementSibling) {
|
25827 | offsetParent = (element = element.nextElementSibling).offsetParent;
|
25828 | }
|
25829 |
|
25830 | var nodeName = offsetParent && offsetParent.nodeName;
|
25831 |
|
25832 | if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
|
25833 | return element ? element.ownerDocument.documentElement : document.documentElement;
|
25834 | }
|
25835 |
|
25836 |
|
25837 |
|
25838 | if (['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {
|
25839 | return getOffsetParent(offsetParent);
|
25840 | }
|
25841 |
|
25842 | return offsetParent;
|
25843 | }
|
25844 |
|
25845 | function isOffsetContainer(element) {
|
25846 | var nodeName = element.nodeName;
|
25847 |
|
25848 | if (nodeName === 'BODY') {
|
25849 | return false;
|
25850 | }
|
25851 | return nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element;
|
25852 | }
|
25853 |
|
25854 | |
25855 |
|
25856 |
|
25857 |
|
25858 |
|
25859 |
|
25860 |
|
25861 | function getRoot(node) {
|
25862 | if (node.parentNode !== null) {
|
25863 | return getRoot(node.parentNode);
|
25864 | }
|
25865 |
|
25866 | return node;
|
25867 | }
|
25868 |
|
25869 | |
25870 |
|
25871 |
|
25872 |
|
25873 |
|
25874 |
|
25875 |
|
25876 |
|
25877 | function findCommonOffsetParent(element1, element2) {
|
25878 |
|
25879 | if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
|
25880 | return document.documentElement;
|
25881 | }
|
25882 |
|
25883 |
|
25884 | var order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
|
25885 | var start = order ? element1 : element2;
|
25886 | var end = order ? element2 : element1;
|
25887 |
|
25888 |
|
25889 | var range = document.createRange();
|
25890 | range.setStart(start, 0);
|
25891 | range.setEnd(end, 0);
|
25892 | var commonAncestorContainer = range.commonAncestorContainer;
|
25893 |
|
25894 |
|
25895 |
|
25896 | if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) {
|
25897 | if (isOffsetContainer(commonAncestorContainer)) {
|
25898 | return commonAncestorContainer;
|
25899 | }
|
25900 |
|
25901 | return getOffsetParent(commonAncestorContainer);
|
25902 | }
|
25903 |
|
25904 |
|
25905 | var element1root = getRoot(element1);
|
25906 | if (element1root.host) {
|
25907 | return findCommonOffsetParent(element1root.host, element2);
|
25908 | } else {
|
25909 | return findCommonOffsetParent(element1, getRoot(element2).host);
|
25910 | }
|
25911 | }
|
25912 |
|
25913 | |
25914 |
|
25915 |
|
25916 |
|
25917 |
|
25918 |
|
25919 |
|
25920 |
|
25921 | function getScroll(element) {
|
25922 | var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
|
25923 |
|
25924 | var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
|
25925 | var nodeName = element.nodeName;
|
25926 |
|
25927 | if (nodeName === 'BODY' || nodeName === 'HTML') {
|
25928 | var html = element.ownerDocument.documentElement;
|
25929 | var scrollingElement = element.ownerDocument.scrollingElement || html;
|
25930 | return scrollingElement[upperSide];
|
25931 | }
|
25932 |
|
25933 | return element[upperSide];
|
25934 | }
|
25935 |
|
25936 | |
25937 |
|
25938 |
|
25939 |
|
25940 |
|
25941 |
|
25942 |
|
25943 |
|
25944 |
|
25945 | function includeScroll(rect, element) {
|
25946 | var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
25947 |
|
25948 | var scrollTop = getScroll(element, 'top');
|
25949 | var scrollLeft = getScroll(element, 'left');
|
25950 | var modifier = subtract ? -1 : 1;
|
25951 | rect.top += scrollTop * modifier;
|
25952 | rect.bottom += scrollTop * modifier;
|
25953 | rect.left += scrollLeft * modifier;
|
25954 | rect.right += scrollLeft * modifier;
|
25955 | return rect;
|
25956 | }
|
25957 |
|
25958 | |
25959 |
|
25960 |
|
25961 |
|
25962 |
|
25963 |
|
25964 |
|
25965 |
|
25966 |
|
25967 |
|
25968 | function getBordersSize(styles, axis) {
|
25969 | var sideA = axis === 'x' ? 'Left' : 'Top';
|
25970 | var sideB = sideA === 'Left' ? 'Right' : 'Bottom';
|
25971 |
|
25972 | return parseFloat(styles['border' + sideA + 'Width'], 10) + parseFloat(styles['border' + sideB + 'Width'], 10);
|
25973 | }
|
25974 |
|
25975 | function getSize(axis, body, html, computedStyle) {
|
25976 | return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? parseInt(html['offset' + axis]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')]) : 0);
|
25977 | }
|
25978 |
|
25979 | function getWindowSizes(document) {
|
25980 | var body = document.body;
|
25981 | var html = document.documentElement;
|
25982 | var computedStyle = isIE(10) && getComputedStyle(html);
|
25983 |
|
25984 | return {
|
25985 | height: getSize('Height', body, html, computedStyle),
|
25986 | width: getSize('Width', body, html, computedStyle)
|
25987 | };
|
25988 | }
|
25989 |
|
25990 | var classCallCheck = function (instance, Constructor) {
|
25991 | if (!(instance instanceof Constructor)) {
|
25992 | throw new TypeError("Cannot call a class as a function");
|
25993 | }
|
25994 | };
|
25995 |
|
25996 | var createClass = function () {
|
25997 | function defineProperties(target, props) {
|
25998 | for (var i = 0; i < props.length; i++) {
|
25999 | var descriptor = props[i];
|
26000 | descriptor.enumerable = descriptor.enumerable || false;
|
26001 | descriptor.configurable = true;
|
26002 | if ("value" in descriptor) descriptor.writable = true;
|
26003 | Object.defineProperty(target, descriptor.key, descriptor);
|
26004 | }
|
26005 | }
|
26006 |
|
26007 | return function (Constructor, protoProps, staticProps) {
|
26008 | if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
26009 | if (staticProps) defineProperties(Constructor, staticProps);
|
26010 | return Constructor;
|
26011 | };
|
26012 | }();
|
26013 |
|
26014 |
|
26015 |
|
26016 |
|
26017 |
|
26018 | var defineProperty$1 = function (obj, key, value) {
|
26019 | if (key in obj) {
|
26020 | Object.defineProperty(obj, key, {
|
26021 | value: value,
|
26022 | enumerable: true,
|
26023 | configurable: true,
|
26024 | writable: true
|
26025 | });
|
26026 | } else {
|
26027 | obj[key] = value;
|
26028 | }
|
26029 |
|
26030 | return obj;
|
26031 | };
|
26032 |
|
26033 | var _extends$1 = Object.assign || function (target) {
|
26034 | for (var i = 1; i < arguments.length; i++) {
|
26035 | var source = arguments[i];
|
26036 |
|
26037 | for (var key in source) {
|
26038 | if (Object.prototype.hasOwnProperty.call(source, key)) {
|
26039 | target[key] = source[key];
|
26040 | }
|
26041 | }
|
26042 | }
|
26043 |
|
26044 | return target;
|
26045 | };
|
26046 |
|
26047 | |
26048 |
|
26049 |
|
26050 |
|
26051 |
|
26052 |
|
26053 |
|
26054 | function getClientRect(offsets) {
|
26055 | return _extends$1({}, offsets, {
|
26056 | right: offsets.left + offsets.width,
|
26057 | bottom: offsets.top + offsets.height
|
26058 | });
|
26059 | }
|
26060 |
|
26061 | |
26062 |
|
26063 |
|
26064 |
|
26065 |
|
26066 |
|
26067 |
|
26068 | function getBoundingClientRect(element) {
|
26069 | var rect = {};
|
26070 |
|
26071 |
|
26072 |
|
26073 |
|
26074 | try {
|
26075 | if (isIE(10)) {
|
26076 | rect = element.getBoundingClientRect();
|
26077 | var scrollTop = getScroll(element, 'top');
|
26078 | var scrollLeft = getScroll(element, 'left');
|
26079 | rect.top += scrollTop;
|
26080 | rect.left += scrollLeft;
|
26081 | rect.bottom += scrollTop;
|
26082 | rect.right += scrollLeft;
|
26083 | } else {
|
26084 | rect = element.getBoundingClientRect();
|
26085 | }
|
26086 | } catch (e) {}
|
26087 |
|
26088 | var result = {
|
26089 | left: rect.left,
|
26090 | top: rect.top,
|
26091 | width: rect.right - rect.left,
|
26092 | height: rect.bottom - rect.top
|
26093 | };
|
26094 |
|
26095 |
|
26096 | var sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
|
26097 | var width = sizes.width || element.clientWidth || result.width;
|
26098 | var height = sizes.height || element.clientHeight || result.height;
|
26099 |
|
26100 | var horizScrollbar = element.offsetWidth - width;
|
26101 | var vertScrollbar = element.offsetHeight - height;
|
26102 |
|
26103 |
|
26104 |
|
26105 | if (horizScrollbar || vertScrollbar) {
|
26106 | var styles = getStyleComputedProperty(element);
|
26107 | horizScrollbar -= getBordersSize(styles, 'x');
|
26108 | vertScrollbar -= getBordersSize(styles, 'y');
|
26109 |
|
26110 | result.width -= horizScrollbar;
|
26111 | result.height -= vertScrollbar;
|
26112 | }
|
26113 |
|
26114 | return getClientRect(result);
|
26115 | }
|
26116 |
|
26117 | function getOffsetRectRelativeToArbitraryNode(children, parent) {
|
26118 | var fixedPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
26119 |
|
26120 | var isIE10 = isIE(10);
|
26121 | var isHTML = parent.nodeName === 'HTML';
|
26122 | var childrenRect = getBoundingClientRect(children);
|
26123 | var parentRect = getBoundingClientRect(parent);
|
26124 | var scrollParent = getScrollParent$1(children);
|
26125 |
|
26126 | var styles = getStyleComputedProperty(parent);
|
26127 | var borderTopWidth = parseFloat(styles.borderTopWidth, 10);
|
26128 | var borderLeftWidth = parseFloat(styles.borderLeftWidth, 10);
|
26129 |
|
26130 |
|
26131 | if (fixedPosition && isHTML) {
|
26132 | parentRect.top = Math.max(parentRect.top, 0);
|
26133 | parentRect.left = Math.max(parentRect.left, 0);
|
26134 | }
|
26135 | var offsets = getClientRect({
|
26136 | top: childrenRect.top - parentRect.top - borderTopWidth,
|
26137 | left: childrenRect.left - parentRect.left - borderLeftWidth,
|
26138 | width: childrenRect.width,
|
26139 | height: childrenRect.height
|
26140 | });
|
26141 | offsets.marginTop = 0;
|
26142 | offsets.marginLeft = 0;
|
26143 |
|
26144 |
|
26145 |
|
26146 |
|
26147 |
|
26148 | if (!isIE10 && isHTML) {
|
26149 | var marginTop = parseFloat(styles.marginTop, 10);
|
26150 | var marginLeft = parseFloat(styles.marginLeft, 10);
|
26151 |
|
26152 | offsets.top -= borderTopWidth - marginTop;
|
26153 | offsets.bottom -= borderTopWidth - marginTop;
|
26154 | offsets.left -= borderLeftWidth - marginLeft;
|
26155 | offsets.right -= borderLeftWidth - marginLeft;
|
26156 |
|
26157 |
|
26158 | offsets.marginTop = marginTop;
|
26159 | offsets.marginLeft = marginLeft;
|
26160 | }
|
26161 |
|
26162 | if (isIE10 && !fixedPosition ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') {
|
26163 | offsets = includeScroll(offsets, parent);
|
26164 | }
|
26165 |
|
26166 | return offsets;
|
26167 | }
|
26168 |
|
26169 | function getViewportOffsetRectRelativeToArtbitraryNode(element) {
|
26170 | var excludeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
26171 |
|
26172 | var html = element.ownerDocument.documentElement;
|
26173 | var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
|
26174 | var width = Math.max(html.clientWidth, window.innerWidth || 0);
|
26175 | var height = Math.max(html.clientHeight, window.innerHeight || 0);
|
26176 |
|
26177 | var scrollTop = !excludeScroll ? getScroll(html) : 0;
|
26178 | var scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;
|
26179 |
|
26180 | var offset = {
|
26181 | top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
|
26182 | left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
|
26183 | width: width,
|
26184 | height: height
|
26185 | };
|
26186 |
|
26187 | return getClientRect(offset);
|
26188 | }
|
26189 |
|
26190 | |
26191 |
|
26192 |
|
26193 |
|
26194 |
|
26195 |
|
26196 |
|
26197 |
|
26198 | function isFixed(element) {
|
26199 | var nodeName = element.nodeName;
|
26200 | if (nodeName === 'BODY' || nodeName === 'HTML') {
|
26201 | return false;
|
26202 | }
|
26203 | if (getStyleComputedProperty(element, 'position') === 'fixed') {
|
26204 | return true;
|
26205 | }
|
26206 | var parentNode = getParentNode(element);
|
26207 | if (!parentNode) {
|
26208 | return false;
|
26209 | }
|
26210 | return isFixed(parentNode);
|
26211 | }
|
26212 |
|
26213 | |
26214 |
|
26215 |
|
26216 |
|
26217 |
|
26218 |
|
26219 |
|
26220 |
|
26221 | function getFixedPositionOffsetParent(element) {
|
26222 |
|
26223 | if (!element || !element.parentElement || isIE()) {
|
26224 | return document.documentElement;
|
26225 | }
|
26226 | var el = element.parentElement;
|
26227 | while (el && getStyleComputedProperty(el, 'transform') === 'none') {
|
26228 | el = el.parentElement;
|
26229 | }
|
26230 | return el || document.documentElement;
|
26231 | }
|
26232 |
|
26233 | |
26234 |
|
26235 |
|
26236 |
|
26237 |
|
26238 |
|
26239 |
|
26240 |
|
26241 |
|
26242 |
|
26243 |
|
26244 | function getBoundaries(popper, reference, padding, boundariesElement) {
|
26245 | var fixedPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
26246 |
|
26247 |
|
26248 |
|
26249 | var boundaries = { top: 0, left: 0 };
|
26250 | var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
|
26251 |
|
26252 |
|
26253 | if (boundariesElement === 'viewport') {
|
26254 | boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
|
26255 | } else {
|
26256 |
|
26257 | var boundariesNode = void 0;
|
26258 | if (boundariesElement === 'scrollParent') {
|
26259 | boundariesNode = getScrollParent$1(getParentNode(reference));
|
26260 | if (boundariesNode.nodeName === 'BODY') {
|
26261 | boundariesNode = popper.ownerDocument.documentElement;
|
26262 | }
|
26263 | } else if (boundariesElement === 'window') {
|
26264 | boundariesNode = popper.ownerDocument.documentElement;
|
26265 | } else {
|
26266 | boundariesNode = boundariesElement;
|
26267 | }
|
26268 |
|
26269 | var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition);
|
26270 |
|
26271 |
|
26272 | if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
|
26273 | var _getWindowSizes = getWindowSizes(popper.ownerDocument),
|
26274 | height = _getWindowSizes.height,
|
26275 | width = _getWindowSizes.width;
|
26276 |
|
26277 | boundaries.top += offsets.top - offsets.marginTop;
|
26278 | boundaries.bottom = height + offsets.top;
|
26279 | boundaries.left += offsets.left - offsets.marginLeft;
|
26280 | boundaries.right = width + offsets.left;
|
26281 | } else {
|
26282 |
|
26283 | boundaries = offsets;
|
26284 | }
|
26285 | }
|
26286 |
|
26287 |
|
26288 | padding = padding || 0;
|
26289 | var isPaddingNumber = typeof padding === 'number';
|
26290 | boundaries.left += isPaddingNumber ? padding : padding.left || 0;
|
26291 | boundaries.top += isPaddingNumber ? padding : padding.top || 0;
|
26292 | boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
|
26293 | boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0;
|
26294 |
|
26295 | return boundaries;
|
26296 | }
|
26297 |
|
26298 | function getArea(_ref) {
|
26299 | var width = _ref.width,
|
26300 | height = _ref.height;
|
26301 |
|
26302 | return width * height;
|
26303 | }
|
26304 |
|
26305 | |
26306 |
|
26307 |
|
26308 |
|
26309 |
|
26310 |
|
26311 |
|
26312 |
|
26313 |
|
26314 | function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) {
|
26315 | var padding = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
|
26316 |
|
26317 | if (placement.indexOf('auto') === -1) {
|
26318 | return placement;
|
26319 | }
|
26320 |
|
26321 | var boundaries = getBoundaries(popper, reference, padding, boundariesElement);
|
26322 |
|
26323 | var rects = {
|
26324 | top: {
|
26325 | width: boundaries.width,
|
26326 | height: refRect.top - boundaries.top
|
26327 | },
|
26328 | right: {
|
26329 | width: boundaries.right - refRect.right,
|
26330 | height: boundaries.height
|
26331 | },
|
26332 | bottom: {
|
26333 | width: boundaries.width,
|
26334 | height: boundaries.bottom - refRect.bottom
|
26335 | },
|
26336 | left: {
|
26337 | width: refRect.left - boundaries.left,
|
26338 | height: boundaries.height
|
26339 | }
|
26340 | };
|
26341 |
|
26342 | var sortedAreas = Object.keys(rects).map(function (key) {
|
26343 | return _extends$1({
|
26344 | key: key
|
26345 | }, rects[key], {
|
26346 | area: getArea(rects[key])
|
26347 | });
|
26348 | }).sort(function (a, b) {
|
26349 | return b.area - a.area;
|
26350 | });
|
26351 |
|
26352 | var filteredAreas = sortedAreas.filter(function (_ref2) {
|
26353 | var width = _ref2.width,
|
26354 | height = _ref2.height;
|
26355 | return width >= popper.clientWidth && height >= popper.clientHeight;
|
26356 | });
|
26357 |
|
26358 | var computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;
|
26359 |
|
26360 | var variation = placement.split('-')[1];
|
26361 |
|
26362 | return computedPlacement + (variation ? '-' + variation : '');
|
26363 | }
|
26364 |
|
26365 | |
26366 |
|
26367 |
|
26368 |
|
26369 |
|
26370 |
|
26371 |
|
26372 |
|
26373 |
|
26374 |
|
26375 | function getReferenceOffsets(state, popper, reference) {
|
26376 | var fixedPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
26377 |
|
26378 | var commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
|
26379 | return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
|
26380 | }
|
26381 |
|
26382 | |
26383 |
|
26384 |
|
26385 |
|
26386 |
|
26387 |
|
26388 |
|
26389 | function getOuterSizes(element) {
|
26390 | var window = element.ownerDocument.defaultView;
|
26391 | var styles = window.getComputedStyle(element);
|
26392 | var x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
|
26393 | var y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
|
26394 | var result = {
|
26395 | width: element.offsetWidth + y,
|
26396 | height: element.offsetHeight + x
|
26397 | };
|
26398 | return result;
|
26399 | }
|
26400 |
|
26401 | |
26402 |
|
26403 |
|
26404 |
|
26405 |
|
26406 |
|
26407 |
|
26408 | function getOppositePlacement(placement) {
|
26409 | var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
|
26410 | return placement.replace(/left|right|bottom|top/g, function (matched) {
|
26411 | return hash[matched];
|
26412 | });
|
26413 | }
|
26414 |
|
26415 | |
26416 |
|
26417 |
|
26418 |
|
26419 |
|
26420 |
|
26421 |
|
26422 |
|
26423 |
|
26424 |
|
26425 | function getPopperOffsets(popper, referenceOffsets, placement) {
|
26426 | placement = placement.split('-')[0];
|
26427 |
|
26428 |
|
26429 | var popperRect = getOuterSizes(popper);
|
26430 |
|
26431 |
|
26432 | var popperOffsets = {
|
26433 | width: popperRect.width,
|
26434 | height: popperRect.height
|
26435 | };
|
26436 |
|
26437 |
|
26438 | var isHoriz = ['right', 'left'].indexOf(placement) !== -1;
|
26439 | var mainSide = isHoriz ? 'top' : 'left';
|
26440 | var secondarySide = isHoriz ? 'left' : 'top';
|
26441 | var measurement = isHoriz ? 'height' : 'width';
|
26442 | var secondaryMeasurement = !isHoriz ? 'height' : 'width';
|
26443 |
|
26444 | popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2;
|
26445 | if (placement === secondarySide) {
|
26446 | popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
|
26447 | } else {
|
26448 | popperOffsets[secondarySide] = referenceOffsets[getOppositePlacement(secondarySide)];
|
26449 | }
|
26450 |
|
26451 | return popperOffsets;
|
26452 | }
|
26453 |
|
26454 | |
26455 |
|
26456 |
|
26457 |
|
26458 |
|
26459 |
|
26460 |
|
26461 |
|
26462 |
|
26463 | function find(arr, check) {
|
26464 |
|
26465 | if (Array.prototype.find) {
|
26466 | return arr.find(check);
|
26467 | }
|
26468 |
|
26469 |
|
26470 | return arr.filter(check)[0];
|
26471 | }
|
26472 |
|
26473 | |
26474 |
|
26475 |
|
26476 |
|
26477 |
|
26478 |
|
26479 |
|
26480 |
|
26481 |
|
26482 | function findIndex(arr, prop, value) {
|
26483 |
|
26484 | if (Array.prototype.findIndex) {
|
26485 | return arr.findIndex(function (cur) {
|
26486 | return cur[prop] === value;
|
26487 | });
|
26488 | }
|
26489 |
|
26490 |
|
26491 | var match = find(arr, function (obj) {
|
26492 | return obj[prop] === value;
|
26493 | });
|
26494 | return arr.indexOf(match);
|
26495 | }
|
26496 |
|
26497 | |
26498 |
|
26499 |
|
26500 |
|
26501 |
|
26502 |
|
26503 |
|
26504 |
|
26505 |
|
26506 |
|
26507 | function runModifiers(modifiers, data, ends) {
|
26508 | var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
|
26509 |
|
26510 | modifiersToRun.forEach(function (modifier) {
|
26511 | if (modifier['function']) {
|
26512 |
|
26513 | console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
|
26514 | }
|
26515 | var fn = modifier['function'] || modifier.fn;
|
26516 | if (modifier.enabled && isFunction(fn)) {
|
26517 |
|
26518 |
|
26519 |
|
26520 | data.offsets.popper = getClientRect(data.offsets.popper);
|
26521 | data.offsets.reference = getClientRect(data.offsets.reference);
|
26522 |
|
26523 | data = fn(data, modifier);
|
26524 | }
|
26525 | });
|
26526 |
|
26527 | return data;
|
26528 | }
|
26529 |
|
26530 | |
26531 |
|
26532 |
|
26533 |
|
26534 |
|
26535 |
|
26536 |
|
26537 | function update$1() {
|
26538 |
|
26539 | if (this.state.isDestroyed) {
|
26540 | return;
|
26541 | }
|
26542 |
|
26543 | var data = {
|
26544 | instance: this,
|
26545 | styles: {},
|
26546 | arrowStyles: {},
|
26547 | attributes: {},
|
26548 | flipped: false,
|
26549 | offsets: {}
|
26550 | };
|
26551 |
|
26552 |
|
26553 | data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference, this.options.positionFixed);
|
26554 |
|
26555 |
|
26556 |
|
26557 |
|
26558 | data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding);
|
26559 |
|
26560 |
|
26561 | data.originalPlacement = data.placement;
|
26562 |
|
26563 | data.positionFixed = this.options.positionFixed;
|
26564 |
|
26565 |
|
26566 | data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement);
|
26567 |
|
26568 | data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute';
|
26569 |
|
26570 |
|
26571 | data = runModifiers(this.modifiers, data);
|
26572 |
|
26573 |
|
26574 |
|
26575 | if (!this.state.isCreated) {
|
26576 | this.state.isCreated = true;
|
26577 | this.options.onCreate(data);
|
26578 | } else {
|
26579 | this.options.onUpdate(data);
|
26580 | }
|
26581 | }
|
26582 |
|
26583 | |
26584 |
|
26585 |
|
26586 |
|
26587 |
|
26588 |
|
26589 | function isModifierEnabled(modifiers, modifierName) {
|
26590 | return modifiers.some(function (_ref) {
|
26591 | var name = _ref.name,
|
26592 | enabled = _ref.enabled;
|
26593 | return enabled && name === modifierName;
|
26594 | });
|
26595 | }
|
26596 |
|
26597 | |
26598 |
|
26599 |
|
26600 |
|
26601 |
|
26602 |
|
26603 |
|
26604 | function getSupportedPropertyName(property) {
|
26605 | var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
|
26606 | var upperProp = property.charAt(0).toUpperCase() + property.slice(1);
|
26607 |
|
26608 | for (var i = 0; i < prefixes.length; i++) {
|
26609 | var prefix = prefixes[i];
|
26610 | var toCheck = prefix ? '' + prefix + upperProp : property;
|
26611 | if (typeof document.body.style[toCheck] !== 'undefined') {
|
26612 | return toCheck;
|
26613 | }
|
26614 | }
|
26615 | return null;
|
26616 | }
|
26617 |
|
26618 | |
26619 |
|
26620 |
|
26621 |
|
26622 |
|
26623 | function destroy() {
|
26624 | this.state.isDestroyed = true;
|
26625 |
|
26626 |
|
26627 | if (isModifierEnabled(this.modifiers, 'applyStyle')) {
|
26628 | this.popper.removeAttribute('x-placement');
|
26629 | this.popper.style.position = '';
|
26630 | this.popper.style.top = '';
|
26631 | this.popper.style.left = '';
|
26632 | this.popper.style.right = '';
|
26633 | this.popper.style.bottom = '';
|
26634 | this.popper.style.willChange = '';
|
26635 | this.popper.style[getSupportedPropertyName('transform')] = '';
|
26636 | }
|
26637 |
|
26638 | this.disableEventListeners();
|
26639 |
|
26640 |
|
26641 |
|
26642 | if (this.options.removeOnDestroy) {
|
26643 | this.popper.parentNode.removeChild(this.popper);
|
26644 | }
|
26645 | return this;
|
26646 | }
|
26647 |
|
26648 | |
26649 |
|
26650 |
|
26651 |
|
26652 |
|
26653 | function getWindow(element) {
|
26654 | var ownerDocument = element.ownerDocument;
|
26655 | return ownerDocument ? ownerDocument.defaultView : window;
|
26656 | }
|
26657 |
|
26658 | function attachToScrollParents(scrollParent, event, callback, scrollParents) {
|
26659 | var isBody = scrollParent.nodeName === 'BODY';
|
26660 | var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
|
26661 | target.addEventListener(event, callback, { passive: true });
|
26662 |
|
26663 | if (!isBody) {
|
26664 | attachToScrollParents(getScrollParent$1(target.parentNode), event, callback, scrollParents);
|
26665 | }
|
26666 | scrollParents.push(target);
|
26667 | }
|
26668 |
|
26669 | |
26670 |
|
26671 |
|
26672 |
|
26673 |
|
26674 |
|
26675 | function setupEventListeners(reference, options, state, updateBound) {
|
26676 |
|
26677 | state.updateBound = updateBound;
|
26678 | getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });
|
26679 |
|
26680 |
|
26681 | var scrollElement = getScrollParent$1(reference);
|
26682 | attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);
|
26683 | state.scrollElement = scrollElement;
|
26684 | state.eventsEnabled = true;
|
26685 |
|
26686 | return state;
|
26687 | }
|
26688 |
|
26689 | |
26690 |
|
26691 |
|
26692 |
|
26693 |
|
26694 |
|
26695 | function enableEventListeners() {
|
26696 | if (!this.state.eventsEnabled) {
|
26697 | this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate);
|
26698 | }
|
26699 | }
|
26700 |
|
26701 | |
26702 |
|
26703 |
|
26704 |
|
26705 |
|
26706 |
|
26707 | function removeEventListeners(reference, state) {
|
26708 |
|
26709 | getWindow(reference).removeEventListener('resize', state.updateBound);
|
26710 |
|
26711 |
|
26712 | state.scrollParents.forEach(function (target) {
|
26713 | target.removeEventListener('scroll', state.updateBound);
|
26714 | });
|
26715 |
|
26716 |
|
26717 | state.updateBound = null;
|
26718 | state.scrollParents = [];
|
26719 | state.scrollElement = null;
|
26720 | state.eventsEnabled = false;
|
26721 | return state;
|
26722 | }
|
26723 |
|
26724 | |
26725 |
|
26726 |
|
26727 |
|
26728 |
|
26729 |
|
26730 |
|
26731 | function disableEventListeners() {
|
26732 | if (this.state.eventsEnabled) {
|
26733 | cancelAnimationFrame(this.scheduleUpdate);
|
26734 | this.state = removeEventListeners(this.reference, this.state);
|
26735 | }
|
26736 | }
|
26737 |
|
26738 | |
26739 |
|
26740 |
|
26741 |
|
26742 |
|
26743 |
|
26744 |
|
26745 | function isNumeric(n) {
|
26746 | return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
|
26747 | }
|
26748 |
|
26749 | |
26750 |
|
26751 |
|
26752 |
|
26753 |
|
26754 |
|
26755 |
|
26756 |
|
26757 | function setStyles(element, styles) {
|
26758 | Object.keys(styles).forEach(function (prop) {
|
26759 | var unit = '';
|
26760 |
|
26761 | if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
|
26762 | unit = 'px';
|
26763 | }
|
26764 | element.style[prop] = styles[prop] + unit;
|
26765 | });
|
26766 | }
|
26767 |
|
26768 | |
26769 |
|
26770 |
|
26771 |
|
26772 |
|
26773 |
|
26774 |
|
26775 |
|
26776 | function setAttributes(element, attributes) {
|
26777 | Object.keys(attributes).forEach(function (prop) {
|
26778 | var value = attributes[prop];
|
26779 | if (value !== false) {
|
26780 | element.setAttribute(prop, attributes[prop]);
|
26781 | } else {
|
26782 | element.removeAttribute(prop);
|
26783 | }
|
26784 | });
|
26785 | }
|
26786 |
|
26787 | |
26788 |
|
26789 |
|
26790 |
|
26791 |
|
26792 |
|
26793 |
|
26794 |
|
26795 |
|
26796 | function applyStyle(data) {
|
26797 |
|
26798 |
|
26799 |
|
26800 |
|
26801 | setStyles(data.instance.popper, data.styles);
|
26802 |
|
26803 |
|
26804 |
|
26805 | setAttributes(data.instance.popper, data.attributes);
|
26806 |
|
26807 |
|
26808 | if (data.arrowElement && Object.keys(data.arrowStyles).length) {
|
26809 | setStyles(data.arrowElement, data.arrowStyles);
|
26810 | }
|
26811 |
|
26812 | return data;
|
26813 | }
|
26814 |
|
26815 | |
26816 |
|
26817 |
|
26818 |
|
26819 |
|
26820 |
|
26821 |
|
26822 |
|
26823 |
|
26824 |
|
26825 | function applyStyleOnLoad(reference, popper, options, modifierOptions, state) {
|
26826 |
|
26827 | var referenceOffsets = getReferenceOffsets(state, popper, reference, options.positionFixed);
|
26828 |
|
26829 |
|
26830 |
|
26831 |
|
26832 | var placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding);
|
26833 |
|
26834 | popper.setAttribute('x-placement', placement);
|
26835 |
|
26836 |
|
26837 |
|
26838 | setStyles(popper, { position: options.positionFixed ? 'fixed' : 'absolute' });
|
26839 |
|
26840 | return options;
|
26841 | }
|
26842 |
|
26843 | |
26844 |
|
26845 |
|
26846 |
|
26847 |
|
26848 |
|
26849 |
|
26850 |
|
26851 |
|
26852 |
|
26853 |
|
26854 |
|
26855 |
|
26856 |
|
26857 |
|
26858 |
|
26859 |
|
26860 |
|
26861 |
|
26862 | function getRoundedOffsets(data, shouldRound) {
|
26863 | var _data$offsets = data.offsets,
|
26864 | popper = _data$offsets.popper,
|
26865 | reference = _data$offsets.reference;
|
26866 | var round = Math.round,
|
26867 | floor = Math.floor;
|
26868 |
|
26869 | var noRound = function noRound(v) {
|
26870 | return v;
|
26871 | };
|
26872 |
|
26873 | var referenceWidth = round(reference.width);
|
26874 | var popperWidth = round(popper.width);
|
26875 |
|
26876 | var isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
|
26877 | var isVariation = data.placement.indexOf('-') !== -1;
|
26878 | var sameWidthParity = referenceWidth % 2 === popperWidth % 2;
|
26879 | var bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;
|
26880 |
|
26881 | var horizontalToInteger = !shouldRound ? noRound : isVertical || isVariation || sameWidthParity ? round : floor;
|
26882 | var verticalToInteger = !shouldRound ? noRound : round;
|
26883 |
|
26884 | return {
|
26885 | left: horizontalToInteger(bothOddWidth && !isVariation && shouldRound ? popper.left - 1 : popper.left),
|
26886 | top: verticalToInteger(popper.top),
|
26887 | bottom: verticalToInteger(popper.bottom),
|
26888 | right: horizontalToInteger(popper.right)
|
26889 | };
|
26890 | }
|
26891 |
|
26892 | var isFirefox = isBrowser$1 && /Firefox/i.test(navigator.userAgent);
|
26893 |
|
26894 | |
26895 |
|
26896 |
|
26897 |
|
26898 |
|
26899 |
|
26900 |
|
26901 | function computeStyle(data, options) {
|
26902 | var x = options.x,
|
26903 | y = options.y;
|
26904 | var popper = data.offsets.popper;
|
26905 |
|
26906 |
|
26907 |
|
26908 | var legacyGpuAccelerationOption = find(data.instance.modifiers, function (modifier) {
|
26909 | return modifier.name === 'applyStyle';
|
26910 | }).gpuAcceleration;
|
26911 | if (legacyGpuAccelerationOption !== undefined) {
|
26912 | console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
|
26913 | }
|
26914 | var gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration;
|
26915 |
|
26916 | var offsetParent = getOffsetParent(data.instance.popper);
|
26917 | var offsetParentRect = getBoundingClientRect(offsetParent);
|
26918 |
|
26919 |
|
26920 | var styles = {
|
26921 | position: popper.position
|
26922 | };
|
26923 |
|
26924 | var offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox);
|
26925 |
|
26926 | var sideA = x === 'bottom' ? 'top' : 'bottom';
|
26927 | var sideB = y === 'right' ? 'left' : 'right';
|
26928 |
|
26929 |
|
26930 |
|
26931 |
|
26932 | var prefixedProperty = getSupportedPropertyName('transform');
|
26933 |
|
26934 |
|
26935 |
|
26936 |
|
26937 |
|
26938 |
|
26939 |
|
26940 |
|
26941 |
|
26942 |
|
26943 | var left = void 0,
|
26944 | top = void 0;
|
26945 | if (sideA === 'bottom') {
|
26946 |
|
26947 |
|
26948 | if (offsetParent.nodeName === 'HTML') {
|
26949 | top = -offsetParent.clientHeight + offsets.bottom;
|
26950 | } else {
|
26951 | top = -offsetParentRect.height + offsets.bottom;
|
26952 | }
|
26953 | } else {
|
26954 | top = offsets.top;
|
26955 | }
|
26956 | if (sideB === 'right') {
|
26957 | if (offsetParent.nodeName === 'HTML') {
|
26958 | left = -offsetParent.clientWidth + offsets.right;
|
26959 | } else {
|
26960 | left = -offsetParentRect.width + offsets.right;
|
26961 | }
|
26962 | } else {
|
26963 | left = offsets.left;
|
26964 | }
|
26965 | if (gpuAcceleration && prefixedProperty) {
|
26966 | styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
|
26967 | styles[sideA] = 0;
|
26968 | styles[sideB] = 0;
|
26969 | styles.willChange = 'transform';
|
26970 | } else {
|
26971 |
|
26972 | var invertTop = sideA === 'bottom' ? -1 : 1;
|
26973 | var invertLeft = sideB === 'right' ? -1 : 1;
|
26974 | styles[sideA] = top * invertTop;
|
26975 | styles[sideB] = left * invertLeft;
|
26976 | styles.willChange = sideA + ', ' + sideB;
|
26977 | }
|
26978 |
|
26979 |
|
26980 | var attributes = {
|
26981 | 'x-placement': data.placement
|
26982 | };
|
26983 |
|
26984 |
|
26985 | data.attributes = _extends$1({}, attributes, data.attributes);
|
26986 | data.styles = _extends$1({}, styles, data.styles);
|
26987 | data.arrowStyles = _extends$1({}, data.offsets.arrow, data.arrowStyles);
|
26988 |
|
26989 | return data;
|
26990 | }
|
26991 |
|
26992 | |
26993 |
|
26994 |
|
26995 |
|
26996 |
|
26997 |
|
26998 |
|
26999 |
|
27000 |
|
27001 |
|
27002 | function isModifierRequired(modifiers, requestingName, requestedName) {
|
27003 | var requesting = find(modifiers, function (_ref) {
|
27004 | var name = _ref.name;
|
27005 | return name === requestingName;
|
27006 | });
|
27007 |
|
27008 | var isRequired = !!requesting && modifiers.some(function (modifier) {
|
27009 | return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
|
27010 | });
|
27011 |
|
27012 | if (!isRequired) {
|
27013 | var _requesting = '`' + requestingName + '`';
|
27014 | var requested = '`' + requestedName + '`';
|
27015 | console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
|
27016 | }
|
27017 | return isRequired;
|
27018 | }
|
27019 |
|
27020 | |
27021 |
|
27022 |
|
27023 |
|
27024 |
|
27025 |
|
27026 |
|
27027 | function arrow(data, options) {
|
27028 | var _data$offsets$arrow;
|
27029 |
|
27030 |
|
27031 | if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
|
27032 | return data;
|
27033 | }
|
27034 |
|
27035 | var arrowElement = options.element;
|
27036 |
|
27037 |
|
27038 | if (typeof arrowElement === 'string') {
|
27039 | arrowElement = data.instance.popper.querySelector(arrowElement);
|
27040 |
|
27041 |
|
27042 | if (!arrowElement) {
|
27043 | return data;
|
27044 | }
|
27045 | } else {
|
27046 |
|
27047 |
|
27048 | if (!data.instance.popper.contains(arrowElement)) {
|
27049 | console.warn('WARNING: `arrow.element` must be child of its popper element!');
|
27050 | return data;
|
27051 | }
|
27052 | }
|
27053 |
|
27054 | var placement = data.placement.split('-')[0];
|
27055 | var _data$offsets = data.offsets,
|
27056 | popper = _data$offsets.popper,
|
27057 | reference = _data$offsets.reference;
|
27058 |
|
27059 | var isVertical = ['left', 'right'].indexOf(placement) !== -1;
|
27060 |
|
27061 | var len = isVertical ? 'height' : 'width';
|
27062 | var sideCapitalized = isVertical ? 'Top' : 'Left';
|
27063 | var side = sideCapitalized.toLowerCase();
|
27064 | var altSide = isVertical ? 'left' : 'top';
|
27065 | var opSide = isVertical ? 'bottom' : 'right';
|
27066 | var arrowElementSize = getOuterSizes(arrowElement)[len];
|
27067 |
|
27068 |
|
27069 |
|
27070 |
|
27071 |
|
27072 |
|
27073 |
|
27074 | if (reference[opSide] - arrowElementSize < popper[side]) {
|
27075 | data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize);
|
27076 | }
|
27077 |
|
27078 | if (reference[side] + arrowElementSize > popper[opSide]) {
|
27079 | data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide];
|
27080 | }
|
27081 | data.offsets.popper = getClientRect(data.offsets.popper);
|
27082 |
|
27083 |
|
27084 | var center = reference[side] + reference[len] / 2 - arrowElementSize / 2;
|
27085 |
|
27086 |
|
27087 |
|
27088 | var css = getStyleComputedProperty(data.instance.popper);
|
27089 | var popperMarginSide = parseFloat(css['margin' + sideCapitalized], 10);
|
27090 | var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width'], 10);
|
27091 | var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;
|
27092 |
|
27093 |
|
27094 | sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);
|
27095 |
|
27096 | data.arrowElement = arrowElement;
|
27097 | data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty$1(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty$1(_data$offsets$arrow, altSide, ''), _data$offsets$arrow);
|
27098 |
|
27099 | return data;
|
27100 | }
|
27101 |
|
27102 | |
27103 |
|
27104 |
|
27105 |
|
27106 |
|
27107 |
|
27108 |
|
27109 | function getOppositeVariation(variation) {
|
27110 | if (variation === 'end') {
|
27111 | return 'start';
|
27112 | } else if (variation === 'start') {
|
27113 | return 'end';
|
27114 | }
|
27115 | return variation;
|
27116 | }
|
27117 |
|
27118 | |
27119 |
|
27120 |
|
27121 |
|
27122 |
|
27123 |
|
27124 |
|
27125 |
|
27126 |
|
27127 |
|
27128 |
|
27129 |
|
27130 |
|
27131 |
|
27132 |
|
27133 |
|
27134 |
|
27135 |
|
27136 |
|
27137 |
|
27138 |
|
27139 |
|
27140 |
|
27141 |
|
27142 |
|
27143 |
|
27144 |
|
27145 |
|
27146 |
|
27147 |
|
27148 |
|
27149 | var placements = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'];
|
27150 |
|
27151 |
|
27152 | var validPlacements = placements.slice(3);
|
27153 |
|
27154 | |
27155 |
|
27156 |
|
27157 |
|
27158 |
|
27159 |
|
27160 |
|
27161 |
|
27162 |
|
27163 |
|
27164 | function clockwise(placement) {
|
27165 | var counter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
27166 |
|
27167 | var index = validPlacements.indexOf(placement);
|
27168 | var arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index));
|
27169 | return counter ? arr.reverse() : arr;
|
27170 | }
|
27171 |
|
27172 | var BEHAVIORS = {
|
27173 | FLIP: 'flip',
|
27174 | CLOCKWISE: 'clockwise',
|
27175 | COUNTERCLOCKWISE: 'counterclockwise'
|
27176 | };
|
27177 |
|
27178 | |
27179 |
|
27180 |
|
27181 |
|
27182 |
|
27183 |
|
27184 |
|
27185 | function flip(data, options) {
|
27186 |
|
27187 | if (isModifierEnabled(data.instance.modifiers, 'inner')) {
|
27188 | return data;
|
27189 | }
|
27190 |
|
27191 | if (data.flipped && data.placement === data.originalPlacement) {
|
27192 |
|
27193 | return data;
|
27194 | }
|
27195 |
|
27196 | var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement, data.positionFixed);
|
27197 |
|
27198 | var placement = data.placement.split('-')[0];
|
27199 | var placementOpposite = getOppositePlacement(placement);
|
27200 | var variation = data.placement.split('-')[1] || '';
|
27201 |
|
27202 | var flipOrder = [];
|
27203 |
|
27204 | switch (options.behavior) {
|
27205 | case BEHAVIORS.FLIP:
|
27206 | flipOrder = [placement, placementOpposite];
|
27207 | break;
|
27208 | case BEHAVIORS.CLOCKWISE:
|
27209 | flipOrder = clockwise(placement);
|
27210 | break;
|
27211 | case BEHAVIORS.COUNTERCLOCKWISE:
|
27212 | flipOrder = clockwise(placement, true);
|
27213 | break;
|
27214 | default:
|
27215 | flipOrder = options.behavior;
|
27216 | }
|
27217 |
|
27218 | flipOrder.forEach(function (step, index) {
|
27219 | if (placement !== step || flipOrder.length === index + 1) {
|
27220 | return data;
|
27221 | }
|
27222 |
|
27223 | placement = data.placement.split('-')[0];
|
27224 | placementOpposite = getOppositePlacement(placement);
|
27225 |
|
27226 | var popperOffsets = data.offsets.popper;
|
27227 | var refOffsets = data.offsets.reference;
|
27228 |
|
27229 |
|
27230 | var floor = Math.floor;
|
27231 | var overlapsRef = placement === 'left' && floor(popperOffsets.right) > floor(refOffsets.left) || placement === 'right' && floor(popperOffsets.left) < floor(refOffsets.right) || placement === 'top' && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === 'bottom' && floor(popperOffsets.top) < floor(refOffsets.bottom);
|
27232 |
|
27233 | var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);
|
27234 | var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);
|
27235 | var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);
|
27236 | var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);
|
27237 |
|
27238 | var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom;
|
27239 |
|
27240 |
|
27241 | var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
|
27242 |
|
27243 |
|
27244 | var flippedVariationByRef = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom);
|
27245 |
|
27246 |
|
27247 | var flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === 'start' && overflowsRight || isVertical && variation === 'end' && overflowsLeft || !isVertical && variation === 'start' && overflowsBottom || !isVertical && variation === 'end' && overflowsTop);
|
27248 |
|
27249 | var flippedVariation = flippedVariationByRef || flippedVariationByContent;
|
27250 |
|
27251 | if (overlapsRef || overflowsBoundaries || flippedVariation) {
|
27252 |
|
27253 | data.flipped = true;
|
27254 |
|
27255 | if (overlapsRef || overflowsBoundaries) {
|
27256 | placement = flipOrder[index + 1];
|
27257 | }
|
27258 |
|
27259 | if (flippedVariation) {
|
27260 | variation = getOppositeVariation(variation);
|
27261 | }
|
27262 |
|
27263 | data.placement = placement + (variation ? '-' + variation : '');
|
27264 |
|
27265 |
|
27266 |
|
27267 | data.offsets.popper = _extends$1({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
|
27268 |
|
27269 | data = runModifiers(data.instance.modifiers, data, 'flip');
|
27270 | }
|
27271 | });
|
27272 | return data;
|
27273 | }
|
27274 |
|
27275 | |
27276 |
|
27277 |
|
27278 |
|
27279 |
|
27280 |
|
27281 |
|
27282 | function keepTogether(data) {
|
27283 | var _data$offsets = data.offsets,
|
27284 | popper = _data$offsets.popper,
|
27285 | reference = _data$offsets.reference;
|
27286 |
|
27287 | var placement = data.placement.split('-')[0];
|
27288 | var floor = Math.floor;
|
27289 | var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
|
27290 | var side = isVertical ? 'right' : 'bottom';
|
27291 | var opSide = isVertical ? 'left' : 'top';
|
27292 | var measurement = isVertical ? 'width' : 'height';
|
27293 |
|
27294 | if (popper[side] < floor(reference[opSide])) {
|
27295 | data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];
|
27296 | }
|
27297 | if (popper[opSide] > floor(reference[side])) {
|
27298 | data.offsets.popper[opSide] = floor(reference[side]);
|
27299 | }
|
27300 |
|
27301 | return data;
|
27302 | }
|
27303 |
|
27304 | |
27305 |
|
27306 |
|
27307 |
|
27308 |
|
27309 |
|
27310 |
|
27311 |
|
27312 |
|
27313 |
|
27314 |
|
27315 |
|
27316 | function toValue(str, measurement, popperOffsets, referenceOffsets) {
|
27317 |
|
27318 | var split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/);
|
27319 | var value = +split[1];
|
27320 | var unit = split[2];
|
27321 |
|
27322 |
|
27323 | if (!value) {
|
27324 | return str;
|
27325 | }
|
27326 |
|
27327 | if (unit.indexOf('%') === 0) {
|
27328 | var element = void 0;
|
27329 | switch (unit) {
|
27330 | case '%p':
|
27331 | element = popperOffsets;
|
27332 | break;
|
27333 | case '%':
|
27334 | case '%r':
|
27335 | default:
|
27336 | element = referenceOffsets;
|
27337 | }
|
27338 |
|
27339 | var rect = getClientRect(element);
|
27340 | return rect[measurement] / 100 * value;
|
27341 | } else if (unit === 'vh' || unit === 'vw') {
|
27342 |
|
27343 | var size = void 0;
|
27344 | if (unit === 'vh') {
|
27345 | size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
27346 | } else {
|
27347 | size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
27348 | }
|
27349 | return size / 100 * value;
|
27350 | } else {
|
27351 |
|
27352 |
|
27353 | return value;
|
27354 | }
|
27355 | }
|
27356 |
|
27357 | |
27358 |
|
27359 |
|
27360 |
|
27361 |
|
27362 |
|
27363 |
|
27364 |
|
27365 |
|
27366 |
|
27367 |
|
27368 | function parseOffset(offset, popperOffsets, referenceOffsets, basePlacement) {
|
27369 | var offsets = [0, 0];
|
27370 |
|
27371 |
|
27372 |
|
27373 |
|
27374 | var useHeight = ['right', 'left'].indexOf(basePlacement) !== -1;
|
27375 |
|
27376 |
|
27377 |
|
27378 | var fragments = offset.split(/(\+|\-)/).map(function (frag) {
|
27379 | return frag.trim();
|
27380 | });
|
27381 |
|
27382 |
|
27383 |
|
27384 | var divider = fragments.indexOf(find(fragments, function (frag) {
|
27385 | return frag.search(/,|\s/) !== -1;
|
27386 | }));
|
27387 |
|
27388 | if (fragments[divider] && fragments[divider].indexOf(',') === -1) {
|
27389 | console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
|
27390 | }
|
27391 |
|
27392 |
|
27393 |
|
27394 | var splitRegex = /\s*,\s*|\s+/;
|
27395 | var ops = divider !== -1 ? [fragments.slice(0, divider).concat([fragments[divider].split(splitRegex)[0]]), [fragments[divider].split(splitRegex)[1]].concat(fragments.slice(divider + 1))] : [fragments];
|
27396 |
|
27397 |
|
27398 | ops = ops.map(function (op, index) {
|
27399 |
|
27400 | var measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width';
|
27401 | var mergeWithPrevious = false;
|
27402 | return op
|
27403 |
|
27404 |
|
27405 | .reduce(function (a, b) {
|
27406 | if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {
|
27407 | a[a.length - 1] = b;
|
27408 | mergeWithPrevious = true;
|
27409 | return a;
|
27410 | } else if (mergeWithPrevious) {
|
27411 | a[a.length - 1] += b;
|
27412 | mergeWithPrevious = false;
|
27413 | return a;
|
27414 | } else {
|
27415 | return a.concat(b);
|
27416 | }
|
27417 | }, [])
|
27418 |
|
27419 | .map(function (str) {
|
27420 | return toValue(str, measurement, popperOffsets, referenceOffsets);
|
27421 | });
|
27422 | });
|
27423 |
|
27424 |
|
27425 | ops.forEach(function (op, index) {
|
27426 | op.forEach(function (frag, index2) {
|
27427 | if (isNumeric(frag)) {
|
27428 | offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);
|
27429 | }
|
27430 | });
|
27431 | });
|
27432 | return offsets;
|
27433 | }
|
27434 |
|
27435 | |
27436 |
|
27437 |
|
27438 |
|
27439 |
|
27440 |
|
27441 |
|
27442 |
|
27443 |
|
27444 | function offset(data, _ref) {
|
27445 | var offset = _ref.offset;
|
27446 | var placement = data.placement,
|
27447 | _data$offsets = data.offsets,
|
27448 | popper = _data$offsets.popper,
|
27449 | reference = _data$offsets.reference;
|
27450 |
|
27451 | var basePlacement = placement.split('-')[0];
|
27452 |
|
27453 | var offsets = void 0;
|
27454 | if (isNumeric(+offset)) {
|
27455 | offsets = [+offset, 0];
|
27456 | } else {
|
27457 | offsets = parseOffset(offset, popper, reference, basePlacement);
|
27458 | }
|
27459 |
|
27460 | if (basePlacement === 'left') {
|
27461 | popper.top += offsets[0];
|
27462 | popper.left -= offsets[1];
|
27463 | } else if (basePlacement === 'right') {
|
27464 | popper.top += offsets[0];
|
27465 | popper.left += offsets[1];
|
27466 | } else if (basePlacement === 'top') {
|
27467 | popper.left += offsets[0];
|
27468 | popper.top -= offsets[1];
|
27469 | } else if (basePlacement === 'bottom') {
|
27470 | popper.left += offsets[0];
|
27471 | popper.top += offsets[1];
|
27472 | }
|
27473 |
|
27474 | data.popper = popper;
|
27475 | return data;
|
27476 | }
|
27477 |
|
27478 | |
27479 |
|
27480 |
|
27481 |
|
27482 |
|
27483 |
|
27484 |
|
27485 | function preventOverflow(data, options) {
|
27486 | var boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper);
|
27487 |
|
27488 |
|
27489 |
|
27490 |
|
27491 | if (data.instance.reference === boundariesElement) {
|
27492 | boundariesElement = getOffsetParent(boundariesElement);
|
27493 | }
|
27494 |
|
27495 |
|
27496 |
|
27497 |
|
27498 | var transformProp = getSupportedPropertyName('transform');
|
27499 | var popperStyles = data.instance.popper.style;
|
27500 | var top = popperStyles.top,
|
27501 | left = popperStyles.left,
|
27502 | transform = popperStyles[transformProp];
|
27503 |
|
27504 | popperStyles.top = '';
|
27505 | popperStyles.left = '';
|
27506 | popperStyles[transformProp] = '';
|
27507 |
|
27508 | var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement, data.positionFixed);
|
27509 |
|
27510 |
|
27511 |
|
27512 | popperStyles.top = top;
|
27513 | popperStyles.left = left;
|
27514 | popperStyles[transformProp] = transform;
|
27515 |
|
27516 | options.boundaries = boundaries;
|
27517 |
|
27518 | var order = options.priority;
|
27519 | var popper = data.offsets.popper;
|
27520 |
|
27521 | var check = {
|
27522 | primary: function primary(placement) {
|
27523 | var value = popper[placement];
|
27524 | if (popper[placement] < boundaries[placement] && !options.escapeWithReference) {
|
27525 | value = Math.max(popper[placement], boundaries[placement]);
|
27526 | }
|
27527 | return defineProperty$1({}, placement, value);
|
27528 | },
|
27529 | secondary: function secondary(placement) {
|
27530 | var mainSide = placement === 'right' ? 'left' : 'top';
|
27531 | var value = popper[mainSide];
|
27532 | if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {
|
27533 | value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));
|
27534 | }
|
27535 | return defineProperty$1({}, mainSide, value);
|
27536 | }
|
27537 | };
|
27538 |
|
27539 | order.forEach(function (placement) {
|
27540 | var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
|
27541 | popper = _extends$1({}, popper, check[side](placement));
|
27542 | });
|
27543 |
|
27544 | data.offsets.popper = popper;
|
27545 |
|
27546 | return data;
|
27547 | }
|
27548 |
|
27549 | |
27550 |
|
27551 |
|
27552 |
|
27553 |
|
27554 |
|
27555 |
|
27556 | function shift(data) {
|
27557 | var placement = data.placement;
|
27558 | var basePlacement = placement.split('-')[0];
|
27559 | var shiftvariation = placement.split('-')[1];
|
27560 |
|
27561 |
|
27562 | if (shiftvariation) {
|
27563 | var _data$offsets = data.offsets,
|
27564 | reference = _data$offsets.reference,
|
27565 | popper = _data$offsets.popper;
|
27566 |
|
27567 | var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
|
27568 | var side = isVertical ? 'left' : 'top';
|
27569 | var measurement = isVertical ? 'width' : 'height';
|
27570 |
|
27571 | var shiftOffsets = {
|
27572 | start: defineProperty$1({}, side, reference[side]),
|
27573 | end: defineProperty$1({}, side, reference[side] + reference[measurement] - popper[measurement])
|
27574 | };
|
27575 |
|
27576 | data.offsets.popper = _extends$1({}, popper, shiftOffsets[shiftvariation]);
|
27577 | }
|
27578 |
|
27579 | return data;
|
27580 | }
|
27581 |
|
27582 | |
27583 |
|
27584 |
|
27585 |
|
27586 |
|
27587 |
|
27588 |
|
27589 | function hide(data) {
|
27590 | if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {
|
27591 | return data;
|
27592 | }
|
27593 |
|
27594 | var refRect = data.offsets.reference;
|
27595 | var bound = find(data.instance.modifiers, function (modifier) {
|
27596 | return modifier.name === 'preventOverflow';
|
27597 | }).boundaries;
|
27598 |
|
27599 | if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
|
27600 |
|
27601 | if (data.hide === true) {
|
27602 | return data;
|
27603 | }
|
27604 |
|
27605 | data.hide = true;
|
27606 | data.attributes['x-out-of-boundaries'] = '';
|
27607 | } else {
|
27608 |
|
27609 | if (data.hide === false) {
|
27610 | return data;
|
27611 | }
|
27612 |
|
27613 | data.hide = false;
|
27614 | data.attributes['x-out-of-boundaries'] = false;
|
27615 | }
|
27616 |
|
27617 | return data;
|
27618 | }
|
27619 |
|
27620 | |
27621 |
|
27622 |
|
27623 |
|
27624 |
|
27625 |
|
27626 |
|
27627 | function inner(data) {
|
27628 | var placement = data.placement;
|
27629 | var basePlacement = placement.split('-')[0];
|
27630 | var _data$offsets = data.offsets,
|
27631 | popper = _data$offsets.popper,
|
27632 | reference = _data$offsets.reference;
|
27633 |
|
27634 | var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;
|
27635 |
|
27636 | var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;
|
27637 |
|
27638 | popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);
|
27639 |
|
27640 | data.placement = getOppositePlacement(placement);
|
27641 | data.offsets.popper = getClientRect(popper);
|
27642 |
|
27643 | return data;
|
27644 | }
|
27645 |
|
27646 | |
27647 |
|
27648 |
|
27649 |
|
27650 |
|
27651 |
|
27652 |
|
27653 |
|
27654 |
|
27655 |
|
27656 |
|
27657 |
|
27658 | |
27659 |
|
27660 |
|
27661 |
|
27662 |
|
27663 |
|
27664 |
|
27665 |
|
27666 |
|
27667 | var modifiers = {
|
27668 | |
27669 |
|
27670 |
|
27671 |
|
27672 |
|
27673 |
|
27674 |
|
27675 |
|
27676 | shift: {
|
27677 |
|
27678 | order: 100,
|
27679 |
|
27680 | enabled: true,
|
27681 |
|
27682 | fn: shift
|
27683 | },
|
27684 |
|
27685 | |
27686 |
|
27687 |
|
27688 |
|
27689 |
|
27690 |
|
27691 |
|
27692 |
|
27693 |
|
27694 |
|
27695 |
|
27696 |
|
27697 |
|
27698 |
|
27699 |
|
27700 |
|
27701 |
|
27702 |
|
27703 |
|
27704 |
|
27705 |
|
27706 |
|
27707 |
|
27708 |
|
27709 |
|
27710 |
|
27711 |
|
27712 |
|
27713 |
|
27714 |
|
27715 |
|
27716 |
|
27717 |
|
27718 |
|
27719 |
|
27720 |
|
27721 |
|
27722 |
|
27723 | offset: {
|
27724 |
|
27725 | order: 200,
|
27726 |
|
27727 | enabled: true,
|
27728 |
|
27729 | fn: offset,
|
27730 | |
27731 |
|
27732 |
|
27733 | offset: 0
|
27734 | },
|
27735 |
|
27736 | |
27737 |
|
27738 |
|
27739 |
|
27740 |
|
27741 |
|
27742 |
|
27743 |
|
27744 |
|
27745 |
|
27746 |
|
27747 |
|
27748 |
|
27749 |
|
27750 |
|
27751 |
|
27752 |
|
27753 | preventOverflow: {
|
27754 |
|
27755 | order: 300,
|
27756 |
|
27757 | enabled: true,
|
27758 |
|
27759 | fn: preventOverflow,
|
27760 | |
27761 |
|
27762 |
|
27763 |
|
27764 |
|
27765 | priority: ['left', 'right', 'top', 'bottom'],
|
27766 | |
27767 |
|
27768 |
|
27769 |
|
27770 |
|
27771 |
|
27772 | padding: 5,
|
27773 | |
27774 |
|
27775 |
|
27776 |
|
27777 |
|
27778 | boundariesElement: 'scrollParent'
|
27779 | },
|
27780 |
|
27781 | |
27782 |
|
27783 |
|
27784 |
|
27785 |
|
27786 |
|
27787 |
|
27788 |
|
27789 |
|
27790 | keepTogether: {
|
27791 |
|
27792 | order: 400,
|
27793 |
|
27794 | enabled: true,
|
27795 |
|
27796 | fn: keepTogether
|
27797 | },
|
27798 |
|
27799 | |
27800 |
|
27801 |
|
27802 |
|
27803 |
|
27804 |
|
27805 |
|
27806 |
|
27807 |
|
27808 |
|
27809 | arrow: {
|
27810 |
|
27811 | order: 500,
|
27812 |
|
27813 | enabled: true,
|
27814 |
|
27815 | fn: arrow,
|
27816 |
|
27817 | element: '[x-arrow]'
|
27818 | },
|
27819 |
|
27820 | |
27821 |
|
27822 |
|
27823 |
|
27824 |
|
27825 |
|
27826 |
|
27827 |
|
27828 |
|
27829 |
|
27830 |
|
27831 | flip: {
|
27832 |
|
27833 | order: 600,
|
27834 |
|
27835 | enabled: true,
|
27836 |
|
27837 | fn: flip,
|
27838 | |
27839 |
|
27840 |
|
27841 |
|
27842 |
|
27843 |
|
27844 | behavior: 'flip',
|
27845 | |
27846 |
|
27847 |
|
27848 |
|
27849 | padding: 5,
|
27850 | |
27851 |
|
27852 |
|
27853 |
|
27854 |
|
27855 |
|
27856 | boundariesElement: 'viewport',
|
27857 | |
27858 |
|
27859 |
|
27860 |
|
27861 |
|
27862 |
|
27863 |
|
27864 | flipVariations: false,
|
27865 | |
27866 |
|
27867 |
|
27868 |
|
27869 |
|
27870 |
|
27871 |
|
27872 | flipVariationsByContent: false
|
27873 | },
|
27874 |
|
27875 | |
27876 |
|
27877 |
|
27878 |
|
27879 |
|
27880 |
|
27881 |
|
27882 | inner: {
|
27883 |
|
27884 | order: 700,
|
27885 |
|
27886 | enabled: false,
|
27887 |
|
27888 | fn: inner
|
27889 | },
|
27890 |
|
27891 | |
27892 |
|
27893 |
|
27894 |
|
27895 |
|
27896 |
|
27897 |
|
27898 |
|
27899 |
|
27900 |
|
27901 | hide: {
|
27902 |
|
27903 | order: 800,
|
27904 |
|
27905 | enabled: true,
|
27906 |
|
27907 | fn: hide
|
27908 | },
|
27909 |
|
27910 | |
27911 |
|
27912 |
|
27913 |
|
27914 |
|
27915 |
|
27916 |
|
27917 |
|
27918 |
|
27919 |
|
27920 |
|
27921 |
|
27922 |
|
27923 |
|
27924 |
|
27925 | computeStyle: {
|
27926 |
|
27927 | order: 850,
|
27928 |
|
27929 | enabled: true,
|
27930 |
|
27931 | fn: computeStyle,
|
27932 | |
27933 |
|
27934 |
|
27935 |
|
27936 |
|
27937 | gpuAcceleration: true,
|
27938 | |
27939 |
|
27940 |
|
27941 |
|
27942 |
|
27943 | x: 'bottom',
|
27944 | |
27945 |
|
27946 |
|
27947 |
|
27948 |
|
27949 | y: 'right'
|
27950 | },
|
27951 |
|
27952 | |
27953 |
|
27954 |
|
27955 |
|
27956 |
|
27957 |
|
27958 |
|
27959 |
|
27960 |
|
27961 |
|
27962 |
|
27963 |
|
27964 |
|
27965 |
|
27966 |
|
27967 | applyStyle: {
|
27968 |
|
27969 | order: 900,
|
27970 |
|
27971 | enabled: true,
|
27972 |
|
27973 | fn: applyStyle,
|
27974 |
|
27975 | onLoad: applyStyleOnLoad,
|
27976 | |
27977 |
|
27978 |
|
27979 |
|
27980 |
|
27981 |
|
27982 | gpuAcceleration: undefined
|
27983 | }
|
27984 | };
|
27985 |
|
27986 | |
27987 |
|
27988 |
|
27989 |
|
27990 |
|
27991 |
|
27992 |
|
27993 |
|
27994 |
|
27995 |
|
27996 |
|
27997 |
|
27998 |
|
27999 |
|
28000 |
|
28001 |
|
28002 |
|
28003 |
|
28004 |
|
28005 | |
28006 |
|
28007 |
|
28008 |
|
28009 |
|
28010 |
|
28011 |
|
28012 |
|
28013 |
|
28014 |
|
28015 |
|
28016 |
|
28017 |
|
28018 |
|
28019 |
|
28020 |
|
28021 | var Defaults = {
|
28022 | |
28023 |
|
28024 |
|
28025 |
|
28026 | placement: 'bottom',
|
28027 |
|
28028 | |
28029 |
|
28030 |
|
28031 |
|
28032 | positionFixed: false,
|
28033 |
|
28034 | |
28035 |
|
28036 |
|
28037 |
|
28038 | eventsEnabled: true,
|
28039 |
|
28040 | |
28041 |
|
28042 |
|
28043 |
|
28044 |
|
28045 | removeOnDestroy: false,
|
28046 |
|
28047 | |
28048 |
|
28049 |
|
28050 |
|
28051 |
|
28052 |
|
28053 | onCreate: function onCreate() {},
|
28054 |
|
28055 | |
28056 |
|
28057 |
|
28058 |
|
28059 |
|
28060 |
|
28061 |
|
28062 |
|
28063 | onUpdate: function onUpdate() {},
|
28064 |
|
28065 | |
28066 |
|
28067 |
|
28068 |
|
28069 |
|
28070 | modifiers: modifiers
|
28071 | };
|
28072 |
|
28073 | |
28074 |
|
28075 |
|
28076 |
|
28077 |
|
28078 | |
28079 |
|
28080 |
|
28081 |
|
28082 |
|
28083 |
|
28084 |
|
28085 | var Popper = function () {
|
28086 | |
28087 |
|
28088 |
|
28089 |
|
28090 |
|
28091 |
|
28092 |
|
28093 |
|
28094 | function Popper(reference, popper) {
|
28095 | var _this = this;
|
28096 |
|
28097 | var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
28098 | classCallCheck(this, Popper);
|
28099 |
|
28100 | this.scheduleUpdate = function () {
|
28101 | return requestAnimationFrame(_this.update);
|
28102 | };
|
28103 |
|
28104 |
|
28105 | this.update = debounce$1(this.update.bind(this));
|
28106 |
|
28107 |
|
28108 | this.options = _extends$1({}, Popper.Defaults, options);
|
28109 |
|
28110 |
|
28111 | this.state = {
|
28112 | isDestroyed: false,
|
28113 | isCreated: false,
|
28114 | scrollParents: []
|
28115 | };
|
28116 |
|
28117 |
|
28118 | this.reference = reference && reference.jquery ? reference[0] : reference;
|
28119 | this.popper = popper && popper.jquery ? popper[0] : popper;
|
28120 |
|
28121 |
|
28122 | this.options.modifiers = {};
|
28123 | Object.keys(_extends$1({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
|
28124 | _this.options.modifiers[name] = _extends$1({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
|
28125 | });
|
28126 |
|
28127 |
|
28128 | this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
|
28129 | return _extends$1({
|
28130 | name: name
|
28131 | }, _this.options.modifiers[name]);
|
28132 | })
|
28133 |
|
28134 | .sort(function (a, b) {
|
28135 | return a.order - b.order;
|
28136 | });
|
28137 |
|
28138 |
|
28139 |
|
28140 |
|
28141 |
|
28142 | this.modifiers.forEach(function (modifierOptions) {
|
28143 | if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) {
|
28144 | modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state);
|
28145 | }
|
28146 | });
|
28147 |
|
28148 |
|
28149 | this.update();
|
28150 |
|
28151 | var eventsEnabled = this.options.eventsEnabled;
|
28152 | if (eventsEnabled) {
|
28153 |
|
28154 | this.enableEventListeners();
|
28155 | }
|
28156 |
|
28157 | this.state.eventsEnabled = eventsEnabled;
|
28158 | }
|
28159 |
|
28160 |
|
28161 |
|
28162 |
|
28163 |
|
28164 | createClass(Popper, [{
|
28165 | key: 'update',
|
28166 | value: function update$$1() {
|
28167 | return update$1.call(this);
|
28168 | }
|
28169 | }, {
|
28170 | key: 'destroy',
|
28171 | value: function destroy$$1() {
|
28172 | return destroy.call(this);
|
28173 | }
|
28174 | }, {
|
28175 | key: 'enableEventListeners',
|
28176 | value: function enableEventListeners$$1() {
|
28177 | return enableEventListeners.call(this);
|
28178 | }
|
28179 | }, {
|
28180 | key: 'disableEventListeners',
|
28181 | value: function disableEventListeners$$1() {
|
28182 | return disableEventListeners.call(this);
|
28183 | }
|
28184 |
|
28185 | |
28186 |
|
28187 |
|
28188 |
|
28189 |
|
28190 |
|
28191 |
|
28192 | |
28193 |
|
28194 |
|
28195 |
|
28196 |
|
28197 |
|
28198 |
|
28199 |
|
28200 |
|
28201 |
|
28202 |
|
28203 |
|
28204 |
|
28205 |
|
28206 |
|
28207 |
|
28208 |
|
28209 | }]);
|
28210 | return Popper;
|
28211 | }();
|
28212 |
|
28213 | |
28214 |
|
28215 |
|
28216 |
|
28217 |
|
28218 |
|
28219 |
|
28220 |
|
28221 |
|
28222 |
|
28223 |
|
28224 |
|
28225 |
|
28226 |
|
28227 |
|
28228 |
|
28229 |
|
28230 |
|
28231 |
|
28232 |
|
28233 |
|
28234 | Popper.Utils = (typeof window !== 'undefined' ? window : global$1).PopperUtils;
|
28235 | Popper.placements = placements;
|
28236 | Popper.Defaults = Defaults;
|
28237 |
|
28238 | function flipPlacement(placement, theme) {
|
28239 | var direction = theme && theme.direction || 'ltr';
|
28240 |
|
28241 | if (direction === 'ltr') {
|
28242 | return placement;
|
28243 | }
|
28244 |
|
28245 | switch (placement) {
|
28246 | case 'bottom-end':
|
28247 | return 'bottom-start';
|
28248 |
|
28249 | case 'bottom-start':
|
28250 | return 'bottom-end';
|
28251 |
|
28252 | case 'top-end':
|
28253 | return 'top-start';
|
28254 |
|
28255 | case 'top-start':
|
28256 | return 'top-end';
|
28257 |
|
28258 | default:
|
28259 | return placement;
|
28260 | }
|
28261 | }
|
28262 |
|
28263 | function getAnchorEl$1(anchorEl) {
|
28264 | return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
|
28265 | }
|
28266 |
|
28267 | var useEnhancedEffect$9 = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
|
28268 | var defaultPopperOptions = {};
|
28269 | |
28270 |
|
28271 |
|
28272 |
|
28273 | var Popper$1 = React__default.forwardRef(function Popper$1(props, ref) {
|
28274 | var anchorEl = props.anchorEl,
|
28275 | children = props.children,
|
28276 | container = props.container,
|
28277 | _props$disablePortal = props.disablePortal,
|
28278 | disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
|
28279 | _props$keepMounted = props.keepMounted,
|
28280 | keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
|
28281 | modifiers = props.modifiers,
|
28282 | open = props.open,
|
28283 | _props$placement = props.placement,
|
28284 | initialPlacement = _props$placement === void 0 ? 'bottom' : _props$placement,
|
28285 | _props$popperOptions = props.popperOptions,
|
28286 | popperOptions = _props$popperOptions === void 0 ? defaultPopperOptions : _props$popperOptions,
|
28287 | popperRefProp = props.popperRef,
|
28288 | _props$transition = props.transition,
|
28289 | transition = _props$transition === void 0 ? false : _props$transition,
|
28290 | other = _objectWithoutProperties(props, ["anchorEl", "children", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition"]);
|
28291 |
|
28292 | var tooltipRef = React__default.useRef(null);
|
28293 | var ownRef = useForkRef(tooltipRef, ref);
|
28294 | var popperRef = React__default.useRef(null);
|
28295 | var handlePopperRef = useForkRef(popperRef, popperRefProp);
|
28296 | var handlePopperRefRef = React__default.useRef(handlePopperRef);
|
28297 | useEnhancedEffect$9(function () {
|
28298 | handlePopperRefRef.current = handlePopperRef;
|
28299 | }, [handlePopperRef]);
|
28300 | React__default.useImperativeHandle(popperRefProp, function () {
|
28301 | return popperRef.current;
|
28302 | }, []);
|
28303 |
|
28304 | var _React$useState = React__default.useState(true),
|
28305 | exited = _React$useState[0],
|
28306 | setExited = _React$useState[1];
|
28307 |
|
28308 | var theme = useTheme();
|
28309 | var rtlPlacement = flipPlacement(initialPlacement, theme);
|
28310 | |
28311 |
|
28312 |
|
28313 |
|
28314 |
|
28315 | var _React$useState2 = React__default.useState(rtlPlacement),
|
28316 | placement = _React$useState2[0],
|
28317 | setPlacement = _React$useState2[1];
|
28318 |
|
28319 | React__default.useEffect(function () {
|
28320 | if (popperRef.current) {
|
28321 | popperRef.current.update();
|
28322 | }
|
28323 | });
|
28324 | var handleOpen = React__default.useCallback(function () {
|
28325 | if (!tooltipRef.current || !anchorEl || !open) {
|
28326 | return;
|
28327 | }
|
28328 |
|
28329 | if (popperRef.current) {
|
28330 | popperRef.current.destroy();
|
28331 | handlePopperRefRef.current(null);
|
28332 | }
|
28333 |
|
28334 | var handlePopperUpdate = function handlePopperUpdate(data) {
|
28335 | setPlacement(data.placement);
|
28336 | };
|
28337 |
|
28338 | var resolvedAnchorEl = getAnchorEl$1(anchorEl);
|
28339 |
|
28340 | {
|
28341 | var containerWindow = ownerWindow(resolvedAnchorEl);
|
28342 |
|
28343 | if (resolvedAnchorEl instanceof containerWindow.Element) {
|
28344 | var box = resolvedAnchorEl.getBoundingClientRect();
|
28345 |
|
28346 | if ( box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
28347 | console.warn(['Material-UI: the `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
|
28348 | }
|
28349 | }
|
28350 | }
|
28351 |
|
28352 | var popper = new Popper(getAnchorEl$1(anchorEl), tooltipRef.current, _extends({
|
28353 | placement: rtlPlacement
|
28354 | }, popperOptions, {
|
28355 | modifiers: _extends({}, disablePortal ? {} : {
|
28356 |
|
28357 | preventOverflow: {
|
28358 | boundariesElement: 'window'
|
28359 | }
|
28360 | }, {}, modifiers, {}, popperOptions.modifiers),
|
28361 |
|
28362 |
|
28363 | onCreate: createChainedFunction(handlePopperUpdate, popperOptions.onCreate),
|
28364 | onUpdate: createChainedFunction(handlePopperUpdate, popperOptions.onUpdate)
|
28365 | }));
|
28366 | handlePopperRefRef.current(popper);
|
28367 | }, [anchorEl, disablePortal, modifiers, open, rtlPlacement, popperOptions]);
|
28368 | var handleRef = React__default.useCallback(function (node) {
|
28369 | setRef(ownRef, node);
|
28370 | handleOpen();
|
28371 | }, [ownRef, handleOpen]);
|
28372 |
|
28373 | var handleEnter = function handleEnter() {
|
28374 | setExited(false);
|
28375 | };
|
28376 |
|
28377 | var handleClose = function handleClose() {
|
28378 | if (!popperRef.current) {
|
28379 | return;
|
28380 | }
|
28381 |
|
28382 | popperRef.current.destroy();
|
28383 | handlePopperRefRef.current(null);
|
28384 | };
|
28385 |
|
28386 | var handleExited = function handleExited() {
|
28387 | setExited(true);
|
28388 | handleClose();
|
28389 | };
|
28390 |
|
28391 | React__default.useEffect(function () {
|
28392 |
|
28393 | handleOpen();
|
28394 | }, [handleOpen]);
|
28395 | React__default.useEffect(function () {
|
28396 | return function () {
|
28397 | handleClose();
|
28398 | };
|
28399 | }, []);
|
28400 | React__default.useEffect(function () {
|
28401 | if (!open && !transition) {
|
28402 |
|
28403 | handleClose();
|
28404 | }
|
28405 | }, [open, transition]);
|
28406 |
|
28407 | if (!keepMounted && !open && (!transition || exited)) {
|
28408 | return null;
|
28409 | }
|
28410 |
|
28411 | var childProps = {
|
28412 | placement: placement
|
28413 | };
|
28414 |
|
28415 | if (transition) {
|
28416 | childProps.TransitionProps = {
|
28417 | in: open,
|
28418 | onEnter: handleEnter,
|
28419 | onExited: handleExited
|
28420 | };
|
28421 | }
|
28422 |
|
28423 | return React__default.createElement(Portal, {
|
28424 | disablePortal: disablePortal,
|
28425 | container: container
|
28426 | }, React__default.createElement("div", _extends({
|
28427 | ref: handleRef,
|
28428 | role: "tooltip"
|
28429 | }, other, {
|
28430 | style: _extends({
|
28431 |
|
28432 | position: 'fixed',
|
28433 |
|
28434 | top: 0,
|
28435 | left: 0
|
28436 | }, other.style)
|
28437 | }), typeof children === 'function' ? children(childProps) : children));
|
28438 | });
|
28439 | Popper$1.propTypes = {
|
28440 | |
28441 |
|
28442 |
|
28443 |
|
28444 |
|
28445 |
|
28446 |
|
28447 |
|
28448 |
|
28449 | anchorEl: chainPropTypes(propTypes.oneOfType([propTypes.object, propTypes.func]), function (props) {
|
28450 | if (props.open) {
|
28451 | var resolvedAnchorEl = getAnchorEl$1(props.anchorEl);
|
28452 | var containerWindow = ownerWindow(resolvedAnchorEl);
|
28453 |
|
28454 | if (resolvedAnchorEl instanceof containerWindow.Element) {
|
28455 | var box = resolvedAnchorEl.getBoundingClientRect();
|
28456 |
|
28457 | if ( box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
28458 | return new Error(['Material-UI: the `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
|
28459 | }
|
28460 | } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.clientWidth !== 'number' || typeof resolvedAnchorEl.clientHeight !== 'number' || typeof resolvedAnchorEl.getBoundingClientRect !== 'function') {
|
28461 | return new Error(['Material-UI: the `anchorEl` prop provided to the component is invalid.', 'It should be an HTML Element instance or a referenceObject:', 'https://popper.js.org/popper-documentation.html#referenceObject.'].join('\n'));
|
28462 | }
|
28463 | }
|
28464 |
|
28465 | return null;
|
28466 | }),
|
28467 |
|
28468 | |
28469 |
|
28470 |
|
28471 | children: propTypes.oneOfType([propTypes.node, propTypes.func]).isRequired,
|
28472 |
|
28473 | |
28474 |
|
28475 |
|
28476 |
|
28477 |
|
28478 |
|
28479 | container: propTypes.oneOfType([propTypes.object, propTypes.func]),
|
28480 |
|
28481 | |
28482 |
|
28483 |
|
28484 |
|
28485 | disablePortal: propTypes.bool,
|
28486 |
|
28487 | |
28488 |
|
28489 |
|
28490 |
|
28491 |
|
28492 | keepMounted: propTypes.bool,
|
28493 |
|
28494 | |
28495 |
|
28496 |
|
28497 |
|
28498 |
|
28499 |
|
28500 |
|
28501 |
|
28502 |
|
28503 | modifiers: propTypes.object,
|
28504 |
|
28505 | |
28506 |
|
28507 |
|
28508 | open: propTypes.bool.isRequired,
|
28509 |
|
28510 | |
28511 |
|
28512 |
|
28513 | placement: propTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
28514 |
|
28515 | |
28516 |
|
28517 |
|
28518 | popperOptions: propTypes.object,
|
28519 |
|
28520 | |
28521 |
|
28522 |
|
28523 | popperRef: refType,
|
28524 |
|
28525 | |
28526 |
|
28527 |
|
28528 | transition: propTypes.bool
|
28529 | } ;
|
28530 |
|
28531 | |
28532 |
|
28533 |
|
28534 |
|
28535 | var RadioButtonUncheckedIcon = createSvgIcon(React__default.createElement("path", {
|
28536 | d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
28537 | }), 'RadioButtonUnchecked');
|
28538 |
|
28539 | |
28540 |
|
28541 |
|
28542 |
|
28543 | var RadioButtonCheckedIcon = createSvgIcon(React__default.createElement("path", {
|
28544 | d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
28545 | }), 'RadioButtonChecked');
|
28546 |
|
28547 | var styles$1e = function styles(theme) {
|
28548 | return {
|
28549 | root: {
|
28550 | position: 'relative',
|
28551 | display: 'flex',
|
28552 | '&$checked $layer': {
|
28553 | transform: 'scale(1)',
|
28554 | transition: theme.transitions.create('transform', {
|
28555 | easing: theme.transitions.easing.easeOut,
|
28556 | duration: theme.transitions.duration.shortest
|
28557 | })
|
28558 | }
|
28559 | },
|
28560 | layer: {
|
28561 | left: 0,
|
28562 | position: 'absolute',
|
28563 | transform: 'scale(0)',
|
28564 | transition: theme.transitions.create('transform', {
|
28565 | easing: theme.transitions.easing.easeIn,
|
28566 | duration: theme.transitions.duration.shortest
|
28567 | })
|
28568 | },
|
28569 | checked: {}
|
28570 | };
|
28571 | };
|
28572 | |
28573 |
|
28574 |
|
28575 |
|
28576 | function RadioButtonIcon(props) {
|
28577 | var checked = props.checked,
|
28578 | classes = props.classes,
|
28579 | fontSize = props.fontSize;
|
28580 | return React__default.createElement("div", {
|
28581 | className: clsx(classes.root, checked && classes.checked)
|
28582 | }, React__default.createElement(RadioButtonUncheckedIcon, {
|
28583 | fontSize: fontSize
|
28584 | }), React__default.createElement(RadioButtonCheckedIcon, {
|
28585 | fontSize: fontSize,
|
28586 | className: classes.layer
|
28587 | }));
|
28588 | }
|
28589 |
|
28590 | RadioButtonIcon.propTypes = {
|
28591 | |
28592 |
|
28593 |
|
28594 | checked: propTypes.bool,
|
28595 |
|
28596 | |
28597 |
|
28598 |
|
28599 |
|
28600 | classes: propTypes.object.isRequired,
|
28601 |
|
28602 | |
28603 |
|
28604 |
|
28605 |
|
28606 | fontSize: propTypes.oneOf(['small', 'default'])
|
28607 | } ;
|
28608 | var RadioButtonIcon$1 = withStyles$1(styles$1e, {
|
28609 | name: 'PrivateRadioButtonIcon'
|
28610 | })(RadioButtonIcon);
|
28611 |
|
28612 | |
28613 |
|
28614 |
|
28615 |
|
28616 | var RadioGroupContext = React__default.createContext();
|
28617 |
|
28618 | {
|
28619 | RadioGroupContext.displayName = 'RadioGroupContext';
|
28620 | }
|
28621 |
|
28622 | var styles$1f = function styles(theme) {
|
28623 | return {
|
28624 |
|
28625 | root: {
|
28626 | color: theme.palette.text.secondary
|
28627 | },
|
28628 |
|
28629 |
|
28630 | checked: {},
|
28631 |
|
28632 |
|
28633 | disabled: {},
|
28634 |
|
28635 |
|
28636 | colorPrimary: {
|
28637 | '&$checked': {
|
28638 | color: theme.palette.primary.main,
|
28639 | '&:hover': {
|
28640 | backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
28641 |
|
28642 | '@media (hover: none)': {
|
28643 | backgroundColor: 'transparent'
|
28644 | }
|
28645 | }
|
28646 | },
|
28647 | '&$disabled': {
|
28648 | color: theme.palette.action.disabled
|
28649 | }
|
28650 | },
|
28651 |
|
28652 |
|
28653 | colorSecondary: {
|
28654 | '&$checked': {
|
28655 | color: theme.palette.secondary.main,
|
28656 | '&:hover': {
|
28657 | backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
28658 |
|
28659 | '@media (hover: none)': {
|
28660 | backgroundColor: 'transparent'
|
28661 | }
|
28662 | }
|
28663 | },
|
28664 | '&$disabled': {
|
28665 | color: theme.palette.action.disabled
|
28666 | }
|
28667 | }
|
28668 | };
|
28669 | };
|
28670 | var defaultCheckedIcon$1 = React__default.createElement(RadioButtonIcon$1, {
|
28671 | checked: true
|
28672 | });
|
28673 | var defaultIcon$1 = React__default.createElement(RadioButtonIcon$1, null);
|
28674 | var Radio = React__default.forwardRef(function Radio(props, ref) {
|
28675 | var checkedProp = props.checked,
|
28676 | classes = props.classes,
|
28677 | _props$color = props.color,
|
28678 | color = _props$color === void 0 ? 'secondary' : _props$color,
|
28679 | _props$disabled = props.disabled,
|
28680 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
28681 | nameProp = props.name,
|
28682 | onChangeProp = props.onChange,
|
28683 | _props$size = props.size,
|
28684 | size = _props$size === void 0 ? 'medium' : _props$size,
|
28685 | other = _objectWithoutProperties(props, ["checked", "classes", "color", "disabled", "name", "onChange", "size"]);
|
28686 |
|
28687 | var radioGroup = React__default.useContext(RadioGroupContext);
|
28688 | var checked = checkedProp;
|
28689 | var onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
|
28690 | var name = nameProp;
|
28691 |
|
28692 | if (radioGroup) {
|
28693 | if (typeof checked === 'undefined') {
|
28694 | checked = radioGroup.value === props.value;
|
28695 | }
|
28696 |
|
28697 | if (typeof name === 'undefined') {
|
28698 | name = radioGroup.name;
|
28699 | }
|
28700 | }
|
28701 |
|
28702 | return React__default.createElement(SwitchBase$1, _extends({
|
28703 | color: color,
|
28704 | type: "radio",
|
28705 | icon: React__default.cloneElement(defaultIcon$1, {
|
28706 | fontSize: size === 'small' ? 'small' : 'default'
|
28707 | }),
|
28708 | checkedIcon: React__default.cloneElement(defaultCheckedIcon$1, {
|
28709 | fontSize: size === 'small' ? 'small' : 'default'
|
28710 | }),
|
28711 | classes: {
|
28712 | root: clsx(classes.root, classes["color".concat(capitalize(color))]),
|
28713 | checked: classes.checked,
|
28714 | disabled: classes.disabled
|
28715 | },
|
28716 | name: name,
|
28717 | checked: checked,
|
28718 | onChange: onChange,
|
28719 | ref: ref,
|
28720 | disabled: disabled
|
28721 | }, other));
|
28722 | });
|
28723 | Radio.propTypes = {
|
28724 | |
28725 |
|
28726 |
|
28727 | checked: propTypes.bool,
|
28728 |
|
28729 | |
28730 |
|
28731 |
|
28732 | checkedIcon: propTypes.node,
|
28733 |
|
28734 | |
28735 |
|
28736 |
|
28737 |
|
28738 | classes: propTypes.object.isRequired,
|
28739 |
|
28740 | |
28741 |
|
28742 |
|
28743 | color: propTypes.oneOf(['primary', 'secondary', 'default']),
|
28744 |
|
28745 | |
28746 |
|
28747 |
|
28748 | disabled: propTypes.bool,
|
28749 |
|
28750 | |
28751 |
|
28752 |
|
28753 | disableRipple: propTypes.bool,
|
28754 |
|
28755 | |
28756 |
|
28757 |
|
28758 | icon: propTypes.node,
|
28759 |
|
28760 | |
28761 |
|
28762 |
|
28763 | id: propTypes.string,
|
28764 |
|
28765 | |
28766 |
|
28767 |
|
28768 | inputProps: propTypes.object,
|
28769 |
|
28770 | |
28771 |
|
28772 |
|
28773 | inputRef: refType,
|
28774 |
|
28775 | |
28776 |
|
28777 |
|
28778 | name: propTypes.string,
|
28779 |
|
28780 | |
28781 |
|
28782 |
|
28783 |
|
28784 |
|
28785 |
|
28786 |
|
28787 | onChange: propTypes.func,
|
28788 |
|
28789 | |
28790 |
|
28791 |
|
28792 | required: propTypes.bool,
|
28793 |
|
28794 | |
28795 |
|
28796 |
|
28797 |
|
28798 | size: propTypes.oneOf(['small', 'medium']),
|
28799 |
|
28800 | |
28801 |
|
28802 |
|
28803 | type: propTypes.string,
|
28804 |
|
28805 | |
28806 |
|
28807 |
|
28808 | value: propTypes.any
|
28809 | } ;
|
28810 | var Radio$1 = withStyles$1(styles$1f, {
|
28811 | name: 'MuiRadio'
|
28812 | })(Radio);
|
28813 |
|
28814 | var RadioGroup = React__default.forwardRef(function RadioGroup(props, ref) {
|
28815 | var actions = props.actions,
|
28816 | children = props.children,
|
28817 | name = props.name,
|
28818 | valueProp = props.value,
|
28819 | onChange = props.onChange,
|
28820 | other = _objectWithoutProperties(props, ["actions", "children", "name", "value", "onChange"]);
|
28821 |
|
28822 | var rootRef = React__default.useRef(null);
|
28823 |
|
28824 | var _React$useRef = React__default.useRef(valueProp != null),
|
28825 | isControlled = _React$useRef.current;
|
28826 |
|
28827 | var _React$useState = React__default.useState(props.defaultValue),
|
28828 | valueState = _React$useState[0],
|
28829 | setValue = _React$useState[1];
|
28830 |
|
28831 | var value = isControlled ? valueProp : valueState;
|
28832 |
|
28833 | {
|
28834 |
|
28835 | React__default.useEffect(function () {
|
28836 | if (isControlled !== (valueProp != null)) {
|
28837 | console.error(["Material-UI: A component is changing ".concat(isControlled ? 'a ' : 'an un', "controlled RadioGroup to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled RadioGroup ' + 'element for the lifetime of the component.', 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
28838 | }
|
28839 | }, [valueProp, isControlled]);
|
28840 | }
|
28841 |
|
28842 | React__default.useImperativeHandle(actions, function () {
|
28843 | return {
|
28844 | focus: function focus() {
|
28845 | var input = rootRef.current.querySelector('input:not(:disabled):checked');
|
28846 |
|
28847 | if (!input) {
|
28848 | input = rootRef.current.querySelector('input:not(:disabled)');
|
28849 | }
|
28850 |
|
28851 | if (input) {
|
28852 | input.focus();
|
28853 | }
|
28854 | }
|
28855 | };
|
28856 | }, []);
|
28857 | var handleRef = useForkRef(ref, rootRef);
|
28858 |
|
28859 | var handleChange = function handleChange(event) {
|
28860 | if (!isControlled) {
|
28861 | setValue(event.target.value);
|
28862 | }
|
28863 |
|
28864 | if (onChange) {
|
28865 | onChange(event, event.target.value);
|
28866 | }
|
28867 | };
|
28868 |
|
28869 | return React__default.createElement(RadioGroupContext.Provider, {
|
28870 | value: {
|
28871 | name: name,
|
28872 | onChange: handleChange,
|
28873 | value: value
|
28874 | }
|
28875 | }, React__default.createElement(FormGroup$1, _extends({
|
28876 | role: "radiogroup",
|
28877 | ref: handleRef
|
28878 | }, other), children));
|
28879 | });
|
28880 | RadioGroup.propTypes = {
|
28881 | |
28882 |
|
28883 |
|
28884 | actions: propTypes.shape({
|
28885 | current: propTypes.object
|
28886 | }),
|
28887 |
|
28888 | |
28889 |
|
28890 |
|
28891 | children: propTypes.node,
|
28892 |
|
28893 | |
28894 |
|
28895 |
|
28896 | defaultValue: propTypes.any,
|
28897 |
|
28898 | |
28899 |
|
28900 |
|
28901 | name: propTypes.string,
|
28902 |
|
28903 | |
28904 |
|
28905 |
|
28906 | onBlur: propTypes.func,
|
28907 |
|
28908 | |
28909 |
|
28910 |
|
28911 |
|
28912 |
|
28913 |
|
28914 | onChange: propTypes.func,
|
28915 |
|
28916 | |
28917 |
|
28918 |
|
28919 | onKeyDown: propTypes.func,
|
28920 |
|
28921 | |
28922 |
|
28923 |
|
28924 | value: propTypes.any
|
28925 | } ;
|
28926 |
|
28927 | function _possibleConstructorReturn(self, call) {
|
28928 | if (call && (_typeof(call) === "object" || typeof call === "function")) {
|
28929 | return call;
|
28930 | }
|
28931 |
|
28932 | return _assertThisInitialized(self);
|
28933 | }
|
28934 |
|
28935 | function _getPrototypeOf(o) {
|
28936 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
|
28937 | return o.__proto__ || Object.getPrototypeOf(o);
|
28938 | };
|
28939 | return _getPrototypeOf(o);
|
28940 | }
|
28941 |
|
28942 | function _setPrototypeOf(o, p) {
|
28943 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
28944 | o.__proto__ = p;
|
28945 | return o;
|
28946 | };
|
28947 |
|
28948 | return _setPrototypeOf(o, p);
|
28949 | }
|
28950 |
|
28951 | function _inherits(subClass, superClass) {
|
28952 | if (typeof superClass !== "function" && superClass !== null) {
|
28953 | throw new TypeError("Super expression must either be null or a function");
|
28954 | }
|
28955 |
|
28956 | subClass.prototype = Object.create(superClass && superClass.prototype, {
|
28957 | constructor: {
|
28958 | value: subClass,
|
28959 | writable: true,
|
28960 | configurable: true
|
28961 | }
|
28962 | });
|
28963 | if (superClass) _setPrototypeOf(subClass, superClass);
|
28964 | }
|
28965 |
|
28966 | |
28967 |
|
28968 |
|
28969 |
|
28970 |
|
28971 |
|
28972 |
|
28973 |
|
28974 |
|
28975 |
|
28976 |
|
28977 |
|
28978 |
|
28979 |
|
28980 |
|
28981 |
|
28982 |
|
28983 |
|
28984 |
|
28985 |
|
28986 |
|
28987 |
|
28988 |
|
28989 |
|
28990 |
|
28991 |
|
28992 |
|
28993 |
|
28994 |
|
28995 |
|
28996 |
|
28997 |
|
28998 |
|
28999 | var RootRef =
|
29000 |
|
29001 | function (_React$Component) {
|
29002 | _inherits(RootRef, _React$Component);
|
29003 |
|
29004 | function RootRef() {
|
29005 | _classCallCheck(this, RootRef);
|
29006 |
|
29007 | return _possibleConstructorReturn(this, _getPrototypeOf(RootRef).apply(this, arguments));
|
29008 | }
|
29009 |
|
29010 | _createClass(RootRef, [{
|
29011 | key: "componentDidMount",
|
29012 | value: function componentDidMount() {
|
29013 | this.ref = ReactDOM.findDOMNode(this);
|
29014 | setRef(this.props.rootRef, this.ref);
|
29015 | }
|
29016 | }, {
|
29017 | key: "componentDidUpdate",
|
29018 | value: function componentDidUpdate(prevProps) {
|
29019 | var ref = ReactDOM.findDOMNode(this);
|
29020 |
|
29021 | if (prevProps.rootRef !== this.props.rootRef || this.ref !== ref) {
|
29022 | if (prevProps.rootRef !== this.props.rootRef) {
|
29023 | setRef(prevProps.rootRef, null);
|
29024 | }
|
29025 |
|
29026 | this.ref = ref;
|
29027 | setRef(this.props.rootRef, this.ref);
|
29028 | }
|
29029 | }
|
29030 | }, {
|
29031 | key: "componentWillUnmount",
|
29032 | value: function componentWillUnmount() {
|
29033 | this.ref = null;
|
29034 | setRef(this.props.rootRef, null);
|
29035 | }
|
29036 | }, {
|
29037 | key: "render",
|
29038 | value: function render() {
|
29039 | return this.props.children;
|
29040 | }
|
29041 | }]);
|
29042 |
|
29043 | return RootRef;
|
29044 | }(React__default.Component);
|
29045 |
|
29046 | RootRef.propTypes = {
|
29047 | |
29048 |
|
29049 |
|
29050 | children: propTypes.element.isRequired,
|
29051 |
|
29052 | |
29053 |
|
29054 |
|
29055 | rootRef: refType.isRequired
|
29056 | } ;
|
29057 |
|
29058 | {
|
29059 | RootRef.propTypes = exactProp(RootRef.propTypes) ;
|
29060 | }
|
29061 |
|
29062 | function areEqualValues(a, b) {
|
29063 | if (_typeof(b) === 'object' && b !== null) {
|
29064 | return a === b;
|
29065 | }
|
29066 |
|
29067 | return String(a) === String(b);
|
29068 | }
|
29069 |
|
29070 | function isEmpty(display) {
|
29071 | return display == null || typeof display === 'string' && !display.trim();
|
29072 | }
|
29073 | |
29074 |
|
29075 |
|
29076 |
|
29077 |
|
29078 | var SelectInput = React__default.forwardRef(function SelectInput(props, ref) {
|
29079 | var autoFocus = props.autoFocus,
|
29080 | autoWidth = props.autoWidth,
|
29081 | children = props.children,
|
29082 | classes = props.classes,
|
29083 | className = props.className,
|
29084 | defaultValue = props.defaultValue,
|
29085 | disabled = props.disabled,
|
29086 | displayEmpty = props.displayEmpty,
|
29087 | IconComponent = props.IconComponent,
|
29088 | inputRefProp = props.inputRef,
|
29089 | labelId = props.labelId,
|
29090 | _props$MenuProps = props.MenuProps,
|
29091 | MenuProps = _props$MenuProps === void 0 ? {} : _props$MenuProps,
|
29092 | multiple = props.multiple,
|
29093 | name = props.name,
|
29094 | onBlur = props.onBlur,
|
29095 | onChange = props.onChange,
|
29096 | onClose = props.onClose,
|
29097 | onFocus = props.onFocus,
|
29098 | onOpen = props.onOpen,
|
29099 | openProp = props.open,
|
29100 | readOnly = props.readOnly,
|
29101 | renderValue = props.renderValue,
|
29102 | required = props.required,
|
29103 | _props$SelectDisplayP = props.SelectDisplayProps,
|
29104 | SelectDisplayProps = _props$SelectDisplayP === void 0 ? {} : _props$SelectDisplayP,
|
29105 | tabIndexProp = props.tabIndex,
|
29106 | type = props.type,
|
29107 | valueProp = props.value,
|
29108 | _props$variant = props.variant,
|
29109 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
29110 | other = _objectWithoutProperties(props, ["autoFocus", "autoWidth", "children", "classes", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "required", "SelectDisplayProps", "tabIndex", "type", "value", "variant"]);
|
29111 |
|
29112 | var _React$useRef = React__default.useRef(valueProp != null),
|
29113 | isControlled = _React$useRef.current;
|
29114 |
|
29115 | var _React$useState = React__default.useState(defaultValue),
|
29116 | valueState = _React$useState[0],
|
29117 | setValueState = _React$useState[1];
|
29118 |
|
29119 | var value = isControlled ? valueProp : valueState;
|
29120 |
|
29121 | {
|
29122 |
|
29123 | React__default.useEffect(function () {
|
29124 | if (isControlled !== (valueProp != null)) {
|
29125 | console.error(["Material-UI: A component is changing ".concat(isControlled ? 'a ' : 'an un', "controlled Select to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled Select ' + 'element for the lifetime of the component.', 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
29126 | }
|
29127 | }, [valueProp, isControlled]);
|
29128 | }
|
29129 |
|
29130 | var inputRef = React__default.useRef(null);
|
29131 |
|
29132 | var _React$useState2 = React__default.useState(null),
|
29133 | displayNode = _React$useState2[0],
|
29134 | setDisplayNode = _React$useState2[1];
|
29135 |
|
29136 | var _React$useRef2 = React__default.useRef(openProp != null),
|
29137 | isOpenControlled = _React$useRef2.current;
|
29138 |
|
29139 | var _React$useState3 = React__default.useState(),
|
29140 | menuMinWidthState = _React$useState3[0],
|
29141 | setMenuMinWidthState = _React$useState3[1];
|
29142 |
|
29143 | var _React$useState4 = React__default.useState(false),
|
29144 | openState = _React$useState4[0],
|
29145 | setOpenState = _React$useState4[1];
|
29146 |
|
29147 | var handleRef = useForkRef(ref, inputRefProp);
|
29148 | React__default.useImperativeHandle(handleRef, function () {
|
29149 | return {
|
29150 | focus: function focus() {
|
29151 | displayNode.focus();
|
29152 | },
|
29153 | node: inputRef.current,
|
29154 | value: value
|
29155 | };
|
29156 | }, [displayNode, value]);
|
29157 | React__default.useEffect(function () {
|
29158 | if (autoFocus && displayNode) {
|
29159 | displayNode.focus();
|
29160 | }
|
29161 | }, [autoFocus, displayNode]);
|
29162 |
|
29163 | var update = function update(open, event) {
|
29164 | if (open) {
|
29165 | if (onOpen) {
|
29166 | onOpen(event);
|
29167 | }
|
29168 | } else {
|
29169 | displayNode.focus();
|
29170 |
|
29171 | if (onClose) {
|
29172 | onClose(event);
|
29173 | }
|
29174 | }
|
29175 |
|
29176 | if (!isOpenControlled) {
|
29177 | setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
|
29178 | setOpenState(open);
|
29179 | }
|
29180 | };
|
29181 |
|
29182 | var handleMouseDown = function handleMouseDown(event) {
|
29183 |
|
29184 | event.preventDefault();
|
29185 | displayNode.focus();
|
29186 | update(true, event);
|
29187 | };
|
29188 |
|
29189 | var handleClose = function handleClose(event) {
|
29190 | update(false, event);
|
29191 | };
|
29192 |
|
29193 | var handleItemClick = function handleItemClick(child) {
|
29194 | return function (event) {
|
29195 | if (!multiple) {
|
29196 | update(false, event);
|
29197 | }
|
29198 |
|
29199 | var newValue;
|
29200 |
|
29201 | if (multiple) {
|
29202 | newValue = Array.isArray(value) ? _toConsumableArray(value) : [];
|
29203 | var itemIndex = value.indexOf(child.props.value);
|
29204 |
|
29205 | if (itemIndex === -1) {
|
29206 | newValue.push(child.props.value);
|
29207 | } else {
|
29208 | newValue.splice(itemIndex, 1);
|
29209 | }
|
29210 | } else {
|
29211 | newValue = child.props.value;
|
29212 | }
|
29213 |
|
29214 | if (!isControlled) {
|
29215 | setValueState(newValue);
|
29216 | }
|
29217 |
|
29218 | if (onChange) {
|
29219 | event.persist();
|
29220 |
|
29221 | Object.defineProperty(event, 'target', {
|
29222 | writable: true,
|
29223 | value: {
|
29224 | value: newValue,
|
29225 | name: name
|
29226 | }
|
29227 | });
|
29228 | onChange(event, child);
|
29229 | }
|
29230 | };
|
29231 | };
|
29232 |
|
29233 | var handleKeyDown = function handleKeyDown(event) {
|
29234 | if (!readOnly) {
|
29235 | var validKeys = [' ', 'ArrowUp', 'ArrowDown',
|
29236 |
|
29237 | 'Enter'];
|
29238 |
|
29239 | if (validKeys.indexOf(event.key) !== -1) {
|
29240 | event.preventDefault();
|
29241 | update(true, event);
|
29242 | }
|
29243 | }
|
29244 | };
|
29245 |
|
29246 | var open = displayNode !== null && (isOpenControlled ? openProp : openState);
|
29247 |
|
29248 | var handleBlur = function handleBlur(event) {
|
29249 |
|
29250 | if (!open && onBlur) {
|
29251 | event.persist();
|
29252 |
|
29253 | Object.defineProperty(event, 'target', {
|
29254 | writable: true,
|
29255 | value: {
|
29256 | value: value,
|
29257 | name: name
|
29258 | }
|
29259 | });
|
29260 | onBlur(event);
|
29261 | }
|
29262 | };
|
29263 |
|
29264 | delete other['aria-invalid'];
|
29265 | var display;
|
29266 | var displaySingle;
|
29267 | var displayMultiple = [];
|
29268 | var computeDisplay = false;
|
29269 | var foundMatch = false;
|
29270 |
|
29271 | if (isFilled({
|
29272 | value: value
|
29273 | }) || displayEmpty) {
|
29274 | if (renderValue) {
|
29275 | display = renderValue(value);
|
29276 | } else {
|
29277 | computeDisplay = true;
|
29278 | }
|
29279 | }
|
29280 |
|
29281 | var items = React__default.Children.map(children, function (child) {
|
29282 | if (!React__default.isValidElement(child)) {
|
29283 | return null;
|
29284 | }
|
29285 |
|
29286 | {
|
29287 | if (reactIs_2(child)) {
|
29288 | console.error(["Material-UI: the Select component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
29289 | }
|
29290 | }
|
29291 |
|
29292 | var selected;
|
29293 |
|
29294 | if (multiple) {
|
29295 | if (!Array.isArray(value)) {
|
29296 | throw new Error('Material-UI: the `value` prop must be an array ' + 'when using the `Select` component with `multiple`.');
|
29297 | }
|
29298 |
|
29299 | selected = value.some(function (v) {
|
29300 | return areEqualValues(v, child.props.value);
|
29301 | });
|
29302 |
|
29303 | if (selected && computeDisplay) {
|
29304 | displayMultiple.push(child.props.children);
|
29305 | }
|
29306 | } else {
|
29307 | selected = areEqualValues(value, child.props.value);
|
29308 |
|
29309 | if (selected && computeDisplay) {
|
29310 | displaySingle = child.props.children;
|
29311 | }
|
29312 | }
|
29313 |
|
29314 | if (selected) {
|
29315 | foundMatch = true;
|
29316 | }
|
29317 |
|
29318 | return React__default.cloneElement(child, {
|
29319 | 'aria-selected': selected ? 'true' : undefined,
|
29320 | onClick: handleItemClick(child),
|
29321 | onKeyUp: function onKeyUp(event) {
|
29322 | if (event.key === ' ') {
|
29323 |
|
29324 |
|
29325 |
|
29326 | event.preventDefault();
|
29327 | }
|
29328 |
|
29329 | var onKeyUp = child.props.onKeyUp;
|
29330 |
|
29331 | if (typeof onKeyUp === 'function') {
|
29332 | onKeyUp(event);
|
29333 | }
|
29334 | },
|
29335 | role: 'option',
|
29336 | selected: selected,
|
29337 | value: undefined,
|
29338 |
|
29339 | 'data-value': child.props.value
|
29340 |
|
29341 | });
|
29342 | });
|
29343 |
|
29344 | {
|
29345 |
|
29346 | React__default.useEffect(function () {
|
29347 | if (!foundMatch && !multiple && value !== '') {
|
29348 | var values = React__default.Children.toArray(children).map(function (child) {
|
29349 | return child.props.value;
|
29350 | });
|
29351 | console.warn(["Material-UI: you have provided an out-of-range value `".concat(value, "` for the select ").concat(name ? "(name=\"".concat(name, "\") ") : '', "component."), "Consider providing a value that matches one of the available options or ''.", "The available values are ".concat(values.filter(function (x) {
|
29352 | return x != null;
|
29353 | }).map(function (x) {
|
29354 | return "`".concat(x, "`");
|
29355 | }).join(', ') || '""', ".")].join('\n'));
|
29356 | }
|
29357 | }, [foundMatch, children, multiple, name, value]);
|
29358 | }
|
29359 |
|
29360 | if (computeDisplay) {
|
29361 | display = multiple ? displayMultiple.join(', ') : displaySingle;
|
29362 | }
|
29363 |
|
29364 |
|
29365 | var menuMinWidth = menuMinWidthState;
|
29366 |
|
29367 | if (!autoWidth && isOpenControlled && displayNode) {
|
29368 | menuMinWidth = displayNode.clientWidth;
|
29369 | }
|
29370 |
|
29371 | var tabIndex;
|
29372 |
|
29373 | if (typeof tabIndexProp !== 'undefined') {
|
29374 | tabIndex = tabIndexProp;
|
29375 | } else {
|
29376 | tabIndex = disabled ? null : 0;
|
29377 | }
|
29378 |
|
29379 | var buttonId = SelectDisplayProps.id || (name ? "mui-component-select-".concat(name) : undefined);
|
29380 | return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", _extends({
|
29381 | className: clsx(classes.root,
|
29382 | classes.select, classes.selectMenu, classes[variant], className, disabled && classes.disabled),
|
29383 | ref: setDisplayNode,
|
29384 | tabIndex: tabIndex,
|
29385 | role: "button",
|
29386 | "aria-expanded": open ? 'true' : undefined,
|
29387 | "aria-labelledby": "".concat(labelId || '', " ").concat(buttonId || ''),
|
29388 | "aria-haspopup": "listbox",
|
29389 | onKeyDown: handleKeyDown,
|
29390 | onMouseDown: disabled || readOnly ? null : handleMouseDown,
|
29391 | onBlur: handleBlur,
|
29392 | onFocus: onFocus
|
29393 | }, SelectDisplayProps, {
|
29394 |
|
29395 | id: buttonId
|
29396 | }), isEmpty(display) ?
|
29397 | React__default.createElement("span", {
|
29398 | dangerouslySetInnerHTML: {
|
29399 | __html: '​'
|
29400 | }
|
29401 | }) : display), React__default.createElement("input", _extends({
|
29402 | value: Array.isArray(value) ? value.join(',') : value,
|
29403 | name: name,
|
29404 | ref: inputRef,
|
29405 | type: "hidden",
|
29406 | autoFocus: autoFocus
|
29407 | }, other)), React__default.createElement(IconComponent, {
|
29408 | className: clsx(classes.icon, classes["icon".concat(capitalize(variant))], open && classes.iconOpen)
|
29409 | }), React__default.createElement(Menu$1, _extends({
|
29410 | id: "menu-".concat(name || ''),
|
29411 | anchorEl: displayNode,
|
29412 | open: open,
|
29413 | onClose: handleClose
|
29414 | }, MenuProps, {
|
29415 | MenuListProps: _extends({
|
29416 | 'aria-labelledby': labelId,
|
29417 | role: 'listbox',
|
29418 | disableListWrap: true
|
29419 | }, MenuProps.MenuListProps),
|
29420 | PaperProps: _extends({}, MenuProps.PaperProps, {
|
29421 | style: _extends({
|
29422 | minWidth: menuMinWidth
|
29423 | }, MenuProps.PaperProps != null ? MenuProps.PaperProps.style : null)
|
29424 | })
|
29425 | }), items));
|
29426 | });
|
29427 | SelectInput.propTypes = {
|
29428 | |
29429 |
|
29430 |
|
29431 | autoFocus: propTypes.bool,
|
29432 |
|
29433 | |
29434 |
|
29435 |
|
29436 |
|
29437 | autoWidth: propTypes.bool,
|
29438 |
|
29439 | |
29440 |
|
29441 |
|
29442 |
|
29443 | children: propTypes.node,
|
29444 |
|
29445 | |
29446 |
|
29447 |
|
29448 |
|
29449 | classes: propTypes.object.isRequired,
|
29450 |
|
29451 | |
29452 |
|
29453 |
|
29454 | className: propTypes.string,
|
29455 |
|
29456 | |
29457 |
|
29458 |
|
29459 | defaultValue: propTypes.any,
|
29460 |
|
29461 | |
29462 |
|
29463 |
|
29464 | disabled: propTypes.bool,
|
29465 |
|
29466 | |
29467 |
|
29468 |
|
29469 | displayEmpty: propTypes.bool,
|
29470 |
|
29471 | |
29472 |
|
29473 |
|
29474 | IconComponent: propTypes.elementType.isRequired,
|
29475 |
|
29476 | |
29477 |
|
29478 |
|
29479 |
|
29480 | inputRef: refType,
|
29481 |
|
29482 | |
29483 |
|
29484 |
|
29485 |
|
29486 | labelId: propTypes.string,
|
29487 |
|
29488 | |
29489 |
|
29490 |
|
29491 | MenuProps: propTypes.object,
|
29492 |
|
29493 | |
29494 |
|
29495 |
|
29496 | multiple: propTypes.bool,
|
29497 |
|
29498 | |
29499 |
|
29500 |
|
29501 | name: propTypes.string,
|
29502 |
|
29503 | |
29504 |
|
29505 |
|
29506 | onBlur: propTypes.func,
|
29507 |
|
29508 | |
29509 |
|
29510 |
|
29511 |
|
29512 |
|
29513 |
|
29514 |
|
29515 | onChange: propTypes.func,
|
29516 |
|
29517 | |
29518 |
|
29519 |
|
29520 |
|
29521 |
|
29522 |
|
29523 | onClose: propTypes.func,
|
29524 |
|
29525 | |
29526 |
|
29527 |
|
29528 | onFocus: propTypes.func,
|
29529 |
|
29530 | |
29531 |
|
29532 |
|
29533 |
|
29534 |
|
29535 |
|
29536 | onOpen: propTypes.func,
|
29537 |
|
29538 | |
29539 |
|
29540 |
|
29541 | open: propTypes.bool,
|
29542 |
|
29543 | |
29544 |
|
29545 |
|
29546 | readOnly: propTypes.bool,
|
29547 |
|
29548 | |
29549 |
|
29550 |
|
29551 |
|
29552 |
|
29553 |
|
29554 | renderValue: propTypes.func,
|
29555 |
|
29556 | |
29557 |
|
29558 |
|
29559 | required: propTypes.bool,
|
29560 |
|
29561 | |
29562 |
|
29563 |
|
29564 | SelectDisplayProps: propTypes.object,
|
29565 |
|
29566 | |
29567 |
|
29568 |
|
29569 | tabIndex: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
29570 |
|
29571 | |
29572 |
|
29573 |
|
29574 | type: propTypes.any,
|
29575 |
|
29576 | |
29577 |
|
29578 |
|
29579 | value: propTypes.any,
|
29580 |
|
29581 | |
29582 |
|
29583 |
|
29584 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
29585 | } ;
|
29586 |
|
29587 | var styles$1g = styles$1b;
|
29588 |
|
29589 | var _ref = React__default.createElement(Input$1, null);
|
29590 |
|
29591 | var _ref2 = React__default.createElement(FilledInput$1, null);
|
29592 |
|
29593 | var Select = React__default.forwardRef(function Select(props, ref) {
|
29594 | var _props$autoWidth = props.autoWidth,
|
29595 | autoWidth = _props$autoWidth === void 0 ? false : _props$autoWidth,
|
29596 | children = props.children,
|
29597 | classes = props.classes,
|
29598 | _props$displayEmpty = props.displayEmpty,
|
29599 | displayEmpty = _props$displayEmpty === void 0 ? false : _props$displayEmpty,
|
29600 | _props$IconComponent = props.IconComponent,
|
29601 | IconComponent = _props$IconComponent === void 0 ? ArrowDropDownIcon : _props$IconComponent,
|
29602 | id = props.id,
|
29603 | input = props.input,
|
29604 | inputProps = props.inputProps,
|
29605 | labelId = props.labelId,
|
29606 | _props$labelWidth = props.labelWidth,
|
29607 | labelWidth = _props$labelWidth === void 0 ? 0 : _props$labelWidth,
|
29608 | MenuProps = props.MenuProps,
|
29609 | _props$multiple = props.multiple,
|
29610 | multiple = _props$multiple === void 0 ? false : _props$multiple,
|
29611 | _props$native = props.native,
|
29612 | native = _props$native === void 0 ? false : _props$native,
|
29613 | onClose = props.onClose,
|
29614 | onOpen = props.onOpen,
|
29615 | open = props.open,
|
29616 | renderValue = props.renderValue,
|
29617 | SelectDisplayProps = props.SelectDisplayProps,
|
29618 | _props$variant = props.variant,
|
29619 | variantProps = _props$variant === void 0 ? 'standard' : _props$variant,
|
29620 | other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "displayEmpty", "IconComponent", "id", "input", "inputProps", "labelId", "labelWidth", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
|
29621 |
|
29622 | var inputComponent = native ? NativeSelectInput : SelectInput;
|
29623 | var muiFormControl = useFormControl$1();
|
29624 | var fcs = formControlState({
|
29625 | props: props,
|
29626 | muiFormControl: muiFormControl,
|
29627 | states: ['variant']
|
29628 | });
|
29629 | var variant = fcs.variant || variantProps;
|
29630 | var InputComponent = input || {
|
29631 | standard: _ref,
|
29632 | outlined: React__default.createElement(OutlinedInput$1, {
|
29633 | labelWidth: labelWidth
|
29634 | }),
|
29635 | filled: _ref2
|
29636 | }[variant];
|
29637 | return React__default.cloneElement(InputComponent, _extends({
|
29638 |
|
29639 |
|
29640 | inputComponent: inputComponent,
|
29641 | inputProps: _extends({
|
29642 | children: children,
|
29643 | IconComponent: IconComponent,
|
29644 | variant: variant,
|
29645 | type: undefined,
|
29646 |
|
29647 | multiple: multiple
|
29648 | }, native ? {
|
29649 | id: id
|
29650 | } : {
|
29651 | autoWidth: autoWidth,
|
29652 | displayEmpty: displayEmpty,
|
29653 | labelId: labelId,
|
29654 | MenuProps: MenuProps,
|
29655 | onClose: onClose,
|
29656 | onOpen: onOpen,
|
29657 | open: open,
|
29658 | renderValue: renderValue,
|
29659 | SelectDisplayProps: _extends({
|
29660 | id: id
|
29661 | }, SelectDisplayProps)
|
29662 | }, {}, inputProps, {
|
29663 | classes: inputProps ? mergeClasses({
|
29664 | baseClasses: classes,
|
29665 | newClasses: inputProps.classes,
|
29666 | Component: Select
|
29667 | }) : classes
|
29668 | }, input ? input.props.inputProps : {}),
|
29669 | ref: ref
|
29670 | }, other));
|
29671 | });
|
29672 | Select.propTypes = {
|
29673 | |
29674 |
|
29675 |
|
29676 |
|
29677 | autoWidth: propTypes.bool,
|
29678 |
|
29679 | |
29680 |
|
29681 |
|
29682 |
|
29683 |
|
29684 |
|
29685 | children: propTypes.node,
|
29686 |
|
29687 | |
29688 |
|
29689 |
|
29690 |
|
29691 | classes: propTypes.object.isRequired,
|
29692 |
|
29693 | |
29694 |
|
29695 |
|
29696 | defaultValue: propTypes.any,
|
29697 |
|
29698 | |
29699 |
|
29700 |
|
29701 |
|
29702 |
|
29703 |
|
29704 | displayEmpty: propTypes.bool,
|
29705 |
|
29706 | |
29707 |
|
29708 |
|
29709 | IconComponent: propTypes.elementType,
|
29710 |
|
29711 | |
29712 |
|
29713 |
|
29714 | id: propTypes.string,
|
29715 |
|
29716 | |
29717 |
|
29718 |
|
29719 | input: propTypes.element,
|
29720 |
|
29721 | |
29722 |
|
29723 |
|
29724 |
|
29725 | inputProps: propTypes.object,
|
29726 |
|
29727 | |
29728 |
|
29729 |
|
29730 |
|
29731 | labelId: propTypes.string,
|
29732 |
|
29733 | |
29734 |
|
29735 |
|
29736 |
|
29737 | labelWidth: propTypes.number,
|
29738 |
|
29739 | |
29740 |
|
29741 |
|
29742 | MenuProps: propTypes.object,
|
29743 |
|
29744 | |
29745 |
|
29746 |
|
29747 | multiple: propTypes.bool,
|
29748 |
|
29749 | |
29750 |
|
29751 |
|
29752 | native: propTypes.bool,
|
29753 |
|
29754 | |
29755 |
|
29756 |
|
29757 |
|
29758 |
|
29759 |
|
29760 |
|
29761 | onChange: propTypes.func,
|
29762 |
|
29763 | |
29764 |
|
29765 |
|
29766 |
|
29767 |
|
29768 |
|
29769 | onClose: propTypes.func,
|
29770 |
|
29771 | |
29772 |
|
29773 |
|
29774 |
|
29775 |
|
29776 |
|
29777 | onOpen: propTypes.func,
|
29778 |
|
29779 | |
29780 |
|
29781 |
|
29782 |
|
29783 | open: propTypes.bool,
|
29784 |
|
29785 | |
29786 |
|
29787 |
|
29788 |
|
29789 |
|
29790 |
|
29791 |
|
29792 | renderValue: propTypes.func,
|
29793 |
|
29794 | |
29795 |
|
29796 |
|
29797 | SelectDisplayProps: propTypes.object,
|
29798 |
|
29799 | |
29800 |
|
29801 |
|
29802 |
|
29803 |
|
29804 |
|
29805 |
|
29806 |
|
29807 | value: propTypes.any,
|
29808 |
|
29809 | |
29810 |
|
29811 |
|
29812 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
29813 | } ;
|
29814 | Select.muiName = 'Select';
|
29815 | var Select$1 = withStyles$1(styles$1g, {
|
29816 | name: 'MuiSelect'
|
29817 | })(Select);
|
29818 |
|
29819 | var styles$1h = function styles(theme) {
|
29820 | return {
|
29821 | thumb: {
|
29822 | '&$open': {
|
29823 | '& $offset': {
|
29824 | transform: 'scale(1) translateY(-10px)'
|
29825 | }
|
29826 | }
|
29827 | },
|
29828 | open: {},
|
29829 | offset: _extends({
|
29830 | zIndex: 1
|
29831 | }, theme.typography.body2, {
|
29832 | fontSize: theme.typography.pxToRem(12),
|
29833 | lineHeight: 1.2,
|
29834 | transition: theme.transitions.create(['transform'], {
|
29835 | duration: theme.transitions.duration.shortest
|
29836 | }),
|
29837 | top: -34,
|
29838 | left: 'calc(-50% + -4px)',
|
29839 | transformOrigin: 'bottom center',
|
29840 | transform: 'scale(0)',
|
29841 | position: 'absolute'
|
29842 | }),
|
29843 | circle: {
|
29844 | display: 'flex',
|
29845 | alignItems: 'center',
|
29846 | justifyContent: 'center',
|
29847 | width: 32,
|
29848 | height: 32,
|
29849 | borderRadius: '50% 50% 50% 0',
|
29850 | backgroundColor: 'currentColor',
|
29851 | transform: 'rotate(-45deg)'
|
29852 | },
|
29853 | label: {
|
29854 | color: theme.palette.primary.contrastText,
|
29855 | transform: 'rotate(45deg)'
|
29856 | }
|
29857 | };
|
29858 | };
|
29859 | |
29860 |
|
29861 |
|
29862 |
|
29863 |
|
29864 | function ValueLabel(props) {
|
29865 | var children = props.children,
|
29866 | classes = props.classes,
|
29867 | className = props.className,
|
29868 | open = props.open,
|
29869 | value = props.value,
|
29870 | valueLabelDisplay = props.valueLabelDisplay;
|
29871 |
|
29872 | if (valueLabelDisplay === 'off') {
|
29873 | return children;
|
29874 | }
|
29875 |
|
29876 | return React__default.cloneElement(children, {
|
29877 | className: clsx(children.props.className, (open || valueLabelDisplay === 'on') && classes.open, classes.thumb)
|
29878 | }, React__default.createElement("span", {
|
29879 | className: clsx(classes.offset, className)
|
29880 | }, React__default.createElement("span", {
|
29881 | className: classes.circle
|
29882 | }, React__default.createElement("span", {
|
29883 | className: classes.label
|
29884 | }, value))));
|
29885 | }
|
29886 |
|
29887 | var ValueLabel$1 = withStyles$1(styles$1h, {
|
29888 | name: 'PrivateValueLabel'
|
29889 | })(ValueLabel);
|
29890 |
|
29891 | function asc(a, b) {
|
29892 | return a - b;
|
29893 | }
|
29894 |
|
29895 | function clamp$1(value, min, max) {
|
29896 | return Math.min(Math.max(min, value), max);
|
29897 | }
|
29898 |
|
29899 | function findClosest(values, currentValue) {
|
29900 | var _values$reduce = values.reduce(function (acc, value, index) {
|
29901 | var distance = Math.abs(currentValue - value);
|
29902 |
|
29903 | if (acc === null || distance < acc.distance || distance === acc.distance) {
|
29904 | return {
|
29905 | distance: distance,
|
29906 | index: index
|
29907 | };
|
29908 | }
|
29909 |
|
29910 | return acc;
|
29911 | }, null),
|
29912 | closestIndex = _values$reduce.index;
|
29913 |
|
29914 | return closestIndex;
|
29915 | }
|
29916 |
|
29917 | function trackFinger(event, touchId) {
|
29918 | if (touchId.current !== undefined && event.changedTouches) {
|
29919 | for (var i = 0; i < event.changedTouches.length; i += 1) {
|
29920 | var touch = event.changedTouches[i];
|
29921 |
|
29922 | if (touch.identifier === touchId.current) {
|
29923 | return {
|
29924 | x: touch.clientX,
|
29925 | y: touch.clientY
|
29926 | };
|
29927 | }
|
29928 | }
|
29929 |
|
29930 | return false;
|
29931 | }
|
29932 |
|
29933 | return {
|
29934 | x: event.clientX,
|
29935 | y: event.clientY
|
29936 | };
|
29937 | }
|
29938 |
|
29939 | function valueToPercent(value, min, max) {
|
29940 | return (value - min) * 100 / (max - min);
|
29941 | }
|
29942 |
|
29943 | function percentToValue(percent, min, max) {
|
29944 | return (max - min) * percent + min;
|
29945 | }
|
29946 |
|
29947 | function getDecimalPrecision(num) {
|
29948 |
|
29949 |
|
29950 | if (Math.abs(num) < 1) {
|
29951 | var parts = num.toExponential().split('e-');
|
29952 | var matissaDecimalPart = parts[0].split('.')[1];
|
29953 | return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
|
29954 | }
|
29955 |
|
29956 | var decimalPart = num.toString().split('.')[1];
|
29957 | return decimalPart ? decimalPart.length : 0;
|
29958 | }
|
29959 |
|
29960 | function roundValueToStep(value, step, min) {
|
29961 | var nearest = Math.round((value - min) / step) * step + min;
|
29962 | return Number(nearest.toFixed(getDecimalPrecision(step)));
|
29963 | }
|
29964 |
|
29965 | function setValueIndex(_ref) {
|
29966 | var values = _ref.values,
|
29967 | source = _ref.source,
|
29968 | newValue = _ref.newValue,
|
29969 | index = _ref.index;
|
29970 |
|
29971 |
|
29972 | if (values[index] === newValue) {
|
29973 | return source;
|
29974 | }
|
29975 |
|
29976 | var output = _toConsumableArray(values);
|
29977 |
|
29978 | output[index] = newValue;
|
29979 | return output;
|
29980 | }
|
29981 |
|
29982 | function focusThumb(_ref2) {
|
29983 | var sliderRef = _ref2.sliderRef,
|
29984 | activeIndex = _ref2.activeIndex,
|
29985 | setActive = _ref2.setActive;
|
29986 |
|
29987 | if (!sliderRef.current.contains(document.activeElement) || Number(document.activeElement.getAttribute('data-index')) !== activeIndex) {
|
29988 | sliderRef.current.querySelector("[data-index=\"".concat(activeIndex, "\"]")).focus();
|
29989 | }
|
29990 |
|
29991 | if (setActive) {
|
29992 | setActive(activeIndex);
|
29993 | }
|
29994 | }
|
29995 |
|
29996 | var axisProps = {
|
29997 | horizontal: {
|
29998 | offset: function offset(percent) {
|
29999 | return {
|
30000 | left: "".concat(percent, "%")
|
30001 | };
|
30002 | },
|
30003 | leap: function leap(percent) {
|
30004 | return {
|
30005 | width: "".concat(percent, "%")
|
30006 | };
|
30007 | }
|
30008 | },
|
30009 | 'horizontal-reverse': {
|
30010 | offset: function offset(percent) {
|
30011 | return {
|
30012 | right: "".concat(percent, "%")
|
30013 | };
|
30014 | },
|
30015 | leap: function leap(percent) {
|
30016 | return {
|
30017 | width: "".concat(percent, "%")
|
30018 | };
|
30019 | }
|
30020 | },
|
30021 | vertical: {
|
30022 | offset: function offset(percent) {
|
30023 | return {
|
30024 | bottom: "".concat(percent, "%")
|
30025 | };
|
30026 | },
|
30027 | leap: function leap(percent) {
|
30028 | return {
|
30029 | height: "".concat(percent, "%")
|
30030 | };
|
30031 | }
|
30032 | }
|
30033 | };
|
30034 | var defaultMarks = [];
|
30035 |
|
30036 | var Identity = function Identity(x) {
|
30037 | return x;
|
30038 | };
|
30039 |
|
30040 | var styles$1i = function styles(theme) {
|
30041 | return {
|
30042 |
|
30043 | root: {
|
30044 | height: 2,
|
30045 | width: '100%',
|
30046 | boxSizing: 'content-box',
|
30047 | padding: '13px 0',
|
30048 | display: 'inline-block',
|
30049 | position: 'relative',
|
30050 | cursor: 'pointer',
|
30051 | touchAction: 'none',
|
30052 | color: theme.palette.primary.main,
|
30053 | WebkitTapHighlightColor: 'transparent',
|
30054 | '&$disabled': {
|
30055 | pointerEvents: 'none',
|
30056 | cursor: 'default',
|
30057 | color: theme.palette.grey[400]
|
30058 | },
|
30059 | '&$vertical': {
|
30060 | width: 2,
|
30061 | height: '100%',
|
30062 | padding: '0 13px'
|
30063 | },
|
30064 |
|
30065 | '@media (pointer: coarse)': {
|
30066 |
|
30067 | padding: '20px 0',
|
30068 | '&$vertical': {
|
30069 | padding: '0 20px'
|
30070 | }
|
30071 | }
|
30072 | },
|
30073 |
|
30074 |
|
30075 | colorPrimary: {
|
30076 | },
|
30077 |
|
30078 |
|
30079 | colorSecondary: {
|
30080 | color: theme.palette.secondary.main
|
30081 | },
|
30082 |
|
30083 |
|
30084 | marked: {
|
30085 | marginBottom: 20,
|
30086 | '&$vertical': {
|
30087 | marginBottom: 'auto',
|
30088 | marginRight: 20
|
30089 | }
|
30090 | },
|
30091 |
|
30092 |
|
30093 | vertical: {},
|
30094 |
|
30095 |
|
30096 | disabled: {},
|
30097 |
|
30098 |
|
30099 | rail: {
|
30100 | display: 'block',
|
30101 | position: 'absolute',
|
30102 | width: '100%',
|
30103 | height: 2,
|
30104 | borderRadius: 1,
|
30105 | backgroundColor: 'currentColor',
|
30106 | opacity: 0.38,
|
30107 | '$vertical &': {
|
30108 | height: '100%',
|
30109 | width: 2
|
30110 | }
|
30111 | },
|
30112 |
|
30113 |
|
30114 | track: {
|
30115 | display: 'block',
|
30116 | position: 'absolute',
|
30117 | height: 2,
|
30118 | borderRadius: 1,
|
30119 | backgroundColor: 'currentColor',
|
30120 | '$vertical &': {
|
30121 | width: 2
|
30122 | }
|
30123 | },
|
30124 |
|
30125 |
|
30126 | trackFalse: {
|
30127 | '& $track': {
|
30128 | display: 'none'
|
30129 | }
|
30130 | },
|
30131 |
|
30132 |
|
30133 | trackInverted: {
|
30134 | '& $track': {
|
30135 | backgroundColor:
|
30136 | theme.palette.type === 'light' ? lighten(theme.palette.primary.main, 0.62) : darken(theme.palette.primary.main, 0.5)
|
30137 | },
|
30138 | '& $rail': {
|
30139 | opacity: 1
|
30140 | }
|
30141 | },
|
30142 |
|
30143 |
|
30144 | thumb: {
|
30145 | position: 'absolute',
|
30146 | width: 12,
|
30147 | height: 12,
|
30148 | marginLeft: -6,
|
30149 | marginTop: -5,
|
30150 | boxSizing: 'border-box',
|
30151 | borderRadius: '50%',
|
30152 | outline: 0,
|
30153 | backgroundColor: 'currentColor',
|
30154 | display: 'flex',
|
30155 | alignItems: 'center',
|
30156 | justifyContent: 'center',
|
30157 | transition: theme.transitions.create(['box-shadow'], {
|
30158 | duration: theme.transitions.duration.shortest
|
30159 | }),
|
30160 | '&::after': {
|
30161 | position: 'absolute',
|
30162 | content: '""',
|
30163 | borderRadius: '50%',
|
30164 |
|
30165 | left: -15,
|
30166 | top: -15,
|
30167 | right: -15,
|
30168 | bottom: -15
|
30169 | },
|
30170 | '&$focusVisible,&:hover': {
|
30171 | boxShadow: "0px 0px 0px 8px ".concat(fade(theme.palette.primary.main, 0.16)),
|
30172 | '@media (hover: none)': {
|
30173 | boxShadow: 'none'
|
30174 | }
|
30175 | },
|
30176 | '&$active': {
|
30177 | boxShadow: "0px 0px 0px 14px ".concat(fade(theme.palette.primary.main, 0.16))
|
30178 | },
|
30179 | '&$disabled': {
|
30180 | width: 8,
|
30181 | height: 8,
|
30182 | marginLeft: -4,
|
30183 | marginTop: -3,
|
30184 | '&:hover': {
|
30185 | boxShadow: 'none'
|
30186 | }
|
30187 | },
|
30188 | '$vertical &': {
|
30189 | marginLeft: -5,
|
30190 | marginBottom: -6
|
30191 | },
|
30192 | '$vertical &$disabled': {
|
30193 | marginLeft: -3,
|
30194 | marginBottom: -4
|
30195 | }
|
30196 | },
|
30197 |
|
30198 |
|
30199 | thumbColorPrimary: {
|
30200 | },
|
30201 |
|
30202 |
|
30203 | thumbColorSecondary: {
|
30204 | '&$focusVisible,&:hover': {
|
30205 | boxShadow: "0px 0px 0px 8px ".concat(fade(theme.palette.secondary.main, 0.16))
|
30206 | },
|
30207 | '&$active': {
|
30208 | boxShadow: "0px 0px 0px 14px ".concat(fade(theme.palette.secondary.main, 0.16))
|
30209 | }
|
30210 | },
|
30211 |
|
30212 |
|
30213 | active: {},
|
30214 |
|
30215 |
|
30216 | focusVisible: {},
|
30217 |
|
30218 |
|
30219 | valueLabel: {},
|
30220 |
|
30221 |
|
30222 | mark: {
|
30223 | position: 'absolute',
|
30224 | width: 2,
|
30225 | height: 2,
|
30226 | borderRadius: 1,
|
30227 | backgroundColor: 'currentColor'
|
30228 | },
|
30229 |
|
30230 |
|
30231 | markActive: {
|
30232 | backgroundColor: theme.palette.background.paper,
|
30233 | opacity: 0.8
|
30234 | },
|
30235 |
|
30236 |
|
30237 | markLabel: _extends({}, theme.typography.body2, {
|
30238 | color: theme.palette.text.secondary,
|
30239 | position: 'absolute',
|
30240 | top: 26,
|
30241 | transform: 'translateX(-50%)',
|
30242 | whiteSpace: 'nowrap',
|
30243 | '$vertical &': {
|
30244 | top: 'auto',
|
30245 | left: 26,
|
30246 | transform: 'translateY(50%)'
|
30247 | },
|
30248 | '@media (pointer: coarse)': {
|
30249 | top: 40,
|
30250 | '$vertical &': {
|
30251 | left: 31
|
30252 | }
|
30253 | }
|
30254 | }),
|
30255 |
|
30256 |
|
30257 | markLabelActive: {
|
30258 | color: theme.palette.text.primary
|
30259 | }
|
30260 | };
|
30261 | };
|
30262 | var Slider = React__default.forwardRef(function Slider(props, ref) {
|
30263 | var ariaLabel = props['aria-label'],
|
30264 | ariaLabelledby = props['aria-labelledby'],
|
30265 | ariaValuetext = props['aria-valuetext'],
|
30266 | classes = props.classes,
|
30267 | className = props.className,
|
30268 | _props$color = props.color,
|
30269 | color = _props$color === void 0 ? 'primary' : _props$color,
|
30270 | _props$component = props.component,
|
30271 | Component = _props$component === void 0 ? 'span' : _props$component,
|
30272 | defaultValue = props.defaultValue,
|
30273 | _props$disabled = props.disabled,
|
30274 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
30275 | getAriaLabel = props.getAriaLabel,
|
30276 | getAriaValueText = props.getAriaValueText,
|
30277 | _props$marks = props.marks,
|
30278 | marksProp = _props$marks === void 0 ? defaultMarks : _props$marks,
|
30279 | _props$max = props.max,
|
30280 | max = _props$max === void 0 ? 100 : _props$max,
|
30281 | _props$min = props.min,
|
30282 | min = _props$min === void 0 ? 0 : _props$min,
|
30283 | name = props.name,
|
30284 | onChange = props.onChange,
|
30285 | onChangeCommitted = props.onChangeCommitted,
|
30286 | onMouseDown = props.onMouseDown,
|
30287 | _props$orientation = props.orientation,
|
30288 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
30289 | _props$step = props.step,
|
30290 | step = _props$step === void 0 ? 1 : _props$step,
|
30291 | _props$ThumbComponent = props.ThumbComponent,
|
30292 | ThumbComponent = _props$ThumbComponent === void 0 ? 'span' : _props$ThumbComponent,
|
30293 | _props$track = props.track,
|
30294 | track = _props$track === void 0 ? 'normal' : _props$track,
|
30295 | valueProp = props.value,
|
30296 | _props$ValueLabelComp = props.ValueLabelComponent,
|
30297 | ValueLabelComponent = _props$ValueLabelComp === void 0 ? ValueLabel$1 : _props$ValueLabelComp,
|
30298 | _props$valueLabelDisp = props.valueLabelDisplay,
|
30299 | valueLabelDisplay = _props$valueLabelDisp === void 0 ? 'off' : _props$valueLabelDisp,
|
30300 | _props$valueLabelForm = props.valueLabelFormat,
|
30301 | valueLabelFormat = _props$valueLabelForm === void 0 ? Identity : _props$valueLabelForm,
|
30302 | other = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "aria-valuetext", "classes", "className", "color", "component", "defaultValue", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "step", "ThumbComponent", "track", "value", "ValueLabelComponent", "valueLabelDisplay", "valueLabelFormat"]);
|
30303 |
|
30304 | var theme = useTheme$1();
|
30305 | var touchId = React__default.useRef();
|
30306 |
|
30307 |
|
30308 |
|
30309 | var _React$useState = React__default.useState(-1),
|
30310 | active = _React$useState[0],
|
30311 | setActive = _React$useState[1];
|
30312 |
|
30313 | var _React$useState2 = React__default.useState(-1),
|
30314 | open = _React$useState2[0],
|
30315 | setOpen = _React$useState2[1];
|
30316 |
|
30317 | var _React$useRef = React__default.useRef(valueProp != null),
|
30318 | isControlled = _React$useRef.current;
|
30319 |
|
30320 | var _React$useState3 = React__default.useState(defaultValue),
|
30321 | valueState = _React$useState3[0],
|
30322 | setValueState = _React$useState3[1];
|
30323 |
|
30324 | var valueDerived = isControlled ? valueProp : valueState;
|
30325 |
|
30326 | {
|
30327 |
|
30328 | React__default.useEffect(function () {
|
30329 | if (isControlled !== (valueProp != null)) {
|
30330 | console.error(["Material-UI: A component is changing ".concat(isControlled ? 'a ' : 'an un', "controlled Slider to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled Slider ' + 'element for the lifetime of the component.', 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
30331 | }
|
30332 | }, [valueProp, isControlled]);
|
30333 | }
|
30334 |
|
30335 | var range = Array.isArray(valueDerived);
|
30336 | var instanceRef = React__default.useRef();
|
30337 | var values = range ? _toConsumableArray(valueDerived).sort(asc) : [valueDerived];
|
30338 | values = values.map(function (value) {
|
30339 | return clamp$1(value, min, max);
|
30340 | });
|
30341 | var marks = marksProp === true && step !== null ? _toConsumableArray(Array(Math.floor((max - min) / step) + 1)).map(function (_, index) {
|
30342 | return {
|
30343 | value: min + step * index
|
30344 | };
|
30345 | }) : marksProp;
|
30346 | instanceRef.current = {
|
30347 | source: valueDerived
|
30348 |
|
30349 | };
|
30350 |
|
30351 | var _useIsFocusVisible = useIsFocusVisible(),
|
30352 | isFocusVisible = _useIsFocusVisible.isFocusVisible,
|
30353 | onBlurVisible = _useIsFocusVisible.onBlurVisible,
|
30354 | focusVisibleRef = _useIsFocusVisible.ref;
|
30355 |
|
30356 | var _React$useState4 = React__default.useState(-1),
|
30357 | focusVisible = _React$useState4[0],
|
30358 | setFocusVisible = _React$useState4[1];
|
30359 |
|
30360 | var sliderRef = React__default.useRef();
|
30361 | var handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
|
30362 | var handleRef = useForkRef(ref, handleFocusRef);
|
30363 | var handleFocus = useEventCallback(function (event) {
|
30364 | var index = Number(event.currentTarget.getAttribute('data-index'));
|
30365 |
|
30366 | if (isFocusVisible(event)) {
|
30367 | setFocusVisible(index);
|
30368 | }
|
30369 |
|
30370 | setOpen(index);
|
30371 | });
|
30372 | var handleBlur = useEventCallback(function () {
|
30373 | if (focusVisible !== -1) {
|
30374 | setFocusVisible(-1);
|
30375 | onBlurVisible();
|
30376 | }
|
30377 |
|
30378 | setOpen(-1);
|
30379 | });
|
30380 | var handleMouseOver = useEventCallback(function (event) {
|
30381 | var index = Number(event.currentTarget.getAttribute('data-index'));
|
30382 | setOpen(index);
|
30383 | });
|
30384 | var handleMouseLeave = useEventCallback(function () {
|
30385 | setOpen(-1);
|
30386 | });
|
30387 | var handleKeyDown = useEventCallback(function (event) {
|
30388 | var index = Number(event.currentTarget.getAttribute('data-index'));
|
30389 | var value = values[index];
|
30390 | var tenPercents = (max - min) / 10;
|
30391 | var marksValues = marks.map(function (mark) {
|
30392 | return mark.value;
|
30393 | });
|
30394 | var marksIndex = marksValues.indexOf(value);
|
30395 | var newValue;
|
30396 |
|
30397 | switch (event.key) {
|
30398 | case 'Home':
|
30399 | newValue = min;
|
30400 | break;
|
30401 |
|
30402 | case 'End':
|
30403 | newValue = max;
|
30404 | break;
|
30405 |
|
30406 | case 'PageUp':
|
30407 | if (step) {
|
30408 | newValue = value + tenPercents;
|
30409 | }
|
30410 |
|
30411 | break;
|
30412 |
|
30413 | case 'PageDown':
|
30414 | if (step) {
|
30415 | newValue = value - tenPercents;
|
30416 | }
|
30417 |
|
30418 | break;
|
30419 |
|
30420 | case 'ArrowRight':
|
30421 | case 'ArrowUp':
|
30422 | if (step) {
|
30423 | newValue = value + step;
|
30424 | } else {
|
30425 | newValue = marksValues[marksIndex + 1] || marksValues[marksValues.length - 1];
|
30426 | }
|
30427 |
|
30428 | break;
|
30429 |
|
30430 | case 'ArrowLeft':
|
30431 | case 'ArrowDown':
|
30432 | if (step) {
|
30433 | newValue = value - step;
|
30434 | } else {
|
30435 | newValue = marksValues[marksIndex - 1] || marksValues[0];
|
30436 | }
|
30437 |
|
30438 | break;
|
30439 |
|
30440 | default:
|
30441 | return;
|
30442 | }
|
30443 |
|
30444 |
|
30445 | event.preventDefault();
|
30446 |
|
30447 | if (step) {
|
30448 | newValue = roundValueToStep(newValue, step, min);
|
30449 | }
|
30450 |
|
30451 | newValue = clamp$1(newValue, min, max);
|
30452 |
|
30453 | if (range) {
|
30454 | var previousValue = newValue;
|
30455 | newValue = setValueIndex({
|
30456 | values: values,
|
30457 | source: valueDerived,
|
30458 | newValue: newValue,
|
30459 | index: index
|
30460 | }).sort(asc);
|
30461 | focusThumb({
|
30462 | sliderRef: sliderRef,
|
30463 | activeIndex: newValue.indexOf(previousValue)
|
30464 | });
|
30465 | }
|
30466 |
|
30467 | if (!isControlled) {
|
30468 | setValueState(newValue);
|
30469 | }
|
30470 |
|
30471 | setFocusVisible(index);
|
30472 |
|
30473 | if (onChange) {
|
30474 | onChange(event, newValue);
|
30475 | }
|
30476 |
|
30477 | if (onChangeCommitted) {
|
30478 | onChangeCommitted(event, newValue);
|
30479 | }
|
30480 | });
|
30481 | var previousIndex = React__default.useRef();
|
30482 | var axis = orientation;
|
30483 |
|
30484 | if (theme.direction === 'rtl' && orientation !== "vertical") {
|
30485 | axis += '-reverse';
|
30486 | }
|
30487 |
|
30488 | var getFingerNewValue = React__default.useCallback(function (_ref3) {
|
30489 | var finger = _ref3.finger,
|
30490 | _ref3$move = _ref3.move,
|
30491 | move = _ref3$move === void 0 ? false : _ref3$move,
|
30492 | values2 = _ref3.values,
|
30493 | source = _ref3.source;
|
30494 | var slider = sliderRef.current;
|
30495 |
|
30496 | var _slider$getBoundingCl = slider.getBoundingClientRect(),
|
30497 | width = _slider$getBoundingCl.width,
|
30498 | height = _slider$getBoundingCl.height,
|
30499 | bottom = _slider$getBoundingCl.bottom,
|
30500 | left = _slider$getBoundingCl.left;
|
30501 |
|
30502 | var percent;
|
30503 |
|
30504 | if (axis.indexOf('vertical') === 0) {
|
30505 | percent = (bottom - finger.y) / height;
|
30506 | } else {
|
30507 | percent = (finger.x - left) / width;
|
30508 | }
|
30509 |
|
30510 | if (axis.indexOf('-reverse') !== -1) {
|
30511 | percent = 1 - percent;
|
30512 | }
|
30513 |
|
30514 | var newValue;
|
30515 | newValue = percentToValue(percent, min, max);
|
30516 |
|
30517 | if (step) {
|
30518 | newValue = roundValueToStep(newValue, step, min);
|
30519 | } else {
|
30520 | var marksValues = marks.map(function (mark) {
|
30521 | return mark.value;
|
30522 | });
|
30523 | var closestIndex = findClosest(marksValues, newValue);
|
30524 | newValue = marksValues[closestIndex];
|
30525 | }
|
30526 |
|
30527 | newValue = clamp$1(newValue, min, max);
|
30528 | var activeIndex = 0;
|
30529 |
|
30530 | if (range) {
|
30531 | if (!move) {
|
30532 | activeIndex = findClosest(values2, newValue);
|
30533 | } else {
|
30534 | activeIndex = previousIndex.current;
|
30535 | }
|
30536 |
|
30537 | var previousValue = newValue;
|
30538 | newValue = setValueIndex({
|
30539 | values: values2,
|
30540 | source: source,
|
30541 | newValue: newValue,
|
30542 | index: activeIndex
|
30543 | }).sort(asc);
|
30544 | activeIndex = newValue.indexOf(previousValue);
|
30545 | previousIndex.current = activeIndex;
|
30546 | }
|
30547 |
|
30548 | return {
|
30549 | newValue: newValue,
|
30550 | activeIndex: activeIndex
|
30551 | };
|
30552 | }, [max, min, axis, range, step, marks]);
|
30553 | var handleTouchMove = useEventCallback(function (event) {
|
30554 | var finger = trackFinger(event, touchId);
|
30555 |
|
30556 | if (!finger) {
|
30557 | return;
|
30558 | }
|
30559 |
|
30560 | var _getFingerNewValue = getFingerNewValue({
|
30561 | finger: finger,
|
30562 | move: true,
|
30563 | values: values,
|
30564 | source: valueDerived
|
30565 | }),
|
30566 | newValue = _getFingerNewValue.newValue,
|
30567 | activeIndex = _getFingerNewValue.activeIndex;
|
30568 |
|
30569 | focusThumb({
|
30570 | sliderRef: sliderRef,
|
30571 | activeIndex: activeIndex,
|
30572 | setActive: setActive
|
30573 | });
|
30574 |
|
30575 | if (!isControlled) {
|
30576 | setValueState(newValue);
|
30577 | }
|
30578 |
|
30579 | if (onChange) {
|
30580 | onChange(event, newValue);
|
30581 | }
|
30582 | });
|
30583 | var handleTouchEnd = useEventCallback(function (event) {
|
30584 | var finger = trackFinger(event, touchId);
|
30585 |
|
30586 | if (!finger) {
|
30587 | return;
|
30588 | }
|
30589 |
|
30590 | var _getFingerNewValue2 = getFingerNewValue({
|
30591 | finger: finger,
|
30592 | values: values,
|
30593 | source: valueDerived
|
30594 | }),
|
30595 | newValue = _getFingerNewValue2.newValue;
|
30596 |
|
30597 | setActive(-1);
|
30598 |
|
30599 | if (event.type === 'touchend') {
|
30600 | setOpen(-1);
|
30601 | }
|
30602 |
|
30603 | if (onChangeCommitted) {
|
30604 | onChangeCommitted(event, newValue);
|
30605 | }
|
30606 |
|
30607 | touchId.current = undefined;
|
30608 | document.body.removeEventListener('mousemove', handleTouchMove);
|
30609 | document.body.removeEventListener('mouseup', handleTouchEnd);
|
30610 |
|
30611 | document.body.removeEventListener('mouseenter', handleMouseEnter);
|
30612 | document.body.removeEventListener('touchmove', handleTouchMove);
|
30613 | document.body.removeEventListener('touchend', handleTouchEnd);
|
30614 | });
|
30615 | var handleMouseEnter = useEventCallback(function (event) {
|
30616 |
|
30617 |
|
30618 | if (event.buttons === 0) {
|
30619 | handleTouchEnd(event);
|
30620 | }
|
30621 | });
|
30622 | var handleTouchStart = useEventCallback(function (event) {
|
30623 |
|
30624 | event.preventDefault();
|
30625 | var touch = event.changedTouches[0];
|
30626 |
|
30627 | if (touch != null) {
|
30628 |
|
30629 | touchId.current = touch.identifier;
|
30630 | }
|
30631 |
|
30632 | var finger = trackFinger(event, touchId);
|
30633 |
|
30634 | var _getFingerNewValue3 = getFingerNewValue({
|
30635 | finger: finger,
|
30636 | values: values,
|
30637 | source: valueDerived
|
30638 | }),
|
30639 | newValue = _getFingerNewValue3.newValue,
|
30640 | activeIndex = _getFingerNewValue3.activeIndex;
|
30641 |
|
30642 | focusThumb({
|
30643 | sliderRef: sliderRef,
|
30644 | activeIndex: activeIndex,
|
30645 | setActive: setActive
|
30646 | });
|
30647 |
|
30648 | if (!isControlled) {
|
30649 | setValueState(newValue);
|
30650 | }
|
30651 |
|
30652 | if (onChange) {
|
30653 | onChange(event, newValue);
|
30654 | }
|
30655 |
|
30656 | document.body.addEventListener('touchmove', handleTouchMove);
|
30657 | document.body.addEventListener('touchend', handleTouchEnd);
|
30658 | });
|
30659 | React__default.useEffect(function () {
|
30660 | var slider = sliderRef.current;
|
30661 | slider.addEventListener('touchstart', handleTouchStart);
|
30662 | return function () {
|
30663 | slider.removeEventListener('touchstart', handleTouchStart);
|
30664 | document.body.removeEventListener('mousemove', handleTouchMove);
|
30665 | document.body.removeEventListener('mouseup', handleTouchEnd);
|
30666 | document.body.removeEventListener('mouseenter', handleMouseEnter);
|
30667 | document.body.removeEventListener('touchmove', handleTouchMove);
|
30668 | document.body.removeEventListener('touchend', handleTouchEnd);
|
30669 | };
|
30670 | }, [handleMouseEnter, handleTouchEnd, handleTouchMove, handleTouchStart]);
|
30671 |
|
30672 | {
|
30673 |
|
30674 | React__default.useEffect(function () {
|
30675 | if (isControlled !== (valueProp != null)) {
|
30676 | console.error(["Material-UI: A component is changing ".concat(isControlled ? 'a ' : 'an un', "controlled Slider to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled Slider ' + 'element for the lifetime of the component.', 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
30677 | }
|
30678 | }, [valueProp, isControlled]);
|
30679 | }
|
30680 |
|
30681 | var handleMouseDown = useEventCallback(function (event) {
|
30682 | if (onMouseDown) {
|
30683 | onMouseDown(event);
|
30684 | }
|
30685 |
|
30686 | event.preventDefault();
|
30687 | var finger = trackFinger(event, touchId);
|
30688 |
|
30689 | var _getFingerNewValue4 = getFingerNewValue({
|
30690 | finger: finger,
|
30691 | values: values,
|
30692 | source: valueDerived
|
30693 | }),
|
30694 | newValue = _getFingerNewValue4.newValue,
|
30695 | activeIndex = _getFingerNewValue4.activeIndex;
|
30696 |
|
30697 | focusThumb({
|
30698 | sliderRef: sliderRef,
|
30699 | activeIndex: activeIndex,
|
30700 | setActive: setActive
|
30701 | });
|
30702 |
|
30703 | if (!isControlled) {
|
30704 | setValueState(newValue);
|
30705 | }
|
30706 |
|
30707 | if (onChange) {
|
30708 | onChange(event, newValue);
|
30709 | }
|
30710 |
|
30711 | document.body.addEventListener('mousemove', handleTouchMove);
|
30712 | document.body.addEventListener('mouseenter', handleMouseEnter);
|
30713 | document.body.addEventListener('mouseup', handleTouchEnd);
|
30714 | });
|
30715 | var trackOffset = valueToPercent(range ? values[0] : min, min, max);
|
30716 | var trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
|
30717 |
|
30718 | var trackStyle = _extends({}, axisProps[axis].offset(trackOffset), {}, axisProps[axis].leap(trackLeap));
|
30719 |
|
30720 | return React__default.createElement(Component, _extends({
|
30721 | ref: handleRef,
|
30722 | className: clsx(classes.root, classes["color".concat(capitalize(color))], className, disabled && classes.disabled, marks.length > 0 && marks.some(function (mark) {
|
30723 | return mark.label;
|
30724 | }) && classes.marked, track === false && classes.trackFalse, {
|
30725 | vertical: classes.vertical
|
30726 | }[orientation], {
|
30727 | inverted: classes.trackInverted
|
30728 | }[track]),
|
30729 | onMouseDown: handleMouseDown
|
30730 | }, other), React__default.createElement("span", {
|
30731 | className: classes.rail
|
30732 | }), React__default.createElement("span", {
|
30733 | className: classes.track,
|
30734 | style: trackStyle
|
30735 | }), React__default.createElement("input", {
|
30736 | value: values.join(','),
|
30737 | name: name,
|
30738 | type: "hidden"
|
30739 | }), marks.map(function (mark) {
|
30740 | var percent = valueToPercent(mark.value, min, max);
|
30741 | var style = axisProps[axis].offset(percent);
|
30742 | var markActive;
|
30743 |
|
30744 | if (track === false) {
|
30745 | markActive = values.indexOf(mark.value) !== -1;
|
30746 | } else {
|
30747 | var isMarkActive = range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0];
|
30748 | markActive = isMarkActive && track === 'normal' || !isMarkActive && track === 'inverted';
|
30749 | }
|
30750 |
|
30751 | return React__default.createElement(React__default.Fragment, {
|
30752 | key: mark.value
|
30753 | }, React__default.createElement("span", {
|
30754 | style: style,
|
30755 | className: clsx(classes.mark, markActive && classes.markActive)
|
30756 | }), React__default.createElement("span", {
|
30757 | "aria-hidden": true,
|
30758 | style: style,
|
30759 | className: clsx(classes.markLabel, markActive && classes.markLabelActive)
|
30760 | }, mark.label));
|
30761 | }), values.map(function (value, index) {
|
30762 | var percent = valueToPercent(value, min, max);
|
30763 | var style = axisProps[axis].offset(percent);
|
30764 | return React__default.createElement(ValueLabelComponent, {
|
30765 | key: index,
|
30766 | valueLabelFormat: valueLabelFormat,
|
30767 | valueLabelDisplay: valueLabelDisplay,
|
30768 | className: classes.valueLabel,
|
30769 | value: typeof valueLabelFormat === 'function' ? valueLabelFormat(value, index) : valueLabelFormat,
|
30770 | index: index,
|
30771 | open: open === index || active === index || valueLabelDisplay === 'on',
|
30772 | disabled: disabled
|
30773 | }, React__default.createElement(ThumbComponent, {
|
30774 | className: clsx(classes.thumb, classes["thumbColor".concat(capitalize(color))], active === index && classes.active, disabled && classes.disabled, focusVisible === index && classes.focusVisible),
|
30775 | tabIndex: disabled ? null : 0,
|
30776 | role: "slider",
|
30777 | style: style,
|
30778 | "data-index": index,
|
30779 | "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
|
30780 | "aria-labelledby": ariaLabelledby,
|
30781 | "aria-orientation": orientation,
|
30782 | "aria-valuemax": max,
|
30783 | "aria-valuemin": min,
|
30784 | "aria-valuenow": value,
|
30785 | "aria-valuetext": getAriaValueText ? getAriaValueText(value, index) : ariaValuetext,
|
30786 | onKeyDown: handleKeyDown,
|
30787 | onFocus: handleFocus,
|
30788 | onBlur: handleBlur,
|
30789 | onMouseOver: handleMouseOver,
|
30790 | onMouseLeave: handleMouseLeave
|
30791 | }));
|
30792 | }));
|
30793 | });
|
30794 | Slider.propTypes = {
|
30795 | |
30796 |
|
30797 |
|
30798 | 'aria-label': chainPropTypes(propTypes.string, function (props) {
|
30799 | var range = Array.isArray(props.value || props.defaultValue);
|
30800 |
|
30801 | if (range && props['aria-label'] != null) {
|
30802 | return new Error('Material-UI: you need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
|
30803 | }
|
30804 |
|
30805 | return null;
|
30806 | }),
|
30807 |
|
30808 | |
30809 |
|
30810 |
|
30811 | 'aria-labelledby': propTypes.string,
|
30812 |
|
30813 | |
30814 |
|
30815 |
|
30816 | 'aria-valuetext': chainPropTypes(propTypes.string, function (props) {
|
30817 | var range = Array.isArray(props.value || props.defaultValue);
|
30818 |
|
30819 | if (range && props['aria-valuetext'] != null) {
|
30820 | return new Error('Material-UI: you need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');
|
30821 | }
|
30822 |
|
30823 | return null;
|
30824 | }),
|
30825 |
|
30826 | |
30827 |
|
30828 |
|
30829 |
|
30830 | classes: propTypes.object.isRequired,
|
30831 |
|
30832 | |
30833 |
|
30834 |
|
30835 | className: propTypes.string,
|
30836 |
|
30837 | |
30838 |
|
30839 |
|
30840 | color: propTypes.oneOf(['primary', 'secondary']),
|
30841 |
|
30842 | |
30843 |
|
30844 |
|
30845 |
|
30846 | component: propTypes.elementType,
|
30847 |
|
30848 | |
30849 |
|
30850 |
|
30851 | defaultValue: propTypes.oneOfType([propTypes.number, propTypes.arrayOf(propTypes.number)]),
|
30852 |
|
30853 | |
30854 |
|
30855 |
|
30856 | disabled: propTypes.bool,
|
30857 |
|
30858 | |
30859 |
|
30860 |
|
30861 |
|
30862 |
|
30863 |
|
30864 | getAriaLabel: propTypes.func,
|
30865 |
|
30866 | |
30867 |
|
30868 |
|
30869 |
|
30870 |
|
30871 |
|
30872 |
|
30873 | getAriaValueText: propTypes.func,
|
30874 |
|
30875 | |
30876 |
|
30877 |
|
30878 |
|
30879 |
|
30880 | marks: propTypes.oneOfType([propTypes.bool, propTypes.array]),
|
30881 |
|
30882 | |
30883 |
|
30884 |
|
30885 |
|
30886 | max: propTypes.number,
|
30887 |
|
30888 | |
30889 |
|
30890 |
|
30891 |
|
30892 | min: propTypes.number,
|
30893 |
|
30894 | |
30895 |
|
30896 |
|
30897 | name: propTypes.string,
|
30898 |
|
30899 | |
30900 |
|
30901 |
|
30902 |
|
30903 |
|
30904 |
|
30905 | onChange: propTypes.func,
|
30906 |
|
30907 | |
30908 |
|
30909 |
|
30910 |
|
30911 |
|
30912 |
|
30913 | onChangeCommitted: propTypes.func,
|
30914 |
|
30915 | |
30916 |
|
30917 |
|
30918 | onMouseDown: propTypes.func,
|
30919 |
|
30920 | |
30921 |
|
30922 |
|
30923 | orientation: propTypes.oneOf(['horizontal', 'vertical']),
|
30924 |
|
30925 | |
30926 |
|
30927 |
|
30928 |
|
30929 |
|
30930 |
|
30931 |
|
30932 | step: propTypes.number,
|
30933 |
|
30934 | |
30935 |
|
30936 |
|
30937 | ThumbComponent: propTypes.elementType,
|
30938 |
|
30939 | |
30940 |
|
30941 |
|
30942 |
|
30943 |
|
30944 |
|
30945 |
|
30946 | track: propTypes.oneOf(['normal', false, 'inverted']),
|
30947 |
|
30948 | |
30949 |
|
30950 |
|
30951 |
|
30952 | value: propTypes.oneOfType([propTypes.number, propTypes.arrayOf(propTypes.number)]),
|
30953 |
|
30954 | |
30955 |
|
30956 |
|
30957 | ValueLabelComponent: propTypes.elementType,
|
30958 |
|
30959 | |
30960 |
|
30961 |
|
30962 |
|
30963 |
|
30964 |
|
30965 |
|
30966 | valueLabelDisplay: propTypes.oneOf(['on', 'auto', 'off']),
|
30967 |
|
30968 | |
30969 |
|
30970 |
|
30971 |
|
30972 |
|
30973 |
|
30974 |
|
30975 |
|
30976 | valueLabelFormat: propTypes.oneOfType([propTypes.string, propTypes.func])
|
30977 | } ;
|
30978 | var Slider$1 = withStyles$1(styles$1i, {
|
30979 | name: 'MuiSlider'
|
30980 | })(Slider);
|
30981 |
|
30982 | var styles$1j = function styles(theme) {
|
30983 | var emphasis = theme.palette.type === 'light' ? 0.8 : 0.98;
|
30984 | var backgroundColor = emphasize(theme.palette.background.default, emphasis);
|
30985 | return {
|
30986 |
|
30987 | root: _defineProperty({
|
30988 | color: theme.palette.getContrastText(backgroundColor),
|
30989 | backgroundColor: backgroundColor,
|
30990 | display: 'flex',
|
30991 | alignItems: 'center',
|
30992 | flexWrap: 'wrap',
|
30993 | padding: '6px 16px',
|
30994 | borderRadius: theme.shape.borderRadius,
|
30995 | flexGrow: 1
|
30996 | }, theme.breakpoints.up('sm'), {
|
30997 | flexGrow: 'initial',
|
30998 | minWidth: 288
|
30999 | }),
|
31000 |
|
31001 |
|
31002 | message: {
|
31003 | padding: '8px 0'
|
31004 | },
|
31005 |
|
31006 |
|
31007 | action: {
|
31008 | display: 'flex',
|
31009 | alignItems: 'center',
|
31010 | marginLeft: 'auto',
|
31011 | paddingLeft: 16,
|
31012 | marginRight: -8
|
31013 | }
|
31014 | };
|
31015 | };
|
31016 | var SnackbarContent = React__default.forwardRef(function SnackbarContent(props, ref) {
|
31017 | var action = props.action,
|
31018 | classes = props.classes,
|
31019 | className = props.className,
|
31020 | message = props.message,
|
31021 | _props$role = props.role,
|
31022 | role = _props$role === void 0 ? 'alert' : _props$role,
|
31023 | other = _objectWithoutProperties(props, ["action", "classes", "className", "message", "role"]);
|
31024 |
|
31025 | return React__default.createElement(Paper$1, _extends({
|
31026 | component: Typography$1,
|
31027 | variant: "body2",
|
31028 | variantMapping: {
|
31029 | body1: 'div',
|
31030 | body2: 'div'
|
31031 | },
|
31032 | role: role,
|
31033 | square: true,
|
31034 | elevation: 6,
|
31035 | className: clsx(classes.root, className),
|
31036 | ref: ref
|
31037 | }, other), React__default.createElement("div", {
|
31038 | className: classes.message
|
31039 | }, message), action ? React__default.createElement("div", {
|
31040 | className: classes.action
|
31041 | }, action) : null);
|
31042 | });
|
31043 | SnackbarContent.propTypes = {
|
31044 | |
31045 |
|
31046 |
|
31047 | action: propTypes.node,
|
31048 |
|
31049 | |
31050 |
|
31051 |
|
31052 |
|
31053 | classes: propTypes.object.isRequired,
|
31054 |
|
31055 | |
31056 |
|
31057 |
|
31058 | className: propTypes.string,
|
31059 |
|
31060 | |
31061 |
|
31062 |
|
31063 | message: propTypes.node,
|
31064 |
|
31065 | |
31066 |
|
31067 |
|
31068 |
|
31069 | role: propTypes.oneOf(['alert', 'alertdialog'])
|
31070 | } ;
|
31071 | var SnackbarContent$1 = withStyles$1(styles$1j, {
|
31072 | name: 'MuiSnackbarContent'
|
31073 | })(SnackbarContent);
|
31074 |
|
31075 | var styles$1k = function styles(theme) {
|
31076 | var top1 = {
|
31077 | top: 8
|
31078 | };
|
31079 | var bottom1 = {
|
31080 | bottom: 8
|
31081 | };
|
31082 | var right = {
|
31083 | justifyContent: 'flex-end'
|
31084 | };
|
31085 | var left = {
|
31086 | justifyContent: 'flex-start'
|
31087 | };
|
31088 | var top3 = {
|
31089 | top: 24
|
31090 | };
|
31091 | var bottom3 = {
|
31092 | bottom: 24
|
31093 | };
|
31094 | var right3 = {
|
31095 | right: 24
|
31096 | };
|
31097 | var left3 = {
|
31098 | left: 24
|
31099 | };
|
31100 | var center = {
|
31101 | left: '50%',
|
31102 | right: 'auto',
|
31103 | transform: 'translateX(-50%)'
|
31104 | };
|
31105 | return {
|
31106 |
|
31107 | root: {
|
31108 | zIndex: theme.zIndex.snackbar,
|
31109 | position: 'fixed',
|
31110 | display: 'flex',
|
31111 | left: 8,
|
31112 | right: 8,
|
31113 | justifyContent: 'center',
|
31114 | alignItems: 'center'
|
31115 | },
|
31116 |
|
31117 |
|
31118 | anchorOriginTopCenter: _extends({}, top1, _defineProperty({}, theme.breakpoints.up('sm'), _extends({}, top3, {}, center))),
|
31119 |
|
31120 |
|
31121 | anchorOriginBottomCenter: _extends({}, bottom1, _defineProperty({}, theme.breakpoints.up('sm'), _extends({}, bottom3, {}, center))),
|
31122 |
|
31123 |
|
31124 | anchorOriginTopRight: _extends({}, top1, {}, right, _defineProperty({}, theme.breakpoints.up('sm'), _extends({
|
31125 | left: 'auto'
|
31126 | }, top3, {}, right3))),
|
31127 |
|
31128 |
|
31129 | anchorOriginBottomRight: _extends({}, bottom1, {}, right, _defineProperty({}, theme.breakpoints.up('sm'), _extends({
|
31130 | left: 'auto'
|
31131 | }, bottom3, {}, right3))),
|
31132 |
|
31133 |
|
31134 | anchorOriginTopLeft: _extends({}, top1, {}, left, _defineProperty({}, theme.breakpoints.up('sm'), _extends({
|
31135 | right: 'auto'
|
31136 | }, top3, {}, left3))),
|
31137 |
|
31138 |
|
31139 | anchorOriginBottomLeft: _extends({}, bottom1, {}, left, _defineProperty({}, theme.breakpoints.up('sm'), _extends({
|
31140 | right: 'auto'
|
31141 | }, bottom3, {}, left3)))
|
31142 | };
|
31143 | };
|
31144 | var Snackbar = React__default.forwardRef(function Snackbar(props, ref) {
|
31145 | var action = props.action,
|
31146 | _props$anchorOrigin = props.anchorOrigin;
|
31147 | _props$anchorOrigin = _props$anchorOrigin === void 0 ? {
|
31148 | vertical: 'bottom',
|
31149 | horizontal: 'center'
|
31150 | } : _props$anchorOrigin;
|
31151 |
|
31152 | var vertical = _props$anchorOrigin.vertical,
|
31153 | horizontal = _props$anchorOrigin.horizontal,
|
31154 | autoHideDuration = props.autoHideDuration,
|
31155 | children = props.children,
|
31156 | classes = props.classes,
|
31157 | className = props.className,
|
31158 | ClickAwayListenerProps = props.ClickAwayListenerProps,
|
31159 | ContentProps = props.ContentProps,
|
31160 | _props$disableWindowB = props.disableWindowBlurListener,
|
31161 | disableWindowBlurListener = _props$disableWindowB === void 0 ? false : _props$disableWindowB,
|
31162 | message = props.message,
|
31163 | onClose = props.onClose,
|
31164 | onEnter = props.onEnter,
|
31165 | onEntered = props.onEntered,
|
31166 | onEntering = props.onEntering,
|
31167 | onExit = props.onExit,
|
31168 | onExited = props.onExited,
|
31169 | onExiting = props.onExiting,
|
31170 | onMouseEnter = props.onMouseEnter,
|
31171 | onMouseLeave = props.onMouseLeave,
|
31172 | open = props.open,
|
31173 | resumeHideDuration = props.resumeHideDuration,
|
31174 | _props$TransitionComp = props.TransitionComponent,
|
31175 | TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
|
31176 | _props$transitionDura = props.transitionDuration,
|
31177 | transitionDuration = _props$transitionDura === void 0 ? {
|
31178 | enter: duration.enteringScreen,
|
31179 | exit: duration.leavingScreen
|
31180 | } : _props$transitionDura,
|
31181 | TransitionProps = props.TransitionProps,
|
31182 | other = _objectWithoutProperties(props, ["action", "anchorOrigin", "autoHideDuration", "children", "classes", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onClose", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"]);
|
31183 |
|
31184 | var timerAutoHide = React__default.useRef();
|
31185 |
|
31186 | var _React$useState = React__default.useState(true),
|
31187 | exited = _React$useState[0],
|
31188 | setExited = _React$useState[1];
|
31189 |
|
31190 | var handleClose = useEventCallback(function () {
|
31191 | onClose.apply(void 0, arguments);
|
31192 | });
|
31193 | var setAutoHideTimer = useEventCallback(function (autoHideDurationParam) {
|
31194 | if (!handleClose || autoHideDurationParam == null) {
|
31195 | return;
|
31196 | }
|
31197 |
|
31198 | clearTimeout(timerAutoHide.current);
|
31199 | timerAutoHide.current = setTimeout(function () {
|
31200 | handleClose(null, 'timeout');
|
31201 | }, autoHideDurationParam);
|
31202 | });
|
31203 | React__default.useEffect(function () {
|
31204 | if (open) {
|
31205 | setAutoHideTimer(autoHideDuration);
|
31206 | }
|
31207 |
|
31208 | return function () {
|
31209 | clearTimeout(timerAutoHide.current);
|
31210 | };
|
31211 | }, [open, autoHideDuration, setAutoHideTimer]);
|
31212 |
|
31213 |
|
31214 | var handlePause = function handlePause() {
|
31215 | clearTimeout(timerAutoHide.current);
|
31216 | };
|
31217 |
|
31218 |
|
31219 |
|
31220 | var handleResume = React__default.useCallback(function () {
|
31221 | if (autoHideDuration != null) {
|
31222 | setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
|
31223 | }
|
31224 | }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
|
31225 |
|
31226 | var handleMouseEnter = function handleMouseEnter(event) {
|
31227 | if (onMouseEnter) {
|
31228 | onMouseEnter(event);
|
31229 | }
|
31230 |
|
31231 | handlePause();
|
31232 | };
|
31233 |
|
31234 | var handleMouseLeave = function handleMouseLeave(event) {
|
31235 | if (onMouseLeave) {
|
31236 | onMouseLeave(event);
|
31237 | }
|
31238 |
|
31239 | handleResume();
|
31240 | };
|
31241 |
|
31242 | var handleClickAway = function handleClickAway(event) {
|
31243 | if (onClose) {
|
31244 | onClose(event, 'clickaway');
|
31245 | }
|
31246 | };
|
31247 |
|
31248 | var handleExited = function handleExited() {
|
31249 | setExited(true);
|
31250 | };
|
31251 |
|
31252 | var handleEnter = function handleEnter() {
|
31253 | setExited(false);
|
31254 | };
|
31255 |
|
31256 | React__default.useEffect(function () {
|
31257 | if (!disableWindowBlurListener && open) {
|
31258 | window.addEventListener('focus', handleResume);
|
31259 | window.addEventListener('blur', handlePause);
|
31260 | return function () {
|
31261 | window.removeEventListener('focus', handleResume);
|
31262 | window.removeEventListener('blur', handlePause);
|
31263 | };
|
31264 | }
|
31265 |
|
31266 | return undefined;
|
31267 | }, [disableWindowBlurListener, handleResume, open]);
|
31268 |
|
31269 | if (!open && exited) {
|
31270 | return null;
|
31271 | }
|
31272 |
|
31273 | return React__default.createElement(ClickAwayListener, _extends({
|
31274 | onClickAway: handleClickAway
|
31275 | }, ClickAwayListenerProps), React__default.createElement("div", _extends({
|
31276 | className: clsx(classes.root, classes["anchorOrigin".concat(capitalize(vertical)).concat(capitalize(horizontal))], className),
|
31277 | onMouseEnter: handleMouseEnter,
|
31278 | onMouseLeave: handleMouseLeave,
|
31279 | ref: ref
|
31280 | }, other), React__default.createElement(TransitionComponent, _extends({
|
31281 | appear: true,
|
31282 | in: open,
|
31283 | onEnter: createChainedFunction(handleEnter, onEnter),
|
31284 | onEntered: onEntered,
|
31285 | onEntering: onEntering,
|
31286 | onExit: onExit,
|
31287 | onExited: createChainedFunction(handleExited, onExited),
|
31288 | onExiting: onExiting,
|
31289 | timeout: transitionDuration,
|
31290 | direction: vertical === 'top' ? 'down' : 'up'
|
31291 | }, TransitionProps), children || React__default.createElement(SnackbarContent$1, _extends({
|
31292 | message: message,
|
31293 | action: action
|
31294 | }, ContentProps)))));
|
31295 | });
|
31296 | Snackbar.propTypes = {
|
31297 | |
31298 |
|
31299 |
|
31300 | action: propTypes.node,
|
31301 |
|
31302 | |
31303 |
|
31304 |
|
31305 | anchorOrigin: propTypes.shape({
|
31306 | horizontal: propTypes.oneOf(['left', 'center', 'right']).isRequired,
|
31307 | vertical: propTypes.oneOf(['top', 'bottom']).isRequired
|
31308 | }),
|
31309 |
|
31310 | |
31311 |
|
31312 |
|
31313 |
|
31314 |
|
31315 |
|
31316 | autoHideDuration: propTypes.number,
|
31317 |
|
31318 | |
31319 |
|
31320 |
|
31321 | children: propTypes.element,
|
31322 |
|
31323 | |
31324 |
|
31325 |
|
31326 |
|
31327 | classes: propTypes.object.isRequired,
|
31328 |
|
31329 | |
31330 |
|
31331 |
|
31332 | className: propTypes.string,
|
31333 |
|
31334 | |
31335 |
|
31336 |
|
31337 | ClickAwayListenerProps: propTypes.object,
|
31338 |
|
31339 | |
31340 |
|
31341 |
|
31342 | ContentProps: propTypes.object,
|
31343 |
|
31344 | |
31345 |
|
31346 |
|
31347 | disableWindowBlurListener: propTypes.bool,
|
31348 |
|
31349 | |
31350 |
|
31351 |
|
31352 |
|
31353 |
|
31354 |
|
31355 | key: propTypes.any,
|
31356 |
|
31357 | |
31358 |
|
31359 |
|
31360 | message: propTypes.node,
|
31361 |
|
31362 | |
31363 |
|
31364 |
|
31365 |
|
31366 |
|
31367 |
|
31368 |
|
31369 |
|
31370 |
|
31371 |
|
31372 | onClose: propTypes.func,
|
31373 |
|
31374 | |
31375 |
|
31376 |
|
31377 | onEnter: propTypes.func,
|
31378 |
|
31379 | |
31380 |
|
31381 |
|
31382 | onEntered: propTypes.func,
|
31383 |
|
31384 | |
31385 |
|
31386 |
|
31387 | onEntering: propTypes.func,
|
31388 |
|
31389 | |
31390 |
|
31391 |
|
31392 | onExit: propTypes.func,
|
31393 |
|
31394 | |
31395 |
|
31396 |
|
31397 | onExited: propTypes.func,
|
31398 |
|
31399 | |
31400 |
|
31401 |
|
31402 | onExiting: propTypes.func,
|
31403 |
|
31404 | |
31405 |
|
31406 |
|
31407 | onMouseEnter: propTypes.func,
|
31408 |
|
31409 | |
31410 |
|
31411 |
|
31412 | onMouseLeave: propTypes.func,
|
31413 |
|
31414 | |
31415 |
|
31416 |
|
31417 | open: propTypes.bool,
|
31418 |
|
31419 | |
31420 |
|
31421 |
|
31422 |
|
31423 |
|
31424 |
|
31425 | resumeHideDuration: propTypes.number,
|
31426 |
|
31427 | |
31428 |
|
31429 |
|
31430 | TransitionComponent: propTypes.elementType,
|
31431 |
|
31432 | |
31433 |
|
31434 |
|
31435 |
|
31436 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
31437 | enter: propTypes.number,
|
31438 | exit: propTypes.number
|
31439 | })]),
|
31440 |
|
31441 | |
31442 |
|
31443 |
|
31444 | TransitionProps: propTypes.object
|
31445 | } ;
|
31446 | var Snackbar$1 = withStyles$1(styles$1k, {
|
31447 | flip: false,
|
31448 | name: 'MuiSnackbar'
|
31449 | })(Snackbar);
|
31450 |
|
31451 | var styles$1l = {
|
31452 |
|
31453 | root: {},
|
31454 |
|
31455 |
|
31456 | horizontal: {
|
31457 | paddingLeft: 8,
|
31458 | paddingRight: 8
|
31459 | },
|
31460 |
|
31461 |
|
31462 | vertical: {},
|
31463 |
|
31464 |
|
31465 | alternativeLabel: {
|
31466 | flex: 1,
|
31467 | position: 'relative'
|
31468 | },
|
31469 |
|
31470 |
|
31471 | completed: {}
|
31472 | };
|
31473 | var Step = React__default.forwardRef(function Step(props, ref) {
|
31474 | var _props$active = props.active,
|
31475 | active = _props$active === void 0 ? false : _props$active,
|
31476 | alternativeLabel = props.alternativeLabel,
|
31477 | children = props.children,
|
31478 | classes = props.classes,
|
31479 | className = props.className,
|
31480 | _props$completed = props.completed,
|
31481 | completed = _props$completed === void 0 ? false : _props$completed,
|
31482 | connector = props.connector,
|
31483 | _props$disabled = props.disabled,
|
31484 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
31485 | index = props.index,
|
31486 | last = props.last,
|
31487 | orientation = props.orientation,
|
31488 | other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "connector", "disabled", "index", "last", "orientation"]);
|
31489 |
|
31490 | return React__default.createElement("div", _extends({
|
31491 | className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel, completed && classes.completed),
|
31492 | ref: ref
|
31493 | }, other), connector && alternativeLabel && index !== 0 && React__default.cloneElement(connector, {
|
31494 | orientation: orientation,
|
31495 | alternativeLabel: alternativeLabel,
|
31496 | index: index,
|
31497 | active: active,
|
31498 | completed: completed,
|
31499 | disabled: disabled
|
31500 | }), React__default.Children.map(children, function (child) {
|
31501 | if (!React__default.isValidElement(child)) {
|
31502 | return null;
|
31503 | }
|
31504 |
|
31505 | {
|
31506 | if (reactIs_2(child)) {
|
31507 | console.error(["Material-UI: the Step component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
31508 | }
|
31509 | }
|
31510 |
|
31511 | return React__default.cloneElement(child, _extends({
|
31512 | active: active,
|
31513 | alternativeLabel: alternativeLabel,
|
31514 | completed: completed,
|
31515 | disabled: disabled,
|
31516 | last: last,
|
31517 | icon: index + 1,
|
31518 | orientation: orientation
|
31519 | }, child.props));
|
31520 | }));
|
31521 | });
|
31522 | Step.propTypes = {
|
31523 | |
31524 |
|
31525 |
|
31526 | active: propTypes.bool,
|
31527 |
|
31528 | |
31529 |
|
31530 |
|
31531 |
|
31532 | alternativeLabel: propTypes.bool,
|
31533 |
|
31534 | |
31535 |
|
31536 |
|
31537 | children: propTypes.node,
|
31538 |
|
31539 | |
31540 |
|
31541 |
|
31542 |
|
31543 | classes: propTypes.object.isRequired,
|
31544 |
|
31545 | |
31546 |
|
31547 |
|
31548 | className: propTypes.string,
|
31549 |
|
31550 | |
31551 |
|
31552 |
|
31553 | completed: propTypes.bool,
|
31554 |
|
31555 | |
31556 |
|
31557 |
|
31558 |
|
31559 | connector: propTypes.element,
|
31560 |
|
31561 | |
31562 |
|
31563 |
|
31564 |
|
31565 | disabled: propTypes.bool,
|
31566 |
|
31567 | |
31568 |
|
31569 |
|
31570 |
|
31571 | index: propTypes.number,
|
31572 |
|
31573 | |
31574 |
|
31575 |
|
31576 | last: propTypes.bool,
|
31577 |
|
31578 | |
31579 |
|
31580 |
|
31581 | orientation: propTypes.oneOf(['horizontal', 'vertical'])
|
31582 | } ;
|
31583 | var Step$1 = withStyles$1(styles$1l, {
|
31584 | name: 'MuiStep'
|
31585 | })(Step);
|
31586 |
|
31587 | |
31588 |
|
31589 |
|
31590 |
|
31591 | var CheckCircle = createSvgIcon(React__default.createElement("path", {
|
31592 | d: "M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"
|
31593 | }), 'CheckCircle');
|
31594 |
|
31595 | |
31596 |
|
31597 |
|
31598 |
|
31599 | var Warning = createSvgIcon(React__default.createElement("path", {
|
31600 | d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
|
31601 | }), 'Warning');
|
31602 |
|
31603 | var styles$1m = function styles(theme) {
|
31604 | return {
|
31605 |
|
31606 | root: {
|
31607 | display: 'block',
|
31608 | color: theme.palette.text.disabled,
|
31609 | '&$completed': {
|
31610 | color: theme.palette.primary.main
|
31611 | },
|
31612 | '&$active': {
|
31613 | color: theme.palette.primary.main
|
31614 | },
|
31615 | '&$error': {
|
31616 | color: theme.palette.error.main
|
31617 | }
|
31618 | },
|
31619 |
|
31620 |
|
31621 | text: {
|
31622 | fill: theme.palette.primary.contrastText,
|
31623 | fontSize: theme.typography.caption.fontSize,
|
31624 | fontFamily: theme.typography.fontFamily
|
31625 | },
|
31626 |
|
31627 |
|
31628 | active: {},
|
31629 |
|
31630 |
|
31631 | completed: {},
|
31632 |
|
31633 |
|
31634 | error: {}
|
31635 | };
|
31636 | };
|
31637 |
|
31638 | var _ref$1 = React__default.createElement("circle", {
|
31639 | cx: "12",
|
31640 | cy: "12",
|
31641 | r: "12"
|
31642 | });
|
31643 |
|
31644 | var StepIcon = React__default.forwardRef(function StepIcon(props, ref) {
|
31645 | var _props$completed = props.completed,
|
31646 | completed = _props$completed === void 0 ? false : _props$completed,
|
31647 | icon = props.icon,
|
31648 | _props$active = props.active,
|
31649 | active = _props$active === void 0 ? false : _props$active,
|
31650 | _props$error = props.error,
|
31651 | error = _props$error === void 0 ? false : _props$error,
|
31652 | classes = props.classes;
|
31653 |
|
31654 | if (typeof icon === 'number' || typeof icon === 'string') {
|
31655 | var className = clsx(classes.root, active && classes.active, error && classes.error, completed && classes.completed);
|
31656 |
|
31657 | if (error) {
|
31658 | return React__default.createElement(Warning, {
|
31659 | className: className,
|
31660 | ref: ref
|
31661 | });
|
31662 | }
|
31663 |
|
31664 | if (completed) {
|
31665 | return React__default.createElement(CheckCircle, {
|
31666 | className: className,
|
31667 | ref: ref
|
31668 | });
|
31669 | }
|
31670 |
|
31671 | return React__default.createElement(SvgIcon$1, {
|
31672 | className: className,
|
31673 | ref: ref
|
31674 | }, _ref$1, React__default.createElement("text", {
|
31675 | className: classes.text,
|
31676 | x: "12",
|
31677 | y: "16",
|
31678 | textAnchor: "middle"
|
31679 | }, icon));
|
31680 | }
|
31681 |
|
31682 | return icon;
|
31683 | });
|
31684 | StepIcon.propTypes = {
|
31685 | |
31686 |
|
31687 |
|
31688 | active: propTypes.bool,
|
31689 |
|
31690 | |
31691 |
|
31692 |
|
31693 |
|
31694 | classes: propTypes.object.isRequired,
|
31695 |
|
31696 | |
31697 |
|
31698 |
|
31699 | completed: propTypes.bool,
|
31700 |
|
31701 | |
31702 |
|
31703 |
|
31704 | error: propTypes.bool,
|
31705 |
|
31706 | |
31707 |
|
31708 |
|
31709 | icon: propTypes.node.isRequired
|
31710 | } ;
|
31711 | var StepIcon$1 = withStyles$1(styles$1m, {
|
31712 | name: 'MuiStepIcon'
|
31713 | })(StepIcon);
|
31714 |
|
31715 | var styles$1n = function styles(theme) {
|
31716 | return {
|
31717 |
|
31718 | root: {
|
31719 | display: 'flex',
|
31720 | alignItems: 'center',
|
31721 | '&$alternativeLabel': {
|
31722 | flexDirection: 'column'
|
31723 | },
|
31724 | '&$disabled': {
|
31725 | cursor: 'default'
|
31726 | }
|
31727 | },
|
31728 |
|
31729 |
|
31730 | horizontal: {},
|
31731 |
|
31732 |
|
31733 | vertical: {},
|
31734 |
|
31735 |
|
31736 | label: {
|
31737 | color: theme.palette.text.secondary,
|
31738 | '&$active': {
|
31739 | color: theme.palette.text.primary,
|
31740 | fontWeight: 500
|
31741 | },
|
31742 | '&$completed': {
|
31743 | color: theme.palette.text.primary,
|
31744 | fontWeight: 500
|
31745 | },
|
31746 | '&$alternativeLabel': {
|
31747 | textAlign: 'center',
|
31748 | marginTop: 16
|
31749 | },
|
31750 | '&$error': {
|
31751 | color: theme.palette.error.main
|
31752 | }
|
31753 | },
|
31754 |
|
31755 |
|
31756 | active: {},
|
31757 |
|
31758 |
|
31759 | completed: {},
|
31760 |
|
31761 |
|
31762 | error: {},
|
31763 |
|
31764 |
|
31765 | disabled: {},
|
31766 |
|
31767 |
|
31768 | iconContainer: {
|
31769 | flexShrink: 0,
|
31770 |
|
31771 | display: 'flex',
|
31772 | paddingRight: 8,
|
31773 | '&$alternativeLabel': {
|
31774 | paddingRight: 0
|
31775 | }
|
31776 | },
|
31777 |
|
31778 |
|
31779 | alternativeLabel: {},
|
31780 |
|
31781 |
|
31782 | labelContainer: {
|
31783 | width: '100%'
|
31784 | }
|
31785 | };
|
31786 | };
|
31787 | var StepLabel = React__default.forwardRef(function StepLabel(props, ref) {
|
31788 | var _props$active = props.active,
|
31789 | active = _props$active === void 0 ? false : _props$active,
|
31790 | _props$alternativeLab = props.alternativeLabel,
|
31791 | alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
|
31792 | children = props.children,
|
31793 | classes = props.classes,
|
31794 | className = props.className,
|
31795 | _props$completed = props.completed,
|
31796 | completed = _props$completed === void 0 ? false : _props$completed,
|
31797 | _props$disabled = props.disabled,
|
31798 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
31799 | _props$error = props.error,
|
31800 | error = _props$error === void 0 ? false : _props$error,
|
31801 | icon = props.icon,
|
31802 | last = props.last,
|
31803 | optional = props.optional,
|
31804 | _props$orientation = props.orientation,
|
31805 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
31806 | StepIconComponentProp = props.StepIconComponent,
|
31807 | StepIconProps = props.StepIconProps,
|
31808 | other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "disabled", "error", "icon", "last", "optional", "orientation", "StepIconComponent", "StepIconProps"]);
|
31809 |
|
31810 | var StepIconComponent = StepIconComponentProp;
|
31811 |
|
31812 | if (icon && !StepIconComponent) {
|
31813 | StepIconComponent = StepIcon$1;
|
31814 | }
|
31815 |
|
31816 | return React__default.createElement("span", _extends({
|
31817 | className: clsx(classes.root, classes[orientation], className, disabled && classes.disabled, alternativeLabel && classes.alternativeLabel, error && classes.error),
|
31818 | ref: ref
|
31819 | }, other), icon || StepIconComponent ? React__default.createElement("span", {
|
31820 | className: clsx(classes.iconContainer, alternativeLabel && classes.alternativeLabel)
|
31821 | }, React__default.createElement(StepIconComponent, _extends({
|
31822 | completed: completed,
|
31823 | active: active,
|
31824 | error: error,
|
31825 | icon: icon
|
31826 | }, StepIconProps))) : null, React__default.createElement("span", {
|
31827 | className: classes.labelContainer
|
31828 | }, React__default.createElement(Typography$1, {
|
31829 | variant: "body2",
|
31830 | component: "span",
|
31831 | className: clsx(classes.label, alternativeLabel && classes.alternativeLabel, completed && classes.completed, active && classes.active, error && classes.error),
|
31832 | display: "block"
|
31833 | }, children), optional));
|
31834 | });
|
31835 | StepLabel.propTypes = {
|
31836 | |
31837 |
|
31838 |
|
31839 |
|
31840 | active: propTypes.bool,
|
31841 |
|
31842 | |
31843 |
|
31844 |
|
31845 |
|
31846 | alternativeLabel: propTypes.bool,
|
31847 |
|
31848 | |
31849 |
|
31850 |
|
31851 | children: propTypes.node,
|
31852 |
|
31853 | |
31854 |
|
31855 |
|
31856 |
|
31857 | classes: propTypes.object.isRequired,
|
31858 |
|
31859 | |
31860 |
|
31861 |
|
31862 | className: propTypes.string,
|
31863 |
|
31864 | |
31865 |
|
31866 |
|
31867 |
|
31868 | completed: propTypes.bool,
|
31869 |
|
31870 | |
31871 |
|
31872 |
|
31873 |
|
31874 | disabled: propTypes.bool,
|
31875 |
|
31876 | |
31877 |
|
31878 |
|
31879 | error: propTypes.bool,
|
31880 |
|
31881 | |
31882 |
|
31883 |
|
31884 | icon: propTypes.node,
|
31885 |
|
31886 | |
31887 |
|
31888 |
|
31889 | last: propTypes.bool,
|
31890 |
|
31891 | |
31892 |
|
31893 |
|
31894 | optional: propTypes.node,
|
31895 |
|
31896 | |
31897 |
|
31898 |
|
31899 | orientation: propTypes.oneOf(['horizontal', 'vertical']),
|
31900 |
|
31901 | |
31902 |
|
31903 |
|
31904 | StepIconComponent: propTypes.elementType,
|
31905 |
|
31906 | |
31907 |
|
31908 |
|
31909 | StepIconProps: propTypes.object
|
31910 | } ;
|
31911 | StepLabel.muiName = 'StepLabel';
|
31912 | var StepLabel$1 = withStyles$1(styles$1n, {
|
31913 | name: 'MuiStepLabel'
|
31914 | })(StepLabel);
|
31915 |
|
31916 | var styles$1o = {
|
31917 |
|
31918 | root: {
|
31919 | width: '100%',
|
31920 | padding: '24px 16px',
|
31921 | margin: '-24px -16px',
|
31922 | boxSizing: 'content-box'
|
31923 | },
|
31924 |
|
31925 |
|
31926 | horizontal: {},
|
31927 |
|
31928 |
|
31929 | vertical: {
|
31930 | justifyContent: 'flex-start',
|
31931 | padding: '8px',
|
31932 | margin: '-8px'
|
31933 | },
|
31934 |
|
31935 |
|
31936 | touchRipple: {
|
31937 | color: 'rgba(0, 0, 0, 0.3)'
|
31938 | }
|
31939 | };
|
31940 | var StepButton = React__default.forwardRef(function StepButton(props, ref) {
|
31941 | var active = props.active,
|
31942 | alternativeLabel = props.alternativeLabel,
|
31943 | children = props.children,
|
31944 | classes = props.classes,
|
31945 | className = props.className,
|
31946 | completed = props.completed,
|
31947 | disabled = props.disabled,
|
31948 | icon = props.icon,
|
31949 | last = props.last,
|
31950 | optional = props.optional,
|
31951 | orientation = props.orientation,
|
31952 | other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "disabled", "icon", "last", "optional", "orientation"]);
|
31953 |
|
31954 | var childProps = {
|
31955 | active: active,
|
31956 | alternativeLabel: alternativeLabel,
|
31957 | completed: completed,
|
31958 | disabled: disabled,
|
31959 | icon: icon,
|
31960 | optional: optional,
|
31961 | orientation: orientation
|
31962 | };
|
31963 | var child = isMuiElement(children, ['StepLabel']) ? React__default.cloneElement(children, childProps) : React__default.createElement(StepLabel$1, childProps, children);
|
31964 | return React__default.createElement(ButtonBase$1, _extends({
|
31965 | disabled: disabled,
|
31966 | TouchRippleProps: {
|
31967 | className: classes.touchRipple
|
31968 | },
|
31969 | className: clsx(classes.root, classes[orientation], className),
|
31970 | ref: ref
|
31971 | }, other), child);
|
31972 | });
|
31973 | StepButton.propTypes = {
|
31974 | |
31975 |
|
31976 |
|
31977 |
|
31978 | active: propTypes.bool,
|
31979 |
|
31980 | |
31981 |
|
31982 |
|
31983 |
|
31984 | alternativeLabel: propTypes.bool,
|
31985 |
|
31986 | |
31987 |
|
31988 |
|
31989 | children: propTypes.node,
|
31990 |
|
31991 | |
31992 |
|
31993 |
|
31994 |
|
31995 | classes: propTypes.object.isRequired,
|
31996 |
|
31997 | |
31998 |
|
31999 |
|
32000 | className: propTypes.string,
|
32001 |
|
32002 | |
32003 |
|
32004 |
|
32005 |
|
32006 | completed: propTypes.bool,
|
32007 |
|
32008 | |
32009 |
|
32010 |
|
32011 |
|
32012 | disabled: propTypes.bool,
|
32013 |
|
32014 | |
32015 |
|
32016 |
|
32017 | icon: propTypes.node,
|
32018 |
|
32019 | |
32020 |
|
32021 |
|
32022 | last: propTypes.bool,
|
32023 |
|
32024 | |
32025 |
|
32026 |
|
32027 | optional: propTypes.node,
|
32028 |
|
32029 | |
32030 |
|
32031 |
|
32032 | orientation: propTypes.oneOf(['horizontal', 'vertical'])
|
32033 | } ;
|
32034 | var StepButton$1 = withStyles$1(styles$1o, {
|
32035 | name: 'MuiStepButton'
|
32036 | })(StepButton);
|
32037 |
|
32038 | var styles$1p = function styles(theme) {
|
32039 | return {
|
32040 |
|
32041 | root: {
|
32042 | flex: '1 1 auto'
|
32043 | },
|
32044 |
|
32045 |
|
32046 | horizontal: {},
|
32047 |
|
32048 |
|
32049 | vertical: {
|
32050 | marginLeft: 12,
|
32051 |
|
32052 | padding: '0 0 8px'
|
32053 | },
|
32054 |
|
32055 |
|
32056 | alternativeLabel: {
|
32057 | position: 'absolute',
|
32058 | top: 8 + 4,
|
32059 | left: 'calc(-50% + 20px)',
|
32060 | right: 'calc(50% + 20px)'
|
32061 | },
|
32062 |
|
32063 |
|
32064 | active: {},
|
32065 |
|
32066 |
|
32067 | completed: {},
|
32068 |
|
32069 |
|
32070 | disabled: {},
|
32071 |
|
32072 |
|
32073 | line: {
|
32074 | display: 'block',
|
32075 | borderColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
|
32076 | },
|
32077 |
|
32078 |
|
32079 | lineHorizontal: {
|
32080 | borderTopStyle: 'solid',
|
32081 | borderTopWidth: 1
|
32082 | },
|
32083 |
|
32084 |
|
32085 | lineVertical: {
|
32086 | borderLeftStyle: 'solid',
|
32087 | borderLeftWidth: 1,
|
32088 | minHeight: 24
|
32089 | }
|
32090 | };
|
32091 | };
|
32092 | var StepConnector = React__default.forwardRef(function StepConnector(props, ref) {
|
32093 | var active = props.active,
|
32094 | _props$alternativeLab = props.alternativeLabel,
|
32095 | alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
|
32096 | classes = props.classes,
|
32097 | className = props.className,
|
32098 | completed = props.completed,
|
32099 | disabled = props.disabled,
|
32100 | index = props.index,
|
32101 | _props$orientation = props.orientation,
|
32102 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
32103 | other = _objectWithoutProperties(props, ["active", "alternativeLabel", "classes", "className", "completed", "disabled", "index", "orientation"]);
|
32104 |
|
32105 | return React__default.createElement("div", _extends({
|
32106 | className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel, active && classes.active, completed && classes.completed, disabled && classes.disabled),
|
32107 | ref: ref
|
32108 | }, other), React__default.createElement("span", {
|
32109 | className: clsx(classes.line, orientation === 'vertical' ? classes.lineVertical : classes.lineHorizontal)
|
32110 | }));
|
32111 | });
|
32112 | StepConnector.propTypes = {
|
32113 | |
32114 |
|
32115 |
|
32116 | active: propTypes.bool,
|
32117 |
|
32118 | |
32119 |
|
32120 |
|
32121 |
|
32122 | alternativeLabel: propTypes.bool,
|
32123 |
|
32124 | |
32125 |
|
32126 |
|
32127 |
|
32128 | classes: propTypes.object.isRequired,
|
32129 |
|
32130 | |
32131 |
|
32132 |
|
32133 | className: propTypes.string,
|
32134 |
|
32135 | |
32136 |
|
32137 |
|
32138 | completed: propTypes.bool,
|
32139 |
|
32140 | |
32141 |
|
32142 |
|
32143 | disabled: propTypes.bool,
|
32144 |
|
32145 | |
32146 |
|
32147 |
|
32148 | index: propTypes.number,
|
32149 |
|
32150 | |
32151 |
|
32152 |
|
32153 | orientation: propTypes.oneOf(['horizontal', 'vertical'])
|
32154 | } ;
|
32155 | var StepConnector$1 = withStyles$1(styles$1p, {
|
32156 | name: 'MuiStepConnector'
|
32157 | })(StepConnector);
|
32158 |
|
32159 | var styles$1q = function styles(theme) {
|
32160 | return {
|
32161 |
|
32162 | root: {
|
32163 | marginTop: 8,
|
32164 | marginLeft: 12,
|
32165 |
|
32166 | paddingLeft: 8 + 12,
|
32167 |
|
32168 | paddingRight: 8,
|
32169 | borderLeft: "1px solid ".concat(theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600])
|
32170 | },
|
32171 |
|
32172 |
|
32173 | last: {
|
32174 | borderLeft: 'none'
|
32175 | },
|
32176 |
|
32177 |
|
32178 | transition: {}
|
32179 | };
|
32180 | };
|
32181 | var StepContent = React__default.forwardRef(function StepContent(props, ref) {
|
32182 | var active = props.active,
|
32183 | alternativeLabel = props.alternativeLabel,
|
32184 | children = props.children,
|
32185 | classes = props.classes,
|
32186 | className = props.className,
|
32187 | completed = props.completed,
|
32188 | last = props.last,
|
32189 | optional = props.optional,
|
32190 | orientation = props.orientation,
|
32191 | _props$TransitionComp = props.TransitionComponent,
|
32192 | TransitionComponent = _props$TransitionComp === void 0 ? Collapse$1 : _props$TransitionComp,
|
32193 | _props$transitionDura = props.transitionDuration,
|
32194 | transitionDurationProp = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
|
32195 | TransitionProps = props.TransitionProps,
|
32196 | other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "last", "optional", "orientation", "TransitionComponent", "transitionDuration", "TransitionProps"]);
|
32197 |
|
32198 | {
|
32199 | if (orientation !== 'vertical') {
|
32200 | console.error('Material-UI: <StepContent /> is only designed for use with the vertical stepper.');
|
32201 | }
|
32202 | }
|
32203 |
|
32204 | var transitionDuration = transitionDurationProp;
|
32205 |
|
32206 | if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
|
32207 | transitionDuration = undefined;
|
32208 | }
|
32209 |
|
32210 | return React__default.createElement("div", _extends({
|
32211 | className: clsx(classes.root, className, last && classes.last),
|
32212 | ref: ref
|
32213 | }, other), React__default.createElement(TransitionComponent, _extends({
|
32214 | in: active,
|
32215 | className: classes.transition,
|
32216 | timeout: transitionDuration,
|
32217 | unmountOnExit: true
|
32218 | }, TransitionProps), children));
|
32219 | });
|
32220 | StepContent.propTypes = {
|
32221 | |
32222 |
|
32223 |
|
32224 |
|
32225 | active: propTypes.bool,
|
32226 |
|
32227 | |
32228 |
|
32229 |
|
32230 |
|
32231 | alternativeLabel: propTypes.bool,
|
32232 |
|
32233 | |
32234 |
|
32235 |
|
32236 | children: propTypes.node,
|
32237 |
|
32238 | |
32239 |
|
32240 |
|
32241 |
|
32242 | classes: propTypes.object.isRequired,
|
32243 |
|
32244 | |
32245 |
|
32246 |
|
32247 | className: propTypes.string,
|
32248 |
|
32249 | |
32250 |
|
32251 |
|
32252 | completed: propTypes.bool,
|
32253 |
|
32254 | |
32255 |
|
32256 |
|
32257 | last: propTypes.bool,
|
32258 |
|
32259 | |
32260 |
|
32261 |
|
32262 |
|
32263 | optional: propTypes.bool,
|
32264 |
|
32265 | |
32266 |
|
32267 |
|
32268 | orientation: propTypes.oneOf(['horizontal', 'vertical']),
|
32269 |
|
32270 | |
32271 |
|
32272 |
|
32273 | TransitionComponent: propTypes.elementType,
|
32274 |
|
32275 | |
32276 |
|
32277 |
|
32278 |
|
32279 |
|
32280 |
|
32281 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
32282 | enter: propTypes.number,
|
32283 | exit: propTypes.number
|
32284 | }), propTypes.oneOf(['auto'])]),
|
32285 |
|
32286 | |
32287 |
|
32288 |
|
32289 | TransitionProps: propTypes.object
|
32290 | } ;
|
32291 | var StepContent$1 = withStyles$1(styles$1q, {
|
32292 | name: 'MuiStepContent'
|
32293 | })(StepContent);
|
32294 |
|
32295 | var styles$1r = {
|
32296 |
|
32297 | root: {
|
32298 | display: 'flex',
|
32299 | padding: 24
|
32300 | },
|
32301 |
|
32302 |
|
32303 | horizontal: {
|
32304 | flexDirection: 'row',
|
32305 | alignItems: 'center'
|
32306 | },
|
32307 |
|
32308 |
|
32309 | vertical: {
|
32310 | flexDirection: 'column'
|
32311 | },
|
32312 |
|
32313 |
|
32314 | alternativeLabel: {
|
32315 | alignItems: 'flex-start'
|
32316 | }
|
32317 | };
|
32318 | var defaultConnector = React__default.createElement(StepConnector$1, null);
|
32319 | var Stepper = React__default.forwardRef(function Stepper(props, ref) {
|
32320 | var _props$activeStep = props.activeStep,
|
32321 | activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
|
32322 | _props$alternativeLab = props.alternativeLabel,
|
32323 | alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
|
32324 | children = props.children,
|
32325 | classes = props.classes,
|
32326 | className = props.className,
|
32327 | _props$connector = props.connector,
|
32328 | connectorProp = _props$connector === void 0 ? defaultConnector : _props$connector,
|
32329 | _props$nonLinear = props.nonLinear,
|
32330 | nonLinear = _props$nonLinear === void 0 ? false : _props$nonLinear,
|
32331 | _props$orientation = props.orientation,
|
32332 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
32333 | other = _objectWithoutProperties(props, ["activeStep", "alternativeLabel", "children", "classes", "className", "connector", "nonLinear", "orientation"]);
|
32334 |
|
32335 | var connector = React__default.isValidElement(connectorProp) ? React__default.cloneElement(connectorProp, {
|
32336 | orientation: orientation
|
32337 | }) : null;
|
32338 | var childrenArray = React__default.Children.toArray(children);
|
32339 | var steps = childrenArray.map(function (step, index) {
|
32340 | var controlProps = {
|
32341 | alternativeLabel: alternativeLabel,
|
32342 | connector: connectorProp,
|
32343 | last: index + 1 === childrenArray.length,
|
32344 | orientation: orientation
|
32345 | };
|
32346 | var state = {
|
32347 | index: index,
|
32348 | active: false,
|
32349 | completed: false,
|
32350 | disabled: false
|
32351 | };
|
32352 |
|
32353 | if (activeStep === index) {
|
32354 | state.active = true;
|
32355 | } else if (!nonLinear && activeStep > index) {
|
32356 | state.completed = true;
|
32357 | } else if (!nonLinear && activeStep < index) {
|
32358 | state.disabled = true;
|
32359 | }
|
32360 |
|
32361 | return [!alternativeLabel && connector && index !== 0 && React__default.cloneElement(connector, _extends({
|
32362 | key: index
|
32363 | }, state)), React__default.cloneElement(step, _extends({}, controlProps, {}, state, {}, step.props))];
|
32364 | });
|
32365 | return React__default.createElement(Paper$1, _extends({
|
32366 | square: true,
|
32367 | elevation: 0,
|
32368 | className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel),
|
32369 | ref: ref
|
32370 | }, other), steps);
|
32371 | });
|
32372 | Stepper.propTypes = {
|
32373 | |
32374 |
|
32375 |
|
32376 | activeStep: propTypes.number,
|
32377 |
|
32378 | |
32379 |
|
32380 |
|
32381 |
|
32382 | alternativeLabel: propTypes.bool,
|
32383 |
|
32384 | |
32385 |
|
32386 |
|
32387 | children: propTypes.node.isRequired,
|
32388 |
|
32389 | |
32390 |
|
32391 |
|
32392 |
|
32393 | classes: propTypes.object.isRequired,
|
32394 |
|
32395 | |
32396 |
|
32397 |
|
32398 | className: propTypes.string,
|
32399 |
|
32400 | |
32401 |
|
32402 |
|
32403 | connector: propTypes.element,
|
32404 |
|
32405 | |
32406 |
|
32407 |
|
32408 | nonLinear: propTypes.bool,
|
32409 |
|
32410 | |
32411 |
|
32412 |
|
32413 | orientation: propTypes.oneOf(['horizontal', 'vertical'])
|
32414 | } ;
|
32415 | var Stepper$1 = withStyles$1(styles$1r, {
|
32416 | name: 'MuiStepper'
|
32417 | })(Stepper);
|
32418 |
|
32419 | var styles$1s = function styles(theme) {
|
32420 | return {
|
32421 |
|
32422 | root: {
|
32423 | position: 'fixed',
|
32424 | top: 0,
|
32425 | left: 0,
|
32426 | bottom: 0,
|
32427 | zIndex: theme.zIndex.drawer - 1
|
32428 | },
|
32429 | anchorLeft: {
|
32430 | right: 'auto'
|
32431 | },
|
32432 | anchorRight: {
|
32433 | left: 'auto',
|
32434 | right: 0
|
32435 | },
|
32436 | anchorTop: {
|
32437 | bottom: 'auto',
|
32438 | right: 0
|
32439 | },
|
32440 | anchorBottom: {
|
32441 | top: 'auto',
|
32442 | bottom: 0,
|
32443 | right: 0
|
32444 | }
|
32445 | };
|
32446 | };
|
32447 | |
32448 |
|
32449 |
|
32450 |
|
32451 | var SwipeArea = React__default.forwardRef(function SwipeArea(props, ref) {
|
32452 | var anchor = props.anchor,
|
32453 | classes = props.classes,
|
32454 | className = props.className,
|
32455 | width = props.width,
|
32456 | other = _objectWithoutProperties(props, ["anchor", "classes", "className", "width"]);
|
32457 |
|
32458 | return React__default.createElement("div", _extends({
|
32459 | className: clsx(classes.root, classes["anchor".concat(capitalize(anchor))], className),
|
32460 | ref: ref,
|
32461 | style: _defineProperty({}, isHorizontal(anchor) ? 'width' : 'height', width)
|
32462 | }, other));
|
32463 | });
|
32464 | SwipeArea.propTypes = {
|
32465 | |
32466 |
|
32467 |
|
32468 | anchor: propTypes.oneOf(['left', 'top', 'right', 'bottom']).isRequired,
|
32469 |
|
32470 | |
32471 |
|
32472 |
|
32473 | classes: propTypes.object.isRequired,
|
32474 |
|
32475 | |
32476 |
|
32477 |
|
32478 | className: propTypes.string,
|
32479 |
|
32480 | |
32481 |
|
32482 |
|
32483 |
|
32484 | width: propTypes.number.isRequired
|
32485 | } ;
|
32486 | var SwipeArea$1 = withStyles$1(styles$1s, {
|
32487 | name: 'PrivateSwipeArea'
|
32488 | })(SwipeArea);
|
32489 |
|
32490 |
|
32491 |
|
32492 | var UNCERTAINTY_THRESHOLD = 3;
|
32493 |
|
32494 |
|
32495 |
|
32496 |
|
32497 | var nodeThatClaimedTheSwipe = null;
|
32498 |
|
32499 | function calculateCurrentX(anchor, touches) {
|
32500 | return anchor === 'right' ? document.body.offsetWidth - touches[0].pageX : touches[0].pageX;
|
32501 | }
|
32502 |
|
32503 | function calculateCurrentY(anchor, touches) {
|
32504 | return anchor === 'bottom' ? window.innerHeight - touches[0].clientY : touches[0].clientY;
|
32505 | }
|
32506 |
|
32507 | function getMaxTranslate(horizontalSwipe, paperInstance) {
|
32508 | return horizontalSwipe ? paperInstance.clientWidth : paperInstance.clientHeight;
|
32509 | }
|
32510 |
|
32511 | function getTranslate(currentTranslate, startLocation, open, maxTranslate) {
|
32512 | return Math.min(Math.max(open ? startLocation - currentTranslate : maxTranslate + startLocation - currentTranslate, 0), maxTranslate);
|
32513 | }
|
32514 |
|
32515 | function getDomTreeShapes(element, rootNode) {
|
32516 |
|
32517 | var domTreeShapes = [];
|
32518 |
|
32519 | while (element && element !== rootNode) {
|
32520 | var style = window.getComputedStyle(element);
|
32521 |
|
32522 | if (
|
32523 | style.getPropertyValue('position') === 'absolute' ||
|
32524 | style.getPropertyValue('overflow-x') === 'hidden') {
|
32525 | domTreeShapes = [];
|
32526 | } else if (element.clientWidth > 0 && element.scrollWidth > element.clientWidth || element.clientHeight > 0 && element.scrollHeight > element.clientHeight) {
|
32527 |
|
32528 |
|
32529 | domTreeShapes.push(element);
|
32530 | }
|
32531 |
|
32532 | element = element.parentElement;
|
32533 | }
|
32534 |
|
32535 | return domTreeShapes;
|
32536 | }
|
32537 |
|
32538 | function findNativeHandler(_ref) {
|
32539 | var domTreeShapes = _ref.domTreeShapes,
|
32540 | start = _ref.start,
|
32541 | current = _ref.current,
|
32542 | anchor = _ref.anchor;
|
32543 |
|
32544 | var axisProperties = {
|
32545 | scrollPosition: {
|
32546 | x: 'scrollLeft',
|
32547 | y: 'scrollTop'
|
32548 | },
|
32549 | scrollLength: {
|
32550 | x: 'scrollWidth',
|
32551 | y: 'scrollHeight'
|
32552 | },
|
32553 | clientLength: {
|
32554 | x: 'clientWidth',
|
32555 | y: 'clientHeight'
|
32556 | }
|
32557 | };
|
32558 | return domTreeShapes.some(function (shape) {
|
32559 |
|
32560 | var goingForward = current >= start;
|
32561 |
|
32562 | if (anchor === 'top' || anchor === 'left') {
|
32563 | goingForward = !goingForward;
|
32564 | }
|
32565 |
|
32566 | var axis = anchor === 'left' || anchor === 'right' ? 'x' : 'y';
|
32567 | var scrollPosition = shape[axisProperties.scrollPosition[axis]];
|
32568 | var areNotAtStart = scrollPosition > 0;
|
32569 | var areNotAtEnd = scrollPosition + shape[axisProperties.clientLength[axis]] < shape[axisProperties.scrollLength[axis]];
|
32570 |
|
32571 | if (goingForward && areNotAtEnd || !goingForward && areNotAtStart) {
|
32572 | return shape;
|
32573 | }
|
32574 |
|
32575 | return null;
|
32576 | });
|
32577 | }
|
32578 |
|
32579 | var disableSwipeToOpenDefault = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
|
32580 | var transitionDurationDefault = {
|
32581 | enter: duration.enteringScreen,
|
32582 | exit: duration.leavingScreen
|
32583 | };
|
32584 | var useEnhancedEffect$a = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
|
32585 | var SwipeableDrawer = React__default.forwardRef(function SwipeableDrawer(props, ref) {
|
32586 | var _props$anchor = props.anchor,
|
32587 | anchor = _props$anchor === void 0 ? 'left' : _props$anchor,
|
32588 | _props$disableBackdro = props.disableBackdropTransition,
|
32589 | disableBackdropTransition = _props$disableBackdro === void 0 ? false : _props$disableBackdro,
|
32590 | _props$disableDiscove = props.disableDiscovery,
|
32591 | disableDiscovery = _props$disableDiscove === void 0 ? false : _props$disableDiscove,
|
32592 | _props$disableSwipeTo = props.disableSwipeToOpen,
|
32593 | disableSwipeToOpen = _props$disableSwipeTo === void 0 ? disableSwipeToOpenDefault : _props$disableSwipeTo,
|
32594 | hideBackdrop = props.hideBackdrop,
|
32595 | _props$hysteresis = props.hysteresis,
|
32596 | hysteresis = _props$hysteresis === void 0 ? 0.52 : _props$hysteresis,
|
32597 | _props$minFlingVeloci = props.minFlingVelocity,
|
32598 | minFlingVelocity = _props$minFlingVeloci === void 0 ? 450 : _props$minFlingVeloci,
|
32599 | _props$ModalProps = props.ModalProps;
|
32600 | _props$ModalProps = _props$ModalProps === void 0 ? {} : _props$ModalProps;
|
32601 |
|
32602 | var BackdropProps = _props$ModalProps.BackdropProps,
|
32603 | ModalPropsProp = _objectWithoutProperties(_props$ModalProps, ["BackdropProps"]),
|
32604 | onClose = props.onClose,
|
32605 | onOpen = props.onOpen,
|
32606 | open = props.open,
|
32607 | _props$PaperProps = props.PaperProps,
|
32608 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
32609 | SwipeAreaProps = props.SwipeAreaProps,
|
32610 | _props$swipeAreaWidth = props.swipeAreaWidth,
|
32611 | swipeAreaWidth = _props$swipeAreaWidth === void 0 ? 20 : _props$swipeAreaWidth,
|
32612 | _props$transitionDura = props.transitionDuration,
|
32613 | transitionDuration = _props$transitionDura === void 0 ? transitionDurationDefault : _props$transitionDura,
|
32614 | _props$variant = props.variant,
|
32615 | variant = _props$variant === void 0 ? 'temporary' : _props$variant,
|
32616 | other = _objectWithoutProperties(props, ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"]);
|
32617 |
|
32618 | var theme = useTheme$1();
|
32619 |
|
32620 | var _React$useState = React__default.useState(false),
|
32621 | maybeSwiping = _React$useState[0],
|
32622 | setMaybeSwiping = _React$useState[1];
|
32623 |
|
32624 | var swipeInstance = React__default.useRef({
|
32625 | isSwiping: null
|
32626 | });
|
32627 | var swipeAreaRef = React__default.useRef();
|
32628 | var backdropRef = React__default.useRef();
|
32629 | var paperRef = React__default.useRef();
|
32630 | var touchDetected = React__default.useRef(false);
|
32631 |
|
32632 | var calculatedDurationRef = React__default.useRef();
|
32633 |
|
32634 | useEnhancedEffect$a(function () {
|
32635 | calculatedDurationRef.current = null;
|
32636 | }, [open]);
|
32637 | var setPosition = React__default.useCallback(function (translate) {
|
32638 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
32639 | var _options$mode = options.mode,
|
32640 | mode = _options$mode === void 0 ? null : _options$mode,
|
32641 | _options$changeTransi = options.changeTransition,
|
32642 | changeTransition = _options$changeTransi === void 0 ? true : _options$changeTransi;
|
32643 | var anchorRtl = getAnchor(theme, anchor);
|
32644 | var rtlTranslateMultiplier = ['right', 'bottom'].indexOf(anchorRtl) !== -1 ? 1 : -1;
|
32645 | var horizontalSwipe = isHorizontal(anchor);
|
32646 | var transform = horizontalSwipe ? "translate(".concat(rtlTranslateMultiplier * translate, "px, 0)") : "translate(0, ".concat(rtlTranslateMultiplier * translate, "px)");
|
32647 | var drawerStyle = paperRef.current.style;
|
32648 | drawerStyle.webkitTransform = transform;
|
32649 | drawerStyle.transform = transform;
|
32650 | var transition = '';
|
32651 |
|
32652 | if (mode) {
|
32653 | transition = theme.transitions.create('all', getTransitionProps({
|
32654 | timeout: transitionDuration
|
32655 | }, {
|
32656 | mode: mode
|
32657 | }));
|
32658 | }
|
32659 |
|
32660 | if (changeTransition) {
|
32661 | drawerStyle.webkitTransition = transition;
|
32662 | drawerStyle.transition = transition;
|
32663 | }
|
32664 |
|
32665 | if (!disableBackdropTransition && !hideBackdrop) {
|
32666 | var backdropStyle = backdropRef.current.style;
|
32667 | backdropStyle.opacity = 1 - translate / getMaxTranslate(horizontalSwipe, paperRef.current);
|
32668 |
|
32669 | if (changeTransition) {
|
32670 | backdropStyle.webkitTransition = transition;
|
32671 | backdropStyle.transition = transition;
|
32672 | }
|
32673 | }
|
32674 | }, [anchor, disableBackdropTransition, hideBackdrop, theme, transitionDuration]);
|
32675 | var handleBodyTouchEnd = useEventCallback(function (event) {
|
32676 | if (!touchDetected.current) {
|
32677 | return;
|
32678 | }
|
32679 |
|
32680 | nodeThatClaimedTheSwipe = null;
|
32681 | touchDetected.current = false;
|
32682 | setMaybeSwiping(false);
|
32683 |
|
32684 | if (!swipeInstance.current.isSwiping) {
|
32685 | swipeInstance.current.isSwiping = null;
|
32686 | return;
|
32687 | }
|
32688 |
|
32689 | swipeInstance.current.isSwiping = null;
|
32690 | var anchorRtl = getAnchor(theme, anchor);
|
32691 | var horizontal = isHorizontal(anchor);
|
32692 | var current;
|
32693 |
|
32694 | if (horizontal) {
|
32695 | current = calculateCurrentX(anchorRtl, event.changedTouches);
|
32696 | } else {
|
32697 | current = calculateCurrentY(anchorRtl, event.changedTouches);
|
32698 | }
|
32699 |
|
32700 | var startLocation = horizontal ? swipeInstance.current.startX : swipeInstance.current.startY;
|
32701 | var maxTranslate = getMaxTranslate(horizontal, paperRef.current);
|
32702 | var currentTranslate = getTranslate(current, startLocation, open, maxTranslate);
|
32703 | var translateRatio = currentTranslate / maxTranslate;
|
32704 |
|
32705 | if (Math.abs(swipeInstance.current.velocity) > minFlingVelocity) {
|
32706 |
|
32707 | calculatedDurationRef.current = Math.abs((maxTranslate - currentTranslate) / swipeInstance.current.velocity) * 1000;
|
32708 | }
|
32709 |
|
32710 | if (open) {
|
32711 | if (swipeInstance.current.velocity > minFlingVelocity || translateRatio > hysteresis) {
|
32712 | onClose();
|
32713 | } else {
|
32714 |
|
32715 | setPosition(0, {
|
32716 | mode: 'exit'
|
32717 | });
|
32718 | }
|
32719 |
|
32720 | return;
|
32721 | }
|
32722 |
|
32723 | if (swipeInstance.current.velocity < -minFlingVelocity || 1 - translateRatio > hysteresis) {
|
32724 | onOpen();
|
32725 | } else {
|
32726 |
|
32727 | setPosition(getMaxTranslate(horizontal, paperRef.current), {
|
32728 | mode: 'enter'
|
32729 | });
|
32730 | }
|
32731 | });
|
32732 | var handleBodyTouchMove = useEventCallback(function (event) {
|
32733 |
|
32734 | if (!paperRef.current || !touchDetected.current) {
|
32735 | return;
|
32736 | }
|
32737 |
|
32738 |
|
32739 | if (nodeThatClaimedTheSwipe != null && nodeThatClaimedTheSwipe !== swipeInstance.current) {
|
32740 | return;
|
32741 | }
|
32742 |
|
32743 | var anchorRtl = getAnchor(theme, anchor);
|
32744 | var horizontalSwipe = isHorizontal(anchor);
|
32745 | var currentX = calculateCurrentX(anchorRtl, event.touches);
|
32746 | var currentY = calculateCurrentY(anchorRtl, event.touches);
|
32747 |
|
32748 | if (open && paperRef.current.contains(event.target) && nodeThatClaimedTheSwipe == null) {
|
32749 | var domTreeShapes = getDomTreeShapes(event.target, paperRef.current);
|
32750 | var nativeHandler = findNativeHandler({
|
32751 | domTreeShapes: domTreeShapes,
|
32752 | start: horizontalSwipe ? swipeInstance.current.startX : swipeInstance.current.startY,
|
32753 | current: horizontalSwipe ? currentX : currentY,
|
32754 | anchor: anchor
|
32755 | });
|
32756 |
|
32757 | if (nativeHandler) {
|
32758 | nodeThatClaimedTheSwipe = nativeHandler;
|
32759 | return;
|
32760 | }
|
32761 |
|
32762 | nodeThatClaimedTheSwipe = swipeInstance.current;
|
32763 | }
|
32764 |
|
32765 |
|
32766 | if (swipeInstance.current.isSwiping == null) {
|
32767 | var dx = Math.abs(currentX - swipeInstance.current.startX);
|
32768 | var dy = Math.abs(currentY - swipeInstance.current.startY);
|
32769 |
|
32770 | if (dx > dy) {
|
32771 | if (event.cancelable) {
|
32772 | event.preventDefault();
|
32773 | }
|
32774 | }
|
32775 |
|
32776 | var definitelySwiping = horizontalSwipe ? dx > dy && dx > UNCERTAINTY_THRESHOLD : dy > dx && dy > UNCERTAINTY_THRESHOLD;
|
32777 |
|
32778 | if (definitelySwiping === true || (horizontalSwipe ? dy > UNCERTAINTY_THRESHOLD : dx > UNCERTAINTY_THRESHOLD)) {
|
32779 | swipeInstance.current.isSwiping = definitelySwiping;
|
32780 |
|
32781 | if (!definitelySwiping) {
|
32782 | handleBodyTouchEnd(event);
|
32783 | return;
|
32784 | }
|
32785 |
|
32786 |
|
32787 | swipeInstance.current.startX = currentX;
|
32788 | swipeInstance.current.startY = currentY;
|
32789 |
|
32790 | if (!disableDiscovery && !open) {
|
32791 | if (horizontalSwipe) {
|
32792 | swipeInstance.current.startX -= swipeAreaWidth;
|
32793 | } else {
|
32794 | swipeInstance.current.startY -= swipeAreaWidth;
|
32795 | }
|
32796 | }
|
32797 | }
|
32798 | }
|
32799 |
|
32800 | if (!swipeInstance.current.isSwiping) {
|
32801 | return;
|
32802 | }
|
32803 |
|
32804 | var maxTranslate = getMaxTranslate(horizontalSwipe, paperRef.current);
|
32805 | var startLocation = horizontalSwipe ? swipeInstance.current.startX : swipeInstance.current.startY;
|
32806 |
|
32807 | if (open && !swipeInstance.current.paperHit) {
|
32808 | startLocation = Math.min(startLocation, maxTranslate);
|
32809 | }
|
32810 |
|
32811 | var translate = getTranslate(horizontalSwipe ? currentX : currentY, startLocation, open, maxTranslate);
|
32812 |
|
32813 | if (open) {
|
32814 | if (!swipeInstance.current.paperHit) {
|
32815 | var paperHit = horizontalSwipe ? currentX < maxTranslate : currentY < maxTranslate;
|
32816 |
|
32817 | if (paperHit) {
|
32818 | swipeInstance.current.paperHit = true;
|
32819 | swipeInstance.current.startX = currentX;
|
32820 | swipeInstance.current.startY = currentY;
|
32821 | } else {
|
32822 | return;
|
32823 | }
|
32824 | } else if (translate === 0) {
|
32825 | swipeInstance.current.startX = currentX;
|
32826 | swipeInstance.current.startY = currentY;
|
32827 | }
|
32828 | }
|
32829 |
|
32830 | if (swipeInstance.current.lastTranslate === null) {
|
32831 | swipeInstance.current.lastTranslate = translate;
|
32832 | swipeInstance.current.lastTime = performance.now() + 1;
|
32833 | }
|
32834 |
|
32835 | var velocity = (translate - swipeInstance.current.lastTranslate) / (performance.now() - swipeInstance.current.lastTime) * 1e3;
|
32836 |
|
32837 | swipeInstance.current.velocity = swipeInstance.current.velocity * 0.4 + velocity * 0.6;
|
32838 | swipeInstance.current.lastTranslate = translate;
|
32839 | swipeInstance.current.lastTime = performance.now();
|
32840 |
|
32841 | if (event.cancelable) {
|
32842 | event.preventDefault();
|
32843 | }
|
32844 |
|
32845 | setPosition(translate);
|
32846 | });
|
32847 | var handleBodyTouchStart = useEventCallback(function (event) {
|
32848 |
|
32849 |
|
32850 | if (event.defaultPrevented) {
|
32851 | return;
|
32852 | }
|
32853 |
|
32854 |
|
32855 | if (event.muiHandled) {
|
32856 | return;
|
32857 | }
|
32858 |
|
32859 |
|
32860 | if (open && !backdropRef.current.contains(event.target) && !paperRef.current.contains(event.target)) {
|
32861 | return;
|
32862 | }
|
32863 |
|
32864 | var anchorRtl = getAnchor(theme, anchor);
|
32865 | var horizontalSwipe = isHorizontal(anchor);
|
32866 | var currentX = calculateCurrentX(anchorRtl, event.touches);
|
32867 | var currentY = calculateCurrentY(anchorRtl, event.touches);
|
32868 |
|
32869 | if (!open) {
|
32870 | if (disableSwipeToOpen || event.target !== swipeAreaRef.current) {
|
32871 | return;
|
32872 | }
|
32873 |
|
32874 | if (horizontalSwipe) {
|
32875 | if (currentX > swipeAreaWidth) {
|
32876 | return;
|
32877 | }
|
32878 | } else if (currentY > swipeAreaWidth) {
|
32879 | return;
|
32880 | }
|
32881 | }
|
32882 |
|
32883 | event.muiHandled = true;
|
32884 | nodeThatClaimedTheSwipe = null;
|
32885 | swipeInstance.current.startX = currentX;
|
32886 | swipeInstance.current.startY = currentY;
|
32887 | setMaybeSwiping(true);
|
32888 |
|
32889 | if (!open && paperRef.current) {
|
32890 |
|
32891 | setPosition(getMaxTranslate(horizontalSwipe, paperRef.current) + (disableDiscovery ? 20 : -swipeAreaWidth), {
|
32892 | changeTransition: false
|
32893 | });
|
32894 | }
|
32895 |
|
32896 | swipeInstance.current.velocity = 0;
|
32897 | swipeInstance.current.lastTime = null;
|
32898 | swipeInstance.current.lastTranslate = null;
|
32899 | swipeInstance.current.paperHit = false;
|
32900 | touchDetected.current = true;
|
32901 | });
|
32902 | React__default.useEffect(function () {
|
32903 | if (variant === 'temporary') {
|
32904 | document.body.addEventListener('touchstart', handleBodyTouchStart);
|
32905 | document.body.addEventListener('touchmove', handleBodyTouchMove, {
|
32906 | passive: false
|
32907 | });
|
32908 | document.body.addEventListener('touchend', handleBodyTouchEnd);
|
32909 | return function () {
|
32910 | document.body.removeEventListener('touchstart', handleBodyTouchStart);
|
32911 | document.body.removeEventListener('touchmove', handleBodyTouchMove, {
|
32912 | passive: false
|
32913 | });
|
32914 | document.body.removeEventListener('touchend', handleBodyTouchEnd);
|
32915 | };
|
32916 | }
|
32917 |
|
32918 | return undefined;
|
32919 | }, [variant, handleBodyTouchStart, handleBodyTouchMove, handleBodyTouchEnd]);
|
32920 | React__default.useEffect(function () {
|
32921 | return function () {
|
32922 |
|
32923 | if (nodeThatClaimedTheSwipe === swipeInstance.current) {
|
32924 | nodeThatClaimedTheSwipe = null;
|
32925 | }
|
32926 | };
|
32927 | }, []);
|
32928 | React__default.useEffect(function () {
|
32929 | if (!open) {
|
32930 | setMaybeSwiping(false);
|
32931 | }
|
32932 | }, [open]);
|
32933 | var handleBackdropRef = React__default.useCallback(function (instance) {
|
32934 |
|
32935 | backdropRef.current = ReactDOM.findDOMNode(instance);
|
32936 | }, []);
|
32937 | var handlePaperRef = React__default.useCallback(function (instance) {
|
32938 |
|
32939 | paperRef.current = ReactDOM.findDOMNode(instance);
|
32940 | }, []);
|
32941 | return React__default.createElement(React__default.Fragment, null, React__default.createElement(Drawer$1, _extends({
|
32942 | open: variant === 'temporary' && maybeSwiping ? true : open,
|
32943 | variant: variant,
|
32944 | ModalProps: _extends({
|
32945 | BackdropProps: _extends({}, BackdropProps, {
|
32946 | ref: handleBackdropRef
|
32947 | })
|
32948 | }, ModalPropsProp),
|
32949 | PaperProps: _extends({}, PaperProps, {
|
32950 | style: _extends({
|
32951 | pointerEvents: variant === 'temporary' && !open ? 'none' : ''
|
32952 | }, PaperProps.style),
|
32953 | ref: handlePaperRef
|
32954 | }),
|
32955 | anchor: anchor,
|
32956 | transitionDuration: calculatedDurationRef.current || transitionDuration,
|
32957 | onClose: onClose,
|
32958 | ref: ref
|
32959 | }, other)), !disableSwipeToOpen && variant === 'temporary' && React__default.createElement(NoSsr, null, React__default.createElement(SwipeArea$1, _extends({
|
32960 | anchor: anchor,
|
32961 | ref: swipeAreaRef,
|
32962 | width: swipeAreaWidth
|
32963 | }, SwipeAreaProps))));
|
32964 | });
|
32965 | SwipeableDrawer.propTypes = {
|
32966 | |
32967 |
|
32968 |
|
32969 | anchor: propTypes.oneOf(['left', 'top', 'right', 'bottom']),
|
32970 |
|
32971 | |
32972 |
|
32973 |
|
32974 | children: propTypes.node,
|
32975 |
|
32976 | |
32977 |
|
32978 |
|
32979 |
|
32980 | disableBackdropTransition: propTypes.bool,
|
32981 |
|
32982 | |
32983 |
|
32984 |
|
32985 |
|
32986 | disableDiscovery: propTypes.bool,
|
32987 |
|
32988 | |
32989 |
|
32990 |
|
32991 |
|
32992 | disableSwipeToOpen: propTypes.bool,
|
32993 |
|
32994 | |
32995 |
|
32996 |
|
32997 | hideBackdrop: propTypes.bool,
|
32998 |
|
32999 | |
33000 |
|
33001 |
|
33002 |
|
33003 | hysteresis: propTypes.number,
|
33004 |
|
33005 | |
33006 |
|
33007 |
|
33008 |
|
33009 |
|
33010 | minFlingVelocity: propTypes.number,
|
33011 |
|
33012 | |
33013 |
|
33014 |
|
33015 | ModalProps: propTypes.shape({
|
33016 | BackdropProps: propTypes.shape({
|
33017 | component: elementTypeAcceptingRef$1
|
33018 | })
|
33019 | }),
|
33020 |
|
33021 | |
33022 |
|
33023 |
|
33024 |
|
33025 |
|
33026 | onClose: propTypes.func.isRequired,
|
33027 |
|
33028 | |
33029 |
|
33030 |
|
33031 |
|
33032 |
|
33033 | onOpen: propTypes.func.isRequired,
|
33034 |
|
33035 | |
33036 |
|
33037 |
|
33038 | open: propTypes.bool.isRequired,
|
33039 |
|
33040 | |
33041 |
|
33042 |
|
33043 | PaperProps: propTypes.shape({
|
33044 | component: elementTypeAcceptingRef$1,
|
33045 | style: propTypes.object
|
33046 | }),
|
33047 |
|
33048 | |
33049 |
|
33050 |
|
33051 | SwipeAreaProps: propTypes.object,
|
33052 |
|
33053 | |
33054 |
|
33055 |
|
33056 |
|
33057 | swipeAreaWidth: propTypes.number,
|
33058 |
|
33059 | |
33060 |
|
33061 |
|
33062 |
|
33063 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
33064 | enter: propTypes.number,
|
33065 | exit: propTypes.number
|
33066 | })]),
|
33067 |
|
33068 | |
33069 |
|
33070 |
|
33071 | variant: propTypes.oneOf(['permanent', 'persistent', 'temporary'])
|
33072 | } ;
|
33073 |
|
33074 | var styles$1t = function styles(theme) {
|
33075 | return {
|
33076 |
|
33077 | root: {
|
33078 | display: 'inline-flex',
|
33079 | width: 34 + 12 * 2,
|
33080 | height: 14 + 12 * 2,
|
33081 | overflow: 'hidden',
|
33082 | padding: 12,
|
33083 | boxSizing: 'border-box',
|
33084 | position: 'relative',
|
33085 | flexShrink: 0,
|
33086 | zIndex: 0,
|
33087 |
|
33088 | verticalAlign: 'middle'
|
33089 |
|
33090 | },
|
33091 |
|
33092 |
|
33093 | edgeStart: {
|
33094 | marginLeft: -8
|
33095 | },
|
33096 |
|
33097 |
|
33098 | edgeEnd: {
|
33099 | marginRight: -8
|
33100 | },
|
33101 |
|
33102 |
|
33103 | switchBase: {
|
33104 | position: 'absolute',
|
33105 | top: 0,
|
33106 | left: 0,
|
33107 | zIndex: 1,
|
33108 |
|
33109 | color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
|
33110 | transition: theme.transitions.create(['left', 'transform'], {
|
33111 | duration: theme.transitions.duration.shortest
|
33112 | }),
|
33113 | '&$checked': {
|
33114 | transform: 'translateX(20px)'
|
33115 | },
|
33116 | '&$disabled': {
|
33117 | color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
|
33118 | },
|
33119 | '&$checked + $track': {
|
33120 | opacity: 0.5
|
33121 | },
|
33122 | '&$disabled + $track': {
|
33123 | opacity: theme.palette.type === 'light' ? 0.12 : 0.1
|
33124 | }
|
33125 | },
|
33126 |
|
33127 |
|
33128 | colorPrimary: {
|
33129 | '&$checked': {
|
33130 | color: theme.palette.primary.main,
|
33131 | '&:hover': {
|
33132 | backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
33133 | '@media (hover: none)': {
|
33134 | backgroundColor: 'transparent'
|
33135 | }
|
33136 | }
|
33137 | },
|
33138 | '&$disabled': {
|
33139 | color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
|
33140 | },
|
33141 | '&$checked + $track': {
|
33142 | backgroundColor: theme.palette.primary.main
|
33143 | },
|
33144 | '&$disabled + $track': {
|
33145 | backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
|
33146 | }
|
33147 | },
|
33148 |
|
33149 |
|
33150 | colorSecondary: {
|
33151 | '&$checked': {
|
33152 | color: theme.palette.secondary.main,
|
33153 | '&:hover': {
|
33154 | backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
33155 | '@media (hover: none)': {
|
33156 | backgroundColor: 'transparent'
|
33157 | }
|
33158 | }
|
33159 | },
|
33160 | '&$disabled': {
|
33161 | color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
|
33162 | },
|
33163 | '&$checked + $track': {
|
33164 | backgroundColor: theme.palette.secondary.main
|
33165 | },
|
33166 | '&$disabled + $track': {
|
33167 | backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
|
33168 | }
|
33169 | },
|
33170 |
|
33171 |
|
33172 | sizeSmall: {
|
33173 | width: 40,
|
33174 | height: 24,
|
33175 | padding: 7,
|
33176 | '& $thumb': {
|
33177 | width: 16,
|
33178 | height: 16
|
33179 | },
|
33180 | '& $switchBase': {
|
33181 | padding: 4,
|
33182 | '&$checked': {
|
33183 | transform: 'translateX(16px)'
|
33184 | }
|
33185 | }
|
33186 | },
|
33187 |
|
33188 |
|
33189 | checked: {},
|
33190 |
|
33191 |
|
33192 | disabled: {},
|
33193 |
|
33194 |
|
33195 | input: {
|
33196 | left: '-100%',
|
33197 | width: '300%'
|
33198 | },
|
33199 |
|
33200 |
|
33201 | thumb: {
|
33202 | boxShadow: theme.shadows[1],
|
33203 | backgroundColor: 'currentColor',
|
33204 | width: 20,
|
33205 | height: 20,
|
33206 | borderRadius: '50%'
|
33207 | },
|
33208 |
|
33209 |
|
33210 | track: {
|
33211 | height: '100%',
|
33212 | width: '100%',
|
33213 | borderRadius: 14 / 2,
|
33214 | zIndex: -1,
|
33215 | transition: theme.transitions.create(['opacity', 'background-color'], {
|
33216 | duration: theme.transitions.duration.shortest
|
33217 | }),
|
33218 | backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
|
33219 | opacity: theme.palette.type === 'light' ? 0.38 : 0.3
|
33220 | }
|
33221 | };
|
33222 | };
|
33223 | var Switch = React__default.forwardRef(function Switch(props, ref) {
|
33224 | var classes = props.classes,
|
33225 | className = props.className,
|
33226 | _props$color = props.color,
|
33227 | color = _props$color === void 0 ? 'secondary' : _props$color,
|
33228 | _props$disabled = props.disabled,
|
33229 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
33230 | _props$edge = props.edge,
|
33231 | edge = _props$edge === void 0 ? false : _props$edge,
|
33232 | _props$size = props.size,
|
33233 | size = _props$size === void 0 ? 'medium' : _props$size,
|
33234 | other = _objectWithoutProperties(props, ["classes", "className", "color", "disabled", "edge", "size"]);
|
33235 |
|
33236 | var icon = React__default.createElement("span", {
|
33237 | className: classes.thumb
|
33238 | });
|
33239 | return React__default.createElement("span", {
|
33240 | className: clsx(classes.root, className, {
|
33241 | start: classes.edgeStart,
|
33242 | end: classes.edgeEnd
|
33243 | }[edge], {
|
33244 | small: classes["size".concat(capitalize(size))]
|
33245 | }[size])
|
33246 | }, React__default.createElement(SwitchBase$1, _extends({
|
33247 | type: "checkbox",
|
33248 | icon: icon,
|
33249 | checkedIcon: icon,
|
33250 | classes: {
|
33251 | root: clsx(classes.switchBase, classes["color".concat(capitalize(color))]),
|
33252 | input: classes.input,
|
33253 | checked: classes.checked,
|
33254 | disabled: classes.disabled
|
33255 | },
|
33256 | ref: ref,
|
33257 | disabled: disabled
|
33258 | }, other)), React__default.createElement("span", {
|
33259 | className: classes.track
|
33260 | }));
|
33261 | });
|
33262 | Switch.propTypes = {
|
33263 | |
33264 |
|
33265 |
|
33266 | checked: propTypes.bool,
|
33267 |
|
33268 | |
33269 |
|
33270 |
|
33271 | checkedIcon: propTypes.node,
|
33272 |
|
33273 | |
33274 |
|
33275 |
|
33276 |
|
33277 | classes: propTypes.object.isRequired,
|
33278 |
|
33279 | |
33280 |
|
33281 |
|
33282 | className: propTypes.string,
|
33283 |
|
33284 | |
33285 |
|
33286 |
|
33287 | color: propTypes.oneOf(['primary', 'secondary', 'default']),
|
33288 |
|
33289 | |
33290 |
|
33291 |
|
33292 | defaultChecked: propTypes.bool,
|
33293 |
|
33294 | |
33295 |
|
33296 |
|
33297 | disabled: propTypes.bool,
|
33298 |
|
33299 | |
33300 |
|
33301 |
|
33302 | disableRipple: propTypes.bool,
|
33303 |
|
33304 | |
33305 |
|
33306 |
|
33307 |
|
33308 |
|
33309 |
|
33310 | edge: propTypes.oneOf(['start', 'end', false]),
|
33311 |
|
33312 | |
33313 |
|
33314 |
|
33315 | icon: propTypes.node,
|
33316 |
|
33317 | |
33318 |
|
33319 |
|
33320 | id: propTypes.string,
|
33321 |
|
33322 | |
33323 |
|
33324 |
|
33325 | inputProps: propTypes.object,
|
33326 |
|
33327 | |
33328 |
|
33329 |
|
33330 | inputRef: refType,
|
33331 |
|
33332 | |
33333 |
|
33334 |
|
33335 |
|
33336 |
|
33337 |
|
33338 | onChange: propTypes.func,
|
33339 |
|
33340 | |
33341 |
|
33342 |
|
33343 | required: propTypes.bool,
|
33344 |
|
33345 | |
33346 |
|
33347 |
|
33348 |
|
33349 | size: propTypes.oneOf(['small', 'medium']),
|
33350 |
|
33351 | |
33352 |
|
33353 |
|
33354 | type: propTypes.string,
|
33355 |
|
33356 | |
33357 |
|
33358 |
|
33359 | value: propTypes.any
|
33360 | } ;
|
33361 | var Switch$1 = withStyles$1(styles$1t, {
|
33362 | name: 'MuiSwitch'
|
33363 | })(Switch);
|
33364 |
|
33365 | var styles$1u = function styles(theme) {
|
33366 | var _extends2;
|
33367 |
|
33368 | return {
|
33369 |
|
33370 | root: _extends({}, theme.typography.button, (_extends2 = {
|
33371 | maxWidth: 264,
|
33372 | minWidth: 72,
|
33373 | position: 'relative',
|
33374 | boxSizing: 'border-box',
|
33375 | minHeight: 48,
|
33376 | flexShrink: 0,
|
33377 | padding: '6px 12px'
|
33378 | }, _defineProperty(_extends2, theme.breakpoints.up('sm'), {
|
33379 | padding: '6px 24px'
|
33380 | }), _defineProperty(_extends2, "overflow", 'hidden'), _defineProperty(_extends2, "whiteSpace", 'normal'), _defineProperty(_extends2, "textAlign", 'center'), _defineProperty(_extends2, theme.breakpoints.up('sm'), {
|
33381 | fontSize: theme.typography.pxToRem(13),
|
33382 | minWidth: 160
|
33383 | }), _extends2)),
|
33384 |
|
33385 |
|
33386 | labelIcon: {
|
33387 | minHeight: 72,
|
33388 | paddingTop: 9,
|
33389 | '& $wrapper > *:first-child': {
|
33390 | marginBottom: 6
|
33391 | }
|
33392 | },
|
33393 |
|
33394 |
|
33395 | textColorInherit: {
|
33396 | color: 'inherit',
|
33397 | opacity: 0.7,
|
33398 | '&$selected': {
|
33399 | opacity: 1
|
33400 | },
|
33401 | '&$disabled': {
|
33402 | opacity: 0.5
|
33403 | }
|
33404 | },
|
33405 |
|
33406 |
|
33407 | textColorPrimary: {
|
33408 | color: theme.palette.text.secondary,
|
33409 | '&$selected': {
|
33410 | color: theme.palette.primary.main
|
33411 | },
|
33412 | '&$disabled': {
|
33413 | color: theme.palette.text.disabled
|
33414 | }
|
33415 | },
|
33416 |
|
33417 |
|
33418 | textColorSecondary: {
|
33419 | color: theme.palette.text.secondary,
|
33420 | '&$selected': {
|
33421 | color: theme.palette.secondary.main
|
33422 | },
|
33423 | '&$disabled': {
|
33424 | color: theme.palette.text.disabled
|
33425 | }
|
33426 | },
|
33427 |
|
33428 |
|
33429 | selected: {},
|
33430 |
|
33431 |
|
33432 | disabled: {},
|
33433 |
|
33434 |
|
33435 | fullWidth: {
|
33436 | flexShrink: 1,
|
33437 | flexGrow: 1,
|
33438 | flexBasis: 0,
|
33439 | maxWidth: 'none'
|
33440 | },
|
33441 |
|
33442 |
|
33443 | wrapped: {
|
33444 | fontSize: theme.typography.pxToRem(12),
|
33445 | lineHeight: 1.5
|
33446 | },
|
33447 |
|
33448 |
|
33449 | wrapper: {
|
33450 | display: 'inline-flex',
|
33451 | alignItems: 'center',
|
33452 | justifyContent: 'center',
|
33453 | width: '100%',
|
33454 | flexDirection: 'column'
|
33455 | }
|
33456 | };
|
33457 | };
|
33458 | var Tab = React__default.forwardRef(function Tab(props, ref) {
|
33459 | var classes = props.classes,
|
33460 | className = props.className,
|
33461 | _props$disabled = props.disabled,
|
33462 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
33463 | _props$disableFocusRi = props.disableFocusRipple,
|
33464 | disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
|
33465 | fullWidth = props.fullWidth,
|
33466 | icon = props.icon,
|
33467 | indicator = props.indicator,
|
33468 | label = props.label,
|
33469 | onChange = props.onChange,
|
33470 | onClick = props.onClick,
|
33471 | selected = props.selected,
|
33472 | _props$textColor = props.textColor,
|
33473 | textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,
|
33474 | value = props.value,
|
33475 | _props$wrapped = props.wrapped,
|
33476 | wrapped = _props$wrapped === void 0 ? false : _props$wrapped,
|
33477 | other = _objectWithoutProperties(props, ["classes", "className", "disabled", "disableFocusRipple", "fullWidth", "icon", "indicator", "label", "onChange", "onClick", "selected", "textColor", "value", "wrapped"]);
|
33478 |
|
33479 | var handleChange = function handleChange(event) {
|
33480 | if (onChange) {
|
33481 | onChange(event, value);
|
33482 | }
|
33483 |
|
33484 | if (onClick) {
|
33485 | onClick(event);
|
33486 | }
|
33487 | };
|
33488 |
|
33489 | return React__default.createElement(ButtonBase$1, _extends({
|
33490 | focusRipple: !disableFocusRipple,
|
33491 | className: clsx(classes.root, classes["textColor".concat(capitalize(textColor))], className, disabled && classes.disabled, selected && classes.selected, label && icon && classes.labelIcon, fullWidth && classes.fullWidth, wrapped && classes.wrapped),
|
33492 | ref: ref,
|
33493 | role: "tab",
|
33494 | "aria-selected": selected,
|
33495 | disabled: disabled,
|
33496 | onClick: handleChange
|
33497 | }, other), React__default.createElement("span", {
|
33498 | className: classes.wrapper
|
33499 | }, icon, label), indicator);
|
33500 | });
|
33501 | Tab.propTypes = {
|
33502 | |
33503 |
|
33504 |
|
33505 |
|
33506 | children: unsupportedProp,
|
33507 |
|
33508 | |
33509 |
|
33510 |
|
33511 |
|
33512 | classes: propTypes.object.isRequired,
|
33513 |
|
33514 | |
33515 |
|
33516 |
|
33517 | className: propTypes.string,
|
33518 |
|
33519 | |
33520 |
|
33521 |
|
33522 | disabled: propTypes.bool,
|
33523 |
|
33524 | |
33525 |
|
33526 |
|
33527 |
|
33528 | disableFocusRipple: propTypes.bool,
|
33529 |
|
33530 | |
33531 |
|
33532 |
|
33533 | disableRipple: propTypes.bool,
|
33534 |
|
33535 | |
33536 |
|
33537 |
|
33538 | fullWidth: propTypes.bool,
|
33539 |
|
33540 | |
33541 |
|
33542 |
|
33543 | icon: propTypes.node,
|
33544 |
|
33545 | |
33546 |
|
33547 |
|
33548 |
|
33549 |
|
33550 | indicator: propTypes.node,
|
33551 |
|
33552 | |
33553 |
|
33554 |
|
33555 | label: propTypes.node,
|
33556 |
|
33557 | |
33558 |
|
33559 |
|
33560 | onChange: propTypes.func,
|
33561 |
|
33562 | |
33563 |
|
33564 |
|
33565 | onClick: propTypes.func,
|
33566 |
|
33567 | |
33568 |
|
33569 |
|
33570 | selected: propTypes.bool,
|
33571 |
|
33572 | |
33573 |
|
33574 |
|
33575 | textColor: propTypes.oneOf(['secondary', 'primary', 'inherit']),
|
33576 |
|
33577 | |
33578 |
|
33579 |
|
33580 | value: propTypes.any,
|
33581 |
|
33582 | |
33583 |
|
33584 |
|
33585 |
|
33586 | wrapped: propTypes.bool
|
33587 | } ;
|
33588 | var Tab$1 = withStyles$1(styles$1u, {
|
33589 | name: 'MuiTab'
|
33590 | })(Tab);
|
33591 |
|
33592 | |
33593 |
|
33594 |
|
33595 |
|
33596 | var TableContext = React__default.createContext();
|
33597 |
|
33598 | {
|
33599 | TableContext.displayName = 'TableContext';
|
33600 | }
|
33601 |
|
33602 | var styles$1v = function styles(theme) {
|
33603 | return {
|
33604 |
|
33605 | root: {
|
33606 | display: 'table',
|
33607 | width: '100%',
|
33608 | borderCollapse: 'collapse',
|
33609 | borderSpacing: 0,
|
33610 | '& caption': _extends({}, theme.typography.body2, {
|
33611 | padding: theme.spacing(2),
|
33612 | color: theme.palette.text.secondary,
|
33613 | textAlign: 'left',
|
33614 | captionSide: 'bottom'
|
33615 | })
|
33616 | },
|
33617 |
|
33618 |
|
33619 | stickyHeader: {
|
33620 | borderCollapse: 'separate'
|
33621 | }
|
33622 | };
|
33623 | };
|
33624 | var Table = React__default.forwardRef(function Table(props, ref) {
|
33625 | var classes = props.classes,
|
33626 | className = props.className,
|
33627 | _props$component = props.component,
|
33628 | Component = _props$component === void 0 ? 'table' : _props$component,
|
33629 | _props$padding = props.padding,
|
33630 | padding = _props$padding === void 0 ? 'default' : _props$padding,
|
33631 | _props$size = props.size,
|
33632 | size = _props$size === void 0 ? 'medium' : _props$size,
|
33633 | _props$stickyHeader = props.stickyHeader,
|
33634 | stickyHeader = _props$stickyHeader === void 0 ? false : _props$stickyHeader,
|
33635 | other = _objectWithoutProperties(props, ["classes", "className", "component", "padding", "size", "stickyHeader"]);
|
33636 |
|
33637 | var table = React__default.useMemo(function () {
|
33638 | return {
|
33639 | padding: padding,
|
33640 | size: size,
|
33641 | stickyHeader: stickyHeader
|
33642 | };
|
33643 | }, [padding, size, stickyHeader]);
|
33644 | return React__default.createElement(TableContext.Provider, {
|
33645 | value: table
|
33646 | }, React__default.createElement(Component, _extends({
|
33647 | ref: ref,
|
33648 | className: clsx(classes.root, className, stickyHeader && classes.stickyHeader)
|
33649 | }, other)));
|
33650 | });
|
33651 | Table.propTypes = {
|
33652 | |
33653 |
|
33654 |
|
33655 | children: propTypes.node.isRequired,
|
33656 |
|
33657 | |
33658 |
|
33659 |
|
33660 |
|
33661 | classes: propTypes.object.isRequired,
|
33662 |
|
33663 | |
33664 |
|
33665 |
|
33666 | className: propTypes.string,
|
33667 |
|
33668 | |
33669 |
|
33670 |
|
33671 |
|
33672 | component: propTypes.elementType,
|
33673 |
|
33674 | |
33675 |
|
33676 |
|
33677 | padding: propTypes.oneOf(['default', 'checkbox', 'none']),
|
33678 |
|
33679 | |
33680 |
|
33681 |
|
33682 | size: propTypes.oneOf(['small', 'medium']),
|
33683 |
|
33684 | |
33685 |
|
33686 |
|
33687 |
|
33688 |
|
33689 | stickyHeader: propTypes.bool
|
33690 | } ;
|
33691 | var Table$1 = withStyles$1(styles$1v, {
|
33692 | name: 'MuiTable'
|
33693 | })(Table);
|
33694 |
|
33695 | |
33696 |
|
33697 |
|
33698 |
|
33699 | var Tablelvl2Context = React__default.createContext();
|
33700 |
|
33701 | {
|
33702 | Tablelvl2Context.displayName = 'Tablelvl2Context';
|
33703 | }
|
33704 |
|
33705 | var styles$1w = {
|
33706 |
|
33707 | root: {
|
33708 | display: 'table-row-group'
|
33709 | }
|
33710 | };
|
33711 | var tablelvl2 = {
|
33712 | variant: 'body'
|
33713 | };
|
33714 | var TableBody = React__default.forwardRef(function TableBody(props, ref) {
|
33715 | var classes = props.classes,
|
33716 | className = props.className,
|
33717 | _props$component = props.component,
|
33718 | Component = _props$component === void 0 ? 'tbody' : _props$component,
|
33719 | other = _objectWithoutProperties(props, ["classes", "className", "component"]);
|
33720 |
|
33721 | return React__default.createElement(Tablelvl2Context.Provider, {
|
33722 | value: tablelvl2
|
33723 | }, React__default.createElement(Component, _extends({
|
33724 | className: clsx(classes.root, className),
|
33725 | ref: ref
|
33726 | }, other)));
|
33727 | });
|
33728 | TableBody.propTypes = {
|
33729 | |
33730 |
|
33731 |
|
33732 | children: propTypes.node,
|
33733 |
|
33734 | |
33735 |
|
33736 |
|
33737 |
|
33738 | classes: propTypes.object.isRequired,
|
33739 |
|
33740 | |
33741 |
|
33742 |
|
33743 | className: propTypes.string,
|
33744 |
|
33745 | |
33746 |
|
33747 |
|
33748 |
|
33749 | component: propTypes.elementType
|
33750 | } ;
|
33751 | var TableBody$1 = withStyles$1(styles$1w, {
|
33752 | name: 'MuiTableBody'
|
33753 | })(TableBody);
|
33754 |
|
33755 | var styles$1x = function styles(theme) {
|
33756 | return {
|
33757 |
|
33758 | root: _extends({}, theme.typography.body2, {
|
33759 | display: 'table-cell',
|
33760 | verticalAlign: 'inherit',
|
33761 |
|
33762 |
|
33763 | borderBottom: "1px solid\n ".concat(theme.palette.type === 'light' ? lighten(fade(theme.palette.divider, 1), 0.88) : darken(fade(theme.palette.divider, 1), 0.68)),
|
33764 | textAlign: 'left',
|
33765 | padding: 16
|
33766 | }),
|
33767 |
|
33768 |
|
33769 | head: {
|
33770 | color: theme.palette.text.primary,
|
33771 | lineHeight: theme.typography.pxToRem(24),
|
33772 | fontWeight: theme.typography.fontWeightMedium
|
33773 | },
|
33774 |
|
33775 |
|
33776 | body: {
|
33777 | color: theme.palette.text.primary
|
33778 | },
|
33779 |
|
33780 |
|
33781 | footer: {
|
33782 | color: theme.palette.text.secondary,
|
33783 | lineHeight: theme.typography.pxToRem(21),
|
33784 | fontSize: theme.typography.pxToRem(12)
|
33785 | },
|
33786 |
|
33787 |
|
33788 | sizeSmall: {
|
33789 | padding: '6px 24px 6px 16px',
|
33790 | '&:last-child': {
|
33791 | paddingRight: 16
|
33792 | },
|
33793 | '&$paddingCheckbox': {
|
33794 | width: 24,
|
33795 |
|
33796 | padding: '0px 12px 0 16px',
|
33797 | '&:last-child': {
|
33798 | paddingLeft: 12,
|
33799 | paddingRight: 16
|
33800 | },
|
33801 | '& > *': {
|
33802 | padding: 0
|
33803 | }
|
33804 | }
|
33805 | },
|
33806 |
|
33807 |
|
33808 | paddingCheckbox: {
|
33809 | width: 48,
|
33810 |
|
33811 | padding: '0 0 0 4px',
|
33812 | '&:last-child': {
|
33813 | paddingLeft: 0,
|
33814 | paddingRight: 4
|
33815 | }
|
33816 | },
|
33817 |
|
33818 |
|
33819 | paddingNone: {
|
33820 | padding: 0,
|
33821 | '&:last-child': {
|
33822 | padding: 0
|
33823 | }
|
33824 | },
|
33825 |
|
33826 |
|
33827 | alignLeft: {
|
33828 | textAlign: 'left'
|
33829 | },
|
33830 |
|
33831 |
|
33832 | alignCenter: {
|
33833 | textAlign: 'center'
|
33834 | },
|
33835 |
|
33836 |
|
33837 | alignRight: {
|
33838 | textAlign: 'right',
|
33839 | flexDirection: 'row-reverse'
|
33840 | },
|
33841 |
|
33842 |
|
33843 | alignJustify: {
|
33844 | textAlign: 'justify'
|
33845 | },
|
33846 |
|
33847 |
|
33848 | stickyHeader: {
|
33849 | position: 'sticky',
|
33850 | top: 0,
|
33851 | left: 0,
|
33852 | zIndex: 2,
|
33853 | backgroundColor: theme.palette.background.default
|
33854 | }
|
33855 | };
|
33856 | };
|
33857 | |
33858 |
|
33859 |
|
33860 |
|
33861 |
|
33862 | var TableCell = React__default.forwardRef(function TableCell(props, ref) {
|
33863 | var _props$align = props.align,
|
33864 | align = _props$align === void 0 ? 'inherit' : _props$align,
|
33865 | classes = props.classes,
|
33866 | className = props.className,
|
33867 | component = props.component,
|
33868 | paddingProp = props.padding,
|
33869 | scopeProp = props.scope,
|
33870 | sizeProp = props.size,
|
33871 | sortDirection = props.sortDirection,
|
33872 | variantProp = props.variant,
|
33873 | other = _objectWithoutProperties(props, ["align", "classes", "className", "component", "padding", "scope", "size", "sortDirection", "variant"]);
|
33874 |
|
33875 | var table = React__default.useContext(TableContext);
|
33876 | var tablelvl2 = React__default.useContext(Tablelvl2Context);
|
33877 | var Component;
|
33878 |
|
33879 | if (component) {
|
33880 | Component = component;
|
33881 | } else {
|
33882 | Component = tablelvl2 && tablelvl2.variant === 'head' ? 'th' : 'td';
|
33883 | }
|
33884 |
|
33885 | var scope = scopeProp;
|
33886 |
|
33887 | if (!scope && tablelvl2 && tablelvl2.variant === 'head') {
|
33888 | scope = 'col';
|
33889 | }
|
33890 |
|
33891 | var padding = paddingProp || (table && table.padding ? table.padding : 'default');
|
33892 | var size = sizeProp || (table && table.size ? table.size : 'medium');
|
33893 | var variant = variantProp || tablelvl2 && tablelvl2.variant;
|
33894 | var ariaSort = null;
|
33895 |
|
33896 | if (sortDirection) {
|
33897 | ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
|
33898 | }
|
33899 |
|
33900 | return React__default.createElement(Component, _extends({
|
33901 | ref: ref,
|
33902 | className: clsx(classes.root, classes[variant], className, align !== 'inherit' && classes["align".concat(capitalize(align))], padding !== 'default' && classes["padding".concat(capitalize(padding))], size !== 'medium' && classes["size".concat(capitalize(size))], {
|
33903 | head: table && table.stickyHeader && classes.stickyHeader
|
33904 | }[variant]),
|
33905 | "aria-sort": ariaSort,
|
33906 | scope: scope
|
33907 | }, other));
|
33908 | });
|
33909 | TableCell.propTypes = {
|
33910 | |
33911 |
|
33912 |
|
33913 |
|
33914 |
|
33915 |
|
33916 | align: propTypes.oneOf(['inherit', 'left', 'center', 'right', 'justify']),
|
33917 |
|
33918 | |
33919 |
|
33920 |
|
33921 | children: propTypes.node,
|
33922 |
|
33923 | |
33924 |
|
33925 |
|
33926 |
|
33927 | classes: propTypes.object.isRequired,
|
33928 |
|
33929 | |
33930 |
|
33931 |
|
33932 | className: propTypes.string,
|
33933 |
|
33934 | |
33935 |
|
33936 |
|
33937 |
|
33938 | component: propTypes.elementType,
|
33939 |
|
33940 | |
33941 |
|
33942 |
|
33943 |
|
33944 | padding: propTypes.oneOf(['default', 'checkbox', 'none']),
|
33945 |
|
33946 | |
33947 |
|
33948 |
|
33949 | scope: propTypes.string,
|
33950 |
|
33951 | |
33952 |
|
33953 |
|
33954 |
|
33955 | size: propTypes.oneOf(['small', 'medium']),
|
33956 |
|
33957 | |
33958 |
|
33959 |
|
33960 | sortDirection: propTypes.oneOf(['asc', 'desc', false]),
|
33961 |
|
33962 | |
33963 |
|
33964 |
|
33965 |
|
33966 | variant: propTypes.oneOf(['head', 'body', 'footer'])
|
33967 | } ;
|
33968 | var TableCell$1 = withStyles$1(styles$1x, {
|
33969 | name: 'MuiTableCell'
|
33970 | })(TableCell);
|
33971 |
|
33972 | var styles$1y = {
|
33973 |
|
33974 | root: {
|
33975 | width: '100%',
|
33976 | overflowX: 'auto'
|
33977 | }
|
33978 | };
|
33979 | var TableContainer = React__default.forwardRef(function TableContainer(props, ref) {
|
33980 | var classes = props.classes,
|
33981 | className = props.className,
|
33982 | _props$component = props.component,
|
33983 | Component = _props$component === void 0 ? 'div' : _props$component,
|
33984 | other = _objectWithoutProperties(props, ["classes", "className", "component"]);
|
33985 |
|
33986 | return React__default.createElement(Component, _extends({
|
33987 | ref: ref,
|
33988 | className: clsx(classes.root, className)
|
33989 | }, other));
|
33990 | });
|
33991 | TableContainer.propTypes = {
|
33992 | |
33993 |
|
33994 |
|
33995 | children: propTypes.node,
|
33996 |
|
33997 | |
33998 |
|
33999 |
|
34000 |
|
34001 | classes: propTypes.object.isRequired,
|
34002 |
|
34003 | |
34004 |
|
34005 |
|
34006 | className: propTypes.string,
|
34007 |
|
34008 | |
34009 |
|
34010 |
|
34011 |
|
34012 | component: propTypes.elementType
|
34013 | } ;
|
34014 | var TableContainer$1 = withStyles$1(styles$1y, {
|
34015 | name: 'MuiTableContainer'
|
34016 | })(TableContainer);
|
34017 |
|
34018 | var styles$1z = {
|
34019 |
|
34020 | root: {
|
34021 | display: 'table-footer-group'
|
34022 | }
|
34023 | };
|
34024 | var tablelvl2$1 = {
|
34025 | variant: 'footer'
|
34026 | };
|
34027 | var TableFooter = React__default.forwardRef(function TableFooter(props, ref) {
|
34028 | var classes = props.classes,
|
34029 | className = props.className,
|
34030 | _props$component = props.component,
|
34031 | Component = _props$component === void 0 ? 'tfoot' : _props$component,
|
34032 | other = _objectWithoutProperties(props, ["classes", "className", "component"]);
|
34033 |
|
34034 | return React__default.createElement(Tablelvl2Context.Provider, {
|
34035 | value: tablelvl2$1
|
34036 | }, React__default.createElement(Component, _extends({
|
34037 | className: clsx(classes.root, className),
|
34038 | ref: ref
|
34039 | }, other)));
|
34040 | });
|
34041 | TableFooter.propTypes = {
|
34042 | |
34043 |
|
34044 |
|
34045 | children: propTypes.node,
|
34046 |
|
34047 | |
34048 |
|
34049 |
|
34050 |
|
34051 | classes: propTypes.object.isRequired,
|
34052 |
|
34053 | |
34054 |
|
34055 |
|
34056 | className: propTypes.string,
|
34057 |
|
34058 | |
34059 |
|
34060 |
|
34061 |
|
34062 | component: propTypes.elementType
|
34063 | } ;
|
34064 | var TableFooter$1 = withStyles$1(styles$1z, {
|
34065 | name: 'MuiTableFooter'
|
34066 | })(TableFooter);
|
34067 |
|
34068 | var styles$1A = {
|
34069 |
|
34070 | root: {
|
34071 | display: 'table-header-group'
|
34072 | }
|
34073 | };
|
34074 | var tablelvl2$2 = {
|
34075 | variant: 'head'
|
34076 | };
|
34077 | var TableHead = React__default.forwardRef(function TableHead(props, ref) {
|
34078 | var classes = props.classes,
|
34079 | className = props.className,
|
34080 | _props$component = props.component,
|
34081 | Component = _props$component === void 0 ? 'thead' : _props$component,
|
34082 | other = _objectWithoutProperties(props, ["classes", "className", "component"]);
|
34083 |
|
34084 | return React__default.createElement(Tablelvl2Context.Provider, {
|
34085 | value: tablelvl2$2
|
34086 | }, React__default.createElement(Component, _extends({
|
34087 | className: clsx(classes.root, className),
|
34088 | ref: ref
|
34089 | }, other)));
|
34090 | });
|
34091 | TableHead.propTypes = {
|
34092 | |
34093 |
|
34094 |
|
34095 | children: propTypes.node,
|
34096 |
|
34097 | |
34098 |
|
34099 |
|
34100 |
|
34101 | classes: propTypes.object.isRequired,
|
34102 |
|
34103 | |
34104 |
|
34105 |
|
34106 | className: propTypes.string,
|
34107 |
|
34108 | |
34109 |
|
34110 |
|
34111 |
|
34112 | component: propTypes.elementType
|
34113 | } ;
|
34114 | var TableHead$1 = withStyles$1(styles$1A, {
|
34115 | name: 'MuiTableHead'
|
34116 | })(TableHead);
|
34117 |
|
34118 | var styles$1B = function styles(theme) {
|
34119 | return {
|
34120 |
|
34121 | root: {
|
34122 | position: 'relative',
|
34123 | display: 'flex',
|
34124 | alignItems: 'center'
|
34125 | },
|
34126 |
|
34127 |
|
34128 | gutters: _defineProperty({
|
34129 | paddingLeft: theme.spacing(2),
|
34130 | paddingRight: theme.spacing(2)
|
34131 | }, theme.breakpoints.up('sm'), {
|
34132 | paddingLeft: theme.spacing(3),
|
34133 | paddingRight: theme.spacing(3)
|
34134 | }),
|
34135 |
|
34136 |
|
34137 | regular: theme.mixins.toolbar,
|
34138 |
|
34139 |
|
34140 | dense: {
|
34141 | minHeight: 48
|
34142 | }
|
34143 | };
|
34144 | };
|
34145 | var Toolbar = React__default.forwardRef(function Toolbar(props, ref) {
|
34146 | var classes = props.classes,
|
34147 | className = props.className,
|
34148 | _props$component = props.component,
|
34149 | Component = _props$component === void 0 ? 'div' : _props$component,
|
34150 | _props$disableGutters = props.disableGutters,
|
34151 | disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
|
34152 | _props$variant = props.variant,
|
34153 | variant = _props$variant === void 0 ? 'regular' : _props$variant,
|
34154 | other = _objectWithoutProperties(props, ["classes", "className", "component", "disableGutters", "variant"]);
|
34155 |
|
34156 | return React__default.createElement(Component, _extends({
|
34157 | className: clsx(classes.root, classes[variant], className, !disableGutters && classes.gutters),
|
34158 | ref: ref
|
34159 | }, other));
|
34160 | });
|
34161 | Toolbar.propTypes = {
|
34162 | |
34163 |
|
34164 |
|
34165 | children: propTypes.node,
|
34166 |
|
34167 | |
34168 |
|
34169 |
|
34170 |
|
34171 | classes: propTypes.object.isRequired,
|
34172 |
|
34173 | |
34174 |
|
34175 |
|
34176 | className: propTypes.string,
|
34177 |
|
34178 | |
34179 |
|
34180 |
|
34181 |
|
34182 | component: propTypes.elementType,
|
34183 |
|
34184 | |
34185 |
|
34186 |
|
34187 | disableGutters: propTypes.bool,
|
34188 |
|
34189 | |
34190 |
|
34191 |
|
34192 | variant: propTypes.oneOf(['regular', 'dense'])
|
34193 | } ;
|
34194 | var Toolbar$1 = withStyles$1(styles$1B, {
|
34195 | name: 'MuiToolbar'
|
34196 | })(Toolbar);
|
34197 |
|
34198 | |
34199 |
|
34200 |
|
34201 |
|
34202 | var KeyboardArrowLeft = createSvgIcon(React__default.createElement("path", {
|
34203 | d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
|
34204 | }), 'KeyboardArrowLeft');
|
34205 |
|
34206 | |
34207 |
|
34208 |
|
34209 |
|
34210 | var KeyboardArrowRight = createSvgIcon(React__default.createElement("path", {
|
34211 | d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
|
34212 | }), 'KeyboardArrowRight');
|
34213 |
|
34214 | |
34215 |
|
34216 |
|
34217 |
|
34218 | var _ref$2 = React__default.createElement(KeyboardArrowRight, null);
|
34219 |
|
34220 | var _ref2$1 = React__default.createElement(KeyboardArrowLeft, null);
|
34221 |
|
34222 | var _ref3 = React__default.createElement(KeyboardArrowLeft, null);
|
34223 |
|
34224 | var _ref4 = React__default.createElement(KeyboardArrowRight, null);
|
34225 |
|
34226 | var TablePaginationActions = React__default.forwardRef(function TablePaginationActions(props, ref) {
|
34227 | var backIconButtonProps = props.backIconButtonProps,
|
34228 | count = props.count,
|
34229 | nextIconButtonProps = props.nextIconButtonProps,
|
34230 | onChangePage = props.onChangePage,
|
34231 | page = props.page,
|
34232 | rowsPerPage = props.rowsPerPage,
|
34233 | other = _objectWithoutProperties(props, ["backIconButtonProps", "count", "nextIconButtonProps", "onChangePage", "page", "rowsPerPage"]);
|
34234 |
|
34235 | var theme = useTheme$1();
|
34236 |
|
34237 | var handleBackButtonClick = function handleBackButtonClick(event) {
|
34238 | onChangePage(event, page - 1);
|
34239 | };
|
34240 |
|
34241 | var handleNextButtonClick = function handleNextButtonClick(event) {
|
34242 | onChangePage(event, page + 1);
|
34243 | };
|
34244 |
|
34245 | return React__default.createElement("div", _extends({
|
34246 | ref: ref
|
34247 | }, other), React__default.createElement(IconButton$1, _extends({
|
34248 | onClick: handleBackButtonClick,
|
34249 | disabled: page === 0,
|
34250 | color: "inherit"
|
34251 | }, backIconButtonProps), theme.direction === 'rtl' ? _ref$2 : _ref2$1), React__default.createElement(IconButton$1, _extends({
|
34252 | onClick: handleNextButtonClick,
|
34253 | disabled: page >= Math.ceil(count / rowsPerPage) - 1,
|
34254 | color: "inherit"
|
34255 | }, nextIconButtonProps), theme.direction === 'rtl' ? _ref3 : _ref4));
|
34256 | });
|
34257 | TablePaginationActions.propTypes = {
|
34258 | |
34259 |
|
34260 |
|
34261 | backIconButtonProps: propTypes.object,
|
34262 |
|
34263 | |
34264 |
|
34265 |
|
34266 | count: propTypes.number.isRequired,
|
34267 |
|
34268 | |
34269 |
|
34270 |
|
34271 | nextIconButtonProps: propTypes.object,
|
34272 |
|
34273 | |
34274 |
|
34275 |
|
34276 |
|
34277 |
|
34278 |
|
34279 | onChangePage: propTypes.func.isRequired,
|
34280 |
|
34281 | |
34282 |
|
34283 |
|
34284 | page: propTypes.number.isRequired,
|
34285 |
|
34286 | |
34287 |
|
34288 |
|
34289 | rowsPerPage: propTypes.number.isRequired
|
34290 | } ;
|
34291 |
|
34292 | var styles$1C = function styles(theme) {
|
34293 | return {
|
34294 |
|
34295 | root: {
|
34296 | color: theme.palette.text.primary,
|
34297 | fontSize: theme.typography.pxToRem(14),
|
34298 | overflow: 'auto',
|
34299 |
|
34300 | '&:last-child': {
|
34301 | padding: 0
|
34302 | }
|
34303 | },
|
34304 |
|
34305 |
|
34306 | toolbar: {
|
34307 | minHeight: 52,
|
34308 | paddingRight: 2
|
34309 | },
|
34310 |
|
34311 |
|
34312 | spacer: {
|
34313 | flex: '1 1 100%'
|
34314 | },
|
34315 |
|
34316 |
|
34317 | caption: {
|
34318 | flexShrink: 0
|
34319 | },
|
34320 |
|
34321 |
|
34322 | selectRoot: {
|
34323 |
|
34324 | marginRight: 32,
|
34325 | marginLeft: 8
|
34326 | },
|
34327 |
|
34328 |
|
34329 | select: {
|
34330 | paddingLeft: 8,
|
34331 | paddingRight: 24,
|
34332 | textAlign: 'right',
|
34333 | textAlignLast: 'right'
|
34334 |
|
34335 | },
|
34336 |
|
34337 |
|
34338 | selectIcon: {
|
34339 | top: 1
|
34340 | },
|
34341 |
|
34342 |
|
34343 | input: {
|
34344 | color: 'inherit',
|
34345 | fontSize: 'inherit',
|
34346 | flexShrink: 0
|
34347 | },
|
34348 |
|
34349 |
|
34350 | menuItem: {},
|
34351 |
|
34352 |
|
34353 | actions: {
|
34354 | flexShrink: 0,
|
34355 | marginLeft: 20
|
34356 | }
|
34357 | };
|
34358 | };
|
34359 |
|
34360 | var defaultLabelDisplayedRows = function defaultLabelDisplayedRows(_ref) {
|
34361 | var from = _ref.from,
|
34362 | to = _ref.to,
|
34363 | count = _ref.count;
|
34364 | return "".concat(from, "-").concat(to === -1 ? count : to, " of ").concat(count);
|
34365 | };
|
34366 |
|
34367 | var defaultRowsPerPageOptions = [10, 25, 50, 100];
|
34368 | |
34369 |
|
34370 |
|
34371 |
|
34372 | var TablePagination = React__default.forwardRef(function TablePagination(props, ref) {
|
34373 | var _props$ActionsCompone = props.ActionsComponent,
|
34374 | ActionsComponent = _props$ActionsCompone === void 0 ? TablePaginationActions : _props$ActionsCompone,
|
34375 | backIconButtonProps = props.backIconButtonProps,
|
34376 | _props$backIconButton = props.backIconButtonText,
|
34377 | backIconButtonText = _props$backIconButton === void 0 ? 'Previous page' : _props$backIconButton,
|
34378 | classes = props.classes,
|
34379 | className = props.className,
|
34380 | colSpanProp = props.colSpan,
|
34381 | _props$component = props.component,
|
34382 | Component = _props$component === void 0 ? TableCell$1 : _props$component,
|
34383 | count = props.count,
|
34384 | _props$labelDisplayed = props.labelDisplayedRows,
|
34385 | labelDisplayedRows = _props$labelDisplayed === void 0 ? defaultLabelDisplayedRows : _props$labelDisplayed,
|
34386 | _props$labelRowsPerPa = props.labelRowsPerPage,
|
34387 | labelRowsPerPage = _props$labelRowsPerPa === void 0 ? 'Rows per page:' : _props$labelRowsPerPa,
|
34388 | nextIconButtonProps = props.nextIconButtonProps,
|
34389 | _props$nextIconButton = props.nextIconButtonText,
|
34390 | nextIconButtonText = _props$nextIconButton === void 0 ? 'Next page' : _props$nextIconButton,
|
34391 | onChangePage = props.onChangePage,
|
34392 | onChangeRowsPerPage = props.onChangeRowsPerPage,
|
34393 | page = props.page,
|
34394 | rowsPerPage = props.rowsPerPage,
|
34395 | _props$rowsPerPageOpt = props.rowsPerPageOptions,
|
34396 | rowsPerPageOptions = _props$rowsPerPageOpt === void 0 ? defaultRowsPerPageOptions : _props$rowsPerPageOpt,
|
34397 | _props$SelectProps = props.SelectProps,
|
34398 | SelectProps = _props$SelectProps === void 0 ? {} : _props$SelectProps,
|
34399 | other = _objectWithoutProperties(props, ["ActionsComponent", "backIconButtonProps", "backIconButtonText", "classes", "className", "colSpan", "component", "count", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "nextIconButtonText", "onChangePage", "onChangeRowsPerPage", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps"]);
|
34400 |
|
34401 | var colSpan;
|
34402 |
|
34403 | if (Component === TableCell$1 || Component === 'td') {
|
34404 | colSpan = colSpanProp || 1000;
|
34405 | }
|
34406 |
|
34407 | var MenuItemComponent = SelectProps.native ? 'option' : MenuItem$1;
|
34408 | return React__default.createElement(Component, _extends({
|
34409 | className: clsx(classes.root, className),
|
34410 | colSpan: colSpan,
|
34411 | ref: ref
|
34412 | }, other), React__default.createElement(Toolbar$1, {
|
34413 | className: classes.toolbar
|
34414 | }, React__default.createElement("div", {
|
34415 | className: classes.spacer
|
34416 | }), rowsPerPageOptions.length > 1 && React__default.createElement(Typography$1, {
|
34417 | color: "inherit",
|
34418 | variant: "body2",
|
34419 | className: classes.caption
|
34420 | }, labelRowsPerPage), rowsPerPageOptions.length > 1 && React__default.createElement(Select$1, _extends({
|
34421 | classes: {
|
34422 | select: classes.select,
|
34423 | icon: classes.selectIcon
|
34424 | },
|
34425 | input: React__default.createElement(InputBase$1, {
|
34426 | className: clsx(classes.input, classes.selectRoot)
|
34427 | }),
|
34428 | value: rowsPerPage,
|
34429 | onChange: onChangeRowsPerPage
|
34430 | }, SelectProps), rowsPerPageOptions.map(function (rowsPerPageOption) {
|
34431 | return React__default.createElement(MenuItemComponent, {
|
34432 | className: classes.menuItem,
|
34433 | key: rowsPerPageOption,
|
34434 | value: rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption
|
34435 | }, rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption);
|
34436 | })), React__default.createElement(Typography$1, {
|
34437 | color: "inherit",
|
34438 | variant: "body2",
|
34439 | className: classes.caption
|
34440 | }, labelDisplayedRows({
|
34441 | from: count === 0 ? 0 : page * rowsPerPage + 1,
|
34442 | to: Math.min(count, (page + 1) * rowsPerPage),
|
34443 | count: count,
|
34444 | page: page
|
34445 | })), React__default.createElement(ActionsComponent, {
|
34446 | className: classes.actions,
|
34447 | backIconButtonProps: _extends({
|
34448 | title: backIconButtonText,
|
34449 | 'aria-label': backIconButtonText
|
34450 | }, backIconButtonProps),
|
34451 | count: count,
|
34452 | nextIconButtonProps: _extends({
|
34453 | title: nextIconButtonText,
|
34454 | 'aria-label': nextIconButtonText
|
34455 | }, nextIconButtonProps),
|
34456 | onChangePage: onChangePage,
|
34457 | page: page,
|
34458 | rowsPerPage: rowsPerPage
|
34459 | })));
|
34460 | });
|
34461 | TablePagination.propTypes = {
|
34462 | |
34463 |
|
34464 |
|
34465 |
|
34466 | ActionsComponent: propTypes.elementType,
|
34467 |
|
34468 | |
34469 |
|
34470 |
|
34471 | backIconButtonProps: propTypes.object,
|
34472 |
|
34473 | |
34474 |
|
34475 |
|
34476 |
|
34477 |
|
34478 | backIconButtonText: propTypes.string,
|
34479 |
|
34480 | |
34481 |
|
34482 |
|
34483 |
|
34484 | classes: propTypes.object.isRequired,
|
34485 |
|
34486 | |
34487 |
|
34488 |
|
34489 | className: propTypes.string,
|
34490 |
|
34491 | |
34492 |
|
34493 |
|
34494 | colSpan: propTypes.number,
|
34495 |
|
34496 | |
34497 |
|
34498 |
|
34499 |
|
34500 | component: propTypes.elementType,
|
34501 |
|
34502 | |
34503 |
|
34504 |
|
34505 | count: propTypes.number.isRequired,
|
34506 |
|
34507 | |
34508 |
|
34509 |
|
34510 |
|
34511 |
|
34512 | labelDisplayedRows: propTypes.func,
|
34513 |
|
34514 | |
34515 |
|
34516 |
|
34517 |
|
34518 |
|
34519 |
|
34520 | labelRowsPerPage: propTypes.node,
|
34521 |
|
34522 | |
34523 |
|
34524 |
|
34525 | nextIconButtonProps: propTypes.object,
|
34526 |
|
34527 | |
34528 |
|
34529 |
|
34530 |
|
34531 |
|
34532 | nextIconButtonText: propTypes.string,
|
34533 |
|
34534 | |
34535 |
|
34536 |
|
34537 |
|
34538 |
|
34539 |
|
34540 | onChangePage: propTypes.func.isRequired,
|
34541 |
|
34542 | |
34543 |
|
34544 |
|
34545 |
|
34546 |
|
34547 | onChangeRowsPerPage: propTypes.func,
|
34548 |
|
34549 | |
34550 |
|
34551 |
|
34552 | page: chainPropTypes(propTypes.number.isRequired, function (props) {
|
34553 | var count = props.count,
|
34554 | page = props.page,
|
34555 | rowsPerPage = props.rowsPerPage;
|
34556 | var newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
|
34557 |
|
34558 | if (page < 0 || page > newLastPage) {
|
34559 | return new Error('Material-UI: the page prop of a TablePagination is out of range ' + "(0 to ".concat(newLastPage, ", but page is ").concat(page, ")."));
|
34560 | }
|
34561 |
|
34562 | return null;
|
34563 | }),
|
34564 |
|
34565 | |
34566 |
|
34567 |
|
34568 | rowsPerPage: propTypes.number.isRequired,
|
34569 |
|
34570 | |
34571 |
|
34572 |
|
34573 |
|
34574 | rowsPerPageOptions: propTypes.array,
|
34575 |
|
34576 | |
34577 |
|
34578 |
|
34579 | SelectProps: propTypes.object
|
34580 | } ;
|
34581 | var TablePagination$1 = withStyles$1(styles$1C, {
|
34582 | name: 'MuiTablePagination'
|
34583 | })(TablePagination);
|
34584 |
|
34585 | var styles$1D = function styles(theme) {
|
34586 | return {
|
34587 |
|
34588 | root: {
|
34589 | color: 'inherit',
|
34590 | display: 'table-row',
|
34591 | verticalAlign: 'middle',
|
34592 |
|
34593 | outline: 0,
|
34594 | '&$selected': {
|
34595 | backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.04)'
|
34596 | : 'rgba(255, 255, 255, 0.08)'
|
34597 | },
|
34598 | '&$hover:hover': {
|
34599 | backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.07)'
|
34600 | : 'rgba(255, 255, 255, 0.14)'
|
34601 | }
|
34602 | },
|
34603 |
|
34604 |
|
34605 | selected: {},
|
34606 |
|
34607 |
|
34608 | hover: {},
|
34609 |
|
34610 |
|
34611 | head: {},
|
34612 |
|
34613 |
|
34614 | footer: {}
|
34615 | };
|
34616 | };
|
34617 | |
34618 |
|
34619 |
|
34620 |
|
34621 |
|
34622 | var TableRow = React__default.forwardRef(function TableRow(props, ref) {
|
34623 | var classes = props.classes,
|
34624 | className = props.className,
|
34625 | _props$component = props.component,
|
34626 | Component = _props$component === void 0 ? 'tr' : _props$component,
|
34627 | _props$hover = props.hover,
|
34628 | hover = _props$hover === void 0 ? false : _props$hover,
|
34629 | _props$selected = props.selected,
|
34630 | selected = _props$selected === void 0 ? false : _props$selected,
|
34631 | other = _objectWithoutProperties(props, ["classes", "className", "component", "hover", "selected"]);
|
34632 |
|
34633 | var tablelvl2 = React__default.useContext(Tablelvl2Context);
|
34634 | return React__default.createElement(Component, _extends({
|
34635 | ref: ref,
|
34636 | className: clsx(classes.root, className, tablelvl2 && {
|
34637 | head: classes.head,
|
34638 | footer: classes.footer
|
34639 | }[tablelvl2.variant], hover && classes.hover, selected && classes.selected)
|
34640 | }, other));
|
34641 | });
|
34642 | TableRow.propTypes = {
|
34643 | |
34644 |
|
34645 |
|
34646 | children: propTypes.node,
|
34647 |
|
34648 | |
34649 |
|
34650 |
|
34651 |
|
34652 | classes: propTypes.object.isRequired,
|
34653 |
|
34654 | |
34655 |
|
34656 |
|
34657 | className: propTypes.string,
|
34658 |
|
34659 | |
34660 |
|
34661 |
|
34662 |
|
34663 | component: propTypes.elementType,
|
34664 |
|
34665 | |
34666 |
|
34667 |
|
34668 | hover: propTypes.bool,
|
34669 |
|
34670 | |
34671 |
|
34672 |
|
34673 | selected: propTypes.bool
|
34674 | } ;
|
34675 | var TableRow$1 = withStyles$1(styles$1D, {
|
34676 | name: 'MuiTableRow'
|
34677 | })(TableRow);
|
34678 |
|
34679 | |
34680 |
|
34681 |
|
34682 |
|
34683 | var ArrowDownwardIcon = createSvgIcon(React__default.createElement("path", {
|
34684 | d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
34685 | }), 'ArrowDownward');
|
34686 |
|
34687 | var styles$1E = function styles(theme) {
|
34688 | return {
|
34689 |
|
34690 | root: {
|
34691 | cursor: 'pointer',
|
34692 | display: 'inline-flex',
|
34693 | justifyContent: 'flex-start',
|
34694 | flexDirection: 'inherit',
|
34695 | alignItems: 'center',
|
34696 | '&:focus': {
|
34697 | color: theme.palette.text.secondary
|
34698 | },
|
34699 | '&:hover': {
|
34700 | color: theme.palette.text.secondary,
|
34701 | '& $icon': {
|
34702 | opacity: 1
|
34703 | }
|
34704 | },
|
34705 | '&$active': {
|
34706 | color: theme.palette.text.primary,
|
34707 |
|
34708 | '&& $icon': {
|
34709 | opacity: 1,
|
34710 | color: theme.palette.text.secondary
|
34711 | }
|
34712 | }
|
34713 | },
|
34714 |
|
34715 |
|
34716 | active: {},
|
34717 |
|
34718 |
|
34719 | icon: {
|
34720 | marginRight: 4,
|
34721 | marginLeft: 4,
|
34722 | opacity: 0,
|
34723 | transition: theme.transitions.create(['opacity', 'transform'], {
|
34724 | duration: theme.transitions.duration.shorter
|
34725 | }),
|
34726 | userSelect: 'none'
|
34727 | },
|
34728 |
|
34729 |
|
34730 | iconDirectionDesc: {
|
34731 | transform: 'rotate(0deg)'
|
34732 | },
|
34733 |
|
34734 |
|
34735 | iconDirectionAsc: {
|
34736 | transform: 'rotate(180deg)'
|
34737 | }
|
34738 | };
|
34739 | };
|
34740 | |
34741 |
|
34742 |
|
34743 |
|
34744 | var TableSortLabel = React__default.forwardRef(function TableSortLabel(props, ref) {
|
34745 | var _props$active = props.active,
|
34746 | active = _props$active === void 0 ? false : _props$active,
|
34747 | children = props.children,
|
34748 | classes = props.classes,
|
34749 | className = props.className,
|
34750 | _props$direction = props.direction,
|
34751 | direction = _props$direction === void 0 ? 'desc' : _props$direction,
|
34752 | _props$hideSortIcon = props.hideSortIcon,
|
34753 | hideSortIcon = _props$hideSortIcon === void 0 ? false : _props$hideSortIcon,
|
34754 | _props$IconComponent = props.IconComponent,
|
34755 | IconComponent = _props$IconComponent === void 0 ? ArrowDownwardIcon : _props$IconComponent,
|
34756 | other = _objectWithoutProperties(props, ["active", "children", "classes", "className", "direction", "hideSortIcon", "IconComponent"]);
|
34757 |
|
34758 | return React__default.createElement(ButtonBase$1, _extends({
|
34759 | className: clsx(classes.root, className, active && classes.active),
|
34760 | component: "span",
|
34761 | disableRipple: true,
|
34762 | ref: ref
|
34763 | }, other), children, hideSortIcon && !active ? null : React__default.createElement(IconComponent, {
|
34764 | className: clsx(classes.icon, classes["iconDirection".concat(capitalize(direction))])
|
34765 | }));
|
34766 | });
|
34767 | TableSortLabel.propTypes = {
|
34768 | |
34769 |
|
34770 |
|
34771 | active: propTypes.bool,
|
34772 |
|
34773 | |
34774 |
|
34775 |
|
34776 | children: propTypes.node,
|
34777 |
|
34778 | |
34779 |
|
34780 |
|
34781 |
|
34782 | classes: propTypes.object.isRequired,
|
34783 |
|
34784 | |
34785 |
|
34786 |
|
34787 | className: propTypes.string,
|
34788 |
|
34789 | |
34790 |
|
34791 |
|
34792 | direction: propTypes.oneOf(['asc', 'desc']),
|
34793 |
|
34794 | |
34795 |
|
34796 |
|
34797 | hideSortIcon: propTypes.bool,
|
34798 |
|
34799 | |
34800 |
|
34801 |
|
34802 | IconComponent: propTypes.elementType
|
34803 | } ;
|
34804 | var TableSortLabel$1 = withStyles$1(styles$1E, {
|
34805 | name: 'MuiTableSortLabel'
|
34806 | })(TableSortLabel);
|
34807 |
|
34808 |
|
34809 | var inDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
|
34810 | var cachedType;
|
34811 |
|
34812 | function detectScrollType() {
|
34813 | if (cachedType) {
|
34814 | return cachedType;
|
34815 | }
|
34816 | if (!inDOM || !window.document.body) {
|
34817 | return 'indeterminate';
|
34818 | }
|
34819 | var dummy = window.document.createElement('div');
|
34820 | dummy.appendChild(document.createTextNode('ABCD'));
|
34821 | dummy.dir = 'rtl';
|
34822 | dummy.style.fontSize = '14px';
|
34823 | dummy.style.width = '4px';
|
34824 | dummy.style.height = '1px';
|
34825 | dummy.style.position = 'absolute';
|
34826 | dummy.style.top = '-1000px';
|
34827 | dummy.style.overflow = 'scroll';
|
34828 | document.body.appendChild(dummy);
|
34829 | cachedType = 'reverse';
|
34830 | if (dummy.scrollLeft > 0) {
|
34831 | cachedType = 'default';
|
34832 | }
|
34833 | else {
|
34834 | dummy.scrollLeft = 1;
|
34835 | if (dummy.scrollLeft === 0) {
|
34836 | cachedType = 'negative';
|
34837 | }
|
34838 | }
|
34839 | document.body.removeChild(dummy);
|
34840 | return cachedType;
|
34841 | }
|
34842 |
|
34843 | function getNormalizedScrollLeft(element, direction) {
|
34844 | var scrollLeft = element.scrollLeft;
|
34845 |
|
34846 | if (direction !== 'rtl') {
|
34847 | return scrollLeft;
|
34848 | }
|
34849 | var type = detectScrollType();
|
34850 | if (type === 'indeterminate') {
|
34851 | return Number.NaN;
|
34852 | }
|
34853 | switch (type) {
|
34854 | case 'negative':
|
34855 | return element.scrollWidth - element.clientWidth + scrollLeft;
|
34856 | case 'reverse':
|
34857 | return element.scrollWidth - element.clientWidth - scrollLeft;
|
34858 | }
|
34859 | return scrollLeft;
|
34860 | }
|
34861 |
|
34862 | function easeInOutSin(time) {
|
34863 | return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
|
34864 | }
|
34865 |
|
34866 | function animate(property, element, to) {
|
34867 | var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
34868 | var cb = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : function () {};
|
34869 | var _options$ease = options.ease,
|
34870 | ease = _options$ease === void 0 ? easeInOutSin : _options$ease,
|
34871 | _options$duration = options.duration,
|
34872 | duration = _options$duration === void 0 ? 300 : _options$duration;
|
34873 | var start = null;
|
34874 | var from = element[property];
|
34875 | var cancelled = false;
|
34876 |
|
34877 | var cancel = function cancel() {
|
34878 | cancelled = true;
|
34879 | };
|
34880 |
|
34881 | var step = function step(timestamp) {
|
34882 | if (cancelled) {
|
34883 | cb(new Error('Animation cancelled'));
|
34884 | return;
|
34885 | }
|
34886 |
|
34887 | if (start === null) {
|
34888 | start = timestamp;
|
34889 | }
|
34890 |
|
34891 | var time = Math.min(1, (timestamp - start) / duration);
|
34892 | element[property] = ease(time) * (to - from) + from;
|
34893 |
|
34894 | if (time >= 1) {
|
34895 | requestAnimationFrame(function () {
|
34896 | cb(null);
|
34897 | });
|
34898 | return;
|
34899 | }
|
34900 |
|
34901 | requestAnimationFrame(step);
|
34902 | };
|
34903 |
|
34904 | if (from === to) {
|
34905 | cb(new Error('Element already at target position'));
|
34906 | return cancel;
|
34907 | }
|
34908 |
|
34909 | requestAnimationFrame(step);
|
34910 | return cancel;
|
34911 | }
|
34912 |
|
34913 | var styles$1F = {
|
34914 | width: 99,
|
34915 | height: 99,
|
34916 | position: 'absolute',
|
34917 | top: -9999,
|
34918 | overflow: 'scroll'
|
34919 | };
|
34920 | |
34921 |
|
34922 |
|
34923 |
|
34924 |
|
34925 |
|
34926 | function ScrollbarSize(props) {
|
34927 | var onChange = props.onChange,
|
34928 | other = _objectWithoutProperties(props, ["onChange"]);
|
34929 |
|
34930 | var scrollbarHeight = React__default.useRef();
|
34931 | var nodeRef = React__default.useRef(null);
|
34932 |
|
34933 | var setMeasurements = function setMeasurements() {
|
34934 | scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
|
34935 | };
|
34936 |
|
34937 | React__default.useEffect(function () {
|
34938 | var handleResize = debounce(function () {
|
34939 | var prevHeight = scrollbarHeight.current;
|
34940 | setMeasurements();
|
34941 |
|
34942 | if (prevHeight !== scrollbarHeight.current) {
|
34943 | onChange(scrollbarHeight.current);
|
34944 | }
|
34945 | });
|
34946 | window.addEventListener('resize', handleResize);
|
34947 | return function () {
|
34948 | handleResize.clear();
|
34949 | window.removeEventListener('resize', handleResize);
|
34950 | };
|
34951 | }, [onChange]);
|
34952 | React__default.useEffect(function () {
|
34953 | setMeasurements();
|
34954 | onChange(scrollbarHeight.current);
|
34955 | }, [onChange]);
|
34956 | return React__default.createElement("div", _extends({
|
34957 | style: styles$1F,
|
34958 | ref: nodeRef
|
34959 | }, other));
|
34960 | }
|
34961 | ScrollbarSize.propTypes = {
|
34962 | onChange: propTypes.func.isRequired
|
34963 | } ;
|
34964 |
|
34965 | var styles$1G = function styles(theme) {
|
34966 | return {
|
34967 | root: {
|
34968 | position: 'absolute',
|
34969 | height: 2,
|
34970 | bottom: 0,
|
34971 | width: '100%',
|
34972 | transition: theme.transitions.create()
|
34973 | },
|
34974 | colorPrimary: {
|
34975 | backgroundColor: theme.palette.primary.main
|
34976 | },
|
34977 | colorSecondary: {
|
34978 | backgroundColor: theme.palette.secondary.main
|
34979 | },
|
34980 | vertical: {
|
34981 | height: '100%',
|
34982 | width: 2,
|
34983 | right: 0
|
34984 | }
|
34985 | };
|
34986 | };
|
34987 | |
34988 |
|
34989 |
|
34990 |
|
34991 | var TabIndicator = React__default.forwardRef(function TabIndicator(props, ref) {
|
34992 | var classes = props.classes,
|
34993 | className = props.className,
|
34994 | color = props.color,
|
34995 | orientation = props.orientation,
|
34996 | other = _objectWithoutProperties(props, ["classes", "className", "color", "orientation"]);
|
34997 |
|
34998 | return React__default.createElement("span", _extends({
|
34999 | className: clsx(classes.root, classes["color".concat(capitalize(color))], className, {
|
35000 | vertical: classes.vertical
|
35001 | }[orientation]),
|
35002 | ref: ref
|
35003 | }, other));
|
35004 | });
|
35005 | TabIndicator.propTypes = {
|
35006 | |
35007 |
|
35008 |
|
35009 |
|
35010 | classes: propTypes.object.isRequired,
|
35011 |
|
35012 | |
35013 |
|
35014 |
|
35015 | className: propTypes.string,
|
35016 |
|
35017 | |
35018 |
|
35019 |
|
35020 |
|
35021 | color: propTypes.oneOf(['primary', 'secondary']).isRequired,
|
35022 |
|
35023 | |
35024 |
|
35025 |
|
35026 | orientation: propTypes.oneOf(['horizontal', 'vertical']).isRequired
|
35027 | } ;
|
35028 | var TabIndicator$1 = withStyles$1(styles$1G, {
|
35029 | name: 'PrivateTabIndicator'
|
35030 | })(TabIndicator);
|
35031 |
|
35032 | var styles$1H = {
|
35033 | root: {
|
35034 | width: 40,
|
35035 | flexShrink: 0
|
35036 | },
|
35037 | vertical: {
|
35038 | width: '100%',
|
35039 | height: 40,
|
35040 | '& svg': {
|
35041 | transform: 'rotate(90deg)'
|
35042 | }
|
35043 | }
|
35044 | };
|
35045 | |
35046 |
|
35047 |
|
35048 |
|
35049 | var _ref$3 = React__default.createElement(KeyboardArrowLeft, {
|
35050 | fontSize: "small"
|
35051 | });
|
35052 |
|
35053 | var _ref2$2 = React__default.createElement(KeyboardArrowRight, {
|
35054 | fontSize: "small"
|
35055 | });
|
35056 |
|
35057 | var TabScrollButton = React__default.forwardRef(function TabScrollButton(props, ref) {
|
35058 | var classes = props.classes,
|
35059 | classNameProp = props.className,
|
35060 | direction = props.direction,
|
35061 | orientation = props.orientation,
|
35062 | visible = props.visible,
|
35063 | other = _objectWithoutProperties(props, ["classes", "className", "direction", "orientation", "visible"]);
|
35064 |
|
35065 | var className = clsx(classes.root, classNameProp, {
|
35066 | vertical: classes.vertical
|
35067 | }[orientation]);
|
35068 |
|
35069 | if (!visible) {
|
35070 | return React__default.createElement("div", {
|
35071 | className: className
|
35072 | });
|
35073 | }
|
35074 |
|
35075 | return React__default.createElement(ButtonBase$1, _extends({
|
35076 | component: "div",
|
35077 | className: className,
|
35078 | ref: ref,
|
35079 | role: null,
|
35080 | tabIndex: null
|
35081 | }, other), direction === 'left' ? _ref$3 : _ref2$2);
|
35082 | });
|
35083 | TabScrollButton.propTypes = {
|
35084 | |
35085 |
|
35086 |
|
35087 |
|
35088 | classes: propTypes.object.isRequired,
|
35089 |
|
35090 | |
35091 |
|
35092 |
|
35093 | className: propTypes.string,
|
35094 |
|
35095 | |
35096 |
|
35097 |
|
35098 | direction: propTypes.oneOf(['left', 'right']).isRequired,
|
35099 |
|
35100 | |
35101 |
|
35102 |
|
35103 | orientation: propTypes.oneOf(['horizontal', 'vertical']).isRequired,
|
35104 |
|
35105 | |
35106 |
|
35107 |
|
35108 | visible: propTypes.bool.isRequired
|
35109 | } ;
|
35110 | var TabScrollButton$1 = withStyles$1(styles$1H, {
|
35111 | name: 'PrivateTabScrollButton'
|
35112 | })(TabScrollButton);
|
35113 |
|
35114 | var styles$1I = function styles(theme) {
|
35115 | return {
|
35116 |
|
35117 | root: {
|
35118 | overflow: 'hidden',
|
35119 | minHeight: 48,
|
35120 | WebkitOverflowScrolling: 'touch',
|
35121 |
|
35122 | display: 'flex'
|
35123 | },
|
35124 |
|
35125 |
|
35126 | vertical: {
|
35127 | flexDirection: 'column'
|
35128 | },
|
35129 |
|
35130 |
|
35131 | flexContainer: {
|
35132 | display: 'flex'
|
35133 | },
|
35134 |
|
35135 |
|
35136 | flexContainerVertical: {
|
35137 | flexDirection: 'column'
|
35138 | },
|
35139 |
|
35140 |
|
35141 | centered: {
|
35142 | justifyContent: 'center'
|
35143 | },
|
35144 |
|
35145 |
|
35146 | scroller: {
|
35147 | position: 'relative',
|
35148 | display: 'inline-block',
|
35149 | flex: '1 1 auto',
|
35150 | whiteSpace: 'nowrap'
|
35151 | },
|
35152 |
|
35153 |
|
35154 | fixed: {
|
35155 | overflowX: 'hidden',
|
35156 | width: '100%'
|
35157 | },
|
35158 |
|
35159 |
|
35160 | scrollable: {
|
35161 | overflowX: 'scroll',
|
35162 |
|
35163 | scrollbarWidth: 'none',
|
35164 |
|
35165 | '&::-webkit-scrollbar': {
|
35166 | display: 'none'
|
35167 |
|
35168 | }
|
35169 | },
|
35170 |
|
35171 |
|
35172 | scrollButtons: {},
|
35173 |
|
35174 |
|
35175 | scrollButtonsDesktop: _defineProperty({}, theme.breakpoints.down('xs'), {
|
35176 | display: 'none'
|
35177 | }),
|
35178 |
|
35179 |
|
35180 | indicator: {}
|
35181 | };
|
35182 | };
|
35183 | var Tabs = React__default.forwardRef(function Tabs(props, ref) {
|
35184 | var action = props.action,
|
35185 | _props$centered = props.centered,
|
35186 | centered = _props$centered === void 0 ? false : _props$centered,
|
35187 | childrenProp = props.children,
|
35188 | classes = props.classes,
|
35189 | className = props.className,
|
35190 | _props$component = props.component,
|
35191 | Component = _props$component === void 0 ? 'div' : _props$component,
|
35192 | _props$indicatorColor = props.indicatorColor,
|
35193 | indicatorColor = _props$indicatorColor === void 0 ? 'secondary' : _props$indicatorColor,
|
35194 | onChange = props.onChange,
|
35195 | _props$orientation = props.orientation,
|
35196 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
35197 | _props$ScrollButtonCo = props.ScrollButtonComponent,
|
35198 | ScrollButtonComponent = _props$ScrollButtonCo === void 0 ? TabScrollButton$1 : _props$ScrollButtonCo,
|
35199 | _props$scrollButtons = props.scrollButtons,
|
35200 | scrollButtons = _props$scrollButtons === void 0 ? 'auto' : _props$scrollButtons,
|
35201 | _props$TabIndicatorPr = props.TabIndicatorProps,
|
35202 | TabIndicatorProps = _props$TabIndicatorPr === void 0 ? {} : _props$TabIndicatorPr,
|
35203 | _props$textColor = props.textColor,
|
35204 | textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,
|
35205 | value = props.value,
|
35206 | _props$variant = props.variant,
|
35207 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
35208 | other = _objectWithoutProperties(props, ["action", "centered", "children", "classes", "className", "component", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "TabIndicatorProps", "textColor", "value", "variant"]);
|
35209 |
|
35210 | var theme = useTheme$1();
|
35211 | var scrollable = variant === 'scrollable';
|
35212 | var isRtl = theme.direction === 'rtl';
|
35213 | var vertical = orientation === 'vertical';
|
35214 | var scrollStart = vertical ? 'scrollTop' : 'scrollLeft';
|
35215 | var start = vertical ? 'top' : 'left';
|
35216 | var end = vertical ? 'bottom' : 'right';
|
35217 | var clientSize = vertical ? 'clientHeight' : 'clientWidth';
|
35218 | var size = vertical ? 'height' : 'width';
|
35219 |
|
35220 | {
|
35221 | if (centered && scrollable) {
|
35222 | console.error('Material-UI: you can not use the `centered={true}` and `variant="scrollable"` properties ' + 'at the same time on a `Tabs` component.');
|
35223 | }
|
35224 | }
|
35225 |
|
35226 | var _React$useState = React__default.useState(false),
|
35227 | mounted = _React$useState[0],
|
35228 | setMounted = _React$useState[1];
|
35229 |
|
35230 | var _React$useState2 = React__default.useState({}),
|
35231 | indicatorStyle = _React$useState2[0],
|
35232 | setIndicatorStyle = _React$useState2[1];
|
35233 |
|
35234 | var _React$useState3 = React__default.useState({
|
35235 | start: false,
|
35236 | end: false
|
35237 | }),
|
35238 | displayScroll = _React$useState3[0],
|
35239 | setDisplayScroll = _React$useState3[1];
|
35240 |
|
35241 | var _React$useState4 = React__default.useState({
|
35242 | overflow: 'hidden',
|
35243 | marginBottom: null
|
35244 | }),
|
35245 | scrollerStyle = _React$useState4[0],
|
35246 | setScrollerStyle = _React$useState4[1];
|
35247 |
|
35248 | var valueToIndex = new Map();
|
35249 | var tabsRef = React__default.useRef(null);
|
35250 | var childrenWrapperRef = React__default.useRef(null);
|
35251 |
|
35252 | var getTabsMeta = function getTabsMeta() {
|
35253 | var tabsNode = tabsRef.current;
|
35254 | var tabsMeta;
|
35255 |
|
35256 | if (tabsNode) {
|
35257 | var rect = tabsNode.getBoundingClientRect();
|
35258 |
|
35259 | tabsMeta = {
|
35260 | clientWidth: tabsNode.clientWidth,
|
35261 | scrollLeft: tabsNode.scrollLeft,
|
35262 | scrollTop: tabsNode.scrollTop,
|
35263 | scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, theme.direction),
|
35264 | scrollWidth: tabsNode.scrollWidth,
|
35265 | top: rect.top,
|
35266 | bottom: rect.bottom,
|
35267 | left: rect.left,
|
35268 | right: rect.right
|
35269 | };
|
35270 | }
|
35271 |
|
35272 | var tabMeta;
|
35273 |
|
35274 | if (tabsNode && value !== false) {
|
35275 | var _children = childrenWrapperRef.current.children;
|
35276 |
|
35277 | if (_children.length > 0) {
|
35278 | var tab = _children[valueToIndex.get(value)];
|
35279 |
|
35280 | {
|
35281 | if (!tab) {
|
35282 | console.error(["Material-UI: the value provided `".concat(value, "` to the Tabs component is invalid."), 'None of the Tabs children have this value.', valueToIndex.keys ? "You can provide one of the following values: ".concat(Array.from(valueToIndex.keys()).join(', '), ".") : null].join('\n'));
|
35283 | }
|
35284 | }
|
35285 |
|
35286 | tabMeta = tab ? tab.getBoundingClientRect() : null;
|
35287 | }
|
35288 | }
|
35289 |
|
35290 | return {
|
35291 | tabsMeta: tabsMeta,
|
35292 | tabMeta: tabMeta
|
35293 | };
|
35294 | };
|
35295 |
|
35296 | var updateIndicatorState = useEventCallback(function () {
|
35297 | var _newIndicatorStyle;
|
35298 |
|
35299 | var _getTabsMeta = getTabsMeta(),
|
35300 | tabsMeta = _getTabsMeta.tabsMeta,
|
35301 | tabMeta = _getTabsMeta.tabMeta;
|
35302 |
|
35303 | var startValue = 0;
|
35304 |
|
35305 | if (tabMeta && tabsMeta) {
|
35306 | if (vertical) {
|
35307 | startValue = tabMeta.top - tabsMeta.top + tabsMeta.scrollTop;
|
35308 | } else {
|
35309 | var correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;
|
35310 | startValue = tabMeta.left - tabsMeta.left + correction;
|
35311 | }
|
35312 | }
|
35313 |
|
35314 | var newIndicatorStyle = (_newIndicatorStyle = {}, _defineProperty(_newIndicatorStyle, start, startValue), _defineProperty(_newIndicatorStyle, size, tabMeta ? tabMeta[size] : 0), _newIndicatorStyle);
|
35315 |
|
35316 | if (isNaN(indicatorStyle[start]) || isNaN(indicatorStyle[size])) {
|
35317 | setIndicatorStyle(newIndicatorStyle);
|
35318 | } else {
|
35319 | var dStart = Math.abs(indicatorStyle[start] - newIndicatorStyle[start]);
|
35320 | var dSize = Math.abs(indicatorStyle[size] - newIndicatorStyle[size]);
|
35321 |
|
35322 | if (dStart >= 1 || dSize >= 1) {
|
35323 | setIndicatorStyle(newIndicatorStyle);
|
35324 | }
|
35325 | }
|
35326 | });
|
35327 |
|
35328 | var scroll = function scroll(scrollValue) {
|
35329 | animate(scrollStart, tabsRef.current, scrollValue);
|
35330 | };
|
35331 |
|
35332 | var moveTabsScroll = function moveTabsScroll(delta) {
|
35333 | var scrollValue = tabsRef.current[scrollStart];
|
35334 |
|
35335 | if (vertical) {
|
35336 | scrollValue += delta;
|
35337 | } else {
|
35338 | scrollValue += delta * (isRtl ? -1 : 1);
|
35339 |
|
35340 | scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1;
|
35341 | }
|
35342 |
|
35343 | scroll(scrollValue);
|
35344 | };
|
35345 |
|
35346 | var handleStartScrollClick = function handleStartScrollClick() {
|
35347 | moveTabsScroll(-tabsRef.current[clientSize]);
|
35348 | };
|
35349 |
|
35350 | var handleEndScrollClick = function handleEndScrollClick() {
|
35351 | moveTabsScroll(tabsRef.current[clientSize]);
|
35352 | };
|
35353 |
|
35354 | var handleScrollbarSizeChange = React__default.useCallback(function (scrollbarHeight) {
|
35355 | setScrollerStyle({
|
35356 | overflow: null,
|
35357 | marginBottom: -scrollbarHeight
|
35358 | });
|
35359 | }, []);
|
35360 |
|
35361 | var getConditionalElements = function getConditionalElements() {
|
35362 | var conditionalElements = {};
|
35363 | conditionalElements.scrollbarSizeListener = scrollable ? React__default.createElement(ScrollbarSize, {
|
35364 | className: classes.scrollable,
|
35365 | onChange: handleScrollbarSizeChange
|
35366 | }) : null;
|
35367 | var scrollButtonsActive = displayScroll.start || displayScroll.end;
|
35368 | var showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === 'desktop' || scrollButtons === 'on');
|
35369 | conditionalElements.scrollButtonStart = showScrollButtons ? React__default.createElement(ScrollButtonComponent, {
|
35370 | orientation: orientation,
|
35371 | direction: isRtl ? 'right' : 'left',
|
35372 | onClick: handleStartScrollClick,
|
35373 | visible: displayScroll.start,
|
35374 | className: clsx(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)
|
35375 | }) : null;
|
35376 | conditionalElements.scrollButtonEnd = showScrollButtons ? React__default.createElement(ScrollButtonComponent, {
|
35377 | orientation: orientation,
|
35378 | direction: isRtl ? 'left' : 'right',
|
35379 | onClick: handleEndScrollClick,
|
35380 | visible: displayScroll.end,
|
35381 | className: clsx(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)
|
35382 | }) : null;
|
35383 | return conditionalElements;
|
35384 | };
|
35385 |
|
35386 | var scrollSelectedIntoView = useEventCallback(function () {
|
35387 | var _getTabsMeta2 = getTabsMeta(),
|
35388 | tabsMeta = _getTabsMeta2.tabsMeta,
|
35389 | tabMeta = _getTabsMeta2.tabMeta;
|
35390 |
|
35391 | if (!tabMeta || !tabsMeta) {
|
35392 | return;
|
35393 | }
|
35394 |
|
35395 | if (tabMeta[start] < tabsMeta[start]) {
|
35396 |
|
35397 | var nextScrollStart = tabsMeta[scrollStart] + (tabMeta[start] - tabsMeta[start]);
|
35398 | scroll(nextScrollStart);
|
35399 | } else if (tabMeta[end] > tabsMeta[end]) {
|
35400 |
|
35401 | var _nextScrollStart = tabsMeta[scrollStart] + (tabMeta[end] - tabsMeta[end]);
|
35402 |
|
35403 | scroll(_nextScrollStart);
|
35404 | }
|
35405 | });
|
35406 | var updateScrollButtonState = useEventCallback(function () {
|
35407 | if (scrollable && scrollButtons !== 'off') {
|
35408 | var _tabsRef$current = tabsRef.current,
|
35409 | scrollTop = _tabsRef$current.scrollTop,
|
35410 | scrollHeight = _tabsRef$current.scrollHeight,
|
35411 | clientHeight = _tabsRef$current.clientHeight,
|
35412 | scrollWidth = _tabsRef$current.scrollWidth,
|
35413 | clientWidth = _tabsRef$current.clientWidth;
|
35414 | var showStartScroll;
|
35415 | var showEndScroll;
|
35416 |
|
35417 | if (vertical) {
|
35418 | showStartScroll = scrollTop > 1;
|
35419 | showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
|
35420 | } else {
|
35421 | var scrollLeft = getNormalizedScrollLeft(tabsRef.current, theme.direction);
|
35422 |
|
35423 | showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
|
35424 | showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
|
35425 | }
|
35426 |
|
35427 | if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {
|
35428 | setDisplayScroll({
|
35429 | start: showStartScroll,
|
35430 | end: showEndScroll
|
35431 | });
|
35432 | }
|
35433 | }
|
35434 | });
|
35435 | React__default.useEffect(function () {
|
35436 | var handleResize = debounce(function () {
|
35437 | updateIndicatorState();
|
35438 | updateScrollButtonState();
|
35439 | });
|
35440 | var win = ownerWindow(tabsRef.current);
|
35441 | win.addEventListener('resize', handleResize);
|
35442 | return function () {
|
35443 | handleResize.clear();
|
35444 | win.removeEventListener('resize', handleResize);
|
35445 | };
|
35446 | }, [updateIndicatorState, updateScrollButtonState]);
|
35447 | var handleTabsScroll = React__default.useCallback(debounce(function () {
|
35448 | updateScrollButtonState();
|
35449 | }));
|
35450 | React__default.useEffect(function () {
|
35451 | return function () {
|
35452 | handleTabsScroll.clear();
|
35453 | };
|
35454 | }, [handleTabsScroll]);
|
35455 | React__default.useEffect(function () {
|
35456 | setMounted(true);
|
35457 | }, []);
|
35458 | React__default.useEffect(function () {
|
35459 | updateIndicatorState();
|
35460 | updateScrollButtonState();
|
35461 | });
|
35462 | React__default.useEffect(function () {
|
35463 | scrollSelectedIntoView();
|
35464 | }, [scrollSelectedIntoView, indicatorStyle]);
|
35465 | React__default.useImperativeHandle(action, function () {
|
35466 | return {
|
35467 | updateIndicator: updateIndicatorState,
|
35468 | updateScrollButtons: updateScrollButtonState
|
35469 | };
|
35470 | }, [updateIndicatorState, updateScrollButtonState]);
|
35471 | var indicator = React__default.createElement(TabIndicator$1, _extends({
|
35472 | className: classes.indicator,
|
35473 | orientation: orientation,
|
35474 | color: indicatorColor
|
35475 | }, TabIndicatorProps, {
|
35476 | style: _extends({}, indicatorStyle, {}, TabIndicatorProps.style)
|
35477 | }));
|
35478 | var childIndex = 0;
|
35479 | var children = React__default.Children.map(childrenProp, function (child) {
|
35480 | if (!React__default.isValidElement(child)) {
|
35481 | return null;
|
35482 | }
|
35483 |
|
35484 | {
|
35485 | if (reactIs_2(child)) {
|
35486 | console.error(["Material-UI: the Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
35487 | }
|
35488 | }
|
35489 |
|
35490 | var childValue = child.props.value === undefined ? childIndex : child.props.value;
|
35491 | valueToIndex.set(childValue, childIndex);
|
35492 | var selected = childValue === value;
|
35493 | childIndex += 1;
|
35494 | return React__default.cloneElement(child, {
|
35495 | fullWidth: variant === 'fullWidth',
|
35496 | indicator: selected && !mounted && indicator,
|
35497 | selected: selected,
|
35498 | onChange: onChange,
|
35499 | textColor: textColor,
|
35500 | value: childValue
|
35501 | });
|
35502 | });
|
35503 | var conditionalElements = getConditionalElements();
|
35504 | return React__default.createElement(Component, _extends({
|
35505 | className: clsx(classes.root, className, vertical && classes.vertical),
|
35506 | ref: ref
|
35507 | }, other), conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, React__default.createElement("div", {
|
35508 | className: clsx(classes.scroller, scrollable ? classes.scrollable : classes.fixed),
|
35509 | style: scrollerStyle,
|
35510 | ref: tabsRef,
|
35511 | onScroll: handleTabsScroll
|
35512 | }, React__default.createElement("div", {
|
35513 | className: clsx(classes.flexContainer, vertical && classes.flexContainerVertical, centered && !scrollable && classes.centered),
|
35514 | ref: childrenWrapperRef,
|
35515 | role: "tablist"
|
35516 | }, children), mounted && indicator), conditionalElements.scrollButtonEnd);
|
35517 | });
|
35518 | Tabs.propTypes = {
|
35519 | |
35520 |
|
35521 |
|
35522 |
|
35523 |
|
35524 |
|
35525 |
|
35526 |
|
35527 | action: refType,
|
35528 |
|
35529 | |
35530 |
|
35531 |
|
35532 |
|
35533 | centered: propTypes.bool,
|
35534 |
|
35535 | |
35536 |
|
35537 |
|
35538 | children: propTypes.node,
|
35539 |
|
35540 | |
35541 |
|
35542 |
|
35543 |
|
35544 | classes: propTypes.object.isRequired,
|
35545 |
|
35546 | |
35547 |
|
35548 |
|
35549 | className: propTypes.string,
|
35550 |
|
35551 | |
35552 |
|
35553 |
|
35554 |
|
35555 | component: propTypes.elementType,
|
35556 |
|
35557 | |
35558 |
|
35559 |
|
35560 | indicatorColor: propTypes.oneOf(['secondary', 'primary']),
|
35561 |
|
35562 | |
35563 |
|
35564 |
|
35565 |
|
35566 |
|
35567 |
|
35568 | onChange: propTypes.func,
|
35569 |
|
35570 | |
35571 |
|
35572 |
|
35573 | orientation: propTypes.oneOf(['horizontal', 'vertical']),
|
35574 |
|
35575 | |
35576 |
|
35577 |
|
35578 | ScrollButtonComponent: propTypes.elementType,
|
35579 |
|
35580 | |
35581 |
|
35582 |
|
35583 |
|
35584 |
|
35585 |
|
35586 |
|
35587 |
|
35588 | scrollButtons: propTypes.oneOf(['auto', 'desktop', 'on', 'off']),
|
35589 |
|
35590 | |
35591 |
|
35592 |
|
35593 | TabIndicatorProps: propTypes.object,
|
35594 |
|
35595 | |
35596 |
|
35597 |
|
35598 | textColor: propTypes.oneOf(['secondary', 'primary', 'inherit']),
|
35599 |
|
35600 | |
35601 |
|
35602 |
|
35603 |
|
35604 | value: propTypes.any,
|
35605 |
|
35606 | |
35607 |
|
35608 |
|
35609 |
|
35610 |
|
35611 |
|
35612 |
|
35613 |
|
35614 |
|
35615 | variant: propTypes.oneOf(['standard', 'scrollable', 'fullWidth'])
|
35616 | } ;
|
35617 | var Tabs$1 = withStyles$1(styles$1I, {
|
35618 | name: 'MuiTabs'
|
35619 | })(Tabs);
|
35620 |
|
35621 | var variantComponent = {
|
35622 | standard: Input$1,
|
35623 | filled: FilledInput$1,
|
35624 | outlined: OutlinedInput$1
|
35625 | };
|
35626 | var styles$1J = {
|
35627 |
|
35628 | root: {}
|
35629 | };
|
35630 | |
35631 |
|
35632 |
|
35633 |
|
35634 |
|
35635 |
|
35636 |
|
35637 |
|
35638 |
|
35639 |
|
35640 |
|
35641 |
|
35642 |
|
35643 |
|
35644 |
|
35645 |
|
35646 |
|
35647 |
|
35648 |
|
35649 |
|
35650 |
|
35651 |
|
35652 |
|
35653 |
|
35654 |
|
35655 |
|
35656 |
|
35657 |
|
35658 |
|
35659 |
|
35660 |
|
35661 |
|
35662 |
|
35663 | var TextField = React__default.forwardRef(function TextField(props, ref) {
|
35664 | var autoComplete = props.autoComplete,
|
35665 | _props$autoFocus = props.autoFocus,
|
35666 | autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
|
35667 | children = props.children,
|
35668 | classes = props.classes,
|
35669 | className = props.className,
|
35670 | _props$color = props.color,
|
35671 | color = _props$color === void 0 ? 'primary' : _props$color,
|
35672 | defaultValue = props.defaultValue,
|
35673 | _props$disabled = props.disabled,
|
35674 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
35675 | _props$error = props.error,
|
35676 | error = _props$error === void 0 ? false : _props$error,
|
35677 | FormHelperTextProps = props.FormHelperTextProps,
|
35678 | _props$fullWidth = props.fullWidth,
|
35679 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
35680 | helperText = props.helperText,
|
35681 | hiddenLabel = props.hiddenLabel,
|
35682 | id = props.id,
|
35683 | InputLabelProps = props.InputLabelProps,
|
35684 | inputProps = props.inputProps,
|
35685 | InputProps = props.InputProps,
|
35686 | inputRef = props.inputRef,
|
35687 | label = props.label,
|
35688 | _props$multiline = props.multiline,
|
35689 | multiline = _props$multiline === void 0 ? false : _props$multiline,
|
35690 | name = props.name,
|
35691 | onBlur = props.onBlur,
|
35692 | onChange = props.onChange,
|
35693 | onFocus = props.onFocus,
|
35694 | placeholder = props.placeholder,
|
35695 | _props$required = props.required,
|
35696 | required = _props$required === void 0 ? false : _props$required,
|
35697 | rows = props.rows,
|
35698 | rowsMax = props.rowsMax,
|
35699 | _props$select = props.select,
|
35700 | select = _props$select === void 0 ? false : _props$select,
|
35701 | SelectProps = props.SelectProps,
|
35702 | type = props.type,
|
35703 | value = props.value,
|
35704 | _props$variant = props.variant,
|
35705 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
35706 | other = _objectWithoutProperties(props, ["autoComplete", "autoFocus", "children", "classes", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "hiddenLabel", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "rowsMax", "select", "SelectProps", "type", "value", "variant"]);
|
35707 |
|
35708 | var _React$useState = React__default.useState(0),
|
35709 | labelWidth = _React$useState[0],
|
35710 | setLabelWidth = _React$useState[1];
|
35711 |
|
35712 | var labelRef = React__default.useRef(null);
|
35713 | React__default.useEffect(function () {
|
35714 | if (variant === 'outlined') {
|
35715 |
|
35716 | var labelNode = ReactDOM.findDOMNode(labelRef.current);
|
35717 | setLabelWidth(labelNode != null ? labelNode.offsetWidth : 0);
|
35718 | }
|
35719 | }, [variant, required, label]);
|
35720 |
|
35721 | {
|
35722 | if (select && !children) {
|
35723 | console.error('Material-UI: `children` must be passed when using the `TextField` component with `select`.');
|
35724 | }
|
35725 | }
|
35726 |
|
35727 | var InputMore = {};
|
35728 |
|
35729 | if (variant === 'outlined') {
|
35730 | if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
|
35731 | InputMore.notched = InputLabelProps.shrink;
|
35732 | }
|
35733 |
|
35734 | InputMore.labelWidth = labelWidth;
|
35735 | }
|
35736 |
|
35737 | if (select) {
|
35738 |
|
35739 | if (!SelectProps || !SelectProps.native) {
|
35740 | InputMore.id = undefined;
|
35741 | }
|
35742 |
|
35743 | InputMore['aria-describedby'] = undefined;
|
35744 | }
|
35745 |
|
35746 | var helperTextId = helperText && id ? "".concat(id, "-helper-text") : undefined;
|
35747 | var inputLabelId = label && id ? "".concat(id, "-label") : undefined;
|
35748 | var InputComponent = variantComponent[variant];
|
35749 | var InputElement = React__default.createElement(InputComponent, _extends({
|
35750 | "aria-describedby": helperTextId,
|
35751 | autoComplete: autoComplete,
|
35752 | autoFocus: autoFocus,
|
35753 | defaultValue: defaultValue,
|
35754 | fullWidth: fullWidth,
|
35755 | multiline: multiline,
|
35756 | name: name,
|
35757 | rows: rows,
|
35758 | rowsMax: rowsMax,
|
35759 | type: type,
|
35760 | value: value,
|
35761 | id: id,
|
35762 | inputRef: inputRef,
|
35763 | onBlur: onBlur,
|
35764 | onChange: onChange,
|
35765 | onFocus: onFocus,
|
35766 | placeholder: placeholder,
|
35767 | inputProps: inputProps
|
35768 | }, InputMore, InputProps));
|
35769 | return React__default.createElement(FormControl$1, _extends({
|
35770 | className: clsx(classes.root, className),
|
35771 | disabled: disabled,
|
35772 | error: error,
|
35773 | fullWidth: fullWidth,
|
35774 | hiddenLabel: hiddenLabel,
|
35775 | ref: ref,
|
35776 | required: required,
|
35777 | color: color,
|
35778 | variant: variant
|
35779 | }, other), label && React__default.createElement(InputLabel$1, _extends({
|
35780 | htmlFor: id,
|
35781 | ref: labelRef,
|
35782 | id: inputLabelId
|
35783 | }, InputLabelProps), label), select ? React__default.createElement(Select$1, _extends({
|
35784 | "aria-describedby": helperTextId,
|
35785 | id: id,
|
35786 | labelId: inputLabelId,
|
35787 | value: value,
|
35788 | input: InputElement
|
35789 | }, SelectProps), children) : InputElement, helperText && React__default.createElement(FormHelperText$1, _extends({
|
35790 | id: helperTextId
|
35791 | }, FormHelperTextProps), helperText));
|
35792 | });
|
35793 | TextField.propTypes = {
|
35794 | |
35795 |
|
35796 |
|
35797 |
|
35798 |
|
35799 | autoComplete: propTypes.string,
|
35800 |
|
35801 | |
35802 |
|
35803 |
|
35804 | autoFocus: propTypes.bool,
|
35805 |
|
35806 | |
35807 |
|
35808 |
|
35809 | children: propTypes.node,
|
35810 |
|
35811 | |
35812 |
|
35813 |
|
35814 |
|
35815 | classes: propTypes.object.isRequired,
|
35816 |
|
35817 | |
35818 |
|
35819 |
|
35820 | className: propTypes.string,
|
35821 |
|
35822 | |
35823 |
|
35824 |
|
35825 | color: propTypes.oneOf(['primary', 'secondary']),
|
35826 |
|
35827 | |
35828 |
|
35829 |
|
35830 | defaultValue: propTypes.any,
|
35831 |
|
35832 | |
35833 |
|
35834 |
|
35835 | disabled: propTypes.bool,
|
35836 |
|
35837 | |
35838 |
|
35839 |
|
35840 | error: propTypes.bool,
|
35841 |
|
35842 | |
35843 |
|
35844 |
|
35845 | FormHelperTextProps: propTypes.object,
|
35846 |
|
35847 | |
35848 |
|
35849 |
|
35850 | fullWidth: propTypes.bool,
|
35851 |
|
35852 | |
35853 |
|
35854 |
|
35855 | helperText: propTypes.node,
|
35856 |
|
35857 | |
35858 |
|
35859 |
|
35860 | hiddenLabel: propTypes.bool,
|
35861 |
|
35862 | |
35863 |
|
35864 |
|
35865 |
|
35866 | id: propTypes.string,
|
35867 |
|
35868 | |
35869 |
|
35870 |
|
35871 | InputLabelProps: propTypes.object,
|
35872 |
|
35873 | |
35874 |
|
35875 |
|
35876 |
|
35877 |
|
35878 |
|
35879 | InputProps: propTypes.object,
|
35880 |
|
35881 | |
35882 |
|
35883 |
|
35884 | inputProps: propTypes.object,
|
35885 |
|
35886 | |
35887 |
|
35888 |
|
35889 | inputRef: refType,
|
35890 |
|
35891 | |
35892 |
|
35893 |
|
35894 | label: propTypes.node,
|
35895 |
|
35896 | |
35897 |
|
35898 |
|
35899 | margin: propTypes.oneOf(['none', 'dense', 'normal']),
|
35900 |
|
35901 | |
35902 |
|
35903 |
|
35904 | multiline: propTypes.bool,
|
35905 |
|
35906 | |
35907 |
|
35908 |
|
35909 | name: propTypes.string,
|
35910 |
|
35911 | |
35912 |
|
35913 |
|
35914 | onBlur: propTypes.func,
|
35915 |
|
35916 | |
35917 |
|
35918 |
|
35919 |
|
35920 |
|
35921 |
|
35922 | onChange: propTypes.func,
|
35923 |
|
35924 | |
35925 |
|
35926 |
|
35927 | onFocus: propTypes.func,
|
35928 |
|
35929 | |
35930 |
|
35931 |
|
35932 | placeholder: propTypes.string,
|
35933 |
|
35934 | |
35935 |
|
35936 |
|
35937 | required: propTypes.bool,
|
35938 |
|
35939 | |
35940 |
|
35941 |
|
35942 | rows: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
35943 |
|
35944 | |
35945 |
|
35946 |
|
35947 | rowsMax: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
35948 |
|
35949 | |
35950 |
|
35951 |
|
35952 |
|
35953 | select: propTypes.bool,
|
35954 |
|
35955 | |
35956 |
|
35957 |
|
35958 | SelectProps: propTypes.object,
|
35959 |
|
35960 | |
35961 |
|
35962 |
|
35963 | size: propTypes.oneOf(['small', 'medium']),
|
35964 |
|
35965 | |
35966 |
|
35967 |
|
35968 | type: propTypes.string,
|
35969 |
|
35970 | |
35971 |
|
35972 |
|
35973 | value: propTypes.any,
|
35974 |
|
35975 | |
35976 |
|
35977 |
|
35978 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
35979 | } ;
|
35980 | var TextField$1 = withStyles$1(styles$1J, {
|
35981 | name: 'MuiTextField'
|
35982 | })(TextField);
|
35983 |
|
35984 | function round$1(value) {
|
35985 | return Math.round(value * 1e5) / 1e5;
|
35986 | }
|
35987 |
|
35988 | function arrowGenerator() {
|
35989 | return {
|
35990 | '&[x-placement*="bottom"] $arrow': {
|
35991 | flip: false,
|
35992 | top: 0,
|
35993 | left: 0,
|
35994 | marginTop: '-0.95em',
|
35995 | marginLeft: 4,
|
35996 | marginRight: 4,
|
35997 | width: '2em',
|
35998 | height: '1em',
|
35999 | '&::before': {
|
36000 | flip: false,
|
36001 | borderWidth: '0 1em 1em 1em',
|
36002 | borderColor: 'transparent transparent currentcolor transparent'
|
36003 | }
|
36004 | },
|
36005 | '&[x-placement*="top"] $arrow': {
|
36006 | flip: false,
|
36007 | bottom: 0,
|
36008 | left: 0,
|
36009 | marginBottom: '-0.95em',
|
36010 | marginLeft: 4,
|
36011 | marginRight: 4,
|
36012 | width: '2em',
|
36013 | height: '1em',
|
36014 | '&::before': {
|
36015 | flip: false,
|
36016 | borderWidth: '1em 1em 0 1em',
|
36017 | borderColor: 'currentcolor transparent transparent transparent'
|
36018 | }
|
36019 | },
|
36020 | '&[x-placement*="right"] $arrow': {
|
36021 | flip: false,
|
36022 | left: 0,
|
36023 | marginLeft: '-0.95em',
|
36024 | marginTop: 4,
|
36025 | marginBottom: 4,
|
36026 | height: '2em',
|
36027 | width: '1em',
|
36028 | '&::before': {
|
36029 | flip: false,
|
36030 | borderWidth: '1em 1em 1em 0',
|
36031 | borderColor: 'transparent currentcolor transparent transparent'
|
36032 | }
|
36033 | },
|
36034 | '&[x-placement*="left"] $arrow': {
|
36035 | flip: false,
|
36036 | right: 0,
|
36037 | marginRight: '-0.95em',
|
36038 | marginTop: 4,
|
36039 | marginBottom: 4,
|
36040 | height: '2em',
|
36041 | width: '1em',
|
36042 | '&::before': {
|
36043 | flip: false,
|
36044 | borderWidth: '1em 0 1em 1em',
|
36045 | borderColor: 'transparent transparent transparent currentcolor'
|
36046 | }
|
36047 | }
|
36048 | };
|
36049 | }
|
36050 |
|
36051 | var styles$1K = function styles(theme) {
|
36052 | return {
|
36053 |
|
36054 | popper: {
|
36055 | zIndex: theme.zIndex.tooltip,
|
36056 | pointerEvents: 'none',
|
36057 | flip: false
|
36058 |
|
36059 | },
|
36060 |
|
36061 |
|
36062 | popperInteractive: {
|
36063 | pointerEvents: 'auto'
|
36064 | },
|
36065 |
|
36066 |
|
36067 | popperArrow: arrowGenerator(),
|
36068 |
|
36069 |
|
36070 | tooltip: {
|
36071 | backgroundColor: fade(theme.palette.grey[700], 0.9),
|
36072 | borderRadius: theme.shape.borderRadius,
|
36073 | color: theme.palette.common.white,
|
36074 | fontFamily: theme.typography.fontFamily,
|
36075 | padding: '4px 8px',
|
36076 | fontSize: theme.typography.pxToRem(10),
|
36077 | lineHeight: "".concat(round$1(14 / 10), "em"),
|
36078 | maxWidth: 300,
|
36079 | wordWrap: 'break-word',
|
36080 | fontWeight: theme.typography.fontWeightMedium
|
36081 | },
|
36082 |
|
36083 |
|
36084 | tooltipArrow: {
|
36085 | position: 'relative',
|
36086 | margin: '0'
|
36087 | },
|
36088 |
|
36089 |
|
36090 | arrow: {
|
36091 | position: 'absolute',
|
36092 | fontSize: 6,
|
36093 | color: fade(theme.palette.grey[700], 0.9),
|
36094 | '&::before': {
|
36095 | content: '""',
|
36096 | margin: 'auto',
|
36097 | display: 'block',
|
36098 | width: 0,
|
36099 | height: 0,
|
36100 | borderStyle: 'solid'
|
36101 | }
|
36102 | },
|
36103 |
|
36104 |
|
36105 | touch: {
|
36106 | padding: '8px 16px',
|
36107 | fontSize: theme.typography.pxToRem(14),
|
36108 | lineHeight: "".concat(round$1(16 / 14), "em"),
|
36109 | fontWeight: theme.typography.fontWeightRegular
|
36110 | },
|
36111 |
|
36112 |
|
36113 | tooltipPlacementLeft: _defineProperty({
|
36114 | transformOrigin: 'right center',
|
36115 | margin: '0 24px '
|
36116 | }, theme.breakpoints.up('sm'), {
|
36117 | margin: '0 14px'
|
36118 | }),
|
36119 |
|
36120 |
|
36121 | tooltipPlacementRight: _defineProperty({
|
36122 | transformOrigin: 'left center',
|
36123 | margin: '0 24px'
|
36124 | }, theme.breakpoints.up('sm'), {
|
36125 | margin: '0 14px'
|
36126 | }),
|
36127 |
|
36128 |
|
36129 | tooltipPlacementTop: _defineProperty({
|
36130 | transformOrigin: 'center bottom',
|
36131 | margin: '24px 0'
|
36132 | }, theme.breakpoints.up('sm'), {
|
36133 | margin: '14px 0'
|
36134 | }),
|
36135 |
|
36136 |
|
36137 | tooltipPlacementBottom: _defineProperty({
|
36138 | transformOrigin: 'center top',
|
36139 | margin: '24px 0'
|
36140 | }, theme.breakpoints.up('sm'), {
|
36141 | margin: '14px 0'
|
36142 | })
|
36143 | };
|
36144 | };
|
36145 | var hystersisOpen = false;
|
36146 | var hystersisTimer = null;
|
36147 | var Tooltip = React__default.forwardRef(function Tooltip(props, ref) {
|
36148 | var _props$arrow = props.arrow,
|
36149 | arrow = _props$arrow === void 0 ? false : _props$arrow,
|
36150 | children = props.children,
|
36151 | classes = props.classes,
|
36152 | _props$disableFocusLi = props.disableFocusListener,
|
36153 | disableFocusListener = _props$disableFocusLi === void 0 ? false : _props$disableFocusLi,
|
36154 | _props$disableHoverLi = props.disableHoverListener,
|
36155 | disableHoverListener = _props$disableHoverLi === void 0 ? false : _props$disableHoverLi,
|
36156 | _props$disableTouchLi = props.disableTouchListener,
|
36157 | disableTouchListener = _props$disableTouchLi === void 0 ? false : _props$disableTouchLi,
|
36158 | _props$enterDelay = props.enterDelay,
|
36159 | enterDelay = _props$enterDelay === void 0 ? 0 : _props$enterDelay,
|
36160 | _props$enterTouchDela = props.enterTouchDelay,
|
36161 | enterTouchDelay = _props$enterTouchDela === void 0 ? 700 : _props$enterTouchDela,
|
36162 | idProp = props.id,
|
36163 | _props$interactive = props.interactive,
|
36164 | interactive = _props$interactive === void 0 ? false : _props$interactive,
|
36165 | _props$leaveDelay = props.leaveDelay,
|
36166 | leaveDelay = _props$leaveDelay === void 0 ? 0 : _props$leaveDelay,
|
36167 | _props$leaveTouchDela = props.leaveTouchDelay,
|
36168 | leaveTouchDelay = _props$leaveTouchDela === void 0 ? 1500 : _props$leaveTouchDela,
|
36169 | onClose = props.onClose,
|
36170 | onOpen = props.onOpen,
|
36171 | openProp = props.open,
|
36172 | _props$placement = props.placement,
|
36173 | placement = _props$placement === void 0 ? 'bottom' : _props$placement,
|
36174 | PopperProps = props.PopperProps,
|
36175 | title = props.title,
|
36176 | _props$TransitionComp = props.TransitionComponent,
|
36177 | TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
|
36178 | TransitionProps = props.TransitionProps,
|
36179 | other = _objectWithoutProperties(props, ["arrow", "children", "classes", "disableFocusListener", "disableHoverListener", "disableTouchListener", "enterDelay", "enterTouchDelay", "id", "interactive", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperProps", "title", "TransitionComponent", "TransitionProps"]);
|
36180 |
|
36181 | var theme = useTheme$1();
|
36182 |
|
36183 | var _React$useState = React__default.useState(),
|
36184 | childNode = _React$useState[0],
|
36185 | setChildNode = _React$useState[1];
|
36186 |
|
36187 | var _React$useState2 = React__default.useState(null),
|
36188 | arrowRef = _React$useState2[0],
|
36189 | setArrowRef = _React$useState2[1];
|
36190 |
|
36191 | var ignoreNonTouchEvents = React__default.useRef(false);
|
36192 | var closeTimer = React__default.useRef();
|
36193 | var enterTimer = React__default.useRef();
|
36194 | var leaveTimer = React__default.useRef();
|
36195 | var touchTimer = React__default.useRef();
|
36196 |
|
36197 | var _React$useRef = React__default.useRef(openProp != null),
|
36198 | isControlled = _React$useRef.current;
|
36199 |
|
36200 | var _React$useState3 = React__default.useState(false),
|
36201 | openState = _React$useState3[0],
|
36202 | setOpenState = _React$useState3[1];
|
36203 |
|
36204 | var open = isControlled ? openProp : openState;
|
36205 |
|
36206 | {
|
36207 |
|
36208 | React__default.useEffect(function () {
|
36209 | if (isControlled !== (openProp != null)) {
|
36210 | console.error(["Material-UI: A component is changing ".concat(isControlled ? 'a ' : 'an un', "controlled Tooltip to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled Tooltip ' + 'element for the lifetime of the component.', 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
36211 | }
|
36212 | }, [openProp, isControlled]);
|
36213 | }
|
36214 |
|
36215 | {
|
36216 |
|
36217 | React__default.useEffect(function () {
|
36218 | if (childNode && childNode.disabled && !isControlled && title !== '' && childNode.tagName.toLowerCase() === 'button') {
|
36219 | console.error(['Material-UI: you are providing a disabled `button` child to the Tooltip component.', 'A disabled element does not fire events.', "Tooltip needs to listen to the child element's events to display the title.", '', 'Add a simple wrapper element, such as a `span`.'].join('\n'));
|
36220 | }
|
36221 | }, [isControlled, title, childNode]);
|
36222 | }
|
36223 |
|
36224 | var _React$useState4 = React__default.useState(),
|
36225 | defaultId = _React$useState4[0],
|
36226 | setDefaultId = _React$useState4[1];
|
36227 |
|
36228 | var id = idProp || defaultId;
|
36229 | React__default.useEffect(function () {
|
36230 | if (!open || defaultId) {
|
36231 | return;
|
36232 | }
|
36233 |
|
36234 |
|
36235 |
|
36236 |
|
36237 | setDefaultId("mui-tooltip-".concat(Math.round(Math.random() * 1e5)));
|
36238 | }, [open, defaultId]);
|
36239 | React__default.useEffect(function () {
|
36240 | return function () {
|
36241 | clearTimeout(closeTimer.current);
|
36242 | clearTimeout(enterTimer.current);
|
36243 | clearTimeout(leaveTimer.current);
|
36244 | clearTimeout(touchTimer.current);
|
36245 | };
|
36246 | }, []);
|
36247 |
|
36248 | var handleOpen = function handleOpen(event) {
|
36249 | clearTimeout(hystersisTimer);
|
36250 | hystersisOpen = true;
|
36251 |
|
36252 |
|
36253 |
|
36254 | if (!isControlled) {
|
36255 | setOpenState(true);
|
36256 | }
|
36257 |
|
36258 | if (onOpen) {
|
36259 | onOpen(event);
|
36260 | }
|
36261 | };
|
36262 |
|
36263 | var handleEnter = function handleEnter(event) {
|
36264 | var childrenProps = children.props;
|
36265 |
|
36266 | if (event.type === 'mouseover' && childrenProps.onMouseOver && event.currentTarget === childNode) {
|
36267 | childrenProps.onMouseOver(event);
|
36268 | }
|
36269 |
|
36270 | if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
|
36271 | return;
|
36272 | }
|
36273 |
|
36274 |
|
36275 |
|
36276 |
|
36277 | if (childNode) {
|
36278 | childNode.removeAttribute('title');
|
36279 | }
|
36280 |
|
36281 | clearTimeout(enterTimer.current);
|
36282 | clearTimeout(leaveTimer.current);
|
36283 |
|
36284 | if (enterDelay && !hystersisOpen) {
|
36285 | event.persist();
|
36286 | enterTimer.current = setTimeout(function () {
|
36287 | handleOpen(event);
|
36288 | }, enterDelay);
|
36289 | } else {
|
36290 | handleOpen(event);
|
36291 | }
|
36292 | };
|
36293 |
|
36294 | var _useIsFocusVisible = useIsFocusVisible(),
|
36295 | isFocusVisible = _useIsFocusVisible.isFocusVisible,
|
36296 | onBlurVisible = _useIsFocusVisible.onBlurVisible,
|
36297 | focusVisibleRef = _useIsFocusVisible.ref;
|
36298 |
|
36299 | var _React$useState5 = React__default.useState(false),
|
36300 | childIsFocusVisible = _React$useState5[0],
|
36301 | setChildIsFocusVisible = _React$useState5[1];
|
36302 |
|
36303 | var handleBlur = function handleBlur() {
|
36304 | if (childIsFocusVisible) {
|
36305 | setChildIsFocusVisible(false);
|
36306 | onBlurVisible();
|
36307 | }
|
36308 | };
|
36309 |
|
36310 | var handleFocus = function handleFocus(event) {
|
36311 |
|
36312 |
|
36313 |
|
36314 | if (!childNode) {
|
36315 | setChildNode(event.currentTarget);
|
36316 | }
|
36317 |
|
36318 | if (isFocusVisible(event)) {
|
36319 | setChildIsFocusVisible(true);
|
36320 | handleEnter(event);
|
36321 | }
|
36322 |
|
36323 | var childrenProps = children.props;
|
36324 |
|
36325 | if (childrenProps.onFocus && event.currentTarget === childNode) {
|
36326 | childrenProps.onFocus(event);
|
36327 | }
|
36328 | };
|
36329 |
|
36330 | var handleClose = function handleClose(event) {
|
36331 | clearTimeout(hystersisTimer);
|
36332 | hystersisTimer = setTimeout(function () {
|
36333 | hystersisOpen = false;
|
36334 | }, 500);
|
36335 |
|
36336 | if (!isControlled) {
|
36337 | setOpenState(false);
|
36338 | }
|
36339 |
|
36340 | if (onClose) {
|
36341 | onClose(event);
|
36342 | }
|
36343 |
|
36344 | clearTimeout(closeTimer.current);
|
36345 | closeTimer.current = setTimeout(function () {
|
36346 | ignoreNonTouchEvents.current = false;
|
36347 | }, theme.transitions.duration.shortest);
|
36348 | };
|
36349 |
|
36350 | var handleLeave = function handleLeave(event) {
|
36351 | var childrenProps = children.props;
|
36352 |
|
36353 | if (event.type === 'blur') {
|
36354 | if (childrenProps.onBlur && event.currentTarget === childNode) {
|
36355 | childrenProps.onBlur(event);
|
36356 | }
|
36357 |
|
36358 | handleBlur();
|
36359 | }
|
36360 |
|
36361 | if (event.type === 'mouseleave' && childrenProps.onMouseLeave && event.currentTarget === childNode) {
|
36362 | childrenProps.onMouseLeave(event);
|
36363 | }
|
36364 |
|
36365 | clearTimeout(enterTimer.current);
|
36366 | clearTimeout(leaveTimer.current);
|
36367 | event.persist();
|
36368 | leaveTimer.current = setTimeout(function () {
|
36369 | handleClose(event);
|
36370 | }, leaveDelay);
|
36371 | };
|
36372 |
|
36373 | var handleTouchStart = function handleTouchStart(event) {
|
36374 | ignoreNonTouchEvents.current = true;
|
36375 | var childrenProps = children.props;
|
36376 |
|
36377 | if (childrenProps.onTouchStart) {
|
36378 | childrenProps.onTouchStart(event);
|
36379 | }
|
36380 |
|
36381 | clearTimeout(leaveTimer.current);
|
36382 | clearTimeout(closeTimer.current);
|
36383 | clearTimeout(touchTimer.current);
|
36384 | event.persist();
|
36385 | touchTimer.current = setTimeout(function () {
|
36386 | handleEnter(event);
|
36387 | }, enterTouchDelay);
|
36388 | };
|
36389 |
|
36390 | var handleTouchEnd = function handleTouchEnd(event) {
|
36391 | if (children.props.onTouchEnd) {
|
36392 | children.props.onTouchEnd(event);
|
36393 | }
|
36394 |
|
36395 | clearTimeout(touchTimer.current);
|
36396 | clearTimeout(leaveTimer.current);
|
36397 | event.persist();
|
36398 | leaveTimer.current = setTimeout(function () {
|
36399 | handleClose(event);
|
36400 | }, leaveTouchDelay);
|
36401 | };
|
36402 |
|
36403 | var handleUseRef = useForkRef(setChildNode, ref);
|
36404 | var handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
|
36405 |
|
36406 | var handleOwnRef = React__default.useCallback(function (instance) {
|
36407 |
|
36408 | setRef(handleFocusRef, ReactDOM.findDOMNode(instance));
|
36409 | }, [handleFocusRef]);
|
36410 | var handleRef = useForkRef(children.ref, handleOwnRef);
|
36411 |
|
36412 | if (title === '') {
|
36413 | open = false;
|
36414 | }
|
36415 |
|
36416 |
|
36417 |
|
36418 |
|
36419 |
|
36420 |
|
36421 | var shouldShowNativeTitle = !open && !disableHoverListener;
|
36422 |
|
36423 | var childrenProps = _extends({
|
36424 | 'aria-describedby': open ? id : null,
|
36425 | title: shouldShowNativeTitle && typeof title === 'string' ? title : null
|
36426 | }, other, {}, children.props, {
|
36427 | className: clsx(other.className, children.props.className)
|
36428 | });
|
36429 |
|
36430 | if (!disableTouchListener) {
|
36431 | childrenProps.onTouchStart = handleTouchStart;
|
36432 | childrenProps.onTouchEnd = handleTouchEnd;
|
36433 | }
|
36434 |
|
36435 | if (!disableHoverListener) {
|
36436 | childrenProps.onMouseOver = handleEnter;
|
36437 | childrenProps.onMouseLeave = handleLeave;
|
36438 | }
|
36439 |
|
36440 | if (!disableFocusListener) {
|
36441 | childrenProps.onFocus = handleFocus;
|
36442 | childrenProps.onBlur = handleLeave;
|
36443 | }
|
36444 |
|
36445 | var interactiveWrapperListeners = interactive ? {
|
36446 | onMouseOver: childrenProps.onMouseOver,
|
36447 | onMouseLeave: childrenProps.onMouseLeave,
|
36448 | onFocus: childrenProps.onFocus,
|
36449 | onBlur: childrenProps.onBlur
|
36450 | } : {};
|
36451 |
|
36452 | {
|
36453 | if (children.props.title) {
|
36454 | console.error(['Material-UI: you have provided a `title` prop to the child of <Tooltip />.', "Remove this title prop `".concat(children.props.title, "` or the Tooltip component.")].join('\n'));
|
36455 | }
|
36456 | }
|
36457 |
|
36458 | return React__default.createElement(React__default.Fragment, null, React__default.cloneElement(children, _extends({
|
36459 | ref: handleRef
|
36460 | }, childrenProps)), React__default.createElement(Popper$1, _extends({
|
36461 | className: clsx(classes.popper, interactive && classes.popperInteractive, arrow && classes.popperArrow),
|
36462 | placement: placement,
|
36463 | anchorEl: childNode,
|
36464 | open: childNode ? open : false,
|
36465 | id: childrenProps['aria-describedby'],
|
36466 | transition: true,
|
36467 | popperOptions: {
|
36468 | modifiers: {
|
36469 | arrow: {
|
36470 | enabled: Boolean(arrowRef),
|
36471 | element: arrowRef
|
36472 | }
|
36473 | }
|
36474 | }
|
36475 | }, interactiveWrapperListeners, PopperProps), function (_ref) {
|
36476 | var placementInner = _ref.placement,
|
36477 | TransitionPropsInner = _ref.TransitionProps;
|
36478 | return React__default.createElement(TransitionComponent, _extends({
|
36479 | timeout: theme.transitions.duration.shorter
|
36480 | }, TransitionPropsInner, TransitionProps), React__default.createElement("div", {
|
36481 | className: clsx(classes.tooltip, classes["tooltipPlacement".concat(capitalize(placementInner.split('-')[0]))], ignoreNonTouchEvents.current && classes.touch, arrow && classes.tooltipArrow)
|
36482 | }, title, arrow ? React__default.createElement("span", {
|
36483 | className: classes.arrow,
|
36484 | ref: setArrowRef
|
36485 | }) : null));
|
36486 | }));
|
36487 | });
|
36488 | Tooltip.propTypes = {
|
36489 | |
36490 |
|
36491 |
|
36492 | arrow: propTypes.bool,
|
36493 |
|
36494 | |
36495 |
|
36496 |
|
36497 | children: elementAcceptingRef.isRequired,
|
36498 |
|
36499 | |
36500 |
|
36501 |
|
36502 |
|
36503 | classes: propTypes.object.isRequired,
|
36504 |
|
36505 | |
36506 |
|
36507 |
|
36508 | disableFocusListener: propTypes.bool,
|
36509 |
|
36510 | |
36511 |
|
36512 |
|
36513 | disableHoverListener: propTypes.bool,
|
36514 |
|
36515 | |
36516 |
|
36517 |
|
36518 | disableTouchListener: propTypes.bool,
|
36519 |
|
36520 | |
36521 |
|
36522 |
|
36523 |
|
36524 | enterDelay: propTypes.number,
|
36525 |
|
36526 | |
36527 |
|
36528 |
|
36529 | enterTouchDelay: propTypes.number,
|
36530 |
|
36531 | |
36532 |
|
36533 |
|
36534 |
|
36535 | id: propTypes.string,
|
36536 |
|
36537 | |
36538 |
|
36539 |
|
36540 |
|
36541 | interactive: propTypes.bool,
|
36542 |
|
36543 | |
36544 |
|
36545 |
|
36546 |
|
36547 | leaveDelay: propTypes.number,
|
36548 |
|
36549 | |
36550 |
|
36551 |
|
36552 | leaveTouchDelay: propTypes.number,
|
36553 |
|
36554 | |
36555 |
|
36556 |
|
36557 |
|
36558 |
|
36559 | onClose: propTypes.func,
|
36560 |
|
36561 | |
36562 |
|
36563 |
|
36564 |
|
36565 |
|
36566 | onOpen: propTypes.func,
|
36567 |
|
36568 | |
36569 |
|
36570 |
|
36571 | open: propTypes.bool,
|
36572 |
|
36573 | |
36574 |
|
36575 |
|
36576 | placement: propTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
36577 |
|
36578 | |
36579 |
|
36580 |
|
36581 | PopperProps: propTypes.object,
|
36582 |
|
36583 | |
36584 |
|
36585 |
|
36586 | title: propTypes.node.isRequired,
|
36587 |
|
36588 | |
36589 |
|
36590 |
|
36591 | TransitionComponent: propTypes.elementType,
|
36592 |
|
36593 | |
36594 |
|
36595 |
|
36596 | TransitionProps: propTypes.object
|
36597 | } ;
|
36598 | var Tooltip$1 = withStyles$1(styles$1K, {
|
36599 | name: 'MuiTooltip'
|
36600 | })(Tooltip);
|
36601 |
|
36602 | function getScrollY(ref) {
|
36603 | return ref.pageYOffset !== undefined ? ref.pageYOffset : ref.scrollTop;
|
36604 | }
|
36605 |
|
36606 | function defaultTrigger(event, store, options) {
|
36607 | var _options$disableHyste = options.disableHysteresis,
|
36608 | disableHysteresis = _options$disableHyste === void 0 ? false : _options$disableHyste,
|
36609 | _options$threshold = options.threshold,
|
36610 | threshold = _options$threshold === void 0 ? 100 : _options$threshold;
|
36611 | var previous = store.current;
|
36612 | store.current = event ? getScrollY(event.currentTarget) : previous;
|
36613 |
|
36614 | if (!disableHysteresis && previous !== undefined) {
|
36615 | if (store.current < previous) {
|
36616 | return false;
|
36617 | }
|
36618 | }
|
36619 |
|
36620 | return store.current > threshold;
|
36621 | }
|
36622 |
|
36623 | var defaultTarget = typeof window !== 'undefined' ? window : null;
|
36624 | function useScrollTrigger() {
|
36625 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
36626 |
|
36627 | var _options$getTrigger = options.getTrigger,
|
36628 | getTrigger = _options$getTrigger === void 0 ? defaultTrigger : _options$getTrigger,
|
36629 | _options$target = options.target,
|
36630 | target = _options$target === void 0 ? defaultTarget : _options$target,
|
36631 | other = _objectWithoutProperties(options, ["getTrigger", "target"]);
|
36632 |
|
36633 | var store = React__default.useRef();
|
36634 |
|
36635 | var _React$useState = React__default.useState(function () {
|
36636 | return getTrigger(null, store, other);
|
36637 | }),
|
36638 | trigger = _React$useState[0],
|
36639 | setTrigger = _React$useState[1];
|
36640 |
|
36641 | React__default.useEffect(function () {
|
36642 | var handleScroll = function handleScroll(event) {
|
36643 | setTrigger(getTrigger(event, store, other));
|
36644 | };
|
36645 |
|
36646 | handleScroll(null);
|
36647 |
|
36648 | target.addEventListener('scroll', handleScroll);
|
36649 | return function () {
|
36650 | target.removeEventListener('scroll', handleScroll);
|
36651 | };
|
36652 |
|
36653 | }, [target, getTrigger, JSON.stringify(other)]);
|
36654 | return trigger;
|
36655 | }
|
36656 |
|
36657 | |
36658 |
|
36659 |
|
36660 |
|
36661 |
|
36662 |
|
36663 | var withMobileDialog = function withMobileDialog() {
|
36664 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
36665 | return function (Component) {
|
36666 | var _options$breakpoint = options.breakpoint,
|
36667 | breakpoint = _options$breakpoint === void 0 ? 'sm' : _options$breakpoint;
|
36668 |
|
36669 | function WithMobileDialog(props) {
|
36670 | return React__default.createElement(Component, _extends({
|
36671 | fullScreen: isWidthDown(breakpoint, props.width)
|
36672 | }, props));
|
36673 | }
|
36674 |
|
36675 | WithMobileDialog.propTypes = {
|
36676 | width: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired
|
36677 | } ;
|
36678 | return withWidth()(WithMobileDialog);
|
36679 | };
|
36680 | };
|
36681 |
|
36682 | var styles$1L = {
|
36683 | entering: {
|
36684 | transform: 'none'
|
36685 | },
|
36686 | entered: {
|
36687 | transform: 'none'
|
36688 | }
|
36689 | };
|
36690 | var defaultTimeout$2 = {
|
36691 | enter: duration.enteringScreen,
|
36692 | exit: duration.leavingScreen
|
36693 | };
|
36694 | |
36695 |
|
36696 |
|
36697 |
|
36698 |
|
36699 |
|
36700 | var Zoom = React__default.forwardRef(function Zoom(props, ref) {
|
36701 | var children = props.children,
|
36702 | inProp = props.in,
|
36703 | onEnter = props.onEnter,
|
36704 | onExit = props.onExit,
|
36705 | style = props.style,
|
36706 | _props$timeout = props.timeout,
|
36707 | timeout = _props$timeout === void 0 ? defaultTimeout$2 : _props$timeout,
|
36708 | other = _objectWithoutProperties(props, ["children", "in", "onEnter", "onExit", "style", "timeout"]);
|
36709 |
|
36710 | var theme = useTheme$1();
|
36711 | var handleRef = useForkRef(children.ref, ref);
|
36712 |
|
36713 | var handleEnter = function handleEnter(node, isAppearing) {
|
36714 | reflow(node);
|
36715 |
|
36716 | var transitionProps = getTransitionProps({
|
36717 | style: style,
|
36718 | timeout: timeout
|
36719 | }, {
|
36720 | mode: 'enter'
|
36721 | });
|
36722 | node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
|
36723 | node.style.transition = theme.transitions.create('transform', transitionProps);
|
36724 |
|
36725 | if (onEnter) {
|
36726 | onEnter(node, isAppearing);
|
36727 | }
|
36728 | };
|
36729 |
|
36730 | var handleExit = function handleExit(node) {
|
36731 | var transitionProps = getTransitionProps({
|
36732 | style: style,
|
36733 | timeout: timeout
|
36734 | }, {
|
36735 | mode: 'exit'
|
36736 | });
|
36737 | node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
|
36738 | node.style.transition = theme.transitions.create('transform', transitionProps);
|
36739 |
|
36740 | if (onExit) {
|
36741 | onExit(node);
|
36742 | }
|
36743 | };
|
36744 |
|
36745 | return React__default.createElement(Transition, _extends({
|
36746 | appear: true,
|
36747 | in: inProp,
|
36748 | onEnter: handleEnter,
|
36749 | onExit: handleExit,
|
36750 | timeout: timeout
|
36751 | }, other), function (state, childProps) {
|
36752 | return React__default.cloneElement(children, _extends({
|
36753 | style: _extends({
|
36754 | transform: 'scale(0)',
|
36755 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
36756 | }, styles$1L[state], {}, style, {}, children.props.style),
|
36757 | ref: handleRef
|
36758 | }, childProps));
|
36759 | });
|
36760 | });
|
36761 | Zoom.propTypes = {
|
36762 | |
36763 |
|
36764 |
|
36765 | children: propTypes.element,
|
36766 |
|
36767 | |
36768 |
|
36769 |
|
36770 | in: propTypes.bool,
|
36771 |
|
36772 | |
36773 |
|
36774 |
|
36775 | onEnter: propTypes.func,
|
36776 |
|
36777 | |
36778 |
|
36779 |
|
36780 | onExit: propTypes.func,
|
36781 |
|
36782 | |
36783 |
|
36784 |
|
36785 | style: propTypes.object,
|
36786 |
|
36787 | |
36788 |
|
36789 |
|
36790 |
|
36791 | timeout: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
36792 | enter: propTypes.number,
|
36793 | exit: propTypes.number
|
36794 | })])
|
36795 | } ;
|
36796 |
|
36797 | exports.AppBar = AppBar$1;
|
36798 | exports.Avatar = Avatar$1;
|
36799 | exports.Backdrop = Backdrop$1;
|
36800 | exports.Badge = Badge$1;
|
36801 | exports.BottomNavigation = BottomNavigation$1;
|
36802 | exports.BottomNavigationAction = BottomNavigationAction$1;
|
36803 | exports.Box = Box;
|
36804 | exports.Breadcrumbs = Breadcrumbs$1;
|
36805 | exports.Button = Button$1;
|
36806 | exports.ButtonBase = ButtonBase$1;
|
36807 | exports.ButtonGroup = ButtonGroup$1;
|
36808 | exports.Card = Card$1;
|
36809 | exports.CardActionArea = CardActionArea$1;
|
36810 | exports.CardActions = CardActions$1;
|
36811 | exports.CardContent = CardContent$1;
|
36812 | exports.CardHeader = CardHeader$1;
|
36813 | exports.CardMedia = CardMedia$1;
|
36814 | exports.Checkbox = Checkbox$1;
|
36815 | exports.Chip = Chip$1;
|
36816 | exports.CircularProgress = CircularProgress$1;
|
36817 | exports.ClickAwayListener = ClickAwayListener;
|
36818 | exports.Collapse = Collapse$1;
|
36819 | exports.Container = Container$1;
|
36820 | exports.CssBaseline = CssBaseline;
|
36821 | exports.Dialog = Dialog$1;
|
36822 | exports.DialogActions = DialogActions$1;
|
36823 | exports.DialogContent = DialogContent$1;
|
36824 | exports.DialogContentText = DialogContentText$1;
|
36825 | exports.DialogTitle = DialogTitle$1;
|
36826 | exports.Divider = Divider$1;
|
36827 | exports.Drawer = Drawer$1;
|
36828 | exports.ExpansionPanel = ExpansionPanel$1;
|
36829 | exports.ExpansionPanelActions = ExpansionPanelActions$1;
|
36830 | exports.ExpansionPanelDetails = ExpansionPanelDetails$1;
|
36831 | exports.ExpansionPanelSummary = ExpansionPanelSummary$1;
|
36832 | exports.Fab = Fab$1;
|
36833 | exports.Fade = Fade;
|
36834 | exports.FilledInput = FilledInput$1;
|
36835 | exports.FormControl = FormControl$1;
|
36836 | exports.FormControlLabel = FormControlLabel$1;
|
36837 | exports.FormGroup = FormGroup$1;
|
36838 | exports.FormHelperText = FormHelperText$1;
|
36839 | exports.FormLabel = FormLabel$1;
|
36840 | exports.Grid = StyledGrid;
|
36841 | exports.GridList = GridList$1;
|
36842 | exports.GridListTile = GridListTile$1;
|
36843 | exports.GridListTileBar = GridListTileBar$1;
|
36844 | exports.Grow = Grow;
|
36845 | exports.Hidden = Hidden;
|
36846 | exports.Icon = Icon$1;
|
36847 | exports.IconButton = IconButton$1;
|
36848 | exports.Input = Input$1;
|
36849 | exports.InputAdornment = InputAdornment$1;
|
36850 | exports.InputBase = InputBase$1;
|
36851 | exports.InputLabel = InputLabel$1;
|
36852 | exports.LinearProgress = LinearProgress$1;
|
36853 | exports.Link = Link$1;
|
36854 | exports.List = List$1;
|
36855 | exports.ListItem = ListItem$1;
|
36856 | exports.ListItemAvatar = ListItemAvatar$1;
|
36857 | exports.ListItemIcon = ListItemIcon$1;
|
36858 | exports.ListItemSecondaryAction = ListItemSecondaryAction$1;
|
36859 | exports.ListItemText = ListItemText$1;
|
36860 | exports.ListSubheader = ListSubheader$1;
|
36861 | exports.Menu = Menu$1;
|
36862 | exports.MenuItem = MenuItem$1;
|
36863 | exports.MenuList = MenuList;
|
36864 | exports.MobileStepper = MobileStepper$1;
|
36865 | exports.Modal = Modal;
|
36866 | exports.ModalManager = ModalManager;
|
36867 | exports.MuiThemeProvider = ThemeProvider;
|
36868 | exports.NativeSelect = NativeSelect$1;
|
36869 | exports.NoSsr = NoSsr;
|
36870 | exports.OutlinedInput = OutlinedInput$1;
|
36871 | exports.Paper = Paper$1;
|
36872 | exports.Popover = Popover$1;
|
36873 | exports.Popper = Popper$1;
|
36874 | exports.Portal = Portal;
|
36875 | exports.Radio = Radio$1;
|
36876 | exports.RadioGroup = RadioGroup;
|
36877 | exports.RootRef = RootRef;
|
36878 | exports.Select = Select$1;
|
36879 | exports.ServerStyleSheets = ServerStyleSheets;
|
36880 | exports.Slide = Slide;
|
36881 | exports.Slider = Slider$1;
|
36882 | exports.Snackbar = Snackbar$1;
|
36883 | exports.SnackbarContent = SnackbarContent$1;
|
36884 | exports.Step = Step$1;
|
36885 | exports.StepButton = StepButton$1;
|
36886 | exports.StepConnector = StepConnector$1;
|
36887 | exports.StepContent = StepContent$1;
|
36888 | exports.StepIcon = StepIcon$1;
|
36889 | exports.StepLabel = StepLabel$1;
|
36890 | exports.Stepper = Stepper$1;
|
36891 | exports.StylesProvider = StylesProvider;
|
36892 | exports.SvgIcon = SvgIcon$1;
|
36893 | exports.SwipeableDrawer = SwipeableDrawer;
|
36894 | exports.Switch = Switch$1;
|
36895 | exports.Tab = Tab$1;
|
36896 | exports.Table = Table$1;
|
36897 | exports.TableBody = TableBody$1;
|
36898 | exports.TableCell = TableCell$1;
|
36899 | exports.TableContainer = TableContainer$1;
|
36900 | exports.TableFooter = TableFooter$1;
|
36901 | exports.TableHead = TableHead$1;
|
36902 | exports.TablePagination = TablePagination$1;
|
36903 | exports.TableRow = TableRow$1;
|
36904 | exports.TableSortLabel = TableSortLabel$1;
|
36905 | exports.Tabs = Tabs$1;
|
36906 | exports.TextField = TextField$1;
|
36907 | exports.TextareaAutosize = TextareaAutosize;
|
36908 | exports.ThemeProvider = ThemeProvider;
|
36909 | exports.Toolbar = Toolbar$1;
|
36910 | exports.Tooltip = Tooltip$1;
|
36911 | exports.Typography = Typography$1;
|
36912 | exports.Zoom = Zoom;
|
36913 | exports.colors = index;
|
36914 | exports.createGenerateClassName = createGenerateClassName;
|
36915 | exports.createMuiTheme = createMuiTheme;
|
36916 | exports.createStyles = createStyles$1;
|
36917 | exports.darken = darken;
|
36918 | exports.decomposeColor = decomposeColor;
|
36919 | exports.duration = duration;
|
36920 | exports.easing = easing;
|
36921 | exports.emphasize = emphasize;
|
36922 | exports.fade = fade;
|
36923 | exports.formatMs = formatMs;
|
36924 | exports.getContrastRatio = getContrastRatio;
|
36925 | exports.getLuminance = getLuminance;
|
36926 | exports.hexToRgb = hexToRgb;
|
36927 | exports.hslToRgb = hslToRgb;
|
36928 | exports.isNumber = isNumber;
|
36929 | exports.isString = isString;
|
36930 | exports.isWidthDown = isWidthDown;
|
36931 | exports.isWidthUp = isWidthUp;
|
36932 | exports.jssPreset = jssPreset;
|
36933 | exports.lighten = lighten;
|
36934 | exports.makeStyles = makeStyles$1;
|
36935 | exports.recomposeColor = recomposeColor;
|
36936 | exports.responsiveFontSizes = responsiveFontSizes;
|
36937 | exports.rgbToHex = rgbToHex;
|
36938 | exports.styleFunction = styleFunction;
|
36939 | exports.styled = styled$1;
|
36940 | exports.useFormControl = useFormControl$1;
|
36941 | exports.useMediaQuery = useMediaQuery;
|
36942 | exports.useScrollTrigger = useScrollTrigger;
|
36943 | exports.useTheme = useTheme$1;
|
36944 | exports.withMobileDialog = withMobileDialog;
|
36945 | exports.withStyles = withStyles$1;
|
36946 | exports.withTheme = withTheme$1;
|
36947 | exports.withWidth = withWidth;
|
36948 |
|
36949 | Object.defineProperty(exports, '__esModule', { value: true });
|
36950 |
|
36951 | })));
|