@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 * 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 Feedback, { StyledFormFeedback } from "./components/Feedback";
import defaultTheme from "../defaultTheme";
import FilterWrapper from "./components/FilterWrapper";
import useRandomId from "../hooks/useRandomId";
import useTheme from "../hooks/useTheme";

const getHeadingSize = size => {
  const SIZES = {
    [LABEL_SIZES.NORMAL]: "title3",
    [LABEL_SIZES.LARGE]: "title2"
  };
  return SIZES[size];
};

const StyledChoiceGroup = styled.div.withConfig({
  displayName: "ChoiceGroup__StyledChoiceGroup",
  componentId: "sc-yx4edo-0"
})(["width:100%;display:flex;flex-direction:column;", "{position:relative;margin-top:", ";top:initial;}"], StyledFormFeedback, ({
  theme
}) => theme.orbit.spaceXSmall); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledChoiceGroup.defaultProps = {
  theme: defaultTheme
};
const ChoiceGroup = /*#__PURE__*/React.forwardRef(({
  dataTest,
  label,
  labelSize = LABEL_SIZES.NORMAL,
  labelAs = LABEL_ELEMENTS.H4,
  error,
  children,
  filter,
  onOnlySelection,
  onlySelectionText,
  onChange
}, ref) => {
  const groupID = useRandomId();
  const theme = useTheme();

  const handleChange = ev => {
    ev.persist();

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

  const itemProps = {
    onChange: handleChange,
    hasError: Boolean(error)
  };
  return /*#__PURE__*/React.createElement(StyledChoiceGroup, {
    ref: ref,
    "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: ({
      children: itemChildren
    }) => {
      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, child => {
    return !filter ? /*#__PURE__*/React.cloneElement(child, itemProps) : /*#__PURE__*/React.createElement(FilterWrapper, {
      child: child,
      onOnlySelection: onOnlySelection,
      onlySelectionText: onlySelectionText
    }, /*#__PURE__*/React.cloneElement(child, itemProps));
  })), error && /*#__PURE__*/React.createElement(Feedback, null, error));
});
export default ChoiceGroup;