add extension dropdown for image convert

2026-02-17 17:58:32 +07:00
parent fad2a525ea
commit 62b91f0ce9
6 changed files with 180 additions and 19 deletions
@@ -0,0 +1,115 @@
+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>
+	);
+}