material-ui-cordova/Form/FormLabel.js.flow

React components that implement Google's Material Design.

// @flow

import React from 'react';
import type { ElementType, Node } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';

export const styles = (theme: Object) => {
  const focusColor = theme.palette.primary[theme.palette.type === 'light' ? 'A700' : 'A200'];
  return {
    root: {
      fontFamily: theme.typography.fontFamily,
      color: theme.palette.input.labelText,
      fontSize: theme.typography.pxToRem(16),
      lineHeight: 1,
      padding: 0,
    },
    focused: {
      color: focusColor,
    },
    error: {
      color: theme.palette.error.A400,
    },
    disabled: {
      color: theme.palette.input.disabled,
    },
  };
};

type ProvidedProps = {
  classes: Object,
  /**
   * @ignore
   */
  theme?: Object,
};

export type Props = {
  /**
   * The content of the component.
   */
  children?: Node,
  /**
   * Useful to extend the style applied to components.
   */
  classes?: Object,
  /**
   * @ignore
   */
  className?: string,
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  component: ElementType,
  /**
   * If `true`, the label should be displayed in a disabled state.
   */
  disabled?: boolean,
  /**
   * If `true`, the label should be displayed in an error state.
   */
  error?: boolean,
  /**
   * If `true`, the input of this label is focused (used by `FormGroup` components).
   */
  focused?: boolean,
  /**
   * If `true`, the label will indicate that the input is required.
   */
  required?: boolean,
};

class FormLabel extends React.Component<ProvidedProps & Props> {
  static contextTypes = {
    muiFormControl: PropTypes.object,
  };

  static defaultProps = {
    component: ('label': ElementType),
  };

  context: { muiFormControl: Object };

  render() {
    const {
      children,
      classes,
      className: classNameProp,
      component: Component,
      disabled: disabledProp,
      error: errorProp,
      focused: focusedProp,
      required: requiredProp,
      ...other
    } = this.props;

    const { muiFormControl } = this.context;

    let required = requiredProp;
    let focused = focusedProp;
    let disabled = disabledProp;
    let error = errorProp;

    if (muiFormControl) {
      if (typeof required === 'undefined') {
        required = muiFormControl.required;
      }
      if (typeof focused === 'undefined') {
        focused = muiFormControl.focused;
      }
      if (typeof disabled === 'undefined') {
        disabled = muiFormControl.disabled;
      }
      if (typeof error === 'undefined') {
        error = muiFormControl.error;
      }
    }

    const className = classNames(
      classes.root,
      {
        [classes.focused]: focused,
        [classes.disabled]: disabled,
        [classes.error]: error,
      },
      classNameProp,
    );

    const asteriskClassName = classNames({
      [classes.error]: error,
    });

    return (
      <Component className={className} {...other}>
        {children}
        {required && (
          <span className={asteriskClassName} data-mui-test="FormLabelAsterisk">
            {'\u2009*'}
          </span>
        )}
      </Component>
    );
  }
}

export default withStyles(styles, { name: 'MuiFormLabel' })(FormLabel);