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

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _classnames2 = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _Grid = require("../Grid");

/**
 * @ignore - do not document.
 */
var style = function style(theme) {
  return {
    '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 FormItem =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(FormItem, _Component);

  function FormItem() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, FormItem);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(FormItem)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {};
    return _this;
  }

  (0, _createClass2.default)(FormItem, [{
    key: "renderLabel",
    value: function renderLabel() {
      var _classnames;

      var _this$props = this.props,
          classes = _this$props.classes,
          label = _this$props.label,
          required = _this$props.required,
          _this$props$InputLabe = _this$props.InputLabelProps,
          _this$props$InputLabe2 = _this$props$InputLabe.direction,
          direction = _this$props$InputLabe2 === void 0 ? 'standard' : _this$props$InputLabe2,
          _this$props$InputLabe3 = _this$props$InputLabe.justify,
          justify = _this$props$InputLabe3 === void 0 ? 3 : _this$props$InputLabe3,
          _this$props$InputLabe4 = _this$props$InputLabe.colon,
          colon = _this$props$InputLabe4 === void 0 ? false : _this$props$InputLabe4;

      if (!label) {
        return _react.default.createElement(_react.default.Fragment, {
          key: "label"
        });
      }

      var labelChildren = label;

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

      var requiredClass = typeof label === 'string' ? !!label.trim().length : true;
      var className = (0, _classnames2.default)(classes['form-item-label'], (_classnames = {}, (0, _defineProperty2.default)(_classnames, classes['form-item-label-colon'], colon), (0, _defineProperty2.default)(_classnames, classes['form-item-label-required'], requiredClass && required), (0, _defineProperty2.default)(_classnames, classes['form-item-label-direction-column'], direction === 'column'), _classnames));
      return _react.default.createElement(_Grid.PercentageGrid, {
        className: className,
        item: true,
        xs: 12,
        sm: justify,
        key: "label"
      }, _react.default.createElement("label", null, labelChildren));
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var _this$props2 = this.props,
          classes = _this$props2.classes,
          label = _this$props2.label,
          _this$props2$InputLab = _this$props2.InputLabelProps.justify,
          justify = _this$props2$InputLab === void 0 ? 3 : _this$props2$InputLab;
      var sm = label ? 12 - justify : 12;
      return _react.default.createElement(_Grid.PercentageGrid, {
        className: classes['form-item-wrapper'],
        item: true,
        xs: 12,
        sm: sm,
        key: "wrapper"
      }, this.props.children);
    }
  }, {
    key: "renderFormItem",
    value: function renderFormItem(children) {
      var _this$props3 = this.props,
          classes = _this$props3.classes,
          _this$props3$InputLab = _this$props3.InputLabelProps.direction,
          direction = _this$props3$InputLab === void 0 ? 'standard' : _this$props3$InputLab;
      var className = (0, _classnames2.default)(classes['form-item'], direction === 'column' ? classes['form-item-direction-column'] : '');
      return _react.default.createElement(_Grid.PercentageGrid, {
        container: true,
        className: className
      }, children);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props$InputLabe5 = this.props.InputLabelProps.direction,
          direction = _this$props$InputLabe5 === void 0 ? 'standard' : _this$props$InputLabe5;

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

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

FormItem.propTypes = {
  classes: _propTypes.default.object.isRequired,
  InputLabelProps: _propTypes.default.shape({
    colon: _propTypes.default.bool,
    direction: _propTypes.default.oneOf(['standard', 'row', 'column']),
    justify: _propTypes.default.number
  }),
  label: _propTypes.default.any,
  required: _propTypes.default.bool
};
FormItem.defaultProps = {
  required: false,
  label: '',
  InputLabelProps: {
    direction: 'standard',
    justify: 3,
    colon: true
  }
};

var _default = (0, _withStyles.default)(style, {
  name: 'RMFormItem'
})(FormItem);

exports.default = _default;