Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

Commit de10a22

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

File tree

34 files changed

+403
-217
lines changed

34 files changed

+403
-217
lines changed

‎lib/components/AppMenu/MenuLink.js‎

Lines changed: 39 additions & 0 deletions
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‎

Lines changed: 4 additions & 23 deletions
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‎

Lines changed: 12 additions & 0 deletions
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‎

Lines changed: 10 additions & 0 deletions
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‎

Lines changed: 8 additions & 0 deletions
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‎

Lines changed: 7 additions & 0 deletions
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‎

Lines changed: 44 additions & 0 deletions
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‎

Lines changed: 15 additions & 0 deletions
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‎

Lines changed: 19 additions & 0 deletions
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‎

Lines changed: 20 additions & 0 deletions
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+
};

0 commit comments

Comments
 (0)