104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import React from "react";
|
|
import { cn } from "../../lib/cn";
|
|
import { checkMark, chevroneDropDownList } from "../../assets/icons/input";
|
|
import { useClickOutside } from "../../hooks/useClickOutside";
|
|
|
|
export interface DropDownListItem {
|
|
text: string;
|
|
value: string;
|
|
}
|
|
|
|
interface DropDownListProps {
|
|
disabled?: boolean;
|
|
className?: string;
|
|
onChange: (state: string) => void;
|
|
defaultState?: DropDownListItem;
|
|
items: DropDownListItem[];
|
|
}
|
|
|
|
export const DropDownList: React.FC<DropDownListProps> = ({
|
|
// disabled = false,
|
|
className = "",
|
|
onChange,
|
|
defaultState,
|
|
items = [{ text: "", value: "" }],
|
|
}) => {
|
|
if (items.length == 0)
|
|
items.push({ text: "", value: "" });
|
|
|
|
const [value, setValue] = React.useState<DropDownListItem>(defaultState != undefined ? defaultState : items[0]);
|
|
const [active, setActive] = React.useState<boolean>(false);
|
|
|
|
React.useEffect(() => onChange(value.value), [value]);
|
|
|
|
const ref = React.useRef<HTMLDivElement>(null);
|
|
|
|
useClickOutside(ref, () => {
|
|
setActive(false);
|
|
});
|
|
|
|
|
|
return (
|
|
<div className={cn(
|
|
"relative",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
>
|
|
<div className={cn(" flex items-center h-[40px] rounded-[10px] bg-liquid-lighter px-[16px] w-[180px]",
|
|
"text-[18px] font-bold cursor-pointer select-none",
|
|
"transitin-all active:scale-95 duration-300"
|
|
)}
|
|
onClick={() => {
|
|
setActive(!active);
|
|
}
|
|
}>
|
|
{value.text}
|
|
|
|
</div>
|
|
|
|
<img src={chevroneDropDownList}
|
|
className={cn(" absolute right-[16px] h-[24px] w-[24px] top-[8.5px] rotate-0 transition-all duration-300 pointer-events-none",
|
|
active && " rotate-180"
|
|
)} />
|
|
|
|
|
|
<div
|
|
className={cn(" absolute rounded-[10px] bg-liquid-lighter w-[180px] left-0 top-[48px] z-50 transition-all duration-300",
|
|
"grid overflow-hidden",
|
|
active ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
|
|
)}>
|
|
<div className=" overflow-hidden p-[8px]">
|
|
<div className={cn(
|
|
" overflow-y-scroll max-h-[200px] thin-scrollbar pr-[8px] ",
|
|
)}>
|
|
|
|
{items.map((v, i) =>
|
|
<div
|
|
key={i}
|
|
className={cn(
|
|
"cursor-pointer h-[36px] relative transition-all duration-300",
|
|
i + 1 != items.length && "border-b-liquid-light border-b-[1px]",
|
|
"text-[16px] font-medium cursor-pointer select-none flex items-center pl-[8px]",
|
|
"hover:bg-liquid-background",
|
|
"first:rounded-t-[6px] last:rounded-b-[6px]"
|
|
)}
|
|
onClick={() => {
|
|
setValue(v);
|
|
setActive(false);
|
|
}}>
|
|
{v.text}
|
|
|
|
{v.text == value.text &&
|
|
<img src={checkMark} className=" absolute right-[8px]" />
|
|
}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
};
|