Zhenjieruan/modal stack

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 build
 **/*.md
+.idea/

app/components/Modal/actions.js

@@ -1,35 +1,18 @@
 /* @flow weak */
-const createAction = (action) => {
-  var resolve, reject
-  var promise = new Promise((rs, rj) => { resolve = rs; reject = rj })
-  var baseAction = {
-    meta: { promise, resolve, reject },
-    then: promise.then.bind(promise),
-    catch: promise.catch.bind(promise)
-  }
+import { createAction } from 'redux-actions'
+import { promiseActionMixin } from '../../utils'
 
-  return Object.assign(baseAction, action)
-}
+let modal_id = 0;
 
 export const MODAL_SHOW = 'MODAL_SHOW'
-export function showModal (modalType, content) {
-  return createAction({
-    type: MODAL_SHOW,
-    payload: {modalType, content}
-  })
-}
+export const showModal = promiseActionMixin(
+  createAction(MODAL_SHOW, (modalType, content) => ({_id: modal_id++, modalType, content}))
+)
 
 export const MODAL_DISMISS = 'MODAL_DISMISS'
-export function dismissModal () {
-  return {
-    type: MODAL_DISMISS
-  }
-}
+export const dismissModal = createAction(MODAL_DISMISS)
 
 export const MODAL_UPDATE = 'MODAL_UPDATE'
-export function updateModal (content) {
-  return createAction({
-    type: MODAL_UPDATE,
-    payload: {content}
-  })
-}
+export const updateModal = promiseActionMixin(
+  createAction(MODAL_UPDATE, content => ({content}))
+)

app/components/Modal/index.jsx

@@ -13,16 +13,22 @@ import {
 } from './modals'
 
 var ModalContainer = (props) => {
-  const {isActive, showBackdrop, position, dispatch} = props
-  return isActive ? (
-    <div className={cx('modal-container', position,
-      {'show-backdrop': showBackdrop}
-    )}>
-      <Modal {...props}/>
-      <div className='backdrop'
-        onClick={e=>dispatch({type:'MODAL_DISMISS'})}></div>
-    </div>
-  ) : null
+  const {dispatch} = props;
+  const hasModal = props.stack.length > 0;
+  return hasModal ? <div className={cx('modals-container')}>
+    {props.stack.map((config) => {
+      const {_id, isActive, showBackdrop, position} = config;
+        return isActive ? (
+        <div key={_id} className={cx('modal-container', position,
+          {'show-backdrop': showBackdrop}
+        )}>
+          <Modal {...config}/>
+          <div className='backdrop'
+               onClick={e=>dispatch({type:'MODAL_DISMISS'})}></div>
+        </div>
+      ) : null
+    })}
+  </div> :null;
 }
 ModalContainer = connect(state => state.ModalState, null)(ModalContainer)
 

app/components/Modal/reducer.js

@@ -6,39 +6,71 @@ import {
 } from './actions'
 
 const _state = {
+  _id: 0,
   isActive: false,
   showBackdrop: false,
   position: 'top'
-}
+};
 
-export default function ModalReducer (state = _state, action) {
+function modal(state = _state, action) {
   switch (action.type) {
 
     case MODAL_SHOW:
-      var newState = {
+      return Object.assign({}, state, {
+        _id: action.payload._id,
         isActive: true,
         modalType: action.payload.modalType,
         meta: action.meta,
         content: action.payload.content
-      }
-      return { ...state, ...newState }
+      });
+
 
     case MODAL_DISMISS:
-      var newState = {
+      return Object.assign({}, state, {
         isActive: false,
         content: null,
         modalType: null
-      }
-      return { ...state, ...newState }
+      });
 
     case MODAL_UPDATE:
+      if (state._id != action._id) {
+        return state;
+      }
+
       return {
         ...state,
         meta: action.meta,
         content: Object.assign({}, state.content, action.payload.content)
-      }
+      };
+
+    default:
+      return state;
+  }
+}
+
+export default function ModalsReducer(state = {stack: []}, action) {
+  switch (action.type) {
+
+    case MODAL_SHOW:
+      return Object.assign({}, state, {
+        stack: [
+          ...state.stack,
+          modal(undefined, action)
+        ]
+      });
+
+    case MODAL_DISMISS:
+      modal(state[state.length - 1], action);
+      return Object.assign({}, state, {stack: state.stack.slice(0, -1)});
+
+    case MODAL_UPDATE:
+      return Object.assign({}, state, {
+        stack: state.map(modal =>
+          modal(modal, action)
+        )
+      });
 
     default:
-      return state
+      return state;
   }
 }

app/store.js

@@ -8,7 +8,7 @@ import PaneReducer, { PaneCrossReducer } from './components/Pane/reducer'
 import TabReducer from './components/Tab/reducer'
 import EditorReducer from './components/AceEditor/reducer'
 import FileTreeReducer from './components/FileTree/reducer'
-import ModalReducer from './components/Modal/reducer'
+import ModalsReducer from './components/Modal/reducer'
 import NotificationReducer from './components/Notification/reducer'
 import TerminalReducer from './components/Terminal/reducer'
 import GitReducer from './components/Git/reducer'
@@ -21,7 +21,7 @@ const combinedReducers = combineReducers({
   PaneState: PaneReducer,
   TabState: TabReducer,
   EditorState: EditorReducer,
-  ModalState: ModalReducer,
+  ModalState: ModalsReducer,
   TerminalState: TerminalReducer,
   GitState: GitReducer,
   NotificationState: NotificationReducer,

app/styles/components/Modal.styl

@@ -1,3 +1,6 @@
+.modals-container {
+}
+
 .modal-container {
   fixed(0);
   display: flex;

app/utils/index.js

@@ -3,3 +3,4 @@ export path from './path'
 export request from './request'
 export setSelectionRange from './setSelectionRange'
 export composeReducers from './composeReducers'
+export promiseActionMixin from './promiseActionMixin'

app/utils/promiseActionMixin.js

@@ -0,0 +1,18 @@
+const promiseActionMixin = (actionCreator) => {
+  return function decoratedActionCreator () {
+    const action = actionCreator.apply(null, arguments)
+
+    let resolve, reject
+    let promise = new Promise((rs, rj) => { resolve = rs; reject = rj })
+    let meta = { promise, resolve, reject }
+
+    return {
+      ...action,
+      meta: action.meta ? {...action.meta, ...meta} : meta,
+      then: promise.then.bind(promise),
+      catch: promise.catch.bind(promise)
+    }
+  }
+}
+
+export default promiseActionMixin