Skip to content

Commit c6c47d3

Browse files
author
Seth Lemmons
committed
HTML5 field types, componentWillMount, etc.
Added HTML field types to the bind / data articles Removed componentWillMount in favor or DidMount Renamed redux action properties to payload per feedback
1 parent 2f5f220 commit c6c47d3

File tree

15 files changed

+54
-60
lines changed

15 files changed

+54
-60
lines changed

05-mixins/a-floatingbox/src/Box.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import withFloat from './util/withFloat';
44
export class Box extends Component {
55
state = {}
66

7-
componentWillMount() {
7+
componentDidMount() {
88
const { float } = this.props;
99

1010
if (float) {

22-react-binding/a-simple-binding/src/Form.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ class Form extends Component {
1717
return (
1818
<form>
1919
{renderField(state, 'name')}
20-
{renderField(state, 'email')}
21-
{renderField(state, 'phone', 'Phone Number')}
20+
{renderField(state, 'email', undefined, 'email')}
21+
{renderField(state, 'phone', 'Phone Number', 'tel')}
2222
{renderField(state, 'company')}
2323
{renderField(state, 'department')}
2424
{renderField(state, 'title')}
@@ -28,13 +28,13 @@ class Form extends Component {
2828
);
2929
}
3030

31-
renderField = (state, name, label = name) => {
31+
renderField = (state, name, label = name, type = 'text') => {
3232
return (
3333
<div style={{ marginBottom: '12px' }}>
3434
<label style={{textTransform: 'capitalize'}}>
3535
{label}
3636
<input
37-
type="text"
37+
type={type}
3838
name={name}
3939
value={state.user[name] || ''}
4040
onChange={this.handleFieldChange}

22-react-binding/b-tell-parent/src/Form.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ class Form extends Component {
1717
return (
1818
<form>
1919
{renderField(state, 'name')}
20-
{renderField(state, 'email')}
21-
{renderField(state, 'phone', 'Phone Number')}
20+
{renderField(state, 'email', undefined, 'email')}
21+
{renderField(state, 'phone', 'Phone Number', 'tel')}
2222
{renderField(state, 'company')}
2323
{renderField(state, 'department')}
2424
{renderField(state, 'title')}
@@ -28,7 +28,7 @@ class Form extends Component {
2828
);
2929
}
3030

31-
renderField = (state, name, label = name) => {
31+
renderField = (state, name, label = name, type = 'text') => {
3232
return (
3333
<div style={{ marginBottom: '12px' }}>
3434
<label style={{textTransform: 'capitalize'}}>
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
export const UPDATE_USER = 'UPDATE_USER';
22

3-
export function updateUser (change) {
3+
export function updateUser (payload) {
44
return {
5-
change,
5+
payload,
66
type: UPDATE_USER
77
};
88
}

23-redux-state/a-application-state-redux/src/components/user/Form.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import React from 'react';
22

3-
const renderField = (
4-
props,
5-
name,
6-
label = name
7-
) => {
3+
const renderField = (props, name, label = name, type = 'text') => {
84
return (
95
<div style={{ marginBottom: '12px' }}>
106
<label style={{textTransform: 'capitalize'}}>
@@ -31,8 +27,8 @@ const Form = props => {
3127
return (
3228
<form>
3329
{renderField(props, 'name')}
34-
{renderField(props, 'email')}
35-
{renderField(props, 'phone', 'Phone Number')}
30+
{renderField(props, 'email', undefined, 'email')}
31+
{renderField(props, 'phone', 'Phone Number', 'tel')}
3632
{renderField(props, 'company')}
3733
{renderField(props, 'department')}
3834
{renderField(props, 'title')}

23-redux-state/a-application-state-redux/src/reducers/user.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ const DEFAULT_USER = {
1010
title: 'Creative Director'
1111
};
1212

13-
function user(user = DEFAULT_USER, action) {
13+
function user(userData = DEFAULT_USER, action) {
1414
switch (action.type) {
1515
case UPDATE_USER:
16-
return Object.assign({}, user, action.change);
16+
return Object.assign({}, userData, action.payload);
1717
default:
18-
return user;
18+
return userData;
1919
}
2020
}
2121

24-mobx-state/a-application-state-mobx/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "react-binding",
2+
"name": "a-application-state-mobx",
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {

24-mobx-state/a-application-state-mobx/src/Form.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,31 +17,32 @@ class Form extends Component {
1717
}
1818

1919
@action
20-
componentWillMount() {
20+
componentDidMount() {
2121
const { store, user } = this.props;
2222

2323
store.user = user;
2424
}
2525

2626
render() {
2727
const { user } = this.props.store;
28+
const { renderField, submit } = this;
2829

2930
return (
3031
<form>
31-
{this.renderField(user, 'name')}
32-
{this.renderField(user, 'email')}
33-
{this.renderField(user, 'phone', 'Phone Number')}
34-
{this.renderField(user, 'company')}
35-
{this.renderField(user, 'department')}
36-
{this.renderField(user, 'title')}
32+
{renderField(user, 'name')}
33+
{renderField(user, 'email', undefined, 'email')}
34+
{renderField(user, 'phone', 'Phone Number', 'tel')}
35+
{renderField(user, 'company')}
36+
{renderField(user, 'department')}
37+
{renderField(user, 'title')}
3738

38-
<button onClick={this.submit}>Submit</button>
39+
<button onClick={submit}>Submit</button>
3940
<br />
4041
</form>
4142
);
4243
}
4344

44-
renderField(user, name, label = name) {
45+
renderField = (user, name, label = name, type = 'text') => {
4546
if (user[name] == null) {
4647
extendObservable(user, {
4748
[name]: ''

25-react-data/a-remote-loading/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "react-data",
2+
"name": "a-remote-loading",
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {

25-react-data/b-sorting/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "react-data",
2+
"name": "b-sorting",
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {

0 commit comments

Comments
 (0)