Skip to content

Commit cc764bb

Browse files
InnaAtanasovaInnaAtanasova
authored
Merge pull request #52 from SAP/modal-component-update
Modal component update
2 parents 250b2f9 + 557e9d6 commit cc764bb

File tree

6 files changed

+398
-78
lines changed

6 files changed

+398
-78
lines changed

‎src/Modal/Modal.Component.js‎

Lines changed: 80 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export class ModalComponent extends Component {
2525
this.txtEmailRef = React.createRef();
2626
}
2727

28-
informationModalCode = `<Modal title="Product Added" onClose={this.showHideModal}>
28+
informationModalCode = `<Modal show={this.state.bShowInfoModal} title="Product Added" onClose={this.showHideModal}>
2929
<div>
3030
<b>The new product have been added to your catalog.</b>
3131
<br />
@@ -39,7 +39,7 @@ export class ModalComponent extends Component {
3939
</div>
4040
</Modal>`;
4141

42-
confirmationModalCode = `<Modal title="Delete"
42+
confirmationModalCode = `<Modal show={this.state.bShowComfirmModal} title="Delete"
4343
onClose={this.showHideConfirmModal}
4444
actions={
4545
<React.Fragment>
@@ -59,7 +59,7 @@ export class ModalComponent extends Component {
5959
</div>
6060
</Modal>`;
6161

62-
formModalCode = `<Modal title="Invite user"
62+
formModalCode = `<Modal show={this.state.bShowFormModal} title="Invite user"
6363
onClose={this.showHideFormModal}
6464
actions={
6565
<React.Fragment>
@@ -154,6 +154,10 @@ export class ModalComponent extends Component {
154154
The modal is a container generally displayed in response to an action.
155155
It is used for short forms, confirmation messages or to display
156156
contextual information that does not require a page.
157+
<br />
158+
To display the Modal control, pass a boolean value to the "show"
159+
property of the component. It is recommended to store this value as a
160+
state property in the Parent control.
157161
</Description>
158162
<Import module="Modal" path="/fundamental-react/src/" />
159163

@@ -162,6 +166,10 @@ export class ModalComponent extends Component {
162166
<Properties
163167
type="Inputs"
164168
properties={[
169+
{
170+
name: 'show',
171+
description: 'Bool - true: show modal, false: hide modal.'
172+
},
165173
{
166174
name: 'title',
167175
description: 'String (required) - Title for modal dialog box'
@@ -183,23 +191,23 @@ export class ModalComponent extends Component {
183191
</Description>
184192
<DocsTile>
185193
<button onClick={this.showHideModal}>Show Information Modal</button>
186-
{this.state.bShowInfoModal ? (
187-
<Modal title="Product Added" onClose={this.showHideModal}>
188-
<div>
189-
<b>The new product have been added to your catalog.</b>
190-
<br />
191-
<br />
192-
Automatic Product ID: <b>PD-3465334</b>
193-
<br />
194-
<br />
195-
Expiration date: <b>13/03/2018</b>
196-
<br />
197-
<br />
198-
</div>
199-
</Modal>
200-
) : (
201-
''
202-
)}
194+
<Modal
195+
show={this.state.bShowInfoModal}
196+
title="Product Added"
197+
onClose={this.showHideModal}
198+
>
199+
<div>
200+
<b>The new product have been added to your catalog.</b>
201+
<br />
202+
<br />
203+
Automatic Product ID: <b>PD-3465334</b>
204+
<br />
205+
<br />
206+
Expiration date: <b>13/03/2018</b>
207+
<br />
208+
<br />
209+
</div>
210+
</Modal>
203211
</DocsTile>
204212
<DocsText>{this.informationModalCode}</DocsText>
205213
<Separator />
@@ -214,31 +222,28 @@ export class ModalComponent extends Component {
214222
<button onClick={this.showHideConfirmModal}>
215223
Show Confirmation Modal
216224
</button>
217-
{this.state.bShowComfirmModal ? (
218-
<Modal
219-
title="Delete"
220-
onClose={this.showHideConfirmModal}
221-
actions={
222-
<React.Fragment>
223-
<Button
224-
type="secondary"
225-
onclick={() => this.showHideConfirmModal('No Way')}
226-
>
227-
No Way
228-
</Button>
229-
<Button onclick={() => this.showHideConfirmModal('Sure')}>
230-
Sure
231-
</Button>
232-
</React.Fragment>
233-
}
234-
>
235-
<div>
236-
Do you want to delete item <b>X</b>?
237-
</div>
238-
</Modal>
239-
) : (
240-
''
241-
)}
225+
<Modal
226+
show={this.state.bShowComfirmModal}
227+
title="Delete"
228+
onClose={this.showHideConfirmModal}
229+
actions={
230+
<React.Fragment>
231+
<Button
232+
type="secondary"
233+
onclick={() => this.showHideConfirmModal('No Way')}
234+
>
235+
No Way
236+
</Button>
237+
<Button onclick={() => this.showHideConfirmModal('Sure')}>
238+
Sure
239+
</Button>
240+
</React.Fragment>
241+
}
242+
>
243+
<div>
244+
Do you want to delete item <b>X</b>?
245+
</div>
246+
</Modal>
242247
</DocsTile>
243248
<DocsText>{this.confirmationModalCode}</DocsText>
244249
<Separator />
@@ -250,40 +255,37 @@ export class ModalComponent extends Component {
250255
</Description>
251256
<DocsTile>
252257
<button onClick={this.showHideFormModal}>Show Form Modal</button>
253-
{this.state.bShowFormModal ? (
254-
<Modal
255-
title="Invite user"
256-
onClose={this.showHideFormModal}
257-
actions={
258-
<React.Fragment>
259-
<Button
260-
type="secondary"
261-
onclick={() => this.showHideFormModal('Cancel')}
262-
>
263-
Cancel
264-
</Button>
265-
<Button onclick={() => this.showHideFormModal('Invite')}>
266-
Invite
267-
</Button>
268-
</React.Fragment>
269-
}
270-
>
271-
<div className="fd-form__group">
272-
<div className="fd-form__item">
273-
<label className="fd-form__label is-required">Email</label>
274-
<input
275-
className="fd-form__control"
276-
type="text"
277-
value={this.state.emailAddress}
278-
onChange={this.updateEmailAddress}
279-
ref={this.txtEmailRef}
280-
/>
281-
</div>
258+
<Modal
259+
show={this.state.bShowFormModal}
260+
title="Invite user"
261+
onClose={this.showHideFormModal}
262+
actions={
263+
<React.Fragment>
264+
<Button
265+
type="secondary"
266+
onclick={() => this.showHideFormModal('Cancel')}
267+
>
268+
Cancel
269+
</Button>
270+
<Button onclick={() => this.showHideFormModal('Invite')}>
271+
Invite
272+
</Button>
273+
</React.Fragment>
274+
}
275+
>
276+
<div className="fd-form__group">
277+
<div className="fd-form__item">
278+
<label className="fd-form__label is-required">Email</label>
279+
<input
280+
className="fd-form__control"
281+
type="text"
282+
value={this.state.emailAddress}
283+
onChange={this.updateEmailAddress}
284+
ref={this.txtEmailRef}
285+
/>
282286
</div>
283-
</Modal>
284-
) : (
285-
''
286-
)}
287+
</div>
288+
</Modal>
287289
</DocsTile>
288290
<DocsText>{this.formModalCode}</DocsText>
289291
<Separator />

‎src/Modal/Modal.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ export class Modal extends Component {
2828
}
2929

3030
render() {
31+
if (!this.props.show) {
32+
return null;
33+
}
3134
const { children, title, actions } = this.props;
3235

3336
return ReactDOM.createPortal(
@@ -61,5 +64,6 @@ export class Modal extends Component {
6164
}
6265

6366
Modal.propTypes = {
67+
show: PropTypes.bool,
6468
title: PropTypes.string.isRequired
6569
};

‎src/MultiInput/MultiInput.Component.js‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import React, { Component } from 'react';
2+
import {
3+
DocsTile,
4+
DocsText,
5+
Separator,
6+
Header,
7+
Description,
8+
Import,
9+
Properties
10+
} from '../';
11+
import { MultiInput } from './MultiInput';
12+
13+
export class MultiInputComponent extends Component {
14+
data = [
15+
'Apple',
16+
'Apricot',
17+
'Acai',
18+
'African Moringa',
19+
'Bearberry',
20+
'Bilberry',
21+
'Blood orange',
22+
'Barbadine',
23+
'Barbados cherry',
24+
'Balsam Apple',
25+
'Chokeberry',
26+
'Cranberry',
27+
'Cupuacu'
28+
];
29+
30+
constructor(props) {
31+
super(props);
32+
33+
this.state = {
34+
data: []
35+
};
36+
}
37+
38+
performTagsUpdate = aTags => {
39+
console.log(aTags);
40+
};
41+
42+
multiInputCode = `<MultiInput
43+
data={this.data}
44+
onTagsUpdate={this.performTagsUpdate}
45+
placeHolder="Select a Fruit"
46+
/>`;
47+
48+
multiInputCompactCode = `<MultiInput
49+
data={this.data}
50+
onTagsUpdate={this.performTagsUpdate}
51+
placeHolder="Select a Fruit"
52+
compact={true}
53+
/>`;
54+
55+
render() {
56+
return (
57+
<div>
58+
<Header>Multi Input</Header>
59+
<Description />
60+
<Import module="MultiInput" path="/fundamental-react/src/" />
61+
62+
<Separator />
63+
64+
<Properties
65+
type="Inputs"
66+
properties={[
67+
{
68+
name: 'data',
69+
description:
70+
'Array (Required) - Collection of items to display in the list.'
71+
},
72+
{
73+
name: 'placeHolder',
74+
description:
75+
'String - The text to use as placeholder when no text is entered.'
76+
},
77+
{
78+
name: 'onTagsUpdate',
79+
description:
80+
'Func - Method to fire on add or remove of tag. Component returns array of tags selected.'
81+
},
82+
{
83+
name: 'compact',
84+
description:
85+
'Bool - true: display compact style, false: default style'
86+
}
87+
]}
88+
/>
89+
90+
<Separator />
91+
92+
<h2>Default</h2>
93+
<Description>
94+
A text input when on focus will show list of items to select.
95+
</Description>
96+
<DocsTile>
97+
<div>
98+
<MultiInput
99+
data={this.data}
100+
onTagsUpdate={this.performTagsUpdate}
101+
placeHolder="Select a Fruit"
102+
/>
103+
</div>
104+
</DocsTile>
105+
<DocsText>{this.multiInputCode}</DocsText>
106+
107+
<Separator />
108+
109+
<h2>Compact Style</h2>
110+
<Description>
111+
A text input when on focus will show list of items to select, but with
112+
a compact input box.
113+
</Description>
114+
<DocsTile>
115+
<div>
116+
<MultiInput
117+
data={this.data}
118+
onTagsUpdate={this.performTagsUpdate}
119+
placeHolder="Select a Fruit"
120+
compact={true}
121+
/>
122+
</div>
123+
</DocsTile>
124+
<DocsText>{this.multiInputCompactCode}</DocsText>
125+
126+
<Separator />
127+
</div>
128+
);
129+
}
130+
}

0 commit comments

Comments
 (0)