Permalink
Browse files

Add basic handling for a single modal dialog

  • Loading branch information...
markerikson committed Jul 13, 2017
1 parent 047aaf9 commit 21777d793eacd3863a04d71480f5a30618fb7ce2
View
@@ -10,6 +10,7 @@ import Pilots from "features/pilots/Pilots";
import Mechs from "features/mechs/Mechs";
import UnitOrganization from "features/unitOrganization/UnitOrganization";
import Tools from "features/tools/Tools";
import ModalManager from "features/modals/ModalManager";
import './App.css';
@@ -25,6 +26,7 @@ class App extends Component {
return (
<div className="App">
<ModalManager/>
<div className="App-header">
<Header inverted as="h1">Project Mini-Mek</Header>
</div>
@@ -8,6 +8,7 @@ import tabReducer from "features/tabs/tabReducer";
import unitInfoReducer from "features/unitInfo/unitInfoReducer";
import pilotsReducer from "features/pilots/pilotsReducer";
import mechsReducer from "features/mechs/mechsReducer";
import modalsReducer from "features/modals/modalReducer.js";
import entityCrudReducer from "features/entities/entityReducer";
import editingFeatureReducer from "features/editing/editingReducer";
@@ -20,6 +21,7 @@ const combinedReducer = combineReducers({
pilots : pilotsReducer,
mechs : mechsReducer,
tabs : tabReducer,
modals : modalsReducer,
});
@@ -0,0 +1,31 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import TestModal from "./TestModal";
const modalComponentLookupTable = {
TestModal
};
const mapState = (state) => ({currentModal : state.modals});
export class ModalManager extends Component {
render() {
const {currentModal} = this.props;
let renderedModal;
if(currentModal) {
const {modalType, modalProps = {}} = currentModal;
const ModalComponent = modalComponentLookupTable[modalType];
renderedModal = <ModalComponent {...modalProps} />;
}
return <span>{renderedModal}</span>
}
}
export default connect(mapState)(ModalManager);
@@ -0,0 +1,34 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import {
Modal,
} from "semantic-ui-react";
import {closeModal} from "features/modals/modalActions";
const actions = {closeModal};
export class TestModal extends Component {
render() {
return (
<Modal
closeIcon="close"
open={true}
onClose={this.props.closeModal}
>
<Modal.Header>Modal #1</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>This is a modal dialog. Pretty neat, huh?</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
</Modal.Actions>
</Modal>
)
}
}
export default connect(null, actions)(TestModal);
@@ -0,0 +1,17 @@
import {
MODAL_CLOSE,
MODAL_OPEN
} from "./modalConstants";
export function openModal(modalType, modalProps) {
return {
type : MODAL_OPEN,
payload : { modalType, modalProps}
};
}
export function closeModal() {
return {
type : MODAL_CLOSE
};
}
@@ -0,0 +1,2 @@
export const MODAL_OPEN = "MODAL_OPEN";
export const MODAL_CLOSE = "MODAL_CLOSE";
@@ -0,0 +1,24 @@
import {
MODAL_CLOSE,
MODAL_OPEN
} from "./modalConstants";
import {createReducer} from "common/utils/reducerUtils";
const initialState = null;
export function openModal(state, payload) {
const {modalType, modalProps} = payload;
return {modalType, modalProps};
}
export function closeModal(state, payload) {
return null;
}
export default createReducer(initialState, {
[MODAL_OPEN] : openModal,
[MODAL_CLOSE] : closeModal
});
@@ -6,16 +6,23 @@ import {
} from "semantic-ui-react";
import {loadUnitData} from "../toolActions";
import {openModal} from "features/modals/modalActions.js";
const actions = {loadUnitData};
const actions = {loadUnitData, openModal};
class Tools extends Component {
onOpenModalClicked = () => {
this.props.openModal("TestModal", {a : 42});
}
render() {
const {loadUnitData} = this.props;
return (
<Segment attached="bottom">
<Button onClick={loadUnitData}>Reload Unit Data</Button>
<Button primary onClick={this.onOpenModalClicked}>Show Test Modal</Button>
</Segment>
)
}

0 comments on commit 21777d7

Please sign in to comment.