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

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

import * as React from "react";
import styled, { css } from "styled-components";
import useClickOutside from "../../hooks/useClickOutside";
import defaultTheme from "../../defaultTheme";
import { defaultFocus } from "../../utils/common";
export const StyledLabel = styled.label.withConfig({
  displayName: "SwitchSegment__StyledLabel",
  componentId: "sc-ahskam-0"
})(["display:flex;position:relative;width:100%;"]);
export const StyledText = styled.div.withConfig({
  displayName: "SwitchSegment__StyledText",
  componentId: "sc-ahskam-1"
})(["", ""], ({
  theme
}) => css(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;text-align:center;max-width:100%;background:", ";color:", ";border:0;padding:", ";color:", ";font-family:", ";font-weight:", ";font-size:", ";line-height:", ";cursor:pointer;transition:color ", " ease-in-out;width:100%;box-shadow:0 0 0 1px ", ";&:hover{color:", ";}"], theme.orbit.paletteWhite, theme.orbit.paletteInkNormal, theme.orbit.spaceSmall, theme.orbit.paletteInkLight, theme.orbit.fontFamily, theme.orbit.fontWeightMedium, theme.orbit.fontSizeTextNormal, theme.orbit.lineHeightTextNormal, theme.orbit.durationFast, theme.orbit.paletteCloudDark, theme.orbit.paletteInkNormal));
StyledText.defaultProps = {
  theme: defaultTheme
};
const StyledInput = styled.input.withConfig({
  displayName: "SwitchSegment__StyledInput",
  componentId: "sc-ahskam-2"
})(["", ";"], ({
  theme
}) => css(["clip:rect(0 0 0 0);height:1px;margin:-1px;border:0;overflow:hidden;white-space:nowrap;padding:0;position:absolute;width:1px;&:checked + div,&:focus + div{z-index:10;border-radius:5px !important;color:", ";", ";}"], theme.orbit.paletteInkNormal, defaultFocus));
StyledInput.defaultProps = {
  theme: defaultTheme
};
const SwitchSegment = ({
  value,
  label,
  disabled,
  onChange,
  setTooltipShown,
  onFocus,
  defaultChecked,
  name
}) => {
  const ref = React.useRef(null);
  useClickOutside(ref, () => setTooltipShown(false));
  return /*#__PURE__*/React.createElement(StyledLabel, null, /*#__PURE__*/React.createElement(StyledInput, {
    name: name || "switch-segment",
    defaultChecked: defaultChecked,
    type: "radio",
    role: "switch",
    ref: ref,
    "aria-checked": Boolean(value),
    onChange: onChange,
    onFocus: onFocus,
    disabled: disabled,
    value: value
  }), /*#__PURE__*/React.createElement(StyledText, null, label));
};
export default SwitchSegment;