4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Dropdown responsive working

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-29 10:53:52 +02:00
parent 07d368fae2
commit 791aeacfc4
2 changed files with 18 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss
View File

@ -30,6 +30,7 @@
overflow: visible; overflow: visible;
.content { .content {
max-height: 500px; max-height: 500px;
overflow: auto;
opacity: 1; opacity: 1;
} }
} }

81
src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx
View File

@ -1,8 +1,8 @@
import React, { useCallback, useEffect } from "react"; import React, { useEffect } from "react";
import { IBlock } from "../BlockList/Block"; import { IBlock } from "../BlockList/Block";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Typography, { ETypo, ETypoColor } from "../../Typography"; import Dropdown from "../../Dropdown";
import { ChevronDownIcon } from "@heroicons/react/24/outline"; import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption";
type IProps = { type IProps = {
blocks: IBlock[]; blocks: IBlock[];
onSelectedBlock: (block: IBlock) => void; onSelectedBlock: (block: IBlock) => void;
@ -11,72 +11,25 @@ type IProps = {
export default function DropdownNavigation({ blocks, onSelectedBlock, defaultSelectedBlock = blocks[0] }: IProps) { export default function DropdownNavigation({ blocks, onSelectedBlock, defaultSelectedBlock = blocks[0] }: IProps) {
const [selectedBlock, setSelectedBlock] = React.useState<IBlock | null>(defaultSelectedBlock ?? null); const [selectedBlock, setSelectedBlock] = React.useState<IBlock | null>(defaultSelectedBlock ?? null);
const [isDropdownOpened, setIsDropdownOpened] = React.useState<boolean>(false);
const rootRef = React.useRef<HTMLDivElement>(null);
const selectBlock = useCallback(
(id: string) => {
setIsDropdownOpened(false);
setSelectedBlock(blocks.find((folder) => folder.id === id)!);
onSelectedBlock && onSelectedBlock(blocks.find((folder) => folder.id === id)!);
},
[blocks, onSelectedBlock],
);
const handleOnClick = () => setIsDropdownOpened((prev) => !prev);
useEffect(() => {
// on click outside of root, close dropdown
const handleClickOutside = (event: MouseEvent) => {
if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
setIsDropdownOpened(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
useEffect(() => { useEffect(() => {
if (defaultSelectedBlock) setSelectedBlock(defaultSelectedBlock); if (defaultSelectedBlock) setSelectedBlock(defaultSelectedBlock);
}, [defaultSelectedBlock]); }, [defaultSelectedBlock]);
return (
<div className={classes["root"]} data-is-opened={isDropdownOpened} ref={rootRef}>
{selectedBlock && (
<>
<div className={classes["dropdown-header"]} onClick={handleOnClick}>
<div className={classes["text-container"]}>
{selectedBlock.secondaryText && (
<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
{selectedBlock.secondaryText}
</Typography>
)}
<Typography typo={ETypo.TEXT_MD_BOLD} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
{selectedBlock.primaryText}
</Typography>
</div>
<ChevronDownIcon height="24" width="24" color={`var(${ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT})`} />
</div>
{isDropdownOpened && ( return (
<div className={classes["dropdown-content"]}> <div className={classes["root"]}>
{blocks <Dropdown
.filter((block) => block.id !== selectedBlock.id) options={blocks.map((block) => {
.map((block) => ( return {
<div key={block.id} className={classes["dropdown-item"]} onClick={() => selectBlock(block.id)}> id: block.id,
{block.secondaryText && ( label: {
<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}> subtext: block.primaryText,
{block.secondaryText} text: block.secondaryText,
</Typography> },
)} } as IOption;
<Typography typo={ETypo.TEXT_MD_BOLD} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}> })}
{block.primaryText} selectedOption={selectedBlock ? { id: selectedBlock.id, label: selectedBlock.primaryText } : undefined}
</Typography> />
</div>
))}
</div>
)}
</>
)}
</div> </div>
); );
} }