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

Show a message when the spinner is displayed

This commit is contained in:
Dane Everitt 2020-07-11 15:45:28 -07:00
parent 93cab68cc3
commit 43f8ec23b8
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/scripts/components/elements/SpinnerOverlay.tsx
View File

@ -10,16 +10,17 @@ interface Props {
backgroundOpacity?: number; backgroundOpacity?: number;
} }
const SpinnerOverlay = ({ size, fixed, visible, backgroundOpacity }: Props) => ( const SpinnerOverlay: React.FC<Props> = ({ size, fixed, visible, backgroundOpacity, children }) => (
<Fade timeout={150} in={visible} unmountOnExit> <Fade timeout={150} in={visible} unmountOnExit>
<div <div
css={[ css={[
tw`top-0 left-0 flex items-center justify-center w-full h-full rounded`, tw`top-0 left-0 flex items-center justify-center w-full h-full rounded flex-col`,
!fixed ? tw`absolute` : tw`fixed`, !fixed ? tw`absolute` : tw`fixed`,
]} ]}
style={{ zIndex: 9999, background: `rgba(0, 0, 0, ${backgroundOpacity || 0.45})` }} style={{ zIndex: 9999, background: `rgba(0, 0, 0, ${backgroundOpacity || 0.45})` }}
> >
<Spinner size={size}/> <Spinner size={size}/>
{children && (typeof children === 'string' ? <p css={tw`mt-4 text-neutral-400`}>{children}</p> : children)}
</div> </div>
</Fade> </Fade>
); );

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

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import tw from 'twin.macro'; import tw from 'twin.macro';
import Button from '@/components/elements/Button'; import Button from '@/components/elements/Button';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
@ -19,13 +19,19 @@ const MassActionsBar = () => {
const { mutate } = useFileManagerSwr(); const { mutate } = useFileManagerSwr();
const { clearFlashes, clearAndAddHttpError } = useFlash(); const { clearFlashes, clearAndAddHttpError } = useFlash();
const [ loading, setLoading ] = useState(false); const [ loading, setLoading ] = useState(false);
const [ loadingMessage, setLoadingMessage ] = useState('');
const [ showConfirm, setShowConfirm ] = useState(false); const [ showConfirm, setShowConfirm ] = useState(false);
const { values, setFieldValue } = useFormikContext<{ selectedFiles: string[] }>(); const { values, setFieldValue } = useFormikContext<{ selectedFiles: string[] }>();
const directory = ServerContext.useStoreState(state => state.files.directory); const directory = ServerContext.useStoreState(state => state.files.directory);
useEffect(() => {
if (!loading) setLoadingMessage('');
}, [ loading ]);
const onClickCompress = () => { const onClickCompress = () => {
setLoading(true); setLoading(true);
clearFlashes('files'); clearFlashes('files');
setLoadingMessage('Archiving files...');
compressFiles(uuid, directory, values.selectedFiles) compressFiles(uuid, directory, values.selectedFiles)
.then(() => mutate()) .then(() => mutate())
@ -38,6 +44,7 @@ const MassActionsBar = () => {
setLoading(true); setLoading(true);
setShowConfirm(false); setShowConfirm(false);
clearFlashes('files'); clearFlashes('files');
setLoadingMessage('Deleting files...');
deleteFiles(uuid, directory, values.selectedFiles) deleteFiles(uuid, directory, values.selectedFiles)
.then(() => { .then(() => {
@ -54,7 +61,9 @@ const MassActionsBar = () => {
return ( return (
<Fade timeout={75} in={values.selectedFiles.length > 0} unmountOnExit> <Fade timeout={75} in={values.selectedFiles.length > 0} unmountOnExit>
<div css={tw`fixed bottom-0 z-50 left-0 right-0 flex justify-center`}> <div css={tw`fixed bottom-0 z-50 left-0 right-0 flex justify-center`}>
<SpinnerOverlay visible={loading} size={'large'} fixed/> <SpinnerOverlay visible={loading} size={'large'} fixed>
{loadingMessage}
</SpinnerOverlay>
<ConfirmationModal <ConfirmationModal
visible={showConfirm} visible={showConfirm}
title={'Delete these files?'} title={'Delete these files?'}