@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.
75 lines (74 loc) • 2.29 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import cx from "clsx";
import FormLabel from "../FormLabel";
import Stack from "../Stack";
import SwitchSegment from "./SwitchSegment";
import ErrorFormTooltip from "../ErrorFormTooltip";
import useErrorTooltip from "../ErrorFormTooltip/hooks/useErrorTooltip";
import { spaceAfterClasses } from "../common/tailwind/spaceAfter";
const SegmentedSwitch = ({
options,
dataTest,
onChange,
showTooltip,
spaceAfter,
onFocus,
maxWidth,
help,
error,
label
}) => {
const hasTooltip = Boolean(error || help);
const {
tooltipShown,
tooltipShownHover,
setTooltipShown,
setTooltipShownHover,
labelRef
} = useErrorTooltip({
onFocus,
hasTooltip
});
React.useEffect(() => {
if (hasTooltip) {
if (showTooltip) setTooltipShown(true);else setTooltipShown(false);
}
}, [showTooltip, hasTooltip, setTooltipShown]);
return /*#__PURE__*/React.createElement("label", {
"data-test": dataTest,
ref: labelRef,
className: cx("gap-xxxs relative flex w-full flex-col", spaceAfter && spaceAfterClasses[spaceAfter], "[&_.orbit-switch-segment-label:nth-child(odd)_.orbit-switch-segment-text]:rounded-[5px_0_0_5px]", "[&_.orbit-switch-segment-label:nth-child(even)_.orbit-switch-segment-text]:rounded-[0_5px_5px_0]"),
style: {
maxWidth
}
}, label && /*#__PURE__*/React.createElement(FormLabel, {
help: !!help,
error: !!error,
onMouseEnter: () => setTooltipShownHover(true),
onMouseLeave: () => setTooltipShownHover(false)
}, label), /*#__PURE__*/React.createElement(Stack, {
flex: true,
spacing: "none"
}, options.map(({
value,
label: optionLabel,
...props
}) => /*#__PURE__*/React.createElement(SwitchSegment, _extends({
key: value,
value: value,
label: optionLabel,
setTooltipShown: setTooltipShown,
onChange: onChange,
onFocus: onFocus
}, props)))), hasTooltip && /*#__PURE__*/React.createElement(ErrorFormTooltip, {
help: help,
error: error,
helpClosable: false,
shown: tooltipShown || tooltipShownHover,
onShown: prev => setTooltipShown(!prev),
referenceElement: labelRef
}));
};
export default SegmentedSwitch;