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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
import React from 'react';
import Examples from './utils/Examples.js';
import Button from '../../src/react/Button.js';
import Modal from '../../src/react/Modal.js';
import Input from '../../src/react/Input.js';
import HTMLStandardModal from '../../components/modal/standard-modal.html';
import HTMLAlertModal from '../../components/modal/alert-modal.html';
import HTMLErrorModal from '../../components/modal/error-modal.html';
import HTMLCustomModal from '../../components/modal/custom-modal.html';
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false
};
}
render() {
const { children } = this.props;
const { show } = this.state;
var childrenWithProps = React.Children.map(children, child => {
let childChildrenWithProps = [];
if (child.props.children) {
let childChildren = child.props.children;
childChildrenWithProps = React.Children.map(childChildren, child =>
React.cloneElement(child, { onClose: ()=>this.setState({show: !show}) }));
}
return React.cloneElement(child, { show: this.state.show, onClose: ()=>this.setState({show: !show}), children: childChildrenWithProps});
}
);
return (
<div>
<Button onClick={() => this.setState({show: !show})}>Modal</Button>
{childrenWithProps}
</div>
);
}
}
const ModalBody = () => {
return (
<div>
<Input
name='input1'
value='Default'
label='I am a label'
type='text' />
<Input
name='input1'
value='Default'
label='I am a label'
type='text' />
<Input
name='input1'
value='Default'
label='I am a label'
type='text' />
</div>);
};
const BODY_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
const isShown = false;
let examples = {
Standard: {
jsx: <Example>
<Modal show={() => isShown()} size='small'>
<Modal.Header><Modal.Title>Standard Modal</Modal.Title></Modal.Header>
<Modal.Body>
{BODY_TEXT}
</Modal.Body>
<Modal.Footer actionButtonText='Yes' actionButtonClick={()=>{}}/>
</Modal>
</Example>,
html: HTMLStandardModal,
exclude: 'Example',
renderFromJsx: true
},
Alert: {
jsx: <Example>
<Modal show={() => isShown()} type='alert' size='small'>
<Modal.Header type='alert'><Modal.Title>Title</Modal.Title></Modal.Header>
<Modal.Body>
{BODY_TEXT}
</Modal.Body>
<Modal.Footer closeButtonText='Ok'/>
</Modal>
</Example>,
html: HTMLAlertModal,
exclude: 'Example',
renderFromJsx: true
},
Error: {
jsx: <Example>
<Modal show={() => isShown()} size='small' type='error'>
<Modal.Header onClose={()=>isShown(false)} type='error'><Modal.Title>Title</Modal.Title></Modal.Header>
<Modal.Body>
{BODY_TEXT}
</Modal.Body>
<Modal.Footer onClose={()=>isShown(false)} closeButtonText='Ok'/>
</Modal>
</Example>,
html: HTMLErrorModal,
exclude: 'Example',
renderFromJsx: true
},
Custom: {
jsx: <Example>
<Modal show={() => isShown()} type='custom'>
<Modal.Header type='custom'><Modal.Title>Title</Modal.Title></Modal.Header>
<Modal.Body>
<ModalBody/>
</Modal.Body>
<Modal.Footer actionButtonText='Ok' actionButtonClick={()=>{}}/>
</Modal>
</Example>,
html: HTMLCustomModal,
exclude: 'Example',
renderFromJsx: true
}
};
const Modals = () => (
<Examples examples={examples}/>
);
export default Modals;
|
