115 lines
2.8 KiB
TypeScript
115 lines
2.8 KiB
TypeScript
import React, { ReactNode, useState, useRef } from 'react';
|
||
import { useClickOutside } from '@/app/hooks/useClickOutside';
|
||
import { SelectedFile } from './UploadSectionFile';
|
||
import { useTranslations } from 'next-intl';
|
||
|
||
interface DropDownItem {
|
||
file: SelectedFile;
|
||
convertTo: string;
|
||
}
|
||
|
||
interface DropDownListProps {
|
||
children: ReactNode;
|
||
value: string | null | undefined;
|
||
callBack: (value: DropDownItem) => void;
|
||
translatedValue?: string | null | undefined;
|
||
selectedFiles: SelectedFile[];
|
||
}
|
||
|
||
interface LiElementProps extends React.LiHTMLAttributes<HTMLLIElement> {
|
||
'data-file'?: string;
|
||
'data-convert-to'?: string;
|
||
}
|
||
|
||
export default function DropDownListForImageConvert({
|
||
children,
|
||
value,
|
||
callBack,
|
||
translatedValue,
|
||
selectedFiles
|
||
}: DropDownListProps) {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||
const t = useTranslations('Global')
|
||
|
||
useClickOutside(dropdownRef,
|
||
() => {
|
||
setIsOpen(false);
|
||
},
|
||
isOpen
|
||
);
|
||
|
||
const getDisplayValue = (): string => {
|
||
if (translatedValue) return translatedValue;
|
||
return value ? value : t('do-not-convert');
|
||
};
|
||
|
||
const findFileByName = (fileName: string): SelectedFile | undefined => {
|
||
return selectedFiles.find(file => file.name === fileName);
|
||
};
|
||
|
||
const enhancedChildren = React.Children.map(children, (child, index) => {
|
||
if (React.isValidElement<LiElementProps>(child)) {
|
||
const fileName = child.props['data-file'];
|
||
const convertTo = child.props['data-convert-to'];
|
||
|
||
const isCurrent = value === convertTo;
|
||
|
||
return React.cloneElement(child, {
|
||
onClick: () => {
|
||
if (fileName && convertTo) {
|
||
const file = findFileByName(fileName);
|
||
if (file) {
|
||
callBack({ file, convertTo });
|
||
} else {
|
||
console.error(`Файл с именем ${fileName} не найден`);
|
||
}
|
||
setIsOpen(false);
|
||
}
|
||
},
|
||
className: `dropdown-item ${isCurrent ? "current" : ""}`,
|
||
key: index,
|
||
});
|
||
}
|
||
return child;
|
||
});
|
||
|
||
return (
|
||
<div className="dropdown-wrapper" ref={dropdownRef}>
|
||
<button
|
||
onClick={() => {
|
||
setIsOpen(!isOpen);
|
||
}}
|
||
className="dropdown-button"
|
||
>
|
||
<span className="flex items-center">
|
||
<span className="mr-2">
|
||
{getDisplayValue()}
|
||
</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="dropdown-list">
|
||
<ul
|
||
className=""
|
||
role="listbox"
|
||
>
|
||
{enhancedChildren}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
} |