Skip to content

Commit

Permalink
move sorts to copy tachiyomi
Browse files Browse the repository at this point in the history 
is now in a tab along with filter ad display same as tachiyomi
  • Loading branch information
@Robonau
Robonau committed Mar 5, 2022
1 parent a50824c commit 837e55a
Showing 1 changed file with 106 additions and 111 deletions.
217 changes: 106 additions & 111 deletions src/components/library/LibraryOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@

import React, { useState } from 'react';
import FilterListIcon from '@mui/icons-material/FilterList';
import SortIcon from '@mui/icons-material/Sort';
import {
Drawer,
FormControlLabel,
Expand All @@ -30,11 +29,80 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import TabPanel from 'components/util/TabPanel';
import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';

function Options() {
function filtersTab(currentTab: number) {
const {
downloaded, setDownloaded, unread, setUnread,
} = useLibraryOptions();
const [currentTab, setCurrentTab] = useState<number>(0);
return (
<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>
);
}

function sortsTab(currentTab: number) {
const {
sorts, setSorts, sortDesc, setSortDesc,
} = useLibraryOptions();

const handleChange = (event:
React.MouseEvent<HTMLDivElement, MouseEvent>, index: string) => {
if (sorts === index) {
setSortDesc(!sortDesc);
} else { setSortDesc(false); }
setSorts(index);
};

return (
<>
<TabPanel index={1} currentIndex={currentTab}>
<Stack direction="column">
{
['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>
);
})
}
</Stack>
</TabPanel>
</>
);
}

function dispalyTab(currentTab: number) {
const { options, setOptions } = useLibraryOptionsContext();

function setContextOptions(
Expand All @@ -43,6 +111,36 @@ function Options() {
) {
setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
}
return (
<TabPanel index={2} 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>
);
}

function Options() {
const [currentTab, setCurrentTab] = useState<number>(0);

return (
<Box>
Expand All @@ -55,100 +153,18 @@ function Options() {
textColor="primary"
>
<Tab label="Filter" value={0} />
<Tab label="Display" value={1} />
<Tab label="Sort" value={1} />
<Tab label="Display" value={2} />
</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>
{filtersTab(currentTab)}
{sortsTab(currentTab)}
{dispalyTab(currentTab)}
</Box>
);
}

function SortOptions() {
const {
sorts, setSorts, sortDesc, setSortDesc,
} = useLibraryOptions();

const handleChange = (event:
React.MouseEvent<HTMLDivElement, MouseEvent>, index: string) => {
if (sorts === index) {
setSortDesc(!sortDesc);
} else { setSortDesc(false); }
setSorts(index);
};

return (
<>
{
['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>
);
})
}
</>
);
}

export default function LibraryOptions() {
const [filtersOpen, setFiltersOpen] = React.useState(false);
const [sortsOpen, setSortsOpen] = React.useState(false);
const { active } = useLibraryOptions();
return (
<>
Expand All @@ -171,27 +187,6 @@ export default function LibraryOptions() {
>
<Options />
</Drawer>

<IconButton
onClick={() => setSortsOpen(!filtersOpen)}
color={active ? 'warning' : 'default'}
>
<SortIcon />
</IconButton>

<Drawer
anchor="bottom"
open={sortsOpen}
onClose={() => setSortsOpen(false)}
PaperProps={{
style: {
maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
},
}}
>
<SortOptions />
</Drawer>

</>
);
}

0 comments on commit 837e55a

Please sign in to comment.