sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Only render the modal when needed

This commit is contained in:
Dane Everitt 2020-07-11 16:49:46 -07:00
parent 80ecd58b30
commit 325626e46d
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/scripts/components/server/files/FileDropdownMenu.tsx
View File

@ -116,12 +116,15 @@ export default ({ file }: { file: FileObject }) => {
renderToggle={onClick => ( renderToggle={onClick => (
<div css={tw`p-3 hover:text-white`} onClick={onClick}> <div css={tw`p-3 hover:text-white`} onClick={onClick}>
<FontAwesomeIcon icon={faEllipsisH}/> <FontAwesomeIcon icon={faEllipsisH}/>
{!!modal &&
<RenameFileModal <RenameFileModal
visible
appear
files={[ file.name ]} files={[ file.name ]}
visible={!!modal}
useMoveTerminology={modal === 'move'} useMoveTerminology={modal === 'move'}
onDismissed={() => setModal(null)} onDismissed={() => setModal(null)}
/> />
}
<SpinnerOverlay visible={showSpinner} fixed size={'large'}/> <SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
</div> </div>
)} )}

5
resources/scripts/components/server/files/MassActionsBar.tsx
View File

@ -76,12 +76,15 @@ const MassActionsBar = () => {
> >
Deleting files is a permanent operation, you cannot undo this action. Deleting files is a permanent operation, you cannot undo this action.
</ConfirmationModal> </ConfirmationModal>
{showMove &&
<RenameFileModal <RenameFileModal
files={selectedFiles} files={selectedFiles}
visible={showMove} visible
appear
useMoveTerminology useMoveTerminology
onDismissed={() => setShowMove(false)} onDismissed={() => setShowMove(false)}
/> />
}
<div css={tw`rounded p-4 mb-6`} style={{ background: 'rgba(0, 0, 0, 0.35)' }}> <div css={tw`rounded p-4 mb-6`} style={{ background: 'rgba(0, 0, 0, 0.35)' }}>
<Button size={'xsmall'} css={tw`mr-4`} onClick={() => setShowMove(true)}> <Button size={'xsmall'} css={tw`mr-4`} onClick={() => setShowMove(true)}>
<FontAwesomeIcon icon={faLevelUpAlt} css={tw`mr-2`}/> Move <FontAwesomeIcon icon={faLevelUpAlt} css={tw`mr-2`}/> Move