connect TopPanel, toggle hidden

ShMcK · ShMcK · commit 5f7e5a0791d1 · 2016-06-01T21:16:28.000-07:00
diff --git a/lib/components/Routes/index.js b/lib/components/Routes/index.js
@@ -14,6 +14,7 @@ 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() {
@@ -22,6 +23,7 @@ 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));
diff --git a/lib/components/TopPanel/Top.js b/lib/components/TopPanel/Top.js
@@ -7,8 +7,12 @@ var Top = {
         _this.top = document.createElement('div');
         _this.top.setAttribute('id', 'crb-top');
         _this.top.style.height = '33px';
+        _this.top.hidden = true;
         return _this.top;
     },
+    toggle: function (open) {
+        _this.top.hidden = open || !_this.top.hidden;
+    },
     unmount: function () {
         ReactDOM.unmountComponentAtNode(_this.root);
     }
diff --git a/lib/components/TopPanel/TopPanel.js b/lib/components/TopPanel/TopPanel.js
@@ -1,5 +1,20 @@
 "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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 var React = require('react');
+var react_redux_1 = require('react-redux');
 var Tabs_1 = require('material-ui/Tabs');
 var add_1 = require('material-ui/svg-icons/content/add');
 var pageTabs_1 = require('./pageTabs');
@@ -8,9 +23,22 @@ var styles = {
         marginRight: '400px',
     },
 };
-var TopPanel = function (_a) {
-    var tutorial = _a.tutorial;
-    return (React.createElement(Tabs_1.Tabs, {style: styles.tabs}, pageTabs_1.default(tutorial), React.createElement(Tabs_1.Tab, {icon: React.createElement(add_1.default, null)})));
-};
+var TopPanel = (function (_super) {
+    __extends(TopPanel, _super);
+    function TopPanel() {
+        _super.apply(this, arguments);
+    }
+    TopPanel.prototype.render = function () {
+        return (React.createElement(Tabs_1.Tabs, {style: styles.tabs}, pageTabs_1.default(this.props.tutorial), React.createElement(Tabs_1.Tab, {icon: React.createElement(add_1.default, null)})));
+    };
+    TopPanel = __decorate([
+        react_redux_1.connect(function (_a) {
+            var tutorial = _a.tutorial;
+            return { tutorial: tutorial };
+        }), 
+        __metadata('design:paramtypes', [])
+    ], TopPanel);
+    return TopPanel;
+}(React.Component));
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = TopPanel;
diff --git a/lib/components/TopPanel/pageTabs.js b/lib/components/TopPanel/pageTabs.js
@@ -3,6 +3,7 @@ var React = require('react');
 var Tabs_1 = require('material-ui/Tabs');
 var styles = {};
 function pageTabs(tutorial) {
+    console.log('tut', tutorial);
     if (!tutorial || !tutorial.pages) {
         return null;
     }
diff --git a/lib/components/TopPanel/render.js b/lib/components/TopPanel/render.js
@@ -7,7 +7,7 @@ var TopPanel_1 = require('./TopPanel');
 var theme_1 = require('../styles/theme');
 var MuiThemeProvider_1 = require('material-ui/styles/MuiThemeProvider');
 function render(target) {
-    ReactDOM.render(React.createElement(react_redux_1.Provider, {store: store_1.default}, React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.default}, React.createElement(TopPanel_1.default, {tutorial: store_1.default.tutorial}))), target);
+    ReactDOM.render(React.createElement(react_redux_1.Provider, {store: store_1.default}, React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.default}, React.createElement(TopPanel_1.default, null))), target);
 }
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = render;
diff --git a/src/components/Routes/index.tsx b/src/components/Routes/index.tsx
@@ -1,5 +1,6 @@
 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: CR.Checks, pagePosition: CR.PagePosition,
@@ -8,6 +9,7 @@ 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} />;
diff --git a/src/components/TopPanel/Top.ts b/src/components/TopPanel/Top.ts
@@ -6,8 +6,12 @@ const Top = {
     this.top = document.createElement('div');
     this.top.setAttribute('id', 'crb-top');
     this.top.style.height = '33px';
+    this.top.hidden = true;
     return this.top;
   },
+  toggle: (open?: boolean) => {
+    this.top.hidden = open || !this.top.hidden;
+  },
   unmount: () => {
     ReactDOM.unmountComponentAtNode(this.root);
   }
diff --git a/src/components/TopPanel/TopPanel.tsx b/src/components/TopPanel/TopPanel.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {connect} from 'react-redux';
 import {Tabs, Tab} from 'material-ui/Tabs';
 import Add from 'material-ui/svg-icons/content/add';
 import pageTabs from './pageTabs';
@@ -9,12 +10,18 @@ const styles = {
   },
 };
 
-const TopPanel: React.StatelessComponent<{
-  tutorial: CR.Tutorial
-}> = ({tutorial}) => (
-   <Tabs style={styles.tabs}>
-    {pageTabs(tutorial)}
-    <Tab icon={<Add />} />
-  </Tabs>
-);
-export default TopPanel;
+@connect(({tutorial}) => {
+  return { tutorial };
+})
+export default class TopPanel extends React.Component<{
+  tutorial?: CR.Tutorial
+}, {}> {
+  render() {
+    return (
+      <Tabs style={styles.tabs}>
+       {pageTabs(this.props.tutorial)}
+       <Tab icon={<Add />} />
+     </Tabs>
+   );
+  }
+}
diff --git a/src/components/TopPanel/pageTabs.tsx b/src/components/TopPanel/pageTabs.tsx
@@ -4,6 +4,7 @@ import {Tab} from 'material-ui/Tabs';
 const styles = {};
 
 export default function pageTabs(tutorial: CR.Tutorial) {
+  console.log('tut', tutorial);
   if (!tutorial || !tutorial.pages) { return null; }
   return tutorial.pages.map((page: CR.Page) => {
     return (
diff --git a/src/components/TopPanel/render.tsx b/src/components/TopPanel/render.tsx
@@ -10,7 +10,7 @@ export default function render(target: HTMLElement) {
   ReactDOM.render(
       <Provider store={store}>
         <MuiThemeProvider muiTheme={muiTheme}>
-          <TopPanel tutorial={store.tutorial} />
+          <TopPanel />
         </MuiThemeProvider>
       </Provider>,
     target

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ var React = require('react');`
`3`	`3`	`var Tabs_1 = require('material-ui/Tabs');`
`4`	`4`	`var styles = {};`
`5`	`5`	`function pageTabs(tutorial) {`
	`6`	`+ console.log('tut', tutorial);`
`6`	`7`	`if (!tutorial \|\| !tutorial.pages) {`
`7`	`8`	`return null;`
`8`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ var TopPanel_1 = require('./TopPanel');`
`7`	`7`	`var theme_1 = require('../styles/theme');`
`8`	`8`	`var MuiThemeProvider_1 = require('material-ui/styles/MuiThemeProvider');`
`9`	`9`	`function render(target) {`
`10`		`- ReactDOM.render(React.createElement(react_redux_1.Provider, {store: store_1.default}, React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.default}, React.createElement(TopPanel_1.default, {tutorial: store_1.default.tutorial}))), target);`
	`10`	`+ ReactDOM.render(React.createElement(react_redux_1.Provider, {store: store_1.default}, React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.default}, React.createElement(TopPanel_1.default, null))), target);`
`11`	`11`	`}`
`12`	`12`	`Object.defineProperty(exports, "__esModule", { value: true });`
`13`	`13`	`exports.default = render;`