beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor and reorganise collection sort

Browse source
This commit is contained in:
Abhinav 2022-05-11 18:30:46 +05:30
parent fc7f340913
commit 3de0038def
5 changed files with 105 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/Collections/AllCollections/CollectionSort/index.tsx Normal file
View file

@ -0,0 +1,43 @@
import React, { useState } from 'react';
import { COLLECTION_SORT_BY } from 'constants/collection';
import Menu from '@mui/material/Menu';
import { IconButton, styled } from '@mui/material';
import SortIcon from '@mui/icons-material/Sort';
import CollectionSortOptions from './options';
export interface CollectionSortProps {
setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void;
activeSortBy: COLLECTION_SORT_BY;
}
const StyledMenu = styled(Menu)`
& .MuiList-root {
padding: 0;
}
`;
export default function CollectionSort(props: CollectionSortProps) {
const [sortByEl, setSortByEl] = useState(null);
const handleClose = () => setSortByEl(null);
return (
<>
<IconButton
onClick={(event) => setSortByEl(event.currentTarget)}
aria-controls={sortByEl ? 'collection-sort' : undefined}
aria-haspopup="true"
aria-expanded={sortByEl ? 'true' : undefined}>
<SortIcon />
</IconButton>
<StyledMenu
id="collection-sort"
anchorEl={sortByEl}
open={Boolean(sortByEl)}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'collection-sort',
}}>
<CollectionSortOptions {...props} close={handleClose} />
</StyledMenu>
</>
);
}

35
src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx Normal file
View file

@ -0,0 +1,35 @@
import React 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 '.';
export interface SortOptionProps extends CollectionSortProps {
close: () => void;
}
const SortByOptionCreator =
({ setCollectionSortBy, activeSortBy, close }: SortOptionProps) =>
(props: { sortBy: COLLECTION_SORT_BY; children: any }) => {
const handleClick = () => {
setCollectionSortBy(props.sortBy);
close();
};
return (
<MenuItem onClick={handleClick} style={{ paddingLeft: '5px' }}>
<ListItemIcon style={{ minWidth: '25px' }}>
{activeSortBy === props.sortBy && (
<TickIcon
css={`
height: 16px;
width: 16px;
`}
/>
)}
</ListItemIcon>
<ListItemText>{props.children}</ListItemText>
</MenuItem>
);
};
export default SortByOptionCreator;

26
src/components/Collections/AllCollections/CollectionSort/options.tsx Normal file
View file

@ -0,0 +1,26 @@
import React from 'react';
import { MenuList } from '@mui/material';
import { COLLECTION_SORT_BY } from 'constants/collection';
import constants from 'utils/strings/constants';
import SortByOptionCreator, { SortOptionProps } from './optionCreator';
export default function CollectionSortOptions(props: SortOptionProps) {
const SortByOption = SortByOptionCreator(props);
return (
<MenuList>
<SortByOption sortBy={COLLECTION_SORT_BY.NAME}>
{constants.SORT_BY_NAME}
</SortByOption>
<SortByOption sortBy={COLLECTION_SORT_BY.CREATION_TIME_DESCENDING}>
{constants.SORT_BY_CREATION_TIME_DESCENDING}
</SortByOption>
<SortByOption sortBy={COLLECTION_SORT_BY.CREATION_TIME_ASCENDING}>
{constants.SORT_BY_CREATION_TIME_ASCENDING}
</SortByOption>
<SortByOption sortBy={COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING}>
{constants.SORT_BY_UPDATION_TIME_DESCENDING}
</SortByOption>
</MenuList>
);
}

2
src/components/Collections/AllCollections/header.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import { DialogTitle, IconButton, Typography } from '@mui/material';
import { TwoScreenSpacedOptions } from 'components/Container';
import CollectionSort from 'components/pages/gallery/CollectionSort';
import CollectionSort from 'components/Collections/AllCollections/CollectionSort';
import constants from 'utils/strings/constants';
import Close from '@mui/icons-material/Close';

94
src/components/pages/gallery/CollectionSort.tsx
View file

@ -1,94 +0,0 @@
import React, { useState } from 'react';
import { COLLECTION_SORT_BY } from 'constants/collection';
import Menu from '@mui/material/Menu';
import { IconButton, MenuItem, styled } from '@mui/material';
import constants from 'utils/strings/constants';
import { ListItemIcon, ListItemText, MenuList } from '@mui/material';
import SortIcon from '@mui/icons-material/Sort';
import { default as TickIcon } from '@mui/icons-material/Done';
interface Props {
setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void;
activeSortBy: COLLECTION_SORT_BY;
}
interface OptionProps extends Props {
close: () => void;
}
const SortByOptionCreator =
({ setCollectionSortBy, activeSortBy, close }: OptionProps) =>
(props: { sortBy: COLLECTION_SORT_BY; children: any }) => {
const handleClick = () => {
setCollectionSortBy(props.sortBy);
close();
};
return (
<MenuItem onClick={handleClick} style={{ paddingLeft: '5px' }}>
<ListItemIcon style={{ minWidth: '25px' }}>
{activeSortBy === props.sortBy && (
<TickIcon
css={`
height: 16px;
width: 16px;
`}
/>
)}
</ListItemIcon>
<ListItemText>{props.children}</ListItemText>
</MenuItem>
);
};
const CollectionSortOptions = (props: OptionProps) => {
const SortByOption = SortByOptionCreator(props);
return (
<MenuList>
<SortByOption sortBy={COLLECTION_SORT_BY.NAME}>
{constants.SORT_BY_NAME}
</SortByOption>
<SortByOption sortBy={COLLECTION_SORT_BY.CREATION_TIME_DESCENDING}>
{constants.SORT_BY_CREATION_TIME_DESCENDING}
</SortByOption>
<SortByOption sortBy={COLLECTION_SORT_BY.CREATION_TIME_ASCENDING}>
{constants.SORT_BY_CREATION_TIME_ASCENDING}
</SortByOption>
<SortByOption sortBy={COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING}>
{constants.SORT_BY_UPDATION_TIME_DESCENDING}
</SortByOption>
</MenuList>
);
};
const StyledMenu = styled(Menu)`
& .MuiList-root {
padding: 0;
}
`;
export default function CollectionSort(props: Props) {
const [sortByEl, setSortByEl] = useState(null);
const handleClose = () => setSortByEl(null);
return (
<>
<IconButton
onClick={(event) => setSortByEl(event.currentTarget)}
aria-controls={sortByEl ? 'collection-sort' : undefined}
aria-haspopup="true"
aria-expanded={sortByEl ? 'true' : undefined}>
<SortIcon />
</IconButton>
<StyledMenu
id="collection-sort"
anchorEl={sortByEl}
open={Boolean(sortByEl)}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'collection-sort',
}}>
<CollectionSortOptions {...props} close={handleClose} />
</StyledMenu>
</>
);
}