mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2026-02-17 13:52:14 +01:00
# Description of Changes <!-- Please provide a summary of the changes, including: Rewrite of page editor to make it work properly. Added page breaks Added merged file support Added "insert file" support Slight Ux improvements Closes #(issue_number) --> --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --------- Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
110 lines
4.0 KiB
TypeScript
110 lines
4.0 KiB
TypeScript
import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';
|
|
import { useFileHandler } from '../hooks/useFileHandler';
|
|
import { FileMetadata } from '../types/file';
|
|
|
|
interface FilesModalContextType {
|
|
isFilesModalOpen: boolean;
|
|
openFilesModal: (options?: { insertAfterPage?: number; customHandler?: (files: File[], insertAfterPage?: number) => void }) => void;
|
|
closeFilesModal: () => void;
|
|
onFileSelect: (file: File) => void;
|
|
onFilesSelect: (files: File[]) => void;
|
|
onStoredFilesSelect: (filesWithMetadata: Array<{ file: File; originalId: string; metadata: FileMetadata }>) => void;
|
|
onModalClose?: () => void;
|
|
setOnModalClose: (callback: () => void) => void;
|
|
}
|
|
|
|
const FilesModalContext = createContext<FilesModalContextType | null>(null);
|
|
|
|
export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const { addToActiveFiles, addMultipleFiles, addStoredFiles } = useFileHandler();
|
|
const [isFilesModalOpen, setIsFilesModalOpen] = useState(false);
|
|
const [onModalClose, setOnModalClose] = useState<(() => void) | undefined>();
|
|
const [insertAfterPage, setInsertAfterPage] = useState<number | undefined>();
|
|
const [customHandler, setCustomHandler] = useState<((files: File[], insertAfterPage?: number) => void) | undefined>();
|
|
|
|
const openFilesModal = useCallback((options?: { insertAfterPage?: number; customHandler?: (files: File[], insertAfterPage?: number) => void }) => {
|
|
setInsertAfterPage(options?.insertAfterPage);
|
|
setCustomHandler(() => options?.customHandler);
|
|
setIsFilesModalOpen(true);
|
|
}, []);
|
|
|
|
const closeFilesModal = useCallback(() => {
|
|
setIsFilesModalOpen(false);
|
|
setInsertAfterPage(undefined); // Clear insertion position
|
|
setCustomHandler(undefined); // Clear custom handler
|
|
onModalClose?.();
|
|
}, [onModalClose]);
|
|
|
|
const handleFileSelect = useCallback((file: File) => {
|
|
if (customHandler) {
|
|
// Use custom handler for special cases (like page insertion)
|
|
customHandler([file], insertAfterPage);
|
|
} else {
|
|
// Use normal file handling
|
|
addToActiveFiles(file);
|
|
}
|
|
closeFilesModal();
|
|
}, [addToActiveFiles, closeFilesModal, insertAfterPage, customHandler]);
|
|
|
|
const handleFilesSelect = useCallback((files: File[]) => {
|
|
if (customHandler) {
|
|
// Use custom handler for special cases (like page insertion)
|
|
customHandler(files, insertAfterPage);
|
|
} else {
|
|
// Use normal file handling
|
|
addMultipleFiles(files);
|
|
}
|
|
closeFilesModal();
|
|
}, [addMultipleFiles, closeFilesModal, insertAfterPage, customHandler]);
|
|
|
|
const handleStoredFilesSelect = useCallback((filesWithMetadata: Array<{ file: File; originalId: string; metadata: FileMetadata }>) => {
|
|
if (customHandler) {
|
|
// Use custom handler for special cases (like page insertion)
|
|
const files = filesWithMetadata.map(item => item.file);
|
|
customHandler(files, insertAfterPage);
|
|
} else {
|
|
// Use normal file handling
|
|
addStoredFiles(filesWithMetadata);
|
|
}
|
|
closeFilesModal();
|
|
}, [addStoredFiles, closeFilesModal, insertAfterPage, customHandler]);
|
|
|
|
const setModalCloseCallback = useCallback((callback: () => void) => {
|
|
setOnModalClose(() => callback);
|
|
}, []);
|
|
|
|
const contextValue: FilesModalContextType = useMemo(() => ({
|
|
isFilesModalOpen,
|
|
openFilesModal,
|
|
closeFilesModal,
|
|
onFileSelect: handleFileSelect,
|
|
onFilesSelect: handleFilesSelect,
|
|
onStoredFilesSelect: handleStoredFilesSelect,
|
|
onModalClose,
|
|
setOnModalClose: setModalCloseCallback,
|
|
}), [
|
|
isFilesModalOpen,
|
|
openFilesModal,
|
|
closeFilesModal,
|
|
handleFileSelect,
|
|
handleFilesSelect,
|
|
handleStoredFilesSelect,
|
|
onModalClose,
|
|
setModalCloseCallback,
|
|
]);
|
|
|
|
return (
|
|
<FilesModalContext.Provider value={contextValue}>
|
|
{children}
|
|
</FilesModalContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useFilesModalContext = () => {
|
|
const context = useContext(FilesModalContext);
|
|
if (!context) {
|
|
throw new Error('useFilesModalContext must be used within FilesModalProvider');
|
|
}
|
|
return context;
|
|
};
|