mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-13 12:17:24 +00:00
lebaudantoine
a01f0256a1
The upgrade introduced around 50 new linting errors. Fix the low-hanging fruit and address straightforward violations. Several of the new rules appear to target patterns intended for newer React compiler capabilities. Since the project currently runs on React 18 rather than React 19, disable these rules for now instead of applying potentially inappropriate changes. Follow-up work can address the new rules in a dedicated PR, potentially alongside a future React version upgrade.
125 lines
3.1 KiB
TypeScript
125 lines
3.1 KiB
TypeScript
import {
|
|
Switch as RACSwitch,
|
|
SwitchProps as RACSwitchProps,
|
|
} from 'react-aria-components'
|
|
import { styled } from '@/styled-system/jsx'
|
|
import { type StyledVariantProps } from '@/styled-system/types'
|
|
import { RiCheckLine, RiCloseFill } from '@remixicon/react'
|
|
|
|
const StyledSwitch = styled(RACSwitch, {
|
|
base: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.571rem',
|
|
color: 'black',
|
|
forcedColorAdjust: 'none',
|
|
'& .indicator': {
|
|
position: 'relative',
|
|
width: '2.6rem',
|
|
height: '1.563rem',
|
|
border: '0.125rem solid',
|
|
borderColor: 'primary.800',
|
|
borderRadius: '1.143rem',
|
|
transition: 'all 200ms, outline 200ms',
|
|
_before: {
|
|
willChange: 'transform',
|
|
content: '""',
|
|
display: 'block',
|
|
margin: '0.125rem',
|
|
width: '1.063rem',
|
|
height: '1.063rem',
|
|
borderRadius: '1.063rem',
|
|
background: 'primary.800',
|
|
transition: 'transform 200ms, background-color 200ms',
|
|
transitionDelay: '0ms',
|
|
},
|
|
},
|
|
'& .checkmark': {
|
|
position: 'absolute',
|
|
display: 'block',
|
|
top: '50%',
|
|
right: '0.1rem',
|
|
transform: 'translateY(-50%)',
|
|
color: 'primary.800',
|
|
fontSize: '0.75rem',
|
|
fontWeight: 'bold',
|
|
pointerEvents: 'none',
|
|
zIndex: 1,
|
|
opacity: 0,
|
|
},
|
|
'& .cross': {
|
|
position: 'absolute',
|
|
display: 'block',
|
|
top: '50%',
|
|
left: '0.13rem',
|
|
transform: 'translateY(-50%)',
|
|
color: 'white',
|
|
fontSize: '0.70rem',
|
|
fontWeight: 'bold',
|
|
pointerEvents: 'none',
|
|
zIndex: 1,
|
|
opacity: 1,
|
|
transition: 'opacity 200ms',
|
|
transitionDelay: '0ms',
|
|
},
|
|
'&[data-selected] .indicator': {
|
|
borderColor: 'primary.800',
|
|
background: 'primary.800',
|
|
_before: {
|
|
background: 'white',
|
|
transform: 'translateX(100%)',
|
|
},
|
|
},
|
|
'&[data-selected] .checkmark': {
|
|
opacity: 1,
|
|
transition: 'opacity 30ms',
|
|
transitionDelay: '150ms',
|
|
},
|
|
'&[data-selected] .cross': {
|
|
opacity: 0,
|
|
transition: 'opacity 10ms',
|
|
transitionDelay: '0ms',
|
|
},
|
|
'&[data-disabled] .indicator': {
|
|
borderColor: 'primary.200',
|
|
background: 'transparent',
|
|
_before: {
|
|
background: 'primary.200',
|
|
},
|
|
},
|
|
'&[data-disabled] .cross': {
|
|
color: 'primary.500',
|
|
},
|
|
'&[data-focus-visible] .indicator': {
|
|
outline: '2px solid!',
|
|
outlineColor: 'focusRing!',
|
|
outlineOffset: '2px!',
|
|
},
|
|
},
|
|
variants: {},
|
|
})
|
|
|
|
export type SwitchProps = StyledVariantProps<typeof StyledSwitch> &
|
|
RACSwitchProps
|
|
|
|
/**
|
|
* Styled RAC Switch.
|
|
*/
|
|
export const Switch = ({ children, ...props }: SwitchProps) => (
|
|
<StyledSwitch {...props}>
|
|
{(renderProps) => (
|
|
<>
|
|
<div className="indicator">
|
|
<span className="checkmark" aria-hidden="true">
|
|
<RiCheckLine size={16} />
|
|
</span>
|
|
<span className="cross" aria-hidden="true">
|
|
<RiCloseFill size={16} />
|
|
</span>
|
|
</div>
|
|
{typeof children === 'function' ? children(renderProps) : children}
|
|
</>
|
|
)}
|
|
</StyledSwitch>
|
|
)
|