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

Commitd570f39

Browse files
committed
refactor page components
1 parentafcd5a6 commitd570f39

File tree

13 files changed

+272
-80
lines changed

13 files changed

+272
-80
lines changed

‎lib/components/page/content.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
"use strict";
2+
varReact=require('react');
3+
var_components_1=require('../_components');
4+
varmaterial_ui_1=require('material-ui');
5+
functiondefault_1(_a){
6+
varpage=_a.page;
7+
return(React.createElement(material_ui_1.Card,null,
8+
React.createElement(material_ui_1.CardHeader,{title:page.title}),
9+
React.createElement(material_ui_1.CardText,null,
10+
React.createElement(_components_1.MarkdownText,{text:page.description})
11+
)));
12+
}
13+
Object.defineProperty(exports,"__esModule",{value:true});
14+
exports.default=default_1;

‎lib/components/page/edit.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
'use strict';
1+
"use strict";
22
varReact=require('react');
33
varpath=require('path');
44
varEdit=require('material-ui/lib/svg-icons/editor/mode-edit');

‎lib/components/page/page.js

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,39 @@ var React = require('react');
1717
varReactDOM=require('react-dom');
1818
varreact_redux_1=require('react-redux');
1919
varAction=require('../../actions/actions');
20-
var_components_1=require('../_components');
21-
varclassnames=require('classnames');
2220
variconPath='material-ui/lib/svg-icons/';
21+
var_components_1=require('../_components');
2322
varmaterial_ui_1=require('material-ui');
2423
varcolors_1=require('material-ui/lib/styles/colors');
24+
varclassnames=require('classnames');
2525
varComplete=require(iconPath+'toggle/check-box');
2626
varIncomplete=require(iconPath+'toggle/check-box-outline-blank');
2727
varRunningTest=require(iconPath+'toggle/indeterminate-check-box');
28+
functionhintsShown(task,hintPos){
29+
if(hintPos>-1&&task.hints&&task.hints.length>0){
30+
returntask.hints.slice(0,hintPos+1);
31+
}
32+
returnnull;
33+
}
34+
functionvisibleTasks(tasks,taskPosition){
35+
returntasks.slice(0,taskPosition+1);
36+
}
37+
varTaskCheckbox=function(_a){
38+
varindex=_a.index,taskPosition=_a.taskPosition,runTests=_a.runTests;
39+
varicon=null;
40+
if(index<taskPosition){
41+
icon=React.createElement(Complete,{color:colors_1.green500});
42+
}
43+
elseif(index===taskPosition&&runTests){
44+
icon=React.createElement(RunningTest,{color:colors_1.orange500});
45+
}
46+
else{
47+
icon=React.createElement(Incomplete,null);
48+
}
49+
return(React.createElement("span",{className:'cr-task-checkbox'},icon));
50+
};
51+
varmaterial_ui_2=require('material-ui');
52+
varcontent_1=require('./content');
2853
varInfo=require(iconPath+'action/info');
2954
varInfoOutline=require(iconPath+'action/info-outline');
3055
varstyle={
@@ -61,20 +86,6 @@ var default_1 = (function (_super) {
6186
ReactDOM.findDOMNode(this.refs.onPageComplete).scrollIntoView();
6287
}
6388
};
64-
default_1.prototype.visibleTasks=function(){
65-
returnthis.props.tasks.slice(0,this.props.taskPosition+1);
66-
};
67-
default_1.prototype.getIcon=function(index,position){
68-
if(index<position){
69-
returnReact.createElement(Complete,{color:colors_1.green500});
70-
}
71-
elseif(index===position&&this.props.runTests){
72-
returnReact.createElement(RunningTest,{color:colors_1.orange500});
73-
}
74-
else{
75-
returnReact.createElement(Incomplete,null);
76-
}
77-
};
7889
default_1.prototype.displayHint=function(task){
7990
if(task&&task.hints&&task.hints.length){
8091
if(this.state.hintPos<task.hints.length-1){
@@ -85,42 +96,31 @@ var default_1 = (function (_super) {
8596
this.setState({hintPos:-1,taskPos:this.state.taskPos});
8697
}
8798
};
88-
default_1.prototype.hintsShown=function(task){
89-
if(this.state.hintPos>-1&&task.hints&&task.hints.length>0){
90-
returntask.hints.slice(0,this.state.hintPos+1);
91-
}
92-
returnnull;
93-
};
9499
default_1.prototype.render=function(){
95100
var_this=this;
96101
varpage=this.props.page;
97-
vartasks=this.visibleTasks();
98102
vartaskPosition=this.props.taskPosition;
103+
vartasks=visibleTasks(this.props.tasks,taskPosition);
99104
varcurrentTask=taskPosition<=tasks.length ?tasks[taskPosition] :null;
100105
varallComplete=taskPosition>=tasks.length;
101-
console.log(page);
102-
return(React.createElement(material_ui_1.Paper,{style:style,zDepth:1,className:'cr-page'},
103-
React.createElement(material_ui_1.Card,null,
104-
React.createElement(material_ui_1.CardHeader,{title:page.title}),
105-
React.createElement(material_ui_1.CardText,null,
106-
React.createElement(_components_1.MarkdownText,{text:page.description})
107-
)),
106+
return(React.createElement(material_ui_2.Paper,{style:style,zDepth:1,className:'cr-page'},
107+
React.createElement(content_1.default,{page:page}),
108108
React.createElement(material_ui_1.Divider,null),
109109
React.createElement(material_ui_1.List,{subheader:'Tasks',className:'cr-tasks',ref:'tasks'},
110110
tasks.map(function(task,index){
111111
varisCurrentTask=index===taskPosition;
112112
varisDisabledTask=index>taskPosition;
113113
varisCompletedTask=index<taskPosition;
114114
varisFinalTask=index>=tasks.length-1;
115-
varhints=_this.hintsShown(task);
115+
varhints=hintsShown(task,_this.state.hintPos);
116116
return(React.createElement("div",null,
117117
React.createElement(material_ui_1.ListItem,{ref:'task'+index,className:classnames({
118118
'cr-task':true,
119119
'isCompletedTask':isCompletedTask,
120120
'isCurrentTask':isCurrentTask,
121121
'isDisabledTask':isDisabledTask
122122
})},
123-
React.createElement("span",{className:'cr-task-checkbox'},_this.getIcon(index,taskPosition)),
123+
React.createElement(TaskCheckbox,{index:index,taskPosition:taskPosition,runTests:_this.props.runTests}),
124124
React.createElement("span",{className:'cr-task-index'},
125125
index+1,
126126
"."),
@@ -148,17 +148,17 @@ var default_1 = (function (_super) {
148148
)
149149
) :null),
150150
React.createElement("section",{className:'cr-page-toolbar'},
151-
React.createElement(material_ui_1.LinearProgress,{mode:'determinate',value:taskProgress(taskPosition,tasks.length),style:{height:'6px'}}),
152-
React.createElement(material_ui_1.Toolbar,null,
151+
React.createElement(material_ui_2.LinearProgress,{mode:'determinate',value:taskProgress(taskPosition,tasks.length),style:{height:'6px'}}),
152+
React.createElement(material_ui_2.Toolbar,null,
153153
currentTask&&currentTask.hints&&currentTask.hints.length ?
154-
React.createElement(material_ui_1.ToolbarGroup,{float:'left'},this.state.hintPos<=currentTask.hints.length-2 ?
155-
React.createElement(material_ui_1.FlatButton,{className:'cr-task-showHint',icon:React.createElement(InfoOutline,null),onClick:this.displayHint.bind(this,currentTask)})
156-
:React.createElement(material_ui_1.FlatButton,{className:'cr-task-showHint-disabled',icon:React.createElement(Info,null),disabled:true}))
154+
React.createElement(material_ui_2.ToolbarGroup,{float:'left'},this.state.hintPos<=currentTask.hints.length-2 ?
155+
React.createElement(material_ui_2.FlatButton,{className:'cr-task-showHint',icon:React.createElement(InfoOutline,null),onClick:this.displayHint.bind(this,currentTask)})
156+
:React.createElement(material_ui_2.FlatButton,{className:'cr-task-showHint-disabled',icon:React.createElement(Info,null),disabled:true}))
157157
:null,
158-
React.createElement(material_ui_1.ToolbarGroup,{float:'right'},allComplete ?
159-
React.createElement(material_ui_1.RaisedButton,{label:'Continue',primary:true,onClick:this.props.callNextPage})
158+
React.createElement(material_ui_2.ToolbarGroup,{float:'right'},allComplete ?
159+
React.createElement(material_ui_2.RaisedButton,{label:'Continue',primary:true,onClick:this.props.callNextPage})
160160
:
161-
React.createElement(material_ui_1.RaisedButton,{label:'Run',secondary:true,onClick:this.props.callRunTests}))))));
161+
React.createElement(material_ui_2.RaisedButton,{label:'Run',secondary:true,onClick:this.props.callRunTests}))))));
162162
};
163163
default_1=__decorate([
164164
react_redux_1.connect(null,function(dispatch,state){

‎lib/components/page/tasks.js

Whitespace-only changes.

‎lib/components/page/toolbar.js

Whitespace-only changes.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
},
3737
"dependencies": {
3838
"highlights":"1.3.1",
39-
"lodash":"4.5.1",
39+
"lodash":"4.6.1",
4040
"material-ui":"0.14.4",
4141
"marked":"0.3.5",
4242
"react":"0.14.7",
@@ -49,7 +49,7 @@
4949
"devDependencies": {
5050
"ava":"^0.12.0",
5151
"enzyme":"2.0.0",
52-
"jsdom":"8.0.4",
52+
"jsdom":"8.1.0",
5353
"react-addons-test-utils":"0.14.7"
5454
},
5555
"scripts": {

‎src/components/page/content.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import*asReactfrom'react';
2+
import{MarkdownText}from'../_components';
3+
import{Card,CardHeader,CardText}from'material-ui';
4+
5+
exportdefaultfunction({page}){
6+
return(
7+
<Card>
8+
<CardHeadertitle={page.title}/>
9+
<CardText>
10+
<MarkdownTexttext={page.description}/>
11+
</CardText>
12+
</Card>
13+
);
14+
}

‎src/components/page/edit.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
'use strict';
21
import*asReactfrom'react';
32
import*aspathfrom'path';
43
constEdit=require('material-ui/lib/svg-icons/editor/mode-edit');

‎src/components/page/page.tsx

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,52 @@ import * as React from 'react';
33
import*asReactDOMfrom'react-dom';
44
import{connect}from'react-redux';
55
import*asActionfrom'../../actions/actions';
6-
import{MarkdownText}from'../_components';
7-
import*asclassnamesfrom'classnames';
86
consticonPath='material-ui/lib/svg-icons/';
97

10-
import{Paper,Card,CardHeader,CardText,LinearProgress,Divider,
11-
Toolbar,ToolbarGroup,RaisedButton,List,ListItem,FlatButton}from'material-ui';
8+
// tasks
9+
import{MarkdownText}from'../_components';
10+
import{List,ListItem,Divider}from'material-ui';
1211
import{green500,orange500}from'material-ui/lib/styles/colors';
12+
import*asclassnamesfrom'classnames';
1313
letComplete=require(iconPath+'toggle/check-box');
1414
letIncomplete=require(iconPath+'toggle/check-box-outline-blank');
1515
letRunningTest=require(iconPath+'toggle/indeterminate-check-box');
16+
17+
// Page
18+
functionhintsShown(task:CR.Task,hintPos:number){
19+
if(hintPos>-1&&task.hints&&task.hints.length>0){
20+
returntask.hints.slice(0,hintPos+1);
21+
}
22+
returnnull;
23+
}
24+
25+
functionvisibleTasks(tasks:CR.Task[],taskPosition:number){
26+
returntasks.slice(0,taskPosition+1);
27+
}
28+
29+
constTaskCheckbox=({index, taskPosition, runTests})=>{
30+
leticon=null;
31+
if(index<taskPosition){
32+
icon=<Completecolor={green500}/>;
33+
}elseif(index===taskPosition&&runTests){
34+
// TODO: loading animation inside of checkbox
35+
icon=<RunningTestcolor={orange500}/>;
36+
}else{
37+
icon=<Incomplete/>;
38+
}
39+
return(
40+
<spanclassName='cr-task-checkbox'>
41+
{icon}
42+
</span>
43+
);
44+
};
45+
46+
47+
import{Paper,LinearProgress,Toolbar,ToolbarGroup,RaisedButton,FlatButton}from'material-ui';
48+
49+
importPageContentfrom'./content';
50+
// import PageToolbar from './toolbar';
51+
1652
letInfo=require(iconPath+'action/info');
1753
letInfoOutline=require(iconPath+'action/info-outline');
1854

@@ -64,19 +100,6 @@ componentDidUpdate() {
64100
ReactDOM.findDOMNode<HTMLElement>(this.refs.onPageComplete).scrollIntoView();
65101
}
66102
}
67-
visibleTasks(){
68-
returnthis.props.tasks.slice(0,this.props.taskPosition+1);
69-
}
70-
getIcon(index,position){
71-
if(index<position){
72-
return<Completecolor={green500}/>;
73-
}elseif(index===position&&this.props.runTests){
74-
// TODO: loading animation inside of checkbox
75-
return<RunningTestcolor={orange500}/>;
76-
}else{
77-
return<Incomplete/>;
78-
}
79-
}
80103
displayHint(task){
81104
if(task&&task.hints&&task.hints.length){
82105
if(this.state.hintPos<task.hints.length-1){
@@ -86,40 +109,35 @@ displayHint(task) {
86109
this.setState({hintPos:-1,taskPos:this.state.taskPos});
87110
}
88111
}
89-
hintsShown(task){
90-
if(this.state.hintPos>-1&&task.hints&&task.hints.length>0){
91-
returntask.hints.slice(0,this.state.hintPos+1);
92-
}
93-
returnnull;
94-
}
112+
//hintsShown(task) {
113+
// if (this.state.hintPos > -1 && task.hints && task.hints.length > 0) {
114+
// return task.hints.slice(0, this.state.hintPos + 1);
115+
// }
116+
// return null;
117+
//}
95118
render(){
96119
letpage=this.props.page;
97-
lettasks=this.visibleTasks();
98120
lettaskPosition=this.props.taskPosition;
121+
lettasks=visibleTasks(this.props.tasks,taskPosition);
99122
varcurrentTask=taskPosition<=tasks.length ?tasks[taskPosition] :null;
100123
// let log = this.props.log;
101124
letallComplete=taskPosition>=tasks.length;
102-
console.log(page);
125+
103126
return(
104127
<Paperstyle={style}zDepth={1}className='cr-page'>
105128
{/* Content */}
106-
<Card>
107-
<CardHeadertitle={page.title}/>
108-
<CardText>
109-
<MarkdownTexttext={page.description}/>
110-
</CardText>
111-
</Card>
129+
<PageContentpage={page}/>
112130

113131
<Divider/>
114132

115-
{/* Task List (tasks, isComplete)*/}
116-
<Listsubheader='Tasks'className='cr-tasks'ref='tasks'>
133+
{/* Task List (tasks, isComplete)*/}
134+
<Listsubheader='Tasks'className='cr-tasks'ref='tasks'>
117135
{tasks.map((task:CR.Task,index)=>{
118136
letisCurrentTask=index===taskPosition;
119137
letisDisabledTask=index>taskPosition;
120138
letisCompletedTask=index<taskPosition;
121139
letisFinalTask=index>=tasks.length-1;
122-
lethints=this.hintsShown(task);
140+
lethints=hintsShown(task,this.state.hintPos);
123141
return(
124142
<div>
125143
<ListItem
@@ -130,7 +148,7 @@ render() {
130148
'isCurrentTask':isCurrentTask,
131149
'isDisabledTask':isDisabledTask
132150
})}>
133-
<spanclassName='cr-task-checkbox'>{this.getIcon(index,taskPosition)}</span>
151+
<TaskCheckboxindex={index}taskPosition={taskPosition}runTests={this.props.runTests}/>
134152
<spanclassName='cr-task-index'>{index+1}.</span>
135153
<divclassName='cr-task-description'><MarkdownTexttext={task.description}/>
136154
</div>

0 commit comments

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