@elacity-js/uikit
Version:
React / Material UI Design kit for Elacity project
59 lines (56 loc) • 1.97 kB
JavaScript
import { __rest } from '../node_modules/tslib/tslib.es6.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { styled } from '@mui/material/styles';
import FormGroup from '@mui/material/FormGroup';
import Switch from '@mui/material/Switch';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
const InternalSwitch = styled(Switch)(({ theme }) => ({
width: 28,
height: 16,
padding: 0,
display: 'flex',
'&:active': {
'& .MuiSwitch-thumb': {
width: 15,
},
'& .MuiSwitch-switchBase.Mui-checked': {
transform: 'translateX(9px)',
},
},
'& .MuiSwitch-switchBase': {
padding: 2,
'&.Mui-checked': {
transform: 'translateX(12px)',
color: '#fff',
'& + .MuiSwitch-track': {
opacity: 1,
backgroundColor: theme.palette.primary.main,
},
},
},
'& .MuiSwitch-thumb': {
boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
width: 12,
height: 12,
borderRadius: 6,
transition: theme.transitions.create(['width'], {
duration: 200,
}),
},
'& .MuiSwitch-track': {
borderRadius: 16 / 2,
opacity: 1,
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)',
boxSizing: 'border-box',
},
// '&.MuiDisabled': {
// opacity: 0.7,
// },
}));
function SwitchRadio(_a) {
var { label } = _a, props = __rest(_a, ["label"]);
return (jsx(FormGroup, { children: jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "flex-start" }, { children: [label && (jsx(Typography, { children: label })), jsx(InternalSwitch, Object.assign({ inputProps: { 'aria-label': 'inernal' } }, props))] })) }));
}
export { SwitchRadio as default };
//# sourceMappingURL=SwitchRadio.js.map