refactor mount as root component

Author: ShMcK

lib/atom/main.js

@@ -1,6 +1,6 @@
 "use strict";
 var render_1 = require('../components/render');
-var mount_1 = require('../components/mount');
+var root_1 = require('../components/root');
 var polyfills_1 = require('../services/polyfills');
 var subscriptions_1 = require('./subscriptions');
 var store_1 = require('../store');
@@ -9,7 +9,7 @@ var Main = (function () {
     function Main() {
         polyfills_1.default();
         store_1.store.dispatch(actions_1.setupVerify());
-        this.root = mount_1.initRoot();
+        this.root = root_1.Root.init();
     }
     Main.prototype.activate = function () {
         atom.workspace.addRightPanel({
@@ -30,7 +30,7 @@ var Main = (function () {
         subscriptions_1.onDeactivate();
     };
     Main.prototype.toggle = function () {
-        mount_1.togglePanel();
+        root_1.Root.toggle();
     };
     return Main;
 }());

lib/atom/subscriptions.js

@@ -2,12 +2,12 @@
 var CompositeDisposable = require('atom').CompositeDisposable;
 var store_1 = require('../store');
 var actions_1 = require('../actions');
-var mount_1 = require('../components/mount');
+var root_1 = require('../components/root');
 var subscriptions = null;
 function onActivate() {
     subscriptions = new CompositeDisposable;
     subscriptions.add(atom.commands.add('atom-workspace', {
-        'cr-viewer:toggle': mount_1.togglePanel,
+        'cr-viewer:toggle': root_1.Root.toggle,
     }));
     atom.workspace.observeTextEditors(function (editor) {
         subscriptions.add(editor.onDidSave(function () {
@@ -26,7 +26,7 @@ function onActivate() {
 exports.onActivate = onActivate;
 function onDeactivate() {
     window.onresize = null;
-    mount_1.unmount();
+    root_1.Root.unmount();
     subscriptions.dispose();
 }
 exports.onDeactivate = onDeactivate;

lib/components/App.js

@@ -35,7 +35,6 @@ var App = (function (_super) {
         _super.apply(this, arguments);
     }
     App.prototype.render = function () {
-        console.log(this.props.store);
         return (React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(index_1.AppMenu, __assign({}, this.props.store)), React.createElement(Routes_1.Routes, __assign({}, this.props.store)), React.createElement(index_1.Alert, __assign({}, this.props.store))));
     };
     App = __decorate([

lib/components/AppMenu/Quit/index.js

@@ -15,7 +15,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 var React = require('react');
 var react_redux_1 = require('react-redux');
-var mount_1 = require('../../mount');
+var root_1 = require('../../root');
 var subscriptions_1 = require('../../../atom/subscriptions');
 var MenuItem_1 = require('material-ui/MenuItem');
 var styles = {
@@ -34,7 +34,7 @@ var Quit = (function (_super) {
         react_redux_1.connect(null, function (dispatch) {
             return {
                 quit: function () {
-                    mount_1.togglePanel();
+                    root_1.Root.toggle();
                     subscriptions_1.onDeactivate();
                 }
             };

lib/components/AppMenu/menuIconLeft.js

@@ -1,9 +1,9 @@
 "use strict";
 var React = require('react');
 var IconButton_1 = require('material-ui/IconButton');
-var mount_1 = require('../mount');
+var root_1 = require('../root');
 var close_1 = require('material-ui/svg-icons/navigation/close');
 function menuIconLeft() {
-    return (React.createElement(IconButton_1.default, {onClick: mount_1.togglePanel}, React.createElement(close_1.default, null)));
+    return (React.createElement(IconButton_1.default, {onClick: root_1.Root.toggle}, React.createElement(close_1.default, null)));
 }
 exports.menuIconLeft = menuIconLeft;

lib/components/Page/index.js

@@ -6,9 +6,7 @@ var Hints_1 = require('./Hints');
 var PageToolbar_1 = require('./PageToolbar');
 var ProgressBar_1 = require('./ProgressBar');
 var styles = {
-    height: '100%',
     width: '100%',
-    position: 'relative',
     overflowY: 'scroll',
 };
 exports.Page = function (_a) {

lib/components/mount.js

@@ -1,19 +1,14 @@
 "use strict";
+var _this = this;
 var ReactDOM = require('react-dom');
-var rootName = 'crv';
-var root = null;
-function unmount() {
-    ReactDOM.unmountComponentAtNode(root);
-}
-exports.unmount = unmount;
-function initRoot() {
-    root = document.createElement('div');
-    root.setAttribute('id', rootName);
-    root.hidden = true;
-    return root;
-}
-exports.initRoot = initRoot;
-function togglePanel() {
-    root.hidden = !root.hidden;
-}
-exports.togglePanel = togglePanel;
+exports.Root = {
+    root: null,
+    init: function () {
+        _this.root = document.createElement('div');
+        _this.root.setAttribute('id', 'crv');
+        _this.root.hidden = true;
+        return _this.root;
+    },
+    toggle: function () { return _this.root.hidden = !_this.root.hidden; },
+    unmount: function () { return ReactDOM.unmountComponentAtNode(_this.root); }
+};

lib/components/remove-later.js

@@ -1,2 +1,3 @@
+"use strict";
 var injectTapEventPlugin = require('react-tap-event-plugin');
 injectTapEventPlugin();

lib/components/root.js

@@ -0,0 +1,14 @@
+"use strict";
+var _this = this;
+var ReactDOM = require('react-dom');
+exports.Root = {
+    root: null,
+    init: function () {
+        _this.root = document.createElement('div');
+        _this.root.setAttribute('id', 'crv');
+        _this.root.hidden = true;
+        return _this.root;
+    },
+    toggle: function () { return _this.root.hidden = !_this.root.hidden; },
+    unmount: function () { return ReactDOM.unmountComponentAtNode(_this.root); }
+};

src/atom/main.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {render} from '../components/render';
-import {initRoot, togglePanel} from '../components/mount';
+import {Root} from '../components/root';
 import loadPolyfills from '../services/polyfills';
 import {onActivate, onDeactivate, addToStatusBar} from './subscriptions';
 
@@ -13,7 +13,7 @@ class Main {
   constructor() {
     loadPolyfills(); // remove with later version of Chrome
     store.dispatch(setupVerify());
-    this.root = initRoot();
+    this.root = Root.init();
   }
   activate(): void {
     // create atom panel
@@ -38,7 +38,7 @@ class Main {
     onDeactivate();
   }
   toggle(): void {
-    togglePanel();
+    Root.toggle();
   }
 };
 export = new Main();

src/atom/subscriptions.ts

@@ -1,7 +1,7 @@
 const CompositeDisposable = require('atom').CompositeDisposable;
 import {store} from '../store';
 import {testRun, alertReplay} from '../actions';
-import {unmount, togglePanel} from '../components/mount';
+import {Root} from '../components/root';
 
 let subscriptions = null;
 
@@ -12,7 +12,7 @@ export function onActivate(): AtomCore.Disposable {
    */
   subscriptions.add(
     atom.commands.add('atom-workspace', {
-      'cr-viewer:toggle': togglePanel,
+      'cr-viewer:toggle': Root.toggle,
     }));
 
   // run tests on save
@@ -42,7 +42,7 @@ export function onDeactivate(): void {
   // unmount React
   // TODO: animate close first
   window.onresize = null;
-  unmount();
+  Root.unmount();
   // cleanup subscriptions
   subscriptions.dispose();
 }

src/components/App.tsx

@@ -13,7 +13,6 @@ window.onresize = function() {
 })
 export class App extends React.Component<{store?: CR.State}, {}> {
   render(): React.ReactElement<{}> {
-    console.log(this.props.store);
     return (
       <section
         className='cr'

src/components/AppMenu/Quit/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
-import {togglePanel} from '../../mount';
+import {Root} from '../../root';
 import {onDeactivate} from '../../../atom/subscriptions';
 import MenuItem from 'material-ui/MenuItem';
 
@@ -12,7 +12,7 @@ const styles = {
 @connect(null, (dispatch) => {
   return {
     quit: () => {
-      togglePanel();
+      Root.toggle();
       onDeactivate();
     }
   };

src/components/AppMenu/menuIconLeft.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import IconButton from 'material-ui/IconButton';
-import {togglePanel} from '../mount';
+import {Root} from '../root';
 import NavigationClose from 'material-ui/svg-icons/navigation/close';
 
 export function menuIconLeft() {
   return (
-    <IconButton onClick={togglePanel}>
+    <IconButton onClick={Root.toggle}>
       <NavigationClose />
     </IconButton>
   );

src/components/Page/index.tsx

@@ -8,9 +8,7 @@ import {PageToolbar} from './PageToolbar';
 import {ProgressBar} from './ProgressBar';
 
 const styles = {
-  height: '100%',
   width: '100%',
-  position: 'relative',
   overflowY: 'scroll',
 };
 

src/components/mount.ts

@@ -1,2 +1,2 @@
-let injectTapEventPlugin = require('react-tap-event-plugin');
+import * as injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();

src/components/remove-later.ts

@@ -0,0 +1,14 @@
+import * as ReactDOM from 'react-dom';
+
+export const Root = {
+  root: null,
+  init: (): HTMLElement => {
+    this.root = document.createElement('div');
+    this.root.setAttribute('id', 'crv');
+    // mark panel visibility as hidden, triggers immediately
+    this.root.hidden = true;
+    return this.root;
+  },
+  toggle: () => this.root.hidden = !this.root.hidden,
+  unmount: () => ReactDOM.unmountComponentAtNode(this.root)
+};

src/components/root.ts

@@ -66,8 +66,8 @@
         "src/atom/main.ts",
         "src/atom/subscriptions.ts",
         "src/components/index.ts",
-        "src/components/mount.ts",
         "src/components/remove-later.ts",
+        "src/components/root.ts",
         "src/components/theme.ts",
         "src/reducers/alert/index.ts",
         "src/reducers/checks/action-setup.ts",