79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
|
import React, { ReactNode, useState, useRef } from 'react';
|
||
|
|
import { useClickOutside } from '@/app/hooks/useClickOutside';
|
||
|
|
|
||
|
|
interface DropDownListProps {
|
||
|
|
children: ReactNode;
|
||
|
|
value: string | number;
|
||
|
|
callBack: (value: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ChildProps {
|
||
|
|
value?: string;
|
||
|
|
onClick?: () => void;
|
||
|
|
className?: string;
|
||
|
|
children?: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function DropDownList({ children, value, callBack }: DropDownListProps) {
|
||
|
|
const [isOpen, setIsOpen] = useState(false)
|
||
|
|
const dropdownRef = useRef<HTMLDivElement>(null)
|
||
|
|
useClickOutside(dropdownRef, () => {
|
||
|
|
setIsOpen(false);
|
||
|
|
});
|
||
|
|
|
||
|
|
const enhancedChildren = React.Children.map(children, (child, index) => {
|
||
|
|
if (React.isValidElement<ChildProps>(child)) {
|
||
|
|
const childValue = child.props.value || undefined;
|
||
|
|
|
||
|
|
return React.cloneElement<ChildProps>(child, {
|
||
|
|
onClick: () => {
|
||
|
|
callBack(childValue || "");
|
||
|
|
setIsOpen(false);
|
||
|
|
},
|
||
|
|
className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 text-[#6366f1]`,
|
||
|
|
key: index
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return child;
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative w-full" ref={dropdownRef}>
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
setIsOpen(!isOpen)
|
||
|
|
}}
|
||
|
|
className="flex items-center justify-between w-full px-4 py-2 text-sm font-medium text-[#6366f1] bg-white border-2 border-[#6366f1] rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||
|
|
>
|
||
|
|
<span className="flex items-center">
|
||
|
|
<span className="mr-2">
|
||
|
|
{value}
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
<svg
|
||
|
|
className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
fill="currentColor"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
{isOpen && (
|
||
|
|
<div className="absolute right-0 z-10 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg border-2 border-[#6366f1] focus:outline-none">
|
||
|
|
<ul
|
||
|
|
className="py-1"
|
||
|
|
role="listbox"
|
||
|
|
aria-labelledby="language-selector"
|
||
|
|
>
|
||
|
|
{enhancedChildren}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|