@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 * as React 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";
import useTheme from "../hooks/useTheme";

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;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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 = React.useMemo(function () {
    return randomID("choiceGroupID");
  }, []);
  var theme = useTheme();

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

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

  var itemProps = {
    onChange: handleChange,
    hasError: Boolean(error)
  };
  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), typeof children === "function" ? children({
    // for now a plain <div> is all we need, but we're reserving this space in the API
    // in case we'll need something more in the future
    Container: "div",
    Item: function Item(_ref3) {
      var itemChildren = _ref3.children;
      return !filter ? /*#__PURE__*/React.cloneElement(React.Children.only(itemChildren), itemProps) : /*#__PURE__*/React.createElement(FilterWrapper, {
        child: React.Children.only(itemChildren),
        onOnlySelection: onOnlySelection,
        onlySelectionText: onlySelectionText
      }, /*#__PURE__*/React.cloneElement(React.Children.only(itemChildren), itemProps));
    },
    spacing: filter ? "0px" : theme.orbit.spaceXSmall
  }) : /*#__PURE__*/React.createElement(Stack, {
    direction: "column",
    spacing: filter ? "none" : "XSmall"
  }, React.Children.map(children, function (child) {
    return !filter ? /*#__PURE__*/React.cloneElement(child, itemProps) : /*#__PURE__*/React.createElement(FilterWrapper, {
      child: child,
      onOnlySelection: onOnlySelection,
      onlySelectionText: onlySelectionText
    }, /*#__PURE__*/React.cloneElement(child, itemProps));
  })), /*#__PURE__*/React.createElement(FormFeedback, {
    error: error
  }));
};

export default ChoiceGroup;