137 lines
3.1 KiB
JavaScript
137 lines
3.1 KiB
JavaScript
// @flow
|
|
import { makeStyles } from '@material-ui/core';
|
|
import clsx from 'clsx';
|
|
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { showOverflowDrawer } from '../../../toolbox/functions.web';
|
|
import { Icon } from '../../icons';
|
|
|
|
export type Action = {
|
|
|
|
/**
|
|
* Label used for accessibility.
|
|
*/
|
|
accessibilityLabel: string,
|
|
|
|
/**
|
|
* CSS class name used for custom styles.
|
|
*/
|
|
className?: string,
|
|
|
|
/**
|
|
* Custom icon. If used, the icon prop is ignored.
|
|
* Used to allow custom children instead of just the default icons.
|
|
*/
|
|
customIcon?: React$Node,
|
|
|
|
/**
|
|
* Id of the action container.
|
|
*/
|
|
id?: string,
|
|
|
|
/**
|
|
* Default icon for action.
|
|
*/
|
|
icon?: Function,
|
|
|
|
/**
|
|
* Click handler.
|
|
*/
|
|
onClick?: Function,
|
|
|
|
/**
|
|
* Action text.
|
|
*/
|
|
text: string
|
|
}
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* List of actions in this group.
|
|
*/
|
|
actions?: Array<Action>,
|
|
|
|
/**
|
|
* The children of the component.
|
|
*/
|
|
children?: React$Node,
|
|
};
|
|
|
|
|
|
const useStyles = makeStyles(theme => {
|
|
return {
|
|
contextMenuItemGroup: {
|
|
'&:not(:empty)': {
|
|
padding: `${theme.spacing(2)}px 0`
|
|
},
|
|
|
|
'& + &:not(:empty)': {
|
|
borderTop: `1px solid ${theme.palette.ui04}`
|
|
}
|
|
},
|
|
|
|
contextMenuItem: {
|
|
alignItems: 'center',
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
minHeight: '40px',
|
|
padding: '10px 16px',
|
|
boxSizing: 'border-box',
|
|
|
|
'& > *:not(:last-child)': {
|
|
marginRight: `${theme.spacing(3)}px`
|
|
},
|
|
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.ui04
|
|
}
|
|
},
|
|
|
|
contextMenuItemDrawer: {
|
|
padding: '12px 16px'
|
|
},
|
|
|
|
contextMenuItemIcon: {
|
|
'& svg': {
|
|
fill: theme.palette.icon01
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
const ContextMenuItemGroup = ({
|
|
actions,
|
|
children
|
|
}: Props) => {
|
|
const styles = useStyles();
|
|
const _overflowDrawer = useSelector(showOverflowDrawer);
|
|
|
|
return (
|
|
<div className = { styles.contextMenuItemGroup }>
|
|
{children}
|
|
{actions && actions.map(({ accessibilityLabel, className, customIcon, id, icon, onClick, text }) => (
|
|
<div
|
|
aria-label = { accessibilityLabel }
|
|
className = { clsx(styles.contextMenuItem,
|
|
_overflowDrawer && styles.contextMenuItemDrawer,
|
|
className
|
|
) }
|
|
id = { id }
|
|
key = { text }
|
|
onClick = { onClick }>
|
|
{customIcon ? customIcon
|
|
: icon && <Icon
|
|
className = { styles.contextMenuItemIcon }
|
|
size = { 20 }
|
|
src = { icon } />}
|
|
<span>{text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContextMenuItemGroup;
|