@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
67 lines (64 loc) • 2.72 kB
JavaScript
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { bordersTemplate } from '@equinor/eds-utils';
import { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
import { jsxs, jsx } from 'react/jsx-runtime';
const Input = styled(BaseInput).withConfig({
displayName: "SwitchDefault__Input",
componentId: "sc-16ym5pn-0"
})(({
disabled,
theme
}) => css(["width:", ";aspect-ratio:1/1;&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], theme.clickbound.height, disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background));
const Track = styled.span.withConfig({
displayName: "SwitchDefault__Track",
componentId: "sc-16ym5pn-1"
})(({
$isDisabled,
theme: {
states,
entities: {
track
}
}
}) => css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], bordersTemplate(track.border), track.width, track.height, track.background, $isDisabled && {
backgroundColor: states.disabled.background
}));
const Handle = styled.span.withConfig({
displayName: "SwitchDefault__Handle",
componentId: "sc-16ym5pn-2"
})(({
$isDisabled,
theme: {
states,
entities: {
handle
}
}
}) => css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, $isDisabled && {
backgroundColor: states.disabled.background
}, handle.boxShadow, handle.width, handle.height));
const SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault({
disabled,
className,
style,
...rest
}, ref) {
return /*#__PURE__*/jsxs(GridWrapper, {
className: className,
style: style,
children: [/*#__PURE__*/jsx(Input, {
...rest,
ref: ref,
disabled: disabled
}), /*#__PURE__*/jsxs(BaseInputWrapper, {
children: [/*#__PURE__*/jsx(Track, {
$isDisabled: disabled
}), /*#__PURE__*/jsx(Handle, {
$isDisabled: disabled
})]
})]
});
});
SwitchDefault.displayName = 'SwitchDefault';
export { SwitchDefault };