005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
import * as React from 'react';
|
|
import { styled } from '@mui/material/styles';
|
|
import Box from '@mui/material/Box';
|
|
import FormControl from '@mui/material/FormControl';
|
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
import FormLabel from '@mui/material/FormLabel';
|
|
import Radio from '@mui/material/Radio';
|
|
import RadioGroup from '@mui/material/RadioGroup';
|
|
import Switch from '@mui/material/Switch';
|
|
import SpeedDial, { SpeedDialProps } from '@mui/material/SpeedDial';
|
|
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
|
|
import SpeedDialAction from '@mui/material/SpeedDialAction';
|
|
import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';
|
|
import SaveIcon from '@mui/icons-material/Save';
|
|
import PrintIcon from '@mui/icons-material/Print';
|
|
import ShareIcon from '@mui/icons-material/Share';
|
|
|
|
const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({
|
|
position: 'absolute',
|
|
'&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': {
|
|
bottom: theme.spacing(2),
|
|
right: theme.spacing(2),
|
|
},
|
|
'&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': {
|
|
top: theme.spacing(2),
|
|
left: theme.spacing(2),
|
|
},
|
|
}));
|
|
|
|
const actions = [
|
|
{ icon: <FileCopyIcon />, name: 'Copy' },
|
|
{ icon: <SaveIcon />, name: 'Save' },
|
|
{ icon: <PrintIcon />, name: 'Print' },
|
|
{ icon: <ShareIcon />, name: 'Share' },
|
|
];
|
|
|
|
export default function PlaygroundSpeedDial() {
|
|
const [direction, setDirection] =
|
|
React.useState<SpeedDialProps['direction']>('up');
|
|
const [hidden, setHidden] = React.useState(false);
|
|
|
|
const handleDirectionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setDirection(
|
|
(event.target as HTMLInputElement).value as SpeedDialProps['direction'],
|
|
);
|
|
};
|
|
|
|
const handleHiddenChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setHidden(event.target.checked);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ transform: 'translateZ(0px)', flexGrow: 1 }}>
|
|
<FormControlLabel
|
|
control={
|
|
<Switch checked={hidden} onChange={handleHiddenChange} color="primary" />
|
|
}
|
|
label="Hidden"
|
|
/>
|
|
<FormControl component="fieldset" sx={{ mt: 1, display: 'flex' }}>
|
|
<FormLabel component="legend">Direction</FormLabel>
|
|
<RadioGroup
|
|
aria-label="direction"
|
|
name="direction"
|
|
value={direction}
|
|
onChange={handleDirectionChange}
|
|
row
|
|
>
|
|
<FormControlLabel value="up" control={<Radio />} label="Up" />
|
|
<FormControlLabel value="right" control={<Radio />} label="Right" />
|
|
<FormControlLabel value="down" control={<Radio />} label="Down" />
|
|
<FormControlLabel value="left" control={<Radio />} label="Left" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
<Box sx={{ position: 'relative', mt: 3, height: 320 }}>
|
|
<StyledSpeedDial
|
|
ariaLabel="SpeedDial playground example"
|
|
hidden={hidden}
|
|
icon={<SpeedDialIcon />}
|
|
direction={direction}
|
|
>
|
|
{actions.map((action) => (
|
|
<SpeedDialAction
|
|
key={action.name}
|
|
icon={action.icon}
|
|
slotProps={{
|
|
tooltip: {
|
|
title: action.name,
|
|
},
|
|
}}
|
|
/>
|
|
))}
|
|
</StyledSpeedDial>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|