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 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         className="sharing-dialog"
  29         fullWidth
  30         maxWidth='sm'
  31         disableBackdropClick
  32         disableEscapeKeyDown>
  33         <DialogTitle>
  34             Sharing settings
  35             </DialogTitle>
  36         <DialogContent>
  37             {children}
  38         </DialogContent>
  39         <DialogActions>
  40             <Grid container spacing={8}>
  41                 {advancedEnabled &&
  42                     <Grid item>
  43                         <Button
  44                             color='primary'
  45                             onClick={onAdvanced}>
  46                             Advanced
  47                     </Button>
  48                     </Grid>
  49                 }
  50                 <Grid item xs />
  51                 <Grid item>
  52                     <Button onClick={onClose}>
  53                         Close
  54                     </Button>
  55                 </Grid>
  56                 <Grid item>
  57                     <Button
  58                         variant='contained'
  59                         color='primary'
  60                         onClick={onSave}
  61                         disabled={!saveEnabled}>
  62                         Save
  63                     </Button>
  64                 </Grid>
  65             </Grid>
  66         </DialogActions>
  67         {
  68             loading && <LoadingIndicator />
  69         }
  70     </Dialog>;
  71 };
  72
  73 const loadingIndicatorStyles: StyleRulesCallback<'root'> = theme => ({
  74     root: {
  75         position: 'absolute',
  76         top: 0,
  77         right: 0,
  78         bottom: 0,
  79         left: 0,
  80         display: 'flex',
  81         alignItems: 'center',
  82         justifyContent: 'center',
  83         backgroundColor: 'rgba(255, 255, 255, 0.8)',
  84     },
  85 });
  86
  87 const LoadingIndicator = withStyles(loadingIndicatorStyles)(
  88     (props: WithStyles<'root'>) =>
  89         <Paper classes={props.classes}>
  90             <CircularProgress />
  91         </Paper>
  92 );