Skip to content

Commit c30cd15

Browse files
jriefjrief
committed
closing dialog dismisses uploaded file
1 parent 23e5d25 commit c30cd15

File tree

3 files changed

+91
-89
lines changed

3 files changed

+91
-89
lines changed

‎client/browser/BrowserEditor.tsx‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -66,28 +66,12 @@ function EditorForm(props) {
6666
});
6767
}
6868

69-
function handleDismiss() {
70-
const changeUrl = `${settings.baseUrl}${file_info.id}/change`;
71-
fetch(changeUrl, {
72-
method: 'DELETE',
73-
headers: {
74-
'X-CSRFToken': settings.csrfToken,
75-
},
76-
}).then(async response => {
77-
if (response.ok) {
78-
settings.selectFile(null);
79-
} else {
80-
alert(response.statusText);
81-
}
82-
});
83-
}
84-
8569
return (
8670
<form>
8771
<div dangerouslySetInnerHTML={{__html: formHtml}}/>
8872
<div className="button-row">
8973
<button type="button" className="default" onClick={handleSave}>{gettext("Save")}</button>
90-
<button type="button" className="dismiss" onClick={handleDismiss}>{gettext("Dismiss")}</button>
74+
<button type="button" className="dismiss" onClick={settings.dismissAndClose}>{gettext("Dismiss Upload")}</button>
9175
</div>
9276
</form>
9377
);

‎client/browser/FileSelectDialog.tsx‎

Lines changed: 86 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React, {
2+
forwardRef,
23
lazy,
34
memo,
45
Suspense,
56
useEffect,
7+
useImperativeHandle,
68
useMemo,
79
useRef,
810
useState,
@@ -14,6 +16,7 @@ import FileUploader from '../common/FileUploader';
1416
import BrowserEditor from './BrowserEditor';
1517
import FolderStructure from './FolderStructure';
1618
import MenuBar from './MenuBar';
19+
import CloseIcon from '../icons/close.svg';
1720

1821

1922
function StaticFigure(props) {
@@ -91,19 +94,20 @@ const FilesList = memo((props: any) => {
9194
});
9295

9396

94-
export default function FileSelectDialog(props) {
95-
const {realm, baseUrl, csrfToken, selectFile} = props;
97+
const FileSelectDialog = forwardRef((props: any, forwardedRef) => {
98+
const {realm, baseUrl, csrfToken} = props;
9699
const [structure, setStructure] = useState({
97100
root_folder: null,
98101
last_folder: null,
99102
files: null,
100103
offset: null,
104+
recursive: false,
101105
search_query: '',
102106
labels: [],
103107
});
104-
const [uploadedFile, setUploadedFile] = useState(null);
105108
const ref = useRef(null);
106109
const uploaderRef = useRef(null);
110+
const [uploadedFile, setUploadedFile] = useState(null);
107111
const dialog = ref.current?.closest('dialog');
108112

109113
useEffect(() => {
@@ -112,19 +116,7 @@ export default function FileSelectDialog(props) {
112116
}
113117
}, [uploadedFile]);
114118

115-
useEffect(() => {
116-
if (!dialog) {
117-
return;
118-
}
119-
const dialogClosed = () => {
120-
setUploadedFile(null);
121-
};
122-
123-
dialog.addEventListener('close', dialogClosed);
124-
return () => {
125-
dialog.removeEventListener('close', dialogClosed);
126-
};
127-
}, [dialog]);
119+
useImperativeHandle(forwardedRef, () => ({dismissAndClose}));
128120

129121
const setCurrentFolder = (folderId) => {
130122
setStructure(prevStructure => {
@@ -230,49 +222,87 @@ export default function FileSelectDialog(props) {
230222
setUploadedFile(uploadedFiles[0]);
231223
}
232224

225+
function selectFile(fileInfo) {
226+
props.selectFile(fileInfo);
227+
setUploadedFile(null);
228+
props.closeDialog();
229+
}
230+
231+
function dismissAndClose() {
232+
if (uploadedFile?.file_info) {
233+
const changeUrl = `${baseUrl}${uploadedFile.file_info.id}/change`;
234+
fetch(changeUrl, {
235+
method: 'DELETE',
236+
headers: {
237+
'X-CSRFToken': csrfToken,
238+
},
239+
}).then(async response => {
240+
if (response.ok) {
241+
props.selectFile(null);
242+
} else {
243+
alert(response.statusText);
244+
}
245+
});
246+
}
247+
setUploadedFile(null);
248+
props.closeDialog();
249+
}
250+
233251
return (<>
234252
<div className="wrapper" ref={ref}>
235253
{uploadedFile ?
236-
<BrowserEditor
237-
uploadedFile={uploadedFile}
238-
mainContent={ref.current}
239-
settings={{csrfToken, baseUrl, selectFile, labels: structure.labels}}
240-
/> : <>
241-
<MenuBar
242-
refreshFilesList={refreshFilesList}
243-
setSearchQuery={setSearchQuery}
244-
openUploader={() => uploaderRef.current.openUploader()}
245-
labels={structure.labels}
246-
/>
247-
<div className="browser-body">
248-
<nav className="folder-structure">
249-
<ul role="navigation">
250-
{structure.root_folder && <FolderStructure
251-
baseUrl={baseUrl}
252-
folder={structure.root_folder}
253-
lastFolderId={structure.last_folder}
254-
setCurrentFolder={setCurrentFolder}
255-
refreshStructure={refreshStructure}
256-
/>}
257-
</ul>
258-
</nav>
259-
<FileUploader
260-
folderId={structure.last_folder}
261-
handleUpload={handleUpload}
262-
ref={uploaderRef}
263-
settings={{csrf_token: csrfToken, base_url: baseUrl}}
264-
>{
265-
structure.files === null ?
266-
<div className="status">{gettext("Loading files…")}</div> :
267-
<FilesList
268-
structure={structure}
269-
fetchFiles={fetchFiles}
270-
selectFile={selectFile}
254+
<BrowserEditor
255+
uploadedFile={uploadedFile}
256+
mainContent={ref.current}
257+
settings={{csrfToken, baseUrl, selectFile, dismissAndClose, labels: structure.labels}}
258+
/> : <>
259+
<MenuBar
260+
refreshFilesList={refreshFilesList}
261+
setSearchQuery={setSearchQuery}
262+
openUploader={() => uploaderRef.current.openUploader()}
263+
labels={structure.labels}
271264
/>
272-
}</FileUploader>
273-
</div>
274-
</>}
265+
<div className="browser-body">
266+
<nav className="folder-structure">
267+
<ul role="navigation">
268+
{structure.root_folder && <FolderStructure
269+
baseUrl={baseUrl}
270+
folder={structure.root_folder}
271+
lastFolderId={structure.last_folder}
272+
setCurrentFolder={setCurrentFolder}
273+
toggleRecursive={toggleRecursive}
274+
refreshStructure={refreshStructure}
275+
isListed={structure.recursive ? false : null}
276+
/>}
277+
</ul>
278+
</nav>
279+
<FileUploader
280+
folderId={structure.last_folder}
281+
handleUpload={handleUpload}
282+
ref={uploaderRef}
283+
settings={{csrf_token: csrfToken, base_url: baseUrl}}
284+
>{
285+
structure.files === null ?
286+
<div className="status">{gettext("Loading files…")}</div> :
287+
<FilesList
288+
structure={structure}
289+
fetchFiles={fetchFiles}
290+
selectFile={selectFile}
291+
/>
292+
}</FileUploader>
293+
</div>
294+
</>}
295+
</div>
296+
<div
297+
className="close-button"
298+
role="button"
299+
onClick={dismissAndClose}
300+
aria-label={gettext("Close dialog")}
301+
>
302+
<CloseIcon/>
275303
</div>
276-
<Tooltip id="django-finder-tooltip" place="bottom-start" />
304+
<Tooltip id="django-finder-tooltip" place="bottom-start"/>
277305
</>);
278-
}
306+
});
307+
308+
export default FileSelectDialog;

‎client/browser/FinderFileSelect.tsx‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, {useEffect, useRef, useState} from 'react';
22
import FileSelectDialog from './FileSelectDialog';
3-
import CloseIcon from '../icons/close.svg';
43

54

65
export default function FinderFileSelect(props) {
76
const shadowRoot = props.container;
87
const baseUrl = props['base-url'];
98
const styleUrl = props['style-url'];
109
const [selectedFile, setSelectedFile] = useState(props['selected-file']);
10+
const selectRef = useRef(null);
1111
const slotRef = useRef(null);
1212
const dialogRef = useRef(null);
1313
const csrfToken = shadowRoot.host.closest('form')?.querySelector('input[name="csrfmiddlewaretoken"]')?.value;
@@ -24,7 +24,7 @@ export default function FinderFileSelect(props) {
2424
useEffect(() => {
2525
const handleEscape = (event) => {
2626
if (event.key === 'Escape') {
27-
closeDialog();
27+
selectRef.current.dismissAndClose();
2828
}
2929
};
3030
const preventDefault = (event) => {
@@ -47,11 +47,6 @@ export default function FinderFileSelect(props) {
4747
dialogRef.current.showModal();
4848
}
4949

50-
function closeDialog() {
51-
dialogRef.current.close();
52-
dialogRef.current.dispatchEvent(new CustomEvent('close'));
53-
}
54-
5550
function removeFile() {
5651
setSelectedFile(null);
5752
const inputElement = slotRef.current.assignedElements()[0];
@@ -68,7 +63,6 @@ export default function FinderFileSelect(props) {
6863
inputElement.value = file.id;
6964
}
7065
}
71-
closeDialog();
7266
}
7367

7468
function renderTimestamp(timestamp) {
@@ -108,19 +102,13 @@ export default function FinderFileSelect(props) {
108102
</div>
109103
<dialog ref={dialogRef}>
110104
<FileSelectDialog
105+
ref={selectRef}
111106
realm={props.realm}
112107
baseUrl={baseUrl}
113108
csrfToken={csrfToken}
114109
selectFile={selectFile}
110+
closeDialog={() => dialogRef.current.close()}
115111
/>
116-
<div
117-
className="close-button"
118-
role="button"
119-
onClick={closeDialog}
120-
aria-label={gettext("Close dialog")}
121-
>
122-
<CloseIcon/>
123-
</div>
124112
</dialog>
125113
</>);
126114
}

0 commit comments

Comments
 (0)