1 | import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
2 | import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
3 | import _extends from "@babel/runtime/helpers/esm/extends";
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
7 | import formControlState from '../FormControl/formControlState';
|
8 | import useFormControl from '../FormControl/useFormControl';
|
9 | import FormLabel, { formLabelClasses } from '../FormLabel';
|
10 | import useThemeProps from '../styles/useThemeProps';
|
11 | import styled, { rootShouldForwardProp } from '../styles/styled';
|
12 | import { getInputLabelUtilityClasses } from './inputLabelClasses';
|
13 | import { jsx as _jsx } from "react/jsx-runtime";
|
14 |
|
15 | var useUtilityClasses = function useUtilityClasses(ownerState) {
|
16 | var classes = ownerState.classes,
|
17 | formControl = ownerState.formControl,
|
18 | size = ownerState.size,
|
19 | shrink = ownerState.shrink,
|
20 | disableAnimation = ownerState.disableAnimation,
|
21 | variant = ownerState.variant,
|
22 | required = ownerState.required;
|
23 | var slots = {
|
24 | root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size === 'small' && 'sizeSmall', variant],
|
25 | asterisk: [required && 'asterisk']
|
26 | };
|
27 | var composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
|
28 | return _extends({}, classes, composedClasses);
|
29 | };
|
30 |
|
31 | var InputLabelRoot = styled(FormLabel, {
|
32 | shouldForwardProp: function shouldForwardProp(prop) {
|
33 | return rootShouldForwardProp(prop) || prop === 'classes';
|
34 | },
|
35 | name: 'MuiInputLabel',
|
36 | slot: 'Root',
|
37 | overridesResolver: function overridesResolver(props, styles) {
|
38 | var ownerState = props.ownerState;
|
39 | return [_defineProperty({}, "& .".concat(formLabelClasses.asterisk), styles.asterisk), styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
|
40 | }
|
41 | })(function (_ref2) {
|
42 | var theme = _ref2.theme,
|
43 | ownerState = _ref2.ownerState;
|
44 | return _extends({
|
45 | display: 'block',
|
46 | transformOrigin: 'top left',
|
47 | whiteSpace: 'nowrap',
|
48 | overflow: 'hidden',
|
49 | textOverflow: 'ellipsis',
|
50 | maxWidth: '100%'
|
51 | }, ownerState.formControl && {
|
52 | position: 'absolute',
|
53 | left: 0,
|
54 | top: 0,
|
55 |
|
56 | transform: 'translate(0, 20px) scale(1)'
|
57 | }, ownerState.size === 'small' && {
|
58 |
|
59 | transform: 'translate(0, 17px) scale(1)'
|
60 | }, ownerState.shrink && {
|
61 | transform: 'translate(0, -1.5px) scale(0.75)',
|
62 | transformOrigin: 'top left',
|
63 | maxWidth: '133%'
|
64 | }, !ownerState.disableAnimation && {
|
65 | transition: theme.transitions.create(['color', 'transform', 'max-width'], {
|
66 | duration: theme.transitions.duration.shorter,
|
67 | easing: theme.transitions.easing.easeOut
|
68 | })
|
69 | }, ownerState.variant === 'filled' && _extends({
|
70 |
|
71 |
|
72 |
|
73 |
|
74 | zIndex: 1,
|
75 | pointerEvents: 'none',
|
76 | transform: 'translate(12px, 16px) scale(1)',
|
77 | maxWidth: 'calc(100% - 24px)'
|
78 | }, ownerState.size === 'small' && {
|
79 | transform: 'translate(12px, 13px) scale(1)'
|
80 | }, ownerState.shrink && _extends({
|
81 | userSelect: 'none',
|
82 | pointerEvents: 'auto',
|
83 | transform: 'translate(12px, 7px) scale(0.75)',
|
84 | maxWidth: 'calc(133% - 24px)'
|
85 | }, ownerState.size === 'small' && {
|
86 | transform: 'translate(12px, 4px) scale(0.75)'
|
87 | })), ownerState.variant === 'outlined' && _extends({
|
88 |
|
89 | zIndex: 1,
|
90 | pointerEvents: 'none',
|
91 | transform: 'translate(14px, 16px) scale(1)',
|
92 | maxWidth: 'calc(100% - 24px)'
|
93 | }, ownerState.size === 'small' && {
|
94 | transform: 'translate(14px, 9px) scale(1)'
|
95 | }, ownerState.shrink && {
|
96 | userSelect: 'none',
|
97 | pointerEvents: 'auto',
|
98 | maxWidth: 'calc(133% - 24px)',
|
99 | transform: 'translate(14px, -9px) scale(0.75)'
|
100 | }));
|
101 | });
|
102 | var InputLabel = React.forwardRef(function InputLabel(inProps, ref) {
|
103 | var props = useThemeProps({
|
104 | name: 'MuiInputLabel',
|
105 | props: inProps
|
106 | });
|
107 |
|
108 | var _props$disableAnimati = props.disableAnimation,
|
109 | disableAnimation = _props$disableAnimati === void 0 ? false : _props$disableAnimati,
|
110 | margin = props.margin,
|
111 | shrinkProp = props.shrink,
|
112 | variant = props.variant,
|
113 | other = _objectWithoutProperties(props, ["disableAnimation", "margin", "shrink", "variant"]);
|
114 |
|
115 | var muiFormControl = useFormControl();
|
116 | var shrink = shrinkProp;
|
117 |
|
118 | if (typeof shrink === 'undefined' && muiFormControl) {
|
119 | shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
|
120 | }
|
121 |
|
122 | var fcs = formControlState({
|
123 | props: props,
|
124 | muiFormControl: muiFormControl,
|
125 | states: ['size', 'variant', 'required']
|
126 | });
|
127 |
|
128 | var ownerState = _extends({}, props, {
|
129 | disableAnimation: disableAnimation,
|
130 | formControl: muiFormControl,
|
131 | shrink: shrink,
|
132 | size: fcs.size,
|
133 | variant: fcs.variant,
|
134 | required: fcs.required
|
135 | });
|
136 |
|
137 | var classes = useUtilityClasses(ownerState);
|
138 | return _jsx(InputLabelRoot, _extends({
|
139 | "data-shrink": shrink,
|
140 | ownerState: ownerState,
|
141 | ref: ref
|
142 | }, other, {
|
143 | classes: classes
|
144 | }));
|
145 | });
|
146 | process.env.NODE_ENV !== "production" ? InputLabel.propTypes
|
147 |
|
148 | = {
|
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 | |
155 |
|
156 |
|
157 | children: PropTypes.node,
|
158 |
|
159 | |
160 |
|
161 |
|
162 | classes: PropTypes.object,
|
163 |
|
164 | |
165 |
|
166 |
|
167 |
|
168 |
|
169 | color: PropTypes
|
170 |
|
171 | .oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
|
172 |
|
173 | |
174 |
|
175 |
|
176 |
|
177 | disableAnimation: PropTypes.bool,
|
178 |
|
179 | |
180 |
|
181 |
|
182 | disabled: PropTypes.bool,
|
183 |
|
184 | |
185 |
|
186 |
|
187 | error: PropTypes.bool,
|
188 |
|
189 | |
190 |
|
191 |
|
192 | focused: PropTypes.bool,
|
193 |
|
194 | |
195 |
|
196 |
|
197 |
|
198 | margin: PropTypes.oneOf(['dense']),
|
199 |
|
200 | |
201 |
|
202 |
|
203 | required: PropTypes.bool,
|
204 |
|
205 | |
206 |
|
207 |
|
208 | shrink: PropTypes.bool,
|
209 |
|
210 | |
211 |
|
212 |
|
213 |
|
214 | size: PropTypes.oneOf(['normal', 'small']),
|
215 |
|
216 | |
217 |
|
218 |
|
219 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
220 |
|
221 | |
222 |
|
223 |
|
224 | variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
|
225 | } : void 0;
|
226 | export default InputLabel; |
\ | No newline at end of file |