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 | var ReactDOM__default = 'default' in ReactDOM ? 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 | var index = Object.freeze({
|
344 | __proto__: null,
|
345 | common: common,
|
346 | red: red,
|
347 | pink: pink,
|
348 | purple: purple,
|
349 | deepPurple: deepPurple,
|
350 | indigo: indigo,
|
351 | blue: blue,
|
352 | lightBlue: lightBlue,
|
353 | cyan: cyan,
|
354 | teal: teal,
|
355 | green: green,
|
356 | lightGreen: lightGreen,
|
357 | lime: lime,
|
358 | yellow: yellow,
|
359 | amber: amber,
|
360 | orange: orange,
|
361 | deepOrange: deepOrange,
|
362 | brown: brown,
|
363 | grey: grey,
|
364 | blueGrey: blueGrey
|
365 | });
|
366 |
|
367 | var global$1 = (typeof global !== "undefined" ? global :
|
368 | typeof self !== "undefined" ? self :
|
369 | typeof window !== "undefined" ? window : {});
|
370 |
|
371 |
|
372 | var performance$1 = global$1.performance || {};
|
373 | var performanceNow =
|
374 | performance$1.now ||
|
375 | performance$1.mozNow ||
|
376 | performance$1.msNow ||
|
377 | performance$1.oNow ||
|
378 | performance$1.webkitNow ||
|
379 | function(){ return (new Date()).getTime() };
|
380 |
|
381 | function chainPropTypes(propType1, propType2) {
|
382 |
|
383 | return function validate() {
|
384 | return propType1.apply(void 0, arguments) || propType2.apply(void 0, arguments);
|
385 | };
|
386 | }
|
387 |
|
388 | function _extends() {
|
389 | _extends = Object.assign || function (target) {
|
390 | for (var i = 1; i < arguments.length; i++) {
|
391 | var source = arguments[i];
|
392 |
|
393 | for (var key in source) {
|
394 | if (Object.prototype.hasOwnProperty.call(source, key)) {
|
395 | target[key] = source[key];
|
396 | }
|
397 | }
|
398 | }
|
399 |
|
400 | return target;
|
401 | };
|
402 |
|
403 | return _extends.apply(this, arguments);
|
404 | }
|
405 |
|
406 | function _typeof(obj) {
|
407 | "@babel/helpers - typeof";
|
408 |
|
409 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
410 | _typeof = function _typeof(obj) {
|
411 | return typeof obj;
|
412 | };
|
413 | } else {
|
414 | _typeof = function _typeof(obj) {
|
415 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
416 | };
|
417 | }
|
418 |
|
419 | return _typeof(obj);
|
420 | }
|
421 |
|
422 | function isPlainObject(item) {
|
423 | return item && _typeof(item) === 'object' && item.constructor === Object;
|
424 | }
|
425 | function deepmerge(target, source) {
|
426 | var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
|
427 | clone: true
|
428 | };
|
429 | var output = options.clone ? _extends({}, target) : target;
|
430 |
|
431 | if (isPlainObject(target) && isPlainObject(source)) {
|
432 | Object.keys(source).forEach(function (key) {
|
433 |
|
434 | if (key === '__proto__') {
|
435 | return;
|
436 | }
|
437 |
|
438 | if (isPlainObject(source[key]) && key in target) {
|
439 | output[key] = deepmerge(target[key], source[key], options);
|
440 | } else {
|
441 | output[key] = source[key];
|
442 | }
|
443 | });
|
444 | }
|
445 |
|
446 | return output;
|
447 | }
|
448 |
|
449 | function createCommonjsModule(fn, module) {
|
450 | return module = { exports: {} }, fn(module, module.exports), module.exports;
|
451 | }
|
452 |
|
453 | var reactIs_development = createCommonjsModule(function (module, exports) {
|
454 |
|
455 |
|
456 |
|
457 | {
|
458 | (function() {
|
459 |
|
460 |
|
461 |
|
462 | var hasSymbol = typeof Symbol === 'function' && Symbol.for;
|
463 | var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
|
464 | var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
|
465 | var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
|
466 | var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
|
467 | var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
|
468 | var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
|
469 | var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
|
470 |
|
471 |
|
472 | var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
|
473 | var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
|
474 | var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
|
475 | var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
|
476 | var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
|
477 | var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
|
478 | var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
|
479 | var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
|
480 | var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
|
481 | var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
|
482 | var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
|
483 |
|
484 | function isValidElementType(type) {
|
485 | return typeof type === 'string' || typeof type === 'function' ||
|
486 | 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 || type.$$typeof === REACT_BLOCK_TYPE);
|
487 | }
|
488 |
|
489 | function typeOf(object) {
|
490 | if (typeof object === 'object' && object !== null) {
|
491 | var $$typeof = object.$$typeof;
|
492 |
|
493 | switch ($$typeof) {
|
494 | case REACT_ELEMENT_TYPE:
|
495 | var type = object.type;
|
496 |
|
497 | switch (type) {
|
498 | case REACT_ASYNC_MODE_TYPE:
|
499 | case REACT_CONCURRENT_MODE_TYPE:
|
500 | case REACT_FRAGMENT_TYPE:
|
501 | case REACT_PROFILER_TYPE:
|
502 | case REACT_STRICT_MODE_TYPE:
|
503 | case REACT_SUSPENSE_TYPE:
|
504 | return type;
|
505 |
|
506 | default:
|
507 | var $$typeofType = type && type.$$typeof;
|
508 |
|
509 | switch ($$typeofType) {
|
510 | case REACT_CONTEXT_TYPE:
|
511 | case REACT_FORWARD_REF_TYPE:
|
512 | case REACT_LAZY_TYPE:
|
513 | case REACT_MEMO_TYPE:
|
514 | case REACT_PROVIDER_TYPE:
|
515 | return $$typeofType;
|
516 |
|
517 | default:
|
518 | return $$typeof;
|
519 | }
|
520 |
|
521 | }
|
522 |
|
523 | case REACT_PORTAL_TYPE:
|
524 | return $$typeof;
|
525 | }
|
526 | }
|
527 |
|
528 | return undefined;
|
529 | }
|
530 |
|
531 | var AsyncMode = REACT_ASYNC_MODE_TYPE;
|
532 | var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
|
533 | var ContextConsumer = REACT_CONTEXT_TYPE;
|
534 | var ContextProvider = REACT_PROVIDER_TYPE;
|
535 | var Element = REACT_ELEMENT_TYPE;
|
536 | var ForwardRef = REACT_FORWARD_REF_TYPE;
|
537 | var Fragment = REACT_FRAGMENT_TYPE;
|
538 | var Lazy = REACT_LAZY_TYPE;
|
539 | var Memo = REACT_MEMO_TYPE;
|
540 | var Portal = REACT_PORTAL_TYPE;
|
541 | var Profiler = REACT_PROFILER_TYPE;
|
542 | var StrictMode = REACT_STRICT_MODE_TYPE;
|
543 | var Suspense = REACT_SUSPENSE_TYPE;
|
544 | var hasWarnedAboutDeprecatedIsAsyncMode = false;
|
545 |
|
546 | function isAsyncMode(object) {
|
547 | {
|
548 | if (!hasWarnedAboutDeprecatedIsAsyncMode) {
|
549 | hasWarnedAboutDeprecatedIsAsyncMode = true;
|
550 |
|
551 | console['warn']('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.');
|
552 | }
|
553 | }
|
554 |
|
555 | return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
|
556 | }
|
557 | function isConcurrentMode(object) {
|
558 | return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
|
559 | }
|
560 | function isContextConsumer(object) {
|
561 | return typeOf(object) === REACT_CONTEXT_TYPE;
|
562 | }
|
563 | function isContextProvider(object) {
|
564 | return typeOf(object) === REACT_PROVIDER_TYPE;
|
565 | }
|
566 | function isElement(object) {
|
567 | return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
|
568 | }
|
569 | function isForwardRef(object) {
|
570 | return typeOf(object) === REACT_FORWARD_REF_TYPE;
|
571 | }
|
572 | function isFragment(object) {
|
573 | return typeOf(object) === REACT_FRAGMENT_TYPE;
|
574 | }
|
575 | function isLazy(object) {
|
576 | return typeOf(object) === REACT_LAZY_TYPE;
|
577 | }
|
578 | function isMemo(object) {
|
579 | return typeOf(object) === REACT_MEMO_TYPE;
|
580 | }
|
581 | function isPortal(object) {
|
582 | return typeOf(object) === REACT_PORTAL_TYPE;
|
583 | }
|
584 | function isProfiler(object) {
|
585 | return typeOf(object) === REACT_PROFILER_TYPE;
|
586 | }
|
587 | function isStrictMode(object) {
|
588 | return typeOf(object) === REACT_STRICT_MODE_TYPE;
|
589 | }
|
590 | function isSuspense(object) {
|
591 | return typeOf(object) === REACT_SUSPENSE_TYPE;
|
592 | }
|
593 |
|
594 | exports.AsyncMode = AsyncMode;
|
595 | exports.ConcurrentMode = ConcurrentMode;
|
596 | exports.ContextConsumer = ContextConsumer;
|
597 | exports.ContextProvider = ContextProvider;
|
598 | exports.Element = Element;
|
599 | exports.ForwardRef = ForwardRef;
|
600 | exports.Fragment = Fragment;
|
601 | exports.Lazy = Lazy;
|
602 | exports.Memo = Memo;
|
603 | exports.Portal = Portal;
|
604 | exports.Profiler = Profiler;
|
605 | exports.StrictMode = StrictMode;
|
606 | exports.Suspense = Suspense;
|
607 | exports.isAsyncMode = isAsyncMode;
|
608 | exports.isConcurrentMode = isConcurrentMode;
|
609 | exports.isContextConsumer = isContextConsumer;
|
610 | exports.isContextProvider = isContextProvider;
|
611 | exports.isElement = isElement;
|
612 | exports.isForwardRef = isForwardRef;
|
613 | exports.isFragment = isFragment;
|
614 | exports.isLazy = isLazy;
|
615 | exports.isMemo = isMemo;
|
616 | exports.isPortal = isPortal;
|
617 | exports.isProfiler = isProfiler;
|
618 | exports.isStrictMode = isStrictMode;
|
619 | exports.isSuspense = isSuspense;
|
620 | exports.isValidElementType = isValidElementType;
|
621 | exports.typeOf = typeOf;
|
622 | })();
|
623 | }
|
624 | });
|
625 | var reactIs_development_1 = reactIs_development.AsyncMode;
|
626 | var reactIs_development_2 = reactIs_development.ConcurrentMode;
|
627 | var reactIs_development_3 = reactIs_development.ContextConsumer;
|
628 | var reactIs_development_4 = reactIs_development.ContextProvider;
|
629 | var reactIs_development_5 = reactIs_development.Element;
|
630 | var reactIs_development_6 = reactIs_development.ForwardRef;
|
631 | var reactIs_development_7 = reactIs_development.Fragment;
|
632 | var reactIs_development_8 = reactIs_development.Lazy;
|
633 | var reactIs_development_9 = reactIs_development.Memo;
|
634 | var reactIs_development_10 = reactIs_development.Portal;
|
635 | var reactIs_development_11 = reactIs_development.Profiler;
|
636 | var reactIs_development_12 = reactIs_development.StrictMode;
|
637 | var reactIs_development_13 = reactIs_development.Suspense;
|
638 | var reactIs_development_14 = reactIs_development.isAsyncMode;
|
639 | var reactIs_development_15 = reactIs_development.isConcurrentMode;
|
640 | var reactIs_development_16 = reactIs_development.isContextConsumer;
|
641 | var reactIs_development_17 = reactIs_development.isContextProvider;
|
642 | var reactIs_development_18 = reactIs_development.isElement;
|
643 | var reactIs_development_19 = reactIs_development.isForwardRef;
|
644 | var reactIs_development_20 = reactIs_development.isFragment;
|
645 | var reactIs_development_21 = reactIs_development.isLazy;
|
646 | var reactIs_development_22 = reactIs_development.isMemo;
|
647 | var reactIs_development_23 = reactIs_development.isPortal;
|
648 | var reactIs_development_24 = reactIs_development.isProfiler;
|
649 | var reactIs_development_25 = reactIs_development.isStrictMode;
|
650 | var reactIs_development_26 = reactIs_development.isSuspense;
|
651 | var reactIs_development_27 = reactIs_development.isValidElementType;
|
652 | var reactIs_development_28 = reactIs_development.typeOf;
|
653 |
|
654 | var reactIs = createCommonjsModule(function (module) {
|
655 |
|
656 | {
|
657 | module.exports = reactIs_development;
|
658 | }
|
659 | });
|
660 | var reactIs_1 = reactIs.ForwardRef;
|
661 | var reactIs_2 = reactIs.isFragment;
|
662 | var reactIs_3 = reactIs.isLazy;
|
663 | var reactIs_4 = reactIs.isMemo;
|
664 | var reactIs_5 = reactIs.Memo;
|
665 | var reactIs_6 = reactIs.isValidElementType;
|
666 |
|
667 | |
668 |
|
669 |
|
670 |
|
671 |
|
672 |
|
673 | var getOwnPropertySymbols = Object.getOwnPropertySymbols;
|
674 | var hasOwnProperty = Object.prototype.hasOwnProperty;
|
675 | var propIsEnumerable = Object.prototype.propertyIsEnumerable;
|
676 |
|
677 | function toObject(val) {
|
678 | if (val === null || val === undefined) {
|
679 | throw new TypeError('Object.assign cannot be called with null or undefined');
|
680 | }
|
681 |
|
682 | return Object(val);
|
683 | }
|
684 |
|
685 | function shouldUseNative() {
|
686 | try {
|
687 | if (!Object.assign) {
|
688 | return false;
|
689 | }
|
690 |
|
691 |
|
692 |
|
693 |
|
694 | var test1 = new String('abc');
|
695 | test1[5] = 'de';
|
696 | if (Object.getOwnPropertyNames(test1)[0] === '5') {
|
697 | return false;
|
698 | }
|
699 |
|
700 |
|
701 | var test2 = {};
|
702 | for (var i = 0; i < 10; i++) {
|
703 | test2['_' + String.fromCharCode(i)] = i;
|
704 | }
|
705 | var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
|
706 | return test2[n];
|
707 | });
|
708 | if (order2.join('') !== '0123456789') {
|
709 | return false;
|
710 | }
|
711 |
|
712 |
|
713 | var test3 = {};
|
714 | 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
|
715 | test3[letter] = letter;
|
716 | });
|
717 | if (Object.keys(Object.assign({}, test3)).join('') !==
|
718 | 'abcdefghijklmnopqrst') {
|
719 | return false;
|
720 | }
|
721 |
|
722 | return true;
|
723 | } catch (err) {
|
724 |
|
725 | return false;
|
726 | }
|
727 | }
|
728 |
|
729 | var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
|
730 | var from;
|
731 | var to = toObject(target);
|
732 | var symbols;
|
733 |
|
734 | for (var s = 1; s < arguments.length; s++) {
|
735 | from = Object(arguments[s]);
|
736 |
|
737 | for (var key in from) {
|
738 | if (hasOwnProperty.call(from, key)) {
|
739 | to[key] = from[key];
|
740 | }
|
741 | }
|
742 |
|
743 | if (getOwnPropertySymbols) {
|
744 | symbols = getOwnPropertySymbols(from);
|
745 | for (var i = 0; i < symbols.length; i++) {
|
746 | if (propIsEnumerable.call(from, symbols[i])) {
|
747 | to[symbols[i]] = from[symbols[i]];
|
748 | }
|
749 | }
|
750 | }
|
751 | }
|
752 |
|
753 | return to;
|
754 | };
|
755 |
|
756 | |
757 |
|
758 |
|
759 |
|
760 |
|
761 |
|
762 |
|
763 | var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
|
764 |
|
765 | var ReactPropTypesSecret_1 = ReactPropTypesSecret;
|
766 |
|
767 | var printWarning = function() {};
|
768 |
|
769 | {
|
770 | var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
|
771 | var loggedTypeFailures = {};
|
772 | var has = Function.call.bind(Object.prototype.hasOwnProperty);
|
773 |
|
774 | printWarning = function(text) {
|
775 | var message = 'Warning: ' + text;
|
776 | if (typeof console !== 'undefined') {
|
777 | console.error(message);
|
778 | }
|
779 | try {
|
780 |
|
781 |
|
782 |
|
783 | throw new Error(message);
|
784 | } catch (x) {}
|
785 | };
|
786 | }
|
787 |
|
788 | |
789 |
|
790 |
|
791 |
|
792 |
|
793 |
|
794 |
|
795 |
|
796 |
|
797 |
|
798 |
|
799 | function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
|
800 | {
|
801 | for (var typeSpecName in typeSpecs) {
|
802 | if (has(typeSpecs, typeSpecName)) {
|
803 | var error;
|
804 |
|
805 |
|
806 |
|
807 | try {
|
808 |
|
809 |
|
810 | if (typeof typeSpecs[typeSpecName] !== 'function') {
|
811 | var err = Error(
|
812 | (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
|
813 | 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
|
814 | );
|
815 | err.name = 'Invariant Violation';
|
816 | throw err;
|
817 | }
|
818 | error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
|
819 | } catch (ex) {
|
820 | error = ex;
|
821 | }
|
822 | if (error && !(error instanceof Error)) {
|
823 | printWarning(
|
824 | (componentName || 'React class') + ': type specification of ' +
|
825 | location + ' `' + typeSpecName + '` is invalid; the type checker ' +
|
826 | 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
|
827 | 'You may have forgotten to pass an argument to the type checker ' +
|
828 | 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
|
829 | 'shape all require an argument).'
|
830 | );
|
831 | }
|
832 | if (error instanceof Error && !(error.message in loggedTypeFailures)) {
|
833 |
|
834 |
|
835 | loggedTypeFailures[error.message] = true;
|
836 |
|
837 | var stack = getStack ? getStack() : '';
|
838 |
|
839 | printWarning(
|
840 | 'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
|
841 | );
|
842 | }
|
843 | }
|
844 | }
|
845 | }
|
846 | }
|
847 |
|
848 | |
849 |
|
850 |
|
851 |
|
852 |
|
853 | checkPropTypes.resetWarningCache = function() {
|
854 | {
|
855 | loggedTypeFailures = {};
|
856 | }
|
857 | };
|
858 |
|
859 | var checkPropTypes_1 = checkPropTypes;
|
860 |
|
861 | var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
|
862 | var printWarning$1 = function() {};
|
863 |
|
864 | {
|
865 | printWarning$1 = function(text) {
|
866 | var message = 'Warning: ' + text;
|
867 | if (typeof console !== 'undefined') {
|
868 | console.error(message);
|
869 | }
|
870 | try {
|
871 |
|
872 |
|
873 |
|
874 | throw new Error(message);
|
875 | } catch (x) {}
|
876 | };
|
877 | }
|
878 |
|
879 | function emptyFunctionThatReturnsNull() {
|
880 | return null;
|
881 | }
|
882 |
|
883 | var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
884 |
|
885 | var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
|
886 | var FAUX_ITERATOR_SYMBOL = '@@iterator';
|
887 |
|
888 | |
889 |
|
890 |
|
891 |
|
892 |
|
893 |
|
894 |
|
895 |
|
896 |
|
897 |
|
898 |
|
899 |
|
900 |
|
901 |
|
902 | function getIteratorFn(maybeIterable) {
|
903 | var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
|
904 | if (typeof iteratorFn === 'function') {
|
905 | return iteratorFn;
|
906 | }
|
907 | }
|
908 |
|
909 | |
910 |
|
911 |
|
912 |
|
913 |
|
914 |
|
915 |
|
916 |
|
917 |
|
918 |
|
919 |
|
920 |
|
921 |
|
922 |
|
923 |
|
924 |
|
925 |
|
926 |
|
927 |
|
928 |
|
929 |
|
930 |
|
931 |
|
932 |
|
933 |
|
934 |
|
935 |
|
936 |
|
937 |
|
938 |
|
939 |
|
940 |
|
941 |
|
942 |
|
943 |
|
944 |
|
945 |
|
946 |
|
947 |
|
948 |
|
949 |
|
950 |
|
951 |
|
952 |
|
953 |
|
954 |
|
955 |
|
956 | var ANONYMOUS = '<<anonymous>>';
|
957 |
|
958 |
|
959 |
|
960 | var ReactPropTypes = {
|
961 | array: createPrimitiveTypeChecker('array'),
|
962 | bool: createPrimitiveTypeChecker('boolean'),
|
963 | func: createPrimitiveTypeChecker('function'),
|
964 | number: createPrimitiveTypeChecker('number'),
|
965 | object: createPrimitiveTypeChecker('object'),
|
966 | string: createPrimitiveTypeChecker('string'),
|
967 | symbol: createPrimitiveTypeChecker('symbol'),
|
968 |
|
969 | any: createAnyTypeChecker(),
|
970 | arrayOf: createArrayOfTypeChecker,
|
971 | element: createElementTypeChecker(),
|
972 | elementType: createElementTypeTypeChecker(),
|
973 | instanceOf: createInstanceTypeChecker,
|
974 | node: createNodeChecker(),
|
975 | objectOf: createObjectOfTypeChecker,
|
976 | oneOf: createEnumTypeChecker,
|
977 | oneOfType: createUnionTypeChecker,
|
978 | shape: createShapeTypeChecker,
|
979 | exact: createStrictShapeTypeChecker,
|
980 | };
|
981 |
|
982 | |
983 |
|
984 |
|
985 |
|
986 |
|
987 | function is(x, y) {
|
988 |
|
989 | if (x === y) {
|
990 |
|
991 |
|
992 | return x !== 0 || 1 / x === 1 / y;
|
993 | } else {
|
994 |
|
995 | return x !== x && y !== y;
|
996 | }
|
997 | }
|
998 |
|
999 |
|
1000 | |
1001 |
|
1002 |
|
1003 |
|
1004 |
|
1005 |
|
1006 |
|
1007 | function PropTypeError(message) {
|
1008 | this.message = message;
|
1009 | this.stack = '';
|
1010 | }
|
1011 |
|
1012 | PropTypeError.prototype = Error.prototype;
|
1013 |
|
1014 | function createChainableTypeChecker(validate) {
|
1015 | {
|
1016 | var manualPropTypeCallCache = {};
|
1017 | var manualPropTypeWarningCount = 0;
|
1018 | }
|
1019 | function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
|
1020 | componentName = componentName || ANONYMOUS;
|
1021 | propFullName = propFullName || propName;
|
1022 |
|
1023 | if (secret !== ReactPropTypesSecret_1) {
|
1024 | if (throwOnDirectAccess) {
|
1025 |
|
1026 | var err = new Error(
|
1027 | 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
|
1028 | 'Use `PropTypes.checkPropTypes()` to call them. ' +
|
1029 | 'Read more at http://fb.me/use-check-prop-types'
|
1030 | );
|
1031 | err.name = 'Invariant Violation';
|
1032 | throw err;
|
1033 | } else if ( typeof console !== 'undefined') {
|
1034 |
|
1035 | var cacheKey = componentName + ':' + propName;
|
1036 | if (
|
1037 | !manualPropTypeCallCache[cacheKey] &&
|
1038 |
|
1039 | manualPropTypeWarningCount < 3
|
1040 | ) {
|
1041 | printWarning$1(
|
1042 | 'You are manually calling a React.PropTypes validation ' +
|
1043 | 'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
|
1044 | 'and will throw in the standalone `prop-types` package. ' +
|
1045 | 'You may be seeing this warning due to a third-party PropTypes ' +
|
1046 | 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
|
1047 | );
|
1048 | manualPropTypeCallCache[cacheKey] = true;
|
1049 | manualPropTypeWarningCount++;
|
1050 | }
|
1051 | }
|
1052 | }
|
1053 | if (props[propName] == null) {
|
1054 | if (isRequired) {
|
1055 | if (props[propName] === null) {
|
1056 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
|
1057 | }
|
1058 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
|
1059 | }
|
1060 | return null;
|
1061 | } else {
|
1062 | return validate(props, propName, componentName, location, propFullName);
|
1063 | }
|
1064 | }
|
1065 |
|
1066 | var chainedCheckType = checkType.bind(null, false);
|
1067 | chainedCheckType.isRequired = checkType.bind(null, true);
|
1068 |
|
1069 | return chainedCheckType;
|
1070 | }
|
1071 |
|
1072 | function createPrimitiveTypeChecker(expectedType) {
|
1073 | function validate(props, propName, componentName, location, propFullName, secret) {
|
1074 | var propValue = props[propName];
|
1075 | var propType = getPropType(propValue);
|
1076 | if (propType !== expectedType) {
|
1077 |
|
1078 |
|
1079 |
|
1080 | var preciseType = getPreciseType(propValue);
|
1081 |
|
1082 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
|
1083 | }
|
1084 | return null;
|
1085 | }
|
1086 | return createChainableTypeChecker(validate);
|
1087 | }
|
1088 |
|
1089 | function createAnyTypeChecker() {
|
1090 | return createChainableTypeChecker(emptyFunctionThatReturnsNull);
|
1091 | }
|
1092 |
|
1093 | function createArrayOfTypeChecker(typeChecker) {
|
1094 | function validate(props, propName, componentName, location, propFullName) {
|
1095 | if (typeof typeChecker !== 'function') {
|
1096 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
|
1097 | }
|
1098 | var propValue = props[propName];
|
1099 | if (!Array.isArray(propValue)) {
|
1100 | var propType = getPropType(propValue);
|
1101 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
|
1102 | }
|
1103 | for (var i = 0; i < propValue.length; i++) {
|
1104 | var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
|
1105 | if (error instanceof Error) {
|
1106 | return error;
|
1107 | }
|
1108 | }
|
1109 | return null;
|
1110 | }
|
1111 | return createChainableTypeChecker(validate);
|
1112 | }
|
1113 |
|
1114 | function createElementTypeChecker() {
|
1115 | function validate(props, propName, componentName, location, propFullName) {
|
1116 | var propValue = props[propName];
|
1117 | if (!isValidElement(propValue)) {
|
1118 | var propType = getPropType(propValue);
|
1119 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
|
1120 | }
|
1121 | return null;
|
1122 | }
|
1123 | return createChainableTypeChecker(validate);
|
1124 | }
|
1125 |
|
1126 | function createElementTypeTypeChecker() {
|
1127 | function validate(props, propName, componentName, location, propFullName) {
|
1128 | var propValue = props[propName];
|
1129 | if (!reactIs.isValidElementType(propValue)) {
|
1130 | var propType = getPropType(propValue);
|
1131 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
|
1132 | }
|
1133 | return null;
|
1134 | }
|
1135 | return createChainableTypeChecker(validate);
|
1136 | }
|
1137 |
|
1138 | function createInstanceTypeChecker(expectedClass) {
|
1139 | function validate(props, propName, componentName, location, propFullName) {
|
1140 | if (!(props[propName] instanceof expectedClass)) {
|
1141 | var expectedClassName = expectedClass.name || ANONYMOUS;
|
1142 | var actualClassName = getClassName(props[propName]);
|
1143 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
|
1144 | }
|
1145 | return null;
|
1146 | }
|
1147 | return createChainableTypeChecker(validate);
|
1148 | }
|
1149 |
|
1150 | function createEnumTypeChecker(expectedValues) {
|
1151 | if (!Array.isArray(expectedValues)) {
|
1152 | {
|
1153 | if (arguments.length > 1) {
|
1154 | printWarning$1(
|
1155 | 'Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' +
|
1156 | 'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).'
|
1157 | );
|
1158 | } else {
|
1159 | printWarning$1('Invalid argument supplied to oneOf, expected an array.');
|
1160 | }
|
1161 | }
|
1162 | return emptyFunctionThatReturnsNull;
|
1163 | }
|
1164 |
|
1165 | function validate(props, propName, componentName, location, propFullName) {
|
1166 | var propValue = props[propName];
|
1167 | for (var i = 0; i < expectedValues.length; i++) {
|
1168 | if (is(propValue, expectedValues[i])) {
|
1169 | return null;
|
1170 | }
|
1171 | }
|
1172 |
|
1173 | var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
|
1174 | var type = getPreciseType(value);
|
1175 | if (type === 'symbol') {
|
1176 | return String(value);
|
1177 | }
|
1178 | return value;
|
1179 | });
|
1180 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
|
1181 | }
|
1182 | return createChainableTypeChecker(validate);
|
1183 | }
|
1184 |
|
1185 | function createObjectOfTypeChecker(typeChecker) {
|
1186 | function validate(props, propName, componentName, location, propFullName) {
|
1187 | if (typeof typeChecker !== 'function') {
|
1188 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
|
1189 | }
|
1190 | var propValue = props[propName];
|
1191 | var propType = getPropType(propValue);
|
1192 | if (propType !== 'object') {
|
1193 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
|
1194 | }
|
1195 | for (var key in propValue) {
|
1196 | if (has$1(propValue, key)) {
|
1197 | var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
|
1198 | if (error instanceof Error) {
|
1199 | return error;
|
1200 | }
|
1201 | }
|
1202 | }
|
1203 | return null;
|
1204 | }
|
1205 | return createChainableTypeChecker(validate);
|
1206 | }
|
1207 |
|
1208 | function createUnionTypeChecker(arrayOfTypeCheckers) {
|
1209 | if (!Array.isArray(arrayOfTypeCheckers)) {
|
1210 | printWarning$1('Invalid argument supplied to oneOfType, expected an instance of array.') ;
|
1211 | return emptyFunctionThatReturnsNull;
|
1212 | }
|
1213 |
|
1214 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
|
1215 | var checker = arrayOfTypeCheckers[i];
|
1216 | if (typeof checker !== 'function') {
|
1217 | printWarning$1(
|
1218 | 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
|
1219 | 'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
|
1220 | );
|
1221 | return emptyFunctionThatReturnsNull;
|
1222 | }
|
1223 | }
|
1224 |
|
1225 | function validate(props, propName, componentName, location, propFullName) {
|
1226 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
|
1227 | var checker = arrayOfTypeCheckers[i];
|
1228 | if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1) == null) {
|
1229 | return null;
|
1230 | }
|
1231 | }
|
1232 |
|
1233 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
|
1234 | }
|
1235 | return createChainableTypeChecker(validate);
|
1236 | }
|
1237 |
|
1238 | function createNodeChecker() {
|
1239 | function validate(props, propName, componentName, location, propFullName) {
|
1240 | if (!isNode(props[propName])) {
|
1241 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
|
1242 | }
|
1243 | return null;
|
1244 | }
|
1245 | return createChainableTypeChecker(validate);
|
1246 | }
|
1247 |
|
1248 | function createShapeTypeChecker(shapeTypes) {
|
1249 | function validate(props, propName, componentName, location, propFullName) {
|
1250 | var propValue = props[propName];
|
1251 | var propType = getPropType(propValue);
|
1252 | if (propType !== 'object') {
|
1253 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
|
1254 | }
|
1255 | for (var key in shapeTypes) {
|
1256 | var checker = shapeTypes[key];
|
1257 | if (!checker) {
|
1258 | continue;
|
1259 | }
|
1260 | var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
|
1261 | if (error) {
|
1262 | return error;
|
1263 | }
|
1264 | }
|
1265 | return null;
|
1266 | }
|
1267 | return createChainableTypeChecker(validate);
|
1268 | }
|
1269 |
|
1270 | function createStrictShapeTypeChecker(shapeTypes) {
|
1271 | function validate(props, propName, componentName, location, propFullName) {
|
1272 | var propValue = props[propName];
|
1273 | var propType = getPropType(propValue);
|
1274 | if (propType !== 'object') {
|
1275 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
|
1276 | }
|
1277 |
|
1278 |
|
1279 | var allKeys = objectAssign({}, props[propName], shapeTypes);
|
1280 | for (var key in allKeys) {
|
1281 | var checker = shapeTypes[key];
|
1282 | if (!checker) {
|
1283 | return new PropTypeError(
|
1284 | 'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
|
1285 | '\nBad object: ' + JSON.stringify(props[propName], null, ' ') +
|
1286 | '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ')
|
1287 | );
|
1288 | }
|
1289 | var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
|
1290 | if (error) {
|
1291 | return error;
|
1292 | }
|
1293 | }
|
1294 | return null;
|
1295 | }
|
1296 |
|
1297 | return createChainableTypeChecker(validate);
|
1298 | }
|
1299 |
|
1300 | function isNode(propValue) {
|
1301 | switch (typeof propValue) {
|
1302 | case 'number':
|
1303 | case 'string':
|
1304 | case 'undefined':
|
1305 | return true;
|
1306 | case 'boolean':
|
1307 | return !propValue;
|
1308 | case 'object':
|
1309 | if (Array.isArray(propValue)) {
|
1310 | return propValue.every(isNode);
|
1311 | }
|
1312 | if (propValue === null || isValidElement(propValue)) {
|
1313 | return true;
|
1314 | }
|
1315 |
|
1316 | var iteratorFn = getIteratorFn(propValue);
|
1317 | if (iteratorFn) {
|
1318 | var iterator = iteratorFn.call(propValue);
|
1319 | var step;
|
1320 | if (iteratorFn !== propValue.entries) {
|
1321 | while (!(step = iterator.next()).done) {
|
1322 | if (!isNode(step.value)) {
|
1323 | return false;
|
1324 | }
|
1325 | }
|
1326 | } else {
|
1327 |
|
1328 | while (!(step = iterator.next()).done) {
|
1329 | var entry = step.value;
|
1330 | if (entry) {
|
1331 | if (!isNode(entry[1])) {
|
1332 | return false;
|
1333 | }
|
1334 | }
|
1335 | }
|
1336 | }
|
1337 | } else {
|
1338 | return false;
|
1339 | }
|
1340 |
|
1341 | return true;
|
1342 | default:
|
1343 | return false;
|
1344 | }
|
1345 | }
|
1346 |
|
1347 | function isSymbol(propType, propValue) {
|
1348 |
|
1349 | if (propType === 'symbol') {
|
1350 | return true;
|
1351 | }
|
1352 |
|
1353 |
|
1354 | if (!propValue) {
|
1355 | return false;
|
1356 | }
|
1357 |
|
1358 |
|
1359 | if (propValue['@@toStringTag'] === 'Symbol') {
|
1360 | return true;
|
1361 | }
|
1362 |
|
1363 |
|
1364 | if (typeof Symbol === 'function' && propValue instanceof Symbol) {
|
1365 | return true;
|
1366 | }
|
1367 |
|
1368 | return false;
|
1369 | }
|
1370 |
|
1371 |
|
1372 | function getPropType(propValue) {
|
1373 | var propType = typeof propValue;
|
1374 | if (Array.isArray(propValue)) {
|
1375 | return 'array';
|
1376 | }
|
1377 | if (propValue instanceof RegExp) {
|
1378 |
|
1379 |
|
1380 |
|
1381 | return 'object';
|
1382 | }
|
1383 | if (isSymbol(propType, propValue)) {
|
1384 | return 'symbol';
|
1385 | }
|
1386 | return propType;
|
1387 | }
|
1388 |
|
1389 |
|
1390 |
|
1391 | function getPreciseType(propValue) {
|
1392 | if (typeof propValue === 'undefined' || propValue === null) {
|
1393 | return '' + propValue;
|
1394 | }
|
1395 | var propType = getPropType(propValue);
|
1396 | if (propType === 'object') {
|
1397 | if (propValue instanceof Date) {
|
1398 | return 'date';
|
1399 | } else if (propValue instanceof RegExp) {
|
1400 | return 'regexp';
|
1401 | }
|
1402 | }
|
1403 | return propType;
|
1404 | }
|
1405 |
|
1406 |
|
1407 |
|
1408 | function getPostfixForTypeWarning(value) {
|
1409 | var type = getPreciseType(value);
|
1410 | switch (type) {
|
1411 | case 'array':
|
1412 | case 'object':
|
1413 | return 'an ' + type;
|
1414 | case 'boolean':
|
1415 | case 'date':
|
1416 | case 'regexp':
|
1417 | return 'a ' + type;
|
1418 | default:
|
1419 | return type;
|
1420 | }
|
1421 | }
|
1422 |
|
1423 |
|
1424 | function getClassName(propValue) {
|
1425 | if (!propValue.constructor || !propValue.constructor.name) {
|
1426 | return ANONYMOUS;
|
1427 | }
|
1428 | return propValue.constructor.name;
|
1429 | }
|
1430 |
|
1431 | ReactPropTypes.checkPropTypes = checkPropTypes_1;
|
1432 | ReactPropTypes.resetWarningCache = checkPropTypes_1.resetWarningCache;
|
1433 | ReactPropTypes.PropTypes = ReactPropTypes;
|
1434 |
|
1435 | return ReactPropTypes;
|
1436 | };
|
1437 |
|
1438 | var propTypes = createCommonjsModule(function (module) {
|
1439 | |
1440 |
|
1441 |
|
1442 |
|
1443 |
|
1444 |
|
1445 |
|
1446 | {
|
1447 | var ReactIs = reactIs;
|
1448 |
|
1449 |
|
1450 |
|
1451 | var throwOnDirectAccess = true;
|
1452 | module.exports = factoryWithTypeCheckers(ReactIs.isElement, throwOnDirectAccess);
|
1453 | }
|
1454 | });
|
1455 | var propTypes_1 = propTypes.elementType;
|
1456 | var propTypes_2 = propTypes.bool;
|
1457 | var propTypes_3 = propTypes.func;
|
1458 | var propTypes_4 = propTypes.object;
|
1459 | var propTypes_5 = propTypes.oneOfType;
|
1460 | var propTypes_6 = propTypes.element;
|
1461 |
|
1462 | function isClassComponent(elementType) {
|
1463 |
|
1464 | var _elementType$prototyp = elementType.prototype,
|
1465 | prototype = _elementType$prototyp === void 0 ? {} : _elementType$prototyp;
|
1466 | return Boolean(prototype.isReactComponent);
|
1467 | }
|
1468 |
|
1469 | function acceptingRef(props, propName, componentName, location, propFullName) {
|
1470 | var element = props[propName];
|
1471 | var safePropName = propFullName || propName;
|
1472 |
|
1473 | if (element == null) {
|
1474 | return null;
|
1475 | }
|
1476 |
|
1477 | var warningHint;
|
1478 | var elementType = element.type;
|
1479 | |
1480 |
|
1481 |
|
1482 |
|
1483 |
|
1484 |
|
1485 |
|
1486 |
|
1487 |
|
1488 |
|
1489 | if (typeof elementType === 'function' && !isClassComponent(elementType)) {
|
1490 | warningHint = 'Did you accidentally use a plain function component for an element instead?';
|
1491 | }
|
1492 |
|
1493 | if (warningHint !== undefined) {
|
1494 | 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');
|
1495 | }
|
1496 |
|
1497 | return null;
|
1498 | }
|
1499 |
|
1500 | var elementAcceptingRef = chainPropTypes(propTypes.element, acceptingRef);
|
1501 | elementAcceptingRef.isRequired = chainPropTypes(propTypes.element.isRequired, acceptingRef);
|
1502 |
|
1503 | function isClassComponent$1(elementType) {
|
1504 |
|
1505 | var _elementType$prototyp = elementType.prototype,
|
1506 | prototype = _elementType$prototyp === void 0 ? {} : _elementType$prototyp;
|
1507 | return Boolean(prototype.isReactComponent);
|
1508 | }
|
1509 |
|
1510 | function elementTypeAcceptingRef(props, propName, componentName, location, propFullName) {
|
1511 | var propValue = props[propName];
|
1512 | var safePropName = propFullName || propName;
|
1513 |
|
1514 | if (propValue == null) {
|
1515 | return null;
|
1516 | }
|
1517 |
|
1518 | var warningHint;
|
1519 | |
1520 |
|
1521 |
|
1522 |
|
1523 |
|
1524 |
|
1525 |
|
1526 |
|
1527 |
|
1528 |
|
1529 | if (typeof propValue === 'function' && !isClassComponent$1(propValue)) {
|
1530 | warningHint = 'Did you accidentally provide a plain function component instead?';
|
1531 | }
|
1532 |
|
1533 | if (warningHint !== undefined) {
|
1534 | 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');
|
1535 | }
|
1536 |
|
1537 | return null;
|
1538 | }
|
1539 |
|
1540 | var elementTypeAcceptingRef$1 = chainPropTypes(propTypes_1, elementTypeAcceptingRef);
|
1541 |
|
1542 | function _defineProperty(obj, key, value) {
|
1543 | if (key in obj) {
|
1544 | Object.defineProperty(obj, key, {
|
1545 | value: value,
|
1546 | enumerable: true,
|
1547 | configurable: true,
|
1548 | writable: true
|
1549 | });
|
1550 | } else {
|
1551 | obj[key] = value;
|
1552 | }
|
1553 |
|
1554 | return obj;
|
1555 | }
|
1556 |
|
1557 |
|
1558 |
|
1559 |
|
1560 |
|
1561 | var specialProperty = "exact-prop: \u200B";
|
1562 | function exactProp(propTypes) {
|
1563 |
|
1564 | return _extends({}, propTypes, _defineProperty({}, specialProperty, function (props) {
|
1565 | var unsupportedProps = Object.keys(props).filter(function (prop) {
|
1566 | return !propTypes.hasOwnProperty(prop);
|
1567 | });
|
1568 |
|
1569 | if (unsupportedProps.length > 0) {
|
1570 | return new Error("The following props are not supported: ".concat(unsupportedProps.map(function (prop) {
|
1571 | return "`".concat(prop, "`");
|
1572 | }).join(', '), ". Please remove them."));
|
1573 | }
|
1574 |
|
1575 | return null;
|
1576 | }));
|
1577 | }
|
1578 |
|
1579 |
|
1580 |
|
1581 | var fnNameMatchRegex = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
|
1582 | function getFunctionName(fn) {
|
1583 | var match = "".concat(fn).match(fnNameMatchRegex);
|
1584 | var name = match && match[1];
|
1585 | return name || '';
|
1586 | }
|
1587 | |
1588 |
|
1589 |
|
1590 |
|
1591 |
|
1592 |
|
1593 | function getFunctionComponentName(Component) {
|
1594 | var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
1595 | return Component.displayName || Component.name || getFunctionName(Component) || fallback;
|
1596 | }
|
1597 |
|
1598 | function getWrappedName(outerType, innerType, wrapperName) {
|
1599 | var functionName = getFunctionComponentName(innerType);
|
1600 | return outerType.displayName || (functionName !== '' ? "".concat(wrapperName, "(").concat(functionName, ")") : wrapperName);
|
1601 | }
|
1602 | |
1603 |
|
1604 |
|
1605 |
|
1606 |
|
1607 |
|
1608 |
|
1609 |
|
1610 |
|
1611 |
|
1612 | function getDisplayName(Component) {
|
1613 | if (Component == null) {
|
1614 | return undefined;
|
1615 | }
|
1616 |
|
1617 | if (typeof Component === 'string') {
|
1618 | return Component;
|
1619 | }
|
1620 |
|
1621 | if (typeof Component === 'function') {
|
1622 | return getFunctionComponentName(Component, 'Component');
|
1623 | }
|
1624 |
|
1625 | if (_typeof(Component) === 'object') {
|
1626 | switch (Component.$$typeof) {
|
1627 | case reactIs_1:
|
1628 | return getWrappedName(Component, Component.render, 'ForwardRef');
|
1629 |
|
1630 | case reactIs_5:
|
1631 | return getWrappedName(Component, Component.type, 'memo');
|
1632 |
|
1633 | default:
|
1634 | return undefined;
|
1635 | }
|
1636 | }
|
1637 |
|
1638 | return undefined;
|
1639 | }
|
1640 |
|
1641 | function HTMLElementType(props, propName, componentName, location, propFullName) {
|
1642 |
|
1643 | var propValue = props[propName];
|
1644 | var safePropName = propFullName || propName;
|
1645 |
|
1646 | if (propValue == null) {
|
1647 | return null;
|
1648 | }
|
1649 |
|
1650 | if (propValue && propValue.nodeType !== 1) {
|
1651 | return new Error("Invalid ".concat(location, " `").concat(safePropName, "` supplied to `").concat(componentName, "`. ") + "Expected an HTMLElement.");
|
1652 | }
|
1653 |
|
1654 | return null;
|
1655 | }
|
1656 |
|
1657 | var refType = propTypes.oneOfType([propTypes.func, propTypes.object]);
|
1658 |
|
1659 |
|
1660 |
|
1661 | |
1662 |
|
1663 |
|
1664 |
|
1665 |
|
1666 |
|
1667 |
|
1668 |
|
1669 | function clamp(value) {
|
1670 | var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
1671 | var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
|
1672 |
|
1673 | {
|
1674 | if (value < min || value > max) {
|
1675 | console.error("Material-UI: The value provided ".concat(value, " is out of range [").concat(min, ", ").concat(max, "]."));
|
1676 | }
|
1677 | }
|
1678 |
|
1679 | return Math.min(Math.max(min, value), max);
|
1680 | }
|
1681 | |
1682 |
|
1683 |
|
1684 |
|
1685 |
|
1686 |
|
1687 |
|
1688 |
|
1689 | function hexToRgb(color) {
|
1690 | color = color.substr(1);
|
1691 | var re = new RegExp(".{1,".concat(color.length >= 6 ? 2 : 1, "}"), 'g');
|
1692 | var colors = color.match(re);
|
1693 |
|
1694 | if (colors && colors[0].length === 1) {
|
1695 | colors = colors.map(function (n) {
|
1696 | return n + n;
|
1697 | });
|
1698 | }
|
1699 |
|
1700 | return colors ? "rgb".concat(colors.length === 4 ? 'a' : '', "(").concat(colors.map(function (n, index) {
|
1701 | return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
|
1702 | }).join(', '), ")") : '';
|
1703 | }
|
1704 |
|
1705 | function intToHex(int) {
|
1706 | var hex = int.toString(16);
|
1707 | return hex.length === 1 ? "0".concat(hex) : hex;
|
1708 | }
|
1709 | |
1710 |
|
1711 |
|
1712 |
|
1713 |
|
1714 |
|
1715 |
|
1716 |
|
1717 | function rgbToHex(color) {
|
1718 |
|
1719 | if (color.indexOf('#') === 0) {
|
1720 | return color;
|
1721 | }
|
1722 |
|
1723 | var _decomposeColor = decomposeColor(color),
|
1724 | values = _decomposeColor.values;
|
1725 |
|
1726 | return "#".concat(values.map(function (n) {
|
1727 | return intToHex(n);
|
1728 | }).join(''));
|
1729 | }
|
1730 | |
1731 |
|
1732 |
|
1733 |
|
1734 |
|
1735 |
|
1736 |
|
1737 | function hslToRgb(color) {
|
1738 | color = decomposeColor(color);
|
1739 | var _color = color,
|
1740 | values = _color.values;
|
1741 | var h = values[0];
|
1742 | var s = values[1] / 100;
|
1743 | var l = values[2] / 100;
|
1744 | var a = s * Math.min(l, 1 - l);
|
1745 |
|
1746 | var f = function f(n) {
|
1747 | var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12;
|
1748 | return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
1749 | };
|
1750 |
|
1751 | var type = 'rgb';
|
1752 | var rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
|
1753 |
|
1754 | if (color.type === 'hsla') {
|
1755 | type += 'a';
|
1756 | rgb.push(values[3]);
|
1757 | }
|
1758 |
|
1759 | return recomposeColor({
|
1760 | type: type,
|
1761 | values: rgb
|
1762 | });
|
1763 | }
|
1764 | |
1765 |
|
1766 |
|
1767 |
|
1768 |
|
1769 |
|
1770 |
|
1771 |
|
1772 |
|
1773 | function decomposeColor(color) {
|
1774 |
|
1775 | if (color.type) {
|
1776 | return color;
|
1777 | }
|
1778 |
|
1779 | if (color.charAt(0) === '#') {
|
1780 | return decomposeColor(hexToRgb(color));
|
1781 | }
|
1782 |
|
1783 | var marker = color.indexOf('(');
|
1784 | var type = color.substring(0, marker);
|
1785 |
|
1786 | if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {
|
1787 | throw new Error( "Material-UI: Unsupported `".concat(color, "` color.\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().") );
|
1788 | }
|
1789 |
|
1790 | var values = color.substring(marker + 1, color.length - 1).split(',');
|
1791 | values = values.map(function (value) {
|
1792 | return parseFloat(value);
|
1793 | });
|
1794 | return {
|
1795 | type: type,
|
1796 | values: values
|
1797 | };
|
1798 | }
|
1799 | |
1800 |
|
1801 |
|
1802 |
|
1803 |
|
1804 |
|
1805 |
|
1806 |
|
1807 |
|
1808 | function recomposeColor(color) {
|
1809 | var type = color.type;
|
1810 | var values = color.values;
|
1811 |
|
1812 | if (type.indexOf('rgb') !== -1) {
|
1813 |
|
1814 | values = values.map(function (n, i) {
|
1815 | return i < 3 ? parseInt(n, 10) : n;
|
1816 | });
|
1817 | } else if (type.indexOf('hsl') !== -1) {
|
1818 | values[1] = "".concat(values[1], "%");
|
1819 | values[2] = "".concat(values[2], "%");
|
1820 | }
|
1821 |
|
1822 | return "".concat(type, "(").concat(values.join(', '), ")");
|
1823 | }
|
1824 | |
1825 |
|
1826 |
|
1827 |
|
1828 |
|
1829 |
|
1830 |
|
1831 |
|
1832 |
|
1833 |
|
1834 | function getContrastRatio(foreground, background) {
|
1835 | var lumA = getLuminance(foreground);
|
1836 | var lumB = getLuminance(background);
|
1837 | return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
|
1838 | }
|
1839 | |
1840 |
|
1841 |
|
1842 |
|
1843 |
|
1844 |
|
1845 |
|
1846 |
|
1847 |
|
1848 |
|
1849 | function getLuminance(color) {
|
1850 | color = decomposeColor(color);
|
1851 | var rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values;
|
1852 | rgb = rgb.map(function (val) {
|
1853 | val /= 255;
|
1854 |
|
1855 | return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
|
1856 | });
|
1857 |
|
1858 | return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
|
1859 | }
|
1860 | |
1861 |
|
1862 |
|
1863 |
|
1864 |
|
1865 |
|
1866 |
|
1867 |
|
1868 |
|
1869 | function emphasize(color) {
|
1870 | var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15;
|
1871 | return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
|
1872 | }
|
1873 | var warnedOnce = false;
|
1874 | |
1875 |
|
1876 |
|
1877 |
|
1878 |
|
1879 |
|
1880 |
|
1881 |
|
1882 |
|
1883 |
|
1884 |
|
1885 |
|
1886 | function fade(color, value) {
|
1887 | {
|
1888 | if (!warnedOnce) {
|
1889 | warnedOnce = true;
|
1890 | console.error(['Material-UI: The `fade` color utility was renamed to `alpha` to better describe its functionality.', '', "You should use `import { alpha } from '@material-ui/core/styles'`"].join('\n'));
|
1891 | }
|
1892 | }
|
1893 |
|
1894 | return alpha(color, value);
|
1895 | }
|
1896 | |
1897 |
|
1898 |
|
1899 |
|
1900 |
|
1901 |
|
1902 |
|
1903 |
|
1904 |
|
1905 | function alpha(color, value) {
|
1906 | color = decomposeColor(color);
|
1907 | value = clamp(value);
|
1908 |
|
1909 | if (color.type === 'rgb' || color.type === 'hsl') {
|
1910 | color.type += 'a';
|
1911 | }
|
1912 |
|
1913 | color.values[3] = value;
|
1914 | return recomposeColor(color);
|
1915 | }
|
1916 | |
1917 |
|
1918 |
|
1919 |
|
1920 |
|
1921 |
|
1922 |
|
1923 |
|
1924 | function darken(color, coefficient) {
|
1925 | color = decomposeColor(color);
|
1926 | coefficient = clamp(coefficient);
|
1927 |
|
1928 | if (color.type.indexOf('hsl') !== -1) {
|
1929 | color.values[2] *= 1 - coefficient;
|
1930 | } else if (color.type.indexOf('rgb') !== -1) {
|
1931 | for (var i = 0; i < 3; i += 1) {
|
1932 | color.values[i] *= 1 - coefficient;
|
1933 | }
|
1934 | }
|
1935 |
|
1936 | return recomposeColor(color);
|
1937 | }
|
1938 | |
1939 |
|
1940 |
|
1941 |
|
1942 |
|
1943 |
|
1944 |
|
1945 |
|
1946 | function lighten(color, coefficient) {
|
1947 | color = decomposeColor(color);
|
1948 | coefficient = clamp(coefficient);
|
1949 |
|
1950 | if (color.type.indexOf('hsl') !== -1) {
|
1951 | color.values[2] += (100 - color.values[2]) * coefficient;
|
1952 | } else if (color.type.indexOf('rgb') !== -1) {
|
1953 | for (var i = 0; i < 3; i += 1) {
|
1954 | color.values[i] += (255 - color.values[i]) * coefficient;
|
1955 | }
|
1956 | }
|
1957 |
|
1958 | return recomposeColor(color);
|
1959 | }
|
1960 |
|
1961 | function _objectWithoutPropertiesLoose(source, excluded) {
|
1962 | if (source == null) return {};
|
1963 | var target = {};
|
1964 | var sourceKeys = Object.keys(source);
|
1965 | var key, i;
|
1966 |
|
1967 | for (i = 0; i < sourceKeys.length; i++) {
|
1968 | key = sourceKeys[i];
|
1969 | if (excluded.indexOf(key) >= 0) continue;
|
1970 | target[key] = source[key];
|
1971 | }
|
1972 |
|
1973 | return target;
|
1974 | }
|
1975 |
|
1976 | function _objectWithoutProperties(source, excluded) {
|
1977 | if (source == null) return {};
|
1978 | var target = _objectWithoutPropertiesLoose(source, excluded);
|
1979 | var key, i;
|
1980 |
|
1981 | if (Object.getOwnPropertySymbols) {
|
1982 | var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
1983 |
|
1984 | for (i = 0; i < sourceSymbolKeys.length; i++) {
|
1985 | key = sourceSymbolKeys[i];
|
1986 | if (excluded.indexOf(key) >= 0) continue;
|
1987 | if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
1988 | target[key] = source[key];
|
1989 | }
|
1990 | }
|
1991 |
|
1992 | return target;
|
1993 | }
|
1994 |
|
1995 |
|
1996 |
|
1997 | var keys = ['xs', 'sm', 'md', 'lg', 'xl'];
|
1998 |
|
1999 | function createBreakpoints(breakpoints) {
|
2000 | var _breakpoints$values = breakpoints.values,
|
2001 | values = _breakpoints$values === void 0 ? {
|
2002 | xs: 0,
|
2003 | sm: 600,
|
2004 | md: 960,
|
2005 | lg: 1280,
|
2006 | xl: 1920
|
2007 | } : _breakpoints$values,
|
2008 | _breakpoints$unit = breakpoints.unit,
|
2009 | unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit,
|
2010 | _breakpoints$step = breakpoints.step,
|
2011 | step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
|
2012 | other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);
|
2013 |
|
2014 | function up(key) {
|
2015 | var value = typeof values[key] === 'number' ? values[key] : key;
|
2016 | return "@media (min-width:".concat(value).concat(unit, ")");
|
2017 | }
|
2018 |
|
2019 | function down(key) {
|
2020 | var endIndex = keys.indexOf(key) + 1;
|
2021 | var upperbound = values[keys[endIndex]];
|
2022 |
|
2023 | if (endIndex === keys.length) {
|
2024 |
|
2025 | return up('xs');
|
2026 | }
|
2027 |
|
2028 | var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
|
2029 | return "@media (max-width:".concat(value - step / 100).concat(unit, ")");
|
2030 | }
|
2031 |
|
2032 | function between(start, end) {
|
2033 | var endIndex = keys.indexOf(end);
|
2034 |
|
2035 | if (endIndex === keys.length - 1) {
|
2036 | return up(start);
|
2037 | }
|
2038 |
|
2039 | return "@media (min-width:".concat(typeof values[start] === 'number' ? values[start] : start).concat(unit, ") and ") + "(max-width:".concat((endIndex !== -1 && typeof values[keys[endIndex + 1]] === 'number' ? values[keys[endIndex + 1]] : end) - step / 100).concat(unit, ")");
|
2040 | }
|
2041 |
|
2042 | function only(key) {
|
2043 | return between(key, key);
|
2044 | }
|
2045 |
|
2046 | var warnedOnce = false;
|
2047 |
|
2048 | function width(key) {
|
2049 | {
|
2050 | if (!warnedOnce) {
|
2051 | warnedOnce = true;
|
2052 | console.warn(["Material-UI: The `theme.breakpoints.width` utility is deprecated because it's redundant.", 'Use the `theme.breakpoints.values` instead.'].join('\n'));
|
2053 | }
|
2054 | }
|
2055 |
|
2056 | return values[key];
|
2057 | }
|
2058 |
|
2059 | return _extends({
|
2060 | keys: keys,
|
2061 | values: values,
|
2062 | up: up,
|
2063 | down: down,
|
2064 | between: between,
|
2065 | only: only,
|
2066 | width: width
|
2067 | }, other);
|
2068 | }
|
2069 |
|
2070 | function createMixins(breakpoints, spacing, mixins) {
|
2071 | var _toolbar;
|
2072 |
|
2073 | return _extends({
|
2074 | gutters: function gutters() {
|
2075 | var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
2076 | console.warn(['Material-UI: theme.mixins.gutters() is deprecated.', 'You can use the source of the mixin directly:', "\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n [theme.breakpoints.up('sm')]: {\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(3),\n },\n "].join('\n'));
|
2077 | return _extends({
|
2078 | paddingLeft: spacing(2),
|
2079 | paddingRight: spacing(2)
|
2080 | }, styles, _defineProperty({}, breakpoints.up('sm'), _extends({
|
2081 | paddingLeft: spacing(3),
|
2082 | paddingRight: spacing(3)
|
2083 | }, styles[breakpoints.up('sm')])));
|
2084 | },
|
2085 | toolbar: (_toolbar = {
|
2086 | minHeight: 56
|
2087 | }, _defineProperty(_toolbar, "".concat(breakpoints.up('xs'), " and (orientation: landscape)"), {
|
2088 | minHeight: 48
|
2089 | }), _defineProperty(_toolbar, breakpoints.up('sm'), {
|
2090 | minHeight: 64
|
2091 | }), _toolbar)
|
2092 | }, mixins);
|
2093 | }
|
2094 |
|
2095 | var light = {
|
2096 |
|
2097 | text: {
|
2098 |
|
2099 | primary: 'rgba(0, 0, 0, 0.87)',
|
2100 |
|
2101 | secondary: 'rgba(0, 0, 0, 0.54)',
|
2102 |
|
2103 | disabled: 'rgba(0, 0, 0, 0.38)',
|
2104 |
|
2105 | hint: 'rgba(0, 0, 0, 0.38)'
|
2106 | },
|
2107 |
|
2108 | divider: 'rgba(0, 0, 0, 0.12)',
|
2109 |
|
2110 |
|
2111 | background: {
|
2112 | paper: common.white,
|
2113 | default: grey[50]
|
2114 | },
|
2115 |
|
2116 | action: {
|
2117 |
|
2118 | active: 'rgba(0, 0, 0, 0.54)',
|
2119 |
|
2120 | hover: 'rgba(0, 0, 0, 0.04)',
|
2121 | hoverOpacity: 0.04,
|
2122 |
|
2123 | selected: 'rgba(0, 0, 0, 0.08)',
|
2124 | selectedOpacity: 0.08,
|
2125 |
|
2126 | disabled: 'rgba(0, 0, 0, 0.26)',
|
2127 |
|
2128 | disabledBackground: 'rgba(0, 0, 0, 0.12)',
|
2129 | disabledOpacity: 0.38,
|
2130 | focus: 'rgba(0, 0, 0, 0.12)',
|
2131 | focusOpacity: 0.12,
|
2132 | activatedOpacity: 0.12
|
2133 | }
|
2134 | };
|
2135 | var dark = {
|
2136 | text: {
|
2137 | primary: common.white,
|
2138 | secondary: 'rgba(255, 255, 255, 0.7)',
|
2139 | disabled: 'rgba(255, 255, 255, 0.5)',
|
2140 | hint: 'rgba(255, 255, 255, 0.5)',
|
2141 | icon: 'rgba(255, 255, 255, 0.5)'
|
2142 | },
|
2143 | divider: 'rgba(255, 255, 255, 0.12)',
|
2144 | background: {
|
2145 | paper: grey[800],
|
2146 | default: '#303030'
|
2147 | },
|
2148 | action: {
|
2149 | active: common.white,
|
2150 | hover: 'rgba(255, 255, 255, 0.08)',
|
2151 | hoverOpacity: 0.08,
|
2152 | selected: 'rgba(255, 255, 255, 0.16)',
|
2153 | selectedOpacity: 0.16,
|
2154 | disabled: 'rgba(255, 255, 255, 0.3)',
|
2155 | disabledBackground: 'rgba(255, 255, 255, 0.12)',
|
2156 | disabledOpacity: 0.38,
|
2157 | focus: 'rgba(255, 255, 255, 0.12)',
|
2158 | focusOpacity: 0.12,
|
2159 | activatedOpacity: 0.24
|
2160 | }
|
2161 | };
|
2162 |
|
2163 | function addLightOrDark(intent, direction, shade, tonalOffset) {
|
2164 | var tonalOffsetLight = tonalOffset.light || tonalOffset;
|
2165 | var tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
|
2166 |
|
2167 | if (!intent[direction]) {
|
2168 | if (intent.hasOwnProperty(shade)) {
|
2169 | intent[direction] = intent[shade];
|
2170 | } else if (direction === 'light') {
|
2171 | intent.light = lighten(intent.main, tonalOffsetLight);
|
2172 | } else if (direction === 'dark') {
|
2173 | intent.dark = darken(intent.main, tonalOffsetDark);
|
2174 | }
|
2175 | }
|
2176 | }
|
2177 |
|
2178 | function createPalette(palette) {
|
2179 | var _palette$primary = palette.primary,
|
2180 | primary = _palette$primary === void 0 ? {
|
2181 | light: indigo[300],
|
2182 | main: indigo[500],
|
2183 | dark: indigo[700]
|
2184 | } : _palette$primary,
|
2185 | _palette$secondary = palette.secondary,
|
2186 | secondary = _palette$secondary === void 0 ? {
|
2187 | light: pink.A200,
|
2188 | main: pink.A400,
|
2189 | dark: pink.A700
|
2190 | } : _palette$secondary,
|
2191 | _palette$error = palette.error,
|
2192 | error = _palette$error === void 0 ? {
|
2193 | light: red[300],
|
2194 | main: red[500],
|
2195 | dark: red[700]
|
2196 | } : _palette$error,
|
2197 | _palette$warning = palette.warning,
|
2198 | warning = _palette$warning === void 0 ? {
|
2199 | light: orange[300],
|
2200 | main: orange[500],
|
2201 | dark: orange[700]
|
2202 | } : _palette$warning,
|
2203 | _palette$info = palette.info,
|
2204 | info = _palette$info === void 0 ? {
|
2205 | light: blue[300],
|
2206 | main: blue[500],
|
2207 | dark: blue[700]
|
2208 | } : _palette$info,
|
2209 | _palette$success = palette.success,
|
2210 | success = _palette$success === void 0 ? {
|
2211 | light: green[300],
|
2212 | main: green[500],
|
2213 | dark: green[700]
|
2214 | } : _palette$success,
|
2215 | _palette$type = palette.type,
|
2216 | type = _palette$type === void 0 ? 'light' : _palette$type,
|
2217 | _palette$contrastThre = palette.contrastThreshold,
|
2218 | contrastThreshold = _palette$contrastThre === void 0 ? 3 : _palette$contrastThre,
|
2219 | _palette$tonalOffset = palette.tonalOffset,
|
2220 | tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
|
2221 | other = _objectWithoutProperties(palette, ["primary", "secondary", "error", "warning", "info", "success", "type", "contrastThreshold", "tonalOffset"]);
|
2222 |
|
2223 |
|
2224 |
|
2225 |
|
2226 | function getContrastText(background) {
|
2227 | var contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
|
2228 |
|
2229 | {
|
2230 | var contrast = getContrastRatio(background, contrastText);
|
2231 |
|
2232 | if (contrast < 3) {
|
2233 | 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'));
|
2234 | }
|
2235 | }
|
2236 |
|
2237 | return contrastText;
|
2238 | }
|
2239 |
|
2240 | var augmentColor = function augmentColor(color) {
|
2241 | var mainShade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
|
2242 | var lightShade = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
|
2243 | var darkShade = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 700;
|
2244 | color = _extends({}, color);
|
2245 |
|
2246 | if (!color.main && color[mainShade]) {
|
2247 | color.main = color[mainShade];
|
2248 | }
|
2249 |
|
2250 | if (!color.main) {
|
2251 | throw new Error( "Material-UI: The color provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `".concat(mainShade, "` property.") );
|
2252 | }
|
2253 |
|
2254 | if (typeof color.main !== 'string') {
|
2255 | throw new Error( "Material-UI: The color provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `".concat(JSON.stringify(color.main), "` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport {\xA0green } from \"@material-ui/core/colors\";\n\nconst theme1 = createTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n primary: { main: green[500] },\n} });") );
|
2256 | }
|
2257 |
|
2258 | addLightOrDark(color, 'light', lightShade, tonalOffset);
|
2259 | addLightOrDark(color, 'dark', darkShade, tonalOffset);
|
2260 |
|
2261 | if (!color.contrastText) {
|
2262 | color.contrastText = getContrastText(color.main);
|
2263 | }
|
2264 |
|
2265 | return color;
|
2266 | };
|
2267 |
|
2268 | var types = {
|
2269 | dark: dark,
|
2270 | light: light
|
2271 | };
|
2272 |
|
2273 | {
|
2274 | if (!types[type]) {
|
2275 | console.error("Material-UI: The palette type `".concat(type, "` is not supported."));
|
2276 | }
|
2277 | }
|
2278 |
|
2279 | var paletteOutput = deepmerge(_extends({
|
2280 |
|
2281 | common: common,
|
2282 |
|
2283 | type: type,
|
2284 |
|
2285 | primary: augmentColor(primary),
|
2286 |
|
2287 | secondary: augmentColor(secondary, 'A400', 'A200', 'A700'),
|
2288 |
|
2289 | error: augmentColor(error),
|
2290 |
|
2291 | warning: augmentColor(warning),
|
2292 |
|
2293 | info: augmentColor(info),
|
2294 |
|
2295 | success: augmentColor(success),
|
2296 |
|
2297 | grey: grey,
|
2298 |
|
2299 |
|
2300 | contrastThreshold: contrastThreshold,
|
2301 |
|
2302 | getContrastText: getContrastText,
|
2303 |
|
2304 | augmentColor: augmentColor,
|
2305 |
|
2306 |
|
2307 |
|
2308 | tonalOffset: tonalOffset
|
2309 | }, types[type]), other);
|
2310 | return paletteOutput;
|
2311 | }
|
2312 |
|
2313 | function round(value) {
|
2314 | return Math.round(value * 1e5) / 1e5;
|
2315 | }
|
2316 |
|
2317 | var warnedOnce$1 = false;
|
2318 |
|
2319 | function roundWithDeprecationWarning(value) {
|
2320 | {
|
2321 | if (!warnedOnce$1) {
|
2322 | console.warn(['Material-UI: The `theme.typography.round` helper is deprecated.', 'Head to https://material-ui.com/r/migration-v4/#theme for a migration path.'].join('\n'));
|
2323 | warnedOnce$1 = true;
|
2324 | }
|
2325 | }
|
2326 |
|
2327 | return round(value);
|
2328 | }
|
2329 |
|
2330 | var caseAllCaps = {
|
2331 | textTransform: 'uppercase'
|
2332 | };
|
2333 | var defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
|
2334 | |
2335 |
|
2336 |
|
2337 |
|
2338 |
|
2339 | function createTypography(palette, typography) {
|
2340 | var _ref = typeof typography === 'function' ? typography(palette) : typography,
|
2341 | _ref$fontFamily = _ref.fontFamily,
|
2342 | fontFamily = _ref$fontFamily === void 0 ? defaultFontFamily : _ref$fontFamily,
|
2343 | _ref$fontSize = _ref.fontSize,
|
2344 | fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
|
2345 | _ref$fontWeightLight = _ref.fontWeightLight,
|
2346 | fontWeightLight = _ref$fontWeightLight === void 0 ? 300 : _ref$fontWeightLight,
|
2347 | _ref$fontWeightRegula = _ref.fontWeightRegular,
|
2348 | fontWeightRegular = _ref$fontWeightRegula === void 0 ? 400 : _ref$fontWeightRegula,
|
2349 | _ref$fontWeightMedium = _ref.fontWeightMedium,
|
2350 | fontWeightMedium = _ref$fontWeightMedium === void 0 ? 500 : _ref$fontWeightMedium,
|
2351 | _ref$fontWeightBold = _ref.fontWeightBold,
|
2352 | fontWeightBold = _ref$fontWeightBold === void 0 ? 700 : _ref$fontWeightBold,
|
2353 | _ref$htmlFontSize = _ref.htmlFontSize,
|
2354 | htmlFontSize = _ref$htmlFontSize === void 0 ? 16 : _ref$htmlFontSize,
|
2355 | allVariants = _ref.allVariants,
|
2356 | pxToRem2 = _ref.pxToRem,
|
2357 | other = _objectWithoutProperties(_ref, ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"]);
|
2358 |
|
2359 | {
|
2360 | if (typeof fontSize !== 'number') {
|
2361 | console.error('Material-UI: `fontSize` is required to be a number.');
|
2362 | }
|
2363 |
|
2364 | if (typeof htmlFontSize !== 'number') {
|
2365 | console.error('Material-UI: `htmlFontSize` is required to be a number.');
|
2366 | }
|
2367 | }
|
2368 |
|
2369 | var coef = fontSize / 14;
|
2370 |
|
2371 | var pxToRem = pxToRem2 || function (size) {
|
2372 | return "".concat(size / htmlFontSize * coef, "rem");
|
2373 | };
|
2374 |
|
2375 | var buildVariant = function buildVariant(fontWeight, size, lineHeight, letterSpacing, casing) {
|
2376 | return _extends({
|
2377 | fontFamily: fontFamily,
|
2378 | fontWeight: fontWeight,
|
2379 | fontSize: pxToRem(size),
|
2380 |
|
2381 | lineHeight: lineHeight
|
2382 | }, fontFamily === defaultFontFamily ? {
|
2383 | letterSpacing: "".concat(round(letterSpacing / size), "em")
|
2384 | } : {}, casing, allVariants);
|
2385 | };
|
2386 |
|
2387 | var variants = {
|
2388 | h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
|
2389 | h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
|
2390 | h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
|
2391 | h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
|
2392 | h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
|
2393 | h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
|
2394 | subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
|
2395 | subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
|
2396 | body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
|
2397 | body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
|
2398 | button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
|
2399 | caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
|
2400 | overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
|
2401 | };
|
2402 | return deepmerge(_extends({
|
2403 | htmlFontSize: htmlFontSize,
|
2404 | pxToRem: pxToRem,
|
2405 | round: roundWithDeprecationWarning,
|
2406 |
|
2407 | fontFamily: fontFamily,
|
2408 | fontSize: fontSize,
|
2409 | fontWeightLight: fontWeightLight,
|
2410 | fontWeightRegular: fontWeightRegular,
|
2411 | fontWeightMedium: fontWeightMedium,
|
2412 | fontWeightBold: fontWeightBold
|
2413 | }, variants), other, {
|
2414 | clone: false
|
2415 |
|
2416 | });
|
2417 | }
|
2418 |
|
2419 | var shadowKeyUmbraOpacity = 0.2;
|
2420 | var shadowKeyPenumbraOpacity = 0.14;
|
2421 | var shadowAmbientShadowOpacity = 0.12;
|
2422 |
|
2423 | function createShadow() {
|
2424 | 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(',');
|
2425 | }
|
2426 |
|
2427 |
|
2428 | 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)];
|
2429 |
|
2430 | var shape = {
|
2431 | borderRadius: 4
|
2432 | };
|
2433 |
|
2434 | var responsivePropType = propTypes.oneOfType([propTypes.number, propTypes.string, propTypes.object, propTypes.array]) ;
|
2435 |
|
2436 | function _arrayLikeToArray(arr, len) {
|
2437 | if (len == null || len > arr.length) len = arr.length;
|
2438 |
|
2439 | for (var i = 0, arr2 = new Array(len); i < len; i++) {
|
2440 | arr2[i] = arr[i];
|
2441 | }
|
2442 |
|
2443 | return arr2;
|
2444 | }
|
2445 |
|
2446 | function _arrayWithoutHoles(arr) {
|
2447 | if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
2448 | }
|
2449 |
|
2450 | function _iterableToArray(iter) {
|
2451 | if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
|
2452 | }
|
2453 |
|
2454 | function _unsupportedIterableToArray(o, minLen) {
|
2455 | if (!o) return;
|
2456 | if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
2457 | var n = Object.prototype.toString.call(o).slice(8, -1);
|
2458 | if (n === "Object" && o.constructor) n = o.constructor.name;
|
2459 | if (n === "Map" || n === "Set") return Array.from(o);
|
2460 | if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
2461 | }
|
2462 |
|
2463 | function _nonIterableSpread() {
|
2464 | throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
2465 | }
|
2466 |
|
2467 | function _toConsumableArray(arr) {
|
2468 | return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
2469 | }
|
2470 |
|
2471 | function merge(acc, item) {
|
2472 | if (!item) {
|
2473 | return acc;
|
2474 | }
|
2475 |
|
2476 | return deepmerge(acc, item, {
|
2477 | clone: false
|
2478 |
|
2479 | });
|
2480 | }
|
2481 |
|
2482 |
|
2483 |
|
2484 | var values = {
|
2485 | xs: 0,
|
2486 | sm: 600,
|
2487 | md: 960,
|
2488 | lg: 1280,
|
2489 | xl: 1920
|
2490 | };
|
2491 | var defaultBreakpoints = {
|
2492 |
|
2493 |
|
2494 | keys: ['xs', 'sm', 'md', 'lg', 'xl'],
|
2495 | up: function up(key) {
|
2496 | return "@media (min-width:".concat(values[key], "px)");
|
2497 | }
|
2498 | };
|
2499 | function handleBreakpoints(props, propValue, styleFromPropValue) {
|
2500 | {
|
2501 | if (!props.theme) {
|
2502 | console.error('Material-UI: You are calling a style function without a theme value.');
|
2503 | }
|
2504 | }
|
2505 |
|
2506 | if (Array.isArray(propValue)) {
|
2507 | var themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
|
2508 | return propValue.reduce(function (acc, item, index) {
|
2509 | acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
|
2510 | return acc;
|
2511 | }, {});
|
2512 | }
|
2513 |
|
2514 | if (_typeof(propValue) === 'object') {
|
2515 | var _themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
|
2516 |
|
2517 | return Object.keys(propValue).reduce(function (acc, breakpoint) {
|
2518 | acc[_themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
|
2519 | return acc;
|
2520 | }, {});
|
2521 | }
|
2522 |
|
2523 | var output = styleFromPropValue(propValue);
|
2524 | return output;
|
2525 | }
|
2526 |
|
2527 | function getPath(obj, path) {
|
2528 | if (!path || typeof path !== 'string') {
|
2529 | return null;
|
2530 | }
|
2531 |
|
2532 | return path.split('.').reduce(function (acc, item) {
|
2533 | return acc && acc[item] ? acc[item] : null;
|
2534 | }, obj);
|
2535 | }
|
2536 |
|
2537 | function style(options) {
|
2538 | var prop = options.prop,
|
2539 | _options$cssProperty = options.cssProperty,
|
2540 | cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,
|
2541 | themeKey = options.themeKey,
|
2542 | transform = options.transform;
|
2543 |
|
2544 | var fn = function fn(props) {
|
2545 | if (props[prop] == null) {
|
2546 | return null;
|
2547 | }
|
2548 |
|
2549 | var propValue = props[prop];
|
2550 | var theme = props.theme;
|
2551 | var themeMapping = getPath(theme, themeKey) || {};
|
2552 |
|
2553 | var styleFromPropValue = function styleFromPropValue(propValueFinal) {
|
2554 | var value;
|
2555 |
|
2556 | if (typeof themeMapping === 'function') {
|
2557 | value = themeMapping(propValueFinal);
|
2558 | } else if (Array.isArray(themeMapping)) {
|
2559 | value = themeMapping[propValueFinal] || propValueFinal;
|
2560 | } else {
|
2561 | value = getPath(themeMapping, propValueFinal) || propValueFinal;
|
2562 |
|
2563 | if (transform) {
|
2564 | value = transform(value);
|
2565 | }
|
2566 | }
|
2567 |
|
2568 | if (cssProperty === false) {
|
2569 | return value;
|
2570 | }
|
2571 |
|
2572 | return _defineProperty({}, cssProperty, value);
|
2573 | };
|
2574 |
|
2575 | return handleBreakpoints(props, propValue, styleFromPropValue);
|
2576 | };
|
2577 |
|
2578 | fn.propTypes = _defineProperty({}, prop, responsivePropType) ;
|
2579 | fn.filterProps = [prop];
|
2580 | return fn;
|
2581 | }
|
2582 |
|
2583 | function compose() {
|
2584 | for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
|
2585 | styles[_key] = arguments[_key];
|
2586 | }
|
2587 |
|
2588 | var fn = function fn(props) {
|
2589 | return styles.reduce(function (acc, style) {
|
2590 | var output = style(props);
|
2591 |
|
2592 | if (output) {
|
2593 | return merge(acc, output);
|
2594 | }
|
2595 |
|
2596 | return acc;
|
2597 | }, {});
|
2598 | };
|
2599 |
|
2600 |
|
2601 |
|
2602 |
|
2603 |
|
2604 |
|
2605 |
|
2606 |
|
2607 |
|
2608 |
|
2609 |
|
2610 |
|
2611 |
|
2612 |
|
2613 |
|
2614 |
|
2615 | fn.propTypes = styles.reduce(function (acc, style) {
|
2616 | return _extends(acc, style.propTypes);
|
2617 | }, {}) ;
|
2618 | fn.filterProps = styles.reduce(function (acc, style) {
|
2619 | return acc.concat(style.filterProps);
|
2620 | }, []);
|
2621 | return fn;
|
2622 | }
|
2623 |
|
2624 | function getBorder(value) {
|
2625 | if (typeof value !== 'number') {
|
2626 | return value;
|
2627 | }
|
2628 |
|
2629 | return "".concat(value, "px solid");
|
2630 | }
|
2631 |
|
2632 | var border = style({
|
2633 | prop: 'border',
|
2634 | themeKey: 'borders',
|
2635 | transform: getBorder
|
2636 | });
|
2637 | var borderTop = style({
|
2638 | prop: 'borderTop',
|
2639 | themeKey: 'borders',
|
2640 | transform: getBorder
|
2641 | });
|
2642 | var borderRight = style({
|
2643 | prop: 'borderRight',
|
2644 | themeKey: 'borders',
|
2645 | transform: getBorder
|
2646 | });
|
2647 | var borderBottom = style({
|
2648 | prop: 'borderBottom',
|
2649 | themeKey: 'borders',
|
2650 | transform: getBorder
|
2651 | });
|
2652 | var borderLeft = style({
|
2653 | prop: 'borderLeft',
|
2654 | themeKey: 'borders',
|
2655 | transform: getBorder
|
2656 | });
|
2657 | var borderColor = style({
|
2658 | prop: 'borderColor',
|
2659 | themeKey: 'palette'
|
2660 | });
|
2661 | var borderRadius = style({
|
2662 | prop: 'borderRadius',
|
2663 | themeKey: 'shape'
|
2664 | });
|
2665 | var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
|
2666 |
|
2667 | function omit(input, fields) {
|
2668 | var output = {};
|
2669 | Object.keys(input).forEach(function (prop) {
|
2670 | if (fields.indexOf(prop) === -1) {
|
2671 | output[prop] = input[prop];
|
2672 | }
|
2673 | });
|
2674 | return output;
|
2675 | }
|
2676 |
|
2677 | var warnedOnce$2 = false;
|
2678 |
|
2679 | function styleFunctionSx(styleFunction) {
|
2680 | var newStyleFunction = function newStyleFunction(props) {
|
2681 | var output = styleFunction(props);
|
2682 |
|
2683 | if (props.css) {
|
2684 | return _extends({}, merge(output, styleFunction(_extends({
|
2685 | theme: props.theme
|
2686 | }, props.css))), omit(props.css, [styleFunction.filterProps]));
|
2687 | }
|
2688 |
|
2689 | if (props.sx) {
|
2690 | return _extends({}, merge(output, styleFunction(_extends({
|
2691 | theme: props.theme
|
2692 | }, props.sx))), omit(props.sx, [styleFunction.filterProps]));
|
2693 | }
|
2694 |
|
2695 | return output;
|
2696 | };
|
2697 |
|
2698 | newStyleFunction.propTypes = _extends({}, styleFunction.propTypes, {
|
2699 | css: chainPropTypes(propTypes.object, function (props) {
|
2700 | if (!warnedOnce$2 && props.css !== undefined) {
|
2701 | warnedOnce$2 = true;
|
2702 | return new Error('Material-UI: The `css` prop is deprecated, please use the `sx` prop instead.');
|
2703 | }
|
2704 |
|
2705 | return null;
|
2706 | }),
|
2707 | sx: propTypes.object
|
2708 | }) ;
|
2709 | newStyleFunction.filterProps = ['css', 'sx'].concat(_toConsumableArray(styleFunction.filterProps));
|
2710 | return newStyleFunction;
|
2711 | }
|
2712 |
|
2713 | var displayPrint = style({
|
2714 | prop: 'displayPrint',
|
2715 | cssProperty: false,
|
2716 | transform: function transform(value) {
|
2717 | return {
|
2718 | '@media print': {
|
2719 | display: value
|
2720 | }
|
2721 | };
|
2722 | }
|
2723 | });
|
2724 | var displayRaw = style({
|
2725 | prop: 'display'
|
2726 | });
|
2727 | var overflow = style({
|
2728 | prop: 'overflow'
|
2729 | });
|
2730 | var textOverflow = style({
|
2731 | prop: 'textOverflow'
|
2732 | });
|
2733 | var visibility = style({
|
2734 | prop: 'visibility'
|
2735 | });
|
2736 | var whiteSpace = style({
|
2737 | prop: 'whiteSpace'
|
2738 | });
|
2739 | var display = compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
|
2740 |
|
2741 | var flexBasis = style({
|
2742 | prop: 'flexBasis'
|
2743 | });
|
2744 | var flexDirection = style({
|
2745 | prop: 'flexDirection'
|
2746 | });
|
2747 | var flexWrap = style({
|
2748 | prop: 'flexWrap'
|
2749 | });
|
2750 | var justifyContent = style({
|
2751 | prop: 'justifyContent'
|
2752 | });
|
2753 | var alignItems = style({
|
2754 | prop: 'alignItems'
|
2755 | });
|
2756 | var alignContent = style({
|
2757 | prop: 'alignContent'
|
2758 | });
|
2759 | var order = style({
|
2760 | prop: 'order'
|
2761 | });
|
2762 | var flex = style({
|
2763 | prop: 'flex'
|
2764 | });
|
2765 | var flexGrow = style({
|
2766 | prop: 'flexGrow'
|
2767 | });
|
2768 | var flexShrink = style({
|
2769 | prop: 'flexShrink'
|
2770 | });
|
2771 | var alignSelf = style({
|
2772 | prop: 'alignSelf'
|
2773 | });
|
2774 | var justifyItems = style({
|
2775 | prop: 'justifyItems'
|
2776 | });
|
2777 | var justifySelf = style({
|
2778 | prop: 'justifySelf'
|
2779 | });
|
2780 | var flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
|
2781 |
|
2782 | var gridGap = style({
|
2783 | prop: 'gridGap'
|
2784 | });
|
2785 | var gridColumnGap = style({
|
2786 | prop: 'gridColumnGap'
|
2787 | });
|
2788 | var gridRowGap = style({
|
2789 | prop: 'gridRowGap'
|
2790 | });
|
2791 | var gridColumn = style({
|
2792 | prop: 'gridColumn'
|
2793 | });
|
2794 | var gridRow = style({
|
2795 | prop: 'gridRow'
|
2796 | });
|
2797 | var gridAutoFlow = style({
|
2798 | prop: 'gridAutoFlow'
|
2799 | });
|
2800 | var gridAutoColumns = style({
|
2801 | prop: 'gridAutoColumns'
|
2802 | });
|
2803 | var gridAutoRows = style({
|
2804 | prop: 'gridAutoRows'
|
2805 | });
|
2806 | var gridTemplateColumns = style({
|
2807 | prop: 'gridTemplateColumns'
|
2808 | });
|
2809 | var gridTemplateRows = style({
|
2810 | prop: 'gridTemplateRows'
|
2811 | });
|
2812 | var gridTemplateAreas = style({
|
2813 | prop: 'gridTemplateAreas'
|
2814 | });
|
2815 | var gridArea = style({
|
2816 | prop: 'gridArea'
|
2817 | });
|
2818 | var grid = compose(gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
|
2819 |
|
2820 | var color = style({
|
2821 | prop: 'color',
|
2822 | themeKey: 'palette'
|
2823 | });
|
2824 | var bgcolor = style({
|
2825 | prop: 'bgcolor',
|
2826 | cssProperty: 'backgroundColor',
|
2827 | themeKey: 'palette'
|
2828 | });
|
2829 | var palette = compose(color, bgcolor);
|
2830 |
|
2831 | var position = style({
|
2832 | prop: 'position'
|
2833 | });
|
2834 | var zIndex = style({
|
2835 | prop: 'zIndex',
|
2836 | themeKey: 'zIndex'
|
2837 | });
|
2838 | var top = style({
|
2839 | prop: 'top'
|
2840 | });
|
2841 | var right = style({
|
2842 | prop: 'right'
|
2843 | });
|
2844 | var bottom = style({
|
2845 | prop: 'bottom'
|
2846 | });
|
2847 | var left = style({
|
2848 | prop: 'left'
|
2849 | });
|
2850 | var positions = compose(position, zIndex, top, right, bottom, left);
|
2851 |
|
2852 | var boxShadow = style({
|
2853 | prop: 'boxShadow',
|
2854 | themeKey: 'shadows'
|
2855 | });
|
2856 |
|
2857 | function transform(value) {
|
2858 | return value <= 1 ? "".concat(value * 100, "%") : value;
|
2859 | }
|
2860 |
|
2861 | var width = style({
|
2862 | prop: 'width',
|
2863 | transform: transform
|
2864 | });
|
2865 | var maxWidth = style({
|
2866 | prop: 'maxWidth',
|
2867 | transform: transform
|
2868 | });
|
2869 | var minWidth = style({
|
2870 | prop: 'minWidth',
|
2871 | transform: transform
|
2872 | });
|
2873 | var height = style({
|
2874 | prop: 'height',
|
2875 | transform: transform
|
2876 | });
|
2877 | var maxHeight = style({
|
2878 | prop: 'maxHeight',
|
2879 | transform: transform
|
2880 | });
|
2881 | var minHeight = style({
|
2882 | prop: 'minHeight',
|
2883 | transform: transform
|
2884 | });
|
2885 | var sizeWidth = style({
|
2886 | prop: 'size',
|
2887 | cssProperty: 'width',
|
2888 | transform: transform
|
2889 | });
|
2890 | var sizeHeight = style({
|
2891 | prop: 'size',
|
2892 | cssProperty: 'height',
|
2893 | transform: transform
|
2894 | });
|
2895 | var boxSizing = style({
|
2896 | prop: 'boxSizing'
|
2897 | });
|
2898 | var sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
|
2899 |
|
2900 | function _arrayWithHoles(arr) {
|
2901 | if (Array.isArray(arr)) return arr;
|
2902 | }
|
2903 |
|
2904 | function _iterableToArrayLimit(arr, i) {
|
2905 | if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
2906 | var _arr = [];
|
2907 | var _n = true;
|
2908 | var _d = false;
|
2909 | var _e = undefined;
|
2910 |
|
2911 | try {
|
2912 | for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
2913 | _arr.push(_s.value);
|
2914 |
|
2915 | if (i && _arr.length === i) break;
|
2916 | }
|
2917 | } catch (err) {
|
2918 | _d = true;
|
2919 | _e = err;
|
2920 | } finally {
|
2921 | try {
|
2922 | if (!_n && _i["return"] != null) _i["return"]();
|
2923 | } finally {
|
2924 | if (_d) throw _e;
|
2925 | }
|
2926 | }
|
2927 |
|
2928 | return _arr;
|
2929 | }
|
2930 |
|
2931 | function _nonIterableRest() {
|
2932 | throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
2933 | }
|
2934 |
|
2935 | function _slicedToArray(arr, i) {
|
2936 | return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
2937 | }
|
2938 |
|
2939 | function memoize(fn) {
|
2940 | var cache = {};
|
2941 | return function (arg) {
|
2942 | if (cache[arg] === undefined) {
|
2943 | cache[arg] = fn(arg);
|
2944 | }
|
2945 |
|
2946 | return cache[arg];
|
2947 | };
|
2948 | }
|
2949 |
|
2950 | var properties = {
|
2951 | m: 'margin',
|
2952 | p: 'padding'
|
2953 | };
|
2954 | var directions = {
|
2955 | t: 'Top',
|
2956 | r: 'Right',
|
2957 | b: 'Bottom',
|
2958 | l: 'Left',
|
2959 | x: ['Left', 'Right'],
|
2960 | y: ['Top', 'Bottom']
|
2961 | };
|
2962 | var aliases = {
|
2963 | marginX: 'mx',
|
2964 | marginY: 'my',
|
2965 | paddingX: 'px',
|
2966 | paddingY: 'py'
|
2967 | };
|
2968 |
|
2969 |
|
2970 |
|
2971 | var getCssProperties = memoize(function (prop) {
|
2972 |
|
2973 | if (prop.length > 2) {
|
2974 | if (aliases[prop]) {
|
2975 | prop = aliases[prop];
|
2976 | } else {
|
2977 | return [prop];
|
2978 | }
|
2979 | }
|
2980 |
|
2981 | var _prop$split = prop.split(''),
|
2982 | _prop$split2 = _slicedToArray(_prop$split, 2),
|
2983 | a = _prop$split2[0],
|
2984 | b = _prop$split2[1];
|
2985 |
|
2986 | var property = properties[a];
|
2987 | var direction = directions[b] || '';
|
2988 | return Array.isArray(direction) ? direction.map(function (dir) {
|
2989 | return property + dir;
|
2990 | }) : [property + direction];
|
2991 | });
|
2992 | 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'];
|
2993 | function createUnarySpacing(theme) {
|
2994 | var themeSpacing = theme.spacing || 8;
|
2995 |
|
2996 | if (typeof themeSpacing === 'number') {
|
2997 | return function (abs) {
|
2998 | {
|
2999 | if (typeof abs !== 'number') {
|
3000 | console.error("Material-UI: Expected spacing argument to be a number, got ".concat(abs, "."));
|
3001 | }
|
3002 | }
|
3003 |
|
3004 | return themeSpacing * abs;
|
3005 | };
|
3006 | }
|
3007 |
|
3008 | if (Array.isArray(themeSpacing)) {
|
3009 | return function (abs) {
|
3010 | {
|
3011 | if (abs > themeSpacing.length - 1) {
|
3012 | console.error(["Material-UI: 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'));
|
3013 | }
|
3014 | }
|
3015 |
|
3016 | return themeSpacing[abs];
|
3017 | };
|
3018 | }
|
3019 |
|
3020 | if (typeof themeSpacing === 'function') {
|
3021 | return themeSpacing;
|
3022 | }
|
3023 |
|
3024 | {
|
3025 | console.error(["Material-UI: The `theme.spacing` value (".concat(themeSpacing, ") is invalid."), 'It should be a number, an array or a function.'].join('\n'));
|
3026 | }
|
3027 |
|
3028 | return function () {
|
3029 | return undefined;
|
3030 | };
|
3031 | }
|
3032 |
|
3033 | function getValue(transformer, propValue) {
|
3034 | if (typeof propValue === 'string' || propValue == null) {
|
3035 | return propValue;
|
3036 | }
|
3037 |
|
3038 | var abs = Math.abs(propValue);
|
3039 | var transformed = transformer(abs);
|
3040 |
|
3041 | if (propValue >= 0) {
|
3042 | return transformed;
|
3043 | }
|
3044 |
|
3045 | if (typeof transformed === 'number') {
|
3046 | return -transformed;
|
3047 | }
|
3048 |
|
3049 | return "-".concat(transformed);
|
3050 | }
|
3051 |
|
3052 | function getStyleFromPropValue(cssProperties, transformer) {
|
3053 | return function (propValue) {
|
3054 | return cssProperties.reduce(function (acc, cssProperty) {
|
3055 | acc[cssProperty] = getValue(transformer, propValue);
|
3056 | return acc;
|
3057 | }, {});
|
3058 | };
|
3059 | }
|
3060 |
|
3061 | function spacing(props) {
|
3062 | var theme = props.theme;
|
3063 | var transformer = createUnarySpacing(theme);
|
3064 | return Object.keys(props).map(function (prop) {
|
3065 |
|
3066 |
|
3067 | if (spacingKeys.indexOf(prop) === -1) {
|
3068 | return null;
|
3069 | }
|
3070 |
|
3071 | var cssProperties = getCssProperties(prop);
|
3072 | var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
|
3073 | var propValue = props[prop];
|
3074 | return handleBreakpoints(props, propValue, styleFromPropValue);
|
3075 | }).reduce(merge, {});
|
3076 | }
|
3077 |
|
3078 | spacing.propTypes = spacingKeys.reduce(function (obj, key) {
|
3079 | obj[key] = responsivePropType;
|
3080 | return obj;
|
3081 | }, {}) ;
|
3082 | spacing.filterProps = spacingKeys;
|
3083 |
|
3084 | var fontFamily = style({
|
3085 | prop: 'fontFamily',
|
3086 | themeKey: 'typography'
|
3087 | });
|
3088 | var fontSize = style({
|
3089 | prop: 'fontSize',
|
3090 | themeKey: 'typography'
|
3091 | });
|
3092 | var fontStyle = style({
|
3093 | prop: 'fontStyle',
|
3094 | themeKey: 'typography'
|
3095 | });
|
3096 | var fontWeight = style({
|
3097 | prop: 'fontWeight',
|
3098 | themeKey: 'typography'
|
3099 | });
|
3100 | var letterSpacing = style({
|
3101 | prop: 'letterSpacing'
|
3102 | });
|
3103 | var lineHeight = style({
|
3104 | prop: 'lineHeight'
|
3105 | });
|
3106 | var textAlign = style({
|
3107 | prop: 'textAlign'
|
3108 | });
|
3109 | var typography = compose(fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
|
3110 |
|
3111 | var warnOnce;
|
3112 | function createSpacing() {
|
3113 | var spacingInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8;
|
3114 |
|
3115 |
|
3116 | if (spacingInput.mui) {
|
3117 | return spacingInput;
|
3118 | }
|
3119 |
|
3120 |
|
3121 |
|
3122 |
|
3123 | var transform = createUnarySpacing({
|
3124 | spacing: spacingInput
|
3125 | });
|
3126 |
|
3127 | var spacing = function spacing() {
|
3128 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
3129 | args[_key] = arguments[_key];
|
3130 | }
|
3131 |
|
3132 | {
|
3133 | if (!(args.length <= 4)) {
|
3134 | console.error("Material-UI: Too many arguments provided, expected between 0 and 4, got ".concat(args.length));
|
3135 | }
|
3136 | }
|
3137 |
|
3138 | if (args.length === 0) {
|
3139 | return transform(1);
|
3140 | }
|
3141 |
|
3142 | if (args.length === 1) {
|
3143 | return transform(args[0]);
|
3144 | }
|
3145 |
|
3146 | return args.map(function (argument) {
|
3147 | if (typeof argument === 'string') {
|
3148 | return argument;
|
3149 | }
|
3150 |
|
3151 | var output = transform(argument);
|
3152 | return typeof output === 'number' ? "".concat(output, "px") : output;
|
3153 | }).join(' ');
|
3154 | };
|
3155 |
|
3156 |
|
3157 | Object.defineProperty(spacing, 'unit', {
|
3158 | get: function get() {
|
3159 | {
|
3160 | if (!warnOnce || "development" === 'test') {
|
3161 | 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'));
|
3162 | }
|
3163 |
|
3164 | warnOnce = true;
|
3165 | }
|
3166 |
|
3167 | return spacingInput;
|
3168 | }
|
3169 | });
|
3170 | spacing.mui = true;
|
3171 | return spacing;
|
3172 | }
|
3173 |
|
3174 |
|
3175 |
|
3176 | var easing = {
|
3177 |
|
3178 | easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
3179 |
|
3180 |
|
3181 | easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
|
3182 |
|
3183 | easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
3184 |
|
3185 | sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
|
3186 | };
|
3187 |
|
3188 |
|
3189 | var duration = {
|
3190 | shortest: 150,
|
3191 | shorter: 200,
|
3192 | short: 250,
|
3193 |
|
3194 | standard: 300,
|
3195 |
|
3196 | complex: 375,
|
3197 |
|
3198 | enteringScreen: 225,
|
3199 |
|
3200 | leavingScreen: 195
|
3201 | };
|
3202 |
|
3203 | function formatMs(milliseconds) {
|
3204 | return "".concat(Math.round(milliseconds), "ms");
|
3205 | }
|
3206 | |
3207 |
|
3208 |
|
3209 |
|
3210 |
|
3211 |
|
3212 |
|
3213 |
|
3214 |
|
3215 |
|
3216 | var transitions = {
|
3217 | easing: easing,
|
3218 | duration: duration,
|
3219 | create: function create() {
|
3220 | var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['all'];
|
3221 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
3222 |
|
3223 | var _options$duration = options.duration,
|
3224 | durationOption = _options$duration === void 0 ? duration.standard : _options$duration,
|
3225 | _options$easing = options.easing,
|
3226 | easingOption = _options$easing === void 0 ? easing.easeInOut : _options$easing,
|
3227 | _options$delay = options.delay,
|
3228 | delay = _options$delay === void 0 ? 0 : _options$delay,
|
3229 | other = _objectWithoutProperties(options, ["duration", "easing", "delay"]);
|
3230 |
|
3231 | {
|
3232 | var isString = function isString(value) {
|
3233 | return typeof value === 'string';
|
3234 | };
|
3235 |
|
3236 | var isNumber = function isNumber(value) {
|
3237 | return !isNaN(parseFloat(value));
|
3238 | };
|
3239 |
|
3240 | if (!isString(props) && !Array.isArray(props)) {
|
3241 | console.error('Material-UI: Argument "props" must be a string or Array.');
|
3242 | }
|
3243 |
|
3244 | if (!isNumber(durationOption) && !isString(durationOption)) {
|
3245 | console.error("Material-UI: Argument \"duration\" must be a number or a string but found ".concat(durationOption, "."));
|
3246 | }
|
3247 |
|
3248 | if (!isString(easingOption)) {
|
3249 | console.error('Material-UI: Argument "easing" must be a string.');
|
3250 | }
|
3251 |
|
3252 | if (!isNumber(delay) && !isString(delay)) {
|
3253 | console.error('Material-UI: Argument "delay" must be a number or a string.');
|
3254 | }
|
3255 |
|
3256 | if (Object.keys(other).length !== 0) {
|
3257 | console.error("Material-UI: Unrecognized argument(s) [".concat(Object.keys(other).join(','), "]."));
|
3258 | }
|
3259 | }
|
3260 |
|
3261 | return (Array.isArray(props) ? props : [props]).map(function (animatedProp) {
|
3262 | return "".concat(animatedProp, " ").concat(typeof durationOption === 'string' ? durationOption : formatMs(durationOption), " ").concat(easingOption, " ").concat(typeof delay === 'string' ? delay : formatMs(delay));
|
3263 | }).join(',');
|
3264 | },
|
3265 | getAutoHeightDuration: function getAutoHeightDuration(height) {
|
3266 | if (!height) {
|
3267 | return 0;
|
3268 | }
|
3269 |
|
3270 | var constant = height / 36;
|
3271 |
|
3272 | return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10);
|
3273 | }
|
3274 | };
|
3275 |
|
3276 |
|
3277 |
|
3278 | var zIndex$1 = {
|
3279 | mobileStepper: 1000,
|
3280 | speedDial: 1050,
|
3281 | appBar: 1100,
|
3282 | drawer: 1200,
|
3283 | modal: 1300,
|
3284 | snackbar: 1400,
|
3285 | tooltip: 1500
|
3286 | };
|
3287 |
|
3288 | function createTheme() {
|
3289 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
3290 |
|
3291 | var _options$breakpoints = options.breakpoints,
|
3292 | breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
|
3293 | _options$mixins = options.mixins,
|
3294 | mixinsInput = _options$mixins === void 0 ? {} : _options$mixins,
|
3295 | _options$palette = options.palette,
|
3296 | paletteInput = _options$palette === void 0 ? {} : _options$palette,
|
3297 | spacingInput = options.spacing,
|
3298 | _options$typography = options.typography,
|
3299 | typographyInput = _options$typography === void 0 ? {} : _options$typography,
|
3300 | other = _objectWithoutProperties(options, ["breakpoints", "mixins", "palette", "spacing", "typography"]);
|
3301 |
|
3302 | var palette = createPalette(paletteInput);
|
3303 | var breakpoints = createBreakpoints(breakpointsInput);
|
3304 | var spacing = createSpacing(spacingInput);
|
3305 | var muiTheme = deepmerge({
|
3306 | breakpoints: breakpoints,
|
3307 | direction: 'ltr',
|
3308 | mixins: createMixins(breakpoints, spacing, mixinsInput),
|
3309 | overrides: {},
|
3310 |
|
3311 | palette: palette,
|
3312 | props: {},
|
3313 |
|
3314 | shadows: shadows,
|
3315 | typography: createTypography(palette, typographyInput),
|
3316 | spacing: spacing,
|
3317 | shape: shape,
|
3318 | transitions: transitions,
|
3319 | zIndex: zIndex$1
|
3320 | }, other);
|
3321 |
|
3322 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
3323 | args[_key - 1] = arguments[_key];
|
3324 | }
|
3325 |
|
3326 | muiTheme = args.reduce(function (acc, argument) {
|
3327 | return deepmerge(acc, argument);
|
3328 | }, muiTheme);
|
3329 |
|
3330 | {
|
3331 | var pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected'];
|
3332 |
|
3333 | var traverse = function traverse(node, parentKey) {
|
3334 | var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
|
3335 | var key;
|
3336 |
|
3337 | for (key in node) {
|
3338 | var child = node[key];
|
3339 |
|
3340 | if (depth === 1) {
|
3341 | if (key.indexOf('Mui') === 0 && child) {
|
3342 | traverse(child, key, depth + 1);
|
3343 | }
|
3344 | } else if (pseudoClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
|
3345 | {
|
3346 | 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({
|
3347 | root: _defineProperty({}, "&$".concat(key), child)
|
3348 | }, null, 2), '', 'https://material-ui.com/r/pseudo-classes-guide'].join('\n'));
|
3349 | }
|
3350 |
|
3351 |
|
3352 | node[key] = {};
|
3353 | }
|
3354 | }
|
3355 | };
|
3356 |
|
3357 | traverse(muiTheme.overrides);
|
3358 | }
|
3359 |
|
3360 | return muiTheme;
|
3361 | }
|
3362 |
|
3363 | var warnedOnce$3 = false;
|
3364 | function createMuiTheme() {
|
3365 | {
|
3366 | if (!warnedOnce$3) {
|
3367 | warnedOnce$3 = true;
|
3368 | console.error(['Material-UI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@material-ui/core/styles'`"].join('\n'));
|
3369 | }
|
3370 | }
|
3371 |
|
3372 | return createTheme.apply(void 0, arguments);
|
3373 | }
|
3374 |
|
3375 | function createMuiStrictModeTheme(options) {
|
3376 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
3377 | args[_key - 1] = arguments[_key];
|
3378 | }
|
3379 |
|
3380 | return createTheme.apply(void 0, [deepmerge({
|
3381 | unstable_strictMode: true
|
3382 | }, options)].concat(args));
|
3383 | }
|
3384 |
|
3385 | var hasSymbol = typeof Symbol === 'function' && Symbol.for;
|
3386 | var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
|
3387 |
|
3388 | |
3389 |
|
3390 |
|
3391 |
|
3392 |
|
3393 |
|
3394 |
|
3395 |
|
3396 |
|
3397 |
|
3398 | var pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected'];
|
3399 |
|
3400 |
|
3401 |
|
3402 |
|
3403 |
|
3404 |
|
3405 | function createGenerateClassName() {
|
3406 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
3407 | var _options$disableGloba = options.disableGlobal,
|
3408 | disableGlobal = _options$disableGloba === void 0 ? false : _options$disableGloba,
|
3409 | _options$productionPr = options.productionPrefix,
|
3410 | _options$seed = options.seed,
|
3411 | seed = _options$seed === void 0 ? '' : _options$seed;
|
3412 | var seedPrefix = seed === '' ? '' : "".concat(seed, "-");
|
3413 | var ruleCounter = 0;
|
3414 |
|
3415 | var getNextCounterId = function getNextCounterId() {
|
3416 | ruleCounter += 1;
|
3417 |
|
3418 | {
|
3419 | if (ruleCounter >= 1e10) {
|
3420 | console.warn(['Material-UI: You might have a memory leak.', 'The ruleCounter is not supposed to grow that much.'].join(''));
|
3421 | }
|
3422 | }
|
3423 |
|
3424 | return ruleCounter;
|
3425 | };
|
3426 |
|
3427 | return function (rule, styleSheet) {
|
3428 | var name = styleSheet.options.name;
|
3429 |
|
3430 | if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
|
3431 |
|
3432 | if (pseudoClasses.indexOf(rule.key) !== -1) {
|
3433 | return "Mui-".concat(rule.key);
|
3434 | }
|
3435 |
|
3436 | var prefix = "".concat(seedPrefix).concat(name, "-").concat(rule.key);
|
3437 |
|
3438 | if (!styleSheet.options.theme[nested] || seed !== '') {
|
3439 | return prefix;
|
3440 | }
|
3441 |
|
3442 | return "".concat(prefix, "-").concat(getNextCounterId());
|
3443 | }
|
3444 |
|
3445 | var suffix = "".concat(rule.key, "-").concat(getNextCounterId());
|
3446 |
|
3447 | if (styleSheet.options.classNamePrefix) {
|
3448 | return "".concat(seedPrefix).concat(styleSheet.options.classNamePrefix, "-").concat(suffix);
|
3449 | }
|
3450 |
|
3451 | return "".concat(seedPrefix).concat(suffix);
|
3452 | };
|
3453 | }
|
3454 |
|
3455 | function createStyles(styles) {
|
3456 | return styles;
|
3457 | }
|
3458 |
|
3459 |
|
3460 | function getThemeProps(params) {
|
3461 | var theme = params.theme,
|
3462 | name = params.name,
|
3463 | props = params.props;
|
3464 |
|
3465 | if (!theme || !theme.props || !theme.props[name]) {
|
3466 | return props;
|
3467 | }
|
3468 |
|
3469 |
|
3470 |
|
3471 | var defaultProps = theme.props[name];
|
3472 | var propName;
|
3473 |
|
3474 | for (propName in defaultProps) {
|
3475 | if (props[propName] === undefined) {
|
3476 | props[propName] = defaultProps[propName];
|
3477 | }
|
3478 | }
|
3479 |
|
3480 | return props;
|
3481 | }
|
3482 |
|
3483 | function warning(condition, message) {
|
3484 | {
|
3485 | if (condition) {
|
3486 | return;
|
3487 | }
|
3488 |
|
3489 | var text = "Warning: " + message;
|
3490 |
|
3491 | if (typeof console !== 'undefined') {
|
3492 | console.warn(text);
|
3493 | }
|
3494 |
|
3495 | try {
|
3496 | throw Error(text);
|
3497 | } catch (x) {}
|
3498 | }
|
3499 | }
|
3500 |
|
3501 | 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; };
|
3502 |
|
3503 | var isBrowser = (typeof window === "undefined" ? "undefined" : _typeof$1(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$1(document)) === 'object' && document.nodeType === 9;
|
3504 |
|
3505 | function _defineProperties(target, props) {
|
3506 | for (var i = 0; i < props.length; i++) {
|
3507 | var descriptor = props[i];
|
3508 | descriptor.enumerable = descriptor.enumerable || false;
|
3509 | descriptor.configurable = true;
|
3510 | if ("value" in descriptor) descriptor.writable = true;
|
3511 | Object.defineProperty(target, descriptor.key, descriptor);
|
3512 | }
|
3513 | }
|
3514 |
|
3515 | function _createClass(Constructor, protoProps, staticProps) {
|
3516 | if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
3517 | if (staticProps) _defineProperties(Constructor, staticProps);
|
3518 | return Constructor;
|
3519 | }
|
3520 |
|
3521 | function _inheritsLoose(subClass, superClass) {
|
3522 | subClass.prototype = Object.create(superClass.prototype);
|
3523 | subClass.prototype.constructor = subClass;
|
3524 | subClass.__proto__ = superClass;
|
3525 | }
|
3526 |
|
3527 | function _assertThisInitialized(self) {
|
3528 | if (self === void 0) {
|
3529 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
3530 | }
|
3531 |
|
3532 | return self;
|
3533 | }
|
3534 |
|
3535 | var plainObjectConstrurctor = {}.constructor;
|
3536 | function cloneStyle(style) {
|
3537 | if (style == null || typeof style !== 'object') return style;
|
3538 | if (Array.isArray(style)) return style.map(cloneStyle);
|
3539 | if (style.constructor !== plainObjectConstrurctor) return style;
|
3540 | var newStyle = {};
|
3541 |
|
3542 | for (var name in style) {
|
3543 | newStyle[name] = cloneStyle(style[name]);
|
3544 | }
|
3545 |
|
3546 | return newStyle;
|
3547 | }
|
3548 |
|
3549 | |
3550 |
|
3551 |
|
3552 |
|
3553 | function createRule(name, decl, options) {
|
3554 | if (name === void 0) {
|
3555 | name = 'unnamed';
|
3556 | }
|
3557 |
|
3558 | var jss = options.jss;
|
3559 | var declCopy = cloneStyle(decl);
|
3560 | var rule = jss.plugins.onCreateRule(name, declCopy, options);
|
3561 | if (rule) return rule;
|
3562 |
|
3563 | if (name[0] === '@') {
|
3564 | warning(false, "[JSS] Unknown rule " + name) ;
|
3565 | }
|
3566 |
|
3567 | return null;
|
3568 | }
|
3569 |
|
3570 | var join = function join(value, by) {
|
3571 | var result = '';
|
3572 |
|
3573 | for (var i = 0; i < value.length; i++) {
|
3574 |
|
3575 | if (value[i] === '!important') break;
|
3576 | if (result) result += by;
|
3577 | result += value[i];
|
3578 | }
|
3579 |
|
3580 | return result;
|
3581 | };
|
3582 |
|
3583 | |
3584 |
|
3585 |
|
3586 |
|
3587 |
|
3588 |
|
3589 |
|
3590 |
|
3591 | var toCssValue = function toCssValue(value, ignoreImportant) {
|
3592 | if (ignoreImportant === void 0) {
|
3593 | ignoreImportant = false;
|
3594 | }
|
3595 |
|
3596 | if (!Array.isArray(value)) return value;
|
3597 | var cssValue = '';
|
3598 |
|
3599 | if (Array.isArray(value[0])) {
|
3600 | for (var i = 0; i < value.length; i++) {
|
3601 | if (value[i] === '!important') break;
|
3602 | if (cssValue) cssValue += ', ';
|
3603 | cssValue += join(value[i], ' ');
|
3604 | }
|
3605 | } else cssValue = join(value, ', ');
|
3606 |
|
3607 |
|
3608 | if (!ignoreImportant && value[value.length - 1] === '!important') {
|
3609 | cssValue += ' !important';
|
3610 | }
|
3611 |
|
3612 | return cssValue;
|
3613 | };
|
3614 |
|
3615 | |
3616 |
|
3617 |
|
3618 |
|
3619 | function indentStr(str, indent) {
|
3620 | var result = '';
|
3621 |
|
3622 | for (var index = 0; index < indent; index++) {
|
3623 | result += ' ';
|
3624 | }
|
3625 |
|
3626 | return result + str;
|
3627 | }
|
3628 | |
3629 |
|
3630 |
|
3631 |
|
3632 |
|
3633 | function toCss(selector, style, options) {
|
3634 | if (options === void 0) {
|
3635 | options = {};
|
3636 | }
|
3637 |
|
3638 | var result = '';
|
3639 | if (!style) return result;
|
3640 | var _options = options,
|
3641 | _options$indent = _options.indent,
|
3642 | indent = _options$indent === void 0 ? 0 : _options$indent;
|
3643 | var fallbacks = style.fallbacks;
|
3644 | if (selector) indent++;
|
3645 |
|
3646 | if (fallbacks) {
|
3647 |
|
3648 | if (Array.isArray(fallbacks)) {
|
3649 | for (var index = 0; index < fallbacks.length; index++) {
|
3650 | var fallback = fallbacks[index];
|
3651 |
|
3652 | for (var prop in fallback) {
|
3653 | var value = fallback[prop];
|
3654 |
|
3655 | if (value != null) {
|
3656 | if (result) result += '\n';
|
3657 | result += "" + indentStr(prop + ": " + toCssValue(value) + ";", indent);
|
3658 | }
|
3659 | }
|
3660 | }
|
3661 | } else {
|
3662 |
|
3663 | for (var _prop in fallbacks) {
|
3664 | var _value = fallbacks[_prop];
|
3665 |
|
3666 | if (_value != null) {
|
3667 | if (result) result += '\n';
|
3668 | result += "" + indentStr(_prop + ": " + toCssValue(_value) + ";", indent);
|
3669 | }
|
3670 | }
|
3671 | }
|
3672 | }
|
3673 |
|
3674 | for (var _prop2 in style) {
|
3675 | var _value2 = style[_prop2];
|
3676 |
|
3677 | if (_value2 != null && _prop2 !== 'fallbacks') {
|
3678 | if (result) result += '\n';
|
3679 | result += "" + indentStr(_prop2 + ": " + toCssValue(_value2) + ";", indent);
|
3680 | }
|
3681 | }
|
3682 |
|
3683 |
|
3684 | if (!result && !options.allowEmpty) return result;
|
3685 |
|
3686 | if (!selector) return result;
|
3687 | indent--;
|
3688 | if (result) result = "\n" + result + "\n";
|
3689 | return indentStr(selector + " {" + result, indent) + indentStr('}', indent);
|
3690 | }
|
3691 |
|
3692 | var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
|
3693 | var nativeEscape = typeof CSS !== 'undefined' && CSS.escape;
|
3694 | var escape = (function (str) {
|
3695 | return nativeEscape ? nativeEscape(str) : str.replace(escapeRegex, '\\$1');
|
3696 | });
|
3697 |
|
3698 | var BaseStyleRule =
|
3699 |
|
3700 | function () {
|
3701 | function BaseStyleRule(key, style, options) {
|
3702 | this.type = 'style';
|
3703 | this.key = void 0;
|
3704 | this.isProcessed = false;
|
3705 | this.style = void 0;
|
3706 | this.renderer = void 0;
|
3707 | this.renderable = void 0;
|
3708 | this.options = void 0;
|
3709 | var sheet = options.sheet,
|
3710 | Renderer = options.Renderer;
|
3711 | this.key = key;
|
3712 | this.options = options;
|
3713 | this.style = style;
|
3714 | if (sheet) this.renderer = sheet.renderer;else if (Renderer) this.renderer = new Renderer();
|
3715 | }
|
3716 | |
3717 |
|
3718 |
|
3719 |
|
3720 |
|
3721 | var _proto = BaseStyleRule.prototype;
|
3722 |
|
3723 | _proto.prop = function prop(name, value, options) {
|
3724 |
|
3725 | if (value === undefined) return this.style[name];
|
3726 |
|
3727 | var force = options ? options.force : false;
|
3728 | if (!force && this.style[name] === value) return this;
|
3729 | var newValue = value;
|
3730 |
|
3731 | if (!options || options.process !== false) {
|
3732 | newValue = this.options.jss.plugins.onChangeValue(value, name, this);
|
3733 | }
|
3734 |
|
3735 | var isEmpty = newValue == null || newValue === false;
|
3736 | var isDefined = name in this.style;
|
3737 |
|
3738 | if (isEmpty && !isDefined && !force) return this;
|
3739 |
|
3740 | var remove = isEmpty && isDefined;
|
3741 | if (remove) delete this.style[name];else this.style[name] = newValue;
|
3742 |
|
3743 | if (this.renderable && this.renderer) {
|
3744 | if (remove) this.renderer.removeProperty(this.renderable, name);else this.renderer.setProperty(this.renderable, name, newValue);
|
3745 | return this;
|
3746 | }
|
3747 |
|
3748 | var sheet = this.options.sheet;
|
3749 |
|
3750 | if (sheet && sheet.attached) {
|
3751 | warning(false, '[JSS] Rule is not linked. Missing sheet option "link: true".') ;
|
3752 | }
|
3753 |
|
3754 | return this;
|
3755 | };
|
3756 |
|
3757 | return BaseStyleRule;
|
3758 | }();
|
3759 | var StyleRule =
|
3760 |
|
3761 | function (_BaseStyleRule) {
|
3762 | _inheritsLoose(StyleRule, _BaseStyleRule);
|
3763 |
|
3764 | function StyleRule(key, style, options) {
|
3765 | var _this;
|
3766 |
|
3767 | _this = _BaseStyleRule.call(this, key, style, options) || this;
|
3768 | _this.selectorText = void 0;
|
3769 | _this.id = void 0;
|
3770 | _this.renderable = void 0;
|
3771 | var selector = options.selector,
|
3772 | scoped = options.scoped,
|
3773 | sheet = options.sheet,
|
3774 | generateId = options.generateId;
|
3775 |
|
3776 | if (selector) {
|
3777 | _this.selectorText = selector;
|
3778 | } else if (scoped !== false) {
|
3779 | _this.id = generateId(_assertThisInitialized(_assertThisInitialized(_this)), sheet);
|
3780 | _this.selectorText = "." + escape(_this.id);
|
3781 | }
|
3782 |
|
3783 | return _this;
|
3784 | }
|
3785 | |
3786 |
|
3787 |
|
3788 |
|
3789 |
|
3790 |
|
3791 |
|
3792 | var _proto2 = StyleRule.prototype;
|
3793 |
|
3794 | |
3795 |
|
3796 |
|
3797 | _proto2.applyTo = function applyTo(renderable) {
|
3798 | var renderer = this.renderer;
|
3799 |
|
3800 | if (renderer) {
|
3801 | var json = this.toJSON();
|
3802 |
|
3803 | for (var prop in json) {
|
3804 | renderer.setProperty(renderable, prop, json[prop]);
|
3805 | }
|
3806 | }
|
3807 |
|
3808 | return this;
|
3809 | }
|
3810 | |
3811 |
|
3812 |
|
3813 |
|
3814 |
|
3815 | ;
|
3816 |
|
3817 | _proto2.toJSON = function toJSON() {
|
3818 | var json = {};
|
3819 |
|
3820 | for (var prop in this.style) {
|
3821 | var value = this.style[prop];
|
3822 | if (typeof value !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = toCssValue(value);
|
3823 | }
|
3824 |
|
3825 | return json;
|
3826 | }
|
3827 | |
3828 |
|
3829 |
|
3830 | ;
|
3831 |
|
3832 | _proto2.toString = function toString(options) {
|
3833 | var sheet = this.options.sheet;
|
3834 | var link = sheet ? sheet.options.link : false;
|
3835 | var opts = link ? _extends({}, options, {
|
3836 | allowEmpty: true
|
3837 | }) : options;
|
3838 | return toCss(this.selectorText, this.style, opts);
|
3839 | };
|
3840 |
|
3841 | _createClass(StyleRule, [{
|
3842 | key: "selector",
|
3843 | set: function set(selector) {
|
3844 | if (selector === this.selectorText) return;
|
3845 | this.selectorText = selector;
|
3846 | var renderer = this.renderer,
|
3847 | renderable = this.renderable;
|
3848 | if (!renderable || !renderer) return;
|
3849 | var hasChanged = renderer.setSelector(renderable, selector);
|
3850 |
|
3851 | if (!hasChanged) {
|
3852 | renderer.replaceRule(renderable, this);
|
3853 | }
|
3854 | }
|
3855 | |
3856 |
|
3857 |
|
3858 | ,
|
3859 | get: function get() {
|
3860 | return this.selectorText;
|
3861 | }
|
3862 | }]);
|
3863 |
|
3864 | return StyleRule;
|
3865 | }(BaseStyleRule);
|
3866 | var pluginStyleRule = {
|
3867 | onCreateRule: function onCreateRule(name, style, options) {
|
3868 | if (name[0] === '@' || options.parent && options.parent.type === 'keyframes') {
|
3869 | return null;
|
3870 | }
|
3871 |
|
3872 | return new StyleRule(name, style, options);
|
3873 | }
|
3874 | };
|
3875 |
|
3876 | var defaultToStringOptions = {
|
3877 | indent: 1,
|
3878 | children: true
|
3879 | };
|
3880 | var atRegExp = /@([\w-]+)/;
|
3881 | |
3882 |
|
3883 |
|
3884 |
|
3885 | var ConditionalRule =
|
3886 |
|
3887 | function () {
|
3888 | function ConditionalRule(key, styles, options) {
|
3889 | this.type = 'conditional';
|
3890 | this.at = void 0;
|
3891 | this.key = void 0;
|
3892 | this.query = void 0;
|
3893 | this.rules = void 0;
|
3894 | this.options = void 0;
|
3895 | this.isProcessed = false;
|
3896 | this.renderable = void 0;
|
3897 | this.key = key;
|
3898 | var atMatch = key.match(atRegExp);
|
3899 | this.at = atMatch ? atMatch[1] : 'unknown';
|
3900 |
|
3901 | this.query = options.name || "@" + this.at;
|
3902 | this.options = options;
|
3903 | this.rules = new RuleList(_extends({}, options, {
|
3904 | parent: this
|
3905 | }));
|
3906 |
|
3907 | for (var name in styles) {
|
3908 | this.rules.add(name, styles[name]);
|
3909 | }
|
3910 |
|
3911 | this.rules.process();
|
3912 | }
|
3913 | |
3914 |
|
3915 |
|
3916 |
|
3917 |
|
3918 | var _proto = ConditionalRule.prototype;
|
3919 |
|
3920 | _proto.getRule = function getRule(name) {
|
3921 | return this.rules.get(name);
|
3922 | }
|
3923 | |
3924 |
|
3925 |
|
3926 | ;
|
3927 |
|
3928 | _proto.indexOf = function indexOf(rule) {
|
3929 | return this.rules.indexOf(rule);
|
3930 | }
|
3931 | |
3932 |
|
3933 |
|
3934 | ;
|
3935 |
|
3936 | _proto.addRule = function addRule(name, style, options) {
|
3937 | var rule = this.rules.add(name, style, options);
|
3938 | if (!rule) return null;
|
3939 | this.options.jss.plugins.onProcessRule(rule);
|
3940 | return rule;
|
3941 | }
|
3942 | |
3943 |
|
3944 |
|
3945 | ;
|
3946 |
|
3947 | _proto.toString = function toString(options) {
|
3948 | if (options === void 0) {
|
3949 | options = defaultToStringOptions;
|
3950 | }
|
3951 |
|
3952 | if (options.indent == null) options.indent = defaultToStringOptions.indent;
|
3953 | if (options.children == null) options.children = defaultToStringOptions.children;
|
3954 |
|
3955 | if (options.children === false) {
|
3956 | return this.query + " {}";
|
3957 | }
|
3958 |
|
3959 | var children = this.rules.toString(options);
|
3960 | return children ? this.query + " {\n" + children + "\n}" : '';
|
3961 | };
|
3962 |
|
3963 | return ConditionalRule;
|
3964 | }();
|
3965 | var keyRegExp = /@media|@supports\s+/;
|
3966 | var pluginConditionalRule = {
|
3967 | onCreateRule: function onCreateRule(key, styles, options) {
|
3968 | return keyRegExp.test(key) ? new ConditionalRule(key, styles, options) : null;
|
3969 | }
|
3970 | };
|
3971 |
|
3972 | var defaultToStringOptions$1 = {
|
3973 | indent: 1,
|
3974 | children: true
|
3975 | };
|
3976 | var nameRegExp = /@keyframes\s+([\w-]+)/;
|
3977 | |
3978 |
|
3979 |
|
3980 |
|
3981 | var KeyframesRule =
|
3982 |
|
3983 | function () {
|
3984 | function KeyframesRule(key, frames, options) {
|
3985 | this.type = 'keyframes';
|
3986 | this.at = '@keyframes';
|
3987 | this.key = void 0;
|
3988 | this.name = void 0;
|
3989 | this.id = void 0;
|
3990 | this.rules = void 0;
|
3991 | this.options = void 0;
|
3992 | this.isProcessed = false;
|
3993 | this.renderable = void 0;
|
3994 | var nameMatch = key.match(nameRegExp);
|
3995 |
|
3996 | if (nameMatch && nameMatch[1]) {
|
3997 | this.name = nameMatch[1];
|
3998 | } else {
|
3999 | this.name = 'noname';
|
4000 | warning(false, "[JSS] Bad keyframes name " + key) ;
|
4001 | }
|
4002 |
|
4003 | this.key = this.type + "-" + this.name;
|
4004 | this.options = options;
|
4005 | var scoped = options.scoped,
|
4006 | sheet = options.sheet,
|
4007 | generateId = options.generateId;
|
4008 | this.id = scoped === false ? this.name : escape(generateId(this, sheet));
|
4009 | this.rules = new RuleList(_extends({}, options, {
|
4010 | parent: this
|
4011 | }));
|
4012 |
|
4013 | for (var name in frames) {
|
4014 | this.rules.add(name, frames[name], _extends({}, options, {
|
4015 | parent: this
|
4016 | }));
|
4017 | }
|
4018 |
|
4019 | this.rules.process();
|
4020 | }
|
4021 | |
4022 |
|
4023 |
|
4024 |
|
4025 |
|
4026 | var _proto = KeyframesRule.prototype;
|
4027 |
|
4028 | _proto.toString = function toString(options) {
|
4029 | if (options === void 0) {
|
4030 | options = defaultToStringOptions$1;
|
4031 | }
|
4032 |
|
4033 | if (options.indent == null) options.indent = defaultToStringOptions$1.indent;
|
4034 | if (options.children == null) options.children = defaultToStringOptions$1.children;
|
4035 |
|
4036 | if (options.children === false) {
|
4037 | return this.at + " " + this.id + " {}";
|
4038 | }
|
4039 |
|
4040 | var children = this.rules.toString(options);
|
4041 | if (children) children = "\n" + children + "\n";
|
4042 | return this.at + " " + this.id + " {" + children + "}";
|
4043 | };
|
4044 |
|
4045 | return KeyframesRule;
|
4046 | }();
|
4047 | var keyRegExp$1 = /@keyframes\s+/;
|
4048 | var refRegExp = /\$([\w-]+)/g;
|
4049 |
|
4050 | var findReferencedKeyframe = function findReferencedKeyframe(val, keyframes) {
|
4051 | if (typeof val === 'string') {
|
4052 | return val.replace(refRegExp, function (match, name) {
|
4053 | if (name in keyframes) {
|
4054 | return keyframes[name];
|
4055 | }
|
4056 |
|
4057 | warning(false, "[JSS] Referenced keyframes rule \"" + name + "\" is not defined.") ;
|
4058 | return match;
|
4059 | });
|
4060 | }
|
4061 |
|
4062 | return val;
|
4063 | };
|
4064 | |
4065 |
|
4066 |
|
4067 |
|
4068 |
|
4069 | var replaceRef = function replaceRef(style, prop, keyframes) {
|
4070 | var value = style[prop];
|
4071 | var refKeyframe = findReferencedKeyframe(value, keyframes);
|
4072 |
|
4073 | if (refKeyframe !== value) {
|
4074 | style[prop] = refKeyframe;
|
4075 | }
|
4076 | };
|
4077 |
|
4078 | var plugin = {
|
4079 | onCreateRule: function onCreateRule(key, frames, options) {
|
4080 | return typeof key === 'string' && keyRegExp$1.test(key) ? new KeyframesRule(key, frames, options) : null;
|
4081 | },
|
4082 |
|
4083 | onProcessStyle: function onProcessStyle(style, rule, sheet) {
|
4084 | if (rule.type !== 'style' || !sheet) return style;
|
4085 | if ('animation-name' in style) replaceRef(style, 'animation-name', sheet.keyframes);
|
4086 | if ('animation' in style) replaceRef(style, 'animation', sheet.keyframes);
|
4087 | return style;
|
4088 | },
|
4089 | onChangeValue: function onChangeValue(val, prop, rule) {
|
4090 | var sheet = rule.options.sheet;
|
4091 |
|
4092 | if (!sheet) {
|
4093 | return val;
|
4094 | }
|
4095 |
|
4096 | switch (prop) {
|
4097 | case 'animation':
|
4098 | return findReferencedKeyframe(val, sheet.keyframes);
|
4099 |
|
4100 | case 'animation-name':
|
4101 | return findReferencedKeyframe(val, sheet.keyframes);
|
4102 |
|
4103 | default:
|
4104 | return val;
|
4105 | }
|
4106 | }
|
4107 | };
|
4108 |
|
4109 | var KeyframeRule =
|
4110 |
|
4111 | function (_BaseStyleRule) {
|
4112 | _inheritsLoose(KeyframeRule, _BaseStyleRule);
|
4113 |
|
4114 | function KeyframeRule() {
|
4115 | var _this;
|
4116 |
|
4117 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
4118 | args[_key] = arguments[_key];
|
4119 | }
|
4120 |
|
4121 | _this = _BaseStyleRule.call.apply(_BaseStyleRule, [this].concat(args)) || this;
|
4122 | _this.renderable = void 0;
|
4123 | return _this;
|
4124 | }
|
4125 |
|
4126 | var _proto = KeyframeRule.prototype;
|
4127 |
|
4128 | |
4129 |
|
4130 |
|
4131 | _proto.toString = function toString(options) {
|
4132 | var sheet = this.options.sheet;
|
4133 | var link = sheet ? sheet.options.link : false;
|
4134 | var opts = link ? _extends({}, options, {
|
4135 | allowEmpty: true
|
4136 | }) : options;
|
4137 | return toCss(this.key, this.style, opts);
|
4138 | };
|
4139 |
|
4140 | return KeyframeRule;
|
4141 | }(BaseStyleRule);
|
4142 | var pluginKeyframeRule = {
|
4143 | onCreateRule: function onCreateRule(key, style, options) {
|
4144 | if (options.parent && options.parent.type === 'keyframes') {
|
4145 | return new KeyframeRule(key, style, options);
|
4146 | }
|
4147 |
|
4148 | return null;
|
4149 | }
|
4150 | };
|
4151 |
|
4152 | var FontFaceRule =
|
4153 |
|
4154 | function () {
|
4155 | function FontFaceRule(key, style, options) {
|
4156 | this.type = 'font-face';
|
4157 | this.at = '@font-face';
|
4158 | this.key = void 0;
|
4159 | this.style = void 0;
|
4160 | this.options = void 0;
|
4161 | this.isProcessed = false;
|
4162 | this.renderable = void 0;
|
4163 | this.key = key;
|
4164 | this.style = style;
|
4165 | this.options = options;
|
4166 | }
|
4167 | |
4168 |
|
4169 |
|
4170 |
|
4171 |
|
4172 | var _proto = FontFaceRule.prototype;
|
4173 |
|
4174 | _proto.toString = function toString(options) {
|
4175 | if (Array.isArray(this.style)) {
|
4176 | var str = '';
|
4177 |
|
4178 | for (var index = 0; index < this.style.length; index++) {
|
4179 | str += toCss(this.at, this.style[index]);
|
4180 | if (this.style[index + 1]) str += '\n';
|
4181 | }
|
4182 |
|
4183 | return str;
|
4184 | }
|
4185 |
|
4186 | return toCss(this.at, this.style, options);
|
4187 | };
|
4188 |
|
4189 | return FontFaceRule;
|
4190 | }();
|
4191 | var keyRegExp$2 = /@font-face/;
|
4192 | var pluginFontFaceRule = {
|
4193 | onCreateRule: function onCreateRule(key, style, options) {
|
4194 | return keyRegExp$2.test(key) ? new FontFaceRule(key, style, options) : null;
|
4195 | }
|
4196 | };
|
4197 |
|
4198 | var ViewportRule =
|
4199 |
|
4200 | function () {
|
4201 | function ViewportRule(key, style, options) {
|
4202 | this.type = 'viewport';
|
4203 | this.at = '@viewport';
|
4204 | this.key = void 0;
|
4205 | this.style = void 0;
|
4206 | this.options = void 0;
|
4207 | this.isProcessed = false;
|
4208 | this.renderable = void 0;
|
4209 | this.key = key;
|
4210 | this.style = style;
|
4211 | this.options = options;
|
4212 | }
|
4213 | |
4214 |
|
4215 |
|
4216 |
|
4217 |
|
4218 | var _proto = ViewportRule.prototype;
|
4219 |
|
4220 | _proto.toString = function toString(options) {
|
4221 | return toCss(this.key, this.style, options);
|
4222 | };
|
4223 |
|
4224 | return ViewportRule;
|
4225 | }();
|
4226 | var pluginViewportRule = {
|
4227 | onCreateRule: function onCreateRule(key, style, options) {
|
4228 | return key === '@viewport' || key === '@-ms-viewport' ? new ViewportRule(key, style, options) : null;
|
4229 | }
|
4230 | };
|
4231 |
|
4232 | var SimpleRule =
|
4233 |
|
4234 | function () {
|
4235 | function SimpleRule(key, value, options) {
|
4236 | this.type = 'simple';
|
4237 | this.key = void 0;
|
4238 | this.value = void 0;
|
4239 | this.options = void 0;
|
4240 | this.isProcessed = false;
|
4241 | this.renderable = void 0;
|
4242 | this.key = key;
|
4243 | this.value = value;
|
4244 | this.options = options;
|
4245 | }
|
4246 | |
4247 |
|
4248 |
|
4249 |
|
4250 |
|
4251 |
|
4252 | var _proto = SimpleRule.prototype;
|
4253 |
|
4254 | _proto.toString = function toString(options) {
|
4255 | if (Array.isArray(this.value)) {
|
4256 | var str = '';
|
4257 |
|
4258 | for (var index = 0; index < this.value.length; index++) {
|
4259 | str += this.key + " " + this.value[index] + ";";
|
4260 | if (this.value[index + 1]) str += '\n';
|
4261 | }
|
4262 |
|
4263 | return str;
|
4264 | }
|
4265 |
|
4266 | return this.key + " " + this.value + ";";
|
4267 | };
|
4268 |
|
4269 | return SimpleRule;
|
4270 | }();
|
4271 | var keysMap = {
|
4272 | '@charset': true,
|
4273 | '@import': true,
|
4274 | '@namespace': true
|
4275 | };
|
4276 | var pluginSimpleRule = {
|
4277 | onCreateRule: function onCreateRule(key, value, options) {
|
4278 | return key in keysMap ? new SimpleRule(key, value, options) : null;
|
4279 | }
|
4280 | };
|
4281 |
|
4282 | var plugins = [pluginStyleRule, pluginConditionalRule, plugin, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];
|
4283 |
|
4284 | var defaultUpdateOptions = {
|
4285 | process: true
|
4286 | };
|
4287 | var forceUpdateOptions = {
|
4288 | force: true,
|
4289 | process: true
|
4290 | |
4291 |
|
4292 |
|
4293 |
|
4294 |
|
4295 | };
|
4296 |
|
4297 | var RuleList =
|
4298 |
|
4299 | function () {
|
4300 |
|
4301 |
|
4302 |
|
4303 |
|
4304 | function RuleList(options) {
|
4305 | this.map = {};
|
4306 | this.raw = {};
|
4307 | this.index = [];
|
4308 | this.counter = 0;
|
4309 | this.options = void 0;
|
4310 | this.classes = void 0;
|
4311 | this.keyframes = void 0;
|
4312 | this.options = options;
|
4313 | this.classes = options.classes;
|
4314 | this.keyframes = options.keyframes;
|
4315 | }
|
4316 | |
4317 |
|
4318 |
|
4319 |
|
4320 |
|
4321 |
|
4322 |
|
4323 | var _proto = RuleList.prototype;
|
4324 |
|
4325 | _proto.add = function add(name, decl, ruleOptions) {
|
4326 | var _this$options = this.options,
|
4327 | parent = _this$options.parent,
|
4328 | sheet = _this$options.sheet,
|
4329 | jss = _this$options.jss,
|
4330 | Renderer = _this$options.Renderer,
|
4331 | generateId = _this$options.generateId,
|
4332 | scoped = _this$options.scoped;
|
4333 |
|
4334 | var options = _extends({
|
4335 | classes: this.classes,
|
4336 | parent: parent,
|
4337 | sheet: sheet,
|
4338 | jss: jss,
|
4339 | Renderer: Renderer,
|
4340 | generateId: generateId,
|
4341 | scoped: scoped,
|
4342 | name: name,
|
4343 | keyframes: this.keyframes,
|
4344 | selector: undefined
|
4345 | }, ruleOptions);
|
4346 |
|
4347 |
|
4348 |
|
4349 |
|
4350 | var key = name;
|
4351 |
|
4352 | if (name in this.raw) {
|
4353 | key = name + "-d" + this.counter++;
|
4354 | }
|
4355 |
|
4356 |
|
4357 |
|
4358 | this.raw[key] = decl;
|
4359 |
|
4360 | if (key in this.classes) {
|
4361 |
|
4362 | options.selector = "." + escape(this.classes[key]);
|
4363 | }
|
4364 |
|
4365 | var rule = createRule(key, decl, options);
|
4366 | if (!rule) return null;
|
4367 | this.register(rule);
|
4368 | var index = options.index === undefined ? this.index.length : options.index;
|
4369 | this.index.splice(index, 0, rule);
|
4370 | return rule;
|
4371 | }
|
4372 | |
4373 |
|
4374 |
|
4375 | ;
|
4376 |
|
4377 | _proto.get = function get(name) {
|
4378 | return this.map[name];
|
4379 | }
|
4380 | |
4381 |
|
4382 |
|
4383 | ;
|
4384 |
|
4385 | _proto.remove = function remove(rule) {
|
4386 | this.unregister(rule);
|
4387 | delete this.raw[rule.key];
|
4388 | this.index.splice(this.index.indexOf(rule), 1);
|
4389 | }
|
4390 | |
4391 |
|
4392 |
|
4393 | ;
|
4394 |
|
4395 | _proto.indexOf = function indexOf(rule) {
|
4396 | return this.index.indexOf(rule);
|
4397 | }
|
4398 | |
4399 |
|
4400 |
|
4401 | ;
|
4402 |
|
4403 | _proto.process = function process() {
|
4404 | var plugins = this.options.jss.plugins;
|
4405 |
|
4406 |
|
4407 | this.index.slice(0).forEach(plugins.onProcessRule, plugins);
|
4408 | }
|
4409 | |
4410 |
|
4411 |
|
4412 | ;
|
4413 |
|
4414 | _proto.register = function register(rule) {
|
4415 | this.map[rule.key] = rule;
|
4416 |
|
4417 | if (rule instanceof StyleRule) {
|
4418 | this.map[rule.selector] = rule;
|
4419 | if (rule.id) this.classes[rule.key] = rule.id;
|
4420 | } else if (rule instanceof KeyframesRule && this.keyframes) {
|
4421 | this.keyframes[rule.name] = rule.id;
|
4422 | }
|
4423 | }
|
4424 | |
4425 |
|
4426 |
|
4427 | ;
|
4428 |
|
4429 | _proto.unregister = function unregister(rule) {
|
4430 | delete this.map[rule.key];
|
4431 |
|
4432 | if (rule instanceof StyleRule) {
|
4433 | delete this.map[rule.selector];
|
4434 | delete this.classes[rule.key];
|
4435 | } else if (rule instanceof KeyframesRule) {
|
4436 | delete this.keyframes[rule.name];
|
4437 | }
|
4438 | }
|
4439 | |
4440 |
|
4441 |
|
4442 | ;
|
4443 |
|
4444 | _proto.update = function update() {
|
4445 | var name;
|
4446 | var data;
|
4447 | var options;
|
4448 |
|
4449 | if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
|
4450 | name = arguments.length <= 0 ? undefined : arguments[0];
|
4451 |
|
4452 | data = arguments.length <= 1 ? undefined : arguments[1];
|
4453 |
|
4454 | options = arguments.length <= 2 ? undefined : arguments[2];
|
4455 | } else {
|
4456 | data = arguments.length <= 0 ? undefined : arguments[0];
|
4457 |
|
4458 | options = arguments.length <= 1 ? undefined : arguments[1];
|
4459 | name = null;
|
4460 | }
|
4461 |
|
4462 | if (name) {
|
4463 | this.updateOne(this.map[name], data, options);
|
4464 | } else {
|
4465 | for (var index = 0; index < this.index.length; index++) {
|
4466 | this.updateOne(this.index[index], data, options);
|
4467 | }
|
4468 | }
|
4469 | }
|
4470 | |
4471 |
|
4472 |
|
4473 | ;
|
4474 |
|
4475 | _proto.updateOne = function updateOne(rule, data, options) {
|
4476 | if (options === void 0) {
|
4477 | options = defaultUpdateOptions;
|
4478 | }
|
4479 |
|
4480 | var _this$options2 = this.options,
|
4481 | plugins = _this$options2.jss.plugins,
|
4482 | sheet = _this$options2.sheet;
|
4483 |
|
4484 | if (rule.rules instanceof RuleList) {
|
4485 | rule.rules.update(data, options);
|
4486 | return;
|
4487 | }
|
4488 |
|
4489 | var styleRule = rule;
|
4490 | var style = styleRule.style;
|
4491 | plugins.onUpdate(data, rule, sheet, options);
|
4492 |
|
4493 | if (options.process && style && style !== styleRule.style) {
|
4494 |
|
4495 | plugins.onProcessStyle(styleRule.style, styleRule, sheet);
|
4496 |
|
4497 | for (var prop in styleRule.style) {
|
4498 | var nextValue = styleRule.style[prop];
|
4499 | var prevValue = style[prop];
|
4500 |
|
4501 |
|
4502 | if (nextValue !== prevValue) {
|
4503 | styleRule.prop(prop, nextValue, forceUpdateOptions);
|
4504 | }
|
4505 | }
|
4506 |
|
4507 |
|
4508 | for (var _prop in style) {
|
4509 | var _nextValue = styleRule.style[_prop];
|
4510 | var _prevValue = style[_prop];
|
4511 |
|
4512 |
|
4513 | if (_nextValue == null && _nextValue !== _prevValue) {
|
4514 | styleRule.prop(_prop, null, forceUpdateOptions);
|
4515 | }
|
4516 | }
|
4517 | }
|
4518 | }
|
4519 | |
4520 |
|
4521 |
|
4522 | ;
|
4523 |
|
4524 | _proto.toString = function toString(options) {
|
4525 | var str = '';
|
4526 | var sheet = this.options.sheet;
|
4527 | var link = sheet ? sheet.options.link : false;
|
4528 |
|
4529 | for (var index = 0; index < this.index.length; index++) {
|
4530 | var rule = this.index[index];
|
4531 | var css = rule.toString(options);
|
4532 |
|
4533 | if (!css && !link) continue;
|
4534 | if (str) str += '\n';
|
4535 | str += css;
|
4536 | }
|
4537 |
|
4538 | return str;
|
4539 | };
|
4540 |
|
4541 | return RuleList;
|
4542 | }();
|
4543 |
|
4544 | var StyleSheet =
|
4545 |
|
4546 | function () {
|
4547 | function StyleSheet(styles, options) {
|
4548 | this.options = void 0;
|
4549 | this.deployed = void 0;
|
4550 | this.attached = void 0;
|
4551 | this.rules = void 0;
|
4552 | this.renderer = void 0;
|
4553 | this.classes = void 0;
|
4554 | this.keyframes = void 0;
|
4555 | this.queue = void 0;
|
4556 | this.attached = false;
|
4557 | this.deployed = false;
|
4558 | this.classes = {};
|
4559 | this.keyframes = {};
|
4560 | this.options = _extends({}, options, {
|
4561 | sheet: this,
|
4562 | parent: this,
|
4563 | classes: this.classes,
|
4564 | keyframes: this.keyframes
|
4565 | });
|
4566 |
|
4567 | if (options.Renderer) {
|
4568 | this.renderer = new options.Renderer(this);
|
4569 | }
|
4570 |
|
4571 | this.rules = new RuleList(this.options);
|
4572 |
|
4573 | for (var name in styles) {
|
4574 | this.rules.add(name, styles[name]);
|
4575 | }
|
4576 |
|
4577 | this.rules.process();
|
4578 | }
|
4579 | |
4580 |
|
4581 |
|
4582 |
|
4583 |
|
4584 | var _proto = StyleSheet.prototype;
|
4585 |
|
4586 | _proto.attach = function attach() {
|
4587 | if (this.attached) return this;
|
4588 | if (this.renderer) this.renderer.attach();
|
4589 | this.attached = true;
|
4590 |
|
4591 | if (!this.deployed) this.deploy();
|
4592 | return this;
|
4593 | }
|
4594 | |
4595 |
|
4596 |
|
4597 | ;
|
4598 |
|
4599 | _proto.detach = function detach() {
|
4600 | if (!this.attached) return this;
|
4601 | if (this.renderer) this.renderer.detach();
|
4602 | this.attached = false;
|
4603 | return this;
|
4604 | }
|
4605 | |
4606 |
|
4607 |
|
4608 |
|
4609 | ;
|
4610 |
|
4611 | _proto.addRule = function addRule(name, decl, options) {
|
4612 | var queue = this.queue;
|
4613 |
|
4614 |
|
4615 |
|
4616 | if (this.attached && !queue) this.queue = [];
|
4617 | var rule = this.rules.add(name, decl, options);
|
4618 | if (!rule) return null;
|
4619 | this.options.jss.plugins.onProcessRule(rule);
|
4620 |
|
4621 | if (this.attached) {
|
4622 | if (!this.deployed) return rule;
|
4623 |
|
4624 |
|
4625 | if (queue) queue.push(rule);else {
|
4626 | this.insertRule(rule);
|
4627 |
|
4628 | if (this.queue) {
|
4629 | this.queue.forEach(this.insertRule, this);
|
4630 | this.queue = undefined;
|
4631 | }
|
4632 | }
|
4633 | return rule;
|
4634 | }
|
4635 |
|
4636 |
|
4637 |
|
4638 | this.deployed = false;
|
4639 | return rule;
|
4640 | }
|
4641 | |
4642 |
|
4643 |
|
4644 | ;
|
4645 |
|
4646 | _proto.insertRule = function insertRule(rule) {
|
4647 | if (this.renderer) {
|
4648 | this.renderer.insertRule(rule);
|
4649 | }
|
4650 | }
|
4651 | |
4652 |
|
4653 |
|
4654 |
|
4655 | ;
|
4656 |
|
4657 | _proto.addRules = function addRules(styles, options) {
|
4658 | var added = [];
|
4659 |
|
4660 | for (var name in styles) {
|
4661 | var rule = this.addRule(name, styles[name], options);
|
4662 | if (rule) added.push(rule);
|
4663 | }
|
4664 |
|
4665 | return added;
|
4666 | }
|
4667 | |
4668 |
|
4669 |
|
4670 | ;
|
4671 |
|
4672 | _proto.getRule = function getRule(name) {
|
4673 | return this.rules.get(name);
|
4674 | }
|
4675 | |
4676 |
|
4677 |
|
4678 |
|
4679 | ;
|
4680 |
|
4681 | _proto.deleteRule = function deleteRule(name) {
|
4682 | var rule = typeof name === 'object' ? name : this.rules.get(name);
|
4683 |
|
4684 | if (!rule ||
|
4685 |
|
4686 | this.attached && !rule.renderable) {
|
4687 | return false;
|
4688 | }
|
4689 |
|
4690 | this.rules.remove(rule);
|
4691 |
|
4692 | if (this.attached && rule.renderable && this.renderer) {
|
4693 | return this.renderer.deleteRule(rule.renderable);
|
4694 | }
|
4695 |
|
4696 | return true;
|
4697 | }
|
4698 | |
4699 |
|
4700 |
|
4701 | ;
|
4702 |
|
4703 | _proto.indexOf = function indexOf(rule) {
|
4704 | return this.rules.indexOf(rule);
|
4705 | }
|
4706 | |
4707 |
|
4708 |
|
4709 | ;
|
4710 |
|
4711 | _proto.deploy = function deploy() {
|
4712 | if (this.renderer) this.renderer.deploy();
|
4713 | this.deployed = true;
|
4714 | return this;
|
4715 | }
|
4716 | |
4717 |
|
4718 |
|
4719 | ;
|
4720 |
|
4721 | _proto.update = function update() {
|
4722 | var _this$rules;
|
4723 |
|
4724 | (_this$rules = this.rules).update.apply(_this$rules, arguments);
|
4725 |
|
4726 | return this;
|
4727 | }
|
4728 | |
4729 |
|
4730 |
|
4731 | ;
|
4732 |
|
4733 | _proto.updateOne = function updateOne(rule, data, options) {
|
4734 | this.rules.updateOne(rule, data, options);
|
4735 | return this;
|
4736 | }
|
4737 | |
4738 |
|
4739 |
|
4740 | ;
|
4741 |
|
4742 | _proto.toString = function toString(options) {
|
4743 | return this.rules.toString(options);
|
4744 | };
|
4745 |
|
4746 | return StyleSheet;
|
4747 | }();
|
4748 |
|
4749 | var PluginsRegistry =
|
4750 |
|
4751 | function () {
|
4752 | function PluginsRegistry() {
|
4753 | this.plugins = {
|
4754 | internal: [],
|
4755 | external: []
|
4756 | };
|
4757 | this.registry = void 0;
|
4758 | }
|
4759 |
|
4760 | var _proto = PluginsRegistry.prototype;
|
4761 |
|
4762 | |
4763 |
|
4764 |
|
4765 | _proto.onCreateRule = function onCreateRule(name, decl, options) {
|
4766 | for (var i = 0; i < this.registry.onCreateRule.length; i++) {
|
4767 | var rule = this.registry.onCreateRule[i](name, decl, options);
|
4768 | if (rule) return rule;
|
4769 | }
|
4770 |
|
4771 | return null;
|
4772 | }
|
4773 | |
4774 |
|
4775 |
|
4776 | ;
|
4777 |
|
4778 | _proto.onProcessRule = function onProcessRule(rule) {
|
4779 | if (rule.isProcessed) return;
|
4780 | var sheet = rule.options.sheet;
|
4781 |
|
4782 | for (var i = 0; i < this.registry.onProcessRule.length; i++) {
|
4783 | this.registry.onProcessRule[i](rule, sheet);
|
4784 | }
|
4785 |
|
4786 | if (rule.style) this.onProcessStyle(rule.style, rule, sheet);
|
4787 | rule.isProcessed = true;
|
4788 | }
|
4789 | |
4790 |
|
4791 |
|
4792 | ;
|
4793 |
|
4794 | _proto.onProcessStyle = function onProcessStyle(style, rule, sheet) {
|
4795 | for (var i = 0; i < this.registry.onProcessStyle.length; i++) {
|
4796 |
|
4797 | rule.style = this.registry.onProcessStyle[i](rule.style, rule, sheet);
|
4798 | }
|
4799 | }
|
4800 | |
4801 |
|
4802 |
|
4803 | ;
|
4804 |
|
4805 | _proto.onProcessSheet = function onProcessSheet(sheet) {
|
4806 | for (var i = 0; i < this.registry.onProcessSheet.length; i++) {
|
4807 | this.registry.onProcessSheet[i](sheet);
|
4808 | }
|
4809 | }
|
4810 | |
4811 |
|
4812 |
|
4813 | ;
|
4814 |
|
4815 | _proto.onUpdate = function onUpdate(data, rule, sheet, options) {
|
4816 | for (var i = 0; i < this.registry.onUpdate.length; i++) {
|
4817 | this.registry.onUpdate[i](data, rule, sheet, options);
|
4818 | }
|
4819 | }
|
4820 | |
4821 |
|
4822 |
|
4823 | ;
|
4824 |
|
4825 | _proto.onChangeValue = function onChangeValue(value, prop, rule) {
|
4826 | var processedValue = value;
|
4827 |
|
4828 | for (var i = 0; i < this.registry.onChangeValue.length; i++) {
|
4829 | processedValue = this.registry.onChangeValue[i](processedValue, prop, rule);
|
4830 | }
|
4831 |
|
4832 | return processedValue;
|
4833 | }
|
4834 | |
4835 |
|
4836 |
|
4837 | ;
|
4838 |
|
4839 | _proto.use = function use(newPlugin, options) {
|
4840 | if (options === void 0) {
|
4841 | options = {
|
4842 | queue: 'external'
|
4843 | };
|
4844 | }
|
4845 |
|
4846 | var plugins = this.plugins[options.queue];
|
4847 |
|
4848 | if (plugins.indexOf(newPlugin) !== -1) {
|
4849 | return;
|
4850 | }
|
4851 |
|
4852 | plugins.push(newPlugin);
|
4853 | this.registry = [].concat(this.plugins.external, this.plugins.internal).reduce(function (registry, plugin) {
|
4854 | for (var name in plugin) {
|
4855 | if (name in registry) {
|
4856 | registry[name].push(plugin[name]);
|
4857 | } else {
|
4858 | warning(false, "[JSS] Unknown hook \"" + name + "\".") ;
|
4859 | }
|
4860 | }
|
4861 |
|
4862 | return registry;
|
4863 | }, {
|
4864 | onCreateRule: [],
|
4865 | onProcessRule: [],
|
4866 | onProcessStyle: [],
|
4867 | onProcessSheet: [],
|
4868 | onChangeValue: [],
|
4869 | onUpdate: []
|
4870 | });
|
4871 | };
|
4872 |
|
4873 | return PluginsRegistry;
|
4874 | }();
|
4875 |
|
4876 | |
4877 |
|
4878 |
|
4879 | var SheetsRegistry =
|
4880 |
|
4881 | function () {
|
4882 | function SheetsRegistry() {
|
4883 | this.registry = [];
|
4884 | }
|
4885 |
|
4886 | var _proto = SheetsRegistry.prototype;
|
4887 |
|
4888 | |
4889 |
|
4890 |
|
4891 | _proto.add = function add(sheet) {
|
4892 | var registry = this.registry;
|
4893 | var index = sheet.options.index;
|
4894 | if (registry.indexOf(sheet) !== -1) return;
|
4895 |
|
4896 | if (registry.length === 0 || index >= this.index) {
|
4897 | registry.push(sheet);
|
4898 | return;
|
4899 | }
|
4900 |
|
4901 |
|
4902 | for (var i = 0; i < registry.length; i++) {
|
4903 | if (registry[i].options.index > index) {
|
4904 | registry.splice(i, 0, sheet);
|
4905 | return;
|
4906 | }
|
4907 | }
|
4908 | }
|
4909 | |
4910 |
|
4911 |
|
4912 | ;
|
4913 |
|
4914 | _proto.reset = function reset() {
|
4915 | this.registry = [];
|
4916 | }
|
4917 | |
4918 |
|
4919 |
|
4920 | ;
|
4921 |
|
4922 | _proto.remove = function remove(sheet) {
|
4923 | var index = this.registry.indexOf(sheet);
|
4924 | this.registry.splice(index, 1);
|
4925 | }
|
4926 | |
4927 |
|
4928 |
|
4929 | ;
|
4930 |
|
4931 | _proto.toString = function toString(_temp) {
|
4932 | var _ref = _temp === void 0 ? {} : _temp,
|
4933 | attached = _ref.attached,
|
4934 | options = _objectWithoutPropertiesLoose(_ref, ["attached"]);
|
4935 |
|
4936 | var css = '';
|
4937 |
|
4938 | for (var i = 0; i < this.registry.length; i++) {
|
4939 | var sheet = this.registry[i];
|
4940 |
|
4941 | if (attached != null && sheet.attached !== attached) {
|
4942 | continue;
|
4943 | }
|
4944 |
|
4945 | if (css) css += '\n';
|
4946 | css += sheet.toString(options);
|
4947 | }
|
4948 |
|
4949 | return css;
|
4950 | };
|
4951 |
|
4952 | _createClass(SheetsRegistry, [{
|
4953 | key: "index",
|
4954 |
|
4955 | |
4956 |
|
4957 |
|
4958 | get: function get() {
|
4959 | return this.registry.length === 0 ? 0 : this.registry[this.registry.length - 1].options.index;
|
4960 | }
|
4961 | }]);
|
4962 |
|
4963 | return SheetsRegistry;
|
4964 | }();
|
4965 |
|
4966 | |
4967 |
|
4968 |
|
4969 |
|
4970 |
|
4971 |
|
4972 |
|
4973 | var registry = new SheetsRegistry();
|
4974 |
|
4975 |
|
4976 |
|
4977 | var globalThis = typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();
|
4978 |
|
4979 | var ns = '2f1acc6c3a606b082e5eef5e54414ffb';
|
4980 | if (globalThis[ns] == null) globalThis[ns] = 0;
|
4981 |
|
4982 |
|
4983 |
|
4984 |
|
4985 | var moduleId = globalThis[ns]++;
|
4986 |
|
4987 | var maxRules = 1e10;
|
4988 |
|
4989 | |
4990 |
|
4991 |
|
4992 |
|
4993 |
|
4994 | var createGenerateId = function createGenerateId(options) {
|
4995 | if (options === void 0) {
|
4996 | options = {};
|
4997 | }
|
4998 |
|
4999 | var ruleCounter = 0;
|
5000 | return function (rule, sheet) {
|
5001 | ruleCounter += 1;
|
5002 |
|
5003 | if (ruleCounter > maxRules) {
|
5004 | warning(false, "[JSS] You might have a memory leak. Rule counter is at " + ruleCounter + ".") ;
|
5005 | }
|
5006 |
|
5007 | var jssId = '';
|
5008 | var prefix = '';
|
5009 |
|
5010 | if (sheet) {
|
5011 | if (sheet.options.classNamePrefix) {
|
5012 | prefix = sheet.options.classNamePrefix;
|
5013 | }
|
5014 |
|
5015 | if (sheet.options.jss.id != null) {
|
5016 | jssId = String(sheet.options.jss.id);
|
5017 | }
|
5018 | }
|
5019 |
|
5020 | if (options.minify) {
|
5021 |
|
5022 | return "" + (prefix || 'c') + moduleId + jssId + ruleCounter;
|
5023 | }
|
5024 |
|
5025 | return prefix + rule.key + "-" + moduleId + (jssId ? "-" + jssId : '') + "-" + ruleCounter;
|
5026 | };
|
5027 | };
|
5028 |
|
5029 | |
5030 |
|
5031 |
|
5032 | var memoize$1 = function memoize(fn) {
|
5033 | var value;
|
5034 | return function () {
|
5035 | if (!value) value = fn();
|
5036 | return value;
|
5037 | };
|
5038 | };
|
5039 |
|
5040 | |
5041 |
|
5042 |
|
5043 | var getPropertyValue = function getPropertyValue(cssRule, prop) {
|
5044 | try {
|
5045 |
|
5046 | if (cssRule.attributeStyleMap) {
|
5047 | return cssRule.attributeStyleMap.get(prop);
|
5048 | }
|
5049 |
|
5050 | return cssRule.style.getPropertyValue(prop);
|
5051 | } catch (err) {
|
5052 |
|
5053 | return '';
|
5054 | }
|
5055 | };
|
5056 |
|
5057 | |
5058 |
|
5059 |
|
5060 | var setProperty = function setProperty(cssRule, prop, value) {
|
5061 | try {
|
5062 | var cssValue = value;
|
5063 |
|
5064 | if (Array.isArray(value)) {
|
5065 | cssValue = toCssValue(value, true);
|
5066 |
|
5067 | if (value[value.length - 1] === '!important') {
|
5068 | cssRule.style.setProperty(prop, cssValue, 'important');
|
5069 | return true;
|
5070 | }
|
5071 | }
|
5072 |
|
5073 |
|
5074 | if (cssRule.attributeStyleMap) {
|
5075 | cssRule.attributeStyleMap.set(prop, cssValue);
|
5076 | } else {
|
5077 | cssRule.style.setProperty(prop, cssValue);
|
5078 | }
|
5079 | } catch (err) {
|
5080 |
|
5081 | return false;
|
5082 | }
|
5083 |
|
5084 | return true;
|
5085 | };
|
5086 |
|
5087 | |
5088 |
|
5089 |
|
5090 | var removeProperty = function removeProperty(cssRule, prop) {
|
5091 | try {
|
5092 |
|
5093 | if (cssRule.attributeStyleMap) {
|
5094 | cssRule.attributeStyleMap.delete(prop);
|
5095 | } else {
|
5096 | cssRule.style.removeProperty(prop);
|
5097 | }
|
5098 | } catch (err) {
|
5099 | warning(false, "[JSS] DOMException \"" + err.message + "\" was thrown. Tried to remove property \"" + prop + "\".") ;
|
5100 | }
|
5101 | };
|
5102 |
|
5103 | |
5104 |
|
5105 |
|
5106 | var setSelector = function setSelector(cssRule, selectorText) {
|
5107 | cssRule.selectorText = selectorText;
|
5108 |
|
5109 |
|
5110 | return cssRule.selectorText === selectorText;
|
5111 | };
|
5112 | |
5113 |
|
5114 |
|
5115 |
|
5116 |
|
5117 |
|
5118 | var getHead = memoize$1(function () {
|
5119 | return document.querySelector('head');
|
5120 | });
|
5121 | |
5122 |
|
5123 |
|
5124 |
|
5125 | function findHigherSheet(registry, options) {
|
5126 | for (var i = 0; i < registry.length; i++) {
|
5127 | var sheet = registry[i];
|
5128 |
|
5129 | if (sheet.attached && sheet.options.index > options.index && sheet.options.insertionPoint === options.insertionPoint) {
|
5130 | return sheet;
|
5131 | }
|
5132 | }
|
5133 |
|
5134 | return null;
|
5135 | }
|
5136 | |
5137 |
|
5138 |
|
5139 |
|
5140 |
|
5141 | function findHighestSheet(registry, options) {
|
5142 | for (var i = registry.length - 1; i >= 0; i--) {
|
5143 | var sheet = registry[i];
|
5144 |
|
5145 | if (sheet.attached && sheet.options.insertionPoint === options.insertionPoint) {
|
5146 | return sheet;
|
5147 | }
|
5148 | }
|
5149 |
|
5150 | return null;
|
5151 | }
|
5152 | |
5153 |
|
5154 |
|
5155 |
|
5156 |
|
5157 | function findCommentNode(text) {
|
5158 | var head = getHead();
|
5159 |
|
5160 | for (var i = 0; i < head.childNodes.length; i++) {
|
5161 | var node = head.childNodes[i];
|
5162 |
|
5163 | if (node.nodeType === 8 && node.nodeValue.trim() === text) {
|
5164 | return node;
|
5165 | }
|
5166 | }
|
5167 |
|
5168 | return null;
|
5169 | }
|
5170 |
|
5171 | |
5172 |
|
5173 |
|
5174 | function findPrevNode(options) {
|
5175 | var registry$1 = registry.registry;
|
5176 |
|
5177 | if (registry$1.length > 0) {
|
5178 |
|
5179 | var sheet = findHigherSheet(registry$1, options);
|
5180 |
|
5181 | if (sheet && sheet.renderer) {
|
5182 | return {
|
5183 | parent: sheet.renderer.element.parentNode,
|
5184 | node: sheet.renderer.element
|
5185 | };
|
5186 | }
|
5187 |
|
5188 |
|
5189 | sheet = findHighestSheet(registry$1, options);
|
5190 |
|
5191 | if (sheet && sheet.renderer) {
|
5192 | return {
|
5193 | parent: sheet.renderer.element.parentNode,
|
5194 | node: sheet.renderer.element.nextSibling
|
5195 | };
|
5196 | }
|
5197 | }
|
5198 |
|
5199 |
|
5200 | var insertionPoint = options.insertionPoint;
|
5201 |
|
5202 | if (insertionPoint && typeof insertionPoint === 'string') {
|
5203 | var comment = findCommentNode(insertionPoint);
|
5204 |
|
5205 | if (comment) {
|
5206 | return {
|
5207 | parent: comment.parentNode,
|
5208 | node: comment.nextSibling
|
5209 | };
|
5210 | }
|
5211 |
|
5212 |
|
5213 |
|
5214 | warning(false, "[JSS] Insertion point \"" + insertionPoint + "\" not found.") ;
|
5215 | }
|
5216 |
|
5217 | return false;
|
5218 | }
|
5219 | |
5220 |
|
5221 |
|
5222 |
|
5223 |
|
5224 | function insertStyle(style, options) {
|
5225 | var insertionPoint = options.insertionPoint;
|
5226 | var nextNode = findPrevNode(options);
|
5227 |
|
5228 | if (nextNode !== false && nextNode.parent) {
|
5229 | nextNode.parent.insertBefore(style, nextNode.node);
|
5230 | return;
|
5231 | }
|
5232 |
|
5233 |
|
5234 | if (insertionPoint && typeof insertionPoint.nodeType === 'number') {
|
5235 |
|
5236 | var insertionPointElement = insertionPoint;
|
5237 | var parentNode = insertionPointElement.parentNode;
|
5238 | if (parentNode) parentNode.insertBefore(style, insertionPointElement.nextSibling);else warning(false, '[JSS] Insertion point is not in the DOM.') ;
|
5239 | return;
|
5240 | }
|
5241 |
|
5242 | getHead().appendChild(style);
|
5243 | }
|
5244 | |
5245 |
|
5246 |
|
5247 |
|
5248 |
|
5249 | var getNonce = memoize$1(function () {
|
5250 | var node = document.querySelector('meta[property="csp-nonce"]');
|
5251 | return node ? node.getAttribute('content') : null;
|
5252 | });
|
5253 |
|
5254 | var _insertRule = function insertRule(container, rule, index) {
|
5255 | try {
|
5256 | if ('insertRule' in container) {
|
5257 | var c = container;
|
5258 | c.insertRule(rule, index);
|
5259 | }
|
5260 | else if ('appendRule' in container) {
|
5261 | var _c = container;
|
5262 |
|
5263 | _c.appendRule(rule);
|
5264 | }
|
5265 | } catch (err) {
|
5266 | warning(false, "[JSS] " + err.message) ;
|
5267 | return false;
|
5268 | }
|
5269 |
|
5270 | return container.cssRules[index];
|
5271 | };
|
5272 |
|
5273 | var getValidRuleInsertionIndex = function getValidRuleInsertionIndex(container, index) {
|
5274 | var maxIndex = container.cssRules.length;
|
5275 |
|
5276 | if (index === undefined || index > maxIndex) {
|
5277 |
|
5278 | return maxIndex;
|
5279 | }
|
5280 |
|
5281 | return index;
|
5282 | };
|
5283 |
|
5284 | var createStyle = function createStyle() {
|
5285 | var el = document.createElement('style');
|
5286 |
|
5287 |
|
5288 |
|
5289 | el.textContent = '\n';
|
5290 | return el;
|
5291 | };
|
5292 |
|
5293 | var DomRenderer =
|
5294 |
|
5295 | function () {
|
5296 |
|
5297 |
|
5298 |
|
5299 | function DomRenderer(sheet) {
|
5300 | this.getPropertyValue = getPropertyValue;
|
5301 | this.setProperty = setProperty;
|
5302 | this.removeProperty = removeProperty;
|
5303 | this.setSelector = setSelector;
|
5304 | this.element = void 0;
|
5305 | this.sheet = void 0;
|
5306 | this.hasInsertedRules = false;
|
5307 | this.cssRules = [];
|
5308 |
|
5309 | if (sheet) registry.add(sheet);
|
5310 | this.sheet = sheet;
|
5311 |
|
5312 | var _ref = this.sheet ? this.sheet.options : {},
|
5313 | media = _ref.media,
|
5314 | meta = _ref.meta,
|
5315 | element = _ref.element;
|
5316 |
|
5317 | this.element = element || createStyle();
|
5318 | this.element.setAttribute('data-jss', '');
|
5319 | if (media) this.element.setAttribute('media', media);
|
5320 | if (meta) this.element.setAttribute('data-meta', meta);
|
5321 | var nonce = getNonce();
|
5322 | if (nonce) this.element.setAttribute('nonce', nonce);
|
5323 | }
|
5324 | |
5325 |
|
5326 |
|
5327 |
|
5328 |
|
5329 | var _proto = DomRenderer.prototype;
|
5330 |
|
5331 | _proto.attach = function attach() {
|
5332 |
|
5333 | if (this.element.parentNode || !this.sheet) return;
|
5334 | insertStyle(this.element, this.sheet.options);
|
5335 |
|
5336 |
|
5337 | var deployed = Boolean(this.sheet && this.sheet.deployed);
|
5338 |
|
5339 | if (this.hasInsertedRules && deployed) {
|
5340 | this.hasInsertedRules = false;
|
5341 | this.deploy();
|
5342 | }
|
5343 | }
|
5344 | |
5345 |
|
5346 |
|
5347 | ;
|
5348 |
|
5349 | _proto.detach = function detach() {
|
5350 | if (!this.sheet) return;
|
5351 | var parentNode = this.element.parentNode;
|
5352 | if (parentNode) parentNode.removeChild(this.element);
|
5353 |
|
5354 |
|
5355 | if (this.sheet.options.link) {
|
5356 | this.cssRules = [];
|
5357 | this.element.textContent = '\n';
|
5358 | }
|
5359 | }
|
5360 | |
5361 |
|
5362 |
|
5363 | ;
|
5364 |
|
5365 | _proto.deploy = function deploy() {
|
5366 | var sheet = this.sheet;
|
5367 | if (!sheet) return;
|
5368 |
|
5369 | if (sheet.options.link) {
|
5370 | this.insertRules(sheet.rules);
|
5371 | return;
|
5372 | }
|
5373 |
|
5374 | this.element.textContent = "\n" + sheet.toString() + "\n";
|
5375 | }
|
5376 | |
5377 |
|
5378 |
|
5379 | ;
|
5380 |
|
5381 | _proto.insertRules = function insertRules(rules, nativeParent) {
|
5382 | for (var i = 0; i < rules.index.length; i++) {
|
5383 | this.insertRule(rules.index[i], i, nativeParent);
|
5384 | }
|
5385 | }
|
5386 | |
5387 |
|
5388 |
|
5389 | ;
|
5390 |
|
5391 | _proto.insertRule = function insertRule(rule, index, nativeParent) {
|
5392 | if (nativeParent === void 0) {
|
5393 | nativeParent = this.element.sheet;
|
5394 | }
|
5395 |
|
5396 | if (rule.rules) {
|
5397 | var parent = rule;
|
5398 | var latestNativeParent = nativeParent;
|
5399 |
|
5400 | if (rule.type === 'conditional' || rule.type === 'keyframes') {
|
5401 | var _insertionIndex = getValidRuleInsertionIndex(nativeParent, index);
|
5402 |
|
5403 |
|
5404 | latestNativeParent = _insertRule(nativeParent, parent.toString({
|
5405 | children: false
|
5406 | }), _insertionIndex);
|
5407 |
|
5408 | if (latestNativeParent === false) {
|
5409 | return false;
|
5410 | }
|
5411 |
|
5412 | this.refCssRule(rule, _insertionIndex, latestNativeParent);
|
5413 | }
|
5414 |
|
5415 | this.insertRules(parent.rules, latestNativeParent);
|
5416 | return latestNativeParent;
|
5417 | }
|
5418 |
|
5419 | var ruleStr = rule.toString();
|
5420 | if (!ruleStr) return false;
|
5421 | var insertionIndex = getValidRuleInsertionIndex(nativeParent, index);
|
5422 |
|
5423 | var nativeRule = _insertRule(nativeParent, ruleStr, insertionIndex);
|
5424 |
|
5425 | if (nativeRule === false) {
|
5426 | return false;
|
5427 | }
|
5428 |
|
5429 | this.hasInsertedRules = true;
|
5430 | this.refCssRule(rule, insertionIndex, nativeRule);
|
5431 | return nativeRule;
|
5432 | };
|
5433 |
|
5434 | _proto.refCssRule = function refCssRule(rule, index, cssRule) {
|
5435 | rule.renderable = cssRule;
|
5436 |
|
5437 |
|
5438 | if (rule.options.parent instanceof StyleSheet) {
|
5439 | this.cssRules[index] = cssRule;
|
5440 | }
|
5441 | }
|
5442 | |
5443 |
|
5444 |
|
5445 | ;
|
5446 |
|
5447 | _proto.deleteRule = function deleteRule(cssRule) {
|
5448 | var sheet = this.element.sheet;
|
5449 | var index = this.indexOf(cssRule);
|
5450 | if (index === -1) return false;
|
5451 | sheet.deleteRule(index);
|
5452 | this.cssRules.splice(index, 1);
|
5453 | return true;
|
5454 | }
|
5455 | |
5456 |
|
5457 |
|
5458 | ;
|
5459 |
|
5460 | _proto.indexOf = function indexOf(cssRule) {
|
5461 | return this.cssRules.indexOf(cssRule);
|
5462 | }
|
5463 | |
5464 |
|
5465 |
|
5466 |
|
5467 |
|
5468 | ;
|
5469 |
|
5470 | _proto.replaceRule = function replaceRule(cssRule, rule) {
|
5471 | var index = this.indexOf(cssRule);
|
5472 | if (index === -1) return false;
|
5473 | this.element.sheet.deleteRule(index);
|
5474 | this.cssRules.splice(index, 1);
|
5475 | return this.insertRule(rule, index);
|
5476 | }
|
5477 | |
5478 |
|
5479 |
|
5480 | ;
|
5481 |
|
5482 | _proto.getRules = function getRules() {
|
5483 | return this.element.sheet.cssRules;
|
5484 | };
|
5485 |
|
5486 | return DomRenderer;
|
5487 | }();
|
5488 |
|
5489 | var instanceCounter = 0;
|
5490 |
|
5491 | var Jss =
|
5492 |
|
5493 | function () {
|
5494 | function Jss(options) {
|
5495 | this.id = instanceCounter++;
|
5496 | this.version = "10.5.1";
|
5497 | this.plugins = new PluginsRegistry();
|
5498 | this.options = {
|
5499 | id: {
|
5500 | minify: false
|
5501 | },
|
5502 | createGenerateId: createGenerateId,
|
5503 | Renderer: isBrowser ? DomRenderer : null,
|
5504 | plugins: []
|
5505 | };
|
5506 | this.generateId = createGenerateId({
|
5507 | minify: false
|
5508 | });
|
5509 |
|
5510 | for (var i = 0; i < plugins.length; i++) {
|
5511 | this.plugins.use(plugins[i], {
|
5512 | queue: 'internal'
|
5513 | });
|
5514 | }
|
5515 |
|
5516 | this.setup(options);
|
5517 | }
|
5518 | |
5519 |
|
5520 |
|
5521 |
|
5522 |
|
5523 |
|
5524 |
|
5525 | var _proto = Jss.prototype;
|
5526 |
|
5527 | _proto.setup = function setup(options) {
|
5528 | if (options === void 0) {
|
5529 | options = {};
|
5530 | }
|
5531 |
|
5532 | if (options.createGenerateId) {
|
5533 | this.options.createGenerateId = options.createGenerateId;
|
5534 | }
|
5535 |
|
5536 | if (options.id) {
|
5537 | this.options.id = _extends({}, this.options.id, options.id);
|
5538 | }
|
5539 |
|
5540 | if (options.createGenerateId || options.id) {
|
5541 | this.generateId = this.options.createGenerateId(this.options.id);
|
5542 | }
|
5543 |
|
5544 | if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint;
|
5545 |
|
5546 | if ('Renderer' in options) {
|
5547 | this.options.Renderer = options.Renderer;
|
5548 | }
|
5549 |
|
5550 |
|
5551 | if (options.plugins) this.use.apply(this, options.plugins);
|
5552 | return this;
|
5553 | }
|
5554 | |
5555 |
|
5556 |
|
5557 | ;
|
5558 |
|
5559 | _proto.createStyleSheet = function createStyleSheet(styles, options) {
|
5560 | if (options === void 0) {
|
5561 | options = {};
|
5562 | }
|
5563 |
|
5564 | var _options = options,
|
5565 | index = _options.index;
|
5566 |
|
5567 | if (typeof index !== 'number') {
|
5568 | index = registry.index === 0 ? 0 : registry.index + 1;
|
5569 | }
|
5570 |
|
5571 | var sheet = new StyleSheet(styles, _extends({}, options, {
|
5572 | jss: this,
|
5573 | generateId: options.generateId || this.generateId,
|
5574 | insertionPoint: this.options.insertionPoint,
|
5575 | Renderer: this.options.Renderer,
|
5576 | index: index
|
5577 | }));
|
5578 | this.plugins.onProcessSheet(sheet);
|
5579 | return sheet;
|
5580 | }
|
5581 | |
5582 |
|
5583 |
|
5584 | ;
|
5585 |
|
5586 | _proto.removeStyleSheet = function removeStyleSheet(sheet) {
|
5587 | sheet.detach();
|
5588 | registry.remove(sheet);
|
5589 | return this;
|
5590 | }
|
5591 | |
5592 |
|
5593 |
|
5594 |
|
5595 | ;
|
5596 |
|
5597 | _proto.createRule = function createRule$1(name, style, options) {
|
5598 | if (style === void 0) {
|
5599 | style = {};
|
5600 | }
|
5601 |
|
5602 | if (options === void 0) {
|
5603 | options = {};
|
5604 | }
|
5605 |
|
5606 |
|
5607 | if (typeof name === 'object') {
|
5608 |
|
5609 | return this.createRule(undefined, name, style);
|
5610 | }
|
5611 |
|
5612 |
|
5613 | var ruleOptions = _extends({}, options, {
|
5614 | name: name,
|
5615 | jss: this,
|
5616 | Renderer: this.options.Renderer
|
5617 | });
|
5618 |
|
5619 | if (!ruleOptions.generateId) ruleOptions.generateId = this.generateId;
|
5620 | if (!ruleOptions.classes) ruleOptions.classes = {};
|
5621 | if (!ruleOptions.keyframes) ruleOptions.keyframes = {};
|
5622 |
|
5623 | var rule = createRule(name, style, ruleOptions);
|
5624 |
|
5625 | if (rule) this.plugins.onProcessRule(rule);
|
5626 | return rule;
|
5627 | }
|
5628 | |
5629 |
|
5630 |
|
5631 | ;
|
5632 |
|
5633 | _proto.use = function use() {
|
5634 | var _this = this;
|
5635 |
|
5636 | for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) {
|
5637 | plugins[_key] = arguments[_key];
|
5638 | }
|
5639 |
|
5640 | plugins.forEach(function (plugin) {
|
5641 | _this.plugins.use(plugin);
|
5642 | });
|
5643 | return this;
|
5644 | };
|
5645 |
|
5646 | return Jss;
|
5647 | }();
|
5648 |
|
5649 | |
5650 |
|
5651 |
|
5652 | function getDynamicStyles(styles) {
|
5653 | var to = null;
|
5654 |
|
5655 | for (var key in styles) {
|
5656 | var value = styles[key];
|
5657 | var type = typeof value;
|
5658 |
|
5659 | if (type === 'function') {
|
5660 | if (!to) to = {};
|
5661 | to[key] = value;
|
5662 | } else if (type === 'object' && value !== null && !Array.isArray(value)) {
|
5663 | var extracted = getDynamicStyles(value);
|
5664 |
|
5665 | if (extracted) {
|
5666 | if (!to) to = {};
|
5667 | to[key] = extracted;
|
5668 | }
|
5669 | }
|
5670 | }
|
5671 |
|
5672 | return to;
|
5673 | }
|
5674 |
|
5675 | |
5676 |
|
5677 |
|
5678 |
|
5679 |
|
5680 |
|
5681 |
|
5682 |
|
5683 | |
5684 |
|
5685 |
|
5686 |
|
5687 | var hasCSSTOMSupport = typeof CSS === 'object' && CSS != null && 'number' in CSS;
|
5688 | |
5689 |
|
5690 |
|
5691 |
|
5692 | var create = function create(options) {
|
5693 | return new Jss(options);
|
5694 | };
|
5695 | |
5696 |
|
5697 |
|
5698 |
|
5699 | var jss = create();
|
5700 |
|
5701 | var now = Date.now();
|
5702 | var fnValuesNs = "fnValues" + now;
|
5703 | var fnRuleNs = "fnStyle" + ++now;
|
5704 |
|
5705 | var functionPlugin = function functionPlugin() {
|
5706 | return {
|
5707 | onCreateRule: function onCreateRule(name, decl, options) {
|
5708 | if (typeof decl !== 'function') return null;
|
5709 | var rule = createRule(name, {}, options);
|
5710 | rule[fnRuleNs] = decl;
|
5711 | return rule;
|
5712 | },
|
5713 | onProcessStyle: function onProcessStyle(style, rule) {
|
5714 |
|
5715 |
|
5716 |
|
5717 |
|
5718 | if (fnValuesNs in rule || fnRuleNs in rule) return style;
|
5719 | var fnValues = {};
|
5720 |
|
5721 | for (var prop in style) {
|
5722 | var value = style[prop];
|
5723 | if (typeof value !== 'function') continue;
|
5724 | delete style[prop];
|
5725 | fnValues[prop] = value;
|
5726 | }
|
5727 |
|
5728 |
|
5729 | rule[fnValuesNs] = fnValues;
|
5730 | return style;
|
5731 | },
|
5732 | onUpdate: function onUpdate(data, rule, sheet, options) {
|
5733 | var styleRule = rule;
|
5734 |
|
5735 | var fnRule = styleRule[fnRuleNs];
|
5736 |
|
5737 |
|
5738 | if (fnRule) {
|
5739 |
|
5740 |
|
5741 | styleRule.style = fnRule(data) || {};
|
5742 |
|
5743 | {
|
5744 | for (var prop in styleRule.style) {
|
5745 | if (typeof styleRule.style[prop] === 'function') {
|
5746 | warning(false, '[JSS] Function values inside function rules are not supported.') ;
|
5747 | break;
|
5748 | }
|
5749 | }
|
5750 | }
|
5751 | }
|
5752 |
|
5753 |
|
5754 | var fnValues = styleRule[fnValuesNs];
|
5755 |
|
5756 | if (fnValues) {
|
5757 | for (var _prop in fnValues) {
|
5758 | styleRule.prop(_prop, fnValues[_prop](data), options);
|
5759 | }
|
5760 | }
|
5761 | }
|
5762 | };
|
5763 | };
|
5764 |
|
5765 | var at = '@global';
|
5766 | var atPrefix = '@global ';
|
5767 |
|
5768 | var GlobalContainerRule =
|
5769 |
|
5770 | function () {
|
5771 | function GlobalContainerRule(key, styles, options) {
|
5772 | this.type = 'global';
|
5773 | this.at = at;
|
5774 | this.rules = void 0;
|
5775 | this.options = void 0;
|
5776 | this.key = void 0;
|
5777 | this.isProcessed = false;
|
5778 | this.key = key;
|
5779 | this.options = options;
|
5780 | this.rules = new RuleList(_extends({}, options, {
|
5781 | parent: this
|
5782 | }));
|
5783 |
|
5784 | for (var selector in styles) {
|
5785 | this.rules.add(selector, styles[selector]);
|
5786 | }
|
5787 |
|
5788 | this.rules.process();
|
5789 | }
|
5790 | |
5791 |
|
5792 |
|
5793 |
|
5794 |
|
5795 | var _proto = GlobalContainerRule.prototype;
|
5796 |
|
5797 | _proto.getRule = function getRule(name) {
|
5798 | return this.rules.get(name);
|
5799 | }
|
5800 | |
5801 |
|
5802 |
|
5803 | ;
|
5804 |
|
5805 | _proto.addRule = function addRule(name, style, options) {
|
5806 | var rule = this.rules.add(name, style, options);
|
5807 | if (rule) this.options.jss.plugins.onProcessRule(rule);
|
5808 | return rule;
|
5809 | }
|
5810 | |
5811 |
|
5812 |
|
5813 | ;
|
5814 |
|
5815 | _proto.indexOf = function indexOf(rule) {
|
5816 | return this.rules.indexOf(rule);
|
5817 | }
|
5818 | |
5819 |
|
5820 |
|
5821 | ;
|
5822 |
|
5823 | _proto.toString = function toString() {
|
5824 | return this.rules.toString();
|
5825 | };
|
5826 |
|
5827 | return GlobalContainerRule;
|
5828 | }();
|
5829 |
|
5830 | var GlobalPrefixedRule =
|
5831 |
|
5832 | function () {
|
5833 | function GlobalPrefixedRule(key, style, options) {
|
5834 | this.type = 'global';
|
5835 | this.at = at;
|
5836 | this.options = void 0;
|
5837 | this.rule = void 0;
|
5838 | this.isProcessed = false;
|
5839 | this.key = void 0;
|
5840 | this.key = key;
|
5841 | this.options = options;
|
5842 | var selector = key.substr(atPrefix.length);
|
5843 | this.rule = options.jss.createRule(selector, style, _extends({}, options, {
|
5844 | parent: this
|
5845 | }));
|
5846 | }
|
5847 |
|
5848 | var _proto2 = GlobalPrefixedRule.prototype;
|
5849 |
|
5850 | _proto2.toString = function toString(options) {
|
5851 | return this.rule ? this.rule.toString(options) : '';
|
5852 | };
|
5853 |
|
5854 | return GlobalPrefixedRule;
|
5855 | }();
|
5856 |
|
5857 | var separatorRegExp = /\s*,\s*/g;
|
5858 |
|
5859 | function addScope(selector, scope) {
|
5860 | var parts = selector.split(separatorRegExp);
|
5861 | var scoped = '';
|
5862 |
|
5863 | for (var i = 0; i < parts.length; i++) {
|
5864 | scoped += scope + " " + parts[i].trim();
|
5865 | if (parts[i + 1]) scoped += ', ';
|
5866 | }
|
5867 |
|
5868 | return scoped;
|
5869 | }
|
5870 |
|
5871 | function handleNestedGlobalContainerRule(rule, sheet) {
|
5872 | var options = rule.options,
|
5873 | style = rule.style;
|
5874 | var rules = style ? style[at] : null;
|
5875 | if (!rules) return;
|
5876 |
|
5877 | for (var name in rules) {
|
5878 | sheet.addRule(name, rules[name], _extends({}, options, {
|
5879 | selector: addScope(name, rule.selector)
|
5880 | }));
|
5881 | }
|
5882 |
|
5883 | delete style[at];
|
5884 | }
|
5885 |
|
5886 | function handlePrefixedGlobalRule(rule, sheet) {
|
5887 | var options = rule.options,
|
5888 | style = rule.style;
|
5889 |
|
5890 | for (var prop in style) {
|
5891 | if (prop[0] !== '@' || prop.substr(0, at.length) !== at) continue;
|
5892 | var selector = addScope(prop.substr(at.length), rule.selector);
|
5893 | sheet.addRule(selector, style[prop], _extends({}, options, {
|
5894 | selector: selector
|
5895 | }));
|
5896 | delete style[prop];
|
5897 | }
|
5898 | }
|
5899 | |
5900 |
|
5901 |
|
5902 |
|
5903 |
|
5904 |
|
5905 |
|
5906 |
|
5907 | function jssGlobal() {
|
5908 | function onCreateRule(name, styles, options) {
|
5909 | if (!name) return null;
|
5910 |
|
5911 | if (name === at) {
|
5912 | return new GlobalContainerRule(name, styles, options);
|
5913 | }
|
5914 |
|
5915 | if (name[0] === '@' && name.substr(0, atPrefix.length) === atPrefix) {
|
5916 | return new GlobalPrefixedRule(name, styles, options);
|
5917 | }
|
5918 |
|
5919 | var parent = options.parent;
|
5920 |
|
5921 | if (parent) {
|
5922 | if (parent.type === 'global' || parent.options.parent && parent.options.parent.type === 'global') {
|
5923 | options.scoped = false;
|
5924 | }
|
5925 | }
|
5926 |
|
5927 | if (options.scoped === false) {
|
5928 | options.selector = name;
|
5929 | }
|
5930 |
|
5931 | return null;
|
5932 | }
|
5933 |
|
5934 | function onProcessRule(rule, sheet) {
|
5935 | if (rule.type !== 'style' || !sheet) return;
|
5936 | handleNestedGlobalContainerRule(rule, sheet);
|
5937 | handlePrefixedGlobalRule(rule, sheet);
|
5938 | }
|
5939 |
|
5940 | return {
|
5941 | onCreateRule: onCreateRule,
|
5942 | onProcessRule: onProcessRule
|
5943 | };
|
5944 | }
|
5945 |
|
5946 | var separatorRegExp$1 = /\s*,\s*/g;
|
5947 | var parentRegExp = /&/g;
|
5948 | var refRegExp$1 = /\$([\w-]+)/g;
|
5949 | |
5950 |
|
5951 |
|
5952 |
|
5953 |
|
5954 |
|
5955 |
|
5956 | function jssNested() {
|
5957 |
|
5958 | function getReplaceRef(container, sheet) {
|
5959 | return function (match, key) {
|
5960 | var rule = container.getRule(key) || sheet && sheet.getRule(key);
|
5961 |
|
5962 | if (rule) {
|
5963 | rule = rule;
|
5964 | return rule.selector;
|
5965 | }
|
5966 |
|
5967 | warning(false, "[JSS] Could not find the referenced rule \"" + key + "\" in \"" + (container.options.meta || container.toString()) + "\".") ;
|
5968 | return key;
|
5969 | };
|
5970 | }
|
5971 |
|
5972 | function replaceParentRefs(nestedProp, parentProp) {
|
5973 | var parentSelectors = parentProp.split(separatorRegExp$1);
|
5974 | var nestedSelectors = nestedProp.split(separatorRegExp$1);
|
5975 | var result = '';
|
5976 |
|
5977 | for (var i = 0; i < parentSelectors.length; i++) {
|
5978 | var parent = parentSelectors[i];
|
5979 |
|
5980 | for (var j = 0; j < nestedSelectors.length; j++) {
|
5981 | var nested = nestedSelectors[j];
|
5982 | if (result) result += ', ';
|
5983 |
|
5984 | result += nested.indexOf('&') !== -1 ? nested.replace(parentRegExp, parent) : parent + " " + nested;
|
5985 | }
|
5986 | }
|
5987 |
|
5988 | return result;
|
5989 | }
|
5990 |
|
5991 | function getOptions(rule, container, prevOptions) {
|
5992 |
|
5993 | if (prevOptions) return _extends({}, prevOptions, {
|
5994 | index: prevOptions.index + 1
|
5995 |
|
5996 | });
|
5997 | var nestingLevel = rule.options.nestingLevel;
|
5998 | nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
|
5999 |
|
6000 | var options = _extends({}, rule.options, {
|
6001 | nestingLevel: nestingLevel,
|
6002 | index: container.indexOf(rule) + 1
|
6003 |
|
6004 | });
|
6005 |
|
6006 | delete options.name;
|
6007 | return options;
|
6008 | }
|
6009 |
|
6010 | function onProcessStyle(style, rule, sheet) {
|
6011 | if (rule.type !== 'style') return style;
|
6012 | var styleRule = rule;
|
6013 | var container = styleRule.options.parent;
|
6014 | var options;
|
6015 | var replaceRef;
|
6016 |
|
6017 | for (var prop in style) {
|
6018 | var isNested = prop.indexOf('&') !== -1;
|
6019 | var isNestedConditional = prop[0] === '@';
|
6020 | if (!isNested && !isNestedConditional) continue;
|
6021 | options = getOptions(styleRule, container, options);
|
6022 |
|
6023 | if (isNested) {
|
6024 | var selector = replaceParentRefs(prop, styleRule.selector);
|
6025 |
|
6026 |
|
6027 | if (!replaceRef) replaceRef = getReplaceRef(container, sheet);
|
6028 |
|
6029 | selector = selector.replace(refRegExp$1, replaceRef);
|
6030 | container.addRule(selector, style[prop], _extends({}, options, {
|
6031 | selector: selector
|
6032 | }));
|
6033 | } else if (isNestedConditional) {
|
6034 |
|
6035 | container.addRule(prop, {}, options)
|
6036 |
|
6037 |
|
6038 |
|
6039 | .addRule(styleRule.key, style[prop], {
|
6040 | selector: styleRule.selector
|
6041 | });
|
6042 | }
|
6043 |
|
6044 | delete style[prop];
|
6045 | }
|
6046 |
|
6047 | return style;
|
6048 | }
|
6049 |
|
6050 | return {
|
6051 | onProcessStyle: onProcessStyle
|
6052 | };
|
6053 | }
|
6054 |
|
6055 |
|
6056 | var uppercasePattern = /[A-Z]/g;
|
6057 | var msPattern = /^ms-/;
|
6058 | var cache = {};
|
6059 |
|
6060 | function toHyphenLower(match) {
|
6061 | return '-' + match.toLowerCase()
|
6062 | }
|
6063 |
|
6064 | function hyphenateStyleName(name) {
|
6065 | if (cache.hasOwnProperty(name)) {
|
6066 | return cache[name]
|
6067 | }
|
6068 |
|
6069 | var hName = name.replace(uppercasePattern, toHyphenLower);
|
6070 | return (cache[name] = msPattern.test(hName) ? '-' + hName : hName)
|
6071 | }
|
6072 |
|
6073 | |
6074 |
|
6075 |
|
6076 |
|
6077 |
|
6078 |
|
6079 |
|
6080 | function convertCase(style) {
|
6081 | var converted = {};
|
6082 |
|
6083 | for (var prop in style) {
|
6084 | var key = prop.indexOf('--') === 0 ? prop : hyphenateStyleName(prop);
|
6085 | converted[key] = style[prop];
|
6086 | }
|
6087 |
|
6088 | if (style.fallbacks) {
|
6089 | if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);
|
6090 | }
|
6091 |
|
6092 | return converted;
|
6093 | }
|
6094 | |
6095 |
|
6096 |
|
6097 |
|
6098 |
|
6099 |
|
6100 |
|
6101 | function camelCase() {
|
6102 | function onProcessStyle(style) {
|
6103 | if (Array.isArray(style)) {
|
6104 |
|
6105 | for (var index = 0; index < style.length; index++) {
|
6106 | style[index] = convertCase(style[index]);
|
6107 | }
|
6108 |
|
6109 | return style;
|
6110 | }
|
6111 |
|
6112 | return convertCase(style);
|
6113 | }
|
6114 |
|
6115 | function onChangeValue(value, prop, rule) {
|
6116 | if (prop.indexOf('--') === 0) {
|
6117 | return value;
|
6118 | }
|
6119 |
|
6120 | var hyphenatedProp = hyphenateStyleName(prop);
|
6121 |
|
6122 | if (prop === hyphenatedProp) return value;
|
6123 | rule.prop(hyphenatedProp, value);
|
6124 |
|
6125 | return null;
|
6126 | }
|
6127 |
|
6128 | return {
|
6129 | onProcessStyle: onProcessStyle,
|
6130 | onChangeValue: onChangeValue
|
6131 | };
|
6132 | }
|
6133 |
|
6134 | var px = hasCSSTOMSupport && CSS ? CSS.px : 'px';
|
6135 | var ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';
|
6136 | var percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';
|
6137 | |
6138 |
|
6139 |
|
6140 |
|
6141 |
|
6142 |
|
6143 | var defaultUnits = {
|
6144 |
|
6145 | 'animation-delay': ms,
|
6146 | 'animation-duration': ms,
|
6147 |
|
6148 | 'background-position': px,
|
6149 | 'background-position-x': px,
|
6150 | 'background-position-y': px,
|
6151 | 'background-size': px,
|
6152 |
|
6153 | border: px,
|
6154 | 'border-bottom': px,
|
6155 | 'border-bottom-left-radius': px,
|
6156 | 'border-bottom-right-radius': px,
|
6157 | 'border-bottom-width': px,
|
6158 | 'border-left': px,
|
6159 | 'border-left-width': px,
|
6160 | 'border-radius': px,
|
6161 | 'border-right': px,
|
6162 | 'border-right-width': px,
|
6163 | 'border-top': px,
|
6164 | 'border-top-left-radius': px,
|
6165 | 'border-top-right-radius': px,
|
6166 | 'border-top-width': px,
|
6167 | 'border-width': px,
|
6168 | 'border-block': px,
|
6169 | 'border-block-end': px,
|
6170 | 'border-block-end-width': px,
|
6171 | 'border-block-start': px,
|
6172 | 'border-block-start-width': px,
|
6173 | 'border-block-width': px,
|
6174 | 'border-inline': px,
|
6175 | 'border-inline-end': px,
|
6176 | 'border-inline-end-width': px,
|
6177 | 'border-inline-start': px,
|
6178 | 'border-inline-start-width': px,
|
6179 | 'border-inline-width': px,
|
6180 | 'border-start-start-radius': px,
|
6181 | 'border-start-end-radius': px,
|
6182 | 'border-end-start-radius': px,
|
6183 | 'border-end-end-radius': px,
|
6184 |
|
6185 | margin: px,
|
6186 | 'margin-bottom': px,
|
6187 | 'margin-left': px,
|
6188 | 'margin-right': px,
|
6189 | 'margin-top': px,
|
6190 | 'margin-block': px,
|
6191 | 'margin-block-end': px,
|
6192 | 'margin-block-start': px,
|
6193 | 'margin-inline': px,
|
6194 | 'margin-inline-end': px,
|
6195 | 'margin-inline-start': px,
|
6196 |
|
6197 | padding: px,
|
6198 | 'padding-bottom': px,
|
6199 | 'padding-left': px,
|
6200 | 'padding-right': px,
|
6201 | 'padding-top': px,
|
6202 | 'padding-block': px,
|
6203 | 'padding-block-end': px,
|
6204 | 'padding-block-start': px,
|
6205 | 'padding-inline': px,
|
6206 | 'padding-inline-end': px,
|
6207 | 'padding-inline-start': px,
|
6208 |
|
6209 | 'mask-position-x': px,
|
6210 | 'mask-position-y': px,
|
6211 | 'mask-size': px,
|
6212 |
|
6213 | height: px,
|
6214 | width: px,
|
6215 | 'min-height': px,
|
6216 | 'max-height': px,
|
6217 | 'min-width': px,
|
6218 | 'max-width': px,
|
6219 |
|
6220 | bottom: px,
|
6221 | left: px,
|
6222 | top: px,
|
6223 | right: px,
|
6224 | inset: px,
|
6225 | 'inset-block': px,
|
6226 | 'inset-block-end': px,
|
6227 | 'inset-block-start': px,
|
6228 | 'inset-inline': px,
|
6229 | 'inset-inline-end': px,
|
6230 | 'inset-inline-start': px,
|
6231 |
|
6232 | 'box-shadow': px,
|
6233 | 'text-shadow': px,
|
6234 |
|
6235 | 'column-gap': px,
|
6236 | 'column-rule': px,
|
6237 | 'column-rule-width': px,
|
6238 | 'column-width': px,
|
6239 |
|
6240 | 'font-size': px,
|
6241 | 'font-size-delta': px,
|
6242 | 'letter-spacing': px,
|
6243 | 'text-decoration-thickness': px,
|
6244 | 'text-indent': px,
|
6245 | 'text-stroke': px,
|
6246 | 'text-stroke-width': px,
|
6247 | 'word-spacing': px,
|
6248 |
|
6249 | motion: px,
|
6250 | 'motion-offset': px,
|
6251 |
|
6252 | outline: px,
|
6253 | 'outline-offset': px,
|
6254 | 'outline-width': px,
|
6255 |
|
6256 | perspective: px,
|
6257 | 'perspective-origin-x': percent,
|
6258 | 'perspective-origin-y': percent,
|
6259 |
|
6260 | 'transform-origin': percent,
|
6261 | 'transform-origin-x': percent,
|
6262 | 'transform-origin-y': percent,
|
6263 | 'transform-origin-z': percent,
|
6264 |
|
6265 | 'transition-delay': ms,
|
6266 | 'transition-duration': ms,
|
6267 |
|
6268 | 'vertical-align': px,
|
6269 | 'flex-basis': px,
|
6270 |
|
6271 | 'shape-margin': px,
|
6272 | size: px,
|
6273 | gap: px,
|
6274 |
|
6275 | grid: px,
|
6276 | 'grid-gap': px,
|
6277 | 'row-gap': px,
|
6278 | 'grid-row-gap': px,
|
6279 | 'grid-column-gap': px,
|
6280 | 'grid-template-rows': px,
|
6281 | 'grid-template-columns': px,
|
6282 | 'grid-auto-rows': px,
|
6283 | 'grid-auto-columns': px,
|
6284 |
|
6285 |
|
6286 | 'box-shadow-x': px,
|
6287 | 'box-shadow-y': px,
|
6288 | 'box-shadow-blur': px,
|
6289 | 'box-shadow-spread': px,
|
6290 | 'font-line-height': px,
|
6291 | 'text-shadow-x': px,
|
6292 | 'text-shadow-y': px,
|
6293 | 'text-shadow-blur': px
|
6294 | };
|
6295 |
|
6296 | |
6297 |
|
6298 |
|
6299 | function addCamelCasedVersion(obj) {
|
6300 | var regExp = /(-[a-z])/g;
|
6301 |
|
6302 | var replace = function replace(str) {
|
6303 | return str[1].toUpperCase();
|
6304 | };
|
6305 |
|
6306 | var newObj = {};
|
6307 |
|
6308 | for (var _key in obj) {
|
6309 | newObj[_key] = obj[_key];
|
6310 | newObj[_key.replace(regExp, replace)] = obj[_key];
|
6311 | }
|
6312 |
|
6313 | return newObj;
|
6314 | }
|
6315 |
|
6316 | var units = addCamelCasedVersion(defaultUnits);
|
6317 | |
6318 |
|
6319 |
|
6320 |
|
6321 | function iterate(prop, value, options) {
|
6322 | if (value == null) return value;
|
6323 |
|
6324 | if (Array.isArray(value)) {
|
6325 | for (var i = 0; i < value.length; i++) {
|
6326 | value[i] = iterate(prop, value[i], options);
|
6327 | }
|
6328 | } else if (typeof value === 'object') {
|
6329 | if (prop === 'fallbacks') {
|
6330 | for (var innerProp in value) {
|
6331 | value[innerProp] = iterate(innerProp, value[innerProp], options);
|
6332 | }
|
6333 | } else {
|
6334 | for (var _innerProp in value) {
|
6335 | value[_innerProp] = iterate(prop + "-" + _innerProp, value[_innerProp], options);
|
6336 | }
|
6337 | }
|
6338 | } else if (typeof value === 'number' && !Number.isNaN(value)) {
|
6339 | var unit = options[prop] || units[prop];
|
6340 |
|
6341 | if (unit && !(value === 0 && unit === px)) {
|
6342 | return typeof unit === 'function' ? unit(value).toString() : "" + value + unit;
|
6343 | }
|
6344 |
|
6345 | return value.toString();
|
6346 | }
|
6347 |
|
6348 | return value;
|
6349 | }
|
6350 | |
6351 |
|
6352 |
|
6353 |
|
6354 |
|
6355 | function defaultUnit(options) {
|
6356 | if (options === void 0) {
|
6357 | options = {};
|
6358 | }
|
6359 |
|
6360 | var camelCasedOptions = addCamelCasedVersion(options);
|
6361 |
|
6362 | function onProcessStyle(style, rule) {
|
6363 | if (rule.type !== 'style') return style;
|
6364 |
|
6365 | for (var prop in style) {
|
6366 | style[prop] = iterate(prop, style[prop], camelCasedOptions);
|
6367 | }
|
6368 |
|
6369 | return style;
|
6370 | }
|
6371 |
|
6372 | function onChangeValue(value, prop) {
|
6373 | return iterate(prop, value, camelCasedOptions);
|
6374 | }
|
6375 |
|
6376 | return {
|
6377 | onProcessStyle: onProcessStyle,
|
6378 | onChangeValue: onChangeValue
|
6379 | };
|
6380 | }
|
6381 |
|
6382 |
|
6383 | var js = '';
|
6384 | var css = '';
|
6385 | var vendor = '';
|
6386 | var browser = '';
|
6387 | var isTouch = isBrowser && 'ontouchstart' in document.documentElement;
|
6388 |
|
6389 | if (isBrowser) {
|
6390 |
|
6391 |
|
6392 | var jsCssMap = {
|
6393 | Moz: '-moz-',
|
6394 | ms: '-ms-',
|
6395 | O: '-o-',
|
6396 | Webkit: '-webkit-'
|
6397 | };
|
6398 |
|
6399 | var _document$createEleme = document.createElement('p'),
|
6400 | style$1 = _document$createEleme.style;
|
6401 |
|
6402 | var testProp = 'Transform';
|
6403 |
|
6404 | for (var key in jsCssMap) {
|
6405 | if (key + testProp in style$1) {
|
6406 | js = key;
|
6407 | css = jsCssMap[key];
|
6408 | break;
|
6409 | }
|
6410 | }
|
6411 |
|
6412 |
|
6413 | if (js === 'Webkit' && 'msHyphens' in style$1) {
|
6414 | js = 'ms';
|
6415 | css = jsCssMap.ms;
|
6416 | browser = 'edge';
|
6417 | }
|
6418 |
|
6419 |
|
6420 | if (js === 'Webkit' && '-apple-trailing-word' in style$1) {
|
6421 | vendor = 'apple';
|
6422 | }
|
6423 | }
|
6424 | |
6425 |
|
6426 |
|
6427 |
|
6428 |
|
6429 |
|
6430 |
|
6431 |
|
6432 | var prefix = {
|
6433 | js: js,
|
6434 | css: css,
|
6435 | vendor: vendor,
|
6436 | browser: browser,
|
6437 | isTouch: isTouch
|
6438 | };
|
6439 |
|
6440 | |
6441 |
|
6442 |
|
6443 |
|
6444 |
|
6445 |
|
6446 |
|
6447 |
|
6448 | function supportedKeyframes(key) {
|
6449 |
|
6450 | if (key[1] === '-') return key;
|
6451 |
|
6452 |
|
6453 | if (prefix.js === 'ms') return key;
|
6454 | return "@" + prefix.css + "keyframes" + key.substr(10);
|
6455 | }
|
6456 |
|
6457 |
|
6458 |
|
6459 | var appearence = {
|
6460 | noPrefill: ['appearance'],
|
6461 | supportedProperty: function supportedProperty(prop) {
|
6462 | if (prop !== 'appearance') return false;
|
6463 | if (prefix.js === 'ms') return "-webkit-" + prop;
|
6464 | return prefix.css + prop;
|
6465 | }
|
6466 | };
|
6467 |
|
6468 |
|
6469 |
|
6470 | var colorAdjust = {
|
6471 | noPrefill: ['color-adjust'],
|
6472 | supportedProperty: function supportedProperty(prop) {
|
6473 | if (prop !== 'color-adjust') return false;
|
6474 | if (prefix.js === 'Webkit') return prefix.css + "print-" + prop;
|
6475 | return prop;
|
6476 | }
|
6477 | };
|
6478 |
|
6479 | var regExp = /[-\s]+(.)?/g;
|
6480 | |
6481 |
|
6482 |
|
6483 |
|
6484 |
|
6485 |
|
6486 |
|
6487 |
|
6488 |
|
6489 | function toUpper(match, c) {
|
6490 | return c ? c.toUpperCase() : '';
|
6491 | }
|
6492 | |
6493 |
|
6494 |
|
6495 |
|
6496 |
|
6497 |
|
6498 |
|
6499 |
|
6500 |
|
6501 | function camelize(str) {
|
6502 | return str.replace(regExp, toUpper);
|
6503 | }
|
6504 |
|
6505 | |
6506 |
|
6507 |
|
6508 |
|
6509 |
|
6510 |
|
6511 |
|
6512 |
|
6513 | function pascalize(str) {
|
6514 | return camelize("-" + str);
|
6515 | }
|
6516 |
|
6517 |
|
6518 |
|
6519 |
|
6520 | var mask = {
|
6521 | noPrefill: ['mask'],
|
6522 | supportedProperty: function supportedProperty(prop, style) {
|
6523 | if (!/^mask/.test(prop)) return false;
|
6524 |
|
6525 | if (prefix.js === 'Webkit') {
|
6526 | var longhand = 'mask-image';
|
6527 |
|
6528 | if (camelize(longhand) in style) {
|
6529 | return prop;
|
6530 | }
|
6531 |
|
6532 | if (prefix.js + pascalize(longhand) in style) {
|
6533 | return prefix.css + prop;
|
6534 | }
|
6535 | }
|
6536 |
|
6537 | return prop;
|
6538 | }
|
6539 | };
|
6540 |
|
6541 |
|
6542 |
|
6543 | var textOrientation = {
|
6544 | noPrefill: ['text-orientation'],
|
6545 | supportedProperty: function supportedProperty(prop) {
|
6546 | if (prop !== 'text-orientation') return false;
|
6547 |
|
6548 | if (prefix.vendor === 'apple' && !prefix.isTouch) {
|
6549 | return prefix.css + prop;
|
6550 | }
|
6551 |
|
6552 | return prop;
|
6553 | }
|
6554 | };
|
6555 |
|
6556 |
|
6557 |
|
6558 | var transform$1 = {
|
6559 | noPrefill: ['transform'],
|
6560 | supportedProperty: function supportedProperty(prop, style, options) {
|
6561 | if (prop !== 'transform') return false;
|
6562 |
|
6563 | if (options.transform) {
|
6564 | return prop;
|
6565 | }
|
6566 |
|
6567 | return prefix.css + prop;
|
6568 | }
|
6569 | };
|
6570 |
|
6571 |
|
6572 |
|
6573 | var transition = {
|
6574 | noPrefill: ['transition'],
|
6575 | supportedProperty: function supportedProperty(prop, style, options) {
|
6576 | if (prop !== 'transition') return false;
|
6577 |
|
6578 | if (options.transition) {
|
6579 | return prop;
|
6580 | }
|
6581 |
|
6582 | return prefix.css + prop;
|
6583 | }
|
6584 | };
|
6585 |
|
6586 |
|
6587 |
|
6588 | var writingMode = {
|
6589 | noPrefill: ['writing-mode'],
|
6590 | supportedProperty: function supportedProperty(prop) {
|
6591 | if (prop !== 'writing-mode') return false;
|
6592 |
|
6593 | if (prefix.js === 'Webkit' || prefix.js === 'ms' && prefix.browser !== 'edge') {
|
6594 | return prefix.css + prop;
|
6595 | }
|
6596 |
|
6597 | return prop;
|
6598 | }
|
6599 | };
|
6600 |
|
6601 |
|
6602 |
|
6603 | var userSelect = {
|
6604 | noPrefill: ['user-select'],
|
6605 | supportedProperty: function supportedProperty(prop) {
|
6606 | if (prop !== 'user-select') return false;
|
6607 |
|
6608 | if (prefix.js === 'Moz' || prefix.js === 'ms' || prefix.vendor === 'apple') {
|
6609 | return prefix.css + prop;
|
6610 | }
|
6611 |
|
6612 | return prop;
|
6613 | }
|
6614 | };
|
6615 |
|
6616 |
|
6617 |
|
6618 |
|
6619 |
|
6620 | var breakPropsOld = {
|
6621 | supportedProperty: function supportedProperty(prop, style) {
|
6622 | if (!/^break-/.test(prop)) return false;
|
6623 |
|
6624 | if (prefix.js === 'Webkit') {
|
6625 | var jsProp = "WebkitColumn" + pascalize(prop);
|
6626 | return jsProp in style ? prefix.css + "column-" + prop : false;
|
6627 | }
|
6628 |
|
6629 | if (prefix.js === 'Moz') {
|
6630 | var _jsProp = "page" + pascalize(prop);
|
6631 |
|
6632 | return _jsProp in style ? "page-" + prop : false;
|
6633 | }
|
6634 |
|
6635 | return false;
|
6636 | }
|
6637 | };
|
6638 |
|
6639 |
|
6640 |
|
6641 | var inlineLogicalOld = {
|
6642 | supportedProperty: function supportedProperty(prop, style) {
|
6643 | if (!/^(border|margin|padding)-inline/.test(prop)) return false;
|
6644 | if (prefix.js === 'Moz') return prop;
|
6645 | var newProp = prop.replace('-inline', '');
|
6646 | return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
|
6647 | }
|
6648 | };
|
6649 |
|
6650 |
|
6651 |
|
6652 |
|
6653 | var unprefixed = {
|
6654 | supportedProperty: function supportedProperty(prop, style) {
|
6655 | return camelize(prop) in style ? prop : false;
|
6656 | }
|
6657 | };
|
6658 |
|
6659 | var prefixed = {
|
6660 | supportedProperty: function supportedProperty(prop, style) {
|
6661 | var pascalized = pascalize(prop);
|
6662 |
|
6663 | if (prop[0] === '-') return prop;
|
6664 |
|
6665 | if (prop[0] === '-' && prop[1] === '-') return prop;
|
6666 | if (prefix.js + pascalized in style) return prefix.css + prop;
|
6667 |
|
6668 | if (prefix.js !== 'Webkit' && "Webkit" + pascalized in style) return "-webkit-" + prop;
|
6669 | return false;
|
6670 | }
|
6671 | };
|
6672 |
|
6673 |
|
6674 |
|
6675 | var scrollSnap = {
|
6676 | supportedProperty: function supportedProperty(prop) {
|
6677 | if (prop.substring(0, 11) !== 'scroll-snap') return false;
|
6678 |
|
6679 | if (prefix.js === 'ms') {
|
6680 | return "" + prefix.css + prop;
|
6681 | }
|
6682 |
|
6683 | return prop;
|
6684 | }
|
6685 | };
|
6686 |
|
6687 |
|
6688 |
|
6689 | var overscrollBehavior = {
|
6690 | supportedProperty: function supportedProperty(prop) {
|
6691 | if (prop !== 'overscroll-behavior') return false;
|
6692 |
|
6693 | if (prefix.js === 'ms') {
|
6694 | return prefix.css + "scroll-chaining";
|
6695 | }
|
6696 |
|
6697 | return prop;
|
6698 | }
|
6699 | };
|
6700 |
|
6701 | var propMap = {
|
6702 | 'flex-grow': 'flex-positive',
|
6703 | 'flex-shrink': 'flex-negative',
|
6704 | 'flex-basis': 'flex-preferred-size',
|
6705 | 'justify-content': 'flex-pack',
|
6706 | order: 'flex-order',
|
6707 | 'align-items': 'flex-align',
|
6708 | 'align-content': 'flex-line-pack'
|
6709 |
|
6710 | };
|
6711 |
|
6712 | var flex2012 = {
|
6713 | supportedProperty: function supportedProperty(prop, style) {
|
6714 | var newProp = propMap[prop];
|
6715 | if (!newProp) return false;
|
6716 | return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
|
6717 | }
|
6718 | };
|
6719 |
|
6720 | var propMap$1 = {
|
6721 | flex: 'box-flex',
|
6722 | 'flex-grow': 'box-flex',
|
6723 | 'flex-direction': ['box-orient', 'box-direction'],
|
6724 | order: 'box-ordinal-group',
|
6725 | 'align-items': 'box-align',
|
6726 | 'flex-flow': ['box-orient', 'box-direction'],
|
6727 | 'justify-content': 'box-pack'
|
6728 | };
|
6729 | var propKeys = Object.keys(propMap$1);
|
6730 |
|
6731 | var prefixCss = function prefixCss(p) {
|
6732 | return prefix.css + p;
|
6733 | };
|
6734 |
|
6735 |
|
6736 | var flex2009 = {
|
6737 | supportedProperty: function supportedProperty(prop, style, _ref) {
|
6738 | var multiple = _ref.multiple;
|
6739 |
|
6740 | if (propKeys.indexOf(prop) > -1) {
|
6741 | var newProp = propMap$1[prop];
|
6742 |
|
6743 | if (!Array.isArray(newProp)) {
|
6744 | return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
|
6745 | }
|
6746 |
|
6747 | if (!multiple) return false;
|
6748 |
|
6749 | for (var i = 0; i < newProp.length; i++) {
|
6750 | if (!(prefix.js + pascalize(newProp[0]) in style)) {
|
6751 | return false;
|
6752 | }
|
6753 | }
|
6754 |
|
6755 | return newProp.map(prefixCss);
|
6756 | }
|
6757 |
|
6758 | return false;
|
6759 | }
|
6760 | };
|
6761 |
|
6762 |
|
6763 |
|
6764 |
|
6765 |
|
6766 |
|
6767 |
|
6768 |
|
6769 |
|
6770 |
|
6771 |
|
6772 |
|
6773 |
|
6774 |
|
6775 |
|
6776 |
|
6777 | var plugins$1 = [appearence, colorAdjust, mask, textOrientation, transform$1, transition, writingMode, userSelect, breakPropsOld, inlineLogicalOld, unprefixed, prefixed, scrollSnap, overscrollBehavior, flex2012, flex2009];
|
6778 | var propertyDetectors = plugins$1.filter(function (p) {
|
6779 | return p.supportedProperty;
|
6780 | }).map(function (p) {
|
6781 | return p.supportedProperty;
|
6782 | });
|
6783 | var noPrefill = plugins$1.filter(function (p) {
|
6784 | return p.noPrefill;
|
6785 | }).reduce(function (a, p) {
|
6786 | a.push.apply(a, _toConsumableArray(p.noPrefill));
|
6787 | return a;
|
6788 | }, []);
|
6789 |
|
6790 | var el;
|
6791 | var cache$1 = {};
|
6792 |
|
6793 | if (isBrowser) {
|
6794 | el = document.createElement('p');
|
6795 |
|
6796 |
|
6797 |
|
6798 |
|
6799 |
|
6800 |
|
6801 |
|
6802 | var computed = window.getComputedStyle(document.documentElement, '');
|
6803 |
|
6804 | for (var key$1 in computed) {
|
6805 |
|
6806 | if (!isNaN(key$1)) cache$1[computed[key$1]] = computed[key$1];
|
6807 | }
|
6808 |
|
6809 |
|
6810 |
|
6811 | noPrefill.forEach(function (x) {
|
6812 | return delete cache$1[x];
|
6813 | });
|
6814 | }
|
6815 | |
6816 |
|
6817 |
|
6818 |
|
6819 |
|
6820 |
|
6821 |
|
6822 |
|
6823 |
|
6824 |
|
6825 |
|
6826 | function supportedProperty(prop, options) {
|
6827 | if (options === void 0) {
|
6828 | options = {};
|
6829 | }
|
6830 |
|
6831 |
|
6832 | if (!el) return prop;
|
6833 |
|
6834 | if ( cache$1[prop] != null) {
|
6835 | return cache$1[prop];
|
6836 | }
|
6837 |
|
6838 |
|
6839 | if (prop === 'transition' || prop === 'transform') {
|
6840 | options[prop] = prop in el.style;
|
6841 | }
|
6842 |
|
6843 |
|
6844 | for (var i = 0; i < propertyDetectors.length; i++) {
|
6845 | cache$1[prop] = propertyDetectors[i](prop, el.style, options);
|
6846 |
|
6847 | if (cache$1[prop]) break;
|
6848 | }
|
6849 |
|
6850 |
|
6851 |
|
6852 | try {
|
6853 | el.style[prop] = '';
|
6854 | } catch (err) {
|
6855 | return false;
|
6856 | }
|
6857 |
|
6858 | return cache$1[prop];
|
6859 | }
|
6860 |
|
6861 | var cache$1$1 = {};
|
6862 | var transitionProperties = {
|
6863 | transition: 1,
|
6864 | 'transition-property': 1,
|
6865 | '-webkit-transition': 1,
|
6866 | '-webkit-transition-property': 1
|
6867 | };
|
6868 | var transPropsRegExp = /(^\s*[\w-]+)|, (\s*[\w-]+)(?![^()]*\))/g;
|
6869 | var el$1;
|
6870 | |
6871 |
|
6872 |
|
6873 |
|
6874 |
|
6875 |
|
6876 |
|
6877 |
|
6878 |
|
6879 |
|
6880 | function prefixTransitionCallback(match, p1, p2) {
|
6881 | if (p1 === 'var') return 'var';
|
6882 | if (p1 === 'all') return 'all';
|
6883 | if (p2 === 'all') return ', all';
|
6884 | var prefixedValue = p1 ? supportedProperty(p1) : ", " + supportedProperty(p2);
|
6885 | if (!prefixedValue) return p1 || p2;
|
6886 | return prefixedValue;
|
6887 | }
|
6888 |
|
6889 | if (isBrowser) el$1 = document.createElement('p');
|
6890 | |
6891 |
|
6892 |
|
6893 |
|
6894 |
|
6895 |
|
6896 |
|
6897 |
|
6898 |
|
6899 | function supportedValue(property, value) {
|
6900 |
|
6901 | var prefixedValue = value;
|
6902 | if (!el$1 || property === 'content') return value;
|
6903 |
|
6904 |
|
6905 |
|
6906 | if (typeof prefixedValue !== 'string' || !isNaN(parseInt(prefixedValue, 10))) {
|
6907 | return prefixedValue;
|
6908 | }
|
6909 |
|
6910 |
|
6911 | var cacheKey = property + prefixedValue;
|
6912 |
|
6913 | if ( cache$1$1[cacheKey] != null) {
|
6914 | return cache$1$1[cacheKey];
|
6915 | }
|
6916 |
|
6917 |
|
6918 | try {
|
6919 |
|
6920 | el$1.style[property] = prefixedValue;
|
6921 | } catch (err) {
|
6922 |
|
6923 | cache$1$1[cacheKey] = false;
|
6924 | return false;
|
6925 | }
|
6926 |
|
6927 |
|
6928 | if (transitionProperties[property]) {
|
6929 | prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback);
|
6930 | } else if (el$1.style[property] === '') {
|
6931 |
|
6932 | prefixedValue = prefix.css + prefixedValue;
|
6933 |
|
6934 | if (prefixedValue === '-ms-flex') el$1.style[property] = '-ms-flexbox';
|
6935 |
|
6936 | el$1.style[property] = prefixedValue;
|
6937 |
|
6938 | if (el$1.style[property] === '') {
|
6939 | cache$1$1[cacheKey] = false;
|
6940 | return false;
|
6941 | }
|
6942 | }
|
6943 |
|
6944 |
|
6945 | el$1.style[property] = '';
|
6946 |
|
6947 | cache$1$1[cacheKey] = prefixedValue;
|
6948 | return cache$1$1[cacheKey];
|
6949 | }
|
6950 |
|
6951 | |
6952 |
|
6953 |
|
6954 |
|
6955 |
|
6956 |
|
6957 | function jssVendorPrefixer() {
|
6958 | function onProcessRule(rule) {
|
6959 | if (rule.type === 'keyframes') {
|
6960 | var atRule = rule;
|
6961 | atRule.at = supportedKeyframes(atRule.at);
|
6962 | }
|
6963 | }
|
6964 |
|
6965 | function prefixStyle(style) {
|
6966 | for (var prop in style) {
|
6967 | var value = style[prop];
|
6968 |
|
6969 | if (prop === 'fallbacks' && Array.isArray(value)) {
|
6970 | style[prop] = value.map(prefixStyle);
|
6971 | continue;
|
6972 | }
|
6973 |
|
6974 | var changeProp = false;
|
6975 | var supportedProp = supportedProperty(prop);
|
6976 | if (supportedProp && supportedProp !== prop) changeProp = true;
|
6977 | var changeValue = false;
|
6978 | var supportedValue$1 = supportedValue(supportedProp, toCssValue(value));
|
6979 | if (supportedValue$1 && supportedValue$1 !== value) changeValue = true;
|
6980 |
|
6981 | if (changeProp || changeValue) {
|
6982 | if (changeProp) delete style[prop];
|
6983 | style[supportedProp || prop] = supportedValue$1 || value;
|
6984 | }
|
6985 | }
|
6986 |
|
6987 | return style;
|
6988 | }
|
6989 |
|
6990 | function onProcessStyle(style, rule) {
|
6991 | if (rule.type !== 'style') return style;
|
6992 | return prefixStyle(style);
|
6993 | }
|
6994 |
|
6995 | function onChangeValue(value, prop) {
|
6996 | return supportedValue(prop, toCssValue(value)) || value;
|
6997 | }
|
6998 |
|
6999 | return {
|
7000 | onProcessRule: onProcessRule,
|
7001 | onProcessStyle: onProcessStyle,
|
7002 | onChangeValue: onChangeValue
|
7003 | };
|
7004 | }
|
7005 |
|
7006 | |
7007 |
|
7008 |
|
7009 | function jssPropsSort() {
|
7010 | var sort = function sort(prop0, prop1) {
|
7011 | if (prop0.length === prop1.length) {
|
7012 | return prop0 > prop1 ? 1 : -1;
|
7013 | }
|
7014 |
|
7015 | return prop0.length - prop1.length;
|
7016 | };
|
7017 |
|
7018 | return {
|
7019 | onProcessStyle: function onProcessStyle(style, rule) {
|
7020 | if (rule.type !== 'style') return style;
|
7021 | var newStyle = {};
|
7022 | var props = Object.keys(style).sort(sort);
|
7023 |
|
7024 | for (var i = 0; i < props.length; i++) {
|
7025 | newStyle[props[i]] = style[props[i]];
|
7026 | }
|
7027 |
|
7028 | return newStyle;
|
7029 | }
|
7030 | };
|
7031 | }
|
7032 |
|
7033 | function jssPreset() {
|
7034 | return {
|
7035 | plugins: [functionPlugin(), jssGlobal(), jssNested(), camelCase(), defaultUnit(),
|
7036 |
|
7037 |
|
7038 | typeof window === 'undefined' ? null : jssVendorPrefixer(), jssPropsSort()]
|
7039 | };
|
7040 | }
|
7041 |
|
7042 | function mergeClasses() {
|
7043 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
7044 | var baseClasses = options.baseClasses,
|
7045 | newClasses = options.newClasses,
|
7046 | Component = options.Component;
|
7047 |
|
7048 | if (!newClasses) {
|
7049 | return baseClasses;
|
7050 | }
|
7051 |
|
7052 | var nextClasses = _extends({}, baseClasses);
|
7053 |
|
7054 | {
|
7055 | if (typeof newClasses === 'string') {
|
7056 | 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'));
|
7057 | return baseClasses;
|
7058 | }
|
7059 | }
|
7060 |
|
7061 | Object.keys(newClasses).forEach(function (key) {
|
7062 | {
|
7063 | if (!baseClasses[key] && newClasses[key]) {
|
7064 | 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'));
|
7065 | }
|
7066 |
|
7067 | if (newClasses[key] && typeof newClasses[key] !== 'string') {
|
7068 | 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'));
|
7069 | }
|
7070 | }
|
7071 |
|
7072 | if (newClasses[key]) {
|
7073 | nextClasses[key] = "".concat(baseClasses[key], " ").concat(newClasses[key]);
|
7074 | }
|
7075 | });
|
7076 | return nextClasses;
|
7077 | }
|
7078 |
|
7079 |
|
7080 | var multiKeyStore = {
|
7081 | set: function set(cache, key1, key2, value) {
|
7082 | var subCache = cache.get(key1);
|
7083 |
|
7084 | if (!subCache) {
|
7085 | subCache = new Map();
|
7086 | cache.set(key1, subCache);
|
7087 | }
|
7088 |
|
7089 | subCache.set(key2, value);
|
7090 | },
|
7091 | get: function get(cache, key1, key2) {
|
7092 | var subCache = cache.get(key1);
|
7093 | return subCache ? subCache.get(key2) : undefined;
|
7094 | },
|
7095 | delete: function _delete(cache, key1, key2) {
|
7096 | var subCache = cache.get(key1);
|
7097 | subCache.delete(key2);
|
7098 | }
|
7099 | };
|
7100 |
|
7101 | var ThemeContext = React__default.createContext(null);
|
7102 |
|
7103 | {
|
7104 | ThemeContext.displayName = 'ThemeContext';
|
7105 | }
|
7106 |
|
7107 | function useTheme() {
|
7108 | var theme = React__default.useContext(ThemeContext);
|
7109 |
|
7110 | {
|
7111 |
|
7112 | React__default.useDebugValue(theme);
|
7113 | }
|
7114 |
|
7115 | return theme;
|
7116 | }
|
7117 |
|
7118 | var jss$1 = create(jssPreset());
|
7119 |
|
7120 |
|
7121 |
|
7122 |
|
7123 | var generateClassName = createGenerateClassName();
|
7124 |
|
7125 | var sheetsManager = new Map();
|
7126 | var defaultOptions = {
|
7127 | disableGeneration: false,
|
7128 | generateClassName: generateClassName,
|
7129 | jss: jss$1,
|
7130 | sheetsCache: null,
|
7131 | sheetsManager: sheetsManager,
|
7132 | sheetsRegistry: null
|
7133 | };
|
7134 | var StylesContext = React__default.createContext(defaultOptions);
|
7135 |
|
7136 | {
|
7137 | StylesContext.displayName = 'StylesContext';
|
7138 | }
|
7139 |
|
7140 | var injectFirstNode;
|
7141 | function StylesProvider(props) {
|
7142 | var children = props.children,
|
7143 | _props$injectFirst = props.injectFirst,
|
7144 | injectFirst = _props$injectFirst === void 0 ? false : _props$injectFirst,
|
7145 | _props$disableGenerat = props.disableGeneration,
|
7146 | disableGeneration = _props$disableGenerat === void 0 ? false : _props$disableGenerat,
|
7147 | localOptions = _objectWithoutProperties(props, ["children", "injectFirst", "disableGeneration"]);
|
7148 |
|
7149 | var outerOptions = React__default.useContext(StylesContext);
|
7150 |
|
7151 | var context = _extends({}, outerOptions, {
|
7152 | disableGeneration: disableGeneration
|
7153 | }, localOptions);
|
7154 |
|
7155 | {
|
7156 | if (typeof window === 'undefined' && !context.sheetsManager) {
|
7157 | console.error('Material-UI: You need to use the ServerStyleSheets API when rendering on the server.');
|
7158 | }
|
7159 | }
|
7160 |
|
7161 | {
|
7162 | if (context.jss.options.insertionPoint && injectFirst) {
|
7163 | console.error('Material-UI: You cannot use a custom insertionPoint and <StylesContext injectFirst> at the same time.');
|
7164 | }
|
7165 | }
|
7166 |
|
7167 | {
|
7168 | if (injectFirst && localOptions.jss) {
|
7169 | console.error('Material-UI: You cannot use the jss and injectFirst props at the same time.');
|
7170 | }
|
7171 | }
|
7172 |
|
7173 | if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') {
|
7174 | if (!injectFirstNode) {
|
7175 | var head = document.head;
|
7176 | injectFirstNode = document.createComment('mui-inject-first');
|
7177 | head.insertBefore(injectFirstNode, head.firstChild);
|
7178 | }
|
7179 |
|
7180 | context.jss = create({
|
7181 | plugins: jssPreset().plugins,
|
7182 | insertionPoint: injectFirstNode
|
7183 | });
|
7184 | }
|
7185 |
|
7186 | return React__default.createElement(StylesContext.Provider, {
|
7187 | value: context
|
7188 | }, children);
|
7189 | }
|
7190 | StylesProvider.propTypes = {
|
7191 | |
7192 |
|
7193 |
|
7194 | children: propTypes.node.isRequired,
|
7195 |
|
7196 | |
7197 |
|
7198 |
|
7199 |
|
7200 |
|
7201 |
|
7202 |
|
7203 | disableGeneration: propTypes.bool,
|
7204 |
|
7205 | |
7206 |
|
7207 |
|
7208 | generateClassName: propTypes.func,
|
7209 |
|
7210 | |
7211 |
|
7212 |
|
7213 |
|
7214 |
|
7215 | injectFirst: propTypes.bool,
|
7216 |
|
7217 | |
7218 |
|
7219 |
|
7220 | jss: propTypes.object,
|
7221 |
|
7222 | |
7223 |
|
7224 |
|
7225 | serverGenerateClassName: propTypes.func,
|
7226 |
|
7227 | |
7228 |
|
7229 |
|
7230 |
|
7231 |
|
7232 |
|
7233 |
|
7234 | sheetsCache: propTypes.object,
|
7235 |
|
7236 | |
7237 |
|
7238 |
|
7239 |
|
7240 |
|
7241 |
|
7242 |
|
7243 | sheetsManager: propTypes.object,
|
7244 |
|
7245 | |
7246 |
|
7247 |
|
7248 |
|
7249 |
|
7250 | sheetsRegistry: propTypes.object
|
7251 | } ;
|
7252 |
|
7253 | {
|
7254 | StylesProvider.propTypes = exactProp(StylesProvider.propTypes) ;
|
7255 | }
|
7256 |
|
7257 |
|
7258 |
|
7259 |
|
7260 |
|
7261 |
|
7262 |
|
7263 |
|
7264 |
|
7265 |
|
7266 | var indexCounter = -1e9;
|
7267 | function increment() {
|
7268 | indexCounter += 1;
|
7269 |
|
7270 | {
|
7271 | if (indexCounter >= 0) {
|
7272 | console.warn(['Material-UI: You might have a memory leak.', 'The indexCounter is not supposed to grow that much.'].join('\n'));
|
7273 | }
|
7274 | }
|
7275 |
|
7276 | return indexCounter;
|
7277 | }
|
7278 |
|
7279 |
|
7280 | var noopTheme = {};
|
7281 |
|
7282 | function getStylesCreator(stylesOrCreator) {
|
7283 | var themingEnabled = typeof stylesOrCreator === 'function';
|
7284 |
|
7285 | {
|
7286 | if (_typeof(stylesOrCreator) !== 'object' && !themingEnabled) {
|
7287 | 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'));
|
7288 | }
|
7289 | }
|
7290 |
|
7291 | return {
|
7292 | create: function create(theme, name) {
|
7293 | var styles;
|
7294 |
|
7295 | try {
|
7296 | styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
|
7297 | } catch (err) {
|
7298 | {
|
7299 | if (themingEnabled === true && theme === noopTheme) {
|
7300 |
|
7301 | 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'));
|
7302 | }
|
7303 | }
|
7304 |
|
7305 | throw err;
|
7306 | }
|
7307 |
|
7308 | if (!name || !theme.overrides || !theme.overrides[name]) {
|
7309 | return styles;
|
7310 | }
|
7311 |
|
7312 | var overrides = theme.overrides[name];
|
7313 |
|
7314 | var stylesWithOverrides = _extends({}, styles);
|
7315 |
|
7316 | Object.keys(overrides).forEach(function (key) {
|
7317 | {
|
7318 | if (!stylesWithOverrides[key]) {
|
7319 | 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'));
|
7320 | }
|
7321 | }
|
7322 |
|
7323 | stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);
|
7324 | });
|
7325 | return stylesWithOverrides;
|
7326 | },
|
7327 | options: {}
|
7328 | };
|
7329 | }
|
7330 |
|
7331 | function getClasses(_ref, classes, Component) {
|
7332 | var state = _ref.state,
|
7333 | stylesOptions = _ref.stylesOptions;
|
7334 |
|
7335 | if (stylesOptions.disableGeneration) {
|
7336 | return classes || {};
|
7337 | }
|
7338 |
|
7339 | if (!state.cacheClasses) {
|
7340 | state.cacheClasses = {
|
7341 |
|
7342 | value: null,
|
7343 |
|
7344 | lastProp: null,
|
7345 |
|
7346 | lastJSS: {}
|
7347 | };
|
7348 | }
|
7349 |
|
7350 |
|
7351 |
|
7352 | var generate = false;
|
7353 |
|
7354 | if (state.classes !== state.cacheClasses.lastJSS) {
|
7355 | state.cacheClasses.lastJSS = state.classes;
|
7356 | generate = true;
|
7357 | }
|
7358 |
|
7359 | if (classes !== state.cacheClasses.lastProp) {
|
7360 | state.cacheClasses.lastProp = classes;
|
7361 | generate = true;
|
7362 | }
|
7363 |
|
7364 | if (generate) {
|
7365 | state.cacheClasses.value = mergeClasses({
|
7366 | baseClasses: state.cacheClasses.lastJSS,
|
7367 | newClasses: classes,
|
7368 | Component: Component
|
7369 | });
|
7370 | }
|
7371 |
|
7372 | return state.cacheClasses.value;
|
7373 | }
|
7374 |
|
7375 | function attach(_ref2, props) {
|
7376 | var state = _ref2.state,
|
7377 | theme = _ref2.theme,
|
7378 | stylesOptions = _ref2.stylesOptions,
|
7379 | stylesCreator = _ref2.stylesCreator,
|
7380 | name = _ref2.name;
|
7381 |
|
7382 | if (stylesOptions.disableGeneration) {
|
7383 | return;
|
7384 | }
|
7385 |
|
7386 | var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
|
7387 |
|
7388 | if (!sheetManager) {
|
7389 | sheetManager = {
|
7390 | refs: 0,
|
7391 | staticSheet: null,
|
7392 | dynamicStyles: null
|
7393 | };
|
7394 | multiKeyStore.set(stylesOptions.sheetsManager, stylesCreator, theme, sheetManager);
|
7395 | }
|
7396 |
|
7397 | var options = _extends({}, stylesCreator.options, stylesOptions, {
|
7398 | theme: theme,
|
7399 | flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'
|
7400 | });
|
7401 |
|
7402 | options.generateId = options.serverGenerateClassName || options.generateClassName;
|
7403 | var sheetsRegistry = stylesOptions.sheetsRegistry;
|
7404 |
|
7405 | if (sheetManager.refs === 0) {
|
7406 | var staticSheet;
|
7407 |
|
7408 | if (stylesOptions.sheetsCache) {
|
7409 | staticSheet = multiKeyStore.get(stylesOptions.sheetsCache, stylesCreator, theme);
|
7410 | }
|
7411 |
|
7412 | var styles = stylesCreator.create(theme, name);
|
7413 |
|
7414 | if (!staticSheet) {
|
7415 | staticSheet = stylesOptions.jss.createStyleSheet(styles, _extends({
|
7416 | link: false
|
7417 | }, options));
|
7418 | staticSheet.attach();
|
7419 |
|
7420 | if (stylesOptions.sheetsCache) {
|
7421 | multiKeyStore.set(stylesOptions.sheetsCache, stylesCreator, theme, staticSheet);
|
7422 | }
|
7423 | }
|
7424 |
|
7425 | if (sheetsRegistry) {
|
7426 | sheetsRegistry.add(staticSheet);
|
7427 | }
|
7428 |
|
7429 | sheetManager.staticSheet = staticSheet;
|
7430 | sheetManager.dynamicStyles = getDynamicStyles(styles);
|
7431 | }
|
7432 |
|
7433 | if (sheetManager.dynamicStyles) {
|
7434 | var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({
|
7435 | link: true
|
7436 | }, options));
|
7437 | dynamicSheet.update(props);
|
7438 | dynamicSheet.attach();
|
7439 | state.dynamicSheet = dynamicSheet;
|
7440 | state.classes = mergeClasses({
|
7441 | baseClasses: sheetManager.staticSheet.classes,
|
7442 | newClasses: dynamicSheet.classes
|
7443 | });
|
7444 |
|
7445 | if (sheetsRegistry) {
|
7446 | sheetsRegistry.add(dynamicSheet);
|
7447 | }
|
7448 | } else {
|
7449 | state.classes = sheetManager.staticSheet.classes;
|
7450 | }
|
7451 |
|
7452 | sheetManager.refs += 1;
|
7453 | }
|
7454 |
|
7455 | function update(_ref3, props) {
|
7456 | var state = _ref3.state;
|
7457 |
|
7458 | if (state.dynamicSheet) {
|
7459 | state.dynamicSheet.update(props);
|
7460 | }
|
7461 | }
|
7462 |
|
7463 | function detach(_ref4) {
|
7464 | var state = _ref4.state,
|
7465 | theme = _ref4.theme,
|
7466 | stylesOptions = _ref4.stylesOptions,
|
7467 | stylesCreator = _ref4.stylesCreator;
|
7468 |
|
7469 | if (stylesOptions.disableGeneration) {
|
7470 | return;
|
7471 | }
|
7472 |
|
7473 | var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
|
7474 | sheetManager.refs -= 1;
|
7475 | var sheetsRegistry = stylesOptions.sheetsRegistry;
|
7476 |
|
7477 | if (sheetManager.refs === 0) {
|
7478 | multiKeyStore.delete(stylesOptions.sheetsManager, stylesCreator, theme);
|
7479 | stylesOptions.jss.removeStyleSheet(sheetManager.staticSheet);
|
7480 |
|
7481 | if (sheetsRegistry) {
|
7482 | sheetsRegistry.remove(sheetManager.staticSheet);
|
7483 | }
|
7484 | }
|
7485 |
|
7486 | if (state.dynamicSheet) {
|
7487 | stylesOptions.jss.removeStyleSheet(state.dynamicSheet);
|
7488 |
|
7489 | if (sheetsRegistry) {
|
7490 | sheetsRegistry.remove(state.dynamicSheet);
|
7491 | }
|
7492 | }
|
7493 | }
|
7494 |
|
7495 | function useSynchronousEffect(func, values) {
|
7496 | var key = React__default.useRef([]);
|
7497 | var output;
|
7498 |
|
7499 | var currentKey = React__default.useMemo(function () {
|
7500 | return {};
|
7501 | }, values);
|
7502 |
|
7503 |
|
7504 | if (key.current !== currentKey) {
|
7505 | key.current = currentKey;
|
7506 | output = func();
|
7507 | }
|
7508 |
|
7509 | React__default.useEffect(function () {
|
7510 | return function () {
|
7511 | if (output) {
|
7512 | output();
|
7513 | }
|
7514 | };
|
7515 | }, [currentKey]
|
7516 | );
|
7517 | }
|
7518 |
|
7519 | function makeStyles(stylesOrCreator) {
|
7520 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
7521 |
|
7522 | var name = options.name,
|
7523 | classNamePrefixOption = options.classNamePrefix,
|
7524 | Component = options.Component,
|
7525 | _options$defaultTheme = options.defaultTheme,
|
7526 | defaultTheme = _options$defaultTheme === void 0 ? noopTheme : _options$defaultTheme,
|
7527 | stylesOptions2 = _objectWithoutProperties(options, ["name", "classNamePrefix", "Component", "defaultTheme"]);
|
7528 |
|
7529 | var stylesCreator = getStylesCreator(stylesOrCreator);
|
7530 | var classNamePrefix = name || classNamePrefixOption || 'makeStyles';
|
7531 | stylesCreator.options = {
|
7532 | index: increment(),
|
7533 | name: name,
|
7534 | meta: classNamePrefix,
|
7535 | classNamePrefix: classNamePrefix
|
7536 | };
|
7537 |
|
7538 | var useStyles = function useStyles() {
|
7539 | var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
7540 | var theme = useTheme() || defaultTheme;
|
7541 |
|
7542 | var stylesOptions = _extends({}, React__default.useContext(StylesContext), stylesOptions2);
|
7543 |
|
7544 | var instance = React__default.useRef();
|
7545 | var shouldUpdate = React__default.useRef();
|
7546 | useSynchronousEffect(function () {
|
7547 | var current = {
|
7548 | name: name,
|
7549 | state: {},
|
7550 | stylesCreator: stylesCreator,
|
7551 | stylesOptions: stylesOptions,
|
7552 | theme: theme
|
7553 | };
|
7554 | attach(current, props);
|
7555 | shouldUpdate.current = false;
|
7556 | instance.current = current;
|
7557 | return function () {
|
7558 | detach(current);
|
7559 | };
|
7560 | }, [theme, stylesCreator]);
|
7561 | React__default.useEffect(function () {
|
7562 | if (shouldUpdate.current) {
|
7563 | update(instance.current, props);
|
7564 | }
|
7565 |
|
7566 | shouldUpdate.current = true;
|
7567 | });
|
7568 | var classes = getClasses(instance.current, props.classes, Component);
|
7569 |
|
7570 | {
|
7571 |
|
7572 | React__default.useDebugValue(classes);
|
7573 | }
|
7574 |
|
7575 | return classes;
|
7576 | };
|
7577 |
|
7578 | return useStyles;
|
7579 | }
|
7580 |
|
7581 | function _classCallCheck(instance, Constructor) {
|
7582 | if (!(instance instanceof Constructor)) {
|
7583 | throw new TypeError("Cannot call a class as a function");
|
7584 | }
|
7585 | }
|
7586 |
|
7587 | var ServerStyleSheets = function () {
|
7588 | function ServerStyleSheets() {
|
7589 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
7590 |
|
7591 | _classCallCheck(this, ServerStyleSheets);
|
7592 |
|
7593 | this.options = options;
|
7594 | }
|
7595 |
|
7596 | _createClass(ServerStyleSheets, [{
|
7597 | key: "collect",
|
7598 | value: function collect(children) {
|
7599 |
|
7600 | var sheetsManager = new Map();
|
7601 |
|
7602 | this.sheetsRegistry = new SheetsRegistry();
|
7603 |
|
7604 | var generateClassName = createGenerateClassName();
|
7605 | return React__default.createElement(StylesProvider, _extends({
|
7606 | sheetsManager: sheetsManager,
|
7607 | serverGenerateClassName: generateClassName,
|
7608 | sheetsRegistry: this.sheetsRegistry
|
7609 | }, this.options), children);
|
7610 | }
|
7611 | }, {
|
7612 | key: "toString",
|
7613 | value: function toString() {
|
7614 | return this.sheetsRegistry ? this.sheetsRegistry.toString() : '';
|
7615 | }
|
7616 | }, {
|
7617 | key: "getStyleElement",
|
7618 | value: function getStyleElement(props) {
|
7619 | return React__default.createElement('style', _extends({
|
7620 | id: 'jss-server-side',
|
7621 | key: 'jss-server-side',
|
7622 | dangerouslySetInnerHTML: {
|
7623 | __html: this.toString()
|
7624 | }
|
7625 | }, props));
|
7626 | }
|
7627 | }]);
|
7628 |
|
7629 | return ServerStyleSheets;
|
7630 | }();
|
7631 |
|
7632 | function toVal(mix) {
|
7633 | var k, y, str='';
|
7634 |
|
7635 | if (typeof mix === 'string' || typeof mix === 'number') {
|
7636 | str += mix;
|
7637 | } else if (typeof mix === 'object') {
|
7638 | if (Array.isArray(mix)) {
|
7639 | for (k=0; k < mix.length; k++) {
|
7640 | if (mix[k]) {
|
7641 | if (y = toVal(mix[k])) {
|
7642 | str && (str += ' ');
|
7643 | str += y;
|
7644 | }
|
7645 | }
|
7646 | }
|
7647 | } else {
|
7648 | for (k in mix) {
|
7649 | if (mix[k]) {
|
7650 | str && (str += ' ');
|
7651 | str += k;
|
7652 | }
|
7653 | }
|
7654 | }
|
7655 | }
|
7656 |
|
7657 | return str;
|
7658 | }
|
7659 |
|
7660 | function clsx () {
|
7661 | var i=0, tmp, x, str='';
|
7662 | while (i < arguments.length) {
|
7663 | if (tmp = arguments[i++]) {
|
7664 | if (x = toVal(tmp)) {
|
7665 | str && (str += ' ');
|
7666 | str += x;
|
7667 | }
|
7668 | }
|
7669 | }
|
7670 | return str;
|
7671 | }
|
7672 |
|
7673 | |
7674 |
|
7675 |
|
7676 |
|
7677 | var REACT_STATICS = {
|
7678 | childContextTypes: true,
|
7679 | contextType: true,
|
7680 | contextTypes: true,
|
7681 | defaultProps: true,
|
7682 | displayName: true,
|
7683 | getDefaultProps: true,
|
7684 | getDerivedStateFromError: true,
|
7685 | getDerivedStateFromProps: true,
|
7686 | mixins: true,
|
7687 | propTypes: true,
|
7688 | type: true
|
7689 | };
|
7690 | var KNOWN_STATICS = {
|
7691 | name: true,
|
7692 | length: true,
|
7693 | prototype: true,
|
7694 | caller: true,
|
7695 | callee: true,
|
7696 | arguments: true,
|
7697 | arity: true
|
7698 | };
|
7699 | var FORWARD_REF_STATICS = {
|
7700 | '$$typeof': true,
|
7701 | render: true,
|
7702 | defaultProps: true,
|
7703 | displayName: true,
|
7704 | propTypes: true
|
7705 | };
|
7706 | var MEMO_STATICS = {
|
7707 | '$$typeof': true,
|
7708 | compare: true,
|
7709 | defaultProps: true,
|
7710 | displayName: true,
|
7711 | propTypes: true,
|
7712 | type: true
|
7713 | };
|
7714 | var TYPE_STATICS = {};
|
7715 | TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
|
7716 | TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
|
7717 |
|
7718 | function getStatics(component) {
|
7719 |
|
7720 | if (reactIs.isMemo(component)) {
|
7721 | return MEMO_STATICS;
|
7722 | }
|
7723 |
|
7724 |
|
7725 | return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
|
7726 | }
|
7727 |
|
7728 | var defineProperty = Object.defineProperty;
|
7729 | var getOwnPropertyNames = Object.getOwnPropertyNames;
|
7730 | var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols;
|
7731 | var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
|
7732 | var getPrototypeOf = Object.getPrototypeOf;
|
7733 | var objectPrototype = Object.prototype;
|
7734 | function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
|
7735 | if (typeof sourceComponent !== 'string') {
|
7736 |
|
7737 | if (objectPrototype) {
|
7738 | var inheritedComponent = getPrototypeOf(sourceComponent);
|
7739 |
|
7740 | if (inheritedComponent && inheritedComponent !== objectPrototype) {
|
7741 | hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
|
7742 | }
|
7743 | }
|
7744 |
|
7745 | var keys = getOwnPropertyNames(sourceComponent);
|
7746 |
|
7747 | if (getOwnPropertySymbols$1) {
|
7748 | keys = keys.concat(getOwnPropertySymbols$1(sourceComponent));
|
7749 | }
|
7750 |
|
7751 | var targetStatics = getStatics(targetComponent);
|
7752 | var sourceStatics = getStatics(sourceComponent);
|
7753 |
|
7754 | for (var i = 0; i < keys.length; ++i) {
|
7755 | var key = keys[i];
|
7756 |
|
7757 | if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
|
7758 | var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
|
7759 |
|
7760 | try {
|
7761 |
|
7762 | defineProperty(targetComponent, key, descriptor);
|
7763 | } catch (e) {}
|
7764 | }
|
7765 | }
|
7766 | }
|
7767 |
|
7768 | return targetComponent;
|
7769 | }
|
7770 |
|
7771 | var hoistNonReactStatics_cjs = hoistNonReactStatics;
|
7772 |
|
7773 | function omit$1(input, fields) {
|
7774 | var output = {};
|
7775 | Object.keys(input).forEach(function (prop) {
|
7776 | if (fields.indexOf(prop) === -1) {
|
7777 | output[prop] = input[prop];
|
7778 | }
|
7779 | });
|
7780 | return output;
|
7781 | }
|
7782 |
|
7783 |
|
7784 |
|
7785 | function styled(Component) {
|
7786 | var componentCreator = function componentCreator(style) {
|
7787 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
7788 |
|
7789 | var name = options.name,
|
7790 | stylesOptions = _objectWithoutProperties(options, ["name"]);
|
7791 |
|
7792 | if ( Component === undefined) {
|
7793 | throw new Error(['You are calling styled(Component)(style) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
|
7794 | }
|
7795 |
|
7796 | var classNamePrefix = name;
|
7797 |
|
7798 | {
|
7799 | if (!name) {
|
7800 |
|
7801 | var displayName = getDisplayName(Component);
|
7802 |
|
7803 | if (displayName !== undefined) {
|
7804 | classNamePrefix = displayName;
|
7805 | }
|
7806 | }
|
7807 | }
|
7808 |
|
7809 | var stylesOrCreator = typeof style === 'function' ? function (theme) {
|
7810 | return {
|
7811 | root: function root(props) {
|
7812 | return style(_extends({
|
7813 | theme: theme
|
7814 | }, props));
|
7815 | }
|
7816 | };
|
7817 | } : {
|
7818 | root: style
|
7819 | };
|
7820 | var useStyles = makeStyles(stylesOrCreator, _extends({
|
7821 | Component: Component,
|
7822 | name: name || Component.displayName,
|
7823 | classNamePrefix: classNamePrefix
|
7824 | }, stylesOptions));
|
7825 | var filterProps;
|
7826 | var propTypes$1 = {};
|
7827 |
|
7828 | if (style.filterProps) {
|
7829 | filterProps = style.filterProps;
|
7830 | delete style.filterProps;
|
7831 | }
|
7832 |
|
7833 |
|
7834 |
|
7835 | if (style.propTypes) {
|
7836 | propTypes$1 = style.propTypes;
|
7837 | delete style.propTypes;
|
7838 | }
|
7839 |
|
7840 |
|
7841 |
|
7842 | var StyledComponent = React__default.forwardRef(function StyledComponent(props, ref) {
|
7843 | var children = props.children,
|
7844 | classNameProp = props.className,
|
7845 | clone = props.clone,
|
7846 | ComponentProp = props.component,
|
7847 | other = _objectWithoutProperties(props, ["children", "className", "clone", "component"]);
|
7848 |
|
7849 | var classes = useStyles(props);
|
7850 | var className = clsx(classes.root, classNameProp);
|
7851 | var spread = other;
|
7852 |
|
7853 | if (filterProps) {
|
7854 | spread = omit$1(spread, filterProps);
|
7855 | }
|
7856 |
|
7857 | if (clone) {
|
7858 | return React__default.cloneElement(children, _extends({
|
7859 | className: clsx(children.props.className, className)
|
7860 | }, spread));
|
7861 | }
|
7862 |
|
7863 | if (typeof children === 'function') {
|
7864 | return children(_extends({
|
7865 | className: className
|
7866 | }, spread));
|
7867 | }
|
7868 |
|
7869 | var FinalComponent = ComponentProp || Component;
|
7870 | return React__default.createElement(FinalComponent, _extends({
|
7871 | ref: ref,
|
7872 | className: className
|
7873 | }, spread), children);
|
7874 | });
|
7875 | StyledComponent.propTypes = _extends({
|
7876 | |
7877 |
|
7878 |
|
7879 | children: propTypes.oneOfType([propTypes.node, propTypes.func]),
|
7880 |
|
7881 | |
7882 |
|
7883 |
|
7884 | className: propTypes.string,
|
7885 |
|
7886 | |
7887 |
|
7888 |
|
7889 |
|
7890 |
|
7891 |
|
7892 | clone: chainPropTypes(propTypes.bool, function (props) {
|
7893 | if (props.clone && props.component) {
|
7894 | return new Error('You can not use the clone and component prop at the same time.');
|
7895 | }
|
7896 |
|
7897 | return null;
|
7898 | }),
|
7899 |
|
7900 | |
7901 |
|
7902 |
|
7903 |
|
7904 | component: propTypes
|
7905 |
|
7906 | .elementType
|
7907 | }, propTypes$1) ;
|
7908 |
|
7909 | {
|
7910 | StyledComponent.displayName = "Styled(".concat(classNamePrefix, ")");
|
7911 | }
|
7912 |
|
7913 | hoistNonReactStatics_cjs(StyledComponent, Component);
|
7914 | return StyledComponent;
|
7915 | };
|
7916 |
|
7917 | return componentCreator;
|
7918 | }
|
7919 |
|
7920 | function mergeOuterLocalTheme(outerTheme, localTheme) {
|
7921 | if (typeof localTheme === 'function') {
|
7922 | var mergedTheme = localTheme(outerTheme);
|
7923 |
|
7924 | {
|
7925 | if (!mergedTheme) {
|
7926 | console.error(['Material-UI: You should return an object from your theme function, i.e.', '<ThemeProvider theme={() => ({})} />'].join('\n'));
|
7927 | }
|
7928 | }
|
7929 |
|
7930 | return mergedTheme;
|
7931 | }
|
7932 |
|
7933 | return _extends({}, outerTheme, localTheme);
|
7934 | }
|
7935 | |
7936 |
|
7937 |
|
7938 |
|
7939 |
|
7940 |
|
7941 |
|
7942 | function ThemeProvider(props) {
|
7943 | var children = props.children,
|
7944 | localTheme = props.theme;
|
7945 | var outerTheme = useTheme();
|
7946 |
|
7947 | {
|
7948 | if (outerTheme === null && typeof localTheme === 'function') {
|
7949 | 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'));
|
7950 | }
|
7951 | }
|
7952 |
|
7953 | var theme = React__default.useMemo(function () {
|
7954 | var output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
|
7955 |
|
7956 | if (output != null) {
|
7957 | output[nested] = outerTheme !== null;
|
7958 | }
|
7959 |
|
7960 | return output;
|
7961 | }, [localTheme, outerTheme]);
|
7962 | return React__default.createElement(ThemeContext.Provider, {
|
7963 | value: theme
|
7964 | }, children);
|
7965 | }
|
7966 |
|
7967 | ThemeProvider.propTypes = {
|
7968 | |
7969 |
|
7970 |
|
7971 | children: propTypes.node.isRequired,
|
7972 |
|
7973 | |
7974 |
|
7975 |
|
7976 | theme: propTypes.oneOfType([propTypes.object, propTypes.func]).isRequired
|
7977 | } ;
|
7978 |
|
7979 | {
|
7980 | ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) ;
|
7981 | }
|
7982 |
|
7983 |
|
7984 |
|
7985 |
|
7986 | var withStyles = function withStyles(stylesOrCreator) {
|
7987 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
7988 | return function (Component) {
|
7989 | var defaultTheme = options.defaultTheme,
|
7990 | _options$withTheme = options.withTheme,
|
7991 | withTheme = _options$withTheme === void 0 ? false : _options$withTheme,
|
7992 | name = options.name,
|
7993 | stylesOptions = _objectWithoutProperties(options, ["defaultTheme", "withTheme", "name"]);
|
7994 |
|
7995 | {
|
7996 | if (Component === undefined) {
|
7997 | throw new Error(['You are calling withStyles(styles)(Component) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
|
7998 | }
|
7999 | }
|
8000 |
|
8001 | var classNamePrefix = name;
|
8002 |
|
8003 | {
|
8004 | if (!name) {
|
8005 |
|
8006 | var displayName = getDisplayName(Component);
|
8007 |
|
8008 | if (displayName !== undefined) {
|
8009 | classNamePrefix = displayName;
|
8010 | }
|
8011 | }
|
8012 | }
|
8013 |
|
8014 | var useStyles = makeStyles(stylesOrCreator, _extends({
|
8015 | defaultTheme: defaultTheme,
|
8016 | Component: Component,
|
8017 | name: name || Component.displayName,
|
8018 | classNamePrefix: classNamePrefix
|
8019 | }, stylesOptions));
|
8020 | var WithStyles = React__default.forwardRef(function WithStyles(props, ref) {
|
8021 | var classesProp = props.classes,
|
8022 | innerRef = props.innerRef,
|
8023 | other = _objectWithoutProperties(props, ["classes", "innerRef"]);
|
8024 |
|
8025 |
|
8026 |
|
8027 |
|
8028 | var classes = useStyles(_extends({}, Component.defaultProps, props));
|
8029 | var theme;
|
8030 | var more = other;
|
8031 |
|
8032 | if (typeof name === 'string' || withTheme) {
|
8033 |
|
8034 |
|
8035 | theme = useTheme() || defaultTheme;
|
8036 |
|
8037 | if (name) {
|
8038 | more = getThemeProps({
|
8039 | theme: theme,
|
8040 | name: name,
|
8041 | props: other
|
8042 | });
|
8043 | }
|
8044 |
|
8045 |
|
8046 |
|
8047 | if (withTheme && !more.theme) {
|
8048 | more.theme = theme;
|
8049 | }
|
8050 | }
|
8051 |
|
8052 | return React__default.createElement(Component, _extends({
|
8053 | ref: innerRef || ref,
|
8054 | classes: classes
|
8055 | }, more));
|
8056 | });
|
8057 | WithStyles.propTypes = {
|
8058 | |
8059 |
|
8060 |
|
8061 | classes: propTypes.object,
|
8062 |
|
8063 | |
8064 |
|
8065 |
|
8066 |
|
8067 | innerRef: chainPropTypes(propTypes.oneOfType([propTypes.func, propTypes.object]), function (props) {
|
8068 | if (props.innerRef == null) {
|
8069 | return null;
|
8070 | }
|
8071 |
|
8072 | return null;
|
8073 |
|
8074 |
|
8075 |
|
8076 | })
|
8077 | } ;
|
8078 |
|
8079 | {
|
8080 | WithStyles.displayName = "WithStyles(".concat(getDisplayName(Component), ")");
|
8081 | }
|
8082 |
|
8083 | hoistNonReactStatics_cjs(WithStyles, Component);
|
8084 |
|
8085 | {
|
8086 |
|
8087 | WithStyles.Naked = Component;
|
8088 | WithStyles.options = options;
|
8089 | WithStyles.useStyles = useStyles;
|
8090 | }
|
8091 |
|
8092 | return WithStyles;
|
8093 | };
|
8094 | };
|
8095 |
|
8096 | function withThemeCreator() {
|
8097 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
8098 | var defaultTheme = options.defaultTheme;
|
8099 |
|
8100 | var withTheme = function withTheme(Component) {
|
8101 | {
|
8102 | if (Component === undefined) {
|
8103 | throw new Error(['You are calling withTheme(Component) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
|
8104 | }
|
8105 | }
|
8106 |
|
8107 | var WithTheme = React__default.forwardRef(function WithTheme(props, ref) {
|
8108 | var innerRef = props.innerRef,
|
8109 | other = _objectWithoutProperties(props, ["innerRef"]);
|
8110 |
|
8111 | var theme = useTheme() || defaultTheme;
|
8112 | return React__default.createElement(Component, _extends({
|
8113 | theme: theme,
|
8114 | ref: innerRef || ref
|
8115 | }, other));
|
8116 | });
|
8117 | WithTheme.propTypes = {
|
8118 | |
8119 |
|
8120 |
|
8121 |
|
8122 | innerRef: chainPropTypes(propTypes.oneOfType([propTypes.func, propTypes.object]), function (props) {
|
8123 | if (props.innerRef == null) {
|
8124 | return null;
|
8125 | }
|
8126 |
|
8127 | 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.');
|
8128 | })
|
8129 | } ;
|
8130 |
|
8131 | {
|
8132 | WithTheme.displayName = "WithTheme(".concat(getDisplayName(Component), ")");
|
8133 | }
|
8134 |
|
8135 | hoistNonReactStatics_cjs(WithTheme, Component);
|
8136 |
|
8137 | {
|
8138 |
|
8139 | WithTheme.Naked = Component;
|
8140 | }
|
8141 |
|
8142 | return WithTheme;
|
8143 | };
|
8144 |
|
8145 | return withTheme;
|
8146 | }
|
8147 |
|
8148 |
|
8149 |
|
8150 | var withTheme = withThemeCreator();
|
8151 |
|
8152 |
|
8153 |
|
8154 | function createStyles$1(styles) {
|
8155 |
|
8156 |
|
8157 |
|
8158 |
|
8159 |
|
8160 |
|
8161 |
|
8162 |
|
8163 | return createStyles(styles);
|
8164 | }
|
8165 |
|
8166 | var defaultTheme = createTheme();
|
8167 |
|
8168 | function makeStyles$1(stylesOrCreator) {
|
8169 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
8170 | return makeStyles(stylesOrCreator, _extends({
|
8171 | defaultTheme: defaultTheme
|
8172 | }, options));
|
8173 | }
|
8174 |
|
8175 | function isUnitless(value) {
|
8176 | return String(parseFloat(value)).length === String(value).length;
|
8177 | }
|
8178 |
|
8179 |
|
8180 |
|
8181 | function getUnit(input) {
|
8182 | return String(input).match(/[\d.\-+]*\s*(.*)/)[1] || '';
|
8183 | }
|
8184 |
|
8185 | function toUnitless(length) {
|
8186 | return parseFloat(length);
|
8187 | }
|
8188 |
|
8189 |
|
8190 | function convertLength(baseFontSize) {
|
8191 | return function (length, toUnit) {
|
8192 | var fromUnit = getUnit(length);
|
8193 |
|
8194 | if (fromUnit === toUnit) {
|
8195 | return length;
|
8196 | }
|
8197 |
|
8198 |
|
8199 | var pxLength = toUnitless(length);
|
8200 |
|
8201 | if (fromUnit !== 'px') {
|
8202 | if (fromUnit === 'em') {
|
8203 | pxLength = toUnitless(length) * toUnitless(baseFontSize);
|
8204 | } else if (fromUnit === 'rem') {
|
8205 | pxLength = toUnitless(length) * toUnitless(baseFontSize);
|
8206 | return length;
|
8207 | }
|
8208 | }
|
8209 |
|
8210 |
|
8211 | var outputLength = pxLength;
|
8212 |
|
8213 | if (toUnit !== 'px') {
|
8214 | if (toUnit === 'em') {
|
8215 | outputLength = pxLength / toUnitless(baseFontSize);
|
8216 | } else if (toUnit === 'rem') {
|
8217 | outputLength = pxLength / toUnitless(baseFontSize);
|
8218 | } else {
|
8219 | return length;
|
8220 | }
|
8221 | }
|
8222 |
|
8223 | return parseFloat(outputLength.toFixed(5)) + toUnit;
|
8224 | };
|
8225 | }
|
8226 | function alignProperty(_ref) {
|
8227 | var size = _ref.size,
|
8228 | grid = _ref.grid;
|
8229 | var sizeBelow = size - size % grid;
|
8230 | var sizeAbove = sizeBelow + grid;
|
8231 | return size - sizeBelow < sizeAbove - size ? sizeBelow : sizeAbove;
|
8232 | }
|
8233 |
|
8234 |
|
8235 |
|
8236 | function fontGrid(_ref2) {
|
8237 | var lineHeight = _ref2.lineHeight,
|
8238 | pixels = _ref2.pixels,
|
8239 | htmlFontSize = _ref2.htmlFontSize;
|
8240 | return pixels / (lineHeight * htmlFontSize);
|
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 | function responsiveProperty(_ref3) {
|
8276 | var cssProperty = _ref3.cssProperty,
|
8277 | min = _ref3.min,
|
8278 | max = _ref3.max,
|
8279 | _ref3$unit = _ref3.unit,
|
8280 | unit = _ref3$unit === void 0 ? 'rem' : _ref3$unit,
|
8281 | _ref3$breakpoints = _ref3.breakpoints,
|
8282 | breakpoints = _ref3$breakpoints === void 0 ? [600, 960, 1280] : _ref3$breakpoints,
|
8283 | _ref3$transform = _ref3.transform,
|
8284 | transform = _ref3$transform === void 0 ? null : _ref3$transform;
|
8285 |
|
8286 | var output = _defineProperty({}, cssProperty, "".concat(min).concat(unit));
|
8287 |
|
8288 | var factor = (max - min) / breakpoints[breakpoints.length - 1];
|
8289 | breakpoints.forEach(function (breakpoint) {
|
8290 | var value = min + factor * breakpoint;
|
8291 |
|
8292 | if (transform !== null) {
|
8293 | value = transform(value);
|
8294 | }
|
8295 |
|
8296 | output["@media (min-width:".concat(breakpoint, "px)")] = _defineProperty({}, cssProperty, "".concat(Math.round(value * 10000) / 10000).concat(unit));
|
8297 | });
|
8298 | return output;
|
8299 | }
|
8300 |
|
8301 | function responsiveFontSizes(themeInput) {
|
8302 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
8303 | var _options$breakpoints = options.breakpoints,
|
8304 | breakpoints = _options$breakpoints === void 0 ? ['sm', 'md', 'lg'] : _options$breakpoints,
|
8305 | _options$disableAlign = options.disableAlign,
|
8306 | disableAlign = _options$disableAlign === void 0 ? false : _options$disableAlign,
|
8307 | _options$factor = options.factor,
|
8308 | factor = _options$factor === void 0 ? 2 : _options$factor,
|
8309 | _options$variants = options.variants,
|
8310 | variants = _options$variants === void 0 ? ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline'] : _options$variants;
|
8311 |
|
8312 | var theme = _extends({}, themeInput);
|
8313 |
|
8314 | theme.typography = _extends({}, theme.typography);
|
8315 | var typography = theme.typography;
|
8316 |
|
8317 |
|
8318 | var convert = convertLength(typography.htmlFontSize);
|
8319 | var breakpointValues = breakpoints.map(function (x) {
|
8320 | return theme.breakpoints.values[x];
|
8321 | });
|
8322 | variants.forEach(function (variant) {
|
8323 | var style = typography[variant];
|
8324 | var remFontSize = parseFloat(convert(style.fontSize, 'rem'));
|
8325 |
|
8326 | if (remFontSize <= 1) {
|
8327 | return;
|
8328 | }
|
8329 |
|
8330 | var maxFontSize = remFontSize;
|
8331 | var minFontSize = 1 + (maxFontSize - 1) / factor;
|
8332 | var lineHeight = style.lineHeight;
|
8333 |
|
8334 | if (!isUnitless(lineHeight) && !disableAlign) {
|
8335 | throw new Error( "Material-UI: Unsupported non-unitless line height with grid alignment.\nUse unitless line heights instead." );
|
8336 | }
|
8337 |
|
8338 | if (!isUnitless(lineHeight)) {
|
8339 |
|
8340 | lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
|
8341 | }
|
8342 |
|
8343 | var transform = null;
|
8344 |
|
8345 | if (!disableAlign) {
|
8346 | transform = function transform(value) {
|
8347 | return alignProperty({
|
8348 | size: value,
|
8349 | grid: fontGrid({
|
8350 | pixels: 4,
|
8351 | lineHeight: lineHeight,
|
8352 | htmlFontSize: typography.htmlFontSize
|
8353 | })
|
8354 | });
|
8355 | };
|
8356 | }
|
8357 |
|
8358 | typography[variant] = _extends({}, style, responsiveProperty({
|
8359 | cssProperty: 'fontSize',
|
8360 | min: minFontSize,
|
8361 | max: maxFontSize,
|
8362 | unit: 'rem',
|
8363 | breakpoints: breakpointValues,
|
8364 | transform: transform
|
8365 | }));
|
8366 | });
|
8367 | return theme;
|
8368 | }
|
8369 |
|
8370 | var styled$1 = function styled$1(Component) {
|
8371 | var componentCreator = styled(Component);
|
8372 | return function (style, options) {
|
8373 | return componentCreator(style, _extends({
|
8374 | defaultTheme: defaultTheme
|
8375 | }, options));
|
8376 | };
|
8377 | };
|
8378 |
|
8379 | function useTheme$1() {
|
8380 | var theme = useTheme() || defaultTheme;
|
8381 |
|
8382 | {
|
8383 |
|
8384 | React__default.useDebugValue(theme);
|
8385 | }
|
8386 |
|
8387 | return theme;
|
8388 | }
|
8389 |
|
8390 | function withStyles$1(stylesOrCreator, options) {
|
8391 | return withStyles(stylesOrCreator, _extends({
|
8392 | defaultTheme: defaultTheme
|
8393 | }, options));
|
8394 | }
|
8395 |
|
8396 | var withTheme$1 = withThemeCreator({
|
8397 | defaultTheme: defaultTheme
|
8398 | });
|
8399 |
|
8400 |
|
8401 |
|
8402 |
|
8403 |
|
8404 | function capitalize(string) {
|
8405 | if (typeof string !== 'string') {
|
8406 | throw new Error( "Material-UI: capitalize(string) expects a string argument." );
|
8407 | }
|
8408 |
|
8409 | return string.charAt(0).toUpperCase() + string.slice(1);
|
8410 | }
|
8411 |
|
8412 | |
8413 |
|
8414 |
|
8415 |
|
8416 |
|
8417 |
|
8418 |
|
8419 |
|
8420 |
|
8421 | function createChainedFunction() {
|
8422 | for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
|
8423 | funcs[_key] = arguments[_key];
|
8424 | }
|
8425 |
|
8426 | return funcs.reduce(function (acc, func) {
|
8427 | if (func == null) {
|
8428 | return acc;
|
8429 | }
|
8430 |
|
8431 | {
|
8432 | if (typeof func !== 'function') {
|
8433 | console.error('Material-UI: Invalid Argument Type, must only provide functions, undefined, or null.');
|
8434 | }
|
8435 | }
|
8436 |
|
8437 | return function chainedFunction() {
|
8438 | for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
8439 | args[_key2] = arguments[_key2];
|
8440 | }
|
8441 |
|
8442 | acc.apply(this, args);
|
8443 | func.apply(this, args);
|
8444 | };
|
8445 | }, function () {});
|
8446 | }
|
8447 |
|
8448 | var styles = function styles(theme) {
|
8449 | return {
|
8450 |
|
8451 | root: {
|
8452 | userSelect: 'none',
|
8453 | width: '1em',
|
8454 | height: '1em',
|
8455 | display: 'inline-block',
|
8456 | fill: 'currentColor',
|
8457 | flexShrink: 0,
|
8458 | fontSize: theme.typography.pxToRem(24),
|
8459 | transition: theme.transitions.create('fill', {
|
8460 | duration: theme.transitions.duration.shorter
|
8461 | })
|
8462 | },
|
8463 |
|
8464 |
|
8465 | colorPrimary: {
|
8466 | color: theme.palette.primary.main
|
8467 | },
|
8468 |
|
8469 |
|
8470 | colorSecondary: {
|
8471 | color: theme.palette.secondary.main
|
8472 | },
|
8473 |
|
8474 |
|
8475 | colorAction: {
|
8476 | color: theme.palette.action.active
|
8477 | },
|
8478 |
|
8479 |
|
8480 | colorError: {
|
8481 | color: theme.palette.error.main
|
8482 | },
|
8483 |
|
8484 |
|
8485 | colorDisabled: {
|
8486 | color: theme.palette.action.disabled
|
8487 | },
|
8488 |
|
8489 |
|
8490 | fontSizeInherit: {
|
8491 | fontSize: 'inherit'
|
8492 | },
|
8493 |
|
8494 |
|
8495 | fontSizeSmall: {
|
8496 | fontSize: theme.typography.pxToRem(20)
|
8497 | },
|
8498 |
|
8499 |
|
8500 | fontSizeLarge: {
|
8501 | fontSize: theme.typography.pxToRem(35)
|
8502 | }
|
8503 | };
|
8504 | };
|
8505 | var SvgIcon = React.forwardRef(function SvgIcon(props, ref) {
|
8506 | var children = props.children,
|
8507 | classes = props.classes,
|
8508 | className = props.className,
|
8509 | _props$color = props.color,
|
8510 | color = _props$color === void 0 ? 'inherit' : _props$color,
|
8511 | _props$component = props.component,
|
8512 | Component = _props$component === void 0 ? 'svg' : _props$component,
|
8513 | _props$fontSize = props.fontSize,
|
8514 | fontSize = _props$fontSize === void 0 ? 'medium' : _props$fontSize,
|
8515 | htmlColor = props.htmlColor,
|
8516 | titleAccess = props.titleAccess,
|
8517 | _props$viewBox = props.viewBox,
|
8518 | viewBox = _props$viewBox === void 0 ? '0 0 24 24' : _props$viewBox,
|
8519 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "fontSize", "htmlColor", "titleAccess", "viewBox"]);
|
8520 |
|
8521 | return React.createElement(Component, _extends({
|
8522 | className: clsx(classes.root, className, color !== 'inherit' && classes["color".concat(capitalize(color))], fontSize !== 'default' && fontSize !== 'medium' && classes["fontSize".concat(capitalize(fontSize))]),
|
8523 | focusable: "false",
|
8524 | viewBox: viewBox,
|
8525 | color: htmlColor,
|
8526 | "aria-hidden": titleAccess ? undefined : true,
|
8527 | role: titleAccess ? 'img' : undefined,
|
8528 | ref: ref
|
8529 | }, other), children, titleAccess ? React.createElement("title", null, titleAccess) : null);
|
8530 | });
|
8531 | SvgIcon.propTypes = {
|
8532 |
|
8533 |
|
8534 |
|
8535 |
|
8536 |
|
8537 | |
8538 |
|
8539 |
|
8540 | children: propTypes.node,
|
8541 |
|
8542 | |
8543 |
|
8544 |
|
8545 |
|
8546 | classes: propTypes.object,
|
8547 |
|
8548 | |
8549 |
|
8550 |
|
8551 | className: propTypes.string,
|
8552 |
|
8553 | |
8554 |
|
8555 |
|
8556 |
|
8557 | color: propTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']),
|
8558 |
|
8559 | |
8560 |
|
8561 |
|
8562 |
|
8563 | component: propTypes
|
8564 |
|
8565 | .elementType,
|
8566 |
|
8567 | |
8568 |
|
8569 |
|
8570 | fontSize: chainPropTypes(propTypes.oneOf(['default', 'inherit', 'large', 'medium', 'small']), function (props) {
|
8571 | var fontSize = props.fontSize;
|
8572 |
|
8573 | if (fontSize === 'default') {
|
8574 | throw new Error('Material-UI: `fontSize="default"` is deprecated. Use `fontSize="medium"` instead.');
|
8575 | }
|
8576 |
|
8577 | return null;
|
8578 | }),
|
8579 |
|
8580 | |
8581 |
|
8582 |
|
8583 | htmlColor: propTypes.string,
|
8584 |
|
8585 | |
8586 |
|
8587 |
|
8588 |
|
8589 |
|
8590 | shapeRendering: propTypes.string,
|
8591 |
|
8592 | |
8593 |
|
8594 |
|
8595 |
|
8596 | titleAccess: propTypes.string,
|
8597 |
|
8598 | |
8599 |
|
8600 |
|
8601 |
|
8602 |
|
8603 |
|
8604 |
|
8605 | viewBox: propTypes.string
|
8606 | } ;
|
8607 | SvgIcon.muiName = 'SvgIcon';
|
8608 | var SvgIcon$1 = withStyles$1(styles, {
|
8609 | name: 'MuiSvgIcon'
|
8610 | })(SvgIcon);
|
8611 |
|
8612 | |
8613 |
|
8614 |
|
8615 |
|
8616 | function createSvgIcon(path, displayName) {
|
8617 | var Component = function Component(props, ref) {
|
8618 | return React__default.createElement(SvgIcon$1, _extends({
|
8619 | ref: ref
|
8620 | }, props), path);
|
8621 | };
|
8622 |
|
8623 | {
|
8624 |
|
8625 |
|
8626 | Component.displayName = "".concat(displayName, "Icon");
|
8627 | }
|
8628 |
|
8629 | Component.muiName = SvgIcon$1.muiName;
|
8630 | return React__default.memo( React__default.forwardRef(Component));
|
8631 | }
|
8632 |
|
8633 |
|
8634 |
|
8635 | function debounce(func) {
|
8636 | var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 166;
|
8637 | var timeout;
|
8638 |
|
8639 | function debounced() {
|
8640 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
8641 | args[_key] = arguments[_key];
|
8642 | }
|
8643 |
|
8644 |
|
8645 | var that = this;
|
8646 |
|
8647 | var later = function later() {
|
8648 | func.apply(that, args);
|
8649 | };
|
8650 |
|
8651 | clearTimeout(timeout);
|
8652 | timeout = setTimeout(later, wait);
|
8653 | }
|
8654 |
|
8655 | debounced.clear = function () {
|
8656 | clearTimeout(timeout);
|
8657 | };
|
8658 |
|
8659 | return debounced;
|
8660 | }
|
8661 |
|
8662 | function deprecatedPropType(validator, reason) {
|
8663 |
|
8664 | return function (props, propName, componentName, location, propFullName) {
|
8665 | var componentNameSafe = componentName || '<<anonymous>>';
|
8666 | var propFullNameSafe = propFullName || propName;
|
8667 |
|
8668 | if (typeof props[propName] !== 'undefined') {
|
8669 | return new Error("The ".concat(location, " `").concat(propFullNameSafe, "` of ") + "`".concat(componentNameSafe, "` is deprecated. ").concat(reason));
|
8670 | }
|
8671 |
|
8672 | return null;
|
8673 | };
|
8674 | }
|
8675 |
|
8676 | function isMuiElement(element, muiNames) {
|
8677 | return React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
|
8678 | }
|
8679 |
|
8680 | function ownerDocument(node) {
|
8681 | return node && node.ownerDocument || document;
|
8682 | }
|
8683 |
|
8684 | function ownerWindow(node) {
|
8685 | var doc = ownerDocument(node);
|
8686 | return doc.defaultView || window;
|
8687 | }
|
8688 |
|
8689 | function requirePropFactory(componentNameInError) {
|
8690 |
|
8691 | var requireProp = function requireProp(requiredProp) {
|
8692 | return function (props, propName, componentName, location, propFullName) {
|
8693 | var propFullNameSafe = propFullName || propName;
|
8694 |
|
8695 | if (typeof props[propName] !== 'undefined' && !props[requiredProp]) {
|
8696 | return new Error("The prop `".concat(propFullNameSafe, "` of ") + "`".concat(componentNameInError, "` must be used on `").concat(requiredProp, "`."));
|
8697 | }
|
8698 |
|
8699 | return null;
|
8700 | };
|
8701 | };
|
8702 |
|
8703 | return requireProp;
|
8704 | }
|
8705 |
|
8706 |
|
8707 | function setRef(ref, value) {
|
8708 | if (typeof ref === 'function') {
|
8709 | ref(value);
|
8710 | } else if (ref) {
|
8711 | ref.current = value;
|
8712 | }
|
8713 | }
|
8714 |
|
8715 | function unsupportedProp(props, propName, componentName, location, propFullName) {
|
8716 |
|
8717 | var propFullNameSafe = propFullName || propName;
|
8718 |
|
8719 | if (typeof props[propName] !== 'undefined') {
|
8720 | return new Error("The prop `".concat(propFullNameSafe, "` is not supported. Please remove it."));
|
8721 | }
|
8722 |
|
8723 | return null;
|
8724 | }
|
8725 |
|
8726 | function useControlled(_ref) {
|
8727 | var controlled = _ref.controlled,
|
8728 | defaultProp = _ref.default,
|
8729 | name = _ref.name,
|
8730 | _ref$state = _ref.state,
|
8731 | state = _ref$state === void 0 ? 'value' : _ref$state;
|
8732 |
|
8733 | var _React$useRef = React.useRef(controlled !== undefined),
|
8734 | isControlled = _React$useRef.current;
|
8735 |
|
8736 | var _React$useState = React.useState(defaultProp),
|
8737 | valueState = _React$useState[0],
|
8738 | setValue = _React$useState[1];
|
8739 |
|
8740 | var value = isControlled ? controlled : valueState;
|
8741 |
|
8742 | {
|
8743 | React.useEffect(function () {
|
8744 | if (isControlled !== (controlled !== undefined)) {
|
8745 | console.error(["Material-UI: A component is changing the ".concat(isControlled ? '' : 'un', "controlled ").concat(state, " state of ").concat(name, " to be ").concat(isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', "Decide between using a controlled or uncontrolled ".concat(name, " ") + 'element for the lifetime of the component.', "The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
8746 | }
|
8747 | }, [controlled]);
|
8748 |
|
8749 | var _React$useRef2 = React.useRef(defaultProp),
|
8750 | defaultValue = _React$useRef2.current;
|
8751 |
|
8752 | React.useEffect(function () {
|
8753 | if (!isControlled && defaultValue !== defaultProp) {
|
8754 | console.error(["Material-UI: A component is changing the default ".concat(state, " state of an uncontrolled ").concat(name, " after being initialized. ") + "To suppress this warning opt to use a controlled ".concat(name, ".")].join('\n'));
|
8755 | }
|
8756 | }, [JSON.stringify(defaultProp)]);
|
8757 | }
|
8758 |
|
8759 | var setValueIfUncontrolled = React.useCallback(function (newValue) {
|
8760 | if (!isControlled) {
|
8761 | setValue(newValue);
|
8762 | }
|
8763 | }, []);
|
8764 | return [value, setValueIfUncontrolled];
|
8765 | }
|
8766 |
|
8767 | var useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
8768 | |
8769 |
|
8770 |
|
8771 |
|
8772 |
|
8773 |
|
8774 | function useEventCallback(fn) {
|
8775 | var ref = React.useRef(fn);
|
8776 | useEnhancedEffect(function () {
|
8777 | ref.current = fn;
|
8778 | });
|
8779 | return React.useCallback(function () {
|
8780 | return (ref.current).apply(void 0, arguments);
|
8781 | }, []);
|
8782 | }
|
8783 |
|
8784 | function useForkRef(refA, refB) {
|
8785 | |
8786 |
|
8787 |
|
8788 |
|
8789 |
|
8790 | return React.useMemo(function () {
|
8791 | if (refA == null && refB == null) {
|
8792 | return null;
|
8793 | }
|
8794 |
|
8795 | return function (refValue) {
|
8796 | setRef(refA, refValue);
|
8797 | setRef(refB, refValue);
|
8798 | };
|
8799 | }, [refA, refB]);
|
8800 | }
|
8801 |
|
8802 | |
8803 |
|
8804 |
|
8805 |
|
8806 | function useId(idOverride) {
|
8807 | var _React$useState = React.useState(idOverride),
|
8808 | defaultId = _React$useState[0],
|
8809 | setDefaultId = _React$useState[1];
|
8810 |
|
8811 | var id = idOverride || defaultId;
|
8812 | React.useEffect(function () {
|
8813 | if (defaultId == null) {
|
8814 |
|
8815 |
|
8816 |
|
8817 | setDefaultId("mui-".concat(Math.round(Math.random() * 1e5)));
|
8818 | }
|
8819 | }, [defaultId]);
|
8820 | return id;
|
8821 | }
|
8822 |
|
8823 | var hadKeyboardEvent = true;
|
8824 | var hadFocusVisibleRecently = false;
|
8825 | var hadFocusVisibleRecentlyTimeout = null;
|
8826 | var inputTypesWhitelist = {
|
8827 | text: true,
|
8828 | search: true,
|
8829 | url: true,
|
8830 | tel: true,
|
8831 | email: true,
|
8832 | password: true,
|
8833 | number: true,
|
8834 | date: true,
|
8835 | month: true,
|
8836 | week: true,
|
8837 | time: true,
|
8838 | datetime: true,
|
8839 | 'datetime-local': true
|
8840 | };
|
8841 | |
8842 |
|
8843 |
|
8844 |
|
8845 |
|
8846 |
|
8847 |
|
8848 |
|
8849 | function focusTriggersKeyboardModality(node) {
|
8850 | var type = node.type,
|
8851 | tagName = node.tagName;
|
8852 |
|
8853 | if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
|
8854 | return true;
|
8855 | }
|
8856 |
|
8857 | if (tagName === 'TEXTAREA' && !node.readOnly) {
|
8858 | return true;
|
8859 | }
|
8860 |
|
8861 | if (node.isContentEditable) {
|
8862 | return true;
|
8863 | }
|
8864 |
|
8865 | return false;
|
8866 | }
|
8867 | |
8868 |
|
8869 |
|
8870 |
|
8871 |
|
8872 |
|
8873 |
|
8874 |
|
8875 |
|
8876 | function handleKeyDown(event) {
|
8877 | if (event.metaKey || event.altKey || event.ctrlKey) {
|
8878 | return;
|
8879 | }
|
8880 |
|
8881 | hadKeyboardEvent = true;
|
8882 | }
|
8883 | |
8884 |
|
8885 |
|
8886 |
|
8887 |
|
8888 |
|
8889 |
|
8890 |
|
8891 |
|
8892 | function handlePointerDown() {
|
8893 | hadKeyboardEvent = false;
|
8894 | }
|
8895 |
|
8896 | function handleVisibilityChange() {
|
8897 | if (this.visibilityState === 'hidden') {
|
8898 |
|
8899 |
|
8900 |
|
8901 |
|
8902 | if (hadFocusVisibleRecently) {
|
8903 | hadKeyboardEvent = true;
|
8904 | }
|
8905 | }
|
8906 | }
|
8907 |
|
8908 | function prepare(doc) {
|
8909 | doc.addEventListener('keydown', handleKeyDown, true);
|
8910 | doc.addEventListener('mousedown', handlePointerDown, true);
|
8911 | doc.addEventListener('pointerdown', handlePointerDown, true);
|
8912 | doc.addEventListener('touchstart', handlePointerDown, true);
|
8913 | doc.addEventListener('visibilitychange', handleVisibilityChange, true);
|
8914 | }
|
8915 |
|
8916 | function isFocusVisible(event) {
|
8917 | var target = event.target;
|
8918 |
|
8919 | try {
|
8920 | return target.matches(':focus-visible');
|
8921 | } catch (error) {}
|
8922 |
|
8923 |
|
8924 |
|
8925 |
|
8926 |
|
8927 |
|
8928 |
|
8929 | return hadKeyboardEvent || focusTriggersKeyboardModality(target);
|
8930 | }
|
8931 | |
8932 |
|
8933 |
|
8934 |
|
8935 |
|
8936 | function handleBlurVisible() {
|
8937 |
|
8938 |
|
8939 |
|
8940 |
|
8941 | hadFocusVisibleRecently = true;
|
8942 | window.clearTimeout(hadFocusVisibleRecentlyTimeout);
|
8943 | hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
|
8944 | hadFocusVisibleRecently = false;
|
8945 | }, 100);
|
8946 | }
|
8947 |
|
8948 | function useIsFocusVisible() {
|
8949 | var ref = React.useCallback(function (instance) {
|
8950 | var node = ReactDOM.findDOMNode(instance);
|
8951 |
|
8952 | if (node != null) {
|
8953 | prepare(node.ownerDocument);
|
8954 | }
|
8955 | }, []);
|
8956 |
|
8957 | {
|
8958 |
|
8959 | React.useDebugValue(isFocusVisible);
|
8960 | }
|
8961 |
|
8962 | return {
|
8963 | isFocusVisible: isFocusVisible,
|
8964 | onBlurVisible: handleBlurVisible,
|
8965 | ref: ref
|
8966 | };
|
8967 | }
|
8968 |
|
8969 | function _toArray(arr) {
|
8970 | return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
|
8971 | }
|
8972 |
|
8973 | var config = {
|
8974 | disabled: false
|
8975 | };
|
8976 |
|
8977 | var timeoutsShape = propTypes.oneOfType([propTypes.number, propTypes.shape({
|
8978 | enter: propTypes.number,
|
8979 | exit: propTypes.number,
|
8980 | appear: propTypes.number
|
8981 | }).isRequired]) ;
|
8982 | var classNamesShape = propTypes.oneOfType([propTypes.string, propTypes.shape({
|
8983 | enter: propTypes.string,
|
8984 | exit: propTypes.string,
|
8985 | active: propTypes.string
|
8986 | }), propTypes.shape({
|
8987 | enter: propTypes.string,
|
8988 | enterDone: propTypes.string,
|
8989 | enterActive: propTypes.string,
|
8990 | exit: propTypes.string,
|
8991 | exitDone: propTypes.string,
|
8992 | exitActive: propTypes.string
|
8993 | })]) ;
|
8994 |
|
8995 | var TransitionGroupContext = React__default.createContext(null);
|
8996 |
|
8997 | var UNMOUNTED = 'unmounted';
|
8998 | var EXITED = 'exited';
|
8999 | var ENTERING = 'entering';
|
9000 | var ENTERED = 'entered';
|
9001 | var EXITING = 'exiting';
|
9002 | |
9003 |
|
9004 |
|
9005 |
|
9006 |
|
9007 |
|
9008 |
|
9009 |
|
9010 |
|
9011 |
|
9012 |
|
9013 |
|
9014 |
|
9015 |
|
9016 |
|
9017 |
|
9018 |
|
9019 |
|
9020 |
|
9021 |
|
9022 |
|
9023 |
|
9024 |
|
9025 |
|
9026 |
|
9027 |
|
9028 |
|
9029 |
|
9030 |
|
9031 |
|
9032 |
|
9033 |
|
9034 |
|
9035 |
|
9036 |
|
9037 |
|
9038 |
|
9039 |
|
9040 |
|
9041 |
|
9042 |
|
9043 |
|
9044 |
|
9045 |
|
9046 |
|
9047 |
|
9048 |
|
9049 |
|
9050 |
|
9051 |
|
9052 |
|
9053 |
|
9054 |
|
9055 |
|
9056 |
|
9057 |
|
9058 |
|
9059 |
|
9060 |
|
9061 |
|
9062 |
|
9063 |
|
9064 |
|
9065 |
|
9066 |
|
9067 |
|
9068 |
|
9069 |
|
9070 |
|
9071 |
|
9072 |
|
9073 |
|
9074 |
|
9075 |
|
9076 |
|
9077 |
|
9078 |
|
9079 |
|
9080 |
|
9081 |
|
9082 |
|
9083 |
|
9084 |
|
9085 |
|
9086 |
|
9087 |
|
9088 |
|
9089 |
|
9090 |
|
9091 |
|
9092 |
|
9093 |
|
9094 | var Transition = function (_React$Component) {
|
9095 | _inheritsLoose(Transition, _React$Component);
|
9096 |
|
9097 | function Transition(props, context) {
|
9098 | var _this;
|
9099 |
|
9100 | _this = _React$Component.call(this, props, context) || this;
|
9101 | var parentGroup = context;
|
9102 |
|
9103 | var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
|
9104 | var initialStatus;
|
9105 | _this.appearStatus = null;
|
9106 |
|
9107 | if (props.in) {
|
9108 | if (appear) {
|
9109 | initialStatus = EXITED;
|
9110 | _this.appearStatus = ENTERING;
|
9111 | } else {
|
9112 | initialStatus = ENTERED;
|
9113 | }
|
9114 | } else {
|
9115 | if (props.unmountOnExit || props.mountOnEnter) {
|
9116 | initialStatus = UNMOUNTED;
|
9117 | } else {
|
9118 | initialStatus = EXITED;
|
9119 | }
|
9120 | }
|
9121 |
|
9122 | _this.state = {
|
9123 | status: initialStatus
|
9124 | };
|
9125 | _this.nextCallback = null;
|
9126 | return _this;
|
9127 | }
|
9128 |
|
9129 | Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
|
9130 | var nextIn = _ref.in;
|
9131 |
|
9132 | if (nextIn && prevState.status === UNMOUNTED) {
|
9133 | return {
|
9134 | status: EXITED
|
9135 | };
|
9136 | }
|
9137 |
|
9138 | return null;
|
9139 | }
|
9140 |
|
9141 |
|
9142 |
|
9143 |
|
9144 |
|
9145 |
|
9146 |
|
9147 |
|
9148 |
|
9149 |
|
9150 |
|
9151 |
|
9152 |
|
9153 |
|
9154 |
|
9155 | ;
|
9156 |
|
9157 | var _proto = Transition.prototype;
|
9158 |
|
9159 | _proto.componentDidMount = function componentDidMount() {
|
9160 | this.updateStatus(true, this.appearStatus);
|
9161 | };
|
9162 |
|
9163 | _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
|
9164 | var nextStatus = null;
|
9165 |
|
9166 | if (prevProps !== this.props) {
|
9167 | var status = this.state.status;
|
9168 |
|
9169 | if (this.props.in) {
|
9170 | if (status !== ENTERING && status !== ENTERED) {
|
9171 | nextStatus = ENTERING;
|
9172 | }
|
9173 | } else {
|
9174 | if (status === ENTERING || status === ENTERED) {
|
9175 | nextStatus = EXITING;
|
9176 | }
|
9177 | }
|
9178 | }
|
9179 |
|
9180 | this.updateStatus(false, nextStatus);
|
9181 | };
|
9182 |
|
9183 | _proto.componentWillUnmount = function componentWillUnmount() {
|
9184 | this.cancelNextCallback();
|
9185 | };
|
9186 |
|
9187 | _proto.getTimeouts = function getTimeouts() {
|
9188 | var timeout = this.props.timeout;
|
9189 | var exit, enter, appear;
|
9190 | exit = enter = appear = timeout;
|
9191 |
|
9192 | if (timeout != null && typeof timeout !== 'number') {
|
9193 | exit = timeout.exit;
|
9194 | enter = timeout.enter;
|
9195 |
|
9196 | appear = timeout.appear !== undefined ? timeout.appear : enter;
|
9197 | }
|
9198 |
|
9199 | return {
|
9200 | exit: exit,
|
9201 | enter: enter,
|
9202 | appear: appear
|
9203 | };
|
9204 | };
|
9205 |
|
9206 | _proto.updateStatus = function updateStatus(mounting, nextStatus) {
|
9207 | if (mounting === void 0) {
|
9208 | mounting = false;
|
9209 | }
|
9210 |
|
9211 | if (nextStatus !== null) {
|
9212 |
|
9213 | this.cancelNextCallback();
|
9214 |
|
9215 | if (nextStatus === ENTERING) {
|
9216 | this.performEnter(mounting);
|
9217 | } else {
|
9218 | this.performExit();
|
9219 | }
|
9220 | } else if (this.props.unmountOnExit && this.state.status === EXITED) {
|
9221 | this.setState({
|
9222 | status: UNMOUNTED
|
9223 | });
|
9224 | }
|
9225 | };
|
9226 |
|
9227 | _proto.performEnter = function performEnter(mounting) {
|
9228 | var _this2 = this;
|
9229 |
|
9230 | var enter = this.props.enter;
|
9231 | var appearing = this.context ? this.context.isMounting : mounting;
|
9232 |
|
9233 | var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM__default.findDOMNode(this), appearing],
|
9234 | maybeNode = _ref2[0],
|
9235 | maybeAppearing = _ref2[1];
|
9236 |
|
9237 | var timeouts = this.getTimeouts();
|
9238 | var enterTimeout = appearing ? timeouts.appear : timeouts.enter;
|
9239 |
|
9240 |
|
9241 | if (!mounting && !enter || config.disabled) {
|
9242 | this.safeSetState({
|
9243 | status: ENTERED
|
9244 | }, function () {
|
9245 | _this2.props.onEntered(maybeNode);
|
9246 | });
|
9247 | return;
|
9248 | }
|
9249 |
|
9250 | this.props.onEnter(maybeNode, maybeAppearing);
|
9251 | this.safeSetState({
|
9252 | status: ENTERING
|
9253 | }, function () {
|
9254 | _this2.props.onEntering(maybeNode, maybeAppearing);
|
9255 |
|
9256 | _this2.onTransitionEnd(enterTimeout, function () {
|
9257 | _this2.safeSetState({
|
9258 | status: ENTERED
|
9259 | }, function () {
|
9260 | _this2.props.onEntered(maybeNode, maybeAppearing);
|
9261 | });
|
9262 | });
|
9263 | });
|
9264 | };
|
9265 |
|
9266 | _proto.performExit = function performExit() {
|
9267 | var _this3 = this;
|
9268 |
|
9269 | var exit = this.props.exit;
|
9270 | var timeouts = this.getTimeouts();
|
9271 | var maybeNode = this.props.nodeRef ? undefined : ReactDOM__default.findDOMNode(this);
|
9272 |
|
9273 | if (!exit || config.disabled) {
|
9274 | this.safeSetState({
|
9275 | status: EXITED
|
9276 | }, function () {
|
9277 | _this3.props.onExited(maybeNode);
|
9278 | });
|
9279 | return;
|
9280 | }
|
9281 |
|
9282 | this.props.onExit(maybeNode);
|
9283 | this.safeSetState({
|
9284 | status: EXITING
|
9285 | }, function () {
|
9286 | _this3.props.onExiting(maybeNode);
|
9287 |
|
9288 | _this3.onTransitionEnd(timeouts.exit, function () {
|
9289 | _this3.safeSetState({
|
9290 | status: EXITED
|
9291 | }, function () {
|
9292 | _this3.props.onExited(maybeNode);
|
9293 | });
|
9294 | });
|
9295 | });
|
9296 | };
|
9297 |
|
9298 | _proto.cancelNextCallback = function cancelNextCallback() {
|
9299 | if (this.nextCallback !== null) {
|
9300 | this.nextCallback.cancel();
|
9301 | this.nextCallback = null;
|
9302 | }
|
9303 | };
|
9304 |
|
9305 | _proto.safeSetState = function safeSetState(nextState, callback) {
|
9306 |
|
9307 |
|
9308 |
|
9309 | callback = this.setNextCallback(callback);
|
9310 | this.setState(nextState, callback);
|
9311 | };
|
9312 |
|
9313 | _proto.setNextCallback = function setNextCallback(callback) {
|
9314 | var _this4 = this;
|
9315 |
|
9316 | var active = true;
|
9317 |
|
9318 | this.nextCallback = function (event) {
|
9319 | if (active) {
|
9320 | active = false;
|
9321 | _this4.nextCallback = null;
|
9322 | callback(event);
|
9323 | }
|
9324 | };
|
9325 |
|
9326 | this.nextCallback.cancel = function () {
|
9327 | active = false;
|
9328 | };
|
9329 |
|
9330 | return this.nextCallback;
|
9331 | };
|
9332 |
|
9333 | _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
|
9334 | this.setNextCallback(handler);
|
9335 | var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default.findDOMNode(this);
|
9336 | var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
|
9337 |
|
9338 | if (!node || doesNotHaveTimeoutOrListener) {
|
9339 | setTimeout(this.nextCallback, 0);
|
9340 | return;
|
9341 | }
|
9342 |
|
9343 | if (this.props.addEndListener) {
|
9344 | var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
|
9345 | maybeNode = _ref3[0],
|
9346 | maybeNextCallback = _ref3[1];
|
9347 |
|
9348 | this.props.addEndListener(maybeNode, maybeNextCallback);
|
9349 | }
|
9350 |
|
9351 | if (timeout != null) {
|
9352 | setTimeout(this.nextCallback, timeout);
|
9353 | }
|
9354 | };
|
9355 |
|
9356 | _proto.render = function render() {
|
9357 | var status = this.state.status;
|
9358 |
|
9359 | if (status === UNMOUNTED) {
|
9360 | return null;
|
9361 | }
|
9362 |
|
9363 | var _this$props = this.props,
|
9364 | children = _this$props.children,
|
9365 | _in = _this$props.in,
|
9366 | _mountOnEnter = _this$props.mountOnEnter,
|
9367 | _unmountOnExit = _this$props.unmountOnExit,
|
9368 | _appear = _this$props.appear,
|
9369 | _enter = _this$props.enter,
|
9370 | _exit = _this$props.exit,
|
9371 | _timeout = _this$props.timeout,
|
9372 | _addEndListener = _this$props.addEndListener,
|
9373 | _onEnter = _this$props.onEnter,
|
9374 | _onEntering = _this$props.onEntering,
|
9375 | _onEntered = _this$props.onEntered,
|
9376 | _onExit = _this$props.onExit,
|
9377 | _onExiting = _this$props.onExiting,
|
9378 | _onExited = _this$props.onExited,
|
9379 | _nodeRef = _this$props.nodeRef,
|
9380 | childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
|
9381 |
|
9382 | return (
|
9383 |
|
9384 |
|
9385 | React__default.createElement(TransitionGroupContext.Provider, {
|
9386 | value: null
|
9387 | }, typeof children === 'function' ? children(status, childProps) : React__default.cloneElement(React__default.Children.only(children), childProps))
|
9388 | );
|
9389 | };
|
9390 |
|
9391 | return Transition;
|
9392 | }(React__default.Component);
|
9393 |
|
9394 | Transition.contextType = TransitionGroupContext;
|
9395 | Transition.propTypes = {
|
9396 | |
9397 |
|
9398 |
|
9399 |
|
9400 |
|
9401 |
|
9402 |
|
9403 |
|
9404 |
|
9405 |
|
9406 |
|
9407 | nodeRef: propTypes.shape({
|
9408 | current: typeof Element === 'undefined' ? propTypes.any : propTypes.instanceOf(Element)
|
9409 | }),
|
9410 |
|
9411 | |
9412 |
|
9413 |
|
9414 |
|
9415 |
|
9416 |
|
9417 |
|
9418 |
|
9419 |
|
9420 |
|
9421 |
|
9422 |
|
9423 |
|
9424 |
|
9425 | children: propTypes.oneOfType([propTypes.func.isRequired, propTypes.element.isRequired]).isRequired,
|
9426 |
|
9427 | |
9428 |
|
9429 |
|
9430 | in: propTypes.bool,
|
9431 |
|
9432 | |
9433 |
|
9434 |
|
9435 |
|
9436 |
|
9437 |
|
9438 | mountOnEnter: propTypes.bool,
|
9439 |
|
9440 | |
9441 |
|
9442 |
|
9443 |
|
9444 | unmountOnExit: propTypes.bool,
|
9445 |
|
9446 | |
9447 |
|
9448 |
|
9449 |
|
9450 |
|
9451 |
|
9452 |
|
9453 |
|
9454 |
|
9455 |
|
9456 |
|
9457 | appear: propTypes.bool,
|
9458 |
|
9459 | |
9460 |
|
9461 |
|
9462 | enter: propTypes.bool,
|
9463 |
|
9464 | |
9465 |
|
9466 |
|
9467 | exit: propTypes.bool,
|
9468 |
|
9469 | |
9470 |
|
9471 |
|
9472 |
|
9473 |
|
9474 |
|
9475 |
|
9476 |
|
9477 |
|
9478 |
|
9479 |
|
9480 |
|
9481 |
|
9482 |
|
9483 |
|
9484 |
|
9485 |
|
9486 |
|
9487 |
|
9488 |
|
9489 |
|
9490 |
|
9491 |
|
9492 |
|
9493 |
|
9494 |
|
9495 | timeout: function timeout(props) {
|
9496 | var pt = timeoutsShape;
|
9497 | if (!props.addEndListener) pt = pt.isRequired;
|
9498 |
|
9499 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
9500 | args[_key - 1] = arguments[_key];
|
9501 | }
|
9502 |
|
9503 | return pt.apply(void 0, [props].concat(args));
|
9504 | },
|
9505 |
|
9506 | |
9507 |
|
9508 |
|
9509 |
|
9510 |
|
9511 |
|
9512 |
|
9513 |
|
9514 |
|
9515 |
|
9516 |
|
9517 |
|
9518 |
|
9519 |
|
9520 | addEndListener: propTypes.func,
|
9521 |
|
9522 | |
9523 |
|
9524 |
|
9525 |
|
9526 |
|
9527 |
|
9528 |
|
9529 |
|
9530 | onEnter: propTypes.func,
|
9531 |
|
9532 | |
9533 |
|
9534 |
|
9535 |
|
9536 |
|
9537 |
|
9538 |
|
9539 |
|
9540 | onEntering: propTypes.func,
|
9541 |
|
9542 | |
9543 |
|
9544 |
|
9545 |
|
9546 |
|
9547 |
|
9548 |
|
9549 |
|
9550 | onEntered: propTypes.func,
|
9551 |
|
9552 | |
9553 |
|
9554 |
|
9555 |
|
9556 |
|
9557 |
|
9558 |
|
9559 | onExit: propTypes.func,
|
9560 |
|
9561 | |
9562 |
|
9563 |
|
9564 |
|
9565 |
|
9566 |
|
9567 |
|
9568 | onExiting: propTypes.func,
|
9569 |
|
9570 | |
9571 |
|
9572 |
|
9573 |
|
9574 |
|
9575 |
|
9576 |
|
9577 | onExited: propTypes.func
|
9578 | } ;
|
9579 |
|
9580 | function noop() {}
|
9581 |
|
9582 | Transition.defaultProps = {
|
9583 | in: false,
|
9584 | mountOnEnter: false,
|
9585 | unmountOnExit: false,
|
9586 | appear: false,
|
9587 | enter: true,
|
9588 | exit: true,
|
9589 | onEnter: noop,
|
9590 | onEntering: noop,
|
9591 | onEntered: noop,
|
9592 | onExit: noop,
|
9593 | onExiting: noop,
|
9594 | onExited: noop
|
9595 | };
|
9596 | Transition.UNMOUNTED = UNMOUNTED;
|
9597 | Transition.EXITED = EXITED;
|
9598 | Transition.ENTERING = ENTERING;
|
9599 | Transition.ENTERED = ENTERED;
|
9600 | Transition.EXITING = EXITING;
|
9601 |
|
9602 | |
9603 |
|
9604 |
|
9605 |
|
9606 |
|
9607 |
|
9608 |
|
9609 | function getChildMapping(children, mapFn) {
|
9610 | var mapper = function mapper(child) {
|
9611 | return mapFn && React.isValidElement(child) ? mapFn(child) : child;
|
9612 | };
|
9613 |
|
9614 | var result = Object.create(null);
|
9615 | if (children) React.Children.map(children, function (c) {
|
9616 | return c;
|
9617 | }).forEach(function (child) {
|
9618 |
|
9619 | result[child.key] = mapper(child);
|
9620 | });
|
9621 | return result;
|
9622 | }
|
9623 | |
9624 |
|
9625 |
|
9626 |
|
9627 |
|
9628 |
|
9629 |
|
9630 |
|
9631 |
|
9632 |
|
9633 |
|
9634 |
|
9635 |
|
9636 |
|
9637 |
|
9638 |
|
9639 |
|
9640 |
|
9641 | function mergeChildMappings(prev, next) {
|
9642 | prev = prev || {};
|
9643 | next = next || {};
|
9644 |
|
9645 | function getValueForKey(key) {
|
9646 | return key in next ? next[key] : prev[key];
|
9647 | }
|
9648 |
|
9649 |
|
9650 |
|
9651 | var nextKeysPending = Object.create(null);
|
9652 | var pendingKeys = [];
|
9653 |
|
9654 | for (var prevKey in prev) {
|
9655 | if (prevKey in next) {
|
9656 | if (pendingKeys.length) {
|
9657 | nextKeysPending[prevKey] = pendingKeys;
|
9658 | pendingKeys = [];
|
9659 | }
|
9660 | } else {
|
9661 | pendingKeys.push(prevKey);
|
9662 | }
|
9663 | }
|
9664 |
|
9665 | var i;
|
9666 | var childMapping = {};
|
9667 |
|
9668 | for (var nextKey in next) {
|
9669 | if (nextKeysPending[nextKey]) {
|
9670 | for (i = 0; i < nextKeysPending[nextKey].length; i++) {
|
9671 | var pendingNextKey = nextKeysPending[nextKey][i];
|
9672 | childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
|
9673 | }
|
9674 | }
|
9675 |
|
9676 | childMapping[nextKey] = getValueForKey(nextKey);
|
9677 | }
|
9678 |
|
9679 |
|
9680 | for (i = 0; i < pendingKeys.length; i++) {
|
9681 | childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
|
9682 | }
|
9683 |
|
9684 | return childMapping;
|
9685 | }
|
9686 |
|
9687 | function getProp(child, prop, props) {
|
9688 | return props[prop] != null ? props[prop] : child.props[prop];
|
9689 | }
|
9690 |
|
9691 | function getInitialChildMapping(props, onExited) {
|
9692 | return getChildMapping(props.children, function (child) {
|
9693 | return React.cloneElement(child, {
|
9694 | onExited: onExited.bind(null, child),
|
9695 | in: true,
|
9696 | appear: getProp(child, 'appear', props),
|
9697 | enter: getProp(child, 'enter', props),
|
9698 | exit: getProp(child, 'exit', props)
|
9699 | });
|
9700 | });
|
9701 | }
|
9702 | function getNextChildMapping(nextProps, prevChildMapping, onExited) {
|
9703 | var nextChildMapping = getChildMapping(nextProps.children);
|
9704 | var children = mergeChildMappings(prevChildMapping, nextChildMapping);
|
9705 | Object.keys(children).forEach(function (key) {
|
9706 | var child = children[key];
|
9707 | if (!React.isValidElement(child)) return;
|
9708 | var hasPrev = (key in prevChildMapping);
|
9709 | var hasNext = (key in nextChildMapping);
|
9710 | var prevChild = prevChildMapping[key];
|
9711 | var isLeaving = React.isValidElement(prevChild) && !prevChild.props.in;
|
9712 |
|
9713 | if (hasNext && (!hasPrev || isLeaving)) {
|
9714 |
|
9715 | children[key] = React.cloneElement(child, {
|
9716 | onExited: onExited.bind(null, child),
|
9717 | in: true,
|
9718 | exit: getProp(child, 'exit', nextProps),
|
9719 | enter: getProp(child, 'enter', nextProps)
|
9720 | });
|
9721 | } else if (!hasNext && hasPrev && !isLeaving) {
|
9722 |
|
9723 |
|
9724 | children[key] = React.cloneElement(child, {
|
9725 | in: false
|
9726 | });
|
9727 | } else if (hasNext && hasPrev && React.isValidElement(prevChild)) {
|
9728 |
|
9729 |
|
9730 |
|
9731 | children[key] = React.cloneElement(child, {
|
9732 | onExited: onExited.bind(null, child),
|
9733 | in: prevChild.props.in,
|
9734 | exit: getProp(child, 'exit', nextProps),
|
9735 | enter: getProp(child, 'enter', nextProps)
|
9736 | });
|
9737 | }
|
9738 | });
|
9739 | return children;
|
9740 | }
|
9741 |
|
9742 | var values$1 = Object.values || function (obj) {
|
9743 | return Object.keys(obj).map(function (k) {
|
9744 | return obj[k];
|
9745 | });
|
9746 | };
|
9747 |
|
9748 | var defaultProps = {
|
9749 | component: 'div',
|
9750 | childFactory: function childFactory(child) {
|
9751 | return child;
|
9752 | }
|
9753 | };
|
9754 | |
9755 |
|
9756 |
|
9757 |
|
9758 |
|
9759 |
|
9760 |
|
9761 |
|
9762 |
|
9763 |
|
9764 |
|
9765 |
|
9766 |
|
9767 |
|
9768 |
|
9769 | var TransitionGroup = function (_React$Component) {
|
9770 | _inheritsLoose(TransitionGroup, _React$Component);
|
9771 |
|
9772 | function TransitionGroup(props, context) {
|
9773 | var _this;
|
9774 |
|
9775 | _this = _React$Component.call(this, props, context) || this;
|
9776 |
|
9777 | var handleExited = _this.handleExited.bind(_assertThisInitialized(_this));
|
9778 |
|
9779 |
|
9780 | _this.state = {
|
9781 | contextValue: {
|
9782 | isMounting: true
|
9783 | },
|
9784 | handleExited: handleExited,
|
9785 | firstRender: true
|
9786 | };
|
9787 | return _this;
|
9788 | }
|
9789 |
|
9790 | var _proto = TransitionGroup.prototype;
|
9791 |
|
9792 | _proto.componentDidMount = function componentDidMount() {
|
9793 | this.mounted = true;
|
9794 | this.setState({
|
9795 | contextValue: {
|
9796 | isMounting: false
|
9797 | }
|
9798 | });
|
9799 | };
|
9800 |
|
9801 | _proto.componentWillUnmount = function componentWillUnmount() {
|
9802 | this.mounted = false;
|
9803 | };
|
9804 |
|
9805 | TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
|
9806 | var prevChildMapping = _ref.children,
|
9807 | handleExited = _ref.handleExited,
|
9808 | firstRender = _ref.firstRender;
|
9809 | return {
|
9810 | children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
|
9811 | firstRender: false
|
9812 | };
|
9813 | }
|
9814 | ;
|
9815 |
|
9816 | _proto.handleExited = function handleExited(child, node) {
|
9817 | var currentChildMapping = getChildMapping(this.props.children);
|
9818 | if (child.key in currentChildMapping) return;
|
9819 |
|
9820 | if (child.props.onExited) {
|
9821 | child.props.onExited(node);
|
9822 | }
|
9823 |
|
9824 | if (this.mounted) {
|
9825 | this.setState(function (state) {
|
9826 | var children = _extends({}, state.children);
|
9827 |
|
9828 | delete children[child.key];
|
9829 | return {
|
9830 | children: children
|
9831 | };
|
9832 | });
|
9833 | }
|
9834 | };
|
9835 |
|
9836 | _proto.render = function render() {
|
9837 | var _this$props = this.props,
|
9838 | Component = _this$props.component,
|
9839 | childFactory = _this$props.childFactory,
|
9840 | props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
|
9841 |
|
9842 | var contextValue = this.state.contextValue;
|
9843 | var children = values$1(this.state.children).map(childFactory);
|
9844 | delete props.appear;
|
9845 | delete props.enter;
|
9846 | delete props.exit;
|
9847 |
|
9848 | if (Component === null) {
|
9849 | return React__default.createElement(TransitionGroupContext.Provider, {
|
9850 | value: contextValue
|
9851 | }, children);
|
9852 | }
|
9853 |
|
9854 | return React__default.createElement(TransitionGroupContext.Provider, {
|
9855 | value: contextValue
|
9856 | }, React__default.createElement(Component, props, children));
|
9857 | };
|
9858 |
|
9859 | return TransitionGroup;
|
9860 | }(React__default.Component);
|
9861 |
|
9862 | TransitionGroup.propTypes = {
|
9863 | |
9864 |
|
9865 |
|
9866 |
|
9867 |
|
9868 |
|
9869 |
|
9870 | component: propTypes.any,
|
9871 |
|
9872 | |
9873 |
|
9874 |
|
9875 |
|
9876 |
|
9877 |
|
9878 |
|
9879 |
|
9880 |
|
9881 |
|
9882 |
|
9883 |
|
9884 |
|
9885 | children: propTypes.node,
|
9886 |
|
9887 | |
9888 |
|
9889 |
|
9890 |
|
9891 |
|
9892 | appear: propTypes.bool,
|
9893 |
|
9894 | |
9895 |
|
9896 |
|
9897 |
|
9898 |
|
9899 | enter: propTypes.bool,
|
9900 |
|
9901 | |
9902 |
|
9903 |
|
9904 |
|
9905 |
|
9906 | exit: propTypes.bool,
|
9907 |
|
9908 | |
9909 |
|
9910 |
|
9911 |
|
9912 |
|
9913 |
|
9914 |
|
9915 |
|
9916 |
|
9917 |
|
9918 | childFactory: propTypes.func
|
9919 | } ;
|
9920 | TransitionGroup.defaultProps = defaultProps;
|
9921 |
|
9922 | var reflow = function reflow(node) {
|
9923 | return node.scrollTop;
|
9924 | };
|
9925 | function getTransitionProps(props, options) {
|
9926 | var timeout = props.timeout,
|
9927 | _props$style = props.style,
|
9928 | style = _props$style === void 0 ? {} : _props$style;
|
9929 | return {
|
9930 | duration: style.transitionDuration || typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,
|
9931 | delay: style.transitionDelay
|
9932 | };
|
9933 | }
|
9934 |
|
9935 | var styles$1 = function styles(theme) {
|
9936 | return {
|
9937 |
|
9938 | root: {
|
9939 | height: 0,
|
9940 | overflow: 'hidden',
|
9941 | transition: theme.transitions.create('height')
|
9942 | },
|
9943 |
|
9944 |
|
9945 | entered: {
|
9946 | height: 'auto',
|
9947 | overflow: 'visible'
|
9948 | },
|
9949 |
|
9950 |
|
9951 | hidden: {
|
9952 | visibility: 'hidden'
|
9953 | },
|
9954 |
|
9955 |
|
9956 | wrapper: {
|
9957 |
|
9958 | display: 'flex'
|
9959 | },
|
9960 |
|
9961 |
|
9962 | wrapperInner: {
|
9963 | width: '100%'
|
9964 | }
|
9965 | };
|
9966 | };
|
9967 | |
9968 |
|
9969 |
|
9970 |
|
9971 |
|
9972 |
|
9973 | var Collapse = React.forwardRef(function Collapse(props, ref) {
|
9974 | var children = props.children,
|
9975 | classes = props.classes,
|
9976 | className = props.className,
|
9977 | collapsedHeight = props.collapsedHeight,
|
9978 | _props$collapsedSize = props.collapsedSize,
|
9979 | collapsedSizeProp = _props$collapsedSize === void 0 ? '0px' : _props$collapsedSize,
|
9980 | _props$component = props.component,
|
9981 | Component = _props$component === void 0 ? 'div' : _props$component,
|
9982 | _props$disableStrictM = props.disableStrictModeCompat,
|
9983 | disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,
|
9984 | inProp = props.in,
|
9985 | onEnter = props.onEnter,
|
9986 | onEntered = props.onEntered,
|
9987 | onEntering = props.onEntering,
|
9988 | onExit = props.onExit,
|
9989 | onExited = props.onExited,
|
9990 | onExiting = props.onExiting,
|
9991 | style = props.style,
|
9992 | _props$timeout = props.timeout,
|
9993 | timeout = _props$timeout === void 0 ? duration.standard : _props$timeout,
|
9994 | _props$TransitionComp = props.TransitionComponent,
|
9995 | TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
|
9996 | other = _objectWithoutProperties(props, ["children", "classes", "className", "collapsedHeight", "collapsedSize", "component", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
|
9997 |
|
9998 | var theme = useTheme$1();
|
9999 | var timer = React.useRef();
|
10000 | var wrapperRef = React.useRef(null);
|
10001 | var autoTransitionDuration = React.useRef();
|
10002 | var collapsedSize = typeof (collapsedHeight || collapsedSizeProp) === 'number' ? "".concat(collapsedHeight || collapsedSizeProp, "px") : collapsedHeight || collapsedSizeProp;
|
10003 | React.useEffect(function () {
|
10004 | return function () {
|
10005 | clearTimeout(timer.current);
|
10006 | };
|
10007 | }, []);
|
10008 | var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
|
10009 | var nodeRef = React.useRef(null);
|
10010 | var handleRef = useForkRef(ref, enableStrictModeCompat ? nodeRef : undefined);
|
10011 |
|
10012 | var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
|
10013 | return function (nodeOrAppearing, maybeAppearing) {
|
10014 | if (callback) {
|
10015 | var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],
|
10016 | _ref2 = _slicedToArray(_ref, 2),
|
10017 | node = _ref2[0],
|
10018 | isAppearing = _ref2[1];
|
10019 |
|
10020 |
|
10021 | if (isAppearing === undefined) {
|
10022 | callback(node);
|
10023 | } else {
|
10024 | callback(node, isAppearing);
|
10025 | }
|
10026 | }
|
10027 | };
|
10028 | };
|
10029 |
|
10030 | var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
|
10031 | node.style.height = collapsedSize;
|
10032 |
|
10033 | if (onEnter) {
|
10034 | onEnter(node, isAppearing);
|
10035 | }
|
10036 | });
|
10037 | var handleEntering = normalizedTransitionCallback(function (node, isAppearing) {
|
10038 | var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
|
10039 |
|
10040 | var _getTransitionProps = getTransitionProps({
|
10041 | style: style,
|
10042 | timeout: timeout
|
10043 | }, {
|
10044 | mode: 'enter'
|
10045 | }),
|
10046 | transitionDuration = _getTransitionProps.duration;
|
10047 |
|
10048 | if (timeout === 'auto') {
|
10049 | var duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
|
10050 | node.style.transitionDuration = "".concat(duration2, "ms");
|
10051 | autoTransitionDuration.current = duration2;
|
10052 | } else {
|
10053 | node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : "".concat(transitionDuration, "ms");
|
10054 | }
|
10055 |
|
10056 | node.style.height = "".concat(wrapperHeight, "px");
|
10057 |
|
10058 | if (onEntering) {
|
10059 | onEntering(node, isAppearing);
|
10060 | }
|
10061 | });
|
10062 | var handleEntered = normalizedTransitionCallback(function (node, isAppearing) {
|
10063 | node.style.height = 'auto';
|
10064 |
|
10065 | if (onEntered) {
|
10066 | onEntered(node, isAppearing);
|
10067 | }
|
10068 | });
|
10069 | var handleExit = normalizedTransitionCallback(function (node) {
|
10070 | var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
|
10071 | node.style.height = "".concat(wrapperHeight, "px");
|
10072 |
|
10073 | if (onExit) {
|
10074 | onExit(node);
|
10075 | }
|
10076 | });
|
10077 | var handleExited = normalizedTransitionCallback(onExited);
|
10078 | var handleExiting = normalizedTransitionCallback(function (node) {
|
10079 | var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
|
10080 |
|
10081 | var _getTransitionProps2 = getTransitionProps({
|
10082 | style: style,
|
10083 | timeout: timeout
|
10084 | }, {
|
10085 | mode: 'exit'
|
10086 | }),
|
10087 | transitionDuration = _getTransitionProps2.duration;
|
10088 |
|
10089 | if (timeout === 'auto') {
|
10090 | var duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
|
10091 | node.style.transitionDuration = "".concat(duration2, "ms");
|
10092 | autoTransitionDuration.current = duration2;
|
10093 | } else {
|
10094 | node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : "".concat(transitionDuration, "ms");
|
10095 | }
|
10096 |
|
10097 | node.style.height = collapsedSize;
|
10098 |
|
10099 | if (onExiting) {
|
10100 | onExiting(node);
|
10101 | }
|
10102 | });
|
10103 |
|
10104 | var addEndListener = function addEndListener(nodeOrNext, maybeNext) {
|
10105 | var next = enableStrictModeCompat ? nodeOrNext : maybeNext;
|
10106 |
|
10107 | if (timeout === 'auto') {
|
10108 | timer.current = setTimeout(next, autoTransitionDuration.current || 0);
|
10109 | }
|
10110 | };
|
10111 |
|
10112 | return React.createElement(TransitionComponent, _extends({
|
10113 | in: inProp,
|
10114 | onEnter: handleEnter,
|
10115 | onEntered: handleEntered,
|
10116 | onEntering: handleEntering,
|
10117 | onExit: handleExit,
|
10118 | onExited: handleExited,
|
10119 | onExiting: handleExiting,
|
10120 | addEndListener: addEndListener,
|
10121 | nodeRef: enableStrictModeCompat ? nodeRef : undefined,
|
10122 | timeout: timeout === 'auto' ? null : timeout
|
10123 | }, other), function (state, childProps) {
|
10124 | return React.createElement(Component, _extends({
|
10125 | className: clsx(classes.root, classes.container, className, {
|
10126 | 'entered': classes.entered,
|
10127 | 'exited': !inProp && collapsedSize === '0px' && classes.hidden
|
10128 | }[state]),
|
10129 | style: _extends({
|
10130 | minHeight: collapsedSize
|
10131 | }, style),
|
10132 | ref: handleRef
|
10133 | }, childProps), React.createElement("div", {
|
10134 | className: classes.wrapper,
|
10135 | ref: wrapperRef
|
10136 | }, React.createElement("div", {
|
10137 | className: classes.wrapperInner
|
10138 | }, children)));
|
10139 | });
|
10140 | });
|
10141 | Collapse.propTypes = {
|
10142 |
|
10143 |
|
10144 |
|
10145 |
|
10146 |
|
10147 | |
10148 |
|
10149 |
|
10150 | children: propTypes.node,
|
10151 |
|
10152 | |
10153 |
|
10154 |
|
10155 |
|
10156 | classes: chainPropTypes(propTypes.object, function (props) {
|
10157 | if (props.classes && props.classes.container) {
|
10158 | throw new Error(['Material-UI: the classes.container key is deprecated.', 'Use `classes.root` instead', 'The name of the pseudo-class was changed for consistency.'].join('\n'));
|
10159 | }
|
10160 |
|
10161 | return null;
|
10162 | }),
|
10163 |
|
10164 | |
10165 |
|
10166 |
|
10167 | className: propTypes.string,
|
10168 |
|
10169 | |
10170 |
|
10171 |
|
10172 |
|
10173 | collapsedHeight: deprecatedPropType(propTypes.oneOfType([propTypes.number, propTypes.string]), 'The prop was renamed to support the vertical orientation, use `collapsedSize` instead'),
|
10174 |
|
10175 | |
10176 |
|
10177 |
|
10178 | collapsedSize: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
10179 |
|
10180 | |
10181 |
|
10182 |
|
10183 |
|
10184 | component: propTypes
|
10185 |
|
10186 | .elementType,
|
10187 |
|
10188 | |
10189 |
|
10190 |
|
10191 |
|
10192 |
|
10193 | disableStrictModeCompat: propTypes.bool,
|
10194 |
|
10195 | |
10196 |
|
10197 |
|
10198 | in: propTypes.bool,
|
10199 |
|
10200 | |
10201 |
|
10202 |
|
10203 | onEnter: propTypes.func,
|
10204 |
|
10205 | |
10206 |
|
10207 |
|
10208 | onEntered: propTypes.func,
|
10209 |
|
10210 | |
10211 |
|
10212 |
|
10213 | onEntering: propTypes.func,
|
10214 |
|
10215 | |
10216 |
|
10217 |
|
10218 | onExit: propTypes.func,
|
10219 |
|
10220 | |
10221 |
|
10222 |
|
10223 | onExited: propTypes.func,
|
10224 |
|
10225 | |
10226 |
|
10227 |
|
10228 | onExiting: propTypes.func,
|
10229 |
|
10230 | |
10231 |
|
10232 |
|
10233 | style: propTypes.object,
|
10234 |
|
10235 | |
10236 |
|
10237 |
|
10238 |
|
10239 |
|
10240 |
|
10241 | timeout: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.shape({
|
10242 | appear: propTypes.number,
|
10243 | enter: propTypes.number,
|
10244 | exit: propTypes.number
|
10245 | })])
|
10246 | } ;
|
10247 | Collapse.muiSupportAuto = true;
|
10248 | var Collapse$1 = withStyles$1(styles$1, {
|
10249 | name: 'MuiCollapse'
|
10250 | })(Collapse);
|
10251 |
|
10252 | var styles$2 = function styles(theme) {
|
10253 | var elevations = {};
|
10254 | theme.shadows.forEach(function (shadow, index) {
|
10255 | elevations["elevation".concat(index)] = {
|
10256 | boxShadow: shadow
|
10257 | };
|
10258 | });
|
10259 | return _extends({
|
10260 |
|
10261 | root: {
|
10262 | backgroundColor: theme.palette.background.paper,
|
10263 | color: theme.palette.text.primary,
|
10264 | transition: theme.transitions.create('box-shadow')
|
10265 | },
|
10266 |
|
10267 |
|
10268 | rounded: {
|
10269 | borderRadius: theme.shape.borderRadius
|
10270 | },
|
10271 |
|
10272 |
|
10273 | outlined: {
|
10274 | border: "1px solid ".concat(theme.palette.divider)
|
10275 | }
|
10276 | }, elevations);
|
10277 | };
|
10278 | var Paper = React.forwardRef(function Paper(props, ref) {
|
10279 | var classes = props.classes,
|
10280 | className = props.className,
|
10281 | _props$component = props.component,
|
10282 | Component = _props$component === void 0 ? 'div' : _props$component,
|
10283 | _props$square = props.square,
|
10284 | square = _props$square === void 0 ? false : _props$square,
|
10285 | _props$elevation = props.elevation,
|
10286 | elevation = _props$elevation === void 0 ? 1 : _props$elevation,
|
10287 | _props$variant = props.variant,
|
10288 | variant = _props$variant === void 0 ? 'elevation' : _props$variant,
|
10289 | other = _objectWithoutProperties(props, ["classes", "className", "component", "square", "elevation", "variant"]);
|
10290 |
|
10291 | return React.createElement(Component, _extends({
|
10292 | className: clsx(classes.root, className, variant === 'outlined' ? classes.outlined : classes["elevation".concat(elevation)], !square && classes.rounded),
|
10293 | ref: ref
|
10294 | }, other));
|
10295 | });
|
10296 | Paper.propTypes = {
|
10297 |
|
10298 |
|
10299 |
|
10300 |
|
10301 |
|
10302 | |
10303 |
|
10304 |
|
10305 | children: propTypes.node,
|
10306 |
|
10307 | |
10308 |
|
10309 |
|
10310 |
|
10311 | classes: propTypes.object,
|
10312 |
|
10313 | |
10314 |
|
10315 |
|
10316 | className: propTypes.string,
|
10317 |
|
10318 | |
10319 |
|
10320 |
|
10321 |
|
10322 | component: propTypes
|
10323 |
|
10324 | .elementType,
|
10325 |
|
10326 | |
10327 |
|
10328 |
|
10329 |
|
10330 | elevation: chainPropTypes(propTypes.number, function (props) {
|
10331 | var classes = props.classes,
|
10332 | elevation = props.elevation;
|
10333 |
|
10334 | if (classes === undefined) {
|
10335 | return null;
|
10336 | }
|
10337 |
|
10338 | if (elevation != null && classes["elevation".concat(elevation)] === undefined) {
|
10339 | return new Error("Material-UI: This elevation `".concat(elevation, "` is not implemented."));
|
10340 | }
|
10341 |
|
10342 | return null;
|
10343 | }),
|
10344 |
|
10345 | |
10346 |
|
10347 |
|
10348 | square: propTypes.bool,
|
10349 |
|
10350 | |
10351 |
|
10352 |
|
10353 | variant: propTypes.oneOf(['elevation', 'outlined'])
|
10354 | } ;
|
10355 | var Paper$1 = withStyles$1(styles$2, {
|
10356 | name: 'MuiPaper'
|
10357 | })(Paper);
|
10358 |
|
10359 | |
10360 |
|
10361 |
|
10362 |
|
10363 |
|
10364 | var AccordionContext = React.createContext({});
|
10365 |
|
10366 | {
|
10367 | AccordionContext.displayName = 'AccordionContext';
|
10368 | }
|
10369 |
|
10370 | var styles$3 = function styles(theme) {
|
10371 | var transition = {
|
10372 | duration: theme.transitions.duration.shortest
|
10373 | };
|
10374 | return {
|
10375 |
|
10376 | root: {
|
10377 | position: 'relative',
|
10378 | transition: theme.transitions.create(['margin'], transition),
|
10379 | '&:before': {
|
10380 | position: 'absolute',
|
10381 | left: 0,
|
10382 | top: -1,
|
10383 | right: 0,
|
10384 | height: 1,
|
10385 | content: '""',
|
10386 | opacity: 1,
|
10387 | backgroundColor: theme.palette.divider,
|
10388 | transition: theme.transitions.create(['opacity', 'background-color'], transition)
|
10389 | },
|
10390 | '&:first-child': {
|
10391 | '&:before': {
|
10392 | display: 'none'
|
10393 | }
|
10394 | },
|
10395 | '&$expanded': {
|
10396 | margin: '16px 0',
|
10397 | '&:first-child': {
|
10398 | marginTop: 0
|
10399 | },
|
10400 | '&:last-child': {
|
10401 | marginBottom: 0
|
10402 | },
|
10403 | '&:before': {
|
10404 | opacity: 0
|
10405 | }
|
10406 | },
|
10407 | '&$expanded + &': {
|
10408 | '&:before': {
|
10409 | display: 'none'
|
10410 | }
|
10411 | },
|
10412 | '&$disabled': {
|
10413 | backgroundColor: theme.palette.action.disabledBackground
|
10414 | }
|
10415 | },
|
10416 |
|
10417 |
|
10418 | rounded: {
|
10419 | borderRadius: 0,
|
10420 | '&:first-child': {
|
10421 | borderTopLeftRadius: theme.shape.borderRadius,
|
10422 | borderTopRightRadius: theme.shape.borderRadius
|
10423 | },
|
10424 | '&:last-child': {
|
10425 | borderBottomLeftRadius: theme.shape.borderRadius,
|
10426 | borderBottomRightRadius: theme.shape.borderRadius,
|
10427 |
|
10428 | '@supports (-ms-ime-align: auto)': {
|
10429 | borderBottomLeftRadius: 0,
|
10430 | borderBottomRightRadius: 0
|
10431 | }
|
10432 | }
|
10433 | },
|
10434 |
|
10435 |
|
10436 | expanded: {},
|
10437 |
|
10438 |
|
10439 | disabled: {}
|
10440 | };
|
10441 | };
|
10442 | var Accordion = React.forwardRef(function Accordion(props, ref) {
|
10443 | var childrenProp = props.children,
|
10444 | classes = props.classes,
|
10445 | className = props.className,
|
10446 | _props$defaultExpande = props.defaultExpanded,
|
10447 | defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
|
10448 | _props$disabled = props.disabled,
|
10449 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
10450 | expandedProp = props.expanded,
|
10451 | onChange = props.onChange,
|
10452 | _props$square = props.square,
|
10453 | square = _props$square === void 0 ? false : _props$square,
|
10454 | _props$TransitionComp = props.TransitionComponent,
|
10455 | TransitionComponent = _props$TransitionComp === void 0 ? Collapse$1 : _props$TransitionComp,
|
10456 | TransitionProps = props.TransitionProps,
|
10457 | other = _objectWithoutProperties(props, ["children", "classes", "className", "defaultExpanded", "disabled", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"]);
|
10458 |
|
10459 | var _useControlled = useControlled({
|
10460 | controlled: expandedProp,
|
10461 | default: defaultExpanded,
|
10462 | name: 'Accordion',
|
10463 | state: 'expanded'
|
10464 | }),
|
10465 | _useControlled2 = _slicedToArray(_useControlled, 2),
|
10466 | expanded = _useControlled2[0],
|
10467 | setExpandedState = _useControlled2[1];
|
10468 |
|
10469 | var handleChange = React.useCallback(function (event) {
|
10470 | setExpandedState(!expanded);
|
10471 |
|
10472 | if (onChange) {
|
10473 | onChange(event, !expanded);
|
10474 | }
|
10475 | }, [expanded, onChange, setExpandedState]);
|
10476 |
|
10477 | var _React$Children$toArr = React.Children.toArray(childrenProp),
|
10478 | _React$Children$toArr2 = _toArray(_React$Children$toArr),
|
10479 | summary = _React$Children$toArr2[0],
|
10480 | children = _React$Children$toArr2.slice(1);
|
10481 |
|
10482 | var contextValue = React.useMemo(function () {
|
10483 | return {
|
10484 | expanded: expanded,
|
10485 | disabled: disabled,
|
10486 | toggle: handleChange
|
10487 | };
|
10488 | }, [expanded, disabled, handleChange]);
|
10489 | return React.createElement(Paper$1, _extends({
|
10490 | className: clsx(classes.root, className, expanded && classes.expanded, disabled && classes.disabled, !square && classes.rounded),
|
10491 | ref: ref,
|
10492 | square: square
|
10493 | }, other), React.createElement(AccordionContext.Provider, {
|
10494 | value: contextValue
|
10495 | }, summary), React.createElement(TransitionComponent, _extends({
|
10496 | in: expanded,
|
10497 | timeout: "auto"
|
10498 | }, TransitionProps), React.createElement("div", {
|
10499 | "aria-labelledby": summary.props.id,
|
10500 | id: summary.props['aria-controls'],
|
10501 | role: "region"
|
10502 | }, children)));
|
10503 | });
|
10504 | Accordion.propTypes = {
|
10505 |
|
10506 |
|
10507 |
|
10508 |
|
10509 |
|
10510 | |
10511 |
|
10512 |
|
10513 | children: chainPropTypes(propTypes.node.isRequired, function (props) {
|
10514 | var summary = React.Children.toArray(props.children)[0];
|
10515 |
|
10516 | if (reactIs_2(summary)) {
|
10517 | return new Error("Material-UI: The Accordion doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
|
10518 | }
|
10519 |
|
10520 | if (! React.isValidElement(summary)) {
|
10521 | return new Error('Material-UI: Expected the first child of Accordion to be a valid element.');
|
10522 | }
|
10523 |
|
10524 | return null;
|
10525 | }),
|
10526 |
|
10527 | |
10528 |
|
10529 |
|
10530 |
|
10531 | classes: propTypes.object,
|
10532 |
|
10533 | |
10534 |
|
10535 |
|
10536 | className: propTypes.string,
|
10537 |
|
10538 | |
10539 |
|
10540 |
|
10541 | defaultExpanded: propTypes.bool,
|
10542 |
|
10543 | |
10544 |
|
10545 |
|
10546 | disabled: propTypes.bool,
|
10547 |
|
10548 | |
10549 |
|
10550 |
|
10551 |
|
10552 | expanded: propTypes.bool,
|
10553 |
|
10554 | |
10555 |
|
10556 |
|
10557 |
|
10558 |
|
10559 |
|
10560 | onChange: propTypes.func,
|
10561 |
|
10562 | |
10563 |
|
10564 |
|
10565 | square: propTypes.bool,
|
10566 |
|
10567 | |
10568 |
|
10569 |
|
10570 |
|
10571 | TransitionComponent: propTypes.elementType,
|
10572 |
|
10573 | |
10574 |
|
10575 |
|
10576 | TransitionProps: propTypes.object
|
10577 | } ;
|
10578 | var Accordion$1 = withStyles$1(styles$3, {
|
10579 | name: 'MuiAccordion'
|
10580 | })(Accordion);
|
10581 |
|
10582 | var styles$4 = {
|
10583 |
|
10584 | root: {
|
10585 | display: 'flex',
|
10586 | alignItems: 'center',
|
10587 | padding: 8,
|
10588 | justifyContent: 'flex-end'
|
10589 | },
|
10590 |
|
10591 |
|
10592 | spacing: {
|
10593 | '& > :not(:first-child)': {
|
10594 | marginLeft: 8
|
10595 | }
|
10596 | }
|
10597 | };
|
10598 | var AccordionActions = React.forwardRef(function AccordionActions(props, ref) {
|
10599 | var classes = props.classes,
|
10600 | className = props.className,
|
10601 | _props$disableSpacing = props.disableSpacing,
|
10602 | disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,
|
10603 | other = _objectWithoutProperties(props, ["classes", "className", "disableSpacing"]);
|
10604 |
|
10605 | return React.createElement("div", _extends({
|
10606 | className: clsx(classes.root, className, !disableSpacing && classes.spacing),
|
10607 | ref: ref
|
10608 | }, other));
|
10609 | });
|
10610 | AccordionActions.propTypes = {
|
10611 |
|
10612 |
|
10613 |
|
10614 |
|
10615 |
|
10616 | |
10617 |
|
10618 |
|
10619 | children: propTypes.node,
|
10620 |
|
10621 | |
10622 |
|
10623 |
|
10624 |
|
10625 | classes: propTypes.object,
|
10626 |
|
10627 | |
10628 |
|
10629 |
|
10630 | className: propTypes.string,
|
10631 |
|
10632 | |
10633 |
|
10634 |
|
10635 | disableSpacing: propTypes.bool
|
10636 | } ;
|
10637 | var AccordionActions$1 = withStyles$1(styles$4, {
|
10638 | name: 'MuiAccordionActions'
|
10639 | })(AccordionActions);
|
10640 |
|
10641 | var styles$5 = function styles(theme) {
|
10642 | return {
|
10643 |
|
10644 | root: {
|
10645 | display: 'flex',
|
10646 | padding: theme.spacing(1, 2, 2)
|
10647 | }
|
10648 | };
|
10649 | };
|
10650 | var AccordionDetails = React.forwardRef(function AccordionDetails(props, ref) {
|
10651 | var classes = props.classes,
|
10652 | className = props.className,
|
10653 | other = _objectWithoutProperties(props, ["classes", "className"]);
|
10654 |
|
10655 | return React.createElement("div", _extends({
|
10656 | className: clsx(classes.root, className),
|
10657 | ref: ref
|
10658 | }, other));
|
10659 | });
|
10660 | AccordionDetails.propTypes = {
|
10661 |
|
10662 |
|
10663 |
|
10664 |
|
10665 |
|
10666 | |
10667 |
|
10668 |
|
10669 | children: propTypes.node,
|
10670 |
|
10671 | |
10672 |
|
10673 |
|
10674 |
|
10675 | classes: propTypes.object,
|
10676 |
|
10677 | |
10678 |
|
10679 |
|
10680 | className: propTypes.string
|
10681 | } ;
|
10682 | var AccordionDetails$1 = withStyles$1(styles$5, {
|
10683 | name: 'MuiAccordionDetails'
|
10684 | })(AccordionDetails);
|
10685 |
|
10686 | var useEnhancedEffect$1 = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
|
10687 | |
10688 |
|
10689 |
|
10690 |
|
10691 | function Ripple(props) {
|
10692 | var classes = props.classes,
|
10693 | _props$pulsate = props.pulsate,
|
10694 | pulsate = _props$pulsate === void 0 ? false : _props$pulsate,
|
10695 | rippleX = props.rippleX,
|
10696 | rippleY = props.rippleY,
|
10697 | rippleSize = props.rippleSize,
|
10698 | inProp = props.in,
|
10699 | _props$onExited = props.onExited,
|
10700 | onExited = _props$onExited === void 0 ? function () {} : _props$onExited,
|
10701 | timeout = props.timeout;
|
10702 |
|
10703 | var _React$useState = React.useState(false),
|
10704 | leaving = _React$useState[0],
|
10705 | setLeaving = _React$useState[1];
|
10706 |
|
10707 | var rippleClassName = clsx(classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
|
10708 | var rippleStyles = {
|
10709 | width: rippleSize,
|
10710 | height: rippleSize,
|
10711 | top: -(rippleSize / 2) + rippleY,
|
10712 | left: -(rippleSize / 2) + rippleX
|
10713 | };
|
10714 | var childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
|
10715 | var handleExited = useEventCallback(onExited);
|
10716 |
|
10717 | useEnhancedEffect$1(function () {
|
10718 | if (!inProp) {
|
10719 |
|
10720 | setLeaving(true);
|
10721 |
|
10722 | var timeoutId = setTimeout(handleExited, timeout);
|
10723 | return function () {
|
10724 | clearTimeout(timeoutId);
|
10725 | };
|
10726 | }
|
10727 |
|
10728 | return undefined;
|
10729 | }, [handleExited, inProp, timeout]);
|
10730 | return React.createElement("span", {
|
10731 | className: rippleClassName,
|
10732 | style: rippleStyles
|
10733 | }, React.createElement("span", {
|
10734 | className: childClassName
|
10735 | }));
|
10736 | }
|
10737 |
|
10738 | Ripple.propTypes = {
|
10739 | |
10740 |
|
10741 |
|
10742 |
|
10743 | classes: propTypes.object.isRequired,
|
10744 |
|
10745 | |
10746 |
|
10747 |
|
10748 | in: propTypes.bool,
|
10749 |
|
10750 | |
10751 |
|
10752 |
|
10753 | onExited: propTypes.func,
|
10754 |
|
10755 | |
10756 |
|
10757 |
|
10758 | pulsate: propTypes.bool,
|
10759 |
|
10760 | |
10761 |
|
10762 |
|
10763 | rippleSize: propTypes.number,
|
10764 |
|
10765 | |
10766 |
|
10767 |
|
10768 | rippleX: propTypes.number,
|
10769 |
|
10770 | |
10771 |
|
10772 |
|
10773 | rippleY: propTypes.number,
|
10774 |
|
10775 | |
10776 |
|
10777 |
|
10778 | timeout: propTypes.number.isRequired
|
10779 | } ;
|
10780 |
|
10781 | var DURATION = 550;
|
10782 | var DELAY_RIPPLE = 80;
|
10783 | var styles$6 = function styles(theme) {
|
10784 | return {
|
10785 |
|
10786 | root: {
|
10787 | overflow: 'hidden',
|
10788 | pointerEvents: 'none',
|
10789 | position: 'absolute',
|
10790 | zIndex: 0,
|
10791 | top: 0,
|
10792 | right: 0,
|
10793 | bottom: 0,
|
10794 | left: 0,
|
10795 | borderRadius: 'inherit'
|
10796 | },
|
10797 |
|
10798 |
|
10799 | ripple: {
|
10800 | opacity: 0,
|
10801 | position: 'absolute'
|
10802 | },
|
10803 |
|
10804 |
|
10805 | rippleVisible: {
|
10806 | opacity: 0.3,
|
10807 | transform: 'scale(1)',
|
10808 | animation: "$enter ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut)
|
10809 | },
|
10810 |
|
10811 |
|
10812 | ripplePulsate: {
|
10813 | animationDuration: "".concat(theme.transitions.duration.shorter, "ms")
|
10814 | },
|
10815 |
|
10816 |
|
10817 | child: {
|
10818 | opacity: 1,
|
10819 | display: 'block',
|
10820 | width: '100%',
|
10821 | height: '100%',
|
10822 | borderRadius: '50%',
|
10823 | backgroundColor: 'currentColor'
|
10824 | },
|
10825 |
|
10826 |
|
10827 | childLeaving: {
|
10828 | opacity: 0,
|
10829 | animation: "$exit ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut)
|
10830 | },
|
10831 |
|
10832 |
|
10833 | childPulsate: {
|
10834 | position: 'absolute',
|
10835 | left: 0,
|
10836 | top: 0,
|
10837 | animation: "$pulsate 2500ms ".concat(theme.transitions.easing.easeInOut, " 200ms infinite")
|
10838 | },
|
10839 | '@keyframes enter': {
|
10840 | '0%': {
|
10841 | transform: 'scale(0)',
|
10842 | opacity: 0.1
|
10843 | },
|
10844 | '100%': {
|
10845 | transform: 'scale(1)',
|
10846 | opacity: 0.3
|
10847 | }
|
10848 | },
|
10849 | '@keyframes exit': {
|
10850 | '0%': {
|
10851 | opacity: 1
|
10852 | },
|
10853 | '100%': {
|
10854 | opacity: 0
|
10855 | }
|
10856 | },
|
10857 | '@keyframes pulsate': {
|
10858 | '0%': {
|
10859 | transform: 'scale(1)'
|
10860 | },
|
10861 | '50%': {
|
10862 | transform: 'scale(0.92)'
|
10863 | },
|
10864 | '100%': {
|
10865 | transform: 'scale(1)'
|
10866 | }
|
10867 | }
|
10868 | };
|
10869 | };
|
10870 | |
10871 |
|
10872 |
|
10873 |
|
10874 |
|
10875 |
|
10876 | var TouchRipple = React.forwardRef(function TouchRipple(props, ref) {
|
10877 | var _props$center = props.center,
|
10878 | centerProp = _props$center === void 0 ? false : _props$center,
|
10879 | classes = props.classes,
|
10880 | className = props.className,
|
10881 | other = _objectWithoutProperties(props, ["center", "classes", "className"]);
|
10882 |
|
10883 | var _React$useState = React.useState([]),
|
10884 | ripples = _React$useState[0],
|
10885 | setRipples = _React$useState[1];
|
10886 |
|
10887 | var nextKey = React.useRef(0);
|
10888 | var rippleCallback = React.useRef(null);
|
10889 | React.useEffect(function () {
|
10890 | if (rippleCallback.current) {
|
10891 | rippleCallback.current();
|
10892 | rippleCallback.current = null;
|
10893 | }
|
10894 | }, [ripples]);
|
10895 |
|
10896 | var ignoringMouseDown = React.useRef(false);
|
10897 |
|
10898 |
|
10899 | var startTimer = React.useRef(null);
|
10900 |
|
10901 | var startTimerCommit = React.useRef(null);
|
10902 | var container = React.useRef(null);
|
10903 | React.useEffect(function () {
|
10904 | return function () {
|
10905 | clearTimeout(startTimer.current);
|
10906 | };
|
10907 | }, []);
|
10908 | var startCommit = React.useCallback(function (params) {
|
10909 | var pulsate = params.pulsate,
|
10910 | rippleX = params.rippleX,
|
10911 | rippleY = params.rippleY,
|
10912 | rippleSize = params.rippleSize,
|
10913 | cb = params.cb;
|
10914 | setRipples(function (oldRipples) {
|
10915 | return [].concat(_toConsumableArray(oldRipples), [React.createElement(Ripple, {
|
10916 | key: nextKey.current,
|
10917 | classes: classes,
|
10918 | timeout: DURATION,
|
10919 | pulsate: pulsate,
|
10920 | rippleX: rippleX,
|
10921 | rippleY: rippleY,
|
10922 | rippleSize: rippleSize
|
10923 | })]);
|
10924 | });
|
10925 | nextKey.current += 1;
|
10926 | rippleCallback.current = cb;
|
10927 | }, [classes]);
|
10928 | var start = React.useCallback(function () {
|
10929 | var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
10930 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
10931 | var cb = arguments.length > 2 ? arguments[2] : undefined;
|
10932 | var _options$pulsate = options.pulsate,
|
10933 | pulsate = _options$pulsate === void 0 ? false : _options$pulsate,
|
10934 | _options$center = options.center,
|
10935 | center = _options$center === void 0 ? centerProp || options.pulsate : _options$center,
|
10936 | _options$fakeElement = options.fakeElement,
|
10937 | fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;
|
10938 |
|
10939 | if (event.type === 'mousedown' && ignoringMouseDown.current) {
|
10940 | ignoringMouseDown.current = false;
|
10941 | return;
|
10942 | }
|
10943 |
|
10944 | if (event.type === 'touchstart') {
|
10945 | ignoringMouseDown.current = true;
|
10946 | }
|
10947 |
|
10948 | var element = fakeElement ? null : container.current;
|
10949 | var rect = element ? element.getBoundingClientRect() : {
|
10950 | width: 0,
|
10951 | height: 0,
|
10952 | left: 0,
|
10953 | top: 0
|
10954 | };
|
10955 |
|
10956 | var rippleX;
|
10957 | var rippleY;
|
10958 | var rippleSize;
|
10959 |
|
10960 | if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
|
10961 | rippleX = Math.round(rect.width / 2);
|
10962 | rippleY = Math.round(rect.height / 2);
|
10963 | } else {
|
10964 | var _ref = event.touches ? event.touches[0] : event,
|
10965 | clientX = _ref.clientX,
|
10966 | clientY = _ref.clientY;
|
10967 |
|
10968 | rippleX = Math.round(clientX - rect.left);
|
10969 | rippleY = Math.round(clientY - rect.top);
|
10970 | }
|
10971 |
|
10972 | if (center) {
|
10973 | rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3);
|
10974 |
|
10975 | if (rippleSize % 2 === 0) {
|
10976 | rippleSize += 1;
|
10977 | }
|
10978 | } else {
|
10979 | var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
|
10980 | var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
|
10981 | rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));
|
10982 | }
|
10983 |
|
10984 |
|
10985 | if (event.touches) {
|
10986 |
|
10987 |
|
10988 |
|
10989 | if (startTimerCommit.current === null) {
|
10990 |
|
10991 | startTimerCommit.current = function () {
|
10992 | startCommit({
|
10993 | pulsate: pulsate,
|
10994 | rippleX: rippleX,
|
10995 | rippleY: rippleY,
|
10996 | rippleSize: rippleSize,
|
10997 | cb: cb
|
10998 | });
|
10999 | };
|
11000 |
|
11001 |
|
11002 | startTimer.current = setTimeout(function () {
|
11003 | if (startTimerCommit.current) {
|
11004 | startTimerCommit.current();
|
11005 | startTimerCommit.current = null;
|
11006 | }
|
11007 | }, DELAY_RIPPLE);
|
11008 | }
|
11009 | } else {
|
11010 | startCommit({
|
11011 | pulsate: pulsate,
|
11012 | rippleX: rippleX,
|
11013 | rippleY: rippleY,
|
11014 | rippleSize: rippleSize,
|
11015 | cb: cb
|
11016 | });
|
11017 | }
|
11018 | }, [centerProp, startCommit]);
|
11019 | var pulsate = React.useCallback(function () {
|
11020 | start({}, {
|
11021 | pulsate: true
|
11022 | });
|
11023 | }, [start]);
|
11024 | var stop = React.useCallback(function (event, cb) {
|
11025 | clearTimeout(startTimer.current);
|
11026 |
|
11027 |
|
11028 | if (event.type === 'touchend' && startTimerCommit.current) {
|
11029 | event.persist();
|
11030 | startTimerCommit.current();
|
11031 | startTimerCommit.current = null;
|
11032 | startTimer.current = setTimeout(function () {
|
11033 | stop(event, cb);
|
11034 | });
|
11035 | return;
|
11036 | }
|
11037 |
|
11038 | startTimerCommit.current = null;
|
11039 | setRipples(function (oldRipples) {
|
11040 | if (oldRipples.length > 0) {
|
11041 | return oldRipples.slice(1);
|
11042 | }
|
11043 |
|
11044 | return oldRipples;
|
11045 | });
|
11046 | rippleCallback.current = cb;
|
11047 | }, []);
|
11048 | React.useImperativeHandle(ref, function () {
|
11049 | return {
|
11050 | pulsate: pulsate,
|
11051 | start: start,
|
11052 | stop: stop
|
11053 | };
|
11054 | }, [pulsate, start, stop]);
|
11055 | return React.createElement("span", _extends({
|
11056 | className: clsx(classes.root, className),
|
11057 | ref: container
|
11058 | }, other), React.createElement(TransitionGroup, {
|
11059 | component: null,
|
11060 | exit: true
|
11061 | }, ripples));
|
11062 | });
|
11063 | TouchRipple.propTypes = {
|
11064 | |
11065 |
|
11066 |
|
11067 |
|
11068 | center: propTypes.bool,
|
11069 |
|
11070 | |
11071 |
|
11072 |
|
11073 |
|
11074 | classes: propTypes.object.isRequired,
|
11075 |
|
11076 | |
11077 |
|
11078 |
|
11079 | className: propTypes.string
|
11080 | } ;
|
11081 | var TouchRipple$1 = withStyles$1(styles$6, {
|
11082 | flip: false,
|
11083 | name: 'MuiTouchRipple'
|
11084 | })( React.memo(TouchRipple));
|
11085 |
|
11086 | var styles$7 = {
|
11087 |
|
11088 | root: {
|
11089 | display: 'inline-flex',
|
11090 | alignItems: 'center',
|
11091 | justifyContent: 'center',
|
11092 | position: 'relative',
|
11093 | WebkitTapHighlightColor: 'transparent',
|
11094 | backgroundColor: 'transparent',
|
11095 |
|
11096 |
|
11097 | outline: 0,
|
11098 | border: 0,
|
11099 | margin: 0,
|
11100 |
|
11101 | borderRadius: 0,
|
11102 | padding: 0,
|
11103 |
|
11104 | cursor: 'pointer',
|
11105 | userSelect: 'none',
|
11106 | verticalAlign: 'middle',
|
11107 | '-moz-appearance': 'none',
|
11108 |
|
11109 | '-webkit-appearance': 'none',
|
11110 |
|
11111 | textDecoration: 'none',
|
11112 |
|
11113 | color: 'inherit',
|
11114 | '&::-moz-focus-inner': {
|
11115 | borderStyle: 'none'
|
11116 |
|
11117 | },
|
11118 | '&$disabled': {
|
11119 | pointerEvents: 'none',
|
11120 |
|
11121 | cursor: 'default'
|
11122 | },
|
11123 | '@media print': {
|
11124 | colorAdjust: 'exact'
|
11125 | }
|
11126 | },
|
11127 |
|
11128 |
|
11129 | disabled: {},
|
11130 |
|
11131 |
|
11132 | focusVisible: {}
|
11133 | };
|
11134 | |
11135 |
|
11136 |
|
11137 |
|
11138 |
|
11139 |
|
11140 | var ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
|
11141 | var action = props.action,
|
11142 | buttonRefProp = props.buttonRef,
|
11143 | _props$centerRipple = props.centerRipple,
|
11144 | centerRipple = _props$centerRipple === void 0 ? false : _props$centerRipple,
|
11145 | children = props.children,
|
11146 | classes = props.classes,
|
11147 | className = props.className,
|
11148 | _props$component = props.component,
|
11149 | component = _props$component === void 0 ? 'button' : _props$component,
|
11150 | _props$disabled = props.disabled,
|
11151 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
11152 | _props$disableRipple = props.disableRipple,
|
11153 | disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,
|
11154 | _props$disableTouchRi = props.disableTouchRipple,
|
11155 | disableTouchRipple = _props$disableTouchRi === void 0 ? false : _props$disableTouchRi,
|
11156 | _props$focusRipple = props.focusRipple,
|
11157 | focusRipple = _props$focusRipple === void 0 ? false : _props$focusRipple,
|
11158 | focusVisibleClassName = props.focusVisibleClassName,
|
11159 | onBlur = props.onBlur,
|
11160 | onClick = props.onClick,
|
11161 | onFocus = props.onFocus,
|
11162 | onFocusVisible = props.onFocusVisible,
|
11163 | onKeyDown = props.onKeyDown,
|
11164 | onKeyUp = props.onKeyUp,
|
11165 | onMouseDown = props.onMouseDown,
|
11166 | onMouseLeave = props.onMouseLeave,
|
11167 | onMouseUp = props.onMouseUp,
|
11168 | onTouchEnd = props.onTouchEnd,
|
11169 | onTouchMove = props.onTouchMove,
|
11170 | onTouchStart = props.onTouchStart,
|
11171 | onDragLeave = props.onDragLeave,
|
11172 | _props$tabIndex = props.tabIndex,
|
11173 | tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
|
11174 | TouchRippleProps = props.TouchRippleProps,
|
11175 | _props$type = props.type,
|
11176 | type = _props$type === void 0 ? 'button' : _props$type,
|
11177 | 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"]);
|
11178 |
|
11179 | var buttonRef = React.useRef(null);
|
11180 |
|
11181 | function getButtonNode() {
|
11182 |
|
11183 | return ReactDOM.findDOMNode(buttonRef.current);
|
11184 | }
|
11185 |
|
11186 | var rippleRef = React.useRef(null);
|
11187 |
|
11188 | var _React$useState = React.useState(false),
|
11189 | focusVisible = _React$useState[0],
|
11190 | setFocusVisible = _React$useState[1];
|
11191 |
|
11192 | if (disabled && focusVisible) {
|
11193 | setFocusVisible(false);
|
11194 | }
|
11195 |
|
11196 | var _useIsFocusVisible = useIsFocusVisible(),
|
11197 | isFocusVisible = _useIsFocusVisible.isFocusVisible,
|
11198 | onBlurVisible = _useIsFocusVisible.onBlurVisible,
|
11199 | focusVisibleRef = _useIsFocusVisible.ref;
|
11200 |
|
11201 | React.useImperativeHandle(action, function () {
|
11202 | return {
|
11203 | focusVisible: function focusVisible() {
|
11204 | setFocusVisible(true);
|
11205 | buttonRef.current.focus();
|
11206 | }
|
11207 | };
|
11208 | }, []);
|
11209 | React.useEffect(function () {
|
11210 | if (focusVisible && focusRipple && !disableRipple) {
|
11211 | rippleRef.current.pulsate();
|
11212 | }
|
11213 | }, [disableRipple, focusRipple, focusVisible]);
|
11214 |
|
11215 | function useRippleHandler(rippleAction, eventCallback) {
|
11216 | var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple;
|
11217 | return useEventCallback(function (event) {
|
11218 | if (eventCallback) {
|
11219 | eventCallback(event);
|
11220 | }
|
11221 |
|
11222 | var ignore = skipRippleAction;
|
11223 |
|
11224 | if (!ignore && rippleRef.current) {
|
11225 | rippleRef.current[rippleAction](event);
|
11226 | }
|
11227 |
|
11228 | return true;
|
11229 | });
|
11230 | }
|
11231 |
|
11232 | var handleMouseDown = useRippleHandler('start', onMouseDown);
|
11233 | var handleDragLeave = useRippleHandler('stop', onDragLeave);
|
11234 | var handleMouseUp = useRippleHandler('stop', onMouseUp);
|
11235 | var handleMouseLeave = useRippleHandler('stop', function (event) {
|
11236 | if (focusVisible) {
|
11237 | event.preventDefault();
|
11238 | }
|
11239 |
|
11240 | if (onMouseLeave) {
|
11241 | onMouseLeave(event);
|
11242 | }
|
11243 | });
|
11244 | var handleTouchStart = useRippleHandler('start', onTouchStart);
|
11245 | var handleTouchEnd = useRippleHandler('stop', onTouchEnd);
|
11246 | var handleTouchMove = useRippleHandler('stop', onTouchMove);
|
11247 | var handleBlur = useRippleHandler('stop', function (event) {
|
11248 | if (focusVisible) {
|
11249 | onBlurVisible(event);
|
11250 | setFocusVisible(false);
|
11251 | }
|
11252 |
|
11253 | if (onBlur) {
|
11254 | onBlur(event);
|
11255 | }
|
11256 | }, false);
|
11257 | var handleFocus = useEventCallback(function (event) {
|
11258 |
|
11259 | if (!buttonRef.current) {
|
11260 | buttonRef.current = event.currentTarget;
|
11261 | }
|
11262 |
|
11263 | if (isFocusVisible(event)) {
|
11264 | setFocusVisible(true);
|
11265 |
|
11266 | if (onFocusVisible) {
|
11267 | onFocusVisible(event);
|
11268 | }
|
11269 | }
|
11270 |
|
11271 | if (onFocus) {
|
11272 | onFocus(event);
|
11273 | }
|
11274 | });
|
11275 |
|
11276 | var isNonNativeButton = function isNonNativeButton() {
|
11277 | var button = getButtonNode();
|
11278 | return component && component !== 'button' && !(button.tagName === 'A' && button.href);
|
11279 | };
|
11280 | |
11281 |
|
11282 |
|
11283 |
|
11284 |
|
11285 | var keydownRef = React.useRef(false);
|
11286 | var handleKeyDown = useEventCallback(function (event) {
|
11287 |
|
11288 | if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
|
11289 | keydownRef.current = true;
|
11290 | event.persist();
|
11291 | rippleRef.current.stop(event, function () {
|
11292 | rippleRef.current.start(event);
|
11293 | });
|
11294 | }
|
11295 |
|
11296 | if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
|
11297 | event.preventDefault();
|
11298 | }
|
11299 |
|
11300 | if (onKeyDown) {
|
11301 | onKeyDown(event);
|
11302 | }
|
11303 |
|
11304 |
|
11305 | if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
|
11306 | event.preventDefault();
|
11307 |
|
11308 | if (onClick) {
|
11309 | onClick(event);
|
11310 | }
|
11311 | }
|
11312 | });
|
11313 | var handleKeyUp = useEventCallback(function (event) {
|
11314 |
|
11315 |
|
11316 | if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
|
11317 | keydownRef.current = false;
|
11318 | event.persist();
|
11319 | rippleRef.current.stop(event, function () {
|
11320 | rippleRef.current.pulsate(event);
|
11321 | });
|
11322 | }
|
11323 |
|
11324 | if (onKeyUp) {
|
11325 | onKeyUp(event);
|
11326 | }
|
11327 |
|
11328 |
|
11329 | if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
|
11330 | onClick(event);
|
11331 | }
|
11332 | });
|
11333 | var ComponentProp = component;
|
11334 |
|
11335 | if (ComponentProp === 'button' && other.href) {
|
11336 | ComponentProp = 'a';
|
11337 | }
|
11338 |
|
11339 | var buttonProps = {};
|
11340 |
|
11341 | if (ComponentProp === 'button') {
|
11342 | buttonProps.type = type;
|
11343 | buttonProps.disabled = disabled;
|
11344 | } else {
|
11345 | if (ComponentProp !== 'a' || !other.href) {
|
11346 | buttonProps.role = 'button';
|
11347 | }
|
11348 |
|
11349 | buttonProps['aria-disabled'] = disabled;
|
11350 | }
|
11351 |
|
11352 | var handleUserRef = useForkRef(buttonRefProp, ref);
|
11353 | var handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
|
11354 | var handleRef = useForkRef(handleUserRef, handleOwnRef);
|
11355 |
|
11356 | var _React$useState2 = React.useState(false),
|
11357 | mountedState = _React$useState2[0],
|
11358 | setMountedState = _React$useState2[1];
|
11359 |
|
11360 | React.useEffect(function () {
|
11361 | setMountedState(true);
|
11362 | }, []);
|
11363 | var enableTouchRipple = mountedState && !disableRipple && !disabled;
|
11364 |
|
11365 | {
|
11366 |
|
11367 | React.useEffect(function () {
|
11368 | if (enableTouchRipple && !rippleRef.current) {
|
11369 | console.error(['Material-UI: The `component` prop provided to ButtonBase is invalid.', 'Please make sure the children prop is rendered in this custom component.'].join('\n'));
|
11370 | }
|
11371 | }, [enableTouchRipple]);
|
11372 | }
|
11373 |
|
11374 | return React.createElement(ComponentProp, _extends({
|
11375 | className: clsx(classes.root, className, focusVisible && [classes.focusVisible, focusVisibleClassName], disabled && classes.disabled),
|
11376 | onBlur: handleBlur,
|
11377 | onClick: onClick,
|
11378 | onFocus: handleFocus,
|
11379 | onKeyDown: handleKeyDown,
|
11380 | onKeyUp: handleKeyUp,
|
11381 | onMouseDown: handleMouseDown,
|
11382 | onMouseLeave: handleMouseLeave,
|
11383 | onMouseUp: handleMouseUp,
|
11384 | onDragLeave: handleDragLeave,
|
11385 | onTouchEnd: handleTouchEnd,
|
11386 | onTouchMove: handleTouchMove,
|
11387 | onTouchStart: handleTouchStart,
|
11388 | ref: handleRef,
|
11389 | tabIndex: disabled ? -1 : tabIndex
|
11390 | }, buttonProps, other), children, enableTouchRipple ?
|
11391 |
|
11392 |
|
11393 |
|
11394 | React.createElement(TouchRipple$1, _extends({
|
11395 | ref: rippleRef,
|
11396 | center: centerRipple
|
11397 | }, TouchRippleProps)) : null);
|
11398 | });
|
11399 | ButtonBase.propTypes = {
|
11400 |
|
11401 |
|
11402 |
|
11403 |
|
11404 |
|
11405 | |
11406 |
|
11407 |
|
11408 |
|
11409 | action: refType,
|
11410 |
|
11411 | |
11412 |
|
11413 |
|
11414 |
|
11415 |
|
11416 |
|
11417 | buttonRef: deprecatedPropType(refType, 'Use `ref` instead.'),
|
11418 |
|
11419 | |
11420 |
|
11421 |
|
11422 |
|
11423 | centerRipple: propTypes.bool,
|
11424 |
|
11425 | |
11426 |
|
11427 |
|
11428 | children: propTypes.node,
|
11429 |
|
11430 | |
11431 |
|
11432 |
|
11433 |
|
11434 | classes: propTypes.object,
|
11435 |
|
11436 | |
11437 |
|
11438 |
|
11439 | className: propTypes.string,
|
11440 |
|
11441 | |
11442 |
|
11443 |
|
11444 |
|
11445 | component: elementTypeAcceptingRef$1,
|
11446 |
|
11447 | |
11448 |
|
11449 |
|
11450 | disabled: propTypes.bool,
|
11451 |
|
11452 | |
11453 |
|
11454 |
|
11455 |
|
11456 |
|
11457 |
|
11458 | disableRipple: propTypes.bool,
|
11459 |
|
11460 | |
11461 |
|
11462 |
|
11463 | disableTouchRipple: propTypes.bool,
|
11464 |
|
11465 | |
11466 |
|
11467 |
|
11468 | focusRipple: propTypes.bool,
|
11469 |
|
11470 | |
11471 |
|
11472 |
|
11473 |
|
11474 |
|
11475 |
|
11476 |
|
11477 |
|
11478 | focusVisibleClassName: propTypes.string,
|
11479 |
|
11480 | |
11481 |
|
11482 |
|
11483 | href: propTypes.string,
|
11484 |
|
11485 | |
11486 |
|
11487 |
|
11488 | onBlur: propTypes.func,
|
11489 |
|
11490 | |
11491 |
|
11492 |
|
11493 | onClick: propTypes.func,
|
11494 |
|
11495 | |
11496 |
|
11497 |
|
11498 | onDragLeave: propTypes.func,
|
11499 |
|
11500 | |
11501 |
|
11502 |
|
11503 | onFocus: propTypes.func,
|
11504 |
|
11505 | |
11506 |
|
11507 |
|
11508 |
|
11509 | onFocusVisible: propTypes.func,
|
11510 |
|
11511 | |
11512 |
|
11513 |
|
11514 | onKeyDown: propTypes.func,
|
11515 |
|
11516 | |
11517 |
|
11518 |
|
11519 | onKeyUp: propTypes.func,
|
11520 |
|
11521 | |
11522 |
|
11523 |
|
11524 | onMouseDown: propTypes.func,
|
11525 |
|
11526 | |
11527 |
|
11528 |
|
11529 | onMouseLeave: propTypes.func,
|
11530 |
|
11531 | |
11532 |
|
11533 |
|
11534 | onMouseUp: propTypes.func,
|
11535 |
|
11536 | |
11537 |
|
11538 |
|
11539 | onTouchEnd: propTypes.func,
|
11540 |
|
11541 | |
11542 |
|
11543 |
|
11544 | onTouchMove: propTypes.func,
|
11545 |
|
11546 | |
11547 |
|
11548 |
|
11549 | onTouchStart: propTypes.func,
|
11550 |
|
11551 | |
11552 |
|
11553 |
|
11554 | tabIndex: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
11555 |
|
11556 | |
11557 |
|
11558 |
|
11559 | TouchRippleProps: propTypes.object,
|
11560 |
|
11561 | |
11562 |
|
11563 |
|
11564 | type: propTypes.oneOfType([propTypes.oneOf(['button', 'reset', 'submit']), propTypes.string])
|
11565 | } ;
|
11566 | var ButtonBase$1 = withStyles$1(styles$7, {
|
11567 | name: 'MuiButtonBase'
|
11568 | })(ButtonBase);
|
11569 |
|
11570 | var styles$8 = function styles(theme) {
|
11571 | return {
|
11572 |
|
11573 | root: {
|
11574 | textAlign: 'center',
|
11575 | flex: '0 0 auto',
|
11576 | fontSize: theme.typography.pxToRem(24),
|
11577 | padding: 12,
|
11578 | borderRadius: '50%',
|
11579 | overflow: 'visible',
|
11580 |
|
11581 | color: theme.palette.action.active,
|
11582 | transition: theme.transitions.create('background-color', {
|
11583 | duration: theme.transitions.duration.shortest
|
11584 | }),
|
11585 | '&:hover': {
|
11586 | backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
|
11587 |
|
11588 | '@media (hover: none)': {
|
11589 | backgroundColor: 'transparent'
|
11590 | }
|
11591 | },
|
11592 | '&$disabled': {
|
11593 | backgroundColor: 'transparent',
|
11594 | color: theme.palette.action.disabled
|
11595 | }
|
11596 | },
|
11597 |
|
11598 |
|
11599 | edgeStart: {
|
11600 | marginLeft: -12,
|
11601 | '$sizeSmall&': {
|
11602 | marginLeft: -3
|
11603 | }
|
11604 | },
|
11605 |
|
11606 |
|
11607 | edgeEnd: {
|
11608 | marginRight: -12,
|
11609 | '$sizeSmall&': {
|
11610 | marginRight: -3
|
11611 | }
|
11612 | },
|
11613 |
|
11614 |
|
11615 | colorInherit: {
|
11616 | color: 'inherit'
|
11617 | },
|
11618 |
|
11619 |
|
11620 | colorPrimary: {
|
11621 | color: theme.palette.primary.main,
|
11622 | '&:hover': {
|
11623 | backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
11624 |
|
11625 | '@media (hover: none)': {
|
11626 | backgroundColor: 'transparent'
|
11627 | }
|
11628 | }
|
11629 | },
|
11630 |
|
11631 |
|
11632 | colorSecondary: {
|
11633 | color: theme.palette.secondary.main,
|
11634 | '&:hover': {
|
11635 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
11636 |
|
11637 | '@media (hover: none)': {
|
11638 | backgroundColor: 'transparent'
|
11639 | }
|
11640 | }
|
11641 | },
|
11642 |
|
11643 |
|
11644 | disabled: {},
|
11645 |
|
11646 |
|
11647 | sizeSmall: {
|
11648 | padding: 3,
|
11649 | fontSize: theme.typography.pxToRem(18)
|
11650 | },
|
11651 |
|
11652 |
|
11653 | label: {
|
11654 | width: '100%',
|
11655 | display: 'flex',
|
11656 | alignItems: 'inherit',
|
11657 | justifyContent: 'inherit'
|
11658 | }
|
11659 | };
|
11660 | };
|
11661 | |
11662 |
|
11663 |
|
11664 |
|
11665 |
|
11666 | var IconButton = React.forwardRef(function IconButton(props, ref) {
|
11667 | var _props$edge = props.edge,
|
11668 | edge = _props$edge === void 0 ? false : _props$edge,
|
11669 | children = props.children,
|
11670 | classes = props.classes,
|
11671 | className = props.className,
|
11672 | _props$color = props.color,
|
11673 | color = _props$color === void 0 ? 'default' : _props$color,
|
11674 | _props$disabled = props.disabled,
|
11675 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
11676 | _props$disableFocusRi = props.disableFocusRipple,
|
11677 | disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
|
11678 | _props$size = props.size,
|
11679 | size = _props$size === void 0 ? 'medium' : _props$size,
|
11680 | other = _objectWithoutProperties(props, ["edge", "children", "classes", "className", "color", "disabled", "disableFocusRipple", "size"]);
|
11681 |
|
11682 | return React.createElement(ButtonBase$1, _extends({
|
11683 | className: clsx(classes.root, className, color !== 'default' && classes["color".concat(capitalize(color))], disabled && classes.disabled, size === "small" && classes["size".concat(capitalize(size))], {
|
11684 | 'start': classes.edgeStart,
|
11685 | 'end': classes.edgeEnd
|
11686 | }[edge]),
|
11687 | centerRipple: true,
|
11688 | focusRipple: !disableFocusRipple,
|
11689 | disabled: disabled,
|
11690 | ref: ref
|
11691 | }, other), React.createElement("span", {
|
11692 | className: classes.label
|
11693 | }, children));
|
11694 | });
|
11695 | IconButton.propTypes = {
|
11696 | |
11697 |
|
11698 |
|
11699 | children: chainPropTypes(propTypes.node, function (props) {
|
11700 | var found = React.Children.toArray(props.children).some(function (child) {
|
11701 | return React.isValidElement(child) && child.props.onClick;
|
11702 | });
|
11703 |
|
11704 | if (found) {
|
11705 | 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'));
|
11706 | }
|
11707 |
|
11708 | return null;
|
11709 | }),
|
11710 |
|
11711 | |
11712 |
|
11713 |
|
11714 |
|
11715 | classes: propTypes.object.isRequired,
|
11716 |
|
11717 | |
11718 |
|
11719 |
|
11720 | className: propTypes.string,
|
11721 |
|
11722 | |
11723 |
|
11724 |
|
11725 | color: propTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
11726 |
|
11727 | |
11728 |
|
11729 |
|
11730 | disabled: propTypes.bool,
|
11731 |
|
11732 | |
11733 |
|
11734 |
|
11735 | disableFocusRipple: propTypes.bool,
|
11736 |
|
11737 | |
11738 |
|
11739 |
|
11740 | disableRipple: propTypes.bool,
|
11741 |
|
11742 | |
11743 |
|
11744 |
|
11745 |
|
11746 |
|
11747 |
|
11748 | edge: propTypes.oneOf(['start', 'end', false]),
|
11749 |
|
11750 | |
11751 |
|
11752 |
|
11753 |
|
11754 | size: propTypes.oneOf(['small', 'medium'])
|
11755 | } ;
|
11756 | var IconButton$1 = withStyles$1(styles$8, {
|
11757 | name: 'MuiIconButton'
|
11758 | })(IconButton);
|
11759 |
|
11760 | var styles$9 = function styles(theme) {
|
11761 | var transition = {
|
11762 | duration: theme.transitions.duration.shortest
|
11763 | };
|
11764 | return {
|
11765 |
|
11766 | root: {
|
11767 | display: 'flex',
|
11768 | minHeight: 8 * 6,
|
11769 | transition: theme.transitions.create(['min-height', 'background-color'], transition),
|
11770 | padding: theme.spacing(0, 2),
|
11771 | '&:hover:not($disabled)': {
|
11772 | cursor: 'pointer'
|
11773 | },
|
11774 | '&$expanded': {
|
11775 | minHeight: 64
|
11776 | },
|
11777 | '&$focused, &$focusVisible': {
|
11778 | backgroundColor: theme.palette.action.focus
|
11779 | },
|
11780 | '&$disabled': {
|
11781 | opacity: theme.palette.action.disabledOpacity
|
11782 | }
|
11783 | },
|
11784 |
|
11785 |
|
11786 | expanded: {},
|
11787 |
|
11788 |
|
11789 | focused: {},
|
11790 |
|
11791 |
|
11792 | focusVisible: {},
|
11793 |
|
11794 |
|
11795 | disabled: {},
|
11796 |
|
11797 |
|
11798 | content: {
|
11799 | display: 'flex',
|
11800 | flexGrow: 1,
|
11801 | transition: theme.transitions.create(['margin'], transition),
|
11802 | margin: '12px 0',
|
11803 | '&$expanded': {
|
11804 | margin: '20px 0'
|
11805 | }
|
11806 | },
|
11807 |
|
11808 |
|
11809 | expandIcon: {
|
11810 | transform: 'rotate(0deg)',
|
11811 | transition: theme.transitions.create('transform', transition),
|
11812 | '&:hover': {
|
11813 |
|
11814 |
|
11815 |
|
11816 | backgroundColor: 'transparent'
|
11817 | },
|
11818 | '&$expanded': {
|
11819 | transform: 'rotate(180deg)'
|
11820 | }
|
11821 | }
|
11822 | };
|
11823 | };
|
11824 | var AccordionSummary = React.forwardRef(function AccordionSummary(props, ref) {
|
11825 | var children = props.children,
|
11826 | classes = props.classes,
|
11827 | className = props.className,
|
11828 | expandIcon = props.expandIcon,
|
11829 | focusVisibleClassName = props.focusVisibleClassName,
|
11830 | _props$IconButtonProp = props.IconButtonProps,
|
11831 | IconButtonProps = _props$IconButtonProp === void 0 ? {} : _props$IconButtonProp,
|
11832 | onClick = props.onClick,
|
11833 | other = _objectWithoutProperties(props, ["children", "classes", "className", "expandIcon", "focusVisibleClassName", "IconButtonProps", "onClick"]);
|
11834 |
|
11835 | var _React$useContext = React.useContext(AccordionContext),
|
11836 | _React$useContext$dis = _React$useContext.disabled,
|
11837 | disabled = _React$useContext$dis === void 0 ? false : _React$useContext$dis,
|
11838 | expanded = _React$useContext.expanded,
|
11839 | toggle = _React$useContext.toggle;
|
11840 |
|
11841 | var handleChange = function handleChange(event) {
|
11842 | if (toggle) {
|
11843 | toggle(event);
|
11844 | }
|
11845 |
|
11846 | if (onClick) {
|
11847 | onClick(event);
|
11848 | }
|
11849 | };
|
11850 |
|
11851 | return React.createElement(ButtonBase$1, _extends({
|
11852 | focusRipple: false,
|
11853 | disableRipple: true,
|
11854 | disabled: disabled,
|
11855 | component: "div",
|
11856 | "aria-expanded": expanded,
|
11857 | className: clsx(classes.root, className, disabled && classes.disabled, expanded && classes.expanded),
|
11858 | focusVisibleClassName: clsx(classes.focusVisible, classes.focused, focusVisibleClassName),
|
11859 | onClick: handleChange,
|
11860 | ref: ref
|
11861 | }, other), React.createElement("div", {
|
11862 | className: clsx(classes.content, expanded && classes.expanded)
|
11863 | }, children), expandIcon && React.createElement(IconButton$1, _extends({
|
11864 | className: clsx(classes.expandIcon, expanded && classes.expanded),
|
11865 | edge: "end",
|
11866 | component: "div",
|
11867 | tabIndex: null,
|
11868 | role: null,
|
11869 | "aria-hidden": true
|
11870 | }, IconButtonProps), expandIcon));
|
11871 | });
|
11872 | AccordionSummary.propTypes = {
|
11873 |
|
11874 |
|
11875 |
|
11876 |
|
11877 |
|
11878 | |
11879 |
|
11880 |
|
11881 | children: propTypes.node,
|
11882 |
|
11883 | |
11884 |
|
11885 |
|
11886 |
|
11887 | classes: chainPropTypes(propTypes.object, function (props) {
|
11888 | if (props.classes.focused.indexOf(' ') !== -1) {
|
11889 | return new Error(['Material-UI: The `classes.focused` key is deprecated.', 'Use `classes.focusVisible` instead.', 'The name of the pseudo-class was changed for consistency.'].join('\n'));
|
11890 | }
|
11891 |
|
11892 | return null;
|
11893 | }),
|
11894 |
|
11895 | |
11896 |
|
11897 |
|
11898 | className: propTypes.string,
|
11899 |
|
11900 | |
11901 |
|
11902 |
|
11903 | expandIcon: propTypes.node,
|
11904 |
|
11905 | |
11906 |
|
11907 |
|
11908 |
|
11909 |
|
11910 |
|
11911 |
|
11912 |
|
11913 | focusVisibleClassName: propTypes.string,
|
11914 |
|
11915 | |
11916 |
|
11917 |
|
11918 | IconButtonProps: propTypes.object,
|
11919 |
|
11920 | |
11921 |
|
11922 |
|
11923 | onClick: propTypes.func
|
11924 | } ;
|
11925 | var AccordionSummary$1 = withStyles$1(styles$9, {
|
11926 | name: 'MuiAccordionSummary'
|
11927 | })(AccordionSummary);
|
11928 |
|
11929 | var styles$a = function styles(theme) {
|
11930 | var backgroundColorDefault = theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
|
11931 | return {
|
11932 |
|
11933 | root: {
|
11934 | display: 'flex',
|
11935 | flexDirection: 'column',
|
11936 | width: '100%',
|
11937 | boxSizing: 'border-box',
|
11938 |
|
11939 | zIndex: theme.zIndex.appBar,
|
11940 | flexShrink: 0
|
11941 | },
|
11942 |
|
11943 |
|
11944 | positionFixed: {
|
11945 | position: 'fixed',
|
11946 | top: 0,
|
11947 | left: 'auto',
|
11948 | right: 0,
|
11949 | '@media print': {
|
11950 |
|
11951 | position: 'absolute'
|
11952 | }
|
11953 | },
|
11954 |
|
11955 |
|
11956 | positionAbsolute: {
|
11957 | position: 'absolute',
|
11958 | top: 0,
|
11959 | left: 'auto',
|
11960 | right: 0
|
11961 | },
|
11962 |
|
11963 |
|
11964 | positionSticky: {
|
11965 |
|
11966 | position: 'sticky',
|
11967 | top: 0,
|
11968 | left: 'auto',
|
11969 | right: 0
|
11970 | },
|
11971 |
|
11972 |
|
11973 | positionStatic: {
|
11974 | position: 'static'
|
11975 | },
|
11976 |
|
11977 |
|
11978 | positionRelative: {
|
11979 | position: 'relative'
|
11980 | },
|
11981 |
|
11982 |
|
11983 | colorDefault: {
|
11984 | backgroundColor: backgroundColorDefault,
|
11985 | color: theme.palette.getContrastText(backgroundColorDefault)
|
11986 | },
|
11987 |
|
11988 |
|
11989 | colorPrimary: {
|
11990 | backgroundColor: theme.palette.primary.main,
|
11991 | color: theme.palette.primary.contrastText
|
11992 | },
|
11993 |
|
11994 |
|
11995 | colorSecondary: {
|
11996 | backgroundColor: theme.palette.secondary.main,
|
11997 | color: theme.palette.secondary.contrastText
|
11998 | },
|
11999 |
|
12000 |
|
12001 | colorInherit: {
|
12002 | color: 'inherit'
|
12003 | },
|
12004 |
|
12005 |
|
12006 | colorTransparent: {
|
12007 | backgroundColor: 'transparent',
|
12008 | color: 'inherit'
|
12009 | }
|
12010 | };
|
12011 | };
|
12012 | var AppBar = React.forwardRef(function AppBar(props, ref) {
|
12013 | var classes = props.classes,
|
12014 | className = props.className,
|
12015 | _props$color = props.color,
|
12016 | color = _props$color === void 0 ? 'primary' : _props$color,
|
12017 | _props$position = props.position,
|
12018 | position = _props$position === void 0 ? 'fixed' : _props$position,
|
12019 | other = _objectWithoutProperties(props, ["classes", "className", "color", "position"]);
|
12020 |
|
12021 | return React.createElement(Paper$1, _extends({
|
12022 | square: true,
|
12023 | component: "header",
|
12024 | elevation: 4,
|
12025 | className: clsx(classes.root, classes["position".concat(capitalize(position))], classes["color".concat(capitalize(color))], className, position === 'fixed' && 'mui-fixed'),
|
12026 | ref: ref
|
12027 | }, other));
|
12028 | });
|
12029 | AppBar.propTypes = {
|
12030 |
|
12031 |
|
12032 |
|
12033 |
|
12034 |
|
12035 | |
12036 |
|
12037 |
|
12038 | children: propTypes.node,
|
12039 |
|
12040 | |
12041 |
|
12042 |
|
12043 |
|
12044 | classes: propTypes.object,
|
12045 |
|
12046 | |
12047 |
|
12048 |
|
12049 | className: propTypes.string,
|
12050 |
|
12051 | |
12052 |
|
12053 |
|
12054 | color: propTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']),
|
12055 |
|
12056 | |
12057 |
|
12058 |
|
12059 |
|
12060 |
|
12061 | position: propTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky'])
|
12062 | } ;
|
12063 | var AppBar$1 = withStyles$1(styles$a, {
|
12064 | name: 'MuiAppBar'
|
12065 | })(AppBar);
|
12066 |
|
12067 | |
12068 |
|
12069 |
|
12070 |
|
12071 | var Person = createSvgIcon( React.createElement("path", {
|
12072 | 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"
|
12073 | }), 'Person');
|
12074 |
|
12075 | var styles$b = function styles(theme) {
|
12076 | return {
|
12077 |
|
12078 | root: {
|
12079 | position: 'relative',
|
12080 | display: 'flex',
|
12081 | alignItems: 'center',
|
12082 | justifyContent: 'center',
|
12083 | flexShrink: 0,
|
12084 | width: 40,
|
12085 | height: 40,
|
12086 | fontFamily: theme.typography.fontFamily,
|
12087 | fontSize: theme.typography.pxToRem(20),
|
12088 | lineHeight: 1,
|
12089 | borderRadius: '50%',
|
12090 | overflow: 'hidden',
|
12091 | userSelect: 'none'
|
12092 | },
|
12093 |
|
12094 |
|
12095 | colorDefault: {
|
12096 | color: theme.palette.background.default,
|
12097 | backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
|
12098 | },
|
12099 |
|
12100 |
|
12101 | circle: {},
|
12102 |
|
12103 |
|
12104 | circular: {},
|
12105 |
|
12106 |
|
12107 | rounded: {
|
12108 | borderRadius: theme.shape.borderRadius
|
12109 | },
|
12110 |
|
12111 |
|
12112 | square: {
|
12113 | borderRadius: 0
|
12114 | },
|
12115 |
|
12116 |
|
12117 | img: {
|
12118 | width: '100%',
|
12119 | height: '100%',
|
12120 | textAlign: 'center',
|
12121 |
|
12122 | objectFit: 'cover',
|
12123 |
|
12124 | color: 'transparent',
|
12125 |
|
12126 | textIndent: 10000
|
12127 | },
|
12128 |
|
12129 |
|
12130 | fallback: {
|
12131 | width: '75%',
|
12132 | height: '75%'
|
12133 | }
|
12134 | };
|
12135 | };
|
12136 |
|
12137 | function useLoaded(_ref) {
|
12138 | var src = _ref.src,
|
12139 | srcSet = _ref.srcSet;
|
12140 |
|
12141 | var _React$useState = React.useState(false),
|
12142 | loaded = _React$useState[0],
|
12143 | setLoaded = _React$useState[1];
|
12144 |
|
12145 | React.useEffect(function () {
|
12146 | if (!src && !srcSet) {
|
12147 | return undefined;
|
12148 | }
|
12149 |
|
12150 | setLoaded(false);
|
12151 | var active = true;
|
12152 | var image = new Image();
|
12153 | image.src = src;
|
12154 | image.srcSet = srcSet;
|
12155 |
|
12156 | image.onload = function () {
|
12157 | if (!active) {
|
12158 | return;
|
12159 | }
|
12160 |
|
12161 | setLoaded('loaded');
|
12162 | };
|
12163 |
|
12164 | image.onerror = function () {
|
12165 | if (!active) {
|
12166 | return;
|
12167 | }
|
12168 |
|
12169 | setLoaded('error');
|
12170 | };
|
12171 |
|
12172 | return function () {
|
12173 | active = false;
|
12174 | };
|
12175 | }, [src, srcSet]);
|
12176 | return loaded;
|
12177 | }
|
12178 |
|
12179 | var Avatar = React.forwardRef(function Avatar(props, ref) {
|
12180 | var alt = props.alt,
|
12181 | childrenProp = props.children,
|
12182 | classes = props.classes,
|
12183 | className = props.className,
|
12184 | _props$component = props.component,
|
12185 | Component = _props$component === void 0 ? 'div' : _props$component,
|
12186 | imgProps = props.imgProps,
|
12187 | sizes = props.sizes,
|
12188 | src = props.src,
|
12189 | srcSet = props.srcSet,
|
12190 | _props$variant = props.variant,
|
12191 | variant = _props$variant === void 0 ? 'circular' : _props$variant,
|
12192 | other = _objectWithoutProperties(props, ["alt", "children", "classes", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"]);
|
12193 |
|
12194 | var children = null;
|
12195 |
|
12196 | var loaded = useLoaded({
|
12197 | src: src,
|
12198 | srcSet: srcSet
|
12199 | });
|
12200 | var hasImg = src || srcSet;
|
12201 | var hasImgNotFailing = hasImg && loaded !== 'error';
|
12202 |
|
12203 | if (hasImgNotFailing) {
|
12204 | children = React.createElement("img", _extends({
|
12205 | alt: alt,
|
12206 | src: src,
|
12207 | srcSet: srcSet,
|
12208 | sizes: sizes,
|
12209 | className: classes.img
|
12210 | }, imgProps));
|
12211 | } else if (childrenProp != null) {
|
12212 | children = childrenProp;
|
12213 | } else if (hasImg && alt) {
|
12214 | children = alt[0];
|
12215 | } else {
|
12216 | children = React.createElement(Person, {
|
12217 | className: classes.fallback
|
12218 | });
|
12219 | }
|
12220 |
|
12221 | return React.createElement(Component, _extends({
|
12222 | className: clsx(classes.root, classes.system, classes[variant], className, !hasImgNotFailing && classes.colorDefault),
|
12223 | ref: ref
|
12224 | }, other), children);
|
12225 | });
|
12226 | Avatar.propTypes = {
|
12227 |
|
12228 |
|
12229 |
|
12230 |
|
12231 |
|
12232 | |
12233 |
|
12234 |
|
12235 |
|
12236 | alt: propTypes.string,
|
12237 |
|
12238 | |
12239 |
|
12240 |
|
12241 |
|
12242 | children: propTypes.node,
|
12243 |
|
12244 | |
12245 |
|
12246 |
|
12247 |
|
12248 | classes: chainPropTypes(propTypes.object, function (props) {
|
12249 | var classes = props.classes;
|
12250 |
|
12251 | if (classes == null) {
|
12252 | return null;
|
12253 | }
|
12254 |
|
12255 | if (classes.circle != null &&
|
12256 | classes.circle.split(' ').length > 1) {
|
12257 | throw new Error("Material-UI: The `circle` class is deprecated. Use `circular` instead.");
|
12258 | }
|
12259 |
|
12260 | return null;
|
12261 | }),
|
12262 |
|
12263 | |
12264 |
|
12265 |
|
12266 | className: propTypes.string,
|
12267 |
|
12268 | |
12269 |
|
12270 |
|
12271 |
|
12272 | component: propTypes
|
12273 |
|
12274 | .elementType,
|
12275 |
|
12276 | |
12277 |
|
12278 |
|
12279 |
|
12280 | imgProps: propTypes.object,
|
12281 |
|
12282 | |
12283 |
|
12284 |
|
12285 | sizes: propTypes.string,
|
12286 |
|
12287 | |
12288 |
|
12289 |
|
12290 | src: propTypes.string,
|
12291 |
|
12292 | |
12293 |
|
12294 |
|
12295 |
|
12296 | srcSet: propTypes.string,
|
12297 |
|
12298 | |
12299 |
|
12300 |
|
12301 | variant: chainPropTypes(propTypes.oneOf(['circle', 'circular', 'rounded', 'square']), function (props) {
|
12302 | var variant = props.variant;
|
12303 |
|
12304 | if (variant === 'circle') {
|
12305 | throw new Error('Material-UI: `variant="circle"` is deprecated. Use `variant="circular"` instead.');
|
12306 | }
|
12307 |
|
12308 | return null;
|
12309 | })
|
12310 | } ;
|
12311 | var Avatar$1 = withStyles$1(styles$b, {
|
12312 | name: 'MuiAvatar'
|
12313 | })(Avatar);
|
12314 |
|
12315 | var styles$c = {
|
12316 | entering: {
|
12317 | opacity: 1
|
12318 | },
|
12319 | entered: {
|
12320 | opacity: 1
|
12321 | }
|
12322 | };
|
12323 | var defaultTimeout = {
|
12324 | enter: duration.enteringScreen,
|
12325 | exit: duration.leavingScreen
|
12326 | };
|
12327 | |
12328 |
|
12329 |
|
12330 |
|
12331 |
|
12332 | var Fade = React.forwardRef(function Fade(props, ref) {
|
12333 | var children = props.children,
|
12334 | _props$disableStrictM = props.disableStrictModeCompat,
|
12335 | disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,
|
12336 | inProp = props.in,
|
12337 | onEnter = props.onEnter,
|
12338 | onEntered = props.onEntered,
|
12339 | onEntering = props.onEntering,
|
12340 | onExit = props.onExit,
|
12341 | onExited = props.onExited,
|
12342 | onExiting = props.onExiting,
|
12343 | style = props.style,
|
12344 | _props$TransitionComp = props.TransitionComponent,
|
12345 | TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
|
12346 | _props$timeout = props.timeout,
|
12347 | timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,
|
12348 | other = _objectWithoutProperties(props, ["children", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "TransitionComponent", "timeout"]);
|
12349 |
|
12350 | var theme = useTheme$1();
|
12351 | var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
|
12352 | var nodeRef = React.useRef(null);
|
12353 | var foreignRef = useForkRef(children.ref, ref);
|
12354 | var handleRef = useForkRef(enableStrictModeCompat ? nodeRef : undefined, foreignRef);
|
12355 |
|
12356 | var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
|
12357 | return function (nodeOrAppearing, maybeAppearing) {
|
12358 | if (callback) {
|
12359 | var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],
|
12360 | _ref2 = _slicedToArray(_ref, 2),
|
12361 | node = _ref2[0],
|
12362 | isAppearing = _ref2[1];
|
12363 |
|
12364 |
|
12365 | if (isAppearing === undefined) {
|
12366 | callback(node);
|
12367 | } else {
|
12368 | callback(node, isAppearing);
|
12369 | }
|
12370 | }
|
12371 | };
|
12372 | };
|
12373 |
|
12374 | var handleEntering = normalizedTransitionCallback(onEntering);
|
12375 | var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
|
12376 | reflow(node);
|
12377 |
|
12378 | var transitionProps = getTransitionProps({
|
12379 | style: style,
|
12380 | timeout: timeout
|
12381 | }, {
|
12382 | mode: 'enter'
|
12383 | });
|
12384 | node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
|
12385 | node.style.transition = theme.transitions.create('opacity', transitionProps);
|
12386 |
|
12387 | if (onEnter) {
|
12388 | onEnter(node, isAppearing);
|
12389 | }
|
12390 | });
|
12391 | var handleEntered = normalizedTransitionCallback(onEntered);
|
12392 | var handleExiting = normalizedTransitionCallback(onExiting);
|
12393 | var handleExit = normalizedTransitionCallback(function (node) {
|
12394 | var transitionProps = getTransitionProps({
|
12395 | style: style,
|
12396 | timeout: timeout
|
12397 | }, {
|
12398 | mode: 'exit'
|
12399 | });
|
12400 | node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
|
12401 | node.style.transition = theme.transitions.create('opacity', transitionProps);
|
12402 |
|
12403 | if (onExit) {
|
12404 | onExit(node);
|
12405 | }
|
12406 | });
|
12407 | var handleExited = normalizedTransitionCallback(onExited);
|
12408 | return React.createElement(TransitionComponent, _extends({
|
12409 | appear: true,
|
12410 | in: inProp,
|
12411 | nodeRef: enableStrictModeCompat ? nodeRef : undefined,
|
12412 | onEnter: handleEnter,
|
12413 | onEntered: handleEntered,
|
12414 | onEntering: handleEntering,
|
12415 | onExit: handleExit,
|
12416 | onExited: handleExited,
|
12417 | onExiting: handleExiting,
|
12418 | timeout: timeout
|
12419 | }, other), function (state, childProps) {
|
12420 | return React.cloneElement(children, _extends({
|
12421 | style: _extends({
|
12422 | opacity: 0,
|
12423 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
12424 | }, styles$c[state], style, children.props.style),
|
12425 | ref: handleRef
|
12426 | }, childProps));
|
12427 | });
|
12428 | });
|
12429 | Fade.propTypes = {
|
12430 |
|
12431 |
|
12432 |
|
12433 |
|
12434 |
|
12435 | |
12436 |
|
12437 |
|
12438 | children: propTypes.element,
|
12439 |
|
12440 | |
12441 |
|
12442 |
|
12443 |
|
12444 |
|
12445 | disableStrictModeCompat: propTypes.bool,
|
12446 |
|
12447 | |
12448 |
|
12449 |
|
12450 | in: propTypes.bool,
|
12451 |
|
12452 | |
12453 |
|
12454 |
|
12455 | onEnter: propTypes.func,
|
12456 |
|
12457 | |
12458 |
|
12459 |
|
12460 | onEntered: propTypes.func,
|
12461 |
|
12462 | |
12463 |
|
12464 |
|
12465 | onEntering: propTypes.func,
|
12466 |
|
12467 | |
12468 |
|
12469 |
|
12470 | onExit: propTypes.func,
|
12471 |
|
12472 | |
12473 |
|
12474 |
|
12475 | onExited: propTypes.func,
|
12476 |
|
12477 | |
12478 |
|
12479 |
|
12480 | onExiting: propTypes.func,
|
12481 |
|
12482 | |
12483 |
|
12484 |
|
12485 | style: propTypes.object,
|
12486 |
|
12487 | |
12488 |
|
12489 |
|
12490 |
|
12491 | timeout: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
12492 | appear: propTypes.number,
|
12493 | enter: propTypes.number,
|
12494 | exit: propTypes.number
|
12495 | })])
|
12496 | } ;
|
12497 |
|
12498 | var styles$d = {
|
12499 |
|
12500 | root: {
|
12501 |
|
12502 | zIndex: -1,
|
12503 | position: 'fixed',
|
12504 | display: 'flex',
|
12505 | alignItems: 'center',
|
12506 | justifyContent: 'center',
|
12507 | right: 0,
|
12508 | bottom: 0,
|
12509 | top: 0,
|
12510 | left: 0,
|
12511 | backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
12512 | WebkitTapHighlightColor: 'transparent'
|
12513 | },
|
12514 |
|
12515 |
|
12516 | invisible: {
|
12517 | backgroundColor: 'transparent'
|
12518 | }
|
12519 | };
|
12520 | var Backdrop = React.forwardRef(function Backdrop(props, ref) {
|
12521 | var children = props.children,
|
12522 | classes = props.classes,
|
12523 | className = props.className,
|
12524 | _props$invisible = props.invisible,
|
12525 | invisible = _props$invisible === void 0 ? false : _props$invisible,
|
12526 | open = props.open,
|
12527 | transitionDuration = props.transitionDuration,
|
12528 | _props$TransitionComp = props.TransitionComponent,
|
12529 | TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
|
12530 | other = _objectWithoutProperties(props, ["children", "classes", "className", "invisible", "open", "transitionDuration", "TransitionComponent"]);
|
12531 |
|
12532 | return React.createElement(TransitionComponent, _extends({
|
12533 | in: open,
|
12534 | timeout: transitionDuration
|
12535 | }, other), React.createElement("div", {
|
12536 | className: clsx(classes.root, className, invisible && classes.invisible),
|
12537 | "aria-hidden": true,
|
12538 | ref: ref
|
12539 | }, children));
|
12540 | });
|
12541 | Backdrop.propTypes = {
|
12542 |
|
12543 |
|
12544 |
|
12545 |
|
12546 |
|
12547 | |
12548 |
|
12549 |
|
12550 | children: propTypes.node,
|
12551 |
|
12552 | |
12553 |
|
12554 |
|
12555 |
|
12556 | classes: propTypes.object,
|
12557 |
|
12558 | |
12559 |
|
12560 |
|
12561 | className: propTypes.string,
|
12562 |
|
12563 | |
12564 |
|
12565 |
|
12566 |
|
12567 | invisible: propTypes.bool,
|
12568 |
|
12569 | |
12570 |
|
12571 |
|
12572 | open: propTypes.bool.isRequired,
|
12573 |
|
12574 | |
12575 |
|
12576 |
|
12577 |
|
12578 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
12579 | appear: propTypes.number,
|
12580 | enter: propTypes.number,
|
12581 | exit: propTypes.number
|
12582 | })])
|
12583 | } ;
|
12584 | var Backdrop$1 = withStyles$1(styles$d, {
|
12585 | name: 'MuiBackdrop'
|
12586 | })(Backdrop);
|
12587 |
|
12588 | var RADIUS_STANDARD = 10;
|
12589 | var RADIUS_DOT = 4;
|
12590 | var styles$e = function styles(theme) {
|
12591 | return {
|
12592 |
|
12593 | root: {
|
12594 | position: 'relative',
|
12595 | display: 'inline-flex',
|
12596 |
|
12597 | verticalAlign: 'middle',
|
12598 | flexShrink: 0
|
12599 | },
|
12600 |
|
12601 |
|
12602 | badge: {
|
12603 | display: 'flex',
|
12604 | flexDirection: 'row',
|
12605 | flexWrap: 'wrap',
|
12606 | justifyContent: 'center',
|
12607 | alignContent: 'center',
|
12608 | alignItems: 'center',
|
12609 | position: 'absolute',
|
12610 | boxSizing: 'border-box',
|
12611 | fontFamily: theme.typography.fontFamily,
|
12612 | fontWeight: theme.typography.fontWeightMedium,
|
12613 | fontSize: theme.typography.pxToRem(12),
|
12614 | minWidth: RADIUS_STANDARD * 2,
|
12615 | lineHeight: 1,
|
12616 | padding: '0 6px',
|
12617 | height: RADIUS_STANDARD * 2,
|
12618 | borderRadius: RADIUS_STANDARD,
|
12619 | zIndex: 1,
|
12620 |
|
12621 | transition: theme.transitions.create('transform', {
|
12622 | easing: theme.transitions.easing.easeInOut,
|
12623 | duration: theme.transitions.duration.enteringScreen
|
12624 | })
|
12625 | },
|
12626 |
|
12627 |
|
12628 | colorPrimary: {
|
12629 | backgroundColor: theme.palette.primary.main,
|
12630 | color: theme.palette.primary.contrastText
|
12631 | },
|
12632 |
|
12633 |
|
12634 | colorSecondary: {
|
12635 | backgroundColor: theme.palette.secondary.main,
|
12636 | color: theme.palette.secondary.contrastText
|
12637 | },
|
12638 |
|
12639 |
|
12640 | colorError: {
|
12641 | backgroundColor: theme.palette.error.main,
|
12642 | color: theme.palette.error.contrastText
|
12643 | },
|
12644 |
|
12645 |
|
12646 | dot: {
|
12647 | borderRadius: RADIUS_DOT,
|
12648 | height: RADIUS_DOT * 2,
|
12649 | minWidth: RADIUS_DOT * 2,
|
12650 | padding: 0
|
12651 | },
|
12652 |
|
12653 |
|
12654 | anchorOriginTopRightRectangle: {
|
12655 | top: 0,
|
12656 | right: 0,
|
12657 | transform: 'scale(1) translate(50%, -50%)',
|
12658 | transformOrigin: '100% 0%',
|
12659 | '&$invisible': {
|
12660 | transform: 'scale(0) translate(50%, -50%)'
|
12661 | }
|
12662 | },
|
12663 |
|
12664 |
|
12665 | anchorOriginTopRightRectangular: {
|
12666 | top: 0,
|
12667 | right: 0,
|
12668 | transform: 'scale(1) translate(50%, -50%)',
|
12669 | transformOrigin: '100% 0%',
|
12670 | '&$invisible': {
|
12671 | transform: 'scale(0) translate(50%, -50%)'
|
12672 | }
|
12673 | },
|
12674 |
|
12675 |
|
12676 | anchorOriginBottomRightRectangle: {
|
12677 | bottom: 0,
|
12678 | right: 0,
|
12679 | transform: 'scale(1) translate(50%, 50%)',
|
12680 | transformOrigin: '100% 100%',
|
12681 | '&$invisible': {
|
12682 | transform: 'scale(0) translate(50%, 50%)'
|
12683 | }
|
12684 | },
|
12685 |
|
12686 |
|
12687 | anchorOriginBottomRightRectangular: {
|
12688 | bottom: 0,
|
12689 | right: 0,
|
12690 | transform: 'scale(1) translate(50%, 50%)',
|
12691 | transformOrigin: '100% 100%',
|
12692 | '&$invisible': {
|
12693 | transform: 'scale(0) translate(50%, 50%)'
|
12694 | }
|
12695 | },
|
12696 |
|
12697 |
|
12698 | anchorOriginTopLeftRectangle: {
|
12699 | top: 0,
|
12700 | left: 0,
|
12701 | transform: 'scale(1) translate(-50%, -50%)',
|
12702 | transformOrigin: '0% 0%',
|
12703 | '&$invisible': {
|
12704 | transform: 'scale(0) translate(-50%, -50%)'
|
12705 | }
|
12706 | },
|
12707 |
|
12708 |
|
12709 | anchorOriginTopLeftRectangular: {
|
12710 | top: 0,
|
12711 | left: 0,
|
12712 | transform: 'scale(1) translate(-50%, -50%)',
|
12713 | transformOrigin: '0% 0%',
|
12714 | '&$invisible': {
|
12715 | transform: 'scale(0) translate(-50%, -50%)'
|
12716 | }
|
12717 | },
|
12718 |
|
12719 |
|
12720 | anchorOriginBottomLeftRectangle: {
|
12721 | bottom: 0,
|
12722 | left: 0,
|
12723 | transform: 'scale(1) translate(-50%, 50%)',
|
12724 | transformOrigin: '0% 100%',
|
12725 | '&$invisible': {
|
12726 | transform: 'scale(0) translate(-50%, 50%)'
|
12727 | }
|
12728 | },
|
12729 |
|
12730 |
|
12731 | anchorOriginBottomLeftRectangular: {
|
12732 | bottom: 0,
|
12733 | left: 0,
|
12734 | transform: 'scale(1) translate(-50%, 50%)',
|
12735 | transformOrigin: '0% 100%',
|
12736 | '&$invisible': {
|
12737 | transform: 'scale(0) translate(-50%, 50%)'
|
12738 | }
|
12739 | },
|
12740 |
|
12741 |
|
12742 | anchorOriginTopRightCircle: {
|
12743 | top: '14%',
|
12744 | right: '14%',
|
12745 | transform: 'scale(1) translate(50%, -50%)',
|
12746 | transformOrigin: '100% 0%',
|
12747 | '&$invisible': {
|
12748 | transform: 'scale(0) translate(50%, -50%)'
|
12749 | }
|
12750 | },
|
12751 |
|
12752 |
|
12753 | anchorOriginTopRightCircular: {
|
12754 | top: '14%',
|
12755 | right: '14%',
|
12756 | transform: 'scale(1) translate(50%, -50%)',
|
12757 | transformOrigin: '100% 0%',
|
12758 | '&$invisible': {
|
12759 | transform: 'scale(0) translate(50%, -50%)'
|
12760 | }
|
12761 | },
|
12762 |
|
12763 |
|
12764 | anchorOriginBottomRightCircle: {
|
12765 | bottom: '14%',
|
12766 | right: '14%',
|
12767 | transform: 'scale(1) translate(50%, 50%)',
|
12768 | transformOrigin: '100% 100%',
|
12769 | '&$invisible': {
|
12770 | transform: 'scale(0) translate(50%, 50%)'
|
12771 | }
|
12772 | },
|
12773 |
|
12774 |
|
12775 | anchorOriginBottomRightCircular: {
|
12776 | bottom: '14%',
|
12777 | right: '14%',
|
12778 | transform: 'scale(1) translate(50%, 50%)',
|
12779 | transformOrigin: '100% 100%',
|
12780 | '&$invisible': {
|
12781 | transform: 'scale(0) translate(50%, 50%)'
|
12782 | }
|
12783 | },
|
12784 |
|
12785 |
|
12786 | anchorOriginTopLeftCircle: {
|
12787 | top: '14%',
|
12788 | left: '14%',
|
12789 | transform: 'scale(1) translate(-50%, -50%)',
|
12790 | transformOrigin: '0% 0%',
|
12791 | '&$invisible': {
|
12792 | transform: 'scale(0) translate(-50%, -50%)'
|
12793 | }
|
12794 | },
|
12795 |
|
12796 |
|
12797 | anchorOriginTopLeftCircular: {
|
12798 | top: '14%',
|
12799 | left: '14%',
|
12800 | transform: 'scale(1) translate(-50%, -50%)',
|
12801 | transformOrigin: '0% 0%',
|
12802 | '&$invisible': {
|
12803 | transform: 'scale(0) translate(-50%, -50%)'
|
12804 | }
|
12805 | },
|
12806 |
|
12807 |
|
12808 | anchorOriginBottomLeftCircle: {
|
12809 | bottom: '14%',
|
12810 | left: '14%',
|
12811 | transform: 'scale(1) translate(-50%, 50%)',
|
12812 | transformOrigin: '0% 100%',
|
12813 | '&$invisible': {
|
12814 | transform: 'scale(0) translate(-50%, 50%)'
|
12815 | }
|
12816 | },
|
12817 |
|
12818 |
|
12819 | anchorOriginBottomLeftCircular: {
|
12820 | bottom: '14%',
|
12821 | left: '14%',
|
12822 | transform: 'scale(1) translate(-50%, 50%)',
|
12823 | transformOrigin: '0% 100%',
|
12824 | '&$invisible': {
|
12825 | transform: 'scale(0) translate(-50%, 50%)'
|
12826 | }
|
12827 | },
|
12828 |
|
12829 |
|
12830 | invisible: {
|
12831 | transition: theme.transitions.create('transform', {
|
12832 | easing: theme.transitions.easing.easeInOut,
|
12833 | duration: theme.transitions.duration.leavingScreen
|
12834 | })
|
12835 | }
|
12836 | };
|
12837 | };
|
12838 | var Badge = React.forwardRef(function Badge(props, ref) {
|
12839 | var _props$anchorOrigin = props.anchorOrigin,
|
12840 | anchorOrigin = _props$anchorOrigin === void 0 ? {
|
12841 | vertical: 'top',
|
12842 | horizontal: 'right'
|
12843 | } : _props$anchorOrigin,
|
12844 | badgeContent = props.badgeContent,
|
12845 | children = props.children,
|
12846 | classes = props.classes,
|
12847 | className = props.className,
|
12848 | _props$color = props.color,
|
12849 | color = _props$color === void 0 ? 'default' : _props$color,
|
12850 | _props$component = props.component,
|
12851 | ComponentProp = _props$component === void 0 ? 'span' : _props$component,
|
12852 | invisibleProp = props.invisible,
|
12853 | _props$max = props.max,
|
12854 | max = _props$max === void 0 ? 99 : _props$max,
|
12855 | _props$overlap = props.overlap,
|
12856 | overlap = _props$overlap === void 0 ? 'rectangle' : _props$overlap,
|
12857 | _props$showZero = props.showZero,
|
12858 | showZero = _props$showZero === void 0 ? false : _props$showZero,
|
12859 | _props$variant = props.variant,
|
12860 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
12861 | other = _objectWithoutProperties(props, ["anchorOrigin", "badgeContent", "children", "classes", "className", "color", "component", "invisible", "max", "overlap", "showZero", "variant"]);
|
12862 |
|
12863 | var invisible = invisibleProp;
|
12864 |
|
12865 | if (invisibleProp == null && (badgeContent === 0 && !showZero || badgeContent == null && variant !== 'dot')) {
|
12866 | invisible = true;
|
12867 | }
|
12868 |
|
12869 | var displayValue = '';
|
12870 |
|
12871 | if (variant !== 'dot') {
|
12872 | displayValue = badgeContent > max ? "".concat(max, "+") : badgeContent;
|
12873 | }
|
12874 |
|
12875 | return React.createElement(ComponentProp, _extends({
|
12876 | className: clsx(classes.root, className),
|
12877 | ref: ref
|
12878 | }, other), children, React.createElement("span", {
|
12879 | 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, variant === 'dot' && classes.dot)
|
12880 | }, displayValue));
|
12881 | });
|
12882 | Badge.propTypes = {
|
12883 |
|
12884 |
|
12885 |
|
12886 |
|
12887 |
|
12888 | |
12889 |
|
12890 |
|
12891 | anchorOrigin: propTypes.shape({
|
12892 | horizontal: propTypes.oneOf(['left', 'right']).isRequired,
|
12893 | vertical: propTypes.oneOf(['bottom', 'top']).isRequired
|
12894 | }),
|
12895 |
|
12896 | |
12897 |
|
12898 |
|
12899 | badgeContent: propTypes.node,
|
12900 |
|
12901 | |
12902 |
|
12903 |
|
12904 | children: propTypes.node,
|
12905 |
|
12906 | |
12907 |
|
12908 |
|
12909 |
|
12910 | classes: chainPropTypes(propTypes.object, function (props) {
|
12911 | var classes = props.classes;
|
12912 |
|
12913 | if (classes == null) {
|
12914 | return null;
|
12915 | }
|
12916 |
|
12917 | [['anchorOriginTopRightRectangle', 'anchorOriginTopRightRectangular'], ['anchorOriginBottomRightRectangle', 'anchorOriginBottomRightRectangular'], ['anchorOriginTopLeftRectangle', 'anchorOriginTopLeftRectangular'], ['anchorOriginBottomLeftRectangle', 'anchorOriginBottomLeftRectangular'], ['anchorOriginTopRightCircle', 'anchorOriginTopRightCircular'], ['anchorOriginBottomRightCircle', 'anchorOriginBottomRightCircular'], ['anchorOriginTopLeftCircle', 'anchorOriginTopLeftCircular']].forEach(function (_ref) {
|
12918 | var _ref2 = _slicedToArray(_ref, 2),
|
12919 | deprecatedClassKey = _ref2[0],
|
12920 | newClassKey = _ref2[1];
|
12921 |
|
12922 | if (classes[deprecatedClassKey] != null &&
|
12923 | classes[deprecatedClassKey].split(' ').length > 1) {
|
12924 | throw new Error("Material-UI: The `".concat(deprecatedClassKey, "` class was deprecated. Use `").concat(newClassKey, "` instead."));
|
12925 | }
|
12926 | });
|
12927 | return null;
|
12928 | }),
|
12929 |
|
12930 | |
12931 |
|
12932 |
|
12933 | className: propTypes.string,
|
12934 |
|
12935 | |
12936 |
|
12937 |
|
12938 | color: propTypes.oneOf(['default', 'error', 'primary', 'secondary']),
|
12939 |
|
12940 | |
12941 |
|
12942 |
|
12943 |
|
12944 | component: propTypes
|
12945 |
|
12946 | .elementType,
|
12947 |
|
12948 | |
12949 |
|
12950 |
|
12951 | invisible: propTypes.bool,
|
12952 |
|
12953 | |
12954 |
|
12955 |
|
12956 | max: propTypes.number,
|
12957 |
|
12958 | |
12959 |
|
12960 |
|
12961 | overlap: chainPropTypes(propTypes.oneOf(['circle', 'rectangle', 'circular', 'rectangular']), function (props) {
|
12962 | var overlap = props.overlap;
|
12963 |
|
12964 | if (overlap === 'rectangle') {
|
12965 | throw new Error('Material-UI: `overlap="rectangle"` was deprecated. Use `overlap="rectangular"` instead.');
|
12966 | }
|
12967 |
|
12968 | if (overlap === 'circle') {
|
12969 | throw new Error('Material-UI: `overlap="circle"` was deprecated. Use `overlap="circular"` instead.');
|
12970 | }
|
12971 |
|
12972 | return null;
|
12973 | }),
|
12974 |
|
12975 | |
12976 |
|
12977 |
|
12978 | showZero: propTypes.bool,
|
12979 |
|
12980 | |
12981 |
|
12982 |
|
12983 | variant: propTypes.oneOf(['dot', 'standard'])
|
12984 | } ;
|
12985 | var Badge$1 = withStyles$1(styles$e, {
|
12986 | name: 'MuiBadge'
|
12987 | })(Badge);
|
12988 |
|
12989 | var styles$f = function styles(theme) {
|
12990 | return {
|
12991 |
|
12992 | root: {
|
12993 | display: 'flex',
|
12994 | justifyContent: 'center',
|
12995 | height: 56,
|
12996 | backgroundColor: theme.palette.background.paper
|
12997 | }
|
12998 | };
|
12999 | };
|
13000 | var BottomNavigation = React.forwardRef(function BottomNavigation(props, ref) {
|
13001 | var children = props.children,
|
13002 | classes = props.classes,
|
13003 | className = props.className,
|
13004 | _props$component = props.component,
|
13005 | Component = _props$component === void 0 ? 'div' : _props$component,
|
13006 | onChange = props.onChange,
|
13007 | _props$showLabels = props.showLabels,
|
13008 | showLabels = _props$showLabels === void 0 ? false : _props$showLabels,
|
13009 | value = props.value,
|
13010 | other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "onChange", "showLabels", "value"]);
|
13011 |
|
13012 | return React.createElement(Component, _extends({
|
13013 | className: clsx(classes.root, className),
|
13014 | ref: ref
|
13015 | }, other), React.Children.map(children, function (child, childIndex) {
|
13016 | if (! React.isValidElement(child)) {
|
13017 | return null;
|
13018 | }
|
13019 |
|
13020 | {
|
13021 | if (reactIs_2(child)) {
|
13022 | console.error(["Material-UI: The BottomNavigation component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
13023 | }
|
13024 | }
|
13025 |
|
13026 | var childValue = child.props.value === undefined ? childIndex : child.props.value;
|
13027 | return React.cloneElement(child, {
|
13028 | selected: childValue === value,
|
13029 | showLabel: child.props.showLabel !== undefined ? child.props.showLabel : showLabels,
|
13030 | value: childValue,
|
13031 | onChange: onChange
|
13032 | });
|
13033 | }));
|
13034 | });
|
13035 | BottomNavigation.propTypes = {
|
13036 |
|
13037 |
|
13038 |
|
13039 |
|
13040 |
|
13041 | |
13042 |
|
13043 |
|
13044 | children: propTypes.node,
|
13045 |
|
13046 | |
13047 |
|
13048 |
|
13049 |
|
13050 | classes: propTypes.object,
|
13051 |
|
13052 | |
13053 |
|
13054 |
|
13055 | className: propTypes.string,
|
13056 |
|
13057 | |
13058 |
|
13059 |
|
13060 |
|
13061 | component: propTypes
|
13062 |
|
13063 | .elementType,
|
13064 |
|
13065 | |
13066 |
|
13067 |
|
13068 |
|
13069 |
|
13070 |
|
13071 | onChange: propTypes.func,
|
13072 |
|
13073 | |
13074 |
|
13075 |
|
13076 |
|
13077 | showLabels: propTypes.bool,
|
13078 |
|
13079 | |
13080 |
|
13081 |
|
13082 | value: propTypes.any
|
13083 | } ;
|
13084 | var BottomNavigation$1 = withStyles$1(styles$f, {
|
13085 | name: 'MuiBottomNavigation'
|
13086 | })(BottomNavigation);
|
13087 |
|
13088 | var styles$g = function styles(theme) {
|
13089 | return {
|
13090 |
|
13091 | root: {
|
13092 | transition: theme.transitions.create(['color', 'padding-top'], {
|
13093 | duration: theme.transitions.duration.short
|
13094 | }),
|
13095 | padding: '6px 12px 8px',
|
13096 | minWidth: 80,
|
13097 | maxWidth: 168,
|
13098 | color: theme.palette.text.secondary,
|
13099 | flex: '1',
|
13100 | '&$iconOnly': {
|
13101 | paddingTop: 16
|
13102 | },
|
13103 | '&$selected': {
|
13104 | paddingTop: 6,
|
13105 | color: theme.palette.primary.main
|
13106 | }
|
13107 | },
|
13108 |
|
13109 |
|
13110 | selected: {},
|
13111 |
|
13112 |
|
13113 | iconOnly: {},
|
13114 |
|
13115 |
|
13116 | wrapper: {
|
13117 | display: 'inline-flex',
|
13118 | alignItems: 'center',
|
13119 | justifyContent: 'center',
|
13120 | width: '100%',
|
13121 | flexDirection: 'column'
|
13122 | },
|
13123 |
|
13124 |
|
13125 | label: {
|
13126 | fontFamily: theme.typography.fontFamily,
|
13127 | fontSize: theme.typography.pxToRem(12),
|
13128 | opacity: 1,
|
13129 | transition: 'font-size 0.2s, opacity 0.2s',
|
13130 | transitionDelay: '0.1s',
|
13131 | '&$iconOnly': {
|
13132 | opacity: 0,
|
13133 | transitionDelay: '0s'
|
13134 | },
|
13135 | '&$selected': {
|
13136 | fontSize: theme.typography.pxToRem(14)
|
13137 | }
|
13138 | }
|
13139 | };
|
13140 | };
|
13141 | var BottomNavigationAction = React.forwardRef(function BottomNavigationAction(props, ref) {
|
13142 | var classes = props.classes,
|
13143 | className = props.className,
|
13144 | icon = props.icon,
|
13145 | label = props.label,
|
13146 | onChange = props.onChange,
|
13147 | onClick = props.onClick,
|
13148 | selected = props.selected,
|
13149 | showLabel = props.showLabel,
|
13150 | value = props.value,
|
13151 | other = _objectWithoutProperties(props, ["classes", "className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"]);
|
13152 |
|
13153 | var handleChange = function handleChange(event) {
|
13154 | if (onChange) {
|
13155 | onChange(event, value);
|
13156 | }
|
13157 |
|
13158 | if (onClick) {
|
13159 | onClick(event);
|
13160 | }
|
13161 | };
|
13162 |
|
13163 | return React.createElement(ButtonBase$1, _extends({
|
13164 | ref: ref,
|
13165 | className: clsx(classes.root, className, selected ? classes.selected : !showLabel && classes.iconOnly),
|
13166 | focusRipple: true,
|
13167 | onClick: handleChange
|
13168 | }, other), React.createElement("span", {
|
13169 | className: classes.wrapper
|
13170 | }, icon, React.createElement("span", {
|
13171 | className: clsx(classes.label, selected ? classes.selected : !showLabel && classes.iconOnly)
|
13172 | }, label)));
|
13173 | });
|
13174 | BottomNavigationAction.propTypes = {
|
13175 |
|
13176 |
|
13177 |
|
13178 |
|
13179 |
|
13180 | |
13181 |
|
13182 |
|
13183 |
|
13184 | children: unsupportedProp,
|
13185 |
|
13186 | |
13187 |
|
13188 |
|
13189 |
|
13190 | classes: propTypes.object,
|
13191 |
|
13192 | |
13193 |
|
13194 |
|
13195 | className: propTypes.string,
|
13196 |
|
13197 | |
13198 |
|
13199 |
|
13200 | icon: propTypes.node,
|
13201 |
|
13202 | |
13203 |
|
13204 |
|
13205 | label: propTypes.node,
|
13206 |
|
13207 | |
13208 |
|
13209 |
|
13210 | onChange: propTypes.func,
|
13211 |
|
13212 | |
13213 |
|
13214 |
|
13215 | onClick: propTypes.func,
|
13216 |
|
13217 | |
13218 |
|
13219 |
|
13220 | selected: propTypes.bool,
|
13221 |
|
13222 | |
13223 |
|
13224 |
|
13225 |
|
13226 |
|
13227 | showLabel: propTypes.bool,
|
13228 |
|
13229 | |
13230 |
|
13231 |
|
13232 | value: propTypes.any
|
13233 | } ;
|
13234 | var BottomNavigationAction$1 = withStyles$1(styles$g, {
|
13235 | name: 'MuiBottomNavigationAction'
|
13236 | })(BottomNavigationAction);
|
13237 |
|
13238 | var styleFunction = styleFunctionSx(compose(borders, display, flexbox, grid, positions, palette, boxShadow, sizing, spacing, typography));
|
13239 | |
13240 |
|
13241 |
|
13242 |
|
13243 | var Box = styled$1('div')(styleFunction, {
|
13244 | name: 'MuiBox'
|
13245 | });
|
13246 |
|
13247 | var styles$h = function styles(theme) {
|
13248 | return {
|
13249 |
|
13250 | root: {
|
13251 | margin: 0
|
13252 | },
|
13253 |
|
13254 |
|
13255 | body2: theme.typography.body2,
|
13256 |
|
13257 |
|
13258 | body1: theme.typography.body1,
|
13259 |
|
13260 |
|
13261 | caption: theme.typography.caption,
|
13262 |
|
13263 |
|
13264 | button: theme.typography.button,
|
13265 |
|
13266 |
|
13267 | h1: theme.typography.h1,
|
13268 |
|
13269 |
|
13270 | h2: theme.typography.h2,
|
13271 |
|
13272 |
|
13273 | h3: theme.typography.h3,
|
13274 |
|
13275 |
|
13276 | h4: theme.typography.h4,
|
13277 |
|
13278 |
|
13279 | h5: theme.typography.h5,
|
13280 |
|
13281 |
|
13282 | h6: theme.typography.h6,
|
13283 |
|
13284 |
|
13285 | subtitle1: theme.typography.subtitle1,
|
13286 |
|
13287 |
|
13288 | subtitle2: theme.typography.subtitle2,
|
13289 |
|
13290 |
|
13291 | overline: theme.typography.overline,
|
13292 |
|
13293 |
|
13294 | srOnly: {
|
13295 | position: 'absolute',
|
13296 | height: 1,
|
13297 | width: 1,
|
13298 | overflow: 'hidden'
|
13299 | },
|
13300 |
|
13301 |
|
13302 | alignLeft: {
|
13303 | textAlign: 'left'
|
13304 | },
|
13305 |
|
13306 |
|
13307 | alignCenter: {
|
13308 | textAlign: 'center'
|
13309 | },
|
13310 |
|
13311 |
|
13312 | alignRight: {
|
13313 | textAlign: 'right'
|
13314 | },
|
13315 |
|
13316 |
|
13317 | alignJustify: {
|
13318 | textAlign: 'justify'
|
13319 | },
|
13320 |
|
13321 |
|
13322 | noWrap: {
|
13323 | overflow: 'hidden',
|
13324 | textOverflow: 'ellipsis',
|
13325 | whiteSpace: 'nowrap'
|
13326 | },
|
13327 |
|
13328 |
|
13329 | gutterBottom: {
|
13330 | marginBottom: '0.35em'
|
13331 | },
|
13332 |
|
13333 |
|
13334 | paragraph: {
|
13335 | marginBottom: 16
|
13336 | },
|
13337 |
|
13338 |
|
13339 | colorInherit: {
|
13340 | color: 'inherit'
|
13341 | },
|
13342 |
|
13343 |
|
13344 | colorPrimary: {
|
13345 | color: theme.palette.primary.main
|
13346 | },
|
13347 |
|
13348 |
|
13349 | colorSecondary: {
|
13350 | color: theme.palette.secondary.main
|
13351 | },
|
13352 |
|
13353 |
|
13354 | colorTextPrimary: {
|
13355 | color: theme.palette.text.primary
|
13356 | },
|
13357 |
|
13358 |
|
13359 | colorTextSecondary: {
|
13360 | color: theme.palette.text.secondary
|
13361 | },
|
13362 |
|
13363 |
|
13364 | colorError: {
|
13365 | color: theme.palette.error.main
|
13366 | },
|
13367 |
|
13368 |
|
13369 | displayInline: {
|
13370 | display: 'inline'
|
13371 | },
|
13372 |
|
13373 |
|
13374 | displayBlock: {
|
13375 | display: 'block'
|
13376 | }
|
13377 | };
|
13378 | };
|
13379 | var defaultVariantMapping = {
|
13380 | h1: 'h1',
|
13381 | h2: 'h2',
|
13382 | h3: 'h3',
|
13383 | h4: 'h4',
|
13384 | h5: 'h5',
|
13385 | h6: 'h6',
|
13386 | subtitle1: 'h6',
|
13387 | subtitle2: 'h6',
|
13388 | body1: 'p',
|
13389 | body2: 'p'
|
13390 | };
|
13391 | var Typography = React.forwardRef(function Typography(props, ref) {
|
13392 | var _props$align = props.align,
|
13393 | align = _props$align === void 0 ? 'inherit' : _props$align,
|
13394 | classes = props.classes,
|
13395 | className = props.className,
|
13396 | _props$color = props.color,
|
13397 | color = _props$color === void 0 ? 'initial' : _props$color,
|
13398 | component = props.component,
|
13399 | _props$display = props.display,
|
13400 | display = _props$display === void 0 ? 'initial' : _props$display,
|
13401 | _props$gutterBottom = props.gutterBottom,
|
13402 | gutterBottom = _props$gutterBottom === void 0 ? false : _props$gutterBottom,
|
13403 | _props$noWrap = props.noWrap,
|
13404 | noWrap = _props$noWrap === void 0 ? false : _props$noWrap,
|
13405 | _props$paragraph = props.paragraph,
|
13406 | paragraph = _props$paragraph === void 0 ? false : _props$paragraph,
|
13407 | _props$variant = props.variant,
|
13408 | variant = _props$variant === void 0 ? 'body1' : _props$variant,
|
13409 | _props$variantMapping = props.variantMapping,
|
13410 | variantMapping = _props$variantMapping === void 0 ? defaultVariantMapping : _props$variantMapping,
|
13411 | other = _objectWithoutProperties(props, ["align", "classes", "className", "color", "component", "display", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"]);
|
13412 |
|
13413 | var Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
|
13414 | return React.createElement(Component, _extends({
|
13415 | 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))]),
|
13416 | ref: ref
|
13417 | }, other));
|
13418 | });
|
13419 | Typography.propTypes = {
|
13420 | |
13421 |
|
13422 |
|
13423 | align: propTypes.oneOf(['inherit', 'left', 'center', 'right', 'justify']),
|
13424 |
|
13425 | |
13426 |
|
13427 |
|
13428 | children: propTypes.node,
|
13429 |
|
13430 | |
13431 |
|
13432 |
|
13433 |
|
13434 | classes: propTypes.object.isRequired,
|
13435 |
|
13436 | |
13437 |
|
13438 |
|
13439 | className: propTypes.string,
|
13440 |
|
13441 | |
13442 |
|
13443 |
|
13444 | color: propTypes.oneOf(['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']),
|
13445 |
|
13446 | |
13447 |
|
13448 |
|
13449 |
|
13450 |
|
13451 | component: propTypes
|
13452 |
|
13453 | .elementType,
|
13454 |
|
13455 | |
13456 |
|
13457 |
|
13458 | display: propTypes.oneOf(['initial', 'block', 'inline']),
|
13459 |
|
13460 | |
13461 |
|
13462 |
|
13463 | gutterBottom: propTypes.bool,
|
13464 |
|
13465 | |
13466 |
|
13467 |
|
13468 |
|
13469 |
|
13470 |
|
13471 | noWrap: propTypes.bool,
|
13472 |
|
13473 | |
13474 |
|
13475 |
|
13476 | paragraph: propTypes.bool,
|
13477 |
|
13478 | |
13479 |
|
13480 |
|
13481 | variant: propTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit']),
|
13482 |
|
13483 | |
13484 |
|
13485 |
|
13486 |
|
13487 |
|
13488 |
|
13489 | variantMapping: propTypes.object
|
13490 | } ;
|
13491 | var Typography$1 = withStyles$1(styles$h, {
|
13492 | name: 'MuiTypography'
|
13493 | })(Typography);
|
13494 |
|
13495 | |
13496 |
|
13497 |
|
13498 |
|
13499 | var MoreHorizIcon = createSvgIcon( React.createElement("path", {
|
13500 | 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"
|
13501 | }), 'MoreHoriz');
|
13502 |
|
13503 | var styles$i = function styles(theme) {
|
13504 | return {
|
13505 | root: {
|
13506 | display: 'flex',
|
13507 | marginLeft: theme.spacing(0.5),
|
13508 | marginRight: theme.spacing(0.5),
|
13509 | backgroundColor: theme.palette.grey[100],
|
13510 | color: theme.palette.grey[700],
|
13511 | borderRadius: 2,
|
13512 | cursor: 'pointer',
|
13513 | '&:hover, &:focus': {
|
13514 | backgroundColor: theme.palette.grey[200]
|
13515 | },
|
13516 | '&:active': {
|
13517 | boxShadow: theme.shadows[0],
|
13518 | backgroundColor: emphasize(theme.palette.grey[200], 0.12)
|
13519 | }
|
13520 | },
|
13521 | icon: {
|
13522 | width: 24,
|
13523 | height: 16
|
13524 | }
|
13525 | };
|
13526 | };
|
13527 | |
13528 |
|
13529 |
|
13530 |
|
13531 |
|
13532 | function BreadcrumbCollapsed(props) {
|
13533 | var classes = props.classes,
|
13534 | other = _objectWithoutProperties(props, ["classes"]);
|
13535 |
|
13536 | return React.createElement(ButtonBase$1, _extends({
|
13537 | component: "li",
|
13538 | className: classes.root,
|
13539 | focusRipple: true
|
13540 | }, other), React.createElement(MoreHorizIcon, {
|
13541 | className: classes.icon
|
13542 | }));
|
13543 | }
|
13544 |
|
13545 | BreadcrumbCollapsed.propTypes = {
|
13546 | |
13547 |
|
13548 |
|
13549 | classes: propTypes.object.isRequired
|
13550 | } ;
|
13551 | var BreadcrumbCollapsed$1 = withStyles$1(styles$i, {
|
13552 | name: 'PrivateBreadcrumbCollapsed'
|
13553 | })(BreadcrumbCollapsed);
|
13554 |
|
13555 | var styles$j = {
|
13556 |
|
13557 | root: {},
|
13558 |
|
13559 |
|
13560 | ol: {
|
13561 | display: 'flex',
|
13562 | flexWrap: 'wrap',
|
13563 | alignItems: 'center',
|
13564 | padding: 0,
|
13565 | margin: 0,
|
13566 | listStyle: 'none'
|
13567 | },
|
13568 |
|
13569 |
|
13570 | li: {},
|
13571 |
|
13572 |
|
13573 | separator: {
|
13574 | display: 'flex',
|
13575 | userSelect: 'none',
|
13576 | marginLeft: 8,
|
13577 | marginRight: 8
|
13578 | }
|
13579 | };
|
13580 |
|
13581 | function insertSeparators(items, className, separator) {
|
13582 | return items.reduce(function (acc, current, index) {
|
13583 | if (index < items.length - 1) {
|
13584 | acc = acc.concat(current, React.createElement("li", {
|
13585 | "aria-hidden": true,
|
13586 | key: "separator-".concat(index),
|
13587 | className: className
|
13588 | }, separator));
|
13589 | } else {
|
13590 | acc.push(current);
|
13591 | }
|
13592 |
|
13593 | return acc;
|
13594 | }, []);
|
13595 | }
|
13596 |
|
13597 | var Breadcrumbs = React.forwardRef(function Breadcrumbs(props, ref) {
|
13598 | var children = props.children,
|
13599 | classes = props.classes,
|
13600 | className = props.className,
|
13601 | _props$component = props.component,
|
13602 | Component = _props$component === void 0 ? 'nav' : _props$component,
|
13603 | _props$expandText = props.expandText,
|
13604 | expandText = _props$expandText === void 0 ? 'Show path' : _props$expandText,
|
13605 | _props$itemsAfterColl = props.itemsAfterCollapse,
|
13606 | itemsAfterCollapse = _props$itemsAfterColl === void 0 ? 1 : _props$itemsAfterColl,
|
13607 | _props$itemsBeforeCol = props.itemsBeforeCollapse,
|
13608 | itemsBeforeCollapse = _props$itemsBeforeCol === void 0 ? 1 : _props$itemsBeforeCol,
|
13609 | _props$maxItems = props.maxItems,
|
13610 | maxItems = _props$maxItems === void 0 ? 8 : _props$maxItems,
|
13611 | _props$separator = props.separator,
|
13612 | separator = _props$separator === void 0 ? '/' : _props$separator,
|
13613 | other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"]);
|
13614 |
|
13615 | var _React$useState = React.useState(false),
|
13616 | expanded = _React$useState[0],
|
13617 | setExpanded = _React$useState[1];
|
13618 |
|
13619 | var renderItemsBeforeAndAfter = function renderItemsBeforeAndAfter(allItems) {
|
13620 | var handleClickExpand = function handleClickExpand(event) {
|
13621 | setExpanded(true);
|
13622 |
|
13623 |
|
13624 | var focusable = event.currentTarget.parentNode.querySelector('a[href],button,[tabindex]');
|
13625 |
|
13626 | if (focusable) {
|
13627 | focusable.focus();
|
13628 | }
|
13629 | };
|
13630 |
|
13631 |
|
13632 |
|
13633 | if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
|
13634 | {
|
13635 | 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'));
|
13636 | }
|
13637 |
|
13638 | return allItems;
|
13639 | }
|
13640 |
|
13641 | return [].concat(_toConsumableArray(allItems.slice(0, itemsBeforeCollapse)), [React.createElement(BreadcrumbCollapsed$1, {
|
13642 | "aria-label": expandText,
|
13643 | key: "ellipsis",
|
13644 | onClick: handleClickExpand
|
13645 | })], _toConsumableArray(allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)));
|
13646 | };
|
13647 |
|
13648 | var allItems = React.Children.toArray(children).filter(function (child) {
|
13649 | {
|
13650 | if (reactIs_2(child)) {
|
13651 | console.error(["Material-UI: The Breadcrumbs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
13652 | }
|
13653 | }
|
13654 |
|
13655 | return React.isValidElement(child);
|
13656 | }).map(function (child, index) {
|
13657 | return React.createElement("li", {
|
13658 | className: classes.li,
|
13659 | key: "child-".concat(index)
|
13660 | }, child);
|
13661 | });
|
13662 | return React.createElement(Typography$1, _extends({
|
13663 | ref: ref,
|
13664 | component: Component,
|
13665 | color: "textSecondary",
|
13666 | className: clsx(classes.root, className)
|
13667 | }, other), React.createElement("ol", {
|
13668 | className: classes.ol
|
13669 | }, insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator)));
|
13670 | });
|
13671 | Breadcrumbs.propTypes = {
|
13672 |
|
13673 |
|
13674 |
|
13675 |
|
13676 |
|
13677 | |
13678 |
|
13679 |
|
13680 | children: propTypes.node,
|
13681 |
|
13682 | |
13683 |
|
13684 |
|
13685 |
|
13686 | classes: propTypes.object,
|
13687 |
|
13688 | |
13689 |
|
13690 |
|
13691 | className: propTypes.string,
|
13692 |
|
13693 | |
13694 |
|
13695 |
|
13696 |
|
13697 | component: propTypes
|
13698 |
|
13699 | .elementType,
|
13700 |
|
13701 | |
13702 |
|
13703 |
|
13704 |
|
13705 |
|
13706 | expandText: propTypes.string,
|
13707 |
|
13708 | |
13709 |
|
13710 |
|
13711 | itemsAfterCollapse: propTypes.number,
|
13712 |
|
13713 | |
13714 |
|
13715 |
|
13716 | itemsBeforeCollapse: propTypes.number,
|
13717 |
|
13718 | |
13719 |
|
13720 |
|
13721 |
|
13722 |
|
13723 | maxItems: propTypes.number,
|
13724 |
|
13725 | |
13726 |
|
13727 |
|
13728 | separator: propTypes.node
|
13729 | } ;
|
13730 | var Breadcrumbs$1 = withStyles$1(styles$j, {
|
13731 | name: 'MuiBreadcrumbs'
|
13732 | })(Breadcrumbs);
|
13733 |
|
13734 | var styles$k = function styles(theme) {
|
13735 | return {
|
13736 |
|
13737 | root: _extends({}, theme.typography.button, {
|
13738 | boxSizing: 'border-box',
|
13739 | minWidth: 64,
|
13740 | padding: '6px 16px',
|
13741 | borderRadius: theme.shape.borderRadius,
|
13742 | color: theme.palette.text.primary,
|
13743 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
|
13744 | duration: theme.transitions.duration.short
|
13745 | }),
|
13746 | '&:hover': {
|
13747 | textDecoration: 'none',
|
13748 | backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
|
13749 |
|
13750 | '@media (hover: none)': {
|
13751 | backgroundColor: 'transparent'
|
13752 | },
|
13753 | '&$disabled': {
|
13754 | backgroundColor: 'transparent'
|
13755 | }
|
13756 | },
|
13757 | '&$disabled': {
|
13758 | color: theme.palette.action.disabled
|
13759 | }
|
13760 | }),
|
13761 |
|
13762 |
|
13763 | label: {
|
13764 | width: '100%',
|
13765 |
|
13766 | display: 'inherit',
|
13767 | alignItems: 'inherit',
|
13768 | justifyContent: 'inherit'
|
13769 | },
|
13770 |
|
13771 |
|
13772 | text: {
|
13773 | padding: '6px 8px'
|
13774 | },
|
13775 |
|
13776 |
|
13777 | textPrimary: {
|
13778 | color: theme.palette.primary.main,
|
13779 | '&:hover': {
|
13780 | backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
13781 |
|
13782 | '@media (hover: none)': {
|
13783 | backgroundColor: 'transparent'
|
13784 | }
|
13785 | }
|
13786 | },
|
13787 |
|
13788 |
|
13789 | textSecondary: {
|
13790 | color: theme.palette.secondary.main,
|
13791 | '&:hover': {
|
13792 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
13793 |
|
13794 | '@media (hover: none)': {
|
13795 | backgroundColor: 'transparent'
|
13796 | }
|
13797 | }
|
13798 | },
|
13799 |
|
13800 |
|
13801 | outlined: {
|
13802 | padding: '5px 15px',
|
13803 | border: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'),
|
13804 | '&$disabled': {
|
13805 | border: "1px solid ".concat(theme.palette.action.disabledBackground)
|
13806 | }
|
13807 | },
|
13808 |
|
13809 |
|
13810 | outlinedPrimary: {
|
13811 | color: theme.palette.primary.main,
|
13812 | border: "1px solid ".concat(alpha(theme.palette.primary.main, 0.5)),
|
13813 | '&:hover': {
|
13814 | border: "1px solid ".concat(theme.palette.primary.main),
|
13815 | backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
13816 |
|
13817 | '@media (hover: none)': {
|
13818 | backgroundColor: 'transparent'
|
13819 | }
|
13820 | }
|
13821 | },
|
13822 |
|
13823 |
|
13824 | outlinedSecondary: {
|
13825 | color: theme.palette.secondary.main,
|
13826 | border: "1px solid ".concat(alpha(theme.palette.secondary.main, 0.5)),
|
13827 | '&:hover': {
|
13828 | border: "1px solid ".concat(theme.palette.secondary.main),
|
13829 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
13830 |
|
13831 | '@media (hover: none)': {
|
13832 | backgroundColor: 'transparent'
|
13833 | }
|
13834 | },
|
13835 | '&$disabled': {
|
13836 | border: "1px solid ".concat(theme.palette.action.disabled)
|
13837 | }
|
13838 | },
|
13839 |
|
13840 |
|
13841 | contained: {
|
13842 | color: theme.palette.getContrastText(theme.palette.grey[300]),
|
13843 | backgroundColor: theme.palette.grey[300],
|
13844 | boxShadow: theme.shadows[2],
|
13845 | '&:hover': {
|
13846 | backgroundColor: theme.palette.grey.A100,
|
13847 | boxShadow: theme.shadows[4],
|
13848 |
|
13849 | '@media (hover: none)': {
|
13850 | boxShadow: theme.shadows[2],
|
13851 | backgroundColor: theme.palette.grey[300]
|
13852 | },
|
13853 | '&$disabled': {
|
13854 | backgroundColor: theme.palette.action.disabledBackground
|
13855 | }
|
13856 | },
|
13857 | '&$focusVisible': {
|
13858 | boxShadow: theme.shadows[6]
|
13859 | },
|
13860 | '&:active': {
|
13861 | boxShadow: theme.shadows[8]
|
13862 | },
|
13863 | '&$disabled': {
|
13864 | color: theme.palette.action.disabled,
|
13865 | boxShadow: theme.shadows[0],
|
13866 | backgroundColor: theme.palette.action.disabledBackground
|
13867 | }
|
13868 | },
|
13869 |
|
13870 |
|
13871 | containedPrimary: {
|
13872 | color: theme.palette.primary.contrastText,
|
13873 | backgroundColor: theme.palette.primary.main,
|
13874 | '&:hover': {
|
13875 | backgroundColor: theme.palette.primary.dark,
|
13876 |
|
13877 | '@media (hover: none)': {
|
13878 | backgroundColor: theme.palette.primary.main
|
13879 | }
|
13880 | }
|
13881 | },
|
13882 |
|
13883 |
|
13884 | containedSecondary: {
|
13885 | color: theme.palette.secondary.contrastText,
|
13886 | backgroundColor: theme.palette.secondary.main,
|
13887 | '&:hover': {
|
13888 | backgroundColor: theme.palette.secondary.dark,
|
13889 |
|
13890 | '@media (hover: none)': {
|
13891 | backgroundColor: theme.palette.secondary.main
|
13892 | }
|
13893 | }
|
13894 | },
|
13895 |
|
13896 |
|
13897 | disableElevation: {
|
13898 | boxShadow: 'none',
|
13899 | '&:hover': {
|
13900 | boxShadow: 'none'
|
13901 | },
|
13902 | '&$focusVisible': {
|
13903 | boxShadow: 'none'
|
13904 | },
|
13905 | '&:active': {
|
13906 | boxShadow: 'none'
|
13907 | },
|
13908 | '&$disabled': {
|
13909 | boxShadow: 'none'
|
13910 | }
|
13911 | },
|
13912 |
|
13913 |
|
13914 | focusVisible: {},
|
13915 |
|
13916 |
|
13917 | disabled: {},
|
13918 |
|
13919 |
|
13920 | colorInherit: {
|
13921 | color: 'inherit',
|
13922 | borderColor: 'currentColor'
|
13923 | },
|
13924 |
|
13925 |
|
13926 | textSizeSmall: {
|
13927 | padding: '4px 5px',
|
13928 | fontSize: theme.typography.pxToRem(13)
|
13929 | },
|
13930 |
|
13931 |
|
13932 | textSizeLarge: {
|
13933 | padding: '8px 11px',
|
13934 | fontSize: theme.typography.pxToRem(15)
|
13935 | },
|
13936 |
|
13937 |
|
13938 | outlinedSizeSmall: {
|
13939 | padding: '3px 9px',
|
13940 | fontSize: theme.typography.pxToRem(13)
|
13941 | },
|
13942 |
|
13943 |
|
13944 | outlinedSizeLarge: {
|
13945 | padding: '7px 21px',
|
13946 | fontSize: theme.typography.pxToRem(15)
|
13947 | },
|
13948 |
|
13949 |
|
13950 | containedSizeSmall: {
|
13951 | padding: '4px 10px',
|
13952 | fontSize: theme.typography.pxToRem(13)
|
13953 | },
|
13954 |
|
13955 |
|
13956 | containedSizeLarge: {
|
13957 | padding: '8px 22px',
|
13958 | fontSize: theme.typography.pxToRem(15)
|
13959 | },
|
13960 |
|
13961 |
|
13962 | sizeSmall: {},
|
13963 |
|
13964 |
|
13965 | sizeLarge: {},
|
13966 |
|
13967 |
|
13968 | fullWidth: {
|
13969 | width: '100%'
|
13970 | },
|
13971 |
|
13972 |
|
13973 | startIcon: {
|
13974 | display: 'inherit',
|
13975 | marginRight: 8,
|
13976 | marginLeft: -4,
|
13977 | '&$iconSizeSmall': {
|
13978 | marginLeft: -2
|
13979 | }
|
13980 | },
|
13981 |
|
13982 |
|
13983 | endIcon: {
|
13984 | display: 'inherit',
|
13985 | marginRight: -4,
|
13986 | marginLeft: 8,
|
13987 | '&$iconSizeSmall': {
|
13988 | marginRight: -2
|
13989 | }
|
13990 | },
|
13991 |
|
13992 |
|
13993 | iconSizeSmall: {
|
13994 | '& > *:first-child': {
|
13995 | fontSize: 18
|
13996 | }
|
13997 | },
|
13998 |
|
13999 |
|
14000 | iconSizeMedium: {
|
14001 | '& > *:first-child': {
|
14002 | fontSize: 20
|
14003 | }
|
14004 | },
|
14005 |
|
14006 |
|
14007 | iconSizeLarge: {
|
14008 | '& > *:first-child': {
|
14009 | fontSize: 22
|
14010 | }
|
14011 | }
|
14012 | };
|
14013 | };
|
14014 | var Button = React.forwardRef(function Button(props, ref) {
|
14015 | var children = props.children,
|
14016 | classes = props.classes,
|
14017 | className = props.className,
|
14018 | _props$color = props.color,
|
14019 | color = _props$color === void 0 ? 'default' : _props$color,
|
14020 | _props$component = props.component,
|
14021 | component = _props$component === void 0 ? 'button' : _props$component,
|
14022 | _props$disabled = props.disabled,
|
14023 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
14024 | _props$disableElevati = props.disableElevation,
|
14025 | disableElevation = _props$disableElevati === void 0 ? false : _props$disableElevati,
|
14026 | _props$disableFocusRi = props.disableFocusRipple,
|
14027 | disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
|
14028 | endIconProp = props.endIcon,
|
14029 | focusVisibleClassName = props.focusVisibleClassName,
|
14030 | _props$fullWidth = props.fullWidth,
|
14031 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
14032 | _props$size = props.size,
|
14033 | size = _props$size === void 0 ? 'medium' : _props$size,
|
14034 | startIconProp = props.startIcon,
|
14035 | _props$type = props.type,
|
14036 | type = _props$type === void 0 ? 'button' : _props$type,
|
14037 | _props$variant = props.variant,
|
14038 | variant = _props$variant === void 0 ? 'text' : _props$variant,
|
14039 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"]);
|
14040 |
|
14041 | var startIcon = startIconProp && React.createElement("span", {
|
14042 | className: clsx(classes.startIcon, classes["iconSize".concat(capitalize(size))])
|
14043 | }, startIconProp);
|
14044 | var endIcon = endIconProp && React.createElement("span", {
|
14045 | className: clsx(classes.endIcon, classes["iconSize".concat(capitalize(size))])
|
14046 | }, endIconProp);
|
14047 | return React.createElement(ButtonBase$1, _extends({
|
14048 | 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),
|
14049 | component: component,
|
14050 | disabled: disabled,
|
14051 | focusRipple: !disableFocusRipple,
|
14052 | focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
|
14053 | ref: ref,
|
14054 | type: type
|
14055 | }, other), React.createElement("span", {
|
14056 | className: classes.label
|
14057 | }, startIcon, children, endIcon));
|
14058 | });
|
14059 | Button.propTypes = {
|
14060 |
|
14061 |
|
14062 |
|
14063 |
|
14064 |
|
14065 | |
14066 |
|
14067 |
|
14068 | children: propTypes.node,
|
14069 |
|
14070 | |
14071 |
|
14072 |
|
14073 |
|
14074 | classes: propTypes.object,
|
14075 |
|
14076 | |
14077 |
|
14078 |
|
14079 | className: propTypes.string,
|
14080 |
|
14081 | |
14082 |
|
14083 |
|
14084 | color: propTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
14085 |
|
14086 | |
14087 |
|
14088 |
|
14089 |
|
14090 | component: propTypes
|
14091 |
|
14092 | .elementType,
|
14093 |
|
14094 | |
14095 |
|
14096 |
|
14097 | disabled: propTypes.bool,
|
14098 |
|
14099 | |
14100 |
|
14101 |
|
14102 | disableElevation: propTypes.bool,
|
14103 |
|
14104 | |
14105 |
|
14106 |
|
14107 | disableFocusRipple: propTypes.bool,
|
14108 |
|
14109 | |
14110 |
|
14111 |
|
14112 |
|
14113 |
|
14114 |
|
14115 | disableRipple: propTypes.bool,
|
14116 |
|
14117 | |
14118 |
|
14119 |
|
14120 | endIcon: propTypes.node,
|
14121 |
|
14122 | |
14123 |
|
14124 |
|
14125 | focusVisibleClassName: propTypes.string,
|
14126 |
|
14127 | |
14128 |
|
14129 |
|
14130 | fullWidth: propTypes.bool,
|
14131 |
|
14132 | |
14133 |
|
14134 |
|
14135 |
|
14136 | href: propTypes.string,
|
14137 |
|
14138 | |
14139 |
|
14140 |
|
14141 |
|
14142 | size: propTypes.oneOf(['large', 'medium', 'small']),
|
14143 |
|
14144 | |
14145 |
|
14146 |
|
14147 | startIcon: propTypes.node,
|
14148 |
|
14149 | |
14150 |
|
14151 |
|
14152 | type: propTypes.oneOfType([propTypes.oneOf(['button', 'reset', 'submit']), propTypes.string]),
|
14153 |
|
14154 | |
14155 |
|
14156 |
|
14157 | variant: propTypes.oneOf(['contained', 'outlined', 'text'])
|
14158 | } ;
|
14159 | var Button$1 = withStyles$1(styles$k, {
|
14160 | name: 'MuiButton'
|
14161 | })(Button);
|
14162 |
|
14163 |
|
14164 |
|
14165 | Button$1.styles;
|
14166 | var styles$l = function styles(theme) {
|
14167 | return {
|
14168 |
|
14169 | root: {
|
14170 | display: 'inline-flex',
|
14171 | borderRadius: theme.shape.borderRadius
|
14172 | },
|
14173 |
|
14174 |
|
14175 | contained: {
|
14176 | boxShadow: theme.shadows[2]
|
14177 | },
|
14178 |
|
14179 |
|
14180 | disableElevation: {
|
14181 | boxShadow: 'none'
|
14182 | },
|
14183 |
|
14184 |
|
14185 | disabled: {},
|
14186 |
|
14187 |
|
14188 | fullWidth: {
|
14189 | width: '100%'
|
14190 | },
|
14191 |
|
14192 |
|
14193 | vertical: {
|
14194 | flexDirection: 'column'
|
14195 | },
|
14196 |
|
14197 |
|
14198 | grouped: {
|
14199 | minWidth: 40
|
14200 | },
|
14201 |
|
14202 |
|
14203 | groupedHorizontal: {
|
14204 | '&:not(:first-child)': {
|
14205 | borderTopLeftRadius: 0,
|
14206 | borderBottomLeftRadius: 0
|
14207 | },
|
14208 | '&:not(:last-child)': {
|
14209 | borderTopRightRadius: 0,
|
14210 | borderBottomRightRadius: 0
|
14211 | }
|
14212 | },
|
14213 |
|
14214 |
|
14215 | groupedVertical: {
|
14216 | '&:not(:first-child)': {
|
14217 | borderTopRightRadius: 0,
|
14218 | borderTopLeftRadius: 0
|
14219 | },
|
14220 | '&:not(:last-child)': {
|
14221 | borderBottomRightRadius: 0,
|
14222 | borderBottomLeftRadius: 0
|
14223 | }
|
14224 | },
|
14225 |
|
14226 |
|
14227 | groupedText: {},
|
14228 |
|
14229 |
|
14230 | groupedTextHorizontal: {
|
14231 | '&:not(:last-child)': {
|
14232 | borderRight: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
|
14233 | }
|
14234 | },
|
14235 |
|
14236 |
|
14237 | groupedTextVertical: {
|
14238 | '&:not(:last-child)': {
|
14239 | borderBottom: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
|
14240 | }
|
14241 | },
|
14242 |
|
14243 |
|
14244 | groupedTextPrimary: {
|
14245 | '&:not(:last-child)': {
|
14246 | borderColor: alpha(theme.palette.primary.main, 0.5)
|
14247 | }
|
14248 | },
|
14249 |
|
14250 |
|
14251 | groupedTextSecondary: {
|
14252 | '&:not(:last-child)': {
|
14253 | borderColor: alpha(theme.palette.secondary.main, 0.5)
|
14254 | }
|
14255 | },
|
14256 |
|
14257 |
|
14258 | groupedOutlined: {},
|
14259 |
|
14260 |
|
14261 | groupedOutlinedHorizontal: {
|
14262 | '&:not(:first-child)': {
|
14263 | marginLeft: -1
|
14264 | },
|
14265 | '&:not(:last-child)': {
|
14266 | borderRightColor: 'transparent'
|
14267 | }
|
14268 | },
|
14269 |
|
14270 |
|
14271 | groupedOutlinedVertical: {
|
14272 | '&:not(:first-child)': {
|
14273 | marginTop: -1
|
14274 | },
|
14275 | '&:not(:last-child)': {
|
14276 | borderBottomColor: 'transparent'
|
14277 | }
|
14278 | },
|
14279 |
|
14280 |
|
14281 | groupedOutlinedPrimary: {
|
14282 | '&:hover': {
|
14283 | borderColor: theme.palette.primary.main
|
14284 | }
|
14285 | },
|
14286 |
|
14287 |
|
14288 | groupedOutlinedSecondary: {
|
14289 | '&:hover': {
|
14290 | borderColor: theme.palette.secondary.main
|
14291 | }
|
14292 | },
|
14293 |
|
14294 |
|
14295 | groupedContained: {
|
14296 | boxShadow: 'none'
|
14297 | },
|
14298 |
|
14299 |
|
14300 | groupedContainedHorizontal: {
|
14301 | '&:not(:last-child)': {
|
14302 | borderRight: "1px solid ".concat(theme.palette.grey[400]),
|
14303 | '&$disabled': {
|
14304 | borderRight: "1px solid ".concat(theme.palette.action.disabled)
|
14305 | }
|
14306 | }
|
14307 | },
|
14308 |
|
14309 |
|
14310 | groupedContainedVertical: {
|
14311 | '&:not(:last-child)': {
|
14312 | borderBottom: "1px solid ".concat(theme.palette.grey[400]),
|
14313 | '&$disabled': {
|
14314 | borderBottom: "1px solid ".concat(theme.palette.action.disabled)
|
14315 | }
|
14316 | }
|
14317 | },
|
14318 |
|
14319 |
|
14320 | groupedContainedPrimary: {
|
14321 | '&:not(:last-child)': {
|
14322 | borderColor: theme.palette.primary.dark
|
14323 | }
|
14324 | },
|
14325 |
|
14326 |
|
14327 | groupedContainedSecondary: {
|
14328 | '&:not(:last-child)': {
|
14329 | borderColor: theme.palette.secondary.dark
|
14330 | }
|
14331 | }
|
14332 | };
|
14333 | };
|
14334 | var ButtonGroup = React.forwardRef(function ButtonGroup(props, ref) {
|
14335 | var children = props.children,
|
14336 | classes = props.classes,
|
14337 | className = props.className,
|
14338 | _props$color = props.color,
|
14339 | color = _props$color === void 0 ? 'default' : _props$color,
|
14340 | _props$component = props.component,
|
14341 | Component = _props$component === void 0 ? 'div' : _props$component,
|
14342 | _props$disabled = props.disabled,
|
14343 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
14344 | _props$disableElevati = props.disableElevation,
|
14345 | disableElevation = _props$disableElevati === void 0 ? false : _props$disableElevati,
|
14346 | _props$disableFocusRi = props.disableFocusRipple,
|
14347 | disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
|
14348 | _props$disableRipple = props.disableRipple,
|
14349 | disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,
|
14350 | _props$fullWidth = props.fullWidth,
|
14351 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
14352 | _props$orientation = props.orientation,
|
14353 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
14354 | _props$size = props.size,
|
14355 | size = _props$size === void 0 ? 'medium' : _props$size,
|
14356 | _props$variant = props.variant,
|
14357 | variant = _props$variant === void 0 ? 'outlined' : _props$variant,
|
14358 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"]);
|
14359 |
|
14360 | 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);
|
14361 | return React.createElement(Component, _extends({
|
14362 | role: "group",
|
14363 | className: clsx(classes.root, className, fullWidth && classes.fullWidth, disableElevation && classes.disableElevation, variant === 'contained' && classes.contained, orientation === 'vertical' && classes.vertical),
|
14364 | ref: ref
|
14365 | }, other), React.Children.map(children, function (child) {
|
14366 | if (! React.isValidElement(child)) {
|
14367 | return null;
|
14368 | }
|
14369 |
|
14370 | {
|
14371 | if (reactIs_2(child)) {
|
14372 | console.error(["Material-UI: The ButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
14373 | }
|
14374 | }
|
14375 |
|
14376 | return React.cloneElement(child, {
|
14377 | className: clsx(buttonClassName, child.props.className),
|
14378 | color: child.props.color || color,
|
14379 | disabled: child.props.disabled || disabled,
|
14380 | disableElevation: child.props.disableElevation || disableElevation,
|
14381 | disableFocusRipple: disableFocusRipple,
|
14382 | disableRipple: disableRipple,
|
14383 | fullWidth: fullWidth,
|
14384 | size: child.props.size || size,
|
14385 | variant: child.props.variant || variant
|
14386 | });
|
14387 | }));
|
14388 | });
|
14389 | ButtonGroup.propTypes = {
|
14390 |
|
14391 |
|
14392 |
|
14393 |
|
14394 |
|
14395 | |
14396 |
|
14397 |
|
14398 | children: propTypes.node,
|
14399 |
|
14400 | |
14401 |
|
14402 |
|
14403 |
|
14404 | classes: propTypes.object,
|
14405 |
|
14406 | |
14407 |
|
14408 |
|
14409 | className: propTypes.string,
|
14410 |
|
14411 | |
14412 |
|
14413 |
|
14414 | color: propTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
14415 |
|
14416 | |
14417 |
|
14418 |
|
14419 |
|
14420 | component: propTypes
|
14421 |
|
14422 | .elementType,
|
14423 |
|
14424 | |
14425 |
|
14426 |
|
14427 | disabled: propTypes.bool,
|
14428 |
|
14429 | |
14430 |
|
14431 |
|
14432 | disableElevation: propTypes.bool,
|
14433 |
|
14434 | |
14435 |
|
14436 |
|
14437 | disableFocusRipple: propTypes.bool,
|
14438 |
|
14439 | |
14440 |
|
14441 |
|
14442 | disableRipple: propTypes.bool,
|
14443 |
|
14444 | |
14445 |
|
14446 |
|
14447 | fullWidth: propTypes.bool,
|
14448 |
|
14449 | |
14450 |
|
14451 |
|
14452 | orientation: propTypes.oneOf(['horizontal', 'vertical']),
|
14453 |
|
14454 | |
14455 |
|
14456 |
|
14457 |
|
14458 | size: propTypes.oneOf(['large', 'medium', 'small']),
|
14459 |
|
14460 | |
14461 |
|
14462 |
|
14463 | variant: propTypes.oneOf(['contained', 'outlined', 'text'])
|
14464 | } ;
|
14465 | var ButtonGroup$1 = withStyles$1(styles$l, {
|
14466 | name: 'MuiButtonGroup'
|
14467 | })(ButtonGroup);
|
14468 |
|
14469 | var styles$m = {
|
14470 |
|
14471 | root: {
|
14472 | overflow: 'hidden'
|
14473 | }
|
14474 | };
|
14475 | var Card = React.forwardRef(function Card(props, ref) {
|
14476 | var classes = props.classes,
|
14477 | className = props.className,
|
14478 | _props$raised = props.raised,
|
14479 | raised = _props$raised === void 0 ? false : _props$raised,
|
14480 | other = _objectWithoutProperties(props, ["classes", "className", "raised"]);
|
14481 |
|
14482 | return React.createElement(Paper$1, _extends({
|
14483 | className: clsx(classes.root, className),
|
14484 | elevation: raised ? 8 : 1,
|
14485 | ref: ref
|
14486 | }, other));
|
14487 | });
|
14488 | Card.propTypes = {
|
14489 |
|
14490 |
|
14491 |
|
14492 |
|
14493 |
|
14494 | |
14495 |
|
14496 |
|
14497 | children: propTypes.node,
|
14498 |
|
14499 | |
14500 |
|
14501 |
|
14502 |
|
14503 | classes: propTypes.object,
|
14504 |
|
14505 | |
14506 |
|
14507 |
|
14508 | className: propTypes.string,
|
14509 |
|
14510 | |
14511 |
|
14512 |
|
14513 | raised: propTypes.bool
|
14514 | } ;
|
14515 | var Card$1 = withStyles$1(styles$m, {
|
14516 | name: 'MuiCard'
|
14517 | })(Card);
|
14518 |
|
14519 | var styles$n = function styles(theme) {
|
14520 | return {
|
14521 |
|
14522 | root: {
|
14523 | display: 'block',
|
14524 | textAlign: 'inherit',
|
14525 | width: '100%',
|
14526 | '&:hover $focusHighlight': {
|
14527 | opacity: theme.palette.action.hoverOpacity
|
14528 | },
|
14529 | '&$focusVisible $focusHighlight': {
|
14530 | opacity: 0.12
|
14531 | }
|
14532 | },
|
14533 |
|
14534 |
|
14535 | focusVisible: {},
|
14536 |
|
14537 |
|
14538 | focusHighlight: {
|
14539 | overflow: 'hidden',
|
14540 | pointerEvents: 'none',
|
14541 | position: 'absolute',
|
14542 | top: 0,
|
14543 | right: 0,
|
14544 | bottom: 0,
|
14545 | left: 0,
|
14546 | borderRadius: 'inherit',
|
14547 | opacity: 0,
|
14548 | backgroundColor: 'currentcolor',
|
14549 | transition: theme.transitions.create('opacity', {
|
14550 | duration: theme.transitions.duration.short
|
14551 | })
|
14552 | }
|
14553 | };
|
14554 | };
|
14555 | var CardActionArea = React.forwardRef(function CardActionArea(props, ref) {
|
14556 | var children = props.children,
|
14557 | classes = props.classes,
|
14558 | className = props.className,
|
14559 | focusVisibleClassName = props.focusVisibleClassName,
|
14560 | other = _objectWithoutProperties(props, ["children", "classes", "className", "focusVisibleClassName"]);
|
14561 |
|
14562 | return React.createElement(ButtonBase$1, _extends({
|
14563 | className: clsx(classes.root, className),
|
14564 | focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
|
14565 | ref: ref
|
14566 | }, other), children, React.createElement("span", {
|
14567 | className: classes.focusHighlight
|
14568 | }));
|
14569 | });
|
14570 | CardActionArea.propTypes = {
|
14571 |
|
14572 |
|
14573 |
|
14574 |
|
14575 |
|
14576 | |
14577 |
|
14578 |
|
14579 | children: propTypes.node,
|
14580 |
|
14581 | |
14582 |
|
14583 |
|
14584 |
|
14585 | classes: propTypes.object,
|
14586 |
|
14587 | |
14588 |
|
14589 |
|
14590 | className: propTypes.string,
|
14591 |
|
14592 | |
14593 |
|
14594 |
|
14595 | focusVisibleClassName: propTypes.string
|
14596 | } ;
|
14597 | var CardActionArea$1 = withStyles$1(styles$n, {
|
14598 | name: 'MuiCardActionArea'
|
14599 | })(CardActionArea);
|
14600 |
|
14601 | var styles$o = {
|
14602 |
|
14603 | root: {
|
14604 | display: 'flex',
|
14605 | alignItems: 'center',
|
14606 | padding: 8
|
14607 | },
|
14608 |
|
14609 |
|
14610 | spacing: {
|
14611 | '& > :not(:first-child)': {
|
14612 | marginLeft: 8
|
14613 | }
|
14614 | }
|
14615 | };
|
14616 | var CardActions = React.forwardRef(function CardActions(props, ref) {
|
14617 | var _props$disableSpacing = props.disableSpacing,
|
14618 | disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,
|
14619 | classes = props.classes,
|
14620 | className = props.className,
|
14621 | other = _objectWithoutProperties(props, ["disableSpacing", "classes", "className"]);
|
14622 |
|
14623 | return React.createElement("div", _extends({
|
14624 | className: clsx(classes.root, className, !disableSpacing && classes.spacing),
|
14625 | ref: ref
|
14626 | }, other));
|
14627 | });
|
14628 | CardActions.propTypes = {
|
14629 |
|
14630 |
|
14631 |
|
14632 |
|
14633 |
|
14634 | |
14635 |
|
14636 |
|
14637 | children: propTypes.node,
|
14638 |
|
14639 | |
14640 |
|
14641 |
|
14642 |
|
14643 | classes: propTypes.object,
|
14644 |
|
14645 | |
14646 |
|
14647 |
|
14648 | className: propTypes.string,
|
14649 |
|
14650 | |
14651 |
|
14652 |
|
14653 | disableSpacing: propTypes.bool
|
14654 | } ;
|
14655 | var CardActions$1 = withStyles$1(styles$o, {
|
14656 | name: 'MuiCardActions'
|
14657 | })(CardActions);
|
14658 |
|
14659 | var styles$p = {
|
14660 |
|
14661 | root: {
|
14662 | padding: 16,
|
14663 | '&:last-child': {
|
14664 | paddingBottom: 24
|
14665 | }
|
14666 | }
|
14667 | };
|
14668 | var CardContent = React.forwardRef(function CardContent(props, ref) {
|
14669 | var classes = props.classes,
|
14670 | className = props.className,
|
14671 | _props$component = props.component,
|
14672 | Component = _props$component === void 0 ? 'div' : _props$component,
|
14673 | other = _objectWithoutProperties(props, ["classes", "className", "component"]);
|
14674 |
|
14675 | return React.createElement(Component, _extends({
|
14676 | className: clsx(classes.root, className),
|
14677 | ref: ref
|
14678 | }, other));
|
14679 | });
|
14680 | CardContent.propTypes = {
|
14681 |
|
14682 |
|
14683 |
|
14684 |
|
14685 |
|
14686 | |
14687 |
|
14688 |
|
14689 | children: propTypes.node,
|
14690 |
|
14691 | |
14692 |
|
14693 |
|
14694 |
|
14695 | classes: propTypes.object,
|
14696 |
|
14697 | |
14698 |
|
14699 |
|
14700 | className: propTypes.string,
|
14701 |
|
14702 | |
14703 |
|
14704 |
|
14705 |
|
14706 | component: propTypes
|
14707 |
|
14708 | .elementType
|
14709 | } ;
|
14710 | var CardContent$1 = withStyles$1(styles$p, {
|
14711 | name: 'MuiCardContent'
|
14712 | })(CardContent);
|
14713 |
|
14714 | var styles$q = {
|
14715 |
|
14716 | root: {
|
14717 | display: 'flex',
|
14718 | alignItems: 'center',
|
14719 | padding: 16
|
14720 | },
|
14721 |
|
14722 |
|
14723 | avatar: {
|
14724 | flex: '0 0 auto',
|
14725 | marginRight: 16
|
14726 | },
|
14727 |
|
14728 |
|
14729 | action: {
|
14730 | flex: '0 0 auto',
|
14731 | alignSelf: 'flex-start',
|
14732 | marginTop: -8,
|
14733 | marginRight: -8
|
14734 | },
|
14735 |
|
14736 |
|
14737 | content: {
|
14738 | flex: '1 1 auto'
|
14739 | },
|
14740 |
|
14741 |
|
14742 | title: {},
|
14743 |
|
14744 |
|
14745 | subheader: {}
|
14746 | };
|
14747 | var CardHeader = React.forwardRef(function CardHeader(props, ref) {
|
14748 | var action = props.action,
|
14749 | avatar = props.avatar,
|
14750 | classes = props.classes,
|
14751 | className = props.className,
|
14752 | _props$component = props.component,
|
14753 | Component = _props$component === void 0 ? 'div' : _props$component,
|
14754 | _props$disableTypogra = props.disableTypography,
|
14755 | disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
|
14756 | subheaderProp = props.subheader,
|
14757 | subheaderTypographyProps = props.subheaderTypographyProps,
|
14758 | titleProp = props.title,
|
14759 | titleTypographyProps = props.titleTypographyProps,
|
14760 | other = _objectWithoutProperties(props, ["action", "avatar", "classes", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"]);
|
14761 |
|
14762 | var title = titleProp;
|
14763 |
|
14764 | if (title != null && title.type !== Typography$1 && !disableTypography) {
|
14765 | title = React.createElement(Typography$1, _extends({
|
14766 | variant: avatar ? 'body2' : 'h5',
|
14767 | className: classes.title,
|
14768 | component: "span",
|
14769 | display: "block"
|
14770 | }, titleTypographyProps), title);
|
14771 | }
|
14772 |
|
14773 | var subheader = subheaderProp;
|
14774 |
|
14775 | if (subheader != null && subheader.type !== Typography$1 && !disableTypography) {
|
14776 | subheader = React.createElement(Typography$1, _extends({
|
14777 | variant: avatar ? 'body2' : 'body1',
|
14778 | className: classes.subheader,
|
14779 | color: "textSecondary",
|
14780 | component: "span",
|
14781 | display: "block"
|
14782 | }, subheaderTypographyProps), subheader);
|
14783 | }
|
14784 |
|
14785 | return React.createElement(Component, _extends({
|
14786 | className: clsx(classes.root, className),
|
14787 | ref: ref
|
14788 | }, other), avatar && React.createElement("div", {
|
14789 | className: classes.avatar
|
14790 | }, avatar), React.createElement("div", {
|
14791 | className: classes.content
|
14792 | }, title, subheader), action && React.createElement("div", {
|
14793 | className: classes.action
|
14794 | }, action));
|
14795 | });
|
14796 | CardHeader.propTypes = {
|
14797 |
|
14798 |
|
14799 |
|
14800 |
|
14801 |
|
14802 | |
14803 |
|
14804 |
|
14805 | action: propTypes.node,
|
14806 |
|
14807 | |
14808 |
|
14809 |
|
14810 | avatar: propTypes.node,
|
14811 |
|
14812 | |
14813 |
|
14814 |
|
14815 | children: propTypes.node,
|
14816 |
|
14817 | |
14818 |
|
14819 |
|
14820 |
|
14821 | classes: propTypes.object,
|
14822 |
|
14823 | |
14824 |
|
14825 |
|
14826 | className: propTypes.string,
|
14827 |
|
14828 | |
14829 |
|
14830 |
|
14831 |
|
14832 | component: propTypes
|
14833 |
|
14834 | .elementType,
|
14835 |
|
14836 | |
14837 |
|
14838 |
|
14839 |
|
14840 |
|
14841 |
|
14842 | disableTypography: propTypes.bool,
|
14843 |
|
14844 | |
14845 |
|
14846 |
|
14847 | subheader: propTypes.node,
|
14848 |
|
14849 | |
14850 |
|
14851 |
|
14852 |
|
14853 | subheaderTypographyProps: propTypes.object,
|
14854 |
|
14855 | |
14856 |
|
14857 |
|
14858 | title: propTypes.node,
|
14859 |
|
14860 | |
14861 |
|
14862 |
|
14863 |
|
14864 | titleTypographyProps: propTypes.object
|
14865 | } ;
|
14866 | var CardHeader$1 = withStyles$1(styles$q, {
|
14867 | name: 'MuiCardHeader'
|
14868 | })(CardHeader);
|
14869 |
|
14870 | var styles$r = {
|
14871 |
|
14872 | root: {
|
14873 | display: 'block',
|
14874 | backgroundSize: 'cover',
|
14875 | backgroundRepeat: 'no-repeat',
|
14876 | backgroundPosition: 'center'
|
14877 | },
|
14878 |
|
14879 |
|
14880 | media: {
|
14881 | width: '100%'
|
14882 | },
|
14883 |
|
14884 |
|
14885 | img: {
|
14886 |
|
14887 | objectFit: 'cover'
|
14888 | }
|
14889 | };
|
14890 | var MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
|
14891 | var CardMedia = React.forwardRef(function CardMedia(props, ref) {
|
14892 | var children = props.children,
|
14893 | classes = props.classes,
|
14894 | className = props.className,
|
14895 | _props$component = props.component,
|
14896 | Component = _props$component === void 0 ? 'div' : _props$component,
|
14897 | image = props.image,
|
14898 | src = props.src,
|
14899 | style = props.style,
|
14900 | other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "image", "src", "style"]);
|
14901 |
|
14902 | var isMediaComponent = MEDIA_COMPONENTS.indexOf(Component) !== -1;
|
14903 | var composedStyle = !isMediaComponent && image ? _extends({
|
14904 | backgroundImage: "url(\"".concat(image, "\")")
|
14905 | }, style) : style;
|
14906 | return React.createElement(Component, _extends({
|
14907 | className: clsx(classes.root, className, isMediaComponent && classes.media, "picture img".indexOf(Component) !== -1 && classes.img),
|
14908 | ref: ref,
|
14909 | style: composedStyle,
|
14910 | src: isMediaComponent ? image || src : undefined
|
14911 | }, other), children);
|
14912 | });
|
14913 | CardMedia.propTypes = {
|
14914 |
|
14915 |
|
14916 |
|
14917 |
|
14918 |
|
14919 | |
14920 |
|
14921 |
|
14922 | children: chainPropTypes(propTypes.node, function (props) {
|
14923 | if (!props.children && !props.image && !props.src && !props.component) {
|
14924 | return new Error('Material-UI: Either `children`, `image`, `src` or `component` prop must be specified.');
|
14925 | }
|
14926 |
|
14927 | return null;
|
14928 | }),
|
14929 |
|
14930 | |
14931 |
|
14932 |
|
14933 |
|
14934 | classes: propTypes.object,
|
14935 |
|
14936 | |
14937 |
|
14938 |
|
14939 | className: propTypes.string,
|
14940 |
|
14941 | |
14942 |
|
14943 |
|
14944 |
|
14945 | component: propTypes
|
14946 |
|
14947 | .elementType,
|
14948 |
|
14949 | |
14950 |
|
14951 |
|
14952 |
|
14953 |
|
14954 | image: propTypes.string,
|
14955 |
|
14956 | |
14957 |
|
14958 |
|
14959 |
|
14960 |
|
14961 | src: propTypes.string,
|
14962 |
|
14963 | |
14964 |
|
14965 |
|
14966 | style: propTypes.object
|
14967 | } ;
|
14968 | var CardMedia$1 = withStyles$1(styles$r, {
|
14969 | name: 'MuiCardMedia'
|
14970 | })(CardMedia);
|
14971 |
|
14972 | |
14973 |
|
14974 |
|
14975 |
|
14976 | var FormControlContext = React.createContext();
|
14977 |
|
14978 | {
|
14979 | FormControlContext.displayName = 'FormControlContext';
|
14980 | }
|
14981 |
|
14982 | function useFormControl() {
|
14983 | return React.useContext(FormControlContext);
|
14984 | }
|
14985 |
|
14986 | function useFormControl$1() {
|
14987 | return React.useContext(FormControlContext);
|
14988 | }
|
14989 |
|
14990 | var styles$s = {
|
14991 | root: {
|
14992 | padding: 9
|
14993 | },
|
14994 | checked: {},
|
14995 | disabled: {},
|
14996 | input: {
|
14997 | cursor: 'inherit',
|
14998 | position: 'absolute',
|
14999 | opacity: 0,
|
15000 | width: '100%',
|
15001 | height: '100%',
|
15002 | top: 0,
|
15003 | left: 0,
|
15004 | margin: 0,
|
15005 | padding: 0,
|
15006 | zIndex: 1
|
15007 | }
|
15008 | };
|
15009 | |
15010 |
|
15011 |
|
15012 |
|
15013 | var SwitchBase = React.forwardRef(function SwitchBase(props, ref) {
|
15014 | var autoFocus = props.autoFocus,
|
15015 | checkedProp = props.checked,
|
15016 | checkedIcon = props.checkedIcon,
|
15017 | classes = props.classes,
|
15018 | className = props.className,
|
15019 | defaultChecked = props.defaultChecked,
|
15020 | disabledProp = props.disabled,
|
15021 | icon = props.icon,
|
15022 | id = props.id,
|
15023 | inputProps = props.inputProps,
|
15024 | inputRef = props.inputRef,
|
15025 | name = props.name,
|
15026 | onBlur = props.onBlur,
|
15027 | onChange = props.onChange,
|
15028 | onFocus = props.onFocus,
|
15029 | readOnly = props.readOnly,
|
15030 | required = props.required,
|
15031 | tabIndex = props.tabIndex,
|
15032 | type = props.type,
|
15033 | value = props.value,
|
15034 | other = _objectWithoutProperties(props, ["autoFocus", "checked", "checkedIcon", "classes", "className", "defaultChecked", "disabled", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"]);
|
15035 |
|
15036 | var _useControlled = useControlled({
|
15037 | controlled: checkedProp,
|
15038 | default: Boolean(defaultChecked),
|
15039 | name: 'SwitchBase',
|
15040 | state: 'checked'
|
15041 | }),
|
15042 | _useControlled2 = _slicedToArray(_useControlled, 2),
|
15043 | checked = _useControlled2[0],
|
15044 | setCheckedState = _useControlled2[1];
|
15045 |
|
15046 | var muiFormControl = useFormControl$1();
|
15047 |
|
15048 | var handleFocus = function handleFocus(event) {
|
15049 | if (onFocus) {
|
15050 | onFocus(event);
|
15051 | }
|
15052 |
|
15053 | if (muiFormControl && muiFormControl.onFocus) {
|
15054 | muiFormControl.onFocus(event);
|
15055 | }
|
15056 | };
|
15057 |
|
15058 | var handleBlur = function handleBlur(event) {
|
15059 | if (onBlur) {
|
15060 | onBlur(event);
|
15061 | }
|
15062 |
|
15063 | if (muiFormControl && muiFormControl.onBlur) {
|
15064 | muiFormControl.onBlur(event);
|
15065 | }
|
15066 | };
|
15067 |
|
15068 | var handleInputChange = function handleInputChange(event) {
|
15069 | var newChecked = event.target.checked;
|
15070 | setCheckedState(newChecked);
|
15071 |
|
15072 | if (onChange) {
|
15073 |
|
15074 | onChange(event, newChecked);
|
15075 | }
|
15076 | };
|
15077 |
|
15078 | var disabled = disabledProp;
|
15079 |
|
15080 | if (muiFormControl) {
|
15081 | if (typeof disabled === 'undefined') {
|
15082 | disabled = muiFormControl.disabled;
|
15083 | }
|
15084 | }
|
15085 |
|
15086 | var hasLabelFor = type === 'checkbox' || type === 'radio';
|
15087 | return React.createElement(IconButton$1, _extends({
|
15088 | component: "span",
|
15089 | className: clsx(classes.root, className, checked && classes.checked, disabled && classes.disabled),
|
15090 | disabled: disabled,
|
15091 | tabIndex: null,
|
15092 | role: undefined,
|
15093 | onFocus: handleFocus,
|
15094 | onBlur: handleBlur,
|
15095 | ref: ref
|
15096 | }, other), React.createElement("input", _extends({
|
15097 | autoFocus: autoFocus,
|
15098 | checked: checkedProp,
|
15099 | defaultChecked: defaultChecked,
|
15100 | className: classes.input,
|
15101 | disabled: disabled,
|
15102 | id: hasLabelFor && id,
|
15103 | name: name,
|
15104 | onChange: handleInputChange,
|
15105 | readOnly: readOnly,
|
15106 | ref: inputRef,
|
15107 | required: required,
|
15108 | tabIndex: tabIndex,
|
15109 | type: type,
|
15110 | value: value
|
15111 | }, inputProps)), checked ? checkedIcon : icon);
|
15112 | });
|
15113 |
|
15114 |
|
15115 | SwitchBase.propTypes = {
|
15116 | |
15117 |
|
15118 |
|
15119 | autoFocus: propTypes.bool,
|
15120 |
|
15121 | |
15122 |
|
15123 |
|
15124 | checked: propTypes.bool,
|
15125 |
|
15126 | |
15127 |
|
15128 |
|
15129 | checkedIcon: propTypes.node.isRequired,
|
15130 |
|
15131 | |
15132 |
|
15133 |
|
15134 |
|
15135 | classes: propTypes.object.isRequired,
|
15136 |
|
15137 | |
15138 |
|
15139 |
|
15140 | className: propTypes.string,
|
15141 |
|
15142 | |
15143 |
|
15144 |
|
15145 | defaultChecked: propTypes.bool,
|
15146 |
|
15147 | |
15148 |
|
15149 |
|
15150 | disabled: propTypes.bool,
|
15151 |
|
15152 | |
15153 |
|
15154 |
|
15155 | icon: propTypes.node.isRequired,
|
15156 |
|
15157 | |
15158 |
|
15159 |
|
15160 | id: propTypes.string,
|
15161 |
|
15162 | |
15163 |
|
15164 |
|
15165 | inputProps: propTypes.object,
|
15166 |
|
15167 | |
15168 |
|
15169 |
|
15170 | inputRef: refType,
|
15171 |
|
15172 | |
15173 |
|
15174 |
|
15175 | name: propTypes.string,
|
15176 |
|
15177 | |
15178 |
|
15179 |
|
15180 | onBlur: propTypes.func,
|
15181 |
|
15182 | |
15183 |
|
15184 |
|
15185 |
|
15186 |
|
15187 |
|
15188 | onChange: propTypes.func,
|
15189 |
|
15190 | |
15191 |
|
15192 |
|
15193 | onFocus: propTypes.func,
|
15194 |
|
15195 | |
15196 |
|
15197 |
|
15198 |
|
15199 | readOnly: propTypes.bool,
|
15200 |
|
15201 | |
15202 |
|
15203 |
|
15204 | required: propTypes.bool,
|
15205 |
|
15206 | |
15207 |
|
15208 |
|
15209 | tabIndex: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
15210 |
|
15211 | |
15212 |
|
15213 |
|
15214 | type: propTypes.string.isRequired,
|
15215 |
|
15216 | |
15217 |
|
15218 |
|
15219 | value: propTypes.any
|
15220 | } ;
|
15221 | var SwitchBase$1 = withStyles$1(styles$s, {
|
15222 | name: 'PrivateSwitchBase'
|
15223 | })(SwitchBase);
|
15224 |
|
15225 | |
15226 |
|
15227 |
|
15228 |
|
15229 | var CheckBoxOutlineBlankIcon = createSvgIcon( React.createElement("path", {
|
15230 | 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"
|
15231 | }), 'CheckBoxOutlineBlank');
|
15232 |
|
15233 | |
15234 |
|
15235 |
|
15236 |
|
15237 | var CheckBoxIcon = createSvgIcon( React.createElement("path", {
|
15238 | 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"
|
15239 | }), 'CheckBox');
|
15240 |
|
15241 | |
15242 |
|
15243 |
|
15244 |
|
15245 | var IndeterminateCheckBoxIcon = createSvgIcon( React.createElement("path", {
|
15246 | 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"
|
15247 | }), 'IndeterminateCheckBox');
|
15248 |
|
15249 | var styles$t = function styles(theme) {
|
15250 | return {
|
15251 |
|
15252 | root: {
|
15253 | color: theme.palette.text.secondary
|
15254 | },
|
15255 |
|
15256 |
|
15257 | checked: {},
|
15258 |
|
15259 |
|
15260 | disabled: {},
|
15261 |
|
15262 |
|
15263 | indeterminate: {},
|
15264 |
|
15265 |
|
15266 | colorPrimary: {
|
15267 | '&$checked': {
|
15268 | color: theme.palette.primary.main,
|
15269 | '&:hover': {
|
15270 | backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
15271 |
|
15272 | '@media (hover: none)': {
|
15273 | backgroundColor: 'transparent'
|
15274 | }
|
15275 | }
|
15276 | },
|
15277 | '&$disabled': {
|
15278 | color: theme.palette.action.disabled
|
15279 | }
|
15280 | },
|
15281 |
|
15282 |
|
15283 | colorSecondary: {
|
15284 | '&$checked': {
|
15285 | color: theme.palette.secondary.main,
|
15286 | '&:hover': {
|
15287 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
15288 |
|
15289 | '@media (hover: none)': {
|
15290 | backgroundColor: 'transparent'
|
15291 | }
|
15292 | }
|
15293 | },
|
15294 | '&$disabled': {
|
15295 | color: theme.palette.action.disabled
|
15296 | }
|
15297 | }
|
15298 | };
|
15299 | };
|
15300 | var defaultCheckedIcon = React.createElement(CheckBoxIcon, null);
|
15301 | var defaultIcon = React.createElement(CheckBoxOutlineBlankIcon, null);
|
15302 | var defaultIndeterminateIcon = React.createElement(IndeterminateCheckBoxIcon, null);
|
15303 | var Checkbox = React.forwardRef(function Checkbox(props, ref) {
|
15304 | var _props$checkedIcon = props.checkedIcon,
|
15305 | checkedIcon = _props$checkedIcon === void 0 ? defaultCheckedIcon : _props$checkedIcon,
|
15306 | classes = props.classes,
|
15307 | _props$color = props.color,
|
15308 | color = _props$color === void 0 ? 'secondary' : _props$color,
|
15309 | _props$icon = props.icon,
|
15310 | iconProp = _props$icon === void 0 ? defaultIcon : _props$icon,
|
15311 | _props$indeterminate = props.indeterminate,
|
15312 | indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,
|
15313 | _props$indeterminateI = props.indeterminateIcon,
|
15314 | indeterminateIconProp = _props$indeterminateI === void 0 ? defaultIndeterminateIcon : _props$indeterminateI,
|
15315 | inputProps = props.inputProps,
|
15316 | _props$size = props.size,
|
15317 | size = _props$size === void 0 ? 'medium' : _props$size,
|
15318 | other = _objectWithoutProperties(props, ["checkedIcon", "classes", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"]);
|
15319 |
|
15320 | var icon = indeterminate ? indeterminateIconProp : iconProp;
|
15321 | var indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
|
15322 | return React.createElement(SwitchBase$1, _extends({
|
15323 | type: "checkbox",
|
15324 | classes: {
|
15325 | root: clsx(classes.root, classes["color".concat(capitalize(color))], indeterminate && classes.indeterminate),
|
15326 | checked: classes.checked,
|
15327 | disabled: classes.disabled
|
15328 | },
|
15329 | color: color,
|
15330 | inputProps: _extends({
|
15331 | 'data-indeterminate': indeterminate
|
15332 | }, inputProps),
|
15333 | icon: React.cloneElement(icon, {
|
15334 | fontSize: icon.props.fontSize === undefined && size === "small" ? size : icon.props.fontSize
|
15335 | }),
|
15336 | checkedIcon: React.cloneElement(indeterminateIcon, {
|
15337 | fontSize: indeterminateIcon.props.fontSize === undefined && size === "small" ? size : indeterminateIcon.props.fontSize
|
15338 | }),
|
15339 | ref: ref
|
15340 | }, other));
|
15341 | });
|
15342 | Checkbox.propTypes = {
|
15343 |
|
15344 |
|
15345 |
|
15346 |
|
15347 |
|
15348 | |
15349 |
|
15350 |
|
15351 | checked: propTypes.bool,
|
15352 |
|
15353 | |
15354 |
|
15355 |
|
15356 | checkedIcon: propTypes.node,
|
15357 |
|
15358 | |
15359 |
|
15360 |
|
15361 |
|
15362 | classes: propTypes.object,
|
15363 |
|
15364 | |
15365 |
|
15366 |
|
15367 | color: propTypes.oneOf(['default', 'primary', 'secondary']),
|
15368 |
|
15369 | |
15370 |
|
15371 |
|
15372 | disabled: propTypes.bool,
|
15373 |
|
15374 | |
15375 |
|
15376 |
|
15377 | disableRipple: propTypes.bool,
|
15378 |
|
15379 | |
15380 |
|
15381 |
|
15382 | icon: propTypes.node,
|
15383 |
|
15384 | |
15385 |
|
15386 |
|
15387 | id: propTypes.string,
|
15388 |
|
15389 | |
15390 |
|
15391 |
|
15392 |
|
15393 |
|
15394 |
|
15395 | indeterminate: propTypes.bool,
|
15396 |
|
15397 | |
15398 |
|
15399 |
|
15400 | indeterminateIcon: propTypes.node,
|
15401 |
|
15402 | |
15403 |
|
15404 |
|
15405 | inputProps: propTypes.object,
|
15406 |
|
15407 | |
15408 |
|
15409 |
|
15410 | inputRef: refType,
|
15411 |
|
15412 | |
15413 |
|
15414 |
|
15415 |
|
15416 |
|
15417 |
|
15418 | onChange: propTypes.func,
|
15419 |
|
15420 | |
15421 |
|
15422 |
|
15423 | required: propTypes.bool,
|
15424 |
|
15425 | |
15426 |
|
15427 |
|
15428 |
|
15429 | size: propTypes.oneOf(['medium', 'small']),
|
15430 |
|
15431 | |
15432 |
|
15433 |
|
15434 |
|
15435 | value: propTypes.any
|
15436 | } ;
|
15437 | var Checkbox$1 = withStyles$1(styles$t, {
|
15438 | name: 'MuiCheckbox'
|
15439 | })(Checkbox);
|
15440 |
|
15441 | |
15442 |
|
15443 |
|
15444 |
|
15445 | var CancelIcon = createSvgIcon( React.createElement("path", {
|
15446 | 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"
|
15447 | }), 'Cancel');
|
15448 |
|
15449 | var styles$u = function styles(theme) {
|
15450 | var backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];
|
15451 | var deleteIconColor = alpha(theme.palette.text.primary, 0.26);
|
15452 | return {
|
15453 |
|
15454 | root: {
|
15455 | fontFamily: theme.typography.fontFamily,
|
15456 | fontSize: theme.typography.pxToRem(13),
|
15457 | display: 'inline-flex',
|
15458 | alignItems: 'center',
|
15459 | justifyContent: 'center',
|
15460 | height: 32,
|
15461 | color: theme.palette.getContrastText(backgroundColor),
|
15462 | backgroundColor: backgroundColor,
|
15463 | borderRadius: 32 / 2,
|
15464 | whiteSpace: 'nowrap',
|
15465 | transition: theme.transitions.create(['background-color', 'box-shadow']),
|
15466 |
|
15467 | cursor: 'default',
|
15468 |
|
15469 | outline: 0,
|
15470 | textDecoration: 'none',
|
15471 | border: 'none',
|
15472 |
|
15473 | padding: 0,
|
15474 |
|
15475 | verticalAlign: 'middle',
|
15476 | boxSizing: 'border-box',
|
15477 | '&$disabled': {
|
15478 | opacity: 0.5,
|
15479 | pointerEvents: 'none'
|
15480 | },
|
15481 | '& $avatar': {
|
15482 | marginLeft: 5,
|
15483 | marginRight: -6,
|
15484 | width: 24,
|
15485 | height: 24,
|
15486 | color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
|
15487 | fontSize: theme.typography.pxToRem(12)
|
15488 | },
|
15489 | '& $avatarColorPrimary': {
|
15490 | color: theme.palette.primary.contrastText,
|
15491 | backgroundColor: theme.palette.primary.dark
|
15492 | },
|
15493 | '& $avatarColorSecondary': {
|
15494 | color: theme.palette.secondary.contrastText,
|
15495 | backgroundColor: theme.palette.secondary.dark
|
15496 | },
|
15497 | '& $avatarSmall': {
|
15498 | marginLeft: 4,
|
15499 | marginRight: -4,
|
15500 | width: 18,
|
15501 | height: 18,
|
15502 | fontSize: theme.typography.pxToRem(10)
|
15503 | }
|
15504 | },
|
15505 |
|
15506 |
|
15507 | sizeSmall: {
|
15508 | height: 24
|
15509 | },
|
15510 |
|
15511 |
|
15512 | colorPrimary: {
|
15513 | backgroundColor: theme.palette.primary.main,
|
15514 | color: theme.palette.primary.contrastText
|
15515 | },
|
15516 |
|
15517 |
|
15518 | colorSecondary: {
|
15519 | backgroundColor: theme.palette.secondary.main,
|
15520 | color: theme.palette.secondary.contrastText
|
15521 | },
|
15522 |
|
15523 |
|
15524 | disabled: {},
|
15525 |
|
15526 |
|
15527 | clickable: {
|
15528 | userSelect: 'none',
|
15529 | WebkitTapHighlightColor: 'transparent',
|
15530 | cursor: 'pointer',
|
15531 | '&:hover, &:focus': {
|
15532 | backgroundColor: emphasize(backgroundColor, 0.08)
|
15533 | },
|
15534 | '&:active': {
|
15535 | boxShadow: theme.shadows[1]
|
15536 | }
|
15537 | },
|
15538 |
|
15539 |
|
15540 | clickableColorPrimary: {
|
15541 | '&:hover, &:focus': {
|
15542 | backgroundColor: emphasize(theme.palette.primary.main, 0.08)
|
15543 | }
|
15544 | },
|
15545 |
|
15546 |
|
15547 | clickableColorSecondary: {
|
15548 | '&:hover, &:focus': {
|
15549 | backgroundColor: emphasize(theme.palette.secondary.main, 0.08)
|
15550 | }
|
15551 | },
|
15552 |
|
15553 |
|
15554 | deletable: {
|
15555 | '&:focus': {
|
15556 | backgroundColor: emphasize(backgroundColor, 0.08)
|
15557 | }
|
15558 | },
|
15559 |
|
15560 |
|
15561 | deletableColorPrimary: {
|
15562 | '&:focus': {
|
15563 | backgroundColor: emphasize(theme.palette.primary.main, 0.2)
|
15564 | }
|
15565 | },
|
15566 |
|
15567 |
|
15568 | deletableColorSecondary: {
|
15569 | '&:focus': {
|
15570 | backgroundColor: emphasize(theme.palette.secondary.main, 0.2)
|
15571 | }
|
15572 | },
|
15573 |
|
15574 |
|
15575 | outlined: {
|
15576 | backgroundColor: 'transparent',
|
15577 | border: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'),
|
15578 | '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
|
15579 | backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity)
|
15580 | },
|
15581 | '& $avatar': {
|
15582 | marginLeft: 4
|
15583 | },
|
15584 | '& $avatarSmall': {
|
15585 | marginLeft: 2
|
15586 | },
|
15587 | '& $icon': {
|
15588 | marginLeft: 4
|
15589 | },
|
15590 | '& $iconSmall': {
|
15591 | marginLeft: 2
|
15592 | },
|
15593 | '& $deleteIcon': {
|
15594 | marginRight: 5
|
15595 | },
|
15596 | '& $deleteIconSmall': {
|
15597 | marginRight: 3
|
15598 | }
|
15599 | },
|
15600 |
|
15601 |
|
15602 | outlinedPrimary: {
|
15603 | color: theme.palette.primary.main,
|
15604 | border: "1px solid ".concat(theme.palette.primary.main),
|
15605 | '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
|
15606 | backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
|
15607 | }
|
15608 | },
|
15609 |
|
15610 |
|
15611 | outlinedSecondary: {
|
15612 | color: theme.palette.secondary.main,
|
15613 | border: "1px solid ".concat(theme.palette.secondary.main),
|
15614 | '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
|
15615 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity)
|
15616 | }
|
15617 | },
|
15618 |
|
15619 |
|
15620 |
|
15621 | avatar: {},
|
15622 |
|
15623 |
|
15624 | avatarSmall: {},
|
15625 |
|
15626 |
|
15627 | avatarColorPrimary: {},
|
15628 |
|
15629 |
|
15630 | avatarColorSecondary: {},
|
15631 |
|
15632 |
|
15633 | icon: {
|
15634 | color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
|
15635 | marginLeft: 5,
|
15636 | marginRight: -6
|
15637 | },
|
15638 |
|
15639 |
|
15640 | iconSmall: {
|
15641 | width: 18,
|
15642 | height: 18,
|
15643 | marginLeft: 4,
|
15644 | marginRight: -4
|
15645 | },
|
15646 |
|
15647 |
|
15648 | iconColorPrimary: {
|
15649 | color: 'inherit'
|
15650 | },
|
15651 |
|
15652 |
|
15653 | iconColorSecondary: {
|
15654 | color: 'inherit'
|
15655 | },
|
15656 |
|
15657 |
|
15658 | label: {
|
15659 | overflow: 'hidden',
|
15660 | textOverflow: 'ellipsis',
|
15661 | paddingLeft: 12,
|
15662 | paddingRight: 12,
|
15663 | whiteSpace: 'nowrap'
|
15664 | },
|
15665 |
|
15666 |
|
15667 | labelSmall: {
|
15668 | paddingLeft: 8,
|
15669 | paddingRight: 8
|
15670 | },
|
15671 |
|
15672 |
|
15673 | deleteIcon: {
|
15674 | WebkitTapHighlightColor: 'transparent',
|
15675 | color: deleteIconColor,
|
15676 | height: 22,
|
15677 | width: 22,
|
15678 | cursor: 'pointer',
|
15679 | margin: '0 5px 0 -6px',
|
15680 | '&:hover': {
|
15681 | color: alpha(deleteIconColor, 0.4)
|
15682 | }
|
15683 | },
|
15684 |
|
15685 |
|
15686 | deleteIconSmall: {
|
15687 | height: 16,
|
15688 | width: 16,
|
15689 | marginRight: 4,
|
15690 | marginLeft: -4
|
15691 | },
|
15692 |
|
15693 |
|
15694 | deleteIconColorPrimary: {
|
15695 | color: alpha(theme.palette.primary.contrastText, 0.7),
|
15696 | '&:hover, &:active': {
|
15697 | color: theme.palette.primary.contrastText
|
15698 | }
|
15699 | },
|
15700 |
|
15701 |
|
15702 | deleteIconColorSecondary: {
|
15703 | color: alpha(theme.palette.secondary.contrastText, 0.7),
|
15704 | '&:hover, &:active': {
|
15705 | color: theme.palette.secondary.contrastText
|
15706 | }
|
15707 | },
|
15708 |
|
15709 |
|
15710 | deleteIconOutlinedColorPrimary: {
|
15711 | color: alpha(theme.palette.primary.main, 0.7),
|
15712 | '&:hover, &:active': {
|
15713 | color: theme.palette.primary.main
|
15714 | }
|
15715 | },
|
15716 |
|
15717 |
|
15718 | deleteIconOutlinedColorSecondary: {
|
15719 | color: alpha(theme.palette.secondary.main, 0.7),
|
15720 | '&:hover, &:active': {
|
15721 | color: theme.palette.secondary.main
|
15722 | }
|
15723 | }
|
15724 | };
|
15725 | };
|
15726 |
|
15727 | function isDeleteKeyboardEvent(keyboardEvent) {
|
15728 | return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
|
15729 | }
|
15730 | |
15731 |
|
15732 |
|
15733 |
|
15734 |
|
15735 | var Chip = React.forwardRef(function Chip(props, ref) {
|
15736 | var avatarProp = props.avatar,
|
15737 | classes = props.classes,
|
15738 | className = props.className,
|
15739 | clickableProp = props.clickable,
|
15740 | _props$color = props.color,
|
15741 | color = _props$color === void 0 ? 'default' : _props$color,
|
15742 | ComponentProp = props.component,
|
15743 | deleteIconProp = props.deleteIcon,
|
15744 | _props$disabled = props.disabled,
|
15745 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
15746 | iconProp = props.icon,
|
15747 | label = props.label,
|
15748 | onClick = props.onClick,
|
15749 | onDelete = props.onDelete,
|
15750 | onKeyDown = props.onKeyDown,
|
15751 | onKeyUp = props.onKeyUp,
|
15752 | _props$size = props.size,
|
15753 | size = _props$size === void 0 ? 'medium' : _props$size,
|
15754 | _props$variant = props.variant,
|
15755 | variant = _props$variant === void 0 ? 'default' : _props$variant,
|
15756 | other = _objectWithoutProperties(props, ["avatar", "classes", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"]);
|
15757 |
|
15758 | var chipRef = React.useRef(null);
|
15759 | var handleRef = useForkRef(chipRef, ref);
|
15760 |
|
15761 | var handleDeleteIconClick = function handleDeleteIconClick(event) {
|
15762 |
|
15763 | event.stopPropagation();
|
15764 |
|
15765 | if (onDelete) {
|
15766 | onDelete(event);
|
15767 | }
|
15768 | };
|
15769 |
|
15770 | var handleKeyDown = function handleKeyDown(event) {
|
15771 |
|
15772 | if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) {
|
15773 |
|
15774 |
|
15775 | event.preventDefault();
|
15776 | }
|
15777 |
|
15778 | if (onKeyDown) {
|
15779 | onKeyDown(event);
|
15780 | }
|
15781 | };
|
15782 |
|
15783 | var handleKeyUp = function handleKeyUp(event) {
|
15784 |
|
15785 | if (event.currentTarget === event.target) {
|
15786 | if (onDelete && isDeleteKeyboardEvent(event)) {
|
15787 | onDelete(event);
|
15788 | } else if (event.key === 'Escape' && chipRef.current) {
|
15789 | chipRef.current.blur();
|
15790 | }
|
15791 | }
|
15792 |
|
15793 | if (onKeyUp) {
|
15794 | onKeyUp(event);
|
15795 | }
|
15796 | };
|
15797 |
|
15798 | var clickable = clickableProp !== false && onClick ? true : clickableProp;
|
15799 | var small = size === 'small';
|
15800 | var Component = ComponentProp || (clickable ? ButtonBase$1 : 'div');
|
15801 | var moreProps = Component === ButtonBase$1 ? {
|
15802 | component: 'div'
|
15803 | } : {};
|
15804 | var deleteIcon = null;
|
15805 |
|
15806 | if (onDelete) {
|
15807 | var customClasses = clsx(color !== 'default' && (variant === "default" ? classes["deleteIconColor".concat(capitalize(color))] : classes["deleteIconOutlinedColor".concat(capitalize(color))]), small && classes.deleteIconSmall);
|
15808 | deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? React.cloneElement(deleteIconProp, {
|
15809 | className: clsx(deleteIconProp.props.className, classes.deleteIcon, customClasses),
|
15810 | onClick: handleDeleteIconClick
|
15811 | }) : React.createElement(CancelIcon, {
|
15812 | className: clsx(classes.deleteIcon, customClasses),
|
15813 | onClick: handleDeleteIconClick
|
15814 | });
|
15815 | }
|
15816 |
|
15817 | var avatar = null;
|
15818 |
|
15819 | if (avatarProp && React.isValidElement(avatarProp)) {
|
15820 | avatar = React.cloneElement(avatarProp, {
|
15821 | className: clsx(classes.avatar, avatarProp.props.className, small && classes.avatarSmall, color !== 'default' && classes["avatarColor".concat(capitalize(color))])
|
15822 | });
|
15823 | }
|
15824 |
|
15825 | var icon = null;
|
15826 |
|
15827 | if (iconProp && React.isValidElement(iconProp)) {
|
15828 | icon = React.cloneElement(iconProp, {
|
15829 | className: clsx(classes.icon, iconProp.props.className, small && classes.iconSmall, color !== 'default' && classes["iconColor".concat(capitalize(color))])
|
15830 | });
|
15831 | }
|
15832 |
|
15833 | {
|
15834 | if (avatar && icon) {
|
15835 | console.error('Material-UI: The Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
|
15836 | }
|
15837 | }
|
15838 |
|
15839 | return React.createElement(Component, _extends({
|
15840 | role: clickable || onDelete ? 'button' : undefined,
|
15841 | 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, {
|
15842 | 'primary': classes.outlinedPrimary,
|
15843 | 'secondary': classes.outlinedSecondary
|
15844 | }[color]], disabled && classes.disabled, small && classes.sizeSmall, clickable && classes.clickable, onDelete && classes.deletable),
|
15845 | "aria-disabled": disabled ? true : undefined,
|
15846 | tabIndex: clickable || onDelete ? 0 : undefined,
|
15847 | onClick: onClick,
|
15848 | onKeyDown: handleKeyDown,
|
15849 | onKeyUp: handleKeyUp,
|
15850 | ref: handleRef
|
15851 | }, moreProps, other), avatar || icon, React.createElement("span", {
|
15852 | className: clsx(classes.label, small && classes.labelSmall)
|
15853 | }, label), deleteIcon);
|
15854 | });
|
15855 | Chip.propTypes = {
|
15856 |
|
15857 |
|
15858 |
|
15859 |
|
15860 |
|
15861 | |
15862 |
|
15863 |
|
15864 | avatar: propTypes.element,
|
15865 |
|
15866 | |
15867 |
|
15868 |
|
15869 |
|
15870 | children: unsupportedProp,
|
15871 |
|
15872 | |
15873 |
|
15874 |
|
15875 |
|
15876 | classes: propTypes.object,
|
15877 |
|
15878 | |
15879 |
|
15880 |
|
15881 | className: propTypes.string,
|
15882 |
|
15883 | |
15884 |
|
15885 |
|
15886 |
|
15887 |
|
15888 |
|
15889 |
|
15890 | clickable: propTypes.bool,
|
15891 |
|
15892 | |
15893 |
|
15894 |
|
15895 | color: propTypes.oneOf(['default', 'primary', 'secondary']),
|
15896 |
|
15897 | |
15898 |
|
15899 |
|
15900 |
|
15901 | component: propTypes
|
15902 |
|
15903 | .elementType,
|
15904 |
|
15905 | |
15906 |
|
15907 |
|
15908 | deleteIcon: propTypes.element,
|
15909 |
|
15910 | |
15911 |
|
15912 |
|
15913 | disabled: propTypes.bool,
|
15914 |
|
15915 | |
15916 |
|
15917 |
|
15918 | icon: propTypes.element,
|
15919 |
|
15920 | |
15921 |
|
15922 |
|
15923 | label: propTypes.node,
|
15924 |
|
15925 | |
15926 |
|
15927 |
|
15928 | onClick: propTypes.func,
|
15929 |
|
15930 | |
15931 |
|
15932 |
|
15933 |
|
15934 | onDelete: propTypes.func,
|
15935 |
|
15936 | |
15937 |
|
15938 |
|
15939 | onKeyDown: propTypes.func,
|
15940 |
|
15941 | |
15942 |
|
15943 |
|
15944 | onKeyUp: propTypes.func,
|
15945 |
|
15946 | |
15947 |
|
15948 |
|
15949 | size: propTypes.oneOf(['medium', 'small']),
|
15950 |
|
15951 | |
15952 |
|
15953 |
|
15954 | variant: propTypes.oneOf(['default', 'outlined'])
|
15955 | } ;
|
15956 | var Chip$1 = withStyles$1(styles$u, {
|
15957 | name: 'MuiChip'
|
15958 | })(Chip);
|
15959 |
|
15960 | var SIZE = 44;
|
15961 | var styles$v = function styles(theme) {
|
15962 | return {
|
15963 |
|
15964 | root: {
|
15965 | display: 'inline-block'
|
15966 | },
|
15967 |
|
15968 |
|
15969 | static: {
|
15970 | transition: theme.transitions.create('transform')
|
15971 | },
|
15972 |
|
15973 |
|
15974 | indeterminate: {
|
15975 | animation: '$circular-rotate 1.4s linear infinite'
|
15976 | },
|
15977 |
|
15978 |
|
15979 | determinate: {
|
15980 | transition: theme.transitions.create('transform')
|
15981 | },
|
15982 |
|
15983 |
|
15984 | colorPrimary: {
|
15985 | color: theme.palette.primary.main
|
15986 | },
|
15987 |
|
15988 |
|
15989 | colorSecondary: {
|
15990 | color: theme.palette.secondary.main
|
15991 | },
|
15992 |
|
15993 |
|
15994 | svg: {
|
15995 | display: 'block'
|
15996 |
|
15997 | },
|
15998 |
|
15999 |
|
16000 | circle: {
|
16001 | stroke: 'currentColor'
|
16002 |
|
16003 |
|
16004 | },
|
16005 |
|
16006 |
|
16007 | circleStatic: {
|
16008 | transition: theme.transitions.create('stroke-dashoffset')
|
16009 | },
|
16010 |
|
16011 |
|
16012 | circleIndeterminate: {
|
16013 | animation: '$circular-dash 1.4s ease-in-out infinite',
|
16014 |
|
16015 | strokeDasharray: '80px, 200px',
|
16016 | strokeDashoffset: '0px'
|
16017 |
|
16018 | },
|
16019 |
|
16020 |
|
16021 | circleDeterminate: {
|
16022 | transition: theme.transitions.create('stroke-dashoffset')
|
16023 | },
|
16024 | '@keyframes circular-rotate': {
|
16025 | '0%': {
|
16026 |
|
16027 | transformOrigin: '50% 50%'
|
16028 | },
|
16029 | '100%': {
|
16030 | transform: 'rotate(360deg)'
|
16031 | }
|
16032 | },
|
16033 | '@keyframes circular-dash': {
|
16034 | '0%': {
|
16035 | strokeDasharray: '1px, 200px',
|
16036 | strokeDashoffset: '0px'
|
16037 | },
|
16038 | '50%': {
|
16039 | strokeDasharray: '100px, 200px',
|
16040 | strokeDashoffset: '-15px'
|
16041 | },
|
16042 | '100%': {
|
16043 | strokeDasharray: '100px, 200px',
|
16044 | strokeDashoffset: '-125px'
|
16045 | }
|
16046 | },
|
16047 |
|
16048 |
|
16049 | circleDisableShrink: {
|
16050 | animation: 'none'
|
16051 | }
|
16052 | };
|
16053 | };
|
16054 | |
16055 |
|
16056 |
|
16057 |
|
16058 |
|
16059 |
|
16060 |
|
16061 |
|
16062 | var CircularProgress = React.forwardRef(function CircularProgress(props, ref) {
|
16063 | var classes = props.classes,
|
16064 | className = props.className,
|
16065 | _props$color = props.color,
|
16066 | color = _props$color === void 0 ? 'primary' : _props$color,
|
16067 | _props$disableShrink = props.disableShrink,
|
16068 | disableShrink = _props$disableShrink === void 0 ? false : _props$disableShrink,
|
16069 | _props$size = props.size,
|
16070 | size = _props$size === void 0 ? 40 : _props$size,
|
16071 | style = props.style,
|
16072 | _props$thickness = props.thickness,
|
16073 | thickness = _props$thickness === void 0 ? 3.6 : _props$thickness,
|
16074 | _props$value = props.value,
|
16075 | value = _props$value === void 0 ? 0 : _props$value,
|
16076 | _props$variant = props.variant,
|
16077 | variant = _props$variant === void 0 ? 'indeterminate' : _props$variant,
|
16078 | other = _objectWithoutProperties(props, ["classes", "className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"]);
|
16079 |
|
16080 | var circleStyle = {};
|
16081 | var rootStyle = {};
|
16082 | var rootProps = {};
|
16083 |
|
16084 | if (variant === 'determinate' || variant === 'static') {
|
16085 | var circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
|
16086 | circleStyle.strokeDasharray = circumference.toFixed(3);
|
16087 | rootProps['aria-valuenow'] = Math.round(value);
|
16088 | circleStyle.strokeDashoffset = "".concat(((100 - value) / 100 * circumference).toFixed(3), "px");
|
16089 | rootStyle.transform = 'rotate(-90deg)';
|
16090 | }
|
16091 |
|
16092 | return React.createElement("div", _extends({
|
16093 | className: clsx(classes.root, className, color !== 'inherit' && classes["color".concat(capitalize(color))], {
|
16094 | 'determinate': classes.determinate,
|
16095 | 'indeterminate': classes.indeterminate,
|
16096 | 'static': classes.static
|
16097 | }[variant]),
|
16098 | style: _extends({
|
16099 | width: size,
|
16100 | height: size
|
16101 | }, rootStyle, style),
|
16102 | ref: ref,
|
16103 | role: "progressbar"
|
16104 | }, rootProps, other), React.createElement("svg", {
|
16105 | className: classes.svg,
|
16106 | viewBox: "".concat(SIZE / 2, " ").concat(SIZE / 2, " ").concat(SIZE, " ").concat(SIZE)
|
16107 | }, React.createElement("circle", {
|
16108 | className: clsx(classes.circle, disableShrink && classes.circleDisableShrink, {
|
16109 | 'determinate': classes.circleDeterminate,
|
16110 | 'indeterminate': classes.circleIndeterminate,
|
16111 | 'static': classes.circleStatic
|
16112 | }[variant]),
|
16113 | style: circleStyle,
|
16114 | cx: SIZE,
|
16115 | cy: SIZE,
|
16116 | r: (SIZE - thickness) / 2,
|
16117 | fill: "none",
|
16118 | strokeWidth: thickness
|
16119 | })));
|
16120 | });
|
16121 | CircularProgress.propTypes = {
|
16122 |
|
16123 |
|
16124 |
|
16125 |
|
16126 |
|
16127 | |
16128 |
|
16129 |
|
16130 |
|
16131 | classes: propTypes.object,
|
16132 |
|
16133 | |
16134 |
|
16135 |
|
16136 | className: propTypes.string,
|
16137 |
|
16138 | |
16139 |
|
16140 |
|
16141 | color: propTypes.oneOf(['inherit', 'primary', 'secondary']),
|
16142 |
|
16143 | |
16144 |
|
16145 |
|
16146 |
|
16147 | disableShrink: chainPropTypes(propTypes.bool, function (props) {
|
16148 | if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {
|
16149 | return new Error('Material-UI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');
|
16150 | }
|
16151 |
|
16152 | return null;
|
16153 | }),
|
16154 |
|
16155 | |
16156 |
|
16157 |
|
16158 |
|
16159 |
|
16160 | size: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
16161 |
|
16162 | |
16163 |
|
16164 |
|
16165 | style: propTypes.object,
|
16166 |
|
16167 | |
16168 |
|
16169 |
|
16170 | thickness: propTypes.number,
|
16171 |
|
16172 | |
16173 |
|
16174 |
|
16175 |
|
16176 | value: propTypes.number,
|
16177 |
|
16178 | |
16179 |
|
16180 |
|
16181 |
|
16182 | variant: chainPropTypes(propTypes.oneOf(['determinate', 'indeterminate', 'static']), function (props) {
|
16183 | var variant = props.variant;
|
16184 |
|
16185 | if (variant === 'static') {
|
16186 | throw new Error('Material-UI: `variant="static"` was deprecated. Use `variant="determinate"` instead.');
|
16187 | }
|
16188 |
|
16189 | return null;
|
16190 | })
|
16191 | } ;
|
16192 | var CircularProgress$1 = withStyles$1(styles$v, {
|
16193 | name: 'MuiCircularProgress',
|
16194 | flip: false
|
16195 | })(CircularProgress);
|
16196 |
|
16197 | function mapEventPropToEvent(eventProp) {
|
16198 | return eventProp.substring(2).toLowerCase();
|
16199 | }
|
16200 |
|
16201 | function clickedRootScrollbar(event) {
|
16202 | return document.documentElement.clientWidth < event.clientX || document.documentElement.clientHeight < event.clientY;
|
16203 | }
|
16204 | |
16205 |
|
16206 |
|
16207 |
|
16208 |
|
16209 |
|
16210 | function ClickAwayListener(props) {
|
16211 | var children = props.children,
|
16212 | _props$disableReactTr = props.disableReactTree,
|
16213 | disableReactTree = _props$disableReactTr === void 0 ? false : _props$disableReactTr,
|
16214 | _props$mouseEvent = props.mouseEvent,
|
16215 | mouseEvent = _props$mouseEvent === void 0 ? 'onClick' : _props$mouseEvent,
|
16216 | onClickAway = props.onClickAway,
|
16217 | _props$touchEvent = props.touchEvent,
|
16218 | touchEvent = _props$touchEvent === void 0 ? 'onTouchEnd' : _props$touchEvent;
|
16219 | var movedRef = React.useRef(false);
|
16220 | var nodeRef = React.useRef(null);
|
16221 | var activatedRef = React.useRef(false);
|
16222 | var syntheticEventRef = React.useRef(false);
|
16223 | React.useEffect(function () {
|
16224 |
|
16225 |
|
16226 | setTimeout(function () {
|
16227 | activatedRef.current = true;
|
16228 | }, 0);
|
16229 | return function () {
|
16230 | activatedRef.current = false;
|
16231 | };
|
16232 | }, []);
|
16233 |
|
16234 | var handleOwnRef = React.useCallback(function (instance) {
|
16235 |
|
16236 | nodeRef.current = ReactDOM.findDOMNode(instance);
|
16237 | }, []);
|
16238 | var handleRef = useForkRef(children.ref, handleOwnRef);
|
16239 |
|
16240 |
|
16241 |
|
16242 |
|
16243 |
|
16244 |
|
16245 | var handleClickAway = useEventCallback(function (event) {
|
16246 |
|
16247 |
|
16248 | var insideReactTree = syntheticEventRef.current;
|
16249 | syntheticEventRef.current = false;
|
16250 |
|
16251 |
|
16252 |
|
16253 | if (!activatedRef.current || !nodeRef.current || clickedRootScrollbar(event)) {
|
16254 | return;
|
16255 | }
|
16256 |
|
16257 |
|
16258 | if (movedRef.current) {
|
16259 | movedRef.current = false;
|
16260 | return;
|
16261 | }
|
16262 |
|
16263 | var insideDOM;
|
16264 |
|
16265 | if (event.composedPath) {
|
16266 | insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
|
16267 | } else {
|
16268 |
|
16269 | var doc = ownerDocument(nodeRef.current);
|
16270 | insideDOM = !doc.documentElement.contains(event.target) || nodeRef.current.contains(event.target);
|
16271 | }
|
16272 |
|
16273 | if (!insideDOM && (disableReactTree || !insideReactTree)) {
|
16274 | onClickAway(event);
|
16275 | }
|
16276 | });
|
16277 |
|
16278 | var createHandleSynthetic = function createHandleSynthetic(handlerName) {
|
16279 | return function (event) {
|
16280 | syntheticEventRef.current = true;
|
16281 | var childrenPropsHandler = children.props[handlerName];
|
16282 |
|
16283 | if (childrenPropsHandler) {
|
16284 | childrenPropsHandler(event);
|
16285 | }
|
16286 | };
|
16287 | };
|
16288 |
|
16289 | var childrenProps = {
|
16290 | ref: handleRef
|
16291 | };
|
16292 |
|
16293 | if (touchEvent !== false) {
|
16294 | childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
|
16295 | }
|
16296 |
|
16297 | React.useEffect(function () {
|
16298 | if (touchEvent !== false) {
|
16299 | var mappedTouchEvent = mapEventPropToEvent(touchEvent);
|
16300 | var doc = ownerDocument(nodeRef.current);
|
16301 |
|
16302 | var handleTouchMove = function handleTouchMove() {
|
16303 | movedRef.current = true;
|
16304 | };
|
16305 |
|
16306 | doc.addEventListener(mappedTouchEvent, handleClickAway);
|
16307 | doc.addEventListener('touchmove', handleTouchMove);
|
16308 | return function () {
|
16309 | doc.removeEventListener(mappedTouchEvent, handleClickAway);
|
16310 | doc.removeEventListener('touchmove', handleTouchMove);
|
16311 | };
|
16312 | }
|
16313 |
|
16314 | return undefined;
|
16315 | }, [handleClickAway, touchEvent]);
|
16316 |
|
16317 | if (mouseEvent !== false) {
|
16318 | childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
|
16319 | }
|
16320 |
|
16321 | React.useEffect(function () {
|
16322 | if (mouseEvent !== false) {
|
16323 | var mappedMouseEvent = mapEventPropToEvent(mouseEvent);
|
16324 | var doc = ownerDocument(nodeRef.current);
|
16325 | doc.addEventListener(mappedMouseEvent, handleClickAway);
|
16326 | return function () {
|
16327 | doc.removeEventListener(mappedMouseEvent, handleClickAway);
|
16328 | };
|
16329 | }
|
16330 |
|
16331 | return undefined;
|
16332 | }, [handleClickAway, mouseEvent]);
|
16333 | return React.createElement(React.Fragment, null, React.cloneElement(children, childrenProps));
|
16334 | }
|
16335 |
|
16336 | ClickAwayListener.propTypes = {
|
16337 |
|
16338 |
|
16339 |
|
16340 |
|
16341 |
|
16342 | |
16343 |
|
16344 |
|
16345 | children: elementAcceptingRef.isRequired,
|
16346 |
|
16347 | |
16348 |
|
16349 |
|
16350 |
|
16351 | disableReactTree: propTypes.bool,
|
16352 |
|
16353 | |
16354 |
|
16355 |
|
16356 | mouseEvent: propTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', false]),
|
16357 |
|
16358 | |
16359 |
|
16360 |
|
16361 | onClickAway: propTypes.func.isRequired,
|
16362 |
|
16363 | |
16364 |
|
16365 |
|
16366 | touchEvent: propTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
|
16367 | } ;
|
16368 |
|
16369 | {
|
16370 |
|
16371 | ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
|
16372 | }
|
16373 |
|
16374 | var styles$w = function styles(theme) {
|
16375 | return {
|
16376 |
|
16377 | root: _defineProperty({
|
16378 | width: '100%',
|
16379 | marginLeft: 'auto',
|
16380 | boxSizing: 'border-box',
|
16381 | marginRight: 'auto',
|
16382 | paddingLeft: theme.spacing(2),
|
16383 | paddingRight: theme.spacing(2),
|
16384 | display: 'block'
|
16385 | }, theme.breakpoints.up('sm'), {
|
16386 | paddingLeft: theme.spacing(3),
|
16387 | paddingRight: theme.spacing(3)
|
16388 | }),
|
16389 |
|
16390 |
|
16391 | disableGutters: {
|
16392 | paddingLeft: 0,
|
16393 | paddingRight: 0
|
16394 | },
|
16395 |
|
16396 |
|
16397 | fixed: Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
|
16398 | var value = theme.breakpoints.values[breakpoint];
|
16399 |
|
16400 | if (value !== 0) {
|
16401 | acc[theme.breakpoints.up(breakpoint)] = {
|
16402 | maxWidth: value
|
16403 | };
|
16404 | }
|
16405 |
|
16406 | return acc;
|
16407 | }, {}),
|
16408 |
|
16409 |
|
16410 | maxWidthXs: _defineProperty({}, theme.breakpoints.up('xs'), {
|
16411 | maxWidth: Math.max(theme.breakpoints.values.xs, 444)
|
16412 | }),
|
16413 |
|
16414 |
|
16415 | maxWidthSm: _defineProperty({}, theme.breakpoints.up('sm'), {
|
16416 | maxWidth: theme.breakpoints.values.sm
|
16417 | }),
|
16418 |
|
16419 |
|
16420 | maxWidthMd: _defineProperty({}, theme.breakpoints.up('md'), {
|
16421 | maxWidth: theme.breakpoints.values.md
|
16422 | }),
|
16423 |
|
16424 |
|
16425 | maxWidthLg: _defineProperty({}, theme.breakpoints.up('lg'), {
|
16426 | maxWidth: theme.breakpoints.values.lg
|
16427 | }),
|
16428 |
|
16429 |
|
16430 | maxWidthXl: _defineProperty({}, theme.breakpoints.up('xl'), {
|
16431 | maxWidth: theme.breakpoints.values.xl
|
16432 | })
|
16433 | };
|
16434 | };
|
16435 | var Container = React.forwardRef(function Container(props, ref) {
|
16436 | var classes = props.classes,
|
16437 | className = props.className,
|
16438 | _props$component = props.component,
|
16439 | Component = _props$component === void 0 ? 'div' : _props$component,
|
16440 | _props$disableGutters = props.disableGutters,
|
16441 | disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
|
16442 | _props$fixed = props.fixed,
|
16443 | fixed = _props$fixed === void 0 ? false : _props$fixed,
|
16444 | _props$maxWidth = props.maxWidth,
|
16445 | maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
|
16446 | other = _objectWithoutProperties(props, ["classes", "className", "component", "disableGutters", "fixed", "maxWidth"]);
|
16447 |
|
16448 | return React.createElement(Component, _extends({
|
16449 | className: clsx(classes.root, className, fixed && classes.fixed, disableGutters && classes.disableGutters, maxWidth !== false && classes["maxWidth".concat(capitalize(String(maxWidth)))]),
|
16450 | ref: ref
|
16451 | }, other));
|
16452 | });
|
16453 | Container.propTypes = {
|
16454 |
|
16455 |
|
16456 |
|
16457 |
|
16458 |
|
16459 | |
16460 |
|
16461 |
|
16462 | children: propTypes
|
16463 |
|
16464 | .node.isRequired,
|
16465 |
|
16466 | |
16467 |
|
16468 |
|
16469 |
|
16470 | classes: propTypes.object,
|
16471 |
|
16472 | |
16473 |
|
16474 |
|
16475 | className: propTypes.string,
|
16476 |
|
16477 | |
16478 |
|
16479 |
|
16480 |
|
16481 | component: propTypes
|
16482 |
|
16483 | .elementType,
|
16484 |
|
16485 | |
16486 |
|
16487 |
|
16488 | disableGutters: propTypes.bool,
|
16489 |
|
16490 | |
16491 |
|
16492 |
|
16493 |
|
16494 |
|
16495 |
|
16496 | fixed: propTypes.bool,
|
16497 |
|
16498 | |
16499 |
|
16500 |
|
16501 |
|
16502 |
|
16503 | maxWidth: propTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false])
|
16504 | } ;
|
16505 | var Container$1 = withStyles$1(styles$w, {
|
16506 | name: 'MuiContainer'
|
16507 | })(Container);
|
16508 |
|
16509 | var html = {
|
16510 | WebkitFontSmoothing: 'antialiased',
|
16511 |
|
16512 | MozOsxFontSmoothing: 'grayscale',
|
16513 |
|
16514 |
|
16515 |
|
16516 | boxSizing: 'border-box'
|
16517 | };
|
16518 | var body = function body(theme) {
|
16519 | return _extends({
|
16520 | color: theme.palette.text.primary
|
16521 | }, theme.typography.body2, {
|
16522 | backgroundColor: theme.palette.background.default,
|
16523 | '@media print': {
|
16524 |
|
16525 | backgroundColor: theme.palette.common.white
|
16526 | }
|
16527 | });
|
16528 | };
|
16529 | var styles$x = function styles(theme) {
|
16530 | return {
|
16531 | '@global': {
|
16532 | html: html,
|
16533 | '*, *::before, *::after': {
|
16534 | boxSizing: 'inherit'
|
16535 | },
|
16536 | 'strong, b': {
|
16537 | fontWeight: theme.typography.fontWeightBold
|
16538 | },
|
16539 | body: _extends({
|
16540 | margin: 0
|
16541 | }, body(theme), {
|
16542 |
|
16543 |
|
16544 | '&::backdrop': {
|
16545 | backgroundColor: theme.palette.background.default
|
16546 | }
|
16547 | })
|
16548 | }
|
16549 | };
|
16550 | };
|
16551 | |
16552 |
|
16553 |
|
16554 |
|
16555 | function CssBaseline(props) {
|
16556 |
|
16557 | var _props$children = props.children,
|
16558 | children = _props$children === void 0 ? null : _props$children,
|
16559 | classes = props.classes;
|
16560 |
|
16561 |
|
16562 | return React.createElement(React.Fragment, null, children);
|
16563 | }
|
16564 |
|
16565 | CssBaseline.propTypes = {
|
16566 |
|
16567 |
|
16568 |
|
16569 |
|
16570 |
|
16571 | |
16572 |
|
16573 |
|
16574 | children: propTypes.node,
|
16575 |
|
16576 | |
16577 |
|
16578 |
|
16579 |
|
16580 | classes: propTypes.object
|
16581 | } ;
|
16582 |
|
16583 | {
|
16584 |
|
16585 | CssBaseline['propTypes' + ''] = exactProp(CssBaseline.propTypes);
|
16586 | }
|
16587 |
|
16588 | var CssBaseline$1 = withStyles$1(styles$x, {
|
16589 | name: 'MuiCssBaseline'
|
16590 | })(CssBaseline);
|
16591 |
|
16592 | function getContainer(container) {
|
16593 | container = typeof container === 'function' ? container() : container;
|
16594 |
|
16595 | return ReactDOM.findDOMNode(container);
|
16596 | }
|
16597 |
|
16598 | var useEnhancedEffect$2 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
16599 | |
16600 |
|
16601 |
|
16602 |
|
16603 |
|
16604 | var Portal = React.forwardRef(function Portal(props, ref) {
|
16605 | var children = props.children,
|
16606 | container = props.container,
|
16607 | _props$disablePortal = props.disablePortal,
|
16608 | disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
|
16609 | onRendered = props.onRendered;
|
16610 |
|
16611 | var _React$useState = React.useState(null),
|
16612 | mountNode = _React$useState[0],
|
16613 | setMountNode = _React$useState[1];
|
16614 |
|
16615 | var handleRef = useForkRef( React.isValidElement(children) ? children.ref : null, ref);
|
16616 | useEnhancedEffect$2(function () {
|
16617 | if (!disablePortal) {
|
16618 | setMountNode(getContainer(container) || document.body);
|
16619 | }
|
16620 | }, [container, disablePortal]);
|
16621 | useEnhancedEffect$2(function () {
|
16622 | if (mountNode && !disablePortal) {
|
16623 | setRef(ref, mountNode);
|
16624 | return function () {
|
16625 | setRef(ref, null);
|
16626 | };
|
16627 | }
|
16628 |
|
16629 | return undefined;
|
16630 | }, [ref, mountNode, disablePortal]);
|
16631 | useEnhancedEffect$2(function () {
|
16632 | if (onRendered && (mountNode || disablePortal)) {
|
16633 | onRendered();
|
16634 | }
|
16635 | }, [onRendered, mountNode, disablePortal]);
|
16636 |
|
16637 | if (disablePortal) {
|
16638 | if ( React.isValidElement(children)) {
|
16639 | return React.cloneElement(children, {
|
16640 | ref: handleRef
|
16641 | });
|
16642 | }
|
16643 |
|
16644 | return children;
|
16645 | }
|
16646 |
|
16647 | return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode;
|
16648 | });
|
16649 | Portal.propTypes = {
|
16650 |
|
16651 |
|
16652 |
|
16653 |
|
16654 |
|
16655 | |
16656 |
|
16657 |
|
16658 | children: propTypes.node,
|
16659 |
|
16660 | |
16661 |
|
16662 |
|
16663 |
|
16664 |
|
16665 |
|
16666 |
|
16667 | container: propTypes
|
16668 |
|
16669 | .oneOfType([HTMLElementType, propTypes.instanceOf(React.Component), propTypes.func]),
|
16670 |
|
16671 | |
16672 |
|
16673 |
|
16674 |
|
16675 | disablePortal: propTypes.bool,
|
16676 |
|
16677 | |
16678 |
|
16679 |
|
16680 |
|
16681 |
|
16682 |
|
16683 | onRendered: deprecatedPropType(propTypes.func, 'Use the ref instead.')
|
16684 | } ;
|
16685 |
|
16686 | {
|
16687 |
|
16688 | Portal['propTypes' + ''] = exactProp(Portal.propTypes);
|
16689 | }
|
16690 |
|
16691 |
|
16692 |
|
16693 | function getScrollbarSize() {
|
16694 | var scrollDiv = document.createElement('div');
|
16695 | scrollDiv.style.width = '99px';
|
16696 | scrollDiv.style.height = '99px';
|
16697 | scrollDiv.style.position = 'absolute';
|
16698 | scrollDiv.style.top = '-9999px';
|
16699 | scrollDiv.style.overflow = 'scroll';
|
16700 | document.body.appendChild(scrollDiv);
|
16701 | var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
16702 | document.body.removeChild(scrollDiv);
|
16703 | return scrollbarSize;
|
16704 | }
|
16705 |
|
16706 | function isOverflowing(container) {
|
16707 | var doc = ownerDocument(container);
|
16708 |
|
16709 | if (doc.body === container) {
|
16710 | return ownerWindow(doc).innerWidth > doc.documentElement.clientWidth;
|
16711 | }
|
16712 |
|
16713 | return container.scrollHeight > container.clientHeight;
|
16714 | }
|
16715 |
|
16716 | function ariaHidden(node, show) {
|
16717 | if (show) {
|
16718 | node.setAttribute('aria-hidden', 'true');
|
16719 | } else {
|
16720 | node.removeAttribute('aria-hidden');
|
16721 | }
|
16722 | }
|
16723 |
|
16724 | function getPaddingRight(node) {
|
16725 | return parseInt(window.getComputedStyle(node)['padding-right'], 10) || 0;
|
16726 | }
|
16727 |
|
16728 | function ariaHiddenSiblings(container, mountNode, currentNode) {
|
16729 | var nodesToExclude = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
|
16730 | var show = arguments.length > 4 ? arguments[4] : undefined;
|
16731 | var blacklist = [mountNode, currentNode].concat(_toConsumableArray(nodesToExclude));
|
16732 | var blacklistTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE'];
|
16733 | [].forEach.call(container.children, function (node) {
|
16734 | if (node.nodeType === 1 && blacklist.indexOf(node) === -1 && blacklistTagNames.indexOf(node.tagName) === -1) {
|
16735 | ariaHidden(node, show);
|
16736 | }
|
16737 | });
|
16738 | }
|
16739 |
|
16740 | function findIndexOf(containerInfo, callback) {
|
16741 | var idx = -1;
|
16742 | containerInfo.some(function (item, index) {
|
16743 | if (callback(item)) {
|
16744 | idx = index;
|
16745 | return true;
|
16746 | }
|
16747 |
|
16748 | return false;
|
16749 | });
|
16750 | return idx;
|
16751 | }
|
16752 |
|
16753 | function handleContainer(containerInfo, props) {
|
16754 | var restoreStyle = [];
|
16755 | var restorePaddings = [];
|
16756 | var container = containerInfo.container;
|
16757 | var fixedNodes;
|
16758 |
|
16759 | if (!props.disableScrollLock) {
|
16760 | if (isOverflowing(container)) {
|
16761 |
|
16762 | var scrollbarSize = getScrollbarSize();
|
16763 | restoreStyle.push({
|
16764 | value: container.style.paddingRight,
|
16765 | key: 'padding-right',
|
16766 | el: container
|
16767 | });
|
16768 |
|
16769 | container.style['padding-right'] = "".concat(getPaddingRight(container) + scrollbarSize, "px");
|
16770 |
|
16771 | fixedNodes = ownerDocument(container).querySelectorAll('.mui-fixed');
|
16772 | [].forEach.call(fixedNodes, function (node) {
|
16773 | restorePaddings.push(node.style.paddingRight);
|
16774 | node.style.paddingRight = "".concat(getPaddingRight(node) + scrollbarSize, "px");
|
16775 | });
|
16776 | }
|
16777 |
|
16778 |
|
16779 |
|
16780 | var parent = container.parentElement;
|
16781 | var scrollContainer = parent.nodeName === 'HTML' && window.getComputedStyle(parent)['overflow-y'] === 'scroll' ? parent : container;
|
16782 |
|
16783 |
|
16784 | restoreStyle.push({
|
16785 | value: scrollContainer.style.overflow,
|
16786 | key: 'overflow',
|
16787 | el: scrollContainer
|
16788 | });
|
16789 | scrollContainer.style.overflow = 'hidden';
|
16790 | }
|
16791 |
|
16792 | var restore = function restore() {
|
16793 | if (fixedNodes) {
|
16794 | [].forEach.call(fixedNodes, function (node, i) {
|
16795 | if (restorePaddings[i]) {
|
16796 | node.style.paddingRight = restorePaddings[i];
|
16797 | } else {
|
16798 | node.style.removeProperty('padding-right');
|
16799 | }
|
16800 | });
|
16801 | }
|
16802 |
|
16803 | restoreStyle.forEach(function (_ref) {
|
16804 | var value = _ref.value,
|
16805 | el = _ref.el,
|
16806 | key = _ref.key;
|
16807 |
|
16808 | if (value) {
|
16809 | el.style.setProperty(key, value);
|
16810 | } else {
|
16811 | el.style.removeProperty(key);
|
16812 | }
|
16813 | });
|
16814 | };
|
16815 |
|
16816 | return restore;
|
16817 | }
|
16818 |
|
16819 | function getHiddenSiblings(container) {
|
16820 | var hiddenSiblings = [];
|
16821 | [].forEach.call(container.children, function (node) {
|
16822 | if (node.getAttribute && node.getAttribute('aria-hidden') === 'true') {
|
16823 | hiddenSiblings.push(node);
|
16824 | }
|
16825 | });
|
16826 | return hiddenSiblings;
|
16827 | }
|
16828 | |
16829 |
|
16830 |
|
16831 |
|
16832 |
|
16833 |
|
16834 |
|
16835 |
|
16836 |
|
16837 | var ModalManager = function () {
|
16838 | function ModalManager() {
|
16839 | _classCallCheck(this, ModalManager);
|
16840 |
|
16841 |
|
16842 | this.modals = [];
|
16843 |
|
16844 |
|
16845 |
|
16846 |
|
16847 |
|
16848 | this.containers = [];
|
16849 | }
|
16850 |
|
16851 | _createClass(ModalManager, [{
|
16852 | key: "add",
|
16853 | value: function add(modal, container) {
|
16854 | var modalIndex = this.modals.indexOf(modal);
|
16855 |
|
16856 | if (modalIndex !== -1) {
|
16857 | return modalIndex;
|
16858 | }
|
16859 |
|
16860 | modalIndex = this.modals.length;
|
16861 | this.modals.push(modal);
|
16862 |
|
16863 | if (modal.modalRef) {
|
16864 | ariaHidden(modal.modalRef, false);
|
16865 | }
|
16866 |
|
16867 | var hiddenSiblingNodes = getHiddenSiblings(container);
|
16868 | ariaHiddenSiblings(container, modal.mountNode, modal.modalRef, hiddenSiblingNodes, true);
|
16869 | var containerIndex = findIndexOf(this.containers, function (item) {
|
16870 | return item.container === container;
|
16871 | });
|
16872 |
|
16873 | if (containerIndex !== -1) {
|
16874 | this.containers[containerIndex].modals.push(modal);
|
16875 | return modalIndex;
|
16876 | }
|
16877 |
|
16878 | this.containers.push({
|
16879 | modals: [modal],
|
16880 | container: container,
|
16881 | restore: null,
|
16882 | hiddenSiblingNodes: hiddenSiblingNodes
|
16883 | });
|
16884 | return modalIndex;
|
16885 | }
|
16886 | }, {
|
16887 | key: "mount",
|
16888 | value: function mount(modal, props) {
|
16889 | var containerIndex = findIndexOf(this.containers, function (item) {
|
16890 | return item.modals.indexOf(modal) !== -1;
|
16891 | });
|
16892 | var containerInfo = this.containers[containerIndex];
|
16893 |
|
16894 | if (!containerInfo.restore) {
|
16895 | containerInfo.restore = handleContainer(containerInfo, props);
|
16896 | }
|
16897 | }
|
16898 | }, {
|
16899 | key: "remove",
|
16900 | value: function remove(modal) {
|
16901 | var modalIndex = this.modals.indexOf(modal);
|
16902 |
|
16903 | if (modalIndex === -1) {
|
16904 | return modalIndex;
|
16905 | }
|
16906 |
|
16907 | var containerIndex = findIndexOf(this.containers, function (item) {
|
16908 | return item.modals.indexOf(modal) !== -1;
|
16909 | });
|
16910 | var containerInfo = this.containers[containerIndex];
|
16911 | containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
|
16912 | this.modals.splice(modalIndex, 1);
|
16913 |
|
16914 | if (containerInfo.modals.length === 0) {
|
16915 |
|
16916 | if (containerInfo.restore) {
|
16917 | containerInfo.restore();
|
16918 | }
|
16919 |
|
16920 | if (modal.modalRef) {
|
16921 |
|
16922 | ariaHidden(modal.modalRef, true);
|
16923 | }
|
16924 |
|
16925 | ariaHiddenSiblings(containerInfo.container, modal.mountNode, modal.modalRef, containerInfo.hiddenSiblingNodes, false);
|
16926 | this.containers.splice(containerIndex, 1);
|
16927 | } else {
|
16928 |
|
16929 | var nextTop = containerInfo.modals[containerInfo.modals.length - 1];
|
16930 |
|
16931 |
|
16932 |
|
16933 | if (nextTop.modalRef) {
|
16934 | ariaHidden(nextTop.modalRef, false);
|
16935 | }
|
16936 | }
|
16937 |
|
16938 | return modalIndex;
|
16939 | }
|
16940 | }, {
|
16941 | key: "isTopModal",
|
16942 | value: function isTopModal(modal) {
|
16943 | return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
|
16944 | }
|
16945 | }]);
|
16946 |
|
16947 | return ModalManager;
|
16948 | }();
|
16949 |
|
16950 | |
16951 |
|
16952 |
|
16953 |
|
16954 | function Unstable_TrapFocus(props) {
|
16955 | var children = props.children,
|
16956 | _props$disableAutoFoc = props.disableAutoFocus,
|
16957 | disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
|
16958 | _props$disableEnforce = props.disableEnforceFocus,
|
16959 | disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,
|
16960 | _props$disableRestore = props.disableRestoreFocus,
|
16961 | disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,
|
16962 | getDoc = props.getDoc,
|
16963 | isEnabled = props.isEnabled,
|
16964 | open = props.open;
|
16965 | var ignoreNextEnforceFocus = React.useRef();
|
16966 | var sentinelStart = React.useRef(null);
|
16967 | var sentinelEnd = React.useRef(null);
|
16968 | var nodeToRestore = React.useRef();
|
16969 | var rootRef = React.useRef(null);
|
16970 |
|
16971 | var handleOwnRef = React.useCallback(function (instance) {
|
16972 |
|
16973 | rootRef.current = ReactDOM.findDOMNode(instance);
|
16974 | }, []);
|
16975 | var handleRef = useForkRef(children.ref, handleOwnRef);
|
16976 | var prevOpenRef = React.useRef();
|
16977 | React.useEffect(function () {
|
16978 | prevOpenRef.current = open;
|
16979 | }, [open]);
|
16980 |
|
16981 | if (!prevOpenRef.current && open && typeof window !== 'undefined') {
|
16982 |
|
16983 |
|
16984 |
|
16985 |
|
16986 |
|
16987 |
|
16988 |
|
16989 |
|
16990 | nodeToRestore.current = getDoc().activeElement;
|
16991 | }
|
16992 |
|
16993 | React.useEffect(function () {
|
16994 | if (!open) {
|
16995 | return;
|
16996 | }
|
16997 |
|
16998 | var doc = ownerDocument(rootRef.current);
|
16999 |
|
17000 | if (!disableAutoFocus && rootRef.current && !rootRef.current.contains(doc.activeElement)) {
|
17001 | if (!rootRef.current.hasAttribute('tabIndex')) {
|
17002 | {
|
17003 | 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'));
|
17004 | }
|
17005 |
|
17006 | rootRef.current.setAttribute('tabIndex', -1);
|
17007 | }
|
17008 |
|
17009 | rootRef.current.focus();
|
17010 | }
|
17011 |
|
17012 | var contain = function contain() {
|
17013 | var rootElement = rootRef.current;
|
17014 |
|
17015 |
|
17016 | if (rootElement === null) {
|
17017 | return;
|
17018 | }
|
17019 |
|
17020 | if (!doc.hasFocus() || disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {
|
17021 | ignoreNextEnforceFocus.current = false;
|
17022 | return;
|
17023 | }
|
17024 |
|
17025 | if (rootRef.current && !rootRef.current.contains(doc.activeElement)) {
|
17026 | rootRef.current.focus();
|
17027 | }
|
17028 | };
|
17029 |
|
17030 | var loopFocus = function loopFocus(event) {
|
17031 |
|
17032 | if (disableEnforceFocus || !isEnabled() || event.keyCode !== 9) {
|
17033 | return;
|
17034 | }
|
17035 |
|
17036 |
|
17037 | if (doc.activeElement === rootRef.current) {
|
17038 |
|
17039 |
|
17040 | ignoreNextEnforceFocus.current = true;
|
17041 |
|
17042 | if (event.shiftKey) {
|
17043 | sentinelEnd.current.focus();
|
17044 | } else {
|
17045 | sentinelStart.current.focus();
|
17046 | }
|
17047 | }
|
17048 | };
|
17049 |
|
17050 | doc.addEventListener('focus', contain, true);
|
17051 | doc.addEventListener('keydown', loopFocus, true);
|
17052 |
|
17053 |
|
17054 |
|
17055 |
|
17056 |
|
17057 | var interval = setInterval(function () {
|
17058 | contain();
|
17059 | }, 50);
|
17060 | return function () {
|
17061 | clearInterval(interval);
|
17062 | doc.removeEventListener('focus', contain, true);
|
17063 | doc.removeEventListener('keydown', loopFocus, true);
|
17064 |
|
17065 | if (!disableRestoreFocus) {
|
17066 |
|
17067 |
|
17068 |
|
17069 |
|
17070 | if (nodeToRestore.current && nodeToRestore.current.focus) {
|
17071 | nodeToRestore.current.focus();
|
17072 | }
|
17073 |
|
17074 | nodeToRestore.current = null;
|
17075 | }
|
17076 | };
|
17077 | }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open]);
|
17078 | return React.createElement(React.Fragment, null, React.createElement("div", {
|
17079 | tabIndex: 0,
|
17080 | ref: sentinelStart,
|
17081 | "data-test": "sentinelStart"
|
17082 | }), React.cloneElement(children, {
|
17083 | ref: handleRef
|
17084 | }), React.createElement("div", {
|
17085 | tabIndex: 0,
|
17086 | ref: sentinelEnd,
|
17087 | "data-test": "sentinelEnd"
|
17088 | }));
|
17089 | }
|
17090 |
|
17091 | Unstable_TrapFocus.propTypes = {
|
17092 |
|
17093 |
|
17094 |
|
17095 |
|
17096 |
|
17097 | |
17098 |
|
17099 |
|
17100 | children: propTypes.node,
|
17101 |
|
17102 | |
17103 |
|
17104 |
|
17105 |
|
17106 |
|
17107 |
|
17108 |
|
17109 |
|
17110 | disableAutoFocus: propTypes.bool,
|
17111 |
|
17112 | |
17113 |
|
17114 |
|
17115 |
|
17116 |
|
17117 |
|
17118 | disableEnforceFocus: propTypes.bool,
|
17119 |
|
17120 | |
17121 |
|
17122 |
|
17123 |
|
17124 | disableRestoreFocus: propTypes.bool,
|
17125 |
|
17126 | |
17127 |
|
17128 |
|
17129 |
|
17130 | getDoc: propTypes.func.isRequired,
|
17131 |
|
17132 | |
17133 |
|
17134 |
|
17135 |
|
17136 | isEnabled: propTypes.func.isRequired,
|
17137 |
|
17138 | |
17139 |
|
17140 |
|
17141 | open: propTypes.bool.isRequired
|
17142 | } ;
|
17143 |
|
17144 | {
|
17145 |
|
17146 | Unstable_TrapFocus['propTypes' + ''] = exactProp(Unstable_TrapFocus.propTypes);
|
17147 | }
|
17148 |
|
17149 | var styles$y = {
|
17150 |
|
17151 | root: {
|
17152 | zIndex: -1,
|
17153 | position: 'fixed',
|
17154 | right: 0,
|
17155 | bottom: 0,
|
17156 | top: 0,
|
17157 | left: 0,
|
17158 | backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
17159 | WebkitTapHighlightColor: 'transparent'
|
17160 | },
|
17161 |
|
17162 |
|
17163 | invisible: {
|
17164 | backgroundColor: 'transparent'
|
17165 | }
|
17166 | };
|
17167 | |
17168 |
|
17169 |
|
17170 |
|
17171 | var SimpleBackdrop = React.forwardRef(function SimpleBackdrop(props, ref) {
|
17172 | var _props$invisible = props.invisible,
|
17173 | invisible = _props$invisible === void 0 ? false : _props$invisible,
|
17174 | open = props.open,
|
17175 | other = _objectWithoutProperties(props, ["invisible", "open"]);
|
17176 |
|
17177 | return open ? React.createElement("div", _extends({
|
17178 | "aria-hidden": true,
|
17179 | ref: ref
|
17180 | }, other, {
|
17181 | style: _extends({}, styles$y.root, invisible ? styles$y.invisible : {}, other.style)
|
17182 | })) : null;
|
17183 | });
|
17184 | SimpleBackdrop.propTypes = {
|
17185 | |
17186 |
|
17187 |
|
17188 |
|
17189 | invisible: propTypes.bool,
|
17190 |
|
17191 | |
17192 |
|
17193 |
|
17194 | open: propTypes.bool.isRequired
|
17195 | } ;
|
17196 |
|
17197 | function getContainer$1(container) {
|
17198 | container = typeof container === 'function' ? container() : container;
|
17199 | return ReactDOM.findDOMNode(container);
|
17200 | }
|
17201 |
|
17202 | function getHasTransition(props) {
|
17203 | return props.children ? props.children.props.hasOwnProperty('in') : false;
|
17204 | }
|
17205 |
|
17206 |
|
17207 |
|
17208 | var defaultManager = new ModalManager();
|
17209 | var styles$z = function styles(theme) {
|
17210 | return {
|
17211 |
|
17212 | root: {
|
17213 | position: 'fixed',
|
17214 | zIndex: theme.zIndex.modal,
|
17215 | right: 0,
|
17216 | bottom: 0,
|
17217 | top: 0,
|
17218 | left: 0
|
17219 | },
|
17220 |
|
17221 |
|
17222 | hidden: {
|
17223 | visibility: 'hidden'
|
17224 | }
|
17225 | };
|
17226 | };
|
17227 | |
17228 |
|
17229 |
|
17230 |
|
17231 |
|
17232 |
|
17233 |
|
17234 |
|
17235 |
|
17236 |
|
17237 |
|
17238 |
|
17239 |
|
17240 |
|
17241 | var Modal = React.forwardRef(function Modal(inProps, ref) {
|
17242 | var theme = useTheme();
|
17243 | var props = getThemeProps({
|
17244 | name: 'MuiModal',
|
17245 | props: _extends({}, inProps),
|
17246 | theme: theme
|
17247 | });
|
17248 |
|
17249 | var _props$BackdropCompon = props.BackdropComponent,
|
17250 | BackdropComponent = _props$BackdropCompon === void 0 ? SimpleBackdrop : _props$BackdropCompon,
|
17251 | BackdropProps = props.BackdropProps,
|
17252 | children = props.children,
|
17253 | _props$closeAfterTran = props.closeAfterTransition,
|
17254 | closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
|
17255 | container = props.container,
|
17256 | _props$disableAutoFoc = props.disableAutoFocus,
|
17257 | disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
|
17258 | _props$disableBackdro = props.disableBackdropClick,
|
17259 | disableBackdropClick = _props$disableBackdro === void 0 ? false : _props$disableBackdro,
|
17260 | _props$disableEnforce = props.disableEnforceFocus,
|
17261 | disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,
|
17262 | _props$disableEscapeK = props.disableEscapeKeyDown,
|
17263 | disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,
|
17264 | _props$disablePortal = props.disablePortal,
|
17265 | disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
|
17266 | _props$disableRestore = props.disableRestoreFocus,
|
17267 | disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,
|
17268 | _props$disableScrollL = props.disableScrollLock,
|
17269 | disableScrollLock = _props$disableScrollL === void 0 ? false : _props$disableScrollL,
|
17270 | _props$hideBackdrop = props.hideBackdrop,
|
17271 | hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
|
17272 | _props$keepMounted = props.keepMounted,
|
17273 | keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
|
17274 | _props$manager = props.manager,
|
17275 | manager = _props$manager === void 0 ? defaultManager : _props$manager,
|
17276 | onBackdropClick = props.onBackdropClick,
|
17277 | onClose = props.onClose,
|
17278 | onEscapeKeyDown = props.onEscapeKeyDown,
|
17279 | onRendered = props.onRendered,
|
17280 | open = props.open,
|
17281 | other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "children", "closeAfterTransition", "container", "disableAutoFocus", "disableBackdropClick", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onEscapeKeyDown", "onRendered", "open"]);
|
17282 |
|
17283 | var _React$useState = React.useState(true),
|
17284 | exited = _React$useState[0],
|
17285 | setExited = _React$useState[1];
|
17286 |
|
17287 | var modal = React.useRef({});
|
17288 | var mountNodeRef = React.useRef(null);
|
17289 | var modalRef = React.useRef(null);
|
17290 | var handleRef = useForkRef(modalRef, ref);
|
17291 | var hasTransition = getHasTransition(props);
|
17292 |
|
17293 | var getDoc = function getDoc() {
|
17294 | return ownerDocument(mountNodeRef.current);
|
17295 | };
|
17296 |
|
17297 | var getModal = function getModal() {
|
17298 | modal.current.modalRef = modalRef.current;
|
17299 | modal.current.mountNode = mountNodeRef.current;
|
17300 | return modal.current;
|
17301 | };
|
17302 |
|
17303 | var handleMounted = function handleMounted() {
|
17304 | manager.mount(getModal(), {
|
17305 | disableScrollLock: disableScrollLock
|
17306 | });
|
17307 |
|
17308 | modalRef.current.scrollTop = 0;
|
17309 | };
|
17310 |
|
17311 | var handleOpen = useEventCallback(function () {
|
17312 | var resolvedContainer = getContainer$1(container) || getDoc().body;
|
17313 | manager.add(getModal(), resolvedContainer);
|
17314 |
|
17315 | if (modalRef.current) {
|
17316 | handleMounted();
|
17317 | }
|
17318 | });
|
17319 | var isTopModal = React.useCallback(function () {
|
17320 | return manager.isTopModal(getModal());
|
17321 | }, [manager]);
|
17322 | var handlePortalRef = useEventCallback(function (node) {
|
17323 | mountNodeRef.current = node;
|
17324 |
|
17325 | if (!node) {
|
17326 | return;
|
17327 | }
|
17328 |
|
17329 | if (onRendered) {
|
17330 | onRendered();
|
17331 | }
|
17332 |
|
17333 | if (open && isTopModal()) {
|
17334 | handleMounted();
|
17335 | } else {
|
17336 | ariaHidden(modalRef.current, true);
|
17337 | }
|
17338 | });
|
17339 | var handleClose = React.useCallback(function () {
|
17340 | manager.remove(getModal());
|
17341 | }, [manager]);
|
17342 | React.useEffect(function () {
|
17343 | return function () {
|
17344 | handleClose();
|
17345 | };
|
17346 | }, [handleClose]);
|
17347 | React.useEffect(function () {
|
17348 | if (open) {
|
17349 | handleOpen();
|
17350 | } else if (!hasTransition || !closeAfterTransition) {
|
17351 | handleClose();
|
17352 | }
|
17353 | }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
|
17354 |
|
17355 | if (!keepMounted && !open && (!hasTransition || exited)) {
|
17356 | return null;
|
17357 | }
|
17358 |
|
17359 | var handleEnter = function handleEnter() {
|
17360 | setExited(false);
|
17361 | };
|
17362 |
|
17363 | var handleExited = function handleExited() {
|
17364 | setExited(true);
|
17365 |
|
17366 | if (closeAfterTransition) {
|
17367 | handleClose();
|
17368 | }
|
17369 | };
|
17370 |
|
17371 | var handleBackdropClick = function handleBackdropClick(event) {
|
17372 | if (event.target !== event.currentTarget) {
|
17373 | return;
|
17374 | }
|
17375 |
|
17376 | if (onBackdropClick) {
|
17377 | onBackdropClick(event);
|
17378 | }
|
17379 |
|
17380 | if (!disableBackdropClick && onClose) {
|
17381 | onClose(event, 'backdropClick');
|
17382 | }
|
17383 | };
|
17384 |
|
17385 | var handleKeyDown = function handleKeyDown(event) {
|
17386 |
|
17387 |
|
17388 |
|
17389 |
|
17390 |
|
17391 |
|
17392 | if (event.key !== 'Escape' || !isTopModal()) {
|
17393 | return;
|
17394 | }
|
17395 |
|
17396 | if (onEscapeKeyDown) {
|
17397 | onEscapeKeyDown(event);
|
17398 | }
|
17399 |
|
17400 | if (!disableEscapeKeyDown) {
|
17401 |
|
17402 | event.stopPropagation();
|
17403 |
|
17404 | if (onClose) {
|
17405 | onClose(event, 'escapeKeyDown');
|
17406 | }
|
17407 | }
|
17408 | };
|
17409 |
|
17410 | var inlineStyle = styles$z(theme || {
|
17411 | zIndex: zIndex$1
|
17412 | });
|
17413 | var childProps = {};
|
17414 |
|
17415 | if (children.props.tabIndex === undefined) {
|
17416 | childProps.tabIndex = children.props.tabIndex || '-1';
|
17417 | }
|
17418 |
|
17419 |
|
17420 | if (hasTransition) {
|
17421 | childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);
|
17422 | childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
|
17423 | }
|
17424 |
|
17425 | return React.createElement(Portal, {
|
17426 | ref: handlePortalRef,
|
17427 | container: container,
|
17428 | disablePortal: disablePortal
|
17429 | }, React.createElement("div", _extends({
|
17430 | ref: handleRef,
|
17431 | onKeyDown: handleKeyDown,
|
17432 | role: "presentation"
|
17433 | }, other, {
|
17434 | style: _extends({}, inlineStyle.root, !open && exited ? inlineStyle.hidden : {}, other.style)
|
17435 | }), hideBackdrop ? null : React.createElement(BackdropComponent, _extends({
|
17436 | open: open,
|
17437 | onClick: handleBackdropClick
|
17438 | }, BackdropProps)), React.createElement(Unstable_TrapFocus, {
|
17439 | disableEnforceFocus: disableEnforceFocus,
|
17440 | disableAutoFocus: disableAutoFocus,
|
17441 | disableRestoreFocus: disableRestoreFocus,
|
17442 | getDoc: getDoc,
|
17443 | isEnabled: isTopModal,
|
17444 | open: open
|
17445 | }, React.cloneElement(children, childProps))));
|
17446 | });
|
17447 | Modal.propTypes = {
|
17448 | |
17449 |
|
17450 |
|
17451 | BackdropComponent: propTypes.elementType,
|
17452 |
|
17453 | |
17454 |
|
17455 |
|
17456 | BackdropProps: propTypes.object,
|
17457 |
|
17458 | |
17459 |
|
17460 |
|
17461 | children: elementAcceptingRef.isRequired,
|
17462 |
|
17463 | |
17464 |
|
17465 |
|
17466 | closeAfterTransition: propTypes.bool,
|
17467 |
|
17468 | |
17469 |
|
17470 |
|
17471 |
|
17472 |
|
17473 |
|
17474 |
|
17475 | container: propTypes
|
17476 |
|
17477 | .oneOfType([HTMLElementType, propTypes.instanceOf(React.Component), propTypes.func]),
|
17478 |
|
17479 | |
17480 |
|
17481 |
|
17482 |
|
17483 |
|
17484 |
|
17485 |
|
17486 |
|
17487 | disableAutoFocus: propTypes.bool,
|
17488 |
|
17489 | |
17490 |
|
17491 |
|
17492 | disableBackdropClick: deprecatedPropType(propTypes.bool, 'Use the onClose prop with the `reason` argument to filter the `backdropClick` events.'),
|
17493 |
|
17494 | |
17495 |
|
17496 |
|
17497 |
|
17498 |
|
17499 |
|
17500 | disableEnforceFocus: propTypes.bool,
|
17501 |
|
17502 | |
17503 |
|
17504 |
|
17505 | disableEscapeKeyDown: propTypes.bool,
|
17506 |
|
17507 | |
17508 |
|
17509 |
|
17510 |
|
17511 | disablePortal: propTypes.bool,
|
17512 |
|
17513 | |
17514 |
|
17515 |
|
17516 |
|
17517 | disableRestoreFocus: propTypes.bool,
|
17518 |
|
17519 | |
17520 |
|
17521 |
|
17522 | disableScrollLock: propTypes.bool,
|
17523 |
|
17524 | |
17525 |
|
17526 |
|
17527 | hideBackdrop: propTypes.bool,
|
17528 |
|
17529 | |
17530 |
|
17531 |
|
17532 |
|
17533 |
|
17534 | keepMounted: propTypes.bool,
|
17535 |
|
17536 | |
17537 |
|
17538 |
|
17539 | manager: propTypes.object,
|
17540 |
|
17541 | |
17542 |
|
17543 |
|
17544 | onBackdropClick: deprecatedPropType(propTypes.func, 'Use the onClose prop with the `reason` argument to handle the `backdropClick` events.'),
|
17545 |
|
17546 | |
17547 |
|
17548 |
|
17549 |
|
17550 |
|
17551 |
|
17552 |
|
17553 | onClose: propTypes.func,
|
17554 |
|
17555 | |
17556 |
|
17557 |
|
17558 |
|
17559 | onEscapeKeyDown: deprecatedPropType(propTypes.func, 'Use the onClose prop with the `reason` argument to handle the `escapeKeyDown` events.'),
|
17560 |
|
17561 | |
17562 |
|
17563 |
|
17564 |
|
17565 |
|
17566 |
|
17567 | onRendered: deprecatedPropType(propTypes.func, 'Use the ref instead.'),
|
17568 |
|
17569 | |
17570 |
|
17571 |
|
17572 | open: propTypes.bool.isRequired
|
17573 | } ;
|
17574 |
|
17575 | var styles$A = function styles(theme) {
|
17576 | return {
|
17577 |
|
17578 | root: {
|
17579 | '@media print': {
|
17580 |
|
17581 | position: 'absolute !important'
|
17582 | }
|
17583 | },
|
17584 |
|
17585 |
|
17586 | scrollPaper: {
|
17587 | display: 'flex',
|
17588 | justifyContent: 'center',
|
17589 | alignItems: 'center'
|
17590 | },
|
17591 |
|
17592 |
|
17593 | scrollBody: {
|
17594 | overflowY: 'auto',
|
17595 | overflowX: 'hidden',
|
17596 | textAlign: 'center',
|
17597 | '&:after': {
|
17598 | content: '""',
|
17599 | display: 'inline-block',
|
17600 | verticalAlign: 'middle',
|
17601 | height: '100%',
|
17602 | width: '0'
|
17603 | }
|
17604 | },
|
17605 |
|
17606 |
|
17607 | container: {
|
17608 | height: '100%',
|
17609 | '@media print': {
|
17610 | height: 'auto'
|
17611 | },
|
17612 |
|
17613 | outline: 0
|
17614 | },
|
17615 |
|
17616 |
|
17617 | paper: {
|
17618 | margin: 32,
|
17619 | position: 'relative',
|
17620 | overflowY: 'auto',
|
17621 |
|
17622 | '@media print': {
|
17623 | overflowY: 'visible',
|
17624 | boxShadow: 'none'
|
17625 | }
|
17626 | },
|
17627 |
|
17628 |
|
17629 | paperScrollPaper: {
|
17630 | display: 'flex',
|
17631 | flexDirection: 'column',
|
17632 | maxHeight: 'calc(100% - 64px)'
|
17633 | },
|
17634 |
|
17635 |
|
17636 | paperScrollBody: {
|
17637 | display: 'inline-block',
|
17638 | verticalAlign: 'middle',
|
17639 | textAlign: 'left'
|
17640 |
|
17641 | },
|
17642 |
|
17643 |
|
17644 | paperWidthFalse: {
|
17645 | maxWidth: 'calc(100% - 64px)'
|
17646 | },
|
17647 |
|
17648 |
|
17649 | paperWidthXs: {
|
17650 | maxWidth: Math.max(theme.breakpoints.values.xs, 444),
|
17651 | '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2), {
|
17652 | maxWidth: 'calc(100% - 64px)'
|
17653 | })
|
17654 | },
|
17655 |
|
17656 |
|
17657 | paperWidthSm: {
|
17658 | maxWidth: theme.breakpoints.values.sm,
|
17659 | '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.sm + 32 * 2), {
|
17660 | maxWidth: 'calc(100% - 64px)'
|
17661 | })
|
17662 | },
|
17663 |
|
17664 |
|
17665 | paperWidthMd: {
|
17666 | maxWidth: theme.breakpoints.values.md,
|
17667 | '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.md + 32 * 2), {
|
17668 | maxWidth: 'calc(100% - 64px)'
|
17669 | })
|
17670 | },
|
17671 |
|
17672 |
|
17673 | paperWidthLg: {
|
17674 | maxWidth: theme.breakpoints.values.lg,
|
17675 | '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.lg + 32 * 2), {
|
17676 | maxWidth: 'calc(100% - 64px)'
|
17677 | })
|
17678 | },
|
17679 |
|
17680 |
|
17681 | paperWidthXl: {
|
17682 | maxWidth: theme.breakpoints.values.xl,
|
17683 | '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.xl + 32 * 2), {
|
17684 | maxWidth: 'calc(100% - 64px)'
|
17685 | })
|
17686 | },
|
17687 |
|
17688 |
|
17689 | paperFullWidth: {
|
17690 | width: 'calc(100% - 64px)'
|
17691 | },
|
17692 |
|
17693 |
|
17694 | paperFullScreen: {
|
17695 | margin: 0,
|
17696 | width: '100%',
|
17697 | maxWidth: '100%',
|
17698 | height: '100%',
|
17699 | maxHeight: 'none',
|
17700 | borderRadius: 0,
|
17701 | '&$paperScrollBody': {
|
17702 | margin: 0,
|
17703 | maxWidth: '100%'
|
17704 | }
|
17705 | }
|
17706 | };
|
17707 | };
|
17708 | var defaultTransitionDuration = {
|
17709 | enter: duration.enteringScreen,
|
17710 | exit: duration.leavingScreen
|
17711 | };
|
17712 | |
17713 |
|
17714 |
|
17715 |
|
17716 | var Dialog = React.forwardRef(function Dialog(props, ref) {
|
17717 | var BackdropProps = props.BackdropProps,
|
17718 | children = props.children,
|
17719 | classes = props.classes,
|
17720 | className = props.className,
|
17721 | _props$disableBackdro = props.disableBackdropClick,
|
17722 | disableBackdropClick = _props$disableBackdro === void 0 ? false : _props$disableBackdro,
|
17723 | _props$disableEscapeK = props.disableEscapeKeyDown,
|
17724 | disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,
|
17725 | _props$fullScreen = props.fullScreen,
|
17726 | fullScreen = _props$fullScreen === void 0 ? false : _props$fullScreen,
|
17727 | _props$fullWidth = props.fullWidth,
|
17728 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
17729 | _props$maxWidth = props.maxWidth,
|
17730 | maxWidth = _props$maxWidth === void 0 ? 'sm' : _props$maxWidth,
|
17731 | onBackdropClick = props.onBackdropClick,
|
17732 | onClose = props.onClose,
|
17733 | onEnter = props.onEnter,
|
17734 | onEntered = props.onEntered,
|
17735 | onEntering = props.onEntering,
|
17736 | onEscapeKeyDown = props.onEscapeKeyDown,
|
17737 | onExit = props.onExit,
|
17738 | onExited = props.onExited,
|
17739 | onExiting = props.onExiting,
|
17740 | open = props.open,
|
17741 | _props$PaperComponent = props.PaperComponent,
|
17742 | PaperComponent = _props$PaperComponent === void 0 ? Paper$1 : _props$PaperComponent,
|
17743 | _props$PaperProps = props.PaperProps,
|
17744 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
17745 | _props$scroll = props.scroll,
|
17746 | scroll = _props$scroll === void 0 ? 'paper' : _props$scroll,
|
17747 | _props$TransitionComp = props.TransitionComponent,
|
17748 | TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
|
17749 | _props$transitionDura = props.transitionDuration,
|
17750 | transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
|
17751 | TransitionProps = props.TransitionProps,
|
17752 | ariaDescribedby = props['aria-describedby'],
|
17753 | ariaLabelledby = props['aria-labelledby'],
|
17754 | 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"]);
|
17755 |
|
17756 | var mouseDownTarget = React.useRef();
|
17757 |
|
17758 | var handleMouseDown = function handleMouseDown(event) {
|
17759 | mouseDownTarget.current = event.target;
|
17760 | };
|
17761 |
|
17762 | var handleBackdropClick = function handleBackdropClick(event) {
|
17763 |
|
17764 |
|
17765 | if (event.target !== event.currentTarget) {
|
17766 | return;
|
17767 | }
|
17768 |
|
17769 |
|
17770 | if (event.target !== mouseDownTarget.current) {
|
17771 | return;
|
17772 | }
|
17773 |
|
17774 | mouseDownTarget.current = null;
|
17775 |
|
17776 | if (onBackdropClick) {
|
17777 | onBackdropClick(event);
|
17778 | }
|
17779 |
|
17780 | if (!disableBackdropClick && onClose) {
|
17781 | onClose(event, 'backdropClick');
|
17782 | }
|
17783 | };
|
17784 |
|
17785 | return React.createElement(Modal, _extends({
|
17786 | className: clsx(classes.root, className),
|
17787 | BackdropComponent: Backdrop$1,
|
17788 | BackdropProps: _extends({
|
17789 | transitionDuration: transitionDuration
|
17790 | }, BackdropProps),
|
17791 | closeAfterTransition: true
|
17792 | }, disableBackdropClick ? {
|
17793 | disableBackdropClick: disableBackdropClick
|
17794 | } : {}, {
|
17795 | disableEscapeKeyDown: disableEscapeKeyDown,
|
17796 | onEscapeKeyDown: onEscapeKeyDown,
|
17797 | onClose: onClose,
|
17798 | open: open,
|
17799 | ref: ref
|
17800 | }, other), React.createElement(TransitionComponent, _extends({
|
17801 | appear: true,
|
17802 | in: open,
|
17803 | timeout: transitionDuration,
|
17804 | onEnter: onEnter,
|
17805 | onEntering: onEntering,
|
17806 | onEntered: onEntered,
|
17807 | onExit: onExit,
|
17808 | onExiting: onExiting,
|
17809 | onExited: onExited,
|
17810 | role: "none presentation"
|
17811 | }, TransitionProps), React.createElement("div", {
|
17812 | className: clsx(classes.container, classes["scroll".concat(capitalize(scroll))]),
|
17813 | onMouseUp: handleBackdropClick,
|
17814 | onMouseDown: handleMouseDown
|
17815 | }, React.createElement(PaperComponent, _extends({
|
17816 | elevation: 24,
|
17817 | role: "dialog",
|
17818 | "aria-describedby": ariaDescribedby,
|
17819 | "aria-labelledby": ariaLabelledby
|
17820 | }, PaperProps, {
|
17821 | className: clsx(classes.paper, classes["paperScroll".concat(capitalize(scroll))], classes["paperWidth".concat(capitalize(String(maxWidth)))], PaperProps.className, fullScreen && classes.paperFullScreen, fullWidth && classes.paperFullWidth)
|
17822 | }), children))));
|
17823 | });
|
17824 | Dialog.propTypes = {
|
17825 |
|
17826 |
|
17827 |
|
17828 |
|
17829 |
|
17830 | |
17831 |
|
17832 |
|
17833 | 'aria-describedby': propTypes.string,
|
17834 |
|
17835 | |
17836 |
|
17837 |
|
17838 | 'aria-labelledby': propTypes.string,
|
17839 |
|
17840 | |
17841 |
|
17842 |
|
17843 | BackdropProps: propTypes.object,
|
17844 |
|
17845 | |
17846 |
|
17847 |
|
17848 | children: propTypes.node,
|
17849 |
|
17850 | |
17851 |
|
17852 |
|
17853 |
|
17854 | classes: propTypes.object,
|
17855 |
|
17856 | |
17857 |
|
17858 |
|
17859 | className: propTypes.string,
|
17860 |
|
17861 | |
17862 |
|
17863 |
|
17864 |
|
17865 | disableBackdropClick: deprecatedPropType(propTypes.bool, 'Use the onClose prop with the `reason` argument to filter the `backdropClick` events.'),
|
17866 |
|
17867 | |
17868 |
|
17869 |
|
17870 | disableEscapeKeyDown: propTypes.bool,
|
17871 |
|
17872 | |
17873 |
|
17874 |
|
17875 | fullScreen: propTypes.bool,
|
17876 |
|
17877 | |
17878 |
|
17879 |
|
17880 |
|
17881 |
|
17882 | fullWidth: propTypes.bool,
|
17883 |
|
17884 | |
17885 |
|
17886 |
|
17887 |
|
17888 |
|
17889 | maxWidth: propTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
|
17890 |
|
17891 | |
17892 |
|
17893 |
|
17894 |
|
17895 | onBackdropClick: deprecatedPropType(propTypes.func, 'Use the onClose prop with the `reason` argument to handle the `backdropClick` events.'),
|
17896 |
|
17897 | |
17898 |
|
17899 |
|
17900 |
|
17901 |
|
17902 |
|
17903 | onClose: propTypes.func,
|
17904 |
|
17905 | |
17906 |
|
17907 |
|
17908 |
|
17909 | onEnter: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
17910 |
|
17911 | |
17912 |
|
17913 |
|
17914 |
|
17915 | onEntered: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
17916 |
|
17917 | |
17918 |
|
17919 |
|
17920 |
|
17921 | onEntering: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
17922 |
|
17923 | |
17924 |
|
17925 |
|
17926 |
|
17927 |
|
17928 | onEscapeKeyDown: deprecatedPropType(propTypes.func, 'Use the onClose prop with the `reason` argument to handle the `escapeKeyDown` events.'),
|
17929 |
|
17930 | |
17931 |
|
17932 |
|
17933 |
|
17934 | onExit: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
17935 |
|
17936 | |
17937 |
|
17938 |
|
17939 |
|
17940 | onExited: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
17941 |
|
17942 | |
17943 |
|
17944 |
|
17945 |
|
17946 | onExiting: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
17947 |
|
17948 | |
17949 |
|
17950 |
|
17951 | open: propTypes.bool.isRequired,
|
17952 |
|
17953 | |
17954 |
|
17955 |
|
17956 | PaperComponent: propTypes.elementType,
|
17957 |
|
17958 | |
17959 |
|
17960 |
|
17961 | PaperProps: propTypes.object,
|
17962 |
|
17963 | |
17964 |
|
17965 |
|
17966 | scroll: propTypes.oneOf(['body', 'paper']),
|
17967 |
|
17968 | |
17969 |
|
17970 |
|
17971 |
|
17972 | TransitionComponent: propTypes.elementType,
|
17973 |
|
17974 | |
17975 |
|
17976 |
|
17977 |
|
17978 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
17979 | appear: propTypes.number,
|
17980 | enter: propTypes.number,
|
17981 | exit: propTypes.number
|
17982 | })]),
|
17983 |
|
17984 | |
17985 |
|
17986 |
|
17987 | TransitionProps: propTypes.object
|
17988 | } ;
|
17989 | var Dialog$1 = withStyles$1(styles$A, {
|
17990 | name: 'MuiDialog'
|
17991 | })(Dialog);
|
17992 |
|
17993 | var styles$B = {
|
17994 |
|
17995 | root: {
|
17996 | display: 'flex',
|
17997 | alignItems: 'center',
|
17998 | padding: 8,
|
17999 | justifyContent: 'flex-end',
|
18000 | flex: '0 0 auto'
|
18001 | },
|
18002 |
|
18003 |
|
18004 | spacing: {
|
18005 | '& > :not(:first-child)': {
|
18006 | marginLeft: 8
|
18007 | }
|
18008 | }
|
18009 | };
|
18010 | var DialogActions = React.forwardRef(function DialogActions(props, ref) {
|
18011 | var _props$disableSpacing = props.disableSpacing,
|
18012 | disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,
|
18013 | classes = props.classes,
|
18014 | className = props.className,
|
18015 | other = _objectWithoutProperties(props, ["disableSpacing", "classes", "className"]);
|
18016 |
|
18017 | return React.createElement("div", _extends({
|
18018 | className: clsx(classes.root, className, !disableSpacing && classes.spacing),
|
18019 | ref: ref
|
18020 | }, other));
|
18021 | });
|
18022 | DialogActions.propTypes = {
|
18023 |
|
18024 |
|
18025 |
|
18026 |
|
18027 |
|
18028 | |
18029 |
|
18030 |
|
18031 | children: propTypes.node,
|
18032 |
|
18033 | |
18034 |
|
18035 |
|
18036 |
|
18037 | classes: propTypes.object,
|
18038 |
|
18039 | |
18040 |
|
18041 |
|
18042 | className: propTypes.string,
|
18043 |
|
18044 | |
18045 |
|
18046 |
|
18047 | disableSpacing: propTypes.bool
|
18048 | } ;
|
18049 | var DialogActions$1 = withStyles$1(styles$B, {
|
18050 | name: 'MuiDialogActions'
|
18051 | })(DialogActions);
|
18052 |
|
18053 | var styles$C = function styles(theme) {
|
18054 | return {
|
18055 |
|
18056 | root: {
|
18057 | flex: '1 1 auto',
|
18058 | WebkitOverflowScrolling: 'touch',
|
18059 |
|
18060 | overflowY: 'auto',
|
18061 | padding: '8px 24px',
|
18062 | '&:first-child': {
|
18063 |
|
18064 | paddingTop: 20
|
18065 | }
|
18066 | },
|
18067 |
|
18068 |
|
18069 | dividers: {
|
18070 | padding: '16px 24px',
|
18071 | borderTop: "1px solid ".concat(theme.palette.divider),
|
18072 | borderBottom: "1px solid ".concat(theme.palette.divider)
|
18073 | }
|
18074 | };
|
18075 | };
|
18076 | var DialogContent = React.forwardRef(function DialogContent(props, ref) {
|
18077 | var classes = props.classes,
|
18078 | className = props.className,
|
18079 | _props$dividers = props.dividers,
|
18080 | dividers = _props$dividers === void 0 ? false : _props$dividers,
|
18081 | other = _objectWithoutProperties(props, ["classes", "className", "dividers"]);
|
18082 |
|
18083 | return React.createElement("div", _extends({
|
18084 | className: clsx(classes.root, className, dividers && classes.dividers),
|
18085 | ref: ref
|
18086 | }, other));
|
18087 | });
|
18088 | DialogContent.propTypes = {
|
18089 |
|
18090 |
|
18091 |
|
18092 |
|
18093 |
|
18094 | |
18095 |
|
18096 |
|
18097 | children: propTypes.node,
|
18098 |
|
18099 | |
18100 |
|
18101 |
|
18102 |
|
18103 | classes: propTypes.object,
|
18104 |
|
18105 | |
18106 |
|
18107 |
|
18108 | className: propTypes.string,
|
18109 |
|
18110 | |
18111 |
|
18112 |
|
18113 | dividers: propTypes.bool
|
18114 | } ;
|
18115 | var DialogContent$1 = withStyles$1(styles$C, {
|
18116 | name: 'MuiDialogContent'
|
18117 | })(DialogContent);
|
18118 |
|
18119 | var styles$D = {
|
18120 |
|
18121 | root: {
|
18122 | marginBottom: 12
|
18123 | }
|
18124 | };
|
18125 | var DialogContentText = React.forwardRef(function DialogContentText(props, ref) {
|
18126 | return React.createElement(Typography$1, _extends({
|
18127 | component: "p",
|
18128 | variant: "body1",
|
18129 | color: "textSecondary",
|
18130 | ref: ref
|
18131 | }, props));
|
18132 | });
|
18133 | DialogContentText.propTypes = {
|
18134 |
|
18135 |
|
18136 |
|
18137 |
|
18138 |
|
18139 | |
18140 |
|
18141 |
|
18142 | children: propTypes.node,
|
18143 |
|
18144 | |
18145 |
|
18146 |
|
18147 |
|
18148 | classes: propTypes.object
|
18149 | } ;
|
18150 | var DialogContentText$1 = withStyles$1(styles$D, {
|
18151 | name: 'MuiDialogContentText'
|
18152 | })(DialogContentText);
|
18153 |
|
18154 | var styles$E = {
|
18155 |
|
18156 | root: {
|
18157 | margin: 0,
|
18158 | padding: '16px 24px',
|
18159 | flex: '0 0 auto'
|
18160 | }
|
18161 | };
|
18162 | var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
|
18163 | var children = props.children,
|
18164 | classes = props.classes,
|
18165 | className = props.className,
|
18166 | _props$disableTypogra = props.disableTypography,
|
18167 | disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
|
18168 | other = _objectWithoutProperties(props, ["children", "classes", "className", "disableTypography"]);
|
18169 |
|
18170 | return React.createElement("div", _extends({
|
18171 | className: clsx(classes.root, className),
|
18172 | ref: ref
|
18173 | }, other), disableTypography ? children : React.createElement(Typography$1, {
|
18174 | component: "h2",
|
18175 | variant: "h6"
|
18176 | }, children));
|
18177 | });
|
18178 | DialogTitle.propTypes = {
|
18179 |
|
18180 |
|
18181 |
|
18182 |
|
18183 |
|
18184 | |
18185 |
|
18186 |
|
18187 | children: propTypes.node,
|
18188 |
|
18189 | |
18190 |
|
18191 |
|
18192 |
|
18193 | classes: propTypes.object,
|
18194 |
|
18195 | |
18196 |
|
18197 |
|
18198 | className: propTypes.string,
|
18199 |
|
18200 | |
18201 |
|
18202 |
|
18203 |
|
18204 | disableTypography: propTypes.bool
|
18205 | } ;
|
18206 | var DialogTitle$1 = withStyles$1(styles$E, {
|
18207 | name: 'MuiDialogTitle'
|
18208 | })(DialogTitle);
|
18209 |
|
18210 | var styles$F = function styles(theme) {
|
18211 | return {
|
18212 |
|
18213 | root: {
|
18214 | height: 1,
|
18215 | margin: 0,
|
18216 |
|
18217 | border: 'none',
|
18218 | flexShrink: 0,
|
18219 | backgroundColor: theme.palette.divider
|
18220 | },
|
18221 |
|
18222 |
|
18223 | absolute: {
|
18224 | position: 'absolute',
|
18225 | bottom: 0,
|
18226 | left: 0,
|
18227 | width: '100%'
|
18228 | },
|
18229 |
|
18230 |
|
18231 | inset: {
|
18232 | marginLeft: 72
|
18233 | },
|
18234 |
|
18235 |
|
18236 | light: {
|
18237 | backgroundColor: alpha(theme.palette.divider, 0.08)
|
18238 | },
|
18239 |
|
18240 |
|
18241 | middle: {
|
18242 | marginLeft: theme.spacing(2),
|
18243 | marginRight: theme.spacing(2)
|
18244 | },
|
18245 |
|
18246 |
|
18247 | vertical: {
|
18248 | height: '100%',
|
18249 | width: 1
|
18250 | },
|
18251 |
|
18252 |
|
18253 | flexItem: {
|
18254 | alignSelf: 'stretch',
|
18255 | height: 'auto'
|
18256 | }
|
18257 | };
|
18258 | };
|
18259 | var Divider = React.forwardRef(function Divider(props, ref) {
|
18260 | var _props$absolute = props.absolute,
|
18261 | absolute = _props$absolute === void 0 ? false : _props$absolute,
|
18262 | classes = props.classes,
|
18263 | className = props.className,
|
18264 | _props$component = props.component,
|
18265 | Component = _props$component === void 0 ? 'hr' : _props$component,
|
18266 | _props$flexItem = props.flexItem,
|
18267 | flexItem = _props$flexItem === void 0 ? false : _props$flexItem,
|
18268 | _props$light = props.light,
|
18269 | light = _props$light === void 0 ? false : _props$light,
|
18270 | _props$orientation = props.orientation,
|
18271 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
18272 | _props$role = props.role,
|
18273 | role = _props$role === void 0 ? Component !== 'hr' ? 'separator' : undefined : _props$role,
|
18274 | _props$variant = props.variant,
|
18275 | variant = _props$variant === void 0 ? 'fullWidth' : _props$variant,
|
18276 | other = _objectWithoutProperties(props, ["absolute", "classes", "className", "component", "flexItem", "light", "orientation", "role", "variant"]);
|
18277 |
|
18278 | return React.createElement(Component, _extends({
|
18279 | className: clsx(classes.root, className, variant !== 'fullWidth' && classes[variant], absolute && classes.absolute, flexItem && classes.flexItem, light && classes.light, orientation === 'vertical' && classes.vertical),
|
18280 | role: role,
|
18281 | ref: ref
|
18282 | }, other));
|
18283 | });
|
18284 | Divider.propTypes = {
|
18285 |
|
18286 |
|
18287 |
|
18288 |
|
18289 |
|
18290 | |
18291 |
|
18292 |
|
18293 | absolute: propTypes.bool,
|
18294 |
|
18295 | |
18296 |
|
18297 |
|
18298 | children: propTypes.node,
|
18299 |
|
18300 | |
18301 |
|
18302 |
|
18303 |
|
18304 | classes: propTypes.object,
|
18305 |
|
18306 | |
18307 |
|
18308 |
|
18309 | className: propTypes.string,
|
18310 |
|
18311 | |
18312 |
|
18313 |
|
18314 |
|
18315 | component: propTypes
|
18316 |
|
18317 | .elementType,
|
18318 |
|
18319 | |
18320 |
|
18321 |
|
18322 |
|
18323 | flexItem: propTypes.bool,
|
18324 |
|
18325 | |
18326 |
|
18327 |
|
18328 | light: propTypes.bool,
|
18329 |
|
18330 | |
18331 |
|
18332 |
|
18333 | orientation: propTypes.oneOf(['horizontal', 'vertical']),
|
18334 |
|
18335 | |
18336 |
|
18337 |
|
18338 | role: propTypes.string,
|
18339 |
|
18340 | |
18341 |
|
18342 |
|
18343 | variant: propTypes.oneOf(['fullWidth', 'inset', 'middle'])
|
18344 | } ;
|
18345 | var Divider$1 = withStyles$1(styles$F, {
|
18346 | name: 'MuiDivider'
|
18347 | })(Divider);
|
18348 |
|
18349 |
|
18350 |
|
18351 |
|
18352 | function getTranslateValue(direction, node) {
|
18353 | var rect = node.getBoundingClientRect();
|
18354 | var transform;
|
18355 |
|
18356 | if (node.fakeTransform) {
|
18357 | transform = node.fakeTransform;
|
18358 | } else {
|
18359 | var computedStyle = window.getComputedStyle(node);
|
18360 | transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
|
18361 | }
|
18362 |
|
18363 | var offsetX = 0;
|
18364 | var offsetY = 0;
|
18365 |
|
18366 | if (transform && transform !== 'none' && typeof transform === 'string') {
|
18367 | var transformValues = transform.split('(')[1].split(')')[0].split(',');
|
18368 | offsetX = parseInt(transformValues[4], 10);
|
18369 | offsetY = parseInt(transformValues[5], 10);
|
18370 | }
|
18371 |
|
18372 | if (direction === 'left') {
|
18373 | return "translateX(".concat(window.innerWidth, "px) translateX(").concat(offsetX - rect.left, "px)");
|
18374 | }
|
18375 |
|
18376 | if (direction === 'right') {
|
18377 | return "translateX(-".concat(rect.left + rect.width - offsetX, "px)");
|
18378 | }
|
18379 |
|
18380 | if (direction === 'up') {
|
18381 | return "translateY(".concat(window.innerHeight, "px) translateY(").concat(offsetY - rect.top, "px)");
|
18382 | }
|
18383 |
|
18384 |
|
18385 | return "translateY(-".concat(rect.top + rect.height - offsetY, "px)");
|
18386 | }
|
18387 |
|
18388 | function setTranslateValue(direction, node) {
|
18389 | var transform = getTranslateValue(direction, node);
|
18390 |
|
18391 | if (transform) {
|
18392 | node.style.webkitTransform = transform;
|
18393 | node.style.transform = transform;
|
18394 | }
|
18395 | }
|
18396 | var defaultTimeout$1 = {
|
18397 | enter: duration.enteringScreen,
|
18398 | exit: duration.leavingScreen
|
18399 | };
|
18400 | |
18401 |
|
18402 |
|
18403 |
|
18404 |
|
18405 | var Slide = React.forwardRef(function Slide(props, ref) {
|
18406 | var children = props.children,
|
18407 | _props$direction = props.direction,
|
18408 | direction = _props$direction === void 0 ? 'down' : _props$direction,
|
18409 | inProp = props.in,
|
18410 | onEnter = props.onEnter,
|
18411 | onEntered = props.onEntered,
|
18412 | onEntering = props.onEntering,
|
18413 | onExit = props.onExit,
|
18414 | onExited = props.onExited,
|
18415 | onExiting = props.onExiting,
|
18416 | style = props.style,
|
18417 | _props$timeout = props.timeout,
|
18418 | timeout = _props$timeout === void 0 ? defaultTimeout$1 : _props$timeout,
|
18419 | _props$TransitionComp = props.TransitionComponent,
|
18420 | TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
|
18421 | other = _objectWithoutProperties(props, ["children", "direction", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
|
18422 |
|
18423 | var theme = useTheme$1();
|
18424 | var childrenRef = React.useRef(null);
|
18425 | |
18426 |
|
18427 |
|
18428 |
|
18429 | var handleOwnRef = React.useCallback(function (instance) {
|
18430 |
|
18431 | childrenRef.current = ReactDOM.findDOMNode(instance);
|
18432 | }, []);
|
18433 | var handleRefIntermediary = useForkRef(children.ref, handleOwnRef);
|
18434 | var handleRef = useForkRef(handleRefIntermediary, ref);
|
18435 |
|
18436 | var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
|
18437 | return function (isAppearing) {
|
18438 | if (callback) {
|
18439 |
|
18440 | if (isAppearing === undefined) {
|
18441 | callback(childrenRef.current);
|
18442 | } else {
|
18443 | callback(childrenRef.current, isAppearing);
|
18444 | }
|
18445 | }
|
18446 | };
|
18447 | };
|
18448 |
|
18449 | var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
|
18450 | setTranslateValue(direction, node);
|
18451 | reflow(node);
|
18452 |
|
18453 | if (onEnter) {
|
18454 | onEnter(node, isAppearing);
|
18455 | }
|
18456 | });
|
18457 | var handleEntering = normalizedTransitionCallback(function (node, isAppearing) {
|
18458 | var transitionProps = getTransitionProps({
|
18459 | timeout: timeout,
|
18460 | style: style
|
18461 | }, {
|
18462 | mode: 'enter'
|
18463 | });
|
18464 | node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps, {
|
18465 | easing: theme.transitions.easing.easeOut
|
18466 | }));
|
18467 | node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps, {
|
18468 | easing: theme.transitions.easing.easeOut
|
18469 | }));
|
18470 | node.style.webkitTransform = 'none';
|
18471 | node.style.transform = 'none';
|
18472 |
|
18473 | if (onEntering) {
|
18474 | onEntering(node, isAppearing);
|
18475 | }
|
18476 | });
|
18477 | var handleEntered = normalizedTransitionCallback(onEntered);
|
18478 | var handleExiting = normalizedTransitionCallback(onExiting);
|
18479 | var handleExit = normalizedTransitionCallback(function (node) {
|
18480 | var transitionProps = getTransitionProps({
|
18481 | timeout: timeout,
|
18482 | style: style
|
18483 | }, {
|
18484 | mode: 'exit'
|
18485 | });
|
18486 | node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps, {
|
18487 | easing: theme.transitions.easing.sharp
|
18488 | }));
|
18489 | node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps, {
|
18490 | easing: theme.transitions.easing.sharp
|
18491 | }));
|
18492 | setTranslateValue(direction, node);
|
18493 |
|
18494 | if (onExit) {
|
18495 | onExit(node);
|
18496 | }
|
18497 | });
|
18498 | var handleExited = normalizedTransitionCallback(function (node) {
|
18499 |
|
18500 | node.style.webkitTransition = '';
|
18501 | node.style.transition = '';
|
18502 |
|
18503 | if (onExited) {
|
18504 | onExited(node);
|
18505 | }
|
18506 | });
|
18507 | var updatePosition = React.useCallback(function () {
|
18508 | if (childrenRef.current) {
|
18509 | setTranslateValue(direction, childrenRef.current);
|
18510 | }
|
18511 | }, [direction]);
|
18512 | React.useEffect(function () {
|
18513 |
|
18514 | if (inProp || direction === 'down' || direction === 'right') {
|
18515 | return undefined;
|
18516 | }
|
18517 |
|
18518 | var handleResize = debounce(function () {
|
18519 | if (childrenRef.current) {
|
18520 | setTranslateValue(direction, childrenRef.current);
|
18521 | }
|
18522 | });
|
18523 | window.addEventListener('resize', handleResize);
|
18524 | return function () {
|
18525 | handleResize.clear();
|
18526 | window.removeEventListener('resize', handleResize);
|
18527 | };
|
18528 | }, [direction, inProp]);
|
18529 | React.useEffect(function () {
|
18530 | if (!inProp) {
|
18531 |
|
18532 |
|
18533 | updatePosition();
|
18534 | }
|
18535 | }, [inProp, updatePosition]);
|
18536 | return React.createElement(TransitionComponent, _extends({
|
18537 | nodeRef: childrenRef,
|
18538 | onEnter: handleEnter,
|
18539 | onEntered: handleEntered,
|
18540 | onEntering: handleEntering,
|
18541 | onExit: handleExit,
|
18542 | onExited: handleExited,
|
18543 | onExiting: handleExiting,
|
18544 | appear: true,
|
18545 | in: inProp,
|
18546 | timeout: timeout
|
18547 | }, other), function (state, childProps) {
|
18548 | return React.cloneElement(children, _extends({
|
18549 | ref: handleRef,
|
18550 | style: _extends({
|
18551 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
18552 | }, style, children.props.style)
|
18553 | }, childProps));
|
18554 | });
|
18555 | });
|
18556 | Slide.propTypes = {
|
18557 |
|
18558 |
|
18559 |
|
18560 |
|
18561 |
|
18562 | |
18563 |
|
18564 |
|
18565 | children: elementAcceptingRef,
|
18566 |
|
18567 | |
18568 |
|
18569 |
|
18570 | direction: propTypes.oneOf(['down', 'left', 'right', 'up']),
|
18571 |
|
18572 | |
18573 |
|
18574 |
|
18575 | in: propTypes.bool,
|
18576 |
|
18577 | |
18578 |
|
18579 |
|
18580 | onEnter: propTypes.func,
|
18581 |
|
18582 | |
18583 |
|
18584 |
|
18585 | onEntered: propTypes.func,
|
18586 |
|
18587 | |
18588 |
|
18589 |
|
18590 | onEntering: propTypes.func,
|
18591 |
|
18592 | |
18593 |
|
18594 |
|
18595 | onExit: propTypes.func,
|
18596 |
|
18597 | |
18598 |
|
18599 |
|
18600 | onExited: propTypes.func,
|
18601 |
|
18602 | |
18603 |
|
18604 |
|
18605 | onExiting: propTypes.func,
|
18606 |
|
18607 | |
18608 |
|
18609 |
|
18610 | style: propTypes.object,
|
18611 |
|
18612 | |
18613 |
|
18614 |
|
18615 |
|
18616 | timeout: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
18617 | appear: propTypes.number,
|
18618 | enter: propTypes.number,
|
18619 | exit: propTypes.number
|
18620 | })])
|
18621 | } ;
|
18622 |
|
18623 | var styles$G = function styles(theme) {
|
18624 | return {
|
18625 |
|
18626 | root: {},
|
18627 |
|
18628 |
|
18629 | docked: {
|
18630 | flex: '0 0 auto'
|
18631 | },
|
18632 |
|
18633 |
|
18634 | paper: {
|
18635 | overflowY: 'auto',
|
18636 | display: 'flex',
|
18637 | flexDirection: 'column',
|
18638 | height: '100%',
|
18639 | flex: '1 0 auto',
|
18640 | zIndex: theme.zIndex.drawer,
|
18641 | WebkitOverflowScrolling: 'touch',
|
18642 |
|
18643 |
|
18644 | position: 'fixed',
|
18645 | top: 0,
|
18646 |
|
18647 |
|
18648 |
|
18649 | outline: 0
|
18650 | },
|
18651 |
|
18652 |
|
18653 | paperAnchorLeft: {
|
18654 | left: 0,
|
18655 | right: 'auto'
|
18656 | },
|
18657 |
|
18658 |
|
18659 | paperAnchorRight: {
|
18660 | left: 'auto',
|
18661 | right: 0
|
18662 | },
|
18663 |
|
18664 |
|
18665 | paperAnchorTop: {
|
18666 | top: 0,
|
18667 | left: 0,
|
18668 | bottom: 'auto',
|
18669 | right: 0,
|
18670 | height: 'auto',
|
18671 | maxHeight: '100%'
|
18672 | },
|
18673 |
|
18674 |
|
18675 | paperAnchorBottom: {
|
18676 | top: 'auto',
|
18677 | left: 0,
|
18678 | bottom: 0,
|
18679 | right: 0,
|
18680 | height: 'auto',
|
18681 | maxHeight: '100%'
|
18682 | },
|
18683 |
|
18684 |
|
18685 | paperAnchorDockedLeft: {
|
18686 | borderRight: "1px solid ".concat(theme.palette.divider)
|
18687 | },
|
18688 |
|
18689 |
|
18690 | paperAnchorDockedTop: {
|
18691 | borderBottom: "1px solid ".concat(theme.palette.divider)
|
18692 | },
|
18693 |
|
18694 |
|
18695 | paperAnchorDockedRight: {
|
18696 | borderLeft: "1px solid ".concat(theme.palette.divider)
|
18697 | },
|
18698 |
|
18699 |
|
18700 | paperAnchorDockedBottom: {
|
18701 | borderTop: "1px solid ".concat(theme.palette.divider)
|
18702 | },
|
18703 |
|
18704 |
|
18705 | modal: {}
|
18706 | };
|
18707 | };
|
18708 | var oppositeDirection = {
|
18709 | left: 'right',
|
18710 | right: 'left',
|
18711 | top: 'down',
|
18712 | bottom: 'up'
|
18713 | };
|
18714 | function isHorizontal(anchor) {
|
18715 | return ['left', 'right'].indexOf(anchor) !== -1;
|
18716 | }
|
18717 | function getAnchor(theme, anchor) {
|
18718 | return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
|
18719 | }
|
18720 | var defaultTransitionDuration$1 = {
|
18721 | enter: duration.enteringScreen,
|
18722 | exit: duration.leavingScreen
|
18723 | };
|
18724 | |
18725 |
|
18726 |
|
18727 |
|
18728 |
|
18729 | var Drawer = React.forwardRef(function Drawer(props, ref) {
|
18730 | var _props$anchor = props.anchor,
|
18731 | anchorProp = _props$anchor === void 0 ? 'left' : _props$anchor,
|
18732 | BackdropProps = props.BackdropProps,
|
18733 | children = props.children,
|
18734 | classes = props.classes,
|
18735 | className = props.className,
|
18736 | _props$elevation = props.elevation,
|
18737 | elevation = _props$elevation === void 0 ? 16 : _props$elevation,
|
18738 | _props$ModalProps = props.ModalProps;
|
18739 | _props$ModalProps = _props$ModalProps === void 0 ? {} : _props$ModalProps;
|
18740 |
|
18741 | var BackdropPropsProp = _props$ModalProps.BackdropProps,
|
18742 | ModalProps = _objectWithoutProperties(_props$ModalProps, ["BackdropProps"]),
|
18743 | onClose = props.onClose,
|
18744 | _props$open = props.open,
|
18745 | open = _props$open === void 0 ? false : _props$open,
|
18746 | _props$PaperProps = props.PaperProps,
|
18747 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
18748 | SlideProps = props.SlideProps,
|
18749 | _props$TransitionComp = props.TransitionComponent,
|
18750 | TransitionComponent = _props$TransitionComp === void 0 ? Slide : _props$TransitionComp,
|
18751 | _props$transitionDura = props.transitionDuration,
|
18752 | transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration$1 : _props$transitionDura,
|
18753 | _props$variant = props.variant,
|
18754 | variant = _props$variant === void 0 ? 'temporary' : _props$variant,
|
18755 | other = _objectWithoutProperties(props, ["anchor", "BackdropProps", "children", "classes", "className", "elevation", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"]);
|
18756 |
|
18757 | var theme = useTheme$1();
|
18758 |
|
18759 |
|
18760 |
|
18761 | var mounted = React.useRef(false);
|
18762 | React.useEffect(function () {
|
18763 | mounted.current = true;
|
18764 | }, []);
|
18765 | var anchor = getAnchor(theme, anchorProp);
|
18766 | var drawer = React.createElement(Paper$1, _extends({
|
18767 | elevation: variant === 'temporary' ? elevation : 0,
|
18768 | square: true
|
18769 | }, PaperProps, {
|
18770 | className: clsx(classes.paper, classes["paperAnchor".concat(capitalize(anchor))], PaperProps.className, variant !== 'temporary' && classes["paperAnchorDocked".concat(capitalize(anchor))])
|
18771 | }), children);
|
18772 |
|
18773 | if (variant === 'permanent') {
|
18774 | return React.createElement("div", _extends({
|
18775 | className: clsx(classes.root, classes.docked, className),
|
18776 | ref: ref
|
18777 | }, other), drawer);
|
18778 | }
|
18779 |
|
18780 | var slidingDrawer = React.createElement(TransitionComponent, _extends({
|
18781 | in: open,
|
18782 | direction: oppositeDirection[anchor],
|
18783 | timeout: transitionDuration,
|
18784 | appear: mounted.current
|
18785 | }, SlideProps), drawer);
|
18786 |
|
18787 | if (variant === 'persistent') {
|
18788 | return React.createElement("div", _extends({
|
18789 | className: clsx(classes.root, classes.docked, className),
|
18790 | ref: ref
|
18791 | }, other), slidingDrawer);
|
18792 | }
|
18793 |
|
18794 |
|
18795 | return React.createElement(Modal, _extends({
|
18796 | BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
|
18797 | transitionDuration: transitionDuration
|
18798 | }),
|
18799 | BackdropComponent: Backdrop$1,
|
18800 | className: clsx(classes.root, classes.modal, className),
|
18801 | open: open,
|
18802 | onClose: onClose,
|
18803 | ref: ref
|
18804 | }, other, ModalProps), slidingDrawer);
|
18805 | });
|
18806 | Drawer.propTypes = {
|
18807 |
|
18808 |
|
18809 |
|
18810 |
|
18811 |
|
18812 | |
18813 |
|
18814 |
|
18815 | anchor: propTypes.oneOf(['bottom', 'left', 'right', 'top']),
|
18816 |
|
18817 | |
18818 |
|
18819 |
|
18820 | BackdropProps: propTypes.object,
|
18821 |
|
18822 | |
18823 |
|
18824 |
|
18825 | children: propTypes.node,
|
18826 |
|
18827 | |
18828 |
|
18829 |
|
18830 |
|
18831 | classes: propTypes.object,
|
18832 |
|
18833 | |
18834 |
|
18835 |
|
18836 | className: propTypes.string,
|
18837 |
|
18838 | |
18839 |
|
18840 |
|
18841 | elevation: propTypes.number,
|
18842 |
|
18843 | |
18844 |
|
18845 |
|
18846 | ModalProps: propTypes.object,
|
18847 |
|
18848 | |
18849 |
|
18850 |
|
18851 |
|
18852 |
|
18853 | onClose: propTypes.func,
|
18854 |
|
18855 | |
18856 |
|
18857 |
|
18858 | open: propTypes.bool,
|
18859 |
|
18860 | |
18861 |
|
18862 |
|
18863 | PaperProps: propTypes.object,
|
18864 |
|
18865 | |
18866 |
|
18867 |
|
18868 | SlideProps: propTypes.object,
|
18869 |
|
18870 | |
18871 |
|
18872 |
|
18873 |
|
18874 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
18875 | appear: propTypes.number,
|
18876 | enter: propTypes.number,
|
18877 | exit: propTypes.number
|
18878 | })]),
|
18879 |
|
18880 | |
18881 |
|
18882 |
|
18883 | variant: propTypes.oneOf(['permanent', 'persistent', 'temporary'])
|
18884 | } ;
|
18885 | var Drawer$1 = withStyles$1(styles$G, {
|
18886 | name: 'MuiDrawer',
|
18887 | flip: false
|
18888 | })(Drawer);
|
18889 |
|
18890 | |
18891 |
|
18892 |
|
18893 |
|
18894 |
|
18895 | var ExpansionPanelContext = React.createContext({});
|
18896 |
|
18897 | {
|
18898 | ExpansionPanelContext.displayName = 'ExpansionPanelContext';
|
18899 | }
|
18900 |
|
18901 | var styles$H = function styles(theme) {
|
18902 | var transition = {
|
18903 | duration: theme.transitions.duration.shortest
|
18904 | };
|
18905 | return {
|
18906 |
|
18907 | root: {
|
18908 | position: 'relative',
|
18909 | transition: theme.transitions.create(['margin'], transition),
|
18910 | '&:before': {
|
18911 | position: 'absolute',
|
18912 | left: 0,
|
18913 | top: -1,
|
18914 | right: 0,
|
18915 | height: 1,
|
18916 | content: '""',
|
18917 | opacity: 1,
|
18918 | backgroundColor: theme.palette.divider,
|
18919 | transition: theme.transitions.create(['opacity', 'background-color'], transition)
|
18920 | },
|
18921 | '&:first-child': {
|
18922 | '&:before': {
|
18923 | display: 'none'
|
18924 | }
|
18925 | },
|
18926 | '&$expanded': {
|
18927 | margin: '16px 0',
|
18928 | '&:first-child': {
|
18929 | marginTop: 0
|
18930 | },
|
18931 | '&:last-child': {
|
18932 | marginBottom: 0
|
18933 | },
|
18934 | '&:before': {
|
18935 | opacity: 0
|
18936 | }
|
18937 | },
|
18938 | '&$expanded + &': {
|
18939 | '&:before': {
|
18940 | display: 'none'
|
18941 | }
|
18942 | },
|
18943 | '&$disabled': {
|
18944 | backgroundColor: theme.palette.action.disabledBackground
|
18945 | }
|
18946 | },
|
18947 |
|
18948 |
|
18949 | rounded: {
|
18950 | borderRadius: 0,
|
18951 | '&:first-child': {
|
18952 | borderTopLeftRadius: theme.shape.borderRadius,
|
18953 | borderTopRightRadius: theme.shape.borderRadius
|
18954 | },
|
18955 | '&:last-child': {
|
18956 | borderBottomLeftRadius: theme.shape.borderRadius,
|
18957 | borderBottomRightRadius: theme.shape.borderRadius,
|
18958 |
|
18959 | '@supports (-ms-ime-align: auto)': {
|
18960 | borderBottomLeftRadius: 0,
|
18961 | borderBottomRightRadius: 0
|
18962 | }
|
18963 | }
|
18964 | },
|
18965 |
|
18966 |
|
18967 | expanded: {},
|
18968 |
|
18969 |
|
18970 | disabled: {}
|
18971 | };
|
18972 | };
|
18973 | var warnedOnce$4 = false;
|
18974 | |
18975 |
|
18976 |
|
18977 |
|
18978 |
|
18979 |
|
18980 |
|
18981 | var ExpansionPanel = React.forwardRef(function ExpansionPanel(props, ref) {
|
18982 | {
|
18983 | if (!warnedOnce$4) {
|
18984 | warnedOnce$4 = true;
|
18985 | console.error(['Material-UI: the ExpansionPanel component was renamed to Accordion to use a more common naming convention.', '', "You should use `import { Accordion } from '@material-ui/core'`", "or `import Accordion from '@material-ui/core/Accordion'`"].join('\n'));
|
18986 | }
|
18987 | }
|
18988 |
|
18989 | var childrenProp = props.children,
|
18990 | classes = props.classes,
|
18991 | className = props.className,
|
18992 | _props$defaultExpande = props.defaultExpanded,
|
18993 | defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
|
18994 | _props$disabled = props.disabled,
|
18995 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
18996 | expandedProp = props.expanded,
|
18997 | onChange = props.onChange,
|
18998 | _props$square = props.square,
|
18999 | square = _props$square === void 0 ? false : _props$square,
|
19000 | _props$TransitionComp = props.TransitionComponent,
|
19001 | TransitionComponent = _props$TransitionComp === void 0 ? Collapse$1 : _props$TransitionComp,
|
19002 | TransitionProps = props.TransitionProps,
|
19003 | other = _objectWithoutProperties(props, ["children", "classes", "className", "defaultExpanded", "disabled", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"]);
|
19004 |
|
19005 | var _useControlled = useControlled({
|
19006 | controlled: expandedProp,
|
19007 | default: defaultExpanded,
|
19008 | name: 'ExpansionPanel',
|
19009 | state: 'expanded'
|
19010 | }),
|
19011 | _useControlled2 = _slicedToArray(_useControlled, 2),
|
19012 | expanded = _useControlled2[0],
|
19013 | setExpandedState = _useControlled2[1];
|
19014 |
|
19015 | var handleChange = React.useCallback(function (event) {
|
19016 | setExpandedState(!expanded);
|
19017 |
|
19018 | if (onChange) {
|
19019 | onChange(event, !expanded);
|
19020 | }
|
19021 | }, [expanded, onChange, setExpandedState]);
|
19022 |
|
19023 | var _React$Children$toArr = React.Children.toArray(childrenProp),
|
19024 | _React$Children$toArr2 = _toArray(_React$Children$toArr),
|
19025 | summary = _React$Children$toArr2[0],
|
19026 | children = _React$Children$toArr2.slice(1);
|
19027 |
|
19028 | var contextValue = React.useMemo(function () {
|
19029 | return {
|
19030 | expanded: expanded,
|
19031 | disabled: disabled,
|
19032 | toggle: handleChange
|
19033 | };
|
19034 | }, [expanded, disabled, handleChange]);
|
19035 | return React.createElement(Paper$1, _extends({
|
19036 | className: clsx(classes.root, className, expanded && classes.expanded, disabled && classes.disabled, !square && classes.rounded),
|
19037 | ref: ref,
|
19038 | square: square
|
19039 | }, other), React.createElement(ExpansionPanelContext.Provider, {
|
19040 | value: contextValue
|
19041 | }, summary), React.createElement(TransitionComponent, _extends({
|
19042 | in: expanded,
|
19043 | timeout: "auto"
|
19044 | }, TransitionProps), React.createElement("div", {
|
19045 | "aria-labelledby": summary.props.id,
|
19046 | id: summary.props['aria-controls'],
|
19047 | role: "region"
|
19048 | }, children)));
|
19049 | });
|
19050 | ExpansionPanel.propTypes = {
|
19051 |
|
19052 |
|
19053 |
|
19054 |
|
19055 |
|
19056 | |
19057 |
|
19058 |
|
19059 | children: chainPropTypes(propTypes.node.isRequired, function (props) {
|
19060 | var summary = React.Children.toArray(props.children)[0];
|
19061 |
|
19062 | if (reactIs_2(summary)) {
|
19063 | return new Error("Material-UI: The ExpansionPanel doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
|
19064 | }
|
19065 |
|
19066 | if (! React.isValidElement(summary)) {
|
19067 | return new Error('Material-UI: Expected the first child of ExpansionPanel to be a valid element.');
|
19068 | }
|
19069 |
|
19070 | return null;
|
19071 | }),
|
19072 |
|
19073 | |
19074 |
|
19075 |
|
19076 |
|
19077 | classes: propTypes.object,
|
19078 |
|
19079 | |
19080 |
|
19081 |
|
19082 | className: propTypes.string,
|
19083 |
|
19084 | |
19085 |
|
19086 |
|
19087 | defaultExpanded: propTypes.bool,
|
19088 |
|
19089 | |
19090 |
|
19091 |
|
19092 | disabled: propTypes.bool,
|
19093 |
|
19094 | |
19095 |
|
19096 |
|
19097 |
|
19098 | expanded: propTypes.bool,
|
19099 |
|
19100 | |
19101 |
|
19102 |
|
19103 |
|
19104 |
|
19105 |
|
19106 | onChange: propTypes.func,
|
19107 |
|
19108 | |
19109 |
|
19110 |
|
19111 | square: propTypes.bool,
|
19112 |
|
19113 | |
19114 |
|
19115 |
|
19116 |
|
19117 | TransitionComponent: propTypes.elementType,
|
19118 |
|
19119 | |
19120 |
|
19121 |
|
19122 | TransitionProps: propTypes.object
|
19123 | } ;
|
19124 | var ExpansionPanel$1 = withStyles$1(styles$H, {
|
19125 | name: 'MuiExpansionPanel'
|
19126 | })(ExpansionPanel);
|
19127 |
|
19128 | var styles$I = {
|
19129 |
|
19130 | root: {
|
19131 | display: 'flex',
|
19132 | alignItems: 'center',
|
19133 | padding: 8,
|
19134 | justifyContent: 'flex-end'
|
19135 | },
|
19136 |
|
19137 |
|
19138 | spacing: {
|
19139 | '& > :not(:first-child)': {
|
19140 | marginLeft: 8
|
19141 | }
|
19142 | }
|
19143 | };
|
19144 | var warnedOnce$5 = false;
|
19145 | |
19146 |
|
19147 |
|
19148 |
|
19149 |
|
19150 |
|
19151 |
|
19152 | var ExpansionPanelActions = React.forwardRef(function ExpansionPanelActions(props, ref) {
|
19153 | {
|
19154 | if (!warnedOnce$5) {
|
19155 | warnedOnce$5 = true;
|
19156 | console.error(['Material-UI: the ExpansionPanelActions component was renamed to AccordionActions to use a more common naming convention.', '', "You should use `import { AccordionActions } from '@material-ui/core'`", "or `import AccordionActions from '@material-ui/core/AccordionActions'`"].join('\n'));
|
19157 | }
|
19158 | }
|
19159 |
|
19160 | var classes = props.classes,
|
19161 | className = props.className,
|
19162 | _props$disableSpacing = props.disableSpacing,
|
19163 | disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,
|
19164 | other = _objectWithoutProperties(props, ["classes", "className", "disableSpacing"]);
|
19165 |
|
19166 | return React.createElement("div", _extends({
|
19167 | className: clsx(classes.root, className, !disableSpacing && classes.spacing),
|
19168 | ref: ref
|
19169 | }, other));
|
19170 | });
|
19171 | ExpansionPanelActions.propTypes = {
|
19172 |
|
19173 |
|
19174 |
|
19175 |
|
19176 |
|
19177 | |
19178 |
|
19179 |
|
19180 | children: propTypes.node,
|
19181 |
|
19182 | |
19183 |
|
19184 |
|
19185 |
|
19186 | classes: propTypes.object,
|
19187 |
|
19188 | |
19189 |
|
19190 |
|
19191 | className: propTypes.string,
|
19192 |
|
19193 | |
19194 |
|
19195 |
|
19196 | disableSpacing: propTypes.bool
|
19197 | } ;
|
19198 | var ExpansionPanelActions$1 = withStyles$1(styles$I, {
|
19199 | name: 'MuiExpansionPanelActions'
|
19200 | })(ExpansionPanelActions);
|
19201 |
|
19202 | var styles$J = function styles(theme) {
|
19203 | return {
|
19204 |
|
19205 | root: {
|
19206 | display: 'flex',
|
19207 | padding: theme.spacing(1, 2, 2)
|
19208 | }
|
19209 | };
|
19210 | };
|
19211 | var warnedOnce$6 = false;
|
19212 | |
19213 |
|
19214 |
|
19215 |
|
19216 |
|
19217 |
|
19218 |
|
19219 | var ExpansionPanelDetails = React.forwardRef(function ExpansionPanelDetails(props, ref) {
|
19220 | {
|
19221 | if (!warnedOnce$6) {
|
19222 | warnedOnce$6 = true;
|
19223 | console.error(['Material-UI: the ExpansionPanelDetails component was renamed to AccordionDetails to use a more common naming convention.', '', "You should use `import { AccordionDetails } from '@material-ui/core'`", "or `import AccordionDetails from '@material-ui/core/AccordionActions'`"].join('\n'));
|
19224 | }
|
19225 | }
|
19226 |
|
19227 | var classes = props.classes,
|
19228 | className = props.className,
|
19229 | other = _objectWithoutProperties(props, ["classes", "className"]);
|
19230 |
|
19231 | return React.createElement("div", _extends({
|
19232 | className: clsx(classes.root, className),
|
19233 | ref: ref
|
19234 | }, other));
|
19235 | });
|
19236 | ExpansionPanelDetails.propTypes = {
|
19237 |
|
19238 |
|
19239 |
|
19240 |
|
19241 |
|
19242 | |
19243 |
|
19244 |
|
19245 | children: propTypes.node,
|
19246 |
|
19247 | |
19248 |
|
19249 |
|
19250 |
|
19251 | classes: propTypes.object,
|
19252 |
|
19253 | |
19254 |
|
19255 |
|
19256 | className: propTypes.string
|
19257 | } ;
|
19258 | var ExpansionPanelDetails$1 = withStyles$1(styles$J, {
|
19259 | name: 'MuiExpansionPanelDetails'
|
19260 | })(ExpansionPanelDetails);
|
19261 |
|
19262 | var styles$K = function styles(theme) {
|
19263 | var transition = {
|
19264 | duration: theme.transitions.duration.shortest
|
19265 | };
|
19266 | return {
|
19267 |
|
19268 | root: {
|
19269 | display: 'flex',
|
19270 | minHeight: 8 * 6,
|
19271 | transition: theme.transitions.create(['min-height', 'background-color'], transition),
|
19272 | padding: theme.spacing(0, 2),
|
19273 | '&:hover:not($disabled)': {
|
19274 | cursor: 'pointer'
|
19275 | },
|
19276 | '&$expanded': {
|
19277 | minHeight: 64
|
19278 | },
|
19279 | '&$focused': {
|
19280 | backgroundColor: theme.palette.action.focus
|
19281 | },
|
19282 | '&$disabled': {
|
19283 | opacity: theme.palette.action.disabledOpacity
|
19284 | }
|
19285 | },
|
19286 |
|
19287 |
|
19288 | expanded: {},
|
19289 |
|
19290 |
|
19291 | focused: {},
|
19292 |
|
19293 |
|
19294 | disabled: {},
|
19295 |
|
19296 |
|
19297 | content: {
|
19298 | display: 'flex',
|
19299 | flexGrow: 1,
|
19300 | transition: theme.transitions.create(['margin'], transition),
|
19301 | margin: '12px 0',
|
19302 | '&$expanded': {
|
19303 | margin: '20px 0'
|
19304 | }
|
19305 | },
|
19306 |
|
19307 |
|
19308 | expandIcon: {
|
19309 | transform: 'rotate(0deg)',
|
19310 | transition: theme.transitions.create('transform', transition),
|
19311 | '&:hover': {
|
19312 |
|
19313 |
|
19314 |
|
19315 | backgroundColor: 'transparent'
|
19316 | },
|
19317 | '&$expanded': {
|
19318 | transform: 'rotate(180deg)'
|
19319 | }
|
19320 | }
|
19321 | };
|
19322 | };
|
19323 | var warnedOnce$7 = false;
|
19324 | |
19325 |
|
19326 |
|
19327 |
|
19328 |
|
19329 |
|
19330 |
|
19331 | var ExpansionPanelSummary = React.forwardRef(function ExpansionPanelSummary(props, ref) {
|
19332 | {
|
19333 | if (!warnedOnce$7) {
|
19334 | warnedOnce$7 = true;
|
19335 | console.error(['Material-UI: the ExpansionPanelSummary component was renamed to AccordionSummary to use a more common naming convention.', '', "You should use `import { AccordionSummary } from '@material-ui/core'`", "or `import AccordionSummary from '@material-ui/core/AccordionSummary'`"].join('\n'));
|
19336 | }
|
19337 | }
|
19338 |
|
19339 | var children = props.children,
|
19340 | classes = props.classes,
|
19341 | className = props.className,
|
19342 | expandIcon = props.expandIcon,
|
19343 | IconButtonProps = props.IconButtonProps,
|
19344 | onBlur = props.onBlur,
|
19345 | onClick = props.onClick,
|
19346 | onFocusVisible = props.onFocusVisible,
|
19347 | other = _objectWithoutProperties(props, ["children", "classes", "className", "expandIcon", "IconButtonProps", "onBlur", "onClick", "onFocusVisible"]);
|
19348 |
|
19349 | var _React$useState = React.useState(false),
|
19350 | focusedState = _React$useState[0],
|
19351 | setFocusedState = _React$useState[1];
|
19352 |
|
19353 | var handleFocusVisible = function handleFocusVisible(event) {
|
19354 | setFocusedState(true);
|
19355 |
|
19356 | if (onFocusVisible) {
|
19357 | onFocusVisible(event);
|
19358 | }
|
19359 | };
|
19360 |
|
19361 | var handleBlur = function handleBlur(event) {
|
19362 | setFocusedState(false);
|
19363 |
|
19364 | if (onBlur) {
|
19365 | onBlur(event);
|
19366 | }
|
19367 | };
|
19368 |
|
19369 | var _React$useContext = React.useContext(ExpansionPanelContext),
|
19370 | _React$useContext$dis = _React$useContext.disabled,
|
19371 | disabled = _React$useContext$dis === void 0 ? false : _React$useContext$dis,
|
19372 | expanded = _React$useContext.expanded,
|
19373 | toggle = _React$useContext.toggle;
|
19374 |
|
19375 | var handleChange = function handleChange(event) {
|
19376 | if (toggle) {
|
19377 | toggle(event);
|
19378 | }
|
19379 |
|
19380 | if (onClick) {
|
19381 | onClick(event);
|
19382 | }
|
19383 | };
|
19384 |
|
19385 | return React.createElement(ButtonBase$1, _extends({
|
19386 | focusRipple: false,
|
19387 | disableRipple: true,
|
19388 | disabled: disabled,
|
19389 | component: "div",
|
19390 | "aria-expanded": expanded,
|
19391 | className: clsx(classes.root, className, disabled && classes.disabled, expanded && classes.expanded, focusedState && classes.focused),
|
19392 | onFocusVisible: handleFocusVisible,
|
19393 | onBlur: handleBlur,
|
19394 | onClick: handleChange,
|
19395 | ref: ref
|
19396 | }, other), React.createElement("div", {
|
19397 | className: clsx(classes.content, expanded && classes.expanded)
|
19398 | }, children), expandIcon && React.createElement(IconButton$1, _extends({
|
19399 | className: clsx(classes.expandIcon, expanded && classes.expanded),
|
19400 | edge: "end",
|
19401 | component: "div",
|
19402 | tabIndex: null,
|
19403 | role: null,
|
19404 | "aria-hidden": true
|
19405 | }, IconButtonProps), expandIcon));
|
19406 | });
|
19407 | ExpansionPanelSummary.propTypes = {
|
19408 |
|
19409 |
|
19410 |
|
19411 |
|
19412 |
|
19413 | |
19414 |
|
19415 |
|
19416 | children: propTypes.node,
|
19417 |
|
19418 | |
19419 |
|
19420 |
|
19421 |
|
19422 | classes: propTypes.object,
|
19423 |
|
19424 | |
19425 |
|
19426 |
|
19427 | className: propTypes.string,
|
19428 |
|
19429 | |
19430 |
|
19431 |
|
19432 | expandIcon: propTypes.node,
|
19433 |
|
19434 | |
19435 |
|
19436 |
|
19437 | IconButtonProps: propTypes.object,
|
19438 |
|
19439 | |
19440 |
|
19441 |
|
19442 | onBlur: propTypes.func,
|
19443 |
|
19444 | |
19445 |
|
19446 |
|
19447 | onClick: propTypes.func,
|
19448 |
|
19449 | |
19450 |
|
19451 |
|
19452 |
|
19453 | onFocusVisible: propTypes.func
|
19454 | } ;
|
19455 | var ExpansionPanelSummary$1 = withStyles$1(styles$K, {
|
19456 | name: 'MuiExpansionPanelSummary'
|
19457 | })(ExpansionPanelSummary);
|
19458 |
|
19459 | var styles$L = function styles(theme) {
|
19460 | return {
|
19461 |
|
19462 | root: _extends({}, theme.typography.button, {
|
19463 | boxSizing: 'border-box',
|
19464 | minHeight: 36,
|
19465 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
|
19466 | duration: theme.transitions.duration.short
|
19467 | }),
|
19468 | borderRadius: '50%',
|
19469 | padding: 0,
|
19470 | minWidth: 0,
|
19471 | width: 56,
|
19472 | height: 56,
|
19473 | boxShadow: theme.shadows[6],
|
19474 | '&:active': {
|
19475 | boxShadow: theme.shadows[12]
|
19476 | },
|
19477 | color: theme.palette.getContrastText(theme.palette.grey[300]),
|
19478 | backgroundColor: theme.palette.grey[300],
|
19479 | '&:hover': {
|
19480 | backgroundColor: theme.palette.grey.A100,
|
19481 |
|
19482 | '@media (hover: none)': {
|
19483 | backgroundColor: theme.palette.grey[300]
|
19484 | },
|
19485 | '&$disabled': {
|
19486 | backgroundColor: theme.palette.action.disabledBackground
|
19487 | },
|
19488 | textDecoration: 'none'
|
19489 | },
|
19490 | '&$focusVisible': {
|
19491 | boxShadow: theme.shadows[6]
|
19492 | },
|
19493 | '&$disabled': {
|
19494 | color: theme.palette.action.disabled,
|
19495 | boxShadow: theme.shadows[0],
|
19496 | backgroundColor: theme.palette.action.disabledBackground
|
19497 | }
|
19498 | }),
|
19499 |
|
19500 |
|
19501 | label: {
|
19502 | width: '100%',
|
19503 |
|
19504 | display: 'inherit',
|
19505 | alignItems: 'inherit',
|
19506 | justifyContent: 'inherit'
|
19507 | },
|
19508 |
|
19509 |
|
19510 | primary: {
|
19511 | color: theme.palette.primary.contrastText,
|
19512 | backgroundColor: theme.palette.primary.main,
|
19513 | '&:hover': {
|
19514 | backgroundColor: theme.palette.primary.dark,
|
19515 |
|
19516 | '@media (hover: none)': {
|
19517 | backgroundColor: theme.palette.primary.main
|
19518 | }
|
19519 | }
|
19520 | },
|
19521 |
|
19522 |
|
19523 | secondary: {
|
19524 | color: theme.palette.secondary.contrastText,
|
19525 | backgroundColor: theme.palette.secondary.main,
|
19526 | '&:hover': {
|
19527 | backgroundColor: theme.palette.secondary.dark,
|
19528 |
|
19529 | '@media (hover: none)': {
|
19530 | backgroundColor: theme.palette.secondary.main
|
19531 | }
|
19532 | }
|
19533 | },
|
19534 |
|
19535 |
|
19536 | extended: {
|
19537 | borderRadius: 48 / 2,
|
19538 | padding: '0 16px',
|
19539 | width: 'auto',
|
19540 | minHeight: 'auto',
|
19541 | minWidth: 48,
|
19542 | height: 48,
|
19543 | '&$sizeSmall': {
|
19544 | width: 'auto',
|
19545 | padding: '0 8px',
|
19546 | borderRadius: 34 / 2,
|
19547 | minWidth: 34,
|
19548 | height: 34
|
19549 | },
|
19550 | '&$sizeMedium': {
|
19551 | width: 'auto',
|
19552 | padding: '0 16px',
|
19553 | borderRadius: 40 / 2,
|
19554 | minWidth: 40,
|
19555 | height: 40
|
19556 | }
|
19557 | },
|
19558 |
|
19559 |
|
19560 | focusVisible: {},
|
19561 |
|
19562 |
|
19563 | disabled: {},
|
19564 |
|
19565 |
|
19566 | colorInherit: {
|
19567 | color: 'inherit'
|
19568 | },
|
19569 |
|
19570 |
|
19571 | sizeSmall: {
|
19572 | width: 40,
|
19573 | height: 40
|
19574 | },
|
19575 |
|
19576 |
|
19577 | sizeMedium: {
|
19578 | width: 48,
|
19579 | height: 48
|
19580 | }
|
19581 | };
|
19582 | };
|
19583 | var Fab = React.forwardRef(function Fab(props, ref) {
|
19584 | var children = props.children,
|
19585 | classes = props.classes,
|
19586 | className = props.className,
|
19587 | _props$color = props.color,
|
19588 | color = _props$color === void 0 ? 'default' : _props$color,
|
19589 | _props$component = props.component,
|
19590 | component = _props$component === void 0 ? 'button' : _props$component,
|
19591 | _props$disabled = props.disabled,
|
19592 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
19593 | _props$disableFocusRi = props.disableFocusRipple,
|
19594 | disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
|
19595 | focusVisibleClassName = props.focusVisibleClassName,
|
19596 | _props$size = props.size,
|
19597 | size = _props$size === void 0 ? 'large' : _props$size,
|
19598 | _props$variant = props.variant,
|
19599 | variant = _props$variant === void 0 ? 'circular' : _props$variant,
|
19600 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "variant"]);
|
19601 |
|
19602 | return React.createElement(ButtonBase$1, _extends({
|
19603 | className: clsx(classes.root, className, size !== 'large' && classes["size".concat(capitalize(size))], disabled && classes.disabled, variant === 'extended' && classes.extended, {
|
19604 | 'primary': classes.primary,
|
19605 | 'secondary': classes.secondary,
|
19606 | 'inherit': classes.colorInherit
|
19607 | }[color]),
|
19608 | component: component,
|
19609 | disabled: disabled,
|
19610 | focusRipple: !disableFocusRipple,
|
19611 | focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
|
19612 | ref: ref
|
19613 | }, other), React.createElement("span", {
|
19614 | className: classes.label
|
19615 | }, children));
|
19616 | });
|
19617 | Fab.propTypes = {
|
19618 |
|
19619 |
|
19620 |
|
19621 |
|
19622 |
|
19623 | |
19624 |
|
19625 |
|
19626 | children: propTypes
|
19627 |
|
19628 | .node.isRequired,
|
19629 |
|
19630 | |
19631 |
|
19632 |
|
19633 |
|
19634 | classes: propTypes.object,
|
19635 |
|
19636 | |
19637 |
|
19638 |
|
19639 | className: propTypes.string,
|
19640 |
|
19641 | |
19642 |
|
19643 |
|
19644 | color: propTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
19645 |
|
19646 | |
19647 |
|
19648 |
|
19649 |
|
19650 | component: propTypes
|
19651 |
|
19652 | .elementType,
|
19653 |
|
19654 | |
19655 |
|
19656 |
|
19657 | disabled: propTypes.bool,
|
19658 |
|
19659 | |
19660 |
|
19661 |
|
19662 | disableFocusRipple: propTypes.bool,
|
19663 |
|
19664 | |
19665 |
|
19666 |
|
19667 | disableRipple: propTypes.bool,
|
19668 |
|
19669 | |
19670 |
|
19671 |
|
19672 | focusVisibleClassName: propTypes.string,
|
19673 |
|
19674 | |
19675 |
|
19676 |
|
19677 |
|
19678 | href: propTypes.string,
|
19679 |
|
19680 | |
19681 |
|
19682 |
|
19683 |
|
19684 | size: propTypes.oneOf(['large', 'medium', 'small']),
|
19685 |
|
19686 | |
19687 |
|
19688 |
|
19689 |
|
19690 | variant: chainPropTypes(propTypes.oneOf(['extended', 'circular', 'round']), function (props) {
|
19691 | if (props.variant === 'round') {
|
19692 | throw new Error('Material-UI: variant="round" was renamed variant="circular" for consistency.');
|
19693 | }
|
19694 |
|
19695 | return null;
|
19696 | })
|
19697 | } ;
|
19698 | var Fab$1 = withStyles$1(styles$L, {
|
19699 | name: 'MuiFab'
|
19700 | })(Fab);
|
19701 |
|
19702 | function formControlState(_ref) {
|
19703 | var props = _ref.props,
|
19704 | states = _ref.states,
|
19705 | muiFormControl = _ref.muiFormControl;
|
19706 | return states.reduce(function (acc, state) {
|
19707 | acc[state] = props[state];
|
19708 |
|
19709 | if (muiFormControl) {
|
19710 | if (typeof props[state] === 'undefined') {
|
19711 | acc[state] = muiFormControl[state];
|
19712 | }
|
19713 | }
|
19714 |
|
19715 | return acc;
|
19716 | }, {});
|
19717 | }
|
19718 |
|
19719 | function getStyleValue(computedStyle, property) {
|
19720 | return parseInt(computedStyle[property], 10) || 0;
|
19721 | }
|
19722 |
|
19723 | var useEnhancedEffect$3 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
19724 | var styles$M = {
|
19725 |
|
19726 | shadow: {
|
19727 |
|
19728 | visibility: 'hidden',
|
19729 |
|
19730 | position: 'absolute',
|
19731 |
|
19732 | overflow: 'hidden',
|
19733 | height: 0,
|
19734 | top: 0,
|
19735 | left: 0,
|
19736 |
|
19737 | transform: 'translateZ(0)'
|
19738 | }
|
19739 | };
|
19740 | var TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) {
|
19741 | var onChange = props.onChange,
|
19742 | rows = props.rows,
|
19743 | rowsMax = props.rowsMax,
|
19744 | rowsMinProp = props.rowsMin,
|
19745 | maxRowsProp = props.maxRows,
|
19746 | _props$minRows = props.minRows,
|
19747 | minRowsProp = _props$minRows === void 0 ? 1 : _props$minRows,
|
19748 | style = props.style,
|
19749 | value = props.value,
|
19750 | other = _objectWithoutProperties(props, ["onChange", "rows", "rowsMax", "rowsMin", "maxRows", "minRows", "style", "value"]);
|
19751 |
|
19752 | var maxRows = maxRowsProp || rowsMax;
|
19753 | var minRows = rows || rowsMinProp || minRowsProp;
|
19754 |
|
19755 | var _React$useRef = React.useRef(value != null),
|
19756 | isControlled = _React$useRef.current;
|
19757 |
|
19758 | var inputRef = React.useRef(null);
|
19759 | var handleRef = useForkRef(ref, inputRef);
|
19760 | var shadowRef = React.useRef(null);
|
19761 | var renders = React.useRef(0);
|
19762 |
|
19763 | var _React$useState = React.useState({}),
|
19764 | state = _React$useState[0],
|
19765 | setState = _React$useState[1];
|
19766 |
|
19767 | var syncHeight = React.useCallback(function () {
|
19768 | var input = inputRef.current;
|
19769 | var computedStyle = window.getComputedStyle(input);
|
19770 | var inputShallow = shadowRef.current;
|
19771 | inputShallow.style.width = computedStyle.width;
|
19772 | inputShallow.value = input.value || props.placeholder || 'x';
|
19773 |
|
19774 | if (inputShallow.value.slice(-1) === '\n') {
|
19775 |
|
19776 |
|
19777 |
|
19778 | inputShallow.value += ' ';
|
19779 | }
|
19780 |
|
19781 | var boxSizing = computedStyle['box-sizing'];
|
19782 | var padding = getStyleValue(computedStyle, 'padding-bottom') + getStyleValue(computedStyle, 'padding-top');
|
19783 | var border = getStyleValue(computedStyle, 'border-bottom-width') + getStyleValue(computedStyle, 'border-top-width');
|
19784 |
|
19785 | var innerHeight = inputShallow.scrollHeight - padding;
|
19786 |
|
19787 | inputShallow.value = 'x';
|
19788 | var singleRowHeight = inputShallow.scrollHeight - padding;
|
19789 |
|
19790 | var outerHeight = innerHeight;
|
19791 |
|
19792 | if (minRows) {
|
19793 | outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
|
19794 | }
|
19795 |
|
19796 | if (maxRows) {
|
19797 | outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
|
19798 | }
|
19799 |
|
19800 | outerHeight = Math.max(outerHeight, singleRowHeight);
|
19801 |
|
19802 | var outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
|
19803 | var overflow = Math.abs(outerHeight - innerHeight) <= 1;
|
19804 | setState(function (prevState) {
|
19805 |
|
19806 |
|
19807 | if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
|
19808 | renders.current += 1;
|
19809 | return {
|
19810 | overflow: overflow,
|
19811 | outerHeightStyle: outerHeightStyle
|
19812 | };
|
19813 | }
|
19814 |
|
19815 | {
|
19816 | if (renders.current === 20) {
|
19817 | console.error(['Material-UI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
|
19818 | }
|
19819 | }
|
19820 |
|
19821 | return prevState;
|
19822 | });
|
19823 | }, [maxRows, minRows, props.placeholder]);
|
19824 | React.useEffect(function () {
|
19825 | var handleResize = debounce(function () {
|
19826 | renders.current = 0;
|
19827 | syncHeight();
|
19828 | });
|
19829 | window.addEventListener('resize', handleResize);
|
19830 | return function () {
|
19831 | handleResize.clear();
|
19832 | window.removeEventListener('resize', handleResize);
|
19833 | };
|
19834 | }, [syncHeight]);
|
19835 | useEnhancedEffect$3(function () {
|
19836 | syncHeight();
|
19837 | });
|
19838 | React.useEffect(function () {
|
19839 | renders.current = 0;
|
19840 | }, [value]);
|
19841 |
|
19842 | var handleChange = function handleChange(event) {
|
19843 | renders.current = 0;
|
19844 |
|
19845 | if (!isControlled) {
|
19846 | syncHeight();
|
19847 | }
|
19848 |
|
19849 | if (onChange) {
|
19850 | onChange(event);
|
19851 | }
|
19852 | };
|
19853 |
|
19854 | return React.createElement(React.Fragment, null, React.createElement("textarea", _extends({
|
19855 | value: value,
|
19856 | onChange: handleChange,
|
19857 | ref: handleRef
|
19858 | ,
|
19859 | rows: minRows,
|
19860 | style: _extends({
|
19861 | height: state.outerHeightStyle,
|
19862 |
|
19863 |
|
19864 | overflow: state.overflow ? 'hidden' : null
|
19865 | }, style)
|
19866 | }, other)), React.createElement("textarea", {
|
19867 | "aria-hidden": true,
|
19868 | className: props.className,
|
19869 | readOnly: true,
|
19870 | ref: shadowRef,
|
19871 | tabIndex: -1,
|
19872 | style: _extends({}, styles$M.shadow, style)
|
19873 | }));
|
19874 | });
|
19875 | TextareaAutosize.propTypes = {
|
19876 |
|
19877 |
|
19878 |
|
19879 |
|
19880 |
|
19881 | |
19882 |
|
19883 |
|
19884 | className: propTypes.string,
|
19885 |
|
19886 | |
19887 |
|
19888 |
|
19889 | maxRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
19890 |
|
19891 | |
19892 |
|
19893 |
|
19894 | minRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
19895 |
|
19896 | |
19897 |
|
19898 |
|
19899 | onChange: propTypes.func,
|
19900 |
|
19901 | |
19902 |
|
19903 |
|
19904 | placeholder: propTypes.string,
|
19905 |
|
19906 | |
19907 |
|
19908 |
|
19909 |
|
19910 | rows: deprecatedPropType(propTypes.oneOfType([propTypes.number, propTypes.string]), 'Use `rowsMin` instead.'),
|
19911 |
|
19912 | |
19913 |
|
19914 |
|
19915 |
|
19916 | rowsMax: deprecatedPropType(propTypes.oneOfType([propTypes.number, propTypes.string]), 'Use `maxRows` instead.'),
|
19917 |
|
19918 | |
19919 |
|
19920 |
|
19921 |
|
19922 | rowsMin: deprecatedPropType(propTypes.oneOfType([propTypes.number, propTypes.string]), 'Use `minRows` instead.'),
|
19923 |
|
19924 | |
19925 |
|
19926 |
|
19927 | style: propTypes.object,
|
19928 |
|
19929 | |
19930 |
|
19931 |
|
19932 | value: propTypes.oneOfType([propTypes.arrayOf(propTypes.string), propTypes.number, propTypes.string])
|
19933 | } ;
|
19934 |
|
19935 |
|
19936 |
|
19937 |
|
19938 |
|
19939 |
|
19940 |
|
19941 | function hasValue(value) {
|
19942 | return value != null && !(Array.isArray(value) && value.length === 0);
|
19943 | }
|
19944 |
|
19945 |
|
19946 |
|
19947 |
|
19948 |
|
19949 |
|
19950 |
|
19951 | function isFilled(obj) {
|
19952 | var SSR = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
19953 | return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
|
19954 | }
|
19955 |
|
19956 |
|
19957 |
|
19958 |
|
19959 |
|
19960 |
|
19961 | function isAdornedStart(obj) {
|
19962 | return obj.startAdornment;
|
19963 | }
|
19964 |
|
19965 | var styles$N = function styles(theme) {
|
19966 | var light = theme.palette.type === 'light';
|
19967 | var placeholder = {
|
19968 | color: 'currentColor',
|
19969 | opacity: light ? 0.42 : 0.5,
|
19970 | transition: theme.transitions.create('opacity', {
|
19971 | duration: theme.transitions.duration.shorter
|
19972 | })
|
19973 | };
|
19974 | var placeholderHidden = {
|
19975 | opacity: '0 !important'
|
19976 | };
|
19977 | var placeholderVisible = {
|
19978 | opacity: light ? 0.42 : 0.5
|
19979 | };
|
19980 | return {
|
19981 | '@global': {
|
19982 | '@keyframes mui-auto-fill': {},
|
19983 | '@keyframes mui-auto-fill-cancel': {}
|
19984 | },
|
19985 |
|
19986 |
|
19987 | root: _extends({}, theme.typography.body1, {
|
19988 | color: theme.palette.text.primary,
|
19989 | lineHeight: '1.1876em',
|
19990 |
|
19991 | boxSizing: 'border-box',
|
19992 |
|
19993 | position: 'relative',
|
19994 | cursor: 'text',
|
19995 | display: 'inline-flex',
|
19996 | alignItems: 'center',
|
19997 | '&$disabled': {
|
19998 | color: theme.palette.text.disabled,
|
19999 | cursor: 'default'
|
20000 | }
|
20001 | }),
|
20002 |
|
20003 |
|
20004 | formControl: {},
|
20005 |
|
20006 |
|
20007 | focused: {},
|
20008 |
|
20009 |
|
20010 | disabled: {},
|
20011 |
|
20012 |
|
20013 | adornedStart: {},
|
20014 |
|
20015 |
|
20016 | adornedEnd: {},
|
20017 |
|
20018 |
|
20019 | error: {},
|
20020 |
|
20021 |
|
20022 | marginDense: {},
|
20023 |
|
20024 |
|
20025 | multiline: {
|
20026 | padding: "".concat(8 - 2, "px 0 ").concat(8 - 1, "px"),
|
20027 | '&$marginDense': {
|
20028 | paddingTop: 4 - 1
|
20029 | }
|
20030 | },
|
20031 |
|
20032 |
|
20033 | colorSecondary: {},
|
20034 |
|
20035 |
|
20036 | fullWidth: {
|
20037 | width: '100%'
|
20038 | },
|
20039 |
|
20040 |
|
20041 | input: {
|
20042 | font: 'inherit',
|
20043 | letterSpacing: 'inherit',
|
20044 | color: 'currentColor',
|
20045 | padding: "".concat(8 - 2, "px 0 ").concat(8 - 1, "px"),
|
20046 | border: 0,
|
20047 | boxSizing: 'content-box',
|
20048 | background: 'none',
|
20049 | height: '1.1876em',
|
20050 |
|
20051 | margin: 0,
|
20052 |
|
20053 | WebkitTapHighlightColor: 'transparent',
|
20054 | display: 'block',
|
20055 |
|
20056 | minWidth: 0,
|
20057 | width: '100%',
|
20058 |
|
20059 | animationName: 'mui-auto-fill-cancel',
|
20060 | animationDuration: '10ms',
|
20061 | '&::-webkit-input-placeholder': placeholder,
|
20062 | '&::-moz-placeholder': placeholder,
|
20063 |
|
20064 | '&:-ms-input-placeholder': placeholder,
|
20065 |
|
20066 | '&::-ms-input-placeholder': placeholder,
|
20067 |
|
20068 | '&:focus': {
|
20069 | outline: 0
|
20070 | },
|
20071 |
|
20072 | '&:invalid': {
|
20073 | boxShadow: 'none'
|
20074 | },
|
20075 | '&::-webkit-search-decoration': {
|
20076 |
|
20077 | '-webkit-appearance': 'none'
|
20078 | },
|
20079 |
|
20080 | 'label[data-shrink=false] + $formControl &': {
|
20081 | '&::-webkit-input-placeholder': placeholderHidden,
|
20082 | '&::-moz-placeholder': placeholderHidden,
|
20083 |
|
20084 | '&:-ms-input-placeholder': placeholderHidden,
|
20085 |
|
20086 | '&::-ms-input-placeholder': placeholderHidden,
|
20087 |
|
20088 | '&:focus::-webkit-input-placeholder': placeholderVisible,
|
20089 | '&:focus::-moz-placeholder': placeholderVisible,
|
20090 |
|
20091 | '&:focus:-ms-input-placeholder': placeholderVisible,
|
20092 |
|
20093 | '&:focus::-ms-input-placeholder': placeholderVisible
|
20094 |
|
20095 | },
|
20096 | '&$disabled': {
|
20097 | opacity: 1
|
20098 |
|
20099 | },
|
20100 | '&:-webkit-autofill': {
|
20101 | animationDuration: '5000s',
|
20102 | animationName: 'mui-auto-fill'
|
20103 | }
|
20104 | },
|
20105 |
|
20106 |
|
20107 | inputMarginDense: {
|
20108 | paddingTop: 4 - 1
|
20109 | },
|
20110 |
|
20111 |
|
20112 | inputMultiline: {
|
20113 | height: 'auto',
|
20114 | resize: 'none',
|
20115 | padding: 0
|
20116 | },
|
20117 |
|
20118 |
|
20119 | inputTypeSearch: {
|
20120 |
|
20121 | '-moz-appearance': 'textfield',
|
20122 | '-webkit-appearance': 'textfield'
|
20123 | },
|
20124 |
|
20125 |
|
20126 | inputAdornedStart: {},
|
20127 |
|
20128 |
|
20129 | inputAdornedEnd: {},
|
20130 |
|
20131 |
|
20132 | inputHiddenLabel: {}
|
20133 | };
|
20134 | };
|
20135 | var useEnhancedEffect$4 = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
|
20136 | |
20137 |
|
20138 |
|
20139 |
|
20140 |
|
20141 |
|
20142 | var InputBase = React.forwardRef(function InputBase(props, ref) {
|
20143 | var ariaDescribedby = props['aria-describedby'],
|
20144 | autoComplete = props.autoComplete,
|
20145 | autoFocus = props.autoFocus,
|
20146 | classes = props.classes,
|
20147 | className = props.className,
|
20148 | color = props.color,
|
20149 | defaultValue = props.defaultValue,
|
20150 | disabled = props.disabled,
|
20151 | endAdornment = props.endAdornment,
|
20152 | error = props.error,
|
20153 | _props$fullWidth = props.fullWidth,
|
20154 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
20155 | id = props.id,
|
20156 | _props$inputComponent = props.inputComponent,
|
20157 | inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
|
20158 | _props$inputProps = props.inputProps,
|
20159 | inputPropsProp = _props$inputProps === void 0 ? {} : _props$inputProps,
|
20160 | inputRefProp = props.inputRef,
|
20161 | margin = props.margin,
|
20162 | _props$multiline = props.multiline,
|
20163 | multiline = _props$multiline === void 0 ? false : _props$multiline,
|
20164 | name = props.name,
|
20165 | onBlur = props.onBlur,
|
20166 | onChange = props.onChange,
|
20167 | onClick = props.onClick,
|
20168 | onFocus = props.onFocus,
|
20169 | onKeyDown = props.onKeyDown,
|
20170 | onKeyUp = props.onKeyUp,
|
20171 | placeholder = props.placeholder,
|
20172 | readOnly = props.readOnly,
|
20173 | renderSuffix = props.renderSuffix,
|
20174 | rows = props.rows,
|
20175 | rowsMax = props.rowsMax,
|
20176 | rowsMin = props.rowsMin,
|
20177 | maxRows = props.maxRows,
|
20178 | minRows = props.minRows,
|
20179 | startAdornment = props.startAdornment,
|
20180 | _props$type = props.type,
|
20181 | type = _props$type === void 0 ? 'text' : _props$type,
|
20182 | valueProp = props.value,
|
20183 | 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", "maxRows", "minRows", "startAdornment", "type", "value"]);
|
20184 |
|
20185 | var value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
|
20186 |
|
20187 | var _React$useRef = React.useRef(value != null),
|
20188 | isControlled = _React$useRef.current;
|
20189 |
|
20190 | var inputRef = React.useRef();
|
20191 | var handleInputRefWarning = React.useCallback(function (instance) {
|
20192 | {
|
20193 | if (instance && instance.nodeName !== 'INPUT' && !instance.focus) {
|
20194 | 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'));
|
20195 | }
|
20196 | }
|
20197 | }, []);
|
20198 | var handleInputPropsRefProp = useForkRef(inputPropsProp.ref, handleInputRefWarning);
|
20199 | var handleInputRefProp = useForkRef(inputRefProp, handleInputPropsRefProp);
|
20200 | var handleInputRef = useForkRef(inputRef, handleInputRefProp);
|
20201 |
|
20202 | var _React$useState = React.useState(false),
|
20203 | focused = _React$useState[0],
|
20204 | setFocused = _React$useState[1];
|
20205 |
|
20206 | var muiFormControl = useFormControl();
|
20207 |
|
20208 | {
|
20209 |
|
20210 | React.useEffect(function () {
|
20211 | if (muiFormControl) {
|
20212 | return muiFormControl.registerEffect();
|
20213 | }
|
20214 |
|
20215 | return undefined;
|
20216 | }, [muiFormControl]);
|
20217 | }
|
20218 |
|
20219 | var fcs = formControlState({
|
20220 | props: props,
|
20221 | muiFormControl: muiFormControl,
|
20222 | states: ['color', 'disabled', 'error', 'hiddenLabel', 'margin', 'required', 'filled']
|
20223 | });
|
20224 | fcs.focused = muiFormControl ? muiFormControl.focused : focused;
|
20225 |
|
20226 |
|
20227 | React.useEffect(function () {
|
20228 | if (!muiFormControl && disabled && focused) {
|
20229 | setFocused(false);
|
20230 |
|
20231 | if (onBlur) {
|
20232 | onBlur();
|
20233 | }
|
20234 | }
|
20235 | }, [muiFormControl, disabled, focused, onBlur]);
|
20236 | var onFilled = muiFormControl && muiFormControl.onFilled;
|
20237 | var onEmpty = muiFormControl && muiFormControl.onEmpty;
|
20238 | var checkDirty = React.useCallback(function (obj) {
|
20239 | if (isFilled(obj)) {
|
20240 | if (onFilled) {
|
20241 | onFilled();
|
20242 | }
|
20243 | } else if (onEmpty) {
|
20244 | onEmpty();
|
20245 | }
|
20246 | }, [onFilled, onEmpty]);
|
20247 | useEnhancedEffect$4(function () {
|
20248 | if (isControlled) {
|
20249 | checkDirty({
|
20250 | value: value
|
20251 | });
|
20252 | }
|
20253 | }, [value, checkDirty, isControlled]);
|
20254 |
|
20255 | var handleFocus = function handleFocus(event) {
|
20256 |
|
20257 |
|
20258 | if (fcs.disabled) {
|
20259 | event.stopPropagation();
|
20260 | return;
|
20261 | }
|
20262 |
|
20263 | if (onFocus) {
|
20264 | onFocus(event);
|
20265 | }
|
20266 |
|
20267 | if (inputPropsProp.onFocus) {
|
20268 | inputPropsProp.onFocus(event);
|
20269 | }
|
20270 |
|
20271 | if (muiFormControl && muiFormControl.onFocus) {
|
20272 | muiFormControl.onFocus(event);
|
20273 | } else {
|
20274 | setFocused(true);
|
20275 | }
|
20276 | };
|
20277 |
|
20278 | var handleBlur = function handleBlur(event) {
|
20279 | if (onBlur) {
|
20280 | onBlur(event);
|
20281 | }
|
20282 |
|
20283 | if (inputPropsProp.onBlur) {
|
20284 | inputPropsProp.onBlur(event);
|
20285 | }
|
20286 |
|
20287 | if (muiFormControl && muiFormControl.onBlur) {
|
20288 | muiFormControl.onBlur(event);
|
20289 | } else {
|
20290 | setFocused(false);
|
20291 | }
|
20292 | };
|
20293 |
|
20294 | var handleChange = function handleChange(event) {
|
20295 | if (!isControlled) {
|
20296 | var element = event.target || inputRef.current;
|
20297 |
|
20298 | if (element == null) {
|
20299 | throw new Error( "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." );
|
20300 | }
|
20301 |
|
20302 | checkDirty({
|
20303 | value: element.value
|
20304 | });
|
20305 | }
|
20306 |
|
20307 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
20308 | args[_key - 1] = arguments[_key];
|
20309 | }
|
20310 |
|
20311 | if (inputPropsProp.onChange) {
|
20312 | inputPropsProp.onChange.apply(inputPropsProp, [event].concat(args));
|
20313 | }
|
20314 |
|
20315 |
|
20316 | if (onChange) {
|
20317 | onChange.apply(void 0, [event].concat(args));
|
20318 | }
|
20319 | };
|
20320 |
|
20321 |
|
20322 |
|
20323 | React.useEffect(function () {
|
20324 | checkDirty(inputRef.current);
|
20325 | }, []);
|
20326 |
|
20327 | var handleClick = function handleClick(event) {
|
20328 | if (inputRef.current && event.currentTarget === event.target) {
|
20329 | inputRef.current.focus();
|
20330 | }
|
20331 |
|
20332 | if (onClick) {
|
20333 | onClick(event);
|
20334 | }
|
20335 | };
|
20336 |
|
20337 | var InputComponent = inputComponent;
|
20338 |
|
20339 | var inputProps = _extends({}, inputPropsProp, {
|
20340 | ref: handleInputRef
|
20341 | });
|
20342 |
|
20343 | if (typeof InputComponent !== 'string') {
|
20344 | inputProps = _extends({
|
20345 |
|
20346 |
|
20347 | inputRef: handleInputRef,
|
20348 | type: type
|
20349 | }, inputProps, {
|
20350 | ref: null
|
20351 | });
|
20352 | } else if (multiline) {
|
20353 | if (rows && !maxRows && !minRows && !rowsMax && !rowsMin) {
|
20354 | InputComponent = 'textarea';
|
20355 | } else {
|
20356 | inputProps = _extends({
|
20357 | minRows: rows || minRows,
|
20358 | rowsMax: rowsMax,
|
20359 | maxRows: maxRows
|
20360 | }, inputProps);
|
20361 | InputComponent = TextareaAutosize;
|
20362 | }
|
20363 | } else {
|
20364 | inputProps = _extends({
|
20365 | type: type
|
20366 | }, inputProps);
|
20367 | }
|
20368 |
|
20369 | var handleAutoFill = function handleAutoFill(event) {
|
20370 |
|
20371 | checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : {
|
20372 | value: 'x'
|
20373 | });
|
20374 | };
|
20375 |
|
20376 | React.useEffect(function () {
|
20377 | if (muiFormControl) {
|
20378 | muiFormControl.setAdornedStart(Boolean(startAdornment));
|
20379 | }
|
20380 | }, [muiFormControl, startAdornment]);
|
20381 | return React.createElement("div", _extends({
|
20382 | 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, fcs.margin === 'dense' && classes.marginDense),
|
20383 | onClick: handleClick,
|
20384 | ref: ref
|
20385 | }, other), startAdornment, React.createElement(FormControlContext.Provider, {
|
20386 | value: null
|
20387 | }, React.createElement(InputComponent, _extends({
|
20388 | "aria-invalid": fcs.error,
|
20389 | "aria-describedby": ariaDescribedby,
|
20390 | autoComplete: autoComplete,
|
20391 | autoFocus: autoFocus,
|
20392 | defaultValue: defaultValue,
|
20393 | disabled: fcs.disabled,
|
20394 | id: id,
|
20395 | onAnimationStart: handleAutoFill,
|
20396 | name: name,
|
20397 | placeholder: placeholder,
|
20398 | readOnly: readOnly,
|
20399 | required: fcs.required,
|
20400 | rows: rows,
|
20401 | value: value,
|
20402 | onKeyDown: onKeyDown,
|
20403 | onKeyUp: onKeyUp
|
20404 | }, inputProps, {
|
20405 | className: clsx(classes.input, inputPropsProp.className, fcs.disabled && classes.disabled, multiline && classes.inputMultiline, fcs.hiddenLabel && classes.inputHiddenLabel, startAdornment && classes.inputAdornedStart, endAdornment && classes.inputAdornedEnd, type === 'search' && classes.inputTypeSearch, fcs.margin === 'dense' && classes.inputMarginDense),
|
20406 | onBlur: handleBlur,
|
20407 | onChange: handleChange,
|
20408 | onFocus: handleFocus
|
20409 | }))), endAdornment, renderSuffix ? renderSuffix(_extends({}, fcs, {
|
20410 | startAdornment: startAdornment
|
20411 | })) : null);
|
20412 | });
|
20413 | InputBase.propTypes = {
|
20414 |
|
20415 |
|
20416 |
|
20417 |
|
20418 |
|
20419 | |
20420 |
|
20421 |
|
20422 | 'aria-describedby': propTypes.string,
|
20423 |
|
20424 | |
20425 |
|
20426 |
|
20427 |
|
20428 |
|
20429 | autoComplete: propTypes.string,
|
20430 |
|
20431 | |
20432 |
|
20433 |
|
20434 | autoFocus: propTypes.bool,
|
20435 |
|
20436 | |
20437 |
|
20438 |
|
20439 |
|
20440 | classes: propTypes.object,
|
20441 |
|
20442 | |
20443 |
|
20444 |
|
20445 | className: propTypes.string,
|
20446 |
|
20447 | |
20448 |
|
20449 |
|
20450 | color: propTypes.oneOf(['primary', 'secondary']),
|
20451 |
|
20452 | |
20453 |
|
20454 |
|
20455 | defaultValue: propTypes.any,
|
20456 |
|
20457 | |
20458 |
|
20459 |
|
20460 | disabled: propTypes.bool,
|
20461 |
|
20462 | |
20463 |
|
20464 |
|
20465 | endAdornment: propTypes.node,
|
20466 |
|
20467 | |
20468 |
|
20469 |
|
20470 |
|
20471 | error: propTypes.bool,
|
20472 |
|
20473 | |
20474 |
|
20475 |
|
20476 | fullWidth: propTypes.bool,
|
20477 |
|
20478 | |
20479 |
|
20480 |
|
20481 | id: propTypes.string,
|
20482 |
|
20483 | |
20484 |
|
20485 |
|
20486 |
|
20487 | inputComponent: propTypes.elementType,
|
20488 |
|
20489 | |
20490 |
|
20491 |
|
20492 | inputProps: propTypes.object,
|
20493 |
|
20494 | |
20495 |
|
20496 |
|
20497 | inputRef: refType,
|
20498 |
|
20499 | |
20500 |
|
20501 |
|
20502 |
|
20503 | margin: propTypes.oneOf(['dense', 'none']),
|
20504 |
|
20505 | |
20506 |
|
20507 |
|
20508 | maxRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
20509 |
|
20510 | |
20511 |
|
20512 |
|
20513 | minRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
20514 |
|
20515 | |
20516 |
|
20517 |
|
20518 | multiline: propTypes.bool,
|
20519 |
|
20520 | |
20521 |
|
20522 |
|
20523 | name: propTypes.string,
|
20524 |
|
20525 | |
20526 |
|
20527 |
|
20528 |
|
20529 |
|
20530 | onBlur: propTypes.func,
|
20531 |
|
20532 | |
20533 |
|
20534 |
|
20535 |
|
20536 |
|
20537 |
|
20538 | onChange: propTypes.func,
|
20539 |
|
20540 | |
20541 |
|
20542 |
|
20543 | onClick: propTypes.func,
|
20544 |
|
20545 | |
20546 |
|
20547 |
|
20548 | onFocus: propTypes.func,
|
20549 |
|
20550 | |
20551 |
|
20552 |
|
20553 | onKeyDown: propTypes.func,
|
20554 |
|
20555 | |
20556 |
|
20557 |
|
20558 | onKeyUp: propTypes.func,
|
20559 |
|
20560 | |
20561 |
|
20562 |
|
20563 | placeholder: propTypes.string,
|
20564 |
|
20565 | |
20566 |
|
20567 |
|
20568 |
|
20569 | readOnly: propTypes.bool,
|
20570 |
|
20571 | |
20572 |
|
20573 |
|
20574 | renderSuffix: propTypes.func,
|
20575 |
|
20576 | |
20577 |
|
20578 |
|
20579 | required: propTypes.bool,
|
20580 |
|
20581 | |
20582 |
|
20583 |
|
20584 | rows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
20585 |
|
20586 | |
20587 |
|
20588 |
|
20589 |
|
20590 | rowsMax: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
20591 |
|
20592 | |
20593 |
|
20594 |
|
20595 |
|
20596 | rowsMin: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
20597 |
|
20598 | |
20599 |
|
20600 |
|
20601 | startAdornment: propTypes.node,
|
20602 |
|
20603 | |
20604 |
|
20605 |
|
20606 | type: propTypes.string,
|
20607 |
|
20608 | |
20609 |
|
20610 |
|
20611 | value: propTypes.any
|
20612 | } ;
|
20613 | var InputBase$1 = withStyles$1(styles$N, {
|
20614 | name: 'MuiInputBase'
|
20615 | })(InputBase);
|
20616 |
|
20617 | var styles$O = function styles(theme) {
|
20618 | var light = theme.palette.type === 'light';
|
20619 | var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
|
20620 | var backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';
|
20621 | return {
|
20622 |
|
20623 | root: {
|
20624 | position: 'relative',
|
20625 | backgroundColor: backgroundColor,
|
20626 | borderTopLeftRadius: theme.shape.borderRadius,
|
20627 | borderTopRightRadius: theme.shape.borderRadius,
|
20628 | transition: theme.transitions.create('background-color', {
|
20629 | duration: theme.transitions.duration.shorter,
|
20630 | easing: theme.transitions.easing.easeOut
|
20631 | }),
|
20632 | '&:hover': {
|
20633 | backgroundColor: light ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)',
|
20634 |
|
20635 | '@media (hover: none)': {
|
20636 | backgroundColor: backgroundColor
|
20637 | }
|
20638 | },
|
20639 | '&$focused': {
|
20640 | backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)'
|
20641 | },
|
20642 | '&$disabled': {
|
20643 | backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'
|
20644 | }
|
20645 | },
|
20646 |
|
20647 |
|
20648 | colorSecondary: {
|
20649 | '&$underline:after': {
|
20650 | borderBottomColor: theme.palette.secondary.main
|
20651 | }
|
20652 | },
|
20653 |
|
20654 |
|
20655 | underline: {
|
20656 | '&:after': {
|
20657 | borderBottom: "2px solid ".concat(theme.palette.primary.main),
|
20658 | left: 0,
|
20659 | bottom: 0,
|
20660 |
|
20661 | content: '""',
|
20662 | position: 'absolute',
|
20663 | right: 0,
|
20664 | transform: 'scaleX(0)',
|
20665 | transition: theme.transitions.create('transform', {
|
20666 | duration: theme.transitions.duration.shorter,
|
20667 | easing: theme.transitions.easing.easeOut
|
20668 | }),
|
20669 | pointerEvents: 'none'
|
20670 |
|
20671 | },
|
20672 | '&$focused:after': {
|
20673 | transform: 'scaleX(1)'
|
20674 | },
|
20675 | '&$error:after': {
|
20676 | borderBottomColor: theme.palette.error.main,
|
20677 | transform: 'scaleX(1)'
|
20678 |
|
20679 | },
|
20680 | '&:before': {
|
20681 | borderBottom: "1px solid ".concat(bottomLineColor),
|
20682 | left: 0,
|
20683 | bottom: 0,
|
20684 |
|
20685 | content: '"\\00a0"',
|
20686 | position: 'absolute',
|
20687 | right: 0,
|
20688 | transition: theme.transitions.create('border-bottom-color', {
|
20689 | duration: theme.transitions.duration.shorter
|
20690 | }),
|
20691 | pointerEvents: 'none'
|
20692 |
|
20693 | },
|
20694 | '&:hover:before': {
|
20695 | borderBottom: "1px solid ".concat(theme.palette.text.primary)
|
20696 | },
|
20697 | '&$disabled:before': {
|
20698 | borderBottomStyle: 'dotted'
|
20699 | }
|
20700 | },
|
20701 |
|
20702 |
|
20703 | focused: {},
|
20704 |
|
20705 |
|
20706 | disabled: {},
|
20707 |
|
20708 |
|
20709 | adornedStart: {
|
20710 | paddingLeft: 12
|
20711 | },
|
20712 |
|
20713 |
|
20714 | adornedEnd: {
|
20715 | paddingRight: 12
|
20716 | },
|
20717 |
|
20718 |
|
20719 | error: {},
|
20720 |
|
20721 |
|
20722 | marginDense: {},
|
20723 |
|
20724 |
|
20725 | multiline: {
|
20726 | padding: '27px 12px 10px',
|
20727 | '&$marginDense': {
|
20728 | paddingTop: 23,
|
20729 | paddingBottom: 6
|
20730 | }
|
20731 | },
|
20732 |
|
20733 |
|
20734 | input: {
|
20735 | padding: '27px 12px 10px',
|
20736 | '&:-webkit-autofill': {
|
20737 | WebkitBoxShadow: theme.palette.type === 'light' ? null : '0 0 0 100px #266798 inset',
|
20738 | WebkitTextFillColor: theme.palette.type === 'light' ? null : '#fff',
|
20739 | caretColor: theme.palette.type === 'light' ? null : '#fff',
|
20740 | borderTopLeftRadius: 'inherit',
|
20741 | borderTopRightRadius: 'inherit'
|
20742 | }
|
20743 | },
|
20744 |
|
20745 |
|
20746 | inputMarginDense: {
|
20747 | paddingTop: 23,
|
20748 | paddingBottom: 6
|
20749 | },
|
20750 |
|
20751 |
|
20752 | inputHiddenLabel: {
|
20753 | paddingTop: 18,
|
20754 | paddingBottom: 19,
|
20755 | '&$inputMarginDense': {
|
20756 | paddingTop: 10,
|
20757 | paddingBottom: 11
|
20758 | }
|
20759 | },
|
20760 |
|
20761 |
|
20762 | inputMultiline: {
|
20763 | padding: 0
|
20764 | },
|
20765 |
|
20766 |
|
20767 | inputAdornedStart: {
|
20768 | paddingLeft: 0
|
20769 | },
|
20770 |
|
20771 |
|
20772 | inputAdornedEnd: {
|
20773 | paddingRight: 0
|
20774 | }
|
20775 | };
|
20776 | };
|
20777 | var FilledInput = React.forwardRef(function FilledInput(props, ref) {
|
20778 | var disableUnderline = props.disableUnderline,
|
20779 | classes = props.classes,
|
20780 | _props$fullWidth = props.fullWidth,
|
20781 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
20782 | _props$inputComponent = props.inputComponent,
|
20783 | inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
|
20784 | _props$multiline = props.multiline,
|
20785 | multiline = _props$multiline === void 0 ? false : _props$multiline,
|
20786 | _props$type = props.type,
|
20787 | type = _props$type === void 0 ? 'text' : _props$type,
|
20788 | other = _objectWithoutProperties(props, ["disableUnderline", "classes", "fullWidth", "inputComponent", "multiline", "type"]);
|
20789 |
|
20790 | return React.createElement(InputBase$1, _extends({
|
20791 | classes: _extends({}, classes, {
|
20792 | root: clsx(classes.root, !disableUnderline && classes.underline),
|
20793 | underline: null
|
20794 | }),
|
20795 | fullWidth: fullWidth,
|
20796 | inputComponent: inputComponent,
|
20797 | multiline: multiline,
|
20798 | ref: ref,
|
20799 | type: type
|
20800 | }, other));
|
20801 | });
|
20802 | FilledInput.propTypes = {
|
20803 |
|
20804 |
|
20805 |
|
20806 |
|
20807 |
|
20808 | |
20809 |
|
20810 |
|
20811 |
|
20812 |
|
20813 | autoComplete: propTypes.string,
|
20814 |
|
20815 | |
20816 |
|
20817 |
|
20818 | autoFocus: propTypes.bool,
|
20819 |
|
20820 | |
20821 |
|
20822 |
|
20823 |
|
20824 | classes: propTypes.object,
|
20825 |
|
20826 | |
20827 |
|
20828 |
|
20829 | color: propTypes.oneOf(['primary', 'secondary']),
|
20830 |
|
20831 | |
20832 |
|
20833 |
|
20834 | defaultValue: propTypes.any,
|
20835 |
|
20836 | |
20837 |
|
20838 |
|
20839 | disabled: propTypes.bool,
|
20840 |
|
20841 | |
20842 |
|
20843 |
|
20844 | disableUnderline: propTypes.bool,
|
20845 |
|
20846 | |
20847 |
|
20848 |
|
20849 | endAdornment: propTypes.node,
|
20850 |
|
20851 | |
20852 |
|
20853 |
|
20854 |
|
20855 | error: propTypes.bool,
|
20856 |
|
20857 | |
20858 |
|
20859 |
|
20860 | fullWidth: propTypes.bool,
|
20861 |
|
20862 | |
20863 |
|
20864 |
|
20865 | id: propTypes.string,
|
20866 |
|
20867 | |
20868 |
|
20869 |
|
20870 |
|
20871 | inputComponent: propTypes.elementType,
|
20872 |
|
20873 | |
20874 |
|
20875 |
|
20876 | inputProps: propTypes.object,
|
20877 |
|
20878 | |
20879 |
|
20880 |
|
20881 | inputRef: refType,
|
20882 |
|
20883 | |
20884 |
|
20885 |
|
20886 |
|
20887 | margin: propTypes.oneOf(['dense', 'none']),
|
20888 |
|
20889 | |
20890 |
|
20891 |
|
20892 | maxRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
20893 |
|
20894 | |
20895 |
|
20896 |
|
20897 | multiline: propTypes.bool,
|
20898 |
|
20899 | |
20900 |
|
20901 |
|
20902 | name: propTypes.string,
|
20903 |
|
20904 | |
20905 |
|
20906 |
|
20907 |
|
20908 |
|
20909 |
|
20910 | onChange: propTypes.func,
|
20911 |
|
20912 | |
20913 |
|
20914 |
|
20915 | placeholder: propTypes.string,
|
20916 |
|
20917 | |
20918 |
|
20919 |
|
20920 |
|
20921 | readOnly: propTypes.bool,
|
20922 |
|
20923 | |
20924 |
|
20925 |
|
20926 | required: propTypes.bool,
|
20927 |
|
20928 | |
20929 |
|
20930 |
|
20931 | rows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
20932 |
|
20933 | |
20934 |
|
20935 |
|
20936 | startAdornment: propTypes.node,
|
20937 |
|
20938 | |
20939 |
|
20940 |
|
20941 | type: propTypes.string,
|
20942 |
|
20943 | |
20944 |
|
20945 |
|
20946 | value: propTypes.any
|
20947 | } ;
|
20948 | FilledInput.muiName = 'Input';
|
20949 | var FilledInput$1 = withStyles$1(styles$O, {
|
20950 | name: 'MuiFilledInput'
|
20951 | })(FilledInput);
|
20952 |
|
20953 | var styles$P = {
|
20954 |
|
20955 | root: {
|
20956 | display: 'inline-flex',
|
20957 | flexDirection: 'column',
|
20958 | position: 'relative',
|
20959 |
|
20960 | minWidth: 0,
|
20961 | padding: 0,
|
20962 | margin: 0,
|
20963 | border: 0,
|
20964 | verticalAlign: 'top'
|
20965 |
|
20966 | },
|
20967 |
|
20968 |
|
20969 | marginNormal: {
|
20970 | marginTop: 16,
|
20971 | marginBottom: 8
|
20972 | },
|
20973 |
|
20974 |
|
20975 | marginDense: {
|
20976 | marginTop: 8,
|
20977 | marginBottom: 4
|
20978 | },
|
20979 |
|
20980 |
|
20981 | fullWidth: {
|
20982 | width: '100%'
|
20983 | }
|
20984 | };
|
20985 | |
20986 |
|
20987 |
|
20988 |
|
20989 |
|
20990 |
|
20991 |
|
20992 |
|
20993 |
|
20994 |
|
20995 |
|
20996 |
|
20997 |
|
20998 |
|
20999 |
|
21000 |
|
21001 |
|
21002 |
|
21003 |
|
21004 |
|
21005 |
|
21006 |
|
21007 |
|
21008 |
|
21009 | var FormControl = React.forwardRef(function FormControl(props, ref) {
|
21010 | var children = props.children,
|
21011 | classes = props.classes,
|
21012 | className = props.className,
|
21013 | _props$color = props.color,
|
21014 | color = _props$color === void 0 ? 'primary' : _props$color,
|
21015 | _props$component = props.component,
|
21016 | Component = _props$component === void 0 ? 'div' : _props$component,
|
21017 | _props$disabled = props.disabled,
|
21018 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
21019 | _props$error = props.error,
|
21020 | error = _props$error === void 0 ? false : _props$error,
|
21021 | _props$fullWidth = props.fullWidth,
|
21022 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
21023 | visuallyFocused = props.focused,
|
21024 | _props$hiddenLabel = props.hiddenLabel,
|
21025 | hiddenLabel = _props$hiddenLabel === void 0 ? false : _props$hiddenLabel,
|
21026 | _props$margin = props.margin,
|
21027 | margin = _props$margin === void 0 ? 'none' : _props$margin,
|
21028 | _props$required = props.required,
|
21029 | required = _props$required === void 0 ? false : _props$required,
|
21030 | size = props.size,
|
21031 | _props$variant = props.variant,
|
21032 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
21033 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "error", "fullWidth", "focused", "hiddenLabel", "margin", "required", "size", "variant"]);
|
21034 |
|
21035 | var _React$useState = React.useState(function () {
|
21036 |
|
21037 |
|
21038 | var initialAdornedStart = false;
|
21039 |
|
21040 | if (children) {
|
21041 | React.Children.forEach(children, function (child) {
|
21042 | if (!isMuiElement(child, ['Input', 'Select'])) {
|
21043 | return;
|
21044 | }
|
21045 |
|
21046 | var input = isMuiElement(child, ['Select']) ? child.props.input : child;
|
21047 |
|
21048 | if (input && isAdornedStart(input.props)) {
|
21049 | initialAdornedStart = true;
|
21050 | }
|
21051 | });
|
21052 | }
|
21053 |
|
21054 | return initialAdornedStart;
|
21055 | }),
|
21056 | adornedStart = _React$useState[0],
|
21057 | setAdornedStart = _React$useState[1];
|
21058 |
|
21059 | var _React$useState2 = React.useState(function () {
|
21060 |
|
21061 |
|
21062 | var initialFilled = false;
|
21063 |
|
21064 | if (children) {
|
21065 | React.Children.forEach(children, function (child) {
|
21066 | if (!isMuiElement(child, ['Input', 'Select'])) {
|
21067 | return;
|
21068 | }
|
21069 |
|
21070 | if (isFilled(child.props, true)) {
|
21071 | initialFilled = true;
|
21072 | }
|
21073 | });
|
21074 | }
|
21075 |
|
21076 | return initialFilled;
|
21077 | }),
|
21078 | filled = _React$useState2[0],
|
21079 | setFilled = _React$useState2[1];
|
21080 |
|
21081 | var _React$useState3 = React.useState(false),
|
21082 | _focused = _React$useState3[0],
|
21083 | setFocused = _React$useState3[1];
|
21084 |
|
21085 | var focused = visuallyFocused !== undefined ? visuallyFocused : _focused;
|
21086 |
|
21087 | if (disabled && focused) {
|
21088 | setFocused(false);
|
21089 | }
|
21090 |
|
21091 | var registerEffect;
|
21092 |
|
21093 | {
|
21094 |
|
21095 | var registeredInput = React.useRef(false);
|
21096 |
|
21097 | registerEffect = function registerEffect() {
|
21098 | if (registeredInput.current) {
|
21099 | 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'));
|
21100 | }
|
21101 |
|
21102 | registeredInput.current = true;
|
21103 | return function () {
|
21104 | registeredInput.current = false;
|
21105 | };
|
21106 | };
|
21107 | }
|
21108 |
|
21109 | var onFilled = React.useCallback(function () {
|
21110 | setFilled(true);
|
21111 | }, []);
|
21112 | var onEmpty = React.useCallback(function () {
|
21113 | setFilled(false);
|
21114 | }, []);
|
21115 | var childContext = {
|
21116 | adornedStart: adornedStart,
|
21117 | setAdornedStart: setAdornedStart,
|
21118 | color: color,
|
21119 | disabled: disabled,
|
21120 | error: error,
|
21121 | filled: filled,
|
21122 | focused: focused,
|
21123 | fullWidth: fullWidth,
|
21124 | hiddenLabel: hiddenLabel,
|
21125 | margin: (size === 'small' ? 'dense' : undefined) || margin,
|
21126 | onBlur: function onBlur() {
|
21127 | setFocused(false);
|
21128 | },
|
21129 | onEmpty: onEmpty,
|
21130 | onFilled: onFilled,
|
21131 | onFocus: function onFocus() {
|
21132 | setFocused(true);
|
21133 | },
|
21134 | registerEffect: registerEffect,
|
21135 | required: required,
|
21136 | variant: variant
|
21137 | };
|
21138 | return React.createElement(FormControlContext.Provider, {
|
21139 | value: childContext
|
21140 | }, React.createElement(Component, _extends({
|
21141 | className: clsx(classes.root, className, margin !== 'none' && classes["margin".concat(capitalize(margin))], fullWidth && classes.fullWidth),
|
21142 | ref: ref
|
21143 | }, other), children));
|
21144 | });
|
21145 | FormControl.propTypes = {
|
21146 |
|
21147 |
|
21148 |
|
21149 |
|
21150 |
|
21151 | |
21152 |
|
21153 |
|
21154 | children: propTypes.node,
|
21155 |
|
21156 | |
21157 |
|
21158 |
|
21159 |
|
21160 | classes: propTypes.object,
|
21161 |
|
21162 | |
21163 |
|
21164 |
|
21165 | className: propTypes.string,
|
21166 |
|
21167 | |
21168 |
|
21169 |
|
21170 | color: propTypes.oneOf(['primary', 'secondary']),
|
21171 |
|
21172 | |
21173 |
|
21174 |
|
21175 |
|
21176 | component: propTypes
|
21177 |
|
21178 | .elementType,
|
21179 |
|
21180 | |
21181 |
|
21182 |
|
21183 | disabled: propTypes.bool,
|
21184 |
|
21185 | |
21186 |
|
21187 |
|
21188 | error: propTypes.bool,
|
21189 |
|
21190 | |
21191 |
|
21192 |
|
21193 | focused: propTypes.bool,
|
21194 |
|
21195 | |
21196 |
|
21197 |
|
21198 | fullWidth: propTypes.bool,
|
21199 |
|
21200 | |
21201 |
|
21202 |
|
21203 |
|
21204 |
|
21205 | hiddenLabel: propTypes.bool,
|
21206 |
|
21207 | |
21208 |
|
21209 |
|
21210 | margin: propTypes.oneOf(['dense', 'none', 'normal']),
|
21211 |
|
21212 | |
21213 |
|
21214 |
|
21215 | required: propTypes.bool,
|
21216 |
|
21217 | |
21218 |
|
21219 |
|
21220 | size: propTypes.oneOf(['medium', 'small']),
|
21221 |
|
21222 | |
21223 |
|
21224 |
|
21225 | variant: propTypes.oneOf(['filled', 'outlined', 'standard'])
|
21226 | } ;
|
21227 | var FormControl$1 = withStyles$1(styles$P, {
|
21228 | name: 'MuiFormControl'
|
21229 | })(FormControl);
|
21230 |
|
21231 | var styles$Q = function styles(theme) {
|
21232 | return {
|
21233 |
|
21234 | root: {
|
21235 | display: 'inline-flex',
|
21236 | alignItems: 'center',
|
21237 | cursor: 'pointer',
|
21238 |
|
21239 | verticalAlign: 'middle',
|
21240 | WebkitTapHighlightColor: 'transparent',
|
21241 | marginLeft: -11,
|
21242 | marginRight: 16,
|
21243 |
|
21244 | '&$disabled': {
|
21245 | cursor: 'default'
|
21246 | }
|
21247 | },
|
21248 |
|
21249 |
|
21250 | labelPlacementStart: {
|
21251 | flexDirection: 'row-reverse',
|
21252 | marginLeft: 16,
|
21253 |
|
21254 | marginRight: -11
|
21255 | },
|
21256 |
|
21257 |
|
21258 | labelPlacementTop: {
|
21259 | flexDirection: 'column-reverse',
|
21260 | marginLeft: 16
|
21261 | },
|
21262 |
|
21263 |
|
21264 | labelPlacementBottom: {
|
21265 | flexDirection: 'column',
|
21266 | marginLeft: 16
|
21267 | },
|
21268 |
|
21269 |
|
21270 | disabled: {},
|
21271 |
|
21272 |
|
21273 | label: {
|
21274 | '&$disabled': {
|
21275 | color: theme.palette.text.disabled
|
21276 | }
|
21277 | }
|
21278 | };
|
21279 | };
|
21280 | |
21281 |
|
21282 |
|
21283 |
|
21284 |
|
21285 | var FormControlLabel = React.forwardRef(function FormControlLabel(props, ref) {
|
21286 | var checked = props.checked,
|
21287 | classes = props.classes,
|
21288 | className = props.className,
|
21289 | control = props.control,
|
21290 | disabledProp = props.disabled,
|
21291 | inputRef = props.inputRef,
|
21292 | label = props.label,
|
21293 | _props$labelPlacement = props.labelPlacement,
|
21294 | labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement,
|
21295 | name = props.name,
|
21296 | onChange = props.onChange,
|
21297 | value = props.value,
|
21298 | other = _objectWithoutProperties(props, ["checked", "classes", "className", "control", "disabled", "inputRef", "label", "labelPlacement", "name", "onChange", "value"]);
|
21299 |
|
21300 | var muiFormControl = useFormControl$1();
|
21301 | var disabled = disabledProp;
|
21302 |
|
21303 | if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
|
21304 | disabled = control.props.disabled;
|
21305 | }
|
21306 |
|
21307 | if (typeof disabled === 'undefined' && muiFormControl) {
|
21308 | disabled = muiFormControl.disabled;
|
21309 | }
|
21310 |
|
21311 | var controlProps = {
|
21312 | disabled: disabled
|
21313 | };
|
21314 | ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(function (key) {
|
21315 | if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
|
21316 | controlProps[key] = props[key];
|
21317 | }
|
21318 | });
|
21319 | return React.createElement("label", _extends({
|
21320 | className: clsx(classes.root, className, labelPlacement !== 'end' && classes["labelPlacement".concat(capitalize(labelPlacement))], disabled && classes.disabled),
|
21321 | ref: ref
|
21322 | }, other), React.cloneElement(control, controlProps), React.createElement(Typography$1, {
|
21323 | component: "span",
|
21324 | className: clsx(classes.label, disabled && classes.disabled)
|
21325 | }, label));
|
21326 | });
|
21327 | FormControlLabel.propTypes = {
|
21328 |
|
21329 |
|
21330 |
|
21331 |
|
21332 |
|
21333 | |
21334 |
|
21335 |
|
21336 | checked: propTypes.bool,
|
21337 |
|
21338 | |
21339 |
|
21340 |
|
21341 |
|
21342 | classes: propTypes.object,
|
21343 |
|
21344 | |
21345 |
|
21346 |
|
21347 | className: propTypes.string,
|
21348 |
|
21349 | |
21350 |
|
21351 |
|
21352 | control: propTypes.element.isRequired,
|
21353 |
|
21354 | |
21355 |
|
21356 |
|
21357 | disabled: propTypes.bool,
|
21358 |
|
21359 | |
21360 |
|
21361 |
|
21362 | inputRef: refType,
|
21363 |
|
21364 | |
21365 |
|
21366 |
|
21367 | label: propTypes.node,
|
21368 |
|
21369 | |
21370 |
|
21371 |
|
21372 | labelPlacement: propTypes.oneOf(['bottom', 'end', 'start', 'top']),
|
21373 |
|
21374 | |
21375 |
|
21376 |
|
21377 | name: propTypes.string,
|
21378 |
|
21379 | |
21380 |
|
21381 |
|
21382 |
|
21383 |
|
21384 |
|
21385 | onChange: propTypes.func,
|
21386 |
|
21387 | |
21388 |
|
21389 |
|
21390 | value: propTypes.any
|
21391 | } ;
|
21392 | var FormControlLabel$1 = withStyles$1(styles$Q, {
|
21393 | name: 'MuiFormControlLabel'
|
21394 | })(FormControlLabel);
|
21395 |
|
21396 | var styles$R = {
|
21397 |
|
21398 | root: {
|
21399 | display: 'flex',
|
21400 | flexDirection: 'column',
|
21401 | flexWrap: 'wrap'
|
21402 | },
|
21403 |
|
21404 |
|
21405 | row: {
|
21406 | flexDirection: 'row'
|
21407 | }
|
21408 | };
|
21409 | |
21410 |
|
21411 |
|
21412 |
|
21413 |
|
21414 |
|
21415 | var FormGroup = React.forwardRef(function FormGroup(props, ref) {
|
21416 | var classes = props.classes,
|
21417 | className = props.className,
|
21418 | _props$row = props.row,
|
21419 | row = _props$row === void 0 ? false : _props$row,
|
21420 | other = _objectWithoutProperties(props, ["classes", "className", "row"]);
|
21421 |
|
21422 | return React.createElement("div", _extends({
|
21423 | className: clsx(classes.root, className, row && classes.row),
|
21424 | ref: ref
|
21425 | }, other));
|
21426 | });
|
21427 | FormGroup.propTypes = {
|
21428 |
|
21429 |
|
21430 |
|
21431 |
|
21432 |
|
21433 | |
21434 |
|
21435 |
|
21436 | children: propTypes.node,
|
21437 |
|
21438 | |
21439 |
|
21440 |
|
21441 |
|
21442 | classes: propTypes.object,
|
21443 |
|
21444 | |
21445 |
|
21446 |
|
21447 | className: propTypes.string,
|
21448 |
|
21449 | |
21450 |
|
21451 |
|
21452 | row: propTypes.bool
|
21453 | } ;
|
21454 | var FormGroup$1 = withStyles$1(styles$R, {
|
21455 | name: 'MuiFormGroup'
|
21456 | })(FormGroup);
|
21457 |
|
21458 | var styles$S = function styles(theme) {
|
21459 | return {
|
21460 |
|
21461 | root: _extends({
|
21462 | color: theme.palette.text.secondary
|
21463 | }, theme.typography.caption, {
|
21464 | textAlign: 'left',
|
21465 | marginTop: 3,
|
21466 | margin: 0,
|
21467 | '&$disabled': {
|
21468 | color: theme.palette.text.disabled
|
21469 | },
|
21470 | '&$error': {
|
21471 | color: theme.palette.error.main
|
21472 | }
|
21473 | }),
|
21474 |
|
21475 |
|
21476 | error: {},
|
21477 |
|
21478 |
|
21479 | disabled: {},
|
21480 |
|
21481 |
|
21482 | marginDense: {
|
21483 | marginTop: 4
|
21484 | },
|
21485 |
|
21486 |
|
21487 | contained: {
|
21488 | marginLeft: 14,
|
21489 | marginRight: 14
|
21490 | },
|
21491 |
|
21492 |
|
21493 | focused: {},
|
21494 |
|
21495 |
|
21496 | filled: {},
|
21497 |
|
21498 |
|
21499 | required: {}
|
21500 | };
|
21501 | };
|
21502 | var FormHelperText = React.forwardRef(function FormHelperText(props, ref) {
|
21503 | var children = props.children,
|
21504 | classes = props.classes,
|
21505 | className = props.className,
|
21506 | _props$component = props.component,
|
21507 | Component = _props$component === void 0 ? 'p' : _props$component,
|
21508 | disabled = props.disabled,
|
21509 | error = props.error,
|
21510 | filled = props.filled,
|
21511 | focused = props.focused,
|
21512 | margin = props.margin,
|
21513 | required = props.required,
|
21514 | variant = props.variant,
|
21515 | other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"]);
|
21516 |
|
21517 | var muiFormControl = useFormControl$1();
|
21518 | var fcs = formControlState({
|
21519 | props: props,
|
21520 | muiFormControl: muiFormControl,
|
21521 | states: ['variant', 'margin', 'disabled', 'error', 'filled', 'focused', 'required']
|
21522 | });
|
21523 | return React.createElement(Component, _extends({
|
21524 | 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, fcs.margin === 'dense' && classes.marginDense),
|
21525 | ref: ref
|
21526 | }, other), children === ' ' ?
|
21527 |
|
21528 |
|
21529 | React.createElement("span", {
|
21530 | dangerouslySetInnerHTML: {
|
21531 | __html: '​'
|
21532 | }
|
21533 | }) : children);
|
21534 | });
|
21535 | FormHelperText.propTypes = {
|
21536 |
|
21537 |
|
21538 |
|
21539 |
|
21540 |
|
21541 | |
21542 |
|
21543 |
|
21544 |
|
21545 |
|
21546 | children: propTypes.node,
|
21547 |
|
21548 | |
21549 |
|
21550 |
|
21551 |
|
21552 | classes: propTypes.object,
|
21553 |
|
21554 | |
21555 |
|
21556 |
|
21557 | className: propTypes.string,
|
21558 |
|
21559 | |
21560 |
|
21561 |
|
21562 |
|
21563 | component: propTypes
|
21564 |
|
21565 | .elementType,
|
21566 |
|
21567 | |
21568 |
|
21569 |
|
21570 | disabled: propTypes.bool,
|
21571 |
|
21572 | |
21573 |
|
21574 |
|
21575 | error: propTypes.bool,
|
21576 |
|
21577 | |
21578 |
|
21579 |
|
21580 | filled: propTypes.bool,
|
21581 |
|
21582 | |
21583 |
|
21584 |
|
21585 | focused: propTypes.bool,
|
21586 |
|
21587 | |
21588 |
|
21589 |
|
21590 |
|
21591 | margin: propTypes.oneOf(['dense']),
|
21592 |
|
21593 | |
21594 |
|
21595 |
|
21596 | required: propTypes.bool,
|
21597 |
|
21598 | |
21599 |
|
21600 |
|
21601 | variant: propTypes.oneOf(['filled', 'outlined', 'standard'])
|
21602 | } ;
|
21603 | var FormHelperText$1 = withStyles$1(styles$S, {
|
21604 | name: 'MuiFormHelperText'
|
21605 | })(FormHelperText);
|
21606 |
|
21607 | var styles$T = function styles(theme) {
|
21608 | return {
|
21609 |
|
21610 | root: _extends({
|
21611 | color: theme.palette.text.secondary
|
21612 | }, theme.typography.body1, {
|
21613 | lineHeight: 1,
|
21614 | padding: 0,
|
21615 | '&$focused': {
|
21616 | color: theme.palette.primary.main
|
21617 | },
|
21618 | '&$disabled': {
|
21619 | color: theme.palette.text.disabled
|
21620 | },
|
21621 | '&$error': {
|
21622 | color: theme.palette.error.main
|
21623 | }
|
21624 | }),
|
21625 |
|
21626 |
|
21627 | colorSecondary: {
|
21628 | '&$focused': {
|
21629 | color: theme.palette.secondary.main
|
21630 | }
|
21631 | },
|
21632 |
|
21633 |
|
21634 | focused: {},
|
21635 |
|
21636 |
|
21637 | disabled: {},
|
21638 |
|
21639 |
|
21640 | error: {},
|
21641 |
|
21642 |
|
21643 | filled: {},
|
21644 |
|
21645 |
|
21646 | required: {},
|
21647 |
|
21648 |
|
21649 | asterisk: {
|
21650 | '&$error': {
|
21651 | color: theme.palette.error.main
|
21652 | }
|
21653 | }
|
21654 | };
|
21655 | };
|
21656 | var FormLabel = React.forwardRef(function FormLabel(props, ref) {
|
21657 | var children = props.children,
|
21658 | classes = props.classes,
|
21659 | className = props.className,
|
21660 | color = props.color,
|
21661 | _props$component = props.component,
|
21662 | Component = _props$component === void 0 ? 'label' : _props$component,
|
21663 | disabled = props.disabled,
|
21664 | error = props.error,
|
21665 | filled = props.filled,
|
21666 | focused = props.focused,
|
21667 | required = props.required,
|
21668 | other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "error", "filled", "focused", "required"]);
|
21669 |
|
21670 | var muiFormControl = useFormControl$1();
|
21671 | var fcs = formControlState({
|
21672 | props: props,
|
21673 | muiFormControl: muiFormControl,
|
21674 | states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
|
21675 | });
|
21676 | return React.createElement(Component, _extends({
|
21677 | 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),
|
21678 | ref: ref
|
21679 | }, other), children, fcs.required && React.createElement("span", {
|
21680 | "aria-hidden": true,
|
21681 | className: clsx(classes.asterisk, fcs.error && classes.error)
|
21682 | }, "\u2009", '*'));
|
21683 | });
|
21684 | FormLabel.propTypes = {
|
21685 |
|
21686 |
|
21687 |
|
21688 |
|
21689 |
|
21690 | |
21691 |
|
21692 |
|
21693 | children: propTypes.node,
|
21694 |
|
21695 | |
21696 |
|
21697 |
|
21698 |
|
21699 | classes: propTypes.object,
|
21700 |
|
21701 | |
21702 |
|
21703 |
|
21704 | className: propTypes.string,
|
21705 |
|
21706 | |
21707 |
|
21708 |
|
21709 | color: propTypes.oneOf(['primary', 'secondary']),
|
21710 |
|
21711 | |
21712 |
|
21713 |
|
21714 |
|
21715 | component: propTypes
|
21716 |
|
21717 | .elementType,
|
21718 |
|
21719 | |
21720 |
|
21721 |
|
21722 | disabled: propTypes.bool,
|
21723 |
|
21724 | |
21725 |
|
21726 |
|
21727 | error: propTypes.bool,
|
21728 |
|
21729 | |
21730 |
|
21731 |
|
21732 | filled: propTypes.bool,
|
21733 |
|
21734 | |
21735 |
|
21736 |
|
21737 | focused: propTypes.bool,
|
21738 |
|
21739 | |
21740 |
|
21741 |
|
21742 | required: propTypes.bool
|
21743 | } ;
|
21744 | var FormLabel$1 = withStyles$1(styles$T, {
|
21745 | name: 'MuiFormLabel'
|
21746 | })(FormLabel);
|
21747 |
|
21748 | var SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
21749 | var GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
21750 |
|
21751 | function generateGrid(globalStyles, theme, breakpoint) {
|
21752 | var styles = {};
|
21753 | GRID_SIZES.forEach(function (size) {
|
21754 | var key = "grid-".concat(breakpoint, "-").concat(size);
|
21755 |
|
21756 | if (size === true) {
|
21757 |
|
21758 | styles[key] = {
|
21759 | flexBasis: 0,
|
21760 | flexGrow: 1,
|
21761 | maxWidth: '100%'
|
21762 | };
|
21763 | return;
|
21764 | }
|
21765 |
|
21766 | if (size === 'auto') {
|
21767 | styles[key] = {
|
21768 | flexBasis: 'auto',
|
21769 | flexGrow: 0,
|
21770 | maxWidth: 'none'
|
21771 | };
|
21772 | return;
|
21773 | }
|
21774 |
|
21775 |
|
21776 | var width = "".concat(Math.round(size / 12 * 10e7) / 10e5, "%");
|
21777 |
|
21778 |
|
21779 | styles[key] = {
|
21780 | flexBasis: width,
|
21781 | flexGrow: 0,
|
21782 | maxWidth: width
|
21783 | };
|
21784 | });
|
21785 |
|
21786 | if (breakpoint === 'xs') {
|
21787 | _extends(globalStyles, styles);
|
21788 | } else {
|
21789 | globalStyles[theme.breakpoints.up(breakpoint)] = styles;
|
21790 | }
|
21791 | }
|
21792 |
|
21793 | function getOffset(val) {
|
21794 | var div = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
|
21795 | var parse = parseFloat(val);
|
21796 | return "".concat(parse / div).concat(String(val).replace(String(parse), '') || 'px');
|
21797 | }
|
21798 |
|
21799 | function generateGutter(theme, breakpoint) {
|
21800 | var styles = {};
|
21801 | SPACINGS.forEach(function (spacing) {
|
21802 | var themeSpacing = theme.spacing(spacing);
|
21803 |
|
21804 | if (themeSpacing === 0) {
|
21805 | return;
|
21806 | }
|
21807 |
|
21808 | styles["spacing-".concat(breakpoint, "-").concat(spacing)] = {
|
21809 | margin: "-".concat(getOffset(themeSpacing, 2)),
|
21810 | width: "calc(100% + ".concat(getOffset(themeSpacing), ")"),
|
21811 | '& > $item': {
|
21812 | padding: getOffset(themeSpacing, 2)
|
21813 | }
|
21814 | };
|
21815 | });
|
21816 | return styles;
|
21817 | }
|
21818 |
|
21819 |
|
21820 |
|
21821 |
|
21822 |
|
21823 |
|
21824 |
|
21825 | var styles$U = function styles(theme) {
|
21826 | return _extends({
|
21827 |
|
21828 | root: {},
|
21829 |
|
21830 |
|
21831 | container: {
|
21832 | boxSizing: 'border-box',
|
21833 | display: 'flex',
|
21834 | flexWrap: 'wrap',
|
21835 | width: '100%'
|
21836 | },
|
21837 |
|
21838 |
|
21839 | item: {
|
21840 | boxSizing: 'border-box',
|
21841 | margin: '0'
|
21842 |
|
21843 | },
|
21844 |
|
21845 |
|
21846 | zeroMinWidth: {
|
21847 | minWidth: 0
|
21848 | },
|
21849 |
|
21850 |
|
21851 | 'direction-xs-column': {
|
21852 | flexDirection: 'column'
|
21853 | },
|
21854 |
|
21855 |
|
21856 | 'direction-xs-column-reverse': {
|
21857 | flexDirection: 'column-reverse'
|
21858 | },
|
21859 |
|
21860 |
|
21861 | 'direction-xs-row-reverse': {
|
21862 | flexDirection: 'row-reverse'
|
21863 | },
|
21864 |
|
21865 |
|
21866 | 'wrap-xs-nowrap': {
|
21867 | flexWrap: 'nowrap'
|
21868 | },
|
21869 |
|
21870 |
|
21871 | 'wrap-xs-wrap-reverse': {
|
21872 | flexWrap: 'wrap-reverse'
|
21873 | },
|
21874 |
|
21875 |
|
21876 | 'align-items-xs-center': {
|
21877 | alignItems: 'center'
|
21878 | },
|
21879 |
|
21880 |
|
21881 | 'align-items-xs-flex-start': {
|
21882 | alignItems: 'flex-start'
|
21883 | },
|
21884 |
|
21885 |
|
21886 | 'align-items-xs-flex-end': {
|
21887 | alignItems: 'flex-end'
|
21888 | },
|
21889 |
|
21890 |
|
21891 | 'align-items-xs-baseline': {
|
21892 | alignItems: 'baseline'
|
21893 | },
|
21894 |
|
21895 |
|
21896 | 'align-content-xs-center': {
|
21897 | alignContent: 'center'
|
21898 | },
|
21899 |
|
21900 |
|
21901 | 'align-content-xs-flex-start': {
|
21902 | alignContent: 'flex-start'
|
21903 | },
|
21904 |
|
21905 |
|
21906 | 'align-content-xs-flex-end': {
|
21907 | alignContent: 'flex-end'
|
21908 | },
|
21909 |
|
21910 |
|
21911 | 'align-content-xs-space-between': {
|
21912 | alignContent: 'space-between'
|
21913 | },
|
21914 |
|
21915 |
|
21916 | 'align-content-xs-space-around': {
|
21917 | alignContent: 'space-around'
|
21918 | },
|
21919 |
|
21920 |
|
21921 | 'justify-content-xs-center': {
|
21922 | justifyContent: 'center'
|
21923 | },
|
21924 |
|
21925 |
|
21926 | 'justify-content-xs-flex-end': {
|
21927 | justifyContent: 'flex-end'
|
21928 | },
|
21929 |
|
21930 |
|
21931 | 'justify-content-xs-space-between': {
|
21932 | justifyContent: 'space-between'
|
21933 | },
|
21934 |
|
21935 |
|
21936 | 'justify-content-xs-space-around': {
|
21937 | justifyContent: 'space-around'
|
21938 | },
|
21939 |
|
21940 |
|
21941 | 'justify-content-xs-space-evenly': {
|
21942 | justifyContent: 'space-evenly'
|
21943 | }
|
21944 | }, generateGutter(theme, 'xs'), theme.breakpoints.keys.reduce(function (accumulator, key) {
|
21945 |
|
21946 | generateGrid(accumulator, theme, key);
|
21947 | return accumulator;
|
21948 | }, {}));
|
21949 | };
|
21950 | var Grid = React.forwardRef(function Grid(props, ref) {
|
21951 | var _props$alignContent = props.alignContent,
|
21952 | alignContent = _props$alignContent === void 0 ? 'stretch' : _props$alignContent,
|
21953 | _props$alignItems = props.alignItems,
|
21954 | alignItems = _props$alignItems === void 0 ? 'stretch' : _props$alignItems,
|
21955 | classes = props.classes,
|
21956 | classNameProp = props.className,
|
21957 | _props$component = props.component,
|
21958 | Component = _props$component === void 0 ? 'div' : _props$component,
|
21959 | _props$container = props.container,
|
21960 | container = _props$container === void 0 ? false : _props$container,
|
21961 | _props$direction = props.direction,
|
21962 | direction = _props$direction === void 0 ? 'row' : _props$direction,
|
21963 | _props$item = props.item,
|
21964 | item = _props$item === void 0 ? false : _props$item,
|
21965 | justify = props.justify,
|
21966 | _props$justifyContent = props.justifyContent,
|
21967 | justifyContent = _props$justifyContent === void 0 ? 'flex-start' : _props$justifyContent,
|
21968 | _props$lg = props.lg,
|
21969 | lg = _props$lg === void 0 ? false : _props$lg,
|
21970 | _props$md = props.md,
|
21971 | md = _props$md === void 0 ? false : _props$md,
|
21972 | _props$sm = props.sm,
|
21973 | sm = _props$sm === void 0 ? false : _props$sm,
|
21974 | _props$spacing = props.spacing,
|
21975 | spacing = _props$spacing === void 0 ? 0 : _props$spacing,
|
21976 | _props$wrap = props.wrap,
|
21977 | wrap = _props$wrap === void 0 ? 'wrap' : _props$wrap,
|
21978 | _props$xl = props.xl,
|
21979 | xl = _props$xl === void 0 ? false : _props$xl,
|
21980 | _props$xs = props.xs,
|
21981 | xs = _props$xs === void 0 ? false : _props$xs,
|
21982 | _props$zeroMinWidth = props.zeroMinWidth,
|
21983 | zeroMinWidth = _props$zeroMinWidth === void 0 ? false : _props$zeroMinWidth,
|
21984 | other = _objectWithoutProperties(props, ["alignContent", "alignItems", "classes", "className", "component", "container", "direction", "item", "justify", "justifyContent", "lg", "md", "sm", "spacing", "wrap", "xl", "xs", "zeroMinWidth"]);
|
21985 |
|
21986 | 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 || justifyContent) !== 'flex-start' && classes["justify-content-xs-".concat(String(justify || justifyContent))], 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))]);
|
21987 | return React.createElement(Component, _extends({
|
21988 | className: className,
|
21989 | ref: ref
|
21990 | }, other));
|
21991 | });
|
21992 | Grid.propTypes = {
|
21993 | |
21994 |
|
21995 |
|
21996 |
|
21997 | alignContent: propTypes.oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around']),
|
21998 |
|
21999 | |
22000 |
|
22001 |
|
22002 |
|
22003 | alignItems: propTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
|
22004 |
|
22005 | |
22006 |
|
22007 |
|
22008 | children: propTypes.node,
|
22009 |
|
22010 | |
22011 |
|
22012 |
|
22013 |
|
22014 | classes: propTypes.object.isRequired,
|
22015 |
|
22016 | |
22017 |
|
22018 |
|
22019 | className: propTypes.string,
|
22020 |
|
22021 | |
22022 |
|
22023 |
|
22024 |
|
22025 | component: propTypes
|
22026 |
|
22027 | .elementType,
|
22028 |
|
22029 | |
22030 |
|
22031 |
|
22032 |
|
22033 | container: propTypes.bool,
|
22034 |
|
22035 | |
22036 |
|
22037 |
|
22038 |
|
22039 | direction: propTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
|
22040 |
|
22041 | |
22042 |
|
22043 |
|
22044 |
|
22045 | item: propTypes.bool,
|
22046 |
|
22047 | |
22048 |
|
22049 |
|
22050 |
|
22051 |
|
22052 | justify: deprecatedPropType(propTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly']), 'Use `justifyContent` instead, the prop was renamed.'),
|
22053 |
|
22054 | |
22055 |
|
22056 |
|
22057 |
|
22058 | justifyContent: propTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly']),
|
22059 |
|
22060 | |
22061 |
|
22062 |
|
22063 |
|
22064 | lg: propTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
22065 |
|
22066 | |
22067 |
|
22068 |
|
22069 |
|
22070 | md: propTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
22071 |
|
22072 | |
22073 |
|
22074 |
|
22075 |
|
22076 | sm: propTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
22077 |
|
22078 | |
22079 |
|
22080 |
|
22081 |
|
22082 | spacing: propTypes.oneOf(SPACINGS),
|
22083 |
|
22084 | |
22085 |
|
22086 |
|
22087 |
|
22088 | wrap: propTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
|
22089 |
|
22090 | |
22091 |
|
22092 |
|
22093 |
|
22094 | xl: propTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
22095 |
|
22096 | |
22097 |
|
22098 |
|
22099 |
|
22100 | xs: propTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
|
22101 |
|
22102 | |
22103 |
|
22104 |
|
22105 |
|
22106 | zeroMinWidth: propTypes.bool
|
22107 | } ;
|
22108 | var StyledGrid = withStyles$1(styles$U, {
|
22109 | name: 'MuiGrid'
|
22110 | })(Grid);
|
22111 |
|
22112 | {
|
22113 | var requireProp = requirePropFactory('Grid');
|
22114 | StyledGrid.propTypes = _extends({}, StyledGrid.propTypes, {
|
22115 | alignContent: requireProp('container'),
|
22116 | alignItems: requireProp('container'),
|
22117 | direction: requireProp('container'),
|
22118 | justifyContent: requireProp('container'),
|
22119 | lg: requireProp('item'),
|
22120 | md: requireProp('item'),
|
22121 | sm: requireProp('item'),
|
22122 | spacing: requireProp('container'),
|
22123 | wrap: requireProp('container'),
|
22124 | xs: requireProp('item'),
|
22125 | zeroMinWidth: requireProp('item')
|
22126 | });
|
22127 | }
|
22128 |
|
22129 | var styles$V = {
|
22130 |
|
22131 | root: {
|
22132 | display: 'flex',
|
22133 | flexWrap: 'wrap',
|
22134 | overflowY: 'auto',
|
22135 | listStyle: 'none',
|
22136 | padding: 0,
|
22137 | WebkitOverflowScrolling: 'touch'
|
22138 |
|
22139 | }
|
22140 | };
|
22141 | var warnedOnce$8 = false;
|
22142 | |
22143 |
|
22144 |
|
22145 |
|
22146 |
|
22147 |
|
22148 |
|
22149 | var GridList = React.forwardRef(function GridList(props, ref) {
|
22150 | {
|
22151 | if (!warnedOnce$8) {
|
22152 | warnedOnce$8 = true;
|
22153 | console.error(['Material-UI: The GridList component was renamed to ImageList to align with the current Material Design naming.', '', "You should use `import { ImageList } from '@material-ui/core'`", "or `import ImageList from '@material-ui/core/ImageList'`."].join('\n'));
|
22154 | }
|
22155 | }
|
22156 |
|
22157 | var _props$cellHeight = props.cellHeight,
|
22158 | cellHeight = _props$cellHeight === void 0 ? 180 : _props$cellHeight,
|
22159 | children = props.children,
|
22160 | classes = props.classes,
|
22161 | className = props.className,
|
22162 | _props$cols = props.cols,
|
22163 | cols = _props$cols === void 0 ? 2 : _props$cols,
|
22164 | _props$component = props.component,
|
22165 | Component = _props$component === void 0 ? 'ul' : _props$component,
|
22166 | _props$spacing = props.spacing,
|
22167 | spacing = _props$spacing === void 0 ? 4 : _props$spacing,
|
22168 | style = props.style,
|
22169 | other = _objectWithoutProperties(props, ["cellHeight", "children", "classes", "className", "cols", "component", "spacing", "style"]);
|
22170 |
|
22171 | return React.createElement(Component, _extends({
|
22172 | className: clsx(classes.root, className),
|
22173 | ref: ref,
|
22174 | style: _extends({
|
22175 | margin: -spacing / 2
|
22176 | }, style)
|
22177 | }, other), React.Children.map(children, function (child) {
|
22178 | if (! React.isValidElement(child)) {
|
22179 | return null;
|
22180 | }
|
22181 |
|
22182 | {
|
22183 | if (reactIs_2(child)) {
|
22184 | console.error(["Material-UI: The GridList component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
22185 | }
|
22186 | }
|
22187 |
|
22188 | var childCols = child.props.cols || 1;
|
22189 | var childRows = child.props.rows || 1;
|
22190 | return React.cloneElement(child, {
|
22191 | style: _extends({
|
22192 | width: "".concat(100 / cols * childCols, "%"),
|
22193 | height: cellHeight === 'auto' ? 'auto' : cellHeight * childRows + spacing,
|
22194 | padding: spacing / 2
|
22195 | }, child.props.style)
|
22196 | });
|
22197 | }));
|
22198 | });
|
22199 | GridList.propTypes = {
|
22200 | |
22201 |
|
22202 |
|
22203 |
|
22204 | cellHeight: propTypes.oneOfType([propTypes.number, propTypes.oneOf(['auto'])]),
|
22205 |
|
22206 | |
22207 |
|
22208 |
|
22209 | children: propTypes.node.isRequired,
|
22210 |
|
22211 | |
22212 |
|
22213 |
|
22214 |
|
22215 | classes: propTypes.object.isRequired,
|
22216 |
|
22217 | |
22218 |
|
22219 |
|
22220 | className: propTypes.string,
|
22221 |
|
22222 | |
22223 |
|
22224 |
|
22225 | cols: propTypes.number,
|
22226 |
|
22227 | |
22228 |
|
22229 |
|
22230 |
|
22231 | component: propTypes
|
22232 |
|
22233 | .elementType,
|
22234 |
|
22235 | |
22236 |
|
22237 |
|
22238 | spacing: propTypes.number,
|
22239 |
|
22240 | |
22241 |
|
22242 |
|
22243 | style: propTypes.object
|
22244 | } ;
|
22245 | var GridList$1 = withStyles$1(styles$V, {
|
22246 | name: 'MuiGridList'
|
22247 | })(GridList);
|
22248 |
|
22249 | var styles$W = {
|
22250 |
|
22251 | root: {
|
22252 | boxSizing: 'border-box',
|
22253 | flexShrink: 0
|
22254 | },
|
22255 |
|
22256 |
|
22257 | tile: {
|
22258 | position: 'relative',
|
22259 | display: 'block',
|
22260 |
|
22261 | height: '100%',
|
22262 | overflow: 'hidden'
|
22263 | },
|
22264 |
|
22265 |
|
22266 | imgFullHeight: {
|
22267 | height: '100%',
|
22268 | transform: 'translateX(-50%)',
|
22269 | position: 'relative',
|
22270 | left: '50%'
|
22271 | },
|
22272 |
|
22273 |
|
22274 | imgFullWidth: {
|
22275 | width: '100%',
|
22276 | position: 'relative',
|
22277 | transform: 'translateY(-50%)',
|
22278 | top: '50%'
|
22279 | }
|
22280 | };
|
22281 |
|
22282 | var fit = function fit(imgEl, classes) {
|
22283 | if (!imgEl || !imgEl.complete) {
|
22284 | return;
|
22285 | }
|
22286 |
|
22287 | if (imgEl.width / imgEl.height > imgEl.parentElement.offsetWidth / imgEl.parentElement.offsetHeight) {
|
22288 | var _imgEl$classList, _imgEl$classList2;
|
22289 |
|
22290 | (_imgEl$classList = imgEl.classList).remove.apply(_imgEl$classList, _toConsumableArray(classes.imgFullWidth.split(' ')));
|
22291 |
|
22292 | (_imgEl$classList2 = imgEl.classList).add.apply(_imgEl$classList2, _toConsumableArray(classes.imgFullHeight.split(' ')));
|
22293 | } else {
|
22294 | var _imgEl$classList3, _imgEl$classList4;
|
22295 |
|
22296 | (_imgEl$classList3 = imgEl.classList).remove.apply(_imgEl$classList3, _toConsumableArray(classes.imgFullHeight.split(' ')));
|
22297 |
|
22298 | (_imgEl$classList4 = imgEl.classList).add.apply(_imgEl$classList4, _toConsumableArray(classes.imgFullWidth.split(' ')));
|
22299 | }
|
22300 | };
|
22301 |
|
22302 | function ensureImageCover(imgEl, classes) {
|
22303 | if (!imgEl) {
|
22304 | return;
|
22305 | }
|
22306 |
|
22307 | if (imgEl.complete) {
|
22308 | fit(imgEl, classes);
|
22309 | } else {
|
22310 | imgEl.addEventListener('load', function () {
|
22311 | fit(imgEl, classes);
|
22312 | });
|
22313 | }
|
22314 | }
|
22315 |
|
22316 | var warnedOnce$9 = false;
|
22317 | |
22318 |
|
22319 |
|
22320 |
|
22321 |
|
22322 |
|
22323 |
|
22324 | var GridListTile = React.forwardRef(function GridListTile(props, ref) {
|
22325 | {
|
22326 | if (!warnedOnce$9) {
|
22327 | warnedOnce$9 = true;
|
22328 | console.error(['Material-UI: The GridListTile component was renamed to ImageListTile to align with the current Material Design naming.', '', "You should use `import { ImageListTile } from '@material-ui/core'`", "or `import ImageListTile from '@material-ui/core/ImageListTile'`."].join('\n'));
|
22329 | }
|
22330 | }
|
22331 |
|
22332 |
|
22333 | var children = props.children,
|
22334 | classes = props.classes,
|
22335 | className = props.className,
|
22336 | _props$cols = props.cols,
|
22337 | _props$component = props.component,
|
22338 | Component = _props$component === void 0 ? 'li' : _props$component,
|
22339 | _props$rows = props.rows,
|
22340 | other = _objectWithoutProperties(props, ["children", "classes", "className", "cols", "component", "rows"]);
|
22341 |
|
22342 | var imgRef = React.useRef(null);
|
22343 | React.useEffect(function () {
|
22344 | ensureImageCover(imgRef.current, classes);
|
22345 | });
|
22346 | React.useEffect(function () {
|
22347 | var handleResize = debounce(function () {
|
22348 | fit(imgRef.current, classes);
|
22349 | });
|
22350 | window.addEventListener('resize', handleResize);
|
22351 | return function () {
|
22352 | handleResize.clear();
|
22353 | window.removeEventListener('resize', handleResize);
|
22354 | };
|
22355 | }, [classes]);
|
22356 | return React.createElement(Component, _extends({
|
22357 | className: clsx(classes.root, className),
|
22358 | ref: ref
|
22359 | }, other), React.createElement("div", {
|
22360 | className: classes.tile
|
22361 | }, React.Children.map(children, function (child) {
|
22362 | if (! React.isValidElement(child)) {
|
22363 | return null;
|
22364 | }
|
22365 |
|
22366 | if (child.type === 'img' || isMuiElement(child, ['Image'])) {
|
22367 | return React.cloneElement(child, {
|
22368 | ref: imgRef
|
22369 | });
|
22370 | }
|
22371 |
|
22372 | return child;
|
22373 | })));
|
22374 | });
|
22375 | GridListTile.propTypes = {
|
22376 | |
22377 |
|
22378 |
|
22379 |
|
22380 |
|
22381 | children: propTypes.node,
|
22382 |
|
22383 | |
22384 |
|
22385 |
|
22386 |
|
22387 | classes: propTypes.object.isRequired,
|
22388 |
|
22389 | |
22390 |
|
22391 |
|
22392 | className: propTypes.string,
|
22393 |
|
22394 | |
22395 |
|
22396 |
|
22397 | cols: propTypes.number,
|
22398 |
|
22399 | |
22400 |
|
22401 |
|
22402 |
|
22403 | component: propTypes
|
22404 |
|
22405 | .elementType,
|
22406 |
|
22407 | |
22408 |
|
22409 |
|
22410 | rows: propTypes.number
|
22411 | } ;
|
22412 | var GridListTile$1 = withStyles$1(styles$W, {
|
22413 | name: 'MuiGridListTile'
|
22414 | })(GridListTile);
|
22415 |
|
22416 | var styles$X = function styles(theme) {
|
22417 | return {
|
22418 |
|
22419 | root: {
|
22420 | position: 'absolute',
|
22421 | left: 0,
|
22422 | right: 0,
|
22423 | height: 48,
|
22424 | background: 'rgba(0, 0, 0, 0.5)',
|
22425 | display: 'flex',
|
22426 | alignItems: 'center',
|
22427 | fontFamily: theme.typography.fontFamily
|
22428 | },
|
22429 |
|
22430 |
|
22431 | titlePositionBottom: {
|
22432 | bottom: 0
|
22433 | },
|
22434 |
|
22435 |
|
22436 | titlePositionTop: {
|
22437 | top: 0
|
22438 | },
|
22439 |
|
22440 |
|
22441 | rootSubtitle: {
|
22442 | height: 68
|
22443 | },
|
22444 |
|
22445 |
|
22446 | titleWrap: {
|
22447 | flexGrow: 1,
|
22448 | marginLeft: 16,
|
22449 | marginRight: 16,
|
22450 | color: theme.palette.common.white,
|
22451 | overflow: 'hidden'
|
22452 | },
|
22453 |
|
22454 |
|
22455 | titleWrapActionPosLeft: {
|
22456 | marginLeft: 0
|
22457 | },
|
22458 |
|
22459 |
|
22460 | titleWrapActionPosRight: {
|
22461 | marginRight: 0
|
22462 | },
|
22463 |
|
22464 |
|
22465 | title: {
|
22466 | fontSize: theme.typography.pxToRem(16),
|
22467 | lineHeight: '24px',
|
22468 | textOverflow: 'ellipsis',
|
22469 | overflow: 'hidden',
|
22470 | whiteSpace: 'nowrap'
|
22471 | },
|
22472 |
|
22473 |
|
22474 | subtitle: {
|
22475 | fontSize: theme.typography.pxToRem(12),
|
22476 | lineHeight: 1,
|
22477 | textOverflow: 'ellipsis',
|
22478 | overflow: 'hidden',
|
22479 | whiteSpace: 'nowrap'
|
22480 | },
|
22481 |
|
22482 |
|
22483 | actionIcon: {},
|
22484 |
|
22485 |
|
22486 | actionIconActionPosLeft: {
|
22487 | order: -1
|
22488 | }
|
22489 | };
|
22490 | };
|
22491 | var warnedOnce$a = false;
|
22492 | |
22493 |
|
22494 |
|
22495 |
|
22496 |
|
22497 |
|
22498 |
|
22499 | var GridListTileBar = React.forwardRef(function GridListTileBar(props, ref) {
|
22500 | {
|
22501 | if (!warnedOnce$a) {
|
22502 | warnedOnce$a = true;
|
22503 | console.error(['Material-UI: The GridListTileBar component was renamed to ImageListTileBar to align with the current Material Design naming.', '', "You should use `import { ImageListTileBar } from '@material-ui/core'`", "or `import ImageListTileBar from '@material-ui/core/ImageListTileBar'`."].join('\n'));
|
22504 | }
|
22505 | }
|
22506 |
|
22507 | var actionIcon = props.actionIcon,
|
22508 | _props$actionPosition = props.actionPosition,
|
22509 | actionPosition = _props$actionPosition === void 0 ? 'right' : _props$actionPosition,
|
22510 | classes = props.classes,
|
22511 | className = props.className,
|
22512 | subtitle = props.subtitle,
|
22513 | title = props.title,
|
22514 | _props$titlePosition = props.titlePosition,
|
22515 | titlePosition = _props$titlePosition === void 0 ? 'bottom' : _props$titlePosition,
|
22516 | other = _objectWithoutProperties(props, ["actionIcon", "actionPosition", "classes", "className", "subtitle", "title", "titlePosition"]);
|
22517 |
|
22518 | var actionPos = actionIcon && actionPosition;
|
22519 | return React.createElement("div", _extends({
|
22520 | className: clsx(classes.root, className, titlePosition === 'top' ? classes.titlePositionTop : classes.titlePositionBottom, subtitle && classes.rootSubtitle),
|
22521 | ref: ref
|
22522 | }, other), React.createElement("div", {
|
22523 | className: clsx(classes.titleWrap, {
|
22524 | 'left': classes.titleWrapActionPosLeft,
|
22525 | 'right': classes.titleWrapActionPosRight
|
22526 | }[actionPos])
|
22527 | }, React.createElement("div", {
|
22528 | className: classes.title
|
22529 | }, title), subtitle ? React.createElement("div", {
|
22530 | className: classes.subtitle
|
22531 | }, subtitle) : null), actionIcon ? React.createElement("div", {
|
22532 | className: clsx(classes.actionIcon, actionPos === 'left' && classes.actionIconActionPosLeft)
|
22533 | }, actionIcon) : null);
|
22534 | });
|
22535 | GridListTileBar.propTypes = {
|
22536 |
|
22537 |
|
22538 |
|
22539 |
|
22540 |
|
22541 | |
22542 |
|
22543 |
|
22544 |
|
22545 | actionIcon: propTypes.node,
|
22546 |
|
22547 | |
22548 |
|
22549 |
|
22550 | actionPosition: propTypes.oneOf(['left', 'right']),
|
22551 |
|
22552 | |
22553 |
|
22554 |
|
22555 |
|
22556 | classes: propTypes.object,
|
22557 |
|
22558 | |
22559 |
|
22560 |
|
22561 | className: propTypes.string,
|
22562 |
|
22563 | |
22564 |
|
22565 |
|
22566 | subtitle: propTypes.node,
|
22567 |
|
22568 | |
22569 |
|
22570 |
|
22571 | title: propTypes.node,
|
22572 |
|
22573 | |
22574 |
|
22575 |
|
22576 | titlePosition: propTypes.oneOf(['bottom', 'top'])
|
22577 | } ;
|
22578 | var GridListTileBar$1 = withStyles$1(styles$X, {
|
22579 | name: 'MuiGridListTileBar'
|
22580 | })(GridListTileBar);
|
22581 |
|
22582 | function getScale(value) {
|
22583 | return "scale(".concat(value, ", ").concat(Math.pow(value, 2), ")");
|
22584 | }
|
22585 |
|
22586 | var styles$Y = {
|
22587 | entering: {
|
22588 | opacity: 1,
|
22589 | transform: getScale(1)
|
22590 | },
|
22591 | entered: {
|
22592 | opacity: 1,
|
22593 | transform: 'none'
|
22594 | }
|
22595 | };
|
22596 | |
22597 |
|
22598 |
|
22599 |
|
22600 |
|
22601 |
|
22602 | var Grow = React.forwardRef(function Grow(props, ref) {
|
22603 | var children = props.children,
|
22604 | _props$disableStrictM = props.disableStrictModeCompat,
|
22605 | disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,
|
22606 | inProp = props.in,
|
22607 | onEnter = props.onEnter,
|
22608 | onEntered = props.onEntered,
|
22609 | onEntering = props.onEntering,
|
22610 | onExit = props.onExit,
|
22611 | onExited = props.onExited,
|
22612 | onExiting = props.onExiting,
|
22613 | style = props.style,
|
22614 | _props$timeout = props.timeout,
|
22615 | timeout = _props$timeout === void 0 ? 'auto' : _props$timeout,
|
22616 | _props$TransitionComp = props.TransitionComponent,
|
22617 | TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
|
22618 | other = _objectWithoutProperties(props, ["children", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
|
22619 |
|
22620 | var timer = React.useRef();
|
22621 | var autoTimeout = React.useRef();
|
22622 | var theme = useTheme$1();
|
22623 | var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
|
22624 | var nodeRef = React.useRef(null);
|
22625 | var foreignRef = useForkRef(children.ref, ref);
|
22626 | var handleRef = useForkRef(enableStrictModeCompat ? nodeRef : undefined, foreignRef);
|
22627 |
|
22628 | var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
|
22629 | return function (nodeOrAppearing, maybeAppearing) {
|
22630 | if (callback) {
|
22631 | var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],
|
22632 | _ref2 = _slicedToArray(_ref, 2),
|
22633 | node = _ref2[0],
|
22634 | isAppearing = _ref2[1];
|
22635 |
|
22636 |
|
22637 | if (isAppearing === undefined) {
|
22638 | callback(node);
|
22639 | } else {
|
22640 | callback(node, isAppearing);
|
22641 | }
|
22642 | }
|
22643 | };
|
22644 | };
|
22645 |
|
22646 | var handleEntering = normalizedTransitionCallback(onEntering);
|
22647 | var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
|
22648 | reflow(node);
|
22649 |
|
22650 | var _getTransitionProps = getTransitionProps({
|
22651 | style: style,
|
22652 | timeout: timeout
|
22653 | }, {
|
22654 | mode: 'enter'
|
22655 | }),
|
22656 | transitionDuration = _getTransitionProps.duration,
|
22657 | delay = _getTransitionProps.delay;
|
22658 |
|
22659 | var duration;
|
22660 |
|
22661 | if (timeout === 'auto') {
|
22662 | duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
|
22663 | autoTimeout.current = duration;
|
22664 | } else {
|
22665 | duration = transitionDuration;
|
22666 | }
|
22667 |
|
22668 | node.style.transition = [theme.transitions.create('opacity', {
|
22669 | duration: duration,
|
22670 | delay: delay
|
22671 | }), theme.transitions.create('transform', {
|
22672 | duration: duration * 0.666,
|
22673 | delay: delay
|
22674 | })].join(',');
|
22675 |
|
22676 | if (onEnter) {
|
22677 | onEnter(node, isAppearing);
|
22678 | }
|
22679 | });
|
22680 | var handleEntered = normalizedTransitionCallback(onEntered);
|
22681 | var handleExiting = normalizedTransitionCallback(onExiting);
|
22682 | var handleExit = normalizedTransitionCallback(function (node) {
|
22683 | var _getTransitionProps2 = getTransitionProps({
|
22684 | style: style,
|
22685 | timeout: timeout
|
22686 | }, {
|
22687 | mode: 'exit'
|
22688 | }),
|
22689 | transitionDuration = _getTransitionProps2.duration,
|
22690 | delay = _getTransitionProps2.delay;
|
22691 |
|
22692 | var duration;
|
22693 |
|
22694 | if (timeout === 'auto') {
|
22695 | duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
|
22696 | autoTimeout.current = duration;
|
22697 | } else {
|
22698 | duration = transitionDuration;
|
22699 | }
|
22700 |
|
22701 | node.style.transition = [theme.transitions.create('opacity', {
|
22702 | duration: duration,
|
22703 | delay: delay
|
22704 | }), theme.transitions.create('transform', {
|
22705 | duration: duration * 0.666,
|
22706 | delay: delay || duration * 0.333
|
22707 | })].join(',');
|
22708 | node.style.opacity = '0';
|
22709 | node.style.transform = getScale(0.75);
|
22710 |
|
22711 | if (onExit) {
|
22712 | onExit(node);
|
22713 | }
|
22714 | });
|
22715 | var handleExited = normalizedTransitionCallback(onExited);
|
22716 |
|
22717 | var addEndListener = function addEndListener(nodeOrNext, maybeNext) {
|
22718 | var next = enableStrictModeCompat ? nodeOrNext : maybeNext;
|
22719 |
|
22720 | if (timeout === 'auto') {
|
22721 | timer.current = setTimeout(next, autoTimeout.current || 0);
|
22722 | }
|
22723 | };
|
22724 |
|
22725 | React.useEffect(function () {
|
22726 | return function () {
|
22727 | clearTimeout(timer.current);
|
22728 | };
|
22729 | }, []);
|
22730 | return React.createElement(TransitionComponent, _extends({
|
22731 | appear: true,
|
22732 | in: inProp,
|
22733 | nodeRef: enableStrictModeCompat ? nodeRef : undefined,
|
22734 | onEnter: handleEnter,
|
22735 | onEntered: handleEntered,
|
22736 | onEntering: handleEntering,
|
22737 | onExit: handleExit,
|
22738 | onExited: handleExited,
|
22739 | onExiting: handleExiting,
|
22740 | addEndListener: addEndListener,
|
22741 | timeout: timeout === 'auto' ? null : timeout
|
22742 | }, other), function (state, childProps) {
|
22743 | return React.cloneElement(children, _extends({
|
22744 | style: _extends({
|
22745 | opacity: 0,
|
22746 | transform: getScale(0.75),
|
22747 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
22748 | }, styles$Y[state], style, children.props.style),
|
22749 | ref: handleRef
|
22750 | }, childProps));
|
22751 | });
|
22752 | });
|
22753 | Grow.propTypes = {
|
22754 |
|
22755 |
|
22756 |
|
22757 |
|
22758 |
|
22759 | |
22760 |
|
22761 |
|
22762 | children: propTypes.element,
|
22763 |
|
22764 | |
22765 |
|
22766 |
|
22767 |
|
22768 |
|
22769 | disableStrictModeCompat: propTypes.bool,
|
22770 |
|
22771 | |
22772 |
|
22773 |
|
22774 | in: propTypes.bool,
|
22775 |
|
22776 | |
22777 |
|
22778 |
|
22779 | onEnter: propTypes.func,
|
22780 |
|
22781 | |
22782 |
|
22783 |
|
22784 | onEntered: propTypes.func,
|
22785 |
|
22786 | |
22787 |
|
22788 |
|
22789 | onEntering: propTypes.func,
|
22790 |
|
22791 | |
22792 |
|
22793 |
|
22794 | onExit: propTypes.func,
|
22795 |
|
22796 | |
22797 |
|
22798 |
|
22799 | onExited: propTypes.func,
|
22800 |
|
22801 | |
22802 |
|
22803 |
|
22804 | onExiting: propTypes.func,
|
22805 |
|
22806 | |
22807 |
|
22808 |
|
22809 | style: propTypes.object,
|
22810 |
|
22811 | |
22812 |
|
22813 |
|
22814 |
|
22815 |
|
22816 |
|
22817 | timeout: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.shape({
|
22818 | appear: propTypes.number,
|
22819 | enter: propTypes.number,
|
22820 | exit: propTypes.number
|
22821 | })])
|
22822 | } ;
|
22823 | Grow.muiSupportAuto = true;
|
22824 |
|
22825 | function useMediaQuery(queryInput) {
|
22826 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
22827 | var theme = useTheme();
|
22828 | var props = getThemeProps({
|
22829 | theme: theme,
|
22830 | name: 'MuiUseMediaQuery',
|
22831 | props: {}
|
22832 | });
|
22833 |
|
22834 | {
|
22835 | if (typeof queryInput === 'function' && theme === null) {
|
22836 | 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'));
|
22837 | }
|
22838 | }
|
22839 |
|
22840 | var query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
|
22841 | query = query.replace(/^@media( ?)/m, '');
|
22842 |
|
22843 |
|
22844 |
|
22845 |
|
22846 | var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
|
22847 |
|
22848 | var _props$options = _extends({}, props, options),
|
22849 | _props$options$defaul = _props$options.defaultMatches,
|
22850 | defaultMatches = _props$options$defaul === void 0 ? false : _props$options$defaul,
|
22851 | _props$options$matchM = _props$options.matchMedia,
|
22852 | matchMedia = _props$options$matchM === void 0 ? supportMatchMedia ? window.matchMedia : null : _props$options$matchM,
|
22853 | _props$options$noSsr = _props$options.noSsr,
|
22854 | noSsr = _props$options$noSsr === void 0 ? false : _props$options$noSsr,
|
22855 | _props$options$ssrMat = _props$options.ssrMatchMedia,
|
22856 | ssrMatchMedia = _props$options$ssrMat === void 0 ? null : _props$options$ssrMat;
|
22857 |
|
22858 | var _React$useState = React.useState(function () {
|
22859 | if (noSsr && supportMatchMedia) {
|
22860 | return matchMedia(query).matches;
|
22861 | }
|
22862 |
|
22863 | if (ssrMatchMedia) {
|
22864 | return ssrMatchMedia(query).matches;
|
22865 | }
|
22866 |
|
22867 |
|
22868 |
|
22869 | return defaultMatches;
|
22870 | }),
|
22871 | match = _React$useState[0],
|
22872 | setMatch = _React$useState[1];
|
22873 |
|
22874 | React.useEffect(function () {
|
22875 | var active = true;
|
22876 |
|
22877 | if (!supportMatchMedia) {
|
22878 | return undefined;
|
22879 | }
|
22880 |
|
22881 | var queryList = matchMedia(query);
|
22882 |
|
22883 | var updateMatch = function updateMatch() {
|
22884 |
|
22885 |
|
22886 |
|
22887 | if (active) {
|
22888 | setMatch(queryList.matches);
|
22889 | }
|
22890 | };
|
22891 |
|
22892 | updateMatch();
|
22893 | queryList.addListener(updateMatch);
|
22894 | return function () {
|
22895 | active = false;
|
22896 | queryList.removeListener(updateMatch);
|
22897 | };
|
22898 | }, [query, matchMedia, supportMatchMedia]);
|
22899 |
|
22900 | {
|
22901 |
|
22902 | React.useDebugValue({
|
22903 | query: query,
|
22904 | match: match
|
22905 | });
|
22906 | }
|
22907 |
|
22908 | return match;
|
22909 | }
|
22910 |
|
22911 | var isWidthUp = function isWidthUp(breakpoint, width) {
|
22912 | var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
22913 |
|
22914 | if (inclusive) {
|
22915 | return keys.indexOf(breakpoint) <= keys.indexOf(width);
|
22916 | }
|
22917 |
|
22918 | return keys.indexOf(breakpoint) < keys.indexOf(width);
|
22919 | };
|
22920 |
|
22921 | var isWidthDown = function isWidthDown(breakpoint, width) {
|
22922 | var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
22923 |
|
22924 | if (inclusive) {
|
22925 | return keys.indexOf(width) <= keys.indexOf(breakpoint);
|
22926 | }
|
22927 |
|
22928 | return keys.indexOf(width) < keys.indexOf(breakpoint);
|
22929 | };
|
22930 | var useEnhancedEffect$5 = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
|
22931 |
|
22932 | var withWidth = function withWidth() {
|
22933 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
22934 | return function (Component) {
|
22935 | var _options$withTheme = options.withTheme,
|
22936 | withThemeOption = _options$withTheme === void 0 ? false : _options$withTheme,
|
22937 | _options$noSSR = options.noSSR,
|
22938 | noSSR = _options$noSSR === void 0 ? false : _options$noSSR,
|
22939 | initialWidthOption = options.initialWidth;
|
22940 |
|
22941 | function WithWidth(props) {
|
22942 | var contextTheme = useTheme$1();
|
22943 | var theme = props.theme || contextTheme;
|
22944 |
|
22945 | var _getThemeProps = getThemeProps({
|
22946 | theme: theme,
|
22947 | name: 'MuiWithWidth',
|
22948 | props: _extends({}, props)
|
22949 | }),
|
22950 | initialWidth = _getThemeProps.initialWidth,
|
22951 | width = _getThemeProps.width,
|
22952 | other = _objectWithoutProperties(_getThemeProps, ["initialWidth", "width"]);
|
22953 |
|
22954 | var _React$useState = React.useState(false),
|
22955 | mountedState = _React$useState[0],
|
22956 | setMountedState = _React$useState[1];
|
22957 |
|
22958 | useEnhancedEffect$5(function () {
|
22959 | setMountedState(true);
|
22960 | }, []);
|
22961 | |
22962 |
|
22963 |
|
22964 |
|
22965 |
|
22966 |
|
22967 | var keys = theme.breakpoints.keys.slice().reverse();
|
22968 | var widthComputed = keys.reduce(function (output, key) {
|
22969 |
|
22970 | var matches = useMediaQuery(theme.breakpoints.up(key));
|
22971 | return !output && matches ? key : output;
|
22972 | }, null);
|
22973 |
|
22974 | var more = _extends({
|
22975 | width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption
|
22976 | }, withThemeOption ? {
|
22977 | theme: theme
|
22978 | } : {}, other);
|
22979 |
|
22980 |
|
22981 |
|
22982 |
|
22983 |
|
22984 |
|
22985 |
|
22986 | if (more.width === undefined) {
|
22987 | return null;
|
22988 | }
|
22989 |
|
22990 | return React.createElement(Component, more);
|
22991 | }
|
22992 |
|
22993 | WithWidth.propTypes = {
|
22994 | |
22995 |
|
22996 |
|
22997 |
|
22998 |
|
22999 |
|
23000 |
|
23001 |
|
23002 |
|
23003 | initialWidth: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
|
23004 |
|
23005 | |
23006 |
|
23007 |
|
23008 | theme: propTypes.object,
|
23009 |
|
23010 | |
23011 |
|
23012 |
|
23013 | width: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
|
23014 | } ;
|
23015 |
|
23016 | {
|
23017 | WithWidth.displayName = "WithWidth(".concat(getDisplayName(Component), ")");
|
23018 | }
|
23019 |
|
23020 | hoistNonReactStatics_cjs(WithWidth, Component);
|
23021 | return WithWidth;
|
23022 | };
|
23023 | };
|
23024 |
|
23025 | |
23026 |
|
23027 |
|
23028 |
|
23029 | function HiddenJs(props) {
|
23030 | var children = props.children,
|
23031 | only = props.only,
|
23032 | width = props.width;
|
23033 | var theme = useTheme$1();
|
23034 | var visible = true;
|
23035 |
|
23036 | if (only) {
|
23037 | if (Array.isArray(only)) {
|
23038 | for (var i = 0; i < only.length; i += 1) {
|
23039 | var breakpoint = only[i];
|
23040 |
|
23041 | if (width === breakpoint) {
|
23042 | visible = false;
|
23043 | break;
|
23044 | }
|
23045 | }
|
23046 | } else if (only && width === only) {
|
23047 | visible = false;
|
23048 | }
|
23049 | }
|
23050 |
|
23051 |
|
23052 | if (visible) {
|
23053 |
|
23054 | for (var _i = 0; _i < theme.breakpoints.keys.length; _i += 1) {
|
23055 | var _breakpoint = theme.breakpoints.keys[_i];
|
23056 | var breakpointUp = props["".concat(_breakpoint, "Up")];
|
23057 | var breakpointDown = props["".concat(_breakpoint, "Down")];
|
23058 |
|
23059 | if (breakpointUp && isWidthUp(_breakpoint, width) || breakpointDown && isWidthDown(_breakpoint, width)) {
|
23060 | visible = false;
|
23061 | break;
|
23062 | }
|
23063 | }
|
23064 | }
|
23065 |
|
23066 | if (!visible) {
|
23067 | return null;
|
23068 | }
|
23069 |
|
23070 | return children;
|
23071 | }
|
23072 |
|
23073 | HiddenJs.propTypes = {
|
23074 | |
23075 |
|
23076 |
|
23077 | children: propTypes.node,
|
23078 |
|
23079 | |
23080 |
|
23081 |
|
23082 | className: propTypes.string,
|
23083 |
|
23084 | |
23085 |
|
23086 |
|
23087 |
|
23088 | implementation: propTypes.oneOf(['js', 'css']),
|
23089 |
|
23090 | |
23091 |
|
23092 |
|
23093 |
|
23094 |
|
23095 |
|
23096 |
|
23097 |
|
23098 |
|
23099 |
|
23100 |
|
23101 | initialWidth: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
|
23102 |
|
23103 | |
23104 |
|
23105 |
|
23106 | lgDown: propTypes.bool,
|
23107 |
|
23108 | |
23109 |
|
23110 |
|
23111 | lgUp: propTypes.bool,
|
23112 |
|
23113 | |
23114 |
|
23115 |
|
23116 | mdDown: propTypes.bool,
|
23117 |
|
23118 | |
23119 |
|
23120 |
|
23121 | mdUp: propTypes.bool,
|
23122 |
|
23123 | |
23124 |
|
23125 |
|
23126 | only: propTypes.oneOfType([propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), propTypes.arrayOf(propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
|
23127 |
|
23128 | |
23129 |
|
23130 |
|
23131 | smDown: propTypes.bool,
|
23132 |
|
23133 | |
23134 |
|
23135 |
|
23136 | smUp: propTypes.bool,
|
23137 |
|
23138 | |
23139 |
|
23140 |
|
23141 |
|
23142 | width: propTypes.string.isRequired,
|
23143 |
|
23144 | |
23145 |
|
23146 |
|
23147 | xlDown: propTypes.bool,
|
23148 |
|
23149 | |
23150 |
|
23151 |
|
23152 | xlUp: propTypes.bool,
|
23153 |
|
23154 | |
23155 |
|
23156 |
|
23157 | xsDown: propTypes.bool,
|
23158 |
|
23159 | |
23160 |
|
23161 |
|
23162 | xsUp: propTypes.bool
|
23163 | };
|
23164 |
|
23165 | {
|
23166 | HiddenJs.propTypes = exactProp(HiddenJs.propTypes);
|
23167 | }
|
23168 |
|
23169 | var HiddenJs$1 = withWidth()(HiddenJs);
|
23170 |
|
23171 | var styles$Z = function styles(theme) {
|
23172 | var hidden = {
|
23173 | display: 'none'
|
23174 | };
|
23175 | return theme.breakpoints.keys.reduce(function (acc, key) {
|
23176 | acc["only".concat(capitalize(key))] = _defineProperty({}, theme.breakpoints.only(key), hidden);
|
23177 | acc["".concat(key, "Up")] = _defineProperty({}, theme.breakpoints.up(key), hidden);
|
23178 | acc["".concat(key, "Down")] = _defineProperty({}, theme.breakpoints.down(key), hidden);
|
23179 | return acc;
|
23180 | }, {});
|
23181 | };
|
23182 | |
23183 |
|
23184 |
|
23185 |
|
23186 |
|
23187 | function HiddenCss(props) {
|
23188 | var children = props.children,
|
23189 | classes = props.classes,
|
23190 | className = props.className,
|
23191 | only = props.only,
|
23192 | other = _objectWithoutProperties(props, ["children", "classes", "className", "only"]);
|
23193 |
|
23194 | var theme = useTheme$1();
|
23195 |
|
23196 | {
|
23197 | var unknownProps = Object.keys(other).filter(function (propName) {
|
23198 | var isUndeclaredBreakpoint = !theme.breakpoints.keys.some(function (breakpoint) {
|
23199 | return "".concat(breakpoint, "Up") === propName || "".concat(breakpoint, "Down") === propName;
|
23200 | });
|
23201 | return isUndeclaredBreakpoint;
|
23202 | });
|
23203 |
|
23204 | if (unknownProps.length > 0) {
|
23205 | 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?"));
|
23206 | }
|
23207 | }
|
23208 |
|
23209 | var clsx = [];
|
23210 |
|
23211 | if (className) {
|
23212 | clsx.push(className);
|
23213 | }
|
23214 |
|
23215 | for (var i = 0; i < theme.breakpoints.keys.length; i += 1) {
|
23216 | var breakpoint = theme.breakpoints.keys[i];
|
23217 | var breakpointUp = props["".concat(breakpoint, "Up")];
|
23218 | var breakpointDown = props["".concat(breakpoint, "Down")];
|
23219 |
|
23220 | if (breakpointUp) {
|
23221 | clsx.push(classes["".concat(breakpoint, "Up")]);
|
23222 | }
|
23223 |
|
23224 | if (breakpointDown) {
|
23225 | clsx.push(classes["".concat(breakpoint, "Down")]);
|
23226 | }
|
23227 | }
|
23228 |
|
23229 | if (only) {
|
23230 | var onlyBreakpoints = Array.isArray(only) ? only : [only];
|
23231 | onlyBreakpoints.forEach(function (breakpoint) {
|
23232 | clsx.push(classes["only".concat(capitalize(breakpoint))]);
|
23233 | });
|
23234 | }
|
23235 |
|
23236 | return React.createElement("div", {
|
23237 | className: clsx.join(' ')
|
23238 | }, children);
|
23239 | }
|
23240 |
|
23241 | HiddenCss.propTypes = {
|
23242 | |
23243 |
|
23244 |
|
23245 | children: propTypes.node,
|
23246 |
|
23247 | |
23248 |
|
23249 |
|
23250 |
|
23251 | classes: propTypes.object.isRequired,
|
23252 |
|
23253 | |
23254 |
|
23255 |
|
23256 | className: propTypes.string,
|
23257 |
|
23258 | |
23259 |
|
23260 |
|
23261 |
|
23262 | implementation: propTypes.oneOf(['js', 'css']),
|
23263 |
|
23264 | |
23265 |
|
23266 |
|
23267 | lgDown: propTypes.bool,
|
23268 |
|
23269 | |
23270 |
|
23271 |
|
23272 | lgUp: propTypes.bool,
|
23273 |
|
23274 | |
23275 |
|
23276 |
|
23277 | mdDown: propTypes.bool,
|
23278 |
|
23279 | |
23280 |
|
23281 |
|
23282 | mdUp: propTypes.bool,
|
23283 |
|
23284 | |
23285 |
|
23286 |
|
23287 | only: propTypes.oneOfType([propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), propTypes.arrayOf(propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
|
23288 |
|
23289 | |
23290 |
|
23291 |
|
23292 | smDown: propTypes.bool,
|
23293 |
|
23294 | |
23295 |
|
23296 |
|
23297 | smUp: propTypes.bool,
|
23298 |
|
23299 | |
23300 |
|
23301 |
|
23302 | xlDown: propTypes.bool,
|
23303 |
|
23304 | |
23305 |
|
23306 |
|
23307 | xlUp: propTypes.bool,
|
23308 |
|
23309 | |
23310 |
|
23311 |
|
23312 | xsDown: propTypes.bool,
|
23313 |
|
23314 | |
23315 |
|
23316 |
|
23317 | xsUp: propTypes.bool
|
23318 | } ;
|
23319 | var HiddenCss$1 = withStyles$1(styles$Z, {
|
23320 | name: 'PrivateHiddenCss'
|
23321 | })(HiddenCss);
|
23322 |
|
23323 | |
23324 |
|
23325 |
|
23326 |
|
23327 | function Hidden(props) {
|
23328 | var _props$implementation = props.implementation,
|
23329 | implementation = _props$implementation === void 0 ? 'js' : _props$implementation,
|
23330 | _props$lgDown = props.lgDown,
|
23331 | lgDown = _props$lgDown === void 0 ? false : _props$lgDown,
|
23332 | _props$lgUp = props.lgUp,
|
23333 | lgUp = _props$lgUp === void 0 ? false : _props$lgUp,
|
23334 | _props$mdDown = props.mdDown,
|
23335 | mdDown = _props$mdDown === void 0 ? false : _props$mdDown,
|
23336 | _props$mdUp = props.mdUp,
|
23337 | mdUp = _props$mdUp === void 0 ? false : _props$mdUp,
|
23338 | _props$smDown = props.smDown,
|
23339 | smDown = _props$smDown === void 0 ? false : _props$smDown,
|
23340 | _props$smUp = props.smUp,
|
23341 | smUp = _props$smUp === void 0 ? false : _props$smUp,
|
23342 | _props$xlDown = props.xlDown,
|
23343 | xlDown = _props$xlDown === void 0 ? false : _props$xlDown,
|
23344 | _props$xlUp = props.xlUp,
|
23345 | xlUp = _props$xlUp === void 0 ? false : _props$xlUp,
|
23346 | _props$xsDown = props.xsDown,
|
23347 | xsDown = _props$xsDown === void 0 ? false : _props$xsDown,
|
23348 | _props$xsUp = props.xsUp,
|
23349 | xsUp = _props$xsUp === void 0 ? false : _props$xsUp,
|
23350 | other = _objectWithoutProperties(props, ["implementation", "lgDown", "lgUp", "mdDown", "mdUp", "smDown", "smUp", "xlDown", "xlUp", "xsDown", "xsUp"]);
|
23351 |
|
23352 | if (implementation === 'js') {
|
23353 | return React.createElement(HiddenJs$1, _extends({
|
23354 | lgDown: lgDown,
|
23355 | lgUp: lgUp,
|
23356 | mdDown: mdDown,
|
23357 | mdUp: mdUp,
|
23358 | smDown: smDown,
|
23359 | smUp: smUp,
|
23360 | xlDown: xlDown,
|
23361 | xlUp: xlUp,
|
23362 | xsDown: xsDown,
|
23363 | xsUp: xsUp
|
23364 | }, other));
|
23365 | }
|
23366 |
|
23367 | return React.createElement(HiddenCss$1, _extends({
|
23368 | lgDown: lgDown,
|
23369 | lgUp: lgUp,
|
23370 | mdDown: mdDown,
|
23371 | mdUp: mdUp,
|
23372 | smDown: smDown,
|
23373 | smUp: smUp,
|
23374 | xlDown: xlDown,
|
23375 | xlUp: xlUp,
|
23376 | xsDown: xsDown,
|
23377 | xsUp: xsUp
|
23378 | }, other));
|
23379 | }
|
23380 |
|
23381 | Hidden.propTypes = {
|
23382 | |
23383 |
|
23384 |
|
23385 | children: propTypes.node,
|
23386 |
|
23387 | |
23388 |
|
23389 |
|
23390 | className: propTypes.string,
|
23391 |
|
23392 | |
23393 |
|
23394 |
|
23395 |
|
23396 | implementation: propTypes.oneOf(['js', 'css']),
|
23397 |
|
23398 | |
23399 |
|
23400 |
|
23401 |
|
23402 |
|
23403 |
|
23404 |
|
23405 |
|
23406 |
|
23407 |
|
23408 |
|
23409 | initialWidth: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
|
23410 |
|
23411 | |
23412 |
|
23413 |
|
23414 | lgDown: propTypes.bool,
|
23415 |
|
23416 | |
23417 |
|
23418 |
|
23419 | lgUp: propTypes.bool,
|
23420 |
|
23421 | |
23422 |
|
23423 |
|
23424 | mdDown: propTypes.bool,
|
23425 |
|
23426 | |
23427 |
|
23428 |
|
23429 | mdUp: propTypes.bool,
|
23430 |
|
23431 | |
23432 |
|
23433 |
|
23434 | only: propTypes.oneOfType([propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), propTypes.arrayOf(propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
|
23435 |
|
23436 | |
23437 |
|
23438 |
|
23439 | smDown: propTypes.bool,
|
23440 |
|
23441 | |
23442 |
|
23443 |
|
23444 | smUp: propTypes.bool,
|
23445 |
|
23446 | |
23447 |
|
23448 |
|
23449 | xlDown: propTypes.bool,
|
23450 |
|
23451 | |
23452 |
|
23453 |
|
23454 | xlUp: propTypes.bool,
|
23455 |
|
23456 | |
23457 |
|
23458 |
|
23459 | xsDown: propTypes.bool,
|
23460 |
|
23461 | |
23462 |
|
23463 |
|
23464 | xsUp: propTypes.bool
|
23465 | } ;
|
23466 |
|
23467 | var styles$_ = function styles(theme) {
|
23468 | return {
|
23469 |
|
23470 | root: {
|
23471 | userSelect: 'none',
|
23472 | fontSize: theme.typography.pxToRem(24),
|
23473 | width: '1em',
|
23474 | height: '1em',
|
23475 |
|
23476 |
|
23477 | overflow: 'hidden',
|
23478 | flexShrink: 0
|
23479 | },
|
23480 |
|
23481 |
|
23482 | colorPrimary: {
|
23483 | color: theme.palette.primary.main
|
23484 | },
|
23485 |
|
23486 |
|
23487 | colorSecondary: {
|
23488 | color: theme.palette.secondary.main
|
23489 | },
|
23490 |
|
23491 |
|
23492 | colorAction: {
|
23493 | color: theme.palette.action.active
|
23494 | },
|
23495 |
|
23496 |
|
23497 | colorError: {
|
23498 | color: theme.palette.error.main
|
23499 | },
|
23500 |
|
23501 |
|
23502 | colorDisabled: {
|
23503 | color: theme.palette.action.disabled
|
23504 | },
|
23505 |
|
23506 |
|
23507 | fontSizeInherit: {
|
23508 | fontSize: 'inherit'
|
23509 | },
|
23510 |
|
23511 |
|
23512 | fontSizeSmall: {
|
23513 | fontSize: theme.typography.pxToRem(20)
|
23514 | },
|
23515 |
|
23516 |
|
23517 | fontSizeLarge: {
|
23518 | fontSize: theme.typography.pxToRem(36)
|
23519 | }
|
23520 | };
|
23521 | };
|
23522 | var Icon = React.forwardRef(function Icon(props, ref) {
|
23523 | var classes = props.classes,
|
23524 | className = props.className,
|
23525 | _props$color = props.color,
|
23526 | color = _props$color === void 0 ? 'inherit' : _props$color,
|
23527 | _props$component = props.component,
|
23528 | Component = _props$component === void 0 ? 'span' : _props$component,
|
23529 | _props$fontSize = props.fontSize,
|
23530 | fontSize = _props$fontSize === void 0 ? 'medium' : _props$fontSize,
|
23531 | other = _objectWithoutProperties(props, ["classes", "className", "color", "component", "fontSize"]);
|
23532 |
|
23533 | return React.createElement(Component, _extends({
|
23534 | className: clsx('material-icons', classes.root, className, color !== 'inherit' && classes["color".concat(capitalize(color))], fontSize !== 'default' && fontSize !== 'medium' && classes["fontSize".concat(capitalize(fontSize))]),
|
23535 | "aria-hidden": true,
|
23536 | ref: ref
|
23537 | }, other));
|
23538 | });
|
23539 | Icon.propTypes = {
|
23540 | |
23541 |
|
23542 |
|
23543 | children: propTypes.node,
|
23544 |
|
23545 | |
23546 |
|
23547 |
|
23548 |
|
23549 | classes: propTypes.object.isRequired,
|
23550 |
|
23551 | |
23552 |
|
23553 |
|
23554 | className: propTypes.string,
|
23555 |
|
23556 | |
23557 |
|
23558 |
|
23559 | color: propTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled']),
|
23560 |
|
23561 | |
23562 |
|
23563 |
|
23564 |
|
23565 | component: propTypes
|
23566 |
|
23567 | .elementType,
|
23568 |
|
23569 | |
23570 |
|
23571 |
|
23572 | fontSize: chainPropTypes(propTypes.oneOf(['default', 'inherit', 'large', 'medium', 'small']), function (props) {
|
23573 | var fontSize = props.fontSize;
|
23574 |
|
23575 | if (fontSize === 'default') {
|
23576 | throw new Error('Material-UI: `fontSize="default"` is deprecated. Use `fontSize="medium"` instead.');
|
23577 | }
|
23578 |
|
23579 | return null;
|
23580 | })
|
23581 | } ;
|
23582 | Icon.muiName = 'Icon';
|
23583 | var Icon$1 = withStyles$1(styles$_, {
|
23584 | name: 'MuiIcon'
|
23585 | })(Icon);
|
23586 |
|
23587 | var styles$$ = {
|
23588 |
|
23589 | root: {
|
23590 | display: 'flex',
|
23591 | flexWrap: 'wrap',
|
23592 | overflowY: 'auto',
|
23593 | listStyle: 'none',
|
23594 | padding: 0,
|
23595 | WebkitOverflowScrolling: 'touch'
|
23596 |
|
23597 | }
|
23598 | };
|
23599 | var ImageList = React.forwardRef(function ImageList(props, ref) {
|
23600 | var cellHeight = props.cellHeight,
|
23601 | children = props.children,
|
23602 | classes = props.classes,
|
23603 | className = props.className,
|
23604 | _props$cols = props.cols,
|
23605 | cols = _props$cols === void 0 ? 2 : _props$cols,
|
23606 | _props$component = props.component,
|
23607 | Component = _props$component === void 0 ? 'ul' : _props$component,
|
23608 | _props$gap = props.gap,
|
23609 | gapProp = _props$gap === void 0 ? 4 : _props$gap,
|
23610 | _props$rowHeight = props.rowHeight,
|
23611 | rowHeightProp = _props$rowHeight === void 0 ? 180 : _props$rowHeight,
|
23612 | spacing = props.spacing,
|
23613 | style = props.style,
|
23614 | other = _objectWithoutProperties(props, ["cellHeight", "children", "classes", "className", "cols", "component", "gap", "rowHeight", "spacing", "style"]);
|
23615 |
|
23616 | var gap = spacing || gapProp;
|
23617 | var rowHeight = cellHeight || rowHeightProp;
|
23618 | return React.createElement(Component, _extends({
|
23619 | className: clsx(classes.root, className),
|
23620 | ref: ref,
|
23621 | style: _extends({
|
23622 | margin: -gap / 2
|
23623 | }, style)
|
23624 | }, other), React.Children.map(children, function (child) {
|
23625 | if (! React.isValidElement(child)) {
|
23626 | return null;
|
23627 | }
|
23628 |
|
23629 | {
|
23630 | if (reactIs_2(child)) {
|
23631 | console.error(["Material-UI: The ImageList component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
23632 | }
|
23633 | }
|
23634 |
|
23635 | var childCols = child.props.cols || 1;
|
23636 | var childRows = child.props.rows || 1;
|
23637 | return React.cloneElement(child, {
|
23638 | style: _extends({
|
23639 | width: "".concat(100 / cols * childCols, "%"),
|
23640 | height: rowHeight === 'auto' ? 'auto' : rowHeight * childRows + gap,
|
23641 | padding: gap / 2
|
23642 | }, child.props.style)
|
23643 | });
|
23644 | }));
|
23645 | });
|
23646 | ImageList.propTypes = {
|
23647 |
|
23648 |
|
23649 |
|
23650 |
|
23651 |
|
23652 | |
23653 |
|
23654 |
|
23655 |
|
23656 |
|
23657 | cellHeight: deprecatedPropType(propTypes.oneOfType([propTypes.number, propTypes.oneOf(['auto'])]), 'Use the `rowHeight` prop instead.'),
|
23658 |
|
23659 | |
23660 |
|
23661 |
|
23662 | children: propTypes.node,
|
23663 |
|
23664 | |
23665 |
|
23666 |
|
23667 |
|
23668 | classes: propTypes.object,
|
23669 |
|
23670 | |
23671 |
|
23672 |
|
23673 | className: propTypes.string,
|
23674 |
|
23675 | |
23676 |
|
23677 |
|
23678 | cols: propTypes.number,
|
23679 |
|
23680 | |
23681 |
|
23682 |
|
23683 |
|
23684 | component: propTypes
|
23685 |
|
23686 | .elementType,
|
23687 |
|
23688 | |
23689 |
|
23690 |
|
23691 | gap: propTypes.number,
|
23692 |
|
23693 | |
23694 |
|
23695 |
|
23696 | rowHeight: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number]),
|
23697 |
|
23698 | |
23699 |
|
23700 |
|
23701 |
|
23702 | spacing: deprecatedPropType(propTypes.number, 'Use the `gap` prop instead.'),
|
23703 |
|
23704 | |
23705 |
|
23706 |
|
23707 | style: propTypes.object
|
23708 | } ;
|
23709 | var ImageList$1 = withStyles$1(styles$$, {
|
23710 | name: 'MuiImageList'
|
23711 | })(ImageList);
|
23712 |
|
23713 | var styles$10 = {
|
23714 |
|
23715 | root: {
|
23716 | boxSizing: 'border-box',
|
23717 | flexShrink: 0
|
23718 | },
|
23719 |
|
23720 |
|
23721 | item: {
|
23722 | position: 'relative',
|
23723 | display: 'block',
|
23724 |
|
23725 | height: '100%',
|
23726 | overflow: 'hidden'
|
23727 | },
|
23728 |
|
23729 |
|
23730 | imgFullHeight: {
|
23731 | height: '100%',
|
23732 | transform: 'translateX(-50%)',
|
23733 | position: 'relative',
|
23734 | left: '50%'
|
23735 | },
|
23736 |
|
23737 |
|
23738 | imgFullWidth: {
|
23739 | width: '100%',
|
23740 | position: 'relative',
|
23741 | transform: 'translateY(-50%)',
|
23742 | top: '50%'
|
23743 | }
|
23744 | };
|
23745 |
|
23746 | var fit$1 = function fit(imgEl, classes) {
|
23747 | if (!imgEl || !imgEl.complete) {
|
23748 | return;
|
23749 | }
|
23750 |
|
23751 | if (imgEl.width / imgEl.height > imgEl.parentElement.offsetWidth / imgEl.parentElement.offsetHeight) {
|
23752 | var _imgEl$classList, _imgEl$classList2;
|
23753 |
|
23754 | (_imgEl$classList = imgEl.classList).remove.apply(_imgEl$classList, _toConsumableArray(classes.imgFullWidth.split(' ')));
|
23755 |
|
23756 | (_imgEl$classList2 = imgEl.classList).add.apply(_imgEl$classList2, _toConsumableArray(classes.imgFullHeight.split(' ')));
|
23757 | } else {
|
23758 | var _imgEl$classList3, _imgEl$classList4;
|
23759 |
|
23760 | (_imgEl$classList3 = imgEl.classList).remove.apply(_imgEl$classList3, _toConsumableArray(classes.imgFullHeight.split(' ')));
|
23761 |
|
23762 | (_imgEl$classList4 = imgEl.classList).add.apply(_imgEl$classList4, _toConsumableArray(classes.imgFullWidth.split(' ')));
|
23763 | }
|
23764 | };
|
23765 |
|
23766 | function ensureImageCover$1(imgEl, classes) {
|
23767 | if (!imgEl) {
|
23768 | return;
|
23769 | }
|
23770 |
|
23771 | if (imgEl.complete) {
|
23772 | fit$1(imgEl, classes);
|
23773 | } else {
|
23774 | imgEl.addEventListener('load', function () {
|
23775 | fit$1(imgEl, classes);
|
23776 | });
|
23777 | }
|
23778 | }
|
23779 |
|
23780 | var ImageListItem = React.forwardRef(function ImageListItem(props, ref) {
|
23781 |
|
23782 | var children = props.children,
|
23783 | classes = props.classes,
|
23784 | className = props.className,
|
23785 | _props$cols = props.cols,
|
23786 | _props$component = props.component,
|
23787 | Component = _props$component === void 0 ? 'li' : _props$component,
|
23788 | _props$rows = props.rows,
|
23789 | other = _objectWithoutProperties(props, ["children", "classes", "className", "cols", "component", "rows"]);
|
23790 |
|
23791 | var imgRef = React.useRef(null);
|
23792 | React.useEffect(function () {
|
23793 | ensureImageCover$1(imgRef.current, classes);
|
23794 | });
|
23795 | React.useEffect(function () {
|
23796 | var handleResize = debounce(function () {
|
23797 | fit$1(imgRef.current, classes);
|
23798 | });
|
23799 | window.addEventListener('resize', handleResize);
|
23800 | return function () {
|
23801 | handleResize.clear();
|
23802 | window.removeEventListener('resize', handleResize);
|
23803 | };
|
23804 | }, [classes]);
|
23805 | return React.createElement(Component, _extends({
|
23806 | className: clsx(classes.root, className),
|
23807 | ref: ref
|
23808 | }, other), React.createElement("div", {
|
23809 | className: classes.item
|
23810 | }, React.Children.map(children, function (child) {
|
23811 | if (! React.isValidElement(child)) {
|
23812 | return null;
|
23813 | }
|
23814 |
|
23815 | if (child.type === 'img' || isMuiElement(child, ['Image'])) {
|
23816 | return React.cloneElement(child, {
|
23817 | ref: imgRef
|
23818 | });
|
23819 | }
|
23820 |
|
23821 | return child;
|
23822 | })));
|
23823 | });
|
23824 | ImageListItem.propTypes = {
|
23825 |
|
23826 |
|
23827 |
|
23828 |
|
23829 |
|
23830 | |
23831 |
|
23832 |
|
23833 | children: propTypes.node,
|
23834 |
|
23835 | |
23836 |
|
23837 |
|
23838 |
|
23839 | classes: propTypes.object,
|
23840 |
|
23841 | |
23842 |
|
23843 |
|
23844 | className: propTypes.string,
|
23845 |
|
23846 | |
23847 |
|
23848 |
|
23849 | cols: propTypes.number,
|
23850 |
|
23851 | |
23852 |
|
23853 |
|
23854 |
|
23855 | component: propTypes
|
23856 |
|
23857 | .elementType,
|
23858 |
|
23859 | |
23860 |
|
23861 |
|
23862 | rows: propTypes.number
|
23863 | } ;
|
23864 | var ImageListItem$1 = withStyles$1(styles$10, {
|
23865 | name: 'MuiImageListItem'
|
23866 | })(ImageListItem);
|
23867 |
|
23868 | var styles$11 = function styles(theme) {
|
23869 | return {
|
23870 |
|
23871 | root: {
|
23872 | position: 'absolute',
|
23873 | left: 0,
|
23874 | right: 0,
|
23875 | height: 48,
|
23876 | background: 'rgba(0, 0, 0, 0.5)',
|
23877 | display: 'flex',
|
23878 | alignItems: 'center',
|
23879 | fontFamily: theme.typography.fontFamily
|
23880 | },
|
23881 |
|
23882 |
|
23883 | positionBottom: {
|
23884 | bottom: 0
|
23885 | },
|
23886 |
|
23887 |
|
23888 | positionTop: {
|
23889 | top: 0
|
23890 | },
|
23891 |
|
23892 |
|
23893 | rootSubtitle: {
|
23894 | height: 68
|
23895 | },
|
23896 |
|
23897 |
|
23898 | titleWrap: {
|
23899 | flexGrow: 1,
|
23900 | marginLeft: 16,
|
23901 | marginRight: 16,
|
23902 | color: theme.palette.common.white,
|
23903 | overflow: 'hidden'
|
23904 | },
|
23905 |
|
23906 |
|
23907 | titleWrapActionPosLeft: {
|
23908 | marginLeft: 0
|
23909 | },
|
23910 |
|
23911 |
|
23912 | titleWrapActionPosRight: {
|
23913 | marginRight: 0
|
23914 | },
|
23915 |
|
23916 |
|
23917 | title: {
|
23918 | fontSize: theme.typography.pxToRem(16),
|
23919 | lineHeight: '24px',
|
23920 | textOverflow: 'ellipsis',
|
23921 | overflow: 'hidden',
|
23922 | whiteSpace: 'nowrap'
|
23923 | },
|
23924 |
|
23925 |
|
23926 | subtitle: {
|
23927 | fontSize: theme.typography.pxToRem(12),
|
23928 | lineHeight: 1,
|
23929 | textOverflow: 'ellipsis',
|
23930 | overflow: 'hidden',
|
23931 | whiteSpace: 'nowrap'
|
23932 | },
|
23933 |
|
23934 |
|
23935 | actionIcon: {},
|
23936 |
|
23937 |
|
23938 | actionIconActionPosLeft: {
|
23939 | order: -1
|
23940 | }
|
23941 | };
|
23942 | };
|
23943 | var ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref) {
|
23944 | var actionIcon = props.actionIcon,
|
23945 | _props$actionPosition = props.actionPosition,
|
23946 | actionPosition = _props$actionPosition === void 0 ? 'right' : _props$actionPosition,
|
23947 | classes = props.classes,
|
23948 | className = props.className,
|
23949 | subtitle = props.subtitle,
|
23950 | title = props.title,
|
23951 | _props$position = props.position,
|
23952 | positionProp = _props$position === void 0 ? 'bottom' : _props$position,
|
23953 | titlePosition = props.titlePosition,
|
23954 | other = _objectWithoutProperties(props, ["actionIcon", "actionPosition", "classes", "className", "subtitle", "title", "position", "titlePosition"]);
|
23955 |
|
23956 | var position = titlePosition || positionProp;
|
23957 | var actionPos = actionIcon && actionPosition;
|
23958 | return React.createElement("div", _extends({
|
23959 | className: clsx(classes.root, className, subtitle && classes.rootSubtitle, {
|
23960 | 'bottom': classes.positionBottom,
|
23961 | 'top': classes.positionTop
|
23962 | }[position]),
|
23963 | ref: ref
|
23964 | }, other), React.createElement("div", {
|
23965 | className: clsx(classes.titleWrap, {
|
23966 | 'left': classes.titleWrapActionPosLeft,
|
23967 | 'right': classes.titleWrapActionPosRight
|
23968 | }[actionPos])
|
23969 | }, React.createElement("div", {
|
23970 | className: classes.title
|
23971 | }, title), subtitle ? React.createElement("div", {
|
23972 | className: classes.subtitle
|
23973 | }, subtitle) : null), actionIcon ? React.createElement("div", {
|
23974 | className: clsx(classes.actionIcon, actionPos === 'left' && classes.actionIconActionPosLeft)
|
23975 | }, actionIcon) : null);
|
23976 | });
|
23977 | ImageListItemBar.propTypes = {
|
23978 |
|
23979 |
|
23980 |
|
23981 |
|
23982 |
|
23983 | |
23984 |
|
23985 |
|
23986 |
|
23987 | actionIcon: propTypes.node,
|
23988 |
|
23989 | |
23990 |
|
23991 |
|
23992 | actionPosition: propTypes.oneOf(['left', 'right']),
|
23993 |
|
23994 | |
23995 |
|
23996 |
|
23997 |
|
23998 | classes: propTypes.object,
|
23999 |
|
24000 | |
24001 |
|
24002 |
|
24003 | className: propTypes.string,
|
24004 |
|
24005 | |
24006 |
|
24007 |
|
24008 | position: propTypes.oneOf(['bottom', 'top']),
|
24009 |
|
24010 | |
24011 |
|
24012 |
|
24013 | subtitle: propTypes.node,
|
24014 |
|
24015 | |
24016 |
|
24017 |
|
24018 | title: propTypes.node,
|
24019 |
|
24020 | |
24021 |
|
24022 |
|
24023 |
|
24024 | titlePosition: deprecatedPropType(propTypes.oneOf(['bottom', 'top']), 'Use the `position` prop instead.')
|
24025 | } ;
|
24026 | var ImageListItemBar$1 = withStyles$1(styles$11, {
|
24027 | name: 'MuiImageListItemBar'
|
24028 | })(ImageListItemBar);
|
24029 |
|
24030 | var styles$12 = function styles(theme) {
|
24031 | var light = theme.palette.type === 'light';
|
24032 | var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
|
24033 | return {
|
24034 |
|
24035 | root: {
|
24036 | position: 'relative'
|
24037 | },
|
24038 |
|
24039 |
|
24040 | formControl: {
|
24041 | 'label + &': {
|
24042 | marginTop: 16
|
24043 | }
|
24044 | },
|
24045 |
|
24046 |
|
24047 | focused: {},
|
24048 |
|
24049 |
|
24050 | disabled: {},
|
24051 |
|
24052 |
|
24053 | colorSecondary: {
|
24054 | '&$underline:after': {
|
24055 | borderBottomColor: theme.palette.secondary.main
|
24056 | }
|
24057 | },
|
24058 |
|
24059 |
|
24060 | underline: {
|
24061 | '&:after': {
|
24062 | borderBottom: "2px solid ".concat(theme.palette.primary.main),
|
24063 | left: 0,
|
24064 | bottom: 0,
|
24065 |
|
24066 | content: '""',
|
24067 | position: 'absolute',
|
24068 | right: 0,
|
24069 | transform: 'scaleX(0)',
|
24070 | transition: theme.transitions.create('transform', {
|
24071 | duration: theme.transitions.duration.shorter,
|
24072 | easing: theme.transitions.easing.easeOut
|
24073 | }),
|
24074 | pointerEvents: 'none'
|
24075 |
|
24076 | },
|
24077 | '&$focused:after': {
|
24078 | transform: 'scaleX(1)'
|
24079 | },
|
24080 | '&$error:after': {
|
24081 | borderBottomColor: theme.palette.error.main,
|
24082 | transform: 'scaleX(1)'
|
24083 |
|
24084 | },
|
24085 | '&:before': {
|
24086 | borderBottom: "1px solid ".concat(bottomLineColor),
|
24087 | left: 0,
|
24088 | bottom: 0,
|
24089 |
|
24090 | content: '"\\00a0"',
|
24091 | position: 'absolute',
|
24092 | right: 0,
|
24093 | transition: theme.transitions.create('border-bottom-color', {
|
24094 | duration: theme.transitions.duration.shorter
|
24095 | }),
|
24096 | pointerEvents: 'none'
|
24097 |
|
24098 | },
|
24099 | '&:hover:not($disabled):before': {
|
24100 | borderBottom: "2px solid ".concat(theme.palette.text.primary),
|
24101 |
|
24102 | '@media (hover: none)': {
|
24103 | borderBottom: "1px solid ".concat(bottomLineColor)
|
24104 | }
|
24105 | },
|
24106 | '&$disabled:before': {
|
24107 | borderBottomStyle: 'dotted'
|
24108 | }
|
24109 | },
|
24110 |
|
24111 |
|
24112 | error: {},
|
24113 |
|
24114 |
|
24115 | marginDense: {},
|
24116 |
|
24117 |
|
24118 | multiline: {},
|
24119 |
|
24120 |
|
24121 | fullWidth: {},
|
24122 |
|
24123 |
|
24124 | input: {},
|
24125 |
|
24126 |
|
24127 | inputMarginDense: {},
|
24128 |
|
24129 |
|
24130 | inputMultiline: {},
|
24131 |
|
24132 |
|
24133 | inputTypeSearch: {}
|
24134 | };
|
24135 | };
|
24136 | var Input = React.forwardRef(function Input(props, ref) {
|
24137 | var disableUnderline = props.disableUnderline,
|
24138 | classes = props.classes,
|
24139 | _props$fullWidth = props.fullWidth,
|
24140 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
24141 | _props$inputComponent = props.inputComponent,
|
24142 | inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
|
24143 | _props$multiline = props.multiline,
|
24144 | multiline = _props$multiline === void 0 ? false : _props$multiline,
|
24145 | _props$type = props.type,
|
24146 | type = _props$type === void 0 ? 'text' : _props$type,
|
24147 | other = _objectWithoutProperties(props, ["disableUnderline", "classes", "fullWidth", "inputComponent", "multiline", "type"]);
|
24148 |
|
24149 | return React.createElement(InputBase$1, _extends({
|
24150 | classes: _extends({}, classes, {
|
24151 | root: clsx(classes.root, !disableUnderline && classes.underline),
|
24152 | underline: null
|
24153 | }),
|
24154 | fullWidth: fullWidth,
|
24155 | inputComponent: inputComponent,
|
24156 | multiline: multiline,
|
24157 | ref: ref,
|
24158 | type: type
|
24159 | }, other));
|
24160 | });
|
24161 | Input.propTypes = {
|
24162 |
|
24163 |
|
24164 |
|
24165 |
|
24166 |
|
24167 | |
24168 |
|
24169 |
|
24170 |
|
24171 |
|
24172 | autoComplete: propTypes.string,
|
24173 |
|
24174 | |
24175 |
|
24176 |
|
24177 | autoFocus: propTypes.bool,
|
24178 |
|
24179 | |
24180 |
|
24181 |
|
24182 |
|
24183 | classes: propTypes.object,
|
24184 |
|
24185 | |
24186 |
|
24187 |
|
24188 | color: propTypes.oneOf(['primary', 'secondary']),
|
24189 |
|
24190 | |
24191 |
|
24192 |
|
24193 | defaultValue: propTypes.any,
|
24194 |
|
24195 | |
24196 |
|
24197 |
|
24198 | disabled: propTypes.bool,
|
24199 |
|
24200 | |
24201 |
|
24202 |
|
24203 | disableUnderline: propTypes.bool,
|
24204 |
|
24205 | |
24206 |
|
24207 |
|
24208 | endAdornment: propTypes.node,
|
24209 |
|
24210 | |
24211 |
|
24212 |
|
24213 |
|
24214 | error: propTypes.bool,
|
24215 |
|
24216 | |
24217 |
|
24218 |
|
24219 | fullWidth: propTypes.bool,
|
24220 |
|
24221 | |
24222 |
|
24223 |
|
24224 | id: propTypes.string,
|
24225 |
|
24226 | |
24227 |
|
24228 |
|
24229 |
|
24230 | inputComponent: propTypes.elementType,
|
24231 |
|
24232 | |
24233 |
|
24234 |
|
24235 | inputProps: propTypes.object,
|
24236 |
|
24237 | |
24238 |
|
24239 |
|
24240 | inputRef: refType,
|
24241 |
|
24242 | |
24243 |
|
24244 |
|
24245 |
|
24246 | margin: propTypes.oneOf(['dense', 'none']),
|
24247 |
|
24248 | |
24249 |
|
24250 |
|
24251 | maxRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
24252 |
|
24253 | |
24254 |
|
24255 |
|
24256 | multiline: propTypes.bool,
|
24257 |
|
24258 | |
24259 |
|
24260 |
|
24261 | name: propTypes.string,
|
24262 |
|
24263 | |
24264 |
|
24265 |
|
24266 |
|
24267 |
|
24268 |
|
24269 | onChange: propTypes.func,
|
24270 |
|
24271 | |
24272 |
|
24273 |
|
24274 | placeholder: propTypes.string,
|
24275 |
|
24276 | |
24277 |
|
24278 |
|
24279 |
|
24280 | readOnly: propTypes.bool,
|
24281 |
|
24282 | |
24283 |
|
24284 |
|
24285 | required: propTypes.bool,
|
24286 |
|
24287 | |
24288 |
|
24289 |
|
24290 | rows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
24291 |
|
24292 | |
24293 |
|
24294 |
|
24295 | startAdornment: propTypes.node,
|
24296 |
|
24297 | |
24298 |
|
24299 |
|
24300 | type: propTypes.string,
|
24301 |
|
24302 | |
24303 |
|
24304 |
|
24305 | value: propTypes.any
|
24306 | } ;
|
24307 | Input.muiName = 'Input';
|
24308 | var Input$1 = withStyles$1(styles$12, {
|
24309 | name: 'MuiInput'
|
24310 | })(Input);
|
24311 |
|
24312 | var styles$13 = {
|
24313 |
|
24314 | root: {
|
24315 | display: 'flex',
|
24316 | height: '0.01em',
|
24317 |
|
24318 | maxHeight: '2em',
|
24319 | alignItems: 'center',
|
24320 | whiteSpace: 'nowrap'
|
24321 | },
|
24322 |
|
24323 |
|
24324 | filled: {
|
24325 | '&$positionStart:not($hiddenLabel)': {
|
24326 | marginTop: 16
|
24327 | }
|
24328 | },
|
24329 |
|
24330 |
|
24331 | positionStart: {
|
24332 | marginRight: 8
|
24333 | },
|
24334 |
|
24335 |
|
24336 | positionEnd: {
|
24337 | marginLeft: 8
|
24338 | },
|
24339 |
|
24340 |
|
24341 | disablePointerEvents: {
|
24342 | pointerEvents: 'none'
|
24343 | },
|
24344 |
|
24345 |
|
24346 | hiddenLabel: {},
|
24347 |
|
24348 |
|
24349 | marginDense: {}
|
24350 | };
|
24351 | var InputAdornment = React.forwardRef(function InputAdornment(props, ref) {
|
24352 | var children = props.children,
|
24353 | classes = props.classes,
|
24354 | className = props.className,
|
24355 | _props$component = props.component,
|
24356 | Component = _props$component === void 0 ? 'div' : _props$component,
|
24357 | _props$disablePointer = props.disablePointerEvents,
|
24358 | disablePointerEvents = _props$disablePointer === void 0 ? false : _props$disablePointer,
|
24359 | _props$disableTypogra = props.disableTypography,
|
24360 | disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
|
24361 | position = props.position,
|
24362 | variantProp = props.variant,
|
24363 | other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"]);
|
24364 |
|
24365 | var muiFormControl = useFormControl() || {};
|
24366 | var variant = variantProp;
|
24367 |
|
24368 | if (variantProp && muiFormControl.variant) {
|
24369 | {
|
24370 | if (variantProp === muiFormControl.variant) {
|
24371 | console.error('Material-UI: The `InputAdornment` variant infers the variant prop ' + 'you do not have to provide one.');
|
24372 | }
|
24373 | }
|
24374 | }
|
24375 |
|
24376 | if (muiFormControl && !variant) {
|
24377 | variant = muiFormControl.variant;
|
24378 | }
|
24379 |
|
24380 | return React.createElement(FormControlContext.Provider, {
|
24381 | value: null
|
24382 | }, React.createElement(Component, _extends({
|
24383 | className: clsx(classes.root, className, position === 'end' ? classes.positionEnd : classes.positionStart, disablePointerEvents && classes.disablePointerEvents, muiFormControl.hiddenLabel && classes.hiddenLabel, variant === 'filled' && classes.filled, muiFormControl.margin === 'dense' && classes.marginDense),
|
24384 | ref: ref
|
24385 | }, other), typeof children === 'string' && !disableTypography ? React.createElement(Typography$1, {
|
24386 | color: "textSecondary"
|
24387 | }, children) : children));
|
24388 | });
|
24389 | InputAdornment.propTypes = {
|
24390 | |
24391 |
|
24392 |
|
24393 | children: propTypes.node.isRequired,
|
24394 |
|
24395 | |
24396 |
|
24397 |
|
24398 |
|
24399 | classes: propTypes.object.isRequired,
|
24400 |
|
24401 | |
24402 |
|
24403 |
|
24404 | className: propTypes.string,
|
24405 |
|
24406 | |
24407 |
|
24408 |
|
24409 |
|
24410 | component: propTypes
|
24411 |
|
24412 | .elementType,
|
24413 |
|
24414 | |
24415 |
|
24416 |
|
24417 |
|
24418 | disablePointerEvents: propTypes.bool,
|
24419 |
|
24420 | |
24421 |
|
24422 |
|
24423 | disableTypography: propTypes.bool,
|
24424 |
|
24425 | |
24426 |
|
24427 |
|
24428 | muiFormControl: propTypes.object,
|
24429 |
|
24430 | |
24431 |
|
24432 |
|
24433 | position: propTypes.oneOf(['start', 'end']).isRequired,
|
24434 |
|
24435 | |
24436 |
|
24437 |
|
24438 |
|
24439 |
|
24440 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
24441 | } ;
|
24442 | var InputAdornment$1 = withStyles$1(styles$13, {
|
24443 | name: 'MuiInputAdornment'
|
24444 | })(InputAdornment);
|
24445 |
|
24446 | var styles$14 = function styles(theme) {
|
24447 | return {
|
24448 |
|
24449 | root: {
|
24450 | display: 'block',
|
24451 | transformOrigin: 'top left'
|
24452 | },
|
24453 |
|
24454 |
|
24455 | focused: {},
|
24456 |
|
24457 |
|
24458 | disabled: {},
|
24459 |
|
24460 |
|
24461 | error: {},
|
24462 |
|
24463 |
|
24464 | required: {},
|
24465 |
|
24466 |
|
24467 | asterisk: {},
|
24468 |
|
24469 |
|
24470 | formControl: {
|
24471 | position: 'absolute',
|
24472 | left: 0,
|
24473 | top: 0,
|
24474 |
|
24475 | transform: 'translate(0, 24px) scale(1)'
|
24476 | },
|
24477 |
|
24478 |
|
24479 | marginDense: {
|
24480 |
|
24481 | transform: 'translate(0, 21px) scale(1)'
|
24482 | },
|
24483 |
|
24484 |
|
24485 | shrink: {
|
24486 | transform: 'translate(0, 1.5px) scale(0.75)',
|
24487 | transformOrigin: 'top left'
|
24488 | },
|
24489 |
|
24490 |
|
24491 | animated: {
|
24492 | transition: theme.transitions.create(['color', 'transform'], {
|
24493 | duration: theme.transitions.duration.shorter,
|
24494 | easing: theme.transitions.easing.easeOut
|
24495 | })
|
24496 | },
|
24497 |
|
24498 |
|
24499 | filled: {
|
24500 |
|
24501 |
|
24502 |
|
24503 |
|
24504 | zIndex: 1,
|
24505 | pointerEvents: 'none',
|
24506 | transform: 'translate(12px, 20px) scale(1)',
|
24507 | '&$marginDense': {
|
24508 | transform: 'translate(12px, 17px) scale(1)'
|
24509 | },
|
24510 | '&$shrink': {
|
24511 | transform: 'translate(12px, 10px) scale(0.75)',
|
24512 | '&$marginDense': {
|
24513 | transform: 'translate(12px, 7px) scale(0.75)'
|
24514 | }
|
24515 | }
|
24516 | },
|
24517 |
|
24518 |
|
24519 | outlined: {
|
24520 |
|
24521 | zIndex: 1,
|
24522 | pointerEvents: 'none',
|
24523 | transform: 'translate(14px, 20px) scale(1)',
|
24524 | '&$marginDense': {
|
24525 | transform: 'translate(14px, 12px) scale(1)'
|
24526 | },
|
24527 | '&$shrink': {
|
24528 | transform: 'translate(14px, -6px) scale(0.75)'
|
24529 | }
|
24530 | }
|
24531 | };
|
24532 | };
|
24533 | var InputLabel = React.forwardRef(function InputLabel(props, ref) {
|
24534 | var classes = props.classes,
|
24535 | className = props.className,
|
24536 | _props$disableAnimati = props.disableAnimation,
|
24537 | disableAnimation = _props$disableAnimati === void 0 ? false : _props$disableAnimati,
|
24538 | margin = props.margin,
|
24539 | shrinkProp = props.shrink,
|
24540 | variant = props.variant,
|
24541 | other = _objectWithoutProperties(props, ["classes", "className", "disableAnimation", "margin", "shrink", "variant"]);
|
24542 |
|
24543 | var muiFormControl = useFormControl$1();
|
24544 | var shrink = shrinkProp;
|
24545 |
|
24546 | if (typeof shrink === 'undefined' && muiFormControl) {
|
24547 | shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
|
24548 | }
|
24549 |
|
24550 | var fcs = formControlState({
|
24551 | props: props,
|
24552 | muiFormControl: muiFormControl,
|
24553 | states: ['margin', 'variant']
|
24554 | });
|
24555 | return React.createElement(FormLabel$1, _extends({
|
24556 | "data-shrink": shrink,
|
24557 | className: clsx(classes.root, className, muiFormControl && classes.formControl, !disableAnimation && classes.animated, shrink && classes.shrink, fcs.margin === 'dense' && classes.marginDense, {
|
24558 | 'filled': classes.filled,
|
24559 | 'outlined': classes.outlined
|
24560 | }[fcs.variant]),
|
24561 | classes: {
|
24562 | focused: classes.focused,
|
24563 | disabled: classes.disabled,
|
24564 | error: classes.error,
|
24565 | required: classes.required,
|
24566 | asterisk: classes.asterisk
|
24567 | },
|
24568 | ref: ref
|
24569 | }, other));
|
24570 | });
|
24571 | InputLabel.propTypes = {
|
24572 |
|
24573 |
|
24574 |
|
24575 |
|
24576 |
|
24577 | |
24578 |
|
24579 |
|
24580 | children: propTypes.node,
|
24581 |
|
24582 | |
24583 |
|
24584 |
|
24585 |
|
24586 | classes: propTypes.object,
|
24587 |
|
24588 | |
24589 |
|
24590 |
|
24591 | className: propTypes.string,
|
24592 |
|
24593 | |
24594 |
|
24595 |
|
24596 | color: propTypes.oneOf(['primary', 'secondary']),
|
24597 |
|
24598 | |
24599 |
|
24600 |
|
24601 | disableAnimation: propTypes.bool,
|
24602 |
|
24603 | |
24604 |
|
24605 |
|
24606 | disabled: propTypes.bool,
|
24607 |
|
24608 | |
24609 |
|
24610 |
|
24611 | error: propTypes.bool,
|
24612 |
|
24613 | |
24614 |
|
24615 |
|
24616 | focused: propTypes.bool,
|
24617 |
|
24618 | |
24619 |
|
24620 |
|
24621 |
|
24622 | margin: propTypes.oneOf(['dense']),
|
24623 |
|
24624 | |
24625 |
|
24626 |
|
24627 | required: propTypes.bool,
|
24628 |
|
24629 | |
24630 |
|
24631 |
|
24632 | shrink: propTypes.bool,
|
24633 |
|
24634 | |
24635 |
|
24636 |
|
24637 | variant: propTypes.oneOf(['filled', 'outlined', 'standard'])
|
24638 | } ;
|
24639 | var InputLabel$1 = withStyles$1(styles$14, {
|
24640 | name: 'MuiInputLabel'
|
24641 | })(InputLabel);
|
24642 |
|
24643 | var TRANSITION_DURATION = 4;
|
24644 |
|
24645 | var styles$15 = function styles(theme) {
|
24646 | var getColor = function getColor(color) {
|
24647 | return theme.palette.type === 'light' ? lighten(color, 0.62) : darken(color, 0.5);
|
24648 | };
|
24649 |
|
24650 | var backgroundPrimary = getColor(theme.palette.primary.main);
|
24651 | var backgroundSecondary = getColor(theme.palette.secondary.main);
|
24652 | return {
|
24653 |
|
24654 | root: {
|
24655 | position: 'relative',
|
24656 | overflow: 'hidden',
|
24657 | height: 4,
|
24658 | '@media print': {
|
24659 | colorAdjust: 'exact'
|
24660 | }
|
24661 | },
|
24662 |
|
24663 |
|
24664 | colorPrimary: {
|
24665 | backgroundColor: backgroundPrimary
|
24666 | },
|
24667 |
|
24668 |
|
24669 | colorSecondary: {
|
24670 | backgroundColor: backgroundSecondary
|
24671 | },
|
24672 |
|
24673 |
|
24674 | determinate: {},
|
24675 |
|
24676 |
|
24677 | indeterminate: {},
|
24678 |
|
24679 |
|
24680 | buffer: {
|
24681 | backgroundColor: 'transparent'
|
24682 | },
|
24683 |
|
24684 |
|
24685 | query: {
|
24686 | transform: 'rotate(180deg)'
|
24687 | },
|
24688 |
|
24689 |
|
24690 | dashed: {
|
24691 | position: 'absolute',
|
24692 | marginTop: 0,
|
24693 | height: '100%',
|
24694 | width: '100%',
|
24695 | animation: '$buffer 3s infinite linear'
|
24696 | },
|
24697 |
|
24698 |
|
24699 | dashedColorPrimary: {
|
24700 | backgroundImage: "radial-gradient(".concat(backgroundPrimary, " 0%, ").concat(backgroundPrimary, " 16%, transparent 42%)"),
|
24701 | backgroundSize: '10px 10px',
|
24702 | backgroundPosition: '0 -23px'
|
24703 | },
|
24704 |
|
24705 |
|
24706 | dashedColorSecondary: {
|
24707 | backgroundImage: "radial-gradient(".concat(backgroundSecondary, " 0%, ").concat(backgroundSecondary, " 16%, transparent 42%)"),
|
24708 | backgroundSize: '10px 10px',
|
24709 | backgroundPosition: '0 -23px'
|
24710 | },
|
24711 |
|
24712 |
|
24713 | bar: {
|
24714 | width: '100%',
|
24715 | position: 'absolute',
|
24716 | left: 0,
|
24717 | bottom: 0,
|
24718 | top: 0,
|
24719 | transition: 'transform 0.2s linear',
|
24720 | transformOrigin: 'left'
|
24721 | },
|
24722 |
|
24723 |
|
24724 | barColorPrimary: {
|
24725 | backgroundColor: theme.palette.primary.main
|
24726 | },
|
24727 |
|
24728 |
|
24729 | barColorSecondary: {
|
24730 | backgroundColor: theme.palette.secondary.main
|
24731 | },
|
24732 |
|
24733 |
|
24734 | bar1Indeterminate: {
|
24735 | width: 'auto',
|
24736 | animation: '$indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite'
|
24737 | },
|
24738 |
|
24739 |
|
24740 | bar1Determinate: {
|
24741 | transition: "transform .".concat(TRANSITION_DURATION, "s linear")
|
24742 | },
|
24743 |
|
24744 |
|
24745 | bar1Buffer: {
|
24746 | zIndex: 1,
|
24747 | transition: "transform .".concat(TRANSITION_DURATION, "s linear")
|
24748 | },
|
24749 |
|
24750 |
|
24751 | bar2Indeterminate: {
|
24752 | width: 'auto',
|
24753 | animation: '$indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite'
|
24754 | },
|
24755 |
|
24756 |
|
24757 | bar2Buffer: {
|
24758 | transition: "transform .".concat(TRANSITION_DURATION, "s linear")
|
24759 | },
|
24760 |
|
24761 |
|
24762 |
|
24763 |
|
24764 | '@keyframes indeterminate1': {
|
24765 |
|
24766 | '0%': {
|
24767 | left: '-35%',
|
24768 | right: '100%'
|
24769 | },
|
24770 |
|
24771 | '60%': {
|
24772 | left: '100%',
|
24773 | right: '-90%'
|
24774 | },
|
24775 | '100%': {
|
24776 | left: '100%',
|
24777 | right: '-90%'
|
24778 | }
|
24779 | },
|
24780 | '@keyframes indeterminate2': {
|
24781 |
|
24782 | '0%': {
|
24783 | left: '-200%',
|
24784 | right: '100%'
|
24785 | },
|
24786 |
|
24787 | '60%': {
|
24788 | left: '107%',
|
24789 | right: '-8%'
|
24790 | },
|
24791 | '100%': {
|
24792 | left: '107%',
|
24793 | right: '-8%'
|
24794 | }
|
24795 | },
|
24796 | '@keyframes buffer': {
|
24797 | '0%': {
|
24798 | opacity: 1,
|
24799 | backgroundPosition: '0 -23px'
|
24800 | },
|
24801 | '50%': {
|
24802 | opacity: 0,
|
24803 | backgroundPosition: '0 -23px'
|
24804 | },
|
24805 | '100%': {
|
24806 | opacity: 1,
|
24807 | backgroundPosition: '-200px -23px'
|
24808 | }
|
24809 | }
|
24810 | };
|
24811 | };
|
24812 | |
24813 |
|
24814 |
|
24815 |
|
24816 |
|
24817 |
|
24818 |
|
24819 |
|
24820 | var LinearProgress = React.forwardRef(function LinearProgress(props, ref) {
|
24821 | var classes = props.classes,
|
24822 | className = props.className,
|
24823 | _props$color = props.color,
|
24824 | color = _props$color === void 0 ? 'primary' : _props$color,
|
24825 | value = props.value,
|
24826 | valueBuffer = props.valueBuffer,
|
24827 | _props$variant = props.variant,
|
24828 | variant = _props$variant === void 0 ? 'indeterminate' : _props$variant,
|
24829 | other = _objectWithoutProperties(props, ["classes", "className", "color", "value", "valueBuffer", "variant"]);
|
24830 |
|
24831 | var theme = useTheme$1();
|
24832 | var rootProps = {};
|
24833 | var inlineStyles = {
|
24834 | bar1: {},
|
24835 | bar2: {}
|
24836 | };
|
24837 |
|
24838 | if (variant === 'determinate' || variant === 'buffer') {
|
24839 | if (value !== undefined) {
|
24840 | rootProps['aria-valuenow'] = Math.round(value);
|
24841 | rootProps['aria-valuemin'] = 0;
|
24842 | rootProps['aria-valuemax'] = 100;
|
24843 | var transform = value - 100;
|
24844 |
|
24845 | if (theme.direction === 'rtl') {
|
24846 | transform = -transform;
|
24847 | }
|
24848 |
|
24849 | inlineStyles.bar1.transform = "translateX(".concat(transform, "%)");
|
24850 | } else {
|
24851 | console.error('Material-UI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
|
24852 | }
|
24853 | }
|
24854 |
|
24855 | if (variant === 'buffer') {
|
24856 | if (valueBuffer !== undefined) {
|
24857 | var _transform = (valueBuffer || 0) - 100;
|
24858 |
|
24859 | if (theme.direction === 'rtl') {
|
24860 | _transform = -_transform;
|
24861 | }
|
24862 |
|
24863 | inlineStyles.bar2.transform = "translateX(".concat(_transform, "%)");
|
24864 | } else {
|
24865 | console.error('Material-UI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
|
24866 | }
|
24867 | }
|
24868 |
|
24869 | return React.createElement("div", _extends({
|
24870 | className: clsx(classes.root, classes["color".concat(capitalize(color))], className, {
|
24871 | 'determinate': classes.determinate,
|
24872 | 'indeterminate': classes.indeterminate,
|
24873 | 'buffer': classes.buffer,
|
24874 | 'query': classes.query
|
24875 | }[variant]),
|
24876 | role: "progressbar"
|
24877 | }, rootProps, {
|
24878 | ref: ref
|
24879 | }, other), variant === 'buffer' ? React.createElement("div", {
|
24880 | className: clsx(classes.dashed, classes["dashedColor".concat(capitalize(color))])
|
24881 | }) : null, React.createElement("div", {
|
24882 | className: clsx(classes.bar, classes["barColor".concat(capitalize(color))], (variant === 'indeterminate' || variant === 'query') && classes.bar1Indeterminate, {
|
24883 | 'determinate': classes.bar1Determinate,
|
24884 | 'buffer': classes.bar1Buffer
|
24885 | }[variant]),
|
24886 | style: inlineStyles.bar1
|
24887 | }), variant === 'determinate' ? null : React.createElement("div", {
|
24888 | className: clsx(classes.bar, (variant === 'indeterminate' || variant === 'query') && classes.bar2Indeterminate, variant === 'buffer' ? [classes["color".concat(capitalize(color))], classes.bar2Buffer] : classes["barColor".concat(capitalize(color))]),
|
24889 | style: inlineStyles.bar2
|
24890 | }));
|
24891 | });
|
24892 | LinearProgress.propTypes = {
|
24893 |
|
24894 |
|
24895 |
|
24896 |
|
24897 |
|
24898 | |
24899 |
|
24900 |
|
24901 |
|
24902 | classes: propTypes.object,
|
24903 |
|
24904 | |
24905 |
|
24906 |
|
24907 | className: propTypes.string,
|
24908 |
|
24909 | |
24910 |
|
24911 |
|
24912 | color: propTypes.oneOf(['primary', 'secondary']),
|
24913 |
|
24914 | |
24915 |
|
24916 |
|
24917 |
|
24918 | value: propTypes.number,
|
24919 |
|
24920 | |
24921 |
|
24922 |
|
24923 |
|
24924 | valueBuffer: propTypes.number,
|
24925 |
|
24926 | |
24927 |
|
24928 |
|
24929 |
|
24930 | variant: propTypes.oneOf(['buffer', 'determinate', 'indeterminate', 'query'])
|
24931 | } ;
|
24932 | var LinearProgress$1 = withStyles$1(styles$15, {
|
24933 | name: 'MuiLinearProgress'
|
24934 | })(LinearProgress);
|
24935 |
|
24936 | var styles$16 = {
|
24937 |
|
24938 | root: {},
|
24939 |
|
24940 |
|
24941 | underlineNone: {
|
24942 | textDecoration: 'none'
|
24943 | },
|
24944 |
|
24945 |
|
24946 | underlineHover: {
|
24947 | textDecoration: 'none',
|
24948 | '&:hover': {
|
24949 | textDecoration: 'underline'
|
24950 | }
|
24951 | },
|
24952 |
|
24953 |
|
24954 | underlineAlways: {
|
24955 | textDecoration: 'underline'
|
24956 | },
|
24957 |
|
24958 |
|
24959 |
|
24960 | button: {
|
24961 | position: 'relative',
|
24962 | WebkitTapHighlightColor: 'transparent',
|
24963 | backgroundColor: 'transparent',
|
24964 |
|
24965 |
|
24966 | outline: 0,
|
24967 | border: 0,
|
24968 | margin: 0,
|
24969 |
|
24970 | borderRadius: 0,
|
24971 | padding: 0,
|
24972 |
|
24973 | cursor: 'pointer',
|
24974 | userSelect: 'none',
|
24975 | verticalAlign: 'middle',
|
24976 | '-moz-appearance': 'none',
|
24977 |
|
24978 | '-webkit-appearance': 'none',
|
24979 |
|
24980 | '&::-moz-focus-inner': {
|
24981 | borderStyle: 'none'
|
24982 |
|
24983 | },
|
24984 | '&$focusVisible': {
|
24985 | outline: 'auto'
|
24986 | }
|
24987 | },
|
24988 |
|
24989 |
|
24990 | focusVisible: {}
|
24991 | };
|
24992 | var Link = React.forwardRef(function Link(props, ref) {
|
24993 | var classes = props.classes,
|
24994 | className = props.className,
|
24995 | _props$color = props.color,
|
24996 | color = _props$color === void 0 ? 'primary' : _props$color,
|
24997 | _props$component = props.component,
|
24998 | component = _props$component === void 0 ? 'a' : _props$component,
|
24999 | onBlur = props.onBlur,
|
25000 | onFocus = props.onFocus,
|
25001 | TypographyClasses = props.TypographyClasses,
|
25002 | _props$underline = props.underline,
|
25003 | underline = _props$underline === void 0 ? 'hover' : _props$underline,
|
25004 | _props$variant = props.variant,
|
25005 | variant = _props$variant === void 0 ? 'inherit' : _props$variant,
|
25006 | other = _objectWithoutProperties(props, ["classes", "className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"]);
|
25007 |
|
25008 | var _useIsFocusVisible = useIsFocusVisible(),
|
25009 | isFocusVisible = _useIsFocusVisible.isFocusVisible,
|
25010 | onBlurVisible = _useIsFocusVisible.onBlurVisible,
|
25011 | focusVisibleRef = _useIsFocusVisible.ref;
|
25012 |
|
25013 | var _React$useState = React.useState(false),
|
25014 | focusVisible = _React$useState[0],
|
25015 | setFocusVisible = _React$useState[1];
|
25016 |
|
25017 | var handlerRef = useForkRef(ref, focusVisibleRef);
|
25018 |
|
25019 | var handleBlur = function handleBlur(event) {
|
25020 | if (focusVisible) {
|
25021 | onBlurVisible();
|
25022 | setFocusVisible(false);
|
25023 | }
|
25024 |
|
25025 | if (onBlur) {
|
25026 | onBlur(event);
|
25027 | }
|
25028 | };
|
25029 |
|
25030 | var handleFocus = function handleFocus(event) {
|
25031 | if (isFocusVisible(event)) {
|
25032 | setFocusVisible(true);
|
25033 | }
|
25034 |
|
25035 | if (onFocus) {
|
25036 | onFocus(event);
|
25037 | }
|
25038 | };
|
25039 |
|
25040 | return React.createElement(Typography$1, _extends({
|
25041 | className: clsx(classes.root, classes["underline".concat(capitalize(underline))], className, focusVisible && classes.focusVisible, component === 'button' && classes.button),
|
25042 | classes: TypographyClasses,
|
25043 | color: color,
|
25044 | component: component,
|
25045 | onBlur: handleBlur,
|
25046 | onFocus: handleFocus,
|
25047 | ref: handlerRef,
|
25048 | variant: variant
|
25049 | }, other));
|
25050 | });
|
25051 | Link.propTypes = {
|
25052 | |
25053 |
|
25054 |
|
25055 | children: propTypes.node.isRequired,
|
25056 |
|
25057 | |
25058 |
|
25059 |
|
25060 |
|
25061 | classes: propTypes.object.isRequired,
|
25062 |
|
25063 | |
25064 |
|
25065 |
|
25066 | className: propTypes.string,
|
25067 |
|
25068 | |
25069 |
|
25070 |
|
25071 | color: propTypes.oneOf(['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']),
|
25072 |
|
25073 | |
25074 |
|
25075 |
|
25076 |
|
25077 | component: elementTypeAcceptingRef$1,
|
25078 |
|
25079 | |
25080 |
|
25081 |
|
25082 | onBlur: propTypes.func,
|
25083 |
|
25084 | |
25085 |
|
25086 |
|
25087 | onFocus: propTypes.func,
|
25088 |
|
25089 | |
25090 |
|
25091 |
|
25092 | TypographyClasses: propTypes.object,
|
25093 |
|
25094 | |
25095 |
|
25096 |
|
25097 | underline: propTypes.oneOf(['none', 'hover', 'always']),
|
25098 |
|
25099 | |
25100 |
|
25101 |
|
25102 | variant: propTypes.string
|
25103 | } ;
|
25104 | var Link$1 = withStyles$1(styles$16, {
|
25105 | name: 'MuiLink'
|
25106 | })(Link);
|
25107 |
|
25108 | |
25109 |
|
25110 |
|
25111 |
|
25112 | var ListContext = React.createContext({});
|
25113 |
|
25114 | {
|
25115 | ListContext.displayName = 'ListContext';
|
25116 | }
|
25117 |
|
25118 | var styles$17 = {
|
25119 |
|
25120 | root: {
|
25121 | listStyle: 'none',
|
25122 | margin: 0,
|
25123 | padding: 0,
|
25124 | position: 'relative'
|
25125 | },
|
25126 |
|
25127 |
|
25128 | padding: {
|
25129 | paddingTop: 8,
|
25130 | paddingBottom: 8
|
25131 | },
|
25132 |
|
25133 |
|
25134 | dense: {},
|
25135 |
|
25136 |
|
25137 | subheader: {
|
25138 | paddingTop: 0
|
25139 | }
|
25140 | };
|
25141 | var List = React.forwardRef(function List(props, ref) {
|
25142 | var children = props.children,
|
25143 | classes = props.classes,
|
25144 | className = props.className,
|
25145 | _props$component = props.component,
|
25146 | Component = _props$component === void 0 ? 'ul' : _props$component,
|
25147 | _props$dense = props.dense,
|
25148 | dense = _props$dense === void 0 ? false : _props$dense,
|
25149 | _props$disablePadding = props.disablePadding,
|
25150 | disablePadding = _props$disablePadding === void 0 ? false : _props$disablePadding,
|
25151 | subheader = props.subheader,
|
25152 | other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "dense", "disablePadding", "subheader"]);
|
25153 |
|
25154 | var context = React.useMemo(function () {
|
25155 | return {
|
25156 | dense: dense
|
25157 | };
|
25158 | }, [dense]);
|
25159 | return React.createElement(ListContext.Provider, {
|
25160 | value: context
|
25161 | }, React.createElement(Component, _extends({
|
25162 | className: clsx(classes.root, className, dense && classes.dense, !disablePadding && classes.padding, subheader && classes.subheader),
|
25163 | ref: ref
|
25164 | }, other), subheader, children));
|
25165 | });
|
25166 | List.propTypes = {
|
25167 | |
25168 |
|
25169 |
|
25170 | children: propTypes.node,
|
25171 |
|
25172 | |
25173 |
|
25174 |
|
25175 |
|
25176 | classes: propTypes.object.isRequired,
|
25177 |
|
25178 | |
25179 |
|
25180 |
|
25181 | className: propTypes.string,
|
25182 |
|
25183 | |
25184 |
|
25185 |
|
25186 |
|
25187 | component: propTypes
|
25188 |
|
25189 | .elementType,
|
25190 |
|
25191 | |
25192 |
|
25193 |
|
25194 |
|
25195 |
|
25196 | dense: propTypes.bool,
|
25197 |
|
25198 | |
25199 |
|
25200 |
|
25201 | disablePadding: propTypes.bool,
|
25202 |
|
25203 | |
25204 |
|
25205 |
|
25206 | subheader: propTypes.node
|
25207 | } ;
|
25208 | var List$1 = withStyles$1(styles$17, {
|
25209 | name: 'MuiList'
|
25210 | })(List);
|
25211 |
|
25212 | var styles$18 = function styles(theme) {
|
25213 | return {
|
25214 |
|
25215 | root: {
|
25216 | display: 'flex',
|
25217 | justifyContent: 'flex-start',
|
25218 | alignItems: 'center',
|
25219 | position: 'relative',
|
25220 | textDecoration: 'none',
|
25221 | width: '100%',
|
25222 | boxSizing: 'border-box',
|
25223 | textAlign: 'left',
|
25224 | paddingTop: 8,
|
25225 | paddingBottom: 8,
|
25226 | '&$focusVisible': {
|
25227 | backgroundColor: theme.palette.action.selected
|
25228 | },
|
25229 | '&$selected, &$selected:hover': {
|
25230 | backgroundColor: theme.palette.action.selected
|
25231 | },
|
25232 | '&$disabled': {
|
25233 | opacity: 0.5
|
25234 | }
|
25235 | },
|
25236 |
|
25237 |
|
25238 | container: {
|
25239 | position: 'relative'
|
25240 | },
|
25241 |
|
25242 |
|
25243 | focusVisible: {},
|
25244 |
|
25245 |
|
25246 | dense: {
|
25247 | paddingTop: 4,
|
25248 | paddingBottom: 4
|
25249 | },
|
25250 |
|
25251 |
|
25252 | alignItemsFlexStart: {
|
25253 | alignItems: 'flex-start'
|
25254 | },
|
25255 |
|
25256 |
|
25257 | disabled: {},
|
25258 |
|
25259 |
|
25260 | divider: {
|
25261 | borderBottom: "1px solid ".concat(theme.palette.divider),
|
25262 | backgroundClip: 'padding-box'
|
25263 | },
|
25264 |
|
25265 |
|
25266 | gutters: {
|
25267 | paddingLeft: 16,
|
25268 | paddingRight: 16
|
25269 | },
|
25270 |
|
25271 |
|
25272 | button: {
|
25273 | transition: theme.transitions.create('background-color', {
|
25274 | duration: theme.transitions.duration.shortest
|
25275 | }),
|
25276 | '&:hover': {
|
25277 | textDecoration: 'none',
|
25278 | backgroundColor: theme.palette.action.hover,
|
25279 |
|
25280 | '@media (hover: none)': {
|
25281 | backgroundColor: 'transparent'
|
25282 | }
|
25283 | }
|
25284 | },
|
25285 |
|
25286 |
|
25287 | secondaryAction: {
|
25288 |
|
25289 |
|
25290 | paddingRight: 48
|
25291 | },
|
25292 |
|
25293 |
|
25294 | selected: {}
|
25295 | };
|
25296 | };
|
25297 | var useEnhancedEffect$6 = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
|
25298 | |
25299 |
|
25300 |
|
25301 |
|
25302 | var ListItem = React.forwardRef(function ListItem(props, ref) {
|
25303 | var _props$alignItems = props.alignItems,
|
25304 | alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,
|
25305 | _props$autoFocus = props.autoFocus,
|
25306 | autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
|
25307 | _props$button = props.button,
|
25308 | button = _props$button === void 0 ? false : _props$button,
|
25309 | childrenProp = props.children,
|
25310 | classes = props.classes,
|
25311 | className = props.className,
|
25312 | componentProp = props.component,
|
25313 | _props$ContainerCompo = props.ContainerComponent,
|
25314 | ContainerComponent = _props$ContainerCompo === void 0 ? 'li' : _props$ContainerCompo,
|
25315 | _props$ContainerProps = props.ContainerProps;
|
25316 | _props$ContainerProps = _props$ContainerProps === void 0 ? {} : _props$ContainerProps;
|
25317 |
|
25318 | var ContainerClassName = _props$ContainerProps.className,
|
25319 | ContainerProps = _objectWithoutProperties(_props$ContainerProps, ["className"]),
|
25320 | _props$dense = props.dense,
|
25321 | dense = _props$dense === void 0 ? false : _props$dense,
|
25322 | _props$disabled = props.disabled,
|
25323 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
25324 | _props$disableGutters = props.disableGutters,
|
25325 | disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
|
25326 | _props$divider = props.divider,
|
25327 | divider = _props$divider === void 0 ? false : _props$divider,
|
25328 | focusVisibleClassName = props.focusVisibleClassName,
|
25329 | _props$selected = props.selected,
|
25330 | selected = _props$selected === void 0 ? false : _props$selected,
|
25331 | other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "button", "children", "classes", "className", "component", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "divider", "focusVisibleClassName", "selected"]);
|
25332 |
|
25333 | var context = React.useContext(ListContext);
|
25334 | var childContext = {
|
25335 | dense: dense || context.dense || false,
|
25336 | alignItems: alignItems
|
25337 | };
|
25338 | var listItemRef = React.useRef(null);
|
25339 | useEnhancedEffect$6(function () {
|
25340 | if (autoFocus) {
|
25341 | if (listItemRef.current) {
|
25342 | listItemRef.current.focus();
|
25343 | } else {
|
25344 | console.error('Material-UI: Unable to set focus to a ListItem whose component has not been rendered.');
|
25345 | }
|
25346 | }
|
25347 | }, [autoFocus]);
|
25348 | var children = React.Children.toArray(childrenProp);
|
25349 | var hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
|
25350 | var handleOwnRef = React.useCallback(function (instance) {
|
25351 |
|
25352 | listItemRef.current = ReactDOM.findDOMNode(instance);
|
25353 | }, []);
|
25354 | var handleRef = useForkRef(handleOwnRef, ref);
|
25355 |
|
25356 | var componentProps = _extends({
|
25357 | 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),
|
25358 | disabled: disabled
|
25359 | }, other);
|
25360 |
|
25361 | var Component = componentProp || 'li';
|
25362 |
|
25363 | if (button) {
|
25364 | componentProps.component = componentProp || 'div';
|
25365 | componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);
|
25366 | Component = ButtonBase$1;
|
25367 | }
|
25368 |
|
25369 | if (hasSecondaryAction) {
|
25370 |
|
25371 | Component = !componentProps.component && !componentProp ? 'div' : Component;
|
25372 |
|
25373 | if (ContainerComponent === 'li') {
|
25374 | if (Component === 'li') {
|
25375 | Component = 'div';
|
25376 | } else if (componentProps.component === 'li') {
|
25377 | componentProps.component = 'div';
|
25378 | }
|
25379 | }
|
25380 |
|
25381 | return React.createElement(ListContext.Provider, {
|
25382 | value: childContext
|
25383 | }, React.createElement(ContainerComponent, _extends({
|
25384 | className: clsx(classes.container, ContainerClassName),
|
25385 | ref: handleRef
|
25386 | }, ContainerProps), React.createElement(Component, componentProps, children), children.pop()));
|
25387 | }
|
25388 |
|
25389 | return React.createElement(ListContext.Provider, {
|
25390 | value: childContext
|
25391 | }, React.createElement(Component, _extends({
|
25392 | ref: handleRef
|
25393 | }, componentProps), children));
|
25394 | });
|
25395 | ListItem.propTypes = {
|
25396 | |
25397 |
|
25398 |
|
25399 | alignItems: propTypes.oneOf(['flex-start', 'center']),
|
25400 |
|
25401 | |
25402 |
|
25403 |
|
25404 |
|
25405 | autoFocus: propTypes.bool,
|
25406 |
|
25407 | |
25408 |
|
25409 |
|
25410 |
|
25411 | button: propTypes.bool,
|
25412 |
|
25413 | |
25414 |
|
25415 |
|
25416 |
|
25417 | children: chainPropTypes(propTypes.node, function (props) {
|
25418 | var children = React.Children.toArray(props.children);
|
25419 |
|
25420 | var secondaryActionIndex = -1;
|
25421 |
|
25422 | for (var i = children.length - 1; i >= 0; i -= 1) {
|
25423 | var child = children[i];
|
25424 |
|
25425 | if (isMuiElement(child, ['ListItemSecondaryAction'])) {
|
25426 | secondaryActionIndex = i;
|
25427 | break;
|
25428 | }
|
25429 | }
|
25430 |
|
25431 |
|
25432 | if (secondaryActionIndex !== -1 && secondaryActionIndex !== children.length - 1) {
|
25433 | 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.');
|
25434 | }
|
25435 |
|
25436 | return null;
|
25437 | }),
|
25438 |
|
25439 | |
25440 |
|
25441 |
|
25442 |
|
25443 | classes: propTypes.object.isRequired,
|
25444 |
|
25445 | |
25446 |
|
25447 |
|
25448 | className: propTypes.string,
|
25449 |
|
25450 | |
25451 |
|
25452 |
|
25453 |
|
25454 |
|
25455 | component: propTypes
|
25456 |
|
25457 | .elementType,
|
25458 |
|
25459 | |
25460 |
|
25461 |
|
25462 | ContainerComponent: propTypes.elementType,
|
25463 |
|
25464 | |
25465 |
|
25466 |
|
25467 | ContainerProps: propTypes.object,
|
25468 |
|
25469 | |
25470 |
|
25471 |
|
25472 | dense: propTypes.bool,
|
25473 |
|
25474 | |
25475 |
|
25476 |
|
25477 | disabled: propTypes.bool,
|
25478 |
|
25479 | |
25480 |
|
25481 |
|
25482 | disableGutters: propTypes.bool,
|
25483 |
|
25484 | |
25485 |
|
25486 |
|
25487 | divider: propTypes.bool,
|
25488 |
|
25489 | |
25490 |
|
25491 |
|
25492 | focusVisibleClassName: propTypes.string,
|
25493 |
|
25494 | |
25495 |
|
25496 |
|
25497 | selected: propTypes.bool
|
25498 | } ;
|
25499 | var ListItem$1 = withStyles$1(styles$18, {
|
25500 | name: 'MuiListItem'
|
25501 | })(ListItem);
|
25502 |
|
25503 | var styles$19 = {
|
25504 |
|
25505 | root: {
|
25506 | minWidth: 56,
|
25507 | flexShrink: 0
|
25508 | },
|
25509 |
|
25510 |
|
25511 | alignItemsFlexStart: {
|
25512 | marginTop: 8
|
25513 | }
|
25514 | };
|
25515 | |
25516 |
|
25517 |
|
25518 |
|
25519 | var ListItemAvatar = React.forwardRef(function ListItemAvatar(props, ref) {
|
25520 | var classes = props.classes,
|
25521 | className = props.className,
|
25522 | other = _objectWithoutProperties(props, ["classes", "className"]);
|
25523 |
|
25524 | var context = React.useContext(ListContext);
|
25525 | return React.createElement("div", _extends({
|
25526 | className: clsx(classes.root, className, context.alignItems === 'flex-start' && classes.alignItemsFlexStart),
|
25527 | ref: ref
|
25528 | }, other));
|
25529 | });
|
25530 | ListItemAvatar.propTypes = {
|
25531 |
|
25532 |
|
25533 |
|
25534 |
|
25535 |
|
25536 | |
25537 |
|
25538 |
|
25539 | children: propTypes.element.isRequired,
|
25540 |
|
25541 | |
25542 |
|
25543 |
|
25544 |
|
25545 | classes: propTypes.object,
|
25546 |
|
25547 | |
25548 |
|
25549 |
|
25550 | className: propTypes.string
|
25551 | } ;
|
25552 | var ListItemAvatar$1 = withStyles$1(styles$19, {
|
25553 | name: 'MuiListItemAvatar'
|
25554 | })(ListItemAvatar);
|
25555 |
|
25556 | var styles$1a = function styles(theme) {
|
25557 | return {
|
25558 |
|
25559 | root: {
|
25560 | minWidth: 56,
|
25561 | color: theme.palette.action.active,
|
25562 | flexShrink: 0,
|
25563 | display: 'inline-flex'
|
25564 | },
|
25565 |
|
25566 |
|
25567 | alignItemsFlexStart: {
|
25568 | marginTop: 8
|
25569 | }
|
25570 | };
|
25571 | };
|
25572 | |
25573 |
|
25574 |
|
25575 |
|
25576 | var ListItemIcon = React.forwardRef(function ListItemIcon(props, ref) {
|
25577 | var classes = props.classes,
|
25578 | className = props.className,
|
25579 | other = _objectWithoutProperties(props, ["classes", "className"]);
|
25580 |
|
25581 | var context = React.useContext(ListContext);
|
25582 | return React.createElement("div", _extends({
|
25583 | className: clsx(classes.root, className, context.alignItems === 'flex-start' && classes.alignItemsFlexStart),
|
25584 | ref: ref
|
25585 | }, other));
|
25586 | });
|
25587 | ListItemIcon.propTypes = {
|
25588 |
|
25589 |
|
25590 |
|
25591 |
|
25592 |
|
25593 | |
25594 |
|
25595 |
|
25596 |
|
25597 | children: propTypes.node,
|
25598 |
|
25599 | |
25600 |
|
25601 |
|
25602 |
|
25603 | classes: propTypes.object,
|
25604 |
|
25605 | |
25606 |
|
25607 |
|
25608 | className: propTypes.string
|
25609 | } ;
|
25610 | var ListItemIcon$1 = withStyles$1(styles$1a, {
|
25611 | name: 'MuiListItemIcon'
|
25612 | })(ListItemIcon);
|
25613 |
|
25614 | var styles$1b = {
|
25615 |
|
25616 | root: {
|
25617 | position: 'absolute',
|
25618 | right: 16,
|
25619 | top: '50%',
|
25620 | transform: 'translateY(-50%)'
|
25621 | }
|
25622 | };
|
25623 | |
25624 |
|
25625 |
|
25626 |
|
25627 | var ListItemSecondaryAction = React.forwardRef(function ListItemSecondaryAction(props, ref) {
|
25628 | var classes = props.classes,
|
25629 | className = props.className,
|
25630 | other = _objectWithoutProperties(props, ["classes", "className"]);
|
25631 |
|
25632 | return React.createElement("div", _extends({
|
25633 | className: clsx(classes.root, className),
|
25634 | ref: ref
|
25635 | }, other));
|
25636 | });
|
25637 | ListItemSecondaryAction.propTypes = {
|
25638 |
|
25639 |
|
25640 |
|
25641 |
|
25642 |
|
25643 | |
25644 |
|
25645 |
|
25646 | children: propTypes.node,
|
25647 |
|
25648 | |
25649 |
|
25650 |
|
25651 |
|
25652 | classes: propTypes.object,
|
25653 |
|
25654 | |
25655 |
|
25656 |
|
25657 | className: propTypes.string
|
25658 | } ;
|
25659 | ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
|
25660 | var ListItemSecondaryAction$1 = withStyles$1(styles$1b, {
|
25661 | name: 'MuiListItemSecondaryAction'
|
25662 | })(ListItemSecondaryAction);
|
25663 |
|
25664 | var styles$1c = {
|
25665 |
|
25666 | root: {
|
25667 | flex: '1 1 auto',
|
25668 | minWidth: 0,
|
25669 | marginTop: 4,
|
25670 | marginBottom: 4
|
25671 | },
|
25672 |
|
25673 |
|
25674 | multiline: {
|
25675 | marginTop: 6,
|
25676 | marginBottom: 6
|
25677 | },
|
25678 |
|
25679 |
|
25680 | dense: {},
|
25681 |
|
25682 |
|
25683 | inset: {
|
25684 | paddingLeft: 56
|
25685 | },
|
25686 |
|
25687 |
|
25688 | primary: {},
|
25689 |
|
25690 |
|
25691 | secondary: {}
|
25692 | };
|
25693 | var ListItemText = React.forwardRef(function ListItemText(props, ref) {
|
25694 | var children = props.children,
|
25695 | classes = props.classes,
|
25696 | className = props.className,
|
25697 | _props$disableTypogra = props.disableTypography,
|
25698 | disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
|
25699 | _props$inset = props.inset,
|
25700 | inset = _props$inset === void 0 ? false : _props$inset,
|
25701 | primaryProp = props.primary,
|
25702 | primaryTypographyProps = props.primaryTypographyProps,
|
25703 | secondaryProp = props.secondary,
|
25704 | secondaryTypographyProps = props.secondaryTypographyProps,
|
25705 | other = _objectWithoutProperties(props, ["children", "classes", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"]);
|
25706 |
|
25707 | var _React$useContext = React.useContext(ListContext),
|
25708 | dense = _React$useContext.dense;
|
25709 |
|
25710 | var primary = primaryProp != null ? primaryProp : children;
|
25711 |
|
25712 | if (primary != null && primary.type !== Typography$1 && !disableTypography) {
|
25713 | primary = React.createElement(Typography$1, _extends({
|
25714 | variant: dense ? 'body2' : 'body1',
|
25715 | className: classes.primary,
|
25716 | component: "span",
|
25717 | display: "block"
|
25718 | }, primaryTypographyProps), primary);
|
25719 | }
|
25720 |
|
25721 | var secondary = secondaryProp;
|
25722 |
|
25723 | if (secondary != null && secondary.type !== Typography$1 && !disableTypography) {
|
25724 | secondary = React.createElement(Typography$1, _extends({
|
25725 | variant: "body2",
|
25726 | className: classes.secondary,
|
25727 | color: "textSecondary",
|
25728 | display: "block"
|
25729 | }, secondaryTypographyProps), secondary);
|
25730 | }
|
25731 |
|
25732 | return React.createElement("div", _extends({
|
25733 | className: clsx(classes.root, className, dense && classes.dense, inset && classes.inset, primary && secondary && classes.multiline),
|
25734 | ref: ref
|
25735 | }, other), primary, secondary);
|
25736 | });
|
25737 | ListItemText.propTypes = {
|
25738 |
|
25739 |
|
25740 |
|
25741 |
|
25742 |
|
25743 | |
25744 |
|
25745 |
|
25746 | children: propTypes.node,
|
25747 |
|
25748 | |
25749 |
|
25750 |
|
25751 |
|
25752 | classes: propTypes.object,
|
25753 |
|
25754 | |
25755 |
|
25756 |
|
25757 | className: propTypes.string,
|
25758 |
|
25759 | |
25760 |
|
25761 |
|
25762 |
|
25763 |
|
25764 |
|
25765 | disableTypography: propTypes.bool,
|
25766 |
|
25767 | |
25768 |
|
25769 |
|
25770 |
|
25771 | inset: propTypes.bool,
|
25772 |
|
25773 | |
25774 |
|
25775 |
|
25776 | primary: propTypes.node,
|
25777 |
|
25778 | |
25779 |
|
25780 |
|
25781 |
|
25782 | primaryTypographyProps: propTypes.object,
|
25783 |
|
25784 | |
25785 |
|
25786 |
|
25787 | secondary: propTypes.node,
|
25788 |
|
25789 | |
25790 |
|
25791 |
|
25792 |
|
25793 | secondaryTypographyProps: propTypes.object
|
25794 | } ;
|
25795 | var ListItemText$1 = withStyles$1(styles$1c, {
|
25796 | name: 'MuiListItemText'
|
25797 | })(ListItemText);
|
25798 |
|
25799 | var styles$1d = function styles(theme) {
|
25800 | return {
|
25801 |
|
25802 | root: {
|
25803 | boxSizing: 'border-box',
|
25804 | lineHeight: '48px',
|
25805 | listStyle: 'none',
|
25806 | color: theme.palette.text.secondary,
|
25807 | fontFamily: theme.typography.fontFamily,
|
25808 | fontWeight: theme.typography.fontWeightMedium,
|
25809 | fontSize: theme.typography.pxToRem(14)
|
25810 | },
|
25811 |
|
25812 |
|
25813 | colorPrimary: {
|
25814 | color: theme.palette.primary.main
|
25815 | },
|
25816 |
|
25817 |
|
25818 | colorInherit: {
|
25819 | color: 'inherit'
|
25820 | },
|
25821 |
|
25822 |
|
25823 | gutters: {
|
25824 | paddingLeft: 16,
|
25825 | paddingRight: 16
|
25826 | },
|
25827 |
|
25828 |
|
25829 | inset: {
|
25830 | paddingLeft: 72
|
25831 | },
|
25832 |
|
25833 |
|
25834 | sticky: {
|
25835 | position: 'sticky',
|
25836 | top: 0,
|
25837 | zIndex: 1,
|
25838 | backgroundColor: 'inherit'
|
25839 | }
|
25840 | };
|
25841 | };
|
25842 | var ListSubheader = React.forwardRef(function ListSubheader(props, ref) {
|
25843 | var classes = props.classes,
|
25844 | className = props.className,
|
25845 | _props$color = props.color,
|
25846 | color = _props$color === void 0 ? 'default' : _props$color,
|
25847 | _props$component = props.component,
|
25848 | Component = _props$component === void 0 ? 'li' : _props$component,
|
25849 | _props$disableGutters = props.disableGutters,
|
25850 | disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
|
25851 | _props$disableSticky = props.disableSticky,
|
25852 | disableSticky = _props$disableSticky === void 0 ? false : _props$disableSticky,
|
25853 | _props$inset = props.inset,
|
25854 | inset = _props$inset === void 0 ? false : _props$inset,
|
25855 | other = _objectWithoutProperties(props, ["classes", "className", "color", "component", "disableGutters", "disableSticky", "inset"]);
|
25856 |
|
25857 | return React.createElement(Component, _extends({
|
25858 | className: clsx(classes.root, className, color !== 'default' && classes["color".concat(capitalize(color))], inset && classes.inset, !disableSticky && classes.sticky, !disableGutters && classes.gutters),
|
25859 | ref: ref
|
25860 | }, other));
|
25861 | });
|
25862 | ListSubheader.propTypes = {
|
25863 | |
25864 |
|
25865 |
|
25866 | children: propTypes.node,
|
25867 |
|
25868 | |
25869 |
|
25870 |
|
25871 |
|
25872 | classes: propTypes.object.isRequired,
|
25873 |
|
25874 | |
25875 |
|
25876 |
|
25877 | className: propTypes.string,
|
25878 |
|
25879 | |
25880 |
|
25881 |
|
25882 | color: propTypes.oneOf(['default', 'primary', 'inherit']),
|
25883 |
|
25884 | |
25885 |
|
25886 |
|
25887 |
|
25888 | component: propTypes
|
25889 |
|
25890 | .elementType,
|
25891 |
|
25892 | |
25893 |
|
25894 |
|
25895 | disableGutters: propTypes.bool,
|
25896 |
|
25897 | |
25898 |
|
25899 |
|
25900 | disableSticky: propTypes.bool,
|
25901 |
|
25902 | |
25903 |
|
25904 |
|
25905 | inset: propTypes.bool
|
25906 | } ;
|
25907 | var ListSubheader$1 = withStyles$1(styles$1d, {
|
25908 | name: 'MuiListSubheader'
|
25909 | })(ListSubheader);
|
25910 |
|
25911 | function getOffsetTop(rect, vertical) {
|
25912 | var offset = 0;
|
25913 |
|
25914 | if (typeof vertical === 'number') {
|
25915 | offset = vertical;
|
25916 | } else if (vertical === 'center') {
|
25917 | offset = rect.height / 2;
|
25918 | } else if (vertical === 'bottom') {
|
25919 | offset = rect.height;
|
25920 | }
|
25921 |
|
25922 | return offset;
|
25923 | }
|
25924 | function getOffsetLeft(rect, horizontal) {
|
25925 | var offset = 0;
|
25926 |
|
25927 | if (typeof horizontal === 'number') {
|
25928 | offset = horizontal;
|
25929 | } else if (horizontal === 'center') {
|
25930 | offset = rect.width / 2;
|
25931 | } else if (horizontal === 'right') {
|
25932 | offset = rect.width;
|
25933 | }
|
25934 |
|
25935 | return offset;
|
25936 | }
|
25937 |
|
25938 | function getTransformOriginValue(transformOrigin) {
|
25939 | return [transformOrigin.horizontal, transformOrigin.vertical].map(function (n) {
|
25940 | return typeof n === 'number' ? "".concat(n, "px") : n;
|
25941 | }).join(' ');
|
25942 | }
|
25943 |
|
25944 |
|
25945 | function getScrollParent(parent, child) {
|
25946 | var element = child;
|
25947 | var scrollTop = 0;
|
25948 |
|
25949 | while (element && element !== parent) {
|
25950 | element = element.parentElement;
|
25951 | scrollTop += element.scrollTop;
|
25952 | }
|
25953 |
|
25954 | return scrollTop;
|
25955 | }
|
25956 |
|
25957 | function getAnchorEl(anchorEl) {
|
25958 | return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
|
25959 | }
|
25960 |
|
25961 | var styles$1e = {
|
25962 |
|
25963 | root: {},
|
25964 |
|
25965 |
|
25966 | paper: {
|
25967 | position: 'absolute',
|
25968 | overflowY: 'auto',
|
25969 | overflowX: 'hidden',
|
25970 |
|
25971 |
|
25972 | minWidth: 16,
|
25973 | minHeight: 16,
|
25974 | maxWidth: 'calc(100% - 32px)',
|
25975 | maxHeight: 'calc(100% - 32px)',
|
25976 |
|
25977 | outline: 0
|
25978 | }
|
25979 | };
|
25980 | var Popover = React.forwardRef(function Popover(props, ref) {
|
25981 | var action = props.action,
|
25982 | anchorEl = props.anchorEl,
|
25983 | _props$anchorOrigin = props.anchorOrigin,
|
25984 | anchorOrigin = _props$anchorOrigin === void 0 ? {
|
25985 | vertical: 'top',
|
25986 | horizontal: 'left'
|
25987 | } : _props$anchorOrigin,
|
25988 | anchorPosition = props.anchorPosition,
|
25989 | _props$anchorReferenc = props.anchorReference,
|
25990 | anchorReference = _props$anchorReferenc === void 0 ? 'anchorEl' : _props$anchorReferenc,
|
25991 | children = props.children,
|
25992 | classes = props.classes,
|
25993 | className = props.className,
|
25994 | containerProp = props.container,
|
25995 | _props$elevation = props.elevation,
|
25996 | elevation = _props$elevation === void 0 ? 8 : _props$elevation,
|
25997 | getContentAnchorEl = props.getContentAnchorEl,
|
25998 | _props$marginThreshol = props.marginThreshold,
|
25999 | marginThreshold = _props$marginThreshol === void 0 ? 16 : _props$marginThreshol,
|
26000 | onEnter = props.onEnter,
|
26001 | onEntered = props.onEntered,
|
26002 | onEntering = props.onEntering,
|
26003 | onExit = props.onExit,
|
26004 | onExited = props.onExited,
|
26005 | onExiting = props.onExiting,
|
26006 | open = props.open,
|
26007 | _props$PaperProps = props.PaperProps,
|
26008 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
26009 | _props$transformOrigi = props.transformOrigin,
|
26010 | transformOrigin = _props$transformOrigi === void 0 ? {
|
26011 | vertical: 'top',
|
26012 | horizontal: 'left'
|
26013 | } : _props$transformOrigi,
|
26014 | _props$TransitionComp = props.TransitionComponent,
|
26015 | TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
|
26016 | _props$transitionDura = props.transitionDuration,
|
26017 | transitionDurationProp = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
|
26018 | _props$TransitionProp = props.TransitionProps,
|
26019 | TransitionProps = _props$TransitionProp === void 0 ? {} : _props$TransitionProp,
|
26020 | 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"]);
|
26021 |
|
26022 | var paperRef = React.useRef();
|
26023 |
|
26024 |
|
26025 | var getAnchorOffset = React.useCallback(function (contentAnchorOffset) {
|
26026 | if (anchorReference === 'anchorPosition') {
|
26027 | {
|
26028 | if (!anchorPosition) {
|
26029 | console.error('Material-UI: You need to provide a `anchorPosition` prop when using ' + '<Popover anchorReference="anchorPosition" />.');
|
26030 | }
|
26031 | }
|
26032 |
|
26033 | return anchorPosition;
|
26034 | }
|
26035 |
|
26036 | var resolvedAnchorEl = getAnchorEl(anchorEl);
|
26037 |
|
26038 | var anchorElement = resolvedAnchorEl && resolvedAnchorEl.nodeType === 1 ? resolvedAnchorEl : ownerDocument(paperRef.current).body;
|
26039 | var anchorRect = anchorElement.getBoundingClientRect();
|
26040 |
|
26041 | {
|
26042 | var box = anchorElement.getBoundingClientRect();
|
26043 |
|
26044 | if ( box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
26045 | 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'));
|
26046 | }
|
26047 | }
|
26048 |
|
26049 | var anchorVertical = contentAnchorOffset === 0 ? anchorOrigin.vertical : 'center';
|
26050 | return {
|
26051 | top: anchorRect.top + getOffsetTop(anchorRect, anchorVertical),
|
26052 | left: anchorRect.left + getOffsetLeft(anchorRect, anchorOrigin.horizontal)
|
26053 | };
|
26054 | }, [anchorEl, anchorOrigin.horizontal, anchorOrigin.vertical, anchorPosition, anchorReference]);
|
26055 |
|
26056 | var getContentAnchorOffset = React.useCallback(function (element) {
|
26057 | var contentAnchorOffset = 0;
|
26058 |
|
26059 | if (getContentAnchorEl && anchorReference === 'anchorEl') {
|
26060 | var contentAnchorEl = getContentAnchorEl(element);
|
26061 |
|
26062 | if (contentAnchorEl && element.contains(contentAnchorEl)) {
|
26063 | var scrollTop = getScrollParent(element, contentAnchorEl);
|
26064 | contentAnchorOffset = contentAnchorEl.offsetTop + contentAnchorEl.clientHeight / 2 - scrollTop || 0;
|
26065 | }
|
26066 |
|
26067 |
|
26068 | {
|
26069 | if (anchorOrigin.vertical !== 'top') {
|
26070 | 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'));
|
26071 | }
|
26072 | }
|
26073 | }
|
26074 |
|
26075 | return contentAnchorOffset;
|
26076 | }, [anchorOrigin.vertical, anchorReference, getContentAnchorEl]);
|
26077 |
|
26078 |
|
26079 | var getTransformOrigin = React.useCallback(function (elemRect) {
|
26080 | var contentAnchorOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
26081 | return {
|
26082 | vertical: getOffsetTop(elemRect, transformOrigin.vertical) + contentAnchorOffset,
|
26083 | horizontal: getOffsetLeft(elemRect, transformOrigin.horizontal)
|
26084 | };
|
26085 | }, [transformOrigin.horizontal, transformOrigin.vertical]);
|
26086 | var getPositioningStyle = React.useCallback(function (element) {
|
26087 |
|
26088 | var contentAnchorOffset = getContentAnchorOffset(element);
|
26089 | var elemRect = {
|
26090 | width: element.offsetWidth,
|
26091 | height: element.offsetHeight
|
26092 | };
|
26093 |
|
26094 | var elemTransformOrigin = getTransformOrigin(elemRect, contentAnchorOffset);
|
26095 |
|
26096 | if (anchorReference === 'none') {
|
26097 | return {
|
26098 | top: null,
|
26099 | left: null,
|
26100 | transformOrigin: getTransformOriginValue(elemTransformOrigin)
|
26101 | };
|
26102 | }
|
26103 |
|
26104 |
|
26105 | var anchorOffset = getAnchorOffset(contentAnchorOffset);
|
26106 |
|
26107 | var top = anchorOffset.top - elemTransformOrigin.vertical;
|
26108 | var left = anchorOffset.left - elemTransformOrigin.horizontal;
|
26109 | var bottom = top + elemRect.height;
|
26110 | var right = left + elemRect.width;
|
26111 |
|
26112 | var containerWindow = ownerWindow(getAnchorEl(anchorEl));
|
26113 |
|
26114 | var heightThreshold = containerWindow.innerHeight - marginThreshold;
|
26115 | var widthThreshold = containerWindow.innerWidth - marginThreshold;
|
26116 |
|
26117 | if (top < marginThreshold) {
|
26118 | var diff = top - marginThreshold;
|
26119 | top -= diff;
|
26120 | elemTransformOrigin.vertical += diff;
|
26121 | } else if (bottom > heightThreshold) {
|
26122 | var _diff = bottom - heightThreshold;
|
26123 |
|
26124 | top -= _diff;
|
26125 | elemTransformOrigin.vertical += _diff;
|
26126 | }
|
26127 |
|
26128 | {
|
26129 | if (elemRect.height > heightThreshold && elemRect.height && heightThreshold) {
|
26130 | 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'));
|
26131 | }
|
26132 | }
|
26133 |
|
26134 |
|
26135 | if (left < marginThreshold) {
|
26136 | var _diff2 = left - marginThreshold;
|
26137 |
|
26138 | left -= _diff2;
|
26139 | elemTransformOrigin.horizontal += _diff2;
|
26140 | } else if (right > widthThreshold) {
|
26141 | var _diff3 = right - widthThreshold;
|
26142 |
|
26143 | left -= _diff3;
|
26144 | elemTransformOrigin.horizontal += _diff3;
|
26145 | }
|
26146 |
|
26147 | return {
|
26148 | top: "".concat(Math.round(top), "px"),
|
26149 | left: "".concat(Math.round(left), "px"),
|
26150 | transformOrigin: getTransformOriginValue(elemTransformOrigin)
|
26151 | };
|
26152 | }, [anchorEl, anchorReference, getAnchorOffset, getContentAnchorOffset, getTransformOrigin, marginThreshold]);
|
26153 | var setPositioningStyles = React.useCallback(function () {
|
26154 | var element = paperRef.current;
|
26155 |
|
26156 | if (!element) {
|
26157 | return;
|
26158 | }
|
26159 |
|
26160 | var positioning = getPositioningStyle(element);
|
26161 |
|
26162 | if (positioning.top !== null) {
|
26163 | element.style.top = positioning.top;
|
26164 | }
|
26165 |
|
26166 | if (positioning.left !== null) {
|
26167 | element.style.left = positioning.left;
|
26168 | }
|
26169 |
|
26170 | element.style.transformOrigin = positioning.transformOrigin;
|
26171 | }, [getPositioningStyle]);
|
26172 |
|
26173 | var handleEntering = function handleEntering(element, isAppearing) {
|
26174 | if (onEntering) {
|
26175 | onEntering(element, isAppearing);
|
26176 | }
|
26177 |
|
26178 | setPositioningStyles();
|
26179 | };
|
26180 |
|
26181 | var handlePaperRef = React.useCallback(function (instance) {
|
26182 |
|
26183 | paperRef.current = ReactDOM.findDOMNode(instance);
|
26184 | }, []);
|
26185 | React.useEffect(function () {
|
26186 | if (open) {
|
26187 | setPositioningStyles();
|
26188 | }
|
26189 | });
|
26190 | React.useImperativeHandle(action, function () {
|
26191 | return open ? {
|
26192 | updatePosition: function updatePosition() {
|
26193 | setPositioningStyles();
|
26194 | }
|
26195 | } : null;
|
26196 | }, [open, setPositioningStyles]);
|
26197 | React.useEffect(function () {
|
26198 | if (!open) {
|
26199 | return undefined;
|
26200 | }
|
26201 |
|
26202 | var handleResize = debounce(function () {
|
26203 | setPositioningStyles();
|
26204 | });
|
26205 | window.addEventListener('resize', handleResize);
|
26206 | return function () {
|
26207 | handleResize.clear();
|
26208 | window.removeEventListener('resize', handleResize);
|
26209 | };
|
26210 | }, [open, setPositioningStyles]);
|
26211 | var transitionDuration = transitionDurationProp;
|
26212 |
|
26213 | if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
|
26214 | transitionDuration = undefined;
|
26215 | }
|
26216 |
|
26217 |
|
26218 |
|
26219 |
|
26220 | var container = containerProp || (anchorEl ? ownerDocument(getAnchorEl(anchorEl)).body : undefined);
|
26221 | return React.createElement(Modal, _extends({
|
26222 | container: container,
|
26223 | open: open,
|
26224 | ref: ref,
|
26225 | BackdropProps: {
|
26226 | invisible: true
|
26227 | },
|
26228 | className: clsx(classes.root, className)
|
26229 | }, other), React.createElement(TransitionComponent, _extends({
|
26230 | appear: true,
|
26231 | in: open,
|
26232 | onEnter: onEnter,
|
26233 | onEntered: onEntered,
|
26234 | onExit: onExit,
|
26235 | onExited: onExited,
|
26236 | onExiting: onExiting,
|
26237 | timeout: transitionDuration
|
26238 | }, TransitionProps, {
|
26239 | onEntering: createChainedFunction(handleEntering, TransitionProps.onEntering)
|
26240 | }), React.createElement(Paper$1, _extends({
|
26241 | elevation: elevation,
|
26242 | ref: handlePaperRef
|
26243 | }, PaperProps, {
|
26244 | className: clsx(classes.paper, PaperProps.className)
|
26245 | }), children)));
|
26246 | });
|
26247 | Popover.propTypes = {
|
26248 |
|
26249 |
|
26250 |
|
26251 |
|
26252 |
|
26253 | |
26254 |
|
26255 |
|
26256 |
|
26257 | action: refType,
|
26258 |
|
26259 | |
26260 |
|
26261 |
|
26262 |
|
26263 | anchorEl: chainPropTypes(propTypes.oneOfType([HTMLElementType, propTypes.func]), function (props) {
|
26264 | if (props.open && (!props.anchorReference || props.anchorReference === 'anchorEl')) {
|
26265 | var resolvedAnchorEl = getAnchorEl(props.anchorEl);
|
26266 |
|
26267 | if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
|
26268 | var box = resolvedAnchorEl.getBoundingClientRect();
|
26269 |
|
26270 | if ( box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
26271 | 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'));
|
26272 | }
|
26273 | } else {
|
26274 | 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'));
|
26275 | }
|
26276 | }
|
26277 |
|
26278 | return null;
|
26279 | }),
|
26280 |
|
26281 | |
26282 |
|
26283 |
|
26284 |
|
26285 |
|
26286 |
|
26287 |
|
26288 |
|
26289 |
|
26290 | anchorOrigin: propTypes.shape({
|
26291 | horizontal: propTypes.oneOfType([propTypes.oneOf(['center', 'left', 'right']), propTypes.number]).isRequired,
|
26292 | vertical: propTypes.oneOfType([propTypes.oneOf(['bottom', 'center', 'top']), propTypes.number]).isRequired
|
26293 | }),
|
26294 |
|
26295 | |
26296 |
|
26297 |
|
26298 |
|
26299 |
|
26300 |
|
26301 | anchorPosition: propTypes.shape({
|
26302 | left: propTypes.number.isRequired,
|
26303 | top: propTypes.number.isRequired
|
26304 | }),
|
26305 |
|
26306 | |
26307 |
|
26308 |
|
26309 |
|
26310 | anchorReference: propTypes.oneOf(['anchorEl', 'anchorPosition', 'none']),
|
26311 |
|
26312 | |
26313 |
|
26314 |
|
26315 | children: propTypes.node,
|
26316 |
|
26317 | |
26318 |
|
26319 |
|
26320 |
|
26321 | classes: propTypes.object,
|
26322 |
|
26323 | |
26324 |
|
26325 |
|
26326 | className: propTypes.string,
|
26327 |
|
26328 | |
26329 |
|
26330 |
|
26331 |
|
26332 |
|
26333 |
|
26334 |
|
26335 | container: propTypes
|
26336 |
|
26337 | .oneOfType([HTMLElementType, propTypes.instanceOf(React.Component), propTypes.func]),
|
26338 |
|
26339 | |
26340 |
|
26341 |
|
26342 | elevation: propTypes.number,
|
26343 |
|
26344 | |
26345 |
|
26346 |
|
26347 |
|
26348 |
|
26349 |
|
26350 |
|
26351 |
|
26352 | getContentAnchorEl: propTypes.func,
|
26353 |
|
26354 | |
26355 |
|
26356 |
|
26357 | marginThreshold: propTypes.number,
|
26358 |
|
26359 | |
26360 |
|
26361 |
|
26362 | onClose: propTypes.func,
|
26363 |
|
26364 | |
26365 |
|
26366 |
|
26367 |
|
26368 | onEnter: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26369 |
|
26370 | |
26371 |
|
26372 |
|
26373 |
|
26374 | onEntered: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26375 |
|
26376 | |
26377 |
|
26378 |
|
26379 |
|
26380 | onEntering: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26381 |
|
26382 | |
26383 |
|
26384 |
|
26385 |
|
26386 | onExit: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26387 |
|
26388 | |
26389 |
|
26390 |
|
26391 |
|
26392 | onExited: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26393 |
|
26394 | |
26395 |
|
26396 |
|
26397 |
|
26398 | onExiting: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26399 |
|
26400 | |
26401 |
|
26402 |
|
26403 | open: propTypes.bool.isRequired,
|
26404 |
|
26405 | |
26406 |
|
26407 |
|
26408 | PaperProps: propTypes
|
26409 |
|
26410 | .shape({
|
26411 | component: elementTypeAcceptingRef$1
|
26412 | }),
|
26413 |
|
26414 | |
26415 |
|
26416 |
|
26417 |
|
26418 |
|
26419 |
|
26420 |
|
26421 |
|
26422 | transformOrigin: propTypes.shape({
|
26423 | horizontal: propTypes.oneOfType([propTypes.oneOf(['center', 'left', 'right']), propTypes.number]).isRequired,
|
26424 | vertical: propTypes.oneOfType([propTypes.oneOf(['bottom', 'center', 'top']), propTypes.number]).isRequired
|
26425 | }),
|
26426 |
|
26427 | |
26428 |
|
26429 |
|
26430 |
|
26431 | TransitionComponent: propTypes.elementType,
|
26432 |
|
26433 | |
26434 |
|
26435 |
|
26436 | transitionDuration: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.shape({
|
26437 | appear: propTypes.number,
|
26438 | enter: propTypes.number,
|
26439 | exit: propTypes.number
|
26440 | })]),
|
26441 |
|
26442 | |
26443 |
|
26444 |
|
26445 | TransitionProps: propTypes.object
|
26446 | } ;
|
26447 | var Popover$1 = withStyles$1(styles$1e, {
|
26448 | name: 'MuiPopover'
|
26449 | })(Popover);
|
26450 |
|
26451 | function nextItem(list, item, disableListWrap) {
|
26452 | if (list === item) {
|
26453 | return list.firstChild;
|
26454 | }
|
26455 |
|
26456 | if (item && item.nextElementSibling) {
|
26457 | return item.nextElementSibling;
|
26458 | }
|
26459 |
|
26460 | return disableListWrap ? null : list.firstChild;
|
26461 | }
|
26462 |
|
26463 | function previousItem(list, item, disableListWrap) {
|
26464 | if (list === item) {
|
26465 | return disableListWrap ? list.firstChild : list.lastChild;
|
26466 | }
|
26467 |
|
26468 | if (item && item.previousElementSibling) {
|
26469 | return item.previousElementSibling;
|
26470 | }
|
26471 |
|
26472 | return disableListWrap ? null : list.lastChild;
|
26473 | }
|
26474 |
|
26475 | function textCriteriaMatches(nextFocus, textCriteria) {
|
26476 | if (textCriteria === undefined) {
|
26477 | return true;
|
26478 | }
|
26479 |
|
26480 | var text = nextFocus.innerText;
|
26481 |
|
26482 | if (text === undefined) {
|
26483 |
|
26484 | text = nextFocus.textContent;
|
26485 | }
|
26486 |
|
26487 | text = text.trim().toLowerCase();
|
26488 |
|
26489 | if (text.length === 0) {
|
26490 | return false;
|
26491 | }
|
26492 |
|
26493 | if (textCriteria.repeating) {
|
26494 | return text[0] === textCriteria.keys[0];
|
26495 | }
|
26496 |
|
26497 | return text.indexOf(textCriteria.keys.join('')) === 0;
|
26498 | }
|
26499 |
|
26500 | function moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, traversalFunction, textCriteria) {
|
26501 | var wrappedOnce = false;
|
26502 | var nextFocus = traversalFunction(list, currentFocus, currentFocus ? disableListWrap : false);
|
26503 |
|
26504 | while (nextFocus) {
|
26505 |
|
26506 | if (nextFocus === list.firstChild) {
|
26507 | if (wrappedOnce) {
|
26508 | return;
|
26509 | }
|
26510 |
|
26511 | wrappedOnce = true;
|
26512 | }
|
26513 |
|
26514 |
|
26515 | var nextFocusDisabled = disabledItemsFocusable ? false : nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
|
26516 |
|
26517 | if (!nextFocus.hasAttribute('tabindex') || !textCriteriaMatches(nextFocus, textCriteria) || nextFocusDisabled) {
|
26518 |
|
26519 | nextFocus = traversalFunction(list, nextFocus, disableListWrap);
|
26520 | } else {
|
26521 | nextFocus.focus();
|
26522 | return;
|
26523 | }
|
26524 | }
|
26525 | }
|
26526 |
|
26527 | var useEnhancedEffect$7 = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
|
26528 | |
26529 |
|
26530 |
|
26531 |
|
26532 |
|
26533 |
|
26534 |
|
26535 | var MenuList = React.forwardRef(function MenuList(props, ref) {
|
26536 | var actions = props.actions,
|
26537 | _props$autoFocus = props.autoFocus,
|
26538 | autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
|
26539 | _props$autoFocusItem = props.autoFocusItem,
|
26540 | autoFocusItem = _props$autoFocusItem === void 0 ? false : _props$autoFocusItem,
|
26541 | children = props.children,
|
26542 | className = props.className,
|
26543 | _props$disabledItemsF = props.disabledItemsFocusable,
|
26544 | disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,
|
26545 | _props$disableListWra = props.disableListWrap,
|
26546 | disableListWrap = _props$disableListWra === void 0 ? false : _props$disableListWra,
|
26547 | onKeyDown = props.onKeyDown,
|
26548 | _props$variant = props.variant,
|
26549 | variant = _props$variant === void 0 ? 'selectedMenu' : _props$variant,
|
26550 | other = _objectWithoutProperties(props, ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"]);
|
26551 |
|
26552 | var listRef = React.useRef(null);
|
26553 | var textCriteriaRef = React.useRef({
|
26554 | keys: [],
|
26555 | repeating: true,
|
26556 | previousKeyMatched: true,
|
26557 | lastTime: null
|
26558 | });
|
26559 | useEnhancedEffect$7(function () {
|
26560 | if (autoFocus) {
|
26561 | listRef.current.focus();
|
26562 | }
|
26563 | }, [autoFocus]);
|
26564 | React.useImperativeHandle(actions, function () {
|
26565 | return {
|
26566 | adjustStyleForScrollbar: function adjustStyleForScrollbar(containerElement, theme) {
|
26567 |
|
26568 |
|
26569 | var noExplicitWidth = !listRef.current.style.width;
|
26570 |
|
26571 | if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
|
26572 | var scrollbarSize = "".concat(getScrollbarSize(), "px");
|
26573 | listRef.current.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
|
26574 | listRef.current.style.width = "calc(100% + ".concat(scrollbarSize, ")");
|
26575 | }
|
26576 |
|
26577 | return listRef.current;
|
26578 | }
|
26579 | };
|
26580 | }, []);
|
26581 |
|
26582 | var handleKeyDown = function handleKeyDown(event) {
|
26583 | var list = listRef.current;
|
26584 | var key = event.key;
|
26585 | |
26586 |
|
26587 |
|
26588 |
|
26589 |
|
26590 |
|
26591 |
|
26592 | var currentFocus = ownerDocument(list).activeElement;
|
26593 |
|
26594 | if (key === 'ArrowDown') {
|
26595 |
|
26596 | event.preventDefault();
|
26597 | moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, nextItem);
|
26598 | } else if (key === 'ArrowUp') {
|
26599 | event.preventDefault();
|
26600 | moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, previousItem);
|
26601 | } else if (key === 'Home') {
|
26602 | event.preventDefault();
|
26603 | moveFocus(list, null, disableListWrap, disabledItemsFocusable, nextItem);
|
26604 | } else if (key === 'End') {
|
26605 | event.preventDefault();
|
26606 | moveFocus(list, null, disableListWrap, disabledItemsFocusable, previousItem);
|
26607 | } else if (key.length === 1) {
|
26608 | var criteria = textCriteriaRef.current;
|
26609 | var lowerKey = key.toLowerCase();
|
26610 | var currTime = performance.now();
|
26611 |
|
26612 | if (criteria.keys.length > 0) {
|
26613 |
|
26614 | if (currTime - criteria.lastTime > 500) {
|
26615 | criteria.keys = [];
|
26616 | criteria.repeating = true;
|
26617 | criteria.previousKeyMatched = true;
|
26618 | } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
|
26619 | criteria.repeating = false;
|
26620 | }
|
26621 | }
|
26622 |
|
26623 | criteria.lastTime = currTime;
|
26624 | criteria.keys.push(lowerKey);
|
26625 | var keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
|
26626 |
|
26627 | if (criteria.previousKeyMatched && (keepFocusOnCurrent || moveFocus(list, currentFocus, false, disabledItemsFocusable, nextItem, criteria))) {
|
26628 | event.preventDefault();
|
26629 | } else {
|
26630 | criteria.previousKeyMatched = false;
|
26631 | }
|
26632 | }
|
26633 |
|
26634 | if (onKeyDown) {
|
26635 | onKeyDown(event);
|
26636 | }
|
26637 | };
|
26638 |
|
26639 | var handleOwnRef = React.useCallback(function (instance) {
|
26640 |
|
26641 | listRef.current = ReactDOM.findDOMNode(instance);
|
26642 | }, []);
|
26643 | var handleRef = useForkRef(handleOwnRef, ref);
|
26644 | |
26645 |
|
26646 |
|
26647 |
|
26648 |
|
26649 |
|
26650 | var activeItemIndex = -1;
|
26651 |
|
26652 |
|
26653 |
|
26654 | React.Children.forEach(children, function (child, index) {
|
26655 | if (! React.isValidElement(child)) {
|
26656 | return;
|
26657 | }
|
26658 |
|
26659 | {
|
26660 | if (reactIs_2(child)) {
|
26661 | console.error(["Material-UI: The Menu component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
26662 | }
|
26663 | }
|
26664 |
|
26665 | if (!child.props.disabled) {
|
26666 | if (variant === 'selectedMenu' && child.props.selected) {
|
26667 | activeItemIndex = index;
|
26668 | } else if (activeItemIndex === -1) {
|
26669 | activeItemIndex = index;
|
26670 | }
|
26671 | }
|
26672 | });
|
26673 | var items = React.Children.map(children, function (child, index) {
|
26674 | if (index === activeItemIndex) {
|
26675 | var newChildProps = {};
|
26676 |
|
26677 | if (autoFocusItem) {
|
26678 | newChildProps.autoFocus = true;
|
26679 | }
|
26680 |
|
26681 | if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
|
26682 | newChildProps.tabIndex = 0;
|
26683 | }
|
26684 |
|
26685 | return React.cloneElement(child, newChildProps);
|
26686 | }
|
26687 |
|
26688 | return child;
|
26689 | });
|
26690 | return React.createElement(List$1, _extends({
|
26691 | role: "menu",
|
26692 | ref: handleRef,
|
26693 | className: className,
|
26694 | onKeyDown: handleKeyDown,
|
26695 | tabIndex: autoFocus ? 0 : -1
|
26696 | }, other), items);
|
26697 | });
|
26698 | MenuList.propTypes = {
|
26699 |
|
26700 |
|
26701 |
|
26702 |
|
26703 |
|
26704 | |
26705 |
|
26706 |
|
26707 | autoFocus: propTypes.bool,
|
26708 |
|
26709 | |
26710 |
|
26711 |
|
26712 |
|
26713 | autoFocusItem: propTypes.bool,
|
26714 |
|
26715 | |
26716 |
|
26717 |
|
26718 | children: propTypes.node,
|
26719 |
|
26720 | |
26721 |
|
26722 |
|
26723 | className: propTypes.string,
|
26724 |
|
26725 | |
26726 |
|
26727 |
|
26728 | disabledItemsFocusable: propTypes.bool,
|
26729 |
|
26730 | |
26731 |
|
26732 |
|
26733 | disableListWrap: propTypes.bool,
|
26734 |
|
26735 | |
26736 |
|
26737 |
|
26738 | onKeyDown: propTypes.func,
|
26739 |
|
26740 | |
26741 |
|
26742 |
|
26743 |
|
26744 | variant: propTypes.oneOf(['menu', 'selectedMenu'])
|
26745 | } ;
|
26746 |
|
26747 | var RTL_ORIGIN = {
|
26748 | vertical: 'top',
|
26749 | horizontal: 'right'
|
26750 | };
|
26751 | var LTR_ORIGIN = {
|
26752 | vertical: 'top',
|
26753 | horizontal: 'left'
|
26754 | };
|
26755 | var styles$1f = {
|
26756 |
|
26757 | paper: {
|
26758 |
|
26759 |
|
26760 |
|
26761 | maxHeight: 'calc(100% - 96px)',
|
26762 |
|
26763 | WebkitOverflowScrolling: 'touch'
|
26764 | },
|
26765 |
|
26766 |
|
26767 | list: {
|
26768 |
|
26769 | outline: 0
|
26770 | }
|
26771 | };
|
26772 | var Menu = React.forwardRef(function Menu(props, ref) {
|
26773 | var _props$autoFocus = props.autoFocus,
|
26774 | autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
|
26775 | children = props.children,
|
26776 | classes = props.classes,
|
26777 | _props$disableAutoFoc = props.disableAutoFocusItem,
|
26778 | disableAutoFocusItem = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
|
26779 | _props$MenuListProps = props.MenuListProps,
|
26780 | MenuListProps = _props$MenuListProps === void 0 ? {} : _props$MenuListProps,
|
26781 | onClose = props.onClose,
|
26782 | onEnteringProp = props.onEntering,
|
26783 | open = props.open,
|
26784 | _props$PaperProps = props.PaperProps,
|
26785 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
26786 | PopoverClasses = props.PopoverClasses,
|
26787 | _props$transitionDura = props.transitionDuration,
|
26788 | transitionDuration = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
|
26789 | _props$TransitionProp = props.TransitionProps;
|
26790 | _props$TransitionProp = _props$TransitionProp === void 0 ? {} : _props$TransitionProp;
|
26791 |
|
26792 | var onEntering = _props$TransitionProp.onEntering,
|
26793 | TransitionProps = _objectWithoutProperties(_props$TransitionProp, ["onEntering"]),
|
26794 | _props$variant = props.variant,
|
26795 | variant = _props$variant === void 0 ? 'selectedMenu' : _props$variant,
|
26796 | other = _objectWithoutProperties(props, ["autoFocus", "children", "classes", "disableAutoFocusItem", "MenuListProps", "onClose", "onEntering", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"]);
|
26797 |
|
26798 | var theme = useTheme$1();
|
26799 | var autoFocusItem = autoFocus && !disableAutoFocusItem && open;
|
26800 | var menuListActionsRef = React.useRef(null);
|
26801 | var contentAnchorRef = React.useRef(null);
|
26802 |
|
26803 | var getContentAnchorEl = function getContentAnchorEl() {
|
26804 | return contentAnchorRef.current;
|
26805 | };
|
26806 |
|
26807 | var handleEntering = function handleEntering(element, isAppearing) {
|
26808 | if (menuListActionsRef.current) {
|
26809 | menuListActionsRef.current.adjustStyleForScrollbar(element, theme);
|
26810 | }
|
26811 |
|
26812 | if (onEnteringProp) {
|
26813 | onEnteringProp(element, isAppearing);
|
26814 | }
|
26815 |
|
26816 | if (onEntering) {
|
26817 | onEntering(element, isAppearing);
|
26818 | }
|
26819 | };
|
26820 |
|
26821 | var handleListKeyDown = function handleListKeyDown(event) {
|
26822 | if (event.key === 'Tab') {
|
26823 | event.preventDefault();
|
26824 |
|
26825 | if (onClose) {
|
26826 | onClose(event, 'tabKeyDown');
|
26827 | }
|
26828 | }
|
26829 | };
|
26830 | |
26831 |
|
26832 |
|
26833 |
|
26834 |
|
26835 |
|
26836 |
|
26837 | var activeItemIndex = -1;
|
26838 |
|
26839 |
|
26840 |
|
26841 | React.Children.map(children, function (child, index) {
|
26842 | if (! React.isValidElement(child)) {
|
26843 | return;
|
26844 | }
|
26845 |
|
26846 | {
|
26847 | if (reactIs_2(child)) {
|
26848 | console.error(["Material-UI: The Menu component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
26849 | }
|
26850 | }
|
26851 |
|
26852 | if (!child.props.disabled) {
|
26853 | if (variant !== "menu" && child.props.selected) {
|
26854 | activeItemIndex = index;
|
26855 | } else if (activeItemIndex === -1) {
|
26856 | activeItemIndex = index;
|
26857 | }
|
26858 | }
|
26859 | });
|
26860 | var items = React.Children.map(children, function (child, index) {
|
26861 | if (index === activeItemIndex) {
|
26862 | return React.cloneElement(child, {
|
26863 | ref: function ref(instance) {
|
26864 |
|
26865 | contentAnchorRef.current = ReactDOM.findDOMNode(instance);
|
26866 | setRef(child.ref, instance);
|
26867 | }
|
26868 | });
|
26869 | }
|
26870 |
|
26871 | return child;
|
26872 | });
|
26873 | return React.createElement(Popover$1, _extends({
|
26874 | getContentAnchorEl: getContentAnchorEl,
|
26875 | classes: PopoverClasses,
|
26876 | onClose: onClose,
|
26877 | TransitionProps: _extends({
|
26878 | onEntering: handleEntering
|
26879 | }, TransitionProps),
|
26880 | anchorOrigin: theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN,
|
26881 | transformOrigin: theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN,
|
26882 | PaperProps: _extends({}, PaperProps, {
|
26883 | classes: _extends({}, PaperProps.classes, {
|
26884 | root: classes.paper
|
26885 | })
|
26886 | }),
|
26887 | open: open,
|
26888 | ref: ref,
|
26889 | transitionDuration: transitionDuration
|
26890 | }, other), React.createElement(MenuList, _extends({
|
26891 | onKeyDown: handleListKeyDown,
|
26892 | actions: menuListActionsRef,
|
26893 | autoFocus: autoFocus && (activeItemIndex === -1 || disableAutoFocusItem),
|
26894 | autoFocusItem: autoFocusItem,
|
26895 | variant: variant
|
26896 | }, MenuListProps, {
|
26897 | className: clsx(classes.list, MenuListProps.className)
|
26898 | }), items));
|
26899 | });
|
26900 | Menu.propTypes = {
|
26901 |
|
26902 |
|
26903 |
|
26904 |
|
26905 |
|
26906 | |
26907 |
|
26908 |
|
26909 |
|
26910 | anchorEl: propTypes
|
26911 |
|
26912 | .oneOfType([HTMLElementType, propTypes.func]),
|
26913 |
|
26914 | |
26915 |
|
26916 |
|
26917 |
|
26918 |
|
26919 |
|
26920 | autoFocus: propTypes.bool,
|
26921 |
|
26922 | |
26923 |
|
26924 |
|
26925 | children: propTypes.node,
|
26926 |
|
26927 | |
26928 |
|
26929 |
|
26930 |
|
26931 | classes: propTypes.object,
|
26932 |
|
26933 | |
26934 |
|
26935 |
|
26936 |
|
26937 |
|
26938 |
|
26939 | disableAutoFocusItem: propTypes.bool,
|
26940 |
|
26941 | |
26942 |
|
26943 |
|
26944 | MenuListProps: propTypes.object,
|
26945 |
|
26946 | |
26947 |
|
26948 |
|
26949 |
|
26950 |
|
26951 |
|
26952 | onClose: propTypes.func,
|
26953 |
|
26954 | |
26955 |
|
26956 |
|
26957 |
|
26958 | onEnter: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26959 |
|
26960 | |
26961 |
|
26962 |
|
26963 |
|
26964 | onEntered: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26965 |
|
26966 | |
26967 |
|
26968 |
|
26969 |
|
26970 | onEntering: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26971 |
|
26972 | |
26973 |
|
26974 |
|
26975 |
|
26976 | onExit: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26977 |
|
26978 | |
26979 |
|
26980 |
|
26981 |
|
26982 | onExited: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26983 |
|
26984 | |
26985 |
|
26986 |
|
26987 |
|
26988 | onExiting: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
26989 |
|
26990 | |
26991 |
|
26992 |
|
26993 | open: propTypes.bool.isRequired,
|
26994 |
|
26995 | |
26996 |
|
26997 |
|
26998 | PaperProps: propTypes.object,
|
26999 |
|
27000 | |
27001 |
|
27002 |
|
27003 | PopoverClasses: propTypes.object,
|
27004 |
|
27005 | |
27006 |
|
27007 |
|
27008 | transitionDuration: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.shape({
|
27009 | appear: propTypes.number,
|
27010 | enter: propTypes.number,
|
27011 | exit: propTypes.number
|
27012 | })]),
|
27013 |
|
27014 | |
27015 |
|
27016 |
|
27017 |
|
27018 | TransitionProps: propTypes.object,
|
27019 |
|
27020 | |
27021 |
|
27022 |
|
27023 |
|
27024 | variant: propTypes.oneOf(['menu', 'selectedMenu'])
|
27025 | } ;
|
27026 | var Menu$1 = withStyles$1(styles$1f, {
|
27027 | name: 'MuiMenu'
|
27028 | })(Menu);
|
27029 |
|
27030 | var styles$1g = function styles(theme) {
|
27031 | return {
|
27032 |
|
27033 | root: _extends({}, theme.typography.body1, _defineProperty({
|
27034 | minHeight: 48,
|
27035 | paddingTop: 6,
|
27036 | paddingBottom: 6,
|
27037 | boxSizing: 'border-box',
|
27038 | width: 'auto',
|
27039 | overflow: 'hidden',
|
27040 | whiteSpace: 'nowrap'
|
27041 | }, theme.breakpoints.up('sm'), {
|
27042 | minHeight: 'auto'
|
27043 | })),
|
27044 |
|
27045 |
|
27046 |
|
27047 | gutters: {},
|
27048 |
|
27049 |
|
27050 | selected: {},
|
27051 |
|
27052 |
|
27053 | dense: _extends({}, theme.typography.body2, {
|
27054 | minHeight: 'auto'
|
27055 | })
|
27056 | };
|
27057 | };
|
27058 | var MenuItem = React.forwardRef(function MenuItem(props, ref) {
|
27059 | var classes = props.classes,
|
27060 | className = props.className,
|
27061 | _props$component = props.component,
|
27062 | component = _props$component === void 0 ? 'li' : _props$component,
|
27063 | _props$disableGutters = props.disableGutters,
|
27064 | disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
|
27065 | ListItemClasses = props.ListItemClasses,
|
27066 | _props$role = props.role,
|
27067 | role = _props$role === void 0 ? 'menuitem' : _props$role,
|
27068 | selected = props.selected,
|
27069 | tabIndexProp = props.tabIndex,
|
27070 | other = _objectWithoutProperties(props, ["classes", "className", "component", "disableGutters", "ListItemClasses", "role", "selected", "tabIndex"]);
|
27071 |
|
27072 | var tabIndex;
|
27073 |
|
27074 | if (!props.disabled) {
|
27075 | tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
|
27076 | }
|
27077 |
|
27078 | return React.createElement(ListItem$1, _extends({
|
27079 | button: true,
|
27080 | role: role,
|
27081 | tabIndex: tabIndex,
|
27082 | component: component,
|
27083 | selected: selected,
|
27084 | disableGutters: disableGutters,
|
27085 | classes: _extends({
|
27086 | dense: classes.dense
|
27087 | }, ListItemClasses),
|
27088 | className: clsx(classes.root, className, selected && classes.selected, !disableGutters && classes.gutters),
|
27089 | ref: ref
|
27090 | }, other));
|
27091 | });
|
27092 | MenuItem.propTypes = {
|
27093 | |
27094 |
|
27095 |
|
27096 | children: propTypes.node,
|
27097 |
|
27098 | |
27099 |
|
27100 |
|
27101 |
|
27102 | classes: propTypes.object.isRequired,
|
27103 |
|
27104 | |
27105 |
|
27106 |
|
27107 | className: propTypes.string,
|
27108 |
|
27109 | |
27110 |
|
27111 |
|
27112 |
|
27113 | component: propTypes
|
27114 |
|
27115 | .elementType,
|
27116 |
|
27117 | |
27118 |
|
27119 |
|
27120 | dense: propTypes.bool,
|
27121 |
|
27122 | |
27123 |
|
27124 |
|
27125 | disabled: propTypes.bool,
|
27126 |
|
27127 | |
27128 |
|
27129 |
|
27130 | disableGutters: propTypes.bool,
|
27131 |
|
27132 | |
27133 |
|
27134 |
|
27135 | ListItemClasses: propTypes.object,
|
27136 |
|
27137 | |
27138 |
|
27139 |
|
27140 | role: propTypes.string,
|
27141 |
|
27142 | |
27143 |
|
27144 |
|
27145 | selected: propTypes.bool,
|
27146 |
|
27147 | |
27148 |
|
27149 |
|
27150 | tabIndex: propTypes.number
|
27151 | } ;
|
27152 | var MenuItem$1 = withStyles$1(styles$1g, {
|
27153 | name: 'MuiMenuItem'
|
27154 | })(MenuItem);
|
27155 |
|
27156 | var styles$1h = function styles(theme) {
|
27157 | return {
|
27158 |
|
27159 | root: {
|
27160 | display: 'flex',
|
27161 | flexDirection: 'row',
|
27162 | justifyContent: 'space-between',
|
27163 | alignItems: 'center',
|
27164 | background: theme.palette.background.default,
|
27165 | padding: 8
|
27166 | },
|
27167 |
|
27168 |
|
27169 | positionBottom: {
|
27170 | position: 'fixed',
|
27171 | bottom: 0,
|
27172 | left: 0,
|
27173 | right: 0,
|
27174 | zIndex: theme.zIndex.mobileStepper
|
27175 | },
|
27176 |
|
27177 |
|
27178 | positionTop: {
|
27179 | position: 'fixed',
|
27180 | top: 0,
|
27181 | left: 0,
|
27182 | right: 0,
|
27183 | zIndex: theme.zIndex.mobileStepper
|
27184 | },
|
27185 |
|
27186 |
|
27187 | positionStatic: {},
|
27188 |
|
27189 |
|
27190 | dots: {
|
27191 | display: 'flex',
|
27192 | flexDirection: 'row'
|
27193 | },
|
27194 |
|
27195 |
|
27196 | dot: {
|
27197 | backgroundColor: theme.palette.action.disabled,
|
27198 | borderRadius: '50%',
|
27199 | width: 8,
|
27200 | height: 8,
|
27201 | margin: '0 2px'
|
27202 | },
|
27203 |
|
27204 |
|
27205 | dotActive: {
|
27206 | backgroundColor: theme.palette.primary.main
|
27207 | },
|
27208 |
|
27209 |
|
27210 | progress: {
|
27211 | width: '50%'
|
27212 | }
|
27213 | };
|
27214 | };
|
27215 | var MobileStepper = React.forwardRef(function MobileStepper(props, ref) {
|
27216 | var _props$activeStep = props.activeStep,
|
27217 | activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
|
27218 | backButton = props.backButton,
|
27219 | classes = props.classes,
|
27220 | className = props.className,
|
27221 | LinearProgressProps = props.LinearProgressProps,
|
27222 | nextButton = props.nextButton,
|
27223 | _props$position = props.position,
|
27224 | position = _props$position === void 0 ? 'bottom' : _props$position,
|
27225 | steps = props.steps,
|
27226 | _props$variant = props.variant,
|
27227 | variant = _props$variant === void 0 ? 'dots' : _props$variant,
|
27228 | other = _objectWithoutProperties(props, ["activeStep", "backButton", "classes", "className", "LinearProgressProps", "nextButton", "position", "steps", "variant"]);
|
27229 |
|
27230 | return React.createElement(Paper$1, _extends({
|
27231 | square: true,
|
27232 | elevation: 0,
|
27233 | className: clsx(classes.root, classes["position".concat(capitalize(position))], className),
|
27234 | ref: ref
|
27235 | }, other), backButton, variant === 'text' && React.createElement(React.Fragment, null, activeStep + 1, " / ", steps), variant === 'dots' && React.createElement("div", {
|
27236 | className: classes.dots
|
27237 | }, _toConsumableArray(new Array(steps)).map(function (_, index) {
|
27238 | return React.createElement("div", {
|
27239 | key: index,
|
27240 | className: clsx(classes.dot, index === activeStep && classes.dotActive)
|
27241 | });
|
27242 | })), variant === 'progress' && React.createElement(LinearProgress$1, _extends({
|
27243 | className: classes.progress,
|
27244 | variant: "determinate",
|
27245 | value: Math.ceil(activeStep / (steps - 1) * 100)
|
27246 | }, LinearProgressProps)), nextButton);
|
27247 | });
|
27248 | MobileStepper.propTypes = {
|
27249 |
|
27250 |
|
27251 |
|
27252 |
|
27253 |
|
27254 | |
27255 |
|
27256 |
|
27257 |
|
27258 | activeStep: propTypes.number,
|
27259 |
|
27260 | |
27261 |
|
27262 |
|
27263 | backButton: propTypes.node,
|
27264 |
|
27265 | |
27266 |
|
27267 |
|
27268 |
|
27269 | classes: propTypes.object,
|
27270 |
|
27271 | |
27272 |
|
27273 |
|
27274 | className: propTypes.string,
|
27275 |
|
27276 | |
27277 |
|
27278 |
|
27279 | LinearProgressProps: propTypes.object,
|
27280 |
|
27281 | |
27282 |
|
27283 |
|
27284 | nextButton: propTypes.node,
|
27285 |
|
27286 | |
27287 |
|
27288 |
|
27289 | position: propTypes.oneOf(['bottom', 'static', 'top']),
|
27290 |
|
27291 | |
27292 |
|
27293 |
|
27294 | steps: propTypes.number.isRequired,
|
27295 |
|
27296 | |
27297 |
|
27298 |
|
27299 | variant: propTypes.oneOf(['dots', 'progress', 'text'])
|
27300 | } ;
|
27301 | var MobileStepper$1 = withStyles$1(styles$1h, {
|
27302 | name: 'MuiMobileStepper'
|
27303 | })(MobileStepper);
|
27304 |
|
27305 | |
27306 |
|
27307 |
|
27308 |
|
27309 | var NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref) {
|
27310 | var classes = props.classes,
|
27311 | className = props.className,
|
27312 | disabled = props.disabled,
|
27313 | IconComponent = props.IconComponent,
|
27314 | inputRef = props.inputRef,
|
27315 | _props$variant = props.variant,
|
27316 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
27317 | other = _objectWithoutProperties(props, ["classes", "className", "disabled", "IconComponent", "inputRef", "variant"]);
|
27318 |
|
27319 | return React.createElement(React.Fragment, null, React.createElement("select", _extends({
|
27320 | className: clsx(classes.root,
|
27321 | classes.select, classes[variant], className, disabled && classes.disabled),
|
27322 | disabled: disabled,
|
27323 | ref: inputRef || ref
|
27324 | }, other)), props.multiple ? null : React.createElement(IconComponent, {
|
27325 | className: clsx(classes.icon, classes["icon".concat(capitalize(variant))], disabled && classes.disabled)
|
27326 | }));
|
27327 | });
|
27328 | NativeSelectInput.propTypes = {
|
27329 | |
27330 |
|
27331 |
|
27332 |
|
27333 | children: propTypes.node,
|
27334 |
|
27335 | |
27336 |
|
27337 |
|
27338 |
|
27339 | classes: propTypes.object.isRequired,
|
27340 |
|
27341 | |
27342 |
|
27343 |
|
27344 | className: propTypes.string,
|
27345 |
|
27346 | |
27347 |
|
27348 |
|
27349 | disabled: propTypes.bool,
|
27350 |
|
27351 | |
27352 |
|
27353 |
|
27354 | IconComponent: propTypes.elementType.isRequired,
|
27355 |
|
27356 | |
27357 |
|
27358 |
|
27359 |
|
27360 | inputRef: refType,
|
27361 |
|
27362 | |
27363 |
|
27364 |
|
27365 | multiple: propTypes.bool,
|
27366 |
|
27367 | |
27368 |
|
27369 |
|
27370 | name: propTypes.string,
|
27371 |
|
27372 | |
27373 |
|
27374 |
|
27375 |
|
27376 |
|
27377 |
|
27378 | onChange: propTypes.func,
|
27379 |
|
27380 | |
27381 |
|
27382 |
|
27383 | value: propTypes.any,
|
27384 |
|
27385 | |
27386 |
|
27387 |
|
27388 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
27389 | } ;
|
27390 |
|
27391 | |
27392 |
|
27393 |
|
27394 |
|
27395 | var ArrowDropDownIcon = createSvgIcon( React.createElement("path", {
|
27396 | d: "M7 10l5 5 5-5z"
|
27397 | }), 'ArrowDropDown');
|
27398 |
|
27399 | var styles$1i = function styles(theme) {
|
27400 | return {
|
27401 |
|
27402 | root: {},
|
27403 |
|
27404 |
|
27405 | select: {
|
27406 | '-moz-appearance': 'none',
|
27407 |
|
27408 | '-webkit-appearance': 'none',
|
27409 |
|
27410 |
|
27411 |
|
27412 | userSelect: 'none',
|
27413 | borderRadius: 0,
|
27414 |
|
27415 | minWidth: 16,
|
27416 |
|
27417 | cursor: 'pointer',
|
27418 | '&:focus': {
|
27419 |
|
27420 | backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
|
27421 | borderRadius: 0
|
27422 |
|
27423 | },
|
27424 |
|
27425 | '&::-ms-expand': {
|
27426 | display: 'none'
|
27427 | },
|
27428 | '&$disabled': {
|
27429 | cursor: 'default'
|
27430 | },
|
27431 | '&[multiple]': {
|
27432 | height: 'auto'
|
27433 | },
|
27434 | '&:not([multiple]) option, &:not([multiple]) optgroup': {
|
27435 | backgroundColor: theme.palette.background.paper
|
27436 | },
|
27437 | '&&': {
|
27438 | paddingRight: 24
|
27439 | }
|
27440 | },
|
27441 |
|
27442 |
|
27443 | filled: {
|
27444 | '&&': {
|
27445 | paddingRight: 32
|
27446 | }
|
27447 | },
|
27448 |
|
27449 |
|
27450 | outlined: {
|
27451 | borderRadius: theme.shape.borderRadius,
|
27452 | '&&': {
|
27453 | paddingRight: 32
|
27454 | }
|
27455 | },
|
27456 |
|
27457 |
|
27458 | selectMenu: {
|
27459 | height: 'auto',
|
27460 |
|
27461 | minHeight: '1.1876em',
|
27462 |
|
27463 | textOverflow: 'ellipsis',
|
27464 | whiteSpace: 'nowrap',
|
27465 | overflow: 'hidden'
|
27466 | },
|
27467 |
|
27468 |
|
27469 | disabled: {},
|
27470 |
|
27471 |
|
27472 | icon: {
|
27473 |
|
27474 |
|
27475 | position: 'absolute',
|
27476 | right: 0,
|
27477 | top: 'calc(50% - 12px)',
|
27478 |
|
27479 | pointerEvents: 'none',
|
27480 |
|
27481 | color: theme.palette.action.active,
|
27482 | '&$disabled': {
|
27483 | color: theme.palette.action.disabled
|
27484 | }
|
27485 | },
|
27486 |
|
27487 |
|
27488 | iconOpen: {
|
27489 | transform: 'rotate(180deg)'
|
27490 | },
|
27491 |
|
27492 |
|
27493 | iconFilled: {
|
27494 | right: 7
|
27495 | },
|
27496 |
|
27497 |
|
27498 | iconOutlined: {
|
27499 | right: 7
|
27500 | },
|
27501 |
|
27502 |
|
27503 | nativeInput: {
|
27504 | bottom: 0,
|
27505 | left: 0,
|
27506 | position: 'absolute',
|
27507 | opacity: 0,
|
27508 | pointerEvents: 'none',
|
27509 | width: '100%'
|
27510 | }
|
27511 | };
|
27512 | };
|
27513 | var defaultInput = React.createElement(Input$1, null);
|
27514 | |
27515 |
|
27516 |
|
27517 |
|
27518 | var NativeSelect = React.forwardRef(function NativeSelect(props, ref) {
|
27519 | var children = props.children,
|
27520 | classes = props.classes,
|
27521 | _props$IconComponent = props.IconComponent,
|
27522 | IconComponent = _props$IconComponent === void 0 ? ArrowDropDownIcon : _props$IconComponent,
|
27523 | _props$input = props.input,
|
27524 | input = _props$input === void 0 ? defaultInput : _props$input,
|
27525 | inputProps = props.inputProps,
|
27526 | variant = props.variant,
|
27527 | other = _objectWithoutProperties(props, ["children", "classes", "IconComponent", "input", "inputProps", "variant"]);
|
27528 |
|
27529 | var muiFormControl = useFormControl$1();
|
27530 | var fcs = formControlState({
|
27531 | props: props,
|
27532 | muiFormControl: muiFormControl,
|
27533 | states: ['variant']
|
27534 | });
|
27535 | return React.cloneElement(input, _extends({
|
27536 |
|
27537 |
|
27538 | inputComponent: NativeSelectInput,
|
27539 | inputProps: _extends({
|
27540 | children: children,
|
27541 | classes: classes,
|
27542 | IconComponent: IconComponent,
|
27543 | variant: fcs.variant,
|
27544 | type: undefined
|
27545 | }, inputProps, input ? input.props.inputProps : {}),
|
27546 | ref: ref
|
27547 | }, other));
|
27548 | });
|
27549 | NativeSelect.propTypes = {
|
27550 |
|
27551 |
|
27552 |
|
27553 |
|
27554 |
|
27555 | |
27556 |
|
27557 |
|
27558 |
|
27559 | children: propTypes.node,
|
27560 |
|
27561 | |
27562 |
|
27563 |
|
27564 |
|
27565 | classes: propTypes.object,
|
27566 |
|
27567 | |
27568 |
|
27569 |
|
27570 | IconComponent: propTypes.elementType,
|
27571 |
|
27572 | |
27573 |
|
27574 |
|
27575 | input: propTypes.element,
|
27576 |
|
27577 | |
27578 |
|
27579 |
|
27580 | inputProps: propTypes.object,
|
27581 |
|
27582 | |
27583 |
|
27584 |
|
27585 |
|
27586 |
|
27587 |
|
27588 | onChange: propTypes.func,
|
27589 |
|
27590 | |
27591 |
|
27592 |
|
27593 | value: propTypes.any,
|
27594 |
|
27595 | |
27596 |
|
27597 |
|
27598 | variant: propTypes.oneOf(['filled', 'outlined', 'standard'])
|
27599 | } ;
|
27600 | NativeSelect.muiName = 'Select';
|
27601 | var NativeSelect$1 = withStyles$1(styles$1i, {
|
27602 | name: 'MuiNativeSelect'
|
27603 | })(NativeSelect);
|
27604 |
|
27605 | var useEnhancedEffect$8 = typeof window !== 'undefined' && "development" !== 'test' ? React.useLayoutEffect : React.useEffect;
|
27606 | |
27607 |
|
27608 |
|
27609 |
|
27610 |
|
27611 |
|
27612 |
|
27613 |
|
27614 |
|
27615 |
|
27616 | function NoSsr(props) {
|
27617 | var children = props.children,
|
27618 | _props$defer = props.defer,
|
27619 | defer = _props$defer === void 0 ? false : _props$defer,
|
27620 | _props$fallback = props.fallback,
|
27621 | fallback = _props$fallback === void 0 ? null : _props$fallback;
|
27622 |
|
27623 | var _React$useState = React.useState(false),
|
27624 | mountedState = _React$useState[0],
|
27625 | setMountedState = _React$useState[1];
|
27626 |
|
27627 | useEnhancedEffect$8(function () {
|
27628 | if (!defer) {
|
27629 | setMountedState(true);
|
27630 | }
|
27631 | }, [defer]);
|
27632 | React.useEffect(function () {
|
27633 | if (defer) {
|
27634 | setMountedState(true);
|
27635 | }
|
27636 | }, [defer]);
|
27637 |
|
27638 | return React.createElement(React.Fragment, null, mountedState ? children : fallback);
|
27639 | }
|
27640 |
|
27641 | NoSsr.propTypes = {
|
27642 |
|
27643 |
|
27644 |
|
27645 |
|
27646 |
|
27647 | |
27648 |
|
27649 |
|
27650 | children: propTypes.node,
|
27651 |
|
27652 | |
27653 |
|
27654 |
|
27655 |
|
27656 | defer: propTypes.bool,
|
27657 |
|
27658 | |
27659 |
|
27660 |
|
27661 | fallback: propTypes.node
|
27662 | } ;
|
27663 |
|
27664 | {
|
27665 |
|
27666 | NoSsr['propTypes' + ''] = exactProp(NoSsr.propTypes);
|
27667 | }
|
27668 |
|
27669 | var styles$1j = function styles(theme) {
|
27670 | return {
|
27671 |
|
27672 | root: {
|
27673 | position: 'absolute',
|
27674 | bottom: 0,
|
27675 | right: 0,
|
27676 | top: -5,
|
27677 | left: 0,
|
27678 | margin: 0,
|
27679 | padding: '0 8px',
|
27680 | pointerEvents: 'none',
|
27681 | borderRadius: 'inherit',
|
27682 | borderStyle: 'solid',
|
27683 | borderWidth: 1,
|
27684 | overflow: 'hidden'
|
27685 | },
|
27686 |
|
27687 |
|
27688 | legend: {
|
27689 | textAlign: 'left',
|
27690 | padding: 0,
|
27691 | lineHeight: '11px',
|
27692 |
|
27693 | transition: theme.transitions.create('width', {
|
27694 | duration: 150,
|
27695 | easing: theme.transitions.easing.easeOut
|
27696 | })
|
27697 | },
|
27698 |
|
27699 |
|
27700 | legendLabelled: {
|
27701 | display: 'block',
|
27702 | width: 'auto',
|
27703 | textAlign: 'left',
|
27704 | padding: 0,
|
27705 | height: 11,
|
27706 |
|
27707 | fontSize: '0.75em',
|
27708 | visibility: 'hidden',
|
27709 | maxWidth: 0.01,
|
27710 | transition: theme.transitions.create('max-width', {
|
27711 | duration: 50,
|
27712 | easing: theme.transitions.easing.easeOut
|
27713 | }),
|
27714 | '& > span': {
|
27715 | paddingLeft: 5,
|
27716 | paddingRight: 5,
|
27717 | display: 'inline-block'
|
27718 | }
|
27719 | },
|
27720 |
|
27721 |
|
27722 | legendNotched: {
|
27723 | maxWidth: 1000,
|
27724 | transition: theme.transitions.create('max-width', {
|
27725 | duration: 100,
|
27726 | easing: theme.transitions.easing.easeOut,
|
27727 | delay: 50
|
27728 | })
|
27729 | }
|
27730 | };
|
27731 | };
|
27732 | |
27733 |
|
27734 |
|
27735 |
|
27736 | var NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
|
27737 | var children = props.children,
|
27738 | classes = props.classes,
|
27739 | className = props.className,
|
27740 | label = props.label,
|
27741 | labelWidthProp = props.labelWidth,
|
27742 | notched = props.notched,
|
27743 | style = props.style,
|
27744 | other = _objectWithoutProperties(props, ["children", "classes", "className", "label", "labelWidth", "notched", "style"]);
|
27745 |
|
27746 | var theme = useTheme$1();
|
27747 | var align = theme.direction === 'rtl' ? 'right' : 'left';
|
27748 |
|
27749 | if (label !== undefined) {
|
27750 | return React.createElement("fieldset", _extends({
|
27751 | "aria-hidden": true,
|
27752 | className: clsx(classes.root, className),
|
27753 | ref: ref,
|
27754 | style: style
|
27755 | }, other), React.createElement("legend", {
|
27756 | className: clsx(classes.legendLabelled, notched && classes.legendNotched)
|
27757 | }, label ? React.createElement("span", null, label) : React.createElement("span", {
|
27758 | dangerouslySetInnerHTML: {
|
27759 | __html: '​'
|
27760 | }
|
27761 | })));
|
27762 | }
|
27763 |
|
27764 | var labelWidth = labelWidthProp > 0 ? labelWidthProp * 0.75 + 8 : 0.01;
|
27765 | return React.createElement("fieldset", _extends({
|
27766 | "aria-hidden": true,
|
27767 | style: _extends(_defineProperty({}, "padding".concat(capitalize(align)), 8), style),
|
27768 | className: clsx(classes.root, className),
|
27769 | ref: ref
|
27770 | }, other), React.createElement("legend", {
|
27771 | className: classes.legend,
|
27772 | style: {
|
27773 |
|
27774 |
|
27775 |
|
27776 | width: notched ? labelWidth : 0.01
|
27777 | }
|
27778 | }, React.createElement("span", {
|
27779 | dangerouslySetInnerHTML: {
|
27780 | __html: '​'
|
27781 | }
|
27782 | })));
|
27783 | });
|
27784 | NotchedOutline.propTypes = {
|
27785 | |
27786 |
|
27787 |
|
27788 | children: propTypes.node,
|
27789 |
|
27790 | |
27791 |
|
27792 |
|
27793 |
|
27794 | classes: propTypes.object,
|
27795 |
|
27796 | |
27797 |
|
27798 |
|
27799 | className: propTypes.string,
|
27800 |
|
27801 | |
27802 |
|
27803 |
|
27804 | label: propTypes.node,
|
27805 |
|
27806 | |
27807 |
|
27808 |
|
27809 | labelWidth: propTypes.number.isRequired,
|
27810 |
|
27811 | |
27812 |
|
27813 |
|
27814 | notched: propTypes.bool.isRequired,
|
27815 |
|
27816 | |
27817 |
|
27818 |
|
27819 | style: propTypes.object
|
27820 | } ;
|
27821 | var NotchedOutline$1 = withStyles$1(styles$1j, {
|
27822 | name: 'PrivateNotchedOutline'
|
27823 | })(NotchedOutline);
|
27824 |
|
27825 | var styles$1k = function styles(theme) {
|
27826 | var borderColor = theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
|
27827 | return {
|
27828 |
|
27829 | root: {
|
27830 | position: 'relative',
|
27831 | borderRadius: theme.shape.borderRadius,
|
27832 | '&:hover $notchedOutline': {
|
27833 | borderColor: theme.palette.text.primary
|
27834 | },
|
27835 |
|
27836 | '@media (hover: none)': {
|
27837 | '&:hover $notchedOutline': {
|
27838 | borderColor: borderColor
|
27839 | }
|
27840 | },
|
27841 | '&$focused $notchedOutline': {
|
27842 | borderColor: theme.palette.primary.main,
|
27843 | borderWidth: 2
|
27844 | },
|
27845 | '&$error $notchedOutline': {
|
27846 | borderColor: theme.palette.error.main
|
27847 | },
|
27848 | '&$disabled $notchedOutline': {
|
27849 | borderColor: theme.palette.action.disabled
|
27850 | }
|
27851 | },
|
27852 |
|
27853 |
|
27854 | colorSecondary: {
|
27855 | '&$focused $notchedOutline': {
|
27856 | borderColor: theme.palette.secondary.main
|
27857 | }
|
27858 | },
|
27859 |
|
27860 |
|
27861 | focused: {},
|
27862 |
|
27863 |
|
27864 | disabled: {},
|
27865 |
|
27866 |
|
27867 | adornedStart: {
|
27868 | paddingLeft: 14
|
27869 | },
|
27870 |
|
27871 |
|
27872 | adornedEnd: {
|
27873 | paddingRight: 14
|
27874 | },
|
27875 |
|
27876 |
|
27877 | error: {},
|
27878 |
|
27879 |
|
27880 | marginDense: {},
|
27881 |
|
27882 |
|
27883 | multiline: {
|
27884 | padding: '18.5px 14px',
|
27885 | '&$marginDense': {
|
27886 | paddingTop: 10.5,
|
27887 | paddingBottom: 10.5
|
27888 | }
|
27889 | },
|
27890 |
|
27891 |
|
27892 | notchedOutline: {
|
27893 | borderColor: borderColor
|
27894 | },
|
27895 |
|
27896 |
|
27897 | input: {
|
27898 | padding: '18.5px 14px',
|
27899 | '&:-webkit-autofill': {
|
27900 | WebkitBoxShadow: theme.palette.type === 'light' ? null : '0 0 0 100px #266798 inset',
|
27901 | WebkitTextFillColor: theme.palette.type === 'light' ? null : '#fff',
|
27902 | caretColor: theme.palette.type === 'light' ? null : '#fff',
|
27903 | borderRadius: 'inherit'
|
27904 | }
|
27905 | },
|
27906 |
|
27907 |
|
27908 | inputMarginDense: {
|
27909 | paddingTop: 10.5,
|
27910 | paddingBottom: 10.5
|
27911 | },
|
27912 |
|
27913 |
|
27914 | inputMultiline: {
|
27915 | padding: 0
|
27916 | },
|
27917 |
|
27918 |
|
27919 | inputAdornedStart: {
|
27920 | paddingLeft: 0
|
27921 | },
|
27922 |
|
27923 |
|
27924 | inputAdornedEnd: {
|
27925 | paddingRight: 0
|
27926 | }
|
27927 | };
|
27928 | };
|
27929 | var OutlinedInput = React.forwardRef(function OutlinedInput(props, ref) {
|
27930 | var classes = props.classes,
|
27931 | _props$fullWidth = props.fullWidth,
|
27932 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
27933 | _props$inputComponent = props.inputComponent,
|
27934 | inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
|
27935 | label = props.label,
|
27936 | _props$labelWidth = props.labelWidth,
|
27937 | labelWidth = _props$labelWidth === void 0 ? 0 : _props$labelWidth,
|
27938 | _props$multiline = props.multiline,
|
27939 | multiline = _props$multiline === void 0 ? false : _props$multiline,
|
27940 | notched = props.notched,
|
27941 | _props$type = props.type,
|
27942 | type = _props$type === void 0 ? 'text' : _props$type,
|
27943 | other = _objectWithoutProperties(props, ["classes", "fullWidth", "inputComponent", "label", "labelWidth", "multiline", "notched", "type"]);
|
27944 |
|
27945 | return React.createElement(InputBase$1, _extends({
|
27946 | renderSuffix: function renderSuffix(state) {
|
27947 | return React.createElement(NotchedOutline$1, {
|
27948 | className: classes.notchedOutline,
|
27949 | label: label,
|
27950 | labelWidth: labelWidth,
|
27951 | notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
|
27952 | });
|
27953 | },
|
27954 | classes: _extends({}, classes, {
|
27955 | root: clsx(classes.root, classes.underline),
|
27956 | notchedOutline: null
|
27957 | }),
|
27958 | fullWidth: fullWidth,
|
27959 | inputComponent: inputComponent,
|
27960 | multiline: multiline,
|
27961 | ref: ref,
|
27962 | type: type
|
27963 | }, other));
|
27964 | });
|
27965 | OutlinedInput.propTypes = {
|
27966 |
|
27967 |
|
27968 |
|
27969 |
|
27970 |
|
27971 | |
27972 |
|
27973 |
|
27974 |
|
27975 |
|
27976 | autoComplete: propTypes.string,
|
27977 |
|
27978 | |
27979 |
|
27980 |
|
27981 | autoFocus: propTypes.bool,
|
27982 |
|
27983 | |
27984 |
|
27985 |
|
27986 |
|
27987 | classes: propTypes.object,
|
27988 |
|
27989 | |
27990 |
|
27991 |
|
27992 | color: propTypes.oneOf(['primary', 'secondary']),
|
27993 |
|
27994 | |
27995 |
|
27996 |
|
27997 | defaultValue: propTypes.any,
|
27998 |
|
27999 | |
28000 |
|
28001 |
|
28002 | disabled: propTypes.bool,
|
28003 |
|
28004 | |
28005 |
|
28006 |
|
28007 | endAdornment: propTypes.node,
|
28008 |
|
28009 | |
28010 |
|
28011 |
|
28012 |
|
28013 | error: propTypes.bool,
|
28014 |
|
28015 | |
28016 |
|
28017 |
|
28018 | fullWidth: propTypes.bool,
|
28019 |
|
28020 | |
28021 |
|
28022 |
|
28023 | id: propTypes.string,
|
28024 |
|
28025 | |
28026 |
|
28027 |
|
28028 |
|
28029 | inputComponent: propTypes.elementType,
|
28030 |
|
28031 | |
28032 |
|
28033 |
|
28034 | inputProps: propTypes.object,
|
28035 |
|
28036 | |
28037 |
|
28038 |
|
28039 | inputRef: refType,
|
28040 |
|
28041 | |
28042 |
|
28043 |
|
28044 |
|
28045 | label: propTypes.node,
|
28046 |
|
28047 | |
28048 |
|
28049 |
|
28050 |
|
28051 | labelWidth: propTypes.number,
|
28052 |
|
28053 | |
28054 |
|
28055 |
|
28056 |
|
28057 | margin: propTypes.oneOf(['dense', 'none']),
|
28058 |
|
28059 | |
28060 |
|
28061 |
|
28062 | maxRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
28063 |
|
28064 | |
28065 |
|
28066 |
|
28067 | multiline: propTypes.bool,
|
28068 |
|
28069 | |
28070 |
|
28071 |
|
28072 | name: propTypes.string,
|
28073 |
|
28074 | |
28075 |
|
28076 |
|
28077 | notched: propTypes.bool,
|
28078 |
|
28079 | |
28080 |
|
28081 |
|
28082 |
|
28083 |
|
28084 |
|
28085 | onChange: propTypes.func,
|
28086 |
|
28087 | |
28088 |
|
28089 |
|
28090 | placeholder: propTypes.string,
|
28091 |
|
28092 | |
28093 |
|
28094 |
|
28095 |
|
28096 | readOnly: propTypes.bool,
|
28097 |
|
28098 | |
28099 |
|
28100 |
|
28101 | required: propTypes.bool,
|
28102 |
|
28103 | |
28104 |
|
28105 |
|
28106 | rows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
28107 |
|
28108 | |
28109 |
|
28110 |
|
28111 | startAdornment: propTypes.node,
|
28112 |
|
28113 | |
28114 |
|
28115 |
|
28116 | type: propTypes.string,
|
28117 |
|
28118 | |
28119 |
|
28120 |
|
28121 | value: propTypes.any
|
28122 | } ;
|
28123 | OutlinedInput.muiName = 'Input';
|
28124 | var OutlinedInput$1 = withStyles$1(styles$1k, {
|
28125 | name: 'MuiOutlinedInput'
|
28126 | })(OutlinedInput);
|
28127 |
|
28128 | |
28129 |
|
28130 |
|
28131 |
|
28132 |
|
28133 |
|
28134 |
|
28135 |
|
28136 |
|
28137 |
|
28138 |
|
28139 |
|
28140 |
|
28141 |
|
28142 |
|
28143 |
|
28144 |
|
28145 |
|
28146 |
|
28147 |
|
28148 |
|
28149 |
|
28150 |
|
28151 |
|
28152 | var isBrowser$1 = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
|
28153 |
|
28154 | var timeoutDuration = function () {
|
28155 | var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
|
28156 | for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
|
28157 | if (isBrowser$1 && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
|
28158 | return 1;
|
28159 | }
|
28160 | }
|
28161 | return 0;
|
28162 | }();
|
28163 |
|
28164 | function microtaskDebounce(fn) {
|
28165 | var called = false;
|
28166 | return function () {
|
28167 | if (called) {
|
28168 | return;
|
28169 | }
|
28170 | called = true;
|
28171 | window.Promise.resolve().then(function () {
|
28172 | called = false;
|
28173 | fn();
|
28174 | });
|
28175 | };
|
28176 | }
|
28177 |
|
28178 | function taskDebounce(fn) {
|
28179 | var scheduled = false;
|
28180 | return function () {
|
28181 | if (!scheduled) {
|
28182 | scheduled = true;
|
28183 | setTimeout(function () {
|
28184 | scheduled = false;
|
28185 | fn();
|
28186 | }, timeoutDuration);
|
28187 | }
|
28188 | };
|
28189 | }
|
28190 |
|
28191 | var supportsMicroTasks = isBrowser$1 && window.Promise;
|
28192 |
|
28193 | |
28194 |
|
28195 |
|
28196 |
|
28197 |
|
28198 |
|
28199 |
|
28200 |
|
28201 |
|
28202 | var debounce$1 = supportsMicroTasks ? microtaskDebounce : taskDebounce;
|
28203 |
|
28204 | |
28205 |
|
28206 |
|
28207 |
|
28208 |
|
28209 |
|
28210 |
|
28211 | function isFunction(functionToCheck) {
|
28212 | var getType = {};
|
28213 | return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
|
28214 | }
|
28215 |
|
28216 | |
28217 |
|
28218 |
|
28219 |
|
28220 |
|
28221 |
|
28222 |
|
28223 | function getStyleComputedProperty(element, property) {
|
28224 | if (element.nodeType !== 1) {
|
28225 | return [];
|
28226 | }
|
28227 |
|
28228 | var window = element.ownerDocument.defaultView;
|
28229 | var css = window.getComputedStyle(element, null);
|
28230 | return property ? css[property] : css;
|
28231 | }
|
28232 |
|
28233 | |
28234 |
|
28235 |
|
28236 |
|
28237 |
|
28238 |
|
28239 |
|
28240 | function getParentNode(element) {
|
28241 | if (element.nodeName === 'HTML') {
|
28242 | return element;
|
28243 | }
|
28244 | return element.parentNode || element.host;
|
28245 | }
|
28246 |
|
28247 | |
28248 |
|
28249 |
|
28250 |
|
28251 |
|
28252 |
|
28253 |
|
28254 | function getScrollParent$1(element) {
|
28255 |
|
28256 | if (!element) {
|
28257 | return document.body;
|
28258 | }
|
28259 |
|
28260 | switch (element.nodeName) {
|
28261 | case 'HTML':
|
28262 | case 'BODY':
|
28263 | return element.ownerDocument.body;
|
28264 | case '#document':
|
28265 | return element.body;
|
28266 | }
|
28267 |
|
28268 |
|
28269 |
|
28270 | var _getStyleComputedProp = getStyleComputedProperty(element),
|
28271 | overflow = _getStyleComputedProp.overflow,
|
28272 | overflowX = _getStyleComputedProp.overflowX,
|
28273 | overflowY = _getStyleComputedProp.overflowY;
|
28274 |
|
28275 | if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
|
28276 | return element;
|
28277 | }
|
28278 |
|
28279 | return getScrollParent$1(getParentNode(element));
|
28280 | }
|
28281 |
|
28282 | |
28283 |
|
28284 |
|
28285 |
|
28286 |
|
28287 |
|
28288 |
|
28289 | function getReferenceNode(reference) {
|
28290 | return reference && reference.referenceNode ? reference.referenceNode : reference;
|
28291 | }
|
28292 |
|
28293 | var isIE11 = isBrowser$1 && !!(window.MSInputMethodContext && document.documentMode);
|
28294 | var isIE10 = isBrowser$1 && /MSIE 10/.test(navigator.userAgent);
|
28295 |
|
28296 | |
28297 |
|
28298 |
|
28299 |
|
28300 |
|
28301 |
|
28302 |
|
28303 | function isIE(version) {
|
28304 | if (version === 11) {
|
28305 | return isIE11;
|
28306 | }
|
28307 | if (version === 10) {
|
28308 | return isIE10;
|
28309 | }
|
28310 | return isIE11 || isIE10;
|
28311 | }
|
28312 |
|
28313 | |
28314 |
|
28315 |
|
28316 |
|
28317 |
|
28318 |
|
28319 |
|
28320 | function getOffsetParent(element) {
|
28321 | if (!element) {
|
28322 | return document.documentElement;
|
28323 | }
|
28324 |
|
28325 | var noOffsetParent = isIE(10) ? document.body : null;
|
28326 |
|
28327 |
|
28328 | var offsetParent = element.offsetParent || null;
|
28329 |
|
28330 | while (offsetParent === noOffsetParent && element.nextElementSibling) {
|
28331 | offsetParent = (element = element.nextElementSibling).offsetParent;
|
28332 | }
|
28333 |
|
28334 | var nodeName = offsetParent && offsetParent.nodeName;
|
28335 |
|
28336 | if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
|
28337 | return element ? element.ownerDocument.documentElement : document.documentElement;
|
28338 | }
|
28339 |
|
28340 |
|
28341 |
|
28342 | if (['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {
|
28343 | return getOffsetParent(offsetParent);
|
28344 | }
|
28345 |
|
28346 | return offsetParent;
|
28347 | }
|
28348 |
|
28349 | function isOffsetContainer(element) {
|
28350 | var nodeName = element.nodeName;
|
28351 |
|
28352 | if (nodeName === 'BODY') {
|
28353 | return false;
|
28354 | }
|
28355 | return nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element;
|
28356 | }
|
28357 |
|
28358 | |
28359 |
|
28360 |
|
28361 |
|
28362 |
|
28363 |
|
28364 |
|
28365 | function getRoot(node) {
|
28366 | if (node.parentNode !== null) {
|
28367 | return getRoot(node.parentNode);
|
28368 | }
|
28369 |
|
28370 | return node;
|
28371 | }
|
28372 |
|
28373 | |
28374 |
|
28375 |
|
28376 |
|
28377 |
|
28378 |
|
28379 |
|
28380 |
|
28381 | function findCommonOffsetParent(element1, element2) {
|
28382 |
|
28383 | if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
|
28384 | return document.documentElement;
|
28385 | }
|
28386 |
|
28387 |
|
28388 | var order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
|
28389 | var start = order ? element1 : element2;
|
28390 | var end = order ? element2 : element1;
|
28391 |
|
28392 |
|
28393 | var range = document.createRange();
|
28394 | range.setStart(start, 0);
|
28395 | range.setEnd(end, 0);
|
28396 | var commonAncestorContainer = range.commonAncestorContainer;
|
28397 |
|
28398 |
|
28399 |
|
28400 | if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) {
|
28401 | if (isOffsetContainer(commonAncestorContainer)) {
|
28402 | return commonAncestorContainer;
|
28403 | }
|
28404 |
|
28405 | return getOffsetParent(commonAncestorContainer);
|
28406 | }
|
28407 |
|
28408 |
|
28409 | var element1root = getRoot(element1);
|
28410 | if (element1root.host) {
|
28411 | return findCommonOffsetParent(element1root.host, element2);
|
28412 | } else {
|
28413 | return findCommonOffsetParent(element1, getRoot(element2).host);
|
28414 | }
|
28415 | }
|
28416 |
|
28417 | |
28418 |
|
28419 |
|
28420 |
|
28421 |
|
28422 |
|
28423 |
|
28424 |
|
28425 | function getScroll(element) {
|
28426 | var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
|
28427 |
|
28428 | var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
|
28429 | var nodeName = element.nodeName;
|
28430 |
|
28431 | if (nodeName === 'BODY' || nodeName === 'HTML') {
|
28432 | var html = element.ownerDocument.documentElement;
|
28433 | var scrollingElement = element.ownerDocument.scrollingElement || html;
|
28434 | return scrollingElement[upperSide];
|
28435 | }
|
28436 |
|
28437 | return element[upperSide];
|
28438 | }
|
28439 |
|
28440 | |
28441 |
|
28442 |
|
28443 |
|
28444 |
|
28445 |
|
28446 |
|
28447 |
|
28448 |
|
28449 | function includeScroll(rect, element) {
|
28450 | var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
28451 |
|
28452 | var scrollTop = getScroll(element, 'top');
|
28453 | var scrollLeft = getScroll(element, 'left');
|
28454 | var modifier = subtract ? -1 : 1;
|
28455 | rect.top += scrollTop * modifier;
|
28456 | rect.bottom += scrollTop * modifier;
|
28457 | rect.left += scrollLeft * modifier;
|
28458 | rect.right += scrollLeft * modifier;
|
28459 | return rect;
|
28460 | }
|
28461 |
|
28462 | |
28463 |
|
28464 |
|
28465 |
|
28466 |
|
28467 |
|
28468 |
|
28469 |
|
28470 |
|
28471 |
|
28472 | function getBordersSize(styles, axis) {
|
28473 | var sideA = axis === 'x' ? 'Left' : 'Top';
|
28474 | var sideB = sideA === 'Left' ? 'Right' : 'Bottom';
|
28475 |
|
28476 | return parseFloat(styles['border' + sideA + 'Width']) + parseFloat(styles['border' + sideB + 'Width']);
|
28477 | }
|
28478 |
|
28479 | function getSize(axis, body, html, computedStyle) {
|
28480 | 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);
|
28481 | }
|
28482 |
|
28483 | function getWindowSizes(document) {
|
28484 | var body = document.body;
|
28485 | var html = document.documentElement;
|
28486 | var computedStyle = isIE(10) && getComputedStyle(html);
|
28487 |
|
28488 | return {
|
28489 | height: getSize('Height', body, html, computedStyle),
|
28490 | width: getSize('Width', body, html, computedStyle)
|
28491 | };
|
28492 | }
|
28493 |
|
28494 | var classCallCheck = function (instance, Constructor) {
|
28495 | if (!(instance instanceof Constructor)) {
|
28496 | throw new TypeError("Cannot call a class as a function");
|
28497 | }
|
28498 | };
|
28499 |
|
28500 | var createClass = function () {
|
28501 | function defineProperties(target, props) {
|
28502 | for (var i = 0; i < props.length; i++) {
|
28503 | var descriptor = props[i];
|
28504 | descriptor.enumerable = descriptor.enumerable || false;
|
28505 | descriptor.configurable = true;
|
28506 | if ("value" in descriptor) descriptor.writable = true;
|
28507 | Object.defineProperty(target, descriptor.key, descriptor);
|
28508 | }
|
28509 | }
|
28510 |
|
28511 | return function (Constructor, protoProps, staticProps) {
|
28512 | if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
28513 | if (staticProps) defineProperties(Constructor, staticProps);
|
28514 | return Constructor;
|
28515 | };
|
28516 | }();
|
28517 |
|
28518 |
|
28519 |
|
28520 |
|
28521 |
|
28522 | var defineProperty$1 = function (obj, key, value) {
|
28523 | if (key in obj) {
|
28524 | Object.defineProperty(obj, key, {
|
28525 | value: value,
|
28526 | enumerable: true,
|
28527 | configurable: true,
|
28528 | writable: true
|
28529 | });
|
28530 | } else {
|
28531 | obj[key] = value;
|
28532 | }
|
28533 |
|
28534 | return obj;
|
28535 | };
|
28536 |
|
28537 | var _extends$1 = Object.assign || function (target) {
|
28538 | for (var i = 1; i < arguments.length; i++) {
|
28539 | var source = arguments[i];
|
28540 |
|
28541 | for (var key in source) {
|
28542 | if (Object.prototype.hasOwnProperty.call(source, key)) {
|
28543 | target[key] = source[key];
|
28544 | }
|
28545 | }
|
28546 | }
|
28547 |
|
28548 | return target;
|
28549 | };
|
28550 |
|
28551 | |
28552 |
|
28553 |
|
28554 |
|
28555 |
|
28556 |
|
28557 |
|
28558 | function getClientRect(offsets) {
|
28559 | return _extends$1({}, offsets, {
|
28560 | right: offsets.left + offsets.width,
|
28561 | bottom: offsets.top + offsets.height
|
28562 | });
|
28563 | }
|
28564 |
|
28565 | |
28566 |
|
28567 |
|
28568 |
|
28569 |
|
28570 |
|
28571 |
|
28572 | function getBoundingClientRect(element) {
|
28573 | var rect = {};
|
28574 |
|
28575 |
|
28576 |
|
28577 |
|
28578 | try {
|
28579 | if (isIE(10)) {
|
28580 | rect = element.getBoundingClientRect();
|
28581 | var scrollTop = getScroll(element, 'top');
|
28582 | var scrollLeft = getScroll(element, 'left');
|
28583 | rect.top += scrollTop;
|
28584 | rect.left += scrollLeft;
|
28585 | rect.bottom += scrollTop;
|
28586 | rect.right += scrollLeft;
|
28587 | } else {
|
28588 | rect = element.getBoundingClientRect();
|
28589 | }
|
28590 | } catch (e) {}
|
28591 |
|
28592 | var result = {
|
28593 | left: rect.left,
|
28594 | top: rect.top,
|
28595 | width: rect.right - rect.left,
|
28596 | height: rect.bottom - rect.top
|
28597 | };
|
28598 |
|
28599 |
|
28600 | var sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
|
28601 | var width = sizes.width || element.clientWidth || result.width;
|
28602 | var height = sizes.height || element.clientHeight || result.height;
|
28603 |
|
28604 | var horizScrollbar = element.offsetWidth - width;
|
28605 | var vertScrollbar = element.offsetHeight - height;
|
28606 |
|
28607 |
|
28608 |
|
28609 | if (horizScrollbar || vertScrollbar) {
|
28610 | var styles = getStyleComputedProperty(element);
|
28611 | horizScrollbar -= getBordersSize(styles, 'x');
|
28612 | vertScrollbar -= getBordersSize(styles, 'y');
|
28613 |
|
28614 | result.width -= horizScrollbar;
|
28615 | result.height -= vertScrollbar;
|
28616 | }
|
28617 |
|
28618 | return getClientRect(result);
|
28619 | }
|
28620 |
|
28621 | function getOffsetRectRelativeToArbitraryNode(children, parent) {
|
28622 | var fixedPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
28623 |
|
28624 | var isIE10 = isIE(10);
|
28625 | var isHTML = parent.nodeName === 'HTML';
|
28626 | var childrenRect = getBoundingClientRect(children);
|
28627 | var parentRect = getBoundingClientRect(parent);
|
28628 | var scrollParent = getScrollParent$1(children);
|
28629 |
|
28630 | var styles = getStyleComputedProperty(parent);
|
28631 | var borderTopWidth = parseFloat(styles.borderTopWidth);
|
28632 | var borderLeftWidth = parseFloat(styles.borderLeftWidth);
|
28633 |
|
28634 |
|
28635 | if (fixedPosition && isHTML) {
|
28636 | parentRect.top = Math.max(parentRect.top, 0);
|
28637 | parentRect.left = Math.max(parentRect.left, 0);
|
28638 | }
|
28639 | var offsets = getClientRect({
|
28640 | top: childrenRect.top - parentRect.top - borderTopWidth,
|
28641 | left: childrenRect.left - parentRect.left - borderLeftWidth,
|
28642 | width: childrenRect.width,
|
28643 | height: childrenRect.height
|
28644 | });
|
28645 | offsets.marginTop = 0;
|
28646 | offsets.marginLeft = 0;
|
28647 |
|
28648 |
|
28649 |
|
28650 |
|
28651 |
|
28652 | if (!isIE10 && isHTML) {
|
28653 | var marginTop = parseFloat(styles.marginTop);
|
28654 | var marginLeft = parseFloat(styles.marginLeft);
|
28655 |
|
28656 | offsets.top -= borderTopWidth - marginTop;
|
28657 | offsets.bottom -= borderTopWidth - marginTop;
|
28658 | offsets.left -= borderLeftWidth - marginLeft;
|
28659 | offsets.right -= borderLeftWidth - marginLeft;
|
28660 |
|
28661 |
|
28662 | offsets.marginTop = marginTop;
|
28663 | offsets.marginLeft = marginLeft;
|
28664 | }
|
28665 |
|
28666 | if (isIE10 && !fixedPosition ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') {
|
28667 | offsets = includeScroll(offsets, parent);
|
28668 | }
|
28669 |
|
28670 | return offsets;
|
28671 | }
|
28672 |
|
28673 | function getViewportOffsetRectRelativeToArtbitraryNode(element) {
|
28674 | var excludeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
28675 |
|
28676 | var html = element.ownerDocument.documentElement;
|
28677 | var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
|
28678 | var width = Math.max(html.clientWidth, window.innerWidth || 0);
|
28679 | var height = Math.max(html.clientHeight, window.innerHeight || 0);
|
28680 |
|
28681 | var scrollTop = !excludeScroll ? getScroll(html) : 0;
|
28682 | var scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;
|
28683 |
|
28684 | var offset = {
|
28685 | top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
|
28686 | left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
|
28687 | width: width,
|
28688 | height: height
|
28689 | };
|
28690 |
|
28691 | return getClientRect(offset);
|
28692 | }
|
28693 |
|
28694 | |
28695 |
|
28696 |
|
28697 |
|
28698 |
|
28699 |
|
28700 |
|
28701 |
|
28702 | function isFixed(element) {
|
28703 | var nodeName = element.nodeName;
|
28704 | if (nodeName === 'BODY' || nodeName === 'HTML') {
|
28705 | return false;
|
28706 | }
|
28707 | if (getStyleComputedProperty(element, 'position') === 'fixed') {
|
28708 | return true;
|
28709 | }
|
28710 | var parentNode = getParentNode(element);
|
28711 | if (!parentNode) {
|
28712 | return false;
|
28713 | }
|
28714 | return isFixed(parentNode);
|
28715 | }
|
28716 |
|
28717 | |
28718 |
|
28719 |
|
28720 |
|
28721 |
|
28722 |
|
28723 |
|
28724 |
|
28725 | function getFixedPositionOffsetParent(element) {
|
28726 |
|
28727 | if (!element || !element.parentElement || isIE()) {
|
28728 | return document.documentElement;
|
28729 | }
|
28730 | var el = element.parentElement;
|
28731 | while (el && getStyleComputedProperty(el, 'transform') === 'none') {
|
28732 | el = el.parentElement;
|
28733 | }
|
28734 | return el || document.documentElement;
|
28735 | }
|
28736 |
|
28737 | |
28738 |
|
28739 |
|
28740 |
|
28741 |
|
28742 |
|
28743 |
|
28744 |
|
28745 |
|
28746 |
|
28747 |
|
28748 | function getBoundaries(popper, reference, padding, boundariesElement) {
|
28749 | var fixedPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
28750 |
|
28751 |
|
28752 |
|
28753 | var boundaries = { top: 0, left: 0 };
|
28754 | var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
|
28755 |
|
28756 |
|
28757 | if (boundariesElement === 'viewport') {
|
28758 | boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
|
28759 | } else {
|
28760 |
|
28761 | var boundariesNode = void 0;
|
28762 | if (boundariesElement === 'scrollParent') {
|
28763 | boundariesNode = getScrollParent$1(getParentNode(reference));
|
28764 | if (boundariesNode.nodeName === 'BODY') {
|
28765 | boundariesNode = popper.ownerDocument.documentElement;
|
28766 | }
|
28767 | } else if (boundariesElement === 'window') {
|
28768 | boundariesNode = popper.ownerDocument.documentElement;
|
28769 | } else {
|
28770 | boundariesNode = boundariesElement;
|
28771 | }
|
28772 |
|
28773 | var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition);
|
28774 |
|
28775 |
|
28776 | if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
|
28777 | var _getWindowSizes = getWindowSizes(popper.ownerDocument),
|
28778 | height = _getWindowSizes.height,
|
28779 | width = _getWindowSizes.width;
|
28780 |
|
28781 | boundaries.top += offsets.top - offsets.marginTop;
|
28782 | boundaries.bottom = height + offsets.top;
|
28783 | boundaries.left += offsets.left - offsets.marginLeft;
|
28784 | boundaries.right = width + offsets.left;
|
28785 | } else {
|
28786 |
|
28787 | boundaries = offsets;
|
28788 | }
|
28789 | }
|
28790 |
|
28791 |
|
28792 | padding = padding || 0;
|
28793 | var isPaddingNumber = typeof padding === 'number';
|
28794 | boundaries.left += isPaddingNumber ? padding : padding.left || 0;
|
28795 | boundaries.top += isPaddingNumber ? padding : padding.top || 0;
|
28796 | boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
|
28797 | boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0;
|
28798 |
|
28799 | return boundaries;
|
28800 | }
|
28801 |
|
28802 | function getArea(_ref) {
|
28803 | var width = _ref.width,
|
28804 | height = _ref.height;
|
28805 |
|
28806 | return width * height;
|
28807 | }
|
28808 |
|
28809 | |
28810 |
|
28811 |
|
28812 |
|
28813 |
|
28814 |
|
28815 |
|
28816 |
|
28817 |
|
28818 | function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) {
|
28819 | var padding = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
|
28820 |
|
28821 | if (placement.indexOf('auto') === -1) {
|
28822 | return placement;
|
28823 | }
|
28824 |
|
28825 | var boundaries = getBoundaries(popper, reference, padding, boundariesElement);
|
28826 |
|
28827 | var rects = {
|
28828 | top: {
|
28829 | width: boundaries.width,
|
28830 | height: refRect.top - boundaries.top
|
28831 | },
|
28832 | right: {
|
28833 | width: boundaries.right - refRect.right,
|
28834 | height: boundaries.height
|
28835 | },
|
28836 | bottom: {
|
28837 | width: boundaries.width,
|
28838 | height: boundaries.bottom - refRect.bottom
|
28839 | },
|
28840 | left: {
|
28841 | width: refRect.left - boundaries.left,
|
28842 | height: boundaries.height
|
28843 | }
|
28844 | };
|
28845 |
|
28846 | var sortedAreas = Object.keys(rects).map(function (key) {
|
28847 | return _extends$1({
|
28848 | key: key
|
28849 | }, rects[key], {
|
28850 | area: getArea(rects[key])
|
28851 | });
|
28852 | }).sort(function (a, b) {
|
28853 | return b.area - a.area;
|
28854 | });
|
28855 |
|
28856 | var filteredAreas = sortedAreas.filter(function (_ref2) {
|
28857 | var width = _ref2.width,
|
28858 | height = _ref2.height;
|
28859 | return width >= popper.clientWidth && height >= popper.clientHeight;
|
28860 | });
|
28861 |
|
28862 | var computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;
|
28863 |
|
28864 | var variation = placement.split('-')[1];
|
28865 |
|
28866 | return computedPlacement + (variation ? '-' + variation : '');
|
28867 | }
|
28868 |
|
28869 | |
28870 |
|
28871 |
|
28872 |
|
28873 |
|
28874 |
|
28875 |
|
28876 |
|
28877 |
|
28878 |
|
28879 | function getReferenceOffsets(state, popper, reference) {
|
28880 | var fixedPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
28881 |
|
28882 | var commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
|
28883 | return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
|
28884 | }
|
28885 |
|
28886 | |
28887 |
|
28888 |
|
28889 |
|
28890 |
|
28891 |
|
28892 |
|
28893 | function getOuterSizes(element) {
|
28894 | var window = element.ownerDocument.defaultView;
|
28895 | var styles = window.getComputedStyle(element);
|
28896 | var x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
|
28897 | var y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
|
28898 | var result = {
|
28899 | width: element.offsetWidth + y,
|
28900 | height: element.offsetHeight + x
|
28901 | };
|
28902 | return result;
|
28903 | }
|
28904 |
|
28905 | |
28906 |
|
28907 |
|
28908 |
|
28909 |
|
28910 |
|
28911 |
|
28912 | function getOppositePlacement(placement) {
|
28913 | var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
|
28914 | return placement.replace(/left|right|bottom|top/g, function (matched) {
|
28915 | return hash[matched];
|
28916 | });
|
28917 | }
|
28918 |
|
28919 | |
28920 |
|
28921 |
|
28922 |
|
28923 |
|
28924 |
|
28925 |
|
28926 |
|
28927 |
|
28928 |
|
28929 | function getPopperOffsets(popper, referenceOffsets, placement) {
|
28930 | placement = placement.split('-')[0];
|
28931 |
|
28932 |
|
28933 | var popperRect = getOuterSizes(popper);
|
28934 |
|
28935 |
|
28936 | var popperOffsets = {
|
28937 | width: popperRect.width,
|
28938 | height: popperRect.height
|
28939 | };
|
28940 |
|
28941 |
|
28942 | var isHoriz = ['right', 'left'].indexOf(placement) !== -1;
|
28943 | var mainSide = isHoriz ? 'top' : 'left';
|
28944 | var secondarySide = isHoriz ? 'left' : 'top';
|
28945 | var measurement = isHoriz ? 'height' : 'width';
|
28946 | var secondaryMeasurement = !isHoriz ? 'height' : 'width';
|
28947 |
|
28948 | popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2;
|
28949 | if (placement === secondarySide) {
|
28950 | popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
|
28951 | } else {
|
28952 | popperOffsets[secondarySide] = referenceOffsets[getOppositePlacement(secondarySide)];
|
28953 | }
|
28954 |
|
28955 | return popperOffsets;
|
28956 | }
|
28957 |
|
28958 | |
28959 |
|
28960 |
|
28961 |
|
28962 |
|
28963 |
|
28964 |
|
28965 |
|
28966 |
|
28967 | function find(arr, check) {
|
28968 |
|
28969 | if (Array.prototype.find) {
|
28970 | return arr.find(check);
|
28971 | }
|
28972 |
|
28973 |
|
28974 | return arr.filter(check)[0];
|
28975 | }
|
28976 |
|
28977 | |
28978 |
|
28979 |
|
28980 |
|
28981 |
|
28982 |
|
28983 |
|
28984 |
|
28985 |
|
28986 | function findIndex(arr, prop, value) {
|
28987 |
|
28988 | if (Array.prototype.findIndex) {
|
28989 | return arr.findIndex(function (cur) {
|
28990 | return cur[prop] === value;
|
28991 | });
|
28992 | }
|
28993 |
|
28994 |
|
28995 | var match = find(arr, function (obj) {
|
28996 | return obj[prop] === value;
|
28997 | });
|
28998 | return arr.indexOf(match);
|
28999 | }
|
29000 |
|
29001 | |
29002 |
|
29003 |
|
29004 |
|
29005 |
|
29006 |
|
29007 |
|
29008 |
|
29009 |
|
29010 |
|
29011 | function runModifiers(modifiers, data, ends) {
|
29012 | var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
|
29013 |
|
29014 | modifiersToRun.forEach(function (modifier) {
|
29015 | if (modifier['function']) {
|
29016 |
|
29017 | console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
|
29018 | }
|
29019 | var fn = modifier['function'] || modifier.fn;
|
29020 | if (modifier.enabled && isFunction(fn)) {
|
29021 |
|
29022 |
|
29023 |
|
29024 | data.offsets.popper = getClientRect(data.offsets.popper);
|
29025 | data.offsets.reference = getClientRect(data.offsets.reference);
|
29026 |
|
29027 | data = fn(data, modifier);
|
29028 | }
|
29029 | });
|
29030 |
|
29031 | return data;
|
29032 | }
|
29033 |
|
29034 | |
29035 |
|
29036 |
|
29037 |
|
29038 |
|
29039 |
|
29040 |
|
29041 | function update$1() {
|
29042 |
|
29043 | if (this.state.isDestroyed) {
|
29044 | return;
|
29045 | }
|
29046 |
|
29047 | var data = {
|
29048 | instance: this,
|
29049 | styles: {},
|
29050 | arrowStyles: {},
|
29051 | attributes: {},
|
29052 | flipped: false,
|
29053 | offsets: {}
|
29054 | };
|
29055 |
|
29056 |
|
29057 | data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference, this.options.positionFixed);
|
29058 |
|
29059 |
|
29060 |
|
29061 |
|
29062 | data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding);
|
29063 |
|
29064 |
|
29065 | data.originalPlacement = data.placement;
|
29066 |
|
29067 | data.positionFixed = this.options.positionFixed;
|
29068 |
|
29069 |
|
29070 | data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement);
|
29071 |
|
29072 | data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute';
|
29073 |
|
29074 |
|
29075 | data = runModifiers(this.modifiers, data);
|
29076 |
|
29077 |
|
29078 |
|
29079 | if (!this.state.isCreated) {
|
29080 | this.state.isCreated = true;
|
29081 | this.options.onCreate(data);
|
29082 | } else {
|
29083 | this.options.onUpdate(data);
|
29084 | }
|
29085 | }
|
29086 |
|
29087 | |
29088 |
|
29089 |
|
29090 |
|
29091 |
|
29092 |
|
29093 | function isModifierEnabled(modifiers, modifierName) {
|
29094 | return modifiers.some(function (_ref) {
|
29095 | var name = _ref.name,
|
29096 | enabled = _ref.enabled;
|
29097 | return enabled && name === modifierName;
|
29098 | });
|
29099 | }
|
29100 |
|
29101 | |
29102 |
|
29103 |
|
29104 |
|
29105 |
|
29106 |
|
29107 |
|
29108 | function getSupportedPropertyName(property) {
|
29109 | var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
|
29110 | var upperProp = property.charAt(0).toUpperCase() + property.slice(1);
|
29111 |
|
29112 | for (var i = 0; i < prefixes.length; i++) {
|
29113 | var prefix = prefixes[i];
|
29114 | var toCheck = prefix ? '' + prefix + upperProp : property;
|
29115 | if (typeof document.body.style[toCheck] !== 'undefined') {
|
29116 | return toCheck;
|
29117 | }
|
29118 | }
|
29119 | return null;
|
29120 | }
|
29121 |
|
29122 | |
29123 |
|
29124 |
|
29125 |
|
29126 |
|
29127 | function destroy() {
|
29128 | this.state.isDestroyed = true;
|
29129 |
|
29130 |
|
29131 | if (isModifierEnabled(this.modifiers, 'applyStyle')) {
|
29132 | this.popper.removeAttribute('x-placement');
|
29133 | this.popper.style.position = '';
|
29134 | this.popper.style.top = '';
|
29135 | this.popper.style.left = '';
|
29136 | this.popper.style.right = '';
|
29137 | this.popper.style.bottom = '';
|
29138 | this.popper.style.willChange = '';
|
29139 | this.popper.style[getSupportedPropertyName('transform')] = '';
|
29140 | }
|
29141 |
|
29142 | this.disableEventListeners();
|
29143 |
|
29144 |
|
29145 |
|
29146 | if (this.options.removeOnDestroy) {
|
29147 | this.popper.parentNode.removeChild(this.popper);
|
29148 | }
|
29149 | return this;
|
29150 | }
|
29151 |
|
29152 | |
29153 |
|
29154 |
|
29155 |
|
29156 |
|
29157 | function getWindow(element) {
|
29158 | var ownerDocument = element.ownerDocument;
|
29159 | return ownerDocument ? ownerDocument.defaultView : window;
|
29160 | }
|
29161 |
|
29162 | function attachToScrollParents(scrollParent, event, callback, scrollParents) {
|
29163 | var isBody = scrollParent.nodeName === 'BODY';
|
29164 | var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
|
29165 | target.addEventListener(event, callback, { passive: true });
|
29166 |
|
29167 | if (!isBody) {
|
29168 | attachToScrollParents(getScrollParent$1(target.parentNode), event, callback, scrollParents);
|
29169 | }
|
29170 | scrollParents.push(target);
|
29171 | }
|
29172 |
|
29173 | |
29174 |
|
29175 |
|
29176 |
|
29177 |
|
29178 |
|
29179 | function setupEventListeners(reference, options, state, updateBound) {
|
29180 |
|
29181 | state.updateBound = updateBound;
|
29182 | getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });
|
29183 |
|
29184 |
|
29185 | var scrollElement = getScrollParent$1(reference);
|
29186 | attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);
|
29187 | state.scrollElement = scrollElement;
|
29188 | state.eventsEnabled = true;
|
29189 |
|
29190 | return state;
|
29191 | }
|
29192 |
|
29193 | |
29194 |
|
29195 |
|
29196 |
|
29197 |
|
29198 |
|
29199 | function enableEventListeners() {
|
29200 | if (!this.state.eventsEnabled) {
|
29201 | this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate);
|
29202 | }
|
29203 | }
|
29204 |
|
29205 | |
29206 |
|
29207 |
|
29208 |
|
29209 |
|
29210 |
|
29211 | function removeEventListeners(reference, state) {
|
29212 |
|
29213 | getWindow(reference).removeEventListener('resize', state.updateBound);
|
29214 |
|
29215 |
|
29216 | state.scrollParents.forEach(function (target) {
|
29217 | target.removeEventListener('scroll', state.updateBound);
|
29218 | });
|
29219 |
|
29220 |
|
29221 | state.updateBound = null;
|
29222 | state.scrollParents = [];
|
29223 | state.scrollElement = null;
|
29224 | state.eventsEnabled = false;
|
29225 | return state;
|
29226 | }
|
29227 |
|
29228 | |
29229 |
|
29230 |
|
29231 |
|
29232 |
|
29233 |
|
29234 |
|
29235 | function disableEventListeners() {
|
29236 | if (this.state.eventsEnabled) {
|
29237 | cancelAnimationFrame(this.scheduleUpdate);
|
29238 | this.state = removeEventListeners(this.reference, this.state);
|
29239 | }
|
29240 | }
|
29241 |
|
29242 | |
29243 |
|
29244 |
|
29245 |
|
29246 |
|
29247 |
|
29248 |
|
29249 | function isNumeric(n) {
|
29250 | return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
|
29251 | }
|
29252 |
|
29253 | |
29254 |
|
29255 |
|
29256 |
|
29257 |
|
29258 |
|
29259 |
|
29260 |
|
29261 | function setStyles(element, styles) {
|
29262 | Object.keys(styles).forEach(function (prop) {
|
29263 | var unit = '';
|
29264 |
|
29265 | if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
|
29266 | unit = 'px';
|
29267 | }
|
29268 | element.style[prop] = styles[prop] + unit;
|
29269 | });
|
29270 | }
|
29271 |
|
29272 | |
29273 |
|
29274 |
|
29275 |
|
29276 |
|
29277 |
|
29278 |
|
29279 |
|
29280 | function setAttributes(element, attributes) {
|
29281 | Object.keys(attributes).forEach(function (prop) {
|
29282 | var value = attributes[prop];
|
29283 | if (value !== false) {
|
29284 | element.setAttribute(prop, attributes[prop]);
|
29285 | } else {
|
29286 | element.removeAttribute(prop);
|
29287 | }
|
29288 | });
|
29289 | }
|
29290 |
|
29291 | |
29292 |
|
29293 |
|
29294 |
|
29295 |
|
29296 |
|
29297 |
|
29298 |
|
29299 |
|
29300 | function applyStyle(data) {
|
29301 |
|
29302 |
|
29303 |
|
29304 |
|
29305 | setStyles(data.instance.popper, data.styles);
|
29306 |
|
29307 |
|
29308 |
|
29309 | setAttributes(data.instance.popper, data.attributes);
|
29310 |
|
29311 |
|
29312 | if (data.arrowElement && Object.keys(data.arrowStyles).length) {
|
29313 | setStyles(data.arrowElement, data.arrowStyles);
|
29314 | }
|
29315 |
|
29316 | return data;
|
29317 | }
|
29318 |
|
29319 | |
29320 |
|
29321 |
|
29322 |
|
29323 |
|
29324 |
|
29325 |
|
29326 |
|
29327 |
|
29328 |
|
29329 | function applyStyleOnLoad(reference, popper, options, modifierOptions, state) {
|
29330 |
|
29331 | var referenceOffsets = getReferenceOffsets(state, popper, reference, options.positionFixed);
|
29332 |
|
29333 |
|
29334 |
|
29335 |
|
29336 | var placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding);
|
29337 |
|
29338 | popper.setAttribute('x-placement', placement);
|
29339 |
|
29340 |
|
29341 |
|
29342 | setStyles(popper, { position: options.positionFixed ? 'fixed' : 'absolute' });
|
29343 |
|
29344 | return options;
|
29345 | }
|
29346 |
|
29347 | |
29348 |
|
29349 |
|
29350 |
|
29351 |
|
29352 |
|
29353 |
|
29354 |
|
29355 |
|
29356 |
|
29357 |
|
29358 |
|
29359 |
|
29360 |
|
29361 |
|
29362 |
|
29363 |
|
29364 |
|
29365 |
|
29366 | function getRoundedOffsets(data, shouldRound) {
|
29367 | var _data$offsets = data.offsets,
|
29368 | popper = _data$offsets.popper,
|
29369 | reference = _data$offsets.reference;
|
29370 | var round = Math.round,
|
29371 | floor = Math.floor;
|
29372 |
|
29373 | var noRound = function noRound(v) {
|
29374 | return v;
|
29375 | };
|
29376 |
|
29377 | var referenceWidth = round(reference.width);
|
29378 | var popperWidth = round(popper.width);
|
29379 |
|
29380 | var isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
|
29381 | var isVariation = data.placement.indexOf('-') !== -1;
|
29382 | var sameWidthParity = referenceWidth % 2 === popperWidth % 2;
|
29383 | var bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;
|
29384 |
|
29385 | var horizontalToInteger = !shouldRound ? noRound : isVertical || isVariation || sameWidthParity ? round : floor;
|
29386 | var verticalToInteger = !shouldRound ? noRound : round;
|
29387 |
|
29388 | return {
|
29389 | left: horizontalToInteger(bothOddWidth && !isVariation && shouldRound ? popper.left - 1 : popper.left),
|
29390 | top: verticalToInteger(popper.top),
|
29391 | bottom: verticalToInteger(popper.bottom),
|
29392 | right: horizontalToInteger(popper.right)
|
29393 | };
|
29394 | }
|
29395 |
|
29396 | var isFirefox = isBrowser$1 && /Firefox/i.test(navigator.userAgent);
|
29397 |
|
29398 | |
29399 |
|
29400 |
|
29401 |
|
29402 |
|
29403 |
|
29404 |
|
29405 | function computeStyle(data, options) {
|
29406 | var x = options.x,
|
29407 | y = options.y;
|
29408 | var popper = data.offsets.popper;
|
29409 |
|
29410 |
|
29411 |
|
29412 | var legacyGpuAccelerationOption = find(data.instance.modifiers, function (modifier) {
|
29413 | return modifier.name === 'applyStyle';
|
29414 | }).gpuAcceleration;
|
29415 | if (legacyGpuAccelerationOption !== undefined) {
|
29416 | console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
|
29417 | }
|
29418 | var gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration;
|
29419 |
|
29420 | var offsetParent = getOffsetParent(data.instance.popper);
|
29421 | var offsetParentRect = getBoundingClientRect(offsetParent);
|
29422 |
|
29423 |
|
29424 | var styles = {
|
29425 | position: popper.position
|
29426 | };
|
29427 |
|
29428 | var offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox);
|
29429 |
|
29430 | var sideA = x === 'bottom' ? 'top' : 'bottom';
|
29431 | var sideB = y === 'right' ? 'left' : 'right';
|
29432 |
|
29433 |
|
29434 |
|
29435 |
|
29436 | var prefixedProperty = getSupportedPropertyName('transform');
|
29437 |
|
29438 |
|
29439 |
|
29440 |
|
29441 |
|
29442 |
|
29443 |
|
29444 |
|
29445 |
|
29446 |
|
29447 | var left = void 0,
|
29448 | top = void 0;
|
29449 | if (sideA === 'bottom') {
|
29450 |
|
29451 |
|
29452 | if (offsetParent.nodeName === 'HTML') {
|
29453 | top = -offsetParent.clientHeight + offsets.bottom;
|
29454 | } else {
|
29455 | top = -offsetParentRect.height + offsets.bottom;
|
29456 | }
|
29457 | } else {
|
29458 | top = offsets.top;
|
29459 | }
|
29460 | if (sideB === 'right') {
|
29461 | if (offsetParent.nodeName === 'HTML') {
|
29462 | left = -offsetParent.clientWidth + offsets.right;
|
29463 | } else {
|
29464 | left = -offsetParentRect.width + offsets.right;
|
29465 | }
|
29466 | } else {
|
29467 | left = offsets.left;
|
29468 | }
|
29469 | if (gpuAcceleration && prefixedProperty) {
|
29470 | styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
|
29471 | styles[sideA] = 0;
|
29472 | styles[sideB] = 0;
|
29473 | styles.willChange = 'transform';
|
29474 | } else {
|
29475 |
|
29476 | var invertTop = sideA === 'bottom' ? -1 : 1;
|
29477 | var invertLeft = sideB === 'right' ? -1 : 1;
|
29478 | styles[sideA] = top * invertTop;
|
29479 | styles[sideB] = left * invertLeft;
|
29480 | styles.willChange = sideA + ', ' + sideB;
|
29481 | }
|
29482 |
|
29483 |
|
29484 | var attributes = {
|
29485 | 'x-placement': data.placement
|
29486 | };
|
29487 |
|
29488 |
|
29489 | data.attributes = _extends$1({}, attributes, data.attributes);
|
29490 | data.styles = _extends$1({}, styles, data.styles);
|
29491 | data.arrowStyles = _extends$1({}, data.offsets.arrow, data.arrowStyles);
|
29492 |
|
29493 | return data;
|
29494 | }
|
29495 |
|
29496 | |
29497 |
|
29498 |
|
29499 |
|
29500 |
|
29501 |
|
29502 |
|
29503 |
|
29504 |
|
29505 |
|
29506 | function isModifierRequired(modifiers, requestingName, requestedName) {
|
29507 | var requesting = find(modifiers, function (_ref) {
|
29508 | var name = _ref.name;
|
29509 | return name === requestingName;
|
29510 | });
|
29511 |
|
29512 | var isRequired = !!requesting && modifiers.some(function (modifier) {
|
29513 | return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
|
29514 | });
|
29515 |
|
29516 | if (!isRequired) {
|
29517 | var _requesting = '`' + requestingName + '`';
|
29518 | var requested = '`' + requestedName + '`';
|
29519 | console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
|
29520 | }
|
29521 | return isRequired;
|
29522 | }
|
29523 |
|
29524 | |
29525 |
|
29526 |
|
29527 |
|
29528 |
|
29529 |
|
29530 |
|
29531 | function arrow(data, options) {
|
29532 | var _data$offsets$arrow;
|
29533 |
|
29534 |
|
29535 | if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
|
29536 | return data;
|
29537 | }
|
29538 |
|
29539 | var arrowElement = options.element;
|
29540 |
|
29541 |
|
29542 | if (typeof arrowElement === 'string') {
|
29543 | arrowElement = data.instance.popper.querySelector(arrowElement);
|
29544 |
|
29545 |
|
29546 | if (!arrowElement) {
|
29547 | return data;
|
29548 | }
|
29549 | } else {
|
29550 |
|
29551 |
|
29552 | if (!data.instance.popper.contains(arrowElement)) {
|
29553 | console.warn('WARNING: `arrow.element` must be child of its popper element!');
|
29554 | return data;
|
29555 | }
|
29556 | }
|
29557 |
|
29558 | var placement = data.placement.split('-')[0];
|
29559 | var _data$offsets = data.offsets,
|
29560 | popper = _data$offsets.popper,
|
29561 | reference = _data$offsets.reference;
|
29562 |
|
29563 | var isVertical = ['left', 'right'].indexOf(placement) !== -1;
|
29564 |
|
29565 | var len = isVertical ? 'height' : 'width';
|
29566 | var sideCapitalized = isVertical ? 'Top' : 'Left';
|
29567 | var side = sideCapitalized.toLowerCase();
|
29568 | var altSide = isVertical ? 'left' : 'top';
|
29569 | var opSide = isVertical ? 'bottom' : 'right';
|
29570 | var arrowElementSize = getOuterSizes(arrowElement)[len];
|
29571 |
|
29572 |
|
29573 |
|
29574 |
|
29575 |
|
29576 |
|
29577 |
|
29578 | if (reference[opSide] - arrowElementSize < popper[side]) {
|
29579 | data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize);
|
29580 | }
|
29581 |
|
29582 | if (reference[side] + arrowElementSize > popper[opSide]) {
|
29583 | data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide];
|
29584 | }
|
29585 | data.offsets.popper = getClientRect(data.offsets.popper);
|
29586 |
|
29587 |
|
29588 | var center = reference[side] + reference[len] / 2 - arrowElementSize / 2;
|
29589 |
|
29590 |
|
29591 |
|
29592 | var css = getStyleComputedProperty(data.instance.popper);
|
29593 | var popperMarginSide = parseFloat(css['margin' + sideCapitalized]);
|
29594 | var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width']);
|
29595 | var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;
|
29596 |
|
29597 |
|
29598 | sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);
|
29599 |
|
29600 | data.arrowElement = arrowElement;
|
29601 | data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty$1(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty$1(_data$offsets$arrow, altSide, ''), _data$offsets$arrow);
|
29602 |
|
29603 | return data;
|
29604 | }
|
29605 |
|
29606 | |
29607 |
|
29608 |
|
29609 |
|
29610 |
|
29611 |
|
29612 |
|
29613 | function getOppositeVariation(variation) {
|
29614 | if (variation === 'end') {
|
29615 | return 'start';
|
29616 | } else if (variation === 'start') {
|
29617 | return 'end';
|
29618 | }
|
29619 | return variation;
|
29620 | }
|
29621 |
|
29622 | |
29623 |
|
29624 |
|
29625 |
|
29626 |
|
29627 |
|
29628 |
|
29629 |
|
29630 |
|
29631 |
|
29632 |
|
29633 |
|
29634 |
|
29635 |
|
29636 |
|
29637 |
|
29638 |
|
29639 |
|
29640 |
|
29641 |
|
29642 |
|
29643 |
|
29644 |
|
29645 |
|
29646 |
|
29647 |
|
29648 |
|
29649 |
|
29650 |
|
29651 |
|
29652 |
|
29653 | 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'];
|
29654 |
|
29655 |
|
29656 | var validPlacements = placements.slice(3);
|
29657 |
|
29658 | |
29659 |
|
29660 |
|
29661 |
|
29662 |
|
29663 |
|
29664 |
|
29665 |
|
29666 |
|
29667 |
|
29668 | function clockwise(placement) {
|
29669 | var counter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
29670 |
|
29671 | var index = validPlacements.indexOf(placement);
|
29672 | var arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index));
|
29673 | return counter ? arr.reverse() : arr;
|
29674 | }
|
29675 |
|
29676 | var BEHAVIORS = {
|
29677 | FLIP: 'flip',
|
29678 | CLOCKWISE: 'clockwise',
|
29679 | COUNTERCLOCKWISE: 'counterclockwise'
|
29680 | };
|
29681 |
|
29682 | |
29683 |
|
29684 |
|
29685 |
|
29686 |
|
29687 |
|
29688 |
|
29689 | function flip(data, options) {
|
29690 |
|
29691 | if (isModifierEnabled(data.instance.modifiers, 'inner')) {
|
29692 | return data;
|
29693 | }
|
29694 |
|
29695 | if (data.flipped && data.placement === data.originalPlacement) {
|
29696 |
|
29697 | return data;
|
29698 | }
|
29699 |
|
29700 | var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement, data.positionFixed);
|
29701 |
|
29702 | var placement = data.placement.split('-')[0];
|
29703 | var placementOpposite = getOppositePlacement(placement);
|
29704 | var variation = data.placement.split('-')[1] || '';
|
29705 |
|
29706 | var flipOrder = [];
|
29707 |
|
29708 | switch (options.behavior) {
|
29709 | case BEHAVIORS.FLIP:
|
29710 | flipOrder = [placement, placementOpposite];
|
29711 | break;
|
29712 | case BEHAVIORS.CLOCKWISE:
|
29713 | flipOrder = clockwise(placement);
|
29714 | break;
|
29715 | case BEHAVIORS.COUNTERCLOCKWISE:
|
29716 | flipOrder = clockwise(placement, true);
|
29717 | break;
|
29718 | default:
|
29719 | flipOrder = options.behavior;
|
29720 | }
|
29721 |
|
29722 | flipOrder.forEach(function (step, index) {
|
29723 | if (placement !== step || flipOrder.length === index + 1) {
|
29724 | return data;
|
29725 | }
|
29726 |
|
29727 | placement = data.placement.split('-')[0];
|
29728 | placementOpposite = getOppositePlacement(placement);
|
29729 |
|
29730 | var popperOffsets = data.offsets.popper;
|
29731 | var refOffsets = data.offsets.reference;
|
29732 |
|
29733 |
|
29734 | var floor = Math.floor;
|
29735 | 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);
|
29736 |
|
29737 | var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);
|
29738 | var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);
|
29739 | var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);
|
29740 | var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);
|
29741 |
|
29742 | var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom;
|
29743 |
|
29744 |
|
29745 | var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
|
29746 |
|
29747 |
|
29748 | var flippedVariationByRef = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom);
|
29749 |
|
29750 |
|
29751 | var flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === 'start' && overflowsRight || isVertical && variation === 'end' && overflowsLeft || !isVertical && variation === 'start' && overflowsBottom || !isVertical && variation === 'end' && overflowsTop);
|
29752 |
|
29753 | var flippedVariation = flippedVariationByRef || flippedVariationByContent;
|
29754 |
|
29755 | if (overlapsRef || overflowsBoundaries || flippedVariation) {
|
29756 |
|
29757 | data.flipped = true;
|
29758 |
|
29759 | if (overlapsRef || overflowsBoundaries) {
|
29760 | placement = flipOrder[index + 1];
|
29761 | }
|
29762 |
|
29763 | if (flippedVariation) {
|
29764 | variation = getOppositeVariation(variation);
|
29765 | }
|
29766 |
|
29767 | data.placement = placement + (variation ? '-' + variation : '');
|
29768 |
|
29769 |
|
29770 |
|
29771 | data.offsets.popper = _extends$1({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
|
29772 |
|
29773 | data = runModifiers(data.instance.modifiers, data, 'flip');
|
29774 | }
|
29775 | });
|
29776 | return data;
|
29777 | }
|
29778 |
|
29779 | |
29780 |
|
29781 |
|
29782 |
|
29783 |
|
29784 |
|
29785 |
|
29786 | function keepTogether(data) {
|
29787 | var _data$offsets = data.offsets,
|
29788 | popper = _data$offsets.popper,
|
29789 | reference = _data$offsets.reference;
|
29790 |
|
29791 | var placement = data.placement.split('-')[0];
|
29792 | var floor = Math.floor;
|
29793 | var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
|
29794 | var side = isVertical ? 'right' : 'bottom';
|
29795 | var opSide = isVertical ? 'left' : 'top';
|
29796 | var measurement = isVertical ? 'width' : 'height';
|
29797 |
|
29798 | if (popper[side] < floor(reference[opSide])) {
|
29799 | data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];
|
29800 | }
|
29801 | if (popper[opSide] > floor(reference[side])) {
|
29802 | data.offsets.popper[opSide] = floor(reference[side]);
|
29803 | }
|
29804 |
|
29805 | return data;
|
29806 | }
|
29807 |
|
29808 | |
29809 |
|
29810 |
|
29811 |
|
29812 |
|
29813 |
|
29814 |
|
29815 |
|
29816 |
|
29817 |
|
29818 |
|
29819 |
|
29820 | function toValue(str, measurement, popperOffsets, referenceOffsets) {
|
29821 |
|
29822 | var split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/);
|
29823 | var value = +split[1];
|
29824 | var unit = split[2];
|
29825 |
|
29826 |
|
29827 | if (!value) {
|
29828 | return str;
|
29829 | }
|
29830 |
|
29831 | if (unit.indexOf('%') === 0) {
|
29832 | var element = void 0;
|
29833 | switch (unit) {
|
29834 | case '%p':
|
29835 | element = popperOffsets;
|
29836 | break;
|
29837 | case '%':
|
29838 | case '%r':
|
29839 | default:
|
29840 | element = referenceOffsets;
|
29841 | }
|
29842 |
|
29843 | var rect = getClientRect(element);
|
29844 | return rect[measurement] / 100 * value;
|
29845 | } else if (unit === 'vh' || unit === 'vw') {
|
29846 |
|
29847 | var size = void 0;
|
29848 | if (unit === 'vh') {
|
29849 | size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
29850 | } else {
|
29851 | size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
29852 | }
|
29853 | return size / 100 * value;
|
29854 | } else {
|
29855 |
|
29856 |
|
29857 | return value;
|
29858 | }
|
29859 | }
|
29860 |
|
29861 | |
29862 |
|
29863 |
|
29864 |
|
29865 |
|
29866 |
|
29867 |
|
29868 |
|
29869 |
|
29870 |
|
29871 |
|
29872 | function parseOffset(offset, popperOffsets, referenceOffsets, basePlacement) {
|
29873 | var offsets = [0, 0];
|
29874 |
|
29875 |
|
29876 |
|
29877 |
|
29878 | var useHeight = ['right', 'left'].indexOf(basePlacement) !== -1;
|
29879 |
|
29880 |
|
29881 |
|
29882 | var fragments = offset.split(/(\+|\-)/).map(function (frag) {
|
29883 | return frag.trim();
|
29884 | });
|
29885 |
|
29886 |
|
29887 |
|
29888 | var divider = fragments.indexOf(find(fragments, function (frag) {
|
29889 | return frag.search(/,|\s/) !== -1;
|
29890 | }));
|
29891 |
|
29892 | if (fragments[divider] && fragments[divider].indexOf(',') === -1) {
|
29893 | console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
|
29894 | }
|
29895 |
|
29896 |
|
29897 |
|
29898 | var splitRegex = /\s*,\s*|\s+/;
|
29899 | 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];
|
29900 |
|
29901 |
|
29902 | ops = ops.map(function (op, index) {
|
29903 |
|
29904 | var measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width';
|
29905 | var mergeWithPrevious = false;
|
29906 | return op
|
29907 |
|
29908 |
|
29909 | .reduce(function (a, b) {
|
29910 | if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {
|
29911 | a[a.length - 1] = b;
|
29912 | mergeWithPrevious = true;
|
29913 | return a;
|
29914 | } else if (mergeWithPrevious) {
|
29915 | a[a.length - 1] += b;
|
29916 | mergeWithPrevious = false;
|
29917 | return a;
|
29918 | } else {
|
29919 | return a.concat(b);
|
29920 | }
|
29921 | }, [])
|
29922 |
|
29923 | .map(function (str) {
|
29924 | return toValue(str, measurement, popperOffsets, referenceOffsets);
|
29925 | });
|
29926 | });
|
29927 |
|
29928 |
|
29929 | ops.forEach(function (op, index) {
|
29930 | op.forEach(function (frag, index2) {
|
29931 | if (isNumeric(frag)) {
|
29932 | offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);
|
29933 | }
|
29934 | });
|
29935 | });
|
29936 | return offsets;
|
29937 | }
|
29938 |
|
29939 | |
29940 |
|
29941 |
|
29942 |
|
29943 |
|
29944 |
|
29945 |
|
29946 |
|
29947 |
|
29948 | function offset(data, _ref) {
|
29949 | var offset = _ref.offset;
|
29950 | var placement = data.placement,
|
29951 | _data$offsets = data.offsets,
|
29952 | popper = _data$offsets.popper,
|
29953 | reference = _data$offsets.reference;
|
29954 |
|
29955 | var basePlacement = placement.split('-')[0];
|
29956 |
|
29957 | var offsets = void 0;
|
29958 | if (isNumeric(+offset)) {
|
29959 | offsets = [+offset, 0];
|
29960 | } else {
|
29961 | offsets = parseOffset(offset, popper, reference, basePlacement);
|
29962 | }
|
29963 |
|
29964 | if (basePlacement === 'left') {
|
29965 | popper.top += offsets[0];
|
29966 | popper.left -= offsets[1];
|
29967 | } else if (basePlacement === 'right') {
|
29968 | popper.top += offsets[0];
|
29969 | popper.left += offsets[1];
|
29970 | } else if (basePlacement === 'top') {
|
29971 | popper.left += offsets[0];
|
29972 | popper.top -= offsets[1];
|
29973 | } else if (basePlacement === 'bottom') {
|
29974 | popper.left += offsets[0];
|
29975 | popper.top += offsets[1];
|
29976 | }
|
29977 |
|
29978 | data.popper = popper;
|
29979 | return data;
|
29980 | }
|
29981 |
|
29982 | |
29983 |
|
29984 |
|
29985 |
|
29986 |
|
29987 |
|
29988 |
|
29989 | function preventOverflow(data, options) {
|
29990 | var boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper);
|
29991 |
|
29992 |
|
29993 |
|
29994 |
|
29995 | if (data.instance.reference === boundariesElement) {
|
29996 | boundariesElement = getOffsetParent(boundariesElement);
|
29997 | }
|
29998 |
|
29999 |
|
30000 |
|
30001 |
|
30002 | var transformProp = getSupportedPropertyName('transform');
|
30003 | var popperStyles = data.instance.popper.style;
|
30004 | var top = popperStyles.top,
|
30005 | left = popperStyles.left,
|
30006 | transform = popperStyles[transformProp];
|
30007 |
|
30008 | popperStyles.top = '';
|
30009 | popperStyles.left = '';
|
30010 | popperStyles[transformProp] = '';
|
30011 |
|
30012 | var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement, data.positionFixed);
|
30013 |
|
30014 |
|
30015 |
|
30016 | popperStyles.top = top;
|
30017 | popperStyles.left = left;
|
30018 | popperStyles[transformProp] = transform;
|
30019 |
|
30020 | options.boundaries = boundaries;
|
30021 |
|
30022 | var order = options.priority;
|
30023 | var popper = data.offsets.popper;
|
30024 |
|
30025 | var check = {
|
30026 | primary: function primary(placement) {
|
30027 | var value = popper[placement];
|
30028 | if (popper[placement] < boundaries[placement] && !options.escapeWithReference) {
|
30029 | value = Math.max(popper[placement], boundaries[placement]);
|
30030 | }
|
30031 | return defineProperty$1({}, placement, value);
|
30032 | },
|
30033 | secondary: function secondary(placement) {
|
30034 | var mainSide = placement === 'right' ? 'left' : 'top';
|
30035 | var value = popper[mainSide];
|
30036 | if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {
|
30037 | value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));
|
30038 | }
|
30039 | return defineProperty$1({}, mainSide, value);
|
30040 | }
|
30041 | };
|
30042 |
|
30043 | order.forEach(function (placement) {
|
30044 | var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
|
30045 | popper = _extends$1({}, popper, check[side](placement));
|
30046 | });
|
30047 |
|
30048 | data.offsets.popper = popper;
|
30049 |
|
30050 | return data;
|
30051 | }
|
30052 |
|
30053 | |
30054 |
|
30055 |
|
30056 |
|
30057 |
|
30058 |
|
30059 |
|
30060 | function shift(data) {
|
30061 | var placement = data.placement;
|
30062 | var basePlacement = placement.split('-')[0];
|
30063 | var shiftvariation = placement.split('-')[1];
|
30064 |
|
30065 |
|
30066 | if (shiftvariation) {
|
30067 | var _data$offsets = data.offsets,
|
30068 | reference = _data$offsets.reference,
|
30069 | popper = _data$offsets.popper;
|
30070 |
|
30071 | var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
|
30072 | var side = isVertical ? 'left' : 'top';
|
30073 | var measurement = isVertical ? 'width' : 'height';
|
30074 |
|
30075 | var shiftOffsets = {
|
30076 | start: defineProperty$1({}, side, reference[side]),
|
30077 | end: defineProperty$1({}, side, reference[side] + reference[measurement] - popper[measurement])
|
30078 | };
|
30079 |
|
30080 | data.offsets.popper = _extends$1({}, popper, shiftOffsets[shiftvariation]);
|
30081 | }
|
30082 |
|
30083 | return data;
|
30084 | }
|
30085 |
|
30086 | |
30087 |
|
30088 |
|
30089 |
|
30090 |
|
30091 |
|
30092 |
|
30093 | function hide(data) {
|
30094 | if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {
|
30095 | return data;
|
30096 | }
|
30097 |
|
30098 | var refRect = data.offsets.reference;
|
30099 | var bound = find(data.instance.modifiers, function (modifier) {
|
30100 | return modifier.name === 'preventOverflow';
|
30101 | }).boundaries;
|
30102 |
|
30103 | if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
|
30104 |
|
30105 | if (data.hide === true) {
|
30106 | return data;
|
30107 | }
|
30108 |
|
30109 | data.hide = true;
|
30110 | data.attributes['x-out-of-boundaries'] = '';
|
30111 | } else {
|
30112 |
|
30113 | if (data.hide === false) {
|
30114 | return data;
|
30115 | }
|
30116 |
|
30117 | data.hide = false;
|
30118 | data.attributes['x-out-of-boundaries'] = false;
|
30119 | }
|
30120 |
|
30121 | return data;
|
30122 | }
|
30123 |
|
30124 | |
30125 |
|
30126 |
|
30127 |
|
30128 |
|
30129 |
|
30130 |
|
30131 | function inner(data) {
|
30132 | var placement = data.placement;
|
30133 | var basePlacement = placement.split('-')[0];
|
30134 | var _data$offsets = data.offsets,
|
30135 | popper = _data$offsets.popper,
|
30136 | reference = _data$offsets.reference;
|
30137 |
|
30138 | var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;
|
30139 |
|
30140 | var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;
|
30141 |
|
30142 | popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);
|
30143 |
|
30144 | data.placement = getOppositePlacement(placement);
|
30145 | data.offsets.popper = getClientRect(popper);
|
30146 |
|
30147 | return data;
|
30148 | }
|
30149 |
|
30150 | |
30151 |
|
30152 |
|
30153 |
|
30154 |
|
30155 |
|
30156 |
|
30157 |
|
30158 |
|
30159 |
|
30160 |
|
30161 |
|
30162 | |
30163 |
|
30164 |
|
30165 |
|
30166 |
|
30167 |
|
30168 |
|
30169 |
|
30170 |
|
30171 | var modifiers = {
|
30172 | |
30173 |
|
30174 |
|
30175 |
|
30176 |
|
30177 |
|
30178 |
|
30179 |
|
30180 | shift: {
|
30181 |
|
30182 | order: 100,
|
30183 |
|
30184 | enabled: true,
|
30185 |
|
30186 | fn: shift
|
30187 | },
|
30188 |
|
30189 | |
30190 |
|
30191 |
|
30192 |
|
30193 |
|
30194 |
|
30195 |
|
30196 |
|
30197 |
|
30198 |
|
30199 |
|
30200 |
|
30201 |
|
30202 |
|
30203 |
|
30204 |
|
30205 |
|
30206 |
|
30207 |
|
30208 |
|
30209 |
|
30210 |
|
30211 |
|
30212 |
|
30213 |
|
30214 |
|
30215 |
|
30216 |
|
30217 |
|
30218 |
|
30219 |
|
30220 |
|
30221 |
|
30222 |
|
30223 |
|
30224 |
|
30225 |
|
30226 |
|
30227 | offset: {
|
30228 |
|
30229 | order: 200,
|
30230 |
|
30231 | enabled: true,
|
30232 |
|
30233 | fn: offset,
|
30234 | |
30235 |
|
30236 |
|
30237 | offset: 0
|
30238 | },
|
30239 |
|
30240 | |
30241 |
|
30242 |
|
30243 |
|
30244 |
|
30245 |
|
30246 |
|
30247 |
|
30248 |
|
30249 |
|
30250 |
|
30251 |
|
30252 |
|
30253 |
|
30254 |
|
30255 |
|
30256 |
|
30257 | preventOverflow: {
|
30258 |
|
30259 | order: 300,
|
30260 |
|
30261 | enabled: true,
|
30262 |
|
30263 | fn: preventOverflow,
|
30264 | |
30265 |
|
30266 |
|
30267 |
|
30268 |
|
30269 | priority: ['left', 'right', 'top', 'bottom'],
|
30270 | |
30271 |
|
30272 |
|
30273 |
|
30274 |
|
30275 |
|
30276 | padding: 5,
|
30277 | |
30278 |
|
30279 |
|
30280 |
|
30281 |
|
30282 | boundariesElement: 'scrollParent'
|
30283 | },
|
30284 |
|
30285 | |
30286 |
|
30287 |
|
30288 |
|
30289 |
|
30290 |
|
30291 |
|
30292 |
|
30293 |
|
30294 | keepTogether: {
|
30295 |
|
30296 | order: 400,
|
30297 |
|
30298 | enabled: true,
|
30299 |
|
30300 | fn: keepTogether
|
30301 | },
|
30302 |
|
30303 | |
30304 |
|
30305 |
|
30306 |
|
30307 |
|
30308 |
|
30309 |
|
30310 |
|
30311 |
|
30312 |
|
30313 | arrow: {
|
30314 |
|
30315 | order: 500,
|
30316 |
|
30317 | enabled: true,
|
30318 |
|
30319 | fn: arrow,
|
30320 |
|
30321 | element: '[x-arrow]'
|
30322 | },
|
30323 |
|
30324 | |
30325 |
|
30326 |
|
30327 |
|
30328 |
|
30329 |
|
30330 |
|
30331 |
|
30332 |
|
30333 |
|
30334 |
|
30335 | flip: {
|
30336 |
|
30337 | order: 600,
|
30338 |
|
30339 | enabled: true,
|
30340 |
|
30341 | fn: flip,
|
30342 | |
30343 |
|
30344 |
|
30345 |
|
30346 |
|
30347 |
|
30348 | behavior: 'flip',
|
30349 | |
30350 |
|
30351 |
|
30352 |
|
30353 | padding: 5,
|
30354 | |
30355 |
|
30356 |
|
30357 |
|
30358 |
|
30359 |
|
30360 | boundariesElement: 'viewport',
|
30361 | |
30362 |
|
30363 |
|
30364 |
|
30365 |
|
30366 |
|
30367 |
|
30368 | flipVariations: false,
|
30369 | |
30370 |
|
30371 |
|
30372 |
|
30373 |
|
30374 |
|
30375 |
|
30376 | flipVariationsByContent: false
|
30377 | },
|
30378 |
|
30379 | |
30380 |
|
30381 |
|
30382 |
|
30383 |
|
30384 |
|
30385 |
|
30386 | inner: {
|
30387 |
|
30388 | order: 700,
|
30389 |
|
30390 | enabled: false,
|
30391 |
|
30392 | fn: inner
|
30393 | },
|
30394 |
|
30395 | |
30396 |
|
30397 |
|
30398 |
|
30399 |
|
30400 |
|
30401 |
|
30402 |
|
30403 |
|
30404 |
|
30405 | hide: {
|
30406 |
|
30407 | order: 800,
|
30408 |
|
30409 | enabled: true,
|
30410 |
|
30411 | fn: hide
|
30412 | },
|
30413 |
|
30414 | |
30415 |
|
30416 |
|
30417 |
|
30418 |
|
30419 |
|
30420 |
|
30421 |
|
30422 |
|
30423 |
|
30424 |
|
30425 |
|
30426 |
|
30427 |
|
30428 |
|
30429 | computeStyle: {
|
30430 |
|
30431 | order: 850,
|
30432 |
|
30433 | enabled: true,
|
30434 |
|
30435 | fn: computeStyle,
|
30436 | |
30437 |
|
30438 |
|
30439 |
|
30440 |
|
30441 | gpuAcceleration: true,
|
30442 | |
30443 |
|
30444 |
|
30445 |
|
30446 |
|
30447 | x: 'bottom',
|
30448 | |
30449 |
|
30450 |
|
30451 |
|
30452 |
|
30453 | y: 'right'
|
30454 | },
|
30455 |
|
30456 | |
30457 |
|
30458 |
|
30459 |
|
30460 |
|
30461 |
|
30462 |
|
30463 |
|
30464 |
|
30465 |
|
30466 |
|
30467 |
|
30468 |
|
30469 |
|
30470 |
|
30471 | applyStyle: {
|
30472 |
|
30473 | order: 900,
|
30474 |
|
30475 | enabled: true,
|
30476 |
|
30477 | fn: applyStyle,
|
30478 |
|
30479 | onLoad: applyStyleOnLoad,
|
30480 | |
30481 |
|
30482 |
|
30483 |
|
30484 |
|
30485 |
|
30486 | gpuAcceleration: undefined
|
30487 | }
|
30488 | };
|
30489 |
|
30490 | |
30491 |
|
30492 |
|
30493 |
|
30494 |
|
30495 |
|
30496 |
|
30497 |
|
30498 |
|
30499 |
|
30500 |
|
30501 |
|
30502 |
|
30503 |
|
30504 |
|
30505 |
|
30506 |
|
30507 |
|
30508 |
|
30509 | |
30510 |
|
30511 |
|
30512 |
|
30513 |
|
30514 |
|
30515 |
|
30516 |
|
30517 |
|
30518 |
|
30519 |
|
30520 |
|
30521 |
|
30522 |
|
30523 |
|
30524 |
|
30525 | var Defaults = {
|
30526 | |
30527 |
|
30528 |
|
30529 |
|
30530 | placement: 'bottom',
|
30531 |
|
30532 | |
30533 |
|
30534 |
|
30535 |
|
30536 | positionFixed: false,
|
30537 |
|
30538 | |
30539 |
|
30540 |
|
30541 |
|
30542 | eventsEnabled: true,
|
30543 |
|
30544 | |
30545 |
|
30546 |
|
30547 |
|
30548 |
|
30549 | removeOnDestroy: false,
|
30550 |
|
30551 | |
30552 |
|
30553 |
|
30554 |
|
30555 |
|
30556 |
|
30557 | onCreate: function onCreate() {},
|
30558 |
|
30559 | |
30560 |
|
30561 |
|
30562 |
|
30563 |
|
30564 |
|
30565 |
|
30566 |
|
30567 | onUpdate: function onUpdate() {},
|
30568 |
|
30569 | |
30570 |
|
30571 |
|
30572 |
|
30573 |
|
30574 | modifiers: modifiers
|
30575 | };
|
30576 |
|
30577 | |
30578 |
|
30579 |
|
30580 |
|
30581 |
|
30582 | |
30583 |
|
30584 |
|
30585 |
|
30586 |
|
30587 |
|
30588 |
|
30589 | var Popper = function () {
|
30590 | |
30591 |
|
30592 |
|
30593 |
|
30594 |
|
30595 |
|
30596 |
|
30597 |
|
30598 | function Popper(reference, popper) {
|
30599 | var _this = this;
|
30600 |
|
30601 | var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
30602 | classCallCheck(this, Popper);
|
30603 |
|
30604 | this.scheduleUpdate = function () {
|
30605 | return requestAnimationFrame(_this.update);
|
30606 | };
|
30607 |
|
30608 |
|
30609 | this.update = debounce$1(this.update.bind(this));
|
30610 |
|
30611 |
|
30612 | this.options = _extends$1({}, Popper.Defaults, options);
|
30613 |
|
30614 |
|
30615 | this.state = {
|
30616 | isDestroyed: false,
|
30617 | isCreated: false,
|
30618 | scrollParents: []
|
30619 | };
|
30620 |
|
30621 |
|
30622 | this.reference = reference && reference.jquery ? reference[0] : reference;
|
30623 | this.popper = popper && popper.jquery ? popper[0] : popper;
|
30624 |
|
30625 |
|
30626 | this.options.modifiers = {};
|
30627 | Object.keys(_extends$1({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
|
30628 | _this.options.modifiers[name] = _extends$1({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
|
30629 | });
|
30630 |
|
30631 |
|
30632 | this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
|
30633 | return _extends$1({
|
30634 | name: name
|
30635 | }, _this.options.modifiers[name]);
|
30636 | })
|
30637 |
|
30638 | .sort(function (a, b) {
|
30639 | return a.order - b.order;
|
30640 | });
|
30641 |
|
30642 |
|
30643 |
|
30644 |
|
30645 |
|
30646 | this.modifiers.forEach(function (modifierOptions) {
|
30647 | if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) {
|
30648 | modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state);
|
30649 | }
|
30650 | });
|
30651 |
|
30652 |
|
30653 | this.update();
|
30654 |
|
30655 | var eventsEnabled = this.options.eventsEnabled;
|
30656 | if (eventsEnabled) {
|
30657 |
|
30658 | this.enableEventListeners();
|
30659 | }
|
30660 |
|
30661 | this.state.eventsEnabled = eventsEnabled;
|
30662 | }
|
30663 |
|
30664 |
|
30665 |
|
30666 |
|
30667 |
|
30668 | createClass(Popper, [{
|
30669 | key: 'update',
|
30670 | value: function update$$1() {
|
30671 | return update$1.call(this);
|
30672 | }
|
30673 | }, {
|
30674 | key: 'destroy',
|
30675 | value: function destroy$$1() {
|
30676 | return destroy.call(this);
|
30677 | }
|
30678 | }, {
|
30679 | key: 'enableEventListeners',
|
30680 | value: function enableEventListeners$$1() {
|
30681 | return enableEventListeners.call(this);
|
30682 | }
|
30683 | }, {
|
30684 | key: 'disableEventListeners',
|
30685 | value: function disableEventListeners$$1() {
|
30686 | return disableEventListeners.call(this);
|
30687 | }
|
30688 |
|
30689 | |
30690 |
|
30691 |
|
30692 |
|
30693 |
|
30694 |
|
30695 |
|
30696 | |
30697 |
|
30698 |
|
30699 |
|
30700 |
|
30701 |
|
30702 |
|
30703 |
|
30704 |
|
30705 |
|
30706 |
|
30707 |
|
30708 |
|
30709 |
|
30710 |
|
30711 |
|
30712 |
|
30713 | }]);
|
30714 | return Popper;
|
30715 | }();
|
30716 |
|
30717 | |
30718 |
|
30719 |
|
30720 |
|
30721 |
|
30722 |
|
30723 |
|
30724 |
|
30725 |
|
30726 |
|
30727 |
|
30728 |
|
30729 |
|
30730 |
|
30731 |
|
30732 |
|
30733 |
|
30734 |
|
30735 |
|
30736 |
|
30737 |
|
30738 | Popper.Utils = (typeof window !== 'undefined' ? window : global$1).PopperUtils;
|
30739 | Popper.placements = placements;
|
30740 | Popper.Defaults = Defaults;
|
30741 |
|
30742 | function flipPlacement(placement, theme) {
|
30743 | var direction = theme && theme.direction || 'ltr';
|
30744 |
|
30745 | if (direction === 'ltr') {
|
30746 | return placement;
|
30747 | }
|
30748 |
|
30749 | switch (placement) {
|
30750 | case 'bottom-end':
|
30751 | return 'bottom-start';
|
30752 |
|
30753 | case 'bottom-start':
|
30754 | return 'bottom-end';
|
30755 |
|
30756 | case 'top-end':
|
30757 | return 'top-start';
|
30758 |
|
30759 | case 'top-start':
|
30760 | return 'top-end';
|
30761 |
|
30762 | default:
|
30763 | return placement;
|
30764 | }
|
30765 | }
|
30766 |
|
30767 | function getAnchorEl$1(anchorEl) {
|
30768 | return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
|
30769 | }
|
30770 |
|
30771 | var useEnhancedEffect$9 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
30772 | var defaultPopperOptions = {};
|
30773 | |
30774 |
|
30775 |
|
30776 |
|
30777 | var Popper$1 = React.forwardRef(function Popper$1(props, ref) {
|
30778 | var anchorEl = props.anchorEl,
|
30779 | children = props.children,
|
30780 | container = props.container,
|
30781 | _props$disablePortal = props.disablePortal,
|
30782 | disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
|
30783 | _props$keepMounted = props.keepMounted,
|
30784 | keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
|
30785 | modifiers = props.modifiers,
|
30786 | open = props.open,
|
30787 | _props$placement = props.placement,
|
30788 | initialPlacement = _props$placement === void 0 ? 'bottom' : _props$placement,
|
30789 | _props$popperOptions = props.popperOptions,
|
30790 | popperOptions = _props$popperOptions === void 0 ? defaultPopperOptions : _props$popperOptions,
|
30791 | popperRefProp = props.popperRef,
|
30792 | style = props.style,
|
30793 | _props$transition = props.transition,
|
30794 | transition = _props$transition === void 0 ? false : _props$transition,
|
30795 | other = _objectWithoutProperties(props, ["anchorEl", "children", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"]);
|
30796 |
|
30797 | var tooltipRef = React.useRef(null);
|
30798 | var ownRef = useForkRef(tooltipRef, ref);
|
30799 | var popperRef = React.useRef(null);
|
30800 | var handlePopperRef = useForkRef(popperRef, popperRefProp);
|
30801 | var handlePopperRefRef = React.useRef(handlePopperRef);
|
30802 | useEnhancedEffect$9(function () {
|
30803 | handlePopperRefRef.current = handlePopperRef;
|
30804 | }, [handlePopperRef]);
|
30805 | React.useImperativeHandle(popperRefProp, function () {
|
30806 | return popperRef.current;
|
30807 | }, []);
|
30808 |
|
30809 | var _React$useState = React.useState(true),
|
30810 | exited = _React$useState[0],
|
30811 | setExited = _React$useState[1];
|
30812 |
|
30813 | var theme = useTheme();
|
30814 | var rtlPlacement = flipPlacement(initialPlacement, theme);
|
30815 | |
30816 |
|
30817 |
|
30818 |
|
30819 |
|
30820 | var _React$useState2 = React.useState(rtlPlacement),
|
30821 | placement = _React$useState2[0],
|
30822 | setPlacement = _React$useState2[1];
|
30823 |
|
30824 | React.useEffect(function () {
|
30825 | if (popperRef.current) {
|
30826 | popperRef.current.update();
|
30827 | }
|
30828 | });
|
30829 | var handleOpen = React.useCallback(function () {
|
30830 | if (!tooltipRef.current || !anchorEl || !open) {
|
30831 | return;
|
30832 | }
|
30833 |
|
30834 | if (popperRef.current) {
|
30835 | popperRef.current.destroy();
|
30836 | handlePopperRefRef.current(null);
|
30837 | }
|
30838 |
|
30839 | var handlePopperUpdate = function handlePopperUpdate(data) {
|
30840 | setPlacement(data.placement);
|
30841 | };
|
30842 |
|
30843 | var resolvedAnchorEl = getAnchorEl$1(anchorEl);
|
30844 |
|
30845 | {
|
30846 | if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
|
30847 | var box = resolvedAnchorEl.getBoundingClientRect();
|
30848 |
|
30849 | if ( box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
30850 | 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'));
|
30851 | }
|
30852 | }
|
30853 | }
|
30854 |
|
30855 | var popper = new Popper(getAnchorEl$1(anchorEl), tooltipRef.current, _extends({
|
30856 | placement: rtlPlacement
|
30857 | }, popperOptions, {
|
30858 | modifiers: _extends({}, disablePortal ? {} : {
|
30859 |
|
30860 | preventOverflow: {
|
30861 | boundariesElement: 'window'
|
30862 | }
|
30863 | }, modifiers, popperOptions.modifiers),
|
30864 |
|
30865 |
|
30866 | onCreate: createChainedFunction(handlePopperUpdate, popperOptions.onCreate),
|
30867 | onUpdate: createChainedFunction(handlePopperUpdate, popperOptions.onUpdate)
|
30868 | }));
|
30869 | handlePopperRefRef.current(popper);
|
30870 | }, [anchorEl, disablePortal, modifiers, open, rtlPlacement, popperOptions]);
|
30871 | var handleRef = React.useCallback(function (node) {
|
30872 | setRef(ownRef, node);
|
30873 | handleOpen();
|
30874 | }, [ownRef, handleOpen]);
|
30875 |
|
30876 | var handleEnter = function handleEnter() {
|
30877 | setExited(false);
|
30878 | };
|
30879 |
|
30880 | var handleClose = function handleClose() {
|
30881 | if (!popperRef.current) {
|
30882 | return;
|
30883 | }
|
30884 |
|
30885 | popperRef.current.destroy();
|
30886 | handlePopperRefRef.current(null);
|
30887 | };
|
30888 |
|
30889 | var handleExited = function handleExited() {
|
30890 | setExited(true);
|
30891 | handleClose();
|
30892 | };
|
30893 |
|
30894 | React.useEffect(function () {
|
30895 | return function () {
|
30896 | handleClose();
|
30897 | };
|
30898 | }, []);
|
30899 | React.useEffect(function () {
|
30900 | if (!open && !transition) {
|
30901 |
|
30902 | handleClose();
|
30903 | }
|
30904 | }, [open, transition]);
|
30905 |
|
30906 | if (!keepMounted && !open && (!transition || exited)) {
|
30907 | return null;
|
30908 | }
|
30909 |
|
30910 | var childProps = {
|
30911 | placement: placement
|
30912 | };
|
30913 |
|
30914 | if (transition) {
|
30915 | childProps.TransitionProps = {
|
30916 | in: open,
|
30917 | onEnter: handleEnter,
|
30918 | onExited: handleExited
|
30919 | };
|
30920 | }
|
30921 |
|
30922 | return React.createElement(Portal, {
|
30923 | disablePortal: disablePortal,
|
30924 | container: container
|
30925 | }, React.createElement("div", _extends({
|
30926 | ref: handleRef,
|
30927 | role: "tooltip"
|
30928 | }, other, {
|
30929 | style: _extends({
|
30930 |
|
30931 | position: 'fixed',
|
30932 |
|
30933 | top: 0,
|
30934 | left: 0,
|
30935 | display: !open && keepMounted && !transition ? 'none' : null
|
30936 | }, style)
|
30937 | }), typeof children === 'function' ? children(childProps) : children));
|
30938 | });
|
30939 | Popper$1.propTypes = {
|
30940 |
|
30941 |
|
30942 |
|
30943 |
|
30944 |
|
30945 | |
30946 |
|
30947 |
|
30948 |
|
30949 |
|
30950 |
|
30951 | anchorEl: chainPropTypes(propTypes.oneOfType([HTMLElementType, propTypes.object, propTypes.func]), function (props) {
|
30952 | if (props.open) {
|
30953 | var resolvedAnchorEl = getAnchorEl$1(props.anchorEl);
|
30954 |
|
30955 | if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
|
30956 | var box = resolvedAnchorEl.getBoundingClientRect();
|
30957 |
|
30958 | if ( box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
30959 | 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'));
|
30960 | }
|
30961 | } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.clientWidth !== 'number' || typeof resolvedAnchorEl.clientHeight !== 'number' || typeof resolvedAnchorEl.getBoundingClientRect !== 'function') {
|
30962 | 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/docs/v1/#referenceObject).'].join('\n'));
|
30963 | }
|
30964 | }
|
30965 |
|
30966 | return null;
|
30967 | }),
|
30968 |
|
30969 | |
30970 |
|
30971 |
|
30972 | children: propTypes
|
30973 |
|
30974 | .oneOfType([propTypes.node, propTypes.func]).isRequired,
|
30975 |
|
30976 | |
30977 |
|
30978 |
|
30979 |
|
30980 |
|
30981 |
|
30982 |
|
30983 | container: propTypes
|
30984 |
|
30985 | .oneOfType([HTMLElementType, propTypes.instanceOf(React.Component), propTypes.func]),
|
30986 |
|
30987 | |
30988 |
|
30989 |
|
30990 |
|
30991 | disablePortal: propTypes.bool,
|
30992 |
|
30993 | |
30994 |
|
30995 |
|
30996 |
|
30997 |
|
30998 | keepMounted: propTypes.bool,
|
30999 |
|
31000 | |
31001 |
|
31002 |
|
31003 |
|
31004 |
|
31005 |
|
31006 |
|
31007 |
|
31008 |
|
31009 | modifiers: propTypes.object,
|
31010 |
|
31011 | |
31012 |
|
31013 |
|
31014 | open: propTypes.bool.isRequired,
|
31015 |
|
31016 | |
31017 |
|
31018 |
|
31019 | placement: propTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
31020 |
|
31021 | |
31022 |
|
31023 |
|
31024 | popperOptions: propTypes.object,
|
31025 |
|
31026 | |
31027 |
|
31028 |
|
31029 | popperRef: refType,
|
31030 |
|
31031 | |
31032 |
|
31033 |
|
31034 | style: propTypes.object,
|
31035 |
|
31036 | |
31037 |
|
31038 |
|
31039 | transition: propTypes.bool
|
31040 | } ;
|
31041 |
|
31042 | |
31043 |
|
31044 |
|
31045 |
|
31046 | var RadioButtonUncheckedIcon = createSvgIcon( React.createElement("path", {
|
31047 | 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"
|
31048 | }), 'RadioButtonUnchecked');
|
31049 |
|
31050 | |
31051 |
|
31052 |
|
31053 |
|
31054 | var RadioButtonCheckedIcon = createSvgIcon( React.createElement("path", {
|
31055 | 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"
|
31056 | }), 'RadioButtonChecked');
|
31057 |
|
31058 | var styles$1l = function styles(theme) {
|
31059 | return {
|
31060 | root: {
|
31061 | position: 'relative',
|
31062 | display: 'flex',
|
31063 | '&$checked $layer': {
|
31064 | transform: 'scale(1)',
|
31065 | transition: theme.transitions.create('transform', {
|
31066 | easing: theme.transitions.easing.easeOut,
|
31067 | duration: theme.transitions.duration.shortest
|
31068 | })
|
31069 | }
|
31070 | },
|
31071 | layer: {
|
31072 | left: 0,
|
31073 | position: 'absolute',
|
31074 | transform: 'scale(0)',
|
31075 | transition: theme.transitions.create('transform', {
|
31076 | easing: theme.transitions.easing.easeIn,
|
31077 | duration: theme.transitions.duration.shortest
|
31078 | })
|
31079 | },
|
31080 | checked: {}
|
31081 | };
|
31082 | };
|
31083 | |
31084 |
|
31085 |
|
31086 |
|
31087 | function RadioButtonIcon(props) {
|
31088 | var checked = props.checked,
|
31089 | classes = props.classes,
|
31090 | fontSize = props.fontSize;
|
31091 | return React.createElement("div", {
|
31092 | className: clsx(classes.root, checked && classes.checked)
|
31093 | }, React.createElement(RadioButtonUncheckedIcon, {
|
31094 | fontSize: fontSize
|
31095 | }), React.createElement(RadioButtonCheckedIcon, {
|
31096 | fontSize: fontSize,
|
31097 | className: classes.layer
|
31098 | }));
|
31099 | }
|
31100 |
|
31101 | RadioButtonIcon.propTypes = {
|
31102 | |
31103 |
|
31104 |
|
31105 | checked: propTypes.bool,
|
31106 |
|
31107 | |
31108 |
|
31109 |
|
31110 |
|
31111 | classes: propTypes.object.isRequired,
|
31112 |
|
31113 | |
31114 |
|
31115 |
|
31116 |
|
31117 | fontSize: propTypes.oneOf(['small', 'medium'])
|
31118 | } ;
|
31119 | var RadioButtonIcon$1 = withStyles$1(styles$1l, {
|
31120 | name: 'PrivateRadioButtonIcon'
|
31121 | })(RadioButtonIcon);
|
31122 |
|
31123 | |
31124 |
|
31125 |
|
31126 |
|
31127 | var RadioGroupContext = React.createContext();
|
31128 |
|
31129 | {
|
31130 | RadioGroupContext.displayName = 'RadioGroupContext';
|
31131 | }
|
31132 |
|
31133 | function useRadioGroup() {
|
31134 | return React.useContext(RadioGroupContext);
|
31135 | }
|
31136 |
|
31137 | var styles$1m = function styles(theme) {
|
31138 | return {
|
31139 |
|
31140 | root: {
|
31141 | color: theme.palette.text.secondary
|
31142 | },
|
31143 |
|
31144 |
|
31145 | checked: {},
|
31146 |
|
31147 |
|
31148 | disabled: {},
|
31149 |
|
31150 |
|
31151 | colorPrimary: {
|
31152 | '&$checked': {
|
31153 | color: theme.palette.primary.main,
|
31154 | '&:hover': {
|
31155 | backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
31156 |
|
31157 | '@media (hover: none)': {
|
31158 | backgroundColor: 'transparent'
|
31159 | }
|
31160 | }
|
31161 | },
|
31162 | '&$disabled': {
|
31163 | color: theme.palette.action.disabled
|
31164 | }
|
31165 | },
|
31166 |
|
31167 |
|
31168 | colorSecondary: {
|
31169 | '&$checked': {
|
31170 | color: theme.palette.secondary.main,
|
31171 | '&:hover': {
|
31172 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
31173 |
|
31174 | '@media (hover: none)': {
|
31175 | backgroundColor: 'transparent'
|
31176 | }
|
31177 | }
|
31178 | },
|
31179 | '&$disabled': {
|
31180 | color: theme.palette.action.disabled
|
31181 | }
|
31182 | }
|
31183 | };
|
31184 | };
|
31185 | var defaultCheckedIcon$1 = React.createElement(RadioButtonIcon$1, {
|
31186 | checked: true
|
31187 | });
|
31188 | var defaultIcon$1 = React.createElement(RadioButtonIcon$1, null);
|
31189 | var Radio = React.forwardRef(function Radio(props, ref) {
|
31190 | var checkedProp = props.checked,
|
31191 | classes = props.classes,
|
31192 | _props$color = props.color,
|
31193 | color = _props$color === void 0 ? 'secondary' : _props$color,
|
31194 | nameProp = props.name,
|
31195 | onChangeProp = props.onChange,
|
31196 | _props$size = props.size,
|
31197 | size = _props$size === void 0 ? 'medium' : _props$size,
|
31198 | other = _objectWithoutProperties(props, ["checked", "classes", "color", "name", "onChange", "size"]);
|
31199 |
|
31200 | var radioGroup = useRadioGroup();
|
31201 | var checked = checkedProp;
|
31202 | var onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
|
31203 | var name = nameProp;
|
31204 |
|
31205 | if (radioGroup) {
|
31206 | if (typeof checked === 'undefined') {
|
31207 | checked = radioGroup.value === props.value;
|
31208 | }
|
31209 |
|
31210 | if (typeof name === 'undefined') {
|
31211 | name = radioGroup.name;
|
31212 | }
|
31213 | }
|
31214 |
|
31215 | return React.createElement(SwitchBase$1, _extends({
|
31216 | color: color,
|
31217 | type: "radio",
|
31218 | icon: React.cloneElement(defaultIcon$1, {
|
31219 | fontSize: size === 'small' ? 'small' : 'medium'
|
31220 | }),
|
31221 | checkedIcon: React.cloneElement(defaultCheckedIcon$1, {
|
31222 | fontSize: size === 'small' ? 'small' : 'medium'
|
31223 | }),
|
31224 | classes: {
|
31225 | root: clsx(classes.root, classes["color".concat(capitalize(color))]),
|
31226 | checked: classes.checked,
|
31227 | disabled: classes.disabled
|
31228 | },
|
31229 | name: name,
|
31230 | checked: checked,
|
31231 | onChange: onChange,
|
31232 | ref: ref
|
31233 | }, other));
|
31234 | });
|
31235 | Radio.propTypes = {
|
31236 |
|
31237 |
|
31238 |
|
31239 |
|
31240 |
|
31241 | |
31242 |
|
31243 |
|
31244 | checked: propTypes.bool,
|
31245 |
|
31246 | |
31247 |
|
31248 |
|
31249 | checkedIcon: propTypes.node,
|
31250 |
|
31251 | |
31252 |
|
31253 |
|
31254 |
|
31255 | classes: propTypes.object,
|
31256 |
|
31257 | |
31258 |
|
31259 |
|
31260 | color: propTypes.oneOf(['default', 'primary', 'secondary']),
|
31261 |
|
31262 | |
31263 |
|
31264 |
|
31265 | disabled: propTypes.bool,
|
31266 |
|
31267 | |
31268 |
|
31269 |
|
31270 | disableRipple: propTypes.bool,
|
31271 |
|
31272 | |
31273 |
|
31274 |
|
31275 | icon: propTypes.node,
|
31276 |
|
31277 | |
31278 |
|
31279 |
|
31280 | id: propTypes.string,
|
31281 |
|
31282 | |
31283 |
|
31284 |
|
31285 | inputProps: propTypes.object,
|
31286 |
|
31287 | |
31288 |
|
31289 |
|
31290 | inputRef: refType,
|
31291 |
|
31292 | |
31293 |
|
31294 |
|
31295 | name: propTypes.string,
|
31296 |
|
31297 | |
31298 |
|
31299 |
|
31300 |
|
31301 |
|
31302 |
|
31303 |
|
31304 | onChange: propTypes.func,
|
31305 |
|
31306 | |
31307 |
|
31308 |
|
31309 | required: propTypes.bool,
|
31310 |
|
31311 | |
31312 |
|
31313 |
|
31314 |
|
31315 | size: propTypes.oneOf(['medium', 'small']),
|
31316 |
|
31317 | |
31318 |
|
31319 |
|
31320 | value: propTypes.any
|
31321 | } ;
|
31322 | var Radio$1 = withStyles$1(styles$1m, {
|
31323 | name: 'MuiRadio'
|
31324 | })(Radio);
|
31325 |
|
31326 | var RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
|
31327 | var actions = props.actions,
|
31328 | children = props.children,
|
31329 | nameProp = props.name,
|
31330 | valueProp = props.value,
|
31331 | onChange = props.onChange,
|
31332 | other = _objectWithoutProperties(props, ["actions", "children", "name", "value", "onChange"]);
|
31333 |
|
31334 | var rootRef = React.useRef(null);
|
31335 |
|
31336 | var _useControlled = useControlled({
|
31337 | controlled: valueProp,
|
31338 | default: props.defaultValue,
|
31339 | name: 'RadioGroup'
|
31340 | }),
|
31341 | _useControlled2 = _slicedToArray(_useControlled, 2),
|
31342 | value = _useControlled2[0],
|
31343 | setValue = _useControlled2[1];
|
31344 |
|
31345 | React.useImperativeHandle(actions, function () {
|
31346 | return {
|
31347 | focus: function focus() {
|
31348 | var input = rootRef.current.querySelector('input:not(:disabled):checked');
|
31349 |
|
31350 | if (!input) {
|
31351 | input = rootRef.current.querySelector('input:not(:disabled)');
|
31352 | }
|
31353 |
|
31354 | if (input) {
|
31355 | input.focus();
|
31356 | }
|
31357 | }
|
31358 | };
|
31359 | }, []);
|
31360 | var handleRef = useForkRef(ref, rootRef);
|
31361 |
|
31362 | var handleChange = function handleChange(event) {
|
31363 | setValue(event.target.value);
|
31364 |
|
31365 | if (onChange) {
|
31366 | onChange(event, event.target.value);
|
31367 | }
|
31368 | };
|
31369 |
|
31370 | var name = useId(nameProp);
|
31371 | return React.createElement(RadioGroupContext.Provider, {
|
31372 | value: {
|
31373 | name: name,
|
31374 | onChange: handleChange,
|
31375 | value: value
|
31376 | }
|
31377 | }, React.createElement(FormGroup$1, _extends({
|
31378 | role: "radiogroup",
|
31379 | ref: handleRef
|
31380 | }, other), children));
|
31381 | });
|
31382 | RadioGroup.propTypes = {
|
31383 |
|
31384 |
|
31385 |
|
31386 |
|
31387 |
|
31388 | |
31389 |
|
31390 |
|
31391 | children: propTypes.node,
|
31392 |
|
31393 | |
31394 |
|
31395 |
|
31396 | defaultValue: propTypes.oneOfType([propTypes.arrayOf(propTypes.string), propTypes.number, propTypes.string]),
|
31397 |
|
31398 | |
31399 |
|
31400 |
|
31401 |
|
31402 | name: propTypes.string,
|
31403 |
|
31404 | |
31405 |
|
31406 |
|
31407 |
|
31408 |
|
31409 |
|
31410 | onChange: propTypes.func,
|
31411 |
|
31412 | |
31413 |
|
31414 |
|
31415 | value: propTypes.any
|
31416 | } ;
|
31417 |
|
31418 | function _setPrototypeOf(o, p) {
|
31419 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
31420 | o.__proto__ = p;
|
31421 | return o;
|
31422 | };
|
31423 |
|
31424 | return _setPrototypeOf(o, p);
|
31425 | }
|
31426 |
|
31427 | function _inherits(subClass, superClass) {
|
31428 | if (typeof superClass !== "function" && superClass !== null) {
|
31429 | throw new TypeError("Super expression must either be null or a function");
|
31430 | }
|
31431 |
|
31432 | subClass.prototype = Object.create(superClass && superClass.prototype, {
|
31433 | constructor: {
|
31434 | value: subClass,
|
31435 | writable: true,
|
31436 | configurable: true
|
31437 | }
|
31438 | });
|
31439 | if (superClass) _setPrototypeOf(subClass, superClass);
|
31440 | }
|
31441 |
|
31442 | function _possibleConstructorReturn(self, call) {
|
31443 | if (call && (_typeof(call) === "object" || typeof call === "function")) {
|
31444 | return call;
|
31445 | }
|
31446 |
|
31447 | return _assertThisInitialized(self);
|
31448 | }
|
31449 |
|
31450 | function _getPrototypeOf(o) {
|
31451 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
|
31452 | return o.__proto__ || Object.getPrototypeOf(o);
|
31453 | };
|
31454 | return _getPrototypeOf(o);
|
31455 | }
|
31456 |
|
31457 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
31458 |
|
31459 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
|
31460 | var warnedOnce$b = false;
|
31461 | |
31462 |
|
31463 |
|
31464 |
|
31465 |
|
31466 |
|
31467 |
|
31468 |
|
31469 |
|
31470 |
|
31471 |
|
31472 |
|
31473 |
|
31474 |
|
31475 |
|
31476 |
|
31477 |
|
31478 |
|
31479 |
|
31480 |
|
31481 |
|
31482 |
|
31483 |
|
31484 |
|
31485 |
|
31486 |
|
31487 |
|
31488 |
|
31489 |
|
31490 |
|
31491 |
|
31492 |
|
31493 |
|
31494 |
|
31495 |
|
31496 | var RootRef = function (_React$Component) {
|
31497 | _inherits(RootRef, _React$Component);
|
31498 |
|
31499 | var _super = _createSuper(RootRef);
|
31500 |
|
31501 | function RootRef() {
|
31502 | _classCallCheck(this, RootRef);
|
31503 |
|
31504 | return _super.apply(this, arguments);
|
31505 | }
|
31506 |
|
31507 | _createClass(RootRef, [{
|
31508 | key: "componentDidMount",
|
31509 | value: function componentDidMount() {
|
31510 | this.ref = ReactDOM.findDOMNode(this);
|
31511 | setRef(this.props.rootRef, this.ref);
|
31512 | }
|
31513 | }, {
|
31514 | key: "componentDidUpdate",
|
31515 | value: function componentDidUpdate(prevProps) {
|
31516 | var ref = ReactDOM.findDOMNode(this);
|
31517 |
|
31518 | if (prevProps.rootRef !== this.props.rootRef || this.ref !== ref) {
|
31519 | if (prevProps.rootRef !== this.props.rootRef) {
|
31520 | setRef(prevProps.rootRef, null);
|
31521 | }
|
31522 |
|
31523 | this.ref = ref;
|
31524 | setRef(this.props.rootRef, this.ref);
|
31525 | }
|
31526 | }
|
31527 | }, {
|
31528 | key: "componentWillUnmount",
|
31529 | value: function componentWillUnmount() {
|
31530 | this.ref = null;
|
31531 | setRef(this.props.rootRef, null);
|
31532 | }
|
31533 | }, {
|
31534 | key: "render",
|
31535 | value: function render() {
|
31536 | {
|
31537 | if (!warnedOnce$b) {
|
31538 | warnedOnce$b = true;
|
31539 | console.warn(['Material-UI: The RootRef component is deprecated.', 'The component relies on the ReactDOM.findDOMNode API which is deprecated in React.StrictMode.', 'Instead, you can get a reference to the underlying DOM node of the components via the `ref` prop.'].join('/n'));
|
31540 | }
|
31541 | }
|
31542 |
|
31543 | return this.props.children;
|
31544 | }
|
31545 | }]);
|
31546 |
|
31547 | return RootRef;
|
31548 | }(React.Component);
|
31549 |
|
31550 | RootRef.propTypes = {
|
31551 | |
31552 |
|
31553 |
|
31554 | children: propTypes.element.isRequired,
|
31555 |
|
31556 | |
31557 |
|
31558 |
|
31559 | rootRef: refType.isRequired
|
31560 | } ;
|
31561 |
|
31562 | {
|
31563 | RootRef.propTypes = exactProp(RootRef.propTypes) ;
|
31564 | }
|
31565 |
|
31566 | function areEqualValues(a, b) {
|
31567 | if (_typeof(b) === 'object' && b !== null) {
|
31568 | return a === b;
|
31569 | }
|
31570 |
|
31571 | return String(a) === String(b);
|
31572 | }
|
31573 |
|
31574 | function isEmpty(display) {
|
31575 | return display == null || typeof display === 'string' && !display.trim();
|
31576 | }
|
31577 | |
31578 |
|
31579 |
|
31580 |
|
31581 |
|
31582 | var SelectInput = React.forwardRef(function SelectInput(props, ref) {
|
31583 | var ariaLabel = props['aria-label'],
|
31584 | autoFocus = props.autoFocus,
|
31585 | autoWidth = props.autoWidth,
|
31586 | children = props.children,
|
31587 | classes = props.classes,
|
31588 | className = props.className,
|
31589 | defaultValue = props.defaultValue,
|
31590 | disabled = props.disabled,
|
31591 | displayEmpty = props.displayEmpty,
|
31592 | IconComponent = props.IconComponent,
|
31593 | inputRefProp = props.inputRef,
|
31594 | labelId = props.labelId,
|
31595 | _props$MenuProps = props.MenuProps,
|
31596 | MenuProps = _props$MenuProps === void 0 ? {} : _props$MenuProps,
|
31597 | multiple = props.multiple,
|
31598 | name = props.name,
|
31599 | onBlur = props.onBlur,
|
31600 | onChange = props.onChange,
|
31601 | onClose = props.onClose,
|
31602 | onFocus = props.onFocus,
|
31603 | onOpen = props.onOpen,
|
31604 | openProp = props.open,
|
31605 | readOnly = props.readOnly,
|
31606 | renderValue = props.renderValue,
|
31607 | _props$SelectDisplayP = props.SelectDisplayProps,
|
31608 | SelectDisplayProps = _props$SelectDisplayP === void 0 ? {} : _props$SelectDisplayP,
|
31609 | tabIndexProp = props.tabIndex,
|
31610 | type = props.type,
|
31611 | valueProp = props.value,
|
31612 | _props$variant = props.variant,
|
31613 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
31614 | other = _objectWithoutProperties(props, ["aria-label", "autoFocus", "autoWidth", "children", "classes", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"]);
|
31615 |
|
31616 | var _useControlled = useControlled({
|
31617 | controlled: valueProp,
|
31618 | default: defaultValue,
|
31619 | name: 'Select'
|
31620 | }),
|
31621 | _useControlled2 = _slicedToArray(_useControlled, 2),
|
31622 | value = _useControlled2[0],
|
31623 | setValue = _useControlled2[1];
|
31624 |
|
31625 | var inputRef = React.useRef(null);
|
31626 |
|
31627 | var _React$useState = React.useState(null),
|
31628 | displayNode = _React$useState[0],
|
31629 | setDisplayNode = _React$useState[1];
|
31630 |
|
31631 | var _React$useRef = React.useRef(openProp != null),
|
31632 | isOpenControlled = _React$useRef.current;
|
31633 |
|
31634 | var _React$useState2 = React.useState(),
|
31635 | menuMinWidthState = _React$useState2[0],
|
31636 | setMenuMinWidthState = _React$useState2[1];
|
31637 |
|
31638 | var _React$useState3 = React.useState(false),
|
31639 | openState = _React$useState3[0],
|
31640 | setOpenState = _React$useState3[1];
|
31641 |
|
31642 | var handleRef = useForkRef(ref, inputRefProp);
|
31643 | React.useImperativeHandle(handleRef, function () {
|
31644 | return {
|
31645 | focus: function focus() {
|
31646 | displayNode.focus();
|
31647 | },
|
31648 | node: inputRef.current,
|
31649 | value: value
|
31650 | };
|
31651 | }, [displayNode, value]);
|
31652 | React.useEffect(function () {
|
31653 | if (autoFocus && displayNode) {
|
31654 | displayNode.focus();
|
31655 | }
|
31656 | }, [autoFocus, displayNode]);
|
31657 | React.useEffect(function () {
|
31658 | if (displayNode) {
|
31659 | var label = ownerDocument(displayNode).getElementById(labelId);
|
31660 |
|
31661 | if (label) {
|
31662 | var handler = function handler() {
|
31663 | if (getSelection().isCollapsed) {
|
31664 | displayNode.focus();
|
31665 | }
|
31666 | };
|
31667 |
|
31668 | label.addEventListener('click', handler);
|
31669 | return function () {
|
31670 | label.removeEventListener('click', handler);
|
31671 | };
|
31672 | }
|
31673 | }
|
31674 |
|
31675 | return undefined;
|
31676 | }, [labelId, displayNode]);
|
31677 |
|
31678 | var update = function update(open, event) {
|
31679 | if (open) {
|
31680 | if (onOpen) {
|
31681 | onOpen(event);
|
31682 | }
|
31683 | } else if (onClose) {
|
31684 | onClose(event);
|
31685 | }
|
31686 |
|
31687 | if (!isOpenControlled) {
|
31688 | setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
|
31689 | setOpenState(open);
|
31690 | }
|
31691 | };
|
31692 |
|
31693 | var handleMouseDown = function handleMouseDown(event) {
|
31694 |
|
31695 | if (event.button !== 0) {
|
31696 | return;
|
31697 | }
|
31698 |
|
31699 |
|
31700 | event.preventDefault();
|
31701 | displayNode.focus();
|
31702 | update(true, event);
|
31703 | };
|
31704 |
|
31705 | var handleClose = function handleClose(event) {
|
31706 | update(false, event);
|
31707 | };
|
31708 |
|
31709 | var childrenArray = React.Children.toArray(children);
|
31710 |
|
31711 | var handleChange = function handleChange(event) {
|
31712 | var index = childrenArray.map(function (child) {
|
31713 | return child.props.value;
|
31714 | }).indexOf(event.target.value);
|
31715 |
|
31716 | if (index === -1) {
|
31717 | return;
|
31718 | }
|
31719 |
|
31720 | var child = childrenArray[index];
|
31721 | setValue(child.props.value);
|
31722 |
|
31723 | if (onChange) {
|
31724 | onChange(event, child);
|
31725 | }
|
31726 | };
|
31727 |
|
31728 | var handleItemClick = function handleItemClick(child) {
|
31729 | return function (event) {
|
31730 | if (!multiple) {
|
31731 | update(false, event);
|
31732 | }
|
31733 |
|
31734 | var newValue;
|
31735 |
|
31736 | if (multiple) {
|
31737 | newValue = Array.isArray(value) ? value.slice() : [];
|
31738 | var itemIndex = value.indexOf(child.props.value);
|
31739 |
|
31740 | if (itemIndex === -1) {
|
31741 | newValue.push(child.props.value);
|
31742 | } else {
|
31743 | newValue.splice(itemIndex, 1);
|
31744 | }
|
31745 | } else {
|
31746 | newValue = child.props.value;
|
31747 | }
|
31748 |
|
31749 | if (child.props.onClick) {
|
31750 | child.props.onClick(event);
|
31751 | }
|
31752 |
|
31753 | if (value === newValue) {
|
31754 | return;
|
31755 | }
|
31756 |
|
31757 | setValue(newValue);
|
31758 |
|
31759 | if (onChange) {
|
31760 | event.persist();
|
31761 |
|
31762 | Object.defineProperty(event, 'target', {
|
31763 | writable: true,
|
31764 | value: {
|
31765 | value: newValue,
|
31766 | name: name
|
31767 | }
|
31768 | });
|
31769 | onChange(event, child);
|
31770 | }
|
31771 | };
|
31772 | };
|
31773 |
|
31774 | var handleKeyDown = function handleKeyDown(event) {
|
31775 | if (!readOnly) {
|
31776 | var validKeys = [' ', 'ArrowUp', 'ArrowDown',
|
31777 |
|
31778 | 'Enter'];
|
31779 |
|
31780 | if (validKeys.indexOf(event.key) !== -1) {
|
31781 | event.preventDefault();
|
31782 | update(true, event);
|
31783 | }
|
31784 | }
|
31785 | };
|
31786 |
|
31787 | var open = displayNode !== null && (isOpenControlled ? openProp : openState);
|
31788 |
|
31789 | var handleBlur = function handleBlur(event) {
|
31790 |
|
31791 | if (!open && onBlur) {
|
31792 | event.persist();
|
31793 |
|
31794 | Object.defineProperty(event, 'target', {
|
31795 | writable: true,
|
31796 | value: {
|
31797 | value: value,
|
31798 | name: name
|
31799 | }
|
31800 | });
|
31801 | onBlur(event);
|
31802 | }
|
31803 | };
|
31804 |
|
31805 | delete other['aria-invalid'];
|
31806 | var display;
|
31807 | var displaySingle;
|
31808 | var displayMultiple = [];
|
31809 | var computeDisplay = false;
|
31810 | var foundMatch = false;
|
31811 |
|
31812 | if (isFilled({
|
31813 | value: value
|
31814 | }) || displayEmpty) {
|
31815 | if (renderValue) {
|
31816 | display = renderValue(value);
|
31817 | } else {
|
31818 | computeDisplay = true;
|
31819 | }
|
31820 | }
|
31821 |
|
31822 | var items = childrenArray.map(function (child) {
|
31823 | if (! React.isValidElement(child)) {
|
31824 | return null;
|
31825 | }
|
31826 |
|
31827 | {
|
31828 | if (reactIs_2(child)) {
|
31829 | console.error(["Material-UI: The Select component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
31830 | }
|
31831 | }
|
31832 |
|
31833 | var selected;
|
31834 |
|
31835 | if (multiple) {
|
31836 | if (!Array.isArray(value)) {
|
31837 | throw new Error( "Material-UI: The `value` prop must be an array when using the `Select` component with `multiple`." );
|
31838 | }
|
31839 |
|
31840 | selected = value.some(function (v) {
|
31841 | return areEqualValues(v, child.props.value);
|
31842 | });
|
31843 |
|
31844 | if (selected && computeDisplay) {
|
31845 | displayMultiple.push(child.props.children);
|
31846 | }
|
31847 | } else {
|
31848 | selected = areEqualValues(value, child.props.value);
|
31849 |
|
31850 | if (selected && computeDisplay) {
|
31851 | displaySingle = child.props.children;
|
31852 | }
|
31853 | }
|
31854 |
|
31855 | if (selected) {
|
31856 | foundMatch = true;
|
31857 | }
|
31858 |
|
31859 | return React.cloneElement(child, {
|
31860 | 'aria-selected': selected ? 'true' : undefined,
|
31861 | onClick: handleItemClick(child),
|
31862 | onKeyUp: function onKeyUp(event) {
|
31863 | if (event.key === ' ') {
|
31864 |
|
31865 |
|
31866 |
|
31867 | event.preventDefault();
|
31868 | }
|
31869 |
|
31870 | if (child.props.onKeyUp) {
|
31871 | child.props.onKeyUp(event);
|
31872 | }
|
31873 | },
|
31874 | role: 'option',
|
31875 | selected: selected,
|
31876 | value: undefined,
|
31877 |
|
31878 | 'data-value': child.props.value
|
31879 |
|
31880 | });
|
31881 | });
|
31882 |
|
31883 | {
|
31884 |
|
31885 | React.useEffect(function () {
|
31886 | if (!foundMatch && !multiple && value !== '') {
|
31887 | var values = childrenArray.map(function (child) {
|
31888 | return child.props.value;
|
31889 | });
|
31890 | 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) {
|
31891 | return x != null;
|
31892 | }).map(function (x) {
|
31893 | return "`".concat(x, "`");
|
31894 | }).join(', ') || '""', ".")].join('\n'));
|
31895 | }
|
31896 | }, [foundMatch, childrenArray, multiple, name, value]);
|
31897 | }
|
31898 |
|
31899 | if (computeDisplay) {
|
31900 | display = multiple ? displayMultiple.join(', ') : displaySingle;
|
31901 | }
|
31902 |
|
31903 |
|
31904 | var menuMinWidth = menuMinWidthState;
|
31905 |
|
31906 | if (!autoWidth && isOpenControlled && displayNode) {
|
31907 | menuMinWidth = displayNode.clientWidth;
|
31908 | }
|
31909 |
|
31910 | var tabIndex;
|
31911 |
|
31912 | if (typeof tabIndexProp !== 'undefined') {
|
31913 | tabIndex = tabIndexProp;
|
31914 | } else {
|
31915 | tabIndex = disabled ? null : 0;
|
31916 | }
|
31917 |
|
31918 | var buttonId = SelectDisplayProps.id || (name ? "mui-component-select-".concat(name) : undefined);
|
31919 | return React.createElement(React.Fragment, null, React.createElement("div", _extends({
|
31920 | className: clsx(classes.root,
|
31921 | classes.select, classes.selectMenu, classes[variant], className, disabled && classes.disabled),
|
31922 | ref: setDisplayNode,
|
31923 | tabIndex: tabIndex,
|
31924 | role: "button",
|
31925 | "aria-disabled": disabled ? 'true' : undefined,
|
31926 | "aria-expanded": open ? 'true' : undefined,
|
31927 | "aria-haspopup": "listbox",
|
31928 | "aria-label": ariaLabel,
|
31929 | "aria-labelledby": [labelId, buttonId].filter(Boolean).join(' ') || undefined,
|
31930 | onKeyDown: handleKeyDown,
|
31931 | onMouseDown: disabled || readOnly ? null : handleMouseDown,
|
31932 | onBlur: handleBlur,
|
31933 | onFocus: onFocus
|
31934 | }, SelectDisplayProps, {
|
31935 |
|
31936 | id: buttonId
|
31937 | }), isEmpty(display) ?
|
31938 |
|
31939 |
|
31940 | React.createElement("span", {
|
31941 | dangerouslySetInnerHTML: {
|
31942 | __html: '​'
|
31943 | }
|
31944 | }) : display), React.createElement("input", _extends({
|
31945 | value: Array.isArray(value) ? value.join(',') : value,
|
31946 | name: name,
|
31947 | ref: inputRef,
|
31948 | "aria-hidden": true,
|
31949 | onChange: handleChange,
|
31950 | tabIndex: -1,
|
31951 | className: classes.nativeInput,
|
31952 | autoFocus: autoFocus
|
31953 | }, other)), React.createElement(IconComponent, {
|
31954 | className: clsx(classes.icon, classes["icon".concat(capitalize(variant))], open && classes.iconOpen, disabled && classes.disabled)
|
31955 | }), React.createElement(Menu$1, _extends({
|
31956 | id: "menu-".concat(name || ''),
|
31957 | anchorEl: displayNode,
|
31958 | open: open,
|
31959 | onClose: handleClose
|
31960 | }, MenuProps, {
|
31961 | MenuListProps: _extends({
|
31962 | 'aria-labelledby': labelId,
|
31963 | role: 'listbox',
|
31964 | disableListWrap: true
|
31965 | }, MenuProps.MenuListProps),
|
31966 | PaperProps: _extends({}, MenuProps.PaperProps, {
|
31967 | style: _extends({
|
31968 | minWidth: menuMinWidth
|
31969 | }, MenuProps.PaperProps != null ? MenuProps.PaperProps.style : null)
|
31970 | })
|
31971 | }), items));
|
31972 | });
|
31973 | SelectInput.propTypes = {
|
31974 | |
31975 |
|
31976 |
|
31977 | 'aria-label': propTypes.string,
|
31978 |
|
31979 | |
31980 |
|
31981 |
|
31982 | autoFocus: propTypes.bool,
|
31983 |
|
31984 | |
31985 |
|
31986 |
|
31987 |
|
31988 | autoWidth: propTypes.bool,
|
31989 |
|
31990 | |
31991 |
|
31992 |
|
31993 |
|
31994 | children: propTypes.node,
|
31995 |
|
31996 | |
31997 |
|
31998 |
|
31999 |
|
32000 | classes: propTypes.object.isRequired,
|
32001 |
|
32002 | |
32003 |
|
32004 |
|
32005 | className: propTypes.string,
|
32006 |
|
32007 | |
32008 |
|
32009 |
|
32010 | defaultValue: propTypes.any,
|
32011 |
|
32012 | |
32013 |
|
32014 |
|
32015 | disabled: propTypes.bool,
|
32016 |
|
32017 | |
32018 |
|
32019 |
|
32020 | displayEmpty: propTypes.bool,
|
32021 |
|
32022 | |
32023 |
|
32024 |
|
32025 | IconComponent: propTypes.elementType.isRequired,
|
32026 |
|
32027 | |
32028 |
|
32029 |
|
32030 |
|
32031 | inputRef: refType,
|
32032 |
|
32033 | |
32034 |
|
32035 |
|
32036 |
|
32037 | labelId: propTypes.string,
|
32038 |
|
32039 | |
32040 |
|
32041 |
|
32042 | MenuProps: propTypes.object,
|
32043 |
|
32044 | |
32045 |
|
32046 |
|
32047 | multiple: propTypes.bool,
|
32048 |
|
32049 | |
32050 |
|
32051 |
|
32052 | name: propTypes.string,
|
32053 |
|
32054 | |
32055 |
|
32056 |
|
32057 | onBlur: propTypes.func,
|
32058 |
|
32059 | |
32060 |
|
32061 |
|
32062 |
|
32063 |
|
32064 |
|
32065 |
|
32066 | onChange: propTypes.func,
|
32067 |
|
32068 | |
32069 |
|
32070 |
|
32071 |
|
32072 |
|
32073 |
|
32074 | onClose: propTypes.func,
|
32075 |
|
32076 | |
32077 |
|
32078 |
|
32079 | onFocus: propTypes.func,
|
32080 |
|
32081 | |
32082 |
|
32083 |
|
32084 |
|
32085 |
|
32086 |
|
32087 | onOpen: propTypes.func,
|
32088 |
|
32089 | |
32090 |
|
32091 |
|
32092 | open: propTypes.bool,
|
32093 |
|
32094 | |
32095 |
|
32096 |
|
32097 | readOnly: propTypes.bool,
|
32098 |
|
32099 | |
32100 |
|
32101 |
|
32102 |
|
32103 |
|
32104 |
|
32105 | renderValue: propTypes.func,
|
32106 |
|
32107 | |
32108 |
|
32109 |
|
32110 | SelectDisplayProps: propTypes.object,
|
32111 |
|
32112 | |
32113 |
|
32114 |
|
32115 | tabIndex: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
32116 |
|
32117 | |
32118 |
|
32119 |
|
32120 | type: propTypes.any,
|
32121 |
|
32122 | |
32123 |
|
32124 |
|
32125 | value: propTypes.any,
|
32126 |
|
32127 | |
32128 |
|
32129 |
|
32130 | variant: propTypes.oneOf(['standard', 'outlined', 'filled'])
|
32131 | } ;
|
32132 |
|
32133 | var styles$1n = styles$1i;
|
32134 |
|
32135 | var _ref = React.createElement(Input$1, null);
|
32136 |
|
32137 | var _ref2 = React.createElement(FilledInput$1, null);
|
32138 |
|
32139 | var Select = React.forwardRef(function Select(props, ref) {
|
32140 | var _props$autoWidth = props.autoWidth,
|
32141 | autoWidth = _props$autoWidth === void 0 ? false : _props$autoWidth,
|
32142 | children = props.children,
|
32143 | classes = props.classes,
|
32144 | _props$displayEmpty = props.displayEmpty,
|
32145 | displayEmpty = _props$displayEmpty === void 0 ? false : _props$displayEmpty,
|
32146 | _props$IconComponent = props.IconComponent,
|
32147 | IconComponent = _props$IconComponent === void 0 ? ArrowDropDownIcon : _props$IconComponent,
|
32148 | id = props.id,
|
32149 | input = props.input,
|
32150 | inputProps = props.inputProps,
|
32151 | label = props.label,
|
32152 | labelId = props.labelId,
|
32153 | _props$labelWidth = props.labelWidth,
|
32154 | labelWidth = _props$labelWidth === void 0 ? 0 : _props$labelWidth,
|
32155 | MenuProps = props.MenuProps,
|
32156 | _props$multiple = props.multiple,
|
32157 | multiple = _props$multiple === void 0 ? false : _props$multiple,
|
32158 | _props$native = props.native,
|
32159 | native = _props$native === void 0 ? false : _props$native,
|
32160 | onClose = props.onClose,
|
32161 | onOpen = props.onOpen,
|
32162 | open = props.open,
|
32163 | renderValue = props.renderValue,
|
32164 | SelectDisplayProps = props.SelectDisplayProps,
|
32165 | _props$variant = props.variant,
|
32166 | variantProps = _props$variant === void 0 ? 'standard' : _props$variant,
|
32167 | other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "labelWidth", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
|
32168 |
|
32169 | var inputComponent = native ? NativeSelectInput : SelectInput;
|
32170 | var muiFormControl = useFormControl$1();
|
32171 | var fcs = formControlState({
|
32172 | props: props,
|
32173 | muiFormControl: muiFormControl,
|
32174 | states: ['variant']
|
32175 | });
|
32176 | var variant = fcs.variant || variantProps;
|
32177 | var InputComponent = input || {
|
32178 | standard: _ref,
|
32179 | outlined: React.createElement(OutlinedInput$1, {
|
32180 | label: label,
|
32181 | labelWidth: labelWidth
|
32182 | }),
|
32183 | filled: _ref2
|
32184 | }[variant];
|
32185 | return React.cloneElement(InputComponent, _extends({
|
32186 |
|
32187 |
|
32188 | inputComponent: inputComponent,
|
32189 | inputProps: _extends({
|
32190 | children: children,
|
32191 | IconComponent: IconComponent,
|
32192 | variant: variant,
|
32193 | type: undefined,
|
32194 |
|
32195 | multiple: multiple
|
32196 | }, native ? {
|
32197 | id: id
|
32198 | } : {
|
32199 | autoWidth: autoWidth,
|
32200 | displayEmpty: displayEmpty,
|
32201 | labelId: labelId,
|
32202 | MenuProps: MenuProps,
|
32203 | onClose: onClose,
|
32204 | onOpen: onOpen,
|
32205 | open: open,
|
32206 | renderValue: renderValue,
|
32207 | SelectDisplayProps: _extends({
|
32208 | id: id
|
32209 | }, SelectDisplayProps)
|
32210 | }, inputProps, {
|
32211 | classes: inputProps ? mergeClasses({
|
32212 | baseClasses: classes,
|
32213 | newClasses: inputProps.classes,
|
32214 | Component: Select
|
32215 | }) : classes
|
32216 | }, input ? input.props.inputProps : {}),
|
32217 | ref: ref
|
32218 | }, other));
|
32219 | });
|
32220 | Select.propTypes = {
|
32221 |
|
32222 |
|
32223 |
|
32224 |
|
32225 |
|
32226 | |
32227 |
|
32228 |
|
32229 |
|
32230 | autoWidth: propTypes.bool,
|
32231 |
|
32232 | |
32233 |
|
32234 |
|
32235 |
|
32236 |
|
32237 |
|
32238 | children: propTypes.node,
|
32239 |
|
32240 | |
32241 |
|
32242 |
|
32243 |
|
32244 | classes: propTypes.object,
|
32245 |
|
32246 | |
32247 |
|
32248 |
|
32249 | defaultValue: propTypes.any,
|
32250 |
|
32251 | |
32252 |
|
32253 |
|
32254 |
|
32255 |
|
32256 |
|
32257 | displayEmpty: propTypes.bool,
|
32258 |
|
32259 | |
32260 |
|
32261 |
|
32262 | IconComponent: propTypes.elementType,
|
32263 |
|
32264 | |
32265 |
|
32266 |
|
32267 | id: propTypes.string,
|
32268 |
|
32269 | |
32270 |
|
32271 |
|
32272 | input: propTypes.element,
|
32273 |
|
32274 | |
32275 |
|
32276 |
|
32277 |
|
32278 | inputProps: propTypes.object,
|
32279 |
|
32280 | |
32281 |
|
32282 |
|
32283 | label: propTypes.node,
|
32284 |
|
32285 | |
32286 |
|
32287 |
|
32288 |
|
32289 | labelId: propTypes.string,
|
32290 |
|
32291 | |
32292 |
|
32293 |
|
32294 | labelWidth: propTypes.number,
|
32295 |
|
32296 | |
32297 |
|
32298 |
|
32299 | MenuProps: propTypes.object,
|
32300 |
|
32301 | |
32302 |
|
32303 |
|
32304 | multiple: propTypes.bool,
|
32305 |
|
32306 | |
32307 |
|
32308 |
|
32309 | native: propTypes.bool,
|
32310 |
|
32311 | |
32312 |
|
32313 |
|
32314 |
|
32315 |
|
32316 |
|
32317 |
|
32318 | onChange: propTypes.func,
|
32319 |
|
32320 | |
32321 |
|
32322 |
|
32323 |
|
32324 |
|
32325 |
|
32326 | onClose: propTypes.func,
|
32327 |
|
32328 | |
32329 |
|
32330 |
|
32331 |
|
32332 |
|
32333 |
|
32334 | onOpen: propTypes.func,
|
32335 |
|
32336 | |
32337 |
|
32338 |
|
32339 |
|
32340 | open: propTypes.bool,
|
32341 |
|
32342 | |
32343 |
|
32344 |
|
32345 |
|
32346 |
|
32347 |
|
32348 |
|
32349 | renderValue: propTypes.func,
|
32350 |
|
32351 | |
32352 |
|
32353 |
|
32354 | SelectDisplayProps: propTypes.object,
|
32355 |
|
32356 | |
32357 |
|
32358 |
|
32359 |
|
32360 |
|
32361 |
|
32362 |
|
32363 |
|
32364 | value: propTypes.any,
|
32365 |
|
32366 | |
32367 |
|
32368 |
|
32369 | variant: propTypes.oneOf(['filled', 'outlined', 'standard'])
|
32370 | } ;
|
32371 | Select.muiName = 'Select';
|
32372 | var Select$1 = withStyles$1(styles$1n, {
|
32373 | name: 'MuiSelect'
|
32374 | })(Select);
|
32375 |
|
32376 | var styles$1o = function styles(theme) {
|
32377 | return {
|
32378 | thumb: {
|
32379 | '&$open': {
|
32380 | '& $offset': {
|
32381 | transform: 'scale(1) translateY(-10px)'
|
32382 | }
|
32383 | }
|
32384 | },
|
32385 | open: {},
|
32386 | offset: _extends({
|
32387 | zIndex: 1
|
32388 | }, theme.typography.body2, {
|
32389 | fontSize: theme.typography.pxToRem(12),
|
32390 | lineHeight: 1.2,
|
32391 | transition: theme.transitions.create(['transform'], {
|
32392 | duration: theme.transitions.duration.shortest
|
32393 | }),
|
32394 | top: -34,
|
32395 | transformOrigin: 'bottom center',
|
32396 | transform: 'scale(0)',
|
32397 | position: 'absolute'
|
32398 | }),
|
32399 | circle: {
|
32400 | display: 'flex',
|
32401 | alignItems: 'center',
|
32402 | justifyContent: 'center',
|
32403 | width: 32,
|
32404 | height: 32,
|
32405 | borderRadius: '50% 50% 50% 0',
|
32406 | backgroundColor: 'currentColor',
|
32407 | transform: 'rotate(-45deg)'
|
32408 | },
|
32409 | label: {
|
32410 | color: theme.palette.primary.contrastText,
|
32411 | transform: 'rotate(45deg)'
|
32412 | }
|
32413 | };
|
32414 | };
|
32415 | |
32416 |
|
32417 |
|
32418 |
|
32419 |
|
32420 | function ValueLabel(props) {
|
32421 | var children = props.children,
|
32422 | classes = props.classes,
|
32423 | className = props.className,
|
32424 | open = props.open,
|
32425 | value = props.value,
|
32426 | valueLabelDisplay = props.valueLabelDisplay;
|
32427 |
|
32428 | if (valueLabelDisplay === 'off') {
|
32429 | return children;
|
32430 | }
|
32431 |
|
32432 | return React.cloneElement(children, {
|
32433 | className: clsx(children.props.className, (open || valueLabelDisplay === 'on') && classes.open, classes.thumb)
|
32434 | }, React.createElement("span", {
|
32435 | className: clsx(classes.offset, className)
|
32436 | }, React.createElement("span", {
|
32437 | className: classes.circle
|
32438 | }, React.createElement("span", {
|
32439 | className: classes.label
|
32440 | }, value))));
|
32441 | }
|
32442 |
|
32443 | var ValueLabel$1 = withStyles$1(styles$1o, {
|
32444 | name: 'PrivateValueLabel'
|
32445 | })(ValueLabel);
|
32446 |
|
32447 | function asc(a, b) {
|
32448 | return a - b;
|
32449 | }
|
32450 |
|
32451 | function clamp$1(value, min, max) {
|
32452 | return Math.min(Math.max(min, value), max);
|
32453 | }
|
32454 |
|
32455 | function findClosest(values, currentValue) {
|
32456 | var _values$reduce = values.reduce(function (acc, value, index) {
|
32457 | var distance = Math.abs(currentValue - value);
|
32458 |
|
32459 | if (acc === null || distance < acc.distance || distance === acc.distance) {
|
32460 | return {
|
32461 | distance: distance,
|
32462 | index: index
|
32463 | };
|
32464 | }
|
32465 |
|
32466 | return acc;
|
32467 | }, null),
|
32468 | closestIndex = _values$reduce.index;
|
32469 |
|
32470 | return closestIndex;
|
32471 | }
|
32472 |
|
32473 | function trackFinger(event, touchId) {
|
32474 | if (touchId.current !== undefined && event.changedTouches) {
|
32475 | for (var i = 0; i < event.changedTouches.length; i += 1) {
|
32476 | var touch = event.changedTouches[i];
|
32477 |
|
32478 | if (touch.identifier === touchId.current) {
|
32479 | return {
|
32480 | x: touch.clientX,
|
32481 | y: touch.clientY
|
32482 | };
|
32483 | }
|
32484 | }
|
32485 |
|
32486 | return false;
|
32487 | }
|
32488 |
|
32489 | return {
|
32490 | x: event.clientX,
|
32491 | y: event.clientY
|
32492 | };
|
32493 | }
|
32494 |
|
32495 | function valueToPercent(value, min, max) {
|
32496 | return (value - min) * 100 / (max - min);
|
32497 | }
|
32498 |
|
32499 | function percentToValue(percent, min, max) {
|
32500 | return (max - min) * percent + min;
|
32501 | }
|
32502 |
|
32503 | function getDecimalPrecision(num) {
|
32504 |
|
32505 |
|
32506 | if (Math.abs(num) < 1) {
|
32507 | var parts = num.toExponential().split('e-');
|
32508 | var matissaDecimalPart = parts[0].split('.')[1];
|
32509 | return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
|
32510 | }
|
32511 |
|
32512 | var decimalPart = num.toString().split('.')[1];
|
32513 | return decimalPart ? decimalPart.length : 0;
|
32514 | }
|
32515 |
|
32516 | function roundValueToStep(value, step, min) {
|
32517 | var nearest = Math.round((value - min) / step) * step + min;
|
32518 | return Number(nearest.toFixed(getDecimalPrecision(step)));
|
32519 | }
|
32520 |
|
32521 | function setValueIndex(_ref) {
|
32522 | var values = _ref.values,
|
32523 | source = _ref.source,
|
32524 | newValue = _ref.newValue,
|
32525 | index = _ref.index;
|
32526 |
|
32527 |
|
32528 | if (values[index] === newValue) {
|
32529 | return source;
|
32530 | }
|
32531 |
|
32532 | var output = values.slice();
|
32533 | output[index] = newValue;
|
32534 | return output;
|
32535 | }
|
32536 |
|
32537 | function focusThumb(_ref2) {
|
32538 | var sliderRef = _ref2.sliderRef,
|
32539 | activeIndex = _ref2.activeIndex,
|
32540 | setActive = _ref2.setActive;
|
32541 |
|
32542 | if (!sliderRef.current.contains(document.activeElement) || Number(document.activeElement.getAttribute('data-index')) !== activeIndex) {
|
32543 | sliderRef.current.querySelector("[role=\"slider\"][data-index=\"".concat(activeIndex, "\"]")).focus();
|
32544 | }
|
32545 |
|
32546 | if (setActive) {
|
32547 | setActive(activeIndex);
|
32548 | }
|
32549 | }
|
32550 |
|
32551 | var axisProps = {
|
32552 | horizontal: {
|
32553 | offset: function offset(percent) {
|
32554 | return {
|
32555 | left: "".concat(percent, "%")
|
32556 | };
|
32557 | },
|
32558 | leap: function leap(percent) {
|
32559 | return {
|
32560 | width: "".concat(percent, "%")
|
32561 | };
|
32562 | }
|
32563 | },
|
32564 | 'horizontal-reverse': {
|
32565 | offset: function offset(percent) {
|
32566 | return {
|
32567 | right: "".concat(percent, "%")
|
32568 | };
|
32569 | },
|
32570 | leap: function leap(percent) {
|
32571 | return {
|
32572 | width: "".concat(percent, "%")
|
32573 | };
|
32574 | }
|
32575 | },
|
32576 | vertical: {
|
32577 | offset: function offset(percent) {
|
32578 | return {
|
32579 | bottom: "".concat(percent, "%")
|
32580 | };
|
32581 | },
|
32582 | leap: function leap(percent) {
|
32583 | return {
|
32584 | height: "".concat(percent, "%")
|
32585 | };
|
32586 | }
|
32587 | }
|
32588 | };
|
32589 |
|
32590 | var Identity = function Identity(x) {
|
32591 | return x;
|
32592 | };
|
32593 |
|
32594 | var styles$1p = function styles(theme) {
|
32595 | return {
|
32596 |
|
32597 | root: {
|
32598 | height: 2,
|
32599 | width: '100%',
|
32600 | boxSizing: 'content-box',
|
32601 | padding: '13px 0',
|
32602 | display: 'inline-block',
|
32603 | position: 'relative',
|
32604 | cursor: 'pointer',
|
32605 | touchAction: 'none',
|
32606 | color: theme.palette.primary.main,
|
32607 | WebkitTapHighlightColor: 'transparent',
|
32608 | '&$disabled': {
|
32609 | pointerEvents: 'none',
|
32610 | cursor: 'default',
|
32611 | color: theme.palette.grey[400]
|
32612 | },
|
32613 | '&$vertical': {
|
32614 | width: 2,
|
32615 | height: '100%',
|
32616 | padding: '0 13px'
|
32617 | },
|
32618 |
|
32619 | '@media (pointer: coarse)': {
|
32620 |
|
32621 | padding: '20px 0',
|
32622 | '&$vertical': {
|
32623 | padding: '0 20px'
|
32624 | }
|
32625 | },
|
32626 | '@media print': {
|
32627 | colorAdjust: 'exact'
|
32628 | }
|
32629 | },
|
32630 |
|
32631 |
|
32632 | colorPrimary: {
|
32633 | },
|
32634 |
|
32635 |
|
32636 | colorSecondary: {
|
32637 | color: theme.palette.secondary.main
|
32638 | },
|
32639 |
|
32640 |
|
32641 | marked: {
|
32642 | marginBottom: 20,
|
32643 | '&$vertical': {
|
32644 | marginBottom: 'auto',
|
32645 | marginRight: 20
|
32646 | }
|
32647 | },
|
32648 |
|
32649 |
|
32650 | vertical: {},
|
32651 |
|
32652 |
|
32653 | disabled: {},
|
32654 |
|
32655 |
|
32656 | rail: {
|
32657 | display: 'block',
|
32658 | position: 'absolute',
|
32659 | width: '100%',
|
32660 | height: 2,
|
32661 | borderRadius: 1,
|
32662 | backgroundColor: 'currentColor',
|
32663 | opacity: 0.38,
|
32664 | '$vertical &': {
|
32665 | height: '100%',
|
32666 | width: 2
|
32667 | }
|
32668 | },
|
32669 |
|
32670 |
|
32671 | track: {
|
32672 | display: 'block',
|
32673 | position: 'absolute',
|
32674 | height: 2,
|
32675 | borderRadius: 1,
|
32676 | backgroundColor: 'currentColor',
|
32677 | '$vertical &': {
|
32678 | width: 2
|
32679 | }
|
32680 | },
|
32681 |
|
32682 |
|
32683 | trackFalse: {
|
32684 | '& $track': {
|
32685 | display: 'none'
|
32686 | }
|
32687 | },
|
32688 |
|
32689 |
|
32690 | trackInverted: {
|
32691 | '& $track': {
|
32692 | backgroundColor:
|
32693 | theme.palette.type === 'light' ? lighten(theme.palette.primary.main, 0.62) : darken(theme.palette.primary.main, 0.5)
|
32694 | },
|
32695 | '& $rail': {
|
32696 | opacity: 1
|
32697 | }
|
32698 | },
|
32699 |
|
32700 |
|
32701 | thumb: {
|
32702 | position: 'absolute',
|
32703 | width: 12,
|
32704 | height: 12,
|
32705 | marginLeft: -6,
|
32706 | marginTop: -5,
|
32707 | boxSizing: 'border-box',
|
32708 | borderRadius: '50%',
|
32709 | outline: 0,
|
32710 | backgroundColor: 'currentColor',
|
32711 | display: 'flex',
|
32712 | alignItems: 'center',
|
32713 | justifyContent: 'center',
|
32714 | transition: theme.transitions.create(['box-shadow'], {
|
32715 | duration: theme.transitions.duration.shortest
|
32716 | }),
|
32717 | '&::after': {
|
32718 | position: 'absolute',
|
32719 | content: '""',
|
32720 | borderRadius: '50%',
|
32721 |
|
32722 | left: -15,
|
32723 | top: -15,
|
32724 | right: -15,
|
32725 | bottom: -15
|
32726 | },
|
32727 | '&$focusVisible,&:hover': {
|
32728 | boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette.primary.main, 0.16)),
|
32729 | '@media (hover: none)': {
|
32730 | boxShadow: 'none'
|
32731 | }
|
32732 | },
|
32733 | '&$active': {
|
32734 | boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette.primary.main, 0.16))
|
32735 | },
|
32736 | '&$disabled': {
|
32737 | width: 8,
|
32738 | height: 8,
|
32739 | marginLeft: -4,
|
32740 | marginTop: -3,
|
32741 | '&:hover': {
|
32742 | boxShadow: 'none'
|
32743 | }
|
32744 | },
|
32745 | '$vertical &': {
|
32746 | marginLeft: -5,
|
32747 | marginBottom: -6
|
32748 | },
|
32749 | '$vertical &$disabled': {
|
32750 | marginLeft: -3,
|
32751 | marginBottom: -4
|
32752 | }
|
32753 | },
|
32754 |
|
32755 |
|
32756 | thumbColorPrimary: {
|
32757 | },
|
32758 |
|
32759 |
|
32760 | thumbColorSecondary: {
|
32761 | '&$focusVisible,&:hover': {
|
32762 | boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette.secondary.main, 0.16))
|
32763 | },
|
32764 | '&$active': {
|
32765 | boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette.secondary.main, 0.16))
|
32766 | }
|
32767 | },
|
32768 |
|
32769 |
|
32770 | active: {},
|
32771 |
|
32772 |
|
32773 | focusVisible: {},
|
32774 |
|
32775 |
|
32776 | valueLabel: {
|
32777 |
|
32778 | left: 'calc(-50% - 4px)'
|
32779 | },
|
32780 |
|
32781 |
|
32782 | mark: {
|
32783 | position: 'absolute',
|
32784 | width: 2,
|
32785 | height: 2,
|
32786 | borderRadius: 1,
|
32787 | backgroundColor: 'currentColor'
|
32788 | },
|
32789 |
|
32790 |
|
32791 | markActive: {
|
32792 | backgroundColor: theme.palette.background.paper,
|
32793 | opacity: 0.8
|
32794 | },
|
32795 |
|
32796 |
|
32797 | markLabel: _extends({}, theme.typography.body2, {
|
32798 | color: theme.palette.text.secondary,
|
32799 | position: 'absolute',
|
32800 | top: 26,
|
32801 | transform: 'translateX(-50%)',
|
32802 | whiteSpace: 'nowrap',
|
32803 | '$vertical &': {
|
32804 | top: 'auto',
|
32805 | left: 26,
|
32806 | transform: 'translateY(50%)'
|
32807 | },
|
32808 | '@media (pointer: coarse)': {
|
32809 | top: 40,
|
32810 | '$vertical &': {
|
32811 | left: 31
|
32812 | }
|
32813 | }
|
32814 | }),
|
32815 |
|
32816 |
|
32817 | markLabelActive: {
|
32818 | color: theme.palette.text.primary
|
32819 | }
|
32820 | };
|
32821 | };
|
32822 | var Slider = React.forwardRef(function Slider(props, ref) {
|
32823 | var ariaLabel = props['aria-label'],
|
32824 | ariaLabelledby = props['aria-labelledby'],
|
32825 | ariaValuetext = props['aria-valuetext'],
|
32826 | classes = props.classes,
|
32827 | className = props.className,
|
32828 | _props$color = props.color,
|
32829 | color = _props$color === void 0 ? 'primary' : _props$color,
|
32830 | _props$component = props.component,
|
32831 | Component = _props$component === void 0 ? 'span' : _props$component,
|
32832 | defaultValue = props.defaultValue,
|
32833 | _props$disabled = props.disabled,
|
32834 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
32835 | getAriaLabel = props.getAriaLabel,
|
32836 | getAriaValueText = props.getAriaValueText,
|
32837 | _props$marks = props.marks,
|
32838 | marksProp = _props$marks === void 0 ? false : _props$marks,
|
32839 | _props$max = props.max,
|
32840 | max = _props$max === void 0 ? 100 : _props$max,
|
32841 | _props$min = props.min,
|
32842 | min = _props$min === void 0 ? 0 : _props$min,
|
32843 | name = props.name,
|
32844 | onChange = props.onChange,
|
32845 | onChangeCommitted = props.onChangeCommitted,
|
32846 | onMouseDown = props.onMouseDown,
|
32847 | _props$orientation = props.orientation,
|
32848 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
32849 | _props$scale = props.scale,
|
32850 | scale = _props$scale === void 0 ? Identity : _props$scale,
|
32851 | _props$step = props.step,
|
32852 | step = _props$step === void 0 ? 1 : _props$step,
|
32853 | _props$ThumbComponent = props.ThumbComponent,
|
32854 | ThumbComponent = _props$ThumbComponent === void 0 ? 'span' : _props$ThumbComponent,
|
32855 | _props$track = props.track,
|
32856 | track = _props$track === void 0 ? 'normal' : _props$track,
|
32857 | valueProp = props.value,
|
32858 | _props$ValueLabelComp = props.ValueLabelComponent,
|
32859 | ValueLabelComponent = _props$ValueLabelComp === void 0 ? ValueLabel$1 : _props$ValueLabelComp,
|
32860 | _props$valueLabelDisp = props.valueLabelDisplay,
|
32861 | valueLabelDisplay = _props$valueLabelDisp === void 0 ? 'off' : _props$valueLabelDisp,
|
32862 | _props$valueLabelForm = props.valueLabelFormat,
|
32863 | valueLabelFormat = _props$valueLabelForm === void 0 ? Identity : _props$valueLabelForm,
|
32864 | 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", "scale", "step", "ThumbComponent", "track", "value", "ValueLabelComponent", "valueLabelDisplay", "valueLabelFormat"]);
|
32865 |
|
32866 | var theme = useTheme$1();
|
32867 | var touchId = React.useRef();
|
32868 |
|
32869 |
|
32870 |
|
32871 | var _React$useState = React.useState(-1),
|
32872 | active = _React$useState[0],
|
32873 | setActive = _React$useState[1];
|
32874 |
|
32875 | var _React$useState2 = React.useState(-1),
|
32876 | open = _React$useState2[0],
|
32877 | setOpen = _React$useState2[1];
|
32878 |
|
32879 | var _useControlled = useControlled({
|
32880 | controlled: valueProp,
|
32881 | default: defaultValue,
|
32882 | name: 'Slider'
|
32883 | }),
|
32884 | _useControlled2 = _slicedToArray(_useControlled, 2),
|
32885 | valueDerived = _useControlled2[0],
|
32886 | setValueState = _useControlled2[1];
|
32887 |
|
32888 | var range = Array.isArray(valueDerived);
|
32889 | var values = range ? valueDerived.slice().sort(asc) : [valueDerived];
|
32890 | values = values.map(function (value) {
|
32891 | return clamp$1(value, min, max);
|
32892 | });
|
32893 | var marks = marksProp === true && step !== null ? _toConsumableArray(Array(Math.floor((max - min) / step) + 1)).map(function (_, index) {
|
32894 | return {
|
32895 | value: min + step * index
|
32896 | };
|
32897 | }) : marksProp || [];
|
32898 |
|
32899 | var _useIsFocusVisible = useIsFocusVisible(),
|
32900 | isFocusVisible = _useIsFocusVisible.isFocusVisible,
|
32901 | onBlurVisible = _useIsFocusVisible.onBlurVisible,
|
32902 | focusVisibleRef = _useIsFocusVisible.ref;
|
32903 |
|
32904 | var _React$useState3 = React.useState(-1),
|
32905 | focusVisible = _React$useState3[0],
|
32906 | setFocusVisible = _React$useState3[1];
|
32907 |
|
32908 | var sliderRef = React.useRef();
|
32909 | var handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
|
32910 | var handleRef = useForkRef(ref, handleFocusRef);
|
32911 | var handleFocus = useEventCallback(function (event) {
|
32912 | var index = Number(event.currentTarget.getAttribute('data-index'));
|
32913 |
|
32914 | if (isFocusVisible(event)) {
|
32915 | setFocusVisible(index);
|
32916 | }
|
32917 |
|
32918 | setOpen(index);
|
32919 | });
|
32920 | var handleBlur = useEventCallback(function () {
|
32921 | if (focusVisible !== -1) {
|
32922 | setFocusVisible(-1);
|
32923 | onBlurVisible();
|
32924 | }
|
32925 |
|
32926 | setOpen(-1);
|
32927 | });
|
32928 | var handleMouseOver = useEventCallback(function (event) {
|
32929 | var index = Number(event.currentTarget.getAttribute('data-index'));
|
32930 | setOpen(index);
|
32931 | });
|
32932 | var handleMouseLeave = useEventCallback(function () {
|
32933 | setOpen(-1);
|
32934 | });
|
32935 | var isRtl = theme.direction === 'rtl';
|
32936 | var handleKeyDown = useEventCallback(function (event) {
|
32937 | var index = Number(event.currentTarget.getAttribute('data-index'));
|
32938 | var value = values[index];
|
32939 | var tenPercents = (max - min) / 10;
|
32940 | var marksValues = marks.map(function (mark) {
|
32941 | return mark.value;
|
32942 | });
|
32943 | var marksIndex = marksValues.indexOf(value);
|
32944 | var newValue;
|
32945 | var increaseKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
|
32946 | var decreaseKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
|
32947 |
|
32948 | switch (event.key) {
|
32949 | case 'Home':
|
32950 | newValue = min;
|
32951 | break;
|
32952 |
|
32953 | case 'End':
|
32954 | newValue = max;
|
32955 | break;
|
32956 |
|
32957 | case 'PageUp':
|
32958 | if (step) {
|
32959 | newValue = value + tenPercents;
|
32960 | }
|
32961 |
|
32962 | break;
|
32963 |
|
32964 | case 'PageDown':
|
32965 | if (step) {
|
32966 | newValue = value - tenPercents;
|
32967 | }
|
32968 |
|
32969 | break;
|
32970 |
|
32971 | case increaseKey:
|
32972 | case 'ArrowUp':
|
32973 | if (step) {
|
32974 | newValue = value + step;
|
32975 | } else {
|
32976 | newValue = marksValues[marksIndex + 1] || marksValues[marksValues.length - 1];
|
32977 | }
|
32978 |
|
32979 | break;
|
32980 |
|
32981 | case decreaseKey:
|
32982 | case 'ArrowDown':
|
32983 | if (step) {
|
32984 | newValue = value - step;
|
32985 | } else {
|
32986 | newValue = marksValues[marksIndex - 1] || marksValues[0];
|
32987 | }
|
32988 |
|
32989 | break;
|
32990 |
|
32991 | default:
|
32992 | return;
|
32993 | }
|
32994 |
|
32995 |
|
32996 | event.preventDefault();
|
32997 |
|
32998 | if (step) {
|
32999 | newValue = roundValueToStep(newValue, step, min);
|
33000 | }
|
33001 |
|
33002 | newValue = clamp$1(newValue, min, max);
|
33003 |
|
33004 | if (range) {
|
33005 | var previousValue = newValue;
|
33006 | newValue = setValueIndex({
|
33007 | values: values,
|
33008 | source: valueDerived,
|
33009 | newValue: newValue,
|
33010 | index: index
|
33011 | }).sort(asc);
|
33012 | focusThumb({
|
33013 | sliderRef: sliderRef,
|
33014 | activeIndex: newValue.indexOf(previousValue)
|
33015 | });
|
33016 | }
|
33017 |
|
33018 | setValueState(newValue);
|
33019 | setFocusVisible(index);
|
33020 |
|
33021 | if (onChange) {
|
33022 | onChange(event, newValue);
|
33023 | }
|
33024 |
|
33025 | if (onChangeCommitted) {
|
33026 | onChangeCommitted(event, newValue);
|
33027 | }
|
33028 | });
|
33029 | var previousIndex = React.useRef();
|
33030 | var axis = orientation;
|
33031 |
|
33032 | if (isRtl && orientation !== "vertical") {
|
33033 | axis += '-reverse';
|
33034 | }
|
33035 |
|
33036 | var getFingerNewValue = function getFingerNewValue(_ref3) {
|
33037 | var finger = _ref3.finger,
|
33038 | _ref3$move = _ref3.move,
|
33039 | move = _ref3$move === void 0 ? false : _ref3$move,
|
33040 | values2 = _ref3.values,
|
33041 | source = _ref3.source;
|
33042 | var slider = sliderRef.current;
|
33043 |
|
33044 | var _slider$getBoundingCl = slider.getBoundingClientRect(),
|
33045 | width = _slider$getBoundingCl.width,
|
33046 | height = _slider$getBoundingCl.height,
|
33047 | bottom = _slider$getBoundingCl.bottom,
|
33048 | left = _slider$getBoundingCl.left;
|
33049 |
|
33050 | var percent;
|
33051 |
|
33052 | if (axis.indexOf('vertical') === 0) {
|
33053 | percent = (bottom - finger.y) / height;
|
33054 | } else {
|
33055 | percent = (finger.x - left) / width;
|
33056 | }
|
33057 |
|
33058 | if (axis.indexOf('-reverse') !== -1) {
|
33059 | percent = 1 - percent;
|
33060 | }
|
33061 |
|
33062 | var newValue;
|
33063 | newValue = percentToValue(percent, min, max);
|
33064 |
|
33065 | if (step) {
|
33066 | newValue = roundValueToStep(newValue, step, min);
|
33067 | } else {
|
33068 | var marksValues = marks.map(function (mark) {
|
33069 | return mark.value;
|
33070 | });
|
33071 | var closestIndex = findClosest(marksValues, newValue);
|
33072 | newValue = marksValues[closestIndex];
|
33073 | }
|
33074 |
|
33075 | newValue = clamp$1(newValue, min, max);
|
33076 | var activeIndex = 0;
|
33077 |
|
33078 | if (range) {
|
33079 | if (!move) {
|
33080 | activeIndex = findClosest(values2, newValue);
|
33081 | } else {
|
33082 | activeIndex = previousIndex.current;
|
33083 | }
|
33084 |
|
33085 | var previousValue = newValue;
|
33086 | newValue = setValueIndex({
|
33087 | values: values2,
|
33088 | source: source,
|
33089 | newValue: newValue,
|
33090 | index: activeIndex
|
33091 | }).sort(asc);
|
33092 | activeIndex = newValue.indexOf(previousValue);
|
33093 | previousIndex.current = activeIndex;
|
33094 | }
|
33095 |
|
33096 | return {
|
33097 | newValue: newValue,
|
33098 | activeIndex: activeIndex
|
33099 | };
|
33100 | };
|
33101 |
|
33102 | var handleTouchMove = useEventCallback(function (event) {
|
33103 | var finger = trackFinger(event, touchId);
|
33104 |
|
33105 | if (!finger) {
|
33106 | return;
|
33107 | }
|
33108 |
|
33109 | var _getFingerNewValue = getFingerNewValue({
|
33110 | finger: finger,
|
33111 | move: true,
|
33112 | values: values,
|
33113 | source: valueDerived
|
33114 | }),
|
33115 | newValue = _getFingerNewValue.newValue,
|
33116 | activeIndex = _getFingerNewValue.activeIndex;
|
33117 |
|
33118 | focusThumb({
|
33119 | sliderRef: sliderRef,
|
33120 | activeIndex: activeIndex,
|
33121 | setActive: setActive
|
33122 | });
|
33123 | setValueState(newValue);
|
33124 |
|
33125 | if (onChange) {
|
33126 | onChange(event, newValue);
|
33127 | }
|
33128 | });
|
33129 | var handleTouchEnd = useEventCallback(function (event) {
|
33130 | var finger = trackFinger(event, touchId);
|
33131 |
|
33132 | if (!finger) {
|
33133 | return;
|
33134 | }
|
33135 |
|
33136 | var _getFingerNewValue2 = getFingerNewValue({
|
33137 | finger: finger,
|
33138 | values: values,
|
33139 | source: valueDerived
|
33140 | }),
|
33141 | newValue = _getFingerNewValue2.newValue;
|
33142 |
|
33143 | setActive(-1);
|
33144 |
|
33145 | if (event.type === 'touchend') {
|
33146 | setOpen(-1);
|
33147 | }
|
33148 |
|
33149 | if (onChangeCommitted) {
|
33150 | onChangeCommitted(event, newValue);
|
33151 | }
|
33152 |
|
33153 | touchId.current = undefined;
|
33154 | var doc = ownerDocument(sliderRef.current);
|
33155 | doc.removeEventListener('mousemove', handleTouchMove);
|
33156 | doc.removeEventListener('mouseup', handleTouchEnd);
|
33157 | doc.removeEventListener('touchmove', handleTouchMove);
|
33158 | doc.removeEventListener('touchend', handleTouchEnd);
|
33159 | });
|
33160 | var handleTouchStart = useEventCallback(function (event) {
|
33161 |
|
33162 | event.preventDefault();
|
33163 | var touch = event.changedTouches[0];
|
33164 |
|
33165 | if (touch != null) {
|
33166 |
|
33167 | touchId.current = touch.identifier;
|
33168 | }
|
33169 |
|
33170 | var finger = trackFinger(event, touchId);
|
33171 |
|
33172 | var _getFingerNewValue3 = getFingerNewValue({
|
33173 | finger: finger,
|
33174 | values: values,
|
33175 | source: valueDerived
|
33176 | }),
|
33177 | newValue = _getFingerNewValue3.newValue,
|
33178 | activeIndex = _getFingerNewValue3.activeIndex;
|
33179 |
|
33180 | focusThumb({
|
33181 | sliderRef: sliderRef,
|
33182 | activeIndex: activeIndex,
|
33183 | setActive: setActive
|
33184 | });
|
33185 | setValueState(newValue);
|
33186 |
|
33187 | if (onChange) {
|
33188 | onChange(event, newValue);
|
33189 | }
|
33190 |
|
33191 | var doc = ownerDocument(sliderRef.current);
|
33192 | doc.addEventListener('touchmove', handleTouchMove);
|
33193 | doc.addEventListener('touchend', handleTouchEnd);
|
33194 | });
|
33195 | React.useEffect(function () {
|
33196 | var slider = sliderRef.current;
|
33197 | slider.addEventListener('touchstart', handleTouchStart);
|
33198 | var doc = ownerDocument(slider);
|
33199 | return function () {
|
33200 | slider.removeEventListener('touchstart', handleTouchStart);
|
33201 | doc.removeEventListener('mousemove', handleTouchMove);
|
33202 | doc.removeEventListener('mouseup', handleTouchEnd);
|
33203 | doc.removeEventListener('touchmove', handleTouchMove);
|
33204 | doc.removeEventListener('touchend', handleTouchEnd);
|
33205 | };
|
33206 | }, [handleTouchEnd, handleTouchMove, handleTouchStart]);
|
33207 | var handleMouseDown = useEventCallback(function (event) {
|
33208 | if (onMouseDown) {
|
33209 | onMouseDown(event);
|
33210 | }
|
33211 |
|
33212 | event.preventDefault();
|
33213 | var finger = trackFinger(event, touchId);
|
33214 |
|
33215 | var _getFingerNewValue4 = getFingerNewValue({
|
33216 | finger: finger,
|
33217 | values: values,
|
33218 | source: valueDerived
|
33219 | }),
|
33220 | newValue = _getFingerNewValue4.newValue,
|
33221 | activeIndex = _getFingerNewValue4.activeIndex;
|
33222 |
|
33223 | focusThumb({
|
33224 | sliderRef: sliderRef,
|
33225 | activeIndex: activeIndex,
|
33226 | setActive: setActive
|
33227 | });
|
33228 | setValueState(newValue);
|
33229 |
|
33230 | if (onChange) {
|
33231 | onChange(event, newValue);
|
33232 | }
|
33233 |
|
33234 | var doc = ownerDocument(sliderRef.current);
|
33235 | doc.addEventListener('mousemove', handleTouchMove);
|
33236 | doc.addEventListener('mouseup', handleTouchEnd);
|
33237 | });
|
33238 | var trackOffset = valueToPercent(range ? values[0] : min, min, max);
|
33239 | var trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
|
33240 |
|
33241 | var trackStyle = _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
|
33242 |
|
33243 | return React.createElement(Component, _extends({
|
33244 | ref: handleRef,
|
33245 | className: clsx(classes.root, classes["color".concat(capitalize(color))], className, disabled && classes.disabled, marks.length > 0 && marks.some(function (mark) {
|
33246 | return mark.label;
|
33247 | }) && classes.marked, track === false && classes.trackFalse, orientation === 'vertical' && classes.vertical, track === 'inverted' && classes.trackInverted),
|
33248 | onMouseDown: handleMouseDown
|
33249 | }, other), React.createElement("span", {
|
33250 | className: classes.rail
|
33251 | }), React.createElement("span", {
|
33252 | className: classes.track,
|
33253 | style: trackStyle
|
33254 | }), React.createElement("input", {
|
33255 | value: values.join(','),
|
33256 | name: name,
|
33257 | type: "hidden"
|
33258 | }), marks.map(function (mark, index) {
|
33259 | var percent = valueToPercent(mark.value, min, max);
|
33260 | var style = axisProps[axis].offset(percent);
|
33261 | var markActive;
|
33262 |
|
33263 | if (track === false) {
|
33264 | markActive = values.indexOf(mark.value) !== -1;
|
33265 | } else {
|
33266 | markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
|
33267 | }
|
33268 |
|
33269 | return React.createElement(React.Fragment, {
|
33270 | key: mark.value
|
33271 | }, React.createElement("span", {
|
33272 | style: style,
|
33273 | "data-index": index,
|
33274 | className: clsx(classes.mark, markActive && classes.markActive)
|
33275 | }), mark.label != null ? React.createElement("span", {
|
33276 | "aria-hidden": true,
|
33277 | "data-index": index,
|
33278 | style: style,
|
33279 | className: clsx(classes.markLabel, markActive && classes.markLabelActive)
|
33280 | }, mark.label) : null);
|
33281 | }), values.map(function (value, index) {
|
33282 | var percent = valueToPercent(value, min, max);
|
33283 | var style = axisProps[axis].offset(percent);
|
33284 | return React.createElement(ValueLabelComponent, {
|
33285 | key: index,
|
33286 | valueLabelFormat: valueLabelFormat,
|
33287 | valueLabelDisplay: valueLabelDisplay,
|
33288 | className: classes.valueLabel,
|
33289 | value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
|
33290 | index: index,
|
33291 | open: open === index || active === index || valueLabelDisplay === 'on',
|
33292 | disabled: disabled
|
33293 | }, React.createElement(ThumbComponent, {
|
33294 | className: clsx(classes.thumb, classes["thumbColor".concat(capitalize(color))], active === index && classes.active, disabled && classes.disabled, focusVisible === index && classes.focusVisible),
|
33295 | tabIndex: disabled ? null : 0,
|
33296 | role: "slider",
|
33297 | style: style,
|
33298 | "data-index": index,
|
33299 | "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
|
33300 | "aria-labelledby": ariaLabelledby,
|
33301 | "aria-orientation": orientation,
|
33302 | "aria-valuemax": scale(max),
|
33303 | "aria-valuemin": scale(min),
|
33304 | "aria-valuenow": scale(value),
|
33305 | "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
|
33306 | onKeyDown: handleKeyDown,
|
33307 | onFocus: handleFocus,
|
33308 | onBlur: handleBlur,
|
33309 | onMouseOver: handleMouseOver,
|
33310 | onMouseLeave: handleMouseLeave
|
33311 | }));
|
33312 | }));
|
33313 | });
|
33314 | Slider.propTypes = {
|
33315 | |
33316 |
|
33317 |
|
33318 | 'aria-label': chainPropTypes(propTypes.string, function (props) {
|
33319 | var range = Array.isArray(props.value || props.defaultValue);
|
33320 |
|
33321 | if (range && props['aria-label'] != null) {
|
33322 | return new Error('Material-UI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
|
33323 | }
|
33324 |
|
33325 | return null;
|
33326 | }),
|
33327 |
|
33328 | |
33329 |
|
33330 |
|
33331 | 'aria-labelledby': propTypes.string,
|
33332 |
|
33333 | |
33334 |
|
33335 |
|
33336 | 'aria-valuetext': chainPropTypes(propTypes.string, function (props) {
|
33337 | var range = Array.isArray(props.value || props.defaultValue);
|
33338 |
|
33339 | if (range && props['aria-valuetext'] != null) {
|
33340 | return new Error('Material-UI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');
|
33341 | }
|
33342 |
|
33343 | return null;
|
33344 | }),
|
33345 |
|
33346 | |
33347 |
|
33348 |
|
33349 |
|
33350 | classes: propTypes.object.isRequired,
|
33351 |
|
33352 | |
33353 |
|
33354 |
|
33355 | className: propTypes.string,
|
33356 |
|
33357 | |
33358 |
|
33359 |
|
33360 | color: propTypes.oneOf(['primary', 'secondary']),
|
33361 |
|
33362 | |
33363 |
|
33364 |
|
33365 |
|
33366 | component: propTypes
|
33367 |
|
33368 | .elementType,
|
33369 |
|
33370 | |
33371 |
|
33372 |
|
33373 | defaultValue: propTypes.oneOfType([propTypes.number, propTypes.arrayOf(propTypes.number)]),
|
33374 |
|
33375 | |
33376 |
|
33377 |
|
33378 | disabled: propTypes.bool,
|
33379 |
|
33380 | |
33381 |
|
33382 |
|
33383 |
|
33384 |
|
33385 |
|
33386 | getAriaLabel: propTypes.func,
|
33387 |
|
33388 | |
33389 |
|
33390 |
|
33391 |
|
33392 |
|
33393 |
|
33394 |
|
33395 | getAriaValueText: propTypes.func,
|
33396 |
|
33397 | |
33398 |
|
33399 |
|
33400 |
|
33401 |
|
33402 | marks: propTypes.oneOfType([propTypes.bool, propTypes.array]),
|
33403 |
|
33404 | |
33405 |
|
33406 |
|
33407 |
|
33408 | max: propTypes.number,
|
33409 |
|
33410 | |
33411 |
|
33412 |
|
33413 |
|
33414 | min: propTypes.number,
|
33415 |
|
33416 | |
33417 |
|
33418 |
|
33419 | name: propTypes.string,
|
33420 |
|
33421 | |
33422 |
|
33423 |
|
33424 |
|
33425 |
|
33426 |
|
33427 | onChange: propTypes.func,
|
33428 |
|
33429 | |
33430 |
|
33431 |
|
33432 |
|
33433 |
|
33434 |
|
33435 | onChangeCommitted: propTypes.func,
|
33436 |
|
33437 | |
33438 |
|
33439 |
|
33440 | onMouseDown: propTypes.func,
|
33441 |
|
33442 | |
33443 |
|
33444 |
|
33445 | orientation: propTypes.oneOf(['horizontal', 'vertical']),
|
33446 |
|
33447 | |
33448 |
|
33449 |
|
33450 | scale: propTypes.func,
|
33451 |
|
33452 | |
33453 |
|
33454 |
|
33455 |
|
33456 |
|
33457 |
|
33458 |
|
33459 | step: propTypes.number,
|
33460 |
|
33461 | |
33462 |
|
33463 |
|
33464 | ThumbComponent: propTypes.elementType,
|
33465 |
|
33466 | |
33467 |
|
33468 |
|
33469 |
|
33470 |
|
33471 |
|
33472 |
|
33473 | track: propTypes.oneOf(['normal', false, 'inverted']),
|
33474 |
|
33475 | |
33476 |
|
33477 |
|
33478 |
|
33479 | value: propTypes.oneOfType([propTypes.number, propTypes.arrayOf(propTypes.number)]),
|
33480 |
|
33481 | |
33482 |
|
33483 |
|
33484 | ValueLabelComponent: propTypes.elementType,
|
33485 |
|
33486 | |
33487 |
|
33488 |
|
33489 |
|
33490 |
|
33491 |
|
33492 |
|
33493 | valueLabelDisplay: propTypes.oneOf(['on', 'auto', 'off']),
|
33494 |
|
33495 | |
33496 |
|
33497 |
|
33498 |
|
33499 |
|
33500 |
|
33501 |
|
33502 |
|
33503 | valueLabelFormat: propTypes.oneOfType([propTypes.string, propTypes.func])
|
33504 | } ;
|
33505 | var Slider$1 = withStyles$1(styles$1p, {
|
33506 | name: 'MuiSlider'
|
33507 | })(Slider);
|
33508 |
|
33509 | var styles$1q = function styles(theme) {
|
33510 | var emphasis = theme.palette.type === 'light' ? 0.8 : 0.98;
|
33511 | var backgroundColor = emphasize(theme.palette.background.default, emphasis);
|
33512 | return {
|
33513 |
|
33514 | root: _extends({}, theme.typography.body2, _defineProperty({
|
33515 | color: theme.palette.getContrastText(backgroundColor),
|
33516 | backgroundColor: backgroundColor,
|
33517 | display: 'flex',
|
33518 | alignItems: 'center',
|
33519 | flexWrap: 'wrap',
|
33520 | padding: '6px 16px',
|
33521 | borderRadius: theme.shape.borderRadius,
|
33522 | flexGrow: 1
|
33523 | }, theme.breakpoints.up('sm'), {
|
33524 | flexGrow: 'initial',
|
33525 | minWidth: 288
|
33526 | })),
|
33527 |
|
33528 |
|
33529 | message: {
|
33530 | padding: '8px 0'
|
33531 | },
|
33532 |
|
33533 |
|
33534 | action: {
|
33535 | display: 'flex',
|
33536 | alignItems: 'center',
|
33537 | marginLeft: 'auto',
|
33538 | paddingLeft: 16,
|
33539 | marginRight: -8
|
33540 | }
|
33541 | };
|
33542 | };
|
33543 | var SnackbarContent = React.forwardRef(function SnackbarContent(props, ref) {
|
33544 | var action = props.action,
|
33545 | classes = props.classes,
|
33546 | className = props.className,
|
33547 | message = props.message,
|
33548 | _props$role = props.role,
|
33549 | role = _props$role === void 0 ? 'alert' : _props$role,
|
33550 | other = _objectWithoutProperties(props, ["action", "classes", "className", "message", "role"]);
|
33551 |
|
33552 | return React.createElement(Paper$1, _extends({
|
33553 | role: role,
|
33554 | square: true,
|
33555 | elevation: 6,
|
33556 | className: clsx(classes.root, className),
|
33557 | ref: ref
|
33558 | }, other), React.createElement("div", {
|
33559 | className: classes.message
|
33560 | }, message), action ? React.createElement("div", {
|
33561 | className: classes.action
|
33562 | }, action) : null);
|
33563 | });
|
33564 | SnackbarContent.propTypes = {
|
33565 |
|
33566 |
|
33567 |
|
33568 |
|
33569 |
|
33570 | |
33571 |
|
33572 |
|
33573 | action: propTypes.node,
|
33574 |
|
33575 | |
33576 |
|
33577 |
|
33578 |
|
33579 | classes: propTypes.object,
|
33580 |
|
33581 | |
33582 |
|
33583 |
|
33584 | className: propTypes.string,
|
33585 |
|
33586 | |
33587 |
|
33588 |
|
33589 | message: propTypes.node,
|
33590 |
|
33591 | |
33592 |
|
33593 |
|
33594 | role: propTypes.string
|
33595 | } ;
|
33596 | var SnackbarContent$1 = withStyles$1(styles$1q, {
|
33597 | name: 'MuiSnackbarContent'
|
33598 | })(SnackbarContent);
|
33599 |
|
33600 | var styles$1r = function styles(theme) {
|
33601 | var top1 = {
|
33602 | top: 8
|
33603 | };
|
33604 | var bottom1 = {
|
33605 | bottom: 8
|
33606 | };
|
33607 | var right = {
|
33608 | justifyContent: 'flex-end'
|
33609 | };
|
33610 | var left = {
|
33611 | justifyContent: 'flex-start'
|
33612 | };
|
33613 | var top3 = {
|
33614 | top: 24
|
33615 | };
|
33616 | var bottom3 = {
|
33617 | bottom: 24
|
33618 | };
|
33619 | var right3 = {
|
33620 | right: 24
|
33621 | };
|
33622 | var left3 = {
|
33623 | left: 24
|
33624 | };
|
33625 | var center = {
|
33626 | left: '50%',
|
33627 | right: 'auto',
|
33628 | transform: 'translateX(-50%)'
|
33629 | };
|
33630 | return {
|
33631 |
|
33632 | root: {
|
33633 | zIndex: theme.zIndex.snackbar,
|
33634 | position: 'fixed',
|
33635 | display: 'flex',
|
33636 | left: 8,
|
33637 | right: 8,
|
33638 | justifyContent: 'center',
|
33639 | alignItems: 'center'
|
33640 | },
|
33641 |
|
33642 |
|
33643 | anchorOriginTopCenter: _extends({}, top1, _defineProperty({}, theme.breakpoints.up('sm'), _extends({}, top3, center))),
|
33644 |
|
33645 |
|
33646 | anchorOriginBottomCenter: _extends({}, bottom1, _defineProperty({}, theme.breakpoints.up('sm'), _extends({}, bottom3, center))),
|
33647 |
|
33648 |
|
33649 | anchorOriginTopRight: _extends({}, top1, right, _defineProperty({}, theme.breakpoints.up('sm'), _extends({
|
33650 | left: 'auto'
|
33651 | }, top3, right3))),
|
33652 |
|
33653 |
|
33654 | anchorOriginBottomRight: _extends({}, bottom1, right, _defineProperty({}, theme.breakpoints.up('sm'), _extends({
|
33655 | left: 'auto'
|
33656 | }, bottom3, right3))),
|
33657 |
|
33658 |
|
33659 | anchorOriginTopLeft: _extends({}, top1, left, _defineProperty({}, theme.breakpoints.up('sm'), _extends({
|
33660 | right: 'auto'
|
33661 | }, top3, left3))),
|
33662 |
|
33663 |
|
33664 | anchorOriginBottomLeft: _extends({}, bottom1, left, _defineProperty({}, theme.breakpoints.up('sm'), _extends({
|
33665 | right: 'auto'
|
33666 | }, bottom3, left3)))
|
33667 | };
|
33668 | };
|
33669 | var Snackbar = React.forwardRef(function Snackbar(props, ref) {
|
33670 | var action = props.action,
|
33671 | _props$anchorOrigin = props.anchorOrigin;
|
33672 | _props$anchorOrigin = _props$anchorOrigin === void 0 ? {
|
33673 | vertical: 'bottom',
|
33674 | horizontal: 'center'
|
33675 | } : _props$anchorOrigin;
|
33676 |
|
33677 | var vertical = _props$anchorOrigin.vertical,
|
33678 | horizontal = _props$anchorOrigin.horizontal,
|
33679 | _props$autoHideDurati = props.autoHideDuration,
|
33680 | autoHideDuration = _props$autoHideDurati === void 0 ? null : _props$autoHideDurati,
|
33681 | children = props.children,
|
33682 | classes = props.classes,
|
33683 | className = props.className,
|
33684 | ClickAwayListenerProps = props.ClickAwayListenerProps,
|
33685 | ContentProps = props.ContentProps,
|
33686 | _props$disableWindowB = props.disableWindowBlurListener,
|
33687 | disableWindowBlurListener = _props$disableWindowB === void 0 ? false : _props$disableWindowB,
|
33688 | message = props.message,
|
33689 | onClose = props.onClose,
|
33690 | onEnter = props.onEnter,
|
33691 | onEntered = props.onEntered,
|
33692 | onEntering = props.onEntering,
|
33693 | onExit = props.onExit,
|
33694 | onExited = props.onExited,
|
33695 | onExiting = props.onExiting,
|
33696 | onMouseEnter = props.onMouseEnter,
|
33697 | onMouseLeave = props.onMouseLeave,
|
33698 | open = props.open,
|
33699 | resumeHideDuration = props.resumeHideDuration,
|
33700 | _props$TransitionComp = props.TransitionComponent,
|
33701 | TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
|
33702 | _props$transitionDura = props.transitionDuration,
|
33703 | transitionDuration = _props$transitionDura === void 0 ? {
|
33704 | enter: duration.enteringScreen,
|
33705 | exit: duration.leavingScreen
|
33706 | } : _props$transitionDura,
|
33707 | TransitionProps = props.TransitionProps,
|
33708 | 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"]);
|
33709 |
|
33710 | var timerAutoHide = React.useRef();
|
33711 |
|
33712 | var _React$useState = React.useState(true),
|
33713 | exited = _React$useState[0],
|
33714 | setExited = _React$useState[1];
|
33715 |
|
33716 | var handleClose = useEventCallback(function () {
|
33717 | if (onClose) {
|
33718 | onClose.apply(void 0, arguments);
|
33719 | }
|
33720 | });
|
33721 | var setAutoHideTimer = useEventCallback(function (autoHideDurationParam) {
|
33722 | if (!onClose || autoHideDurationParam == null) {
|
33723 | return;
|
33724 | }
|
33725 |
|
33726 | clearTimeout(timerAutoHide.current);
|
33727 | timerAutoHide.current = setTimeout(function () {
|
33728 | handleClose(null, 'timeout');
|
33729 | }, autoHideDurationParam);
|
33730 | });
|
33731 | React.useEffect(function () {
|
33732 | if (open) {
|
33733 | setAutoHideTimer(autoHideDuration);
|
33734 | }
|
33735 |
|
33736 | return function () {
|
33737 | clearTimeout(timerAutoHide.current);
|
33738 | };
|
33739 | }, [open, autoHideDuration, setAutoHideTimer]);
|
33740 |
|
33741 |
|
33742 | var handlePause = function handlePause() {
|
33743 | clearTimeout(timerAutoHide.current);
|
33744 | };
|
33745 |
|
33746 |
|
33747 |
|
33748 | var handleResume = React.useCallback(function () {
|
33749 | if (autoHideDuration != null) {
|
33750 | setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
|
33751 | }
|
33752 | }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
|
33753 |
|
33754 | var handleMouseEnter = function handleMouseEnter(event) {
|
33755 | if (onMouseEnter) {
|
33756 | onMouseEnter(event);
|
33757 | }
|
33758 |
|
33759 | handlePause();
|
33760 | };
|
33761 |
|
33762 | var handleMouseLeave = function handleMouseLeave(event) {
|
33763 | if (onMouseLeave) {
|
33764 | onMouseLeave(event);
|
33765 | }
|
33766 |
|
33767 | handleResume();
|
33768 | };
|
33769 |
|
33770 | var handleClickAway = function handleClickAway(event) {
|
33771 | if (onClose) {
|
33772 | onClose(event, 'clickaway');
|
33773 | }
|
33774 | };
|
33775 |
|
33776 | var handleExited = function handleExited() {
|
33777 | setExited(true);
|
33778 | };
|
33779 |
|
33780 | var handleEnter = function handleEnter() {
|
33781 | setExited(false);
|
33782 | };
|
33783 |
|
33784 | React.useEffect(function () {
|
33785 | if (!disableWindowBlurListener && open) {
|
33786 | window.addEventListener('focus', handleResume);
|
33787 | window.addEventListener('blur', handlePause);
|
33788 | return function () {
|
33789 | window.removeEventListener('focus', handleResume);
|
33790 | window.removeEventListener('blur', handlePause);
|
33791 | };
|
33792 | }
|
33793 |
|
33794 | return undefined;
|
33795 | }, [disableWindowBlurListener, handleResume, open]);
|
33796 |
|
33797 | if (!open && exited) {
|
33798 | return null;
|
33799 | }
|
33800 |
|
33801 | return React.createElement(ClickAwayListener, _extends({
|
33802 | onClickAway: handleClickAway
|
33803 | }, ClickAwayListenerProps), React.createElement("div", _extends({
|
33804 | className: clsx(classes.root, classes["anchorOrigin".concat(capitalize(vertical)).concat(capitalize(horizontal))], className),
|
33805 | onMouseEnter: handleMouseEnter,
|
33806 | onMouseLeave: handleMouseLeave,
|
33807 | ref: ref
|
33808 | }, other), React.createElement(TransitionComponent, _extends({
|
33809 | appear: true,
|
33810 | in: open,
|
33811 | onEnter: createChainedFunction(handleEnter, onEnter),
|
33812 | onEntered: onEntered,
|
33813 | onEntering: onEntering,
|
33814 | onExit: onExit,
|
33815 | onExited: createChainedFunction(handleExited, onExited),
|
33816 | onExiting: onExiting,
|
33817 | timeout: transitionDuration,
|
33818 | direction: vertical === 'top' ? 'down' : 'up'
|
33819 | }, TransitionProps), children || React.createElement(SnackbarContent$1, _extends({
|
33820 | message: message,
|
33821 | action: action
|
33822 | }, ContentProps)))));
|
33823 | });
|
33824 | Snackbar.propTypes = {
|
33825 |
|
33826 |
|
33827 |
|
33828 |
|
33829 |
|
33830 | |
33831 |
|
33832 |
|
33833 | action: propTypes.node,
|
33834 |
|
33835 | |
33836 |
|
33837 |
|
33838 | anchorOrigin: propTypes.shape({
|
33839 | horizontal: propTypes.oneOf(['center', 'left', 'right']).isRequired,
|
33840 | vertical: propTypes.oneOf(['bottom', 'top']).isRequired
|
33841 | }),
|
33842 |
|
33843 | |
33844 |
|
33845 |
|
33846 |
|
33847 |
|
33848 |
|
33849 | autoHideDuration: propTypes.number,
|
33850 |
|
33851 | |
33852 |
|
33853 |
|
33854 | children: propTypes.element,
|
33855 |
|
33856 | |
33857 |
|
33858 |
|
33859 |
|
33860 | classes: propTypes.object,
|
33861 |
|
33862 | |
33863 |
|
33864 |
|
33865 | className: propTypes.string,
|
33866 |
|
33867 | |
33868 |
|
33869 |
|
33870 | ClickAwayListenerProps: propTypes.object,
|
33871 |
|
33872 | |
33873 |
|
33874 |
|
33875 | ContentProps: propTypes.object,
|
33876 |
|
33877 | |
33878 |
|
33879 |
|
33880 | disableWindowBlurListener: propTypes.bool,
|
33881 |
|
33882 | |
33883 |
|
33884 |
|
33885 |
|
33886 |
|
33887 |
|
33888 | key: propTypes.any,
|
33889 |
|
33890 | |
33891 |
|
33892 |
|
33893 | message: propTypes.node,
|
33894 |
|
33895 | |
33896 |
|
33897 |
|
33898 |
|
33899 |
|
33900 |
|
33901 |
|
33902 |
|
33903 |
|
33904 |
|
33905 | onClose: propTypes.func,
|
33906 |
|
33907 | |
33908 |
|
33909 |
|
33910 |
|
33911 | onEnter: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
33912 |
|
33913 | |
33914 |
|
33915 |
|
33916 |
|
33917 | onEntered: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
33918 |
|
33919 | |
33920 |
|
33921 |
|
33922 |
|
33923 | onEntering: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
33924 |
|
33925 | |
33926 |
|
33927 |
|
33928 |
|
33929 | onExit: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
33930 |
|
33931 | |
33932 |
|
33933 |
|
33934 |
|
33935 | onExited: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
33936 |
|
33937 | |
33938 |
|
33939 |
|
33940 |
|
33941 | onExiting: deprecatedPropType(propTypes.func, 'Use the `TransitionProps` prop instead.'),
|
33942 |
|
33943 | |
33944 |
|
33945 |
|
33946 | onMouseEnter: propTypes.func,
|
33947 |
|
33948 | |
33949 |
|
33950 |
|
33951 | onMouseLeave: propTypes.func,
|
33952 |
|
33953 | |
33954 |
|
33955 |
|
33956 | open: propTypes.bool,
|
33957 |
|
33958 | |
33959 |
|
33960 |
|
33961 |
|
33962 |
|
33963 |
|
33964 | resumeHideDuration: propTypes.number,
|
33965 |
|
33966 | |
33967 |
|
33968 |
|
33969 |
|
33970 | TransitionComponent: propTypes.elementType,
|
33971 |
|
33972 | |
33973 |
|
33974 |
|
33975 |
|
33976 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
33977 | appear: propTypes.number,
|
33978 | enter: propTypes.number,
|
33979 | exit: propTypes.number
|
33980 | })]),
|
33981 |
|
33982 | |
33983 |
|
33984 |
|
33985 | TransitionProps: propTypes.object
|
33986 | } ;
|
33987 | var Snackbar$1 = withStyles$1(styles$1r, {
|
33988 | flip: false,
|
33989 | name: 'MuiSnackbar'
|
33990 | })(Snackbar);
|
33991 |
|
33992 | var styles$1s = {
|
33993 |
|
33994 | root: {},
|
33995 |
|
33996 |
|
33997 | horizontal: {
|
33998 | paddingLeft: 8,
|
33999 | paddingRight: 8
|
34000 | },
|
34001 |
|
34002 |
|
34003 | vertical: {},
|
34004 |
|
34005 |
|
34006 | alternativeLabel: {
|
34007 | flex: 1,
|
34008 | position: 'relative'
|
34009 | },
|
34010 |
|
34011 |
|
34012 | completed: {}
|
34013 | };
|
34014 | var Step = React.forwardRef(function Step(props, ref) {
|
34015 | var _props$active = props.active,
|
34016 | active = _props$active === void 0 ? false : _props$active,
|
34017 | alternativeLabel = props.alternativeLabel,
|
34018 | children = props.children,
|
34019 | classes = props.classes,
|
34020 | className = props.className,
|
34021 | _props$completed = props.completed,
|
34022 | completed = _props$completed === void 0 ? false : _props$completed,
|
34023 | connectorProp = props.connector,
|
34024 | _props$disabled = props.disabled,
|
34025 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
34026 | _props$expanded = props.expanded,
|
34027 | expanded = _props$expanded === void 0 ? false : _props$expanded,
|
34028 | index = props.index,
|
34029 | last = props.last,
|
34030 | orientation = props.orientation,
|
34031 | other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "connector", "disabled", "expanded", "index", "last", "orientation"]);
|
34032 |
|
34033 | var connector = connectorProp ? React.cloneElement(connectorProp, {
|
34034 | orientation: orientation,
|
34035 | alternativeLabel: alternativeLabel,
|
34036 | index: index,
|
34037 | active: active,
|
34038 | completed: completed,
|
34039 | disabled: disabled
|
34040 | }) : null;
|
34041 | var newChildren = React.createElement("div", _extends({
|
34042 | className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel, completed && classes.completed),
|
34043 | ref: ref
|
34044 | }, other), connector && alternativeLabel && index !== 0 ? connector : null, React.Children.map(children, function (child) {
|
34045 | if (! React.isValidElement(child)) {
|
34046 | return null;
|
34047 | }
|
34048 |
|
34049 | {
|
34050 | if (reactIs_2(child)) {
|
34051 | console.error(["Material-UI: The Step component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
34052 | }
|
34053 | }
|
34054 |
|
34055 | return React.cloneElement(child, _extends({
|
34056 | active: active,
|
34057 | alternativeLabel: alternativeLabel,
|
34058 | completed: completed,
|
34059 | disabled: disabled,
|
34060 | expanded: expanded,
|
34061 | last: last,
|
34062 | icon: index + 1,
|
34063 | orientation: orientation
|
34064 | }, child.props));
|
34065 | }));
|
34066 |
|
34067 | if (connector && !alternativeLabel && index !== 0) {
|
34068 | return React.createElement(React.Fragment, null, connector, newChildren);
|
34069 | }
|
34070 |
|
34071 | return newChildren;
|
34072 | });
|
34073 | Step.propTypes = {
|
34074 |
|
34075 |
|
34076 |
|
34077 |
|
34078 |
|
34079 | |
34080 |
|
34081 |
|
34082 | active: propTypes.bool,
|
34083 |
|
34084 | |
34085 |
|
34086 |
|
34087 | children: propTypes.node,
|
34088 |
|
34089 | |
34090 |
|
34091 |
|
34092 |
|
34093 | classes: propTypes.object,
|
34094 |
|
34095 | |
34096 |
|
34097 |
|
34098 | className: propTypes.string,
|
34099 |
|
34100 | |
34101 |
|
34102 |
|
34103 | completed: propTypes.bool,
|
34104 |
|
34105 | |
34106 |
|
34107 |
|
34108 |
|
34109 | disabled: propTypes.bool,
|
34110 |
|
34111 | |
34112 |
|
34113 |
|
34114 | expanded: propTypes.bool
|
34115 | } ;
|
34116 | var Step$1 = withStyles$1(styles$1s, {
|
34117 | name: 'MuiStep'
|
34118 | })(Step);
|
34119 |
|
34120 | |
34121 |
|
34122 |
|
34123 |
|
34124 | var CheckCircle = createSvgIcon( React.createElement("path", {
|
34125 | 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"
|
34126 | }), 'CheckCircle');
|
34127 |
|
34128 | |
34129 |
|
34130 |
|
34131 |
|
34132 | var Warning = createSvgIcon( React.createElement("path", {
|
34133 | d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
|
34134 | }), 'Warning');
|
34135 |
|
34136 | var styles$1t = function styles(theme) {
|
34137 | return {
|
34138 |
|
34139 | root: {
|
34140 | display: 'block',
|
34141 | color: theme.palette.text.disabled,
|
34142 | '&$completed': {
|
34143 | color: theme.palette.primary.main
|
34144 | },
|
34145 | '&$active': {
|
34146 | color: theme.palette.primary.main
|
34147 | },
|
34148 | '&$error': {
|
34149 | color: theme.palette.error.main
|
34150 | }
|
34151 | },
|
34152 |
|
34153 |
|
34154 | text: {
|
34155 | fill: theme.palette.primary.contrastText,
|
34156 | fontSize: theme.typography.caption.fontSize,
|
34157 | fontFamily: theme.typography.fontFamily
|
34158 | },
|
34159 |
|
34160 |
|
34161 | active: {},
|
34162 |
|
34163 |
|
34164 | completed: {},
|
34165 |
|
34166 |
|
34167 | error: {}
|
34168 | };
|
34169 | };
|
34170 |
|
34171 | var _ref$1 = React.createElement("circle", {
|
34172 | cx: "12",
|
34173 | cy: "12",
|
34174 | r: "12"
|
34175 | });
|
34176 |
|
34177 | var StepIcon = React.forwardRef(function StepIcon(props, ref) {
|
34178 | var _props$completed = props.completed,
|
34179 | completed = _props$completed === void 0 ? false : _props$completed,
|
34180 | icon = props.icon,
|
34181 | _props$active = props.active,
|
34182 | active = _props$active === void 0 ? false : _props$active,
|
34183 | _props$error = props.error,
|
34184 | error = _props$error === void 0 ? false : _props$error,
|
34185 | classes = props.classes;
|
34186 |
|
34187 | if (typeof icon === 'number' || typeof icon === 'string') {
|
34188 | var className = clsx(classes.root, active && classes.active, error && classes.error, completed && classes.completed);
|
34189 |
|
34190 | if (error) {
|
34191 | return React.createElement(Warning, {
|
34192 | className: className,
|
34193 | ref: ref
|
34194 | });
|
34195 | }
|
34196 |
|
34197 | if (completed) {
|
34198 | return React.createElement(CheckCircle, {
|
34199 | className: className,
|
34200 | ref: ref
|
34201 | });
|
34202 | }
|
34203 |
|
34204 | return React.createElement(SvgIcon$1, {
|
34205 | className: className,
|
34206 | ref: ref
|
34207 | }, _ref$1, React.createElement("text", {
|
34208 | className: classes.text,
|
34209 | x: "12",
|
34210 | y: "16",
|
34211 | textAnchor: "middle"
|
34212 | }, icon));
|
34213 | }
|
34214 |
|
34215 | return icon;
|
34216 | });
|
34217 | StepIcon.propTypes = {
|
34218 |
|
34219 |
|
34220 |
|
34221 |
|
34222 |
|
34223 | |
34224 |
|
34225 |
|
34226 | active: propTypes.bool,
|
34227 |
|
34228 | |
34229 |
|
34230 |
|
34231 |
|
34232 | classes: propTypes.object,
|
34233 |
|
34234 | |
34235 |
|
34236 |
|
34237 | completed: propTypes.bool,
|
34238 |
|
34239 | |
34240 |
|
34241 |
|
34242 | error: propTypes.bool,
|
34243 |
|
34244 | |
34245 |
|
34246 |
|
34247 | icon: propTypes.node
|
34248 | } ;
|
34249 | var StepIcon$1 = withStyles$1(styles$1t, {
|
34250 | name: 'MuiStepIcon'
|
34251 | })(StepIcon);
|
34252 |
|
34253 | var styles$1u = function styles(theme) {
|
34254 | return {
|
34255 |
|
34256 | root: {
|
34257 | display: 'flex',
|
34258 | alignItems: 'center',
|
34259 | '&$alternativeLabel': {
|
34260 | flexDirection: 'column'
|
34261 | },
|
34262 | '&$disabled': {
|
34263 | cursor: 'default'
|
34264 | }
|
34265 | },
|
34266 |
|
34267 |
|
34268 | horizontal: {},
|
34269 |
|
34270 |
|
34271 | vertical: {},
|
34272 |
|
34273 |
|
34274 | label: {
|
34275 | color: theme.palette.text.secondary,
|
34276 | '&$active': {
|
34277 | color: theme.palette.text.primary,
|
34278 | fontWeight: 500
|
34279 | },
|
34280 | '&$completed': {
|
34281 | color: theme.palette.text.primary,
|
34282 | fontWeight: 500
|
34283 | },
|
34284 | '&$alternativeLabel': {
|
34285 | textAlign: 'center',
|
34286 | marginTop: 16
|
34287 | },
|
34288 | '&$error': {
|
34289 | color: theme.palette.error.main
|
34290 | }
|
34291 | },
|
34292 |
|
34293 |
|
34294 | active: {},
|
34295 |
|
34296 |
|
34297 | completed: {},
|
34298 |
|
34299 |
|
34300 | error: {},
|
34301 |
|
34302 |
|
34303 | disabled: {},
|
34304 |
|
34305 |
|
34306 | iconContainer: {
|
34307 | flexShrink: 0,
|
34308 |
|
34309 | display: 'flex',
|
34310 | paddingRight: 8,
|
34311 | '&$alternativeLabel': {
|
34312 | paddingRight: 0
|
34313 | }
|
34314 | },
|
34315 |
|
34316 |
|
34317 | alternativeLabel: {},
|
34318 |
|
34319 |
|
34320 | labelContainer: {
|
34321 | width: '100%'
|
34322 | }
|
34323 | };
|
34324 | };
|
34325 | var StepLabel = React.forwardRef(function StepLabel(props, ref) {
|
34326 | var _props$active = props.active,
|
34327 | active = _props$active === void 0 ? false : _props$active,
|
34328 | _props$alternativeLab = props.alternativeLabel,
|
34329 | alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
|
34330 | children = props.children,
|
34331 | classes = props.classes,
|
34332 | className = props.className,
|
34333 | _props$completed = props.completed,
|
34334 | completed = _props$completed === void 0 ? false : _props$completed,
|
34335 | _props$disabled = props.disabled,
|
34336 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
34337 | _props$error = props.error,
|
34338 | error = _props$error === void 0 ? false : _props$error,
|
34339 | expanded = props.expanded,
|
34340 | icon = props.icon,
|
34341 | last = props.last,
|
34342 | optional = props.optional,
|
34343 | _props$orientation = props.orientation,
|
34344 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
34345 | StepIconComponentProp = props.StepIconComponent,
|
34346 | StepIconProps = props.StepIconProps,
|
34347 | other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "disabled", "error", "expanded", "icon", "last", "optional", "orientation", "StepIconComponent", "StepIconProps"]);
|
34348 |
|
34349 | var StepIconComponent = StepIconComponentProp;
|
34350 |
|
34351 | if (icon && !StepIconComponent) {
|
34352 | StepIconComponent = StepIcon$1;
|
34353 | }
|
34354 |
|
34355 | return React.createElement("span", _extends({
|
34356 | className: clsx(classes.root, classes[orientation], className, disabled && classes.disabled, alternativeLabel && classes.alternativeLabel, error && classes.error),
|
34357 | ref: ref
|
34358 | }, other), icon || StepIconComponent ? React.createElement("span", {
|
34359 | className: clsx(classes.iconContainer, alternativeLabel && classes.alternativeLabel)
|
34360 | }, React.createElement(StepIconComponent, _extends({
|
34361 | completed: completed,
|
34362 | active: active,
|
34363 | error: error,
|
34364 | icon: icon
|
34365 | }, StepIconProps))) : null, React.createElement("span", {
|
34366 | className: classes.labelContainer
|
34367 | }, children ? React.createElement(Typography$1, {
|
34368 | variant: "body2",
|
34369 | component: "span",
|
34370 | display: "block",
|
34371 | className: clsx(classes.label, alternativeLabel && classes.alternativeLabel, completed && classes.completed, active && classes.active, error && classes.error)
|
34372 | }, children) : null, optional));
|
34373 | });
|
34374 | StepLabel.propTypes = {
|
34375 |
|
34376 |
|
34377 |
|
34378 |
|
34379 |
|
34380 | |
34381 |
|
34382 |
|
34383 | children: propTypes.node,
|
34384 |
|
34385 | |
34386 |
|
34387 |
|
34388 |
|
34389 | classes: propTypes.object,
|
34390 |
|
34391 | |
34392 |
|
34393 |
|
34394 | className: propTypes.string,
|
34395 |
|
34396 | |
34397 |
|
34398 |
|
34399 |
|
34400 | disabled: propTypes.bool,
|
34401 |
|
34402 | |
34403 |
|
34404 |
|
34405 | error: propTypes.bool,
|
34406 |
|
34407 | |
34408 |
|
34409 |
|
34410 | icon: propTypes.node,
|
34411 |
|
34412 | |
34413 |
|
34414 |
|
34415 | optional: propTypes.node,
|
34416 |
|
34417 | |
34418 |
|
34419 |
|
34420 | StepIconComponent: propTypes.elementType,
|
34421 |
|
34422 | |
34423 |
|
34424 |
|
34425 | StepIconProps: propTypes.object
|
34426 | } ;
|
34427 | StepLabel.muiName = 'StepLabel';
|
34428 | var StepLabel$1 = withStyles$1(styles$1u, {
|
34429 | name: 'MuiStepLabel'
|
34430 | })(StepLabel);
|
34431 |
|
34432 | var styles$1v = {
|
34433 |
|
34434 | root: {
|
34435 | width: '100%',
|
34436 | padding: '24px 16px',
|
34437 | margin: '-24px -16px',
|
34438 | boxSizing: 'content-box'
|
34439 | },
|
34440 |
|
34441 |
|
34442 | horizontal: {},
|
34443 |
|
34444 |
|
34445 | vertical: {
|
34446 | justifyContent: 'flex-start',
|
34447 | padding: '8px',
|
34448 | margin: '-8px'
|
34449 | },
|
34450 |
|
34451 |
|
34452 | touchRipple: {
|
34453 | color: 'rgba(0, 0, 0, 0.3)'
|
34454 | }
|
34455 | };
|
34456 | var StepButton = React.forwardRef(function StepButton(props, ref) {
|
34457 | var active = props.active,
|
34458 | alternativeLabel = props.alternativeLabel,
|
34459 | children = props.children,
|
34460 | classes = props.classes,
|
34461 | className = props.className,
|
34462 | completed = props.completed,
|
34463 | disabled = props.disabled,
|
34464 | expanded = props.expanded,
|
34465 | icon = props.icon,
|
34466 | last = props.last,
|
34467 | optional = props.optional,
|
34468 | orientation = props.orientation,
|
34469 | other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "disabled", "expanded", "icon", "last", "optional", "orientation"]);
|
34470 |
|
34471 | var childProps = {
|
34472 | active: active,
|
34473 | alternativeLabel: alternativeLabel,
|
34474 | completed: completed,
|
34475 | disabled: disabled,
|
34476 | icon: icon,
|
34477 | optional: optional,
|
34478 | orientation: orientation
|
34479 | };
|
34480 | var child = isMuiElement(children, ['StepLabel']) ? React.cloneElement(children, childProps) : React.createElement(StepLabel$1, childProps, children);
|
34481 | return React.createElement(ButtonBase$1, _extends({
|
34482 | focusRipple: true,
|
34483 | disabled: disabled,
|
34484 | TouchRippleProps: {
|
34485 | className: classes.touchRipple
|
34486 | },
|
34487 | className: clsx(classes.root, classes[orientation], className),
|
34488 | ref: ref
|
34489 | }, other), child);
|
34490 | });
|
34491 | StepButton.propTypes = {
|
34492 | |
34493 |
|
34494 |
|
34495 |
|
34496 | active: propTypes.bool,
|
34497 |
|
34498 | |
34499 |
|
34500 |
|
34501 |
|
34502 | alternativeLabel: propTypes.bool,
|
34503 |
|
34504 | |
34505 |
|
34506 |
|
34507 | children: propTypes.node,
|
34508 |
|
34509 | |
34510 |
|
34511 |
|
34512 |
|
34513 | classes: propTypes.object.isRequired,
|
34514 |
|
34515 | |
34516 |
|
34517 |
|
34518 | className: propTypes.string,
|
34519 |
|
34520 | |
34521 |
|
34522 |
|
34523 |
|
34524 | completed: propTypes.bool,
|
34525 |
|
34526 | |
34527 |
|
34528 |
|
34529 |
|
34530 | disabled: propTypes.bool,
|
34531 |
|
34532 | |
34533 |
|
34534 |
|
34535 |
|
34536 | expanded: propTypes.bool,
|
34537 |
|
34538 | |
34539 |
|
34540 |
|
34541 | icon: propTypes.node,
|
34542 |
|
34543 | |
34544 |
|
34545 |
|
34546 | last: propTypes.bool,
|
34547 |
|
34548 | |
34549 |
|
34550 |
|
34551 | optional: propTypes.node,
|
34552 |
|
34553 | |
34554 |
|
34555 |
|
34556 | orientation: propTypes.oneOf(['horizontal', 'vertical'])
|
34557 | } ;
|
34558 | var StepButton$1 = withStyles$1(styles$1v, {
|
34559 | name: 'MuiStepButton'
|
34560 | })(StepButton);
|
34561 |
|
34562 | var styles$1w = function styles(theme) {
|
34563 | return {
|
34564 |
|
34565 | root: {
|
34566 | flex: '1 1 auto'
|
34567 | },
|
34568 |
|
34569 |
|
34570 | horizontal: {},
|
34571 |
|
34572 |
|
34573 | vertical: {
|
34574 | marginLeft: 12,
|
34575 |
|
34576 | padding: '0 0 8px'
|
34577 | },
|
34578 |
|
34579 |
|
34580 | alternativeLabel: {
|
34581 | position: 'absolute',
|
34582 | top: 8 + 4,
|
34583 | left: 'calc(-50% + 20px)',
|
34584 | right: 'calc(50% + 20px)'
|
34585 | },
|
34586 |
|
34587 |
|
34588 | active: {},
|
34589 |
|
34590 |
|
34591 | completed: {},
|
34592 |
|
34593 |
|
34594 | disabled: {},
|
34595 |
|
34596 |
|
34597 | line: {
|
34598 | display: 'block',
|
34599 | borderColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
|
34600 | },
|
34601 |
|
34602 |
|
34603 | lineHorizontal: {
|
34604 | borderTopStyle: 'solid',
|
34605 | borderTopWidth: 1
|
34606 | },
|
34607 |
|
34608 |
|
34609 | lineVertical: {
|
34610 | borderLeftStyle: 'solid',
|
34611 | borderLeftWidth: 1,
|
34612 | minHeight: 24
|
34613 | }
|
34614 | };
|
34615 | };
|
34616 | var StepConnector = React.forwardRef(function StepConnector(props, ref) {
|
34617 | var active = props.active,
|
34618 | _props$alternativeLab = props.alternativeLabel,
|
34619 | alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
|
34620 | classes = props.classes,
|
34621 | className = props.className,
|
34622 | completed = props.completed,
|
34623 | disabled = props.disabled,
|
34624 | index = props.index,
|
34625 | _props$orientation = props.orientation,
|
34626 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
34627 | other = _objectWithoutProperties(props, ["active", "alternativeLabel", "classes", "className", "completed", "disabled", "index", "orientation"]);
|
34628 |
|
34629 | return React.createElement("div", _extends({
|
34630 | className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel, active && classes.active, completed && classes.completed, disabled && classes.disabled),
|
34631 | ref: ref
|
34632 | }, other), React.createElement("span", {
|
34633 | className: clsx(classes.line, {
|
34634 | 'horizontal': classes.lineHorizontal,
|
34635 | 'vertical': classes.lineVertical
|
34636 | }[orientation])
|
34637 | }));
|
34638 | });
|
34639 | StepConnector.propTypes = {
|
34640 |
|
34641 |
|
34642 |
|
34643 |
|
34644 |
|
34645 | |
34646 |
|
34647 |
|
34648 |
|
34649 | classes: propTypes.object,
|
34650 |
|
34651 | |
34652 |
|
34653 |
|
34654 | className: propTypes.string
|
34655 | } ;
|
34656 | var StepConnector$1 = withStyles$1(styles$1w, {
|
34657 | name: 'MuiStepConnector'
|
34658 | })(StepConnector);
|
34659 |
|
34660 | var styles$1x = function styles(theme) {
|
34661 | return {
|
34662 |
|
34663 | root: {
|
34664 | marginTop: 8,
|
34665 | marginLeft: 12,
|
34666 |
|
34667 | paddingLeft: 8 + 12,
|
34668 |
|
34669 | paddingRight: 8,
|
34670 | borderLeft: "1px solid ".concat(theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600])
|
34671 | },
|
34672 |
|
34673 |
|
34674 | last: {
|
34675 | borderLeft: 'none'
|
34676 | },
|
34677 |
|
34678 |
|
34679 | transition: {}
|
34680 | };
|
34681 | };
|
34682 | var StepContent = React.forwardRef(function StepContent(props, ref) {
|
34683 | var active = props.active,
|
34684 | alternativeLabel = props.alternativeLabel,
|
34685 | children = props.children,
|
34686 | classes = props.classes,
|
34687 | className = props.className,
|
34688 | completed = props.completed,
|
34689 | expanded = props.expanded,
|
34690 | last = props.last,
|
34691 | optional = props.optional,
|
34692 | orientation = props.orientation,
|
34693 | _props$TransitionComp = props.TransitionComponent,
|
34694 | TransitionComponent = _props$TransitionComp === void 0 ? Collapse$1 : _props$TransitionComp,
|
34695 | _props$transitionDura = props.transitionDuration,
|
34696 | transitionDurationProp = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
|
34697 | TransitionProps = props.TransitionProps,
|
34698 | other = _objectWithoutProperties(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "expanded", "last", "optional", "orientation", "TransitionComponent", "transitionDuration", "TransitionProps"]);
|
34699 |
|
34700 | {
|
34701 | if (orientation !== 'vertical') {
|
34702 | console.error('Material-UI: <StepContent /> is only designed for use with the vertical stepper.');
|
34703 | }
|
34704 | }
|
34705 |
|
34706 | var transitionDuration = transitionDurationProp;
|
34707 |
|
34708 | if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
|
34709 | transitionDuration = undefined;
|
34710 | }
|
34711 |
|
34712 | return React.createElement("div", _extends({
|
34713 | className: clsx(classes.root, className, last && classes.last),
|
34714 | ref: ref
|
34715 | }, other), React.createElement(TransitionComponent, _extends({
|
34716 | in: active || expanded,
|
34717 | className: classes.transition,
|
34718 | timeout: transitionDuration,
|
34719 | unmountOnExit: true
|
34720 | }, TransitionProps), children));
|
34721 | });
|
34722 | StepContent.propTypes = {
|
34723 |
|
34724 |
|
34725 |
|
34726 |
|
34727 |
|
34728 | |
34729 |
|
34730 |
|
34731 | children: propTypes.node,
|
34732 |
|
34733 | |
34734 |
|
34735 |
|
34736 |
|
34737 | classes: propTypes.object,
|
34738 |
|
34739 | |
34740 |
|
34741 |
|
34742 | className: propTypes.string,
|
34743 |
|
34744 | |
34745 |
|
34746 |
|
34747 |
|
34748 | TransitionComponent: propTypes.elementType,
|
34749 |
|
34750 | |
34751 |
|
34752 |
|
34753 |
|
34754 |
|
34755 |
|
34756 | transitionDuration: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.shape({
|
34757 | appear: propTypes.number,
|
34758 | enter: propTypes.number,
|
34759 | exit: propTypes.number
|
34760 | })]),
|
34761 |
|
34762 | |
34763 |
|
34764 |
|
34765 | TransitionProps: propTypes.object
|
34766 | } ;
|
34767 | var StepContent$1 = withStyles$1(styles$1x, {
|
34768 | name: 'MuiStepContent'
|
34769 | })(StepContent);
|
34770 |
|
34771 | var styles$1y = {
|
34772 |
|
34773 | root: {
|
34774 | display: 'flex',
|
34775 | padding: 24
|
34776 | },
|
34777 |
|
34778 |
|
34779 | horizontal: {
|
34780 | flexDirection: 'row',
|
34781 | alignItems: 'center'
|
34782 | },
|
34783 |
|
34784 |
|
34785 | vertical: {
|
34786 | flexDirection: 'column'
|
34787 | },
|
34788 |
|
34789 |
|
34790 | alternativeLabel: {
|
34791 | alignItems: 'flex-start'
|
34792 | }
|
34793 | };
|
34794 | var defaultConnector = React.createElement(StepConnector$1, null);
|
34795 | var Stepper = React.forwardRef(function Stepper(props, ref) {
|
34796 | var _props$activeStep = props.activeStep,
|
34797 | activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
|
34798 | _props$alternativeLab = props.alternativeLabel,
|
34799 | alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
|
34800 | children = props.children,
|
34801 | classes = props.classes,
|
34802 | className = props.className,
|
34803 | _props$connector = props.connector,
|
34804 | connectorProp = _props$connector === void 0 ? defaultConnector : _props$connector,
|
34805 | _props$nonLinear = props.nonLinear,
|
34806 | nonLinear = _props$nonLinear === void 0 ? false : _props$nonLinear,
|
34807 | _props$orientation = props.orientation,
|
34808 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
34809 | other = _objectWithoutProperties(props, ["activeStep", "alternativeLabel", "children", "classes", "className", "connector", "nonLinear", "orientation"]);
|
34810 |
|
34811 | var connector = React.isValidElement(connectorProp) ? React.cloneElement(connectorProp, {
|
34812 | orientation: orientation
|
34813 | }) : null;
|
34814 | var childrenArray = React.Children.toArray(children);
|
34815 | var steps = childrenArray.map(function (step, index) {
|
34816 | var state = {
|
34817 | index: index,
|
34818 | active: false,
|
34819 | completed: false,
|
34820 | disabled: false
|
34821 | };
|
34822 |
|
34823 | if (activeStep === index) {
|
34824 | state.active = true;
|
34825 | } else if (!nonLinear && activeStep > index) {
|
34826 | state.completed = true;
|
34827 | } else if (!nonLinear && activeStep < index) {
|
34828 | state.disabled = true;
|
34829 | }
|
34830 |
|
34831 | return React.cloneElement(step, _extends({
|
34832 | alternativeLabel: alternativeLabel,
|
34833 | connector: connector,
|
34834 | last: index + 1 === childrenArray.length,
|
34835 | orientation: orientation
|
34836 | }, state, step.props));
|
34837 | });
|
34838 | return React.createElement(Paper$1, _extends({
|
34839 | square: true,
|
34840 | elevation: 0,
|
34841 | className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel),
|
34842 | ref: ref
|
34843 | }, other), steps);
|
34844 | });
|
34845 | Stepper.propTypes = {
|
34846 |
|
34847 |
|
34848 |
|
34849 |
|
34850 |
|
34851 | |
34852 |
|
34853 |
|
34854 |
|
34855 | activeStep: propTypes.number,
|
34856 |
|
34857 | |
34858 |
|
34859 |
|
34860 |
|
34861 | alternativeLabel: propTypes.bool,
|
34862 |
|
34863 | |
34864 |
|
34865 |
|
34866 | children: propTypes.node,
|
34867 |
|
34868 | |
34869 |
|
34870 |
|
34871 |
|
34872 | classes: propTypes.object,
|
34873 |
|
34874 | |
34875 |
|
34876 |
|
34877 | className: propTypes.string,
|
34878 |
|
34879 | |
34880 |
|
34881 |
|
34882 | connector: propTypes.element,
|
34883 |
|
34884 | |
34885 |
|
34886 |
|
34887 | nonLinear: propTypes.bool,
|
34888 |
|
34889 | |
34890 |
|
34891 |
|
34892 | orientation: propTypes.oneOf(['horizontal', 'vertical'])
|
34893 | } ;
|
34894 | var Stepper$1 = withStyles$1(styles$1y, {
|
34895 | name: 'MuiStepper'
|
34896 | })(Stepper);
|
34897 |
|
34898 | var styles$1z = function styles(theme) {
|
34899 | return {
|
34900 |
|
34901 | root: {
|
34902 | position: 'fixed',
|
34903 | top: 0,
|
34904 | left: 0,
|
34905 | bottom: 0,
|
34906 | zIndex: theme.zIndex.drawer - 1
|
34907 | },
|
34908 | anchorLeft: {
|
34909 | right: 'auto'
|
34910 | },
|
34911 | anchorRight: {
|
34912 | left: 'auto',
|
34913 | right: 0
|
34914 | },
|
34915 | anchorTop: {
|
34916 | bottom: 'auto',
|
34917 | right: 0
|
34918 | },
|
34919 | anchorBottom: {
|
34920 | top: 'auto',
|
34921 | bottom: 0,
|
34922 | right: 0
|
34923 | }
|
34924 | };
|
34925 | };
|
34926 | |
34927 |
|
34928 |
|
34929 |
|
34930 | var SwipeArea = React.forwardRef(function SwipeArea(props, ref) {
|
34931 | var anchor = props.anchor,
|
34932 | classes = props.classes,
|
34933 | className = props.className,
|
34934 | width = props.width,
|
34935 | other = _objectWithoutProperties(props, ["anchor", "classes", "className", "width"]);
|
34936 |
|
34937 | return React.createElement("div", _extends({
|
34938 | className: clsx(classes.root, classes["anchor".concat(capitalize(anchor))], className),
|
34939 | ref: ref,
|
34940 | style: _defineProperty({}, isHorizontal(anchor) ? 'width' : 'height', width)
|
34941 | }, other));
|
34942 | });
|
34943 | SwipeArea.propTypes = {
|
34944 | |
34945 |
|
34946 |
|
34947 | anchor: propTypes.oneOf(['left', 'top', 'right', 'bottom']).isRequired,
|
34948 |
|
34949 | |
34950 |
|
34951 |
|
34952 | classes: propTypes.object.isRequired,
|
34953 |
|
34954 | |
34955 |
|
34956 |
|
34957 | className: propTypes.string,
|
34958 |
|
34959 | |
34960 |
|
34961 |
|
34962 |
|
34963 | width: propTypes.number.isRequired
|
34964 | } ;
|
34965 | var SwipeArea$1 = withStyles$1(styles$1z, {
|
34966 | name: 'PrivateSwipeArea'
|
34967 | })(SwipeArea);
|
34968 |
|
34969 |
|
34970 |
|
34971 | var UNCERTAINTY_THRESHOLD = 3;
|
34972 |
|
34973 |
|
34974 |
|
34975 |
|
34976 | var nodeThatClaimedTheSwipe = null;
|
34977 |
|
34978 | function calculateCurrentX(anchor, touches) {
|
34979 | return anchor === 'right' ? document.body.offsetWidth - touches[0].pageX : touches[0].pageX;
|
34980 | }
|
34981 |
|
34982 | function calculateCurrentY(anchor, touches) {
|
34983 | return anchor === 'bottom' ? window.innerHeight - touches[0].clientY : touches[0].clientY;
|
34984 | }
|
34985 |
|
34986 | function getMaxTranslate(horizontalSwipe, paperInstance) {
|
34987 | return horizontalSwipe ? paperInstance.clientWidth : paperInstance.clientHeight;
|
34988 | }
|
34989 |
|
34990 | function getTranslate(currentTranslate, startLocation, open, maxTranslate) {
|
34991 | return Math.min(Math.max(open ? startLocation - currentTranslate : maxTranslate + startLocation - currentTranslate, 0), maxTranslate);
|
34992 | }
|
34993 |
|
34994 | function getDomTreeShapes(element, rootNode) {
|
34995 |
|
34996 | var domTreeShapes = [];
|
34997 |
|
34998 | while (element && element !== rootNode) {
|
34999 | var style = window.getComputedStyle(element);
|
35000 |
|
35001 | if (
|
35002 | style.getPropertyValue('position') === 'absolute' ||
|
35003 | style.getPropertyValue('overflow-x') === 'hidden') {
|
35004 | domTreeShapes = [];
|
35005 | } else if (element.clientWidth > 0 && element.scrollWidth > element.clientWidth || element.clientHeight > 0 && element.scrollHeight > element.clientHeight) {
|
35006 |
|
35007 |
|
35008 | domTreeShapes.push(element);
|
35009 | }
|
35010 |
|
35011 | element = element.parentElement;
|
35012 | }
|
35013 |
|
35014 | return domTreeShapes;
|
35015 | }
|
35016 |
|
35017 | function findNativeHandler(_ref) {
|
35018 | var domTreeShapes = _ref.domTreeShapes,
|
35019 | start = _ref.start,
|
35020 | current = _ref.current,
|
35021 | anchor = _ref.anchor;
|
35022 |
|
35023 | var axisProperties = {
|
35024 | scrollPosition: {
|
35025 | x: 'scrollLeft',
|
35026 | y: 'scrollTop'
|
35027 | },
|
35028 | scrollLength: {
|
35029 | x: 'scrollWidth',
|
35030 | y: 'scrollHeight'
|
35031 | },
|
35032 | clientLength: {
|
35033 | x: 'clientWidth',
|
35034 | y: 'clientHeight'
|
35035 | }
|
35036 | };
|
35037 | return domTreeShapes.some(function (shape) {
|
35038 |
|
35039 | var goingForward = current >= start;
|
35040 |
|
35041 | if (anchor === 'top' || anchor === 'left') {
|
35042 | goingForward = !goingForward;
|
35043 | }
|
35044 |
|
35045 | var axis = anchor === 'left' || anchor === 'right' ? 'x' : 'y';
|
35046 | var scrollPosition = shape[axisProperties.scrollPosition[axis]];
|
35047 | var areNotAtStart = scrollPosition > 0;
|
35048 | var areNotAtEnd = scrollPosition + shape[axisProperties.clientLength[axis]] < shape[axisProperties.scrollLength[axis]];
|
35049 |
|
35050 | if (goingForward && areNotAtEnd || !goingForward && areNotAtStart) {
|
35051 | return shape;
|
35052 | }
|
35053 |
|
35054 | return null;
|
35055 | });
|
35056 | }
|
35057 |
|
35058 | var iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
|
35059 | var transitionDurationDefault = {
|
35060 | enter: duration.enteringScreen,
|
35061 | exit: duration.leavingScreen
|
35062 | };
|
35063 | var useEnhancedEffect$a = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
35064 | var SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) {
|
35065 | var theme = useTheme$1();
|
35066 | var props = getThemeProps({
|
35067 | name: 'MuiSwipeableDrawer',
|
35068 | props: _extends({}, inProps),
|
35069 | theme: theme
|
35070 | });
|
35071 | var _props$anchor = props.anchor,
|
35072 | anchor = _props$anchor === void 0 ? 'left' : _props$anchor,
|
35073 | _props$disableBackdro = props.disableBackdropTransition,
|
35074 | disableBackdropTransition = _props$disableBackdro === void 0 ? false : _props$disableBackdro,
|
35075 | _props$disableDiscove = props.disableDiscovery,
|
35076 | disableDiscovery = _props$disableDiscove === void 0 ? false : _props$disableDiscove,
|
35077 | _props$disableSwipeTo = props.disableSwipeToOpen,
|
35078 | disableSwipeToOpen = _props$disableSwipeTo === void 0 ? iOS : _props$disableSwipeTo,
|
35079 | hideBackdrop = props.hideBackdrop,
|
35080 | _props$hysteresis = props.hysteresis,
|
35081 | hysteresis = _props$hysteresis === void 0 ? 0.52 : _props$hysteresis,
|
35082 | _props$minFlingVeloci = props.minFlingVelocity,
|
35083 | minFlingVelocity = _props$minFlingVeloci === void 0 ? 450 : _props$minFlingVeloci,
|
35084 | _props$ModalProps = props.ModalProps;
|
35085 | _props$ModalProps = _props$ModalProps === void 0 ? {} : _props$ModalProps;
|
35086 |
|
35087 | var BackdropProps = _props$ModalProps.BackdropProps,
|
35088 | ModalPropsProp = _objectWithoutProperties(_props$ModalProps, ["BackdropProps"]),
|
35089 | onClose = props.onClose,
|
35090 | onOpen = props.onOpen,
|
35091 | open = props.open,
|
35092 | _props$PaperProps = props.PaperProps,
|
35093 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
35094 | SwipeAreaProps = props.SwipeAreaProps,
|
35095 | _props$swipeAreaWidth = props.swipeAreaWidth,
|
35096 | swipeAreaWidth = _props$swipeAreaWidth === void 0 ? 20 : _props$swipeAreaWidth,
|
35097 | _props$transitionDura = props.transitionDuration,
|
35098 | transitionDuration = _props$transitionDura === void 0 ? transitionDurationDefault : _props$transitionDura,
|
35099 | _props$variant = props.variant,
|
35100 | variant = _props$variant === void 0 ? 'temporary' : _props$variant,
|
35101 | other = _objectWithoutProperties(props, ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"]);
|
35102 |
|
35103 | var _React$useState = React.useState(false),
|
35104 | maybeSwiping = _React$useState[0],
|
35105 | setMaybeSwiping = _React$useState[1];
|
35106 |
|
35107 | var swipeInstance = React.useRef({
|
35108 | isSwiping: null
|
35109 | });
|
35110 | var swipeAreaRef = React.useRef();
|
35111 | var backdropRef = React.useRef();
|
35112 | var paperRef = React.useRef();
|
35113 | var touchDetected = React.useRef(false);
|
35114 |
|
35115 | var calculatedDurationRef = React.useRef();
|
35116 |
|
35117 | useEnhancedEffect$a(function () {
|
35118 | calculatedDurationRef.current = null;
|
35119 | }, [open]);
|
35120 | var setPosition = React.useCallback(function (translate) {
|
35121 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
35122 | var _options$mode = options.mode,
|
35123 | mode = _options$mode === void 0 ? null : _options$mode,
|
35124 | _options$changeTransi = options.changeTransition,
|
35125 | changeTransition = _options$changeTransi === void 0 ? true : _options$changeTransi;
|
35126 | var anchorRtl = getAnchor(theme, anchor);
|
35127 | var rtlTranslateMultiplier = ['right', 'bottom'].indexOf(anchorRtl) !== -1 ? 1 : -1;
|
35128 | var horizontalSwipe = isHorizontal(anchor);
|
35129 | var transform = horizontalSwipe ? "translate(".concat(rtlTranslateMultiplier * translate, "px, 0)") : "translate(0, ".concat(rtlTranslateMultiplier * translate, "px)");
|
35130 | var drawerStyle = paperRef.current.style;
|
35131 | drawerStyle.webkitTransform = transform;
|
35132 | drawerStyle.transform = transform;
|
35133 | var transition = '';
|
35134 |
|
35135 | if (mode) {
|
35136 | transition = theme.transitions.create('all', getTransitionProps({
|
35137 | timeout: transitionDuration
|
35138 | }, {
|
35139 | mode: mode
|
35140 | }));
|
35141 | }
|
35142 |
|
35143 | if (changeTransition) {
|
35144 | drawerStyle.webkitTransition = transition;
|
35145 | drawerStyle.transition = transition;
|
35146 | }
|
35147 |
|
35148 | if (!disableBackdropTransition && !hideBackdrop) {
|
35149 | var backdropStyle = backdropRef.current.style;
|
35150 | backdropStyle.opacity = 1 - translate / getMaxTranslate(horizontalSwipe, paperRef.current);
|
35151 |
|
35152 | if (changeTransition) {
|
35153 | backdropStyle.webkitTransition = transition;
|
35154 | backdropStyle.transition = transition;
|
35155 | }
|
35156 | }
|
35157 | }, [anchor, disableBackdropTransition, hideBackdrop, theme, transitionDuration]);
|
35158 | var handleBodyTouchEnd = useEventCallback(function (event) {
|
35159 | if (!touchDetected.current) {
|
35160 | return;
|
35161 | }
|
35162 |
|
35163 | nodeThatClaimedTheSwipe = null;
|
35164 | touchDetected.current = false;
|
35165 | setMaybeSwiping(false);
|
35166 |
|
35167 | if (!swipeInstance.current.isSwiping) {
|
35168 | swipeInstance.current.isSwiping = null;
|
35169 | return;
|
35170 | }
|
35171 |
|
35172 | swipeInstance.current.isSwiping = null;
|
35173 | var anchorRtl = getAnchor(theme, anchor);
|
35174 | var horizontal = isHorizontal(anchor);
|
35175 | var current;
|
35176 |
|
35177 | if (horizontal) {
|
35178 | current = calculateCurrentX(anchorRtl, event.changedTouches);
|
35179 | } else {
|
35180 | current = calculateCurrentY(anchorRtl, event.changedTouches);
|
35181 | }
|
35182 |
|
35183 | var startLocation = horizontal ? swipeInstance.current.startX : swipeInstance.current.startY;
|
35184 | var maxTranslate = getMaxTranslate(horizontal, paperRef.current);
|
35185 | var currentTranslate = getTranslate(current, startLocation, open, maxTranslate);
|
35186 | var translateRatio = currentTranslate / maxTranslate;
|
35187 |
|
35188 | if (Math.abs(swipeInstance.current.velocity) > minFlingVelocity) {
|
35189 |
|
35190 | calculatedDurationRef.current = Math.abs((maxTranslate - currentTranslate) / swipeInstance.current.velocity) * 1000;
|
35191 | }
|
35192 |
|
35193 | if (open) {
|
35194 | if (swipeInstance.current.velocity > minFlingVelocity || translateRatio > hysteresis) {
|
35195 | onClose();
|
35196 | } else {
|
35197 |
|
35198 | setPosition(0, {
|
35199 | mode: 'exit'
|
35200 | });
|
35201 | }
|
35202 |
|
35203 | return;
|
35204 | }
|
35205 |
|
35206 | if (swipeInstance.current.velocity < -minFlingVelocity || 1 - translateRatio > hysteresis) {
|
35207 | onOpen();
|
35208 | } else {
|
35209 |
|
35210 | setPosition(getMaxTranslate(horizontal, paperRef.current), {
|
35211 | mode: 'enter'
|
35212 | });
|
35213 | }
|
35214 | });
|
35215 | var handleBodyTouchMove = useEventCallback(function (event) {
|
35216 |
|
35217 | if (!paperRef.current || !touchDetected.current) {
|
35218 | return;
|
35219 | }
|
35220 |
|
35221 |
|
35222 | if (nodeThatClaimedTheSwipe != null && nodeThatClaimedTheSwipe !== swipeInstance.current) {
|
35223 | return;
|
35224 | }
|
35225 |
|
35226 | var anchorRtl = getAnchor(theme, anchor);
|
35227 | var horizontalSwipe = isHorizontal(anchor);
|
35228 | var currentX = calculateCurrentX(anchorRtl, event.touches);
|
35229 | var currentY = calculateCurrentY(anchorRtl, event.touches);
|
35230 |
|
35231 | if (open && paperRef.current.contains(event.target) && nodeThatClaimedTheSwipe == null) {
|
35232 | var domTreeShapes = getDomTreeShapes(event.target, paperRef.current);
|
35233 | var nativeHandler = findNativeHandler({
|
35234 | domTreeShapes: domTreeShapes,
|
35235 | start: horizontalSwipe ? swipeInstance.current.startX : swipeInstance.current.startY,
|
35236 | current: horizontalSwipe ? currentX : currentY,
|
35237 | anchor: anchor
|
35238 | });
|
35239 |
|
35240 | if (nativeHandler) {
|
35241 | nodeThatClaimedTheSwipe = nativeHandler;
|
35242 | return;
|
35243 | }
|
35244 |
|
35245 | nodeThatClaimedTheSwipe = swipeInstance.current;
|
35246 | }
|
35247 |
|
35248 |
|
35249 | if (swipeInstance.current.isSwiping == null) {
|
35250 | var dx = Math.abs(currentX - swipeInstance.current.startX);
|
35251 | var dy = Math.abs(currentY - swipeInstance.current.startY);
|
35252 |
|
35253 | if (dx > dy) {
|
35254 | if (event.cancelable) {
|
35255 | event.preventDefault();
|
35256 | }
|
35257 | }
|
35258 |
|
35259 | var definitelySwiping = horizontalSwipe ? dx > dy && dx > UNCERTAINTY_THRESHOLD : dy > dx && dy > UNCERTAINTY_THRESHOLD;
|
35260 |
|
35261 | if (definitelySwiping === true || (horizontalSwipe ? dy > UNCERTAINTY_THRESHOLD : dx > UNCERTAINTY_THRESHOLD)) {
|
35262 | swipeInstance.current.isSwiping = definitelySwiping;
|
35263 |
|
35264 | if (!definitelySwiping) {
|
35265 | handleBodyTouchEnd(event);
|
35266 | return;
|
35267 | }
|
35268 |
|
35269 |
|
35270 | swipeInstance.current.startX = currentX;
|
35271 | swipeInstance.current.startY = currentY;
|
35272 |
|
35273 | if (!disableDiscovery && !open) {
|
35274 | if (horizontalSwipe) {
|
35275 | swipeInstance.current.startX -= swipeAreaWidth;
|
35276 | } else {
|
35277 | swipeInstance.current.startY -= swipeAreaWidth;
|
35278 | }
|
35279 | }
|
35280 | }
|
35281 | }
|
35282 |
|
35283 | if (!swipeInstance.current.isSwiping) {
|
35284 | return;
|
35285 | }
|
35286 |
|
35287 | var maxTranslate = getMaxTranslate(horizontalSwipe, paperRef.current);
|
35288 | var startLocation = horizontalSwipe ? swipeInstance.current.startX : swipeInstance.current.startY;
|
35289 |
|
35290 | if (open && !swipeInstance.current.paperHit) {
|
35291 | startLocation = Math.min(startLocation, maxTranslate);
|
35292 | }
|
35293 |
|
35294 | var translate = getTranslate(horizontalSwipe ? currentX : currentY, startLocation, open, maxTranslate);
|
35295 |
|
35296 | if (open) {
|
35297 | if (!swipeInstance.current.paperHit) {
|
35298 | var paperHit = horizontalSwipe ? currentX < maxTranslate : currentY < maxTranslate;
|
35299 |
|
35300 | if (paperHit) {
|
35301 | swipeInstance.current.paperHit = true;
|
35302 | swipeInstance.current.startX = currentX;
|
35303 | swipeInstance.current.startY = currentY;
|
35304 | } else {
|
35305 | return;
|
35306 | }
|
35307 | } else if (translate === 0) {
|
35308 | swipeInstance.current.startX = currentX;
|
35309 | swipeInstance.current.startY = currentY;
|
35310 | }
|
35311 | }
|
35312 |
|
35313 | if (swipeInstance.current.lastTranslate === null) {
|
35314 | swipeInstance.current.lastTranslate = translate;
|
35315 | swipeInstance.current.lastTime = performance.now() + 1;
|
35316 | }
|
35317 |
|
35318 | var velocity = (translate - swipeInstance.current.lastTranslate) / (performance.now() - swipeInstance.current.lastTime) * 1e3;
|
35319 |
|
35320 | swipeInstance.current.velocity = swipeInstance.current.velocity * 0.4 + velocity * 0.6;
|
35321 | swipeInstance.current.lastTranslate = translate;
|
35322 | swipeInstance.current.lastTime = performance.now();
|
35323 |
|
35324 | if (event.cancelable) {
|
35325 | event.preventDefault();
|
35326 | }
|
35327 |
|
35328 | setPosition(translate);
|
35329 | });
|
35330 | var handleBodyTouchStart = useEventCallback(function (event) {
|
35331 |
|
35332 |
|
35333 | if (event.defaultPrevented) {
|
35334 | return;
|
35335 | }
|
35336 |
|
35337 |
|
35338 | if (event.muiHandled) {
|
35339 | return;
|
35340 | }
|
35341 |
|
35342 |
|
35343 | if (open && !backdropRef.current.contains(event.target) && !paperRef.current.contains(event.target)) {
|
35344 | return;
|
35345 | }
|
35346 |
|
35347 | var anchorRtl = getAnchor(theme, anchor);
|
35348 | var horizontalSwipe = isHorizontal(anchor);
|
35349 | var currentX = calculateCurrentX(anchorRtl, event.touches);
|
35350 | var currentY = calculateCurrentY(anchorRtl, event.touches);
|
35351 |
|
35352 | if (!open) {
|
35353 | if (disableSwipeToOpen || event.target !== swipeAreaRef.current) {
|
35354 | return;
|
35355 | }
|
35356 |
|
35357 | if (horizontalSwipe) {
|
35358 | if (currentX > swipeAreaWidth) {
|
35359 | return;
|
35360 | }
|
35361 | } else if (currentY > swipeAreaWidth) {
|
35362 | return;
|
35363 | }
|
35364 | }
|
35365 |
|
35366 | event.muiHandled = true;
|
35367 | nodeThatClaimedTheSwipe = null;
|
35368 | swipeInstance.current.startX = currentX;
|
35369 | swipeInstance.current.startY = currentY;
|
35370 | setMaybeSwiping(true);
|
35371 |
|
35372 | if (!open && paperRef.current) {
|
35373 |
|
35374 | setPosition(getMaxTranslate(horizontalSwipe, paperRef.current) + (disableDiscovery ? 20 : -swipeAreaWidth), {
|
35375 | changeTransition: false
|
35376 | });
|
35377 | }
|
35378 |
|
35379 | swipeInstance.current.velocity = 0;
|
35380 | swipeInstance.current.lastTime = null;
|
35381 | swipeInstance.current.lastTranslate = null;
|
35382 | swipeInstance.current.paperHit = false;
|
35383 | touchDetected.current = true;
|
35384 | });
|
35385 | React.useEffect(function () {
|
35386 | if (variant === 'temporary') {
|
35387 | var doc = ownerDocument(paperRef.current);
|
35388 | doc.addEventListener('touchstart', handleBodyTouchStart);
|
35389 | doc.addEventListener('touchmove', handleBodyTouchMove, {
|
35390 | passive: false
|
35391 | });
|
35392 | doc.addEventListener('touchend', handleBodyTouchEnd);
|
35393 | return function () {
|
35394 | doc.removeEventListener('touchstart', handleBodyTouchStart);
|
35395 | doc.removeEventListener('touchmove', handleBodyTouchMove, {
|
35396 | passive: false
|
35397 | });
|
35398 | doc.removeEventListener('touchend', handleBodyTouchEnd);
|
35399 | };
|
35400 | }
|
35401 |
|
35402 | return undefined;
|
35403 | }, [variant, handleBodyTouchStart, handleBodyTouchMove, handleBodyTouchEnd]);
|
35404 | React.useEffect(function () {
|
35405 | return function () {
|
35406 |
|
35407 | if (nodeThatClaimedTheSwipe === swipeInstance.current) {
|
35408 | nodeThatClaimedTheSwipe = null;
|
35409 | }
|
35410 | };
|
35411 | }, []);
|
35412 | React.useEffect(function () {
|
35413 | if (!open) {
|
35414 | setMaybeSwiping(false);
|
35415 | }
|
35416 | }, [open]);
|
35417 | var handleBackdropRef = React.useCallback(function (instance) {
|
35418 |
|
35419 | backdropRef.current = ReactDOM.findDOMNode(instance);
|
35420 | }, []);
|
35421 | return React.createElement(React.Fragment, null, React.createElement(Drawer$1, _extends({
|
35422 | open: variant === 'temporary' && maybeSwiping ? true : open,
|
35423 | variant: variant,
|
35424 | ModalProps: _extends({
|
35425 | BackdropProps: _extends({}, BackdropProps, {
|
35426 | ref: handleBackdropRef
|
35427 | })
|
35428 | }, ModalPropsProp),
|
35429 | PaperProps: _extends({}, PaperProps, {
|
35430 | style: _extends({
|
35431 | pointerEvents: variant === 'temporary' && !open ? 'none' : ''
|
35432 | }, PaperProps.style),
|
35433 | ref: paperRef
|
35434 | }),
|
35435 | anchor: anchor,
|
35436 | transitionDuration: calculatedDurationRef.current || transitionDuration,
|
35437 | onClose: onClose,
|
35438 | ref: ref
|
35439 | }, other)), !disableSwipeToOpen && variant === 'temporary' && React.createElement(NoSsr, null, React.createElement(SwipeArea$1, _extends({
|
35440 | anchor: anchor,
|
35441 | ref: swipeAreaRef,
|
35442 | width: swipeAreaWidth
|
35443 | }, SwipeAreaProps))));
|
35444 | });
|
35445 | SwipeableDrawer.propTypes = {
|
35446 | |
35447 |
|
35448 |
|
35449 | anchor: propTypes.oneOf(['left', 'top', 'right', 'bottom']),
|
35450 |
|
35451 | |
35452 |
|
35453 |
|
35454 | children: propTypes.node,
|
35455 |
|
35456 | |
35457 |
|
35458 |
|
35459 |
|
35460 | disableBackdropTransition: propTypes.bool,
|
35461 |
|
35462 | |
35463 |
|
35464 |
|
35465 |
|
35466 | disableDiscovery: propTypes.bool,
|
35467 |
|
35468 | |
35469 |
|
35470 |
|
35471 |
|
35472 | disableSwipeToOpen: propTypes.bool,
|
35473 |
|
35474 | |
35475 |
|
35476 |
|
35477 | hideBackdrop: propTypes.bool,
|
35478 |
|
35479 | |
35480 |
|
35481 |
|
35482 |
|
35483 | hysteresis: propTypes.number,
|
35484 |
|
35485 | |
35486 |
|
35487 |
|
35488 |
|
35489 |
|
35490 | minFlingVelocity: propTypes.number,
|
35491 |
|
35492 | |
35493 |
|
35494 |
|
35495 | ModalProps: propTypes.shape({
|
35496 | BackdropProps: propTypes.shape({
|
35497 | component: elementTypeAcceptingRef$1
|
35498 | })
|
35499 | }),
|
35500 |
|
35501 | |
35502 |
|
35503 |
|
35504 |
|
35505 |
|
35506 | onClose: propTypes.func.isRequired,
|
35507 |
|
35508 | |
35509 |
|
35510 |
|
35511 |
|
35512 |
|
35513 | onOpen: propTypes.func.isRequired,
|
35514 |
|
35515 | |
35516 |
|
35517 |
|
35518 | open: propTypes.bool.isRequired,
|
35519 |
|
35520 | |
35521 |
|
35522 |
|
35523 | PaperProps: propTypes.shape({
|
35524 | component: elementTypeAcceptingRef$1,
|
35525 | style: propTypes.object
|
35526 | }),
|
35527 |
|
35528 | |
35529 |
|
35530 |
|
35531 | SwipeAreaProps: propTypes.object,
|
35532 |
|
35533 | |
35534 |
|
35535 |
|
35536 |
|
35537 | swipeAreaWidth: propTypes.number,
|
35538 |
|
35539 | |
35540 |
|
35541 |
|
35542 |
|
35543 | transitionDuration: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
35544 | enter: propTypes.number,
|
35545 | exit: propTypes.number
|
35546 | })]),
|
35547 |
|
35548 | |
35549 |
|
35550 |
|
35551 | variant: propTypes.oneOf(['permanent', 'persistent', 'temporary'])
|
35552 | } ;
|
35553 |
|
35554 | var styles$1A = function styles(theme) {
|
35555 | return {
|
35556 |
|
35557 | root: {
|
35558 | display: 'inline-flex',
|
35559 | width: 34 + 12 * 2,
|
35560 | height: 14 + 12 * 2,
|
35561 | overflow: 'hidden',
|
35562 | padding: 12,
|
35563 | boxSizing: 'border-box',
|
35564 | position: 'relative',
|
35565 | flexShrink: 0,
|
35566 | zIndex: 0,
|
35567 |
|
35568 | verticalAlign: 'middle',
|
35569 |
|
35570 | '@media print': {
|
35571 | colorAdjust: 'exact'
|
35572 | }
|
35573 | },
|
35574 |
|
35575 |
|
35576 | edgeStart: {
|
35577 | marginLeft: -8
|
35578 | },
|
35579 |
|
35580 |
|
35581 | edgeEnd: {
|
35582 | marginRight: -8
|
35583 | },
|
35584 |
|
35585 |
|
35586 | switchBase: {
|
35587 | position: 'absolute',
|
35588 | top: 0,
|
35589 | left: 0,
|
35590 | zIndex: 1,
|
35591 |
|
35592 | color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
|
35593 | transition: theme.transitions.create(['left', 'transform'], {
|
35594 | duration: theme.transitions.duration.shortest
|
35595 | }),
|
35596 | '&$checked': {
|
35597 | transform: 'translateX(20px)'
|
35598 | },
|
35599 | '&$disabled': {
|
35600 | color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
|
35601 | },
|
35602 | '&$checked + $track': {
|
35603 | opacity: 0.5
|
35604 | },
|
35605 | '&$disabled + $track': {
|
35606 | opacity: theme.palette.type === 'light' ? 0.12 : 0.1
|
35607 | }
|
35608 | },
|
35609 |
|
35610 |
|
35611 | colorPrimary: {
|
35612 | '&$checked': {
|
35613 | color: theme.palette.primary.main,
|
35614 | '&:hover': {
|
35615 | backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
35616 | '@media (hover: none)': {
|
35617 | backgroundColor: 'transparent'
|
35618 | }
|
35619 | }
|
35620 | },
|
35621 | '&$disabled': {
|
35622 | color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
|
35623 | },
|
35624 | '&$checked + $track': {
|
35625 | backgroundColor: theme.palette.primary.main
|
35626 | },
|
35627 | '&$disabled + $track': {
|
35628 | backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
|
35629 | }
|
35630 | },
|
35631 |
|
35632 |
|
35633 | colorSecondary: {
|
35634 | '&$checked': {
|
35635 | color: theme.palette.secondary.main,
|
35636 | '&:hover': {
|
35637 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
35638 | '@media (hover: none)': {
|
35639 | backgroundColor: 'transparent'
|
35640 | }
|
35641 | }
|
35642 | },
|
35643 | '&$disabled': {
|
35644 | color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
|
35645 | },
|
35646 | '&$checked + $track': {
|
35647 | backgroundColor: theme.palette.secondary.main
|
35648 | },
|
35649 | '&$disabled + $track': {
|
35650 | backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
|
35651 | }
|
35652 | },
|
35653 |
|
35654 |
|
35655 | sizeSmall: {
|
35656 | width: 40,
|
35657 | height: 24,
|
35658 | padding: 7,
|
35659 | '& $thumb': {
|
35660 | width: 16,
|
35661 | height: 16
|
35662 | },
|
35663 | '& $switchBase': {
|
35664 | padding: 4,
|
35665 | '&$checked': {
|
35666 | transform: 'translateX(16px)'
|
35667 | }
|
35668 | }
|
35669 | },
|
35670 |
|
35671 |
|
35672 | checked: {},
|
35673 |
|
35674 |
|
35675 | disabled: {},
|
35676 |
|
35677 |
|
35678 | input: {
|
35679 | left: '-100%',
|
35680 | width: '300%'
|
35681 | },
|
35682 |
|
35683 |
|
35684 | thumb: {
|
35685 | boxShadow: theme.shadows[1],
|
35686 | backgroundColor: 'currentColor',
|
35687 | width: 20,
|
35688 | height: 20,
|
35689 | borderRadius: '50%'
|
35690 | },
|
35691 |
|
35692 |
|
35693 | track: {
|
35694 | height: '100%',
|
35695 | width: '100%',
|
35696 | borderRadius: 14 / 2,
|
35697 | zIndex: -1,
|
35698 | transition: theme.transitions.create(['opacity', 'background-color'], {
|
35699 | duration: theme.transitions.duration.shortest
|
35700 | }),
|
35701 | backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
|
35702 | opacity: theme.palette.type === 'light' ? 0.38 : 0.3
|
35703 | }
|
35704 | };
|
35705 | };
|
35706 | var Switch = React.forwardRef(function Switch(props, ref) {
|
35707 | var classes = props.classes,
|
35708 | className = props.className,
|
35709 | _props$color = props.color,
|
35710 | color = _props$color === void 0 ? 'secondary' : _props$color,
|
35711 | _props$edge = props.edge,
|
35712 | edge = _props$edge === void 0 ? false : _props$edge,
|
35713 | _props$size = props.size,
|
35714 | size = _props$size === void 0 ? 'medium' : _props$size,
|
35715 | other = _objectWithoutProperties(props, ["classes", "className", "color", "edge", "size"]);
|
35716 |
|
35717 | var icon = React.createElement("span", {
|
35718 | className: classes.thumb
|
35719 | });
|
35720 | return React.createElement("span", {
|
35721 | className: clsx(classes.root, className, {
|
35722 | 'start': classes.edgeStart,
|
35723 | 'end': classes.edgeEnd
|
35724 | }[edge], size === "small" && classes["size".concat(capitalize(size))])
|
35725 | }, React.createElement(SwitchBase$1, _extends({
|
35726 | type: "checkbox",
|
35727 | icon: icon,
|
35728 | checkedIcon: icon,
|
35729 | classes: {
|
35730 | root: clsx(classes.switchBase, classes["color".concat(capitalize(color))]),
|
35731 | input: classes.input,
|
35732 | checked: classes.checked,
|
35733 | disabled: classes.disabled
|
35734 | },
|
35735 | ref: ref
|
35736 | }, other)), React.createElement("span", {
|
35737 | className: classes.track
|
35738 | }));
|
35739 | });
|
35740 | Switch.propTypes = {
|
35741 |
|
35742 |
|
35743 |
|
35744 |
|
35745 |
|
35746 | |
35747 |
|
35748 |
|
35749 | checked: propTypes.bool,
|
35750 |
|
35751 | |
35752 |
|
35753 |
|
35754 | checkedIcon: propTypes.node,
|
35755 |
|
35756 | |
35757 |
|
35758 |
|
35759 |
|
35760 | classes: propTypes.object,
|
35761 |
|
35762 | |
35763 |
|
35764 |
|
35765 | className: propTypes.string,
|
35766 |
|
35767 | |
35768 |
|
35769 |
|
35770 | color: propTypes.oneOf(['default', 'primary', 'secondary']),
|
35771 |
|
35772 | |
35773 |
|
35774 |
|
35775 | defaultChecked: propTypes.bool,
|
35776 |
|
35777 | |
35778 |
|
35779 |
|
35780 | disabled: propTypes.bool,
|
35781 |
|
35782 | |
35783 |
|
35784 |
|
35785 | disableRipple: propTypes.bool,
|
35786 |
|
35787 | |
35788 |
|
35789 |
|
35790 |
|
35791 |
|
35792 |
|
35793 | edge: propTypes.oneOf(['end', 'start', false]),
|
35794 |
|
35795 | |
35796 |
|
35797 |
|
35798 | icon: propTypes.node,
|
35799 |
|
35800 | |
35801 |
|
35802 |
|
35803 | id: propTypes.string,
|
35804 |
|
35805 | |
35806 |
|
35807 |
|
35808 | inputProps: propTypes.object,
|
35809 |
|
35810 | |
35811 |
|
35812 |
|
35813 | inputRef: refType,
|
35814 |
|
35815 | |
35816 |
|
35817 |
|
35818 |
|
35819 |
|
35820 |
|
35821 |
|
35822 | onChange: propTypes.func,
|
35823 |
|
35824 | |
35825 |
|
35826 |
|
35827 | required: propTypes.bool,
|
35828 |
|
35829 | |
35830 |
|
35831 |
|
35832 |
|
35833 | size: propTypes.oneOf(['medium', 'small']),
|
35834 |
|
35835 | |
35836 |
|
35837 |
|
35838 |
|
35839 | value: propTypes.any
|
35840 | } ;
|
35841 | var Switch$1 = withStyles$1(styles$1A, {
|
35842 | name: 'MuiSwitch'
|
35843 | })(Switch);
|
35844 |
|
35845 | var styles$1B = function styles(theme) {
|
35846 | var _extends2;
|
35847 |
|
35848 | return {
|
35849 |
|
35850 | root: _extends({}, theme.typography.button, (_extends2 = {
|
35851 | maxWidth: 264,
|
35852 | minWidth: 72,
|
35853 | position: 'relative',
|
35854 | boxSizing: 'border-box',
|
35855 | minHeight: 48,
|
35856 | flexShrink: 0,
|
35857 | padding: '6px 12px'
|
35858 | }, _defineProperty(_extends2, theme.breakpoints.up('sm'), {
|
35859 | padding: '6px 24px'
|
35860 | }), _defineProperty(_extends2, "overflow", 'hidden'), _defineProperty(_extends2, "whiteSpace", 'normal'), _defineProperty(_extends2, "textAlign", 'center'), _defineProperty(_extends2, theme.breakpoints.up('sm'), {
|
35861 | minWidth: 160
|
35862 | }), _extends2)),
|
35863 |
|
35864 |
|
35865 | labelIcon: {
|
35866 | minHeight: 72,
|
35867 | paddingTop: 9,
|
35868 | '& $wrapper > *:first-child': {
|
35869 | marginBottom: 6
|
35870 | }
|
35871 | },
|
35872 |
|
35873 |
|
35874 | textColorInherit: {
|
35875 | color: 'inherit',
|
35876 | opacity: 0.7,
|
35877 | '&$selected': {
|
35878 | opacity: 1
|
35879 | },
|
35880 | '&$disabled': {
|
35881 | opacity: 0.5
|
35882 | }
|
35883 | },
|
35884 |
|
35885 |
|
35886 | textColorPrimary: {
|
35887 | color: theme.palette.text.secondary,
|
35888 | '&$selected': {
|
35889 | color: theme.palette.primary.main
|
35890 | },
|
35891 | '&$disabled': {
|
35892 | color: theme.palette.text.disabled
|
35893 | }
|
35894 | },
|
35895 |
|
35896 |
|
35897 | textColorSecondary: {
|
35898 | color: theme.palette.text.secondary,
|
35899 | '&$selected': {
|
35900 | color: theme.palette.secondary.main
|
35901 | },
|
35902 | '&$disabled': {
|
35903 | color: theme.palette.text.disabled
|
35904 | }
|
35905 | },
|
35906 |
|
35907 |
|
35908 | selected: {},
|
35909 |
|
35910 |
|
35911 | disabled: {},
|
35912 |
|
35913 |
|
35914 | fullWidth: {
|
35915 | flexShrink: 1,
|
35916 | flexGrow: 1,
|
35917 | flexBasis: 0,
|
35918 | maxWidth: 'none'
|
35919 | },
|
35920 |
|
35921 |
|
35922 | wrapped: {
|
35923 | fontSize: theme.typography.pxToRem(12),
|
35924 | lineHeight: 1.5
|
35925 | },
|
35926 |
|
35927 |
|
35928 | wrapper: {
|
35929 | display: 'inline-flex',
|
35930 | alignItems: 'center',
|
35931 | justifyContent: 'center',
|
35932 | width: '100%',
|
35933 | flexDirection: 'column'
|
35934 | }
|
35935 | };
|
35936 | };
|
35937 | var Tab = React.forwardRef(function Tab(props, ref) {
|
35938 | var classes = props.classes,
|
35939 | className = props.className,
|
35940 | _props$disabled = props.disabled,
|
35941 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
35942 | _props$disableFocusRi = props.disableFocusRipple,
|
35943 | disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
|
35944 | fullWidth = props.fullWidth,
|
35945 | icon = props.icon,
|
35946 | indicator = props.indicator,
|
35947 | label = props.label,
|
35948 | onChange = props.onChange,
|
35949 | onClick = props.onClick,
|
35950 | onFocus = props.onFocus,
|
35951 | selected = props.selected,
|
35952 | selectionFollowsFocus = props.selectionFollowsFocus,
|
35953 | _props$textColor = props.textColor,
|
35954 | textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,
|
35955 | value = props.value,
|
35956 | _props$wrapped = props.wrapped,
|
35957 | wrapped = _props$wrapped === void 0 ? false : _props$wrapped,
|
35958 | other = _objectWithoutProperties(props, ["classes", "className", "disabled", "disableFocusRipple", "fullWidth", "icon", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"]);
|
35959 |
|
35960 | var handleClick = function handleClick(event) {
|
35961 | if (onChange) {
|
35962 | onChange(event, value);
|
35963 | }
|
35964 |
|
35965 | if (onClick) {
|
35966 | onClick(event);
|
35967 | }
|
35968 | };
|
35969 |
|
35970 | var handleFocus = function handleFocus(event) {
|
35971 | if (selectionFollowsFocus && !selected && onChange) {
|
35972 | onChange(event, value);
|
35973 | }
|
35974 |
|
35975 | if (onFocus) {
|
35976 | onFocus(event);
|
35977 | }
|
35978 | };
|
35979 |
|
35980 | return React.createElement(ButtonBase$1, _extends({
|
35981 | focusRipple: !disableFocusRipple,
|
35982 | 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),
|
35983 | ref: ref,
|
35984 | role: "tab",
|
35985 | "aria-selected": selected,
|
35986 | disabled: disabled,
|
35987 | onClick: handleClick,
|
35988 | onFocus: handleFocus,
|
35989 | tabIndex: selected ? 0 : -1
|
35990 | }, other), React.createElement("span", {
|
35991 | className: classes.wrapper
|
35992 | }, icon, label), indicator);
|
35993 | });
|
35994 | Tab.propTypes = {
|
35995 | |
35996 |
|
35997 |
|
35998 |
|
35999 | children: unsupportedProp,
|
36000 |
|
36001 | |
36002 |
|
36003 |
|
36004 |
|
36005 | classes: propTypes.object.isRequired,
|
36006 |
|
36007 | |
36008 |
|
36009 |
|
36010 | className: propTypes.string,
|
36011 |
|
36012 | |
36013 |
|
36014 |
|
36015 | disabled: propTypes.bool,
|
36016 |
|
36017 | |
36018 |
|
36019 |
|
36020 | disableFocusRipple: propTypes.bool,
|
36021 |
|
36022 | |
36023 |
|
36024 |
|
36025 | disableRipple: propTypes.bool,
|
36026 |
|
36027 | |
36028 |
|
36029 |
|
36030 | fullWidth: propTypes.bool,
|
36031 |
|
36032 | |
36033 |
|
36034 |
|
36035 | icon: propTypes.node,
|
36036 |
|
36037 | |
36038 |
|
36039 |
|
36040 |
|
36041 |
|
36042 | indicator: propTypes.node,
|
36043 |
|
36044 | |
36045 |
|
36046 |
|
36047 | label: propTypes.node,
|
36048 |
|
36049 | |
36050 |
|
36051 |
|
36052 | onChange: propTypes.func,
|
36053 |
|
36054 | |
36055 |
|
36056 |
|
36057 | onClick: propTypes.func,
|
36058 |
|
36059 | |
36060 |
|
36061 |
|
36062 | onFocus: propTypes.func,
|
36063 |
|
36064 | |
36065 |
|
36066 |
|
36067 | selected: propTypes.bool,
|
36068 |
|
36069 | |
36070 |
|
36071 |
|
36072 | selectionFollowsFocus: propTypes.bool,
|
36073 |
|
36074 | |
36075 |
|
36076 |
|
36077 | textColor: propTypes.oneOf(['secondary', 'primary', 'inherit']),
|
36078 |
|
36079 | |
36080 |
|
36081 |
|
36082 | value: propTypes.any,
|
36083 |
|
36084 | |
36085 |
|
36086 |
|
36087 |
|
36088 | wrapped: propTypes.bool
|
36089 | } ;
|
36090 | var Tab$1 = withStyles$1(styles$1B, {
|
36091 | name: 'MuiTab'
|
36092 | })(Tab);
|
36093 |
|
36094 | |
36095 |
|
36096 |
|
36097 |
|
36098 | var TableContext = React.createContext();
|
36099 |
|
36100 | {
|
36101 | TableContext.displayName = 'TableContext';
|
36102 | }
|
36103 |
|
36104 | var styles$1C = function styles(theme) {
|
36105 | return {
|
36106 |
|
36107 | root: {
|
36108 | display: 'table',
|
36109 | width: '100%',
|
36110 | borderCollapse: 'collapse',
|
36111 | borderSpacing: 0,
|
36112 | '& caption': _extends({}, theme.typography.body2, {
|
36113 | padding: theme.spacing(2),
|
36114 | color: theme.palette.text.secondary,
|
36115 | textAlign: 'left',
|
36116 | captionSide: 'bottom'
|
36117 | })
|
36118 | },
|
36119 |
|
36120 |
|
36121 | stickyHeader: {
|
36122 | borderCollapse: 'separate'
|
36123 | }
|
36124 | };
|
36125 | };
|
36126 | var defaultComponent = 'table';
|
36127 | var Table = React.forwardRef(function Table(props, ref) {
|
36128 | var classes = props.classes,
|
36129 | className = props.className,
|
36130 | _props$component = props.component,
|
36131 | Component = _props$component === void 0 ? defaultComponent : _props$component,
|
36132 | _props$padding = props.padding,
|
36133 | padding = _props$padding === void 0 ? 'normal' : _props$padding,
|
36134 | _props$size = props.size,
|
36135 | size = _props$size === void 0 ? 'medium' : _props$size,
|
36136 | _props$stickyHeader = props.stickyHeader,
|
36137 | stickyHeader = _props$stickyHeader === void 0 ? false : _props$stickyHeader,
|
36138 | other = _objectWithoutProperties(props, ["classes", "className", "component", "padding", "size", "stickyHeader"]);
|
36139 |
|
36140 | var table = React.useMemo(function () {
|
36141 | return {
|
36142 | padding: padding,
|
36143 | size: size,
|
36144 | stickyHeader: stickyHeader
|
36145 | };
|
36146 | }, [padding, size, stickyHeader]);
|
36147 | return React.createElement(TableContext.Provider, {
|
36148 | value: table
|
36149 | }, React.createElement(Component, _extends({
|
36150 | role: Component === defaultComponent ? null : 'table',
|
36151 | ref: ref,
|
36152 | className: clsx(classes.root, className, stickyHeader && classes.stickyHeader)
|
36153 | }, other)));
|
36154 | });
|
36155 | Table.propTypes = {
|
36156 | |
36157 |
|
36158 |
|
36159 | children: propTypes.node.isRequired,
|
36160 |
|
36161 | |
36162 |
|
36163 |
|
36164 |
|
36165 | classes: propTypes.object.isRequired,
|
36166 |
|
36167 | |
36168 |
|
36169 |
|
36170 | className: propTypes.string,
|
36171 |
|
36172 | |
36173 |
|
36174 |
|
36175 |
|
36176 | component: propTypes
|
36177 |
|
36178 | .elementType,
|
36179 |
|
36180 | |
36181 |
|
36182 |
|
36183 |
|
36184 | padding: chainPropTypes(propTypes.oneOf(['normal', 'checkbox', 'none', 'default']), function (props) {
|
36185 | if (props.padding === 'default') {
|
36186 | return new Error('Material-UI: padding="default" was renamed to padding="normal" for consistency.');
|
36187 | }
|
36188 |
|
36189 | return null;
|
36190 | }),
|
36191 |
|
36192 | |
36193 |
|
36194 |
|
36195 | size: propTypes.oneOf(['small', 'medium']),
|
36196 |
|
36197 | |
36198 |
|
36199 |
|
36200 |
|
36201 |
|
36202 | stickyHeader: propTypes.bool
|
36203 | } ;
|
36204 | var Table$1 = withStyles$1(styles$1C, {
|
36205 | name: 'MuiTable'
|
36206 | })(Table);
|
36207 |
|
36208 | |
36209 |
|
36210 |
|
36211 |
|
36212 | var Tablelvl2Context = React.createContext();
|
36213 |
|
36214 | {
|
36215 | Tablelvl2Context.displayName = 'Tablelvl2Context';
|
36216 | }
|
36217 |
|
36218 | var styles$1D = {
|
36219 |
|
36220 | root: {
|
36221 | display: 'table-row-group'
|
36222 | }
|
36223 | };
|
36224 | var tablelvl2 = {
|
36225 | variant: 'body'
|
36226 | };
|
36227 | var defaultComponent$1 = 'tbody';
|
36228 | var TableBody = React.forwardRef(function TableBody(props, ref) {
|
36229 | var classes = props.classes,
|
36230 | className = props.className,
|
36231 | _props$component = props.component,
|
36232 | Component = _props$component === void 0 ? defaultComponent$1 : _props$component,
|
36233 | other = _objectWithoutProperties(props, ["classes", "className", "component"]);
|
36234 |
|
36235 | return React.createElement(Tablelvl2Context.Provider, {
|
36236 | value: tablelvl2
|
36237 | }, React.createElement(Component, _extends({
|
36238 | className: clsx(classes.root, className),
|
36239 | ref: ref,
|
36240 | role: Component === defaultComponent$1 ? null : 'rowgroup'
|
36241 | }, other)));
|
36242 | });
|
36243 | TableBody.propTypes = {
|
36244 | |
36245 |
|
36246 |
|
36247 | children: propTypes.node,
|
36248 |
|
36249 | |
36250 |
|
36251 |
|
36252 |
|
36253 | classes: propTypes.object.isRequired,
|
36254 |
|
36255 | |
36256 |
|
36257 |
|
36258 | className: propTypes.string,
|
36259 |
|
36260 | |
36261 |
|
36262 |
|
36263 |
|
36264 | component: propTypes
|
36265 |
|
36266 | .elementType
|
36267 | } ;
|
36268 | var TableBody$1 = withStyles$1(styles$1D, {
|
36269 | name: 'MuiTableBody'
|
36270 | })(TableBody);
|
36271 |
|
36272 | var styles$1E = function styles(theme) {
|
36273 | return {
|
36274 |
|
36275 | root: _extends({}, theme.typography.body2, {
|
36276 | display: 'table-cell',
|
36277 | verticalAlign: 'inherit',
|
36278 |
|
36279 |
|
36280 | borderBottom: "1px solid\n ".concat(theme.palette.type === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)),
|
36281 | textAlign: 'left',
|
36282 | padding: 16
|
36283 | }),
|
36284 |
|
36285 |
|
36286 | head: {
|
36287 | color: theme.palette.text.primary,
|
36288 | lineHeight: theme.typography.pxToRem(24),
|
36289 | fontWeight: theme.typography.fontWeightMedium
|
36290 | },
|
36291 |
|
36292 |
|
36293 | body: {
|
36294 | color: theme.palette.text.primary
|
36295 | },
|
36296 |
|
36297 |
|
36298 | footer: {
|
36299 | color: theme.palette.text.secondary,
|
36300 | lineHeight: theme.typography.pxToRem(21),
|
36301 | fontSize: theme.typography.pxToRem(12)
|
36302 | },
|
36303 |
|
36304 |
|
36305 | sizeSmall: {
|
36306 | padding: '6px 24px 6px 16px',
|
36307 | '&:last-child': {
|
36308 | paddingRight: 16
|
36309 | },
|
36310 | '&$paddingCheckbox': {
|
36311 | width: 24,
|
36312 |
|
36313 | padding: '0 12px 0 16px',
|
36314 | '&:last-child': {
|
36315 | paddingLeft: 12,
|
36316 | paddingRight: 16
|
36317 | },
|
36318 | '& > *': {
|
36319 | padding: 0
|
36320 | }
|
36321 | }
|
36322 | },
|
36323 |
|
36324 |
|
36325 | paddingCheckbox: {
|
36326 | width: 48,
|
36327 |
|
36328 | padding: '0 0 0 4px',
|
36329 | '&:last-child': {
|
36330 | paddingLeft: 0,
|
36331 | paddingRight: 4
|
36332 | }
|
36333 | },
|
36334 |
|
36335 |
|
36336 | paddingNone: {
|
36337 | padding: 0,
|
36338 | '&:last-child': {
|
36339 | padding: 0
|
36340 | }
|
36341 | },
|
36342 |
|
36343 |
|
36344 | alignLeft: {
|
36345 | textAlign: 'left'
|
36346 | },
|
36347 |
|
36348 |
|
36349 | alignCenter: {
|
36350 | textAlign: 'center'
|
36351 | },
|
36352 |
|
36353 |
|
36354 | alignRight: {
|
36355 | textAlign: 'right',
|
36356 | flexDirection: 'row-reverse'
|
36357 | },
|
36358 |
|
36359 |
|
36360 | alignJustify: {
|
36361 | textAlign: 'justify'
|
36362 | },
|
36363 |
|
36364 |
|
36365 | stickyHeader: {
|
36366 | position: 'sticky',
|
36367 | top: 0,
|
36368 | left: 0,
|
36369 | zIndex: 2,
|
36370 | backgroundColor: theme.palette.background.default
|
36371 | }
|
36372 | };
|
36373 | };
|
36374 | |
36375 |
|
36376 |
|
36377 |
|
36378 |
|
36379 | var TableCell = React.forwardRef(function TableCell(props, ref) {
|
36380 | var _props$align = props.align,
|
36381 | align = _props$align === void 0 ? 'inherit' : _props$align,
|
36382 | classes = props.classes,
|
36383 | className = props.className,
|
36384 | component = props.component,
|
36385 | paddingProp = props.padding,
|
36386 | scopeProp = props.scope,
|
36387 | sizeProp = props.size,
|
36388 | sortDirection = props.sortDirection,
|
36389 | variantProp = props.variant,
|
36390 | other = _objectWithoutProperties(props, ["align", "classes", "className", "component", "padding", "scope", "size", "sortDirection", "variant"]);
|
36391 |
|
36392 | var table = React.useContext(TableContext);
|
36393 | var tablelvl2 = React.useContext(Tablelvl2Context);
|
36394 | var isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
|
36395 | var role;
|
36396 | var Component;
|
36397 |
|
36398 | if (component) {
|
36399 | Component = component;
|
36400 | role = isHeadCell ? 'columnheader' : 'cell';
|
36401 | } else {
|
36402 | Component = isHeadCell ? 'th' : 'td';
|
36403 | }
|
36404 |
|
36405 | var scope = scopeProp;
|
36406 |
|
36407 | if (!scope && isHeadCell) {
|
36408 | scope = 'col';
|
36409 | }
|
36410 |
|
36411 | var padding = paddingProp || (table && table.padding ? table.padding : 'normal');
|
36412 | var size = sizeProp || (table && table.size ? table.size : 'medium');
|
36413 | var variant = variantProp || tablelvl2 && tablelvl2.variant;
|
36414 | var ariaSort = null;
|
36415 |
|
36416 | if (sortDirection) {
|
36417 | ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
|
36418 | }
|
36419 |
|
36420 | return React.createElement(Component, _extends({
|
36421 | ref: ref,
|
36422 | className: clsx(classes.root, classes[variant], className, align !== 'inherit' && classes["align".concat(capitalize(align))], padding !== 'normal' && classes["padding".concat(capitalize(padding))], size !== 'medium' && classes["size".concat(capitalize(size))], variant === 'head' && table && table.stickyHeader && classes.stickyHeader),
|
36423 | "aria-sort": ariaSort,
|
36424 | role: role,
|
36425 | scope: scope
|
36426 | }, other));
|
36427 | });
|
36428 | TableCell.propTypes = {
|
36429 | |
36430 |
|
36431 |
|
36432 |
|
36433 |
|
36434 |
|
36435 | align: propTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']),
|
36436 |
|
36437 | |
36438 |
|
36439 |
|
36440 | children: propTypes.node,
|
36441 |
|
36442 | |
36443 |
|
36444 |
|
36445 |
|
36446 | classes: propTypes.object,
|
36447 |
|
36448 | |
36449 |
|
36450 |
|
36451 | className: propTypes.string,
|
36452 |
|
36453 | |
36454 |
|
36455 |
|
36456 |
|
36457 | component: propTypes
|
36458 |
|
36459 | .elementType,
|
36460 |
|
36461 | |
36462 |
|
36463 |
|
36464 |
|
36465 |
|
36466 | padding: chainPropTypes(propTypes.oneOf(['normal', 'checkbox', 'none', 'default']), function (props) {
|
36467 | if (props.padding === 'default') {
|
36468 | return new Error('Material-UI: padding="default" was renamed to padding="normal" for consistency.');
|
36469 | }
|
36470 |
|
36471 | return null;
|
36472 | }),
|
36473 |
|
36474 | |
36475 |
|
36476 |
|
36477 | scope: propTypes.string,
|
36478 |
|
36479 | |
36480 |
|
36481 |
|
36482 |
|
36483 | size: propTypes.oneOf(['medium', 'small']),
|
36484 |
|
36485 | |
36486 |
|
36487 |
|
36488 | sortDirection: propTypes.oneOf(['asc', 'desc', false]),
|
36489 |
|
36490 | |
36491 |
|
36492 |
|
36493 |
|
36494 | variant: propTypes.oneOf(['body', 'footer', 'head'])
|
36495 | } ;
|
36496 | var TableCell$1 = withStyles$1(styles$1E, {
|
36497 | name: 'MuiTableCell'
|
36498 | })(TableCell);
|
36499 |
|
36500 | var styles$1F = {
|
36501 |
|
36502 | root: {
|
36503 | width: '100%',
|
36504 | overflowX: 'auto'
|
36505 | }
|
36506 | };
|
36507 | var TableContainer = React.forwardRef(function TableContainer(props, ref) {
|
36508 | var classes = props.classes,
|
36509 | className = props.className,
|
36510 | _props$component = props.component,
|
36511 | Component = _props$component === void 0 ? 'div' : _props$component,
|
36512 | other = _objectWithoutProperties(props, ["classes", "className", "component"]);
|
36513 |
|
36514 | return React.createElement(Component, _extends({
|
36515 | ref: ref,
|
36516 | className: clsx(classes.root, className)
|
36517 | }, other));
|
36518 | });
|
36519 | TableContainer.propTypes = {
|
36520 | |
36521 |
|
36522 |
|
36523 | children: propTypes.node,
|
36524 |
|
36525 | |
36526 |
|
36527 |
|
36528 |
|
36529 | classes: propTypes.object.isRequired,
|
36530 |
|
36531 | |
36532 |
|
36533 |
|
36534 | className: propTypes.string,
|
36535 |
|
36536 | |
36537 |
|
36538 |
|
36539 |
|
36540 | component: propTypes
|
36541 |
|
36542 | .elementType
|
36543 | } ;
|
36544 | var TableContainer$1 = withStyles$1(styles$1F, {
|
36545 | name: 'MuiTableContainer'
|
36546 | })(TableContainer);
|
36547 |
|
36548 | var styles$1G = {
|
36549 |
|
36550 | root: {
|
36551 | display: 'table-footer-group'
|
36552 | }
|
36553 | };
|
36554 | var tablelvl2$1 = {
|
36555 | variant: 'footer'
|
36556 | };
|
36557 | var defaultComponent$2 = 'tfoot';
|
36558 | var TableFooter = React.forwardRef(function TableFooter(props, ref) {
|
36559 | var classes = props.classes,
|
36560 | className = props.className,
|
36561 | _props$component = props.component,
|
36562 | Component = _props$component === void 0 ? defaultComponent$2 : _props$component,
|
36563 | other = _objectWithoutProperties(props, ["classes", "className", "component"]);
|
36564 |
|
36565 | return React.createElement(Tablelvl2Context.Provider, {
|
36566 | value: tablelvl2$1
|
36567 | }, React.createElement(Component, _extends({
|
36568 | className: clsx(classes.root, className),
|
36569 | ref: ref,
|
36570 | role: Component === defaultComponent$2 ? null : 'rowgroup'
|
36571 | }, other)));
|
36572 | });
|
36573 | TableFooter.propTypes = {
|
36574 | |
36575 |
|
36576 |
|
36577 | children: propTypes.node,
|
36578 |
|
36579 | |
36580 |
|
36581 |
|
36582 |
|
36583 | classes: propTypes.object.isRequired,
|
36584 |
|
36585 | |
36586 |
|
36587 |
|
36588 | className: propTypes.string,
|
36589 |
|
36590 | |
36591 |
|
36592 |
|
36593 |
|
36594 | component: propTypes
|
36595 |
|
36596 | .elementType
|
36597 | } ;
|
36598 | var TableFooter$1 = withStyles$1(styles$1G, {
|
36599 | name: 'MuiTableFooter'
|
36600 | })(TableFooter);
|
36601 |
|
36602 | var styles$1H = {
|
36603 |
|
36604 | root: {
|
36605 | display: 'table-header-group'
|
36606 | }
|
36607 | };
|
36608 | var tablelvl2$2 = {
|
36609 | variant: 'head'
|
36610 | };
|
36611 | var defaultComponent$3 = 'thead';
|
36612 | var TableHead = React.forwardRef(function TableHead(props, ref) {
|
36613 | var classes = props.classes,
|
36614 | className = props.className,
|
36615 | _props$component = props.component,
|
36616 | Component = _props$component === void 0 ? defaultComponent$3 : _props$component,
|
36617 | other = _objectWithoutProperties(props, ["classes", "className", "component"]);
|
36618 |
|
36619 | return React.createElement(Tablelvl2Context.Provider, {
|
36620 | value: tablelvl2$2
|
36621 | }, React.createElement(Component, _extends({
|
36622 | className: clsx(classes.root, className),
|
36623 | ref: ref,
|
36624 | role: Component === defaultComponent$3 ? null : 'rowgroup'
|
36625 | }, other)));
|
36626 | });
|
36627 | TableHead.propTypes = {
|
36628 | |
36629 |
|
36630 |
|
36631 | children: propTypes.node,
|
36632 |
|
36633 | |
36634 |
|
36635 |
|
36636 |
|
36637 | classes: propTypes.object.isRequired,
|
36638 |
|
36639 | |
36640 |
|
36641 |
|
36642 | className: propTypes.string,
|
36643 |
|
36644 | |
36645 |
|
36646 |
|
36647 |
|
36648 | component: propTypes
|
36649 |
|
36650 | .elementType
|
36651 | } ;
|
36652 | var TableHead$1 = withStyles$1(styles$1H, {
|
36653 | name: 'MuiTableHead'
|
36654 | })(TableHead);
|
36655 |
|
36656 | var styles$1I = function styles(theme) {
|
36657 | return {
|
36658 |
|
36659 | root: {
|
36660 | position: 'relative',
|
36661 | display: 'flex',
|
36662 | alignItems: 'center'
|
36663 | },
|
36664 |
|
36665 |
|
36666 | gutters: _defineProperty({
|
36667 | paddingLeft: theme.spacing(2),
|
36668 | paddingRight: theme.spacing(2)
|
36669 | }, theme.breakpoints.up('sm'), {
|
36670 | paddingLeft: theme.spacing(3),
|
36671 | paddingRight: theme.spacing(3)
|
36672 | }),
|
36673 |
|
36674 |
|
36675 | regular: theme.mixins.toolbar,
|
36676 |
|
36677 |
|
36678 | dense: {
|
36679 | minHeight: 48
|
36680 | }
|
36681 | };
|
36682 | };
|
36683 | var Toolbar = React.forwardRef(function Toolbar(props, ref) {
|
36684 | var classes = props.classes,
|
36685 | className = props.className,
|
36686 | _props$component = props.component,
|
36687 | Component = _props$component === void 0 ? 'div' : _props$component,
|
36688 | _props$disableGutters = props.disableGutters,
|
36689 | disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
|
36690 | _props$variant = props.variant,
|
36691 | variant = _props$variant === void 0 ? 'regular' : _props$variant,
|
36692 | other = _objectWithoutProperties(props, ["classes", "className", "component", "disableGutters", "variant"]);
|
36693 |
|
36694 | return React.createElement(Component, _extends({
|
36695 | className: clsx(classes.root, classes[variant], className, !disableGutters && classes.gutters),
|
36696 | ref: ref
|
36697 | }, other));
|
36698 | });
|
36699 | Toolbar.propTypes = {
|
36700 | |
36701 |
|
36702 |
|
36703 | children: propTypes.node,
|
36704 |
|
36705 | |
36706 |
|
36707 |
|
36708 |
|
36709 | classes: propTypes.object.isRequired,
|
36710 |
|
36711 | |
36712 |
|
36713 |
|
36714 | className: propTypes.string,
|
36715 |
|
36716 | |
36717 |
|
36718 |
|
36719 |
|
36720 | component: propTypes
|
36721 |
|
36722 | .elementType,
|
36723 |
|
36724 | |
36725 |
|
36726 |
|
36727 | disableGutters: propTypes.bool,
|
36728 |
|
36729 | |
36730 |
|
36731 |
|
36732 | variant: propTypes.oneOf(['regular', 'dense'])
|
36733 | } ;
|
36734 | var Toolbar$1 = withStyles$1(styles$1I, {
|
36735 | name: 'MuiToolbar'
|
36736 | })(Toolbar);
|
36737 |
|
36738 | |
36739 |
|
36740 |
|
36741 |
|
36742 | var KeyboardArrowLeft = createSvgIcon( React.createElement("path", {
|
36743 | d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
|
36744 | }), 'KeyboardArrowLeft');
|
36745 |
|
36746 | |
36747 |
|
36748 |
|
36749 |
|
36750 | var KeyboardArrowRight = createSvgIcon( React.createElement("path", {
|
36751 | d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
|
36752 | }), 'KeyboardArrowRight');
|
36753 |
|
36754 | |
36755 |
|
36756 |
|
36757 |
|
36758 | var _ref$2 = React.createElement(KeyboardArrowRight, null);
|
36759 |
|
36760 | var _ref2$1 = React.createElement(KeyboardArrowLeft, null);
|
36761 |
|
36762 | var _ref3 = React.createElement(KeyboardArrowLeft, null);
|
36763 |
|
36764 | var _ref4 = React.createElement(KeyboardArrowRight, null);
|
36765 |
|
36766 | var TablePaginationActions = React.forwardRef(function TablePaginationActions(props, ref) {
|
36767 | var backIconButtonProps = props.backIconButtonProps,
|
36768 | count = props.count,
|
36769 | nextIconButtonProps = props.nextIconButtonProps,
|
36770 | onPageChange = props.onPageChange,
|
36771 | page = props.page,
|
36772 | rowsPerPage = props.rowsPerPage,
|
36773 | other = _objectWithoutProperties(props, ["backIconButtonProps", "count", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage"]);
|
36774 |
|
36775 | var theme = useTheme$1();
|
36776 |
|
36777 | var handleBackButtonClick = function handleBackButtonClick(event) {
|
36778 | onPageChange(event, page - 1);
|
36779 | };
|
36780 |
|
36781 | var handleNextButtonClick = function handleNextButtonClick(event) {
|
36782 | onPageChange(event, page + 1);
|
36783 | };
|
36784 |
|
36785 | return React.createElement("div", _extends({
|
36786 | ref: ref
|
36787 | }, other), React.createElement(IconButton$1, _extends({
|
36788 | onClick: handleBackButtonClick,
|
36789 | disabled: page === 0,
|
36790 | color: "inherit"
|
36791 | }, backIconButtonProps), theme.direction === 'rtl' ? _ref$2 : _ref2$1), React.createElement(IconButton$1, _extends({
|
36792 | onClick: handleNextButtonClick,
|
36793 | disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
|
36794 | color: "inherit"
|
36795 | }, nextIconButtonProps), theme.direction === 'rtl' ? _ref3 : _ref4));
|
36796 | });
|
36797 | TablePaginationActions.propTypes = {
|
36798 | |
36799 |
|
36800 |
|
36801 | backIconButtonProps: propTypes.object,
|
36802 |
|
36803 | |
36804 |
|
36805 |
|
36806 | count: propTypes.number.isRequired,
|
36807 |
|
36808 | |
36809 |
|
36810 |
|
36811 | nextIconButtonProps: propTypes.object,
|
36812 |
|
36813 | |
36814 |
|
36815 |
|
36816 |
|
36817 |
|
36818 |
|
36819 | onPageChange: propTypes.func.isRequired,
|
36820 |
|
36821 | |
36822 |
|
36823 |
|
36824 | page: propTypes.number.isRequired,
|
36825 |
|
36826 | |
36827 |
|
36828 |
|
36829 | rowsPerPage: propTypes.number.isRequired
|
36830 | } ;
|
36831 |
|
36832 | var styles$1J = function styles(theme) {
|
36833 | return {
|
36834 |
|
36835 | root: {
|
36836 | color: theme.palette.text.primary,
|
36837 | fontSize: theme.typography.pxToRem(14),
|
36838 | overflow: 'auto',
|
36839 |
|
36840 | '&:last-child': {
|
36841 | padding: 0
|
36842 | }
|
36843 | },
|
36844 |
|
36845 |
|
36846 | toolbar: {
|
36847 | minHeight: 52,
|
36848 | paddingRight: 2
|
36849 | },
|
36850 |
|
36851 |
|
36852 | spacer: {
|
36853 | flex: '1 1 100%'
|
36854 | },
|
36855 |
|
36856 |
|
36857 | caption: {
|
36858 | flexShrink: 0
|
36859 | },
|
36860 |
|
36861 |
|
36862 |
|
36863 | selectRoot: {
|
36864 | marginRight: 32,
|
36865 | marginLeft: 8
|
36866 | },
|
36867 |
|
36868 |
|
36869 | select: {
|
36870 | paddingLeft: 8,
|
36871 | paddingRight: 24,
|
36872 | textAlign: 'right',
|
36873 | textAlignLast: 'right'
|
36874 |
|
36875 | },
|
36876 |
|
36877 |
|
36878 |
|
36879 | selectIcon: {},
|
36880 |
|
36881 |
|
36882 | input: {
|
36883 | color: 'inherit',
|
36884 | fontSize: 'inherit',
|
36885 | flexShrink: 0
|
36886 | },
|
36887 |
|
36888 |
|
36889 | menuItem: {},
|
36890 |
|
36891 |
|
36892 | actions: {
|
36893 | flexShrink: 0,
|
36894 | marginLeft: 20
|
36895 | }
|
36896 | };
|
36897 | };
|
36898 |
|
36899 | var defaultLabelDisplayedRows = function defaultLabelDisplayedRows(_ref) {
|
36900 | var from = _ref.from,
|
36901 | to = _ref.to,
|
36902 | count = _ref.count;
|
36903 | return "".concat(from, "-").concat(to, " of ").concat(count !== -1 ? count : "more than ".concat(to));
|
36904 | };
|
36905 |
|
36906 | var defaultRowsPerPageOptions = [10, 25, 50, 100];
|
36907 | |
36908 |
|
36909 |
|
36910 |
|
36911 | var TablePagination = React.forwardRef(function TablePagination(props, ref) {
|
36912 | var _props$ActionsCompone = props.ActionsComponent,
|
36913 | ActionsComponent = _props$ActionsCompone === void 0 ? TablePaginationActions : _props$ActionsCompone,
|
36914 | backIconButtonProps = props.backIconButtonProps,
|
36915 | _props$backIconButton = props.backIconButtonText,
|
36916 | backIconButtonText = _props$backIconButton === void 0 ? 'Previous page' : _props$backIconButton,
|
36917 | classes = props.classes,
|
36918 | className = props.className,
|
36919 | colSpanProp = props.colSpan,
|
36920 | _props$component = props.component,
|
36921 | Component = _props$component === void 0 ? TableCell$1 : _props$component,
|
36922 | count = props.count,
|
36923 | _props$labelDisplayed = props.labelDisplayedRows,
|
36924 | labelDisplayedRows = _props$labelDisplayed === void 0 ? defaultLabelDisplayedRows : _props$labelDisplayed,
|
36925 | _props$labelRowsPerPa = props.labelRowsPerPage,
|
36926 | labelRowsPerPage = _props$labelRowsPerPa === void 0 ? 'Rows per page:' : _props$labelRowsPerPa,
|
36927 | nextIconButtonProps = props.nextIconButtonProps,
|
36928 | _props$nextIconButton = props.nextIconButtonText,
|
36929 | nextIconButtonText = _props$nextIconButton === void 0 ? 'Next page' : _props$nextIconButton,
|
36930 | onChangePageProp = props.onChangePage,
|
36931 | onPageChangeProp = props.onPageChange,
|
36932 | onChangeRowsPerPageProp = props.onChangeRowsPerPage,
|
36933 | onRowsPerPageChangeProp = props.onRowsPerPageChange,
|
36934 | page = props.page,
|
36935 | rowsPerPage = props.rowsPerPage,
|
36936 | _props$rowsPerPageOpt = props.rowsPerPageOptions,
|
36937 | rowsPerPageOptions = _props$rowsPerPageOpt === void 0 ? defaultRowsPerPageOptions : _props$rowsPerPageOpt,
|
36938 | _props$SelectProps = props.SelectProps,
|
36939 | SelectProps = _props$SelectProps === void 0 ? {} : _props$SelectProps,
|
36940 | other = _objectWithoutProperties(props, ["ActionsComponent", "backIconButtonProps", "backIconButtonText", "classes", "className", "colSpan", "component", "count", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "nextIconButtonText", "onChangePage", "onPageChange", "onChangeRowsPerPage", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps"]);
|
36941 |
|
36942 | var onChangePage = onChangePageProp || onPageChangeProp;
|
36943 | var onChangeRowsPerPage = onChangeRowsPerPageProp || onRowsPerPageChangeProp;
|
36944 | var colSpan;
|
36945 |
|
36946 | if (Component === TableCell$1 || Component === 'td') {
|
36947 | colSpan = colSpanProp || 1000;
|
36948 | }
|
36949 |
|
36950 | var selectId = useId();
|
36951 | var labelId = useId();
|
36952 | var MenuItemComponent = SelectProps.native ? 'option' : MenuItem$1;
|
36953 | return React.createElement(Component, _extends({
|
36954 | className: clsx(classes.root, className),
|
36955 | colSpan: colSpan,
|
36956 | ref: ref
|
36957 | }, other), React.createElement(Toolbar$1, {
|
36958 | className: classes.toolbar
|
36959 | }, React.createElement("div", {
|
36960 | className: classes.spacer
|
36961 | }), rowsPerPageOptions.length > 1 && React.createElement(Typography$1, {
|
36962 | color: "inherit",
|
36963 | variant: "body2",
|
36964 | className: classes.caption,
|
36965 | id: labelId
|
36966 | }, labelRowsPerPage), rowsPerPageOptions.length > 1 && React.createElement(Select$1, _extends({
|
36967 | classes: {
|
36968 | select: classes.select,
|
36969 | icon: classes.selectIcon
|
36970 | },
|
36971 | input: React.createElement(InputBase$1, {
|
36972 | className: clsx(classes.input, classes.selectRoot)
|
36973 | }),
|
36974 | value: rowsPerPage,
|
36975 | onChange: onChangeRowsPerPage,
|
36976 | id: selectId,
|
36977 | labelId: labelId
|
36978 | }, SelectProps), rowsPerPageOptions.map(function (rowsPerPageOption) {
|
36979 | return React.createElement(MenuItemComponent, {
|
36980 | className: classes.menuItem,
|
36981 | key: rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption,
|
36982 | value: rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption
|
36983 | }, rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption);
|
36984 | })), React.createElement(Typography$1, {
|
36985 | color: "inherit",
|
36986 | variant: "body2",
|
36987 | className: classes.caption
|
36988 | }, labelDisplayedRows({
|
36989 | from: count === 0 ? 0 : page * rowsPerPage + 1,
|
36990 | to: count !== -1 ? Math.min(count, (page + 1) * rowsPerPage) : (page + 1) * rowsPerPage,
|
36991 | count: count === -1 ? -1 : count,
|
36992 | page: page
|
36993 | })), React.createElement(ActionsComponent, {
|
36994 | className: classes.actions,
|
36995 | backIconButtonProps: _extends({
|
36996 | title: backIconButtonText,
|
36997 | 'aria-label': backIconButtonText
|
36998 | }, backIconButtonProps),
|
36999 | count: count,
|
37000 | nextIconButtonProps: _extends({
|
37001 | title: nextIconButtonText,
|
37002 | 'aria-label': nextIconButtonText
|
37003 | }, nextIconButtonProps),
|
37004 | onPageChange: onChangePage,
|
37005 | page: page,
|
37006 | rowsPerPage: rowsPerPage
|
37007 | })));
|
37008 | });
|
37009 | TablePagination.propTypes = {
|
37010 | |
37011 |
|
37012 |
|
37013 |
|
37014 | ActionsComponent: propTypes.elementType,
|
37015 |
|
37016 | |
37017 |
|
37018 |
|
37019 | backIconButtonProps: propTypes.object,
|
37020 |
|
37021 | |
37022 |
|
37023 |
|
37024 |
|
37025 |
|
37026 | backIconButtonText: propTypes.string,
|
37027 |
|
37028 | |
37029 |
|
37030 |
|
37031 |
|
37032 | classes: propTypes.object.isRequired,
|
37033 |
|
37034 | |
37035 |
|
37036 |
|
37037 | className: propTypes.string,
|
37038 |
|
37039 | |
37040 |
|
37041 |
|
37042 | colSpan: propTypes.number,
|
37043 |
|
37044 | |
37045 |
|
37046 |
|
37047 |
|
37048 | component: propTypes
|
37049 |
|
37050 | .elementType,
|
37051 |
|
37052 | |
37053 |
|
37054 |
|
37055 |
|
37056 |
|
37057 | count: propTypes.number.isRequired,
|
37058 |
|
37059 | |
37060 |
|
37061 |
|
37062 |
|
37063 |
|
37064 |
|
37065 | labelDisplayedRows: propTypes.func,
|
37066 |
|
37067 | |
37068 |
|
37069 |
|
37070 |
|
37071 |
|
37072 | labelRowsPerPage: propTypes.node,
|
37073 |
|
37074 | |
37075 |
|
37076 |
|
37077 | nextIconButtonProps: propTypes.object,
|
37078 |
|
37079 | |
37080 |
|
37081 |
|
37082 |
|
37083 |
|
37084 | nextIconButtonText: propTypes.string,
|
37085 |
|
37086 | |
37087 |
|
37088 |
|
37089 |
|
37090 |
|
37091 |
|
37092 |
|
37093 | onChangePage: deprecatedPropType(propTypes.func, 'Use the `onPageChange` prop instead.'),
|
37094 |
|
37095 | |
37096 |
|
37097 |
|
37098 |
|
37099 |
|
37100 |
|
37101 | onChangeRowsPerPage: deprecatedPropType(propTypes.func, 'Use the `onRowsPerPageChange` prop instead.'),
|
37102 |
|
37103 | |
37104 |
|
37105 |
|
37106 |
|
37107 |
|
37108 |
|
37109 | onPageChange: propTypes.func.isRequired,
|
37110 |
|
37111 | |
37112 |
|
37113 |
|
37114 |
|
37115 |
|
37116 | onRowsPerPageChange: propTypes.func,
|
37117 |
|
37118 | |
37119 |
|
37120 |
|
37121 | page: chainPropTypes(propTypes.number.isRequired, function (props) {
|
37122 | var count = props.count,
|
37123 | page = props.page,
|
37124 | rowsPerPage = props.rowsPerPage;
|
37125 |
|
37126 | if (count === -1) {
|
37127 | return null;
|
37128 | }
|
37129 |
|
37130 | var newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
|
37131 |
|
37132 | if (page < 0 || page > newLastPage) {
|
37133 | return new Error('Material-UI: The page prop of a TablePagination is out of range ' + "(0 to ".concat(newLastPage, ", but page is ").concat(page, ")."));
|
37134 | }
|
37135 |
|
37136 | return null;
|
37137 | }),
|
37138 |
|
37139 | |
37140 |
|
37141 |
|
37142 | rowsPerPage: propTypes.number.isRequired,
|
37143 |
|
37144 | |
37145 |
|
37146 |
|
37147 |
|
37148 | rowsPerPageOptions: propTypes.array,
|
37149 |
|
37150 | |
37151 |
|
37152 |
|
37153 | SelectProps: propTypes.object
|
37154 | } ;
|
37155 | var TablePagination$1 = withStyles$1(styles$1J, {
|
37156 | name: 'MuiTablePagination'
|
37157 | })(TablePagination);
|
37158 |
|
37159 | var styles$1K = function styles(theme) {
|
37160 | return {
|
37161 |
|
37162 | root: {
|
37163 | color: 'inherit',
|
37164 | display: 'table-row',
|
37165 | verticalAlign: 'middle',
|
37166 |
|
37167 | outline: 0,
|
37168 | '&$hover:hover': {
|
37169 | backgroundColor: theme.palette.action.hover
|
37170 | },
|
37171 | '&$selected, &$selected:hover': {
|
37172 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity)
|
37173 | }
|
37174 | },
|
37175 |
|
37176 |
|
37177 | selected: {},
|
37178 |
|
37179 |
|
37180 | hover: {},
|
37181 |
|
37182 |
|
37183 | head: {},
|
37184 |
|
37185 |
|
37186 | footer: {}
|
37187 | };
|
37188 | };
|
37189 | var defaultComponent$4 = 'tr';
|
37190 | |
37191 |
|
37192 |
|
37193 |
|
37194 |
|
37195 | var TableRow = React.forwardRef(function TableRow(props, ref) {
|
37196 | var classes = props.classes,
|
37197 | className = props.className,
|
37198 | _props$component = props.component,
|
37199 | Component = _props$component === void 0 ? defaultComponent$4 : _props$component,
|
37200 | _props$hover = props.hover,
|
37201 | hover = _props$hover === void 0 ? false : _props$hover,
|
37202 | _props$selected = props.selected,
|
37203 | selected = _props$selected === void 0 ? false : _props$selected,
|
37204 | other = _objectWithoutProperties(props, ["classes", "className", "component", "hover", "selected"]);
|
37205 |
|
37206 | var tablelvl2 = React.useContext(Tablelvl2Context);
|
37207 | return React.createElement(Component, _extends({
|
37208 | ref: ref,
|
37209 | className: clsx(classes.root, className, tablelvl2 && {
|
37210 | 'head': classes.head,
|
37211 | 'footer': classes.footer
|
37212 | }[tablelvl2.variant], hover && classes.hover, selected && classes.selected),
|
37213 | role: Component === defaultComponent$4 ? null : 'row'
|
37214 | }, other));
|
37215 | });
|
37216 | TableRow.propTypes = {
|
37217 | |
37218 |
|
37219 |
|
37220 | children: propTypes.node,
|
37221 |
|
37222 | |
37223 |
|
37224 |
|
37225 |
|
37226 | classes: propTypes.object.isRequired,
|
37227 |
|
37228 | |
37229 |
|
37230 |
|
37231 | className: propTypes.string,
|
37232 |
|
37233 | |
37234 |
|
37235 |
|
37236 |
|
37237 | component: propTypes
|
37238 |
|
37239 | .elementType,
|
37240 |
|
37241 | |
37242 |
|
37243 |
|
37244 | hover: propTypes.bool,
|
37245 |
|
37246 | |
37247 |
|
37248 |
|
37249 | selected: propTypes.bool
|
37250 | } ;
|
37251 | var TableRow$1 = withStyles$1(styles$1K, {
|
37252 | name: 'MuiTableRow'
|
37253 | })(TableRow);
|
37254 |
|
37255 | |
37256 |
|
37257 |
|
37258 |
|
37259 | var ArrowDownwardIcon = createSvgIcon( React.createElement("path", {
|
37260 | d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
37261 | }), 'ArrowDownward');
|
37262 |
|
37263 | var styles$1L = function styles(theme) {
|
37264 | return {
|
37265 |
|
37266 | root: {
|
37267 | cursor: 'pointer',
|
37268 | display: 'inline-flex',
|
37269 | justifyContent: 'flex-start',
|
37270 | flexDirection: 'inherit',
|
37271 | alignItems: 'center',
|
37272 | '&:focus': {
|
37273 | color: theme.palette.text.secondary
|
37274 | },
|
37275 | '&:hover': {
|
37276 | color: theme.palette.text.secondary,
|
37277 | '& $icon': {
|
37278 | opacity: 0.5
|
37279 | }
|
37280 | },
|
37281 | '&$active': {
|
37282 | color: theme.palette.text.primary,
|
37283 |
|
37284 | '&& $icon': {
|
37285 | opacity: 1,
|
37286 | color: theme.palette.text.secondary
|
37287 | }
|
37288 | }
|
37289 | },
|
37290 |
|
37291 |
|
37292 | active: {},
|
37293 |
|
37294 |
|
37295 | icon: {
|
37296 | fontSize: 18,
|
37297 | marginRight: 4,
|
37298 | marginLeft: 4,
|
37299 | opacity: 0,
|
37300 | transition: theme.transitions.create(['opacity', 'transform'], {
|
37301 | duration: theme.transitions.duration.shorter
|
37302 | }),
|
37303 | userSelect: 'none'
|
37304 | },
|
37305 |
|
37306 |
|
37307 | iconDirectionDesc: {
|
37308 | transform: 'rotate(0deg)'
|
37309 | },
|
37310 |
|
37311 |
|
37312 | iconDirectionAsc: {
|
37313 | transform: 'rotate(180deg)'
|
37314 | }
|
37315 | };
|
37316 | };
|
37317 | |
37318 |
|
37319 |
|
37320 |
|
37321 | var TableSortLabel = React.forwardRef(function TableSortLabel(props, ref) {
|
37322 | var _props$active = props.active,
|
37323 | active = _props$active === void 0 ? false : _props$active,
|
37324 | children = props.children,
|
37325 | classes = props.classes,
|
37326 | className = props.className,
|
37327 | _props$direction = props.direction,
|
37328 | direction = _props$direction === void 0 ? 'asc' : _props$direction,
|
37329 | _props$hideSortIcon = props.hideSortIcon,
|
37330 | hideSortIcon = _props$hideSortIcon === void 0 ? false : _props$hideSortIcon,
|
37331 | _props$IconComponent = props.IconComponent,
|
37332 | IconComponent = _props$IconComponent === void 0 ? ArrowDownwardIcon : _props$IconComponent,
|
37333 | other = _objectWithoutProperties(props, ["active", "children", "classes", "className", "direction", "hideSortIcon", "IconComponent"]);
|
37334 |
|
37335 | return React.createElement(ButtonBase$1, _extends({
|
37336 | className: clsx(classes.root, className, active && classes.active),
|
37337 | component: "span",
|
37338 | disableRipple: true,
|
37339 | ref: ref
|
37340 | }, other), children, hideSortIcon && !active ? null : React.createElement(IconComponent, {
|
37341 | className: clsx(classes.icon, classes["iconDirection".concat(capitalize(direction))])
|
37342 | }));
|
37343 | });
|
37344 | TableSortLabel.propTypes = {
|
37345 | |
37346 |
|
37347 |
|
37348 | active: propTypes.bool,
|
37349 |
|
37350 | |
37351 |
|
37352 |
|
37353 | children: propTypes.node,
|
37354 |
|
37355 | |
37356 |
|
37357 |
|
37358 |
|
37359 | classes: propTypes.object.isRequired,
|
37360 |
|
37361 | |
37362 |
|
37363 |
|
37364 | className: propTypes.string,
|
37365 |
|
37366 | |
37367 |
|
37368 |
|
37369 | direction: propTypes.oneOf(['asc', 'desc']),
|
37370 |
|
37371 | |
37372 |
|
37373 |
|
37374 | hideSortIcon: propTypes.bool,
|
37375 |
|
37376 | |
37377 |
|
37378 |
|
37379 | IconComponent: propTypes.elementType
|
37380 | } ;
|
37381 | var TableSortLabel$1 = withStyles$1(styles$1L, {
|
37382 | name: 'MuiTableSortLabel'
|
37383 | })(TableSortLabel);
|
37384 |
|
37385 |
|
37386 | var cachedType;
|
37387 | |
37388 |
|
37389 |
|
37390 |
|
37391 |
|
37392 |
|
37393 |
|
37394 |
|
37395 |
|
37396 |
|
37397 |
|
37398 |
|
37399 |
|
37400 |
|
37401 |
|
37402 |
|
37403 |
|
37404 |
|
37405 |
|
37406 |
|
37407 | function detectScrollType() {
|
37408 | if (cachedType) {
|
37409 | return cachedType;
|
37410 | }
|
37411 |
|
37412 | var dummy = document.createElement('div');
|
37413 | var container = document.createElement('div');
|
37414 | container.style.width = '10px';
|
37415 | container.style.height = '1px';
|
37416 | dummy.appendChild(container);
|
37417 | dummy.dir = 'rtl';
|
37418 | dummy.style.fontSize = '14px';
|
37419 | dummy.style.width = '4px';
|
37420 | dummy.style.height = '1px';
|
37421 | dummy.style.position = 'absolute';
|
37422 | dummy.style.top = '-1000px';
|
37423 | dummy.style.overflow = 'scroll';
|
37424 | document.body.appendChild(dummy);
|
37425 | cachedType = 'reverse';
|
37426 |
|
37427 | if (dummy.scrollLeft > 0) {
|
37428 | cachedType = 'default';
|
37429 | } else {
|
37430 | dummy.scrollLeft = 1;
|
37431 |
|
37432 | if (dummy.scrollLeft === 0) {
|
37433 | cachedType = 'negative';
|
37434 | }
|
37435 | }
|
37436 |
|
37437 | document.body.removeChild(dummy);
|
37438 | return cachedType;
|
37439 | }
|
37440 |
|
37441 | function getNormalizedScrollLeft(element, direction) {
|
37442 | var scrollLeft = element.scrollLeft;
|
37443 |
|
37444 | if (direction !== 'rtl') {
|
37445 | return scrollLeft;
|
37446 | }
|
37447 |
|
37448 | var type = detectScrollType();
|
37449 |
|
37450 | switch (type) {
|
37451 | case 'negative':
|
37452 | return element.scrollWidth - element.clientWidth + scrollLeft;
|
37453 |
|
37454 | case 'reverse':
|
37455 | return element.scrollWidth - element.clientWidth - scrollLeft;
|
37456 |
|
37457 | default:
|
37458 | return scrollLeft;
|
37459 | }
|
37460 | }
|
37461 |
|
37462 | function easeInOutSin(time) {
|
37463 | return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
|
37464 | }
|
37465 |
|
37466 | function animate(property, element, to) {
|
37467 | var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
37468 | var cb = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : function () {};
|
37469 | var _options$ease = options.ease,
|
37470 | ease = _options$ease === void 0 ? easeInOutSin : _options$ease,
|
37471 | _options$duration = options.duration,
|
37472 | duration = _options$duration === void 0 ? 300 : _options$duration;
|
37473 | var start = null;
|
37474 | var from = element[property];
|
37475 | var cancelled = false;
|
37476 |
|
37477 | var cancel = function cancel() {
|
37478 | cancelled = true;
|
37479 | };
|
37480 |
|
37481 | var step = function step(timestamp) {
|
37482 | if (cancelled) {
|
37483 | cb(new Error('Animation cancelled'));
|
37484 | return;
|
37485 | }
|
37486 |
|
37487 | if (start === null) {
|
37488 | start = timestamp;
|
37489 | }
|
37490 |
|
37491 | var time = Math.min(1, (timestamp - start) / duration);
|
37492 | element[property] = ease(time) * (to - from) + from;
|
37493 |
|
37494 | if (time >= 1) {
|
37495 | requestAnimationFrame(function () {
|
37496 | cb(null);
|
37497 | });
|
37498 | return;
|
37499 | }
|
37500 |
|
37501 | requestAnimationFrame(step);
|
37502 | };
|
37503 |
|
37504 | if (from === to) {
|
37505 | cb(new Error('Element already at target position'));
|
37506 | return cancel;
|
37507 | }
|
37508 |
|
37509 | requestAnimationFrame(step);
|
37510 | return cancel;
|
37511 | }
|
37512 |
|
37513 | var styles$1M = {
|
37514 | width: 99,
|
37515 | height: 99,
|
37516 | position: 'absolute',
|
37517 | top: -9999,
|
37518 | overflow: 'scroll'
|
37519 | };
|
37520 | |
37521 |
|
37522 |
|
37523 |
|
37524 |
|
37525 |
|
37526 | function ScrollbarSize(props) {
|
37527 | var onChange = props.onChange,
|
37528 | other = _objectWithoutProperties(props, ["onChange"]);
|
37529 |
|
37530 | var scrollbarHeight = React.useRef();
|
37531 | var nodeRef = React.useRef(null);
|
37532 |
|
37533 | var setMeasurements = function setMeasurements() {
|
37534 | scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
|
37535 | };
|
37536 |
|
37537 | React.useEffect(function () {
|
37538 | var handleResize = debounce(function () {
|
37539 | var prevHeight = scrollbarHeight.current;
|
37540 | setMeasurements();
|
37541 |
|
37542 | if (prevHeight !== scrollbarHeight.current) {
|
37543 | onChange(scrollbarHeight.current);
|
37544 | }
|
37545 | });
|
37546 | window.addEventListener('resize', handleResize);
|
37547 | return function () {
|
37548 | handleResize.clear();
|
37549 | window.removeEventListener('resize', handleResize);
|
37550 | };
|
37551 | }, [onChange]);
|
37552 | React.useEffect(function () {
|
37553 | setMeasurements();
|
37554 | onChange(scrollbarHeight.current);
|
37555 | }, [onChange]);
|
37556 | return React.createElement("div", _extends({
|
37557 | style: styles$1M,
|
37558 | ref: nodeRef
|
37559 | }, other));
|
37560 | }
|
37561 | ScrollbarSize.propTypes = {
|
37562 | onChange: propTypes.func.isRequired
|
37563 | } ;
|
37564 |
|
37565 | var styles$1N = function styles(theme) {
|
37566 | return {
|
37567 | root: {
|
37568 | position: 'absolute',
|
37569 | height: 2,
|
37570 | bottom: 0,
|
37571 | width: '100%',
|
37572 | transition: theme.transitions.create()
|
37573 | },
|
37574 | colorPrimary: {
|
37575 | backgroundColor: theme.palette.primary.main
|
37576 | },
|
37577 | colorSecondary: {
|
37578 | backgroundColor: theme.palette.secondary.main
|
37579 | },
|
37580 | vertical: {
|
37581 | height: '100%',
|
37582 | width: 2,
|
37583 | right: 0
|
37584 | }
|
37585 | };
|
37586 | };
|
37587 | |
37588 |
|
37589 |
|
37590 |
|
37591 | var TabIndicator = React.forwardRef(function TabIndicator(props, ref) {
|
37592 | var classes = props.classes,
|
37593 | className = props.className,
|
37594 | color = props.color,
|
37595 | orientation = props.orientation,
|
37596 | other = _objectWithoutProperties(props, ["classes", "className", "color", "orientation"]);
|
37597 |
|
37598 | return React.createElement("span", _extends({
|
37599 | className: clsx(classes.root, classes["color".concat(capitalize(color))], className, orientation === 'vertical' && classes.vertical),
|
37600 | ref: ref
|
37601 | }, other));
|
37602 | });
|
37603 | TabIndicator.propTypes = {
|
37604 | |
37605 |
|
37606 |
|
37607 |
|
37608 | classes: propTypes.object.isRequired,
|
37609 |
|
37610 | |
37611 |
|
37612 |
|
37613 | className: propTypes.string,
|
37614 |
|
37615 | |
37616 |
|
37617 |
|
37618 |
|
37619 | color: propTypes.oneOf(['primary', 'secondary']).isRequired,
|
37620 |
|
37621 | |
37622 |
|
37623 |
|
37624 | orientation: propTypes.oneOf(['horizontal', 'vertical']).isRequired
|
37625 | } ;
|
37626 | var TabIndicator$1 = withStyles$1(styles$1N, {
|
37627 | name: 'PrivateTabIndicator'
|
37628 | })(TabIndicator);
|
37629 |
|
37630 | var styles$1O = {
|
37631 |
|
37632 | root: {
|
37633 | width: 40,
|
37634 | flexShrink: 0,
|
37635 | opacity: 0.8,
|
37636 | '&$disabled': {
|
37637 | opacity: 0
|
37638 | }
|
37639 | },
|
37640 |
|
37641 |
|
37642 | vertical: {
|
37643 | width: '100%',
|
37644 | height: 40,
|
37645 | '& svg': {
|
37646 | transform: 'rotate(90deg)'
|
37647 | }
|
37648 | },
|
37649 |
|
37650 |
|
37651 | disabled: {}
|
37652 | };
|
37653 |
|
37654 | var _ref$3 = React.createElement(KeyboardArrowLeft, {
|
37655 | fontSize: "small"
|
37656 | });
|
37657 |
|
37658 | var _ref2$2 = React.createElement(KeyboardArrowRight, {
|
37659 | fontSize: "small"
|
37660 | });
|
37661 |
|
37662 | var TabScrollButton = React.forwardRef(function TabScrollButton(props, ref) {
|
37663 | var classes = props.classes,
|
37664 | classNameProp = props.className,
|
37665 | direction = props.direction,
|
37666 | orientation = props.orientation,
|
37667 | disabled = props.disabled,
|
37668 | other = _objectWithoutProperties(props, ["classes", "className", "direction", "orientation", "disabled"]);
|
37669 |
|
37670 | return React.createElement(ButtonBase$1, _extends({
|
37671 | component: "div",
|
37672 | className: clsx(classes.root, classNameProp, disabled && classes.disabled, orientation === 'vertical' && classes.vertical),
|
37673 | ref: ref,
|
37674 | role: null,
|
37675 | tabIndex: null
|
37676 | }, other), direction === 'left' ? _ref$3 : _ref2$2);
|
37677 | });
|
37678 | TabScrollButton.propTypes = {
|
37679 |
|
37680 |
|
37681 |
|
37682 |
|
37683 |
|
37684 | |
37685 |
|
37686 |
|
37687 | children: propTypes.node,
|
37688 |
|
37689 | |
37690 |
|
37691 |
|
37692 |
|
37693 | classes: propTypes.object,
|
37694 |
|
37695 | |
37696 |
|
37697 |
|
37698 | className: propTypes.string,
|
37699 |
|
37700 | |
37701 |
|
37702 |
|
37703 | direction: propTypes.oneOf(['left', 'right']).isRequired,
|
37704 |
|
37705 | |
37706 |
|
37707 |
|
37708 | disabled: propTypes.bool,
|
37709 |
|
37710 | |
37711 |
|
37712 |
|
37713 | orientation: propTypes.oneOf(['horizontal', 'vertical']).isRequired
|
37714 | } ;
|
37715 | var TabScrollButton$1 = withStyles$1(styles$1O, {
|
37716 | name: 'MuiTabScrollButton'
|
37717 | })(TabScrollButton);
|
37718 |
|
37719 | var styles$1P = function styles(theme) {
|
37720 | return {
|
37721 |
|
37722 | root: {
|
37723 | overflow: 'hidden',
|
37724 | minHeight: 48,
|
37725 | WebkitOverflowScrolling: 'touch',
|
37726 |
|
37727 | display: 'flex'
|
37728 | },
|
37729 |
|
37730 |
|
37731 | vertical: {
|
37732 | flexDirection: 'column'
|
37733 | },
|
37734 |
|
37735 |
|
37736 | flexContainer: {
|
37737 | display: 'flex'
|
37738 | },
|
37739 |
|
37740 |
|
37741 | flexContainerVertical: {
|
37742 | flexDirection: 'column'
|
37743 | },
|
37744 |
|
37745 |
|
37746 | centered: {
|
37747 | justifyContent: 'center'
|
37748 | },
|
37749 |
|
37750 |
|
37751 | scroller: {
|
37752 | position: 'relative',
|
37753 | display: 'inline-block',
|
37754 | flex: '1 1 auto',
|
37755 | whiteSpace: 'nowrap'
|
37756 | },
|
37757 |
|
37758 |
|
37759 | fixed: {
|
37760 | overflowX: 'hidden',
|
37761 | width: '100%'
|
37762 | },
|
37763 |
|
37764 |
|
37765 | scrollable: {
|
37766 | overflowX: 'scroll',
|
37767 |
|
37768 | scrollbarWidth: 'none',
|
37769 |
|
37770 | '&::-webkit-scrollbar': {
|
37771 | display: 'none'
|
37772 |
|
37773 | }
|
37774 | },
|
37775 |
|
37776 |
|
37777 | scrollButtons: {},
|
37778 |
|
37779 |
|
37780 | scrollButtonsDesktop: _defineProperty({}, theme.breakpoints.down('xs'), {
|
37781 | display: 'none'
|
37782 | }),
|
37783 |
|
37784 |
|
37785 | indicator: {}
|
37786 | };
|
37787 | };
|
37788 | var Tabs = React.forwardRef(function Tabs(props, ref) {
|
37789 | var ariaLabel = props['aria-label'],
|
37790 | ariaLabelledBy = props['aria-labelledby'],
|
37791 | action = props.action,
|
37792 | _props$centered = props.centered,
|
37793 | centered = _props$centered === void 0 ? false : _props$centered,
|
37794 | childrenProp = props.children,
|
37795 | classes = props.classes,
|
37796 | className = props.className,
|
37797 | _props$component = props.component,
|
37798 | Component = _props$component === void 0 ? 'div' : _props$component,
|
37799 | _props$indicatorColor = props.indicatorColor,
|
37800 | indicatorColor = _props$indicatorColor === void 0 ? 'secondary' : _props$indicatorColor,
|
37801 | onChange = props.onChange,
|
37802 | _props$orientation = props.orientation,
|
37803 | orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
37804 | _props$ScrollButtonCo = props.ScrollButtonComponent,
|
37805 | ScrollButtonComponent = _props$ScrollButtonCo === void 0 ? TabScrollButton$1 : _props$ScrollButtonCo,
|
37806 | _props$scrollButtons = props.scrollButtons,
|
37807 | scrollButtons = _props$scrollButtons === void 0 ? 'auto' : _props$scrollButtons,
|
37808 | selectionFollowsFocus = props.selectionFollowsFocus,
|
37809 | _props$TabIndicatorPr = props.TabIndicatorProps,
|
37810 | TabIndicatorProps = _props$TabIndicatorPr === void 0 ? {} : _props$TabIndicatorPr,
|
37811 | TabScrollButtonProps = props.TabScrollButtonProps,
|
37812 | _props$textColor = props.textColor,
|
37813 | textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,
|
37814 | value = props.value,
|
37815 | _props$variant = props.variant,
|
37816 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
37817 | other = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "action", "centered", "children", "classes", "className", "component", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant"]);
|
37818 |
|
37819 | var theme = useTheme$1();
|
37820 | var scrollable = variant === 'scrollable';
|
37821 | var isRtl = theme.direction === 'rtl';
|
37822 | var vertical = orientation === 'vertical';
|
37823 | var scrollStart = vertical ? 'scrollTop' : 'scrollLeft';
|
37824 | var start = vertical ? 'top' : 'left';
|
37825 | var end = vertical ? 'bottom' : 'right';
|
37826 | var clientSize = vertical ? 'clientHeight' : 'clientWidth';
|
37827 | var size = vertical ? 'height' : 'width';
|
37828 |
|
37829 | {
|
37830 | if (centered && scrollable) {
|
37831 | console.error('Material-UI: You can not use the `centered={true}` and `variant="scrollable"` properties ' + 'at the same time on a `Tabs` component.');
|
37832 | }
|
37833 | }
|
37834 |
|
37835 | var _React$useState = React.useState(false),
|
37836 | mounted = _React$useState[0],
|
37837 | setMounted = _React$useState[1];
|
37838 |
|
37839 | var _React$useState2 = React.useState({}),
|
37840 | indicatorStyle = _React$useState2[0],
|
37841 | setIndicatorStyle = _React$useState2[1];
|
37842 |
|
37843 | var _React$useState3 = React.useState({
|
37844 | start: false,
|
37845 | end: false
|
37846 | }),
|
37847 | displayScroll = _React$useState3[0],
|
37848 | setDisplayScroll = _React$useState3[1];
|
37849 |
|
37850 | var _React$useState4 = React.useState({
|
37851 | overflow: 'hidden',
|
37852 | marginBottom: null
|
37853 | }),
|
37854 | scrollerStyle = _React$useState4[0],
|
37855 | setScrollerStyle = _React$useState4[1];
|
37856 |
|
37857 | var valueToIndex = new Map();
|
37858 | var tabsRef = React.useRef(null);
|
37859 | var tabListRef = React.useRef(null);
|
37860 |
|
37861 | var getTabsMeta = function getTabsMeta() {
|
37862 | var tabsNode = tabsRef.current;
|
37863 | var tabsMeta;
|
37864 |
|
37865 | if (tabsNode) {
|
37866 | var rect = tabsNode.getBoundingClientRect();
|
37867 |
|
37868 | tabsMeta = {
|
37869 | clientWidth: tabsNode.clientWidth,
|
37870 | scrollLeft: tabsNode.scrollLeft,
|
37871 | scrollTop: tabsNode.scrollTop,
|
37872 | scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, theme.direction),
|
37873 | scrollWidth: tabsNode.scrollWidth,
|
37874 | top: rect.top,
|
37875 | bottom: rect.bottom,
|
37876 | left: rect.left,
|
37877 | right: rect.right
|
37878 | };
|
37879 | }
|
37880 |
|
37881 | var tabMeta;
|
37882 |
|
37883 | if (tabsNode && value !== false) {
|
37884 | var _children = tabListRef.current.children;
|
37885 |
|
37886 | if (_children.length > 0) {
|
37887 | var tab = _children[valueToIndex.get(value)];
|
37888 |
|
37889 | {
|
37890 | if (!tab) {
|
37891 | console.error(["Material-UI: The value provided to the Tabs component is invalid.", "None of the Tabs' children match with `".concat(value, "`."), valueToIndex.keys ? "You can provide one of the following values: ".concat(Array.from(valueToIndex.keys()).join(', '), ".") : null].join('\n'));
|
37892 | }
|
37893 | }
|
37894 |
|
37895 | tabMeta = tab ? tab.getBoundingClientRect() : null;
|
37896 | }
|
37897 | }
|
37898 |
|
37899 | return {
|
37900 | tabsMeta: tabsMeta,
|
37901 | tabMeta: tabMeta
|
37902 | };
|
37903 | };
|
37904 |
|
37905 | var updateIndicatorState = useEventCallback(function () {
|
37906 | var _newIndicatorStyle;
|
37907 |
|
37908 | var _getTabsMeta = getTabsMeta(),
|
37909 | tabsMeta = _getTabsMeta.tabsMeta,
|
37910 | tabMeta = _getTabsMeta.tabMeta;
|
37911 |
|
37912 | var startValue = 0;
|
37913 |
|
37914 | if (tabMeta && tabsMeta) {
|
37915 | if (vertical) {
|
37916 | startValue = tabMeta.top - tabsMeta.top + tabsMeta.scrollTop;
|
37917 | } else {
|
37918 | var correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;
|
37919 | startValue = tabMeta.left - tabsMeta.left + correction;
|
37920 | }
|
37921 | }
|
37922 |
|
37923 | var newIndicatorStyle = (_newIndicatorStyle = {}, _defineProperty(_newIndicatorStyle, start, startValue), _defineProperty(_newIndicatorStyle, size, tabMeta ? tabMeta[size] : 0), _newIndicatorStyle);
|
37924 |
|
37925 | if (isNaN(indicatorStyle[start]) || isNaN(indicatorStyle[size])) {
|
37926 | setIndicatorStyle(newIndicatorStyle);
|
37927 | } else {
|
37928 | var dStart = Math.abs(indicatorStyle[start] - newIndicatorStyle[start]);
|
37929 | var dSize = Math.abs(indicatorStyle[size] - newIndicatorStyle[size]);
|
37930 |
|
37931 | if (dStart >= 1 || dSize >= 1) {
|
37932 | setIndicatorStyle(newIndicatorStyle);
|
37933 | }
|
37934 | }
|
37935 | });
|
37936 |
|
37937 | var scroll = function scroll(scrollValue) {
|
37938 | animate(scrollStart, tabsRef.current, scrollValue);
|
37939 | };
|
37940 |
|
37941 | var moveTabsScroll = function moveTabsScroll(delta) {
|
37942 | var scrollValue = tabsRef.current[scrollStart];
|
37943 |
|
37944 | if (vertical) {
|
37945 | scrollValue += delta;
|
37946 | } else {
|
37947 | scrollValue += delta * (isRtl ? -1 : 1);
|
37948 |
|
37949 | scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1;
|
37950 | }
|
37951 |
|
37952 | scroll(scrollValue);
|
37953 | };
|
37954 |
|
37955 | var handleStartScrollClick = function handleStartScrollClick() {
|
37956 | moveTabsScroll(-tabsRef.current[clientSize]);
|
37957 | };
|
37958 |
|
37959 | var handleEndScrollClick = function handleEndScrollClick() {
|
37960 | moveTabsScroll(tabsRef.current[clientSize]);
|
37961 | };
|
37962 |
|
37963 | var handleScrollbarSizeChange = React.useCallback(function (scrollbarHeight) {
|
37964 | setScrollerStyle({
|
37965 | overflow: null,
|
37966 | marginBottom: -scrollbarHeight
|
37967 | });
|
37968 | }, []);
|
37969 |
|
37970 | var getConditionalElements = function getConditionalElements() {
|
37971 | var conditionalElements = {};
|
37972 | conditionalElements.scrollbarSizeListener = scrollable ? React.createElement(ScrollbarSize, {
|
37973 | className: classes.scrollable,
|
37974 | onChange: handleScrollbarSizeChange
|
37975 | }) : null;
|
37976 | var scrollButtonsActive = displayScroll.start || displayScroll.end;
|
37977 | var showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === 'desktop' || scrollButtons === 'on');
|
37978 | conditionalElements.scrollButtonStart = showScrollButtons ? React.createElement(ScrollButtonComponent, _extends({
|
37979 | orientation: orientation,
|
37980 | direction: isRtl ? 'right' : 'left',
|
37981 | onClick: handleStartScrollClick,
|
37982 | disabled: !displayScroll.start,
|
37983 | className: clsx(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)
|
37984 | }, TabScrollButtonProps)) : null;
|
37985 | conditionalElements.scrollButtonEnd = showScrollButtons ? React.createElement(ScrollButtonComponent, _extends({
|
37986 | orientation: orientation,
|
37987 | direction: isRtl ? 'left' : 'right',
|
37988 | onClick: handleEndScrollClick,
|
37989 | disabled: !displayScroll.end,
|
37990 | className: clsx(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)
|
37991 | }, TabScrollButtonProps)) : null;
|
37992 | return conditionalElements;
|
37993 | };
|
37994 |
|
37995 | var scrollSelectedIntoView = useEventCallback(function () {
|
37996 | var _getTabsMeta2 = getTabsMeta(),
|
37997 | tabsMeta = _getTabsMeta2.tabsMeta,
|
37998 | tabMeta = _getTabsMeta2.tabMeta;
|
37999 |
|
38000 | if (!tabMeta || !tabsMeta) {
|
38001 | return;
|
38002 | }
|
38003 |
|
38004 | if (tabMeta[start] < tabsMeta[start]) {
|
38005 |
|
38006 | var nextScrollStart = tabsMeta[scrollStart] + (tabMeta[start] - tabsMeta[start]);
|
38007 | scroll(nextScrollStart);
|
38008 | } else if (tabMeta[end] > tabsMeta[end]) {
|
38009 |
|
38010 | var _nextScrollStart = tabsMeta[scrollStart] + (tabMeta[end] - tabsMeta[end]);
|
38011 |
|
38012 | scroll(_nextScrollStart);
|
38013 | }
|
38014 | });
|
38015 | var updateScrollButtonState = useEventCallback(function () {
|
38016 | if (scrollable && scrollButtons !== 'off') {
|
38017 | var _tabsRef$current = tabsRef.current,
|
38018 | scrollTop = _tabsRef$current.scrollTop,
|
38019 | scrollHeight = _tabsRef$current.scrollHeight,
|
38020 | clientHeight = _tabsRef$current.clientHeight,
|
38021 | scrollWidth = _tabsRef$current.scrollWidth,
|
38022 | clientWidth = _tabsRef$current.clientWidth;
|
38023 | var showStartScroll;
|
38024 | var showEndScroll;
|
38025 |
|
38026 | if (vertical) {
|
38027 | showStartScroll = scrollTop > 1;
|
38028 | showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
|
38029 | } else {
|
38030 | var scrollLeft = getNormalizedScrollLeft(tabsRef.current, theme.direction);
|
38031 |
|
38032 | showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
|
38033 | showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
|
38034 | }
|
38035 |
|
38036 | if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {
|
38037 | setDisplayScroll({
|
38038 | start: showStartScroll,
|
38039 | end: showEndScroll
|
38040 | });
|
38041 | }
|
38042 | }
|
38043 | });
|
38044 | React.useEffect(function () {
|
38045 | var handleResize = debounce(function () {
|
38046 | updateIndicatorState();
|
38047 | updateScrollButtonState();
|
38048 | });
|
38049 | var win = ownerWindow(tabsRef.current);
|
38050 | win.addEventListener('resize', handleResize);
|
38051 | return function () {
|
38052 | handleResize.clear();
|
38053 | win.removeEventListener('resize', handleResize);
|
38054 | };
|
38055 | }, [updateIndicatorState, updateScrollButtonState]);
|
38056 | var handleTabsScroll = React.useCallback(debounce(function () {
|
38057 | updateScrollButtonState();
|
38058 | }));
|
38059 | React.useEffect(function () {
|
38060 | return function () {
|
38061 | handleTabsScroll.clear();
|
38062 | };
|
38063 | }, [handleTabsScroll]);
|
38064 | React.useEffect(function () {
|
38065 | setMounted(true);
|
38066 | }, []);
|
38067 | React.useEffect(function () {
|
38068 | updateIndicatorState();
|
38069 | updateScrollButtonState();
|
38070 | });
|
38071 | React.useEffect(function () {
|
38072 | scrollSelectedIntoView();
|
38073 | }, [scrollSelectedIntoView, indicatorStyle]);
|
38074 | React.useImperativeHandle(action, function () {
|
38075 | return {
|
38076 | updateIndicator: updateIndicatorState,
|
38077 | updateScrollButtons: updateScrollButtonState
|
38078 | };
|
38079 | }, [updateIndicatorState, updateScrollButtonState]);
|
38080 | var indicator = React.createElement(TabIndicator$1, _extends({
|
38081 | className: classes.indicator,
|
38082 | orientation: orientation,
|
38083 | color: indicatorColor
|
38084 | }, TabIndicatorProps, {
|
38085 | style: _extends({}, indicatorStyle, TabIndicatorProps.style)
|
38086 | }));
|
38087 | var childIndex = 0;
|
38088 | var children = React.Children.map(childrenProp, function (child) {
|
38089 | if (! React.isValidElement(child)) {
|
38090 | return null;
|
38091 | }
|
38092 |
|
38093 | {
|
38094 | if (reactIs_2(child)) {
|
38095 | console.error(["Material-UI: The Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
38096 | }
|
38097 | }
|
38098 |
|
38099 | var childValue = child.props.value === undefined ? childIndex : child.props.value;
|
38100 | valueToIndex.set(childValue, childIndex);
|
38101 | var selected = childValue === value;
|
38102 | childIndex += 1;
|
38103 | return React.cloneElement(child, {
|
38104 | fullWidth: variant === 'fullWidth',
|
38105 | indicator: selected && !mounted && indicator,
|
38106 | selected: selected,
|
38107 | selectionFollowsFocus: selectionFollowsFocus,
|
38108 | onChange: onChange,
|
38109 | textColor: textColor,
|
38110 | value: childValue
|
38111 | });
|
38112 | });
|
38113 |
|
38114 | var handleKeyDown = function handleKeyDown(event) {
|
38115 | var target = event.target;
|
38116 |
|
38117 |
|
38118 |
|
38119 | var role = target.getAttribute('role');
|
38120 |
|
38121 | if (role !== 'tab') {
|
38122 | return;
|
38123 | }
|
38124 |
|
38125 | var newFocusTarget = null;
|
38126 | var previousItemKey = orientation !== "vertical" ? 'ArrowLeft' : 'ArrowUp';
|
38127 | var nextItemKey = orientation !== "vertical" ? 'ArrowRight' : 'ArrowDown';
|
38128 |
|
38129 | if (orientation !== "vertical" && theme.direction === 'rtl') {
|
38130 |
|
38131 | previousItemKey = 'ArrowRight';
|
38132 | nextItemKey = 'ArrowLeft';
|
38133 | }
|
38134 |
|
38135 | switch (event.key) {
|
38136 | case previousItemKey:
|
38137 | newFocusTarget = target.previousElementSibling || tabListRef.current.lastChild;
|
38138 | break;
|
38139 |
|
38140 | case nextItemKey:
|
38141 | newFocusTarget = target.nextElementSibling || tabListRef.current.firstChild;
|
38142 | break;
|
38143 |
|
38144 | case 'Home':
|
38145 | newFocusTarget = tabListRef.current.firstChild;
|
38146 | break;
|
38147 |
|
38148 | case 'End':
|
38149 | newFocusTarget = tabListRef.current.lastChild;
|
38150 | break;
|
38151 | }
|
38152 |
|
38153 | if (newFocusTarget !== null) {
|
38154 | newFocusTarget.focus();
|
38155 | event.preventDefault();
|
38156 | }
|
38157 | };
|
38158 |
|
38159 | var conditionalElements = getConditionalElements();
|
38160 | return React.createElement(Component, _extends({
|
38161 | className: clsx(classes.root, className, vertical && classes.vertical),
|
38162 | ref: ref
|
38163 | }, other), conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, React.createElement("div", {
|
38164 | className: clsx(classes.scroller, scrollable ? classes.scrollable : classes.fixed),
|
38165 | style: scrollerStyle,
|
38166 | ref: tabsRef,
|
38167 | onScroll: handleTabsScroll
|
38168 | }, React.createElement("div", {
|
38169 | "aria-label": ariaLabel,
|
38170 | "aria-labelledby": ariaLabelledBy,
|
38171 | className: clsx(classes.flexContainer, vertical && classes.flexContainerVertical, centered && !scrollable && classes.centered),
|
38172 | onKeyDown: handleKeyDown,
|
38173 | ref: tabListRef,
|
38174 | role: "tablist"
|
38175 | }, children), mounted && indicator), conditionalElements.scrollButtonEnd);
|
38176 | });
|
38177 | Tabs.propTypes = {
|
38178 |
|
38179 |
|
38180 |
|
38181 |
|
38182 |
|
38183 | |
38184 |
|
38185 |
|
38186 |
|
38187 |
|
38188 |
|
38189 |
|
38190 |
|
38191 | action: refType,
|
38192 |
|
38193 | |
38194 |
|
38195 |
|
38196 | 'aria-label': propTypes.string,
|
38197 |
|
38198 | |
38199 |
|
38200 |
|
38201 | 'aria-labelledby': propTypes.string,
|
38202 |
|
38203 | |
38204 |
|
38205 |
|
38206 |
|
38207 | centered: propTypes.bool,
|
38208 |
|
38209 | |
38210 |
|
38211 |
|
38212 | children: propTypes.node,
|
38213 |
|
38214 | |
38215 |
|
38216 |
|
38217 |
|
38218 | classes: propTypes.object,
|
38219 |
|
38220 | |
38221 |
|
38222 |
|
38223 | className: propTypes.string,
|
38224 |
|
38225 | |
38226 |
|
38227 |
|
38228 |
|
38229 | component: propTypes
|
38230 |
|
38231 | .elementType,
|
38232 |
|
38233 | |
38234 |
|
38235 |
|
38236 | indicatorColor: propTypes.oneOf(['primary', 'secondary']),
|
38237 |
|
38238 | |
38239 |
|
38240 |
|
38241 |
|
38242 |
|
38243 |
|
38244 | onChange: propTypes.func,
|
38245 |
|
38246 | |
38247 |
|
38248 |
|
38249 | orientation: propTypes.oneOf(['horizontal', 'vertical']),
|
38250 |
|
38251 | |
38252 |
|
38253 |
|
38254 | ScrollButtonComponent: propTypes.elementType,
|
38255 |
|
38256 | |
38257 |
|
38258 |
|
38259 |
|
38260 |
|
38261 |
|
38262 |
|
38263 |
|
38264 | scrollButtons: propTypes.oneOf(['auto', 'desktop', 'off', 'on']),
|
38265 |
|
38266 | |
38267 |
|
38268 |
|
38269 |
|
38270 | selectionFollowsFocus: propTypes.bool,
|
38271 |
|
38272 | |
38273 |
|
38274 |
|
38275 | TabIndicatorProps: propTypes.object,
|
38276 |
|
38277 | |
38278 |
|
38279 |
|
38280 | TabScrollButtonProps: propTypes.object,
|
38281 |
|
38282 | |
38283 |
|
38284 |
|
38285 | textColor: propTypes.oneOf(['inherit', 'primary', 'secondary']),
|
38286 |
|
38287 | |
38288 |
|
38289 |
|
38290 |
|
38291 | value: propTypes.any,
|
38292 |
|
38293 | |
38294 |
|
38295 |
|
38296 |
|
38297 |
|
38298 |
|
38299 |
|
38300 |
|
38301 |
|
38302 | variant: propTypes.oneOf(['fullWidth', 'scrollable', 'standard'])
|
38303 | } ;
|
38304 | var Tabs$1 = withStyles$1(styles$1P, {
|
38305 | name: 'MuiTabs'
|
38306 | })(Tabs);
|
38307 |
|
38308 | var variantComponent = {
|
38309 | standard: Input$1,
|
38310 | filled: FilledInput$1,
|
38311 | outlined: OutlinedInput$1
|
38312 | };
|
38313 | var styles$1Q = {
|
38314 |
|
38315 | root: {}
|
38316 | };
|
38317 | |
38318 |
|
38319 |
|
38320 |
|
38321 |
|
38322 |
|
38323 |
|
38324 |
|
38325 |
|
38326 |
|
38327 |
|
38328 |
|
38329 |
|
38330 |
|
38331 |
|
38332 |
|
38333 |
|
38334 |
|
38335 |
|
38336 |
|
38337 |
|
38338 |
|
38339 |
|
38340 |
|
38341 |
|
38342 |
|
38343 |
|
38344 |
|
38345 |
|
38346 |
|
38347 |
|
38348 |
|
38349 |
|
38350 | var TextField = React.forwardRef(function TextField(props, ref) {
|
38351 | var autoComplete = props.autoComplete,
|
38352 | _props$autoFocus = props.autoFocus,
|
38353 | autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
|
38354 | children = props.children,
|
38355 | classes = props.classes,
|
38356 | className = props.className,
|
38357 | _props$color = props.color,
|
38358 | color = _props$color === void 0 ? 'primary' : _props$color,
|
38359 | defaultValue = props.defaultValue,
|
38360 | _props$disabled = props.disabled,
|
38361 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
38362 | _props$error = props.error,
|
38363 | error = _props$error === void 0 ? false : _props$error,
|
38364 | FormHelperTextProps = props.FormHelperTextProps,
|
38365 | _props$fullWidth = props.fullWidth,
|
38366 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
38367 | helperText = props.helperText,
|
38368 | hiddenLabel = props.hiddenLabel,
|
38369 | id = props.id,
|
38370 | InputLabelProps = props.InputLabelProps,
|
38371 | inputProps = props.inputProps,
|
38372 | InputProps = props.InputProps,
|
38373 | inputRef = props.inputRef,
|
38374 | label = props.label,
|
38375 | _props$multiline = props.multiline,
|
38376 | multiline = _props$multiline === void 0 ? false : _props$multiline,
|
38377 | name = props.name,
|
38378 | onBlur = props.onBlur,
|
38379 | onChange = props.onChange,
|
38380 | onFocus = props.onFocus,
|
38381 | placeholder = props.placeholder,
|
38382 | _props$required = props.required,
|
38383 | required = _props$required === void 0 ? false : _props$required,
|
38384 | rows = props.rows,
|
38385 | rowsMax = props.rowsMax,
|
38386 | maxRows = props.maxRows,
|
38387 | minRows = props.minRows,
|
38388 | _props$select = props.select,
|
38389 | select = _props$select === void 0 ? false : _props$select,
|
38390 | SelectProps = props.SelectProps,
|
38391 | type = props.type,
|
38392 | value = props.value,
|
38393 | _props$variant = props.variant,
|
38394 | variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
38395 | 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", "maxRows", "minRows", "select", "SelectProps", "type", "value", "variant"]);
|
38396 |
|
38397 | {
|
38398 | if (select && !children) {
|
38399 | console.error('Material-UI: `children` must be passed when using the `TextField` component with `select`.');
|
38400 | }
|
38401 | }
|
38402 |
|
38403 | var InputMore = {};
|
38404 |
|
38405 | if (variant === 'outlined') {
|
38406 | if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
|
38407 | InputMore.notched = InputLabelProps.shrink;
|
38408 | }
|
38409 |
|
38410 | if (label) {
|
38411 | var _InputLabelProps$requ;
|
38412 |
|
38413 | var displayRequired = (_InputLabelProps$requ = InputLabelProps === null || InputLabelProps === void 0 ? void 0 : InputLabelProps.required) !== null && _InputLabelProps$requ !== void 0 ? _InputLabelProps$requ : required;
|
38414 | InputMore.label = React.createElement(React.Fragment, null, label, displayRequired && "\xA0*");
|
38415 | }
|
38416 | }
|
38417 |
|
38418 | if (select) {
|
38419 |
|
38420 | if (!SelectProps || !SelectProps.native) {
|
38421 | InputMore.id = undefined;
|
38422 | }
|
38423 |
|
38424 | InputMore['aria-describedby'] = undefined;
|
38425 | }
|
38426 |
|
38427 | var helperTextId = helperText && id ? "".concat(id, "-helper-text") : undefined;
|
38428 | var inputLabelId = label && id ? "".concat(id, "-label") : undefined;
|
38429 | var InputComponent = variantComponent[variant];
|
38430 | var InputElement = React.createElement(InputComponent, _extends({
|
38431 | "aria-describedby": helperTextId,
|
38432 | autoComplete: autoComplete,
|
38433 | autoFocus: autoFocus,
|
38434 | defaultValue: defaultValue,
|
38435 | fullWidth: fullWidth,
|
38436 | multiline: multiline,
|
38437 | name: name,
|
38438 | rows: rows,
|
38439 | rowsMax: rowsMax,
|
38440 | maxRows: maxRows,
|
38441 | minRows: minRows,
|
38442 | type: type,
|
38443 | value: value,
|
38444 | id: id,
|
38445 | inputRef: inputRef,
|
38446 | onBlur: onBlur,
|
38447 | onChange: onChange,
|
38448 | onFocus: onFocus,
|
38449 | placeholder: placeholder,
|
38450 | inputProps: inputProps
|
38451 | }, InputMore, InputProps));
|
38452 | return React.createElement(FormControl$1, _extends({
|
38453 | className: clsx(classes.root, className),
|
38454 | disabled: disabled,
|
38455 | error: error,
|
38456 | fullWidth: fullWidth,
|
38457 | hiddenLabel: hiddenLabel,
|
38458 | ref: ref,
|
38459 | required: required,
|
38460 | color: color,
|
38461 | variant: variant
|
38462 | }, other), label && React.createElement(InputLabel$1, _extends({
|
38463 | htmlFor: id,
|
38464 | id: inputLabelId
|
38465 | }, InputLabelProps), label), select ? React.createElement(Select$1, _extends({
|
38466 | "aria-describedby": helperTextId,
|
38467 | id: id,
|
38468 | labelId: inputLabelId,
|
38469 | value: value,
|
38470 | input: InputElement
|
38471 | }, SelectProps), children) : InputElement, helperText && React.createElement(FormHelperText$1, _extends({
|
38472 | id: helperTextId
|
38473 | }, FormHelperTextProps), helperText));
|
38474 | });
|
38475 | TextField.propTypes = {
|
38476 |
|
38477 |
|
38478 |
|
38479 |
|
38480 |
|
38481 | |
38482 |
|
38483 |
|
38484 |
|
38485 |
|
38486 | autoComplete: propTypes.string,
|
38487 |
|
38488 | |
38489 |
|
38490 |
|
38491 | autoFocus: propTypes.bool,
|
38492 |
|
38493 | |
38494 |
|
38495 |
|
38496 | children: propTypes.node,
|
38497 |
|
38498 | |
38499 |
|
38500 |
|
38501 |
|
38502 | classes: propTypes.object,
|
38503 |
|
38504 | |
38505 |
|
38506 |
|
38507 | className: propTypes.string,
|
38508 |
|
38509 | |
38510 |
|
38511 |
|
38512 | color: propTypes.oneOf(['primary', 'secondary']),
|
38513 |
|
38514 | |
38515 |
|
38516 |
|
38517 | defaultValue: propTypes.any,
|
38518 |
|
38519 | |
38520 |
|
38521 |
|
38522 | disabled: propTypes.bool,
|
38523 |
|
38524 | |
38525 |
|
38526 |
|
38527 | error: propTypes.bool,
|
38528 |
|
38529 | |
38530 |
|
38531 |
|
38532 | FormHelperTextProps: propTypes.object,
|
38533 |
|
38534 | |
38535 |
|
38536 |
|
38537 | fullWidth: propTypes.bool,
|
38538 |
|
38539 | |
38540 |
|
38541 |
|
38542 | helperText: propTypes.node,
|
38543 |
|
38544 | |
38545 |
|
38546 |
|
38547 | hiddenLabel: propTypes.bool,
|
38548 |
|
38549 | |
38550 |
|
38551 |
|
38552 |
|
38553 | id: propTypes.string,
|
38554 |
|
38555 | |
38556 |
|
38557 |
|
38558 | InputLabelProps: propTypes.object,
|
38559 |
|
38560 | |
38561 |
|
38562 |
|
38563 | inputProps: propTypes.object,
|
38564 |
|
38565 | |
38566 |
|
38567 |
|
38568 |
|
38569 |
|
38570 |
|
38571 | InputProps: propTypes.object,
|
38572 |
|
38573 | |
38574 |
|
38575 |
|
38576 | inputRef: refType,
|
38577 |
|
38578 | |
38579 |
|
38580 |
|
38581 | label: propTypes.node,
|
38582 |
|
38583 | |
38584 |
|
38585 |
|
38586 | margin: propTypes.oneOf(['dense', 'none', 'normal']),
|
38587 |
|
38588 | |
38589 |
|
38590 |
|
38591 | maxRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
38592 |
|
38593 | |
38594 |
|
38595 |
|
38596 | minRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
38597 |
|
38598 | |
38599 |
|
38600 |
|
38601 | multiline: propTypes.bool,
|
38602 |
|
38603 | |
38604 |
|
38605 |
|
38606 | name: propTypes.string,
|
38607 |
|
38608 | |
38609 |
|
38610 |
|
38611 | onBlur: propTypes.func,
|
38612 |
|
38613 | |
38614 |
|
38615 |
|
38616 |
|
38617 |
|
38618 |
|
38619 | onChange: propTypes.func,
|
38620 |
|
38621 | |
38622 |
|
38623 |
|
38624 | onFocus: propTypes.func,
|
38625 |
|
38626 | |
38627 |
|
38628 |
|
38629 | placeholder: propTypes.string,
|
38630 |
|
38631 | |
38632 |
|
38633 |
|
38634 | required: propTypes.bool,
|
38635 |
|
38636 | |
38637 |
|
38638 |
|
38639 |
|
38640 | rows: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
38641 |
|
38642 | |
38643 |
|
38644 |
|
38645 |
|
38646 | rowsMax: propTypes.oneOfType([propTypes.number, propTypes.string]),
|
38647 |
|
38648 | |
38649 |
|
38650 |
|
38651 |
|
38652 | select: propTypes.bool,
|
38653 |
|
38654 | |
38655 |
|
38656 |
|
38657 | SelectProps: propTypes.object,
|
38658 |
|
38659 | |
38660 |
|
38661 |
|
38662 | size: propTypes.oneOf(['medium', 'small']),
|
38663 |
|
38664 | |
38665 |
|
38666 |
|
38667 | type: propTypes.string,
|
38668 |
|
38669 | |
38670 |
|
38671 |
|
38672 | value: propTypes.any,
|
38673 |
|
38674 | |
38675 |
|
38676 |
|
38677 | variant: propTypes.oneOf(['filled', 'outlined', 'standard'])
|
38678 | } ;
|
38679 | var TextField$1 = withStyles$1(styles$1Q, {
|
38680 | name: 'MuiTextField'
|
38681 | })(TextField);
|
38682 |
|
38683 | function round$1(value) {
|
38684 | return Math.round(value * 1e5) / 1e5;
|
38685 | }
|
38686 |
|
38687 | function arrowGenerator() {
|
38688 | return {
|
38689 | '&[x-placement*="bottom"] $arrow': {
|
38690 | top: 0,
|
38691 | left: 0,
|
38692 | marginTop: '-0.71em',
|
38693 | marginLeft: 4,
|
38694 | marginRight: 4,
|
38695 | '&::before': {
|
38696 | transformOrigin: '0 100%'
|
38697 | }
|
38698 | },
|
38699 | '&[x-placement*="top"] $arrow': {
|
38700 | bottom: 0,
|
38701 | left: 0,
|
38702 | marginBottom: '-0.71em',
|
38703 | marginLeft: 4,
|
38704 | marginRight: 4,
|
38705 | '&::before': {
|
38706 | transformOrigin: '100% 0'
|
38707 | }
|
38708 | },
|
38709 | '&[x-placement*="right"] $arrow': {
|
38710 | left: 0,
|
38711 | marginLeft: '-0.71em',
|
38712 | height: '1em',
|
38713 | width: '0.71em',
|
38714 | marginTop: 4,
|
38715 | marginBottom: 4,
|
38716 | '&::before': {
|
38717 | transformOrigin: '100% 100%'
|
38718 | }
|
38719 | },
|
38720 | '&[x-placement*="left"] $arrow': {
|
38721 | right: 0,
|
38722 | marginRight: '-0.71em',
|
38723 | height: '1em',
|
38724 | width: '0.71em',
|
38725 | marginTop: 4,
|
38726 | marginBottom: 4,
|
38727 | '&::before': {
|
38728 | transformOrigin: '0 0'
|
38729 | }
|
38730 | }
|
38731 | };
|
38732 | }
|
38733 |
|
38734 | var styles$1R = function styles(theme) {
|
38735 | return {
|
38736 |
|
38737 | popper: {
|
38738 | zIndex: theme.zIndex.tooltip,
|
38739 | pointerEvents: 'none'
|
38740 |
|
38741 | },
|
38742 |
|
38743 |
|
38744 | popperInteractive: {
|
38745 | pointerEvents: 'auto'
|
38746 | },
|
38747 |
|
38748 |
|
38749 | popperArrow: arrowGenerator(),
|
38750 |
|
38751 |
|
38752 | tooltip: {
|
38753 | backgroundColor: alpha(theme.palette.grey[700], 0.9),
|
38754 | borderRadius: theme.shape.borderRadius,
|
38755 | color: theme.palette.common.white,
|
38756 | fontFamily: theme.typography.fontFamily,
|
38757 | padding: '4px 8px',
|
38758 | fontSize: theme.typography.pxToRem(10),
|
38759 | lineHeight: "".concat(round$1(14 / 10), "em"),
|
38760 | maxWidth: 300,
|
38761 | wordWrap: 'break-word',
|
38762 | fontWeight: theme.typography.fontWeightMedium
|
38763 | },
|
38764 |
|
38765 |
|
38766 | tooltipArrow: {
|
38767 | position: 'relative',
|
38768 | margin: '0'
|
38769 | },
|
38770 |
|
38771 |
|
38772 | arrow: {
|
38773 | overflow: 'hidden',
|
38774 | position: 'absolute',
|
38775 | width: '1em',
|
38776 | height: '0.71em'
|
38777 |
|
38778 | ,
|
38779 | boxSizing: 'border-box',
|
38780 | color: alpha(theme.palette.grey[700], 0.9),
|
38781 | '&::before': {
|
38782 | content: '""',
|
38783 | margin: 'auto',
|
38784 | display: 'block',
|
38785 | width: '100%',
|
38786 | height: '100%',
|
38787 | backgroundColor: 'currentColor',
|
38788 | transform: 'rotate(45deg)'
|
38789 | }
|
38790 | },
|
38791 |
|
38792 |
|
38793 | touch: {
|
38794 | padding: '8px 16px',
|
38795 | fontSize: theme.typography.pxToRem(14),
|
38796 | lineHeight: "".concat(round$1(16 / 14), "em"),
|
38797 | fontWeight: theme.typography.fontWeightRegular
|
38798 | },
|
38799 |
|
38800 |
|
38801 | tooltipPlacementLeft: _defineProperty({
|
38802 | transformOrigin: 'right center',
|
38803 | margin: '0 24px '
|
38804 | }, theme.breakpoints.up('sm'), {
|
38805 | margin: '0 14px'
|
38806 | }),
|
38807 |
|
38808 |
|
38809 | tooltipPlacementRight: _defineProperty({
|
38810 | transformOrigin: 'left center',
|
38811 | margin: '0 24px'
|
38812 | }, theme.breakpoints.up('sm'), {
|
38813 | margin: '0 14px'
|
38814 | }),
|
38815 |
|
38816 |
|
38817 | tooltipPlacementTop: _defineProperty({
|
38818 | transformOrigin: 'center bottom',
|
38819 | margin: '24px 0'
|
38820 | }, theme.breakpoints.up('sm'), {
|
38821 | margin: '14px 0'
|
38822 | }),
|
38823 |
|
38824 |
|
38825 | tooltipPlacementBottom: _defineProperty({
|
38826 | transformOrigin: 'center top',
|
38827 | margin: '24px 0'
|
38828 | }, theme.breakpoints.up('sm'), {
|
38829 | margin: '14px 0'
|
38830 | })
|
38831 | };
|
38832 | };
|
38833 | var hystersisOpen = false;
|
38834 | var hystersisTimer = null;
|
38835 | var Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
38836 | var _props$arrow = props.arrow,
|
38837 | arrow = _props$arrow === void 0 ? false : _props$arrow,
|
38838 | children = props.children,
|
38839 | classes = props.classes,
|
38840 | _props$disableFocusLi = props.disableFocusListener,
|
38841 | disableFocusListener = _props$disableFocusLi === void 0 ? false : _props$disableFocusLi,
|
38842 | _props$disableHoverLi = props.disableHoverListener,
|
38843 | disableHoverListener = _props$disableHoverLi === void 0 ? false : _props$disableHoverLi,
|
38844 | _props$disableTouchLi = props.disableTouchListener,
|
38845 | disableTouchListener = _props$disableTouchLi === void 0 ? false : _props$disableTouchLi,
|
38846 | _props$enterDelay = props.enterDelay,
|
38847 | enterDelay = _props$enterDelay === void 0 ? 100 : _props$enterDelay,
|
38848 | _props$enterNextDelay = props.enterNextDelay,
|
38849 | enterNextDelay = _props$enterNextDelay === void 0 ? 0 : _props$enterNextDelay,
|
38850 | _props$enterTouchDela = props.enterTouchDelay,
|
38851 | enterTouchDelay = _props$enterTouchDela === void 0 ? 700 : _props$enterTouchDela,
|
38852 | idProp = props.id,
|
38853 | _props$interactive = props.interactive,
|
38854 | interactive = _props$interactive === void 0 ? false : _props$interactive,
|
38855 | _props$leaveDelay = props.leaveDelay,
|
38856 | leaveDelay = _props$leaveDelay === void 0 ? 0 : _props$leaveDelay,
|
38857 | _props$leaveTouchDela = props.leaveTouchDelay,
|
38858 | leaveTouchDelay = _props$leaveTouchDela === void 0 ? 1500 : _props$leaveTouchDela,
|
38859 | onClose = props.onClose,
|
38860 | onOpen = props.onOpen,
|
38861 | openProp = props.open,
|
38862 | _props$placement = props.placement,
|
38863 | placement = _props$placement === void 0 ? 'bottom' : _props$placement,
|
38864 | _props$PopperComponen = props.PopperComponent,
|
38865 | PopperComponent = _props$PopperComponen === void 0 ? Popper$1 : _props$PopperComponen,
|
38866 | PopperProps = props.PopperProps,
|
38867 | title = props.title,
|
38868 | _props$TransitionComp = props.TransitionComponent,
|
38869 | TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
|
38870 | TransitionProps = props.TransitionProps,
|
38871 | other = _objectWithoutProperties(props, ["arrow", "children", "classes", "disableFocusListener", "disableHoverListener", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "id", "interactive", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"]);
|
38872 |
|
38873 | var theme = useTheme$1();
|
38874 |
|
38875 | var _React$useState = React.useState(),
|
38876 | childNode = _React$useState[0],
|
38877 | setChildNode = _React$useState[1];
|
38878 |
|
38879 | var _React$useState2 = React.useState(null),
|
38880 | arrowRef = _React$useState2[0],
|
38881 | setArrowRef = _React$useState2[1];
|
38882 |
|
38883 | var ignoreNonTouchEvents = React.useRef(false);
|
38884 | var closeTimer = React.useRef();
|
38885 | var enterTimer = React.useRef();
|
38886 | var leaveTimer = React.useRef();
|
38887 | var touchTimer = React.useRef();
|
38888 |
|
38889 | var _useControlled = useControlled({
|
38890 | controlled: openProp,
|
38891 | default: false,
|
38892 | name: 'Tooltip',
|
38893 | state: 'open'
|
38894 | }),
|
38895 | _useControlled2 = _slicedToArray(_useControlled, 2),
|
38896 | openState = _useControlled2[0],
|
38897 | setOpenState = _useControlled2[1];
|
38898 |
|
38899 | var open = openState;
|
38900 |
|
38901 | {
|
38902 |
|
38903 | var _React$useRef = React.useRef(openProp !== undefined),
|
38904 | isControlled = _React$useRef.current;
|
38905 |
|
38906 |
|
38907 | React.useEffect(function () {
|
38908 | if (childNode && childNode.disabled && !isControlled && title !== '' && childNode.tagName.toLowerCase() === 'button') {
|
38909 | 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'));
|
38910 | }
|
38911 | }, [title, childNode, isControlled]);
|
38912 | }
|
38913 |
|
38914 | var id = useId(idProp);
|
38915 | React.useEffect(function () {
|
38916 | return function () {
|
38917 | clearTimeout(closeTimer.current);
|
38918 | clearTimeout(enterTimer.current);
|
38919 | clearTimeout(leaveTimer.current);
|
38920 | clearTimeout(touchTimer.current);
|
38921 | };
|
38922 | }, []);
|
38923 |
|
38924 | var handleOpen = function handleOpen(event) {
|
38925 | clearTimeout(hystersisTimer);
|
38926 | hystersisOpen = true;
|
38927 |
|
38928 |
|
38929 |
|
38930 | setOpenState(true);
|
38931 |
|
38932 | if (onOpen) {
|
38933 | onOpen(event);
|
38934 | }
|
38935 | };
|
38936 |
|
38937 | var handleEnter = function handleEnter() {
|
38938 | var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
38939 | return function (event) {
|
38940 | var childrenProps = children.props;
|
38941 |
|
38942 | if (event.type === 'mouseover' && childrenProps.onMouseOver && forward) {
|
38943 | childrenProps.onMouseOver(event);
|
38944 | }
|
38945 |
|
38946 | if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
|
38947 | return;
|
38948 | }
|
38949 |
|
38950 |
|
38951 |
|
38952 |
|
38953 | if (childNode) {
|
38954 | childNode.removeAttribute('title');
|
38955 | }
|
38956 |
|
38957 | clearTimeout(enterTimer.current);
|
38958 | clearTimeout(leaveTimer.current);
|
38959 |
|
38960 | if (enterDelay || hystersisOpen && enterNextDelay) {
|
38961 | event.persist();
|
38962 | enterTimer.current = setTimeout(function () {
|
38963 | handleOpen(event);
|
38964 | }, hystersisOpen ? enterNextDelay : enterDelay);
|
38965 | } else {
|
38966 | handleOpen(event);
|
38967 | }
|
38968 | };
|
38969 | };
|
38970 |
|
38971 | var _useIsFocusVisible = useIsFocusVisible(),
|
38972 | isFocusVisible = _useIsFocusVisible.isFocusVisible,
|
38973 | onBlurVisible = _useIsFocusVisible.onBlurVisible,
|
38974 | focusVisibleRef = _useIsFocusVisible.ref;
|
38975 |
|
38976 | var _React$useState3 = React.useState(false),
|
38977 | childIsFocusVisible = _React$useState3[0],
|
38978 | setChildIsFocusVisible = _React$useState3[1];
|
38979 |
|
38980 | var handleBlur = function handleBlur() {
|
38981 | if (childIsFocusVisible) {
|
38982 | setChildIsFocusVisible(false);
|
38983 | onBlurVisible();
|
38984 | }
|
38985 | };
|
38986 |
|
38987 | var handleFocus = function handleFocus() {
|
38988 | var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
38989 | return function (event) {
|
38990 |
|
38991 |
|
38992 |
|
38993 | if (!childNode) {
|
38994 | setChildNode(event.currentTarget);
|
38995 | }
|
38996 |
|
38997 | if (isFocusVisible(event)) {
|
38998 | setChildIsFocusVisible(true);
|
38999 | handleEnter()(event);
|
39000 | }
|
39001 |
|
39002 | var childrenProps = children.props;
|
39003 |
|
39004 | if (childrenProps.onFocus && forward) {
|
39005 | childrenProps.onFocus(event);
|
39006 | }
|
39007 | };
|
39008 | };
|
39009 |
|
39010 | var handleClose = function handleClose(event) {
|
39011 | clearTimeout(hystersisTimer);
|
39012 | hystersisTimer = setTimeout(function () {
|
39013 | hystersisOpen = false;
|
39014 | }, 800 + leaveDelay);
|
39015 | setOpenState(false);
|
39016 |
|
39017 | if (onClose) {
|
39018 | onClose(event);
|
39019 | }
|
39020 |
|
39021 | clearTimeout(closeTimer.current);
|
39022 | closeTimer.current = setTimeout(function () {
|
39023 | ignoreNonTouchEvents.current = false;
|
39024 | }, theme.transitions.duration.shortest);
|
39025 | };
|
39026 |
|
39027 | var handleLeave = function handleLeave() {
|
39028 | var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
39029 | return function (event) {
|
39030 | var childrenProps = children.props;
|
39031 |
|
39032 | if (event.type === 'blur') {
|
39033 | if (childrenProps.onBlur && forward) {
|
39034 | childrenProps.onBlur(event);
|
39035 | }
|
39036 |
|
39037 | handleBlur();
|
39038 | }
|
39039 |
|
39040 | if (event.type === 'mouseleave' && childrenProps.onMouseLeave && event.currentTarget === childNode) {
|
39041 | childrenProps.onMouseLeave(event);
|
39042 | }
|
39043 |
|
39044 | clearTimeout(enterTimer.current);
|
39045 | clearTimeout(leaveTimer.current);
|
39046 | event.persist();
|
39047 | leaveTimer.current = setTimeout(function () {
|
39048 | handleClose(event);
|
39049 | }, leaveDelay);
|
39050 | };
|
39051 | };
|
39052 |
|
39053 | var detectTouchStart = function detectTouchStart(event) {
|
39054 | ignoreNonTouchEvents.current = true;
|
39055 | var childrenProps = children.props;
|
39056 |
|
39057 | if (childrenProps.onTouchStart) {
|
39058 | childrenProps.onTouchStart(event);
|
39059 | }
|
39060 | };
|
39061 |
|
39062 | var handleTouchStart = function handleTouchStart(event) {
|
39063 | detectTouchStart(event);
|
39064 | clearTimeout(leaveTimer.current);
|
39065 | clearTimeout(closeTimer.current);
|
39066 | clearTimeout(touchTimer.current);
|
39067 | event.persist();
|
39068 | touchTimer.current = setTimeout(function () {
|
39069 | handleEnter()(event);
|
39070 | }, enterTouchDelay);
|
39071 | };
|
39072 |
|
39073 | var handleTouchEnd = function handleTouchEnd(event) {
|
39074 | if (children.props.onTouchEnd) {
|
39075 | children.props.onTouchEnd(event);
|
39076 | }
|
39077 |
|
39078 | clearTimeout(touchTimer.current);
|
39079 | clearTimeout(leaveTimer.current);
|
39080 | event.persist();
|
39081 | leaveTimer.current = setTimeout(function () {
|
39082 | handleClose(event);
|
39083 | }, leaveTouchDelay);
|
39084 | };
|
39085 |
|
39086 | var handleUseRef = useForkRef(setChildNode, ref);
|
39087 | var handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
|
39088 |
|
39089 | var handleOwnRef = React.useCallback(function (instance) {
|
39090 |
|
39091 | setRef(handleFocusRef, ReactDOM.findDOMNode(instance));
|
39092 | }, [handleFocusRef]);
|
39093 | var handleRef = useForkRef(children.ref, handleOwnRef);
|
39094 |
|
39095 | if (title === '') {
|
39096 | open = false;
|
39097 | }
|
39098 |
|
39099 |
|
39100 |
|
39101 |
|
39102 |
|
39103 |
|
39104 | var shouldShowNativeTitle = !open && !disableHoverListener;
|
39105 |
|
39106 | var childrenProps = _extends({
|
39107 | 'aria-describedby': open ? id : null,
|
39108 | title: shouldShowNativeTitle && typeof title === 'string' ? title : null
|
39109 | }, other, children.props, {
|
39110 | className: clsx(other.className, children.props.className),
|
39111 | onTouchStart: detectTouchStart,
|
39112 | ref: handleRef
|
39113 | });
|
39114 |
|
39115 | var interactiveWrapperListeners = {};
|
39116 |
|
39117 | if (!disableTouchListener) {
|
39118 | childrenProps.onTouchStart = handleTouchStart;
|
39119 | childrenProps.onTouchEnd = handleTouchEnd;
|
39120 | }
|
39121 |
|
39122 | if (!disableHoverListener) {
|
39123 | childrenProps.onMouseOver = handleEnter();
|
39124 | childrenProps.onMouseLeave = handleLeave();
|
39125 |
|
39126 | if (interactive) {
|
39127 | interactiveWrapperListeners.onMouseOver = handleEnter(false);
|
39128 | interactiveWrapperListeners.onMouseLeave = handleLeave(false);
|
39129 | }
|
39130 | }
|
39131 |
|
39132 | if (!disableFocusListener) {
|
39133 | childrenProps.onFocus = handleFocus();
|
39134 | childrenProps.onBlur = handleLeave();
|
39135 |
|
39136 | if (interactive) {
|
39137 | interactiveWrapperListeners.onFocus = handleFocus(false);
|
39138 | interactiveWrapperListeners.onBlur = handleLeave(false);
|
39139 | }
|
39140 | }
|
39141 |
|
39142 | {
|
39143 | if (children.props.title) {
|
39144 | 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'));
|
39145 | }
|
39146 | }
|
39147 |
|
39148 | var mergedPopperProps = React.useMemo(function () {
|
39149 | return deepmerge({
|
39150 | popperOptions: {
|
39151 | modifiers: {
|
39152 | arrow: {
|
39153 | enabled: Boolean(arrowRef),
|
39154 | element: arrowRef
|
39155 | }
|
39156 | }
|
39157 | }
|
39158 | }, PopperProps);
|
39159 | }, [arrowRef, PopperProps]);
|
39160 | return React.createElement(React.Fragment, null, React.cloneElement(children, childrenProps), React.createElement(PopperComponent, _extends({
|
39161 | className: clsx(classes.popper, interactive && classes.popperInteractive, arrow && classes.popperArrow),
|
39162 | placement: placement,
|
39163 | anchorEl: childNode,
|
39164 | open: childNode ? open : false,
|
39165 | id: childrenProps['aria-describedby'],
|
39166 | transition: true
|
39167 | }, interactiveWrapperListeners, mergedPopperProps), function (_ref) {
|
39168 | var placementInner = _ref.placement,
|
39169 | TransitionPropsInner = _ref.TransitionProps;
|
39170 | return React.createElement(TransitionComponent, _extends({
|
39171 | timeout: theme.transitions.duration.shorter
|
39172 | }, TransitionPropsInner, TransitionProps), React.createElement("div", {
|
39173 | className: clsx(classes.tooltip, classes["tooltipPlacement".concat(capitalize(placementInner.split('-')[0]))], ignoreNonTouchEvents.current && classes.touch, arrow && classes.tooltipArrow)
|
39174 | }, title, arrow ? React.createElement("span", {
|
39175 | className: classes.arrow,
|
39176 | ref: setArrowRef
|
39177 | }) : null));
|
39178 | }));
|
39179 | });
|
39180 | Tooltip.propTypes = {
|
39181 |
|
39182 |
|
39183 |
|
39184 |
|
39185 |
|
39186 | |
39187 |
|
39188 |
|
39189 | arrow: propTypes.bool,
|
39190 |
|
39191 | |
39192 |
|
39193 |
|
39194 | children: elementAcceptingRef.isRequired,
|
39195 |
|
39196 | |
39197 |
|
39198 |
|
39199 |
|
39200 | classes: propTypes.object,
|
39201 |
|
39202 | |
39203 |
|
39204 |
|
39205 | className: propTypes.string,
|
39206 |
|
39207 | |
39208 |
|
39209 |
|
39210 | disableFocusListener: propTypes.bool,
|
39211 |
|
39212 | |
39213 |
|
39214 |
|
39215 | disableHoverListener: propTypes.bool,
|
39216 |
|
39217 | |
39218 |
|
39219 |
|
39220 | disableTouchListener: propTypes.bool,
|
39221 |
|
39222 | |
39223 |
|
39224 |
|
39225 |
|
39226 | enterDelay: propTypes.number,
|
39227 |
|
39228 | |
39229 |
|
39230 |
|
39231 | enterNextDelay: propTypes.number,
|
39232 |
|
39233 | |
39234 |
|
39235 |
|
39236 | enterTouchDelay: propTypes.number,
|
39237 |
|
39238 | |
39239 |
|
39240 |
|
39241 |
|
39242 | id: propTypes.string,
|
39243 |
|
39244 | |
39245 |
|
39246 |
|
39247 |
|
39248 | interactive: propTypes.bool,
|
39249 |
|
39250 | |
39251 |
|
39252 |
|
39253 |
|
39254 | leaveDelay: propTypes.number,
|
39255 |
|
39256 | |
39257 |
|
39258 |
|
39259 | leaveTouchDelay: propTypes.number,
|
39260 |
|
39261 | |
39262 |
|
39263 |
|
39264 |
|
39265 |
|
39266 | onClose: propTypes.func,
|
39267 |
|
39268 | |
39269 |
|
39270 |
|
39271 |
|
39272 |
|
39273 | onOpen: propTypes.func,
|
39274 |
|
39275 | |
39276 |
|
39277 |
|
39278 | open: propTypes.bool,
|
39279 |
|
39280 | |
39281 |
|
39282 |
|
39283 | placement: propTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
39284 |
|
39285 | |
39286 |
|
39287 |
|
39288 | PopperComponent: propTypes.elementType,
|
39289 |
|
39290 | |
39291 |
|
39292 |
|
39293 | PopperProps: propTypes.object,
|
39294 |
|
39295 | |
39296 |
|
39297 |
|
39298 | title: propTypes
|
39299 |
|
39300 | .node.isRequired,
|
39301 |
|
39302 | |
39303 |
|
39304 |
|
39305 |
|
39306 | TransitionComponent: propTypes.elementType,
|
39307 |
|
39308 | |
39309 |
|
39310 |
|
39311 | TransitionProps: propTypes.object
|
39312 | } ;
|
39313 | var Tooltip$1 = withStyles$1(styles$1R, {
|
39314 | name: 'MuiTooltip',
|
39315 | flip: false
|
39316 | })(Tooltip);
|
39317 |
|
39318 | function defaultTrigger(store, options) {
|
39319 | var _options$disableHyste = options.disableHysteresis,
|
39320 | disableHysteresis = _options$disableHyste === void 0 ? false : _options$disableHyste,
|
39321 | _options$threshold = options.threshold,
|
39322 | threshold = _options$threshold === void 0 ? 100 : _options$threshold,
|
39323 | target = options.target;
|
39324 | var previous = store.current;
|
39325 |
|
39326 | if (target) {
|
39327 |
|
39328 | store.current = target.pageYOffset !== undefined ? target.pageYOffset : target.scrollTop;
|
39329 | }
|
39330 |
|
39331 | if (!disableHysteresis && previous !== undefined) {
|
39332 | if (store.current < previous) {
|
39333 | return false;
|
39334 | }
|
39335 | }
|
39336 |
|
39337 | return store.current > threshold;
|
39338 | }
|
39339 |
|
39340 | var defaultTarget = typeof window !== 'undefined' ? window : null;
|
39341 | function useScrollTrigger() {
|
39342 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
39343 |
|
39344 | var _options$getTrigger = options.getTrigger,
|
39345 | getTrigger = _options$getTrigger === void 0 ? defaultTrigger : _options$getTrigger,
|
39346 | _options$target = options.target,
|
39347 | target = _options$target === void 0 ? defaultTarget : _options$target,
|
39348 | other = _objectWithoutProperties(options, ["getTrigger", "target"]);
|
39349 |
|
39350 | var store = React.useRef();
|
39351 |
|
39352 | var _React$useState = React.useState(function () {
|
39353 | return getTrigger(store, other);
|
39354 | }),
|
39355 | trigger = _React$useState[0],
|
39356 | setTrigger = _React$useState[1];
|
39357 |
|
39358 | React.useEffect(function () {
|
39359 | var handleScroll = function handleScroll() {
|
39360 | setTrigger(getTrigger(store, _extends({
|
39361 | target: target
|
39362 | }, other)));
|
39363 | };
|
39364 |
|
39365 | handleScroll();
|
39366 |
|
39367 | target.addEventListener('scroll', handleScroll);
|
39368 | return function () {
|
39369 | target.removeEventListener('scroll', handleScroll);
|
39370 | };
|
39371 |
|
39372 | }, [target, getTrigger, JSON.stringify(other)]);
|
39373 | return trigger;
|
39374 | }
|
39375 |
|
39376 | var warnedOnce$c = false;
|
39377 | |
39378 |
|
39379 |
|
39380 |
|
39381 |
|
39382 |
|
39383 | var withMobileDialog = function withMobileDialog() {
|
39384 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
39385 | return function (Component) {
|
39386 | {
|
39387 | if (!warnedOnce$c) {
|
39388 | console.warn(['Material-UI: The `withMobileDialog` function is deprecated.', 'Head to https://material-ui.com/r/migration-v4/#dialog for a migration path.'].join('\n'));
|
39389 | warnedOnce$c = true;
|
39390 | }
|
39391 | }
|
39392 |
|
39393 | var _options$breakpoint = options.breakpoint,
|
39394 | breakpoint = _options$breakpoint === void 0 ? 'sm' : _options$breakpoint;
|
39395 |
|
39396 | function WithMobileDialog(props) {
|
39397 | return React.createElement(Component, _extends({
|
39398 | fullScreen: isWidthDown(breakpoint, props.width)
|
39399 | }, props));
|
39400 | }
|
39401 |
|
39402 | WithMobileDialog.propTypes = {
|
39403 | width: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired
|
39404 | } ;
|
39405 | return withWidth()(WithMobileDialog);
|
39406 | };
|
39407 | };
|
39408 |
|
39409 | var styles$1S = {
|
39410 | entering: {
|
39411 | transform: 'none'
|
39412 | },
|
39413 | entered: {
|
39414 | transform: 'none'
|
39415 | }
|
39416 | };
|
39417 | var defaultTimeout$2 = {
|
39418 | enter: duration.enteringScreen,
|
39419 | exit: duration.leavingScreen
|
39420 | };
|
39421 | |
39422 |
|
39423 |
|
39424 |
|
39425 |
|
39426 |
|
39427 | var Zoom = React.forwardRef(function Zoom(props, ref) {
|
39428 | var children = props.children,
|
39429 | _props$disableStrictM = props.disableStrictModeCompat,
|
39430 | disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,
|
39431 | inProp = props.in,
|
39432 | onEnter = props.onEnter,
|
39433 | onEntered = props.onEntered,
|
39434 | onEntering = props.onEntering,
|
39435 | onExit = props.onExit,
|
39436 | onExited = props.onExited,
|
39437 | onExiting = props.onExiting,
|
39438 | style = props.style,
|
39439 | _props$timeout = props.timeout,
|
39440 | timeout = _props$timeout === void 0 ? defaultTimeout$2 : _props$timeout,
|
39441 | _props$TransitionComp = props.TransitionComponent,
|
39442 | TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
|
39443 | other = _objectWithoutProperties(props, ["children", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
|
39444 |
|
39445 | var theme = useTheme$1();
|
39446 | var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
|
39447 | var nodeRef = React.useRef(null);
|
39448 | var foreignRef = useForkRef(children.ref, ref);
|
39449 | var handleRef = useForkRef(enableStrictModeCompat ? nodeRef : undefined, foreignRef);
|
39450 |
|
39451 | var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
|
39452 | return function (nodeOrAppearing, maybeAppearing) {
|
39453 | if (callback) {
|
39454 | var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],
|
39455 | _ref2 = _slicedToArray(_ref, 2),
|
39456 | node = _ref2[0],
|
39457 | isAppearing = _ref2[1];
|
39458 |
|
39459 |
|
39460 | if (isAppearing === undefined) {
|
39461 | callback(node);
|
39462 | } else {
|
39463 | callback(node, isAppearing);
|
39464 | }
|
39465 | }
|
39466 | };
|
39467 | };
|
39468 |
|
39469 | var handleEntering = normalizedTransitionCallback(onEntering);
|
39470 | var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
|
39471 | reflow(node);
|
39472 |
|
39473 | var transitionProps = getTransitionProps({
|
39474 | style: style,
|
39475 | timeout: timeout
|
39476 | }, {
|
39477 | mode: 'enter'
|
39478 | });
|
39479 | node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
|
39480 | node.style.transition = theme.transitions.create('transform', transitionProps);
|
39481 |
|
39482 | if (onEnter) {
|
39483 | onEnter(node, isAppearing);
|
39484 | }
|
39485 | });
|
39486 | var handleEntered = normalizedTransitionCallback(onEntered);
|
39487 | var handleExiting = normalizedTransitionCallback(onExiting);
|
39488 | var handleExit = normalizedTransitionCallback(function (node) {
|
39489 | var transitionProps = getTransitionProps({
|
39490 | style: style,
|
39491 | timeout: timeout
|
39492 | }, {
|
39493 | mode: 'exit'
|
39494 | });
|
39495 | node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
|
39496 | node.style.transition = theme.transitions.create('transform', transitionProps);
|
39497 |
|
39498 | if (onExit) {
|
39499 | onExit(node);
|
39500 | }
|
39501 | });
|
39502 | var handleExited = normalizedTransitionCallback(onExited);
|
39503 | return React.createElement(TransitionComponent, _extends({
|
39504 | appear: true,
|
39505 | in: inProp,
|
39506 | nodeRef: enableStrictModeCompat ? nodeRef : undefined,
|
39507 | onEnter: handleEnter,
|
39508 | onEntered: handleEntered,
|
39509 | onEntering: handleEntering,
|
39510 | onExit: handleExit,
|
39511 | onExited: handleExited,
|
39512 | onExiting: handleExiting,
|
39513 | timeout: timeout
|
39514 | }, other), function (state, childProps) {
|
39515 | return React.cloneElement(children, _extends({
|
39516 | style: _extends({
|
39517 | transform: 'scale(0)',
|
39518 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
39519 | }, styles$1S[state], style, children.props.style),
|
39520 | ref: handleRef
|
39521 | }, childProps));
|
39522 | });
|
39523 | });
|
39524 | Zoom.propTypes = {
|
39525 |
|
39526 |
|
39527 |
|
39528 |
|
39529 |
|
39530 | |
39531 |
|
39532 |
|
39533 | children: propTypes.element,
|
39534 |
|
39535 | |
39536 |
|
39537 |
|
39538 |
|
39539 |
|
39540 | disableStrictModeCompat: propTypes.bool,
|
39541 |
|
39542 | |
39543 |
|
39544 |
|
39545 | in: propTypes.bool,
|
39546 |
|
39547 | |
39548 |
|
39549 |
|
39550 | onEnter: propTypes.func,
|
39551 |
|
39552 | |
39553 |
|
39554 |
|
39555 | onEntered: propTypes.func,
|
39556 |
|
39557 | |
39558 |
|
39559 |
|
39560 | onEntering: propTypes.func,
|
39561 |
|
39562 | |
39563 |
|
39564 |
|
39565 | onExit: propTypes.func,
|
39566 |
|
39567 | |
39568 |
|
39569 |
|
39570 | onExited: propTypes.func,
|
39571 |
|
39572 | |
39573 |
|
39574 |
|
39575 | onExiting: propTypes.func,
|
39576 |
|
39577 | |
39578 |
|
39579 |
|
39580 | style: propTypes.object,
|
39581 |
|
39582 | |
39583 |
|
39584 |
|
39585 |
|
39586 | timeout: propTypes.oneOfType([propTypes.number, propTypes.shape({
|
39587 | appear: propTypes.number,
|
39588 | enter: propTypes.number,
|
39589 | exit: propTypes.number
|
39590 | })])
|
39591 | } ;
|
39592 |
|
39593 | exports.Accordion = Accordion$1;
|
39594 | exports.AccordionActions = AccordionActions$1;
|
39595 | exports.AccordionDetails = AccordionDetails$1;
|
39596 | exports.AccordionSummary = AccordionSummary$1;
|
39597 | exports.AppBar = AppBar$1;
|
39598 | exports.Avatar = Avatar$1;
|
39599 | exports.Backdrop = Backdrop$1;
|
39600 | exports.Badge = Badge$1;
|
39601 | exports.BottomNavigation = BottomNavigation$1;
|
39602 | exports.BottomNavigationAction = BottomNavigationAction$1;
|
39603 | exports.Box = Box;
|
39604 | exports.Breadcrumbs = Breadcrumbs$1;
|
39605 | exports.Button = Button$1;
|
39606 | exports.ButtonBase = ButtonBase$1;
|
39607 | exports.ButtonGroup = ButtonGroup$1;
|
39608 | exports.Card = Card$1;
|
39609 | exports.CardActionArea = CardActionArea$1;
|
39610 | exports.CardActions = CardActions$1;
|
39611 | exports.CardContent = CardContent$1;
|
39612 | exports.CardHeader = CardHeader$1;
|
39613 | exports.CardMedia = CardMedia$1;
|
39614 | exports.Checkbox = Checkbox$1;
|
39615 | exports.Chip = Chip$1;
|
39616 | exports.CircularProgress = CircularProgress$1;
|
39617 | exports.ClickAwayListener = ClickAwayListener;
|
39618 | exports.Collapse = Collapse$1;
|
39619 | exports.Container = Container$1;
|
39620 | exports.CssBaseline = CssBaseline$1;
|
39621 | exports.Dialog = Dialog$1;
|
39622 | exports.DialogActions = DialogActions$1;
|
39623 | exports.DialogContent = DialogContent$1;
|
39624 | exports.DialogContentText = DialogContentText$1;
|
39625 | exports.DialogTitle = DialogTitle$1;
|
39626 | exports.Divider = Divider$1;
|
39627 | exports.Drawer = Drawer$1;
|
39628 | exports.ExpansionPanel = ExpansionPanel$1;
|
39629 | exports.ExpansionPanelActions = ExpansionPanelActions$1;
|
39630 | exports.ExpansionPanelDetails = ExpansionPanelDetails$1;
|
39631 | exports.ExpansionPanelSummary = ExpansionPanelSummary$1;
|
39632 | exports.Fab = Fab$1;
|
39633 | exports.Fade = Fade;
|
39634 | exports.FilledInput = FilledInput$1;
|
39635 | exports.FormControl = FormControl$1;
|
39636 | exports.FormControlLabel = FormControlLabel$1;
|
39637 | exports.FormGroup = FormGroup$1;
|
39638 | exports.FormHelperText = FormHelperText$1;
|
39639 | exports.FormLabel = FormLabel$1;
|
39640 | exports.Grid = StyledGrid;
|
39641 | exports.GridList = GridList$1;
|
39642 | exports.GridListTile = GridListTile$1;
|
39643 | exports.GridListTileBar = GridListTileBar$1;
|
39644 | exports.Grow = Grow;
|
39645 | exports.Hidden = Hidden;
|
39646 | exports.Icon = Icon$1;
|
39647 | exports.IconButton = IconButton$1;
|
39648 | exports.ImageList = ImageList$1;
|
39649 | exports.ImageListItem = ImageListItem$1;
|
39650 | exports.ImageListItemBar = ImageListItemBar$1;
|
39651 | exports.Input = Input$1;
|
39652 | exports.InputAdornment = InputAdornment$1;
|
39653 | exports.InputBase = InputBase$1;
|
39654 | exports.InputLabel = InputLabel$1;
|
39655 | exports.LinearProgress = LinearProgress$1;
|
39656 | exports.Link = Link$1;
|
39657 | exports.List = List$1;
|
39658 | exports.ListItem = ListItem$1;
|
39659 | exports.ListItemAvatar = ListItemAvatar$1;
|
39660 | exports.ListItemIcon = ListItemIcon$1;
|
39661 | exports.ListItemSecondaryAction = ListItemSecondaryAction$1;
|
39662 | exports.ListItemText = ListItemText$1;
|
39663 | exports.ListSubheader = ListSubheader$1;
|
39664 | exports.Menu = Menu$1;
|
39665 | exports.MenuItem = MenuItem$1;
|
39666 | exports.MenuList = MenuList;
|
39667 | exports.MobileStepper = MobileStepper$1;
|
39668 | exports.Modal = Modal;
|
39669 | exports.ModalManager = ModalManager;
|
39670 | exports.MuiThemeProvider = ThemeProvider;
|
39671 | exports.NativeSelect = NativeSelect$1;
|
39672 | exports.NoSsr = NoSsr;
|
39673 | exports.OutlinedInput = OutlinedInput$1;
|
39674 | exports.Paper = Paper$1;
|
39675 | exports.Popover = Popover$1;
|
39676 | exports.Popper = Popper$1;
|
39677 | exports.Portal = Portal;
|
39678 | exports.Radio = Radio$1;
|
39679 | exports.RadioGroup = RadioGroup;
|
39680 | exports.RootRef = RootRef;
|
39681 | exports.Select = Select$1;
|
39682 | exports.ServerStyleSheets = ServerStyleSheets;
|
39683 | exports.Slide = Slide;
|
39684 | exports.Slider = Slider$1;
|
39685 | exports.Snackbar = Snackbar$1;
|
39686 | exports.SnackbarContent = SnackbarContent$1;
|
39687 | exports.Step = Step$1;
|
39688 | exports.StepButton = StepButton$1;
|
39689 | exports.StepConnector = StepConnector$1;
|
39690 | exports.StepContent = StepContent$1;
|
39691 | exports.StepIcon = StepIcon$1;
|
39692 | exports.StepLabel = StepLabel$1;
|
39693 | exports.Stepper = Stepper$1;
|
39694 | exports.StylesProvider = StylesProvider;
|
39695 | exports.SvgIcon = SvgIcon$1;
|
39696 | exports.SwipeableDrawer = SwipeableDrawer;
|
39697 | exports.Switch = Switch$1;
|
39698 | exports.Tab = Tab$1;
|
39699 | exports.TabScrollButton = TabScrollButton$1;
|
39700 | exports.Table = Table$1;
|
39701 | exports.TableBody = TableBody$1;
|
39702 | exports.TableCell = TableCell$1;
|
39703 | exports.TableContainer = TableContainer$1;
|
39704 | exports.TableFooter = TableFooter$1;
|
39705 | exports.TableHead = TableHead$1;
|
39706 | exports.TablePagination = TablePagination$1;
|
39707 | exports.TableRow = TableRow$1;
|
39708 | exports.TableSortLabel = TableSortLabel$1;
|
39709 | exports.Tabs = Tabs$1;
|
39710 | exports.TextField = TextField$1;
|
39711 | exports.TextareaAutosize = TextareaAutosize;
|
39712 | exports.ThemeProvider = ThemeProvider;
|
39713 | exports.Toolbar = Toolbar$1;
|
39714 | exports.Tooltip = Tooltip$1;
|
39715 | exports.Typography = Typography$1;
|
39716 | exports.Unstable_TrapFocus = Unstable_TrapFocus;
|
39717 | exports.Zoom = Zoom;
|
39718 | exports.alpha = alpha;
|
39719 | exports.capitalize = capitalize;
|
39720 | exports.colors = index;
|
39721 | exports.createChainedFunction = createChainedFunction;
|
39722 | exports.createGenerateClassName = createGenerateClassName;
|
39723 | exports.createMuiTheme = createMuiTheme;
|
39724 | exports.createStyles = createStyles$1;
|
39725 | exports.createSvgIcon = createSvgIcon;
|
39726 | exports.createTheme = createTheme;
|
39727 | exports.darken = darken;
|
39728 | exports.debounce = debounce;
|
39729 | exports.decomposeColor = decomposeColor;
|
39730 | exports.deprecatedPropType = deprecatedPropType;
|
39731 | exports.duration = duration;
|
39732 | exports.easing = easing;
|
39733 | exports.emphasize = emphasize;
|
39734 | exports.fade = fade;
|
39735 | exports.getContrastRatio = getContrastRatio;
|
39736 | exports.getLuminance = getLuminance;
|
39737 | exports.hexToRgb = hexToRgb;
|
39738 | exports.hslToRgb = hslToRgb;
|
39739 | exports.isMuiElement = isMuiElement;
|
39740 | exports.isWidthDown = isWidthDown;
|
39741 | exports.isWidthUp = isWidthUp;
|
39742 | exports.jssPreset = jssPreset;
|
39743 | exports.lighten = lighten;
|
39744 | exports.makeStyles = makeStyles$1;
|
39745 | exports.ownerDocument = ownerDocument;
|
39746 | exports.ownerWindow = ownerWindow;
|
39747 | exports.recomposeColor = recomposeColor;
|
39748 | exports.requirePropFactory = requirePropFactory;
|
39749 | exports.responsiveFontSizes = responsiveFontSizes;
|
39750 | exports.rgbToHex = rgbToHex;
|
39751 | exports.setRef = setRef;
|
39752 | exports.styleFunction = styleFunction;
|
39753 | exports.styled = styled$1;
|
39754 | exports.unstable_createMuiStrictModeTheme = createMuiStrictModeTheme;
|
39755 | exports.unstable_useId = useId;
|
39756 | exports.unsupportedProp = unsupportedProp;
|
39757 | exports.useControlled = useControlled;
|
39758 | exports.useEventCallback = useEventCallback;
|
39759 | exports.useForkRef = useForkRef;
|
39760 | exports.useFormControl = useFormControl$1;
|
39761 | exports.useIsFocusVisible = useIsFocusVisible;
|
39762 | exports.useMediaQuery = useMediaQuery;
|
39763 | exports.useRadioGroup = useRadioGroup;
|
39764 | exports.useScrollTrigger = useScrollTrigger;
|
39765 | exports.useTheme = useTheme$1;
|
39766 | exports.withMobileDialog = withMobileDialog;
|
39767 | exports.withStyles = withStyles$1;
|
39768 | exports.withTheme = withTheme$1;
|
39769 | exports.withWidth = withWidth;
|
39770 |
|
39771 | Object.defineProperty(exports, '__esModule', { value: true });
|
39772 |
|
39773 | })));
|