Skip to content

Commit e0d760f

Browse files
ShMcKShMcK
committed
configure tutorial info form
1 parent 47f94ce commit e0d760f

File tree

3 files changed

+65
-59
lines changed

3 files changed

+65
-59
lines changed

‎lib/components/TutorialInfo/index.js‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,41 +21,41 @@ var RaisedButton_1 = require('material-ui/RaisedButton');
2121
var actions_1 = require('../../actions');
2222
var Top_1 = require('../TopPanel/Top');
2323
var styles = {
24-
margin: '10px',
25-
padding: '30px 20px',
26-
textAlign: 'center',
27-
};
28-
var buttonStyles = {
29-
margin: '30px 10px 20px 10px',
24+
card: {
25+
margin: '10px',
26+
padding: '30px 20px',
27+
textAlign: 'center',
28+
},
29+
button: {
30+
margin: '30px 10px 20px 10px',
31+
},
3032
};
3133
var TutorialInfo = (function (_super) {
3234
__extends(TutorialInfo, _super);
3335
function TutorialInfo(props) {
3436
_super.call(this, props);
37+
var _a = this.props.packageJson, description = _a.description, version = _a.version, keywords = _a.keywords;
3538
this.state = {
36-
pj: this.props.packageJson
39+
description: description || '',
40+
version: version || '0.1.0',
41+
keywords: keywords || [],
3742
};
3843
}
3944
TutorialInfo.prototype.componentDidMount = function () {
4045
Top_1.default.toggle(false);
4146
};
42-
TutorialInfo.prototype.handleText = function (prop, event) {
43-
this.handleChange(prop, event.target.value);
44-
};
45-
TutorialInfo.prototype.handleSelect = function (prop, event, index, value) {
46-
this.handleChange(prop, value);
47-
};
48-
TutorialInfo.prototype.handleChange = function (prop, val) {
49-
var obj = {};
50-
obj[prop] = val;
51-
this.setState({ pj: Object.assign({}, this.state, obj) });
47+
TutorialInfo.prototype.handleText = function (prop, event, value) {
48+
var next = {};
49+
next[prop] = value;
50+
this.setState(Object.assign({}, this.state, next));
5251
};
53-
TutorialInfo.prototype.save = function () {
54-
this.props.save(this.state.pj);
52+
TutorialInfo.prototype.submit = function () {
53+
var _a = this.state, description = _a.description, version = _a.version, keywords = _a.keywords;
54+
this.props.save(Object.assign({}, this.props.packageJson, { description: description, version: version, keywords: keywords }));
5555
};
5656
TutorialInfo.prototype.render = function () {
57-
var pj = this.state.pj;
58-
return (React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Info'}), React.createElement(TextField_1.default, {floatingLabelText: 'Title', defaultValue: pj.name, onChange: this.handleText.bind(this, 'name')}), React.createElement("br", null), React.createElement(TextField_1.default, {floatingLabelText: 'Description', defaultValue: pj.description, onChange: this.handleText.bind(this, 'description')}), React.createElement("br", null), React.createElement(TextField_1.default, {floatingLabelText: 'Version', defaultValue: pj.version, disabled: true, onChange: this.handleText.bind(this, 'version')}), React.createElement("br", null), React.createElement(TextField_1.default, {floatingLabelText: 'Keywords', defaultValue: pj.keywords.join(', '), multiLine: true, onChange: this.handleText.bind(this, 'keywords')}), React.createElement("br", null), React.createElement(RaisedButton_1.default, {style: buttonStyles, label: 'Save', primary: true, onTouchTap: this.save.bind(this)}), React.createElement(RaisedButton_1.default, {style: buttonStyles, label: 'Continue', secondary: true, onTouchTap: this.props.routeToTutorial.bind(this)})));
57+
var _a = this.state, description = _a.description, version = _a.version, keywords = _a.keywords;
58+
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Info'}), React.createElement(TextField_1.default, {className: 'native-key-bindings', floatingLabelText: 'Description', defaultValue: description, onChange: this.handleText.bind(this, 'description')}), React.createElement("br", null), React.createElement(TextField_1.default, {className: 'native-key-bindings', floatingLabelText: 'Version', defaultValue: version, disabled: true, onChange: this.handleText.bind(this, 'version')}), React.createElement("br", null), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, onTouchTap: this.submit.bind(this)}), React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, onTouchTap: this.props.routeToTutorial.bind(this)})));
5959
};
6060
TutorialInfo = __decorate([
6161
react_redux_1.connect(function (state) { return ({

‎src/components/TutorialConfig/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const validate = values => {
5858
}
5959
}))
6060
class TutorialConfig extends React.Component <{
61-
packageJson?: any,
61+
packageJson?: PackageJson,
6262
save?: (pj: Tutorial.PJ) => any,
6363
routeToPage?: () => any
6464
}, {

‎src/components/TutorialInfo/index.tsx‎

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ import {pjSave, routeSet} from '../../actions';
99
import Top from '../TopPanel/Top';
1010

1111
const styles = {
12-
margin: '10px',
13-
padding: '30px 20px',
14-
textAlign: 'center',
15-
};
16-
17-
const buttonStyles = {
18-
margin: '30px 10px 20px 10px',
12+
card: {
13+
margin: '10px',
14+
padding: '30px 20px',
15+
textAlign: 'center',
16+
},
17+
button: {
18+
margin: '30px 10px 20px 10px',
19+
},
1920
};
2021

2122
@connect(state => ({
@@ -27,72 +28,77 @@ const buttonStyles = {
2728
export default class TutorialInfo extends React.Component<{
2829
packageJson?: any, save?: any, routeToTutorial?: any
2930
}, {
30-
pj: Tutorial.PJ
31+
description: string, version: string, keywords: string[]
3132
}> {
3233
constructor(props) {
3334
super(props);
35+
const {description, version, keywords} = this.props.packageJson;
3436
this.state = {
35-
pj: this.props.packageJson
37+
description: description || '',
38+
version: version || '0.1.0',
39+
keywords: keywords || [],
3640
};
3741
}
3842
componentDidMount() {
3943
Top.toggle(false);
4044
}
41-
handleText(prop, event) {
42-
this.handleChange(prop, event.target.value);
43-
}
44-
handleSelect(prop, event, index, value) {
45-
this.handleChange(prop, value);
45+
handleText(prop, event, value) {
46+
const next = {};
47+
next[prop] = value;
48+
this.setState(Object.assign({}, this.state, next));
4649
}
47-
handleChange(prop, val) {
48-
const obj = {};
49-
obj[prop] = val;
50-
this.setState({pj: Object.assign({}, this.state, obj)});
51-
}
52-
save() {
53-
this.props.save(this.state.pj);
50+
submit() {
51+
const {description, version, keywords} = this.state;
52+
53+
// verify
54+
// TODO: Verify
55+
56+
// save
57+
this.props.save(Object.assign(
58+
{},
59+
this.props.packageJson,
60+
{ description, version, keywords}
61+
));
5462
}
5563
render() {
56-
const {pj} = this.state;
64+
const {description, version, keywords} = this.state;
5765
return (
58-
<Card style={styles}>
66+
<Card style={styles.card}>
5967
<CardHeader
6068
title='Tutorial Info'
6169
/>
6270
<TextField
63-
floatingLabelText='Title'
64-
defaultValue={pj.name}
65-
onChange={this.handleText.bind(this, 'name')}
66-
/>
67-
<br />
68-
<TextField
71+
className='native-key-bindings'
6972
floatingLabelText='Description'
70-
defaultValue={pj.description}
73+
defaultValue={description}
7174
onChange={this.handleText.bind(this, 'description')}
7275
/>
7376
<br />
7477
<TextField
78+
className='native-key-bindings'
7579
floatingLabelText='Version'
76-
defaultValue={pj.version}
80+
defaultValue={version}
7781
disabled={true}
7882
onChange={this.handleText.bind(this, 'version')}
7983
/>
8084
<br />
81-
<TextField
85+
{/*}<TextField
86+
className='native-key-bindings'
8287
floatingLabelText='Keywords'
83-
defaultValue={pj.keywords.join(', ')}
88+
defaultValue={keywords.join(', ')}
8489
multiLine={true}
8590
onChange={this.handleText.bind(this, 'keywords')}
86-
/>
91+
/>*/}
8792
<br />
8893
<RaisedButton
89-
style={buttonStyles}
94+
type='submit'
95+
style={styles.button}
9096
label='Save'
9197
primary={true}
92-
onTouchTap={this.save.bind(this)}
98+
onTouchTap={this.submit.bind(this)}
9399
/>
94100
<RaisedButton
95-
style={buttonStyles}
101+
style={styles.button}
96102
label='Continue'
97103
secondary={true}
98104
onTouchTap={this.props.routeToTutorial.bind(this)}

0 commit comments

Comments
 (0)