ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update LibraryOptions.tsx (#146)

Browse Source
This commit is contained in:
robo
2022-03-04 11:11:46 +00:00
committed by GitHub
parent 9c512b2a95
commit bdd03f6698
1 changed files with 38 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/components/library/LibraryOptions.tsx
View File

@@ -6,101 +6,26 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import React, { useState } from 'react';
import React from 'react';
import FilterListIcon from '@mui/icons-material/FilterList';
import SortIcon from '@mui/icons-material/Sort';
import {
Drawer,
FormControlLabel,
IconButton,
Tabs,
Tab,
Box,
Stack,
Checkbox,
Radio,
Switch,
Drawer, FormControlLabel, IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText,
} from '@mui/material';
import useLibraryOptions from 'util/useLibraryOptions';
import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
import TabPanel from 'components/util/TabPanel';
import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
import SortIcon from '@mui/icons-material/Sort';
import { Box } from '@mui/system';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
function Options() {
const {
downloaded, setDownloaded, unread, setUnread,
} = useLibraryOptions();
const [currentTab, setCurrentTab] = useState<number>(0);
const { options, setOptions } = useLibraryOptionsContext();
function setContextOptions(
e: React.ChangeEvent<HTMLInputElement>,
checked: boolean,
) {
setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
}
return (
<Box>
<Tabs
key={currentTab}
value={currentTab}
variant="fullWidth"
onChange={(e, newTab) => setCurrentTab(newTab)}
indicatorColor="primary"
textColor="primary"
>
<Tab label="Filter" value={0} />
<Tab label="Display" value={1} />
</Tabs>
<TabPanel index={0} currentIndex={currentTab}>
<Stack direction="column">
<FormControlLabel
control={(
<ThreeStateCheckbox
name="Unread"
checked={unread}
onChange={setUnread}
/>
)}
label="Unread"
/>
<FormControlLabel
control={(
<ThreeStateCheckbox
name="Downloaded"
checked={downloaded}
onChange={setDownloaded}
/>
)}
label="Downloaded"
/>
</Stack>
</TabPanel>
<TabPanel index={1} currentIndex={currentTab}>
<Stack direction="column">
<FormControlLabel
label="Unread Badges"
control={(
<Checkbox
name="showUnreadBadge"
checked={options.showUnreadBadge}
onChange={setContextOptions}
/>
)}
/>
<FormControlLabel
label="Download Badges"
control={(
<Checkbox
name="showDownloadBadge"
checked={options.showDownloadBadge}
onChange={setContextOptions}
/>
)}
/>
</Stack>
</TabPanel>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={unread} onChange={setUnread} />} label="Unread" />
<FormControlLabel control={<ThreeStateCheckbox name="Downloaded" checked={downloaded} onChange={setDownloaded} />} label="Downloaded" />
</Box>
);
}
@@ -110,58 +35,35 @@ function SortOptions() {
sorts, setSorts, sortDesc, setSortDesc,
} = useLibraryOptions();
const handleSortChange = (name: string) => (event: { target: { checked: boolean } }) => {
setSorts(event.target.checked ? name : undefined);
};
const handleOrderChange = () => (event: { target: { checked: boolean } }) => {
setSortDesc(event.target.checked);
const handleChange = (event:
React.MouseEvent<HTMLDivElement, MouseEvent>, index: string) => {
if (sorts === index) {
setSortDesc(!sortDesc);
} else { setSortDesc(false); }
setSorts(index);
};
return (
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<FormControlLabel
control={(
<Switch
name="sortDesc"
checked={sortDesc === true}
onChange={handleOrderChange()}
color="default"
/>
)}
label="Asc/Desc"
/>
<FormControlLabel
control={(
<Radio
name="sortToRead"
checked={sorts === 'sortToRead'}
onChange={handleSortChange('sortToRead')}
/>
)}
label="Sort by left to read"
/>
<FormControlLabel
control={(
<Radio
name="sortAlph"
checked={sorts === 'sortAlph'}
onChange={handleSortChange('sortAlph')}
/>
)}
label="Sort alphbetical"
/>
<FormControlLabel
control={(
<Radio
name="sortID"
checked={sorts === 'sortID' || sorts === undefined}
onChange={handleSortChange('sortID')}
/>
)}
label="Sort by ID"
/>
</Box>
<>
{
['sortToRead', 'sortAlph', 'sortID'].map((e) => {
let icon;
if (sorts === e) {
icon = !sortDesc ? (<ArrowUpwardIcon color="primary" />)
: (<ArrowDownwardIcon color="primary" />);
}
icon = icon === undefined && sortDesc === undefined && e === 'sortID' ? (<ArrowDownwardIcon color="primary" />) : icon;
return (
<ListItem disablePadding>
<ListItemButton onClick={(event) => handleChange(event, e)}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={e} />
</ListItemButton>
</ListItem>
);
})
}
</>
);
}
@@ -184,10 +86,7 @@ export default function LibraryOptions() {
onClose={() => setFiltersOpen(false)}
PaperProps={{
style: {
maxWidth: 600,
padding: '1em',
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
},
}}
>
@@ -207,15 +106,13 @@ export default function LibraryOptions() {
onClose={() => setSortsOpen(false)}
PaperProps={{
style: {
maxWidth: 600,
padding: '1em',
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
},
}}
>
<SortOptions />
</Drawer>
</>
);
}