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

Use "Footer" to prevent fab overlapping the last item (#517)

Browse Source
This commit is contained in:
schroda
2023-12-25 21:15:31 +01:00
committed by GitHub
parent 09d1cf91e0
commit 168e8f82f6
1 changed files with 11 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/manga/ChapterList.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. * file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/ */
import { CircularProgress, Stack, styled, Tooltip } from '@mui/material'; import { Box, CircularProgress, Stack, styled, Tooltip } from '@mui/material';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import React, { ComponentProps, useMemo, useState } from 'react'; import React, { ComponentProps, useMemo, useState } from 'react';
import { Virtuoso } from 'react-virtuoso'; import { Virtuoso } from 'react-virtuoso';
@@ -310,29 +310,16 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
// 900 is the md breakpoint in MUI // 900 is the md breakpoint in MUI
overflowY: window.innerWidth < 900 ? 'visible' : 'auto', overflowY: window.innerWidth < 900 ? 'visible' : 'auto',
}} }}
totalCount={visibleChapters.length + 1} components={{ Footer: () => <Box sx={{ paddingBottom: DEFAULT_FULL_FAB_HEIGHT }} /> }}
itemContent={(index: number) => { totalCount={visibleChapters.length}
// hacky way of adding padding to the bottom of the list, so the FAB doesn't overlay the last chapter itemContent={(index: number) => (
// since I was unable to find another solution on how to achieve this
if (index === visibleChapters.length) {
return (
<div
style={{
paddingBottom: DEFAULT_FULL_FAB_HEIGHT,
}}
/>
);
}
return (
<ChapterCard <ChapterCard
{...chaptersWithMeta[index]} {...chaptersWithMeta[index]}
allChapters={chapters} allChapters={chapters}
showChapterNumber={options.showChapterNumber} showChapterNumber={options.showChapterNumber}
onSelect={() => handleSelection(index)} onSelect={() => handleSelection(index)}
/> />
); )}
}}
useWindowScroll={window.innerWidth < 900} useWindowScroll={window.innerWidth < 900}
overscan={window.innerHeight * 0.5} overscan={window.innerHeight * 0.5}
/> />