213 lines
5.9 KiB
TypeScript
213 lines
5.9 KiB
TypeScript
import { PromptComponent } from '@/components/Promptbar/Prompt';
|
|
import { Folder } from '@/types/folder';
|
|
import { Prompt } from '@/types/prompt';
|
|
import {
|
|
IconCaretDown,
|
|
IconCaretRight,
|
|
IconCheck,
|
|
IconPencil,
|
|
IconTrash,
|
|
IconX,
|
|
} from '@tabler/icons-react';
|
|
import { FC, KeyboardEvent, useEffect, useState } from 'react';
|
|
|
|
interface Props {
|
|
searchTerm: string;
|
|
prompts: Prompt[];
|
|
currentFolder: Folder;
|
|
onDeleteFolder: (folder: string) => void;
|
|
onUpdateFolder: (folder: string, name: string) => void;
|
|
// prompt props
|
|
onDeletePrompt: (prompt: Prompt) => void;
|
|
onUpdatePrompt: (prompt: Prompt) => void;
|
|
}
|
|
|
|
export const PromptFolder: FC<Props> = ({
|
|
searchTerm,
|
|
prompts,
|
|
currentFolder,
|
|
onDeleteFolder,
|
|
onUpdateFolder,
|
|
// prompt props
|
|
onDeletePrompt,
|
|
onUpdatePrompt,
|
|
}) => {
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
const [isRenaming, setIsRenaming] = useState(false);
|
|
const [renameValue, setRenameValue] = useState('');
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
handleRename();
|
|
}
|
|
};
|
|
|
|
const handleRename = () => {
|
|
onUpdateFolder(currentFolder.id, renameValue);
|
|
setRenameValue('');
|
|
setIsRenaming(false);
|
|
};
|
|
|
|
const handleDrop = (e: any, folder: Folder) => {
|
|
if (e.dataTransfer) {
|
|
setIsOpen(true);
|
|
|
|
const prompt = JSON.parse(e.dataTransfer.getData('prompt'));
|
|
|
|
const updatedPrompt = {
|
|
...prompt,
|
|
folderId: folder.id,
|
|
};
|
|
|
|
onUpdatePrompt(updatedPrompt);
|
|
|
|
e.target.style.background = 'none';
|
|
}
|
|
};
|
|
|
|
const allowDrop = (e: any) => {
|
|
e.preventDefault();
|
|
};
|
|
|
|
const highlightDrop = (e: any) => {
|
|
e.target.style.background = '#343541';
|
|
};
|
|
|
|
const removeHighlight = (e: any) => {
|
|
e.target.style.background = 'none';
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isRenaming) {
|
|
setIsDeleting(false);
|
|
} else if (isDeleting) {
|
|
setIsRenaming(false);
|
|
}
|
|
}, [isRenaming, isDeleting]);
|
|
|
|
useEffect(() => {
|
|
if (searchTerm) {
|
|
setIsOpen(true);
|
|
} else {
|
|
setIsOpen(false);
|
|
}
|
|
}, [searchTerm]);
|
|
|
|
return (
|
|
<>
|
|
<div className="relative flex items-center">
|
|
{isRenaming ? (
|
|
<div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
|
|
{isOpen ? (
|
|
<IconCaretDown size={18} />
|
|
) : (
|
|
<IconCaretRight size={18} />
|
|
)}
|
|
<input
|
|
className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"
|
|
type="text"
|
|
value={renameValue}
|
|
onChange={(e) => setRenameValue(e.target.value)}
|
|
onKeyDown={handleEnterDown}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
) : (
|
|
<button
|
|
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90`}
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
onDrop={(e) => handleDrop(e, currentFolder)}
|
|
onDragOver={allowDrop}
|
|
onDragEnter={highlightDrop}
|
|
onDragLeave={removeHighlight}
|
|
>
|
|
{isOpen ? (
|
|
<IconCaretDown size={18} />
|
|
) : (
|
|
<IconCaretRight size={18} />
|
|
)}
|
|
|
|
<div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
|
|
{currentFolder.name}
|
|
</div>
|
|
</button>
|
|
)}
|
|
|
|
{(isDeleting || isRenaming) && (
|
|
<div className="absolute right-1 z-10 flex text-gray-300">
|
|
<button
|
|
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
|
|
if (isDeleting) {
|
|
onDeleteFolder(currentFolder.id);
|
|
} else if (isRenaming) {
|
|
handleRename();
|
|
}
|
|
|
|
setIsDeleting(false);
|
|
setIsRenaming(false);
|
|
}}
|
|
>
|
|
<IconCheck size={18} />
|
|
</button>
|
|
<button
|
|
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsDeleting(false);
|
|
setIsRenaming(false);
|
|
}}
|
|
>
|
|
<IconX size={18} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{!isDeleting && !isRenaming && (
|
|
<div className="absolute right-1 z-10 flex text-gray-300">
|
|
<button
|
|
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsRenaming(true);
|
|
setRenameValue(currentFolder.name);
|
|
}}
|
|
>
|
|
<IconPencil size={18} />
|
|
</button>
|
|
<button
|
|
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsDeleting(true);
|
|
}}
|
|
>
|
|
<IconTrash size={18} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{isOpen
|
|
? prompts.map((prompt, index) => {
|
|
if (prompt.folderId === currentFolder.id) {
|
|
return (
|
|
<div key={index} className="ml-5 gap-2 border-l pl-2">
|
|
<PromptComponent
|
|
prompt={prompt}
|
|
onDeletePrompt={onDeletePrompt}
|
|
onUpdatePrompt={onUpdatePrompt}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
})
|
|
: null}
|
|
</>
|
|
);
|
|
};
|