/
MaterialValueSelector.tsx
95 lines (87 loc) · 2.51 KB
/
MaterialValueSelector.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import type { Select, SelectChangeEvent } from '@mui/material';
import type { ComponentPropsWithoutRef, ComponentType } from 'react';
import * as React from 'react';
import { useContext } from 'react';
import type { VersatileSelectorProps } from 'react-querybuilder';
import { ValueSelector, useValueSelector } from 'react-querybuilder';
import { RQBMaterialContext } from './RQBMaterialContext';
import type { RQBMaterialComponents } from './types';
import { toOptions } from './utils';
export type MaterialValueSelectorProps = VersatileSelectorProps &
ComponentPropsWithoutRef<typeof Select> & {
muiComponents?: RQBMaterialComponents;
};
export const MaterialValueSelector = ({
className,
handleOnChange,
options,
value,
disabled,
title,
multiple,
listsAsArrays,
testID,
rule,
rules,
level,
path,
context,
validation,
operator,
field,
fieldData,
schema,
muiComponents: muiComponentsProp,
defaultValue: _defaultValue,
...otherProps
}: MaterialValueSelectorProps) => {
const muiComponents = useContext(RQBMaterialContext) ?? muiComponentsProp;
const { onChange, val } = useValueSelector({ handleOnChange, listsAsArrays, multiple, value });
const muiSelectChangeHandler = ({ target: { value } }: SelectChangeEvent<string | string[]>) =>
onChange(value);
const key = muiComponents ? 'mui' : 'no-mui';
if (!muiComponents) {
const VS = ValueSelector as ComponentType<VersatileSelectorProps>;
return (
<VS
key={key}
className={className}
handleOnChange={handleOnChange}
options={options}
value={value}
disabled={disabled}
title={title}
multiple={multiple}
listsAsArrays={listsAsArrays}
testID={testID}
rule={rule}
rules={rules}
level={level}
path={path}
context={context}
validation={validation}
operator={operator}
field={field}
fieldData={fieldData}
schema={schema}
/>
);
}
const { FormControl, Select, ListSubheader, MenuItem } = muiComponents;
return (
<FormControl
key={key}
variant="standard"
className={className}
title={title}
disabled={disabled}>
<Select value={val} onChange={muiSelectChangeHandler} multiple={multiple} {...otherProps}>
{toOptions(options ?? /* istanbul ignore next */ [], {
ListSubheader,
MenuItem,
})}
</Select>
</FormControl>
);
};
MaterialValueSelector.displayName = 'MaterialValueSelector';