react-misc-toolbox/dist/Form.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Form = undefined;

var _regenerator = require("babel-runtime/regenerator");

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require("babel-runtime/helpers/asyncToGenerator");

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends4 = require("babel-runtime/helpers/extends");

var _extends5 = _interopRequireDefault(_extends4);

var _keys = require("babel-runtime/core-js/object/keys");

var _keys2 = _interopRequireDefault(_keys);

var _slicedToArray2 = require("babel-runtime/helpers/slicedToArray");

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n"]),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n  width: ", "rem;\n  height: ", "rem;\n  margin-left: 1rem;\n  background-image: ", ";\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n"], ["\n  width: ", "rem;\n  height: ", "rem;\n  margin-left: 1rem;\n  background-image: ", ";\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n"]),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n"], ["\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n"]),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"]),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)([""], [""]),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(["\n  padding: 0.75rem 0.5rem;\n  justify-content: flex-start;\n"], ["\n  padding: 0.75rem 0.5rem;\n  justify-content: flex-start;\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _Checkbox = require("./Checkbox");

var _Checkbox2 = _interopRequireDefault(_Checkbox);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _helperFunctions = require("./helperFunctions");

var _recompose = require("recompose");

var _Button = require("./Button");

var _Button2 = _interopRequireDefault(_Button);

var _SelectOne = require("./SelectOne");

var _SelectOne2 = _interopRequireDefault(_SelectOne);

var _SelectMany = require("./SelectMany");

var _SelectMany2 = _interopRequireDefault(_SelectMany);

var _MultipleChoice = require("./MultipleChoice");

var _MultipleChoice2 = _interopRequireDefault(_MultipleChoice);

var _ = require(".");

var _StyledForm = require("./StyledForm");

var _InputBox = require("./InputBox");

var _InputBox2 = _interopRequireDefault(_InputBox);

var _SVGAlertCircleOutline = require("./svg/SVGAlertCircleOutline");

var _SVGAlertCircleOutline2 = _interopRequireDefault(_SVGAlertCircleOutline);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var defaultBorder = "1px solid #dadce0";
var errorBorder = "1px solid #d93025";

var OPTION_CONTAINER = (0, _styledComponents2.default)("div")(_templateObject);
var OPTION_ICON = (0, _styledComponents2.default)("div")(_templateObject2, function (_ref) {
  var iconSize = _ref.iconSize;
  return iconSize;
}, function (_ref2) {
  var iconSize = _ref2.iconSize;
  return iconSize;
}, function (_ref3) {
  var src = _ref3.src;
  return "url(\"" + src + "\")";
});

var OPTION_LABEL = (0, _styledComponents2.default)("div")(_templateObject3);
var OPTION_ROW = (0, _styledComponents2.default)("div")(_templateObject4);
var OPTION_SUBLABEL = (0, _styledComponents2.default)("div")(_templateObject5);

var SELECT_MANY_BUTTON = (0, _styledComponents2.default)(_Button2.default)(_templateObject6);

var signValueLabelMaps = [{
  value: -1,
  label: "<"
}, {
  value: 0,
  label: "="
}, {
  value: 1,
  label: ">"
}];

var sumOf = function sumOf(arrayOfNumbers) {
  return arrayOfNumbers.reduce(function (acc, v) {
    acc = acc + v;
    return acc;
  });
};

var Form = function Form(props) {
  var _props$className = props.className,
      className = _props$className === undefined ? "form" : _props$className,
      style = props.style,
      values = props.values,
      touched = props.touched,
      errors = props.errors,
      children = props.children,
      handleChange = props.handleChange,
      validateForm = props.validateForm,
      handleSubmit = props.handleSubmit,
      setFieldValue = props.setFieldValue,
      setFieldTouched = props.setFieldTouched,
      isSubmitting = props.isSubmitting;

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
      hasBeenSubmitted = _useState2[0],
      setHasBeenSubmittedTo = _useState2[1];

  (0, _react.useEffect)(function () {
    if (hasBeenSubmitted === false && isSubmitting === true) {
      setHasBeenSubmittedTo(true);
    }
  }, [isSubmitting]);
  var getClassName = function getClassName(primary, secondary) {
    return (0, _helperFunctions.advancedMulti)({
      unflattenedBases: ["form", className],
      suffixes: ["__" + primary, "__" + secondary + "__" + primary]
    });
  };

  var renderError = function renderError(type) {
    return errors && errors[type] && (touched && touched[type] || hasBeenSubmitted) && _react2.default.createElement(
      _StyledForm.ERROR,
      {
        className: className ? "form__error " + className + "__error" : "form__error"
      },
      _react2.default.createElement(_SVGAlertCircleOutline2.default, { fill: "#d93025" }),
      " ",
      errors[type]
    );
  };

  var renderTextareaInputSocket = function renderTextareaInputSocket(_ref4) {
    var type = _ref4.type,
        label = _ref4.label,
        _ref4$required = _ref4.required,
        required = _ref4$required === undefined ? true : _ref4$required,
        placeholder = _ref4.placeholder;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, "textarea");
    };
    var SOCKET = _StyledForm.TEXTAREA.SOCKET,
        LABEL = _StyledForm.TEXTAREA.LABEL,
        INPUT = _StyledForm.TEXTAREA.INPUT;

    var onChange = function onChange(e) {
      return setFieldValue(type, e.target.value);
    };
    return _react2.default.createElement(
      SOCKET,
      {
        className: getLocalClassName("socket")
      },
      _react2.default.createElement(
        _react.Fragment,
        null,
        _react2.default.createElement(
          LABEL,
          {
            className: getLocalClassName("label")
          },
          label
        ),
        _react2.default.createElement(INPUT, {
          className: getLocalClassName("input"),
          "data-testid": type.toLowerCase() + "-input",
          id: type,
          required: required,
          value: values[type],
          onChange: onChange,
          placeholder: placeholder
        }),
        errors[type] && touched[type] && _react2.default.createElement(
          _StyledForm.ERROR,
          null,
          errors[type]
        )
      )
    );
  };

  var renderSelectManyWithAdvancedCompositionSocket = function renderSelectManyWithAdvancedCompositionSocket(_ref5) {
    var _ref5$isSigned = _ref5.isSigned,
        isSigned = _ref5$isSigned === undefined ? true : _ref5$isSigned,
        _ref5$isVertical = _ref5.isVertical,
        isVertical = _ref5$isVertical === undefined ? false : _ref5$isVertical,
        type = _ref5.type,
        label = _ref5.label,
        optionLabels = _ref5.optionLabels,
        renderTrigger = _ref5.renderTrigger;
    var OPTIONS = _StyledForm.COMPOSITION.OPTIONS,
        CURRENT_OPTION = _StyledForm.COMPOSITION.CURRENT_OPTION,
        RANGE_INPUT = _StyledForm.COMPOSITION.RANGE_INPUT,
        NUMBER_INPUT = _StyledForm.COMPOSITION.NUMBER_INPUT,
        HEAD = _StyledForm.COMPOSITION.HEAD,
        LABEL = _StyledForm.COMPOSITION.LABEL,
        SOCKET = _StyledForm.COMPOSITION.SOCKET;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, "composition");
    };
    // Draw currentOptions from labels and current values:
    var currentOptions = values[type] ? (0, _keys2.default)(values[type]).map(function (compositionID) {
      var currentOptionLabelMap = optionLabels.find(function (optionLabel) {
        return optionLabel.value === compositionID;
      });
      if (!currentOptionLabelMap) {
        throw new Error("optionLabels prop lacks one or more of the form values");
      }
      return {
        value: compositionID,
        label: currentOptionLabelMap.label
      };
    }) : [];
    var getSharedInputProps = function getSharedInputProps(_ref6) {
      var currentOption = _ref6.currentOption;

      var id = currentOption.value;
      var value = values[type][id];
      return {
        onClick: function onClick(e) {
          e.stopPropagation();
          e.nativeEvent.stopImmediatePropagation();
        },
        id: id,
        value: value ? value[0] : 0,
        onChange: function onChange(v) {
          var integerValue = parseInt(v.target.value, 10);
          var integerSign = value ? value[1] : 0;
          setFieldValue(type, (0, _extends5.default)({}, values[type], (0, _defineProperty3.default)({}, id, [integerValue, integerSign])));
        }
      };
    };
    var renderSignDropdown = function renderSignDropdown(_ref7) {
      var option = _ref7.option;

      //signValueLabelMapExists =
      var id = option.value;
      var value = values[type][id];
      return value && _react2.default.createElement(
        _SelectOne2.default,
        {
          renderTrigger: function renderTrigger(_ref8) {
            var currentOption = _ref8.currentOption,
                isOn = _ref8.isOn,
                getTriggerProps = _ref8.getTriggerProps;
            return _react2.default.createElement(
              _Button2.default,
              (0, _extends5.default)({ isOn: isOn }, getTriggerProps()),
              currentOption ? currentOption.label : optionLabels[0].label
            );
          },
          currentOption: signValueLabelMaps.find(function (signValueLabelMap) {
            return signValueLabelMap.value === value[1];
          }),
          onChange: function onChange(signValueLabelMap) {
            setFieldValue(type, (0, _extends5.default)({}, values[type], (0, _defineProperty3.default)({}, id, [value[0], signValueLabelMap.value])));
          },
          options: signValueLabelMaps
        },
        signValueLabelMaps
      );
    };

    var renderCurrentOptionLabel = function renderCurrentOptionLabel(_ref9) {
      var currentOption = _ref9.currentOption;

      return _react2.default.createElement(
        LABEL,
        {
          isVertical: isVertical,
          className: (0, _helperFunctions.advancedMulti)({
            unflattenedBases: ["form", "" + className],
            suffixes: ["__composition__label"],
            flipVars: [[isVertical, "vertical", "horizontal"]]
          })
        },
        currentOption.label
      );
    };
    var renderCurrentOptionInputs = function renderCurrentOptionInputs(_ref10) {
      var currentOption = _ref10.currentOption;

      var renderRangeInput = function renderRangeInput() {
        return _react2.default.createElement(RANGE_INPUT, (0, _extends5.default)({}, getSharedInputProps({ currentOption: currentOption }), {
          className: (0, _helperFunctions.advancedMulti)({
            unflattenedBases: ["form", "" + className],
            suffixes: ["__input", "__input__range"],
            flipVars: [[isVertical, "vertical", "horizontal"]]
          }),
          isVertical: isVertical
        }));
      };
      var renderNumberInput = function renderNumberInput() {
        return _react2.default.createElement(NUMBER_INPUT, (0, _extends5.default)({}, getSharedInputProps({ currentOption: currentOption }), {
          isVertical: isVertical,
          className: className + "__composition__input " + className + "__composition__input__number"
        }));
      };
      var renderEmptyDiv = function renderEmptyDiv(_ref11) {
        var size = _ref11.size;
        return _react2.default.createElement("div", { style: { height: size, width: size } });
      };
      return _react2.default.createElement(
        _react.Fragment,
        null,
        renderRangeInput(),
        isSigned ? renderSignDropdown({ option: currentOption }) : renderEmptyDiv({ size: "3rem" }),
        renderNumberInput()
      );
    };

    var renderHead = function renderHead() {
      return _react2.default.createElement(
        HEAD,
        { className: className + "__label " + className + "__composition__label" },
        (0, _helperFunctions.capitalizeEveryWord)(label)
      );
    };
    var handleOnChange = function handleOnChange(value) {
      console.log("onChange", value);
      setFieldValue(type, value.reduce(function (acc, v) {
        if ((0, _keys2.default)(values[type]).length === 0) {
          acc[v.value] = [100, -1];
        } else if (values[type][v.value]) {
          acc[v.value] = values[type][v.value];
        } else {
          acc[v.value] = [0, 1];
        }
        return acc;
      }, {}));
    };
    var handleRenderCurrentOption = function handleRenderCurrentOption(currentOption) {
      return _react2.default.createElement(
        CURRENT_OPTION,
        {
          isVertical: isVertical,
          className: (0, _helperFunctions.flippyClass)(isVertical, className + "__composition__currentoption", "vertical", "horizontal")
        },
        renderCurrentOptionLabel({
          currentOption: currentOption
        }),
        renderCurrentOptionInputs({
          currentOption: currentOption
        })
      );
    };
    return _react2.default.createElement(
      SOCKET,
      {
        className: className + "__socket " + className + "__composition__socket"
      },
      label && renderHead(),
      _react2.default.createElement(
        _SelectMany2.default,
        {
          initialOptions: currentOptions,
          options: optionLabels,
          renderTrigger: renderTrigger,
          onChange: handleOnChange,
          transitionType: ["dropdown", "fade"],
          pivotFrom: "DOWNRIGHT",
          renderCurrentOption: handleRenderCurrentOption
        },
        function (_ref12) {
          var getChildProps = _ref12.getChildProps,
              getChildrenProps = _ref12.getChildrenProps,
              currentOptions = _ref12.currentOptions;
          return _react2.default.createElement(
            OPTIONS,
            (0, _extends5.default)({}, getChildrenProps({
              className: className + "__composition__options"
            })),
            optionLabels.map(function (optionLabel) {
              return _react2.default.createElement(
                _Button2.default,
                (0, _extends5.default)({
                  colors: "neutral",
                  isOn: currentOptions.map(function (currentOption) {
                    return currentOption.value;
                  }).includes(optionLabel.value)
                }, getChildProps({
                  option: optionLabel
                }), {
                  key: optionLabel.value
                }),
                optionLabel.label
              );
            })
          );
        }
      )
    );
  };

  var renderMultipleChoiceSocket = function renderMultipleChoiceSocket(_ref13) {
    var type = _ref13.type,
        label = _ref13.label,
        sublabel = _ref13.sublabel,
        footer = _ref13.footer,
        options = _ref13.options,
        _ref13$border = _ref13.border,
        border = _ref13$border === undefined ? renderError(type) ? errorBorder : defaultBorder : _ref13$border,
        required = _ref13.required,
        props = (0, _objectWithoutProperties3.default)(_ref13, ["type", "label", "sublabel", "footer", "options", "border", "required"]);
    var SOCKET = _StyledForm.MULTIPLECHOICE.SOCKET,
        LABEL = _StyledForm.MULTIPLECHOICE.LABEL,
        SUBLABEL = _StyledForm.MULTIPLECHOICE.SUBLABEL,
        FOOTER = _StyledForm.MULTIPLECHOICE.FOOTER;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, "multiplechoice");
    };
    var renderAsterisk = function renderAsterisk() {
      return required && _react2.default.createElement(
        _StyledForm.ASTERISK,
        null,
        " *"
      );
    };
    var renderLabel = function renderLabel() {
      return label && _react2.default.createElement(
        LABEL,
        { className: getLocalClassName("label") },
        label,
        renderAsterisk()
      );
    };
    var renderSublabel = function renderSublabel() {
      return sublabel && _react2.default.createElement(
        SUBLABEL,
        { className: getLocalClassName("sublabel") },
        typeof sublabel === "string" ? sublabel : sublabel()
      );
    };
    var renderFooter = function renderFooter() {
      return footer && _react2.default.createElement(
        FOOTER,
        { className: getLocalClassName("footer") },
        typeof footer === "string" ? footer : footer()
      );
    };
    return _react2.default.createElement(
      SOCKET,
      { id: type, border: border, className: getLocalClassName("socket") },
      renderLabel(),
      renderSublabel(),
      _react2.default.createElement(_MultipleChoice2.default, (0, _extends5.default)({
        error: renderError(type),
        initialOptions: values[type],
        options: options,
        onChange: function onChange(value) {
          setFieldValue(type, value);
        }

      }, props)),
      renderFooter(),
      renderError(type)
    );
  };

  var InfoSocket = function InfoSocket() {
    var SOCKET = _StyledForm.INFO.SOCKET,
        LABEL = _StyledForm.INFO.LABEL,
        SUBLABEL = _StyledForm.INFO.SUBLABEL,
        FOOTER = _StyledForm.INFO.FOOTER,
        TEXT = _StyledForm.INFO.TEXT;

    return children({ SOCKET: SOCKET, LABEL: LABEL, SUBLABEL: SUBLABEL, FOOTER: FOOTER, TEXT: TEXT });
  };
  var renderInfoSocket = function renderInfoSocket(_ref14) {
    var id = _ref14.id,
        label = _ref14.label,
        sublabel = _ref14.sublabel,
        footer = _ref14.footer,
        content = _ref14.content,
        props = (0, _objectWithoutProperties3.default)(_ref14, ["id", "label", "sublabel", "footer", "content"]);
    var SOCKET = _StyledForm.INFO.SOCKET,
        LABEL = _StyledForm.INFO.LABEL,
        SUBLABEL = _StyledForm.INFO.SUBLABEL,
        FOOTER = _StyledForm.INFO.FOOTER;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, "multiplechoice");
    };

    var renderLabel = function renderLabel() {
      return label && _react2.default.createElement(
        LABEL,
        { className: getLocalClassName("label") },
        label
      );
    };
    var renderSublabel = function renderSublabel() {
      return sublabel && _react2.default.createElement(
        SUBLABEL,
        { className: getLocalClassName("sublabel") },
        typeof sublabel === "string" ? sublabel : sublabel()
      );
    };
    var renderFooter = function renderFooter() {
      return footer && _react2.default.createElement(
        FOOTER,
        { className: getLocalClassName("footer") },
        typeof footer === "string" ? footer : footer()
      );
    };
    return _react2.default.createElement(
      SOCKET,
      { id: id, className: getLocalClassName("socket") },
      renderLabel(),
      renderSublabel(),
      content,
      renderFooter()
    );
  };

  var renderSelectManySocket = function renderSelectManySocket(_ref15) {
    var type = _ref15.type,
        label = _ref15.label,
        options = _ref15.options,
        renderTrigger = _ref15.renderTrigger,
        _ref15$iconSize = _ref15.iconSize,
        iconSize = _ref15$iconSize === undefined ? 4 : _ref15$iconSize,
        _ref15$shouldRenderCl = _ref15.shouldRenderClearSelection,
        shouldRenderClearSelection = _ref15$shouldRenderCl === undefined ? true : _ref15$shouldRenderCl;
    var SOCKET = _StyledForm.SELECTMANY.SOCKET,
        LABEL = _StyledForm.SELECTMANY.LABEL,
        DROPDOWN = _StyledForm.SELECTMANY.DROPDOWN;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, "selectmany");
    };
    return _react2.default.createElement(
      SOCKET,
      { className: getLocalClassName("socket") },
      _react2.default.createElement(
        LABEL,
        { className: getLocalClassName("label") },
        label
      ),
      _react2.default.createElement(
        _SelectMany2.default,
        {
          shouldRenderClearSelection: shouldRenderClearSelection,
          defaultIsOn: true,
          currentOptions: values[type],
          options: options,
          renderTrigger: renderTrigger,
          onChange: function onChange(value) {
            setFieldValue(type, value);
          },
          transitionType: ["dropdown", "fade"],
          pivotFrom: "DOWNRIGHT"
        },
        function (_ref16) {
          var getChildProps = _ref16.getChildProps,
              getChildrenProps = _ref16.getChildrenProps;
          return _react2.default.createElement(
            DROPDOWN,
            (0, _extends5.default)({}, getChildrenProps({
              className: className + "__dropdown",
              style: { width: "25.5rem" }
            })),
            options.map(function (option) {
              return _react2.default.createElement(
                SELECT_MANY_BUTTON,
                (0, _extends5.default)({}, getChildProps({
                  option: { value: option.value, label: option.label }
                }), {
                  style: { width: 25.5 + iconSize + "rem" },
                  colors: "neutral",
                  key: option.value,
                  isOn: values[type] && values[type].map(function (currentOption) {
                    return currentOption.value;
                  }).includes(option.value)
                }),
                typeof option.label === "string" ? option.label : _react2.default.createElement(
                  OPTION_CONTAINER,
                  null,
                  _react2.default.createElement(
                    OPTION_LABEL,
                    null,
                    option.label.map(function (row, i) {
                      return _react2.default.createElement(
                        OPTION_ROW,
                        { key: i },
                        row.map(function (sublabel, i) {
                          return _react2.default.createElement(
                            OPTION_SUBLABEL,
                            { key: i },
                            sublabel
                          );
                        })
                      );
                    })
                  ),
                  _react2.default.createElement(OPTION_ICON, { src: option.iconSrc, iconSize: iconSize })
                )
              );
            })
          );
        }
      )
    );
  };

  var renderSelectOneSocket = function renderSelectOneSocket(_ref17) {
    var type = _ref17.type,
        label = _ref17.label,
        options = _ref17.options;
    var SOCKET = _StyledForm.SELECTONE.SOCKET,
        LABEL = _StyledForm.SELECTONE.LABEL,
        DROPDOWN = _StyledForm.SELECTONE.DROPDOWN;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, "selectone");
    };
    return _react2.default.createElement(
      SOCKET,
      { className: getLocalClassName("socket") },
      _react2.default.createElement(
        LABEL,
        { className: getLocalClassName("label") },
        (0, _helperFunctions.capitalizeEveryWord)(label)
      ),
      _react2.default.createElement(
        _SelectOne2.default,
        {
          renderTrigger: function renderTrigger(_ref18) {
            var isOn = _ref18.isOn,
                currentOption = _ref18.currentOption,
                getTriggerProps = _ref18.getTriggerProps;
            return _react2.default.createElement(
              _Button2.default,
              (0, _extends5.default)({
                type: "caretdown",
                isOn: isOn
              }, getTriggerProps({
                className: "selectone__trigger",
                style: { border: "1px solid #ccc" }
              }), {
                colors: _.buttonStyles.monochrome
              }),
              currentOption ? currentOption.label : ""
            );
          },
          options: options,
          currentOption: values[type],
          onChange: function onChange(value) {
            setFieldValue(type, value);
          },
          transitionType: ["dropdown", "fade"],
          pivotFrom: "DOWNRIGHT"
        },
        function (_ref19) {
          var getChildProps = _ref19.getChildProps,
              getChildrenProps = _ref19.getChildrenProps,
              currentOption = _ref19.currentOption,
              toggleIsOn = _ref19.toggleIsOn;
          return _react2.default.createElement(
            DROPDOWN,
            (0, _extends5.default)({}, getChildrenProps({ style: { width: "25.5rem" } })),
            options.map(function (option) {
              return _react2.default.createElement(
                _Button2.default,
                (0, _extends5.default)({}, getChildProps({
                  option: { value: option.value, label: option.label },
                  onClick: toggleIsOn
                }), {
                  isOn: currentOption.value === option.value,
                  key: option.value
                }),
                option.label
              );
            })
          );
        }
      )
    );
  };

  var renderSubmitButton = function renderSubmitButton() {
    var _ref20 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var label = _ref20.label,
        props = (0, _objectWithoutProperties3.default)(_ref20, ["label"]);
    var TRIGGER = _StyledForm.SUBMIT.TRIGGER,
        CONTAINER = _StyledForm.SUBMIT.CONTAINER;

    return _react2.default.createElement(
      CONTAINER,
      null,
      _react2.default.createElement(
        TRIGGER,
        (0, _extends5.default)({
          id: "submit",
          onClick: function () {
            var _ref21 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(props) {
              var errors, errorKeys, el;
              return _regenerator2.default.wrap(function _callee$(_context) {
                while (1) {
                  switch (_context.prev = _context.next) {
                    case 0:
                      handleSubmit(props);
                      _context.next = 3;
                      return validateForm();

                    case 3:
                      errors = _context.sent;
                      errorKeys = (0, _keys2.default)(errors);

                      if (errorKeys.length > 0) {
                        el = document.getElementById(errorKeys[0]);

                        if (el) {
                          console.log(el);
                          el.scrollIntoView({ behavior: "smooth" });
                          el.focus();
                        }
                      }

                    case 6:
                    case "end":
                      return _context.stop();
                  }
                }
              }, _callee, undefined);
            }));

            function onClick(_x2) {
              return _ref21.apply(this, arguments);
            }

            return onClick;
          }(),
          dataTestId: "submit",
          disabled: isSubmitting

        }, props),
        label
      )
    );
  };

  var renderTextInputSocket = function renderTextInputSocket(_ref22) {
    var type = _ref22.type,
        _ref22$inputType = _ref22.inputType,
        inputType = _ref22$inputType === undefined ? "text" : _ref22$inputType,
        label = _ref22.label,
        sublabel = _ref22.sublabel,
        _ref22$required = _ref22.required,
        required = _ref22$required === undefined ? false : _ref22$required,
        _ref22$autoFocus = _ref22.autoFocus,
        autoFocus = _ref22$autoFocus === undefined ? false : _ref22$autoFocus,
        _ref22$autocomplete = _ref22.autocomplete,
        autocomplete = _ref22$autocomplete === undefined ? "" : _ref22$autocomplete,
        width = _ref22.width,
        _ref22$margin = _ref22.margin,
        margin = _ref22$margin === undefined ? "0 0 4rem 0" : _ref22$margin,
        _ref22$border = _ref22.border,
        border = _ref22$border === undefined ? renderError(type) ? errorBorder : defaultBorder : _ref22$border,
        props = (0, _objectWithoutProperties3.default)(_ref22, ["type", "inputType", "label", "sublabel", "required", "autoFocus", "autocomplete", "width", "margin", "border"]);
    var CONTAINER = _StyledForm.INPUTBOX.CONTAINER;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(className, primary, "inputbox");
    };
    return _react2.default.createElement(
      CONTAINER,
      {
        id: type,
        width: width,
        margin: margin,
        border: border,
        className: getLocalClassName("container")
      },
      _react2.default.createElement(_InputBox2.default, (0, _extends5.default)({
        label: label,
        sublabel: sublabel,

        children: renderError(type),
        id: type,
        className: className,
        type: inputType,
        required: required ? required : false,
        autoFocus: autoFocus ? autoFocus : false,
        autocomplete: autocomplete,
        value: values[type],
        onChange: handleChange,
        onBlur: function onBlur() {
          return setFieldTouched(type);
        }
      }, props))
    );
  };

  var renderGroup = function renderGroup(_ref23) {
    var label = _ref23.label,
        renderChildren = _ref23.renderChildren;
    var SOCKET = _StyledForm.GROUP.SOCKET,
        LABEL = _StyledForm.GROUP.LABEL,
        CHILDREN = _StyledForm.GROUP.CHILDREN;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, "group");
    };
    return _react2.default.createElement(
      SOCKET,
      { className: getLocalClassName("socket") },
      _react2.default.createElement(
        LABEL,
        { className: getLocalClassName("label") },
        label
      ),
      _react2.default.createElement(
        CHILDREN,
        { className: getLocalClassName("children") },
        renderChildren()
      )
    );
  };

  var renderCheckboxSocket = function renderCheckboxSocket(_ref24) {
    var label = _ref24.label,
        type = _ref24.type;
    var SOCKET = _StyledForm.CHECKBOX.SOCKET,
        LABEL = _StyledForm.CHECKBOX.LABEL,
        INPUT = _StyledForm.CHECKBOX.INPUT;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, "checkbox");
    };
    return _react2.default.createElement(
      SOCKET,
      { className: getLocalClassName("socket") },
      _react2.default.createElement(
        LABEL,
        { className: getLocalClassName("label") },
        label
      ),
      _react2.default.createElement(INPUT, {
        className: getLocalClassName("input"),
        id: type,
        checked: values[type],
        onChange: handleChange
      })
    );
  };

  return _react2.default.createElement(
    _StyledForm.CONTAINER,
    {
      onSubmit: handleSubmit,
      className: className ? className : "form",
      style: style
    },
    children({
      renderTextInputSocket: renderTextInputSocket,
      renderTextareaInputSocket: renderTextareaInputSocket,
      renderSelectManyWithAdvancedCompositionSocket: renderSelectManyWithAdvancedCompositionSocket,
      renderSelectOneSocket: renderSelectOneSocket,
      renderSelectManySocket: renderSelectManySocket,
      renderMultipleChoiceSocket: renderMultipleChoiceSocket,
      renderCheckboxSocket: renderCheckboxSocket,
      renderInfoSocket: renderInfoSocket,

      renderGroup: renderGroup,
      renderSubmitButton: renderSubmitButton,
      InfoSocket: InfoSocket
    }),
    _react2.default.createElement("input", {
      type: "submit",
      style: { visibility: "hidden", height: 0, width: 0 }
    })
  );
};

exports.Form = Form;
Form.defaultProps = {
  handleSubmit: function handleSubmit() {
    return console.log("Form: handleSubmit");
  },
  style: {}
};

var enhance = (0, _recompose.compose)();
//onlyUpdateForKeys([`values`, `touched`, `errors`, `children`])

exports.default = enhance(Form);