src/views-components/sharing-dialog/sharing-dialog-component.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Dialog, DialogTitle, Button, Grid, DialogContent, CircularProgress, Paper } from '@material-ui/core';
   7 import { DialogActions } from '~/components/dialog-actions/dialog-actions';
   8 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   9
  10
  11 export interface SharingDialogDataProps {
  12     open: boolean;
  13     loading: boolean;
  14     saveEnabled: boolean;
  15     advancedEnabled: boolean;
  16     children: React.ReactNode;
  17 }
  18 export interface SharingDialogActionProps {
  19     onClose: () => void;
  20     onExited: () => void;
  21     onSave: () => void;
  22     onAdvanced: () => void;
  23 }
  24 export default (props: SharingDialogDataProps & SharingDialogActionProps) => {
  25     const { children, open, loading, advancedEnabled, saveEnabled, onAdvanced, onClose, onExited, onSave } = props;
  26     return <Dialog
  27         {...{ open, onClose, onExited }}
  28         fullWidth
  29         maxWidth='sm'
  30         disableBackdropClick
  31         disableEscapeKeyDown>
  32         <DialogTitle>
  33             Sharing settings
  34             </DialogTitle>
  35         <DialogContent>
  36             {children}
  37         </DialogContent>
  38         <DialogActions>
  39             <Grid container spacing={8}>
  40                 {advancedEnabled &&
  41                     <Grid item>
  42                         <Button
  43                             color='primary'
  44                             onClick={onAdvanced}>
  45                             Advanced
  46                     </Button>
  47                     </Grid>
  48                 }
  49                 <Grid item xs />
  50                 <Grid item>
  51                     <Button onClick={onClose}>
  52                         Close
  53                     </Button>
  54                 </Grid>
  55                 <Grid item>
  56                     <Button
  57                         variant='contained'
  58                         color='primary'
  59                         onClick={onSave}
  60                         disabled={!saveEnabled}>
  61                         Save
  62                     </Button>
  63                 </Grid>
  64             </Grid>
  65         </DialogActions>
  66         {
  67             loading && <LoadingIndicator />
  68         }
  69     </Dialog>;
  70 };
  71
  72 const loadingIndicatorStyles: StyleRulesCallback<'root'> = theme => ({
  73     root: {
  74         position: 'absolute',
  75         top: 0,
  76         right: 0,
  77         bottom: 0,
  78         left: 0,
  79         display: 'flex',
  80         alignItems: 'center',
  81         justifyContent: 'center',
  82         backgroundColor: 'rgba(255, 255, 255, 0.8)',
  83     },
  84 });
  85
  86 const LoadingIndicator = withStyles(loadingIndicatorStyles)(
  87     (props: WithStyles<'root'>) =>
  88         <Paper classes={props.classes}>
  89             <CircularProgress />
  90         </Paper>
  91 );