From f627368534ce3be46fac43937088bc9ce566c14e Mon Sep 17 00:00:00 2001 From: Tsu-ba-me Date: Wed, 26 Jan 2022 16:30:46 -0500 Subject: [PATCH] fix(striker-ui): clear selected files to upload when entering edit mode --- .../components/Files/FileUploadForm.tsx | 60 ++++++---- striker-ui/components/Files/Files.tsx | 103 +++++++++--------- 2 files changed, 87 insertions(+), 76 deletions(-) diff --git a/striker-ui/components/Files/FileUploadForm.tsx b/striker-ui/components/Files/FileUploadForm.tsx index fa12b843..7159d0d8 100644 --- a/striker-ui/components/Files/FileUploadForm.tsx +++ b/striker-ui/components/Files/FileUploadForm.tsx @@ -18,7 +18,7 @@ import StyledContainedButton from './StyledContainedButton'; type FileUploadFormProps = { onFileUploadComplete?: () => void; - openFilePickerEventEmitter?: EventEmitter; + eventEmitter?: EventEmitter; }; type SelectedFile = Pick< @@ -34,13 +34,13 @@ type InUploadFile = Pick & { const FILE_UPLOAD_FORM_DEFAULT_PROPS: Partial = { onFileUploadComplete: undefined, - openFilePickerEventEmitter: undefined, + eventEmitter: undefined, }; const FileUploadForm = ( { onFileUploadComplete, - openFilePickerEventEmitter, + eventEmitter, }: FileUploadFormProps = FILE_UPLOAD_FORM_DEFAULT_PROPS as FileUploadFormProps, ): JSX.Element => { const selectFileRef = useRef(); @@ -140,30 +140,28 @@ const FileUploadForm = ( }; useEffect(() => { - openFilePickerEventEmitter?.addListener('open', () => { + eventEmitter?.addListener('openFilePicker', () => { selectFileRef.current?.click(); }); - }, [openFilePickerEventEmitter]); + + eventEmitter?.addListener('clearSelectedFiles', () => { + setSelectedFiles([]); + }); + }, [eventEmitter]); return (
- :not(:first-child)': { marginTop: '1em' }, - }} - > - - - + + + + {inUploadFiles.map(({ fileName, progressValue }) => ( ))} + + :not(:first-child)': { marginTop: '1em' }, + }} + > {selectedFiles.map( ( { @@ -209,7 +215,15 @@ const FileUploadForm = ( ), )} {selectedFiles.length > 0 && ( - Upload + + Upload + )} diff --git a/striker-ui/components/Files/Files.tsx b/striker-ui/components/Files/Files.tsx index f298a10d..aaa4dac7 100644 --- a/striker-ui/components/Files/Files.tsx +++ b/striker-ui/components/Files/Files.tsx @@ -1,9 +1,14 @@ import { useEffect, useState } from 'react'; import { Box, IconButton } from '@mui/material'; -import { Add as AddIcon, Edit as EditIcon } from '@mui/icons-material'; +import { + Add as AddIcon, + Check as CheckIcon, + Edit as EditIcon, +} from '@mui/icons-material'; import { styled } from '@mui/material/styles'; import EventEmitter from 'events'; +import { BLUE } from '../../lib/consts/DEFAULT_THEME'; import ICON_BUTTON_STYLE from '../../lib/consts/ICON_BUTTON_STYLE'; import { Panel } from '../Panels'; @@ -12,22 +17,8 @@ import { HeaderText } from '../Text'; import FileList from './FileList'; import FileUploadForm from './FileUploadForm'; import FileEditForm from './FileEditForm'; -import fetchJSON from '../../lib/fetchers/fetchJSON'; - -const PREFIX = 'Files'; - -const classes = { - addFileButton: `${PREFIX}-addFileButton`, - addFileInput: `${PREFIX}-addFileInput`, -}; -const StyledDiv = styled('div')(() => ({ - [`& .${classes.addFileButton}`]: ICON_BUTTON_STYLE, - - [`& .${classes.addFileInput}`]: { - display: 'none', - }, -})); +import fetchJSON from '../../lib/fetchers/fetchJSON'; const StyledIconButton = styled(IconButton)(ICON_BUTTON_STYLE); @@ -39,13 +30,15 @@ const Files = (): JSX.Element => { ] = useState(false); const [isEditMode, setIsEditMode] = useState(false); - const openFilePickerEventEmitter: EventEmitter = new EventEmitter(); + const fileUploadFormEventEmitter: EventEmitter = new EventEmitter(); const onAddFileButtonClick = () => { - openFilePickerEventEmitter.emit('open'); + fileUploadFormEventEmitter.emit('openFilePicker'); }; const onEditFileButtonClick = () => { + fileUploadFormEventEmitter.emit('clearSelectedFiles'); + setIsEditMode(!isEditMode); }; @@ -55,21 +48,19 @@ const Files = (): JSX.Element => { elements = ; } else { const filesOverview: FileOverviewMetadata[] = rawFilesOverview.map( - ([fileUUID, fileName, fileSizeInBytes, fileType, fileChecksum]) => { - return { - fileChecksum, - fileName, - fileSizeInBytes: parseInt(fileSizeInBytes, 10), - fileType: fileType as FileType, - fileUUID, - }; - }, + ([fileUUID, fileName, fileSizeInBytes, fileType, fileChecksum]) => ({ + fileChecksum, + fileName, + fileSizeInBytes: parseInt(fileSizeInBytes, 10), + fileType: fileType as FileType, + fileUUID, + }), ); elements = isEditMode ? ( - + ) : ( - + ); } @@ -95,30 +86,36 @@ const Files = (): JSX.Element => { return ( - - - - - - - - - - - - - - - - - { - fetchRawFilesOverview(); - }} - openFilePickerEventEmitter={openFilePickerEventEmitter} - /> - {buildFileList()} - + :first-child': { flexGrow: 1 }, + '& > :not(:first-child, :last-child)': { + marginRight: '.3em', + }, + }} + > + + {!isEditMode && ( + + + + )} + + {isEditMode ? : } + + + { + fetchRawFilesOverview(); + }} + /> + {buildFileList()} ); };