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

Commit9cda718

Browse files
committed
refactor system & setup checks
1 parent43daab2 commit9cda718

File tree

14 files changed

+176
-189
lines changed

14 files changed

+176
-189
lines changed

‎lib/components/start/checks/checks.js

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,18 @@ var __metadata = (this && this.__metadata) || function (k, v) {
1414
if(typeofReflect==="object"&&typeofReflect.metadata==="function")returnReflect.metadata(k,v);
1515
};
1616
varReact=require('react');
17-
varPaper_1=require('material-ui/Paper');
18-
varreact_redux_1=require('react-redux');
1917
varstore_1=require('../../../store/store');
2018
varAction=require('../../../actions/actions');
21-
varfail='✗';
19+
varreact_redux_1=require('react-redux');
20+
varsteps_1=require('./steps');
2221
varChecks=(function(_super){
2322
__extends(Checks,_super);
2423
functionChecks(){
2524
_super.apply(this,arguments);
2625
}
27-
Checks.prototype.getSystemChecks=function(checks){
28-
varsystem=checks.system;
29-
return[system.node,system.npm];
30-
};
31-
Checks.prototype.getSetupChecks=function(checks){
32-
varsetup=checks.setup;
33-
return[setup.dir,setup.packageJson,setup.tutorial];
34-
};
3526
Checks.prototype.render=function(){
3627
var_a=this.props,checks=_a.checks,verify=_a.verify;
37-
returnReact.createElement(Paper_1.default,{className:'cr-checks'},React.createElement("p",{className:'tagline'},"Setup"),checks.passed
38-
?null
39-
:React.createElement("div",{className:'setup-guide'},React.createElement("span",null,"Check the",React.createElement("a",{href:'https://coderoad.github.io/docs#install'}," ",React.createElement("strong",null,"Install Guide")))));
28+
returnReact.createElement("div",{className:'cr-checks'},React.createElement(steps_1.SystemChecks,{checks:checks}),React.createElement(steps_1.SetupChecks,{checks:checks}),React.createElement(steps_1.InstallGuide,{show:checks.passed}));
4029
};
4130
Checks=__decorate([
4231
react_redux_1.connect(null,function(dispatch){

‎lib/components/start/checks/setup-checker.js

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ var __extends = (this && this.__extends) || function (d, b) {
66
};
77
varReact=require('react');
88
varStepper_1=require('material-ui/Stepper');
9-
varFontIcon_1=require('material-ui/FontIcon');
109
varstyles={
1110
header:{
1211
textAlign:'center',
@@ -21,37 +20,13 @@ var DynamicStepper = (function (_super) {
2120
__extends(DynamicStepper,_super);
2221
functionDynamicStepper(props){
2322
_super.call(this,props);
24-
varstatusSteps=this.props.status;
2523
this.state={
26-
activeStep:statusSteps.indexOf(false)||-1,
27-
statusSteps:statusSteps
24+
stepIndex:status.indexOf(false)||0
2825
};
2926
}
30-
DynamicStepper.prototype.selectStep=function(CurrentStep){
31-
this.setState({
32-
activeStep:CurrentStep,
33-
statusSteps:this.state.statusSteps
34-
});
35-
};
36-
DynamicStepper.prototype.updateCompletedSteps=function(CurrentStep){
37-
returnthis.state.statusSteps[CurrentStep];
38-
};
39-
DynamicStepper.prototype.createIcon=function(step){
40-
if(step.props.isCompleted){
41-
return(React.createElement(FontIcon_1.default,{className:'material-icons',style:{fontSize:14}},"✓"));
42-
}
43-
returnReact.createElement("span",null,step.props.orderStepLabel);
44-
};
45-
DynamicStepper.prototype.continue=function(){
46-
var_a=this.state,activeStep=_a.activeStep,statusSteps=_a.statusSteps;
47-
statusSteps[activeStep]=true;
48-
this.state={
49-
activeStep:activeStep+1,
50-
statusSteps:statusSteps,
51-
};
52-
};
5327
DynamicStepper.prototype.render=function(){
54-
returnReact.createElement("div",null,React.createElement("div",{style:styles.header},this.props.title),React.createElement(Stepper_1.default,{activeStep:this.state.activeStep,linear:false,orientation:'vertical'},this.props.children));
28+
varstepIndex=this.state.stepIndex;
29+
returnReact.createElement("div",null,React.createElement(Stepper_1.Stepper,{activeStep:stepIndex,linear:false,orientation:'vertical'},this.props.children));
5530
};
5631
returnDynamicStepper;
5732
}(React.Component));

‎lib/components/start/checks/steps.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
"use strict";
2+
varReact=require('react');
3+
varStepper_1=require('material-ui/Stepper');
4+
varCard_1=require('material-ui/Card');
5+
var_components_1=require('../../_components');
6+
varsetup_checker_1=require('./setup-checker');
7+
varFontIcon_1=require('material-ui/FontIcon');
8+
varwarning_1=require('material-ui/svg-icons/alert/warning');
9+
varcolors_1=require('material-ui/styles/colors');
10+
varStepCheck=function(_a){
11+
varcompleted=_a.completed,label=_a.label,children=_a.children;
12+
return(React.createElement(Stepper_1.Step,{completed:completed},React.createElement(Stepper_1.StepLabel,{icon:completed
13+
?React.createElement(FontIcon_1.default,null,"✓")
14+
:React.createElement(warning_1.default,{color:colors_1.red500})},label),React.createElement(Stepper_1.StepContent,null,children)));
15+
};
16+
exports.SystemChecks=function(_a){
17+
varchecks=_a.checks;
18+
varsystem=checks.system;
19+
if(system.passed){
20+
returnnull;
21+
}
22+
varstatus=[system.node,system.npm];
23+
returnReact.createElement(Card_1.Card,{className:'cr-check'},React.createElement(Card_1.CardHeader,{title:'System Checks'}),React.createElement(setup_checker_1.default,{status:status},React.createElement(StepCheck,{label:'Node >= 0.10',completed:checks.system.node},React.createElement("p",null,"Install a newer version of ",React.createElement("a",{href:'https://nodejs.org'},"Node"))),React.createElement(StepCheck,{label:'NPM >= 3',completed:checks.system.npm},React.createElement(_components_1.Markdown,null,"Update your version of NPM."+' '+"`> npm update -g npm`"))));
24+
};
25+
exports.SetupChecks=function(_a){
26+
varchecks=_a.checks;
27+
varsetup=checks.setup;
28+
if(setup.passed){
29+
returnnull;
30+
}
31+
varstatus=[setup.dir,setup.packageJson,setup.tutorial];
32+
returnReact.createElement(Card_1.Card,{className:'cr-check'},React.createElement(Card_1.CardHeader,{title:'Setup Checks'}),React.createElement(setup_checker_1.default,{status:status},React.createElement(StepCheck,{label:'Open a Directory',completed:checks.setup.dir},React.createElement("p",null,"File -> Open (a new folder)")),React.createElement(StepCheck,{label:'package.json',completed:checks.setup.packageJson},React.createElement(Stepper_1.StepLabel,null,"Package.json"),React.createElement(_components_1.Markdown,null,"Create a package.json by running"+' '+"`> npm init -y`")),React.createElement(StepCheck,{label:'Install Tutorial',completed:checks.setup.tutorial},React.createElement(_components_1.Markdown,null,"Install a tutorial using npm. For example:"+' '+"`> npm install coderoad-functional-school --save-dev`"))));
33+
};
34+
exports.InstallGuide=function(_a){
35+
varshow=_a.show;
36+
if(!show){
37+
returnnull;
38+
}
39+
returnReact.createElement("div",{className:'setup-guide'},React.createElement("span",null,"Check the",React.createElement("a",{href:'https://coderoad.github.io/docs#install'}," ",React.createElement("strong",null,"Install Guide"))));
40+
};

‎lib/reducers/checks/verify.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,19 @@ function result(x) {
1010
functionverifySetup(){
1111
varchecks={
1212
system:{
13-
node:!!check_system_1.nodeMinVersion(),
13+
node:false,
1414
npm:!!check_system_1.npmMinVersion()
1515
},
1616
setup:{
1717
dir:!!check_setup_1.hasDirectory(),
18-
packageJson:!check_setup_1.hasPackageJson(),
18+
packageJson:!!check_setup_1.hasPackageJson(),
1919
tutorial:!!check_setup_1.hasTutorialDep()
2020
}
2121
};
2222
checks.system.passed=allTrue(checks.system);
2323
checks.setup.passed=allTrue(checks.setup);
2424
checks.passed=checks.system.passed&&checks.setup.passed;
25+
console.log('checks',checks);
2526
returnchecks;
2627
}
2728
Object.defineProperty(exports,"__esModule",{value:true});

‎lib/reducers/route/route.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use strict";
22
varType=require('../../actions/actionTypes');
3-
vardefaultRoute='tutorials';
3+
vardefaultRoute='start';
44
functionrouteReducer(route,action){
55
if(route===void0){route=defaultRoute;}
66
switch(action.type){

‎src/components/start/_start.less

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import'./checks/_checks';
2+
13
.cr {
24
&-start {
35
height:100%;
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.cr-check {
2+
margin:10px;
3+
padding:10px;
4+
}
Lines changed: 7 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import*asReactfrom'react';
2-
importPaperfrom'material-ui/Paper';
3-
// import DynamicStepper from './setup-checker';
4-
import{Step,StepLabel,StepButton,StepContent}from'material-ui/Stepper';
5-
importFlatButtonfrom'material-ui/FlatButton';
6-
import{Markdown}from'../../_components';
72

8-
import{openDirectory,createPackageJson,installTutorial}from'../../../reducers/checks/action-setup';
9-
import{updateNpm}from'../../../reducers/checks/action-system';
10-
import{connect}from'react-redux';
113
import{store}from'../../../store/store';
124
import*asActionfrom'../../../actions/actions';
13-
14-
constfail='✗';
5+
import{connect}from'react-redux';
6+
import{SystemChecks,SetupChecks,InstallGuide}from'./steps';
157

168
@connect(null,(dispatch)=>{
179
return{
@@ -21,98 +13,12 @@ const fail = '✗';
2113
exportdefaultclassChecksextendsReact.Component<{
2214
checks:CR.Checks,verify?:any
2315
},{}>{
24-
getSystemChecks(checks:CR.Checks){
25-
constsystem=checks.system;
26-
return[system.node,system.npm];
27-
}
28-
getSetupChecks(checks:CR.Checks){
29-
constsetup=checks.setup;
30-
return[setup.dir,setup.packageJson,setup.tutorial];
31-
}
3216
render(){
3317
const{checks, verify}=this.props;
34-
return<PaperclassName='cr-checks'>
35-
{/* System Checks */}
36-
37-
<pclassName='tagline'>Setup</p>
38-
39-
{/* checks.system.passed ? null : <DynamicStepper title='Dependency Checks' status={this.getSystemChecks(checks)}>
40-
<Step>
41-
{/*orderStepLabel={fail}
42-
stepLabel='Node >= 0.10'
43-
actions={[
44-
<FlatButton key={0} primary={true}
45-
label='Verify'
46-
onTouchTap={verify} />
47-
]} >}
48-
<StepLabel>Node >= 0.10</StepLabel>
49-
<StepContent>Install a newer version of <a href='https://nodejs.org'>Node</a></StepContent>
50-
</Step>
51-
52-
<Step>
53-
<StepLabel>NPM >= 3</StepLabel>
54-
<StepContent>
55-
<Markdown>Update your version of NPM.
56-
`> npm update -g npm`</Markdown></StepContent>
57-
</Step>
58-
</DynamicStepper>*/}
59-
60-
{/* Setup Checks */}
61-
62-
{/*checks.setup.passed ? null : <DynamicStepper title='Setup Checks'
63-
status={this.getSetupChecks(checks)}>
64-
<Step orderStepLabel={fail}
65-
stepLabel='working directory'
66-
actions={[
67-
<FlatButton key={0} primary={true}
68-
label='Verify'
69-
onTouchTap={verify} />,
70-
<FlatButton key={1} secondary={true}
71-
label='Do it for me'
72-
onTouchTap={openDirectory} />
73-
]} >
74-
<div>File -> Open (a new folder)</div>
75-
</Step>
76-
<Step orderStepLabel={fail}
77-
stepLabel='package.json'
78-
actions={[
79-
<FlatButton key={0} primary={true}
80-
label='Verify'
81-
onTouchTap={verify} />,
82-
<FlatButton key={1} secondary={true}
83-
label='Do it for me'
84-
onTouchTap={createPackageJson} />
85-
]} >
86-
<div>
87-
Create a package.json by running<br />
88-
`> npm init -y`</div>
89-
</Step>
90-
<Step orderStepLabel={fail}
91-
stepLabel='install tutorial'
92-
actions={[
93-
<FlatButton key={0} primary={true}
94-
label='Verify'
95-
onTouchTap={verify} />,
96-
<FlatButton key={1} secondary={true}
97-
label='Do it for me'
98-
onTouchTap={installTutorial} />
99-
]} >
100-
<div>
101-
Install a tutorial using npm. For example:<br />
102-
`> npm install coderoad-functional-school --save-dev`
103-
</div>
104-
</Step>
105-
</DynamicStepper>*/}
106-
107-
{/* Install Guide || Continue */}
108-
109-
{checks.passed
110-
?null
111-
:<divclassName='setup-guide'>
112-
<span>Check the
113-
<ahref='https://coderoad.github.io/docs#install'><strong>Install Guide</strong></a></span>
114-
</div>}
115-
116-
</Paper>;
18+
return<divclassName='cr-checks'>
19+
<SystemCheckschecks={checks}/>
20+
<SetupCheckschecks={checks}/>
21+
<InstallGuideshow={checks.passed}/>
22+
</div>;
11723
}
11824
}

‎src/components/start/checks/setup-checker.tsx

Lines changed: 9 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import*asReactfrom'react';
2-
importStepperfrom'material-ui/Stepper';
2+
import{Stepper,Step,StepButton,StepContent}from'material-ui/Stepper';
3+
importRaisedButtonfrom'material-ui/RaisedButton';
4+
importFlatButtonfrom'material-ui/FlatButton';
35

46
importFontIconfrom'material-ui/FontIcon';
57

@@ -15,55 +17,24 @@ const styles = {
1517
};
1618

1719
exportdefaultclassDynamicStepperextendsReact.Component<{
18-
status:boolean[],title:string,children?:any
20+
status:boolean[],children?:any
1921
},{
20-
activeStep:number,statusSteps:boolean[]
22+
stepIndex:number
2123
}>{
2224
constructor(props){
2325
super(props);
24-
letstatusSteps=this.props.status;
2526
this.state={
26-
activeStep:statusSteps.indexOf(false)||-1,
27-
statusSteps
28-
};
29-
}
30-
selectStep(CurrentStep){
31-
this.setState({
32-
activeStep:CurrentStep,
33-
statusSteps:this.state.statusSteps
34-
});
35-
}
36-
updateCompletedSteps(CurrentStep){
37-
returnthis.state.statusSteps[CurrentStep];
38-
}
39-
createIcon(step){
40-
if(step.props.isCompleted){
41-
return(
42-
<FontIconclassName='material-icons'style={{fontSize:14}}>
43-
✓
44-
</FontIcon>
45-
);
46-
}
47-
return<span>{step.props.orderStepLabel}</span>;
48-
}
49-
continue(){
50-
const{activeStep, statusSteps}=this.state;
51-
statusSteps[activeStep]=true;
52-
this.state={
53-
activeStep:activeStep+1,
54-
statusSteps,
27+
stepIndex:status.indexOf(false)||0
5528
};
5629
}
5730
render(){
31+
const{stepIndex}=this.state;
5832
return<div>
59-
<divstyle={styles.header}>
60-
{this.props.title}
61-
</div>
6233
<Stepper
63-
activeStep={this.state.activeStep}
34+
activeStep={stepIndex}
6435
linear={false}
6536
orientation='vertical'>
66-
{this.props.children}
37+
{this.props.children}
6738
</Stepper>
6839
</div>;
6940
}

0 commit comments

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