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>
|
|||
|
|
);
|
|||
|
|
}
|