| 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112 |
134x
134x
134x
134x
134x
134x
268x
19x
19x
19x
19x
| import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import Overlay from '../Overlay/Overlay';
import { lucidClassNames } from '../../util/style-helpers';
import { createClass, getFirst, omitProps } from '../../util/component-types';
const cx = lucidClassNames.bind('&-Dialog');
const { node, oneOf } = PropTypes;
const SMALL = 'small';
const MEDIUM = 'medium';
const LARGE = 'large';
/**
* {"categories": ["layout"], "extend": "Overlay", "madeFrom": ["Portal", "Overlay"]}
*
* Dialog is used to pop open a window so the user doesn't lose the context of
* the page behind it. Extra props are spread through to the underlying `Overlay`
*/
const Dialog = createClass({
displayName: 'Dialog',
components: {
/**
* Renders a `<header>`.
*/
Header: createClass({
displayName: 'Dialog.Header',
propName: 'Header',
}),
/**
* Renders a `<footer>`.
*/
Footer: createClass({
displayName: 'Dialog.Footer',
propName: 'Footer',
}),
},
propTypes: {
...Overlay.propTypes,
/**
* Size variations that only affect the width of the dialog. All the sizes
* will grow in height until they get too big, at which point they will
* scroll inside.
*/
size: oneOf(['small', 'medium', 'large']),
/**
* *Child Element* - Header contents. Only one `Header` is used.
*/
Header: node,
/**
* *Child Element* - Footer contents. Only one `Footer` is used.
*/
Footer: node,
},
getDefaultProps() {
return {
size: MEDIUM,
};
},
render() {
const { className, size, isShown, ...passThroughs } = this.props;
const headerChildProp = _.get(
getFirst(this.props, Dialog.Header),
'props',
{}
);
const footerChildProp = _.get(
getFirst(this.props, Dialog.Footer),
'props',
null
);
return (
<Overlay
{...omitProps(passThroughs, Dialog, [], false)}
{..._.pick(passThroughs, _.keys(Overlay.propTypes))}
isShown={isShown}
className={cx('&', className)}
>
<div
className={cx('&-window', {
'&-window-is-small': size === SMALL,
'&-window-is-medium': size === MEDIUM,
'&-window-is-large': size === LARGE,
})}
>
<header {...headerChildProp} className={cx('&-header')} />
<section className={cx('&-body')}>
{this.props.children}
</section>
{footerChildProp &&
<footer {...footerChildProp} className={cx('&-footer')} />}
</div>
</Overlay>
);
},
});
export default Dialog;
|