@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.
78 lines (75 loc) • 4.07 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
import Circle from "../icons/Circle";
import handleKeyDown from "../utils/handleKeyDown";
var StyledSwitch = styled.label.withConfig({
displayName: "Switch__StyledSwitch",
componentId: "sc-15kr6a1-0"
})(["display:inline-block;"]);
var StyledSwitchBase = styled.div.withConfig({
displayName: "Switch__StyledSwitchBase",
componentId: "sc-15kr6a1-1"
})(["", ";"], function (_ref) {
var theme = _ref.theme,
checked = _ref.checked,
disabled = _ref.disabled;
return css(["display:flex;align-items:center;justify-content:space-between;cursor:", ";width:50px;height:28px;background-color:", ";border-radius:100px;position:relative;transition:background-color ", ";opacity:", ";", ";"], !disabled && "pointer", theme.orbit.paletteCloudDarker, theme.orbit.durationFast, disabled && "0.5", checked && css(["background-color:", ";"], theme.orbit.paletteBlueNormal));
});
var StyledSwitchButton = styled.div.withConfig({
displayName: "Switch__StyledSwitchButton",
componentId: "sc-15kr6a1-2"
})(["", ";"], function (_ref2) {
var theme = _ref2.theme,
checked = _ref2.checked,
hasCustomIcon = _ref2.hasCustomIcon,
disabled = _ref2.disabled;
return css(["box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-1px;left:-3px;width:30px;height:30px;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 && css(["left:calc(100% + 2px);transform:translateX(-100%);svg{color:", ";}"], theme.orbit.paletteBlueNormal));
});
var StyledSwitchInput = styled.input.withConfig({
displayName: "Switch__StyledSwitchInput",
componentId: "sc-15kr6a1-3"
})(["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
}; // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledSwitchBase.defaultProps = {
theme: defaultTheme
}; // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledSwitchButton.defaultProps = {
theme: defaultTheme
};
var Switch = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
var onChange = _ref3.onChange,
checked = _ref3.checked,
dataTest = _ref3.dataTest,
icon = _ref3.icon,
onBlur = _ref3.onBlur,
onFocus = _ref3.onFocus,
disabled = _ref3.disabled,
ariaLabelledby = _ref3.ariaLabelledby;
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 ? handleKeyDown(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(Circle, null))));
});
Switch.displayName = "Switch";
export default Switch;