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 { mergeClasses } from '@material-ui/styles';
|
6 | import SelectInput from './SelectInput';
|
7 | import formControlState from '../FormControl/formControlState';
|
8 | import useFormControl from '../FormControl/useFormControl';
|
9 | import withStyles from '../styles/withStyles';
|
10 | import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
|
11 | import Input from '../Input';
|
12 | import { styles as nativeSelectStyles } from '../NativeSelect/NativeSelect';
|
13 | import NativeSelectInput from '../NativeSelect/NativeSelectInput';
|
14 | import FilledInput from '../FilledInput';
|
15 | import OutlinedInput from '../OutlinedInput';
|
16 | export const styles = nativeSelectStyles;
|
17 |
|
18 | var _ref = /*#__PURE__*/React.createElement(Input, null);
|
19 |
|
20 | var _ref2 = /*#__PURE__*/React.createElement(FilledInput, null);
|
21 |
|
22 | const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
|
23 | const {
|
24 | autoWidth = false,
|
25 | children,
|
26 | classes,
|
27 | displayEmpty = false,
|
28 | IconComponent = ArrowDropDownIcon,
|
29 | id,
|
30 | input,
|
31 | inputProps,
|
32 | label,
|
33 | labelId,
|
34 | labelWidth = 0,
|
35 | MenuProps,
|
36 | multiple = false,
|
37 | native = false,
|
38 | onClose,
|
39 | onOpen,
|
40 | open,
|
41 | renderValue,
|
42 | SelectDisplayProps,
|
43 | variant: variantProps = 'standard'
|
44 | } = props,
|
45 | other = _objectWithoutPropertiesLoose(props, ["autoWidth", "children", "classes", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "labelWidth", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
|
46 |
|
47 | const inputComponent = native ? NativeSelectInput : SelectInput;
|
48 | const muiFormControl = useFormControl();
|
49 | const fcs = formControlState({
|
50 | props,
|
51 | muiFormControl,
|
52 | states: ['variant']
|
53 | });
|
54 | const variant = fcs.variant || variantProps;
|
55 | const InputComponent = input || {
|
56 | standard: _ref,
|
57 | outlined: /*#__PURE__*/React.createElement(OutlinedInput, {
|
58 | label: label,
|
59 | labelWidth: labelWidth
|
60 | }),
|
61 | filled: _ref2
|
62 | }[variant];
|
63 | return /*#__PURE__*/React.cloneElement(InputComponent, _extends({
|
64 | // Most of the logic is implemented in `SelectInput`.
|
65 | // The `Select` component is a simple API wrapper to expose something better to play with.
|
66 | inputComponent,
|
67 | inputProps: _extends({
|
68 | children,
|
69 | IconComponent,
|
70 | variant,
|
71 | type: undefined,
|
72 | // We render a select. We can ignore the type provided by the `Input`.
|
73 | multiple
|
74 | }, native ? {
|
75 | id
|
76 | } : {
|
77 | autoWidth,
|
78 | displayEmpty,
|
79 | labelId,
|
80 | MenuProps,
|
81 | onClose,
|
82 | onOpen,
|
83 | open,
|
84 | renderValue,
|
85 | SelectDisplayProps: _extends({
|
86 | id
|
87 | }, SelectDisplayProps)
|
88 | }, inputProps, {
|
89 | classes: inputProps ? mergeClasses({
|
90 | baseClasses: classes,
|
91 | newClasses: inputProps.classes,
|
92 | Component: Select
|
93 | }) : classes
|
94 | }, input ? input.props.inputProps : {}),
|
95 | ref
|
96 | }, other));
|
97 | });
|
98 | process.env.NODE_ENV !== "production" ? Select.propTypes = {
|
99 | // ----------------------------- Warning --------------------------------
|
100 | // | These PropTypes are generated from the TypeScript type definitions |
|
101 | // | To update them edit the d.ts file and run "yarn proptypes" |
|
102 | // ----------------------------------------------------------------------
|
103 |
|
104 | /**
|
105 | * If `true`, the width of the popover will automatically be set according to the items inside the
|
106 | * menu, otherwise it will be at least the width of the select input.
|
107 | */
|
108 | autoWidth: PropTypes.bool,
|
109 |
|
110 | /**
|
111 | * The option elements to populate the select with.
|
112 | * Can be some `MenuItem` when `native` is false and `option` when `native` is true.
|
113 | *
|
114 | * ⚠️The `MenuItem` elements **must** be direct descendants when `native` is false.
|
115 | */
|
116 | children: PropTypes.node,
|
117 |
|
118 | /**
|
119 | * Override or extend the styles applied to the component.
|
120 | * See [CSS API](#css) below for more details.
|
121 | */
|
122 | classes: PropTypes.object,
|
123 |
|
124 | /**
|
125 | * The default element value. Use when the component is not controlled.
|
126 | */
|
127 | defaultValue: PropTypes.any,
|
128 |
|
129 | /**
|
130 | * If `true`, a value is displayed even if no items are selected.
|
131 | *
|
132 | * In order to display a meaningful value, a function should be passed to the `renderValue` prop which returns the value to be displayed when no items are selected.
|
133 | * You can only use it when the `native` prop is `false` (default).
|
134 | */
|
135 | displayEmpty: PropTypes.bool,
|
136 |
|
137 | /**
|
138 | * The icon that displays the arrow.
|
139 | */
|
140 | IconComponent: PropTypes.elementType,
|
141 |
|
142 | /**
|
143 | * The `id` of the wrapper element or the `select` element when `native`.
|
144 | */
|
145 | id: PropTypes.string,
|
146 |
|
147 | /**
|
148 | * An `Input` element; does not have to be a material-ui specific `Input`.
|
149 | */
|
150 | input: PropTypes.element,
|
151 |
|
152 | /**
|
153 | * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
154 | * When `native` is `true`, the attributes are applied on the `select` element.
|
155 | */
|
156 | inputProps: PropTypes.object,
|
157 |
|
158 | /**
|
159 | * See [OutlinedInput#label](/api/outlined-input/#props)
|
160 | */
|
161 | label: PropTypes.node,
|
162 |
|
163 | /**
|
164 | * The ID of an element that acts as an additional label. The Select will
|
165 | * be labelled by the additional label and the selected value.
|
166 | */
|
167 | labelId: PropTypes.string,
|
168 |
|
169 | /**
|
170 | * See [OutlinedInput#label](/api/outlined-input/#props)
|
171 | */
|
172 | labelWidth: PropTypes.number,
|
173 |
|
174 | /**
|
175 | * Props applied to the [`Menu`](/api/menu/) element.
|
176 | */
|
177 | MenuProps: PropTypes.object,
|
178 |
|
179 | /**
|
180 | * If `true`, `value` must be an array and the menu will support multiple selections.
|
181 | */
|
182 | multiple: PropTypes.bool,
|
183 |
|
184 | /**
|
185 | * If `true`, the component will be using a native `select` element.
|
186 | */
|
187 | native: PropTypes.bool,
|
188 |
|
189 | /**
|
190 | * Callback function fired when a menu item is selected.
|
191 | *
|
192 | * @param {object} event The event source of the callback.
|
193 | * You can pull out the new value by accessing `event.target.value` (any).
|
194 | * @param {object} [child] The react element that was selected when `native` is `false` (default).
|
195 | */
|
196 | onChange: PropTypes.func,
|
197 |
|
198 | /**
|
199 | * Callback fired when the component requests to be closed.
|
200 | * Use in controlled mode (see open).
|
201 | *
|
202 | * @param {object} event The event source of the callback.
|
203 | */
|
204 | onClose: PropTypes.func,
|
205 |
|
206 | /**
|
207 | * Callback fired when the component requests to be opened.
|
208 | * Use in controlled mode (see open).
|
209 | *
|
210 | * @param {object} event The event source of the callback.
|
211 | */
|
212 | onOpen: PropTypes.func,
|
213 |
|
214 | /**
|
215 | * Control `select` open state.
|
216 | * You can only use it when the `native` prop is `false` (default).
|
217 | */
|
218 | open: PropTypes.bool,
|
219 |
|
220 | /**
|
221 | * Render the selected value.
|
222 | * You can only use it when the `native` prop is `false` (default).
|
223 | *
|
224 | * @param {any} value The `value` provided to the component.
|
225 | * @returns {ReactNode}
|
226 | */
|
227 | renderValue: PropTypes.func,
|
228 |
|
229 | /**
|
230 | * Props applied to the clickable div element.
|
231 | */
|
232 | SelectDisplayProps: PropTypes.object,
|
233 |
|
234 | /**
|
235 | * The input value. Providing an empty string will select no options.
|
236 | * This prop is required when the `native` prop is `false` (default).
|
237 | * Set to an empty string `''` if you don't want any of the available options to be selected.
|
238 | *
|
239 | * If the value is an object it must have reference equality with the option in order to be selected.
|
240 | * If the value is not an object, the string representation must match with the string representation of the option in order to be selected.
|
241 | */
|
242 | value: PropTypes.any,
|
243 |
|
244 | /**
|
245 | * The variant to use.
|
246 | */
|
247 | variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
|
248 | } : void 0;
|
249 | Select.muiName = 'Select';
|
250 | export default withStyles(styles, {
|
251 | name: 'MuiSelect'
|
252 | })(Select); |
\ | No newline at end of file |