@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
103 lines • 3.22 kB
JavaScript
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-1g515hg-0"
})(["width:100%;display:flex;flex-direction:column;", "{position:relative;margin-top:", ";top:initial;}"], StyledFormFeedback, ({
theme
}) => theme.orbit.spaceXSmall);
StyledChoiceGroup.defaultProps = {
theme: defaultTheme
};
const ItemContainer = ({
filter,
itemProps,
onOnlySelection,
onlySelectionText
}) => ({
children
}) => {
return !filter ? /*#__PURE__*/React.cloneElement(React.Children.only(children), itemProps) : /*#__PURE__*/React.createElement(FilterWrapper, {
child: React.Children.only(children),
onOnlySelection: onOnlySelection,
onlySelectionText: onlySelectionText
}, /*#__PURE__*/React.cloneElement(React.Children.only(children), itemProps));
};
const ChoiceGroup = /*#__PURE__*/React.forwardRef(({
dataTest,
id,
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 => {
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,
id: id
}, 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: ItemContainer({
filter,
onOnlySelection,
onlySelectionText,
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__*/
// @ts-expect-error TODO
React.cloneElement(child, itemProps) : /*#__PURE__*/React.createElement(FilterWrapper
// @ts-expect-error TODO
, {
child: child,
onOnlySelection: onOnlySelection,
onlySelectionText: onlySelectionText
}, /*#__PURE__*/React.cloneElement(child, itemProps));
})), error && /*#__PURE__*/React.createElement(Feedback, null, error));
});
export default ChoiceGroup;