Skip to content

Commit 1e1190e

Browse files
ShMcKShMcK
committed
refactor menu items into components
1 parent 0bf9db1 commit 1e1190e

File tree

7 files changed

+66
-34
lines changed

7 files changed

+66
-34
lines changed

‎lib/components/_components.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ exports.Page = page_1.default;
88
var chapter_1 = require('./page/chapter/chapter');
99
exports.Chapter = chapter_1.Chapter;
1010
var menu_1 = require('./menu/menu');
11-
exports.Menu = menu_1.default;
11+
exports.AppMenu = menu_1.AppMenu;
1212
var progress_1 = require('./progress/progress');
1313
exports.Progress = progress_1.Progress;
1414
var start_1 = require('./start/start');

‎lib/components/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ var default_1 = (function (_super) {
2929
}
3030
default_1.prototype.render = function () {
3131
var state = this.props.state;
32-
return (React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.muiTheme}, React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(_components_1.Menu, {route: state.route, position: state.position}), React.createElement(_components_1.Routes, {state: state, ref: 'route'}), React.createElement(_components_1.Alert, {alert: state.alert}))));
32+
return (React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.muiTheme}, React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(_components_1.AppMenu, {route: state.route, position: state.position}), React.createElement(_components_1.Routes, {state: state, ref: 'route'}), React.createElement(_components_1.Alert, {alert: state.alert}))));
3333
};
3434
default_1 = __decorate([
3535
react_redux_1.connect(function (state) {

‎lib/components/menu/menu.js

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -27,43 +27,62 @@ var Divider_1 = require('material-ui/Divider');
2727
var more_vert_1 = require('material-ui/svg-icons/navigation/more-vert');
2828
var close_1 = require('material-ui/svg-icons/navigation/close');
2929
var origin = { horizontal: 'right', vertical: 'top' };
30-
var default_1 = (function (_super) {
31-
__extends(default_1, _super);
32-
function default_1() {
30+
var MenuLink = (function (_super) {
31+
__extends(MenuLink, _super);
32+
function MenuLink() {
3333
_super.apply(this, arguments);
3434
}
35-
default_1.prototype.navOptions = function () {
36-
var _a = this.props, routeToProgress = _a.routeToProgress, routeToPage = _a.routeToPage;
35+
MenuLink.prototype.render = function () {
36+
var _a = this.props, route = _a.route, title = _a.title;
37+
return React.createElement(MenuItem_1.default, {primaryText: title ? title : route, onTouchTap: this.props.routeTo.bind(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;
50+
var AppMenu = (function (_super) {
51+
__extends(AppMenu, _super);
52+
function AppMenu() {
53+
_super.apply(this, arguments);
54+
}
55+
AppMenu.prototype.navOptions = function () {
56+
var routeToPage = this.props.routeToPage;
3757
switch (this.props.route) {
3858
case 'final':
3959
case 'page':
40-
return React.createElement("button", {onTouchTap: routeToProgress}, "progress");
60+
return React.createElement(MenuLink, {route: 'progress'});
4161
case 'progress':
42-
return React.createElement("button", {onTouchTap: routeToPage}, "page");
62+
return React.createElement(MenuItem_1.default, {onTouchTap: routeToPage, primaryText: 'page', key: 'page'});
4363
default: return null;
4464
}
4565
};
46-
default_1.prototype.menuOptions = function () {
47-
var _a = this.props, routeToProgress = _a.routeToProgress, routeToTutorials = _a.routeToTutorials;
66+
AppMenu.prototype.menuOptions = function () {
4867
switch (this.props.route) {
4968
case 'final':
5069
case 'page':
51-
return (React.createElement("div", null, React.createElement(MenuItem_1.default, {primaryText: 'progress', onTouchTap: routeToProgress, key: 'progress'}), React.createElement(MenuItem_1.default, {primaryText: 'tutorials', onTouchTap: routeToTutorials, key: 'projects'})));
70+
return (React.createElement("div", null, React.createElement(MenuLink, {route: 'progress'}), React.createElement(MenuLink, {route: 'tutorials'})));
5271
case 'progress':
53-
return React.createElement(MenuItem_1.default, {primaryText: 'tutorials', onTouchTap: routeToTutorials, key: 'projects'});
72+
return React.createElement(MenuLink, {route: 'tutorials'});
5473
default: return null;
5574
}
5675
};
57-
default_1.prototype.closePanel = function () {
76+
AppMenu.prototype.closePanel = function () {
5877
render_1.togglePanel();
5978
};
60-
default_1.prototype.render = function () {
79+
AppMenu.prototype.render = function () {
6180
var quit = this.props.quit;
6281
return React.createElement(AppBar_1.default, {title: 'CodeRoad', className: 'cr-menu-bar', iconElementLeft: React.createElement(IconButton_1.default, {onClick: this.closePanel}, React.createElement(close_1.default, null)), iconElementRight: React.createElement(IconMenu_1.default, {iconButtonElement: React.createElement(IconButton_1.default, null, React.createElement(more_vert_1.default, null)), targetOrigin: origin, anchorOrigin: origin}, this.menuOptions(), window.coderoad.issuesPath
6382
? React.createElement(MenuItem_1.default, {key: 'issue', className: 'link'}, React.createElement("a", {href: window.coderoad.issuesPath}, "post issue"))
6483
: null, React.createElement(Divider_1.default, null), React.createElement(MenuItem_1.default, {key: 'quit', onClick: quit}, "quit"))});
6584
};
66-
default_1 = __decorate([
85+
AppMenu = __decorate([
6786
react_redux_1.connect(null, function (dispatch) {
6887
return {
6988
routeToProgress: function () { return dispatch(actions_1.setRoute('progress')); },
@@ -72,16 +91,14 @@ var default_1 = (function (_super) {
7291
dispatch(actions_1.setPage(position));
7392
dispatch(actions_1.setRoute('page'));
7493
},
75-
routeToTutorials: function () { return dispatch(actions_1.setRoute('tutorials')); },
7694
quit: function () {
7795
render_1.togglePanel();
7896
subscriptions_1.onDeactivate();
7997
}
8098
};
8199
}),
82100
__metadata('design:paramtypes', [])
83-
], default_1);
84-
return default_1;
101+
], AppMenu);
102+
return AppMenu;
85103
}(React.Component));
86-
Object.defineProperty(exports, "__esModule", { value: true });
87-
exports.default = default_1;
104+
exports.AppMenu = AppMenu;

‎src/components/_components.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export {default as Routes} from './routes/routes';
77
// Components
88
export {default as Page} from './page/page';
99
export {Chapter} from './page/chapter/chapter';
10-
export {default as Menu} from './menu/menu';
10+
export {AppMenu} from './menu/menu';
1111
export {Progress} from './progress/progress';
1212
export {Start} from './start/start';
1313
export {Tutorials} from './tutorials/tutorials';

‎src/components/alert/_alert.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
@import "ui-variables";
22

3+
.cr-alert button {
4+
margin-bottom: 5px;
5+
}
36
.cr-alert.pass {
47
button {
58
span {

‎src/components/app.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import {connect} from 'react-redux';
3-
import {Menu, Routes, Alert} from './_components';
3+
import {AppMenu, Routes, Alert} from './_components';
44
import {muiTheme} from './theme/theme';
55
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
66

@@ -18,7 +18,7 @@ export default class extends React.Component<{state?: CR.State}, {}> {
1818
return (
1919
<MuiThemeProvider muiTheme={muiTheme}>
2020
<section className='cr' key='main' style={{height}}>
21-
<Menu route={state.route} position={state.position} />
21+
<AppMenu route={state.route} position={state.position} />
2222
<Routes state={state} ref='route' />
2323
<Alert alert={state.alert} />
2424
</section>

‎src/components/menu/menu.tsx

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,20 @@ import NavigationClose from 'material-ui/svg-icons/navigation/close';
1515

1616
const origin = {horizontal: 'right', vertical: 'top'};
1717

18+
@connect(null, (dispatch) => {
19+
return {
20+
routeTo: (route: string) => dispatch(setRoute(route))
21+
};
22+
})
23+
export class MenuLink extends React.Component<{
24+
route: string, title?: string, routeTo?: any
25+
}, {}> {
26+
render() {
27+
const {route, title} = this.props;
28+
return <MenuItem primaryText={title ? title : route} onTouchTap={this.props.routeTo.bind(route)} key={route}/>;
29+
}
30+
}
31+
1832
@connect(null, (dispatch) => {
1933
return {
2034
routeToProgress: () => dispatch(setRoute('progress')),
@@ -23,39 +37,37 @@ const origin = {horizontal: 'right', vertical: 'top'};
2337
dispatch(setPage(position));
2438
dispatch(setRoute('page'));
2539
},
26-
routeToTutorials: () => dispatch(setRoute('tutorials')),
2740
quit: () => {
2841
togglePanel();
2942
onDeactivate();
3043
}
3144
};
3245
})
33-
export default class extends React.Component<{
34-
route: string, position: CR.Position, routeToProgress?: any, routeToPage?: any, routeToTutorials?: any, quit?: any
46+
export class AppMenu extends React.Component<{
47+
route: string, position: CR.Position, routeToPage?: any, quit?: any
3548
}, {}> {
3649
navOptions(): React.ReactElement<{}> {
37-
const {routeToProgress, routeToPage} = this.props;
50+
const {routeToPage} = this.props;
3851
switch (this.props.route) {
3952
case 'final':
4053
case 'page':
41-
return <button onTouchTap={routeToProgress}>progress</button>;
54+
return <MenuLink route='progress' />;
4255
case 'progress':
43-
return <button onTouchTap={routeToPage}>page</button>;
56+
return <MenuItem onTouchTap={routeToPage} primaryText='page' key='page' />;
4457
default: return null;
4558
}
4659
}
4760
menuOptions() {
48-
const {routeToProgress, routeToTutorials} = this.props;
4961
switch (this.props.route) {
5062
case 'final':
5163
case 'page':
5264
return (
5365
<div>
54-
<MenuItem primaryText='progress' onTouchTap={routeToProgress} key='progress' />
55-
<MenuItem primaryText='tutorials' onTouchTap={routeToTutorials} key='projects' />
66+
<MenuLink route='progress'/>
67+
<MenuLink route='tutorials' />
5668
</div>);
5769
case 'progress':
58-
return <MenuItem primaryText='tutorials' onTouchTap={routeToTutorials} key='projects' />;
70+
return <MenuLink route='tutorials' />;
5971
default: return null;
6072
}
6173
}

0 commit comments

Comments
 (0)