@redsift/table 11.6.0-muiv5 → 11.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_internal/BasePopper.js +2 -2
- package/_internal/ControlledPagination.js +32 -24
- package/_internal/ControlledPagination.js.map +1 -1
- package/_internal/DataGrid2.js +64 -80
- package/_internal/DataGrid2.js.map +1 -1
- package/_internal/GridToolbarFilterSemanticField2.js +12 -12
- package/_internal/GridToolbarFilterSemanticField2.js.map +1 -1
- package/_internal/Portal.js +1 -1
- package/_internal/StatefulDataGrid.js +1 -1
- package/_internal/StatefulDataGrid2.js +1904 -238
- package/_internal/StatefulDataGrid2.js.map +1 -1
- package/_internal/TextCell2.js +1 -1
- package/_internal/Toolbar2.js +3 -3
- package/_internal/Toolbar2.js.map +1 -1
- package/_internal/ToolbarWrapper2.js +11 -17
- package/_internal/ToolbarWrapper2.js.map +1 -1
- package/_internal/_rollupPluginBabelHelpers.js +1 -1
- package/_internal/useControlledDatagridState.js +24 -1831
- package/_internal/useControlledDatagridState.js.map +1 -1
- package/index.d.ts +82 -79
- package/index.js +48 -3
- package/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,97 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { P as PropTypes, z as exactProp, x as useTheme$1, a as _extends, _ as _objectWithoutPropertiesLoose, T as THEME_ID } from './Portal.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useState, useEffect } from 'react';
|
|
4
4
|
import { j as jsxRuntimeExports } from './jsx-runtime.js';
|
|
5
5
|
import { ThemeContext as ThemeContext$2 } from '@emotion/react';
|
|
6
|
-
import
|
|
7
|
-
import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
|
|
8
|
-
import { Icon } from '@redsift/design-system';
|
|
9
|
-
import { mdiSync } from '@redsift/icons';
|
|
10
|
-
import { u as useFormControl, f as formControlState, i as isAdornedStart, a as isFilled, F as FormControlContext, b as useId, c as Select, I as Input, d as FilledInput, O as OutlinedInput } from './ControlledPagination.js';
|
|
11
|
-
import styled$2, { css } from 'styled-components';
|
|
6
|
+
import styled, { css } from 'styled-components';
|
|
12
7
|
|
|
13
8
|
/* eslint-disable */
|
|
14
9
|
// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
|
|
15
10
|
var ponyfillGlobal = typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();
|
|
16
11
|
|
|
17
|
-
function isMuiElement(element, muiNames) {
|
|
18
|
-
return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const _excluded$7 = ["sx"];
|
|
22
|
-
const splitProps = props => {
|
|
23
|
-
var _props$theme$unstable, _props$theme;
|
|
24
|
-
const result = {
|
|
25
|
-
systemProps: {},
|
|
26
|
-
otherProps: {}
|
|
27
|
-
};
|
|
28
|
-
const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
|
|
29
|
-
Object.keys(props).forEach(prop => {
|
|
30
|
-
if (config[prop]) {
|
|
31
|
-
result.systemProps[prop] = props[prop];
|
|
32
|
-
} else {
|
|
33
|
-
result.otherProps[prop] = props[prop];
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
return result;
|
|
37
|
-
};
|
|
38
|
-
function extendSxProp(props) {
|
|
39
|
-
const {
|
|
40
|
-
sx: inSx
|
|
41
|
-
} = props,
|
|
42
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$7);
|
|
43
|
-
const {
|
|
44
|
-
systemProps,
|
|
45
|
-
otherProps
|
|
46
|
-
} = splitProps(other);
|
|
47
|
-
let finalSx;
|
|
48
|
-
if (Array.isArray(inSx)) {
|
|
49
|
-
finalSx = [systemProps, ...inSx];
|
|
50
|
-
} else if (typeof inSx === 'function') {
|
|
51
|
-
finalSx = (...args) => {
|
|
52
|
-
const result = inSx(...args);
|
|
53
|
-
if (!isPlainObject(result)) {
|
|
54
|
-
return systemProps;
|
|
55
|
-
}
|
|
56
|
-
return _extends({}, systemProps, result);
|
|
57
|
-
};
|
|
58
|
-
} else {
|
|
59
|
-
finalSx = _extends({}, systemProps, inSx);
|
|
60
|
-
}
|
|
61
|
-
return _extends({}, otherProps, {
|
|
62
|
-
sx: finalSx
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
const _excluded$6 = ["className", "component"];
|
|
67
|
-
function createBox(options = {}) {
|
|
68
|
-
const {
|
|
69
|
-
themeId,
|
|
70
|
-
defaultTheme,
|
|
71
|
-
defaultClassName = 'MuiBox-root',
|
|
72
|
-
generateClassName
|
|
73
|
-
} = options;
|
|
74
|
-
const BoxRoot = styled('div', {
|
|
75
|
-
shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
|
|
76
|
-
})(styleFunctionSx);
|
|
77
|
-
const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
|
|
78
|
-
const theme = useTheme$1(defaultTheme);
|
|
79
|
-
const _extendSxProp = extendSxProp(inProps),
|
|
80
|
-
{
|
|
81
|
-
className,
|
|
82
|
-
component = 'div'
|
|
83
|
-
} = _extendSxProp,
|
|
84
|
-
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$6);
|
|
85
|
-
return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends({
|
|
86
|
-
as: component,
|
|
87
|
-
ref: ref,
|
|
88
|
-
className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
|
|
89
|
-
theme: themeId ? theme[themeId] || theme : theme
|
|
90
|
-
}, other));
|
|
91
|
-
});
|
|
92
|
-
return Box;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
12
|
const ThemeContext = /*#__PURE__*/React.createContext(null);
|
|
96
13
|
if (process.env.NODE_ENV !== 'production') {
|
|
97
14
|
ThemeContext.displayName = 'ThemeContext';
|
|
@@ -203,7 +120,7 @@ function ThemeProvider$1(props) {
|
|
|
203
120
|
theme: localTheme,
|
|
204
121
|
themeId
|
|
205
122
|
} = props;
|
|
206
|
-
const upperTheme = useTheme$
|
|
123
|
+
const upperTheme = useTheme$1(EMPTY_THEME);
|
|
207
124
|
const upperPrivateTheme = useTheme() || EMPTY_THEME;
|
|
208
125
|
if (process.env.NODE_ENV !== 'production') {
|
|
209
126
|
if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
|
|
@@ -242,12 +159,12 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
242
159
|
process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
|
|
243
160
|
}
|
|
244
161
|
|
|
245
|
-
const _excluded
|
|
162
|
+
const _excluded = ["theme"];
|
|
246
163
|
function ThemeProvider(_ref) {
|
|
247
164
|
let {
|
|
248
165
|
theme: themeInput
|
|
249
166
|
} = _ref,
|
|
250
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded
|
|
167
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
251
168
|
const scopedTheme = themeInput[THEME_ID];
|
|
252
169
|
return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends({}, props, {
|
|
253
170
|
themeId: scopedTheme ? THEME_ID : undefined,
|
|
@@ -265,1715 +182,6 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
|
|
|
265
182
|
theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
|
|
266
183
|
} : void 0;
|
|
267
184
|
|
|
268
|
-
const defaultTheme = createTheme();
|
|
269
|
-
const Box = createBox({
|
|
270
|
-
themeId: THEME_ID,
|
|
271
|
-
defaultTheme,
|
|
272
|
-
defaultClassName: 'MuiBox-root',
|
|
273
|
-
generateClassName: ClassNameGenerator.generate
|
|
274
|
-
});
|
|
275
|
-
process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
|
|
276
|
-
// ----------------------------- Warning --------------------------------
|
|
277
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
278
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
279
|
-
// ----------------------------------------------------------------------
|
|
280
|
-
/**
|
|
281
|
-
* @ignore
|
|
282
|
-
*/
|
|
283
|
-
children: PropTypes.node,
|
|
284
|
-
/**
|
|
285
|
-
* The component used for the root node.
|
|
286
|
-
* Either a string to use a HTML element or a component.
|
|
287
|
-
*/
|
|
288
|
-
component: PropTypes.elementType,
|
|
289
|
-
/**
|
|
290
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
291
|
-
*/
|
|
292
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
|
293
|
-
} : void 0;
|
|
294
|
-
var Box$1 = Box;
|
|
295
|
-
|
|
296
|
-
function getFormLabelUtilityClasses(slot) {
|
|
297
|
-
return generateUtilityClass('MuiFormLabel', slot);
|
|
298
|
-
}
|
|
299
|
-
const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
|
|
300
|
-
var formLabelClasses$1 = formLabelClasses;
|
|
301
|
-
|
|
302
|
-
const _excluded$4 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
|
|
303
|
-
const useUtilityClasses$4 = ownerState => {
|
|
304
|
-
const {
|
|
305
|
-
classes,
|
|
306
|
-
color,
|
|
307
|
-
focused,
|
|
308
|
-
disabled,
|
|
309
|
-
error,
|
|
310
|
-
filled,
|
|
311
|
-
required
|
|
312
|
-
} = ownerState;
|
|
313
|
-
const slots = {
|
|
314
|
-
root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', filled && 'filled', focused && 'focused', required && 'required'],
|
|
315
|
-
asterisk: ['asterisk', error && 'error']
|
|
316
|
-
};
|
|
317
|
-
return composeClasses(slots, getFormLabelUtilityClasses, classes);
|
|
318
|
-
};
|
|
319
|
-
const FormLabelRoot = styled$1('label', {
|
|
320
|
-
name: 'MuiFormLabel',
|
|
321
|
-
slot: 'Root',
|
|
322
|
-
overridesResolver: ({
|
|
323
|
-
ownerState
|
|
324
|
-
}, styles) => {
|
|
325
|
-
return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
|
|
326
|
-
}
|
|
327
|
-
})(({
|
|
328
|
-
theme,
|
|
329
|
-
ownerState
|
|
330
|
-
}) => _extends({
|
|
331
|
-
color: (theme.vars || theme).palette.text.secondary
|
|
332
|
-
}, theme.typography.body1, {
|
|
333
|
-
lineHeight: '1.4375em',
|
|
334
|
-
padding: 0,
|
|
335
|
-
position: 'relative',
|
|
336
|
-
[`&.${formLabelClasses$1.focused}`]: {
|
|
337
|
-
color: (theme.vars || theme).palette[ownerState.color].main
|
|
338
|
-
},
|
|
339
|
-
[`&.${formLabelClasses$1.disabled}`]: {
|
|
340
|
-
color: (theme.vars || theme).palette.text.disabled
|
|
341
|
-
},
|
|
342
|
-
[`&.${formLabelClasses$1.error}`]: {
|
|
343
|
-
color: (theme.vars || theme).palette.error.main
|
|
344
|
-
}
|
|
345
|
-
}));
|
|
346
|
-
const AsteriskComponent = styled$1('span', {
|
|
347
|
-
name: 'MuiFormLabel',
|
|
348
|
-
slot: 'Asterisk',
|
|
349
|
-
overridesResolver: (props, styles) => styles.asterisk
|
|
350
|
-
})(({
|
|
351
|
-
theme
|
|
352
|
-
}) => ({
|
|
353
|
-
[`&.${formLabelClasses$1.error}`]: {
|
|
354
|
-
color: (theme.vars || theme).palette.error.main
|
|
355
|
-
}
|
|
356
|
-
}));
|
|
357
|
-
const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {
|
|
358
|
-
const props = useThemeProps({
|
|
359
|
-
props: inProps,
|
|
360
|
-
name: 'MuiFormLabel'
|
|
361
|
-
});
|
|
362
|
-
const {
|
|
363
|
-
children,
|
|
364
|
-
className,
|
|
365
|
-
component = 'label'
|
|
366
|
-
} = props,
|
|
367
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$4);
|
|
368
|
-
const muiFormControl = useFormControl();
|
|
369
|
-
const fcs = formControlState({
|
|
370
|
-
props,
|
|
371
|
-
muiFormControl,
|
|
372
|
-
states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
|
|
373
|
-
});
|
|
374
|
-
const ownerState = _extends({}, props, {
|
|
375
|
-
color: fcs.color || 'primary',
|
|
376
|
-
component,
|
|
377
|
-
disabled: fcs.disabled,
|
|
378
|
-
error: fcs.error,
|
|
379
|
-
filled: fcs.filled,
|
|
380
|
-
focused: fcs.focused,
|
|
381
|
-
required: fcs.required
|
|
382
|
-
});
|
|
383
|
-
const classes = useUtilityClasses$4(ownerState);
|
|
384
|
-
return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, _extends({
|
|
385
|
-
as: component,
|
|
386
|
-
ownerState: ownerState,
|
|
387
|
-
className: clsx(classes.root, className),
|
|
388
|
-
ref: ref
|
|
389
|
-
}, other, {
|
|
390
|
-
children: [children, fcs.required && /*#__PURE__*/jsxRuntimeExports.jsxs(AsteriskComponent, {
|
|
391
|
-
ownerState: ownerState,
|
|
392
|
-
"aria-hidden": true,
|
|
393
|
-
className: classes.asterisk,
|
|
394
|
-
children: ["\u2009", '*']
|
|
395
|
-
})]
|
|
396
|
-
}));
|
|
397
|
-
});
|
|
398
|
-
process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes */ = {
|
|
399
|
-
// ----------------------------- Warning --------------------------------
|
|
400
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
401
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
402
|
-
// ----------------------------------------------------------------------
|
|
403
|
-
/**
|
|
404
|
-
* The content of the component.
|
|
405
|
-
*/
|
|
406
|
-
children: PropTypes.node,
|
|
407
|
-
/**
|
|
408
|
-
* Override or extend the styles applied to the component.
|
|
409
|
-
*/
|
|
410
|
-
classes: PropTypes.object,
|
|
411
|
-
/**
|
|
412
|
-
* @ignore
|
|
413
|
-
*/
|
|
414
|
-
className: PropTypes.string,
|
|
415
|
-
/**
|
|
416
|
-
* The color of the component.
|
|
417
|
-
* It supports both default and custom theme colors, which can be added as shown in the
|
|
418
|
-
* [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
|
|
419
|
-
*/
|
|
420
|
-
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
|
|
421
|
-
/**
|
|
422
|
-
* The component used for the root node.
|
|
423
|
-
* Either a string to use a HTML element or a component.
|
|
424
|
-
*/
|
|
425
|
-
component: PropTypes.elementType,
|
|
426
|
-
/**
|
|
427
|
-
* If `true`, the label should be displayed in a disabled state.
|
|
428
|
-
*/
|
|
429
|
-
disabled: PropTypes.bool,
|
|
430
|
-
/**
|
|
431
|
-
* If `true`, the label is displayed in an error state.
|
|
432
|
-
*/
|
|
433
|
-
error: PropTypes.bool,
|
|
434
|
-
/**
|
|
435
|
-
* If `true`, the label should use filled classes key.
|
|
436
|
-
*/
|
|
437
|
-
filled: PropTypes.bool,
|
|
438
|
-
/**
|
|
439
|
-
* If `true`, the input of this label is focused (used by `FormGroup` components).
|
|
440
|
-
*/
|
|
441
|
-
focused: PropTypes.bool,
|
|
442
|
-
/**
|
|
443
|
-
* If `true`, the label will indicate that the `input` is required.
|
|
444
|
-
*/
|
|
445
|
-
required: PropTypes.bool,
|
|
446
|
-
/**
|
|
447
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
448
|
-
*/
|
|
449
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
|
450
|
-
} : void 0;
|
|
451
|
-
var FormLabel$1 = FormLabel;
|
|
452
|
-
|
|
453
|
-
function getInputLabelUtilityClasses(slot) {
|
|
454
|
-
return generateUtilityClass('MuiInputLabel', slot);
|
|
455
|
-
}
|
|
456
|
-
generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
|
|
457
|
-
|
|
458
|
-
const _excluded$3 = ["disableAnimation", "margin", "shrink", "variant", "className"];
|
|
459
|
-
const useUtilityClasses$3 = ownerState => {
|
|
460
|
-
const {
|
|
461
|
-
classes,
|
|
462
|
-
formControl,
|
|
463
|
-
size,
|
|
464
|
-
shrink,
|
|
465
|
-
disableAnimation,
|
|
466
|
-
variant,
|
|
467
|
-
required
|
|
468
|
-
} = ownerState;
|
|
469
|
-
const slots = {
|
|
470
|
-
root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size === 'small' && 'sizeSmall', variant],
|
|
471
|
-
asterisk: [required && 'asterisk']
|
|
472
|
-
};
|
|
473
|
-
const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
|
|
474
|
-
return _extends({}, classes, composedClasses);
|
|
475
|
-
};
|
|
476
|
-
const InputLabelRoot = styled$1(FormLabel$1, {
|
|
477
|
-
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
|
478
|
-
name: 'MuiInputLabel',
|
|
479
|
-
slot: 'Root',
|
|
480
|
-
overridesResolver: (props, styles) => {
|
|
481
|
-
const {
|
|
482
|
-
ownerState
|
|
483
|
-
} = props;
|
|
484
|
-
return [{
|
|
485
|
-
[`& .${formLabelClasses$1.asterisk}`]: styles.asterisk
|
|
486
|
-
}, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
|
|
487
|
-
}
|
|
488
|
-
})(({
|
|
489
|
-
theme,
|
|
490
|
-
ownerState
|
|
491
|
-
}) => _extends({
|
|
492
|
-
display: 'block',
|
|
493
|
-
transformOrigin: 'top left',
|
|
494
|
-
whiteSpace: 'nowrap',
|
|
495
|
-
overflow: 'hidden',
|
|
496
|
-
textOverflow: 'ellipsis',
|
|
497
|
-
maxWidth: '100%'
|
|
498
|
-
}, ownerState.formControl && {
|
|
499
|
-
position: 'absolute',
|
|
500
|
-
left: 0,
|
|
501
|
-
top: 0,
|
|
502
|
-
// slight alteration to spec spacing to match visual spec result
|
|
503
|
-
transform: 'translate(0, 20px) scale(1)'
|
|
504
|
-
}, ownerState.size === 'small' && {
|
|
505
|
-
// Compensation for the `Input.inputSizeSmall` style.
|
|
506
|
-
transform: 'translate(0, 17px) scale(1)'
|
|
507
|
-
}, ownerState.shrink && {
|
|
508
|
-
transform: 'translate(0, -1.5px) scale(0.75)',
|
|
509
|
-
transformOrigin: 'top left',
|
|
510
|
-
maxWidth: '133%'
|
|
511
|
-
}, !ownerState.disableAnimation && {
|
|
512
|
-
transition: theme.transitions.create(['color', 'transform', 'max-width'], {
|
|
513
|
-
duration: theme.transitions.duration.shorter,
|
|
514
|
-
easing: theme.transitions.easing.easeOut
|
|
515
|
-
})
|
|
516
|
-
}, ownerState.variant === 'filled' && _extends({
|
|
517
|
-
// Chrome's autofill feature gives the input field a yellow background.
|
|
518
|
-
// Since the input field is behind the label in the HTML tree,
|
|
519
|
-
// the input field is drawn last and hides the label with an opaque background color.
|
|
520
|
-
// zIndex: 1 will raise the label above opaque background-colors of input.
|
|
521
|
-
zIndex: 1,
|
|
522
|
-
pointerEvents: 'none',
|
|
523
|
-
transform: 'translate(12px, 16px) scale(1)',
|
|
524
|
-
maxWidth: 'calc(100% - 24px)'
|
|
525
|
-
}, ownerState.size === 'small' && {
|
|
526
|
-
transform: 'translate(12px, 13px) scale(1)'
|
|
527
|
-
}, ownerState.shrink && _extends({
|
|
528
|
-
userSelect: 'none',
|
|
529
|
-
pointerEvents: 'auto',
|
|
530
|
-
transform: 'translate(12px, 7px) scale(0.75)',
|
|
531
|
-
maxWidth: 'calc(133% - 24px)'
|
|
532
|
-
}, ownerState.size === 'small' && {
|
|
533
|
-
transform: 'translate(12px, 4px) scale(0.75)'
|
|
534
|
-
})), ownerState.variant === 'outlined' && _extends({
|
|
535
|
-
// see comment above on filled.zIndex
|
|
536
|
-
zIndex: 1,
|
|
537
|
-
pointerEvents: 'none',
|
|
538
|
-
transform: 'translate(14px, 16px) scale(1)',
|
|
539
|
-
maxWidth: 'calc(100% - 24px)'
|
|
540
|
-
}, ownerState.size === 'small' && {
|
|
541
|
-
transform: 'translate(14px, 9px) scale(1)'
|
|
542
|
-
}, ownerState.shrink && {
|
|
543
|
-
userSelect: 'none',
|
|
544
|
-
pointerEvents: 'auto',
|
|
545
|
-
// Theoretically, we should have (8+5)*2/0.75 = 34px
|
|
546
|
-
// but it feels a better when it bleeds a bit on the left, so 32px.
|
|
547
|
-
maxWidth: 'calc(133% - 32px)',
|
|
548
|
-
transform: 'translate(14px, -9px) scale(0.75)'
|
|
549
|
-
})));
|
|
550
|
-
const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
|
|
551
|
-
const props = useThemeProps({
|
|
552
|
-
name: 'MuiInputLabel',
|
|
553
|
-
props: inProps
|
|
554
|
-
});
|
|
555
|
-
const {
|
|
556
|
-
disableAnimation = false,
|
|
557
|
-
shrink: shrinkProp,
|
|
558
|
-
className
|
|
559
|
-
} = props,
|
|
560
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$3);
|
|
561
|
-
const muiFormControl = useFormControl();
|
|
562
|
-
let shrink = shrinkProp;
|
|
563
|
-
if (typeof shrink === 'undefined' && muiFormControl) {
|
|
564
|
-
shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
|
|
565
|
-
}
|
|
566
|
-
const fcs = formControlState({
|
|
567
|
-
props,
|
|
568
|
-
muiFormControl,
|
|
569
|
-
states: ['size', 'variant', 'required']
|
|
570
|
-
});
|
|
571
|
-
const ownerState = _extends({}, props, {
|
|
572
|
-
disableAnimation,
|
|
573
|
-
formControl: muiFormControl,
|
|
574
|
-
shrink,
|
|
575
|
-
size: fcs.size,
|
|
576
|
-
variant: fcs.variant,
|
|
577
|
-
required: fcs.required
|
|
578
|
-
});
|
|
579
|
-
const classes = useUtilityClasses$3(ownerState);
|
|
580
|
-
return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, _extends({
|
|
581
|
-
"data-shrink": shrink,
|
|
582
|
-
ownerState: ownerState,
|
|
583
|
-
ref: ref,
|
|
584
|
-
className: clsx(classes.root, className)
|
|
585
|
-
}, other, {
|
|
586
|
-
classes: classes
|
|
587
|
-
}));
|
|
588
|
-
});
|
|
589
|
-
process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes */ = {
|
|
590
|
-
// ----------------------------- Warning --------------------------------
|
|
591
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
592
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
593
|
-
// ----------------------------------------------------------------------
|
|
594
|
-
/**
|
|
595
|
-
* The content of the component.
|
|
596
|
-
*/
|
|
597
|
-
children: PropTypes.node,
|
|
598
|
-
/**
|
|
599
|
-
* Override or extend the styles applied to the component.
|
|
600
|
-
*/
|
|
601
|
-
classes: PropTypes.object,
|
|
602
|
-
/**
|
|
603
|
-
* @ignore
|
|
604
|
-
*/
|
|
605
|
-
className: PropTypes.string,
|
|
606
|
-
/**
|
|
607
|
-
* The color of the component.
|
|
608
|
-
* It supports both default and custom theme colors, which can be added as shown in the
|
|
609
|
-
* [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
|
|
610
|
-
*/
|
|
611
|
-
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
|
|
612
|
-
/**
|
|
613
|
-
* If `true`, the transition animation is disabled.
|
|
614
|
-
* @default false
|
|
615
|
-
*/
|
|
616
|
-
disableAnimation: PropTypes.bool,
|
|
617
|
-
/**
|
|
618
|
-
* If `true`, the component is disabled.
|
|
619
|
-
*/
|
|
620
|
-
disabled: PropTypes.bool,
|
|
621
|
-
/**
|
|
622
|
-
* If `true`, the label is displayed in an error state.
|
|
623
|
-
*/
|
|
624
|
-
error: PropTypes.bool,
|
|
625
|
-
/**
|
|
626
|
-
* If `true`, the `input` of this label is focused.
|
|
627
|
-
*/
|
|
628
|
-
focused: PropTypes.bool,
|
|
629
|
-
/**
|
|
630
|
-
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
|
|
631
|
-
* FormControl.
|
|
632
|
-
*/
|
|
633
|
-
margin: PropTypes.oneOf(['dense']),
|
|
634
|
-
/**
|
|
635
|
-
* if `true`, the label will indicate that the `input` is required.
|
|
636
|
-
*/
|
|
637
|
-
required: PropTypes.bool,
|
|
638
|
-
/**
|
|
639
|
-
* If `true`, the label is shrunk.
|
|
640
|
-
*/
|
|
641
|
-
shrink: PropTypes.bool,
|
|
642
|
-
/**
|
|
643
|
-
* The size of the component.
|
|
644
|
-
* @default 'normal'
|
|
645
|
-
*/
|
|
646
|
-
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), PropTypes.string]),
|
|
647
|
-
/**
|
|
648
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
649
|
-
*/
|
|
650
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
651
|
-
/**
|
|
652
|
-
* The variant to use.
|
|
653
|
-
*/
|
|
654
|
-
variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
|
|
655
|
-
} : void 0;
|
|
656
|
-
var InputLabel$1 = InputLabel;
|
|
657
|
-
|
|
658
|
-
function getFormControlUtilityClasses(slot) {
|
|
659
|
-
return generateUtilityClass('MuiFormControl', slot);
|
|
660
|
-
}
|
|
661
|
-
generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
|
|
662
|
-
|
|
663
|
-
const _excluded$2 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
|
|
664
|
-
const useUtilityClasses$2 = ownerState => {
|
|
665
|
-
const {
|
|
666
|
-
classes,
|
|
667
|
-
margin,
|
|
668
|
-
fullWidth
|
|
669
|
-
} = ownerState;
|
|
670
|
-
const slots = {
|
|
671
|
-
root: ['root', margin !== 'none' && `margin${capitalize(margin)}`, fullWidth && 'fullWidth']
|
|
672
|
-
};
|
|
673
|
-
return composeClasses(slots, getFormControlUtilityClasses, classes);
|
|
674
|
-
};
|
|
675
|
-
const FormControlRoot = styled$1('div', {
|
|
676
|
-
name: 'MuiFormControl',
|
|
677
|
-
slot: 'Root',
|
|
678
|
-
overridesResolver: ({
|
|
679
|
-
ownerState
|
|
680
|
-
}, styles) => {
|
|
681
|
-
return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
|
|
682
|
-
}
|
|
683
|
-
})(({
|
|
684
|
-
ownerState
|
|
685
|
-
}) => _extends({
|
|
686
|
-
display: 'inline-flex',
|
|
687
|
-
flexDirection: 'column',
|
|
688
|
-
position: 'relative',
|
|
689
|
-
// Reset fieldset default style.
|
|
690
|
-
minWidth: 0,
|
|
691
|
-
padding: 0,
|
|
692
|
-
margin: 0,
|
|
693
|
-
border: 0,
|
|
694
|
-
verticalAlign: 'top'
|
|
695
|
-
}, ownerState.margin === 'normal' && {
|
|
696
|
-
marginTop: 16,
|
|
697
|
-
marginBottom: 8
|
|
698
|
-
}, ownerState.margin === 'dense' && {
|
|
699
|
-
marginTop: 8,
|
|
700
|
-
marginBottom: 4
|
|
701
|
-
}, ownerState.fullWidth && {
|
|
702
|
-
width: '100%'
|
|
703
|
-
}));
|
|
704
|
-
|
|
705
|
-
/**
|
|
706
|
-
* Provides context such as filled/focused/error/required for form inputs.
|
|
707
|
-
* Relying on the context provides high flexibility and ensures that the state always stays
|
|
708
|
-
* consistent across the children of the `FormControl`.
|
|
709
|
-
* This context is used by the following components:
|
|
710
|
-
*
|
|
711
|
-
* - FormLabel
|
|
712
|
-
* - FormHelperText
|
|
713
|
-
* - Input
|
|
714
|
-
* - InputLabel
|
|
715
|
-
*
|
|
716
|
-
* You can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).
|
|
717
|
-
*
|
|
718
|
-
* ```jsx
|
|
719
|
-
* <FormControl>
|
|
720
|
-
* <InputLabel htmlFor="my-input">Email address</InputLabel>
|
|
721
|
-
* <Input id="my-input" aria-describedby="my-helper-text" />
|
|
722
|
-
* <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
|
|
723
|
-
* </FormControl>
|
|
724
|
-
* ```
|
|
725
|
-
*
|
|
726
|
-
* ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
|
|
727
|
-
* For instance, only one input can be focused at the same time, the state shouldn't be shared.
|
|
728
|
-
*/
|
|
729
|
-
const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, ref) {
|
|
730
|
-
const props = useThemeProps({
|
|
731
|
-
props: inProps,
|
|
732
|
-
name: 'MuiFormControl'
|
|
733
|
-
});
|
|
734
|
-
const {
|
|
735
|
-
children,
|
|
736
|
-
className,
|
|
737
|
-
color = 'primary',
|
|
738
|
-
component = 'div',
|
|
739
|
-
disabled = false,
|
|
740
|
-
error = false,
|
|
741
|
-
focused: visuallyFocused,
|
|
742
|
-
fullWidth = false,
|
|
743
|
-
hiddenLabel = false,
|
|
744
|
-
margin = 'none',
|
|
745
|
-
required = false,
|
|
746
|
-
size = 'medium',
|
|
747
|
-
variant = 'outlined'
|
|
748
|
-
} = props,
|
|
749
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$2);
|
|
750
|
-
const ownerState = _extends({}, props, {
|
|
751
|
-
color,
|
|
752
|
-
component,
|
|
753
|
-
disabled,
|
|
754
|
-
error,
|
|
755
|
-
fullWidth,
|
|
756
|
-
hiddenLabel,
|
|
757
|
-
margin,
|
|
758
|
-
required,
|
|
759
|
-
size,
|
|
760
|
-
variant
|
|
761
|
-
});
|
|
762
|
-
const classes = useUtilityClasses$2(ownerState);
|
|
763
|
-
const [adornedStart, setAdornedStart] = React.useState(() => {
|
|
764
|
-
// We need to iterate through the children and find the Input in order
|
|
765
|
-
// to fully support server-side rendering.
|
|
766
|
-
let initialAdornedStart = false;
|
|
767
|
-
if (children) {
|
|
768
|
-
React.Children.forEach(children, child => {
|
|
769
|
-
if (!isMuiElement(child, ['Input', 'Select'])) {
|
|
770
|
-
return;
|
|
771
|
-
}
|
|
772
|
-
const input = isMuiElement(child, ['Select']) ? child.props.input : child;
|
|
773
|
-
if (input && isAdornedStart(input.props)) {
|
|
774
|
-
initialAdornedStart = true;
|
|
775
|
-
}
|
|
776
|
-
});
|
|
777
|
-
}
|
|
778
|
-
return initialAdornedStart;
|
|
779
|
-
});
|
|
780
|
-
const [filled, setFilled] = React.useState(() => {
|
|
781
|
-
// We need to iterate through the children and find the Input in order
|
|
782
|
-
// to fully support server-side rendering.
|
|
783
|
-
let initialFilled = false;
|
|
784
|
-
if (children) {
|
|
785
|
-
React.Children.forEach(children, child => {
|
|
786
|
-
if (!isMuiElement(child, ['Input', 'Select'])) {
|
|
787
|
-
return;
|
|
788
|
-
}
|
|
789
|
-
if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
|
|
790
|
-
initialFilled = true;
|
|
791
|
-
}
|
|
792
|
-
});
|
|
793
|
-
}
|
|
794
|
-
return initialFilled;
|
|
795
|
-
});
|
|
796
|
-
const [focusedState, setFocused] = React.useState(false);
|
|
797
|
-
if (disabled && focusedState) {
|
|
798
|
-
setFocused(false);
|
|
799
|
-
}
|
|
800
|
-
const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
|
|
801
|
-
let registerEffect;
|
|
802
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
803
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
804
|
-
const registeredInput = React.useRef(false);
|
|
805
|
-
registerEffect = () => {
|
|
806
|
-
if (registeredInput.current) {
|
|
807
|
-
console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));
|
|
808
|
-
}
|
|
809
|
-
registeredInput.current = true;
|
|
810
|
-
return () => {
|
|
811
|
-
registeredInput.current = false;
|
|
812
|
-
};
|
|
813
|
-
};
|
|
814
|
-
}
|
|
815
|
-
const childContext = React.useMemo(() => {
|
|
816
|
-
return {
|
|
817
|
-
adornedStart,
|
|
818
|
-
setAdornedStart,
|
|
819
|
-
color,
|
|
820
|
-
disabled,
|
|
821
|
-
error,
|
|
822
|
-
filled,
|
|
823
|
-
focused,
|
|
824
|
-
fullWidth,
|
|
825
|
-
hiddenLabel,
|
|
826
|
-
size,
|
|
827
|
-
onBlur: () => {
|
|
828
|
-
setFocused(false);
|
|
829
|
-
},
|
|
830
|
-
onEmpty: () => {
|
|
831
|
-
setFilled(false);
|
|
832
|
-
},
|
|
833
|
-
onFilled: () => {
|
|
834
|
-
setFilled(true);
|
|
835
|
-
},
|
|
836
|
-
onFocus: () => {
|
|
837
|
-
setFocused(true);
|
|
838
|
-
},
|
|
839
|
-
registerEffect,
|
|
840
|
-
required,
|
|
841
|
-
variant
|
|
842
|
-
};
|
|
843
|
-
}, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
|
|
844
|
-
return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
|
|
845
|
-
value: childContext,
|
|
846
|
-
children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, _extends({
|
|
847
|
-
as: component,
|
|
848
|
-
ownerState: ownerState,
|
|
849
|
-
className: clsx(classes.root, className),
|
|
850
|
-
ref: ref
|
|
851
|
-
}, other, {
|
|
852
|
-
children: children
|
|
853
|
-
}))
|
|
854
|
-
});
|
|
855
|
-
});
|
|
856
|
-
process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptypes */ = {
|
|
857
|
-
// ----------------------------- Warning --------------------------------
|
|
858
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
859
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
860
|
-
// ----------------------------------------------------------------------
|
|
861
|
-
/**
|
|
862
|
-
* The content of the component.
|
|
863
|
-
*/
|
|
864
|
-
children: PropTypes.node,
|
|
865
|
-
/**
|
|
866
|
-
* Override or extend the styles applied to the component.
|
|
867
|
-
*/
|
|
868
|
-
classes: PropTypes.object,
|
|
869
|
-
/**
|
|
870
|
-
* @ignore
|
|
871
|
-
*/
|
|
872
|
-
className: PropTypes.string,
|
|
873
|
-
/**
|
|
874
|
-
* The color of the component.
|
|
875
|
-
* It supports both default and custom theme colors, which can be added as shown in the
|
|
876
|
-
* [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
|
|
877
|
-
* @default 'primary'
|
|
878
|
-
*/
|
|
879
|
-
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
|
880
|
-
/**
|
|
881
|
-
* The component used for the root node.
|
|
882
|
-
* Either a string to use a HTML element or a component.
|
|
883
|
-
*/
|
|
884
|
-
component: PropTypes.elementType,
|
|
885
|
-
/**
|
|
886
|
-
* If `true`, the label, input and helper text should be displayed in a disabled state.
|
|
887
|
-
* @default false
|
|
888
|
-
*/
|
|
889
|
-
disabled: PropTypes.bool,
|
|
890
|
-
/**
|
|
891
|
-
* If `true`, the label is displayed in an error state.
|
|
892
|
-
* @default false
|
|
893
|
-
*/
|
|
894
|
-
error: PropTypes.bool,
|
|
895
|
-
/**
|
|
896
|
-
* If `true`, the component is displayed in focused state.
|
|
897
|
-
*/
|
|
898
|
-
focused: PropTypes.bool,
|
|
899
|
-
/**
|
|
900
|
-
* If `true`, the component will take up the full width of its container.
|
|
901
|
-
* @default false
|
|
902
|
-
*/
|
|
903
|
-
fullWidth: PropTypes.bool,
|
|
904
|
-
/**
|
|
905
|
-
* If `true`, the label is hidden.
|
|
906
|
-
* This is used to increase density for a `FilledInput`.
|
|
907
|
-
* Be sure to add `aria-label` to the `input` element.
|
|
908
|
-
* @default false
|
|
909
|
-
*/
|
|
910
|
-
hiddenLabel: PropTypes.bool,
|
|
911
|
-
/**
|
|
912
|
-
* If `dense` or `normal`, will adjust vertical spacing of this and contained components.
|
|
913
|
-
* @default 'none'
|
|
914
|
-
*/
|
|
915
|
-
margin: PropTypes.oneOf(['dense', 'none', 'normal']),
|
|
916
|
-
/**
|
|
917
|
-
* If `true`, the label will indicate that the `input` is required.
|
|
918
|
-
* @default false
|
|
919
|
-
*/
|
|
920
|
-
required: PropTypes.bool,
|
|
921
|
-
/**
|
|
922
|
-
* The size of the component.
|
|
923
|
-
* @default 'medium'
|
|
924
|
-
*/
|
|
925
|
-
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
|
|
926
|
-
/**
|
|
927
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
928
|
-
*/
|
|
929
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
930
|
-
/**
|
|
931
|
-
* The variant to use.
|
|
932
|
-
* @default 'outlined'
|
|
933
|
-
*/
|
|
934
|
-
variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
|
|
935
|
-
} : void 0;
|
|
936
|
-
var FormControl$1 = FormControl;
|
|
937
|
-
|
|
938
|
-
function getFormHelperTextUtilityClasses(slot) {
|
|
939
|
-
return generateUtilityClass('MuiFormHelperText', slot);
|
|
940
|
-
}
|
|
941
|
-
const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
|
|
942
|
-
var formHelperTextClasses$1 = formHelperTextClasses;
|
|
943
|
-
|
|
944
|
-
var _span;
|
|
945
|
-
const _excluded$1 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
|
|
946
|
-
const useUtilityClasses$1 = ownerState => {
|
|
947
|
-
const {
|
|
948
|
-
classes,
|
|
949
|
-
contained,
|
|
950
|
-
size,
|
|
951
|
-
disabled,
|
|
952
|
-
error,
|
|
953
|
-
filled,
|
|
954
|
-
focused,
|
|
955
|
-
required
|
|
956
|
-
} = ownerState;
|
|
957
|
-
const slots = {
|
|
958
|
-
root: ['root', disabled && 'disabled', error && 'error', size && `size${capitalize(size)}`, contained && 'contained', focused && 'focused', filled && 'filled', required && 'required']
|
|
959
|
-
};
|
|
960
|
-
return composeClasses(slots, getFormHelperTextUtilityClasses, classes);
|
|
961
|
-
};
|
|
962
|
-
const FormHelperTextRoot = styled$1('p', {
|
|
963
|
-
name: 'MuiFormHelperText',
|
|
964
|
-
slot: 'Root',
|
|
965
|
-
overridesResolver: (props, styles) => {
|
|
966
|
-
const {
|
|
967
|
-
ownerState
|
|
968
|
-
} = props;
|
|
969
|
-
return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
|
|
970
|
-
}
|
|
971
|
-
})(({
|
|
972
|
-
theme,
|
|
973
|
-
ownerState
|
|
974
|
-
}) => _extends({
|
|
975
|
-
color: (theme.vars || theme).palette.text.secondary
|
|
976
|
-
}, theme.typography.caption, {
|
|
977
|
-
textAlign: 'left',
|
|
978
|
-
marginTop: 3,
|
|
979
|
-
marginRight: 0,
|
|
980
|
-
marginBottom: 0,
|
|
981
|
-
marginLeft: 0,
|
|
982
|
-
[`&.${formHelperTextClasses$1.disabled}`]: {
|
|
983
|
-
color: (theme.vars || theme).palette.text.disabled
|
|
984
|
-
},
|
|
985
|
-
[`&.${formHelperTextClasses$1.error}`]: {
|
|
986
|
-
color: (theme.vars || theme).palette.error.main
|
|
987
|
-
}
|
|
988
|
-
}, ownerState.size === 'small' && {
|
|
989
|
-
marginTop: 4
|
|
990
|
-
}, ownerState.contained && {
|
|
991
|
-
marginLeft: 14,
|
|
992
|
-
marginRight: 14
|
|
993
|
-
}));
|
|
994
|
-
const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
|
|
995
|
-
const props = useThemeProps({
|
|
996
|
-
props: inProps,
|
|
997
|
-
name: 'MuiFormHelperText'
|
|
998
|
-
});
|
|
999
|
-
const {
|
|
1000
|
-
children,
|
|
1001
|
-
className,
|
|
1002
|
-
component = 'p'
|
|
1003
|
-
} = props,
|
|
1004
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$1);
|
|
1005
|
-
const muiFormControl = useFormControl();
|
|
1006
|
-
const fcs = formControlState({
|
|
1007
|
-
props,
|
|
1008
|
-
muiFormControl,
|
|
1009
|
-
states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
|
|
1010
|
-
});
|
|
1011
|
-
const ownerState = _extends({}, props, {
|
|
1012
|
-
component,
|
|
1013
|
-
contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
|
|
1014
|
-
variant: fcs.variant,
|
|
1015
|
-
size: fcs.size,
|
|
1016
|
-
disabled: fcs.disabled,
|
|
1017
|
-
error: fcs.error,
|
|
1018
|
-
filled: fcs.filled,
|
|
1019
|
-
focused: fcs.focused,
|
|
1020
|
-
required: fcs.required
|
|
1021
|
-
});
|
|
1022
|
-
const classes = useUtilityClasses$1(ownerState);
|
|
1023
|
-
return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, _extends({
|
|
1024
|
-
as: component,
|
|
1025
|
-
ownerState: ownerState,
|
|
1026
|
-
className: clsx(classes.root, className),
|
|
1027
|
-
ref: ref
|
|
1028
|
-
}, other, {
|
|
1029
|
-
children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
|
|
1030
|
-
_span || (_span = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
|
|
1031
|
-
className: "notranslate",
|
|
1032
|
-
children: "\u200B"
|
|
1033
|
-
})) : children
|
|
1034
|
-
}));
|
|
1035
|
-
});
|
|
1036
|
-
process.env.NODE_ENV !== "production" ? FormHelperText.propTypes /* remove-proptypes */ = {
|
|
1037
|
-
// ----------------------------- Warning --------------------------------
|
|
1038
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
1039
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
1040
|
-
// ----------------------------------------------------------------------
|
|
1041
|
-
/**
|
|
1042
|
-
* The content of the component.
|
|
1043
|
-
*
|
|
1044
|
-
* If `' '` is provided, the component reserves one line height for displaying a future message.
|
|
1045
|
-
*/
|
|
1046
|
-
children: PropTypes.node,
|
|
1047
|
-
/**
|
|
1048
|
-
* Override or extend the styles applied to the component.
|
|
1049
|
-
*/
|
|
1050
|
-
classes: PropTypes.object,
|
|
1051
|
-
/**
|
|
1052
|
-
* @ignore
|
|
1053
|
-
*/
|
|
1054
|
-
className: PropTypes.string,
|
|
1055
|
-
/**
|
|
1056
|
-
* The component used for the root node.
|
|
1057
|
-
* Either a string to use a HTML element or a component.
|
|
1058
|
-
*/
|
|
1059
|
-
component: PropTypes.elementType,
|
|
1060
|
-
/**
|
|
1061
|
-
* If `true`, the helper text should be displayed in a disabled state.
|
|
1062
|
-
*/
|
|
1063
|
-
disabled: PropTypes.bool,
|
|
1064
|
-
/**
|
|
1065
|
-
* If `true`, helper text should be displayed in an error state.
|
|
1066
|
-
*/
|
|
1067
|
-
error: PropTypes.bool,
|
|
1068
|
-
/**
|
|
1069
|
-
* If `true`, the helper text should use filled classes key.
|
|
1070
|
-
*/
|
|
1071
|
-
filled: PropTypes.bool,
|
|
1072
|
-
/**
|
|
1073
|
-
* If `true`, the helper text should use focused classes key.
|
|
1074
|
-
*/
|
|
1075
|
-
focused: PropTypes.bool,
|
|
1076
|
-
/**
|
|
1077
|
-
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
|
|
1078
|
-
* FormControl.
|
|
1079
|
-
*/
|
|
1080
|
-
margin: PropTypes.oneOf(['dense']),
|
|
1081
|
-
/**
|
|
1082
|
-
* If `true`, the helper text should use required classes key.
|
|
1083
|
-
*/
|
|
1084
|
-
required: PropTypes.bool,
|
|
1085
|
-
/**
|
|
1086
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
1087
|
-
*/
|
|
1088
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
1089
|
-
/**
|
|
1090
|
-
* The variant to use.
|
|
1091
|
-
*/
|
|
1092
|
-
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
|
|
1093
|
-
} : void 0;
|
|
1094
|
-
var FormHelperText$1 = FormHelperText;
|
|
1095
|
-
|
|
1096
|
-
function getTextFieldUtilityClass(slot) {
|
|
1097
|
-
return generateUtilityClass('MuiTextField', slot);
|
|
1098
|
-
}
|
|
1099
|
-
generateUtilityClasses('MuiTextField', ['root']);
|
|
1100
|
-
|
|
1101
|
-
const _excluded = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
|
|
1102
|
-
const variantComponent = {
|
|
1103
|
-
standard: Input,
|
|
1104
|
-
filled: FilledInput,
|
|
1105
|
-
outlined: OutlinedInput
|
|
1106
|
-
};
|
|
1107
|
-
const useUtilityClasses = ownerState => {
|
|
1108
|
-
const {
|
|
1109
|
-
classes
|
|
1110
|
-
} = ownerState;
|
|
1111
|
-
const slots = {
|
|
1112
|
-
root: ['root']
|
|
1113
|
-
};
|
|
1114
|
-
return composeClasses(slots, getTextFieldUtilityClass, classes);
|
|
1115
|
-
};
|
|
1116
|
-
const TextFieldRoot = styled$1(FormControl$1, {
|
|
1117
|
-
name: 'MuiTextField',
|
|
1118
|
-
slot: 'Root',
|
|
1119
|
-
overridesResolver: (props, styles) => styles.root
|
|
1120
|
-
})({});
|
|
1121
|
-
|
|
1122
|
-
/**
|
|
1123
|
-
* The `TextField` is a convenience wrapper for the most common cases (80%).
|
|
1124
|
-
* It cannot be all things to all people, otherwise the API would grow out of control.
|
|
1125
|
-
*
|
|
1126
|
-
* ## Advanced Configuration
|
|
1127
|
-
*
|
|
1128
|
-
* It's important to understand that the text field is a simple abstraction
|
|
1129
|
-
* on top of the following components:
|
|
1130
|
-
*
|
|
1131
|
-
* - [FormControl](/material-ui/api/form-control/)
|
|
1132
|
-
* - [InputLabel](/material-ui/api/input-label/)
|
|
1133
|
-
* - [FilledInput](/material-ui/api/filled-input/)
|
|
1134
|
-
* - [OutlinedInput](/material-ui/api/outlined-input/)
|
|
1135
|
-
* - [Input](/material-ui/api/input/)
|
|
1136
|
-
* - [FormHelperText](/material-ui/api/form-helper-text/)
|
|
1137
|
-
*
|
|
1138
|
-
* If you wish to alter the props applied to the `input` element, you can do so as follows:
|
|
1139
|
-
*
|
|
1140
|
-
* ```jsx
|
|
1141
|
-
* const inputProps = {
|
|
1142
|
-
* step: 300,
|
|
1143
|
-
* };
|
|
1144
|
-
*
|
|
1145
|
-
* return <TextField id="time" type="time" inputProps={inputProps} />;
|
|
1146
|
-
* ```
|
|
1147
|
-
*
|
|
1148
|
-
* For advanced cases, please look at the source of TextField by clicking on the
|
|
1149
|
-
* "Edit this page" button above. Consider either:
|
|
1150
|
-
*
|
|
1151
|
-
* - using the upper case props for passing values directly to the components
|
|
1152
|
-
* - using the underlying components directly as shown in the demos
|
|
1153
|
-
*/
|
|
1154
|
-
const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
|
|
1155
|
-
const props = useThemeProps({
|
|
1156
|
-
props: inProps,
|
|
1157
|
-
name: 'MuiTextField'
|
|
1158
|
-
});
|
|
1159
|
-
const {
|
|
1160
|
-
autoComplete,
|
|
1161
|
-
autoFocus = false,
|
|
1162
|
-
children,
|
|
1163
|
-
className,
|
|
1164
|
-
color = 'primary',
|
|
1165
|
-
defaultValue,
|
|
1166
|
-
disabled = false,
|
|
1167
|
-
error = false,
|
|
1168
|
-
FormHelperTextProps,
|
|
1169
|
-
fullWidth = false,
|
|
1170
|
-
helperText,
|
|
1171
|
-
id: idOverride,
|
|
1172
|
-
InputLabelProps,
|
|
1173
|
-
inputProps,
|
|
1174
|
-
InputProps,
|
|
1175
|
-
inputRef,
|
|
1176
|
-
label,
|
|
1177
|
-
maxRows,
|
|
1178
|
-
minRows,
|
|
1179
|
-
multiline = false,
|
|
1180
|
-
name,
|
|
1181
|
-
onBlur,
|
|
1182
|
-
onChange,
|
|
1183
|
-
onClick,
|
|
1184
|
-
onFocus,
|
|
1185
|
-
placeholder,
|
|
1186
|
-
required = false,
|
|
1187
|
-
rows,
|
|
1188
|
-
select = false,
|
|
1189
|
-
SelectProps,
|
|
1190
|
-
type,
|
|
1191
|
-
value,
|
|
1192
|
-
variant = 'outlined'
|
|
1193
|
-
} = props,
|
|
1194
|
-
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
1195
|
-
const ownerState = _extends({}, props, {
|
|
1196
|
-
autoFocus,
|
|
1197
|
-
color,
|
|
1198
|
-
disabled,
|
|
1199
|
-
error,
|
|
1200
|
-
fullWidth,
|
|
1201
|
-
multiline,
|
|
1202
|
-
required,
|
|
1203
|
-
select,
|
|
1204
|
-
variant
|
|
1205
|
-
});
|
|
1206
|
-
const classes = useUtilityClasses(ownerState);
|
|
1207
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
1208
|
-
if (select && !children) {
|
|
1209
|
-
console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
|
|
1210
|
-
}
|
|
1211
|
-
}
|
|
1212
|
-
const InputMore = {};
|
|
1213
|
-
if (variant === 'outlined') {
|
|
1214
|
-
if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
|
|
1215
|
-
InputMore.notched = InputLabelProps.shrink;
|
|
1216
|
-
}
|
|
1217
|
-
InputMore.label = label;
|
|
1218
|
-
}
|
|
1219
|
-
if (select) {
|
|
1220
|
-
// unset defaults from textbox inputs
|
|
1221
|
-
if (!SelectProps || !SelectProps.native) {
|
|
1222
|
-
InputMore.id = undefined;
|
|
1223
|
-
}
|
|
1224
|
-
InputMore['aria-describedby'] = undefined;
|
|
1225
|
-
}
|
|
1226
|
-
const id = useId(idOverride);
|
|
1227
|
-
const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
|
|
1228
|
-
const inputLabelId = label && id ? `${id}-label` : undefined;
|
|
1229
|
-
const InputComponent = variantComponent[variant];
|
|
1230
|
-
const InputElement = /*#__PURE__*/jsxRuntimeExports.jsx(InputComponent, _extends({
|
|
1231
|
-
"aria-describedby": helperTextId,
|
|
1232
|
-
autoComplete: autoComplete,
|
|
1233
|
-
autoFocus: autoFocus,
|
|
1234
|
-
defaultValue: defaultValue,
|
|
1235
|
-
fullWidth: fullWidth,
|
|
1236
|
-
multiline: multiline,
|
|
1237
|
-
name: name,
|
|
1238
|
-
rows: rows,
|
|
1239
|
-
maxRows: maxRows,
|
|
1240
|
-
minRows: minRows,
|
|
1241
|
-
type: type,
|
|
1242
|
-
value: value,
|
|
1243
|
-
id: id,
|
|
1244
|
-
inputRef: inputRef,
|
|
1245
|
-
onBlur: onBlur,
|
|
1246
|
-
onChange: onChange,
|
|
1247
|
-
onFocus: onFocus,
|
|
1248
|
-
onClick: onClick,
|
|
1249
|
-
placeholder: placeholder,
|
|
1250
|
-
inputProps: inputProps
|
|
1251
|
-
}, InputMore, InputProps));
|
|
1252
|
-
return /*#__PURE__*/jsxRuntimeExports.jsxs(TextFieldRoot, _extends({
|
|
1253
|
-
className: clsx(classes.root, className),
|
|
1254
|
-
disabled: disabled,
|
|
1255
|
-
error: error,
|
|
1256
|
-
fullWidth: fullWidth,
|
|
1257
|
-
ref: ref,
|
|
1258
|
-
required: required,
|
|
1259
|
-
color: color,
|
|
1260
|
-
variant: variant,
|
|
1261
|
-
ownerState: ownerState
|
|
1262
|
-
}, other, {
|
|
1263
|
-
children: [label != null && label !== '' && /*#__PURE__*/jsxRuntimeExports.jsx(InputLabel$1, _extends({
|
|
1264
|
-
htmlFor: id,
|
|
1265
|
-
id: inputLabelId
|
|
1266
|
-
}, InputLabelProps, {
|
|
1267
|
-
children: label
|
|
1268
|
-
})), select ? /*#__PURE__*/jsxRuntimeExports.jsx(Select, _extends({
|
|
1269
|
-
"aria-describedby": helperTextId,
|
|
1270
|
-
id: id,
|
|
1271
|
-
labelId: inputLabelId,
|
|
1272
|
-
value: value,
|
|
1273
|
-
input: InputElement
|
|
1274
|
-
}, SelectProps, {
|
|
1275
|
-
children: children
|
|
1276
|
-
})) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperText$1, _extends({
|
|
1277
|
-
id: helperTextId
|
|
1278
|
-
}, FormHelperTextProps, {
|
|
1279
|
-
children: helperText
|
|
1280
|
-
}))]
|
|
1281
|
-
}));
|
|
1282
|
-
});
|
|
1283
|
-
process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes */ = {
|
|
1284
|
-
// ----------------------------- Warning --------------------------------
|
|
1285
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
1286
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
1287
|
-
// ----------------------------------------------------------------------
|
|
1288
|
-
/**
|
|
1289
|
-
* This prop helps users to fill forms faster, especially on mobile devices.
|
|
1290
|
-
* The name can be confusing, as it's more like an autofill.
|
|
1291
|
-
* You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
|
|
1292
|
-
*/
|
|
1293
|
-
autoComplete: PropTypes.string,
|
|
1294
|
-
/**
|
|
1295
|
-
* If `true`, the `input` element is focused during the first mount.
|
|
1296
|
-
* @default false
|
|
1297
|
-
*/
|
|
1298
|
-
autoFocus: PropTypes.bool,
|
|
1299
|
-
/**
|
|
1300
|
-
* @ignore
|
|
1301
|
-
*/
|
|
1302
|
-
children: PropTypes.node,
|
|
1303
|
-
/**
|
|
1304
|
-
* Override or extend the styles applied to the component.
|
|
1305
|
-
*/
|
|
1306
|
-
classes: PropTypes.object,
|
|
1307
|
-
/**
|
|
1308
|
-
* @ignore
|
|
1309
|
-
*/
|
|
1310
|
-
className: PropTypes.string,
|
|
1311
|
-
/**
|
|
1312
|
-
* The color of the component.
|
|
1313
|
-
* It supports both default and custom theme colors, which can be added as shown in the
|
|
1314
|
-
* [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
|
|
1315
|
-
* @default 'primary'
|
|
1316
|
-
*/
|
|
1317
|
-
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
|
1318
|
-
/**
|
|
1319
|
-
* The default value. Use when the component is not controlled.
|
|
1320
|
-
*/
|
|
1321
|
-
defaultValue: PropTypes.any,
|
|
1322
|
-
/**
|
|
1323
|
-
* If `true`, the component is disabled.
|
|
1324
|
-
* @default false
|
|
1325
|
-
*/
|
|
1326
|
-
disabled: PropTypes.bool,
|
|
1327
|
-
/**
|
|
1328
|
-
* If `true`, the label is displayed in an error state.
|
|
1329
|
-
* @default false
|
|
1330
|
-
*/
|
|
1331
|
-
error: PropTypes.bool,
|
|
1332
|
-
/**
|
|
1333
|
-
* Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
|
|
1334
|
-
*/
|
|
1335
|
-
FormHelperTextProps: PropTypes.object,
|
|
1336
|
-
/**
|
|
1337
|
-
* If `true`, the input will take up the full width of its container.
|
|
1338
|
-
* @default false
|
|
1339
|
-
*/
|
|
1340
|
-
fullWidth: PropTypes.bool,
|
|
1341
|
-
/**
|
|
1342
|
-
* The helper text content.
|
|
1343
|
-
*/
|
|
1344
|
-
helperText: PropTypes.node,
|
|
1345
|
-
/**
|
|
1346
|
-
* The id of the `input` element.
|
|
1347
|
-
* Use this prop to make `label` and `helperText` accessible for screen readers.
|
|
1348
|
-
*/
|
|
1349
|
-
id: PropTypes.string,
|
|
1350
|
-
/**
|
|
1351
|
-
* Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
|
|
1352
|
-
* Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
|
|
1353
|
-
*/
|
|
1354
|
-
InputLabelProps: PropTypes.object,
|
|
1355
|
-
/**
|
|
1356
|
-
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
|
1357
|
-
*/
|
|
1358
|
-
inputProps: PropTypes.object,
|
|
1359
|
-
/**
|
|
1360
|
-
* Props applied to the Input element.
|
|
1361
|
-
* It will be a [`FilledInput`](/material-ui/api/filled-input/),
|
|
1362
|
-
* [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
|
|
1363
|
-
* component depending on the `variant` prop value.
|
|
1364
|
-
*/
|
|
1365
|
-
InputProps: PropTypes.object,
|
|
1366
|
-
/**
|
|
1367
|
-
* Pass a ref to the `input` element.
|
|
1368
|
-
*/
|
|
1369
|
-
inputRef: refType,
|
|
1370
|
-
/**
|
|
1371
|
-
* The label content.
|
|
1372
|
-
*/
|
|
1373
|
-
label: PropTypes.node,
|
|
1374
|
-
/**
|
|
1375
|
-
* If `dense` or `normal`, will adjust vertical spacing of this and contained components.
|
|
1376
|
-
* @default 'none'
|
|
1377
|
-
*/
|
|
1378
|
-
margin: PropTypes.oneOf(['dense', 'none', 'normal']),
|
|
1379
|
-
/**
|
|
1380
|
-
* Maximum number of rows to display when multiline option is set to true.
|
|
1381
|
-
*/
|
|
1382
|
-
maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
1383
|
-
/**
|
|
1384
|
-
* Minimum number of rows to display when multiline option is set to true.
|
|
1385
|
-
*/
|
|
1386
|
-
minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
1387
|
-
/**
|
|
1388
|
-
* If `true`, a `textarea` element is rendered instead of an input.
|
|
1389
|
-
* @default false
|
|
1390
|
-
*/
|
|
1391
|
-
multiline: PropTypes.bool,
|
|
1392
|
-
/**
|
|
1393
|
-
* Name attribute of the `input` element.
|
|
1394
|
-
*/
|
|
1395
|
-
name: PropTypes.string,
|
|
1396
|
-
/**
|
|
1397
|
-
* @ignore
|
|
1398
|
-
*/
|
|
1399
|
-
onBlur: PropTypes.func,
|
|
1400
|
-
/**
|
|
1401
|
-
* Callback fired when the value is changed.
|
|
1402
|
-
*
|
|
1403
|
-
* @param {object} event The event source of the callback.
|
|
1404
|
-
* You can pull out the new value by accessing `event.target.value` (string).
|
|
1405
|
-
*/
|
|
1406
|
-
onChange: PropTypes.func,
|
|
1407
|
-
/**
|
|
1408
|
-
* @ignore
|
|
1409
|
-
*/
|
|
1410
|
-
onClick: PropTypes.func,
|
|
1411
|
-
/**
|
|
1412
|
-
* @ignore
|
|
1413
|
-
*/
|
|
1414
|
-
onFocus: PropTypes.func,
|
|
1415
|
-
/**
|
|
1416
|
-
* The short hint displayed in the `input` before the user enters a value.
|
|
1417
|
-
*/
|
|
1418
|
-
placeholder: PropTypes.string,
|
|
1419
|
-
/**
|
|
1420
|
-
* If `true`, the label is displayed as required and the `input` element is required.
|
|
1421
|
-
* @default false
|
|
1422
|
-
*/
|
|
1423
|
-
required: PropTypes.bool,
|
|
1424
|
-
/**
|
|
1425
|
-
* Number of rows to display when multiline option is set to true.
|
|
1426
|
-
*/
|
|
1427
|
-
rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
1428
|
-
/**
|
|
1429
|
-
* Render a [`Select`](/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
|
|
1430
|
-
* If this option is set you must pass the options of the select as children.
|
|
1431
|
-
* @default false
|
|
1432
|
-
*/
|
|
1433
|
-
select: PropTypes.bool,
|
|
1434
|
-
/**
|
|
1435
|
-
* Props applied to the [`Select`](/material-ui/api/select/) element.
|
|
1436
|
-
*/
|
|
1437
|
-
SelectProps: PropTypes.object,
|
|
1438
|
-
/**
|
|
1439
|
-
* The size of the component.
|
|
1440
|
-
*/
|
|
1441
|
-
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
|
|
1442
|
-
/**
|
|
1443
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
1444
|
-
*/
|
|
1445
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
1446
|
-
/**
|
|
1447
|
-
* Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
|
|
1448
|
-
*/
|
|
1449
|
-
type: PropTypes /* @typescript-to-proptypes-ignore */.string,
|
|
1450
|
-
/**
|
|
1451
|
-
* The value of the `input` element, required for a controlled component.
|
|
1452
|
-
*/
|
|
1453
|
-
value: PropTypes.any,
|
|
1454
|
-
/**
|
|
1455
|
-
* The variant to use.
|
|
1456
|
-
* @default 'outlined'
|
|
1457
|
-
*/
|
|
1458
|
-
variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
|
|
1459
|
-
} : void 0;
|
|
1460
|
-
var TextField$1 = TextField;
|
|
1461
|
-
|
|
1462
|
-
const SUBMIT_FILTER_STROKE_TIME = 500;
|
|
1463
|
-
const InputNumberInterval = props => {
|
|
1464
|
-
var _item$value;
|
|
1465
|
-
const {
|
|
1466
|
-
item,
|
|
1467
|
-
applyValue,
|
|
1468
|
-
focusElementRef = null
|
|
1469
|
-
} = props;
|
|
1470
|
-
const filterTimeout = React.useRef();
|
|
1471
|
-
const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : '');
|
|
1472
|
-
const [applying, setIsApplying] = React.useState(false);
|
|
1473
|
-
React.useEffect(() => {
|
|
1474
|
-
return () => {
|
|
1475
|
-
clearTimeout(filterTimeout.current);
|
|
1476
|
-
};
|
|
1477
|
-
}, []);
|
|
1478
|
-
React.useEffect(() => {
|
|
1479
|
-
var _item$value2;
|
|
1480
|
-
const itemValue = (_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : [undefined, undefined];
|
|
1481
|
-
setFilterValueState(itemValue);
|
|
1482
|
-
}, [item.value]);
|
|
1483
|
-
const updateFilterValue = (lowerBound, upperBound) => {
|
|
1484
|
-
clearTimeout(filterTimeout.current);
|
|
1485
|
-
setFilterValueState([lowerBound, upperBound]);
|
|
1486
|
-
setIsApplying(true);
|
|
1487
|
-
filterTimeout.current = setTimeout(() => {
|
|
1488
|
-
setIsApplying(false);
|
|
1489
|
-
applyValue(_objectSpread2(_objectSpread2({}, item), {}, {
|
|
1490
|
-
value: [lowerBound, upperBound]
|
|
1491
|
-
}));
|
|
1492
|
-
}, SUBMIT_FILTER_STROKE_TIME);
|
|
1493
|
-
};
|
|
1494
|
-
const handleUpperFilterChange = event => {
|
|
1495
|
-
const newUpperBound = event.target.value;
|
|
1496
|
-
updateFilterValue(filterValueState[0], newUpperBound);
|
|
1497
|
-
};
|
|
1498
|
-
const handleLowerFilterChange = event => {
|
|
1499
|
-
const newLowerBound = event.target.value;
|
|
1500
|
-
updateFilterValue(newLowerBound, filterValueState[1]);
|
|
1501
|
-
};
|
|
1502
|
-
return /*#__PURE__*/React.createElement(Box$1, {
|
|
1503
|
-
sx: {
|
|
1504
|
-
display: 'inline-flex',
|
|
1505
|
-
flexDirection: 'row',
|
|
1506
|
-
alignItems: 'end',
|
|
1507
|
-
height: 48,
|
|
1508
|
-
pl: '20px'
|
|
1509
|
-
}
|
|
1510
|
-
}, /*#__PURE__*/React.createElement(TextField$1, {
|
|
1511
|
-
name: "lower-bound-input",
|
|
1512
|
-
placeholder: "From",
|
|
1513
|
-
label: "From",
|
|
1514
|
-
variant: "standard",
|
|
1515
|
-
value: Number(filterValueState[0]),
|
|
1516
|
-
onChange: handleLowerFilterChange,
|
|
1517
|
-
type: "number",
|
|
1518
|
-
inputRef: focusElementRef,
|
|
1519
|
-
sx: {
|
|
1520
|
-
mr: 2
|
|
1521
|
-
}
|
|
1522
|
-
}), /*#__PURE__*/React.createElement(TextField$1, {
|
|
1523
|
-
name: "upper-bound-input",
|
|
1524
|
-
placeholder: "To",
|
|
1525
|
-
label: "To",
|
|
1526
|
-
variant: "standard",
|
|
1527
|
-
value: Number(filterValueState[1]),
|
|
1528
|
-
onChange: handleUpperFilterChange,
|
|
1529
|
-
type: "number",
|
|
1530
|
-
InputProps: applying ? {
|
|
1531
|
-
endAdornment: /*#__PURE__*/React.createElement(Icon, {
|
|
1532
|
-
icon: mdiSync
|
|
1533
|
-
})
|
|
1534
|
-
} : {}
|
|
1535
|
-
}));
|
|
1536
|
-
};
|
|
1537
|
-
|
|
1538
|
-
const isBetweenOperator = {
|
|
1539
|
-
label: 'is between',
|
|
1540
|
-
value: 'isBetween',
|
|
1541
|
-
getApplyFilterFn: filterItem => {
|
|
1542
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1543
|
-
return null;
|
|
1544
|
-
}
|
|
1545
|
-
if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
|
|
1546
|
-
return null;
|
|
1547
|
-
}
|
|
1548
|
-
if (filterItem.value[0] == null || filterItem.value[1] == null) {
|
|
1549
|
-
return null;
|
|
1550
|
-
}
|
|
1551
|
-
if (typeof filterItem.value[0] !== 'number' || typeof filterItem.value[1] !== 'number') {
|
|
1552
|
-
return null;
|
|
1553
|
-
}
|
|
1554
|
-
return params => {
|
|
1555
|
-
return params.value !== null && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
|
|
1556
|
-
};
|
|
1557
|
-
},
|
|
1558
|
-
InputComponent: InputNumberInterval
|
|
1559
|
-
};
|
|
1560
|
-
const IS_BETWEEN = isBetweenOperator;
|
|
1561
|
-
|
|
1562
|
-
const getGridNumericOperators = () => [...getGridNumericOperators$1(), IS_BETWEEN];
|
|
1563
|
-
|
|
1564
|
-
const doesNotContain = {
|
|
1565
|
-
label: 'does not contain',
|
|
1566
|
-
value: 'doesNotContain',
|
|
1567
|
-
getApplyFilterFn: filterItem => {
|
|
1568
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1569
|
-
return null;
|
|
1570
|
-
}
|
|
1571
|
-
return params => {
|
|
1572
|
-
if (filterItem.value.length === 0) {
|
|
1573
|
-
return true;
|
|
1574
|
-
}
|
|
1575
|
-
if (String(params.value).indexOf(filterItem.value) !== -1) {
|
|
1576
|
-
return false;
|
|
1577
|
-
}
|
|
1578
|
-
return true;
|
|
1579
|
-
};
|
|
1580
|
-
},
|
|
1581
|
-
InputComponent: GridFilterInputValue
|
|
1582
|
-
};
|
|
1583
|
-
const DOES_NOT_CONTAIN = doesNotContain;
|
|
1584
|
-
|
|
1585
|
-
const doesNotEqual = {
|
|
1586
|
-
label: 'does not equal',
|
|
1587
|
-
value: 'doesNotEqual',
|
|
1588
|
-
getApplyFilterFn: filterItem => {
|
|
1589
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1590
|
-
return null;
|
|
1591
|
-
}
|
|
1592
|
-
return params => {
|
|
1593
|
-
if (filterItem.value.length === 0) {
|
|
1594
|
-
return true;
|
|
1595
|
-
}
|
|
1596
|
-
if (String(params.value) === filterItem.value) {
|
|
1597
|
-
return false;
|
|
1598
|
-
}
|
|
1599
|
-
return true;
|
|
1600
|
-
};
|
|
1601
|
-
},
|
|
1602
|
-
InputComponent: GridFilterInputValue
|
|
1603
|
-
};
|
|
1604
|
-
const DOES_NOT_EQUAL = doesNotEqual;
|
|
1605
|
-
|
|
1606
|
-
const doesNotHaveOperator = {
|
|
1607
|
-
label: "doesn't have",
|
|
1608
|
-
value: 'doesNotHave',
|
|
1609
|
-
getApplyFilterFn: filterItem => {
|
|
1610
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1611
|
-
return null;
|
|
1612
|
-
}
|
|
1613
|
-
return params => {
|
|
1614
|
-
const cellValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
1615
|
-
return !cellValues.map(value => String(value)).includes(filterItem.value);
|
|
1616
|
-
};
|
|
1617
|
-
},
|
|
1618
|
-
InputComponent: GridFilterInputValue
|
|
1619
|
-
};
|
|
1620
|
-
const DOES_NOT_HAVE = doesNotHaveOperator;
|
|
1621
|
-
const DOES_NOT_HAVE_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE), {}, {
|
|
1622
|
-
InputComponent: GridFilterInputSingleSelect
|
|
1623
|
-
});
|
|
1624
|
-
|
|
1625
|
-
const hasOperator = {
|
|
1626
|
-
label: 'has',
|
|
1627
|
-
value: 'has',
|
|
1628
|
-
getApplyFilterFn: filterItem => {
|
|
1629
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1630
|
-
return null;
|
|
1631
|
-
}
|
|
1632
|
-
return params => {
|
|
1633
|
-
const cellValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
1634
|
-
return cellValues.map(value => String(value)).includes(filterItem.value);
|
|
1635
|
-
};
|
|
1636
|
-
},
|
|
1637
|
-
InputComponent: GridFilterInputValue
|
|
1638
|
-
};
|
|
1639
|
-
const HAS = hasOperator;
|
|
1640
|
-
const HAS_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS), {}, {
|
|
1641
|
-
InputComponent: GridFilterInputSingleSelect
|
|
1642
|
-
});
|
|
1643
|
-
|
|
1644
|
-
const hasOnlyOperator = {
|
|
1645
|
-
label: 'has only',
|
|
1646
|
-
value: 'hasOnly',
|
|
1647
|
-
getApplyFilterFn: filterItem => {
|
|
1648
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1649
|
-
return null;
|
|
1650
|
-
}
|
|
1651
|
-
return params => {
|
|
1652
|
-
const cellValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
1653
|
-
return cellValues.length === 1 && String(cellValues[0]) === filterItem.value;
|
|
1654
|
-
};
|
|
1655
|
-
},
|
|
1656
|
-
InputComponent: GridFilterInputValue
|
|
1657
|
-
};
|
|
1658
|
-
const HAS_ONLY = hasOnlyOperator;
|
|
1659
|
-
const HAS_ONLY_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ONLY), {}, {
|
|
1660
|
-
InputComponent: GridFilterInputSingleSelect
|
|
1661
|
-
});
|
|
1662
|
-
|
|
1663
|
-
const isOperator = {
|
|
1664
|
-
label: 'is',
|
|
1665
|
-
value: 'is',
|
|
1666
|
-
getApplyFilterFn: filterItem => {
|
|
1667
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1668
|
-
return null;
|
|
1669
|
-
}
|
|
1670
|
-
return params => {
|
|
1671
|
-
if (Array.isArray(params.value)) {
|
|
1672
|
-
return false;
|
|
1673
|
-
}
|
|
1674
|
-
return String(params.value) === filterItem.value;
|
|
1675
|
-
};
|
|
1676
|
-
},
|
|
1677
|
-
InputComponent: GridFilterInputValue
|
|
1678
|
-
};
|
|
1679
|
-
const IS = isOperator;
|
|
1680
|
-
const IS_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS), {}, {
|
|
1681
|
-
InputComponent: GridFilterInputSingleSelect
|
|
1682
|
-
});
|
|
1683
|
-
|
|
1684
|
-
const isNotOperator = {
|
|
1685
|
-
label: 'is not',
|
|
1686
|
-
value: 'isNot',
|
|
1687
|
-
getApplyFilterFn: filterItem => {
|
|
1688
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1689
|
-
return null;
|
|
1690
|
-
}
|
|
1691
|
-
return params => {
|
|
1692
|
-
if (Array.isArray(params.value)) {
|
|
1693
|
-
return true;
|
|
1694
|
-
}
|
|
1695
|
-
return String(params.value) !== filterItem.value;
|
|
1696
|
-
};
|
|
1697
|
-
},
|
|
1698
|
-
InputComponent: GridFilterInputValue
|
|
1699
|
-
};
|
|
1700
|
-
const IS_NOT = isNotOperator;
|
|
1701
|
-
const IS_NOT_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_NOT), {}, {
|
|
1702
|
-
InputComponent: GridFilterInputSingleSelect
|
|
1703
|
-
});
|
|
1704
|
-
|
|
1705
|
-
const containsAnyOfOperator = {
|
|
1706
|
-
label: 'contains any of',
|
|
1707
|
-
value: 'containsAnyOf',
|
|
1708
|
-
getApplyFilterFn: filterItem => {
|
|
1709
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1710
|
-
return null;
|
|
1711
|
-
}
|
|
1712
|
-
return params => {
|
|
1713
|
-
if (filterItem.value.length === 0) {
|
|
1714
|
-
return true;
|
|
1715
|
-
}
|
|
1716
|
-
const paramValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
1717
|
-
let match = false;
|
|
1718
|
-
filterItem.value.forEach(filteredValue => {
|
|
1719
|
-
paramValues.forEach(paramValue => {
|
|
1720
|
-
if (String(paramValue).indexOf(filteredValue) !== -1) {
|
|
1721
|
-
match = true;
|
|
1722
|
-
}
|
|
1723
|
-
});
|
|
1724
|
-
});
|
|
1725
|
-
return match;
|
|
1726
|
-
};
|
|
1727
|
-
},
|
|
1728
|
-
InputComponent: GridFilterInputMultipleValue
|
|
1729
|
-
};
|
|
1730
|
-
const containsAnyOfCIOperator = {
|
|
1731
|
-
label: 'contains any of (case insensitive)',
|
|
1732
|
-
value: 'containsAnyOf',
|
|
1733
|
-
getApplyFilterFn: filterItem => {
|
|
1734
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1735
|
-
return null;
|
|
1736
|
-
}
|
|
1737
|
-
return params => {
|
|
1738
|
-
if (filterItem.value.length === 0) {
|
|
1739
|
-
return true;
|
|
1740
|
-
}
|
|
1741
|
-
const paramValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
1742
|
-
const paramValuesLower = paramValues.map(item => String(item).toLowerCase());
|
|
1743
|
-
let match = false;
|
|
1744
|
-
filterItem.value.forEach(filteredValue => {
|
|
1745
|
-
if (paramValuesLower.indexOf(filteredValue.toLowerCase()) !== -1) {
|
|
1746
|
-
match = true;
|
|
1747
|
-
}
|
|
1748
|
-
});
|
|
1749
|
-
return match;
|
|
1750
|
-
};
|
|
1751
|
-
},
|
|
1752
|
-
InputComponent: GridFilterInputMultipleValue
|
|
1753
|
-
};
|
|
1754
|
-
const CONTAINS_ANY_OF = containsAnyOfOperator;
|
|
1755
|
-
const CONTAINS_ANY_OF_I = containsAnyOfCIOperator;
|
|
1756
|
-
|
|
1757
|
-
const endsWithAnyOfOperator = {
|
|
1758
|
-
label: 'ends with any of',
|
|
1759
|
-
value: 'endsWithAnyOf',
|
|
1760
|
-
getApplyFilterFn: filterItem => {
|
|
1761
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1762
|
-
return null;
|
|
1763
|
-
}
|
|
1764
|
-
return params => {
|
|
1765
|
-
if (filterItem.value.length === 0) {
|
|
1766
|
-
return true;
|
|
1767
|
-
}
|
|
1768
|
-
const paramValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
1769
|
-
let match = false;
|
|
1770
|
-
filterItem.value.forEach(filteredValue => {
|
|
1771
|
-
paramValues.forEach(paramValue => {
|
|
1772
|
-
if (String(paramValue).endsWith(filteredValue)) {
|
|
1773
|
-
match = true;
|
|
1774
|
-
}
|
|
1775
|
-
});
|
|
1776
|
-
});
|
|
1777
|
-
return match;
|
|
1778
|
-
};
|
|
1779
|
-
},
|
|
1780
|
-
InputComponent: GridFilterInputMultipleValue
|
|
1781
|
-
};
|
|
1782
|
-
const ENDS_WITH_ANY_OF = endsWithAnyOfOperator;
|
|
1783
|
-
|
|
1784
|
-
const isAnyOfOperator = {
|
|
1785
|
-
label: 'is any of',
|
|
1786
|
-
value: 'isAnyOf',
|
|
1787
|
-
getApplyFilterFn: filterItem => {
|
|
1788
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1789
|
-
return null;
|
|
1790
|
-
}
|
|
1791
|
-
return params => {
|
|
1792
|
-
if (filterItem.value.length === 0) {
|
|
1793
|
-
return true;
|
|
1794
|
-
}
|
|
1795
|
-
const paramValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
1796
|
-
for (const paramValue of paramValues) {
|
|
1797
|
-
if (filterItem.value.includes(String(paramValue))) {
|
|
1798
|
-
return true;
|
|
1799
|
-
}
|
|
1800
|
-
}
|
|
1801
|
-
return false;
|
|
1802
|
-
};
|
|
1803
|
-
},
|
|
1804
|
-
InputComponent: GridFilterInputMultipleValue
|
|
1805
|
-
};
|
|
1806
|
-
const IS_ANY_OF = isAnyOfOperator;
|
|
1807
|
-
const IS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_ANY_OF), {}, {
|
|
1808
|
-
InputComponent: GridFilterInputMultipleSingleSelect
|
|
1809
|
-
});
|
|
1810
|
-
|
|
1811
|
-
const hasAnyOfOperator = {
|
|
1812
|
-
label: 'has any of',
|
|
1813
|
-
value: 'hasAnyOf',
|
|
1814
|
-
getApplyFilterFn: filterItem => {
|
|
1815
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1816
|
-
return null;
|
|
1817
|
-
}
|
|
1818
|
-
return params => {
|
|
1819
|
-
if (filterItem.value.length === 0) {
|
|
1820
|
-
return true;
|
|
1821
|
-
}
|
|
1822
|
-
const cellValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
1823
|
-
const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
|
|
1824
|
-
return filterItemValues.some(v => cellValues.map(value => String(value)).includes(v));
|
|
1825
|
-
};
|
|
1826
|
-
},
|
|
1827
|
-
InputComponent: GridFilterInputMultipleValue
|
|
1828
|
-
};
|
|
1829
|
-
const HAS_ANY_OF = hasAnyOfOperator;
|
|
1830
|
-
const HAS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ANY_OF), {}, {
|
|
1831
|
-
InputComponent: GridFilterInputMultipleSingleSelect
|
|
1832
|
-
});
|
|
1833
|
-
|
|
1834
|
-
const isNotAnyOfOperator = {
|
|
1835
|
-
label: 'is not any of',
|
|
1836
|
-
value: 'isNotAnyOf',
|
|
1837
|
-
getApplyFilterFn: filterItem => {
|
|
1838
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1839
|
-
return null;
|
|
1840
|
-
}
|
|
1841
|
-
return params => {
|
|
1842
|
-
if (filterItem.value.length === 0) {
|
|
1843
|
-
return true;
|
|
1844
|
-
}
|
|
1845
|
-
const paramValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
1846
|
-
for (const paramValue of paramValues) {
|
|
1847
|
-
if (filterItem.value.includes(String(paramValue))) {
|
|
1848
|
-
return false;
|
|
1849
|
-
}
|
|
1850
|
-
}
|
|
1851
|
-
return true;
|
|
1852
|
-
};
|
|
1853
|
-
},
|
|
1854
|
-
InputComponent: GridFilterInputMultipleValue
|
|
1855
|
-
};
|
|
1856
|
-
const IS_NOT_ANY_OF = isNotAnyOfOperator;
|
|
1857
|
-
|
|
1858
|
-
const startsWithAnyOfOperator = {
|
|
1859
|
-
label: 'starts with any of',
|
|
1860
|
-
value: 'startsWithAnyOf',
|
|
1861
|
-
getApplyFilterFn: filterItem => {
|
|
1862
|
-
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
|
|
1863
|
-
return null;
|
|
1864
|
-
}
|
|
1865
|
-
return params => {
|
|
1866
|
-
if (filterItem.value.length === 0) {
|
|
1867
|
-
return true;
|
|
1868
|
-
}
|
|
1869
|
-
const paramValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
1870
|
-
let match = false;
|
|
1871
|
-
filterItem.value.forEach(filteredValue => {
|
|
1872
|
-
paramValues.forEach(paramValue => {
|
|
1873
|
-
if (String(paramValue).startsWith(filteredValue)) {
|
|
1874
|
-
match = true;
|
|
1875
|
-
}
|
|
1876
|
-
});
|
|
1877
|
-
});
|
|
1878
|
-
return match;
|
|
1879
|
-
};
|
|
1880
|
-
},
|
|
1881
|
-
InputComponent: GridFilterInputMultipleValue
|
|
1882
|
-
};
|
|
1883
|
-
const STARTS_WITH_ANY_OF = startsWithAnyOfOperator;
|
|
1884
|
-
|
|
1885
|
-
const doesNotHaveAnyOf = {
|
|
1886
|
-
label: "doesn't have any of",
|
|
1887
|
-
value: 'doesNotHaveAnyOf',
|
|
1888
|
-
getApplyFilterFn: filterItem => {
|
|
1889
|
-
if (!filterItem.columnField || !filterItem.value || !Array.isArray(filterItem.value) || filterItem.value.length === 0) {
|
|
1890
|
-
return null;
|
|
1891
|
-
}
|
|
1892
|
-
return params => {
|
|
1893
|
-
const cellValues = Array.isArray(params.value) ? params.value : [params.value];
|
|
1894
|
-
|
|
1895
|
-
// Return true only if none of the filter values are in the cell values
|
|
1896
|
-
return filterItem.value.every(filterVal => !cellValues.map(value => String(value)).includes(filterVal));
|
|
1897
|
-
};
|
|
1898
|
-
},
|
|
1899
|
-
InputComponent: GridFilterInputMultipleValue
|
|
1900
|
-
};
|
|
1901
|
-
const DOES_NOT_HAVE_ANY_OF = doesNotHaveAnyOf;
|
|
1902
|
-
const DOES_NOT_HAVE_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE_ANY_OF), {}, {
|
|
1903
|
-
InputComponent: GridFilterInputMultipleSingleSelect
|
|
1904
|
-
});
|
|
1905
|
-
|
|
1906
|
-
const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF];
|
|
1907
|
-
const getGridStringArrayOperatorsWithSelect = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF_WITH_SELECT, IS_ANY_OF_WITH_SELECT, IS_NOT_WITH_SELECT, IS_WITH_SELECT, STARTS_WITH_ANY_OF];
|
|
1908
|
-
const getGridStringArrayOperatorsWithSelectOnStringArrayColumns = () => [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT];
|
|
1909
|
-
|
|
1910
|
-
const getGridStringOperators = () => [...getGridStringOperators$1().filter(operator => !['isAnyOf'].includes(operator.value)), DOES_NOT_CONTAIN, DOES_NOT_EQUAL, ...getGridStringArrayOperators()];
|
|
1911
|
-
|
|
1912
|
-
// istanbul ignore file
|
|
1913
|
-
const operatorList = {
|
|
1914
|
-
// Default types
|
|
1915
|
-
string: getGridStringOperators$1(),
|
|
1916
|
-
number: getGridNumericOperators$1(),
|
|
1917
|
-
boolean: getGridBooleanOperators(),
|
|
1918
|
-
date: getGridDateOperators(),
|
|
1919
|
-
dateTime: getGridDateOperators(true),
|
|
1920
|
-
singleSelect: getGridSingleSelectOperators(),
|
|
1921
|
-
// Extended types
|
|
1922
|
-
rsString: getGridStringOperators(),
|
|
1923
|
-
rsNumber: getGridNumericOperators(),
|
|
1924
|
-
rsSingleSelect: [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF_WITH_SELECT, IS_NOT_WITH_SELECT, IS_WITH_SELECT, STARTS_WITH_ANY_OF],
|
|
1925
|
-
rsSingleSelectWithShortOperatorList: [IS_WITH_SELECT, IS_NOT_WITH_SELECT, IS_ANY_OF_WITH_SELECT],
|
|
1926
|
-
rsMultipleSelect: [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT],
|
|
1927
|
-
rsMultipleSelectWithShortOperatorList: [HAS_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, HAS_ANY_OF_WITH_SELECT],
|
|
1928
|
-
// Custom types
|
|
1929
|
-
rsStringArray: getGridStringArrayOperators()
|
|
1930
|
-
};
|
|
1931
|
-
|
|
1932
|
-
const getRsStringColumnType = () => {
|
|
1933
|
-
return {
|
|
1934
|
-
extendType: 'string',
|
|
1935
|
-
filterOperators: operatorList.rsString
|
|
1936
|
-
};
|
|
1937
|
-
};
|
|
1938
|
-
const getRsNumberColumnType = () => {
|
|
1939
|
-
return {
|
|
1940
|
-
extendType: 'number',
|
|
1941
|
-
filterOperators: operatorList.rsNumber
|
|
1942
|
-
};
|
|
1943
|
-
};
|
|
1944
|
-
const getRsSingleSelectColumnType = () => {
|
|
1945
|
-
return {
|
|
1946
|
-
extendType: 'singleSelect',
|
|
1947
|
-
filterOperators: operatorList.rsSingleSelect
|
|
1948
|
-
};
|
|
1949
|
-
};
|
|
1950
|
-
const getRsSingleSelectWithShortOperatorListColumnType = () => {
|
|
1951
|
-
return {
|
|
1952
|
-
extendType: 'singleSelect',
|
|
1953
|
-
filterOperators: operatorList.rsSingleSelectWithShortOperatorList
|
|
1954
|
-
};
|
|
1955
|
-
};
|
|
1956
|
-
const getRsMultipleSelectColumnType = () => {
|
|
1957
|
-
return {
|
|
1958
|
-
extendType: 'singleSelect',
|
|
1959
|
-
filterOperators: operatorList.rsMultipleSelect
|
|
1960
|
-
};
|
|
1961
|
-
};
|
|
1962
|
-
const getRsMultipleSelectWithShortOperatorListColumnType = () => {
|
|
1963
|
-
return {
|
|
1964
|
-
extendType: 'singleSelect',
|
|
1965
|
-
filterOperators: operatorList.rsMultipleSelectWithShortOperatorList
|
|
1966
|
-
};
|
|
1967
|
-
};
|
|
1968
|
-
const customColumnTypes = {
|
|
1969
|
-
rsString: getRsStringColumnType(),
|
|
1970
|
-
rsNumber: getRsNumberColumnType(),
|
|
1971
|
-
rsSingleSelect: getRsSingleSelectColumnType(),
|
|
1972
|
-
rsSingleSelectWithShortOperatorList: getRsSingleSelectWithShortOperatorListColumnType(),
|
|
1973
|
-
rsMultipleSelect: getRsMultipleSelectColumnType(),
|
|
1974
|
-
rsMultipleSelectWithShortOperatorList: getRsMultipleSelectWithShortOperatorListColumnType()
|
|
1975
|
-
};
|
|
1976
|
-
|
|
1977
185
|
// Store the license information in a global, so it can be shared
|
|
1978
186
|
// when module duplication occurs. The duplication of the modules can happen
|
|
1979
187
|
// if using multiple version of MUI X at the same time of the bundler
|
|
@@ -1999,7 +207,7 @@ class LicenseInfo {
|
|
|
1999
207
|
/**
|
|
2000
208
|
* Component style.
|
|
2001
209
|
*/
|
|
2002
|
-
const StyledDataGrid = styled
|
|
210
|
+
const StyledDataGrid = styled.div`
|
|
2003
211
|
${_ref => {
|
|
2004
212
|
let {
|
|
2005
213
|
$height
|
|
@@ -2067,20 +275,18 @@ const StyledDataGrid = styled$2.div`
|
|
|
2067
275
|
`;
|
|
2068
276
|
|
|
2069
277
|
const useControlledDatagridState = _ref => {
|
|
2070
|
-
var _initialState$paginat, _initialState$paginat2;
|
|
278
|
+
var _ref2, _ref3, _propsPaginationModel, _initialState$paginat, _initialState$paginat2, _pageSizeOptions$, _ref4, _propsPaginationModel2, _initialState$paginat3, _initialState$paginat4;
|
|
2071
279
|
let {
|
|
2072
280
|
initialState,
|
|
2073
|
-
|
|
281
|
+
pageSizeOptions,
|
|
2074
282
|
propsColumnVisibilityModel,
|
|
2075
283
|
propsFilterModel,
|
|
2076
284
|
propsOnColumnVisibilityModelChange,
|
|
2077
285
|
propsOnFilterModelChange,
|
|
2078
|
-
|
|
2079
|
-
propsOnPageSizeChange,
|
|
286
|
+
propsOnPaginationModelChange,
|
|
2080
287
|
propsOnPinnedColumnsChange,
|
|
2081
288
|
propsOnSortModelChange,
|
|
2082
|
-
|
|
2083
|
-
propsPageSize,
|
|
289
|
+
propsPaginationModel,
|
|
2084
290
|
propsPinnedColumns,
|
|
2085
291
|
propsSortModel
|
|
2086
292
|
} = _ref;
|
|
@@ -2128,33 +334,22 @@ const useControlledDatagridState = _ref => {
|
|
|
2128
334
|
setSortModel(model);
|
|
2129
335
|
}
|
|
2130
336
|
};
|
|
2131
|
-
const [
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
}
|
|
2139
|
-
};
|
|
2140
|
-
useEffect(() => {
|
|
2141
|
-
if (propsPage || propsPage === 0) {
|
|
2142
|
-
setPage(propsPage);
|
|
2143
|
-
}
|
|
2144
|
-
}, [propsPage]);
|
|
2145
|
-
const onPageSizeChange = pageSize => {
|
|
2146
|
-
onPageChange(0);
|
|
2147
|
-
if (propsOnPageSizeChange) {
|
|
2148
|
-
propsOnPageSizeChange(pageSize, undefined);
|
|
337
|
+
const [paginationModel, setPaginationModel] = useState({
|
|
338
|
+
pageSize: (_ref2 = (_ref3 = (_propsPaginationModel = propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) !== null && _propsPaginationModel !== void 0 ? _propsPaginationModel : initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : (_initialState$paginat2 = _initialState$paginat.paginationModel) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) !== null && _ref3 !== void 0 ? _ref3 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref2 !== void 0 ? _ref2 : 25,
|
|
339
|
+
page: (_ref4 = (_propsPaginationModel2 = propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _propsPaginationModel2 !== void 0 ? _propsPaginationModel2 : initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat3 = initialState.pagination) === null || _initialState$paginat3 === void 0 ? void 0 : (_initialState$paginat4 = _initialState$paginat3.paginationModel) === null || _initialState$paginat4 === void 0 ? void 0 : _initialState$paginat4.page) !== null && _ref4 !== void 0 ? _ref4 : 0
|
|
340
|
+
});
|
|
341
|
+
const onPaginationModelChange = (model, details) => {
|
|
342
|
+
if (propsOnPaginationModelChange) {
|
|
343
|
+
propsOnPaginationModelChange(model, details);
|
|
2149
344
|
} else {
|
|
2150
|
-
|
|
345
|
+
setPaginationModel(model);
|
|
2151
346
|
}
|
|
2152
347
|
};
|
|
2153
348
|
useEffect(() => {
|
|
2154
|
-
if (
|
|
2155
|
-
|
|
349
|
+
if (propsPaginationModel) {
|
|
350
|
+
setPaginationModel(propsPaginationModel);
|
|
2156
351
|
}
|
|
2157
|
-
}, [
|
|
352
|
+
}, [propsPaginationModel]);
|
|
2158
353
|
return {
|
|
2159
354
|
filterModel,
|
|
2160
355
|
onFilterModelChange,
|
|
@@ -2164,12 +359,10 @@ const useControlledDatagridState = _ref => {
|
|
|
2164
359
|
onPinnedColumnsChange,
|
|
2165
360
|
sortModel,
|
|
2166
361
|
onSortModelChange,
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
onPageChange,
|
|
2170
|
-
onPageSizeChange
|
|
362
|
+
paginationModel,
|
|
363
|
+
onPaginationModelChange
|
|
2171
364
|
};
|
|
2172
365
|
};
|
|
2173
366
|
|
|
2174
|
-
export {
|
|
367
|
+
export { LicenseInfo as L, StyledDataGrid as S, ThemeProvider as T, useControlledDatagridState as u };
|
|
2175
368
|
//# sourceMappingURL=useControlledDatagridState.js.map
|