Skip to content

Commit 418de65

Browse files
ShMcKShMcK
committed
refactor out progress-bar from toolbar
1 parent 1e1190e commit 418de65

File tree

7 files changed

+27
-32
lines changed

7 files changed

+27
-32
lines changed

‎lib/components/page/page.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ var pageStyle = {
2020
var default_1 = (function (_super) {
2121
__extends(default_1, _super);
2222
function default_1() {
23-
_super.call(this);
23+
_super.apply(this, arguments);
2424
}
2525
default_1.prototype.componentDidUpdate = function () {
2626
ReactDOM.findDOMNode(this.refs.listEnd).scrollIntoView();

‎lib/components/page/toolbar/progress-bar.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 LinearProgress_1 = require('material-ui/LinearProgress');
4+
exports.ProgressBar = function (_a) {
5+
var taskPosition = _a.taskPosition, taskCount = _a.taskCount;
6+
var progress = (taskPosition / taskCount) * 100;
7+
return React.createElement(LinearProgress_1.default, {mode: 'determinate', value: progress, style: { height: '10px' }});
8+
};

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,37 +16,28 @@ var __metadata = (this && this.__metadata) || function (k, v) {
1616
var React = require('react');
1717
var react_redux_1 = require('react-redux');
1818
var actions_1 = require('../../../actions/actions');
19-
var LinearProgress_1 = require('material-ui/LinearProgress');
19+
var progress_bar_1 = require('./progress-bar');
2020
var Toolbar_1 = require('material-ui/Toolbar');
2121
var RaisedButton_1 = require('material-ui/RaisedButton');
2222
var FlatButton_1 = require('material-ui/FlatButton');
2323
var editor_1 = require('../../../atom/editor');
2424
var actions_2 = require('../../../atom/actions');
2525
var code_1 = require('material-ui/svg-icons/action/code');
26-
var ProgressBar = function (_a) {
27-
var progress = _a.progress;
28-
return React.createElement(LinearProgress_1.default, {mode: 'determinate', value: progress, style: { height: '10px' }});
29-
};
30-
function taskProgress(current, max) {
31-
return (current / max) * 100;
32-
}
3326
var default_1 = (function (_super) {
3427
__extends(default_1, _super);
3528
function default_1() {
3629
_super.apply(this, arguments);
3730
}
3831
default_1.prototype.render = function () {
3932
var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, callNextPage = _a.callNextPage;
40-
var progress = taskProgress(taskPosition, tasks.length);
41-
return (React.createElement("section", {className: 'cr-page-toolbar'}, React.createElement(ProgressBar, {progress: progress}), 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 ?
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 ?
4234
React.createElement(RaisedButton_1.default, {label: 'Continue', primary: true, onTouchTap: callNextPage}) :
4335
React.createElement(FlatButton_1.default, {label: 'Save', secondary: true, onTouchTap: editor_1.save})))));
4436
};
4537
default_1 = __decorate([
4638
react_redux_1.connect(null, function (dispatch, state) {
4739
return {
48-
callNextPage: function () { return dispatch(actions_1.nextPage()); },
49-
toggleLog: function () { return dispatch(actions_1.toggleLog()); }
40+
callNextPage: function () { return dispatch(actions_1.nextPage()); }
5041
};
5142
}),
5243
__metadata('design:paramtypes', [])

‎src/components/page/page.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,6 @@ refs: {
2323
[key: string]: (Element);
2424
listEnd: Element;
2525
};
26-
constructor() {
27-
super();
28-
}
2926
componentDidUpdate() {
3027
ReactDOM.findDOMNode<HTMLElement>(this.refs.listEnd).scrollIntoView();
3128
}

‎src/components/page/toolbar/progress-bar.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as React from 'react';
2+
import LinearProgress from 'material-ui/LinearProgress';
3+
4+
export const ProgressBar: React.StatelessComponent<{
5+
taskPosition: number, taskCount: number
6+
}> = ({taskPosition, taskCount}) => {
7+
const progress: number = (taskPosition / taskCount) * 100;
8+
return <LinearProgress mode='determinate'
9+
value={progress} style={{height: '10px'}}/>;
10+
};

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

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import * as React from 'react';
22
import {connect} from 'react-redux';
3-
import {nextPage, toggleLog} from '../../../actions/actions';
4-
5-
import LinearProgress from 'material-ui/LinearProgress';
3+
import {nextPage} from '../../../actions/actions';
4+
import {ProgressBar} from './progress-bar';
65
import {Toolbar, ToolbarGroup} from 'material-ui/Toolbar';
76
import RaisedButton from 'material-ui/RaisedButton';
87
import FlatButton from 'material-ui/FlatButton';
@@ -13,19 +12,9 @@ import {store} from '../../../store/store';
1312

1413
import Code from 'material-ui/svg-icons/action/code';
1514

16-
const ProgressBar: React.StatelessComponent<{
17-
progress: number
18-
}> = ({progress}) => <LinearProgress mode='determinate'
19-
value={progress} style={{height: '10px'}}/>;
20-
21-
function taskProgress(current: number, max: number) {
22-
return (current / max) * 100;
23-
}
24-
2515
@connect(null, (dispatch, state) => {
2616
return {
27-
callNextPage: () => dispatch(nextPage()),
28-
toggleLog: () => dispatch(toggleLog())
17+
callNextPage: () => dispatch(nextPage())
2918
};
3019
})
3120
export default class extends React.Component<{
@@ -34,11 +23,10 @@ export default class extends React.Component<{
3423
}, {}> {
3524
render() {
3625
const {tasks, taskPosition, callNextPage} = this.props;
37-
const progress: number = taskProgress(taskPosition, tasks.length);
3826

3927
return (
4028
<section className='cr-page-toolbar'>
41-
<ProgressBar progress={progress} />
29+
<ProgressBar taskPosition={taskPosition} taskCount={tasks.length}/>
4230

4331
<Toolbar>
4432

‎tsconfig.json

Lines changed: 1 addition & 0 deletions
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/progress-bar.tsx",
113114
"src/components/page/toolbar/toolbar.tsx",
114115
"src/components/progress/progress.tsx",
115116
"src/components/render.tsx",

0 commit comments

Comments
 (0)