open TopPanel only on Page

Author: ShMcK

lib/components/Page/index.js

@@ -1,19 +1,35 @@
 "use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
 var React = require('react');
 var index_1 = require('../index');
 var Tasks_1 = require('./Tasks');
+var Top_1 = require('../TopPanel/Top');
 var styles = {
     width: '100%',
     overflowY: 'scroll',
 };
-var Page = function (_a) {
-    var tutorial = _a.tutorial, pagePosition = _a.pagePosition;
-    var page = tutorial.pages[pagePosition];
-    console.log(page);
-    if (!page) {
-        return null;
+var Page = (function (_super) {
+    __extends(Page, _super);
+    function Page() {
+        _super.apply(this, arguments);
     }
-    return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(index_1.ContentCard, {title: page.title, content: page.description}), React.createElement(Tasks_1.default, {tasks: page.tasks, page: page})));
-};
+    Page.prototype.componentDidMount = function () {
+        Top_1.default.toggle(true);
+    };
+    Page.prototype.render = function () {
+        var _a = this.props, tutorial = _a.tutorial, pagePosition = _a.pagePosition;
+        var page = tutorial.pages[pagePosition];
+        if (!page) {
+            return null;
+        }
+        return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(index_1.ContentCard, {title: page.title, content: page.description}), React.createElement(Tasks_1.default, {tasks: page.tasks, page: page})));
+    };
+    return Page;
+}(React.Component));
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Page;
+;

lib/components/Routes/index.js

@@ -14,7 +14,6 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
 };
 var React = require('react');
 var index_1 = require('../index');
-var Top_1 = require('../TopPanel/Top');
 var Routes = (function (_super) {
     __extends(Routes, _super);
     function Routes() {
@@ -23,7 +22,6 @@ var Routes = (function (_super) {
     Routes.prototype.render = function () {
         switch (this.props.route) {
             case 'page':
-                Top_1.default.toggle(false);
                 return React.createElement(index_1.Page, __assign({}, this.props));
             case 'start':
                 return React.createElement(index_1.Start, __assign({}, this.props));

lib/components/TopPanel/Top.js

@@ -11,7 +11,7 @@ var Top = {
         return _this.top;
     },
     toggle: function (open) {
-        _this.top.hidden = open || !_this.top.hidden;
+        _this.top.hidden = !open || !_this.top.hidden;
     },
     unmount: function () {
         ReactDOM.unmountComponentAtNode(_this.root);

lib/components/TutorialConfig/index.js

@@ -23,6 +23,7 @@ var RaisedButton_1 = require('material-ui/RaisedButton');
 var actions_1 = require('../../actions');
 var languageItems_1 = require('./languageItems');
 var runnerItems_1 = require('./runnerItems');
+var Top_1 = require('../TopPanel/Top');
 var styles = {
     card: {
         margin: '10px',
@@ -41,6 +42,9 @@ var TutorialConfig = (function (_super) {
             pj: this.props.packageJson
         };
     }
+    TutorialConfig.prototype.componentDidMount = function () {
+        Top_1.default.toggle(false);
+    };
     TutorialConfig.prototype.handleText = function (prop, event) {
         this.handleChange(prop, event.target.value);
     };

lib/components/TutorialInfo/index.js

@@ -19,6 +19,7 @@ var TextField_1 = require('material-ui/TextField');
 var Card_1 = require('material-ui/Card');
 var RaisedButton_1 = require('material-ui/RaisedButton');
 var actions_1 = require('../../actions');
+var Top_1 = require('../TopPanel/Top');
 var styles = {
     margin: '10px',
     padding: '30px 20px',
@@ -35,6 +36,9 @@ var TutorialInfo = (function (_super) {
             pj: this.props.packageJson
         };
     }
+    TutorialInfo.prototype.componentDidMount = function () {
+        Top_1.default.toggle(false);
+    };
     TutorialInfo.prototype.handleText = function (prop, event) {
         this.handleChange(prop, event.target.value);
     };

src/components/Page/index.tsx

@@ -3,33 +3,36 @@ import Divider from 'material-ui/Divider';
 import {Card} from 'material-ui/Card';
 import {ContentCard} from '../index';
 import Tasks from './Tasks';
+import Top from '../TopPanel/Top';
 
 const styles = {
   width: '100%',
   overflowY: 'scroll',
 };
 
-const Page: React.StatelessComponent<{
+export default class Page extends React.Component<{
   tutorial: CR.Tutorial, pagePosition: number
-}> = ({tutorial, pagePosition}) => {
-  const page = tutorial.pages[pagePosition];
-  console.log(page);
+}, {}> {
+  componentDidMount() {
+    Top.toggle(true);
+  }
+  render() {
+    const {tutorial, pagePosition} = this.props;
+    const page = tutorial.pages[pagePosition];
 
-  if (!page) { return null; }
+    if (!page) { return null; }
 
-  return (
-    <section style={styles} className='cr-page'>
-      <ContentCard
-        title={page.title}
-        content={page.description}
-      />
-
-      <Tasks
-        tasks={page.tasks}
-        page={page}
-      />
-
-    </section>
-  );
+    return (
+      <section style={styles} className='cr-page'>
+        <ContentCard
+          title={page.title}
+          content={page.description}
+        />
+        <Tasks
+          tasks={page.tasks}
+          page={page}
+        />
+      </section>
+    );
+  }
 };
-export default Page;

src/components/Routes/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {Page, Start, TutorialConfig, TutorialInfo} from '../index';
-import Top from '../TopPanel/Top';
 
 export default class Routes extends React.Component<{
   route: string, checks: Builder.Checks, pagePosition: CR.PagePosition,
@@ -9,7 +8,6 @@ export default class Routes extends React.Component<{
   render() {
     switch (this.props.route) {
       case 'page':
-        Top.toggle(false);
         return <Page {...this.props} />;
       case 'start':
         return <Start {...this.props} />;

src/components/TopPanel/Top.ts

@@ -10,7 +10,7 @@ const Top = {
     return this.top;
   },
   toggle: (open?: boolean) => {
-    this.top.hidden = open || !this.top.hidden;
+    this.top.hidden = !open || !this.top.hidden;
   },
   unmount: () => {
     ReactDOM.unmountComponentAtNode(this.root);

src/components/TutorialConfig/index.tsx

@@ -9,6 +9,7 @@ import RaisedButton from 'material-ui/RaisedButton';
 import {pjSave, tutorialInit, routeSet} from '../../actions';
 import languageItems from './languageItems';
 import runnerItems from './runnerItems';
+import Top from '../TopPanel/Top';
 
 const styles = {
   card: {
@@ -43,6 +44,9 @@ export default class TutorialConfig extends React.Component <{
         pj: this.props.packageJson
     };
   }
+  componentDidMount() {
+    Top.toggle(false);
+  }
   handleText(prop, event) {
     this.handleChange(prop, event.target.value);
   }

src/components/TutorialInfo/index.tsx

@@ -3,9 +3,10 @@ import {connect} from 'react-redux';
 import TextField from 'material-ui/TextField';
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
-import {Card, CardHeader} from 'material-ui/Card'
+import {Card, CardHeader} from 'material-ui/Card';
 import RaisedButton from 'material-ui/RaisedButton';
 import {pjSave, routeSet} from '../../actions';
+import Top from '../TopPanel/Top';
 
 const styles = {
   margin: '10px',
@@ -38,6 +39,9 @@ export default class TutorialInfo extends React.Component<{
       pj: this.props.packageJson
     };
   }
+  componentDidMount() {
+    Top.toggle(false);
+  }
   handleText(prop, event) {
     this.handleChange(prop, event.target.value);
   }