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

Commitf24a0bd

Browse files
committed
page refactoring into selectors
1 parentcf809cd commitf24a0bd

File tree

16 files changed

+191
-161
lines changed

16 files changed

+191
-161
lines changed

‎lib/components/Page/Hints/index.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,14 @@ var Hints = (function (_super) {
3232
_super.apply(this,arguments);
3333
}
3434
Hints.prototype.render=function(){
35-
var_a=this.props,hint=_a.hint,hints=_a.hints;
35+
varhint=this.props.hint;
3636
if(!hint){
3737
returnnull;
3838
}
39-
return(React.createElement(Card_1.Card,{style:styles},React.createElement(Card_1.CardHeader,{title:'Hints',avatar:React.createElement(help_1.default,null),actAsExpander:true,showExpandableButton:true}),React.createElement(Card_1.CardText,{className:'cr-task-hint',expandable:true},React.createElement(index_1.Markdown,null,hint)),hints.length>1
40-
?React.createElement(Card_1.CardActions,{style:{paddingBottom:'30px !important'},expandable:true,className:'cr-task-hints-actions'},React.createElement(HintButton_1.default,{type:'prev',label:'Previous',hintsLength:hints.length}),React.createElement(HintButton_1.default,{type:'next',label:'Next',hintsLength:hints.length}))
41-
:null));
39+
return(React.createElement(Card_1.Card,{style:styles},React.createElement(Card_1.CardHeader,{title:'Hints',avatar:React.createElement(help_1.default,null),actAsExpander:true,showExpandableButton:true}),React.createElement(Card_1.CardText,{className:'cr-task-hint',expandable:true},React.createElement(index_1.Markdown,null,hint)),React.createElement(Card_1.CardActions,{style:{paddingBottom:'30px !important'},expandable:true,className:'cr-task-hints-actions'},React.createElement(HintButton_1.default,{type:'prev',label:'Previous'}),React.createElement(HintButton_1.default,{type:'next',label:'Next'}))));
4240
};
4341
Hints=__decorate([
4442
react_redux_1.connect(function(state){return({
45-
hints:selectors_1.hintsSelector(state),
4643
hint:selectors_1.hintSelector(state),
4744
});}),
4845
__metadata('design:paramtypes',[])

‎lib/components/Page/ProgressBar/index.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,11 @@ var ProgressBar = (function (_super) {
2727
_super.apply(this,arguments);
2828
}
2929
ProgressBar.prototype.render=function(){
30-
var_a=this.props,completed=_a.completed,taskProgress=_a.taskProgress;
31-
if(completed){
32-
returnnull;
33-
}
30+
vartaskProgress=this.props.taskProgress;
3431
return(React.createElement(LinearProgress_1.default,{mode:'determinate',value:taskProgress,style:style}));
3532
};
3633
ProgressBar=__decorate([
3734
react_redux_1.connect(function(state){return({
38-
completed:state.progress.pages[state.pagePosition],
3935
taskProgress:(state.taskPosition/state.tutorial.pages[state.pagePosition].tasks.length)*100
4036
});}),
4137
__metadata('design:paramtypes',[])

‎lib/components/Page/Task/index.js

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
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+
};
216
varReact=require('react');
17+
varreact_redux_1=require('react-redux');
318
varindex_1=require('../../index');
419
vartaskCheckbox_1=require('./taskCheckbox');
520
varList_1=require('material-ui/List');
@@ -23,14 +38,25 @@ var styles = {
2338
lineHeight:'1.6',
2439
},
2540
};
26-
functiongetStatus(index,taskPosition,testRun){
27-
returnindex<taskPosition ?colors_1.lightGreen200 :'inherit';
28-
}
29-
varTask=function(_a){
30-
vartask=_a.task,taskPosition=_a.taskPosition,index=_a.index,testRun=_a.testRun;
31-
varbackgroundColor=getStatus(index,taskPosition,testRun);
32-
varisCurrentTask=taskPosition===index;
33-
return(React.createElement(List_1.ListItem,{key:index,style:Object.assign({},styles.task,{backgroundColor:backgroundColor})},taskCheckbox_1.default(isCurrentTask,testRun),React.createElement("span",{style:styles.index},index+1,"."),React.createElement("div",{style:styles.description},React.createElement(index_1.Markdown,null,task.description))));
34-
};
41+
varTask=(function(_super){
42+
__extends(Task,_super);
43+
functionTask(){
44+
_super.apply(this,arguments);
45+
}
46+
Task.prototype.render=function(){
47+
var_a=this.props,testRun=_a.testRun,task=_a.task,index=_a.index,isCurrentTask=_a.isCurrentTask,isCompletedTask=_a.isCompletedTask;
48+
varbackgroundColor=isCompletedTask ?colors_1.lightGreen200 :'inherit';
49+
return(React.createElement(List_1.ListItem,{key:index,style:Object.assign({},styles.task,{backgroundColor:backgroundColor})},taskCheckbox_1.default(isCurrentTask,testRun),React.createElement("span",{style:styles.index},index+1,"."),React.createElement("div",{style:styles.description},React.createElement(index_1.Markdown,null,task.description))));
50+
};
51+
Task=__decorate([
52+
react_redux_1.connect(function(state,props){return({
53+
testRun:state.testRun,
54+
isCurrentTask:state.taskPosition===props.index,
55+
isCompletedTask:state.taskPosition>props.index,
56+
});}),
57+
__metadata('design:paramtypes',[])
58+
],Task);
59+
returnTask;
60+
}(React.Component));
3561
Object.defineProperty(exports,"__esModule",{value:true});
3662
exports.default=Task;

‎lib/components/Page/Tasks/index.js

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,24 @@ var __extends = (this && this.__extends) || function (d, b) {
44
function__(){this.constructor=d;}
55
d.prototype=b===null ?Object.create(b) :(__.prototype=b.prototype,new__());
66
};
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+
};
716
varReact=require('react');
817
varReactDOM=require('react-dom');
18+
varreact_redux_1=require('react-redux');
919
varList_1=require('material-ui/List');
1020
varCard_1=require('material-ui/Card');
1121
varSubheader_1=require('material-ui/Subheader');
1222
varTask_1=require('../Task');
1323
varcolors_1=require('material-ui/styles/colors');
14-
varTasksComplete_1=require('../TasksComplete');
24+
varselectors_1=require('../../../selectors');
1525
varmargin='10px 5px';
1626
varTasks=(function(_super){
1727
__extends(Tasks,_super);
@@ -22,10 +32,17 @@ var Tasks = (function (_super) {
2232
ReactDOM.findDOMNode(this.refs.listEnd).scrollIntoView();
2333
};
2434
Tasks.prototype.render=function(){
25-
var_a=this.props,tasks=_a.tasks,taskPosition=_a.taskPosition,testRun=_a.testRun,completed=_a.completed,page=_a.page;
35+
var_a=this.props,tasks=_a.tasks,completed=_a.completed;
2636
varbackgroundColor=completed ?colors_1.lightGreen200 :'white';
27-
return(React.createElement("div",null,React.createElement(Card_1.Card,{style:{backgroundColor:backgroundColor,margin:margin}},React.createElement(List_1.List,null,React.createElement(Subheader_1.default,null,"Tasks"),tasks.map(function(task,index){return(React.createElement(Task_1.default,{key:index,index:index,task:task,taskPosition:taskPosition,testRun:testRun}));}))),React.createElement(TasksComplete_1.default,{page:page,completed:completed}),React.createElement("div",{ref:'listEnd'})));
37+
return(React.createElement(Card_1.Card,{style:{backgroundColor:backgroundColor,margin:margin}},React.createElement(List_1.List,null,React.createElement(Subheader_1.default,null,"Tasks"),tasks.map(function(task,index){return(React.createElement(Task_1.default,{key:index,index:index,task:task}));})),React.createElement("div",{ref:'listEnd'})));
2838
};
39+
Tasks=__decorate([
40+
react_redux_1.connect(function(state){return({
41+
tasks:selectors_1.visibleTasksSelector(state),
42+
completed:selectors_1.pageCompletedSelector(state),
43+
});}),
44+
__metadata('design:paramtypes',[])
45+
],Tasks);
2946
returnTasks;
3047
}(React.Component));
3148
Object.defineProperty(exports,"__esModule",{value:true});
Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
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+
};
216
varReact=require('react');
17+
varreact_redux_1=require('react-redux');
318
varCard_1=require('material-ui/Card');
419
varindex_1=require('../../index');
520
varcolors_1=require('material-ui/styles/colors');
21+
varselectors_1=require('../../../selectors');
622
varstyles={
723
card:{
824
backgroundColor:colors_1.cyan500,
@@ -13,12 +29,22 @@ var styles = {
1329
fontSize:'1.1em'
1430
},
1531
};
16-
varTasksComplete=function(_a){
17-
varpage=_a.page,completed=_a.completed;
18-
if(!completed||!page.onPageComplete){
19-
returnnull;
32+
varTasksComplete=(function(_super){
33+
__extends(TasksComplete,_super);
34+
functionTasksComplete(){
35+
_super.apply(this,arguments);
2036
}
21-
return(React.createElement(Card_1.Card,{style:styles.card},React.createElement(Card_1.CardText,null,React.createElement(index_1.Markdown,{style:styles.text},page.onPageComplete))));
22-
};
37+
TasksComplete.prototype.render=function(){
38+
varonPageComplete=this.props.onPageComplete;
39+
return(React.createElement(Card_1.Card,{style:styles.card},React.createElement(Card_1.CardText,null,React.createElement(index_1.Markdown,{style:styles.text},onPageComplete))));
40+
};
41+
TasksComplete=__decorate([
42+
react_redux_1.connect(function(state){return({
43+
onPageComplete:selectors_1.pageSelector(state).onPageComplete,
44+
});}),
45+
__metadata('design:paramtypes',[])
46+
],TasksComplete);
47+
returnTasksComplete;
48+
}(React.Component));
2349
Object.defineProperty(exports,"__esModule",{value:true});
2450
exports.default=TasksComplete;

‎lib/components/Page/index.js

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,31 +20,27 @@ var Tasks_1 = require('./Tasks');
2020
varHints_1=require('./Hints');
2121
varPageToolbar_1=require('./PageToolbar');
2222
varProgressBar_1=require('./ProgressBar');
23+
varTasksComplete_1=require('./TasksComplete');
2324
varselectors_1=require('../../selectors');
2425
varstyles={
25-
width:'100%',
26-
overflowY:'scroll',
26+
page:{
27+
width:'100%',
28+
overflowY:'scroll',
29+
},
2730
};
2831
varPage=(function(_super){
2932
__extends(Page,_super);
3033
functionPage(){
3134
_super.apply(this,arguments);
3235
}
3336
Page.prototype.render=function(){
34-
var_a=this.props,page=_a.page,tasks=_a.tasks,taskPosition=_a.taskPosition,testRun=_a.testRun,progress=_a.progress,pagePosition=_a.pagePosition,completed=_a.completed,task=_a.task,taskProgress=_a.taskProgress;
35-
return(React.createElement("section",{style:styles,className:'cr-page'},React.createElement(index_1.ContentCard,{title:page.title,content:page.description}),React.createElement(Tasks_1.default,{tasks:tasks.slice(0,taskPosition+1),taskPosition:taskPosition,testRun:testRun,completed:completed,page:page}),React.createElement(PageToolbar_1.default,{tasks:tasks,taskPosition:taskPosition},React.createElement(Hints_1.default,null),React.createElement(ProgressBar_1.default,null))));
37+
var_a=this.props,page=_a.page,isCompleted=_a.isCompleted;
38+
return(React.createElement("section",{style:styles.page,className:'cr-page'},React.createElement(index_1.ContentCard,{title:page.title,content:page.description}),React.createElement(Tasks_1.default,null),React.createElement(PageToolbar_1.default,null,React.createElement(Hints_1.default,null),isCompleted ?React.createElement(TasksComplete_1.default,null) :React.createElement(ProgressBar_1.default,null))));
3639
};
3740
Page=__decorate([
3841
react_redux_1.connect(function(state){return({
3942
page:selectors_1.pageSelector(state),
40-
tasks:selectors_1.tasksSelector(state),
41-
testRun:state.testRun,
42-
progress:state.progress,
43-
taskPosition:state.taskPosition,
44-
pagePosition:state.pagePosition,
45-
completed:selectors_1.pageCompletedSelector(state),
46-
task:selectors_1.taskSelector(state),
47-
taskProgress:selectors_1.taskProgressSelector(state),
43+
tasksCompleted:selectors_1.taskProgressSelector(state)===100,
4844
});}),
4945
__metadata('design:paramtypes',[])
5046
],Page);

‎lib/selectors/hints.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use strict";
22
varreselect_1=require('reselect');
33
vartasks_1=require('./tasks');
4-
exports.hintsSelector=reselect_1.createSelector(tasks_1.taskSelector,function(task){returntask&&task.hints ?task.hints :null;});
4+
exports.hintsSelector=reselect_1.createSelector(tasks_1.taskSelector,function(task){returntask&&task.hints ?task.hints :[];});
55
exports.hintSelector=reselect_1.createSelector(exports.hintsSelector,function(state){returnstate.hintPosition;},function(hints,hintPosition){return(hintPosition>=0&&hints&&hints.length) ?
66
hints[hintPosition] :null;});

‎lib/selectors/tasks.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@ exports.tasksSelector = reselect_1.createSelector(page_1.pageSelector, function
55
exports.taskPositionSelector=function(state){returnstate.taskPosition;};
66
exports.taskSelector=reselect_1.createSelector(exports.tasksSelector,function(state){returnstate.taskPosition;},function(tasks,taskPosition){returntasks.length&&taskPosition<=tasks.length-1 ?
77
tasks[taskPosition] :null;});
8-
exports.visibleTasksSelector=function(state){returnreselect_1.createSelector(exports.tasksSelector,function(tasks){returntasks.slice(0,state.taskPosition+1);});};
8+
exports.visibleTasksSelector=reselect_1.createSelector(exports.tasksSelector,function(state){returnstate.taskPosition;},function(tasks,taskPosition){returntasks.slice(0,taskPosition+1);});
99
exports.taskProgressSelector=reselect_1.createSelector(exports.tasksSelector,function(state){returnstate.taskPosition;},function(tasks,taskPosition){return(taskPosition/tasks.length)*100;});

‎src/components/Page/Hints/index.tsx

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card';
44
import{Markdown}from'../../index';
55
importHintButtonfrom'./HintButton';
66
importHelpfrom'material-ui/svg-icons/action/help';
7-
import{hintsSelector,hintSelector}from'../../../selectors';
7+
import{hintSelector}from'../../../selectors';
88

99
conststyles={
1010
position:'relative',
@@ -14,14 +14,13 @@ const styles = {
1414
};
1515

1616
@connect(state=>({
17-
hints:hintsSelector(state),
1817
hint:hintSelector(state),
1918
}))
2019
exportdefaultclassHintsextendsReact.Component<{
21-
hints?:string[],hint?:string
20+
hintsLength?:number,hint?:string
2221
},{}>{
2322
render(){
24-
const{hint, hints}=this.props;
23+
const{hint}=this.props;
2524
if(!hint){
2625
returnnull;
2726
}
@@ -39,25 +38,20 @@ export default class Hints extends React.Component<{
3938
>
4039
<Markdown>{hint}</Markdown>
4140
</CardText>
42-
{hints.length>1
43-
?<CardActions
44-
style={{paddingBottom:'30px !important'}}
45-
expandable={true}
46-
className='cr-task-hints-actions'
47-
>
48-
<HintButton
49-
type='prev'
50-
label='Previous'
51-
hintsLength={hints.length}
52-
/>
53-
<HintButton
54-
type='next'
55-
label='Next'
56-
hintsLength={hints.length}
57-
/>
58-
</CardActions>
59-
:null
60-
}
41+
<CardActions
42+
style={{paddingBottom:'30px !important'}}
43+
expandable={true}
44+
className='cr-task-hints-actions'
45+
>
46+
<HintButton
47+
type='prev'
48+
label='Previous'
49+
/>
50+
<HintButton
51+
type='next'
52+
label='Next'
53+
/>
54+
</CardActions>
6155
</Card>
6256
);
6357
}

‎src/components/Page/ProgressBar/index.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import*asReactfrom'react';
22
import{connect}from'react-redux';
33
importLinearProgressfrom'material-ui/LinearProgress';
4-
import{taskProgressSelector,pageCompletedSelector}from'../../../selectors';
4+
import{taskProgressSelector}from'../../../selectors';
55

66
conststyle={
77
height:'10px',
@@ -10,18 +10,13 @@ const style = {
1010
};
1111

1212
@connect(state=>({
13-
// pageCompletedSelector(state),
14-
completed:state.progress.pages[state.pagePosition],
1513
taskProgress:(state.taskPosition/state.tutorial.pages[state.pagePosition].tasks.length)*100
1614
}))
1715
exportdefaultclassProgressBarextendsReact.Component<{
18-
taskProgress?:number,completed?:boolean
16+
taskProgress?:number
1917
},{}>{
2018
render(){
21-
const{completed, taskProgress}=this.props;
22-
if(completed){
23-
returnnull;
24-
}
19+
const{taskProgress}=this.props;
2520
return(
2621
<LinearProgress
2722
mode='determinate'

0 commit comments

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