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

Commitb78b4a1

Browse files
committed
refactor tutorial components
1 parent9b055fe commitb78b4a1

File tree

6 files changed

+170
-115
lines changed

6 files changed

+170
-115
lines changed

‎lib/components/tutorials/buttons.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
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+
varactions_1=require('../../actions/actions');
20+
varfile_upload_1=require('material-ui/svg-icons/file/file-upload');
21+
varLoadTutorials=(function(_super){
22+
__extends(LoadTutorials,_super);
23+
functionLoadTutorials(){
24+
_super.apply(this,arguments);
25+
}
26+
LoadTutorials.prototype.render=function(){
27+
returnReact.createElement(FlatButton_1.default,{style:{margin:'0 90px'},label:'Check for Tutorials',secondary:true,onTouchTap:this.props.loadTutorials});
28+
};
29+
LoadTutorials=__decorate([
30+
react_redux_1.connect(null,function(dispatch){
31+
return{
32+
loadTutorials:function(){
33+
dispatch(actions_1.loadTutorials());
34+
}
35+
};
36+
}),
37+
__metadata('design:paramtypes',[])
38+
],LoadTutorials);
39+
returnLoadTutorials;
40+
}(React.Component));
41+
exports.LoadTutorials=LoadTutorials;
42+
varUpdateTutorial=(function(_super){
43+
__extends(UpdateTutorial,_super);
44+
functionUpdateTutorial(){
45+
_super.apply(this,arguments);
46+
}
47+
UpdateTutorial.prototype.render=function(){
48+
var_a=this.props,name=_a.name,updateTutorial=_a.updateTutorial;
49+
returnReact.createElement(file_upload_1.default,{onClick:updateTutorial(name)});
50+
};
51+
UpdateTutorial=__decorate([
52+
react_redux_1.connect(null,function(dispatch){
53+
return{
54+
updateTutorial:function(name){
55+
dispatch(actions_1.updateTutorial(name));
56+
}
57+
};
58+
}),
59+
__metadata('design:paramtypes',[])
60+
],UpdateTutorial);
61+
returnUpdateTutorial;
62+
}(React.Component));
63+
exports.UpdateTutorial=UpdateTutorial;
64+
varSelectTutorial=(function(_super){
65+
__extends(SelectTutorial,_super);
66+
functionSelectTutorial(){
67+
_super.apply(this,arguments);
68+
}
69+
SelectTutorial.prototype.render=function(){
70+
var_a=this.props,tutorial=_a.tutorial,selectTutorial=_a.selectTutorial;
71+
varname=tutorial.name;
72+
if(name.match(/^coderoad-tutorial-/)){
73+
name=name.slice(18);
74+
}
75+
if(name.match(/^coderoad-/)){
76+
name=name.slice(9);
77+
}
78+
returnReact.createElement(FlatButton_1.default,{label:name,primary:true,onTouchTap:selectTutorial.bind(this,tutorial)});
79+
};
80+
SelectTutorial=__decorate([
81+
react_redux_1.connect(null,function(dispatch){
82+
return{
83+
selectTutorial:function(tutorial){
84+
actions_1.loadTutorial(tutorial);
85+
dispatch(actions_1.setRoute('progress'));
86+
},
87+
};
88+
}),
89+
__metadata('design:paramtypes',[])
90+
],SelectTutorial);
91+
returnSelectTutorial;
92+
}(React.Component));
93+
exports.SelectTutorial=SelectTutorial;

‎lib/components/tutorials/tutorials.js

Lines changed: 6 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,12 @@
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-
varFlatButton_1=require('material-ui/FlatButton');
183
varTable_1=require('material-ui/Table');
19-
varreact_redux_1=require('react-redux');
20-
varactions_1=require('../../actions/actions');
21-
varfile_upload_1=require('material-ui/svg-icons/file/file-upload');
22-
varTutorialList=(function(_super){
23-
__extends(TutorialList,_super);
24-
functionTutorialList(){
25-
_super.apply(this,arguments);
26-
}
27-
TutorialList.prototype.trim=function(name){
28-
if(name.match(/^coderoad-tutorial-/)){
29-
returnname.slice(18);
30-
}
31-
if(name.match(/^coderoad-/)){
32-
returnname.slice(9);
33-
}
34-
returnname;
35-
};
36-
TutorialList.prototype.render=function(){
37-
var_this=this;
38-
var_a=this.props,tutorials=_a.tutorials,loadTutorials=_a.loadTutorials,selectTutorial=_a.selectTutorial,toggleAlert=_a.toggleAlert,updateTutorial=_a.updateTutorial;
39-
return(React.createElement("div",{className:'cr-tutorials'},React.createElement(Table_1.Table,null,React.createElement(Table_1.TableHeader,{displaySelectAll:false,adjustForCheckbox:false},React.createElement(Table_1.TableRow,null,React.createElement(Table_1.TableHeaderColumn,null,"Tutorial"),React.createElement(Table_1.TableHeaderColumn,null,"Version"))),React.createElement(Table_1.TableBody,{displayRowCheckbox:false},tutorials.map(function(tutorial,index){
40-
return(React.createElement(Table_1.TableRow,{key:index},React.createElement(Table_1.TableRowColumn,null,React.createElement(FlatButton_1.default,{label:_this.trim(tutorial.name),primary:true,onTouchTap:selectTutorial.bind(_this,tutorial)})),!!tutorial.latest
41-
?React.createElement(Table_1.TableRowColumn,null,tutorial.version," ",React.createElement(file_upload_1.default,{onClick:updateTutorial(tutorial.name)}))
42-
:React.createElement(Table_1.TableRowColumn,null,tutorial.version)));
43-
}))),React.createElement("br",null),React.createElement(FlatButton_1.default,{style:{margin:'0 90px'},label:'Check for Tutorials',secondary:true,onTouchTap:loadTutorials})));
44-
};
45-
TutorialList=__decorate([
46-
react_redux_1.connect(null,function(dispatch){
47-
return{
48-
selectTutorial:function(tutorial){
49-
actions_1.loadTutorial(tutorial);
50-
dispatch(actions_1.setRoute('progress'));
51-
},
52-
toggleAlert:function(item){
53-
dispatch(actions_1.toggleAlert(item));
54-
},
55-
loadTutorials:function(){
56-
dispatch(actions_1.loadTutorials());
57-
},
58-
updateTutorial:function(name){
59-
dispatch(actions_1.updateTutorial(name));
60-
}
61-
};
62-
}),
63-
__metadata('design:paramtypes',[])
64-
],TutorialList);
65-
returnTutorialList;
66-
}(React.Component));
4+
varbuttons_1=require('./buttons');
675
exports.Tutorials=function(_a){
686
vartutorials=_a.tutorials;
69-
return(React.createElement(TutorialList,{tutorials:tutorials}));
7+
return(React.createElement("div",{className:'cr-tutorials'},React.createElement(Table_1.Table,null,React.createElement(Table_1.TableHeader,{displaySelectAll:false,adjustForCheckbox:false},React.createElement(Table_1.TableRow,null,React.createElement(Table_1.TableHeaderColumn,null,"Tutorial"),React.createElement(Table_1.TableHeaderColumn,null,"Version"))),React.createElement(Table_1.TableBody,{displayRowCheckbox:false},tutorials.map(function(tutorial,index){
8+
return(React.createElement(Table_1.TableRow,{key:index},React.createElement(Table_1.TableRowColumn,null,React.createElement(buttons_1.SelectTutorial,{tutorial:tutorial})),!!tutorial.latest
9+
?React.createElement(Table_1.TableRowColumn,null,tutorial.version," ",React.createElement(buttons_1.UpdateTutorial,{name:tutorial.name}))
10+
:React.createElement(Table_1.TableRowColumn,null,tutorial.version)));
11+
}))),React.createElement("br",null),React.createElement(buttons_1.LoadTutorials,null)));
7012
};

‎src/components/progress/progress.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,5 @@ export const Progress: React.StatelessComponent<{
9797
</ListItem>;
9898
})}
9999
</List>
100-
101100
</Paper>
102101
);

‎src/components/tutorials/buttons.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import*asReactfrom'react';
2+
import{connect}from'react-redux';
3+
importFlatButtonfrom'material-ui/FlatButton';
4+
import{
5+
loadTutorial,loadTutorials,updateTutorial,setRoute,toggleAlert
6+
}from'../../actions/actions';
7+
importFileUploadfrom'material-ui/svg-icons/file/file-upload';
8+
9+
@connect(null,(dispatch)=>{
10+
return{
11+
loadTutorials:()=>{
12+
dispatch(loadTutorials());
13+
}
14+
};
15+
})
16+
exportclassLoadTutorialsextendsReact.Component<{
17+
loadTutorials?:any
18+
},{}>{
19+
render(){
20+
return<FlatButtonstyle={{margin:'0 90px'}}label='Check for Tutorials'secondary={true}onTouchTap={this.props.loadTutorials}/>;
21+
}
22+
}
23+
24+
@connect(null,(dispatch)=>{
25+
return{
26+
updateTutorial:(name:string)=>{
27+
dispatch(updateTutorial(name));
28+
}
29+
};
30+
})
31+
exportclassUpdateTutorialextendsReact.Component<{
32+
name:string,updateTutorial?:any
33+
},{}>{
34+
render(){
35+
const{name, updateTutorial}=this.props;
36+
return<FileUploadonClick={updateTutorial(name)}/>;
37+
}
38+
}
39+
40+
@connect(null,(dispatch)=>{
41+
return{
42+
selectTutorial:(tutorial:CR.Tutorial)=>{
43+
loadTutorial(tutorial);
44+
dispatch(setRoute('progress'));
45+
},
46+
};
47+
})
48+
exportclassSelectTutorialextendsReact.Component<{
49+
tutorial:CR.Tutorial,selectTutorial?:any
50+
},{}>{
51+
render(){
52+
const{tutorial, selectTutorial}=this.props;
53+
letname=tutorial.name;
54+
if(name.match(/^coderoad-tutorial-/)){
55+
name=name.slice(18);
56+
}
57+
if(name.match(/^coderoad-/)){
58+
name=name.slice(9);
59+
}
60+
return<FlatButtonlabel={name}primary={true}onTouchTap={selectTutorial.bind(this,tutorial)}/>;
61+
}
62+
}
Lines changed: 8 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,14 @@
11
import*asReactfrom'react';
2-
importFlatButtonfrom'material-ui/FlatButton';
32
import{
43
Table,TableHeaderColumn,TableRow,TableHeader,TableRowColumn,TableBody
54
}from'material-ui/Table';
6-
import{connect}from'react-redux';
75
import{
8-
loadTutorial,loadTutorials,updateTutorial,setRoute,toggleAlert
9-
}from'../../actions/actions';
6+
LoadTutorials,SelectTutorial,UpdateTutorial
7+
}from'./buttons';
108

11-
import{pink500}from'material-ui/styles/colors';
12-
importFileUploadfrom'material-ui/svg-icons/file/file-upload';
13-
14-
@connect(null,(dispatch)=>{
15-
return{
16-
selectTutorial:(tutorial:CR.Tutorial)=>{
17-
loadTutorial(tutorial);
18-
dispatch(setRoute('progress'));
19-
},
20-
toggleAlert:(item:CR.Alert):void=>{
21-
dispatch(toggleAlert(item));
22-
},
23-
loadTutorials:()=>{
24-
dispatch(loadTutorials());
25-
},
26-
updateTutorial:(name:string)=>{
27-
dispatch(updateTutorial(name));
28-
}
29-
};
30-
})
31-
classTutorialListextendsReact.Component<{
32-
tutorials:CR.Tutorial[],loadTutorials?:()=>void,
33-
selectTutorial?:(tutorial:CR.Tutorial)=>void,
34-
toggleAlert?:(item:CR.Alert)=>void,updateTutorial?:any
35-
},{}>{
36-
trim(name:string):string{
37-
if(name.match(/^coderoad-tutorial-/)){
38-
returnname.slice(18);
39-
}
40-
if(name.match(/^coderoad-/)){
41-
returnname.slice(9);
42-
}
43-
returnname;
44-
}
45-
render(){
46-
const{tutorials, loadTutorials, selectTutorial, toggleAlert, updateTutorial}=this.props;
47-
return(
9+
exportconstTutorials :React.StatelessComponent<{
10+
tutorials:CR.Tutorial[]
11+
}>=({tutorials})=>(
4812
<divclassName='cr-tutorials'>
4913
<Table>
5014
<TableHeader
@@ -61,11 +25,11 @@ class TutorialList extends React.Component<{
6125
return(
6226
<TableRowkey={index}>
6327
<TableRowColumn>
64-
<FlatButtonlabel={this.trim(tutorial.name)}primary={true}onTouchTap={selectTutorial.bind(this,tutorial)}/>
28+
<SelectTutorialtutorial={tutorial}/>
6529
</TableRowColumn>
6630
{!!tutorial.latest
6731
?<TableRowColumn>
68-
{tutorial.version}<FileUploadonClick={updateTutorial(tutorial.name)}/>
32+
{tutorial.version}<UpdateTutorialname={tutorial.name}/>
6933
</TableRowColumn>
7034
:<TableRowColumn>{tutorial.version}</TableRowColumn>}
7135
</TableRow>
@@ -76,12 +40,6 @@ class TutorialList extends React.Component<{
7640
</Table>
7741

7842
<br/>
79-
<FlatButtonstyle={{margin:'0 90px'}}label='Check for Tutorials'secondary={true}onTouchTap={loadTutorials}/>
43+
<LoadTutorials/>
8044
</div>
81-
);
82-
}
83-
}
84-
85-
exportconstTutorials=({tutorials})=>(
86-
<TutorialListtutorials={tutorials}/>
8745
);

‎tsconfig.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@
122122
"src/components/start/checks/steps.tsx",
123123
"src/components/start/checks/verify.tsx",
124124
"src/components/start/start.tsx",
125+
"src/components/tutorials/buttons.tsx",
125126
"src/components/tutorials/tutorials.tsx"
126127
],
127128
"exclude": [

0 commit comments

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