Skip to content

Commit 2ca1142

Browse files
ShMcKShMcK
committed
dynamic stepper with steps
1 parent 7d33ead commit 2ca1142

File tree

9 files changed

+108
-146
lines changed

9 files changed

+108
-146
lines changed

‎lib/components/start/setup-steps.js renamed to ‎lib/components/start/dynamic-stepper.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ var initState = {
1313
};
1414
var default_1 = (function (_super) {
1515
__extends(default_1, _super);
16-
function default_1(props) {
17-
_super.call(this, props);
16+
function default_1() {
17+
_super.call(this);
1818
this.state = initState;
1919
}
2020
default_1.prototype.selectStep = function (CurrentStep) {
@@ -41,7 +41,7 @@ var default_1 = (function (_super) {
4141
};
4242
};
4343
default_1.prototype.render = function () {
44-
return React.createElement(Stepper_1.default, {activeStep: this.state.activeStep, onStepHeaderTouch: this.selectStep.bind(this), updateCompletedStatus: this.updateCompletedSteps.bind(this), createIcon: this.createIcon});
44+
return React.createElement(Stepper_1.default, {activeStep: this.state.activeStep, onStepHeaderTouch: this.selectStep.bind(this), updateCompletedStatus: this.updateCompletedSteps.bind(this), createIcon: this.createIcon}, this.props.children);
4545
};
4646
return default_1;
4747
}(React.Component));

‎lib/components/start/start.js

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,30 @@
11
'use strict';
22
var React = require('react');
33
var paper_1 = require('material-ui/lib/paper');
4+
var raised_button_1 = require('material-ui/lib/raised-button');
45
var setup_1 = require('./setup');
56
var tutorials_1 = require('./tutorials');
6-
var setup_steps_1 = require('./setup-steps');
7+
var dynamic_stepper_1 = require('./dynamic-stepper');
8+
var VerticalStep_1 = require('material-ui/lib/Stepper/VerticalStep');
9+
var flat_button_1 = require('material-ui/lib/flat-button');
710
exports.Start = function (_a) {
811
var tutorials = _a.tutorials, warning = _a.warning;
9-
return (React.createElement(paper_1.default, {className: 'cr-start'}, React.createElement("div", {className: 'cr-start-header'}, React.createElement("span", {className: 'title'}, "CodeRoad"), React.createElement("p", {className: 'tagline'}, "Tutorials in the Editor"), React.createElement("p", {className: 'version'}, "Beta"), !warning ? React.createElement(tutorials_1.default, {tutorials: tutorials}) : React.createElement(setup_1.SetupGuide, {warning: warning}), React.createElement(setup_steps_1.default, null))));
12+
return (React.createElement(paper_1.default, {className: 'cr-start'}, React.createElement("div", {className: 'cr-start-header'}, React.createElement("span", {className: 'title'}, "CodeRoad"), React.createElement("p", {className: 'tagline'}, "Tutorials in the Editor"), React.createElement("p", {className: 'version'}, "Beta"), !warning
13+
? React.createElement(tutorials_1.default, {tutorials: tutorials})
14+
: React.createElement(setup_1.SetupGuide, {warning: warning}), React.createElement(dynamic_stepper_1.default, null, React.createElement(VerticalStep_1.default, {orderStepLabel: '1', stepLabel: 'Node >= 0.10', actions: [
15+
React.createElement(raised_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: function () { return; }}),
16+
React.createElement(flat_button_1.default, {key: 1, label: 'Cancel'})
17+
]}, React.createElement("div", null, "Install a newer version of ", React.createElement("a", {href: 'https://nodejs.org'}, "Node"))), React.createElement(VerticalStep_1.default, {orderStepLabel: '2', stepLabel: 'NPM >= 3', actions: [
18+
React.createElement(raised_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: function () { return; }}),
19+
React.createElement(flat_button_1.default, {key: 1, label: 'Cancel'})
20+
]}, React.createElement("div", null, "Update your version of NPM.", React.createElement("br", null), "`> npm update -g npm`"))), React.createElement(dynamic_stepper_1.default, null, React.createElement(VerticalStep_1.default, {orderStepLabel: '1', stepLabel: 'working directory', actions: [
21+
React.createElement(raised_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: function () { return; }}),
22+
React.createElement(flat_button_1.default, {key: 1, label: 'Cancel'})
23+
]}, React.createElement("div", null, "File -> Open (a new folder)")), React.createElement(VerticalStep_1.default, {orderStepLabel: '2', stepLabel: 'package.json', actions: [
24+
React.createElement(raised_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: function () { return; }}),
25+
React.createElement(flat_button_1.default, {key: 1, label: 'Cancel'})
26+
]}, React.createElement("div", null, "Create a package.json by running", React.createElement("br", null), "`> npm init -y`")), React.createElement(VerticalStep_1.default, {orderStepLabel: '3', stepLabel: 'install tutorial', actions: [
27+
React.createElement(raised_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: function () { return; }}),
28+
React.createElement(flat_button_1.default, {key: 1, label: 'Cancel'})
29+
]}, React.createElement("div", null, "Install a tutorial using npm. For example:", React.createElement("br", null), "`> npm install coderoad-functional-school --save-dev`"))))));
1030
};

‎lib/components/start/steps.js

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎lib/components/start/system-stepper.js

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎src/components/start/setup-steps.tsx renamed to ‎src/components/start/dynamic-stepper.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@ let initState = {
77
statusSteps: []
88
};
99

10-
export default class extends React.Component<{}, {
10+
export default class extends React.Component<{
11+
children?: any, onStepHeaderHover?: any
12+
}, {
1113
activeStep: number, statusSteps: boolean[]
1214
}> {
13-
constructor(props) {
14-
super(props);
15+
constructor() {
16+
super();
1517
this.state = initState;
1618
}
1719
selectStep(CurrentStep) {
@@ -46,11 +48,8 @@ export default class extends React.Component<{}, {
4648
activeStep={this.state.activeStep}
4749
onStepHeaderTouch={this.selectStep.bind(this)}
4850
updateCompletedStatus={this.updateCompletedSteps.bind(this)}
49-
createIcon={this.createIcon}
50-
>
51-
52-
{/* Steps */}
53-
51+
createIcon={this.createIcon}>
52+
{this.props.children}
5453
</Stepper>;
5554
}
5655
}

‎src/components/start/setup.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import Subheader from 'material-ui/lib/Subheader';
66
import {MarkdownText} from '../_components';
77
import {verifySetupComplete} from '../../services/setup/setup';
88

9-
// export default class extends React.Component<{warning: CR.SetupWarning}, {}> {
10-
// render() {
119
export const SetupGuide = ({warning}) => (
1210
<div className='cr-setup'>
1311
<List>

‎src/components/start/start.tsx

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import Paper from 'material-ui/lib/paper';
44
import RaisedButton from 'material-ui/lib/raised-button';
55
import {SetupGuide} from './setup';
66
import Tutorials from './tutorials';
7-
import SetupSteps from './setup-steps';
7+
import DynamicStepper from './dynamic-stepper';
8+
import Step from 'material-ui/lib/Stepper/VerticalStep';
9+
import RaisedButton from 'material-ui/lib/raised-button';
10+
import FlatButton from 'material-ui/lib/flat-button';
811

912
export const Start = ({tutorials, warning}) => (
1013
<Paper className='cr-start'>
@@ -13,9 +16,78 @@ export const Start = ({tutorials, warning}) => (
1316
<p className='tagline'>Tutorials in the Editor</p>
1417
<p className='version'>Beta</p>
1518

16-
{!warning ? <Tutorials tutorials={tutorials}/> : <SetupGuide warning={warning} />}
19+
{!warning
20+
? <Tutorials tutorials={tutorials}/>
21+
: <SetupGuide warning={warning} />}
22+
23+
<DynamicStepper>
24+
<Step orderStepLabel='1'
25+
stepLabel='Node >= 0.10'
26+
actions={[
27+
<RaisedButton key={0} primary={true}
28+
label='Verify'
29+
onTouchTap={function() { return; }}
30+
/>,
31+
<FlatButton key={1} label='Cancel' />
32+
]} >
33+
<div>Install a newer version of <a href='https://nodejs.org'>Node</a></div>
34+
</Step>
35+
<Step orderStepLabel='2'
36+
stepLabel='NPM >= 3'
37+
actions={[
38+
<RaisedButton key={0} primary={true}
39+
label='Verify'
40+
onTouchTap={function() { return; }}
41+
/>,
42+
<FlatButton key={1} label='Cancel' />
43+
]} >
44+
<div>
45+
Update your version of NPM.<br />
46+
`> npm update -g npm`
47+
</div>
48+
</Step>
49+
</DynamicStepper>
1750
18-
<SetupSteps />
51+
<DynamicStepper>
52+
<Step orderStepLabel='1'
53+
stepLabel='working directory'
54+
actions={[
55+
<RaisedButton key={0} primary={true}
56+
label='Verify'
57+
onTouchTap={function() { return; }}
58+
/>,
59+
<FlatButton key={1} label='Cancel' />
60+
]} >
61+
<div>File -> Open (a new folder)</div>
62+
</Step>
63+
<Step orderStepLabel='2'
64+
stepLabel='package.json'
65+
actions={[
66+
<RaisedButton key={0} primary={true}
67+
label='Verify'
68+
onTouchTap={function() { return; }}
69+
/>,
70+
<FlatButton key={1} label='Cancel' />
71+
]} >
72+
<div>
73+
Create a package.json by running<br />
74+
`> npm init -y`</div>
75+
</Step>
76+
<Step orderStepLabel='3'
77+
stepLabel='install tutorial'
78+
actions={[
79+
<RaisedButton key={0} primary={true}
80+
label='Verify'
81+
onTouchTap={function() { return; }}
82+
/>,
83+
<FlatButton key={1} label='Cancel' />
84+
]} >
85+
<div>
86+
Install a tutorial using npm. For example:<br />
87+
`> npm install coderoad-functional-school --save-dev`
88+
</div>
89+
</Step>
90+
</DynamicStepper>
1991

2092
</div>
2193
</Paper>

‎src/components/start/steps.tsx

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎tsconfig.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,10 +114,9 @@
114114
"src/components/progress/progress.tsx",
115115
"src/components/render.tsx",
116116
"src/components/routes/routes.tsx",
117-
"src/components/start/setup-steps.tsx",
117+
"src/components/start/dynamic-stepper.tsx",
118118
"src/components/start/setup.tsx",
119119
"src/components/start/start.tsx",
120-
"src/components/start/steps.tsx",
121120
"src/components/start/tutorials.tsx"
122121
],
123122
"exclude": [

0 commit comments

Comments
 (0)