@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.
81 lines (80 loc) • 2.87 kB
JavaScript
"use strict";
"use client";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _FormLabel = _interopRequireDefault(require("../FormLabel"));
var _Stack = _interopRequireDefault(require("../Stack"));
var _SwitchSegment = _interopRequireDefault(require("./SwitchSegment"));
var _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));
var _useErrorTooltip = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));
var _spaceAfter = require("../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
} = (0, _useErrorTooltip.default)({
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: (0, _clsx.default)("gap-xxxs relative flex w-full flex-col", spaceAfter && _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.default, {
help: !!help,
error: !!error,
onMouseEnter: () => setTooltipShownHover(true),
onMouseLeave: () => setTooltipShownHover(false)
}, label), /*#__PURE__*/React.createElement(_Stack.default, {
flex: true,
spacing: "none"
}, options.map(({
value,
label: optionLabel,
...props
}) => /*#__PURE__*/React.createElement(_SwitchSegment.default, (0, _extends2.default)({
key: value,
value: value,
label: optionLabel,
setTooltipShown: setTooltipShown,
onChange: onChange,
onFocus: onFocus
}, props)))), hasTooltip && /*#__PURE__*/React.createElement(_ErrorFormTooltip.default, {
help: help,
error: error,
helpClosable: false,
shown: tooltipShown || tooltipShownHover,
onShown: prev => setTooltipShown(!prev),
referenceElement: labelRef
}));
};
var _default = SegmentedSwitch;
exports.default = _default;