From f386aa424c8ae95da94b76238e277df4ca66cb5f Mon Sep 17 00:00:00 2001 From: Bruno Dias Date: Wed, 28 Jun 2017 21:28:26 -0300 Subject: [PATCH] [chore] added more examples. --- examples/basic/app.js | 82 ++++++---------------------- examples/basic/modal_a.js | 37 +++++++++++++ examples/basic/view_a.js | 83 ++++++++++++++++++++++++++++ examples/basic/view_b.js | 110 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 245 insertions(+), 67 deletions(-) create mode 100644 examples/basic/modal_a.js create mode 100644 examples/basic/view_a.js create mode 100644 examples/basic/view_b.js diff --git a/examples/basic/app.js b/examples/basic/app.js index 323f4d90..bb3b1c20 100644 --- a/examples/basic/app.js +++ b/examples/basic/app.js @@ -1,88 +1,36 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import Modal from '../../src/index'; +import ViewA from './view_a'; +import ViewB from './view_b'; const appElement = document.getElementById('example'); Modal.setAppElement('#example'); +const heading = firstView => { + if (firstView) { + return "#1. Working with one modal at a time."; + } + return "#2. Working with many modal."; +}; + class App extends Component { constructor(props) { super(props); - this.state = { modal1: false, modal2: false }; - } - - toggleModal_1 = () => { - this.setState({ ...this.state, modal1: !this.state.modal1 }); - } - - toggleModal_2 = event => { - event.preventDefault(); - this.setState({ ...this.state, modal2: !this.state.modal2 }); - } - - handleModalCloseRequest = () => { - // opportunity to validate something and keep the modal open even if it - // requested to be closed - this.setState({ ...this.state, modal1: false }); - } - - handleInputChange = () => { - this.setState({ ...this.state, foo: 'bar' }); + this.state = { firstView: true }; } - handleOnAfterOpenModal = () => { - // when ready, we can access the available refs. - this.refs.title.style.color = '#F00'; + toggleView = () => { + this.setState({ ...this.state, firstView: !this.state.firstView }); } render() { - const { modal1, modal2 } = this.state; return (
- - - -

Hello

- -
I am a modal
-
- - - - - -
- - - - - -
- - {}} - onRequestClose={this.toggleModal_2}> -

This is the modal 2!

-
-

This is a description of what it does: nothing :)

-
- + +

{heading(this.state.firstView)}

+ {this.state.firstView ? : }
); } diff --git a/examples/basic/modal_a.js b/examples/basic/modal_a.js new file mode 100644 index 00000000..392e6473 --- /dev/null +++ b/examples/basic/modal_a.js @@ -0,0 +1,37 @@ +import React from 'react'; +import Modal from '../../src/index'; + +// This way you can provide a correct interface +// for anyone that will use this modal. +// +// NOTE: Code style is just to show the interface. +// Prefer comment your api. +export default function ModalA( + { + title, isOpen, onAfterOpen, + onRequestClose, askToClose, onChangeInput + } +) { + return ( + +

{title}

+ +
I am a modal. Use the first input to change the modal's title.
+
+ + +
+ + + + +
+ + ); +} diff --git a/examples/basic/view_a.js b/examples/basic/view_a.js new file mode 100644 index 00000000..75c6d748 --- /dev/null +++ b/examples/basic/view_a.js @@ -0,0 +1,83 @@ +import React, { Component } from 'react'; +import Modal from '../../src/index'; +import ModalA from './modal_a'; + +const MODAL_A = 'modal_a'; +const MODAL_B = 'modal_b'; + +const DEFAULT_TITLE = 'Default title'; + +export default class ViewA extends Component { + constructor(props) { + super(props); + this.state = { + title1: DEFAULT_TITLE, + currentModal: null + }; + } + + toggleModal = key => event => { + event.preventDefault(); + if (this.state.currentModal) { + this.handleModalCloseRequest(); + return; + } + this.setState({ ...this.state, currentModal: key, title1: DEFAULT_TITLE }); + } + + handleModalCloseRequest = () => { + // opportunity to validate something and keep the modal open even if it + // requested to be closed + this.setState({ + ...this.state, + currentModal: null + }); + } + + handleInputChange = (e) => { + let text = e.target.value; + if (text == '') { + text = DEFAULT_TITLE; + } + this.setState({ ...this.state, title1: text }); + } + + handleOnAfterOpenModal = () => { + // when ready, we can access the available refs. + this.heading && (this.heading.style.color = '#F00'); + } + + render() { + const { currentModal } = this.state; + return ( +
+ + + + +

this.heading = h1}>This is the modal 2!

+
+

This is a description of what it does: nothing :)

+
+ +
+ ); + } +} diff --git a/examples/basic/view_b.js b/examples/basic/view_b.js new file mode 100644 index 00000000..e173269e --- /dev/null +++ b/examples/basic/view_b.js @@ -0,0 +1,110 @@ +import React, { Component } from 'react'; +import Modal from '../../src/index'; +import ModalA from './modal_a'; + +function List(props) { + return ( +
+ {props.items.map( + (x, i) =>
{x}
+ )} +
+ ); +} + +export default class ViewB extends Component { + constructor(props) { + super(props); + this.state = { + listItemsIsOpen: false, + currentItem: -1, + loading: false, + items: [] + }; + } + + toggleModal = event => { + event.preventDefault(); + if (this.state.listItemsIsOpen) { + this.handleModalCloseRequest(); + return; + } + this.setState({ + ...this.state, + items: [], + listItemsIsOpen: true, + loading: true + }); + } + + handleModalCloseRequest = () => { + // opportunity to validate something and keep the modal open even if it + // requested to be closed + this.setState({ + ...this.state, + listItemsIsOpen: false, + loading: false + }); + } + + handleOnAfterOpenModal = () => { + // when ready, we can access the available refs. + (new Promise((resolve, reject) => { + setTimeout(() => resolve(true), 1000); + })).then(res => { + this.setState({ + ...this.state, + items: [1, 2, 3, 4, 5].map(x => `Item ${x}`), + loading: false + }); + }); + } + + onItemClick = index => event => { + this.setState({ ...this.state, currentItem: index }); + } + + cleanCurrentItem = () => { + this.setState({ ...this.state, currentItem: -1 }); + } + + render() { + const { listItemsIsOpen } = this.state; + return ( +
+ + +

List of items

+ {this.state.loading ? ( +

Loading...

+ ) : ( + + )} + + -1} + onRequestClose={this.cleanCurrentItem} + aria={{ + labelledby: "item_title", + describedby: "item_info" + }}> +

Item: {this.state.items[this.state.currentItem]}

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pulvinar varius auctor. Aliquam maximus et justo ut faucibus. Nullam sit amet urna molestie turpis bibendum accumsan a id sem. Proin ullamcorper nisl sapien, gravida dictum nibh congue vel. Vivamus convallis dolor vitae ipsum ultricies, vitae pulvinar justo tincidunt. Maecenas a nunc elit. Phasellus fermentum, tellus ut consectetur scelerisque, eros nunc lacinia eros, aliquet efficitur tellus arcu a nibh. Praesent quis consequat nulla. Etiam dapibus ac sem vel efficitur. Nunc faucibus efficitur leo vitae vulputate. Nunc at quam vitae felis pretium vehicula vel eu quam. Quisque sapien mauris, condimentum eget dictum ut, congue id dolor. Donec vitae varius orci, eu faucibus turpis. Morbi eleifend orci non urna bibendum, ac scelerisque augue efficitur.

+ +

Maecenas justo justo, laoreet vitae odio quis, lacinia porttitor arcu. Nunc nisl est, ultricies sed laoreet eu, semper in nisi. Phasellus lacinia porta purus, eu luctus neque. Nullam quis mi malesuada, vestibulum sem id, rhoncus purus. Aliquam erat volutpat. Duis nec turpis mi. Pellentesque eleifend nisl sed risus aliquet, eu feugiat elit auctor. Suspendisse ac neque vitae ligula consequat aliquam. Vivamus sit amet eros et ante mollis porta.

+
+ +
+ ); + } +}