// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Dialog, DialogTitle, Button, Grid, DialogContent } from '@material-ui/core';
+import { Dialog, DialogTitle, Button, Grid, DialogContent, CircularProgress, Paper } from '@material-ui/core';
import { DialogActions } from '~/components/dialog-actions/dialog-actions';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
export interface SharingDialogDataProps {
open: boolean;
+ loading: boolean;
saveEnabled: boolean;
+ advancedEnabled: boolean;
children: React.ReactNode;
}
export interface SharingDialogActionProps {
onClose: () => void;
+ onExited: () => void;
onSave: () => void;
onAdvanced: () => void;
}
export default (props: SharingDialogDataProps & SharingDialogActionProps) => {
- const { children, open, saveEnabled, onAdvanced, onClose, onSave } = props;
+ const { children, open, loading, advancedEnabled, saveEnabled, onAdvanced, onClose, onExited, onSave } = props;
return <Dialog
- {...{ open, onClose }}
+ {...{ open, onClose, onExited }}
fullWidth
- maxWidth='sm'>
+ maxWidth='sm'
+ disableBackdropClick
+ disableEscapeKeyDown>
<DialogTitle>
Sharing settings
</DialogTitle>
</DialogContent>
<DialogActions>
<Grid container spacing={8}>
- <Grid item>
- <Button
- color='primary'
- onClick={onAdvanced}>
- Advanced
+ {advancedEnabled &&
+ <Grid item>
+ <Button
+ color='primary'
+ onClick={onAdvanced}>
+ Advanced
</Button>
- </Grid>
+ </Grid>
+ }
<Grid item xs />
<Grid item>
<Button onClick={onClose}>
</Grid>
</Grid>
</DialogActions>
+ {
+ loading && <LoadingIndicator />
+ }
</Dialog>;
};
+
+const loadingIndicatorStyles: StyleRulesCallback<'root'> = theme => ({
+ root: {
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: 'rgba(255, 255, 255, 0.8)',
+ },
+});
+
+const LoadingIndicator = withStyles(loadingIndicatorStyles)(
+ (props: WithStyles<'root'>) =>
+ <Paper classes={props.classes}>
+ <CircularProgress />
+ </Paper>
+);