Projekt

Obecné

Profil

Stáhnout (2.02 KB) Statistiky
| Větev: | Tag: | Revize:
1
import { Button, Dialog } from '@mui/material'
2
import { Fragment, FunctionComponent, ReactNode, useState } from 'react'
3

    
4
export interface ButtonOpenableDialogProps {
5
    onOpenCallback?: () => void // this callback is always executed when the dialog is opened
6
    onCloseCallback?: () => void // this callback is always executed when the dialog is closed
7
    buttonText: string // the text of the button that opens the dialog
8
    buttonColor: // the color of the button that opens the dialog
9
    'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'inherit'
10
    buttonVariant: 'text' | 'outlined' | 'contained' // the variant of the button that opens the dialog
11
    children: ReactNode // the content of the dialog
12
    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' // the max width of the dialog
13
}
14

    
15
// Generic dialog that can be opened by a button and closed by clicking on the backdrop.
16
const ButtonOpenableDialog: FunctionComponent<ButtonOpenableDialogProps> = ({
17
    onOpenCallback,
18
    onCloseCallback,
19
    buttonText,
20
    buttonColor,
21
    buttonVariant,
22
    children,
23
    maxWidth,
24
}) => {
25
    const [open, setOpen] = useState(false)
26

    
27
    // Change maxWidth to large if its undefined
28
    maxWidth = maxWidth ?? 'lg'
29

    
30
    const onOpen = () => {
31
        if (onOpenCallback) {
32
            // execute the callback if exists
33
            onOpenCallback()
34
        }
35
        setOpen(true)
36
    }
37
    const onClose = () => {
38
        if (onCloseCallback) {
39
            // execute the callback if exists
40
            onCloseCallback()
41
        }
42
        setOpen(false)
43
    }
44

    
45
    return (
46
        <Fragment>
47
            <Button
48
                onClick={onOpen}
49
                color={buttonColor}
50
                variant={buttonVariant}
51
            >
52
                {buttonText}
53
            </Button>
54
            <Dialog
55
                fullWidth={true}
56
                open={open}
57
                onClose={onClose}
58
                maxWidth={maxWidth}
59
            >
60
                {children}
61
            </Dialog>
62
        </Fragment>
63
    )
64
}
65

    
66
export default ButtonOpenableDialog
(1-1/5)