Skip to content

Commit bc975b1

Browse files
ShMcKShMcK
committed
refactor toolbar into smaller components
1 parent 418de65 commit bc975b1

File tree

7 files changed

+95
-82
lines changed

7 files changed

+95
-82
lines changed

‎lib/components/page/page.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ var default_1 = (function (_super) {
2929
var _a = this.props, page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, runTests = _a.runTests;
3030
var currentTask = taskPosition <= tasks.length ? tasks[taskPosition] : null;
3131
var allComplete = taskPosition >= tasks.length;
32-
return (React.createElement(Paper_1.default, {style: pageStyle, zDepth: 1, className: 'cr-page', ref: 'page'}, React.createElement(content_1.PageContent, {page: page}), React.createElement(Divider_1.default, null), React.createElement(task_1.Tasks, {tasks: tasks, taskPosition: taskPosition, runTests: runTests}), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(hint_1.default, {task: currentTask, hintPosition: hintPosition}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement(toolbar_1.default, {tasks: tasks, taskPosition: taskPosition})));
32+
return (React.createElement(Paper_1.default, {style: pageStyle, zDepth: 1, className: 'cr-page', ref: 'page'}, React.createElement(content_1.PageContent, {page: page}), React.createElement(Divider_1.default, null), React.createElement(task_1.Tasks, {tasks: tasks, taskPosition: taskPosition, runTests: runTests}), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(hint_1.default, {task: currentTask, hintPosition: hintPosition}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement(toolbar_1.PageToolbar, {tasks: tasks, taskPosition: taskPosition})));
3333
};
3434
return default_1;
3535
}(React.Component));

‎lib/components/page/toolbar/buttons.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 RaisedButton_1 = require('material-ui/RaisedButton');
20+
var code_1 = require('material-ui/svg-icons/action/code');
21+
var actions_1 = require('../../../atom/actions');
22+
var editor_1 = require('../../../atom/editor');
23+
var actions_2 = require('../../../actions/actions');
24+
exports.ToggleLog = function () { return (React.createElement(FlatButton_1.default, {icon: React.createElement(code_1.default, null), onTouchTap: actions_1.toggleDevTools})); };
25+
exports.Save = function () { return (React.createElement(FlatButton_1.default, {label: 'Save', secondary: true, onTouchTap: editor_1.save})); };
26+
var Continue = (function (_super) {
27+
__extends(Continue, _super);
28+
function Continue() {
29+
_super.apply(this, arguments);
30+
}
31+
Continue.prototype.render = function () {
32+
return React.createElement(RaisedButton_1.default, {label: 'Continue', primary: true, onTouchTap: this.props.callNextPage});
33+
};
34+
Continue = __decorate([
35+
react_redux_1.connect(null, function (dispatch, state) {
36+
return {
37+
callNextPage: function () { return dispatch(actions_2.nextPage()); }
38+
};
39+
}),
40+
__metadata('design:paramtypes', [])
41+
], Continue);
42+
return Continue;
43+
}(React.Component));
44+
exports.Continue = Continue;

‎lib/components/page/toolbar/toolbar.js

+7-45
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,10 @@
11
"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-
};
162
var React = require('react');
17-
var react_redux_1 = require('react-redux');
18-
var actions_1 = require('../../../actions/actions');
19-
var progress_bar_1 = require('./progress-bar');
203
var Toolbar_1 = require('material-ui/Toolbar');
21-
var RaisedButton_1 = require('material-ui/RaisedButton');
22-
var FlatButton_1 = require('material-ui/FlatButton');
23-
var editor_1 = require('../../../atom/editor');
24-
var actions_2 = require('../../../atom/actions');
25-
var code_1 = require('material-ui/svg-icons/action/code');
26-
var default_1 = (function (_super) {
27-
__extends(default_1, _super);
28-
function default_1() {
29-
_super.apply(this, arguments);
30-
}
31-
default_1.prototype.render = function () {
32-
var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, callNextPage = _a.callNextPage;
33-
return (React.createElement("section", {className: 'cr-page-toolbar'}, React.createElement(progress_bar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length}), React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(FlatButton_1.default, {icon: React.createElement(code_1.default, null), onTouchTap: actions_2.toggleDevTools})), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, taskPosition >= tasks.length ?
34-
React.createElement(RaisedButton_1.default, {label: 'Continue', primary: true, onTouchTap: callNextPage}) :
35-
React.createElement(FlatButton_1.default, {label: 'Save', secondary: true, onTouchTap: editor_1.save})))));
36-
};
37-
default_1 = __decorate([
38-
react_redux_1.connect(null, function (dispatch, state) {
39-
return {
40-
callNextPage: function () { return dispatch(actions_1.nextPage()); }
41-
};
42-
}),
43-
__metadata('design:paramtypes', [])
44-
], default_1);
45-
return default_1;
46-
}(React.Component));
47-
Object.defineProperty(exports, "__esModule", { value: true });
48-
exports.default = default_1;
4+
var progress_bar_1 = require('./progress-bar');
5+
var buttons_1 = require('./buttons');
6+
exports.PageToolbar = function (_a) {
7+
var tasks = _a.tasks, taskPosition = _a.taskPosition;
8+
return (React.createElement("section", {className: 'cr-page-toolbar'}, React.createElement(progress_bar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length}), React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(buttons_1.ToggleLog, null)), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, taskPosition >= tasks.length ?
9+
React.createElement(buttons_1.Continue, null) : React.createElement(buttons_1.Save, null)))));
10+
};

‎src/components/page/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {PageContent} from './content';
66
import {Tasks} from './task/task';
77
import Hints from './hint/hint';
88
import {PageCompleteMessage} from './complete/page-complete';
9-
import PageToolbar from './toolbar/toolbar';
9+
import {PageToolbar} from './toolbar/toolbar';
1010

1111
const pageStyle = {
1212
height: '100%',

‎src/components/page/toolbar/buttons.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from 'react';
2+
import {connect} from 'react-redux';
3+
import FlatButton from 'material-ui/FlatButton';
4+
import RaisedButton from 'material-ui/RaisedButton';
5+
import Code from 'material-ui/svg-icons/action/code';
6+
7+
import {toggleDevTools} from '../../../atom/actions';
8+
import {save} from '../../../atom/editor';
9+
import {nextPage} from '../../../actions/actions';
10+
11+
export const ToggleLog = () => (
12+
<FlatButton icon={<Code />} onTouchTap={toggleDevTools} />
13+
);
14+
15+
export const Save = () => (
16+
<FlatButton label='Save' secondary={true} onTouchTap={save} />
17+
);
18+
19+
@connect(null, (dispatch, state) => {
20+
return {
21+
callNextPage: () => dispatch(nextPage())
22+
};
23+
})
24+
export class Continue extends React.Component<{
25+
callNextPage?: any
26+
}, {}> {
27+
render() {
28+
return <RaisedButton label='Continue' primary={true} onTouchTap={this.props.callNextPage} />;
29+
}
30+
}

‎src/components/page/toolbar/toolbar.tsx

+11-35
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,24 @@
11
import * as React from 'react';
2-
import {connect} from 'react-redux';
3-
import {nextPage} from '../../../actions/actions';
4-
import {ProgressBar} from './progress-bar';
52
import {Toolbar, ToolbarGroup} from 'material-ui/Toolbar';
6-
import RaisedButton from 'material-ui/RaisedButton';
7-
import FlatButton from 'material-ui/FlatButton';
8-
9-
import {save} from '../../../atom/editor';
10-
import {toggleDevTools} from '../../../atom/actions';
11-
import {store} from '../../../store/store';
12-
13-
import Code from 'material-ui/svg-icons/action/code';
14-
15-
@connect(null, (dispatch, state) => {
16-
return {
17-
callNextPage: () => dispatch(nextPage())
18-
};
19-
})
20-
export default class extends React.Component<{
21-
tasks: CR.Task[], taskPosition: number,
22-
callNextPage?: () => void, callNextTask?: () => void, showHint?: (pos: number) => void
23-
}, {}> {
24-
render() {
25-
const {tasks, taskPosition, callNextPage} = this.props;
26-
27-
return (
28-
<section className='cr-page-toolbar'>
29-
<ProgressBar taskPosition={taskPosition} taskCount={tasks.length}/>
3+
import {ProgressBar} from './progress-bar';
4+
import {ToggleLog, Save, Continue} from './buttons';
305

31-
<Toolbar>
6+
export const PageToolbar: React.StatelessComponent<{
7+
tasks: CR.Task[], taskPosition: number
8+
}> = ({tasks, taskPosition}) => (
9+
<section className='cr-page-toolbar'>
10+
<ProgressBar taskPosition={taskPosition} taskCount={tasks.length}/>
3211

12+
<Toolbar>
3313
<ToolbarGroup float='left'>
34-
<FlatButton icon={<Code />} onTouchTap={toggleDevTools} />
14+
<ToggleLog />
3515
</ToolbarGroup>
3616

3717
<ToolbarGroup float='right'>
3818
{taskPosition >= tasks.length ?
39-
<RaisedButton label='Continue' primary={true} onTouchTap={callNextPage} /> :
40-
<FlatButton label='Save' secondary={true} onTouchTap={save} />
41-
}
19+
<Continue /> : <Save />}
4220
</ToolbarGroup>
4321

4422
</Toolbar>
4523
</section>
46-
);
47-
}
48-
}
24+
);

‎tsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@
110110
"src/components/page/hint/hint.tsx",
111111
"src/components/page/page.tsx",
112112
"src/components/page/task/task.tsx",
113+
"src/components/page/toolbar/buttons.tsx",
113114
"src/components/page/toolbar/progress-bar.tsx",
114115
"src/components/page/toolbar/toolbar.tsx",
115116
"src/components/progress/progress.tsx",

0 commit comments

Comments
 (0)