80 lines
1.6 KiB
JavaScript
80 lines
1.6 KiB
JavaScript
import Switch from '@mui/material/Switch'
|
|
import { makeStyles } from '@mui/material/styles'
|
|
import React, { memo } from 'react'
|
|
|
|
import {
|
|
secondaryColor,
|
|
offColor,
|
|
disabledColor,
|
|
disabledColor2
|
|
} from '../../../styling/variables'
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
root: {
|
|
width: 32,
|
|
height: 20,
|
|
padding: 0,
|
|
margin: theme.spacing(1)
|
|
},
|
|
switchBase: {
|
|
padding: 2,
|
|
'&$disabled': {
|
|
color: disabledColor2,
|
|
'& + $track': {
|
|
backgroundColor: disabledColor,
|
|
opacity: 1
|
|
}
|
|
},
|
|
'&$checked': {
|
|
transform: 'translateX(58%)',
|
|
color: theme.palette.common.white,
|
|
'&$disabled': {
|
|
color: disabledColor2
|
|
},
|
|
'& + $track': {
|
|
backgroundColor: secondaryColor,
|
|
opacity: 1,
|
|
border: 'none'
|
|
}
|
|
},
|
|
'&$focusVisible $thumb': {
|
|
border: '6px solid #fff',
|
|
boxShadow: '0 0 4px 0 rgba(0,0,0,0.24)'
|
|
}
|
|
},
|
|
thumb: {
|
|
width: 16,
|
|
height: 16
|
|
},
|
|
track: {
|
|
borderRadius: 17,
|
|
border: 'none',
|
|
backgroundColor: offColor,
|
|
opacity: 1,
|
|
transition: theme.transitions.create(['background-color', 'border'])
|
|
},
|
|
disabled: {},
|
|
checked: {},
|
|
focusVisible: {}
|
|
}))
|
|
|
|
const SwitchInput = memo(({ ...props }) => {
|
|
const classes = useStyles()
|
|
return (
|
|
<Switch
|
|
focusVisibleClassName={classes.focusVisible}
|
|
disableRipple
|
|
classes={{
|
|
root: classes.root,
|
|
switchBase: classes.switchBase,
|
|
thumb: classes.thumb,
|
|
track: classes.track,
|
|
checked: classes.checked,
|
|
disabled: classes.disabled
|
|
}}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
|
|
export default SwitchInput
|