| 1 | import { createElement as h } from 'react' |
| 2 | import { styled, Switch, SwitchProps } from '@mui/material' |
| 3 | |
| 4 | export function switchBtn(value: boolean | undefined, onChange: (v: boolean) => void, props?: SwitchProps) { |
| 5 | return h(VerticalSwitch, { |
| 6 | checked: value || false, |
| 7 | onChange(ev, v) { onChange(v) }, |
| 8 | disabled: value === undefined, |
| 9 | ...props |
| 10 | }) |
| 11 | } |
| 12 | |
| 13 | export const VerticalSwitch = styled(Switch)(({ theme, size }) => { |
| 14 | const small = size && size === 'small' |
| 15 | return ({ |
| 16 | height: small ? 36 : 48, width: small ? 18 : 26, |
| 17 | padding: 5, |
| 18 | '& .MuiSwitch-switchBase': { |
| 19 | margin: 1, |
| 20 | padding: 0, |
| 21 | transform: `translateY(${small ? 16 : 22}px)`, |
| 22 | '&.Mui-checked': { |
| 23 | color: theme.palette.primary.contrastText, |
| 24 | transform: 'translateY(2px)', |
| 25 | '& .MuiSwitch-thumb:before': { |
| 26 | backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="${small ? 14 : 20}" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent( |
| 27 | theme.palette.primary.contrastText |
| 28 | )}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`, |
| 29 | }, |
| 30 | '& + .MuiSwitch-track': { |
| 31 | backgroundColor: theme.palette.grey[500], |
| 32 | }, |
| 33 | }, |
| 34 | }, |
| 35 | '& .Mui-checked .MuiSwitch-thumb': { |
| 36 | backgroundColor: theme.palette.primary.main, |
| 37 | boxShadow: '0px 2px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)', |
| 38 | }, |
| 39 | '& .MuiSwitch-thumb': { |
| 40 | width: small ? 16 : 24, |
| 41 | height: small ? 16 : 24, |
| 42 | backgroundColor: theme.palette.grey[700], |
| 43 | '&::before': { |
| 44 | content: "''", |
| 45 | position: 'absolute', |
| 46 | width: '85%', |
| 47 | height: '85%', |
| 48 | left: 0, |
| 49 | top: 0, |
| 50 | backgroundRepeat: 'no-repeat', |
| 51 | backgroundPosition: 'center', |
| 52 | backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="${small ? 14 : 20}" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent( |
| 53 | theme.palette.primary.contrastText |
| 54 | )}" d="M19,13H5V11H19V13Z"/></svg>')`, |
| 55 | }, |
| 56 | }, |
| 57 | '& .MuiSwitch-track': { |
| 58 | backgroundColor: theme.palette.grey[500], |
| 59 | borderRadius: 20 / 2, |
| 60 | }, |
| 61 | }) |
| 62 | }) |