Skip to content

Commit 7b9ba79

Browse files
ShMcKShMcK
committed
form styles, move out validate
1 parent 444c8ff commit 7b9ba79

File tree

9 files changed

+103
-90
lines changed

9 files changed

+103
-90
lines changed

‎lib/components/TutorialConfig/index.js‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ var actions_1 = require('../../actions');
2222
var languageItems_1 = require('./languageItems');
2323
var runnerItems_1 = require('./runnerItems');
2424
var Top_1 = require('../TopPanel/Top');
25-
var debounce = require('lodash.debounce');
2625
var textField_1 = require('../Form/textField');
2726
var selectField_1 = require('../Form/selectField');
27+
var validate_1 = require('./validate');
2828
var formSelector = redux_form_1.formValueSelector('tutorialConfig');
2929
var styles = {
3030
card: {
@@ -57,13 +57,13 @@ var TutorialConfig = (function (_super) {
5757
var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid;
5858
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: textField_1.default.bind(null, {
5959
hintText: 'coderoad-tutorial-name',
60-
})}), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'language', component: selectField_1.default.bind(null, {
60+
})}), React.createElement(redux_form_1.Field, {name: 'language', component: selectField_1.default.bind(null, {
6161
children: languageItems_1.default(),
6262
floatingLabelText: 'language',
63-
})}), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'runner', component: selectField_1.default.bind(null, {
63+
})}), React.createElement(redux_form_1.Field, {name: 'runner', component: selectField_1.default.bind(null, {
6464
children: runnerItems_1.default('JS'),
6565
floatingLabelText: 'Test Runner',
66-
})}), 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)}))));
66+
})}), 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)}))));
6767
};
6868
TutorialConfig = __decorate([
6969
react_redux_1.connect(function (state) { return ({
@@ -79,22 +79,8 @@ var TutorialConfig = (function (_super) {
7979
], TutorialConfig);
8080
return TutorialConfig;
8181
}(React.Component));
82-
var validate = debounce(function (values) {
83-
var errors = {};
84-
var requiredFields = ['name', 'language', 'runner'];
85-
requiredFields.forEach(function (field) {
86-
if (!values[field]) {
87-
errors[field] = 'Required';
88-
}
89-
});
90-
if (values.name && !values.name.match(/^coderoad-[A-Za-z0-9\-]+$/)) {
91-
errors.name = 'Invalid "coderoad-*" name';
92-
}
93-
console.log(errors);
94-
return errors;
95-
}, 200);
9682
Object.defineProperty(exports, "__esModule", { value: true });
9783
exports.default = redux_form_1.reduxForm({
9884
form: 'tutorialConfig',
99-
validate: validate,
85+
validate: validate_1.default,
10086
})(TutorialConfig);

‎lib/components/TutorialConfig/validate.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use strict";
2+
var debounce = require('lodash.debounce');
3+
var validate = debounce(function (values) {
4+
var errors = {};
5+
var requiredFields = ['name', 'language', 'runner'];
6+
requiredFields.forEach(function (field) {
7+
if (!values[field]) {
8+
errors[field] = 'Required';
9+
}
10+
});
11+
if (values.name && !values.name.match(/^coderoad-[A-Za-z0-9\-]+$/)) {
12+
errors.name = 'Invalid "coderoad-*" name';
13+
}
14+
return errors;
15+
}, 200);
16+
Object.defineProperty(exports, "__esModule", { value: true });
17+
exports.default = validate;

‎lib/components/TutorialInfo/index.js‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ var Card_1 = require('material-ui/Card');
2020
var RaisedButton_1 = require('material-ui/RaisedButton');
2121
var actions_1 = require('../../actions');
2222
var Top_1 = require('../TopPanel/Top');
23-
var debounce = require('lodash.debounce');
2423
var textField_1 = require('../Form/textField');
24+
var validate_1 = require('./validate');
2525
var styles = {
2626
card: {
2727
margin: '10px',
@@ -49,17 +49,17 @@ var TutorialInfo = (function (_super) {
4949
};
5050
TutorialInfo.prototype.render = function () {
5151
var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid;
52-
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("div", null, React.createElement(redux_form_1.Field, {name: 'description', component: textField_1.default.bind(null, {
52+
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: textField_1.default.bind(null, {
5353
hintText: 'Tutorial description',
5454
floatingLabelText: 'Description',
55-
})})), React.createElement("br", null), React.createElement("div", null, React.createElement(redux_form_1.Field, {name: 'version', component: textField_1.default.bind(null, {
55+
})}), React.createElement(redux_form_1.Field, {name: 'version', component: textField_1.default.bind(null, {
5656
hintText: '0.1.0',
5757
floatingLabelText: 'Version',
5858
disabled: true,
59-
})})), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'keywords', component: textField_1.default.bind(null, {
59+
})}), React.createElement(redux_form_1.Field, {name: 'keywords', component: textField_1.default.bind(null, {
6060
hintText: 'coderoad, react, js, etc',
6161
floatingLabelText: 'Keywords',
62-
})}), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting || invalid}))));
62+
})}), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting || invalid}))));
6363
};
6464
TutorialInfo = __decorate([
6565
react_redux_1.connect(function (state) { return ({
@@ -72,24 +72,8 @@ var TutorialInfo = (function (_super) {
7272
], TutorialInfo);
7373
return TutorialInfo;
7474
}(React.Component));
75-
var validate = debounce(function (values) {
76-
var errors = {};
77-
var requiredFields = ['description', 'version'];
78-
requiredFields.forEach(function (field) {
79-
if (!values[field]) {
80-
errors[field] = 'Required';
81-
}
82-
});
83-
if (values.description && values.description.length < 3) {
84-
errors.description = 'Incomplete tutorial description';
85-
}
86-
if (values.version && !values.version.match(/^(\d+\.)?(\d+\.)?(\*|\d+)$/)) {
87-
errors.version = 'Invalid version number';
88-
}
89-
return errors;
90-
}, 200);
9175
Object.defineProperty(exports, "__esModule", { value: true });
9276
exports.default = redux_form_1.reduxForm({
9377
form: 'tutorialInfo',
94-
validate: validate,
78+
validate: validate_1.default,
9579
})(TutorialInfo);

‎lib/components/TutorialInfo/validate.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
"use strict";
2+
var debounce = require('lodash.debounce');
3+
var validate = debounce(function (values) {
4+
var errors = {};
5+
var requiredFields = ['description', 'version'];
6+
requiredFields.forEach(function (field) {
7+
if (!values[field]) {
8+
errors[field] = 'Required';
9+
}
10+
});
11+
if (values.description && values.description.length < 3) {
12+
errors.description = 'Incomplete tutorial description';
13+
}
14+
if (values.version && !values.version.match(/^(\d+\.)?(\d+\.)?(\*|\d+)$/)) {
15+
errors.version = 'Invalid version number';
16+
}
17+
return errors;
18+
}, 200);
19+
Object.defineProperty(exports, "__esModule", { value: true });
20+
exports.default = validate;

‎src/components/TutorialConfig/index.tsx‎

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import languageItems from './languageItems';
1010
import runnerItems from './runnerItems';
1111
import Top from '../TopPanel/Top';
1212
import {validateName} from 'coderoad-cli';
13-
import * as debounce from 'lodash.debounce';
1413
import textField from '../Form/textField';
1514
import selectField from '../Form/selectField';
15+
import validate from './validate';
1616

1717
const formSelector = formValueSelector('tutorialConfig');
1818

@@ -27,11 +27,6 @@ const styles = {
2727
},
2828
};
2929

30-
interface ConfigForm {
31-
name?: string;
32-
language?: string;
33-
runner?: string;
34-
}
3530

3631
@connect(state => ({
3732
packageJson: state.packageJson,
@@ -75,29 +70,30 @@ class TutorialConfig extends React.Component <{
7570
title='Tutorial Configuration'
7671
/>
7772
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
73+
7874
<Field
7975
name='name'
8076
component={textField.bind(null, {
8177
hintText: 'coderoad-tutorial-name',
8278
})}
8379
/>
84-
<br />
80+
8581
<Field
8682
name='language'
8783
component={selectField.bind(null, {
8884
children: languageItems(),
8985
floatingLabelText: 'language',
9086
})}
9187
/>
92-
<br />
88+
9389
<Field
9490
name='runner'
9591
component={selectField.bind(null, {
9692
children: runnerItems('JS'),
9793
floatingLabelText: 'Test Runner',
9894
})}
9995
/>
100-
<br />
96+
10197
<RaisedButton
10298
type='submit'
10399
style={styles.button}
@@ -112,27 +108,13 @@ class TutorialConfig extends React.Component <{
112108
disabled={invalid}
113109
onTouchTap={this.props.routeToPage.bind(this)}
114110
/>
111+
115112
</form>
116113
</Card>
117114
);
118115
}
119116
}
120117

121-
const validate = debounce(values => {
122-
const errors: ConfigForm = {};
123-
const requiredFields = ['name', 'language', 'runner'];
124-
requiredFields.forEach(field => {
125-
if (!values[field]) {
126-
errors[field] = 'Required';
127-
}
128-
});
129-
if (values.name && !values.name.match(/^coderoad-[A-Za-z0-9\-]+$/)) {
130-
errors.name = 'Invalid "coderoad-*" name';
131-
}
132-
console.log(errors);
133-
return errors;
134-
}, 200);
135-
136118
export default reduxForm({
137119
form: 'tutorialConfig',
138120
validate,

‎src/components/TutorialConfig/validate.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as debounce from 'lodash.debounce';
2+
3+
interface ConfigForm {
4+
name?: string;
5+
language?: string;
6+
runner?: string;
7+
}
8+
9+
10+
const validate = debounce(values => {
11+
const errors: ConfigForm = {};
12+
const requiredFields = ['name', 'language', 'runner'];
13+
requiredFields.forEach(field => {
14+
if (!values[field]) {
15+
errors[field] = 'Required';
16+
}
17+
});
18+
if (values.name && !values.name.match(/^coderoad-[A-Za-z0-9\-]+$/)) {
19+
errors.name = 'Invalid "coderoad-*" name';
20+
}
21+
return errors;
22+
}, 200);
23+
export default validate;

‎src/components/TutorialInfo/index.tsx‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import {Card, CardHeader} from 'material-ui/Card';
66
import RaisedButton from 'material-ui/RaisedButton';
77
import {pjSave, routeSet} from '../../actions';
88
import Top from '../TopPanel/Top';
9-
import * as debounce from 'lodash.debounce';
109
import textField from '../Form/textField';
10+
import validate from './validate';
1111

1212
const styles = {
1313
card: {
@@ -54,17 +54,15 @@ class TutorialInfo extends React.Component<{
5454
title='Tutorial Info'
5555
/>
5656
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
57-
<div>
57+
5858
<Field
5959
name='description'
6060
component={textField.bind(null, {
6161
hintText: 'Tutorial description',
6262
floatingLabelText: 'Description',
6363
})}
6464
/>
65-
</div>
66-
<br />
67-
<div>
65+
6866
<Field
6967
name='version'
7068
component={textField.bind(null, {
@@ -73,16 +71,15 @@ class TutorialInfo extends React.Component<{
7371
disabled: true,
7472
})}
7573
/>
76-
</div>
77-
<br />
74+
7875
<Field
7976
name='keywords'
8077
component={textField.bind(null, {
8178
hintText: 'coderoad, react, js, etc',
8279
floatingLabelText: 'Keywords',
8380
})}
8481
/>
85-
<br />
82+
8683
<RaisedButton
8784
type='submit'
8885
style={styles.button}
@@ -96,23 +93,6 @@ class TutorialInfo extends React.Component<{
9693
}
9794
}
9895

99-
const validate = debounce(values => {
100-
const errors: { description?: string, version?: string} = {};
101-
const requiredFields = ['description', 'version'];
102-
requiredFields.forEach(field => {
103-
if (!values[field]) {
104-
errors[field] = 'Required';
105-
}
106-
});
107-
if (values.description && values.description.length < 3) {
108-
errors.description = 'Incomplete tutorial description';
109-
}
110-
if (values.version && !values.version.match(/^(\d+\.)?(\d+\.)?(\*|\d+)$/)) {
111-
errors.version = 'Invalid version number';
112-
}
113-
return errors;
114-
}, 200);
115-
11696
export default reduxForm({
11797
form: 'tutorialInfo',
11898
validate,

‎src/components/TutorialInfo/validate.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as debounce from 'lodash.debounce';
2+
3+
const validate = debounce(values => {
4+
const errors: { description?: string, version?: string} = {};
5+
const requiredFields = ['description', 'version'];
6+
requiredFields.forEach(field => {
7+
if (!values[field]) {
8+
errors[field] = 'Required';
9+
}
10+
});
11+
if (values.description && values.description.length < 3) {
12+
errors.description = 'Incomplete tutorial description';
13+
}
14+
if (values.version && !values.version.match(/^(\d+\.)?(\d+\.)?(\*|\d+)$/)) {
15+
errors.version = 'Invalid version number';
16+
}
17+
return errors;
18+
}, 200);
19+
export default validate;

‎tsconfig.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
"src/components/Root.ts",
3131
"src/components/styles/theme.ts",
3232
"src/components/TopPanel/Top.ts",
33+
"src/components/TutorialConfig/validate.ts",
34+
"src/components/TutorialInfo/validate.ts",
3335
"src/index.ts",
3436
"src/modules/editor-paths/index.ts",
3537
"src/modules/package-json/actions.ts",

0 commit comments

Comments
 (0)