blob: ab2f7d782eb0b178b44cee9a417d5dc2646109d7 (
plain)
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
|
import React from 'react';
import PropTypes from 'prop-types';
import Portal from './Portal.js';
import Body from './ModalBody.js';
import Header from './ModalHeader.js';
import Footer from './ModalFooter.js';
import Title from './ModalTitle.js';
export const modalSize = {
medium: 'md',
large: 'l',
extraLarge: 'xl',
small: 'sm',
extraSmall: 'xsm'
};
class Modal extends React.Component {
render() {
const {size, type, children, show} = this.props;
return (
<Portal>
<div ref={el => { this.modalRef = el;}}>
{show && <div className={`sdc-modal ${modalSize[size]}`}>
<div className={`sdc-modal__wrapper sdc-modal-type-${type}`}>
{children}
</div>
</div>}
{show && <div className='modal-background' />}
</div>
</Portal>
);
}
}
Modal.defaultProps = {
show: false,
size: 'medium',
type: 'info'
};
Modal.propTypes = {
show: PropTypes.bool,
size: PropTypes.string,
children: PropTypes.node,
type: PropTypes.string
};
Modal.Body = Body;
Modal.Header = Header;
Modal.Footer = Footer;
Modal.Title = Title;
export default Modal;
|
