@makeen.io/material-ui-kit/distr/molecules/FormGroup/index.js

Makeen UI components kit. Based on material-ui.

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _extends from "@babel/runtime/helpers/extends";import React, { Fragment } from "react";
import { Button, FormColumn, FormRow } from "../../atoms";
import _ from "lodash";
import { MdAdd } from "react-icons/md";
import FormCard from "../FormCard";
import FormRenderer from "../FormRenderer";
var FormAddGroupButton = function FormAddGroupButton(props) {return /*#__PURE__*/React.createElement(Button, _extends({ size: "medium", prefixicon: /*#__PURE__*/React.createElement(MdAdd, null) }, props),
  "Add ",
  props.label);};
var FormRemoveGroupButton = function FormRemoveGroupButton(props) {return /*#__PURE__*/React.createElement(Button, _extends({ palette: "warning", size: "small" }, props),
  "Remove ",
  props.label);};
export default (function (props, _ref) {var rest = _extends({}, _ref);var _React$useState =
    React.useState(props.default || []),_React$useState2 = _slicedToArray(_React$useState, 2),group = _React$useState2[0],setGroup = _React$useState2[1];
  var transformGroup = function transformGroup(children, key) {return _(children).
    map(function (value) {return _extends({},
      value, {
        props: _extends({},
        _.mapValues(value.props, function (v) {return _.isString(v) ? _.template(v)({ key: key }) : v;}), {
          children: value.props.props ?
          transformGroup(value.props.props.children, key) :
          value.props ?
          transformGroup(value.props.children, key) :
          null }) });}).


    value();};
  var add = function add() {
    var updatedGroup = _toConsumableArray(group);
    updatedGroup.push(0);
    setGroup(updatedGroup);
  };
  var remove = function remove(index) {
    var updatedGroup = _toConsumableArray(group);
    updatedGroup.splice(index, 1);
    setGroup(updatedGroup);
  };
  React.useEffect(add, []);
  var actions = /*#__PURE__*/React.createElement(FormAddGroupButton, { label: "Contact", onClick: add });
  return /*#__PURE__*/React.createElement(FormCard, { actions: actions, title: props.title }, _.map(group, function (key, index) {return /*#__PURE__*/React.createElement(Fragment, { key: index },
    index ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
    React.createElement(FormRow, { container: true, direction: "row", justify: "flex-end", spacing: 3, style: { borderTop: "1px solid #eee", padding: "0 20px" } }, /*#__PURE__*/
    React.createElement(FormColumn, { md: 2, lg: 2 }, /*#__PURE__*/
    React.createElement(FormRemoveGroupButton, { style: { display: "flex", marginLeft: "auto" }, label: "Contact", onClick: function onClick() {return remove(index);} })))) : null,
    props.children &&
    _.map(transformGroup(props.children, index), function (child, k) {return /*#__PURE__*/React.createElement(FormRenderer, _extends({ key: String(k) }, rest, child));}));}));
});
//# sourceMappingURL=index.js.map