UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

76 lines (73 loc) 2.32 kB
import { forwardRef } from 'react'; import styled, { css, ThemeProvider } from 'styled-components'; import { SwitchSmall } from './SwitchSmall.js'; import { SwitchDefault } from './SwitchDefault.js'; import { comfortable } from './Switch.tokens.js'; import { typographyTemplate, useToken } from '@equinor/eds-utils'; import { jsx, jsxs } from 'react/jsx-runtime'; import { useEds } from '../EdsProvider/eds.context.js'; const StyledLabel = styled.label.withConfig({ displayName: "Switch__StyledLabel", componentId: "sc-sdaahx-0" })(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;gap:", ";"], ({ $isDisabled }) => $isDisabled ? 'not-allowed' : 'pointer', ({ $size }) => $size === 'small' ? '12px' : '8px'); const Label = styled.span.withConfig({ displayName: "Switch__Label", componentId: "sc-sdaahx-1" })(({ theme }) => css(["", ";"], typographyTemplate(theme.typography))); const Switch = /*#__PURE__*/forwardRef(function Switch({ size = 'default', disabled, label, className, style, ...rest }, ref) { const { density } = useEds(); // TODO Temporary workaround untill we can deprecate "size" property (controlled by EdsProvider in the future) const overrideDensity = size === 'small' ? 'compact' : density; const token = useToken({ density: overrideDensity }, comfortable); return /*#__PURE__*/jsx(ThemeProvider, { theme: token, children: label ? /*#__PURE__*/jsxs(StyledLabel, { $size: size, $isDisabled: disabled, className: className, style: style, children: [size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, { disabled: disabled, ...rest, ref: ref }) : /*#__PURE__*/jsx(SwitchDefault, { disabled: disabled, ...rest, ref: ref }), label && /*#__PURE__*/jsx(Label, { children: label })] }) : size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, { disabled: disabled, className: className, style: style, ...rest, ref: ref }) : /*#__PURE__*/jsx(SwitchDefault, { disabled: disabled, className: className, style: style, ...rest, ref: ref }) }); }); Switch.displayName = 'Switch'; export { Switch };