49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react'
|
|
|
|
export const ModalBox = ({
|
|
title, isOpen, onClose, children,
|
|
showFooter = true, showCancel = true, showConfirm = true,
|
|
textCancel = 'Cancel', textConfirm = 'OK',
|
|
onConfirm = null, focusRef = null,
|
|
}) => {
|
|
|
|
return (
|
|
<Modal
|
|
initialFocusRef={focusRef}
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
>
|
|
<ModalOverlay />
|
|
<ModalContent>
|
|
<ModalHeader>{title}</ModalHeader>
|
|
<ModalCloseButton />
|
|
|
|
<ModalBody pb={6}>
|
|
{children}
|
|
</ModalBody>
|
|
|
|
<ModalFooter display={showFooter ? 'flex' : 'none'}>
|
|
<Button
|
|
display={showConfirm ? 'flex' : 'none'}
|
|
colorScheme="blue"
|
|
onClick={() => {
|
|
onConfirm && onConfirm()
|
|
onClose()
|
|
}}
|
|
mr={3}
|
|
>
|
|
{textConfirm}
|
|
</Button>
|
|
|
|
<Button
|
|
display={showCancel ? 'flex' : 'none'}
|
|
onClick={onClose}
|
|
>
|
|
{textCancel}
|
|
</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
)
|
|
} |