@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
76 lines (73 loc) • 2.32 kB
JavaScript
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 };