Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1e1190e

Browse files
committed
refactor menu items into components
1 parent0bf9db1 commit1e1190e

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
varchapter_1=require('./page/chapter/chapter');
99
exports.Chapter=chapter_1.Chapter;
1010
varmenu_1=require('./menu/menu');
11-
exports.Menu=menu_1.default;
11+
exports.AppMenu=menu_1.AppMenu;
1212
varprogress_1=require('./progress/progress');
1313
exports.Progress=progress_1.Progress;
1414
varstart_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
varstate=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
varmore_vert_1=require('material-ui/svg-icons/navigation/more-vert');
2828
varclose_1=require('material-ui/svg-icons/navigation/close');
2929
varorigin={horizontal:'right',vertical:'top'};
30-
vardefault_1=(function(_super){
31-
__extends(default_1,_super);
32-
functiondefault_1(){
30+
varMenuLink=(function(_super){
31+
__extends(MenuLink,_super);
32+
functionMenuLink(){
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+
returnReact.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){returndispatch(actions_1.setRoute(route));}
43+
};
44+
}),
45+
__metadata('design:paramtypes',[])
46+
],MenuLink);
47+
returnMenuLink;
48+
}(React.Component));
49+
exports.MenuLink=MenuLink;
50+
varAppMenu=(function(_super){
51+
__extends(AppMenu,_super);
52+
functionAppMenu(){
53+
_super.apply(this,arguments);
54+
}
55+
AppMenu.prototype.navOptions=function(){
56+
varrouteToPage=this.props.routeToPage;
3757
switch(this.props.route){
3858
case'final':
3959
case'page':
40-
returnReact.createElement("button",{onTouchTap:routeToProgress},"progress");
60+
returnReact.createElement(MenuLink,{route:'progress'});
4161
case'progress':
42-
returnReact.createElement("button",{onTouchTap:routeToPage},"page");
62+
returnReact.createElement(MenuItem_1.default,{onTouchTap:routeToPage,primaryText:'page',key:'page'});
4363
default:returnnull;
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-
returnReact.createElement(MenuItem_1.default,{primaryText:'tutorials',onTouchTap:routeToTutorials,key:'projects'});
72+
returnReact.createElement(MenuLink,{route:'tutorials'});
5473
default:returnnull;
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
varquit=this.props.quit;
6281
returnReact.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(){returndispatch(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(){returndispatch(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-
returndefault_1;
101+
],AppMenu);
102+
returnAppMenu;
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{defaultasPage}from'./page/page';
99
export{Chapter}from'./page/chapter/chapter';
10-
export{defaultasMenu}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-alertbutton {
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*asReactfrom'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
importMuiThemeProviderfrom'material-ui/styles/MuiThemeProvider';
66

@@ -18,7 +18,7 @@ export default class extends React.Component<{state?: CR.State}, {}> {
1818
return(
1919
<MuiThemeProvidermuiTheme={muiTheme}>
2020
<sectionclassName='cr'key='main'style={{height}}>
21-
<Menuroute={state.route}position={state.position}/>
21+
<AppMenuroute={state.route}position={state.position}/>
2222
<Routesstate={state}ref='route'/>
2323
<Alertalert={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
constorigin={horizontal:'right',vertical:'top'};
1717

18+
@connect(null,(dispatch)=>{
19+
return{
20+
routeTo:(route:string)=>dispatch(setRoute(route))
21+
};
22+
})
23+
exportclassMenuLinkextendsReact.Component<{
24+
route:string,title?:string,routeTo?:any
25+
},{}>{
26+
render(){
27+
const{route, title}=this.props;
28+
return<MenuItemprimaryText={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-
exportdefaultclassextendsReact.Component<{
34-
route:string,position:CR.Position,routeToProgress?:any,routeToPage?:any,routeToTutorials?:any,quit?:any
46+
exportclassAppMenuextendsReact.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<buttononTouchTap={routeToProgress}>progress</button>;
54+
return<MenuLinkroute='progress'/>;
4255
case'progress':
43-
return<buttononTouchTap={routeToPage}>page</button>;
56+
return<MenuItemonTouchTap={routeToPage}primaryText='page'key='page'/>;
4457
default:returnnull;
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-
<MenuItemprimaryText='progress'onTouchTap={routeToProgress}key='progress'/>
55-
<MenuItemprimaryText='tutorials'onTouchTap={routeToTutorials}key='projects'/>
66+
<MenuLinkroute='progress'/>
67+
<MenuLinkroute='tutorials'/>
5668
</div>);
5769
case'progress':
58-
return<MenuItemprimaryText='tutorials'onTouchTap={routeToTutorials}key='projects'/>;
70+
return<MenuLinkroute='tutorials'/>;
5971
default:returnnull;
6072
}
6173
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp