@6thquake/react-material/es/Form/FormItem.js

React components that implement Google's Material Design.

/**
 * @ignore - do not document.
 */
import React, { Component } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import { PercentageGrid as Grid } from '../Grid';

const style = theme => ({
  'form-item': {
    lineHeight: '48px',
    '&:before,&:after': {
      content: '""',
      display: 'table'
    },
    '&:after': {
      clear: 'both'
    }
  },
  'form-item-direction-column': {
    lineHeight: 'normal'
  },
  'form-item-label': {
    height: '48px',
    textAlign: 'right',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    paddingRight: theme.spacing(1)
  },
  'form-item-label-colon': {
    '& label': {
      '&:after': {
        content: '":"',
        margin: '0 10px 0 4px'
      }
    }
  },
  'form-item-label-required': {
    '& label': {
      '&:before': {
        marginRight: theme.spacing(0.5),
        content: '"*"',
        fontSize: '14px',
        color: '#f5222d'
      }
    }
  },
  'form-item-label-required2': {
    '& label': {
      '&:after': {
        marginLeft: theme.spacing(0.5),
        content: '"*"',
        fontSize: '14px',
        color: '#f5222d'
      }
    }
  },
  'form-item-label-direction-column': {
    width: '100%',
    height: 'auto',
    textAlign: 'left'
  },
  'form-item-wrapper': {}
});

var _ref = React.createElement(React.Fragment, {
  key: "label"
});

class FormItem extends Component {
  constructor(...args) {
    super(...args);
    this.state = {};
  }

  renderLabel() {
    const {
      classes,
      label,
      required,
      InputLabelProps: {
        direction = 'standard',
        justify = 3,
        colon = false
      }
    } = this.props;

    if (!label) {
      return _ref;
    }

    let labelChildren = label;

    if (colon && typeof label === 'string' && label.trim() !== '') {
      labelChildren = label.replace(/[：|:]\s*$/, '');
    }

    const requiredClass = typeof label === 'string' ? !!label.trim().length : true;
    const className = classnames(classes['form-item-label'], {
      [classes['form-item-label-colon']]: colon,
      [classes['form-item-label-required']]: requiredClass && required,
      [classes['form-item-label-direction-column']]: direction === 'column'
    });
    return React.createElement(Grid, {
      className: className,
      item: true,
      xs: 12,
      sm: justify,
      key: "label"
    }, React.createElement("label", null, labelChildren));
  }

  renderWrapper() {
    const {
      classes,
      label,
      InputLabelProps: {
        justify = 3
      }
    } = this.props;
    const sm = label ? 12 - justify : 12;
    return React.createElement(Grid, {
      className: classes['form-item-wrapper'],
      item: true,
      xs: 12,
      sm: sm,
      key: "wrapper"
    }, this.props.children);
  }

  renderFormItem(children) {
    const {
      classes,
      InputLabelProps: {
        direction = 'standard'
      }
    } = this.props;
    const className = classnames(classes['form-item'], direction === 'column' ? classes['form-item-direction-column'] : '');
    return React.createElement(Grid, {
      container: true,
      className: className
    }, children);
  }

  render() {
    const {
      InputLabelProps: {
        direction = 'standard'
      }
    } = this.props;

    if (direction === 'standard') {
      return React.createElement(React.Fragment, null, this.props.children);
    }

    return this.renderFormItem([this.renderLabel(), this.renderWrapper()]);
  }

}

process.env.NODE_ENV !== "production" ? FormItem.propTypes = {
  classes: PropTypes.object.isRequired,
  InputLabelProps: PropTypes.shape({
    colon: PropTypes.bool,
    direction: PropTypes.oneOf(['standard', 'row', 'column']),
    justify: PropTypes.number
  }),
  label: PropTypes.any,
  required: PropTypes.bool
} : void 0;
FormItem.defaultProps = {
  required: false,
  label: '',
  InputLabelProps: {
    direction: 'standard',
    justify: 3,
    colon: true
  }
};
export default withStyles(style, {
  name: 'RMFormItem'
})(FormItem);