@material-ui/core
Version:
React components that implement Google's Material Design.
142 lines (124 loc) • 4.26 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import formControlState from '../FormControl/formControlState';
import useFormControl from '../FormControl/useFormControl';
import withStyles from '../styles/withStyles';
export var styles = function styles(theme) {
return {
/* Styles applied to the root element. */
root: _extends({
color: theme.palette.text.secondary
}, theme.typography.caption, {
textAlign: 'left',
marginTop: 8,
lineHeight: '1em',
minHeight: '1em',
margin: 0,
'&$disabled': {
color: theme.palette.text.disabled
},
'&$error': {
color: theme.palette.error.main
}
}),
/* Pseudo-class applied to the root element if `error={true}`. */
error: {},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the root element if `margin="dense"`. */
marginDense: {
marginTop: 4
},
/* Styles applied to the root element if `variant="filled"` or `variant="outlined"`. */
contained: {
margin: '8px 12px 0'
},
/* Pseudo-class applied to the root element if `focused={true}`. */
focused: {},
/* Pseudo-class applied to the root element if `filled={true}`. */
filled: {},
/* Pseudo-class applied to the root element if `required={true}`. */
required: {}
};
};
var FormHelperText = React.forwardRef(function FormHelperText(props, ref) {
var classes = props.classes,
classNameProp = props.className,
_props$component = props.component,
Component = _props$component === void 0 ? 'p' : _props$component,
disabled = props.disabled,
error = props.error,
filled = props.filled,
focused = props.focused,
margin = props.margin,
required = props.required,
variant = props.variant,
other = _objectWithoutProperties(props, ["classes", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"]);
var muiFormControl = useFormControl();
var fcs = formControlState({
props: props,
muiFormControl: muiFormControl,
states: ['variant', 'margin', 'disabled', 'error', 'filled', 'focused', 'required']
});
return React.createElement(Component, _extends({
className: clsx(classes.root, (fcs.variant === 'filled' || fcs.variant === 'outlined') && classes.contained, classNameProp, fcs.disabled && classes.disabled, fcs.error && classes.error, fcs.filled && classes.filled, fcs.focused && classes.focused, fcs.required && classes.required, {
dense: classes.marginDense
}[fcs.margin]),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? FormHelperText.propTypes = {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.elementType,
/**
* If `true`, the helper text should be displayed in a disabled state.
*/
disabled: PropTypes.bool,
/**
* If `true`, helper text should be displayed in an error state.
*/
error: PropTypes.bool,
/**
* If `true`, the helper text should use filled classes key.
*/
filled: PropTypes.bool,
/**
* If `true`, the helper text should use focused classes key.
*/
focused: PropTypes.bool,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: PropTypes.oneOf(['dense']),
/**
* If `true`, the helper text should use required classes key.
*/
required: PropTypes.bool,
/**
* The variant to use.
*/
variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
} : void 0;
export default withStyles(styles, {
name: 'MuiFormHelperText'
})(FormHelperText);