@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.
89 lines (88 loc) • 3.32 kB
JavaScript
"use strict";
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 _styledComponents = _interopRequireWildcard(require("styled-components"));
var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));
var _FormLabel = _interopRequireDefault(require("../FormLabel"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _Stack = _interopRequireDefault(require("../Stack"));
var _SwitchSegment = _interopRequireWildcard(require("./SwitchSegment"));
var _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));
var _useErrorTooltip = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));
const StyledWrapper = _styledComponents.default.label.withConfig({
displayName: "SegmentedSwitch__StyledWrapper",
componentId: "sc-10oalrm-0"
})(["", ";"], ({
theme,
$maxWidth
}) => (0, _styledComponents.css)(["display:flex;width:100%;position:relative;flex-direction:column;max-width:", ";margin-bottom:", ";gap:", ";", "{&:nth-child(odd){", "{border-radius:5px 0 0 5px;}}&:nth-child(even){", "{border-radius:0 5px 5px 0;}}}"], $maxWidth, _getSpacingToken.default, theme.orbit.spaceXXXSmall, _SwitchSegment.StyledLabel, _SwitchSegment.StyledText, _SwitchSegment.StyledText));
StyledWrapper.defaultProps = {
theme: _defaultTheme.default
};
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(StyledWrapper, {
spaceAfter: spaceAfter,
"data-test": dataTest,
$maxWidth: maxWidth,
ref: labelRef
}, 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;