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 | 11x 83x 83x 83x 83x 2x 83x 83x 83x 2x 83x | import { useState } from "react";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { styled } from "@theme/v2/Provider";
import GiveButton from "@shared/Button/GiveButton";
import { CaretDownIcon, CaretUpIcon, XIcon } from "@phosphor-icons/react";
import ContextualMenu from "@shared/ContextualMenu/ContextualMenu";
import { useDropdownFilter } from "../hooks/useDropdownFilter";
import { DropdownFilterProps } from "../types";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
const DropdownFilter = ({
options,
queryKey,
menuWidth = 134,
searchBarProps,
isLoading,
isFetchingNextPage,
onEndReached,
onCloseEmptyState,
buttonProps,
disabled = false,
}: DropdownFilterProps) => {
const { isMobileView } = useCustomThemeV2();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const {
selectedLabel,
selectedImg,
menuOptions,
handleClear,
isFilterSelected,
showResetButton,
} = useDropdownFilter({
queryKey,
options,
});
const handleButtonClick = (e: React.MouseEvent<HTMLElement>) => {
setAnchorEl(e.currentTarget);
};
const handleClearClick = (e: React.MouseEvent<HTMLElement>) => {
e.stopPropagation();
e.preventDefault();
handleClear();
setAnchorEl(null); // Close menu if open
onCloseEmptyState?.(); //reset the filter as well
};
const EndIcon =
isFilterSelected && showResetButton ? (
<GiveIconButton
variant="ghost"
Icon={XIcon}
size="extraSmall"
onClick={handleClearClick}
/>
) : anchorEl ? (
<CaretUpIcon size={16} />
) : (
<CaretDownIcon size={16} />
);
return (
<>
<StyledButton
variant={isMobileView ? "filled" : "ghost"}
label={selectedLabel}
size="large"
onClick={handleButtonClick}
endIcon={EndIcon}
startIcon={selectedImg}
disabled={disabled}
{...buttonProps}
/>
<ContextualMenu
menuWidth={menuWidth}
handleClose={() => setAnchorEl(null)}
anchorEl={anchorEl}
color={isMobileView ? "primary" : "transparent"}
texture={isMobileView ? "solid" : "blurred"}
horizontalOrigin="left"
options={menuOptions}
searchBarProps={searchBarProps}
isLoading={isLoading}
isFetchingNextPage={isFetchingNextPage}
onEndReached={onEndReached}
emptySection="empty-search"
onCloseEmptyState={onCloseEmptyState}
/>
</>
);
};
const StyledButton = styled(GiveButton)(({ theme }) => ({
borderRadius: "40px",
whiteSpace: "nowrap",
border: "none",
[theme.breakpoints.down("v2_md")]: {
background: theme.palette.primitive?.transparent?.["darken-5"],
color: theme.palette.text.primary,
},
"&:hover": {
backgroundColor: theme.palette.primitive?.transparent?.["darken-5"],
},
}));
export default DropdownFilter;
|