1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { Modal as RModal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap'
function Modal({ children, title, show, onSubmit, onCancel, submitButtonType, submitButtonText }) {
const [modal, setModal] = useState(show)
useEffect(() => setModal(show), [show])
const toggle = () => setModal(!modal)
const cancel = () => {
if (onCancel() !== false) {
toggle()
}
}
const submit = () => {
if (onSubmit() !== false) {
toggle()
}
}
return (
<RModal isOpen={modal} toggle={cancel}>
<ModalHeader toggle={cancel}>{title}</ModalHeader>
<ModalBody>{children}</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={cancel}>
Close
</Button>
<Button color={submitButtonType} onClick={submit}>
{submitButtonText}
</Button>
</ModalFooter>
</RModal>
)
}
Modal.propTypes = {
title: PropTypes.string.isRequired,
show: PropTypes.bool.isRequired,
onSubmit: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
submitButtonType: PropTypes.string,
submitButtonText: PropTypes.string,
children: PropTypes.node,
}
Modal.defaultProps = {
submitButtonType: 'primary',
submitButtonText: 'Save',
show: false,
}
export default Modal
|
