UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

67 lines (64 loc) 2.72 kB
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 };