Skip to content

Commit de10a22

Browse files
ShMcKShMcK
committed
refactor components based on airbnb style guide
1 parent 5758cf6 commit de10a22

34 files changed

+403
-217
lines changed

‎lib/components/AppMenu/MenuLink.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || function (d, b) {
3+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4+
function __() { this.constructor = d; }
5+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6+
};
7+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
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;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var MenuItem_1 = require('material-ui/MenuItem');
19+
var actions_1 = require('../../actions');
20+
var MenuLink = (function (_super) {
21+
__extends(MenuLink, _super);
22+
function MenuLink() {
23+
_super.apply(this, arguments);
24+
}
25+
MenuLink.prototype.render = function () {
26+
var _a = this.props, route = _a.route, title = _a.title, routeTo = _a.routeTo;
27+
return React.createElement(MenuItem_1.default, {primaryText: title ? title : route, onTouchTap: routeTo.bind(this, route), key: route});
28+
};
29+
MenuLink = __decorate([
30+
react_redux_1.connect(null, function (dispatch) {
31+
return {
32+
routeTo: function (route) { return dispatch(actions_1.setRoute(route)); }
33+
};
34+
}),
35+
__metadata('design:paramtypes', [])
36+
], MenuLink);
37+
return MenuLink;
38+
}(React.Component));
39+
exports.MenuLink = MenuLink;

‎lib/components/AppMenu/index.js

+4-23
Original file line numberDiff line numberDiff line change
@@ -24,29 +24,10 @@ var IconButton_1 = require('material-ui/IconButton');
2424
var IconMenu_1 = require('material-ui/IconMenu');
2525
var MenuItem_1 = require('material-ui/MenuItem');
2626
var Divider_1 = require('material-ui/Divider');
27+
var MenuLink_1 = require('./MenuLink');
2728
var more_vert_1 = require('material-ui/svg-icons/navigation/more-vert');
2829
var close_1 = require('material-ui/svg-icons/navigation/close');
2930
var origin = { horizontal: 'right', vertical: 'top' };
30-
var MenuLink = (function (_super) {
31-
__extends(MenuLink, _super);
32-
function MenuLink() {
33-
_super.apply(this, arguments);
34-
}
35-
MenuLink.prototype.render = function () {
36-
var _a = this.props, route = _a.route, title = _a.title, routeTo = _a.routeTo;
37-
return React.createElement(MenuItem_1.default, {primaryText: title ? title : route, onTouchTap: routeTo.bind(this, route), key: route});
38-
};
39-
MenuLink = __decorate([
40-
react_redux_1.connect(null, function (dispatch) {
41-
return {
42-
routeTo: function (route) { return dispatch(actions_1.setRoute(route)); }
43-
};
44-
}),
45-
__metadata('design:paramtypes', [])
46-
], MenuLink);
47-
return MenuLink;
48-
}(React.Component));
49-
exports.MenuLink = MenuLink;
5031
var AppMenu = (function (_super) {
5132
__extends(AppMenu, _super);
5233
function AppMenu() {
@@ -57,7 +38,7 @@ var AppMenu = (function (_super) {
5738
switch (this.props.route) {
5839
case 'final':
5940
case 'page':
60-
return React.createElement(MenuLink, {route: 'progress'});
41+
return React.createElement(MenuLink_1.MenuLink, {route: 'progress'});
6142
case 'progress':
6243
return React.createElement(MenuItem_1.default, {onTouchTap: routeToPage, primaryText: 'page', key: 'page'});
6344
default: return null;
@@ -67,9 +48,9 @@ var AppMenu = (function (_super) {
6748
switch (this.props.route) {
6849
case 'final':
6950
case 'page':
70-
return (React.createElement("div", null, React.createElement(MenuLink, {route: 'progress'}), React.createElement(MenuLink, {route: 'tutorials'})));
51+
return (React.createElement("div", null, React.createElement(MenuLink_1.MenuLink, {route: 'progress'}), React.createElement(MenuLink_1.MenuLink, {route: 'tutorials'})));
7152
case 'progress':
72-
return React.createElement(MenuLink, {route: 'tutorials'});
53+
return React.createElement(MenuLink_1.MenuLink, {route: 'tutorials'});
7354
default: return null;
7455
}
7556
};

‎lib/components/Page/EditPage.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
"use strict";
2+
var React = require('react');
3+
var path = require('path');
4+
var mode_edit_1 = require('material-ui/svg-icons/editor/mode-edit');
5+
var editStyle = { position: 'absolute', top: '10px', right: '10px' };
6+
exports.EditPage = function (_a) {
7+
var editPath = _a.editPath;
8+
if (editPath && window.coderoad.edit) {
9+
var repoPath = path.join(window.coderoad.repo, 'edit', 'master', editPath);
10+
return React.createElement("a", {href: repoPath}, React.createElement(mode_edit_1.default, {style: editStyle}));
11+
}
12+
};

‎lib/components/Page/PageComplete/index.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
"use strict";
2+
var React = require('react');
3+
var List_1 = require('material-ui/List');
4+
var index_1 = require('../../index');
5+
exports.PageCompleteMessage = function (_a) {
6+
var page = _a.page;
7+
return (React.createElement("div", {className: 'cr-page-onComplete'}, page.completed && page.onPageComplete ?
8+
React.createElement(List_1.ListItem, {key: 'page-complete'}, React.createElement(index_1.Markdown, null, page.onPageComplete))
9+
: null));
10+
};

‎lib/components/Page/PageContent.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
"use strict";
2+
var React = require('react');
3+
var index_1 = require('../index');
4+
var Card_1 = require('material-ui/Card');
5+
exports.PageContent = function (_a) {
6+
var page = _a.page;
7+
return (React.createElement(Card_1.Card, {className: 'cr-page-content'}, React.createElement(Card_1.CardHeader, {title: page.title}), React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, null, page.description))));
8+
};

‎lib/components/Page/chapter/index.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
"use strict";
2+
var React = require('react');
3+
var index_1 = require('../../index');
4+
exports.Chapter = function (_a) {
5+
var chapter = _a.chapter;
6+
return (React.createElement("section", {className: 'cr-chapter'}, React.createElement(index_1.Markdown, null, chapter.title)));
7+
};

‎lib/components/Page/hints/HintButton.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || function (d, b) {
3+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4+
function __() { this.constructor = d; }
5+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6+
};
7+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
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;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var FlatButton_1 = require('material-ui/FlatButton');
19+
var actions_1 = require('../../../actions');
20+
var HintButton = (function (_super) {
21+
__extends(HintButton, _super);
22+
function HintButton() {
23+
_super.apply(this, arguments);
24+
}
25+
HintButton.prototype.render = function () {
26+
var _a = this.props, hintPosition = _a.hintPosition, hintsLength = _a.hintsLength, label = _a.label, type = _a.type, hintSet = _a.hintSet;
27+
switch (type) {
28+
case 'next':
29+
return React.createElement(FlatButton_1.default, {label: label, disabled: hintPosition > hintsLength - 2, onTouchTap: hintSet.bind(this, hintPosition + 1)});
30+
case 'prev':
31+
return React.createElement(FlatButton_1.default, {label: label, disabled: hintPosition === 0, onTouchTap: hintSet.bind(this, hintPosition - 1)});
32+
}
33+
};
34+
HintButton = __decorate([
35+
react_redux_1.connect(null, function (dispatch, state) {
36+
return {
37+
hintSet: function (position) { return dispatch(actions_1.hintPositionSet(position)); }
38+
};
39+
}),
40+
__metadata('design:paramtypes', [])
41+
], HintButton);
42+
return HintButton;
43+
}(React.Component));
44+
exports.HintButton = HintButton;

‎lib/components/Page/hints/index.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
"use strict";
2+
var React = require('react');
3+
var Card_1 = require('material-ui/Card');
4+
var index_1 = require('../../index');
5+
var HintButton_1 = require('./HintButton');
6+
var help_1 = require('material-ui/svg-icons/action/help');
7+
exports.Hints = function (_a) {
8+
var task = _a.task, hintPosition = _a.hintPosition;
9+
var hints = task && task.hints ? task.hints : null;
10+
if (hintPosition < 0 || !hints || !hints.length) {
11+
return null;
12+
}
13+
var hint = hints[hintPosition];
14+
return (React.createElement(Card_1.Card, {className: 'cr-task-hints'}, React.createElement(Card_1.CardHeader, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(Card_1.CardText, {className: 'cr-task-hint', expandable: true}, React.createElement(index_1.Markdown, null, hint)), React.createElement(Card_1.CardActions, {expandable: true, className: 'cr-task-hints-actions'}, React.createElement(HintButton_1.HintButton, {label: 'Previous', hintPosition: hintPosition, hintsLength: hints.length, type: 'prev'}), React.createElement(HintButton_1.HintButton, {label: 'Next', hintPosition: hintPosition, hintsLength: hints.length, type: 'next'}))));
15+
};

‎lib/components/Page/tasks/Task.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
"use strict";
2+
var __assign = (this && this.__assign) || Object.assign || function(t) {
3+
for (var s, i = 1, n = arguments.length; i < n; i++) {
4+
s = arguments[i];
5+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6+
t[p] = s[p];
7+
}
8+
return t;
9+
};
10+
var _this = this;
11+
var React = require('react');
12+
var index_1 = require('../../index');
13+
var TaskCheckbox_1 = require('./TaskCheckbox');
14+
var List_1 = require('material-ui/List');
15+
exports.Task = function (_a) {
16+
var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
17+
var isCompleted = index < taskPosition;
18+
return (React.createElement(List_1.ListItem, {key: index, className: 'cr-task', style: { backgroundColor: isCompleted ? '#c8e6c9' : 'inherit' }}, React.createElement(TaskCheckbox_1.TaskCheckbox, __assign({}, _this.props)), React.createElement("span", {className: 'cr-task-index'}, index + 1, "."), React.createElement("div", {className: 'cr-task-description'}, React.createElement(index_1.Markdown, null, task.description))));
19+
};

‎lib/components/Page/tasks/TaskCheckbox.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
"use strict";
2+
var React = require('react');
3+
var colors_1 = require('material-ui/styles/colors');
4+
var check_box_1 = require('material-ui/svg-icons/toggle/check-box');
5+
var check_box_outline_blank_1 = require('material-ui/svg-icons/toggle/check-box-outline-blank');
6+
var indeterminate_check_box_1 = require('material-ui/svg-icons/toggle/indeterminate-check-box');
7+
exports.TaskCheckbox = function (_a) {
8+
var index = _a.index, taskPosition = _a.taskPosition, testRun = _a.testRun;
9+
var icon = null;
10+
if (index < taskPosition) {
11+
icon = React.createElement(check_box_1.default, {color: colors_1.green500});
12+
}
13+
else if (index === taskPosition && testRun) {
14+
icon = React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500});
15+
}
16+
else {
17+
icon = React.createElement(check_box_outline_blank_1.default, null);
18+
}
19+
return React.createElement("span", {className: 'cr-task-checkbox'}, icon);
20+
};

‎lib/components/Page/tasks/index.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
"use strict";
2+
var React = require('react');
3+
var List_1 = require('material-ui/List');
4+
var Card_1 = require('material-ui/Card');
5+
var Subheader_1 = require('material-ui/Subheader');
6+
var Task_1 = require('./Task');
7+
function visibleTasks(tasks, taskPosition) {
8+
return tasks.slice(0, taskPosition + 1);
9+
}
10+
exports.Tasks = function (_a) {
11+
var tasks = _a.tasks, taskPosition = _a.taskPosition, testRun = _a.testRun;
12+
var visTasks = visibleTasks(tasks, taskPosition);
13+
return React.createElement(Card_1.Card, {className: 'cr-tasks'}, 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}); })));
14+
};

‎lib/components/Start/Welcome/index.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || function (d, b) {
3+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4+
function __() { this.constructor = d; }
5+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6+
};
7+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
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;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var actions_1 = require('../../../actions');
19+
var path_1 = require('path');
20+
var FlatButton_1 = require('material-ui/FlatButton');
21+
var welcomeStyle = {
22+
backgroundImage: "url(https://github.com/""%3C/span%3E%20%3Cspan%20class=pl-c1%3E+%3C/span%3E%20%3Cspan%20class=pl-s1%3Epath_1%3C/span%3E%3Cspan%20class=pl-kos%3E.%3C/span%3E%3Cspan%20class=pl-en%3Eresolve%3C/span%3E%3Cspan%20class=pl-kos%3E(%3C/span%3E%3Cspan%20class=pl-s1%3E__dirname%3C/span%3E%3Cspan%20class=pl-kos%3E,%3C/span%3E%20%3Cspan%20class=pl-s%3E'../../../../'%3C/span%3E%3Cspan%20class=pl-kos%3E,%3C/span%3E%20%3Cspan%20class=pl-s%3E'styles'%3C/span%3E%3Cspan%20class=pl-kos%3E,%3C/span%3E%20%3Cspan%20class=pl-s%3E'coderoad.jpg'%3C/span%3E%3Cspan%20class=pl-kos%3E) + "\")",
23+
backgroundRepeat: 'no-repeat',
24+
height: '350px',
25+
};
26+
var welcomeButtonStyle = {
27+
fontSize: '1.4em',
28+
padding: '5px 2px'
29+
};
30+
var Welcome = (function (_super) {
31+
__extends(Welcome, _super);
32+
function Welcome() {
33+
_super.apply(this, arguments);
34+
}
35+
Welcome.prototype.render = function () {
36+
return React.createElement("div", {style: welcomeStyle}, React.createElement("div", {className: 'cr-welcome'}, React.createElement("div", {className: 'title'}, "CodeRoad"), React.createElement("div", {className: 'tagline'}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(FlatButton_1.default, {label: 'Start', onTouchTap: this.props.routeToTutorials, secondary: true, style: welcomeButtonStyle})));
37+
};
38+
Welcome = __decorate([
39+
react_redux_1.connect(null, function (dispatch) {
40+
return {
41+
routeToTutorials: function () { return dispatch(actions_1.setRoute('tutorials')); }
42+
};
43+
}),
44+
__metadata('design:paramtypes', [])
45+
], Welcome);
46+
return Welcome;
47+
}(React.Component));
48+
exports.Welcome = Welcome;

‎lib/components/page/index.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
1414
};
1515
var React = require('react');
1616
var ReactDOM = require('react-dom');
17-
var content_1 = require('./content');
18-
var tasks_1 = require('./tasks/tasks');
19-
var hints_1 = require('./hints/hints');
20-
var page_complete_1 = require('./complete/page-complete');
17+
var PageContent_1 = require('./PageContent');
18+
var Tasks_1 = require('./Tasks');
19+
var Hints_1 = require('./Hints');
20+
var PageComplete_1 = require('./PageComplete');
2121
var PageToolbar_1 = require('./PageToolbar');
2222
var ProgressBar_1 = require('./ProgressBar');
2323
var pageStyle = {
@@ -36,7 +36,7 @@ var Page = (function (_super) {
3636
var _a = this.props, page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, testRun = _a.testRun;
3737
var task = taskPosition <= tasks.length ? tasks[taskPosition] : null;
3838
var allComplete = taskPosition >= tasks.length;
39-
return (React.createElement("section", {className: 'cr-page'}, React.createElement(content_1.PageContent, __assign({}, this.props)), React.createElement(tasks_1.Tasks, __assign({}, this.props)), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement(hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(PageToolbar_1.PageToolbar, __assign({}, this.props), React.createElement(ProgressBar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length}))));
39+
return (React.createElement("section", {className: 'cr-page'}, React.createElement(PageContent_1.PageContent, __assign({}, this.props)), React.createElement(Tasks_1.Tasks, __assign({}, this.props)), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(PageComplete_1.PageCompleteMessage, {page: page}), React.createElement(Hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(PageToolbar_1.PageToolbar, __assign({}, this.props), React.createElement(ProgressBar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length}))));
4040
};
4141
return Page;
4242
}(React.Component));

0 commit comments

Comments
 (0)