@flexis/ui/components/FormGroup/FormGroup.js

Styleless React Components

"use strict";

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

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));

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

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));

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

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

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

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));

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

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

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

var _types = require("../common/types");

var _FormGroupSt = require("./FormGroup.st.css");

var _createElement = _react.default.createElement;
var PureComponent = _react.default.PureComponent,
    Children = _react.default.Children,
    cloneElement = _react.default.cloneElement;

var FormGroup =
/** @class */
function () {
  var FormGroup = /*#__PURE__*/function (_PureComponent) {
    (0, _inherits2.default)(FormGroup, _PureComponent);

    function FormGroup() {
      (0, _classCallCheck2.default)(this, FormGroup);
      return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(FormGroup).apply(this, arguments));
    }

    (0, _createClass2.default)(FormGroup, [{
      key: "render",
      value: function render() {
        var _style2;

        var _this$props = this.props,
            className = _this$props.className,
            idProp = _this$props.id,
            flex = _this$props.flex,
            label = _this$props.label,
            description = _this$props.description,
            icon = _this$props.icon,
            alignIcon = _this$props.alignIcon,
            children = _this$props.children,
            props = (0, _objectWithoutProperties2.default)(_this$props, ["className", "id", "flex", "label", "description", "icon", "alignIcon", "children"]);
        var child = Children.only(children);
        var childProps = child.props;
        var id = idProp || childProps.id;
        var withIcon = typeof icon !== 'undefined';
        var inputIcon = null;

        if (withIcon) {
          inputIcon = cloneElement(icon, {
            className: (0, _FormGroupSt.style)(_FormGroupSt.classes.icon, (0, _defineProperty2.default)({}, "".concat(alignIcon, "Align"), Boolean(alignIcon)), icon.props.className)
          });
        }

        return _createElement("div", (0, _extends2.default)({}, props, {
          className: (0, _FormGroupSt.style)(_FormGroupSt.classes.root, {
            withIcon: withIcon
          }, className)
        }), cloneElement(child, {
          id: id,
          className: (0, _FormGroupSt.style)(_FormGroupSt.classes.input, (_style2 = {}, (0, _defineProperty2.default)(_style2, "".concat(alignIcon, "Icon"), withIcon), (0, _defineProperty2.default)(_style2, "flex", flex), _style2), childProps.className)
        }), inputIcon, label && _createElement("label", {
          className: _FormGroupSt.classes.label,
          htmlFor: id
        }, label), description && _createElement("label", {
          className: _FormGroupSt.classes.description,
          htmlFor: id
        }, description));
      }
    }]);
    return FormGroup;
  }(PureComponent);

  process.env.NODE_ENV !== "production" ? FormGroup.propTypes = {
    id: _propTypes.default.string,
    flex: _propTypes.default.bool,
    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
    description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
    icon: _propTypes.default.element,
    alignIcon: _propTypes.default.oneOf(_types.AlignSideValues),
    children: _propTypes.default.node.isRequired
  } : void 0;
  FormGroup.defaultProps = {
    flex: true,
    alignIcon: _types.AlignSideVariant.Left
  };
  return FormGroup;
}();

var _default = FormGroup;
exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0Zvcm1Hcm91cC9Gb3JtR3JvdXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQTs7QUFPQTs7QUFJQTs7QUFLQTs7Ozs7OztBQW9CQSxJQUFBLFNBQUE7QUFBQTtBQUFBLFlBQUE7QUFBQSxNQUFxQixTQUFyQjtBQUFBOztBQUFBO0FBQUE7QUFBQTtBQUFBOztBQUFBO0FBQUE7QUFBQSwrQkF1Qk87QUFBQTs7QUFBQSwwQkFZRCxLQUFLLEtBWko7QUFBQSxZQUdKLFNBSEksZUFHSixTQUhJO0FBQUEsWUFJQSxNQUpBLGVBSUosRUFKSTtBQUFBLFlBS0osSUFMSSxlQUtKLElBTEk7QUFBQSxZQU1KLEtBTkksZUFNSixLQU5JO0FBQUEsWUFPSixXQVBJLGVBT0osV0FQSTtBQUFBLFlBUUosSUFSSSxlQVFKLElBUkk7QUFBQSxZQVNKLFNBVEksZUFTSixTQVRJO0FBQUEsWUFVSixRQVZJLGVBVUosUUFWSTtBQUFBLFlBV0QsS0FYQztBQWFMLFlBQU0sS0FBSyxHQUFHLFFBQVEsQ0FBQyxJQUFULENBQWMsUUFBZCxDQUFkO0FBYkssWUFlRyxVQWZILEdBZ0JELEtBaEJDLENBZUosS0FmSTtBQWlCTCxZQUFNLEVBQUUsR0FBRyxNQUFNLElBQUksVUFBVSxDQUFDLEVBQWhDO0FBQ0EsWUFBTSxRQUFRLEdBQUcsT0FBTyxJQUFQLEtBQWdCLFdBQWpDO0FBQ0EsWUFBSSxTQUFTLEdBQXNCLElBQW5DOztBQUVBLFlBQUksUUFBSixFQUFjO0FBQ2IsVUFBQSxTQUFTLEdBQUcsWUFBWSxDQUN2QixJQUR1QixFQUV2QjtBQUNDLFlBQUEsU0FBUyxFQUFFLHdCQUFNLHFCQUFRLElBQWQsOENBQ04sU0FETSxZQUNhLE9BQU8sQ0FBQyxTQUFELENBRHBCLEdBRVIsSUFBSSxDQUFDLEtBQUwsQ0FBVyxTQUZIO0FBRFosV0FGdUIsQ0FBeEI7QUFRQTs7QUFFRCxlQUNDLGlEQUNLLEtBREw7QUFFQyxVQUFBLFNBQVMsRUFBRSx3QkFBTSxxQkFBUSxJQUFkLEVBQW9CO0FBQzlCLFlBQUEsUUFBUSxFQUFSO0FBRDhCLFdBQXBCLEVBRVIsU0FGUTtBQUZaLFlBTUUsWUFBWSxDQUNaLEtBRFksRUFFWjtBQUNDLFVBQUEsRUFBRSxFQUFGLEVBREQ7QUFFQyxVQUFBLFNBQVMsRUFBRSx3QkFBTSxxQkFBUSxLQUFkLGtFQUNOLFNBRE0sV0FDWSxRQURaLGtEQUVWLElBRlUsYUFHUixVQUFVLENBQUMsU0FISDtBQUZaLFNBRlksQ0FOZCxFQWdCRSxTQWhCRixFQWlCRSxLQUFLLElBQ0w7QUFDQyxVQUFBLFNBQVMsRUFBRSxxQkFBUSxLQURwQjtBQUVDLFVBQUEsT0FBTyxFQUFFO0FBRlYsV0FJRSxLQUpGLENBbEJGLEVBeUJFLFdBQVcsSUFDWDtBQUNDLFVBQUEsU0FBUyxFQUFFLHFCQUFRLFdBRHBCO0FBRUMsVUFBQSxPQUFPLEVBQUU7QUFGVixXQUlFLFdBSkYsQ0ExQkYsQ0FERDtBQW9DQTtBQTNGRjtBQUFBO0FBQUEsSUFBdUMsYUFBdkM7O0FBRVEsMENBQUEsU0FBQSxDQUFBLFNBQUEsR0FBWTtBQUNsQixJQUFBLEVBQUUsRUFBVyxtQkFBVSxNQURMO0FBRWxCLElBQUEsSUFBSSxFQUFTLG1CQUFVLElBRkw7QUFHbEIsSUFBQSxLQUFLLEVBQVEsbUJBQVUsU0FBVixDQUFvQixDQUNoQyxtQkFBVSxNQURzQixFQUVoQyxtQkFBVSxPQUZzQixDQUFwQixDQUhLO0FBT2xCLElBQUEsV0FBVyxFQUFFLG1CQUFVLFNBQVYsQ0FBb0IsQ0FDaEMsbUJBQVUsTUFEc0IsRUFFaEMsbUJBQVUsT0FGc0IsQ0FBcEIsQ0FQSztBQVdsQixJQUFBLElBQUksRUFBUyxtQkFBVSxPQVhMO0FBWWxCLElBQUEsU0FBUyxFQUFJLG1CQUFVLEtBQVYsQ0FBZ0Isc0JBQWhCLENBWks7QUFhbEIsSUFBQSxRQUFRLEVBQUssbUJBQVUsSUFBVixDQUFlO0FBYlYsR0FBWjtBQWdCQSxFQUFBLFNBQUEsQ0FBQSxZQUFBLEdBQWU7QUFDckIsSUFBQSxJQUFJLEVBQU8sSUFEVTtBQUVyQixJQUFBLFNBQVMsRUFBRSx3QkFBaUI7QUFGUCxHQUFmO0FBMEVSLFNBQUEsU0FBQTtBQUFDLENBNUZELEVBQUE7O2VBQXFCLFMiLCJzb3VyY2VSb290IjoiIn0=