Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save mattatcha/b3b7cb8e22e7818b7de8515a6efbaf3c to your computer and use it in GitHub Desktop.
Save mattatcha/b3b7cb8e22e7818b7de8515a6efbaf3c to your computer and use it in GitHub Desktop.
Mobx modal store design poc
import * as React from "react";
import { observable, action, autorun } from 'mobx';
import { Promise } from 'es6-promise';
import { FlatButton } from 'material-ui';
import { StoreManager } from './StoreManager';
export class ModalStore {
storeManager: StoreManager
@observable public isOpen: boolean = false;
@observable public actions = [];
@observable public selectedAction = -1;
constructor(storeManager: StoreManager) {
this.storeManager = storeManager
}
@action onClose = (e) => {
this.isOpen = false
this.selectedAction = 0
}
@action onOk = (e) => {
this.isOpen = false
this.selectedAction = 1
}
@action public openModal(): Promise<Boolean> {
return new Promise<Boolean>((resolve, reject) => {
if (!this.isOpen) {
// Open modal
this.selectedAction = -1
this.actions = [
<FlatButton
label="Cancel"
primary={true}
onTouchTap={this.onClose}
/>,
<FlatButton
label="Submit"
primary={true}
keyboardFocused={true}
onTouchTap={this.onOk}
/>
]
this.isOpen = true
// Listen for user action
var watcher = autorun(() => {
console.log("watching")
console.log(this.selectedAction)
switch (this.selectedAction) {
case 0:
resolve(false)
break;
case 1:
resolve(true)
break;
default:
break;
}
})
} else {
reject("Modal already open")
}
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment