Skip to content

Commit c327175

Browse files
ShMcKShMcK
committed
redux form v6 outline
1 parent e0d760f commit c327175

File tree

7 files changed

+247
-219
lines changed

7 files changed

+247
-219
lines changed

‎lib/components/TutorialConfig/index.js‎

Lines changed: 34 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@ var __metadata = (this && this.__metadata) || function (k, v) {
2323
};
2424
var React = require('react');
2525
var react_redux_1 = require('react-redux');
26+
var redux_form_1 = require('redux-form');
2627
var SelectField_1 = require('material-ui/SelectField');
2728
var Card_1 = require('material-ui/Card');
2829
var RaisedButton_1 = require('material-ui/RaisedButton');
2930
var actions_1 = require('../../actions');
3031
var languageItems_1 = require('./languageItems');
3132
var runnerItems_1 = require('./runnerItems');
3233
var Top_1 = require('../TopPanel/Top');
33-
var redux_form_1 = require('redux-form');
34-
var coderoad_cli_1 = require('coderoad-cli');
3534
var TextField_1 = require('material-ui/TextField');
35+
var formSelector = redux_form_1.formValueSelector('tutorialConfig');
3636
var styles = {
3737
card: {
3838
margin: '10px',
@@ -43,76 +43,60 @@ var styles = {
4343
margin: '30px 10px 20px 10px',
4444
},
4545
};
46-
var fields = ['name', 'language', 'runner'];
47-
var validate = function (values) {
48-
var errors = {};
49-
if (!name) {
50-
errors.name = 'Required';
51-
}
52-
else if (!coderoad_cli_1.validateName(name)) {
53-
errors.name = 'Invalid "coderoad-*" name';
54-
}
55-
if (!values.language) {
56-
errors.language = 'Required';
57-
}
58-
if (!values.runner) {
59-
errors.runner = 'Required';
60-
}
61-
return errors;
62-
};
6346
var TutorialConfig = (function (_super) {
6447
__extends(TutorialConfig, _super);
65-
function TutorialConfig(props) {
66-
_super.call(this, props);
67-
var _a = this.props.packageJson, name = _a.name, config = _a.config;
68-
this.state = {
69-
name: name,
70-
language: config.language,
71-
runner: config.runner,
72-
};
48+
function TutorialConfig() {
49+
_super.apply(this, arguments);
7350
}
7451
TutorialConfig.prototype.componentDidMount = function () {
7552
Top_1.default.toggle(false);
7653
};
77-
TutorialConfig.prototype.handleText = function (prop, event, value) {
78-
var next = {};
79-
next[prop] = value;
80-
this.setState(Object.assign({}, this.state, next));
81-
};
82-
TutorialConfig.prototype.handleSelect = function (prop, event, index, value) {
83-
var next = {};
84-
next[prop] = value;
85-
this.setState(Object.assign({}, this.state, next));
86-
};
87-
TutorialConfig.prototype.submit = function () {
88-
var _a = this.state, name = _a.name, language = _a.language, runner = _a.runner;
89-
this.props.save(Object.assign({}, this.props.packageJson, {
90-
name: name,
91-
config: {
92-
language: language, runner: runner
93-
}
94-
}));
54+
TutorialConfig.prototype.handleSubmit = function (e) {
55+
console.log(e);
56+
console.log(this.props.values);
9557
};
9658
TutorialConfig.prototype.render = function () {
97-
var _a = this.state, name = _a.name, language = _a.language, runner = _a.runner;
98-
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Configuration'}), React.createElement(TextField_1.default, {className: 'native-key-bindings', value: name, onChange: this.handleText.bind(this, 'name')}), React.createElement("br", null), React.createElement(SelectField_1.default, __assign({floatingLabelText: 'Language', value: language}, language, {onChange: this.handleSelect.bind(this, 'language')}), languageItems_1.default()), React.createElement("br", null), React.createElement(SelectField_1.default, __assign({floatingLabelText: 'Test Runner', value: runner}, runner, {onChange: this.handleSelect.bind(this, 'runner')}), runnerItems_1.default(language)), 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.routeToPage.bind(this)})));
59+
var _this = this;
60+
console.log(this.props.values);
61+
var name = this.props.packageJson.name;
62+
var _a = this.props.packageJson.config, language = _a.language, runner = _a.runner;
63+
var _b = this.props, pristine = _b.pristine, submitting = _b.submitting;
64+
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Configuration'}), React.createElement("form", {onSubmit: this.handleSubmit}, React.createElement(redux_form_1.Field, {name: 'name', component: function (name) { return (React.createElement(TextField_1.default, __assign({name: 'name', className: 'native-key-bindings', hintText: 'coderoad-tutorial-name', floatingLabelText: 'Tutorial Name', errorText: name.touched && name.error}, name))); }}), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'language', component: function (props) {
65+
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()));
66+
}}), React.createElement(redux_form_1.Field, {name: 'runner', component: function (props) {
67+
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.values.language)));
68+
}}), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting, onTouchTap: this.submit.bind(this)}), React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, onTouchTap: this.props.routeToPage.bind(this)}))));
9969
};
10070
TutorialConfig = __decorate([
10171
react_redux_1.connect(function (state) { return ({
10272
packageJson: state.packageJson,
73+
values: formSelector(state, 'name', 'language', 'runner'),
10374
}); }, function (dispatch) { return ({
10475
save: function (pj) { return dispatch(actions_1.pjSave(pj)); },
10576
routeToPage: function () {
10677
dispatch(actions_1.tutorialInit());
10778
dispatch(actions_1.routeSet('page'));
10879
}
10980
}); }),
110-
__metadata('design:paramtypes', [Object])
81+
__metadata('design:paramtypes', [])
11182
], TutorialConfig);
11283
return TutorialConfig;
11384
}(React.Component));
85+
var validate = function (values) {
86+
var errors = {};
87+
var requiredFields = ['name', 'language', 'runner'];
88+
requiredFields.forEach(function (field) {
89+
if (!values[field]) {
90+
errors[field] = 'Required';
91+
}
92+
});
93+
if (values.name && !values.name.match(/^coderoad-[A-Za-z0-9\-]+$/)) {
94+
errors.name = 'Invalid "coderoad-*" name';
95+
}
96+
return errors;
97+
};
11498
Object.defineProperty(exports, "__esModule", { value: true });
11599
exports.default = redux_form_1.reduxForm({
116-
form: 'config',
117-
fields: fields,
100+
form: 'tutorialConfig',
101+
validate: validate,
118102
})(TutorialConfig);

‎lib/components/TutorialConfig/runnerItems.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ 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);
67
return options_1.default[language].runners.map(function (runner, index) {
78
return (React.createElement(MenuItem_1.default, {key: index, value: runner, primaryText: runner}));
89
});

‎lib/components/TutorialInfo/index.js‎

Lines changed: 37 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ var __extends = (this && this.__extends) || function (d, b) {
44
function __() { this.constructor = d; }
55
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
66
};
7+
var __assign = (this && this.__assign) || Object.assign || function(t) {
8+
for (var s, i = 1, n = arguments.length; i < n; i++) {
9+
s = arguments[i];
10+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11+
t[p] = s[p];
12+
}
13+
return t;
14+
};
715
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
816
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
917
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -15,6 +23,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
1523
};
1624
var React = require('react');
1725
var react_redux_1 = require('react-redux');
26+
var redux_form_1 = require('redux-form');
1827
var TextField_1 = require('material-ui/TextField');
1928
var Card_1 = require('material-ui/Card');
2029
var RaisedButton_1 = require('material-ui/RaisedButton');
@@ -32,30 +41,19 @@ var styles = {
3241
};
3342
var TutorialInfo = (function (_super) {
3443
__extends(TutorialInfo, _super);
35-
function TutorialInfo(props) {
36-
_super.call(this, props);
37-
var _a = this.props.packageJson, description = _a.description, version = _a.version, keywords = _a.keywords;
38-
this.state = {
39-
description: description || '',
40-
version: version || '0.1.0',
41-
keywords: keywords || [],
42-
};
44+
function TutorialInfo() {
45+
_super.apply(this, arguments);
4346
}
4447
TutorialInfo.prototype.componentDidMount = function () {
4548
Top_1.default.toggle(false);
4649
};
47-
TutorialInfo.prototype.handleText = function (prop, event, value) {
48-
var next = {};
49-
next[prop] = value;
50-
this.setState(Object.assign({}, this.state, next));
51-
};
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 }));
50+
TutorialInfo.prototype.handleSubmit = function (e) {
51+
console.log(e);
5552
};
5653
TutorialInfo.prototype.render = function () {
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)})));
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}))));
5957
};
6058
TutorialInfo = __decorate([
6159
react_redux_1.connect(function (state) { return ({
@@ -64,9 +62,28 @@ var TutorialInfo = (function (_super) {
6462
save: function (pj) { return dispatch(actions_1.pjSave(pj)); },
6563
routeToTutorial: function () { return dispatch(actions_1.routeSet('page')); }
6664
}); }),
67-
__metadata('design:paramtypes', [Object])
65+
__metadata('design:paramtypes', [])
6866
], TutorialInfo);
6967
return TutorialInfo;
7068
}(React.Component));
69+
var validate = function (values) {
70+
var errors = {};
71+
var requiredFields = ['description', 'version'];
72+
requiredFields.forEach(function (field) {
73+
if (!values[field]) {
74+
errors[field] = 'Required';
75+
}
76+
});
77+
if (values.description && values.description.length < 3) {
78+
errors.description = 'Incomplete tutorial description';
79+
}
80+
if (values.version && !values.version.match(/^(\d+\.)?(\d+\.)?(\*|\d+)$/)) {
81+
errors.version = 'Invalid version number';
82+
}
83+
return errors;
84+
};
7185
Object.defineProperty(exports, "__esModule", { value: true });
72-
exports.default = TutorialInfo;
86+
exports.default = redux_form_1.reduxForm({
87+
form: 'tutorialInfo',
88+
validate: validate,
89+
})(TutorialInfo);

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"react-redux": "4.4.5",
3636
"react-tap-event-plugin": "1.0.0",
3737
"redux": "3.5.2",
38-
"redux-form": "^5.2.5",
38+
"redux-form": "^6.0.0-alpha.15",
3939
"redux-logger": "2.6.1",
4040
"redux-throttle-actions": "1.1.0",
4141
"redux-thunk": "2.1.0",

0 commit comments

Comments
 (0)