Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-02 05:04:15 -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/>. * 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 = ({ // const SortByMenu = ({
// sortKey, // sortKey,
@ -37,7 +43,7 @@ export {}
// }) => { // }) => {
// const router = useRouter(); // const router = useRouter();
// const { t } = useTranslation("browse"); // const { t } = useTranslation("browse");
//
// return ( // return (
// <Menu // <Menu
// id="sortby-menu" // id="sortby-menu"
@ -92,68 +98,75 @@ export {}
// ); // );
// }; // };
// const BrowseSettings = ({ export const BrowseSettings = ({
// sortKey, sortKey,
// setSort, setSort,
// sortOrd, sortOrd,
// setSortOrd, setSortOrd,
// layout, layout,
// setLayout, setLayout,
// }: { }: {
// sortKey: SortBy; sortKey: SortBy;
// setSort: (sort: SortBy) => void; setSort: (sort: SortBy) => void;
// sortOrd: SortOrd; sortOrd: SortOrd;
// setSortOrd: (sort: SortOrd) => void; setSortOrd: (sort: SortOrd) => void;
// layout: Layout; layout: Layout;
// setLayout: (layout: Layout) => void; setLayout: (layout: Layout) => void;
// }) => { }) => {
// const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null); // const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
// const { t } = useTranslation("browse"); const { css } = useYoshiki();
const { t } = useTranslation();
// const switchViewTitle = return (
// layout === Layout.Grid ? t("browse.switchToList") : t("browse.switchToGrid"); <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 ( // return (
// <> // <>
// <Box sx={{ display: "flex", justifyContent: "space-around" }}> // <Box sx={{ display: "flex", justifyContent: "space-around" }}>
// <ButtonGroup sx={{ m: 1 }}> // <ButtonGroup sx={{ m: 1 }}>
// <Button disabled> // <Button disabled>
// <FilterList /> // <FilterList />
// </Button> // </Button>
// <Tooltip title={t("browse.sortby-tt")}> // <Tooltip title={t("browse.sortby-tt")}>
// <Button // <Button
// id="sortby" // id="sortby"
// aria-label={t("browse.sortby-tt")} // aria-label={t("browse.sortby-tt")}
// aria-controls={sortAnchor ? "sorby-menu" : undefined} // aria-controls={sortAnchor ? "sorby-menu" : undefined}
// aria-haspopup="true" // aria-haspopup="true"
// aria-expanded={sortAnchor ? "true" : undefined} // aria-expanded={sortAnchor ? "true" : undefined}
// onClick={(event) => setSortAnchor(event.currentTarget)} // onClick={(event) => setSortAnchor(event.currentTarget)}
// > // >
// <Sort /> // <Sort />
// {t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })} // {t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })}
// {sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />} // {sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />}
// </Button> // </Button>
// </Tooltip> // </Tooltip>
// <Tooltip title={switchViewTitle}> // </ButtonGroup>
// <Button // </Box>
// onClick={() => setLayout(layout === Layout.List ? Layout.Grid : Layout.List)} // {sortAnchor && (
// aria-label={switchViewTitle} // <SortByMenu
// > // sortKey={sortKey}
// {layout === Layout.List ? <GridView /> : <ViewList />} // sortOrd={sortOrd}
// </Button> // setSort={setSort}
// </Tooltip> // setSortOrd={setSortOrd}
// </ButtonGroup> // anchor={sortAnchor}
// </Box> // onClose={() => setSortAnchor(null)}
// {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 { ItemGrid } from "./grid";
import { ItemList } from "./list"; import { ItemList } from "./list";
import { SortBy, SortOrd, Layout } from "./types"; import { SortBy, SortOrd, Layout } from "./types";
import { BrowseSettings } from "./header";
export const itemMap = ( export const itemMap = (
item: WithLoading<LibraryItem>, item: WithLoading<LibraryItem>,
@ -80,18 +81,20 @@ export const BrowsePage: QueryPage<{ slug?: string }> = ({ slug }) => {
// TODO list header to seet sort things, filter and layout. // TODO list header to seet sort things, filter and layout.
return ( return (
<> <>
{/* <BrowseSettings */}
{/* sortKey={sortKey} */}
{/* setSort={setSort} */}
{/* sortOrd={sortOrd} */}
{/* setSortOrd={setSortOrd} */}
{/* layout={layout} */}
{/* setLayout={setLayout} */}
{/* /> */}
<InfiniteFetch <InfiniteFetch
query={query(slug, sortKey, sortOrd)} query={query(slug, sortKey, sortOrd)}
placeholderCount={15} placeholderCount={15}
layout={LayoutComponent.layout} layout={LayoutComponent.layout}
Header={
<BrowseSettings
sortKey={sortKey}
setSort={setSort}
sortOrd={sortOrd}
setSortOrd={setSortOrd}
layout={layout}
setLayout={setLayout}
/>
}
> >
{(item) => <LayoutComponent {...itemMap(item)} />} {(item) => <LayoutComponent {...itemMap(item)} />}
</InfiniteFetch> </InfiniteFetch>

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

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