128 lines
3.0 KiB
TypeScript
128 lines
3.0 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import { useState, useEffect } from 'react';
|
|
import { Button, Input, Textarea, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
|
|
import { FolderType, FoldersMessages } from '@/types/folder';
|
|
|
|
type Props = {
|
|
isOpen: boolean;
|
|
editingFolder: FolderType;
|
|
onCancel: () => void;
|
|
onSubmit: (name: string, detail: string) => void;
|
|
messages: FoldersMessages;
|
|
};
|
|
|
|
export default function FolderDialog({ isOpen, editingFolder, onCancel, onSubmit, messages }: Props) {
|
|
const [folderName, setFolderName] = useState({
|
|
text: editingFolder ? editingFolder.name : '',
|
|
isValid: false,
|
|
errorMessage: '',
|
|
});
|
|
|
|
const [folderDetail, setFolderDetail] = useState({
|
|
text: editingFolder ? editingFolder.detail : '',
|
|
isValid: false,
|
|
errorMessage: '',
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (editingFolder) {
|
|
setFolderName({
|
|
...folderName,
|
|
text: editingFolder.name,
|
|
});
|
|
|
|
setFolderDetail({
|
|
...folderDetail,
|
|
text: editingFolder.detail ? editingFolder.detail : '',
|
|
});
|
|
} else {
|
|
setFolderName({
|
|
...folderName,
|
|
text: '',
|
|
});
|
|
|
|
setFolderDetail({
|
|
...folderDetail,
|
|
text: '',
|
|
});
|
|
}
|
|
}, [editingFolder]);
|
|
|
|
const clear = () => {
|
|
setFolderName({
|
|
isValid: false,
|
|
text: '',
|
|
errorMessage: '',
|
|
});
|
|
setFolderDetail({
|
|
isValid: false,
|
|
text: '',
|
|
errorMessage: '',
|
|
});
|
|
};
|
|
|
|
const validate = () => {
|
|
if (!folderName.text) {
|
|
setFolderName({
|
|
text: '',
|
|
isValid: false,
|
|
errorMessage: messages.pleaseEnter,
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
onSubmit(folderName.text, folderDetail.text);
|
|
clear();
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onOpenChange={() => {
|
|
onCancel();
|
|
}}
|
|
>
|
|
<ModalContent>
|
|
<ModalHeader className="flex flex-col gap-1">{messages.folder}</ModalHeader>
|
|
<ModalBody>
|
|
<Input
|
|
type="text"
|
|
label={messages.folderName}
|
|
value={folderName.text}
|
|
isInvalid={folderName.isValid}
|
|
errorMessage={folderName.errorMessage}
|
|
onChange={(e) => {
|
|
setFolderName({
|
|
...folderName,
|
|
text: e.target.value,
|
|
});
|
|
}}
|
|
/>
|
|
<Textarea
|
|
label={messages.folderDetail}
|
|
value={folderDetail.text}
|
|
isInvalid={folderDetail.isValid}
|
|
errorMessage={folderDetail.errorMessage}
|
|
onChange={(e) => {
|
|
setFolderDetail({
|
|
...folderDetail,
|
|
text: e.target.value,
|
|
});
|
|
}}
|
|
/>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button variant="light" onPress={onCancel}>
|
|
{messages.close}
|
|
</Button>
|
|
<Button color="primary" onPress={validate}>
|
|
{editingFolder ? messages.update : messages.create}
|
|
</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
}
|