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

formatting

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-11-04 15:04:59 +03:00
parent 3cd8e14288
commit 4972836164
60 changed files with 3604 additions and 2916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import React from "react";
import { cn } from "../../lib/cn";
import { checkMark, chevroneDropDownList } from "../../assets/icons/input";
import { useClickOutside } from "../../hooks/useClickOutside";
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;
@@ -18,15 +18,16 @@ interface DropDownListProps {
export const DropDownList: React.FC<DropDownListProps> = ({
// disabled = false,
className = "",
className = '',
onChange,
defaultState,
items = [{ text: "", value: "" }],
items = [{ text: '', value: '' }],
}) => {
if (items.length == 0)
items.push({ text: "", value: "" });
if (items.length == 0) items.push({ text: '', value: '' });
const [value, setValue] = React.useState<DropDownListItem>(defaultState != undefined ? defaultState : items[0]);
const [value, setValue] = React.useState<DropDownListItem>(
defaultState != undefined ? defaultState : items[0],
);
const [active, setActive] = React.useState<boolean>(false);
React.useEffect(() => onChange(value.value), [value]);
@@ -37,67 +38,73 @@ export const DropDownList: React.FC<DropDownListProps> = ({
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"
)}
<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"
)} />
<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",
)}>
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
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]"
'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]" />
}
{v.text == value.text && (
<img
src={checkMark}
className=" absolute right-[8px]"
/>
)}
</div>
)}
))}
</div>
</div>
</div>
</div>
);
};