jiti-meet/react/features/base/ui/components/web/Switch.tsx

106 lines
2.7 KiB
TypeScript
Raw Normal View History

2022-09-13 07:36:00 +00:00
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
2022-09-13 07:36:00 +00:00
import { makeStyles } from 'tss-react/mui';
import { isMobileBrowser } from '../../../environment/utils';
import { ISwitchProps } from '../types';
interface IProps extends ISwitchProps {
/**
* Id of the toggle.
*/
id?: string;
}
2022-09-13 07:36:00 +00:00
const useStyles = makeStyles()((theme: Theme) => {
return {
container: {
position: 'relative',
backgroundColor: theme.palette.ui05,
borderRadius: '12px',
width: '40px',
height: '24px',
border: 0,
outline: 0,
cursor: 'pointer',
transition: '.3s',
display: 'inline-block',
'&.disabled': {
backgroundColor: theme.palette.ui05,
cursor: 'default',
'& .toggle': {
backgroundColor: theme.palette.ui03
}
},
'&.is-mobile': {
height: '32px',
width: '50px',
borderRadius: '32px'
}
},
containerOn: {
backgroundColor: theme.palette.action01
},
toggle: {
width: '16px',
height: '16px',
position: 'absolute',
top: '4px',
left: '4px',
backgroundColor: theme.palette.ui10,
borderRadius: '100%',
transition: '.3s',
'&.is-mobile': {
width: '24px',
height: '24px'
}
},
toggleOn: {
left: '20px',
'&.is-mobile': {
left: '22px'
}
},
checkbox: {
height: 0,
width: 0
}
};
});
const Switch = ({ id, checked, disabled, onChange }: IProps) => {
2022-09-13 07:36:00 +00:00
const { classes: styles, cx } = useStyles();
const isMobile = isMobileBrowser();
const change = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
onChange(e.target.checked);
}, []);
2022-09-13 07:36:00 +00:00
return (
<label
className = { cx('toggle-container', styles.container, checked && styles.containerOn,
isMobile && 'is-mobile', disabled && 'disabled') }>
<input
type = 'checkbox'
{ ...(id ? { id } : {}) }
checked = { checked }
className = { styles.checkbox }
disabled = { disabled }
onChange = { change } />
<div className = { cx('toggle', styles.toggle, checked && styles.toggleOn, isMobile && 'is-mobile') } />
</label>
);
};
export default Switch;