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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

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

var _Heading = _interopRequireDefault(require("../Heading"));

var _Stack = _interopRequireDefault(require("../Stack"));

var _consts = require("./consts");

var _Feedback = _interopRequireWildcard(require("./components/Feedback"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _FilterWrapper = _interopRequireDefault(require("./components/FilterWrapper"));

var _useRandomId = _interopRequireDefault(require("../hooks/useRandomId"));

var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));

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

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


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

  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.default, {
    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.default, {
        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.default, {
    direction: "column",
    spacing: filter ? "none" : "XSmall"
  }, React.Children.map(children, child => {
    return !filter ? /*#__PURE__*/React.cloneElement(child, itemProps) : /*#__PURE__*/React.createElement(_FilterWrapper.default, {
      child: child,
      onOnlySelection: onOnlySelection,
      onlySelectionText: onlySelectionText
    }, /*#__PURE__*/React.cloneElement(child, itemProps));
  })), error && /*#__PURE__*/React.createElement(_Feedback.default, null, error));
});
var _default = ChoiceGroup;
exports.default = _default;