@kiwicom/orbit-components/es/ChoiceGroup/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React, { useMemo } from "react";
import styled from "styled-components";
import Heading from "../Heading";
import Stack from "../Stack";
import { LABEL_SIZES, LABEL_ELEMENTS } from "./consts";
import FormFeedback, { StyledFormFeedback } from "../FormFeedback";
import defaultTheme from "../defaultTheme";
import FilterWrapper from "./components/FilterWrapper";
import randomID from "../utils/randomID";

var getHeadingSize = function getHeadingSize(size) {
  var _SIZES;

  var SIZES = (_SIZES = {}, _defineProperty(_SIZES, LABEL_SIZES.NORMAL, "title3"), _defineProperty(_SIZES, LABEL_SIZES.LARGE, "title2"), _SIZES);
  return SIZES[size];
};

var StyledChoiceGroup = styled.div.withConfig({
  displayName: "ChoiceGroup__StyledChoiceGroup",
  componentId: "njp29m-0"
})(["width:100%;display:flex;flex-direction:column;", "{position:relative;margin-top:", ";top:initial;}"], StyledFormFeedback, function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.spaceXSmall;
});
StyledChoiceGroup.defaultProps = {
  theme: defaultTheme
};

var ChoiceGroup = function ChoiceGroup(_ref2) {
  var dataTest = _ref2.dataTest,
      label = _ref2.label,
      _ref2$labelSize = _ref2.labelSize,
      labelSize = _ref2$labelSize === void 0 ? LABEL_SIZES.NORMAL : _ref2$labelSize,
      _ref2$labelAs = _ref2.labelAs,
      labelAs = _ref2$labelAs === void 0 ? LABEL_ELEMENTS.H4 : _ref2$labelAs,
      error = _ref2.error,
      children = _ref2.children,
      filter = _ref2.filter,
      onOnlySelection = _ref2.onOnlySelection,
      onlySelectionText = _ref2.onlySelectionText,
      onChange = _ref2.onChange;
  var groupID = useMemo(function () {
    return randomID("choiceGroupID");
  }, []);

  var handleChange = function handleChange(ev) {
    ev.persist();

    if (onChange) {
      onChange(ev);
    }
  };

  return /*#__PURE__*/React.createElement(StyledChoiceGroup, {
    "data-test": dataTest,
    role: "group",
    "aria-labelledby": groupID
  }, label && /*#__PURE__*/React.createElement(Heading, {
    id: groupID,
    type: getHeadingSize(labelSize),
    as: labelAs,
    spaceAfter: "medium"
  }, label), /*#__PURE__*/React.createElement(Stack, {
    direction: "column",
    spacing: filter ? "none" : "condensed"
  }, React.Children.map(children, function (child) {
    return !filter ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
      onChange: handleChange,
      hasError: Boolean(error)
    })) : /*#__PURE__*/React.createElement(FilterWrapper, {
      child: child,
      onOnlySelection: onOnlySelection,
      onlySelectionText: onlySelectionText
    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
      onChange: handleChange,
      hasError: Boolean(error)
    })));
  })), /*#__PURE__*/React.createElement(FormFeedback, {
    error: error
  }));
};

export default ChoiceGroup;