@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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

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

var StyledChoiceGroup = _styledComponents.default.div.withConfig({
  displayName: "ChoiceGroup__StyledChoiceGroup",
  componentId: "njp29m-0"
})(["width:100%;display:flex;flex-direction:column;", "{position:relative;margin-top:", ";top:initial;}"], _Feedback.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.default
};

var ChoiceGroup = function ChoiceGroup(_ref2) {
  var dataTest = _ref2.dataTest,
      label = _ref2.label,
      _ref2$labelSize = _ref2.labelSize,
      labelSize = _ref2$labelSize === void 0 ? _consts.LABEL_SIZES.NORMAL : _ref2$labelSize,
      _ref2$labelAs = _ref2.labelAs,
      labelAs = _ref2$labelAs === void 0 ? _consts.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 = (0, _useRandomId.default)();
  var theme = (0, _useTheme.default)();

  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.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: function Item(_ref3) {
      var itemChildren = _ref3.children;
      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, function (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;