Skip to content

Commit 444c8ff

Browse files
ShMcKShMcK
committed
create form components
1 parent 6add81c commit 444c8ff

File tree

10 files changed

+157
-133
lines changed

10 files changed

+157
-133
lines changed

‎lib/components/Form/selectField.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use strict";
2+
var __assign = (this && this.__assign) || Object.assign || function(t) {
3+
for (var s, i = 1, n = arguments.length; i < n; i++) {
4+
s = arguments[i];
5+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6+
t[p] = s[p];
7+
}
8+
return t;
9+
};
10+
var React = require('react');
11+
var SelectField_1 = require('material-ui/SelectField');
12+
var selectField = function (_a, props) {
13+
var children = _a.children, floatingLabelText = _a.floatingLabelText;
14+
return (React.createElement(SelectField_1.default, __assign({value: props.value, floatingLabelText: floatingLabelText, errorText: props.touched && props.error}, props, {onChange: function (event, index, value) { return props.onChange(value); }}), children));
15+
};
16+
Object.defineProperty(exports, "__esModule", { value: true });
17+
exports.default = selectField;

‎lib/components/Form/textField.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use strict";
2+
var __assign = (this && this.__assign) || Object.assign || function(t) {
3+
for (var s, i = 1, n = arguments.length; i < n; i++) {
4+
s = arguments[i];
5+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6+
t[p] = s[p];
7+
}
8+
return t;
9+
};
10+
var React = require('react');
11+
var TextField_1 = require('material-ui/TextField');
12+
var textField = function (_a, field) {
13+
var hintText = _a.hintText, floatingLabelText = _a.floatingLabelText, disabled = _a.disabled;
14+
return (React.createElement(TextField_1.default, __assign({className: 'native-key-bindings', hintText: hintText, floatingLabelText: floatingLabelText, disabled: disabled, errorText: field.touched && field.error}, field)));
15+
};
16+
Object.defineProperty(exports, "__esModule", { value: true });
17+
exports.default = textField;

‎lib/components/TutorialConfig/index.js‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,6 @@ 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-
};
157
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
168
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
179
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -24,15 +16,15 @@ var __metadata = (this && this.__metadata) || function (k, v) {
2416
var React = require('react');
2517
var react_redux_1 = require('react-redux');
2618
var redux_form_1 = require('redux-form');
27-
var SelectField_1 = require('material-ui/SelectField');
2819
var Card_1 = require('material-ui/Card');
2920
var RaisedButton_1 = require('material-ui/RaisedButton');
3021
var actions_1 = require('../../actions');
3122
var languageItems_1 = require('./languageItems');
3223
var runnerItems_1 = require('./runnerItems');
3324
var Top_1 = require('../TopPanel/Top');
34-
var TextField_1 = require('material-ui/TextField');
3525
var debounce = require('lodash.debounce');
26+
var textField_1 = require('../Form/textField');
27+
var selectField_1 = require('../Form/selectField');
3628
var formSelector = redux_form_1.formValueSelector('tutorialConfig');
3729
var styles = {
3830
card: {
@@ -62,18 +54,20 @@ var TutorialConfig = (function (_super) {
6254
}));
6355
};
6456
TutorialConfig.prototype.render = function () {
65-
var _this = this;
6657
var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid;
67-
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("div", null, 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("div", null, React.createElement(redux_form_1.Field, {name: 'language', component: function (props) {
68-
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()));
69-
}})), React.createElement("br", null), React.createElement("div", null, React.createElement(redux_form_1.Field, {name: 'runner', component: function (props) {
70-
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')));
71-
}})), 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)}))));
58+
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, {
59+
hintText: 'coderoad-tutorial-name',
60+
})}), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'language', component: selectField_1.default.bind(null, {
61+
children: languageItems_1.default(),
62+
floatingLabelText: 'language',
63+
})}), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'runner', component: selectField_1.default.bind(null, {
64+
children: runnerItems_1.default('JS'),
65+
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)}))));
7267
};
7368
TutorialConfig = __decorate([
7469
react_redux_1.connect(function (state) { return ({
7570
packageJson: state.packageJson,
76-
language: formSelector(state, 'language'),
7771
}); }, function (dispatch) { return ({
7872
save: function (pj) { return dispatch(actions_1.pjSave(pj)); },
7973
routeToPage: function () {
@@ -96,6 +90,7 @@ var validate = debounce(function (values) {
9690
if (values.name && !values.name.match(/^coderoad-[A-Za-z0-9\-]+$/)) {
9791
errors.name = 'Invalid "coderoad-*" name';
9892
}
93+
console.log(errors);
9994
return errors;
10095
}, 200);
10196
Object.defineProperty(exports, "__esModule", { value: true });

‎lib/components/TutorialInfo/index.js‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,6 @@ 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-
};
157
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
168
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
179
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -24,12 +16,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
2416
var React = require('react');
2517
var react_redux_1 = require('react-redux');
2618
var redux_form_1 = require('redux-form');
27-
var TextField_1 = require('material-ui/TextField');
2819
var Card_1 = require('material-ui/Card');
2920
var RaisedButton_1 = require('material-ui/RaisedButton');
3021
var actions_1 = require('../../actions');
3122
var Top_1 = require('../TopPanel/Top');
3223
var debounce = require('lodash.debounce');
24+
var textField_1 = require('../Form/textField');
3325
var styles = {
3426
card: {
3527
margin: '10px',
@@ -50,11 +42,24 @@ var TutorialInfo = (function (_super) {
5042
};
5143
TutorialInfo.prototype.onSubmit = function (values) {
5244
var description = values.description, version = values.version, keywords = values.keywords;
53-
this.props.save(Object.assign({}, this.props.packageJson, { description: description, version: version, keywords: keywords }));
45+
this.props.save(Object.assign({}, this.props.packageJson, {
46+
description: description, version: version,
47+
keywords: keywords.split(',')
48+
}));
5449
};
5550
TutorialInfo.prototype.render = function () {
5651
var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid;
57-
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: 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("div", 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}))));
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, {
53+
hintText: 'Tutorial description',
54+
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, {
56+
hintText: '0.1.0',
57+
floatingLabelText: 'Version',
58+
disabled: true,
59+
})})), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'keywords', component: textField_1.default.bind(null, {
60+
hintText: 'coderoad, react, js, etc',
61+
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}))));
5863
};
5964
TutorialInfo = __decorate([
6065
react_redux_1.connect(function (state) { return ({

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"core-coderoad": "0.2.0",
2929
"highlights": "1.3.1",
3030
"lodash.debounce": "^4.0.6",
31+
"lodash.throttle": "^4.0.1",
3132
"marked": "0.3.5",
3233
"material-ui": "0.15.0",
3334
"node-file-exists": "1.1.0",

‎src/components/Form/selectField.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import * as React from 'react';
2+
import SelectField from 'material-ui/SelectField';
3+
4+
const selectField = ({children, floatingLabelText}, props) => (
5+
<SelectField
6+
value={props.value}
7+
floatingLabelText={floatingLabelText}
8+
errorText = {props.touched && props.error}
9+
{...props}
10+
onChange = {(event, index, value) => props.onChange(value)}
11+
>
12+
{children}
13+
</SelectField>
14+
);
15+
export default selectField;

‎src/components/Form/textField.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as React from 'react';
2+
import TextField from 'material-ui/TextField';
3+
4+
const textField = ({
5+
hintText, floatingLabelText, disabled
6+
}, field) => (
7+
<TextField
8+
className='native-key-bindings'
9+
hintText={hintText}
10+
floatingLabelText={floatingLabelText}
11+
disabled={disabled}
12+
errorText={
13+
field.touched && field.error
14+
}
15+
{...field}
16+
/>
17+
);
18+
export default textField;

‎src/components/TutorialConfig/index.tsx‎

Lines changed: 39 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as React from 'react';
22
import {connect} from 'react-redux';
33
import {Field, reduxForm, formValueSelector} from 'redux-form';
44
import {resolve} from 'path';
5-
import SelectField from 'material-ui/SelectField';
65
import MenuItem from 'material-ui/MenuItem';
76
import {Card, CardHeader} from 'material-ui/Card';
87
import RaisedButton from 'material-ui/RaisedButton';
@@ -11,8 +10,9 @@ import languageItems from './languageItems';
1110
import runnerItems from './runnerItems';
1211
import Top from '../TopPanel/Top';
1312
import {validateName} from 'coderoad-cli';
14-
import TextField from 'material-ui/TextField';
1513
import * as debounce from 'lodash.debounce';
14+
import textField from '../Form/textField';
15+
import selectField from '../Form/selectField';
1616

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

@@ -35,7 +35,8 @@ interface ConfigForm {
3535

3636
@connect(state => ({
3737
packageJson: state.packageJson,
38-
language: formSelector(state, 'language'),
38+
// name: state.packageJson.name,
39+
// language: formSelector(state, 'language') || state.packageJson.config.language,
3940
}), dispatch => ({
4041
save: (pj: Tutorial.PJ) => dispatch(pjSave(pj)),
4142
routeToPage: () => {
@@ -74,68 +75,43 @@ class TutorialConfig extends React.Component <{
7475
title='Tutorial Configuration'
7576
/>
7677
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
77-
<div>
7878
<Field
79-
name='name'
80-
component={name => (
81-
<TextField
82-
className='native-key-bindings'
83-
hintText='coderoad-tutorial-name'
84-
errorText={
85-
name.touched && name.error
86-
}
87-
{...name}
88-
/>)
89-
}
79+
name='name'
80+
component={textField.bind(null, {
81+
hintText: 'coderoad-tutorial-name',
82+
})}
9083
/>
91-
</div>
92-
<br />
93-
<div>
94-
<Field name='language' component={props =>
95-
<div>
96-
<SelectField
97-
value={props.value}
98-
floatingLabelText='Language'
99-
errorText = {props.touched && props.error}
100-
{...props}
101-
onChange = {(event, index, value) => props.onChange(value)}
102-
>
103-
{languageItems()}
104-
</SelectField>
105-
</div>
106-
}/>
107-
</div>
10884
<br />
109-
<div>
110-
<Field name='runner' component={props =>
111-
<div>
112-
<SelectField
113-
value={props.value}
114-
floatingLabelText='Test Runner'
115-
errorText = {props.touched && props.error}
116-
{...props}
117-
onChange = {(event, index, value) => props.onChange(value)}
118-
>
119-
{runnerItems(this.props.language || 'JS')}
120-
</SelectField>
121-
</div>
122-
}/>
123-
</div>
124-
<br />
125-
<RaisedButton
126-
type='submit'
127-
style={styles.button}
128-
label='Save'
129-
primary={true}
130-
disabled={pristine || submitting || invalid}
131-
/>
132-
<RaisedButton
133-
style={styles.button}
134-
label='Continue'
135-
secondary={true}
136-
disabled={invalid}
137-
onTouchTap={this.props.routeToPage.bind(this)}
138-
/>
85+
<Field
86+
name='language'
87+
component={selectField.bind(null, {
88+
children: languageItems(),
89+
floatingLabelText: 'language',
90+
})}
91+
/>
92+
<br />
93+
<Field
94+
name='runner'
95+
component={selectField.bind(null, {
96+
children: runnerItems('JS'),
97+
floatingLabelText: 'Test Runner',
98+
})}
99+
/>
100+
<br />
101+
<RaisedButton
102+
type='submit'
103+
style={styles.button}
104+
label='Save'
105+
primary={true}
106+
disabled={pristine || submitting || invalid}
107+
/>
108+
<RaisedButton
109+
style={styles.button}
110+
label='Continue'
111+
secondary={true}
112+
disabled={invalid}
113+
onTouchTap={this.props.routeToPage.bind(this)}
114+
/>
139115
</form>
140116
</Card>
141117
);
@@ -153,6 +129,7 @@ const validate = debounce(values => {
153129
if (values.name && !values.name.match(/^coderoad-[A-Za-z0-9\-]+$/)) {
154130
errors.name = 'Invalid "coderoad-*" name';
155131
}
132+
console.log(errors);
156133
return errors;
157134
}, 200);
158135

0 commit comments

Comments
 (0)