@kiwicom/orbit-components/es/SegmentedSwitch/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import styled, { css } from "styled-components";
import getSpacingToken from "../common/getSpacingToken";
import FormLabel from "../FormLabel";
import defaultTheme from "../defaultTheme";
import Stack from "../Stack";
import SwitchSegment, { StyledText, StyledLabel } from "./SwitchSegment";
import ErrorFormTooltip from "../ErrorFormTooltip";
import useErrorTooltip from "../ErrorFormTooltip/hooks/useErrorTooltip";
const StyledWrapper = styled.label.withConfig({
  displayName: "SegmentedSwitch__StyledWrapper",
  componentId: "sc-10oalrm-0"
})(["", ";"], ({
  theme,
  $maxWidth
}) => 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, theme.orbit.spaceXXXSmall, StyledLabel, StyledText, StyledText));
StyledWrapper.defaultProps = {
  theme: defaultTheme
};
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(StyledWrapper, {
    spaceAfter: spaceAfter,
    "data-test": dataTest,
    $maxWidth: maxWidth,
    ref: labelRef
  }, 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;