popup system

electron.js

@@ -21,6 +21,7 @@ function createWindow () {
 	
 	win.loadURL('http://localhost:8080');
 	//win.loadFile('dist/index.html');
+	win.toggleDevTools();
 	
 	ipcMain.on('appLoaded', () => {
 		console.log('appLoaded');

src/scss/component/frame.scss

@@ -0,0 +1 @@
+.frame { position: fixed; left: 50%; top: 50%; z-index: 1; background: #fff; border-radius: 8px; }

src/scss/component/popup.scss

@@ -0,0 +1,6 @@
+.popups {
+	.dimmer { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 100; background: rgba(0,0,0,0.2); }
+	.popup { position: fixed; left: 50%; top: 50%; z-index: 101; background: #fff; border-radius: 8px; }
+	
+	.popup-test { width: 640px; height: 480px; }	
+}

src/scss/page/auth.scss

@@ -6,10 +6,7 @@
 	
 	.copy { width: 120px; position: fixed; left: 50%; bottom: 12px; z-index: 1; text-align: center; margin-left: -60px; color: #fff; }
 	
-	.frame { 
-		width: 672px; position: fixed; left: 50%; top: 50%; margin-left: -336px; z-index: 1; background: #fff; border-radius: 8px;
-		padding: 36px 48px 32px 48px; 
-	}
+	.frame { width: 672px; padding: 36px 48px 32px 48px; }
 	.title { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.72px; color: #000; margin-bottom: 15px; }
 	.label { margin-bottom: 25px; }
 	.input { height: 40px; border: solid 1px #d2d0c2; }

src/ts/app.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Router, Route, Link } from 'react-router-dom';
 import { Provider } from 'mobx-react';
-import { Page } from './component';
-import { authStore } from './store';
+import { Page, ListPopup } from './component';
+import { commonStore, authStore } from './store';
 import { Dispatcher } from 'ts/lib';
 
 const { ipcRenderer } = window.require('electron');
@@ -21,6 +21,8 @@ import 'scss/component/icon.scss';
 import 'scss/component/textArea.scss';
 import 'scss/component/smile.scss';
 import 'scss/component/error.scss';
+import 'scss/component/frame.scss';
+import 'scss/component/popup.scss';
 
 import 'scss/page/auth.scss';
 import 'scss/page/main/index.scss';
@@ -28,6 +30,7 @@ import 'scss/page/main/index.scss';
 interface RouteElement { path: string; };
 const Routes: Array<RouteElement> = require('json/route.json');
 const rootStore = {
+	commonStore: commonStore,
 	authStore: authStore
 };
 
@@ -38,6 +41,7 @@ class App extends React.Component<{}, {}> {
 			<Router history={history}>
 				<Provider {...rootStore}>
 					<div>
+						<ListPopup />
 						<div id="drag" />
 						<nav>
 							<ul>

src/ts/component/index.tsx

@@ -10,9 +10,12 @@ import PageAuthSuccess from './page/auth/success';
 
 import PageMainIndex from './page/main/index';
 
+import ListPopup from './list/popup';
+
 import HeaderAuth from './header/auth';
 import FooterAuth from './footer/auth';
 
+import Popup from './util/popup';
 import Frame from './util/frame';
 import Cover from './util/cover';
 import Title from './util/title';
@@ -38,11 +41,13 @@ export {
 	PageAuthRegister,
 	PageAuthSuccess,
 	PageMainIndex,
+	ListPopup,
 	HeaderAuth,
 	FooterAuth,
 	Input,
 	TextArea,
 	Button,
+	Popup,
 	Frame,
 	Cover,
 	Title,

src/ts/component/list/popup.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Popup } from 'ts/component';
+import { observer, inject } from 'mobx-react';
+
+interface Props {
+	commonStore?: any;
+};
+interface State {};
+
+@inject('commonStore')
+@observer
+class ListPopup extends React.Component<Props, State> {
+
+	constructor (props: any) {
+		super(props);
+	};
+	
+	render () {
+		const { commonStore } = this.props;
+		
+		let dimmer = null;
+		if (commonStore.popups.length) {
+			dimmer = <div className="dimmer" onMouseDown={() => { commonStore.popupCloseAll(); }} />;
+		};
+		
+		return (
+			<div className="popups">
+				{commonStore.popups.map((item: any, i: number) => {
+					return <Popup key={i} {...item} />;
+				})}
+				{dimmer}
+			</div>
+		);
+	};
+	
+};
+
+export default ListPopup;

src/ts/component/page/auth/login.tsx

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { Frame, Cover, Title, Label, Error, TextArea, Button, HeaderAuth as Header, FooterAuth as Footer } from 'ts/component';
 import { Dispatcher } from 'ts/lib';
+import { observer, inject } from 'mobx-react';
 
-interface Props extends RouteComponentProps<any> {};
+interface Props extends RouteComponentProps<any> {
+	commonStore ?: any;
+};
 interface State {
 	error: string;
 };
 
+@inject('commonStore')
+@observer
 class PageAuthLogin extends React.Component<Props, State> {
 
 	phraseRef: any;
@@ -48,8 +53,11 @@ class PageAuthLogin extends React.Component<Props, State> {
     };
 
 	onSubmit (e: any) {
+		const { commonStore } = this.props;
+		
 		e.preventDefault();
 		
+		commonStore.popupOpen('test', { key: 'value' });
 		Dispatcher.call('walletCreate', { pin: 'test' });
 		
 		//this.props.history.push('/auth/pin-select/login');

src/ts/component/util/frame.tsx

@@ -39,7 +39,10 @@ class Frame extends React.Component<{}, {}> {
 		
 		raf(() => {
 			let node = $(ReactDOM.findDOMNode(this));
-			node.css({ marginTop: -node.outerHeight() / 2 });			
+			node.css({ 
+				marginTop: -node.outerHeight() / 2,
+				marginLeft: -node.outerWidth() / 2
+			});			
 		});
 	};
 	

src/ts/component/util/popup.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+const $ = require('jquery');
+const raf = require('raf');
+
+interface Props {
+	id: string;
+	param?: any;
+};
+
+class Popup extends React.Component<Props, {}> {
+
+	_isMounted: boolean = false;
+
+	render () {
+		const { id } = this.props;
+		let cn = [ 'popup', 'popup-' + id ];
+		
+		return (
+			<div className={cn.join(' ')}>
+				{this.props.children}
+			</div>
+		);
+	};
+	
+	componentDidMount () {
+		this._isMounted = true;
+		this.resize();
+		this.unbind();
+		
+		$(window).on('resize.popup orientationchange.popup', () => { this.resize(); });
+	};
+	
+	componentWillUnmount () {
+		this.unbind();
+	};
+	
+	unbind () {
+		$(window).unbind('resize.popup orientationchange.popup');
+	};
+	
+	resize () {
+		if (!this._isMounted) {
+			return;
+		};
+		
+		raf(() => {
+			let node = $(ReactDOM.findDOMNode(this));
+			node.css({ 
+				marginTop: -node.outerHeight() / 2,
+				marginLeft: -node.outerWidth() / 2
+			});			
+		});
+	};
+	
+};
+
+export default Popup;

src/ts/lib/dispatcher.tsx

@@ -1,12 +1,10 @@
 import { authStore } from 'ts/store';
 
-const { ipcRenderer } = window.require('electron');
 const bindings = require('bindings')('pipe');
 const protobuf = require('protobufjs');
 
 class Dispatcher {
 	
-	root: any = null;
 	typeMiddle: any = null;
 	typeClient: any = null;
 	id: number = 0;

src/ts/store/common.tsx

@@ -0,0 +1,26 @@
+import { observable, action, computed } from 'mobx';
+
+class CommonStore {
+	@observable public popupList: any[] = [];
+	
+	constructor () {
+	};
+	
+	@computed
+	get popups(): any[] {
+		return this.popupList;
+	}
+	
+	@action
+	popupOpen (id: string, param: any) {
+		this.popupList.push({ id: id, param: param });
+	};
+	
+	@action
+	popupCloseAll () {
+		this.popupList = [];
+	};
+	
+};
+
+export let commonStore: CommonStore = new CommonStore();

src/ts/store/index.tsx

@@ -1,5 +1,7 @@
+import { commonStore } from './common';
 import { authStore } from './auth';
 
 export {
+	commonStore,
 	authStore
 };