Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Header

Browse Source
This commit is contained in:
Zoe Roux 2023-03-14 11:55:36 +09:00
parent ae095b3e2c
commit 19c3f44d9a
4 changed files with 100 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
front/packages/ui/src/browse/header.tsx
View File

@ -18,7 +18,13 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
export {}
import { IconButton, tooltip, ts } from "@kyoo/primitives";
import { View } from "moti";
import { useTranslation } from "react-i18next";
import { useYoshiki } from "yoshiki/native";
import GridView from "@material-symbols/svg-400/rounded/grid_view.svg";
import ViewList from "@material-symbols/svg-400/rounded/view_list.svg";
import { Layout, SortBy, SortOrd } from "./types";
// const SortByMenu = ({
// sortKey,
@ -37,7 +43,7 @@ export {}
// }) => {
// const router = useRouter();
// const { t } = useTranslation("browse");
//
// return (
// <Menu
// id="sortby-menu"
@ -92,68 +98,75 @@ export {}
// );
// };
// const BrowseSettings = ({
// sortKey,
// setSort,
// sortOrd,
// setSortOrd,
// layout,
// setLayout,
// }: {
// sortKey: SortBy;
// setSort: (sort: SortBy) => void;
// sortOrd: SortOrd;
// setSortOrd: (sort: SortOrd) => void;
// layout: Layout;
// setLayout: (layout: Layout) => void;
// }) => {
// const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
// const { t } = useTranslation("browse");
export const BrowseSettings = ({
sortKey,
setSort,
sortOrd,
setSortOrd,
layout,
setLayout,
}: {
sortKey: SortBy;
setSort: (sort: SortBy) => void;
sortOrd: SortOrd;
setSortOrd: (sort: SortOrd) => void;
layout: Layout;
setLayout: (layout: Layout) => void;
}) => {
// const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
const { css } = useYoshiki();
const { t } = useTranslation();
// const switchViewTitle =
// layout === Layout.Grid ? t("browse.switchToList") : t("browse.switchToGrid");
return (
<View {...css({ flexDirection: "row" })}>
<IconButton
icon={GridView}
onPress={() => setLayout(Layout.Grid)}
{...tooltip(t("browse.switchToGrid"))}
{...css({ paddingX: ts(.5) })}
/>
<IconButton
icon={ViewList}
onPress={() => setLayout(Layout.List)}
{...tooltip(t("browse.switchToList"))}
{...css({ paddingX: ts(.5) })}
/>
</View>
);
// return (
// <>
// <Box sx={{ display: "flex", justifyContent: "space-around" }}>
// <ButtonGroup sx={{ m: 1 }}>
// <Button disabled>
// <FilterList />
// </Button>
// <Tooltip title={t("browse.sortby-tt")}>
// <Button
// id="sortby"
// aria-label={t("browse.sortby-tt")}
// aria-controls={sortAnchor ? "sorby-menu" : undefined}
// aria-haspopup="true"
// aria-expanded={sortAnchor ? "true" : undefined}
// onClick={(event) => setSortAnchor(event.currentTarget)}
// >
// <Sort />
// {t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })}
// {sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />}
// </Button>
// </Tooltip>
// <Tooltip title={switchViewTitle}>
// <Button
// onClick={() => setLayout(layout === Layout.List ? Layout.Grid : Layout.List)}
// aria-label={switchViewTitle}
// >
// {layout === Layout.List ? <GridView /> : <ViewList />}
// </Button>
// </Tooltip>
// </ButtonGroup>
// </Box>
// {sortAnchor && (
// <SortByMenu
// sortKey={sortKey}
// sortOrd={sortOrd}
// setSort={setSort}
// setSortOrd={setSortOrd}
// anchor={sortAnchor}
// onClose={() => setSortAnchor(null)}
// />
// )}
// </>
// );
// };
// return (
// <>
// <Box sx={{ display: "flex", justifyContent: "space-around" }}>
// <ButtonGroup sx={{ m: 1 }}>
// <Button disabled>
// <FilterList />
// </Button>
// <Tooltip title={t("browse.sortby-tt")}>
// <Button
// id="sortby"
// aria-label={t("browse.sortby-tt")}
// aria-controls={sortAnchor ? "sorby-menu" : undefined}
// aria-haspopup="true"
// aria-expanded={sortAnchor ? "true" : undefined}
// onClick={(event) => setSortAnchor(event.currentTarget)}
// >
// <Sort />
// {t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })}
// {sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />}
// </Button>
// </Tooltip>
// </ButtonGroup>
// </Box>
// {sortAnchor && (
// <SortByMenu
// sortKey={sortKey}
// sortOrd={sortOrd}
// setSort={setSort}
// setSortOrd={setSortOrd}
// anchor={sortAnchor}
// onClose={() => setSortAnchor(null)}
// />
// )}
// </>
// );
};

19
front/packages/ui/src/browse/index.tsx
View File

@ -33,6 +33,7 @@ import { InfiniteFetch } from "../fetch-infinite";
import { ItemGrid } from "./grid";
import { ItemList } from "./list";
import { SortBy, SortOrd, Layout } from "./types";
import { BrowseSettings } from "./header";
export const itemMap = (
item: WithLoading<LibraryItem>,
@ -80,18 +81,20 @@ export const BrowsePage: QueryPage<{ slug?: string }> = ({ slug }) => {
// TODO list header to seet sort things, filter and layout.
return (
<>
{/* <BrowseSettings */}
{/* sortKey={sortKey} */}
{/* setSort={setSort} */}
{/* sortOrd={sortOrd} */}
{/* setSortOrd={setSortOrd} */}
{/* layout={layout} */}
{/* setLayout={setLayout} */}
{/* /> */}
<InfiniteFetch
query={query(slug, sortKey, sortOrd)}
placeholderCount={15}
layout={LayoutComponent.layout}
Header={
<BrowseSettings
sortKey={sortKey}
setSort={setSort}
sortOrd={sortOrd}
setSortOrd={setSortOrd}
layout={layout}
setLayout={setLayout}
/>
}
>
{(item) => <LayoutComponent {...itemMap(item)} />}
</InfiniteFetch>

2
front/packages/ui/src/fetch-infinite.tsx
View File

@ -47,7 +47,7 @@ export const InfiniteFetch = <Data,>({
empty?: string | JSX.Element;
suspense?: boolean;
divider?: boolean | ComponentType;
Header?: ComponentType<{ children: JSX.Element }>;
Header?: ComponentType<{ children: JSX.Element }> | ReactElement;
}): JSX.Element | null => {
if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");

12
front/packages/ui/src/fetch-infinite.web.tsx
View File

@ -109,7 +109,7 @@ export const InfiniteFetch = <Data,>({
) => ReactElement | null;
empty?: string | JSX.Element;
divider?: boolean | ComponentType;
Header?: ComponentType<{ children: JSX.Element }>;
Header?: ComponentType<{ children: JSX.Element }> | ReactElement;
}): JSX.Element | null => {
if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
@ -148,5 +148,13 @@ export const InfiniteFetch = <Data,>({
</InfiniteScroll>
);
return Header ? <Header>{list}</Header> : list;
if (!Header) return list;
return typeof Header === "function" ? (
<Header>{list}</Header>
) : (
<>
{Header}
{list}
</>
);
};