diff --git a/src/Modal/Modal.example.js b/src/Modal/Modal.example.js index b5f53ac..d3dd13b 100644 --- a/src/Modal/Modal.example.js +++ b/src/Modal/Modal.example.js @@ -4,45 +4,55 @@ import Button from '../Button'; import Box from '../Box'; export default class ModalDemo extends React.Component { - constructor(props) { - super(props); - this.state = { - isModelOpen: false, - }; - - this.toggle = this.toggle.bind(this); - this.onCancel = this.onCancel.bind(this); - this.onConfirm = this.onConfirm.bind(this); - } + state = { + isModalOpen: false, + isModalTwoOpen: false, + }; - toggle() { - this.setState({ isModalOpen: !this.state.isModalOpen }); - } + toggle = () => { + this.setState({ isModalOpen: !this.state.isModalOpen, isModalTwoOpen: false }); + }; - onCancel() { - this.toggle(); - setTimeout(() => { - alert('Oh no! It has been canceled.'); - }, 500); - } + toggleModalTwo = () => { + this.setState({ isModalTwoOpen: !this.state.isModalTwoOpen }); + }; - onConfirm() { + onCancel = () => { this.toggle(); setTimeout(() => { - alert('Yahoo! It has been confirmed.'); + alert('Oh no! It has been canceled.'); }, 500); - } + }; render() { - const { body, ...props } = this.props; + const { body, bodyTwo = 'Im a nested modal!', ...props } = this.props; return (
- {body} + + {body} + + + {bodyTwo} + + + + + + + + + + + @@ -50,8 +60,8 @@ export default class ModalDemo extends React.Component { -