fix React deprecations/warnings

Author: ShMcK

lib/components/Alert/index.js

@@ -1,4 +1,4 @@
-'use strict';
+"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; }
@@ -15,7 +15,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 var React = require('react');
 var react_redux_1 = require('react-redux');
-var Action = require('../../actions');
+var actions_1 = require('../../actions');
 var Snackbar_1 = require('material-ui/Snackbar');
 var classNames = require('classnames');
 var defaultAlert = {
@@ -35,7 +35,7 @@ var Alert = (function (_super) {
     Alert = __decorate([
         react_redux_1.connect(null, function (dispatch) {
             return {
-                alertToggle: function () { return dispatch(Action.alertToggle()); },
+                alertToggle: function () { return dispatch(actions_1.alertToggle()); },
             };
         }), 
         __metadata('design:paramtypes', [])

lib/components/Page/PageComplete/index.js

@@ -7,7 +7,6 @@ var styles = {
     backgroundColor: colors_1.cyan500,
     zIndex: '0',
     position: 'fixed',
-    bottom: '20px',
     padding: '10px 15px 30px',
     right: '0px',
     margin: '0',

lib/components/Page/PageToolbar/index.js

@@ -7,8 +7,8 @@ var Continue_1 = require('./Continue');
 var styles = {
     zIndex: '1000',
     position: 'fixed',
-    bottom: '0',
-    right: '0',
+    bottom: '0px',
+    right: '0px',
     height: '60px',
     width: '400px',
 };

lib/components/Page/Tasks/Task.js renamed to lib/components/Page/Task/index.js

@@ -1,7 +1,7 @@
 "use strict";
 var React = require('react');
 var index_1 = require('../../index');
-var TaskCheckbox_1 = require('./TaskCheckbox');
+var taskCheckbox_1 = require('./taskCheckbox');
 var List_1 = require('material-ui/List');
 var colors_1 = require('material-ui/styles/colors');
 var styles = {
@@ -27,5 +27,5 @@ function getStatus(index, taskPosition, testRun) {
 exports.Task = function (_a) {
     var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
     var backgroundColor = getStatus(index, taskPosition, testRun);
-    return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles, { backgroundColor: backgroundColor })}, testRun ? React.createElement(TaskCheckbox_1.TaskCheckbox, null) : null, React.createElement("span", {style: indexStyles}, index + 1, "."), React.createElement("div", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, task.description))));
+    return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles, { backgroundColor: backgroundColor })}, taskCheckbox_1.taskCheckbox(testRun), React.createElement("span", {style: indexStyles}, index + 1, "."), React.createElement("div", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, task.description))));
 };

lib/components/Page/Task/taskCheckbox.js

@@ -0,0 +1,16 @@
+"use strict";
+var React = require('react');
+var colors_1 = require('material-ui/styles/colors');
+var indeterminate_check_box_1 = require('material-ui/svg-icons/toggle/indeterminate-check-box');
+var styles = {
+    position: 'absolute',
+    top: '15px'
+};
+function taskCheckbox(testRun) {
+    if (!testRun) {
+        return null;
+    }
+    return (React.createElement("span", {style: styles}, React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500})));
+}
+exports.taskCheckbox = taskCheckbox;
+;

lib/components/Page/Tasks/TaskCheckbox.js

@@ -3,14 +3,15 @@ var React = require('react');
 var List_1 = require('material-ui/List');
 var Card_1 = require('material-ui/Card');
 var Subheader_1 = require('material-ui/Subheader');
-var Task_1 = require('./Task');
+var Task_1 = require('../Task');
 var colors_1 = require('material-ui/styles/colors');
 function visibleTasks(tasks, taskPosition) {
     return tasks.slice(0, taskPosition + 1);
 }
+var margin = '10px 5px';
 exports.Tasks = function (_a) {
     var tasks = _a.tasks, taskPosition = _a.taskPosition, testRun = _a.testRun, completed = _a.completed;
     var visTasks = visibleTasks(tasks, taskPosition);
-    var bg = completed ? colors_1.lightGreen200 : 'white';
-    return (React.createElement(Card_1.Card, {style: { margin: '10px 5px', backGroundColor: bg }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return (React.createElement(Task_1.Task, {key: index, index: index, task: task, taskPosition: taskPosition, testRun: testRun})); }))));
+    var backgroundColor = completed ? colors_1.lightGreen200 : 'white';
+    return (React.createElement(Card_1.Card, {style: { backgroundColor: backgroundColor, margin: margin }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return (React.createElement(Task_1.Task, {key: index, index: index, task: task, taskPosition: taskPosition, testRun: testRun})); }))));
 };

lib/components/Page/Tasks/index.js

@@ -4,13 +4,13 @@ var List_1 = require('material-ui/List');
 var ProgressPage_1 = require('../ProgressPage');
 var index_1 = require('../../index');
 var styles = {
-    marginBottom: '0'
+    marginBottom: '0px'
 };
 var descriptionStyles = {
     fontSize: '14px'
 };
 exports.ProgressChapter = function (_a) {
     var chapter = _a.chapter, chapterIndex = _a.chapterIndex, position = _a.position;
     var isActive = chapterIndex === position.chapter;
-    return (React.createElement(List_1.ListItem, {key: 'c' + chapterIndex, className: isActive ? 'isActive' : null, style: styles, initiallyOpen: chapterIndex === 0, primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) { return (React.createElement(ProgressPage_1.ProgressPage, {key: chapterIndex + '_' + pageIndex, pageIndex: pageIndex, page: page, chapterIndex: chapterIndex, position: position})); })}, React.createElement("h3", null, chapterIndex + 1, ". ", chapter.title), React.createElement("span", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, chapter.description))));
+    return (React.createElement(List_1.ListItem, {key: chapterIndex, className: isActive ? 'isActive' : null, style: styles, initiallyOpen: chapterIndex === 0, primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) { return (React.createElement(ProgressPage_1.ProgressPage, {key: pageIndex, pageIndex: pageIndex, page: page, chapterIndex: chapterIndex, position: position})); })}, React.createElement("h3", null, chapterIndex + 1, ". ", chapter.title), React.createElement("span", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, chapter.description))));
 };

lib/components/Progress/ProgressChapter/index.js

@@ -21,7 +21,7 @@ var progressIcon_1 = require('../progressIcon');
 var colors_1 = require('material-ui/styles/colors');
 var styles = {
     paddingLeft: '15px',
-    marginTop: '0',
+    marginTop: '0px',
 };
 var ProgressPage = (function (_super) {
     __extends(ProgressPage, _super);
@@ -40,7 +40,7 @@ var ProgressPage = (function (_super) {
         var _a = this.props, page = _a.page, position = _a.position, chapterIndex = _a.chapterIndex, pageIndex = _a.pageIndex, selectPage = _a.selectPage;
         var isActive = chapterIndex === position.chapter && pageIndex === position.page;
         var canActivate = this.canActivate(isActive);
-        return (React.createElement(List_1.ListItem, {style: Object.assign({}, styles, !canActivate ? { color: colors_1.grey400 } : {}), primaryText: (pageIndex + 1) + ". " + page.title, secondaryText: canActivate ? page.description : '', leftIcon: progressIcon_1.progressIcon(page.completed, isActive), onClick: canActivate
+        return (React.createElement(List_1.ListItem, {key: pageIndex, style: Object.assign({}, styles, !canActivate ? { color: colors_1.grey400 } : {}), primaryText: (pageIndex + 1) + ". " + page.title, secondaryText: canActivate ? page.description : '', leftIcon: progressIcon_1.progressIcon(page.completed, isActive), onClick: canActivate
             ? selectPage.bind(this, {
                 chapter: chapterIndex,
                 page: pageIndex

lib/components/Progress/ProgresPage/index.js renamed to lib/components/Progress/ProgressPage/index.js

@@ -6,9 +6,9 @@ var Subheader_1 = require('material-ui/Subheader');
 var ProgressChapter_1 = require('./ProgressChapter');
 var pageStyle = {
     width: '100%',
-    margin: 0,
+    margin: '0px',
 };
 exports.Progress = function (_a) {
     var progress = _a.progress, position = _a.position, info = _a.info;
-    return (React.createElement(Paper_1.default, {className: 'cr-progress', style: pageStyle, zDepth: 1}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, info.title), progress.chapters.map(function (chapter, chapterIndex) { return (React.createElement(ProgressChapter_1.ProgressChapter, {chapter: chapter, chapterIndex: chapterIndex, position: position})); }))));
+    return (React.createElement(Paper_1.default, {style: pageStyle}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, info.title), progress.chapters.map(function (chapter, chapterIndex) { return (React.createElement(ProgressChapter_1.ProgressChapter, {key: chapterIndex, chapter: chapter, chapterIndex: chapterIndex, position: position})); }))));
 };