Skip to content

Commit d570f39

Browse files
ShMcKShMcK
committed
refactor page components
1 parent afcd5a6 commit d570f39

File tree

13 files changed

+272
-80
lines changed

13 files changed

+272
-80
lines changed

‎lib/components/page/content.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
"use strict";
2+
var React = require('react');
3+
var _components_1 = require('../_components');
4+
var material_ui_1 = require('material-ui');
5+
function default_1(_a) {
6+
var page = _a.page;
7+
return (React.createElement(material_ui_1.Card, null,
8+
React.createElement(material_ui_1.CardHeader, {title: page.title}),
9+
React.createElement(material_ui_1.CardText, null,
10+
React.createElement(_components_1.MarkdownText, {text: page.description})
11+
)));
12+
}
13+
Object.defineProperty(exports, "__esModule", { value: true });
14+
exports.default = default_1;

‎lib/components/page/edit.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
'use strict';
1+
"use strict";
22
var React = require('react');
33
var path = require('path');
44
var Edit = require('material-ui/lib/svg-icons/editor/mode-edit');

‎lib/components/page/page.js

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,39 @@ var React = require('react');
1717
var ReactDOM = require('react-dom');
1818
var react_redux_1 = require('react-redux');
1919
var Action = require('../../actions/actions');
20-
var _components_1 = require('../_components');
21-
var classnames = require('classnames');
2220
var iconPath = 'material-ui/lib/svg-icons/';
21+
var _components_1 = require('../_components');
2322
var material_ui_1 = require('material-ui');
2423
var colors_1 = require('material-ui/lib/styles/colors');
24+
var classnames = require('classnames');
2525
var Complete = require(iconPath + 'toggle/check-box');
2626
var Incomplete = require(iconPath + 'toggle/check-box-outline-blank');
2727
var RunningTest = require(iconPath + 'toggle/indeterminate-check-box');
28+
function hintsShown(task, hintPos) {
29+
if (hintPos > -1 && task.hints && task.hints.length > 0) {
30+
return task.hints.slice(0, hintPos + 1);
31+
}
32+
return null;
33+
}
34+
function visibleTasks(tasks, taskPosition) {
35+
return tasks.slice(0, taskPosition + 1);
36+
}
37+
var TaskCheckbox = function (_a) {
38+
var index = _a.index, taskPosition = _a.taskPosition, runTests = _a.runTests;
39+
var icon = null;
40+
if (index < taskPosition) {
41+
icon = React.createElement(Complete, {color: colors_1.green500});
42+
}
43+
else if (index === taskPosition && runTests) {
44+
icon = React.createElement(RunningTest, {color: colors_1.orange500});
45+
}
46+
else {
47+
icon = React.createElement(Incomplete, null);
48+
}
49+
return (React.createElement("span", {className: 'cr-task-checkbox'}, icon));
50+
};
51+
var material_ui_2 = require('material-ui');
52+
var content_1 = require('./content');
2853
var Info = require(iconPath + 'action/info');
2954
var InfoOutline = require(iconPath + 'action/info-outline');
3055
var style = {
@@ -61,20 +86,6 @@ var default_1 = (function (_super) {
6186
ReactDOM.findDOMNode(this.refs.onPageComplete).scrollIntoView();
6287
}
6388
};
64-
default_1.prototype.visibleTasks = function () {
65-
return this.props.tasks.slice(0, this.props.taskPosition + 1);
66-
};
67-
default_1.prototype.getIcon = function (index, position) {
68-
if (index < position) {
69-
return React.createElement(Complete, {color: colors_1.green500});
70-
}
71-
else if (index === position && this.props.runTests) {
72-
return React.createElement(RunningTest, {color: colors_1.orange500});
73-
}
74-
else {
75-
return React.createElement(Incomplete, null);
76-
}
77-
};
7889
default_1.prototype.displayHint = function (task) {
7990
if (task && task.hints && task.hints.length) {
8091
if (this.state.hintPos < task.hints.length - 1) {
@@ -85,42 +96,31 @@ var default_1 = (function (_super) {
8596
this.setState({ hintPos: -1, taskPos: this.state.taskPos });
8697
}
8798
};
88-
default_1.prototype.hintsShown = function (task) {
89-
if (this.state.hintPos > -1 && task.hints && task.hints.length > 0) {
90-
return task.hints.slice(0, this.state.hintPos + 1);
91-
}
92-
return null;
93-
};
9499
default_1.prototype.render = function () {
95100
var _this = this;
96101
var page = this.props.page;
97-
var tasks = this.visibleTasks();
98102
var taskPosition = this.props.taskPosition;
103+
var tasks = visibleTasks(this.props.tasks, taskPosition);
99104
var currentTask = taskPosition <= tasks.length ? tasks[taskPosition] : null;
100105
var allComplete = taskPosition >= tasks.length;
101-
console.log(page);
102-
return (React.createElement(material_ui_1.Paper, {style: style, zDepth: 1, className: 'cr-page'},
103-
React.createElement(material_ui_1.Card, null,
104-
React.createElement(material_ui_1.CardHeader, {title: page.title}),
105-
React.createElement(material_ui_1.CardText, null,
106-
React.createElement(_components_1.MarkdownText, {text: page.description})
107-
)),
106+
return (React.createElement(material_ui_2.Paper, {style: style, zDepth: 1, className: 'cr-page'},
107+
React.createElement(content_1.default, {page: page}),
108108
React.createElement(material_ui_1.Divider, null),
109109
React.createElement(material_ui_1.List, {subheader: 'Tasks', className: 'cr-tasks', ref: 'tasks'},
110110
tasks.map(function (task, index) {
111111
var isCurrentTask = index === taskPosition;
112112
var isDisabledTask = index > taskPosition;
113113
var isCompletedTask = index < taskPosition;
114114
var isFinalTask = index >= tasks.length - 1;
115-
var hints = _this.hintsShown(task);
115+
var hints = hintsShown(task, _this.state.hintPos);
116116
return (React.createElement("div", null,
117117
React.createElement(material_ui_1.ListItem, {ref: 'task' + index, className: classnames({
118118
'cr-task': true,
119119
'isCompletedTask': isCompletedTask,
120120
'isCurrentTask': isCurrentTask,
121121
'isDisabledTask': isDisabledTask
122122
})},
123-
React.createElement("span", {className: 'cr-task-checkbox'}, _this.getIcon(index, taskPosition)),
123+
React.createElement(TaskCheckbox, {index: index, taskPosition: taskPosition, runTests: _this.props.runTests}),
124124
React.createElement("span", {className: 'cr-task-index'},
125125
index + 1,
126126
"."),
@@ -148,17 +148,17 @@ var default_1 = (function (_super) {
148148
)
149149
) : null),
150150
React.createElement("section", {className: 'cr-page-toolbar'},
151-
React.createElement(material_ui_1.LinearProgress, {mode: 'determinate', value: taskProgress(taskPosition, tasks.length), style: { height: '6px' }}),
152-
React.createElement(material_ui_1.Toolbar, null,
151+
React.createElement(material_ui_2.LinearProgress, {mode: 'determinate', value: taskProgress(taskPosition, tasks.length), style: { height: '6px' }}),
152+
React.createElement(material_ui_2.Toolbar, null,
153153
currentTask && currentTask.hints && currentTask.hints.length ?
154-
React.createElement(material_ui_1.ToolbarGroup, {float: 'left'}, this.state.hintPos <= currentTask.hints.length - 2 ?
155-
React.createElement(material_ui_1.FlatButton, {className: 'cr-task-showHint', icon: React.createElement(InfoOutline, null), onClick: this.displayHint.bind(this, currentTask)})
156-
: React.createElement(material_ui_1.FlatButton, {className: 'cr-task-showHint-disabled', icon: React.createElement(Info, null), disabled: true}))
154+
React.createElement(material_ui_2.ToolbarGroup, {float: 'left'}, this.state.hintPos <= currentTask.hints.length - 2 ?
155+
React.createElement(material_ui_2.FlatButton, {className: 'cr-task-showHint', icon: React.createElement(InfoOutline, null), onClick: this.displayHint.bind(this, currentTask)})
156+
: React.createElement(material_ui_2.FlatButton, {className: 'cr-task-showHint-disabled', icon: React.createElement(Info, null), disabled: true}))
157157
: null,
158-
React.createElement(material_ui_1.ToolbarGroup, {float: 'right'}, allComplete ?
159-
React.createElement(material_ui_1.RaisedButton, {label: 'Continue', primary: true, onClick: this.props.callNextPage})
158+
React.createElement(material_ui_2.ToolbarGroup, {float: 'right'}, allComplete ?
159+
React.createElement(material_ui_2.RaisedButton, {label: 'Continue', primary: true, onClick: this.props.callNextPage})
160160
:
161-
React.createElement(material_ui_1.RaisedButton, {label: 'Run', secondary: true, onClick: this.props.callRunTests}))))));
161+
React.createElement(material_ui_2.RaisedButton, {label: 'Run', secondary: true, onClick: this.props.callRunTests}))))));
162162
};
163163
default_1 = __decorate([
164164
react_redux_1.connect(null, function (dispatch, state) {

‎lib/components/page/tasks.js

Whitespace-only changes.

‎lib/components/page/toolbar.js

Whitespace-only changes.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
},
3737
"dependencies": {
3838
"highlights": "1.3.1",
39-
"lodash": "4.5.1",
39+
"lodash": "4.6.1",
4040
"material-ui": "0.14.4",
4141
"marked": "0.3.5",
4242
"react": "0.14.7",
@@ -49,7 +49,7 @@
4949
"devDependencies": {
5050
"ava": "^0.12.0",
5151
"enzyme": "2.0.0",
52-
"jsdom": "8.0.4",
52+
"jsdom": "8.1.0",
5353
"react-addons-test-utils": "0.14.7"
5454
},
5555
"scripts": {

‎src/components/page/content.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as React from 'react';
2+
import {MarkdownText} from '../_components';
3+
import {Card, CardHeader, CardText} from 'material-ui';
4+
5+
export default function ({page}) {
6+
return (
7+
<Card>
8+
<CardHeader title={page.title} />
9+
<CardText>
10+
<MarkdownText text={page.description} />
11+
</CardText>
12+
</Card>
13+
);
14+
}

‎src/components/page/edit.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
'use strict';
21
import * as React from 'react';
32
import * as path from 'path';
43
const Edit = require('material-ui/lib/svg-icons/editor/mode-edit');

‎src/components/page/page.tsx

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,52 @@ import * as React from 'react';
33
import * as ReactDOM from 'react-dom';
44
import {connect} from 'react-redux';
55
import * as Action from '../../actions/actions';
6-
import {MarkdownText} from '../_components';
7-
import * as classnames from 'classnames';
86
const iconPath = 'material-ui/lib/svg-icons/';
97

10-
import {Paper, Card, CardHeader, CardText, LinearProgress, Divider,
11-
Toolbar, ToolbarGroup, RaisedButton, List, ListItem, FlatButton} from 'material-ui';
8+
// tasks
9+
import {MarkdownText} from '../_components';
10+
import {List, ListItem, Divider} from 'material-ui';
1211
import {green500, orange500} from 'material-ui/lib/styles/colors';
12+
import * as classnames from 'classnames';
1313
let Complete = require(iconPath + 'toggle/check-box');
1414
let Incomplete = require(iconPath + 'toggle/check-box-outline-blank');
1515
let RunningTest = require(iconPath + 'toggle/indeterminate-check-box');
16+
17+
// Page
18+
function hintsShown(task: CR.Task, hintPos: number) {
19+
if (hintPos > -1 && task.hints && task.hints.length > 0) {
20+
return task.hints.slice(0, hintPos + 1);
21+
}
22+
return null;
23+
}
24+
25+
function visibleTasks(tasks: CR.Task[], taskPosition: number) {
26+
return tasks.slice(0, taskPosition + 1);
27+
}
28+
29+
const TaskCheckbox = ({index, taskPosition, runTests}) => {
30+
let icon = null;
31+
if (index < taskPosition) {
32+
icon = <Complete color={green500} />;
33+
} else if (index === taskPosition && runTests) {
34+
// TODO: loading animation inside of checkbox
35+
icon = <RunningTest color={orange500} />;
36+
} else {
37+
icon = <Incomplete />;
38+
}
39+
return (
40+
<span className='cr-task-checkbox'>
41+
{icon}
42+
</span>
43+
);
44+
};
45+
46+
47+
import {Paper, LinearProgress, Toolbar, ToolbarGroup, RaisedButton, FlatButton} from 'material-ui';
48+
49+
import PageContent from './content';
50+
// import PageToolbar from './toolbar';
51+
1652
let Info = require(iconPath + 'action/info');
1753
let InfoOutline = require(iconPath + 'action/info-outline');
1854

@@ -64,19 +100,6 @@ componentDidUpdate() {
64100
ReactDOM.findDOMNode<HTMLElement>(this.refs.onPageComplete).scrollIntoView();
65101
}
66102
}
67-
visibleTasks() {
68-
return this.props.tasks.slice(0, this.props.taskPosition + 1);
69-
}
70-
getIcon(index, position) {
71-
if (index < position) {
72-
return <Complete color={green500} />;
73-
} else if (index === position && this.props.runTests) {
74-
// TODO: loading animation inside of checkbox
75-
return <RunningTest color={orange500} />;
76-
} else {
77-
return <Incomplete />;
78-
}
79-
}
80103
displayHint(task) {
81104
if (task && task.hints && task.hints.length) {
82105
if (this.state.hintPos < task.hints.length - 1) {
@@ -86,40 +109,35 @@ displayHint(task) {
86109
this.setState({hintPos: -1, taskPos: this.state.taskPos});
87110
}
88111
}
89-
hintsShown(task) {
90-
if (this.state.hintPos > -1 && task.hints && task.hints.length > 0) {
91-
return task.hints.slice(0, this.state.hintPos + 1);
92-
}
93-
return null;
94-
}
112+
// hintsShown(task) {
113+
// if (this.state.hintPos > -1 && task.hints && task.hints.length > 0) {
114+
// return task.hints.slice(0, this.state.hintPos + 1);
115+
// }
116+
// return null;
117+
// }
95118
render() {
96119
let page = this.props.page;
97-
let tasks = this.visibleTasks();
98120
let taskPosition = this.props.taskPosition;
121+
let tasks = visibleTasks(this.props.tasks, taskPosition);
99122
var currentTask = taskPosition <= tasks.length ? tasks[taskPosition] : null;
100123
// let log = this.props.log;
101124
let allComplete = taskPosition >= tasks.length;
102-
console.log(page);
125+
103126
return (
104127
<Paper style={style} zDepth={1} className='cr-page'>
105128
{/* Content */}
106-
<Card>
107-
<CardHeader title={page.title} />
108-
<CardText>
109-
<MarkdownText text={page.description} />
110-
</CardText>
111-
</Card>
129+
<PageContent page={page} />
112130

113131
<Divider />
114132

115-
{/* Task List (tasks, isComplete)*/}
116-
<List subheader='Tasks' className='cr-tasks' ref='tasks'>
133+
{/* Task List (tasks, isComplete) */}
134+
<List subheader='Tasks' className='cr-tasks' ref='tasks'>
117135
{tasks.map((task: CR.Task, index) => {
118136
let isCurrentTask = index === taskPosition;
119137
let isDisabledTask = index > taskPosition;
120138
let isCompletedTask = index < taskPosition;
121139
let isFinalTask = index >= tasks.length - 1;
122-
let hints = this.hintsShown(task);
140+
let hints = hintsShown(task, this.state.hintPos);
123141
return (
124142
<div>
125143
<ListItem
@@ -130,7 +148,7 @@ render() {
130148
'isCurrentTask': isCurrentTask,
131149
'isDisabledTask': isDisabledTask
132150
})} >
133-
<span className='cr-task-checkbox'>{this.getIcon(index, taskPosition)}</span>
151+
<TaskCheckbox index={index} taskPosition={taskPosition} runTests={this.props.runTests}/>
134152
<span className='cr-task-index'>{index + 1}.</span>
135153
<div className='cr-task-description'><MarkdownText text={task.description} />
136154
</div>

0 commit comments

Comments
 (0)