github.com/filecoin-project/bacalhau@v0.3.23-0.20230228154132-45c989550ace/dashboard/frontend/src/components/widgets/Window.tsx (about)

     1  import React, { useCallback, ReactNode, FC } from 'react'
     2  import Dialog, { DialogProps } from '@mui/material/Dialog'
     3  import DialogContent from '@mui/material/DialogContent'
     4  import DialogTitle from '@mui/material/DialogTitle'
     5  import DialogActions from '@mui/material/DialogActions'
     6  import Button from '@mui/material/Button'
     7  import Box from '@mui/material/Box'
     8  
     9  export interface WindowProps {
    10    leftButtons?: ReactNode,
    11    rightButtons?: ReactNode,
    12    buttons?: ReactNode,
    13    withCancel?: boolean,
    14    loading?: boolean,
    15    submitTitle?: string,
    16    cancelTitle?: string,
    17    open: boolean,
    18    title?: string | ReactNode,
    19    size?: DialogProps["maxWidth"],
    20    compact?: boolean,
    21    noScroll?: boolean,
    22    fullHeight?: boolean,
    23    noActions?: boolean,
    24    background?: string,
    25    onCancel?: {
    26      (): void,
    27    },
    28    onSubmit?: {
    29      (): void,
    30    },
    31    theme?: Record<string, string>,
    32    disabled?: boolean,
    33  }
    34  
    35  const Window: FC<WindowProps> = ({
    36    leftButtons,
    37    rightButtons,
    38    buttons,
    39    withCancel,
    40    loading = false,
    41    submitTitle = 'Save',
    42    cancelTitle = 'Cancel',
    43    background = '#fff',
    44    open,
    45    title,
    46    size = 'md',
    47    children,
    48    compact = false,
    49    noScroll = false,
    50    fullHeight = false,
    51    noActions = false,
    52    onCancel,
    53    onSubmit,
    54    disabled = false,
    55  }) => {
    56  
    57    const closeWindow = useCallback(() => {
    58      onCancel && onCancel()
    59    }, [
    60      onCancel,
    61    ])
    62  
    63    return (
    64      <Dialog
    65        open={ open }
    66        onClose={ closeWindow }
    67        fullWidth
    68        maxWidth={ size }
    69        sx={{
    70          '& .MuiDialog-paper': {
    71            backgroundColor: background,
    72            ...(fullHeight && {
    73              height: '100%',
    74            }),
    75            ...(noScroll && {
    76              overflowX: 'hidden!important',
    77              overflowY: 'hidden!important',
    78            }),
    79          },
    80        }}
    81      >
    82        {
    83          title && (
    84            <DialogTitle
    85              sx={{
    86                padding: 1,
    87              }}
    88            >
    89              { title }
    90            </DialogTitle>
    91          )
    92        }
    93        <DialogContent
    94          sx={{
    95            ...(compact && {
    96              padding: '0px!important',
    97            }),
    98            ...(noScroll && {
    99              overflowX: 'hidden!important',
   100              overflowY: 'hidden!important',
   101            }),
   102          }}
   103        >
   104          { children }
   105        </DialogContent>
   106        {
   107          !noActions && (
   108            <DialogActions>
   109              <Box 
   110                component="div"
   111                sx={{
   112                  width: '100%',
   113                  display: 'flex',
   114                  flexDirection: 'row',
   115                }}
   116              >
   117                <Box
   118                  component="div"
   119                  sx={{
   120                    flexGrow: 0,
   121                  }}
   122                >
   123                  { leftButtons }
   124                </Box>
   125                <Box
   126                  component="div"
   127                  sx={{
   128                    flexGrow: 1,
   129                    textAlign: 'right',
   130                  }}
   131                >
   132                  {
   133                    withCancel && (
   134                      <Button
   135                        sx={{
   136                          marginLeft: 2,
   137                        }}
   138                        type="button"
   139                        variant="outlined"
   140                        onClick={ closeWindow }
   141                      >
   142                        { cancelTitle }
   143                      </Button>
   144                    )
   145                  }
   146                  {
   147                    onSubmit && (
   148                      <Button
   149                        sx={{
   150                          marginLeft: 2,
   151                        }}
   152                        type="button"
   153                        variant="contained"
   154                        color="primary"
   155                        disabled={ disabled || loading ? true : false }
   156                        onClick={ onSubmit }
   157                      >
   158                        { submitTitle }
   159                      </Button>
   160                    )
   161                  }
   162                  { rightButtons || buttons }
   163                </Box>
   164              </Box>
   165            </DialogActions>
   166          )
   167        }
   168      </Dialog>
   169    )
   170  }
   171  
   172  export default Window