LiquidCode/LiquidCode_Frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add editor lang

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-10-27 13:24:01 +03:00
parent 8fa48ef67e
commit 1690169d5a
6 changed files with 59 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/drop-down-list/DropDownList.tsx
View File

@@ -1,15 +1,16 @@
import React from "react";
import { cn } from "../../lib/cn";
import { checkMark, chevroneDropDownList } from "../../assets/icons/input";
import { useClickOutside } from "../../hooks/useClickOutside";
export interface DropDownListItem{
export interface DropDownListItem {
text: string;
value: string;
}
interface DropDownListProps {
disabled?: boolean;
className?: string;
className?: string;
onChange: (state: string) => void;
defaultState?: DropDownListItem;
items: DropDownListItem[];
@@ -20,52 +21,67 @@ export const DropDownList: React.FC<DropDownListProps> = ({
className = "",
onChange,
defaultState,
items = [{text: "", value: ""}],
items = [{ text: "", value: "" }],
}) => {
if (items.length == 0)
items.push({text: "", value: ""});
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"
"transitin-all active:scale-95 duration-300"
)}
onClick={() => setActive(!active)}>
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"
)}/>
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={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]",
" overflow-y-scroll max-h-[200px] thin-scrollbar pr-[8px] ",
)}>
{items.map((v, i) =>
<div
key={i}
className={cn(
"cursor-pointer h-[36px] relative",
"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);
@@ -73,8 +89,8 @@ export const DropDownList: React.FC<DropDownListProps> = ({
}}>
{v.text}
{v.text == value.text &&
<img src={checkMark} className=" absolute right-[8px]"/>
{v.text == value.text &&
<img src={checkMark} className=" absolute right-[8px]" />
}
</div>
)}