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

Commitbc975b1

Browse files
committed
refactor toolbar into smaller components
1 parent418de65 commitbc975b1

File tree

7 files changed

+95
-82
lines changed

7 files changed

+95
-82
lines changed

‎lib/components/page/page.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
var_a=this.props,page=_a.page,taskPosition=_a.taskPosition,hintPosition=_a.hintPosition,tasks=_a.tasks,runTests=_a.runTests;
3030
varcurrentTask=taskPosition<=tasks.length ?tasks[taskPosition] :null;
3131
varallComplete=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
returndefault_1;
3535
}(React.Component));
Lines changed: 44 additions & 0 deletions
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(varpinb)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+
varc=arguments.length,r=c<3 ?target :desc===null ?desc=Object.getOwnPropertyDescriptor(target,key) :desc,d;
9+
if(typeofReflect==="object"&&typeofReflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);
10+
elsefor(vari=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+
returnc>3&&r&&Object.defineProperty(target,key,r),r;
12+
};
13+
var__metadata=(this&&this.__metadata)||function(k,v){
14+
if(typeofReflect==="object"&&typeofReflect.metadata==="function")returnReflect.metadata(k,v);
15+
};
16+
varReact=require('react');
17+
varreact_redux_1=require('react-redux');
18+
varFlatButton_1=require('material-ui/FlatButton');
19+
varRaisedButton_1=require('material-ui/RaisedButton');
20+
varcode_1=require('material-ui/svg-icons/action/code');
21+
varactions_1=require('../../../atom/actions');
22+
vareditor_1=require('../../../atom/editor');
23+
varactions_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+
varContinue=(function(_super){
27+
__extends(Continue,_super);
28+
functionContinue(){
29+
_super.apply(this,arguments);
30+
}
31+
Continue.prototype.render=function(){
32+
returnReact.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(){returndispatch(actions_2.nextPage());}
38+
};
39+
}),
40+
__metadata('design:paramtypes',[])
41+
],Continue);
42+
returnContinue;
43+
}(React.Component));
44+
exports.Continue=Continue;
Lines changed: 7 additions & 45 deletions
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(varpinb)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-
varc=arguments.length,r=c<3 ?target :desc===null ?desc=Object.getOwnPropertyDescriptor(target,key) :desc,d;
9-
if(typeofReflect==="object"&&typeofReflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);
10-
elsefor(vari=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-
returnc>3&&r&&Object.defineProperty(target,key,r),r;
12-
};
13-
var__metadata=(this&&this.__metadata)||function(k,v){
14-
if(typeofReflect==="object"&&typeofReflect.metadata==="function")returnReflect.metadata(k,v);
15-
};
162
varReact=require('react');
17-
varreact_redux_1=require('react-redux');
18-
varactions_1=require('../../../actions/actions');
19-
varprogress_bar_1=require('./progress-bar');
203
varToolbar_1=require('material-ui/Toolbar');
21-
varRaisedButton_1=require('material-ui/RaisedButton');
22-
varFlatButton_1=require('material-ui/FlatButton');
23-
vareditor_1=require('../../../atom/editor');
24-
varactions_2=require('../../../atom/actions');
25-
varcode_1=require('material-ui/svg-icons/action/code');
26-
vardefault_1=(function(_super){
27-
__extends(default_1,_super);
28-
functiondefault_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(){returndispatch(actions_1.nextPage());}
41-
};
42-
}),
43-
__metadata('design:paramtypes',[])
44-
],default_1);
45-
returndefault_1;
46-
}(React.Component));
47-
Object.defineProperty(exports,"__esModule",{value:true});
48-
exports.default=default_1;
4+
varprogress_bar_1=require('./progress-bar');
5+
varbuttons_1=require('./buttons');
6+
exports.PageToolbar=function(_a){
7+
vartasks=_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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {PageContent} from './content';
66
import{Tasks}from'./task/task';
77
importHintsfrom'./hint/hint';
88
import{PageCompleteMessage}from'./complete/page-complete';
9-
importPageToolbarfrom'./toolbar/toolbar';
9+
import{PageToolbar}from'./toolbar/toolbar';
1010

1111
constpageStyle={
1212
height:'100%',
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import*asReactfrom'react';
2+
import{connect}from'react-redux';
3+
importFlatButtonfrom'material-ui/FlatButton';
4+
importRaisedButtonfrom'material-ui/RaisedButton';
5+
importCodefrom'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+
exportconstToggleLog=()=>(
12+
<FlatButtonicon={<Code/>}onTouchTap={toggleDevTools}/>
13+
);
14+
15+
exportconstSave=()=>(
16+
<FlatButtonlabel='Save'secondary={true}onTouchTap={save}/>
17+
);
18+
19+
@connect(null,(dispatch,state)=>{
20+
return{
21+
callNextPage:()=>dispatch(nextPage())
22+
};
23+
})
24+
exportclassContinueextendsReact.Component<{
25+
callNextPage?:any
26+
},{}>{
27+
render(){
28+
return<RaisedButtonlabel='Continue'primary={true}onTouchTap={this.props.callNextPage}/>;
29+
}
30+
}
Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,24 @@
11
import*asReactfrom'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-
importRaisedButtonfrom'material-ui/RaisedButton';
7-
importFlatButtonfrom'material-ui/FlatButton';
8-
9-
import{save}from'../../../atom/editor';
10-
import{toggleDevTools}from'../../../atom/actions';
11-
import{store}from'../../../store/store';
12-
13-
importCodefrom'material-ui/svg-icons/action/code';
14-
15-
@connect(null,(dispatch,state)=>{
16-
return{
17-
callNextPage:()=>dispatch(nextPage())
18-
};
19-
})
20-
exportdefaultclassextendsReact.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-
<sectionclassName='cr-page-toolbar'>
29-
<ProgressBartaskPosition={taskPosition}taskCount={tasks.length}/>
3+
import{ProgressBar}from'./progress-bar';
4+
import{ToggleLog,Save,Continue}from'./buttons';
305

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

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

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

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

‎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/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)
[8]ページ先頭
©2009-2025 Movatter.jp