@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.

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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";

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: "njp29m-0"
})(["width:100%;display:flex;flex-direction:column;", "{position:relative;margin-top:", ";top:initial;}"], StyledFormFeedback, ({
  theme
}) => theme.orbit.spaceXSmall);
StyledChoiceGroup.defaultProps = {
  theme: defaultTheme
};

class ChoiceGroup extends React.PureComponent {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "groupID", randomID("choiceGroupID"));

    _defineProperty(this, "handleChange", ev => {
      ev.persist();
      const {
        onChange
      } = this.props;

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

  render() {
    const {
      dataTest,
      label,
      labelSize = LABEL_SIZES.NORMAL,
      labelAs = LABEL_ELEMENTS.H4,
      error,
      children,
      filter,
      onOnlySelection
    } = this.props;
    return React.createElement(StyledChoiceGroup, {
      "data-test": dataTest,
      role: "group",
      "aria-labelledby": this.groupID
    }, label && React.createElement(Heading, {
      id: this.groupID,
      type: getHeadingSize(labelSize),
      element: labelAs,
      spaceAfter: "medium"
    }, label), React.createElement(Stack, {
      direction: "column",
      spacing: filter ? "none" : "condensed"
    }, React.Children.map(children, child => {
      return !filter ? React.createElement(React.Fragment, null, React.cloneElement(child, {
        onChange: this.handleChange,
        hasError: !!error
      })) : React.createElement(FilterWrapper, {
        child: child,
        onOnlySelection: onOnlySelection
      }, React.createElement(React.Fragment, null, React.cloneElement(child, {
        onChange: this.handleChange,
        hasError: !!error
      })));
    })), error && React.createElement(FormFeedback, {
      type: "error"
    }, error));
  }

}

export default ChoiceGroup;