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 clsx from 'clsx';
|
6 | import formControlState from '../FormControl/formControlState';
|
7 | import useFormControl from '../FormControl/useFormControl';
|
8 | import withStyles from '../styles/withStyles';
|
9 | import FormLabel from '../FormLabel';
|
10 | export const styles = theme => ({
|
11 |
|
12 | root: {
|
13 | display: 'block',
|
14 | transformOrigin: 'top left'
|
15 | },
|
16 |
|
17 |
|
18 | focused: {},
|
19 |
|
20 |
|
21 | disabled: {},
|
22 |
|
23 |
|
24 | error: {},
|
25 |
|
26 |
|
27 | required: {},
|
28 |
|
29 |
|
30 | asterisk: {},
|
31 |
|
32 |
|
33 | formControl: {
|
34 | position: 'absolute',
|
35 | left: 0,
|
36 | top: 0,
|
37 |
|
38 | transform: 'translate(0, 24px) scale(1)'
|
39 | },
|
40 |
|
41 |
|
42 | marginDense: {
|
43 |
|
44 | transform: 'translate(0, 21px) scale(1)'
|
45 | },
|
46 |
|
47 |
|
48 | shrink: {
|
49 | transform: 'translate(0, 1.5px) scale(0.75)',
|
50 | transformOrigin: 'top left'
|
51 | },
|
52 |
|
53 |
|
54 | animated: {
|
55 | transition: theme.transitions.create(['color', 'transform'], {
|
56 | duration: theme.transitions.duration.shorter,
|
57 | easing: theme.transitions.easing.easeOut
|
58 | })
|
59 | },
|
60 |
|
61 |
|
62 | filled: {
|
63 |
|
64 |
|
65 |
|
66 |
|
67 | zIndex: 1,
|
68 | pointerEvents: 'none',
|
69 | transform: 'translate(12px, 20px) scale(1)',
|
70 | '&$marginDense': {
|
71 | transform: 'translate(12px, 17px) scale(1)'
|
72 | },
|
73 | '&$shrink': {
|
74 | transform: 'translate(12px, 10px) scale(0.75)',
|
75 | '&$marginDense': {
|
76 | transform: 'translate(12px, 7px) scale(0.75)'
|
77 | }
|
78 | }
|
79 | },
|
80 |
|
81 |
|
82 | outlined: {
|
83 |
|
84 | zIndex: 1,
|
85 | pointerEvents: 'none',
|
86 | transform: 'translate(14px, 20px) scale(1)',
|
87 | '&$marginDense': {
|
88 | transform: 'translate(14px, 12px) scale(1)'
|
89 | },
|
90 | '&$shrink': {
|
91 | transform: 'translate(14px, -6px) scale(0.75)'
|
92 | }
|
93 | }
|
94 | });
|
95 | const InputLabel = React.forwardRef(function InputLabel(props, ref) {
|
96 | const {
|
97 | classes,
|
98 | className,
|
99 | disableAnimation = false,
|
100 | shrink: shrinkProp
|
101 | } = props,
|
102 | other = _objectWithoutPropertiesLoose(props, ["classes", "className", "disableAnimation", "margin", "shrink", "variant"]);
|
103 |
|
104 | const muiFormControl = useFormControl();
|
105 | let shrink = shrinkProp;
|
106 |
|
107 | if (typeof shrink === 'undefined' && muiFormControl) {
|
108 | shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
|
109 | }
|
110 |
|
111 | const fcs = formControlState({
|
112 | props,
|
113 | muiFormControl,
|
114 | states: ['margin', 'variant']
|
115 | });
|
116 | return React.createElement(FormLabel, _extends({
|
117 | "data-shrink": shrink,
|
118 | className: clsx(classes.root, className, muiFormControl && classes.formControl, !disableAnimation && classes.animated, shrink && classes.shrink, fcs.margin === 'dense' && classes.marginDense, {
|
119 | 'filled': classes.filled,
|
120 | 'outlined': classes.outlined
|
121 | }[fcs.variant]),
|
122 | classes: {
|
123 | focused: classes.focused,
|
124 | disabled: classes.disabled,
|
125 | error: classes.error,
|
126 | required: classes.required,
|
127 | asterisk: classes.asterisk
|
128 | },
|
129 | ref: ref
|
130 | }, other));
|
131 | });
|
132 | process.env.NODE_ENV !== "production" ? InputLabel.propTypes = {
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 | |
139 |
|
140 |
|
141 | children: PropTypes.node,
|
142 |
|
143 | |
144 |
|
145 |
|
146 |
|
147 | classes: PropTypes.object,
|
148 |
|
149 | |
150 |
|
151 |
|
152 | className: PropTypes.string,
|
153 |
|
154 | |
155 |
|
156 |
|
157 | color: PropTypes.oneOf(['primary', 'secondary']),
|
158 |
|
159 | |
160 |
|
161 |
|
162 | disableAnimation: PropTypes.bool,
|
163 |
|
164 | |
165 |
|
166 |
|
167 | disabled: PropTypes.bool,
|
168 |
|
169 | |
170 |
|
171 |
|
172 | error: PropTypes.bool,
|
173 |
|
174 | |
175 |
|
176 |
|
177 | focused: PropTypes.bool,
|
178 |
|
179 | |
180 |
|
181 |
|
182 |
|
183 | margin: PropTypes.oneOf(['dense']),
|
184 |
|
185 | |
186 |
|
187 |
|
188 | required: PropTypes.bool,
|
189 |
|
190 | |
191 |
|
192 |
|
193 | shrink: PropTypes.bool,
|
194 |
|
195 | |
196 |
|
197 |
|
198 | variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
|
199 | } : void 0;
|
200 | export default withStyles(styles, {
|
201 | name: 'MuiInputLabel'
|
202 | })(InputLabel); |
\ | No newline at end of file |