60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import Button from '@material-ui/core/Button'
|
|
import ButtonGroup from '@material-ui/core/ButtonGroup'
|
|
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
|
|
import ExpandLessOutlinedIcon from '@material-ui/icons/ExpandLessOutlined'
|
|
import ExpandMoreOutlinedIcon from '@material-ui/icons/ExpandMoreOutlined'
|
|
import CheckBoxOutlineBlankOutlinedIcon from '@material-ui/icons/CheckBoxOutlineBlankOutlined'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
'& .MuiButton-containedSizeSmall': {
|
|
padding: '4px 6px',
|
|
fontSize: '0.8rem',
|
|
},
|
|
whiteSpace: 'nowrap',
|
|
},
|
|
}),
|
|
)
|
|
|
|
export interface TreeBelowButtonsProps {
|
|
handleExpand: (event: React.MouseEvent<HTMLButtonElement>) => void
|
|
handleCollapse: (event: React.MouseEvent<HTMLButtonElement>) => void
|
|
handleDeselect?: (event: React.MouseEvent<HTMLButtonElement>) => void
|
|
}
|
|
|
|
const TreeSubButtons = (props: TreeBelowButtonsProps) => {
|
|
const { handleExpand, handleCollapse, handleDeselect } = props
|
|
const classes = useStyles()
|
|
const { t } = useTranslation()
|
|
return (
|
|
<>
|
|
<ButtonGroup
|
|
className={classes.root}
|
|
size="small"
|
|
aria-label="menu tree buttons"
|
|
variant="contained"
|
|
>
|
|
<Button onClick={handleExpand}>
|
|
<ExpandMoreOutlinedIcon fontSize="small" />
|
|
{t('menu.all_expand')}
|
|
</Button>
|
|
<Button onClick={handleCollapse}>
|
|
<ExpandLessOutlinedIcon fontSize="small" />
|
|
{t('menu.all_collapse')}
|
|
</Button>
|
|
{handleDeselect && (
|
|
<Button onClick={handleDeselect}>
|
|
<CheckBoxOutlineBlankOutlinedIcon fontSize="small" />
|
|
{t('label.button.deselect')}
|
|
</Button>
|
|
)}
|
|
</ButtonGroup>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default TreeSubButtons
|