You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.9 KiB
75 lines
1.9 KiB
import React, { useCallback, useEffect, useState } from 'react';
|
|
import Modal from 'Components/Modal/Modal';
|
|
import usePrevious from 'Helpers/Hooks/usePrevious';
|
|
import { sizes } from 'Helpers/Props';
|
|
import translate from 'Utilities/String/translate';
|
|
import InteractiveImportSelectFolderModalContent from './Folder/InteractiveImportSelectFolderModalContent';
|
|
import InteractiveImportModalContent from './Interactive/InteractiveImportModalContent';
|
|
|
|
interface InteractiveImportModalProps {
|
|
isOpen: boolean;
|
|
folder?: string;
|
|
downloadId?: string;
|
|
modalTitle?: string;
|
|
onModalClose(): void;
|
|
}
|
|
|
|
function InteractiveImportModal(props: InteractiveImportModalProps) {
|
|
const {
|
|
isOpen,
|
|
folder,
|
|
downloadId,
|
|
modalTitle = translate('ManualImport'),
|
|
onModalClose,
|
|
...otherProps
|
|
} = props;
|
|
|
|
const [folderPath, setFolderPath] = useState<string | undefined>(folder);
|
|
const previousIsOpen = usePrevious(isOpen);
|
|
|
|
const onFolderSelect = useCallback(
|
|
(path: string) => {
|
|
setFolderPath(path);
|
|
},
|
|
[setFolderPath]
|
|
);
|
|
|
|
useEffect(() => {
|
|
setFolderPath(folder);
|
|
}, [folder, setFolderPath]);
|
|
|
|
useEffect(() => {
|
|
if (previousIsOpen && !isOpen) {
|
|
setFolderPath(folder);
|
|
}
|
|
}, [folder, previousIsOpen, isOpen, setFolderPath]);
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
size={sizes.EXTRA_EXTRA_LARGE}
|
|
closeOnBackgroundClick={false}
|
|
onModalClose={onModalClose}
|
|
>
|
|
{folderPath || downloadId ? (
|
|
<InteractiveImportModalContent
|
|
{...otherProps}
|
|
folder={folderPath}
|
|
downloadId={downloadId}
|
|
modalTitle={modalTitle}
|
|
onModalClose={onModalClose}
|
|
/>
|
|
) : (
|
|
<InteractiveImportSelectFolderModalContent
|
|
{...otherProps}
|
|
modalTitle={modalTitle}
|
|
onFolderSelect={onFolderSelect}
|
|
onModalClose={onModalClose}
|
|
/>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default InteractiveImportModal;
|