modal.js
3.21 KB
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { useState, useEffect } from 'react';
import {
Box,
BoxHeader,
BoxSection,
} from '@wpmudev/react-box';
const { __ } = wp.i18n;
export default function Modal( props ) {
const [modalActive, setModalActive] = useState(false);
useEffect(() => {
if ( props.isActive !== undefined ) {
setModalActive( props.isActive );
}
}, [props.isActive]);
let closeButtonCallback = props.closeButtonCallback !== undefined ? props.closeButtonCallback : () => {setModalActive(false)};
let classes = props.classes !== undefined ? props.classes : '';
let headerTitleAlign = props.headerTitleAlign !== undefined ? props.headerTitleAlign : 'center';
let modalSize = 'md';
if ( props.modalSize !== undefined ) {
switch( props.modalSize ) {
case 'large' : modalSize = 'lg'; break;
case 'medium' : modalSize = 'md'; break;
case 'small' : modalSize = 'sm'; break;
}
}
return (
<div className={`sui-modal sui-modal-${modalSize} ${modalActive && 'sui-active'} ${classes}`}>
<div
role="dialog"
id={props.modalID}
className={`sui-modal-content ${props.classes}`}
aria-modal="true"
aria-labelledby={props.ariaLabelledbBy}
aria-describedby={props.ariaDescribedBy}
>
<Box>
<div className="header-wrap">
<BoxHeader>
<div className={`sui-box-header sui-flatten sui-content-${headerTitleAlign} modal-header`}>
{
props.closeButton &&
<button
className="sui-button-icon sui-button-float--right"
data-modal-close
onClick={closeButtonCallback}
>
<i className="sui-icon-close sui-md" aria-hidden="true"></i>
<span
className="sui-screen-reader-text">{__( 'Close this modal', 'broken-link-checker' )}
</span>
</button>
}
{props.modalTitle &&
<h3>{props.modalTitle}</h3>
}
{props.header}
</div>
</BoxHeader>
</div>
<Box className="sui-box-body sui-modal-content modal-content sui-box-center">
<BoxSection>
{props.content}
</BoxSection>
</Box>
<Box className="sui-box-footer sui-modal-content modal-content sui-box-center">
<BoxSection>
{props.footer}
</BoxSection>
</Box>
</Box>
</div>
</div>
)
}