@6thquake/react-material/es/Input/Input.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";

/**
 * @ignore - do not document.
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import InputStandalone from '@material-ui/core/Input';
import InputLabel from '../InputLabel';
import FormControl from '../FormControl';
import FormHelperText from '../FormHelperText';
import { withFormsy, propTypes } from 'formsy-react';
import { compose } from 'recompose';
import withFormItem from '../Form/withFormItem';
import withForm from '../Form/withForm';
import omit from '../utils/omit';

const style = theme => ({
  formHelpTextContainer: {
    minHeight: '12px'
  },
  formHelperTextRoot: {
    marginTop: 0
  }
});

class Input extends Component {
  constructor(...args) {
    super(...args);

    this.onChange = event => {
      // setValue() will set the value of the component, which in
      // turn will validate it and the rest of the form
      // Important: Don't skip this step. This pattern is required
      // for Formsy to work.
      const value = event.target.value;
      this.props.setValue(value);
      const {
        onChange
      } = this.props;
      onChange && onChange(event, value);
    };
  }

  renderFormComponent() {
    const _this$props = this.props,
          {
      classes,
      getErrorMessage,
      getValue,
      isFormDisabled,
      isValid,
      isPristine,
      // label,
      // colon,
      // required,
      formInputRef
    } = _this$props,
          rest = _objectWithoutPropertiesLoose(_this$props, ["classes", "getErrorMessage", "getErrorMessages", "getValue", "hasValue", "isFormDisabled", "isValid", "isPristine", "isFormSubmitted", "isRequired", "isValidValue", "resetValue", "setValidations", "setValue", "showRequired", "showError", "validationError", "validationErrors", "validations", "innerRef", "value", "onChange", "formInputRef"]);

    let error = false;
    let helperText = null;
    const isDisabled = isFormDisabled();

    if (!isDisabled) {
      if (!isPristine()) {
        helperText = getErrorMessage();
        error = !isValid();
      }
    }

    const helpTextClasses = {
      root: classes.formHelperTextRoot
    };
    const restClasses = omit(classes, ['formHelpTextContainer', 'formHelperTextRoot']);
    return React.createElement(FormControl, {
      required: this.props.required,
      error: error
    }, this.props.label && React.createElement(InputLabel, {
      htmlFor: this.props.id || this.props.name
    }, this.props.label), React.createElement(InputStandalone, _extends({
      classes: restClasses,
      error: error,
      value: getValue(),
      disabled: isDisabled,
      onChange: this.onChange,
      ref: formInputRef
    }, rest)), React.createElement("div", {
      className: classes.formHelpTextContainer
    }, error && React.createElement(FormHelperText, {
      classes: helpTextClasses,
      error: true
    }, helperText)));
  }

  render() {
    return this.renderFormComponent();
  }

}

Input.displayName = 'Input';
process.env.NODE_ENV !== "production" ? Input.propTypes = _extends({
  classes: PropTypes.object.isRequired
}, propTypes) : void 0;
Input.defaultProps = {
  formInputRef: React.createRef()
};
const FormComponent = compose(withFormsy, withFormItem, withStyles(style, {
  name: 'RMInput'
}))(Input);
export default compose(withForm)(FormComponent, InputStandalone);