Permalink
Browse files

Implement stackable modals

  • Loading branch information...
markerikson committed Jul 13, 2017
1 parent 21777d7 commit 3cd4fd26023010a93b120380272c7b6a638f635d
@@ -7,24 +7,24 @@ const modalComponentLookupTable = {
TestModal
};
const mapState = (state) => ({currentModal : state.modals});
const mapState = (state) => ({currentModals : state.modals});
export class ModalManager extends Component {
render() {
const {currentModal} = this.props;
const {currentModals} = this.props;
let renderedModal;
if(currentModal) {
const {modalType, modalProps = {}} = currentModal;
const renderedModals = currentModals.map( (modalDescription, index) => {
const {modalType, modalProps = {}} = modalDescription;
const ModalComponent = modalComponentLookupTable[modalType];
renderedModal = <ModalComponent {...modalProps} />;
}
return <ModalComponent {...modalProps} key={modalType + index}/>;
});
return <span>{renderedModal}</span>
return <span>{renderedModals}</span>
}
}
@@ -2,25 +2,42 @@ import React, {Component} from "react";
import {connect} from "react-redux";
import {
Modal,
Button,
} from "semantic-ui-react";
import {closeModal} from "features/modals/modalActions";
import {openModal, closeModal} from "features/modals/modalActions";
const actions = {closeModal};
const actions = {openModal, closeModal};
export class TestModal extends Component {
onNextModalClick = () => {
const {counter} = this.props;
this.props.openModal("TestModal", {counter : counter + 1});
}
render() {
const {counter, closeModal} = this.props;
return (
<Modal
closeIcon="close"
open={true}
onClose={this.props.closeModal}
onClose={closeModal}
>
<Modal.Header>Modal #1</Modal.Header>
<Modal.Header>Modal #{counter}</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>This is a modal dialog. Pretty neat, huh?</p>
<h4>
Value from props:
</h4>
<div>
counter = {counter}
</div>
<div>
<Button onClick={this.onNextModalClick}>Add Another Modal</Button>
</div>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
@@ -31,4 +48,4 @@ export class TestModal extends Component {
}
export default connect(null, actions)(TestModal);
export default connect(null, actions)(TestModal);
@@ -6,19 +6,24 @@ import {
import {createReducer} from "common/utils/reducerUtils";
const initialState = null;
const initialState = [];
export function openModal(state, payload) {
const {modalType, modalProps} = payload;
return {modalType, modalProps};
// Always pushing a new modal onto the stack
return state.concat({modalType, modalProps});
}
export function closeModal(state, payload) {
return null;
// Always popping the last modal off the stack
const newState = state.slice();
newState.pop();
return newState;
}
export default createReducer(initialState, {
[MODAL_OPEN] : openModal,
[MODAL_CLOSE] : closeModal
});
});
@@ -13,7 +13,7 @@ const actions = {loadUnitData, openModal};
class Tools extends Component {
onOpenModalClicked = () => {
this.props.openModal("TestModal", {a : 42});
this.props.openModal("TestModal", {counter : 1});
}
render() {

0 comments on commit 3cd4fd2

Please sign in to comment.