From 13dfc4e686085d41c2d2a2a9a38e07ff68b946c4 Mon Sep 17 00:00:00 2001 From: Bruno Dias Date: Tue, 19 Sep 2017 22:30:25 -0300 Subject: [PATCH] [chore] update tests. --- examples/base.css | 10 ++ examples/basic/app.js | 39 +++----- examples/basic/{view_a.js => forms/index.js} | 29 ++++-- examples/basic/index.html | 32 ++++--- .../{view_b.js => multiple_modals/index.js} | 22 +++-- examples/basic/simple_usage/index.js | 94 +++++++++++++++++++ .../{modal_a.js => simple_usage/modal.js} | 19 ++-- examples/bootstrap/app.js | 38 ++++---- examples/bootstrap/index.html | 33 ++++--- examples/index.html | 32 ++++--- webpack.config.js | 6 ++ 11 files changed, 240 insertions(+), 114 deletions(-) create mode 100644 examples/base.css rename examples/basic/{view_a.js => forms/index.js} (80%) rename examples/basic/{view_b.js => multiple_modals/index.js} (90%) create mode 100644 examples/basic/simple_usage/index.js rename examples/basic/{modal_a.js => simple_usage/modal.js} (65%) diff --git a/examples/base.css b/examples/base.css new file mode 100644 index 00000000..b61c0565 --- /dev/null +++ b/examples/base.css @@ -0,0 +1,10 @@ + +/* From http://instructure-react.github.io/library/shared.css */ + +.padbox { + padding: 40px; +} + +.branding { + border-bottom: 1px solid hsl(200, 0%, 90%); +} diff --git a/examples/basic/app.js b/examples/basic/app.js index bb3b1c20..52eb554a 100644 --- a/examples/basic/app.js +++ b/examples/basic/app.js @@ -1,39 +1,28 @@ 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'; +import Modal from 'react-modal'; +import SimpleUsage from './simple_usage'; +import MultipleModals from './multiple_modals'; 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."; -}; +const examples = [ + SimpleUsage, + MultipleModals +]; -class App extends Component { - constructor(props) { - super(props); - this.state = { firstView: true }; - } - - toggleView = () => { - this.setState({ ...this.state, firstView: !this.state.firstView }); - } - - render() { +function App(props) { + return examples.map((example, key) => { + const ExampleApp = example.app; return ( -
- -

{heading(this.state.firstView)}

- {this.state.firstView ? : } +
+

{example.label}

+
); - } + }); } ReactDOM.render(, appElement); diff --git a/examples/basic/view_a.js b/examples/basic/forms/index.js similarity index 80% rename from examples/basic/view_a.js rename to examples/basic/forms/index.js index 75c6d748..5e7800bf 100644 --- a/examples/basic/view_a.js +++ b/examples/basic/forms/index.js @@ -1,13 +1,13 @@ import React, { Component } from 'react'; -import Modal from '../../src/index'; -import ModalA from './modal_a'; +import Modal from 'react-modal'; +import MyModal from './modal'; const MODAL_A = 'modal_a'; const MODAL_B = 'modal_b'; const DEFAULT_TITLE = 'Default title'; -export default class ViewA extends Component { +class SimpleUsage extends Component { constructor(props) { super(props); this.state = { @@ -22,7 +22,12 @@ export default class ViewA extends Component { this.handleModalCloseRequest(); return; } - this.setState({ ...this.state, currentModal: key, title1: DEFAULT_TITLE }); + + this.setState({ + ...this.state, + currentModal: key, + title1: DEFAULT_TITLE + }); } handleModalCloseRequest = () => { @@ -34,7 +39,7 @@ export default class ViewA extends Component { }); } - handleInputChange = (e) => { + handleInputChange = e => { let text = e.target.value; if (text == '') { text = DEFAULT_TITLE; @@ -47,13 +52,16 @@ export default class ViewA extends Component { this.heading && (this.heading.style.color = '#F00'); } + headingRef = h1 => this.heading = h1; + render() { const { currentModal } = this.state; + return (
- -

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

+

This is the modal 2!

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

-
+
p
); } } + +export default { + label: "#1. Working with one modal at a time.", + app: SimpleUsage +}; diff --git a/examples/basic/index.html b/examples/basic/index.html index c2bc9fbe..6b81d51e 100644 --- a/examples/basic/index.html +++ b/examples/basic/index.html @@ -1,14 +1,20 @@ -Basic Example - - - - -
-

react-modal

-

an accessible React modal dialog component

-
-
- Fork me on GitHub - - + + + Basic Example + + + + + + +
+

react-modal

+

an accessible React modal dialog component

+
+
+ Fork me on GitHub + + + + diff --git a/examples/basic/view_b.js b/examples/basic/multiple_modals/index.js similarity index 90% rename from examples/basic/view_b.js rename to examples/basic/multiple_modals/index.js index e173269e..8b0995a3 100644 --- a/examples/basic/view_b.js +++ b/examples/basic/multiple_modals/index.js @@ -1,18 +1,15 @@ import React, { Component } from 'react'; -import Modal from '../../src/index'; -import ModalA from './modal_a'; +import Modal from 'react-modal'; function List(props) { - return ( -
- {props.items.map( - (x, i) =>
{x}
- )} + return props.items.map((x, i) => ( +
+ {x}
- ); + )); } -export default class ViewB extends Component { +class MultipleModals extends Component { constructor(props) { super(props); this.state = { @@ -72,7 +69,7 @@ export default class ViewB extends Component { const { listItemsIsOpen } = this.state; return (
- + 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 :)

+
+ +
+ ); + } +} + +export default { + label: "#1. Working with one modal at a time.", + app: SimpleUsage +}; diff --git a/examples/basic/modal_a.js b/examples/basic/simple_usage/modal.js similarity index 65% rename from examples/basic/modal_a.js rename to examples/basic/simple_usage/modal.js index 392e6473..163fb635 100644 --- a/examples/basic/modal_a.js +++ b/examples/basic/simple_usage/modal.js @@ -1,17 +1,12 @@ import React from 'react'; -import Modal from '../../src/index'; +import Modal from 'react-modal'; + +export default props => { + const { + title, isOpen, askToClose, + onAfterOpen, onRequestClose, onChangeInput + } = props; -// 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 ( { this.setState({modalIsOpen: true}); - }, + } - closeModal: function() { + closeModal = () => { this.setState({modalIsOpen: false}); - }, + } - handleModalCloseRequest: function() { + handleModalCloseRequest = () => { // opportunity to validate something and keep the modal open even if it // requested to be closed this.setState({modalIsOpen: false}); - }, + } - handleSaveClicked: function(e) { + handleSaveClicked = (e) => { alert('Save button was clicked'); - }, + } - render: function() { + render() { return (
- + ); } -}); +} ReactDOM.render(, appElement); diff --git a/examples/bootstrap/index.html b/examples/bootstrap/index.html index 3c24538a..0833ebba 100644 --- a/examples/bootstrap/index.html +++ b/examples/bootstrap/index.html @@ -1,15 +1,20 @@ -Bootstrap-Style Example - - - - - -
-

react-modal

-

an accessible React modal dialog component

-
-
- Fork me on GitHub - - + + + Bootstrap-Style Example + + + + + + +
+

react-modal

+

an accessible React modal dialog component

+
+
+ Fork me on GitHub + + + + diff --git a/examples/index.html b/examples/index.html index 2b1a4e9b..f6207520 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,14 +1,20 @@ -Basic Example - - - - -
-

react-modal

-

an accessible React modal dialog component

-
-
- Fork me on GitHub - - + + + Basic Example + + + + + +
+

react-modal

+

an accessible React modal dialog component

+
+ + Fork me on GitHub + + diff --git a/webpack.config.js b/webpack.config.js index 19efe1f5..28c1fb08 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -39,6 +39,12 @@ module.exports = { ] }, + resolve: { + alias: { + "react-modal": path.resolve(__dirname, "./src") + } + }, + plugins: [ new webpack.optimize.CommonsChunkPlugin('shared.js') ]