Skip to content

Commit e2c66e6

Browse files
ShMcKShMcK
committed
form validation and disabled buttons
1 parent 3b38923 commit e2c66e6

File tree

6 files changed

+39
-35
lines changed

6 files changed

+39
-35
lines changed

‎lib/components/TutorialConfig/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,12 @@ var TutorialConfig = (function (_super) {
6262
};
6363
TutorialConfig.prototype.render = function () {
6464
var _this = this;
65-
var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit;
65+
var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid;
6666
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Configuration'}), React.createElement("form", {onSubmit: handleSubmit(this.onSubmit.bind(this))}, React.createElement(redux_form_1.Field, {name: 'name', component: function (name) { return (React.createElement(TextField_1.default, __assign({className: 'native-key-bindings', hintText: 'coderoad-tutorial-name', errorText: name.touched && name.error}, name))); }}), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'language', component: function (props) {
6767
return React.createElement("div", null, React.createElement(SelectField_1.default, __assign({value: props.value, floatingLabelText: 'Language', errorText: props.touched && props.error}, props, {onChange: function (event, index, value) { return props.onChange(value); }}), languageItems_1.default()));
6868
}}), React.createElement(redux_form_1.Field, {name: 'runner', component: function (props) {
6969
return React.createElement("div", null, React.createElement(SelectField_1.default, __assign({value: props.value, floatingLabelText: 'Test Runner', errorText: props.touched && props.error}, props, {onChange: function (event, index, value) { return props.onChange(value); }}), runnerItems_1.default(_this.props.language || 'JS')));
70-
}}), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting}), React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, onTouchTap: this.props.routeToPage.bind(this)}))));
70+
}}), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting || invalid}), React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, disabled: invalid, onTouchTap: this.props.routeToPage.bind(this)}))));
7171
};
7272
TutorialConfig = __decorate([
7373
react_redux_1.connect(function (state) { return ({

‎lib/components/TutorialConfig/runnerItems.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ var React = require('react');
33
var MenuItem_1 = require('material-ui/MenuItem');
44
var options_1 = require('core-coderoad/lib/options');
55
function runnerItems(language) {
6-
console.log('lang', language);
76
return options_1.default[language].runners.map(function (runner, index) {
87
return (React.createElement(MenuItem_1.default, {key: index, value: runner, primaryText: runner}));
98
});

‎lib/components/TutorialInfo/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,13 @@ var TutorialInfo = (function (_super) {
4747
TutorialInfo.prototype.componentDidMount = function () {
4848
Top_1.default.toggle(false);
4949
};
50-
TutorialInfo.prototype.handleSubmit = function (e) {
51-
console.log(e);
50+
TutorialInfo.prototype.onSubmit = function (values) {
51+
var description = values.description, version = values.version, keywords = values.keywords;
52+
this.props.save(Object.assign({}, this.props.packageJson, { description: description, version: version, keywords: keywords }));
5253
};
5354
TutorialInfo.prototype.render = function () {
54-
var _a = this.props.packageJson, description = _a.description, version = _a.version, keywords = _a.keywords;
55-
var _b = this.props, pristine = _b.pristine, submitting = _b.submitting;
56-
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Info'}), React.createElement("form", {onSubmit: this.handleSubmit}, React.createElement(redux_form_1.Field, {name: 'description', component: function (description) { return (React.createElement(TextField_1.default, __assign({name: 'description', className: 'native-key-bindings', hintText: 'Tutorial Description', floatingLabelText: 'Description', errorText: description.touched && description.error}, description))); }}), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'version', component: function (version) { return (React.createElement(TextField_1.default, __assign({name: 'version', className: 'native-key-bindings', hintText: '0.1.0', disabled: true, floatingLabelText: 'Version', errorText: version.touched && version.error}, version))); }}), React.createElement("br", null), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting}))));
55+
var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid;
56+
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Info'}), React.createElement("form", {onSubmit: handleSubmit(this.onSubmit.bind(this))}, React.createElement(redux_form_1.Field, {name: 'description', component: function (description) { return (React.createElement(TextField_1.default, __assign({name: 'description', className: 'native-key-bindings', hintText: 'Tutorial Description', floatingLabelText: 'Description', errorText: description.touched && description.error}, description))); }}), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'version', component: function (version) { return (React.createElement(TextField_1.default, __assign({name: 'version', className: 'native-key-bindings', hintText: '0.1.0', disabled: true, floatingLabelText: 'Version', errorText: version.touched && version.error}, version))); }}), React.createElement("br", null), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting || invalid}))));
5757
};
5858
TutorialInfo = __decorate([
5959
react_redux_1.connect(function (state) { return ({

‎src/components/TutorialConfig/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ class TutorialConfig extends React.Component <{
4747
save?: (pj: Tutorial.PJ) => any,
4848
routeToPage?: () => any,
4949
pristine?: boolean, submitting?: boolean, handleSubmit?: any,
50-
language?: string
50+
language?: string, invalid?: boolean
5151
}, {}> {
5252
componentDidMount() {
5353
Top.toggle(false);
@@ -66,7 +66,7 @@ class TutorialConfig extends React.Component <{
6666
);
6767
}
6868
render() {
69-
const {pristine, submitting, handleSubmit} = this.props;
69+
const {pristine, submitting, handleSubmit, invalid} = this.props;
7070
return (
7171
<Card style={styles.card}>
7272
<CardHeader
@@ -119,12 +119,13 @@ class TutorialConfig extends React.Component <{
119119
style={styles.button}
120120
label='Save'
121121
primary={true}
122-
disabled={pristine || submitting}
122+
disabled={pristine || submitting || invalid}
123123
/>
124124
<RaisedButton
125125
style={styles.button}
126126
label='Continue'
127127
secondary={true}
128+
disabled={invalid}
128129
onTouchTap={this.props.routeToPage.bind(this)}
129130
/>
130131
</form>

‎src/components/TutorialConfig/runnerItems.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import MenuItem from 'material-ui/MenuItem';
33
import tutorialConfigOptions from 'core-coderoad/lib/options';
44

55
export default function runnerItems(language: string) {
6-
console.log('lang', language);
76
return tutorialConfigOptions[language].runners.map((runner, index) => {
87
return (
98
<MenuItem

‎src/components/TutorialInfo/index.tsx‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -28,33 +28,29 @@ const styles = {
2828
}))
2929
class TutorialInfo extends React.Component<{
3030
packageJson?: any, save?: any, routeToTutorial?: any,
31-
pristine?: boolean, submitting?: boolean
31+
pristine?: boolean, submitting?: boolean, handleSubmit?: any,
32+
invalid?: boolean
3233
}, {}> {
3334
componentDidMount() {
3435
Top.toggle(false);
3536
}
36-
handleSubmit(e) {
37-
console.log(e);
38-
39-
// verify
40-
// TODO: Verify
41-
37+
onSubmit(values) {
38+
const {description, version, keywords} = values;
4239
// save
43-
// this.props.save(Object.assign(
44-
// {},
45-
// this.props.packageJson,
46-
// { description, version, keywords}
47-
// ));
40+
this.props.save(Object.assign(
41+
{},
42+
this.props.packageJson,
43+
{ description, version, keywords}
44+
));
4845
}
4946
render() {
50-
const {description, version, keywords} = this.props.packageJson;
51-
const { pristine, submitting } = this.props;
47+
const {pristine, submitting, handleSubmit, invalid} = this.props;
5248
return (
5349
<Card style={styles.card}>
5450
<CardHeader
5551
title='Tutorial Info'
5652
/>
57-
<form onSubmit={this.handleSubmit}>
53+
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
5854
<Field
5955
name='description'
6056
component={description => (
@@ -88,20 +84,29 @@ class TutorialInfo extends React.Component<{
8884
}
8985
/>
9086
<br />
91-
{/*}<TextField
92-
className='native-key-bindings'
93-
floatingLabelText='Keywords'
94-
defaultValue={keywords.join(', ')}
95-
multiLine={true}
96-
onChange={this.handleText.bind(this, 'keywords')}
97-
/>*/}
87+
{/* <Field
88+
name='keywords'
89+
component={keywords => (
90+
<TextField
91+
name='keywords'
92+
className='native-key-bindings'
93+
hintText='coderoad, react, js, etc'
94+
disabled={true}
95+
floatingLabelText='Keywords'
96+
errorText={
97+
keywords.touched && keywords.error
98+
}
99+
{...keywords}
100+
/>)
101+
}
102+
/> */}
98103
<br />
99104
<RaisedButton
100105
type='submit'
101106
style={styles.button}
102107
label='Save'
103108
primary={true}
104-
disabled={pristine || submitting}
109+
disabled={pristine || submitting || invalid}
105110
/>
106111
</form>
107112
</Card>

0 commit comments

Comments
 (0)