1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import NativeSelectInput from './NativeSelectInput';
|
6 | import withStyles from '../styles/withStyles';
|
7 | import formControlState from '../FormControl/formControlState';
|
8 | import useFormControl from '../FormControl/useFormControl';
|
9 | import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
|
10 | import Input from '../Input';
|
11 | export const styles = theme => ({
|
12 |
|
13 | root: {},
|
14 |
|
15 |
|
16 | select: {
|
17 | '-moz-appearance': 'none',
|
18 |
|
19 | '-webkit-appearance': 'none',
|
20 |
|
21 |
|
22 |
|
23 | userSelect: 'none',
|
24 | borderRadius: 0,
|
25 |
|
26 | minWidth: 16,
|
27 |
|
28 | cursor: 'pointer',
|
29 | '&:focus': {
|
30 |
|
31 | backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
|
32 | borderRadius: 0
|
33 |
|
34 | },
|
35 |
|
36 | '&::-ms-expand': {
|
37 | display: 'none'
|
38 | },
|
39 | '&$disabled': {
|
40 | cursor: 'default'
|
41 | },
|
42 | '&[multiple]': {
|
43 | height: 'auto'
|
44 | },
|
45 | '&:not([multiple]) option, &:not([multiple]) optgroup': {
|
46 | backgroundColor: theme.palette.background.paper
|
47 | },
|
48 | '&&': {
|
49 | paddingRight: 24
|
50 | }
|
51 | },
|
52 |
|
53 |
|
54 | filled: {
|
55 | '&&': {
|
56 | paddingRight: 32
|
57 | }
|
58 | },
|
59 |
|
60 |
|
61 | outlined: {
|
62 | borderRadius: theme.shape.borderRadius,
|
63 | '&&': {
|
64 | paddingRight: 32
|
65 | }
|
66 | },
|
67 |
|
68 |
|
69 | selectMenu: {
|
70 | height: 'auto',
|
71 |
|
72 | minHeight: '1.1876em',
|
73 |
|
74 | textOverflow: 'ellipsis',
|
75 | whiteSpace: 'nowrap',
|
76 | overflow: 'hidden'
|
77 | },
|
78 |
|
79 |
|
80 | disabled: {},
|
81 |
|
82 |
|
83 | icon: {
|
84 |
|
85 |
|
86 | position: 'absolute',
|
87 | right: 0,
|
88 | top: 'calc(50% - 12px)',
|
89 |
|
90 | pointerEvents: 'none',
|
91 |
|
92 | color: theme.palette.action.active,
|
93 | '&$disabled': {
|
94 | color: theme.palette.action.disabled
|
95 | }
|
96 | },
|
97 |
|
98 |
|
99 | iconOpen: {
|
100 | transform: 'rotate(180deg)'
|
101 | },
|
102 |
|
103 |
|
104 | iconFilled: {
|
105 | right: 7
|
106 | },
|
107 |
|
108 |
|
109 | iconOutlined: {
|
110 | right: 7
|
111 | },
|
112 |
|
113 |
|
114 | nativeInput: {
|
115 | bottom: 0,
|
116 | left: 0,
|
117 | position: 'absolute',
|
118 | opacity: 0,
|
119 | pointerEvents: 'none',
|
120 | width: '100%'
|
121 | }
|
122 | });
|
123 | const defaultInput = React.createElement(Input, null);
|
124 |
|
125 |
|
126 |
|
127 |
|
128 | const NativeSelect = React.forwardRef(function NativeSelect(props, ref) {
|
129 | const {
|
130 | children,
|
131 | classes,
|
132 | IconComponent = ArrowDropDownIcon,
|
133 | input = defaultInput,
|
134 | inputProps
|
135 | } = props,
|
136 | other = _objectWithoutPropertiesLoose(props, ["children", "classes", "IconComponent", "input", "inputProps", "variant"]);
|
137 |
|
138 | const muiFormControl = useFormControl();
|
139 | const fcs = formControlState({
|
140 | props,
|
141 | muiFormControl,
|
142 | states: ['variant']
|
143 | });
|
144 | return React.cloneElement(input, _extends({
|
145 |
|
146 |
|
147 | inputComponent: NativeSelectInput,
|
148 | inputProps: _extends({
|
149 | children,
|
150 | classes,
|
151 | IconComponent,
|
152 | variant: fcs.variant,
|
153 | type: undefined
|
154 | }, inputProps, input ? input.props.inputProps : {}),
|
155 | ref
|
156 | }, other));
|
157 | });
|
158 | process.env.NODE_ENV !== "production" ? NativeSelect.propTypes = {
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 | |
165 |
|
166 |
|
167 |
|
168 | children: PropTypes.node,
|
169 |
|
170 | |
171 |
|
172 |
|
173 |
|
174 | classes: PropTypes.object,
|
175 |
|
176 | |
177 |
|
178 |
|
179 | IconComponent: PropTypes.elementType,
|
180 |
|
181 | |
182 |
|
183 |
|
184 | input: PropTypes.element,
|
185 |
|
186 | |
187 |
|
188 |
|
189 | inputProps: PropTypes.object,
|
190 |
|
191 | |
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 | onChange: PropTypes.func,
|
198 |
|
199 | |
200 |
|
201 |
|
202 | value: PropTypes.any,
|
203 |
|
204 | |
205 |
|
206 |
|
207 | variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
|
208 | } : void 0;
|
209 | NativeSelect.muiName = 'Select';
|
210 | export default withStyles(styles, {
|
211 | name: 'MuiNativeSelect'
|
212 | })(NativeSelect); |
\ | No newline at end of file |