Skip to content

Modal component update #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 7, 2018
Merged

Modal component update #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5a500fe
init Multi Input component
chrismanciero Nov 6, 2018
3b070e5
remove unused property
chrismanciero Nov 6, 2018
687a23c
add compact style property
chrismanciero Nov 6, 2018
cd93b23
update sample code
chrismanciero Nov 6, 2018
713526a
change compact prop type
chrismanciero Nov 7, 2018
b18db88
update modal component to have show property
chrismanciero Nov 7, 2018
557e9d6
update documentation for Modal
chrismanciero Nov 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 80 additions & 78 deletions src/Modal/Modal.Component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export class ModalComponent extends Component {
this.txtEmailRef = React.createRef();
}

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

confirmationModalCode = `<Modal title="Delete"
confirmationModalCode = `<Modal show={this.state.bShowComfirmModal} title="Delete"
onClose={this.showHideConfirmModal}
actions={
<React.Fragment>
Expand All @@ -59,7 +59,7 @@ export class ModalComponent extends Component {
</div>
</Modal>`;

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

Expand All @@ -162,6 +166,10 @@ export class ModalComponent extends Component {
<Properties
type="Inputs"
properties={[
{
name: 'show',
description: 'Bool - true: show modal, false: hide modal.'
},
{
name: 'title',
description: 'String (required) - Title for modal dialog box'
Expand All @@ -183,23 +191,23 @@ export class ModalComponent extends Component {
</Description>
<DocsTile>
<button onClick={this.showHideModal}>Show Information Modal</button>
{this.state.bShowInfoModal ? (
<Modal title="Product Added" onClose={this.showHideModal}>
<div>
<b>The new product have been added to your catalog.</b>
<br />
<br />
Automatic Product ID: <b>PD-3465334</b>
<br />
<br />
Expiration date: <b>13/03/2018</b>
<br />
<br />
</div>
</Modal>
) : (
''
)}
<Modal
show={this.state.bShowInfoModal}
title="Product Added"
onClose={this.showHideModal}
>
<div>
<b>The new product have been added to your catalog.</b>
<br />
<br />
Automatic Product ID: <b>PD-3465334</b>
<br />
<br />
Expiration date: <b>13/03/2018</b>
<br />
<br />
</div>
</Modal>
</DocsTile>
<DocsText>{this.informationModalCode}</DocsText>
<Separator />
Expand All @@ -214,31 +222,28 @@ export class ModalComponent extends Component {
<button onClick={this.showHideConfirmModal}>
Show Confirmation Modal
</button>
{this.state.bShowComfirmModal ? (
<Modal
title="Delete"
onClose={this.showHideConfirmModal}
actions={
<React.Fragment>
<Button
type="secondary"
onclick={() => this.showHideConfirmModal('No Way')}
>
No Way
</Button>
<Button onclick={() => this.showHideConfirmModal('Sure')}>
Sure
</Button>
</React.Fragment>
}
>
<div>
Do you want to delete item <b>X</b>?
</div>
</Modal>
) : (
''
)}
<Modal
show={this.state.bShowComfirmModal}
title="Delete"
onClose={this.showHideConfirmModal}
actions={
<React.Fragment>
<Button
type="secondary"
onclick={() => this.showHideConfirmModal('No Way')}
>
No Way
</Button>
<Button onclick={() => this.showHideConfirmModal('Sure')}>
Sure
</Button>
</React.Fragment>
}
>
<div>
Do you want to delete item <b>X</b>?
</div>
</Modal>
</DocsTile>
<DocsText>{this.confirmationModalCode}</DocsText>
<Separator />
Expand All @@ -250,40 +255,37 @@ export class ModalComponent extends Component {
</Description>
<DocsTile>
<button onClick={this.showHideFormModal}>Show Form Modal</button>
{this.state.bShowFormModal ? (
<Modal
title="Invite user"
onClose={this.showHideFormModal}
actions={
<React.Fragment>
<Button
type="secondary"
onclick={() => this.showHideFormModal('Cancel')}
>
Cancel
</Button>
<Button onclick={() => this.showHideFormModal('Invite')}>
Invite
</Button>
</React.Fragment>
}
>
<div className="fd-form__group">
<div className="fd-form__item">
<label className="fd-form__label is-required">Email</label>
<input
className="fd-form__control"
type="text"
value={this.state.emailAddress}
onChange={this.updateEmailAddress}
ref={this.txtEmailRef}
/>
</div>
<Modal
show={this.state.bShowFormModal}
title="Invite user"
onClose={this.showHideFormModal}
actions={
<React.Fragment>
<Button
type="secondary"
onclick={() => this.showHideFormModal('Cancel')}
>
Cancel
</Button>
<Button onclick={() => this.showHideFormModal('Invite')}>
Invite
</Button>
</React.Fragment>
}
>
<div className="fd-form__group">
<div className="fd-form__item">
<label className="fd-form__label is-required">Email</label>
<input
className="fd-form__control"
type="text"
value={this.state.emailAddress}
onChange={this.updateEmailAddress}
ref={this.txtEmailRef}
/>
</div>
</Modal>
) : (
''
)}
</div>
</Modal>
</DocsTile>
<DocsText>{this.formModalCode}</DocsText>
<Separator />
Expand Down
4 changes: 4 additions & 0 deletions src/Modal/Modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ export class Modal extends Component {
}

render() {
if (!this.props.show) {
return null;
}
const { children, title, actions } = this.props;

return ReactDOM.createPortal(
Expand Down Expand Up @@ -61,5 +64,6 @@ export class Modal extends Component {
}

Modal.propTypes = {
show: PropTypes.bool,
title: PropTypes.string.isRequired
};
130 changes: 130 additions & 0 deletions src/MultiInput/MultiInput.Component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
import React, { Component } from 'react';
import {
DocsTile,
DocsText,
Separator,
Header,
Description,
Import,
Properties
} from '../';
import { MultiInput } from './MultiInput';

export class MultiInputComponent extends Component {
data = [
'Apple',
'Apricot',
'Acai',
'African Moringa',
'Bearberry',
'Bilberry',
'Blood orange',
'Barbadine',
'Barbados cherry',
'Balsam Apple',
'Chokeberry',
'Cranberry',
'Cupuacu'
];

constructor(props) {
super(props);

this.state = {
data: []
};
}

performTagsUpdate = aTags => {
console.log(aTags);
};

multiInputCode = `<MultiInput
data={this.data}
onTagsUpdate={this.performTagsUpdate}
placeHolder="Select a Fruit"
/>`;

multiInputCompactCode = `<MultiInput
data={this.data}
onTagsUpdate={this.performTagsUpdate}
placeHolder="Select a Fruit"
compact={true}
/>`;

render() {
return (
<div>
<Header>Multi Input</Header>
<Description />
<Import module="MultiInput" path="/fundamental-react/src/" />

<Separator />

<Properties
type="Inputs"
properties={[
{
name: 'data',
description:
'Array (Required) - Collection of items to display in the list.'
},
{
name: 'placeHolder',
description:
'String - The text to use as placeholder when no text is entered.'
},
{
name: 'onTagsUpdate',
description:
'Func - Method to fire on add or remove of tag. Component returns array of tags selected.'
},
{
name: 'compact',
description:
'Bool - true: display compact style, false: default style'
}
]}
/>

<Separator />

<h2>Default</h2>
<Description>
A text input when on focus will show list of items to select.
</Description>
<DocsTile>
<div>
<MultiInput
data={this.data}
onTagsUpdate={this.performTagsUpdate}
placeHolder="Select a Fruit"
/>
</div>
</DocsTile>
<DocsText>{this.multiInputCode}</DocsText>

<Separator />

<h2>Compact Style</h2>
<Description>
A text input when on focus will show list of items to select, but with
a compact input box.
</Description>
<DocsTile>
<div>
<MultiInput
data={this.data}
onTagsUpdate={this.performTagsUpdate}
placeHolder="Select a Fruit"
compact={true}
/>
</div>
</DocsTile>
<DocsText>{this.multiInputCompactCode}</DocsText>

<Separator />
</div>
);
}
}
Loading