danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

space fit

Browse Source
This commit is contained in:
hamid zarghami
2026-06-15 15:08:55 +03:30
parent c3afcda135
commit 6f729938c0
3 changed files with 41 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Main)/components/CategoryScroll.tsx
+7 -42
View File
@@ -19,17 +19,7 @@ const SVG_MASK_STYLE = {
WebkitMaskPosition: "center",
} as const;
function CategoryImage({
src,
size,
alt,
tintWithPrimary = true,
}: {
src: string;
size: number;
alt: string;
tintWithPrimary?: boolean;
}) {
function CategoryImage({ src, size, alt, tintWithPrimary = true }: { src: string; size: number; alt: string; tintWithPrimary?: boolean }) {
const isSvg = src.endsWith(".svg");
const shouldUseSvgMask = isSvg && tintWithPrimary;
@@ -93,29 +83,15 @@ type Props = {
className?: string;
};
const CategoryScroll = ({
categories,
selectedCategory,
onSelect,
variant = "large",
className,
}: Props) => {
const CategoryScroll = ({ categories, selectedCategory, onSelect, variant = "large", className }: Props) => {
const segment = usePathname()?.split("/").filter(Boolean)[0];
const usesColoredSvg =
segment != null &&
COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
const usesColoredSvg = segment != null && COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
const { renderer: Renderer, imageSize } = variantConfig[variant];
const handleSelect = (categoryId: string) => () => onSelect(categoryId);
return (
<HorizontalScrollView
className={clsx(
"w-full noscrollbar py-4!",
variant === "large" && "mt-4!",
className,
)}
>
<HorizontalScrollView className={clsx("w-full noscrollbar py-2!", variant === "large" && "mt-3!", className)}>
{/* <Renderer
key="all"
className={clsx(selectedCategory === "0" && "bg-container!")}
@@ -134,20 +110,9 @@ const CategoryScroll = ({
const isSelected = item.id === selectedCategory;
return (
<Renderer
key={item.id}
className={clsx(isSelected && "bg-container!")}
onClick={handleSelect(item.id)}
>
<CategoryImage
src={item.avatarUrl || "/assets/images/food-image.png"}
size={imageSize}
alt="category image"
tintWithPrimary={!usesColoredSvg}
/>
<span className="text-xs text-foreground text-center">
{item.title}
</span>
<Renderer key={item.id} className={clsx(isSelected && "bg-container!")} onClick={handleSelect(item.id)}>
<CategoryImage src={item.avatarUrl || "/assets/images/food-image.png"} size={imageSize} alt="category image" tintWithPrimary={!usesColoredSvg} />
<span className="text-xs text-foreground text-center">{item.title}</span>
</Renderer>
);
})}
src/app/[name]/(Main)/components/MenuIndex.tsx
+30 -126
View File
@@ -18,22 +18,13 @@ import { useTranslation } from "react-i18next";
import { useGetCategories, useGetFoods } from "../hooks/useMenuData";
import type { Category, Food } from "../types/Types";
const sortings = [
"PopularityDescending",
"RateDescending",
"PriceAscending",
"PriceDescending",
] as const;
const sortings = ["PopularityDescending", "RateDescending", "PriceAscending", "PriceDescending"] as const;
const MenuIndex = () => {
const { data: foodsData, isLoading: foodsLoading } = useGetFoods();
const { data: categoriesData, isLoading: categoriesLoading } =
useGetCategories();
const { data: categoriesData, isLoading: categoriesLoading } = useGetCategories();
const foods = useMemo<Food[]>(() => foodsData?.data || [], [foodsData?.data]);
const categories = useMemo<Category[]>(
() => categoriesData?.data || [],
[categoriesData?.data],
);
const categories = useMemo<Category[]>(() => categoriesData?.data || [], [categoriesData?.data]);
const isLoading = foodsLoading || categoriesLoading;
const { t: tCommon } = useTranslation("common");
@@ -45,19 +36,11 @@ const MenuIndex = () => {
const [selectedCategory, setSelectedCategory] = useQueryState("category", {
defaultValue: "0",
});
const [selectedIngredients, setSelectedIngredients] = useQueryState(
"ingredients",
{ defaultValue: "" },
);
const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState(
"delivery",
{ defaultValue: "0" },
);
const smallCategoriesRef: React.RefObject<HTMLDivElement | null> =
useRef(null);
const [selectedIngredients, setSelectedIngredients] = useQueryState("ingredients", { defaultValue: "" });
const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState("delivery", { defaultValue: "0" });
const smallCategoriesRef: React.RefObject<HTMLDivElement | null> = useRef(null);
const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
const [smallCategoriesVisible, setSmallCategoriesVisibility] =
useState(false);
const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
const [isInitialMount, setIsInitialMount] = useState(true);
useEffect(() => {
@@ -68,13 +51,7 @@ const MenuIndex = () => {
setSorting(null);
setIsInitialMount(false);
}
}, [
isInitialMount,
setSearch,
setSelectedIngredients,
setSelectedDeliveryId,
setSorting,
]);
}, [isInitialMount, setSearch, setSelectedIngredients, setSelectedDeliveryId, setSorting]);
useEffect(() => {
if (categoriesData?.data && selectedCategory === "0") {
@@ -92,9 +69,7 @@ const MenuIndex = () => {
const handleScroll = () => {
if (!smallCategoriesRef.current) return;
setSmallCategoriesVisibility(
scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop,
);
setSmallCategoriesVisibility(scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop);
};
scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
@@ -122,9 +97,7 @@ const MenuIndex = () => {
const sortingIndex = Number(sorting);
const activeSortingIndex = Number.isNaN(sortingIndex) ? 0 : sortingIndex;
const activeSortingKey = sortings[activeSortingIndex] ?? sortings[0];
const activeSortingLabel = tMenu(
`MenuSortingDrawer.Options.${activeSortingKey}`,
);
const activeSortingLabel = tMenu(`MenuSortingDrawer.Options.${activeSortingKey}`);
const changeSorting = (index: number) => {
setSorting(() => String(index));
@@ -148,43 +121,26 @@ const MenuIndex = () => {
const filteredReceiptItems = useMemo(() => {
if (!foods.length) return [];
const lowerSearch = search.toLowerCase();
const lowerIngredients = selectedIngredients
? selectedIngredients.toLowerCase()
: "";
const lowerIngredients = selectedIngredients ? selectedIngredients.toLowerCase() : "";
const selectedCatId = selectedCategory === "0" ? null : selectedCategory;
const filtered = foods.filter((item) => {
const matchesCategory = !selectedCatId || item.category === selectedCatId;
const itemName = item.title;
const matchesSearch =
!search || itemName.toLowerCase().includes(lowerSearch);
const matchesSearch = !search || itemName.toLowerCase().includes(lowerSearch);
const matchesIngredients =
!selectedIngredients ||
(() => {
if (
item.content &&
Array.isArray(item.content) &&
item.content.length > 0
) {
return item.content.some((content: string) =>
content.toLowerCase().includes(lowerIngredients),
);
if (item.content && Array.isArray(item.content) && item.content.length > 0) {
return item.content.some((content: string) => content.toLowerCase().includes(lowerIngredients));
}
return item.desc.toLowerCase().includes(lowerIngredients);
})();
const matchesDelivery =
selectedDeliveryId === "0" ||
(selectedDeliveryId === "pickup" && item.pickupServe) ||
(selectedDeliveryId === "inPlace" && item.inPlaceServe);
const matchesDelivery = selectedDeliveryId === "0" || (selectedDeliveryId === "pickup" && item.pickupServe) || (selectedDeliveryId === "inPlace" && item.inPlaceServe);
return (
matchesCategory &&
matchesSearch &&
matchesIngredients &&
matchesDelivery
);
return matchesCategory && matchesSearch && matchesIngredients && matchesDelivery;
});
const sortingKey = sortings[Number(sorting)] || sortings[0];
@@ -202,65 +158,30 @@ const MenuIndex = () => {
return 0;
}
});
}, [
selectedCategory,
search,
selectedIngredients,
selectedDeliveryId,
foods,
sorting,
]);
}, [selectedCategory, search, selectedIngredients, selectedDeliveryId, foods, sorting]);
if (isLoading) {
return <MenuSkeleton />;
}
return (
<div
className="flex flex-col gap-4 items-center pt-8 mb-8"
ref={wrapperRef}
>
<div className="flex flex-col gap-4 items-center pt-5 mb-8" ref={wrapperRef}>
<div className="w-full">
<SearchBox
value={search}
placeholder={tCommon("SearchPlaceholder")}
onChange={updateSearch}
/>
<CategoryScroll
categories={categories}
selectedCategory={selectedCategory}
onSelect={updateCategory}
/>
<SearchBox value={search} placeholder={tCommon("SearchPlaceholder")} onChange={updateSearch} />
<CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} />
</div>
<section className="w-full">
<div
className="flex flex-wrap gap-2 items-center relative"
ref={smallCategoriesRef}
>
<span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">
{selectedCategory === "0"
? ""
: categories.find((c) => c.id === selectedCategory)?.title || ""}
</span>
<div className="flex flex-wrap gap-2 items-center relative" ref={smallCategoriesRef}>
<span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">{selectedCategory === "0" ? "" : categories.find((c) => c.id === selectedCategory)?.title || ""}</span>
<div className="flex min-w-[247px] flex-1 gap-2 justify-end items-center">
<button
onClick={toggleFilterModal}
className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]"
>
<button onClick={toggleFilterModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
<Candle2 className="stroke-foreground" size={16} />
<span className="text-xs leading-5 font-medium whitespace-nowrap">
{tMenu("MenuFilterDrawer.Label")}
</span>
<span className="text-xs leading-5 font-medium whitespace-nowrap">{tMenu("MenuFilterDrawer.Label")}</span>
</button>
<button
onClick={toggleSortingModal}
className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2"
>
<button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2">
<TextAlignIcon className="text-foreground" />
<span className="text-xs leading-5 font-medium whitespace-nowrap">
{activeSortingLabel}
</span>
<span className="text-xs leading-5 font-medium whitespace-nowrap">{activeSortingLabel}</span>
</button>
</div>
</div>
@@ -275,24 +196,14 @@ const MenuIndex = () => {
opacity: smallCategoriesVisible ? 1 : 0,
}}
transition={{ duration: 0.1 }}
className={clsx(
"fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20",
!smallCategoriesVisible && "pointer-events-none",
)}
className={clsx("fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20", !smallCategoriesVisible && "pointer-events-none")}
>
<CategoryScroll
categories={categories}
selectedCategory={selectedCategory}
onSelect={updateCategory}
variant="small"
/>
<CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} variant="small" />
</motion.div>
<VerticalScrollView className="mt-5! overflow-y-auto h-full">
{filteredReceiptItems.length === 0 ? (
<div className="text-center text-foreground/60 py-8">
{foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}
</div>
<div className="text-center text-foreground/60 py-8">{foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}</div>
) : (
filteredReceiptItems.map((food) => (
<MenuItemRenderer key={food.id}>
@@ -314,14 +225,7 @@ const MenuIndex = () => {
tMenu={tMenu}
/>
<MenuSortingDrawer
visible={sortingModal}
onClose={toggleSortingModal}
sortings={sortings}
activeIndex={activeSortingIndex}
onSelect={changeSorting}
tMenu={tMenu}
/>
<MenuSortingDrawer visible={sortingModal} onClose={toggleSortingModal} sortings={sortings} activeIndex={activeSortingIndex} onSelect={changeSorting} tMenu={tMenu} />
</div>
);
};
src/app/[name]/(Main)/components/MenuSkeleton.tsx
+4 -4
View File
@@ -1,12 +1,12 @@
'use client';
"use client";
import { Skeleton } from "@/components/ui/skeleton";
import VerticalScrollView from "@/components/listview/VerticalScrollView";
import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
import VerticalScrollView from "@/components/listview/VerticalScrollView";
import { Skeleton } from "@/components/ui/skeleton";
const MenuSkeleton = () => {
return (
<div className="flex flex-col gap-4 items-center pt-8 mb-8">
<div className="flex flex-col gap-4 items-center pt-5 mb-8">
<div className="w-full">
<Skeleton className="h-12 w-full rounded-xl mb-4" />
<div className="flex gap-3 overflow-x-hidden py-4">