use overflow menu
This commit is contained in:
parent
3fc5b1dfae
commit
f60abbe04b
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import { COLLECTION_SORT_BY } from 'constants/collection';
|
||||
import SortIcon from '@mui/icons-material/Sort';
|
||||
import CollectionSortOptions from './options';
|
||||
import OverflowMenu from 'components/OverflowMenu';
|
||||
import OverflowMenu from 'components/OverflowMenu/menu';
|
||||
|
||||
export interface CollectionSortProps {
|
||||
setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void;
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import React, { useContext } from 'react';
|
||||
import { MenuItem, ListItemIcon, ListItemText } from '@mui/material';
|
||||
import { COLLECTION_SORT_BY } from 'constants/collection';
|
||||
import TickIcon from '@mui/icons-material/Done';
|
||||
import { CollectionSortProps } from '.';
|
||||
import { OverflowMenuContext } from 'contexts/overflowMenu';
|
||||
import { OverflowMenuOption } from 'components/OverflowMenu/option';
|
||||
|
||||
const SortByOptionCreator =
|
||||
({ setCollectionSortBy, activeSortBy }: CollectionSortProps) =>
|
||||
|
@ -14,15 +14,13 @@ const SortByOptionCreator =
|
|||
setCollectionSortBy(props.sortBy);
|
||||
close();
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItem onClick={handleClick} style={{ paddingLeft: '5px' }}>
|
||||
<ListItemIcon style={{ minWidth: '25px' }}>
|
||||
{activeSortBy === props.sortBy && (
|
||||
<TickIcon sx={{ fontSize: 16 }} />
|
||||
)}
|
||||
</ListItemIcon>
|
||||
<ListItemText>{props.children}</ListItemText>
|
||||
</MenuItem>
|
||||
<OverflowMenuOption
|
||||
onClick={handleClick}
|
||||
startIcon={activeSortBy === props.sortBy && <TickIcon />}
|
||||
label={props.children}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react';
|
||||
import { MenuList } from '@mui/material';
|
||||
import { COLLECTION_SORT_BY } from 'constants/collection';
|
||||
import constants from 'utils/strings/constants';
|
||||
import SortByOptionCreator from './optionCreator';
|
||||
|
@ -9,7 +8,7 @@ export default function CollectionSortOptions(props: CollectionSortProps) {
|
|||
const SortByOption = SortByOptionCreator(props);
|
||||
|
||||
return (
|
||||
<MenuList>
|
||||
<>
|
||||
<SortByOption sortBy={COLLECTION_SORT_BY.NAME}>
|
||||
{constants.SORT_BY_NAME}
|
||||
</SortByOption>
|
||||
|
@ -22,6 +21,6 @@ export default function CollectionSortOptions(props: CollectionSortProps) {
|
|||
<SortByOption sortBy={COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING}>
|
||||
{constants.SORT_BY_UPDATION_TIME_DESCENDING}
|
||||
</SortByOption>
|
||||
</MenuList>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,22 +1,34 @@
|
|||
import React from 'react';
|
||||
import { IconButton } from '@mui/material';
|
||||
import { SpaceBetweenFlex } from 'components/Container';
|
||||
import { User } from 'types/user';
|
||||
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
|
||||
import OverflowMenu from 'components/OverflowMenu/menu';
|
||||
|
||||
import NotInterestedIcon from '@mui/icons-material/NotInterested';
|
||||
import constants from 'utils/strings/constants';
|
||||
import { OverflowMenuOption } from 'components/OverflowMenu/option';
|
||||
|
||||
interface IProps {
|
||||
sharee: User;
|
||||
collectionUnshare: (sharee: User) => void;
|
||||
}
|
||||
const ShareeRow = ({ sharee, collectionUnshare }: IProps) => (
|
||||
<SpaceBetweenFlex>
|
||||
{sharee.email}
|
||||
<IconButton
|
||||
sx={{ ml: 2, color: 'text.secondary' }}
|
||||
onClick={() => collectionUnshare(sharee)}>
|
||||
<MoreHorizIcon />
|
||||
</IconButton>
|
||||
</SpaceBetweenFlex>
|
||||
);
|
||||
const ShareeRow = ({ sharee, collectionUnshare }: IProps) => {
|
||||
const handleClick = () => collectionUnshare(sharee);
|
||||
return (
|
||||
<SpaceBetweenFlex>
|
||||
{sharee.email}
|
||||
<OverflowMenu
|
||||
ariaControls={`email-share-${sharee.email}`}
|
||||
menuTriggerIcon={<MoreHorizIcon />}>
|
||||
<OverflowMenuOption
|
||||
color="danger"
|
||||
onClick={handleClick}
|
||||
startIcon={<NotInterestedIcon />}
|
||||
label={constants.REMOVE}
|
||||
/>
|
||||
</OverflowMenu>
|
||||
</SpaceBetweenFlex>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShareeRow;
|
||||
|
|
|
@ -165,6 +165,7 @@ const darkThemeOptions = createTheme({
|
|||
fontSize: '16px',
|
||||
lineHeight: '20px',
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'none',
|
||||
},
|
||||
title: {
|
||||
fontSize: '32px',
|
||||
|
|
Loading…
Reference in a new issue