Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 1x 5x 5x 5x 5x 5x 5x | import { Button } from "@canonical/react-components";
import { Filters } from "@canonical/store-components";
import { Category } from "../../types";
import { useState } from "react";
import { useSearchParams } from "react-router-dom";
import platforms from "../../data/platforms";
import packageTypes from "../../data/package-types";
export const PackageFilter = ({
data,
disabled,
}: {
data?: {
total_items: number;
total_pages: number;
packages: unknown;
categories: Category[];
};
disabled: boolean;
}) => {
const [hideFilters, setHideFilters] = useState(true);
const [searchParams, setSearchParams] = useSearchParams();
const onPlatformChange = (item: string) => {
searchParams.set("platforms", item);
searchParams.delete("page");
setSearchParams(searchParams);
};
const onPackageTypeChange = (item: string) => {
searchParams.set("type", item);
searchParams.delete("page");
setSearchParams(searchParams);
};
const onCategoriesChange = (items: string[]) => {
if (items.length > 0) {
searchParams.set("categories", items.join(","));
} else {
searchParams.delete("categories");
}
searchParams.delete("page");
setSearchParams(searchParams);
};
return (
<>
<Button
className="has-icon u-hide--large p-filter-panel__toggle"
onClick={() => {
setHideFilters(false);
}}
>
<i className="p-icon--arrow-right"></i>
<span>Filters</span>
</Button>
<div
className={`p-filter-panel-overlay u-hide--large ${
hideFilters ? "u-hide--small u-hide--medium" : ""
}`}
role="button"
tabIndex={0}
onClick={() => {
setHideFilters(true);
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
setHideFilters(true);
}
}}
></div>
<div
className={`p-filter-panel ${
!hideFilters ? "p-filter-panel--expanded" : ""
}`}
>
<div className="p-filter-panel__header">
<Button
className="has-icon u-hide--large u-no-margin--bottom u-no-padding--left"
appearance="base"
onClick={() => {
setHideFilters(true);
}}
>
<i className="p-icon--chevron-down"></i>
<span>Hide filters</span>
</Button>
</div>
<div className="p-filter-panel__inner">
<Filters
categories={data?.categories || []}
selectedCategories={
searchParams.get("categories")?.split(",") || []
}
setSelectedCategories={onCategoriesChange}
platforms={platforms}
selectedPlatform={searchParams.get("platforms") || "all"}
setSelectedPlatform={onPlatformChange}
packageTypes={packageTypes}
selectedPackageType={searchParams.get("type") || "all"}
setSelectedPackageType={onPackageTypeChange}
disabled={disabled}
/>
</div>
</div>
</>
);
};
|