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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _Circle = _interopRequireDefault(require("../icons/Circle"));

var _handleKeyDown = _interopRequireDefault(require("../utils/handleKeyDown"));

const StyledSwitch = _styledComponents.default.label.withConfig({
  displayName: "Switch__StyledSwitch",
  componentId: "sc-yfde4g-0"
})(["display:inline-block;"]);

const StyledCircle = (0, _styledComponents.default)(_Circle.default).withConfig({
  displayName: "Switch__StyledCircle",
  componentId: "sc-yfde4g-1"
})(["height:8px !important;width:8px !important;"]);

const StyledSwitchBase = _styledComponents.default.div.withConfig({
  displayName: "Switch__StyledSwitchBase",
  componentId: "sc-yfde4g-2"
})(["", ";"], ({
  theme,
  checked,
  disabled
}) => (0, _styledComponents.css)(["display:flex;align-items:center;justify-content:space-between;cursor:", ";width:40px;height:20px;background-color:", ";border-radius:100px;position:relative;transition:background-color ", ";opacity:", ";", ";"], !disabled && "pointer", theme.orbit.paletteCloudDarker, theme.orbit.durationFast, disabled && "0.5", checked && (0, _styledComponents.css)(["background-color:", ";"], theme.orbit.paletteBlueNormal)));

const StyledSwitchButton = _styledComponents.default.div.withConfig({
  displayName: "Switch__StyledSwitchButton",
  componentId: "sc-yfde4g-3"
})(["", ";"], ({
  theme,
  checked,
  hasCustomIcon,
  disabled
}) => (0, _styledComponents.css)(["box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;position:absolute;left:-3px;width:24px;height:24px;border-radius:", ";background:", ";transition:", ";box-shadow:inset 0 0 1px 0 rgba(7,64,92,0.1),", ";&:active{box-shadow:", ";}svg{height:", ";width:", ";color:", ";}", ";"], theme.orbit.borderRadiusCircle, theme.orbit.paletteWhite, theme.orbit.durationFast, theme.orbit.boxShadowAction, !disabled && theme.orbit.boxShadowActionActive, theme.orbit.heightIconSmall, theme.orbit.heightIconSmall, hasCustomIcon ? theme.orbit.paletteInkLight : theme.orbit.paletteCloudDarker, checked && (0, _styledComponents.css)(["left:calc(100% + 2px);transform:translateX(-100%);svg{color:", ";}"], theme.orbit.paletteBlueNormal)));

const StyledSwitchInput = _styledComponents.default.input.withConfig({
  displayName: "Switch__StyledSwitchInput",
  componentId: "sc-yfde4g-4"
})(["cursor:inherit;position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;padding:0;&:focus + ", "{box-shadow:rgba(95,115,140,0.3) 0px 0px 0px 2px;}"], StyledSwitchButton); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledSwitchInput.defaultProps = {
  theme: _defaultTheme.default
}; // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledSwitchBase.defaultProps = {
  theme: _defaultTheme.default
}; // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledSwitchButton.defaultProps = {
  theme: _defaultTheme.default
};
const Switch = /*#__PURE__*/React.forwardRef(({
  onChange,
  checked,
  dataTest,
  icon,
  onBlur,
  onFocus,
  disabled,
  ariaLabelledby
}, ref) => {
  return /*#__PURE__*/React.createElement(StyledSwitch, null, /*#__PURE__*/React.createElement(StyledSwitchBase, {
    checked: checked,
    disabled: disabled
  }, /*#__PURE__*/React.createElement(StyledSwitchInput, {
    ref: ref,
    checked: checked,
    disabled: disabled,
    "aria-checked": checked,
    role: "switch",
    "aria-labelledby": ariaLabelledby // $FlowFixMe: fix the type of handleKeyDown
    ,
    onKeyDown: !disabled ? (0, _handleKeyDown.default)(onChange) : undefined,
    onBlur: !disabled ? onBlur : undefined,
    onChange: !disabled ? onChange : undefined,
    onFocus: !disabled ? onFocus : undefined,
    type: "checkbox",
    "data-test": dataTest
  }), /*#__PURE__*/React.createElement(StyledSwitchButton, {
    checked: checked,
    disabled: disabled,
    hasCustomIcon: !!icon
  }, icon || /*#__PURE__*/React.createElement(StyledCircle, null))));
});
Switch.displayName = "Switch";
var _default = Switch;
exports.default = _default;