UNPKG

4.31 kBJavaScriptView Raw
1import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2import _extends from "@babel/runtime/helpers/esm/extends";
3import * as React from 'react';
4import PropTypes from 'prop-types';
5import clsx from 'clsx';
6import formControlState from '../FormControl/formControlState';
7import useFormControl from '../FormControl/useFormControl';
8import capitalize from '../utils/capitalize';
9import withStyles from '../styles/withStyles';
10export const styles = theme => ({
11 /* Styles applied to the root element. */
12 root: _extends({
13 color: theme.palette.text.secondary
14 }, theme.typography.body1, {
15 lineHeight: 1,
16 padding: 0,
17 '&$focused': {
18 color: theme.palette.primary.main
19 },
20 '&$disabled': {
21 color: theme.palette.text.disabled
22 },
23 '&$error': {
24 color: theme.palette.error.main
25 }
26 }),
27
28 /* Styles applied to the root element if the color is secondary. */
29 colorSecondary: {
30 '&$focused': {
31 color: theme.palette.secondary.main
32 }
33 },
34
35 /* Pseudo-class applied to the root element if `focused={true}`. */
36 focused: {},
37
38 /* Pseudo-class applied to the root element if `disabled={true}`. */
39 disabled: {},
40
41 /* Pseudo-class applied to the root element if `error={true}`. */
42 error: {},
43
44 /* Pseudo-class applied to the root element if `filled={true}`. */
45 filled: {},
46
47 /* Pseudo-class applied to the root element if `required={true}`. */
48 required: {},
49
50 /* Styles applied to the asterisk element. */
51 asterisk: {
52 '&$error': {
53 color: theme.palette.error.main
54 }
55 }
56});
57const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(props, ref) {
58 const {
59 children,
60 classes,
61 className,
62 component: Component = 'label'
63 } = props,
64 other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "color", "component", "disabled", "error", "filled", "focused", "required"]);
65
66 const muiFormControl = useFormControl();
67 const fcs = formControlState({
68 props,
69 muiFormControl,
70 states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
71 });
72 return /*#__PURE__*/React.createElement(Component, _extends({
73 className: clsx(classes.root, classes[`color${capitalize(fcs.color || 'primary')}`], className, fcs.disabled && classes.disabled, fcs.error && classes.error, fcs.filled && classes.filled, fcs.focused && classes.focused, fcs.required && classes.required),
74 ref: ref
75 }, other), children, fcs.required && /*#__PURE__*/React.createElement("span", {
76 "aria-hidden": true,
77 className: clsx(classes.asterisk, fcs.error && classes.error)
78 }, "\u2009", '*'));
79});
80process.env.NODE_ENV !== "production" ? FormLabel.propTypes = {
81 // ----------------------------- Warning --------------------------------
82 // | These PropTypes are generated from the TypeScript type definitions |
83 // | To update them edit the d.ts file and run "yarn proptypes" |
84 // ----------------------------------------------------------------------
85
86 /**
87 * The content of the component.
88 */
89 children: PropTypes.node,
90
91 /**
92 * Override or extend the styles applied to the component.
93 * See [CSS API](#css) below for more details.
94 */
95 classes: PropTypes.object,
96
97 /**
98 * @ignore
99 */
100 className: PropTypes.string,
101
102 /**
103 * The color of the component. It supports those theme colors that make sense for this component.
104 */
105 color: PropTypes.oneOf(['primary', 'secondary']),
106
107 /**
108 * The component used for the root node.
109 * Either a string to use a HTML element or a component.
110 */
111 component: PropTypes
112 /* @typescript-to-proptypes-ignore */
113 .elementType,
114
115 /**
116 * If `true`, the label should be displayed in a disabled state.
117 */
118 disabled: PropTypes.bool,
119
120 /**
121 * If `true`, the label should be displayed in an error state.
122 */
123 error: PropTypes.bool,
124
125 /**
126 * If `true`, the label should use filled classes key.
127 */
128 filled: PropTypes.bool,
129
130 /**
131 * If `true`, the input of this label is focused (used by `FormGroup` components).
132 */
133 focused: PropTypes.bool,
134
135 /**
136 * If `true`, the label will indicate that the input is required.
137 */
138 required: PropTypes.bool
139} : void 0;
140export default withStyles(styles, {
141 name: 'MuiFormLabel'
142})(FormLabel);
\No newline at end of file