@kiwicom/orbit-components/lib/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.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = exports.StyledText = exports.StyledLabel = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));
var _common = require("../../utils/common");
const StyledLabel = _styledComponents.default.label.withConfig({
  displayName: "SwitchSegment__StyledLabel",
  componentId: "sc-ahskam-0"
})(["display:flex;position:relative;width:100%;"]);
exports.StyledLabel = StyledLabel;
const StyledText = _styledComponents.default.div.withConfig({
  displayName: "SwitchSegment__StyledText",
  componentId: "sc-ahskam-1"
})(["", ""], ({
  theme
}) => (0, _styledComponents.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));
exports.StyledText = StyledText;
StyledText.defaultProps = {
  theme: _defaultTheme.default
};
const StyledInput = _styledComponents.default.input.withConfig({
  displayName: "SwitchSegment__StyledInput",
  componentId: "sc-ahskam-2"
})(["", ";"], ({
  theme
}) => (0, _styledComponents.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, _common.defaultFocus));
StyledInput.defaultProps = {
  theme: _defaultTheme.default
};
const SwitchSegment = ({
  value,
  label,
  disabled,
  onChange,
  setTooltipShown,
  onFocus,
  defaultChecked,
  name
}) => {
  const ref = React.useRef(null);
  (0, _useClickOutside.default)(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));
};
var _default = SwitchSegment;
exports.default = _default;