Skip to content

Commit a29123e

Browse files
n1k0n1k0
committed
Merge pull request #3 from mozilla-services/functional-components
Moved to mostly using only functional components.
2 parents 7bdc65c + 94a18dc commit a29123e

File tree

10 files changed

+134
-146
lines changed

10 files changed

+134
-146
lines changed

‎src/components/BooleanField.js‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22

33
import CheckboxField from "./CheckboxField";
44

5-
6-
export default class BooleanField extends Component {
7-
render() {
8-
const {schema, formData, required, onChange} = this.props;
9-
const commonProps = {
10-
schema,
11-
label: schema.title,
12-
formData: formData,
13-
required: required,
14-
onChange: onChange.bind(this),
15-
};
16-
return <CheckboxField placeholder={schema.description} {...commonProps} />;
17-
}
5+
export default function BooleanField({schema, formData, required, onChange}) {
6+
// XXX at some point in the future we'll support other widgets for boolean
7+
// fields; radio buttons and selectbox mainly.
8+
const commonProps = {
9+
schema,
10+
onChange,
11+
label: schema.title,
12+
formData: formData,
13+
required: required,
14+
};
15+
return <CheckboxField placeholder={schema.description} {...commonProps} />;
1816
}

‎src/components/CheckboxField.js‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22

33
import { defaultFieldValue } from "../utils";
44
import Field from "./Field";
55

6-
export default class CheckboxField extends Component {
7-
onChange(event) {
8-
this.props.onChange(event.target.checked);
9-
}
10-
11-
render() {
12-
const {schema, formData, label, required, placeholder} = this.props;
13-
return (
14-
<Field label={label} required={required} type={schema.type}>
15-
<input type="checkbox"
16-
title={placeholder}
17-
checked={defaultFieldValue(formData, schema)}
18-
required={required}
19-
onChange={this.onChange.bind(this)} />
20-
</Field>
21-
);
22-
}
6+
export default function CheckboxField({
7+
schema,
8+
onChange,
9+
formData,
10+
label,
11+
required,
12+
placeholder
13+
}) {
14+
return (
15+
<Field label={label} required={required} type={schema.type}>
16+
<input type="checkbox"
17+
title={placeholder}
18+
checked={defaultFieldValue(formData, schema)}
19+
defaultChecked={!!schema.default}
20+
required={required}
21+
onChange={(event) => onChange(event.target.checked)} />
22+
</Field>
23+
);
2324
}

‎src/components/ErrorList.js‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22

33

4-
export default class ErrorList extends Component {
5-
render() {
6-
const {errors} = this.props;
7-
if (errors.length === 0) {
8-
return null;
9-
}
10-
return <div className="errors">
4+
export default function ErrorList({errors}) {
5+
return (
6+
<div className="errors">
117
<h2>Errors</h2>
128
<ul>{
139
errors.map((error, i) => {
1410
return <li key={i}>{error.stack}</li>;
1511
})
1612
}</ul>
17-
</div>;
18-
}
13+
</div>
14+
);
1915
}
16+

‎src/components/Field.js‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,24 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22

33
const REQUIRED_FIELD_SYMBOL = "*";
44

5-
export default class Field extends Component {
6-
get label() {
7-
const {label, required} = this.props;
8-
if (!label) {
9-
return null;
10-
}
11-
if (required) {
12-
return label + REQUIRED_FIELD_SYMBOL;
13-
}
14-
return label;
5+
function getLabel(label, required) {
6+
if (!label) {
7+
return null;
158
}
16-
17-
render() {
18-
const {type, children} = this.props;
19-
return (
20-
<div className={`field field-${type}`}>
21-
<label>
22-
{this.label}
23-
{children}
24-
</label>
25-
</div>
26-
);
9+
if (required) {
10+
return label + REQUIRED_FIELD_SYMBOL;
2711
}
12+
return label;
13+
}
14+
15+
export default function Field({type, children, label, required}) {
16+
return (
17+
<div className={`field field-${type}`}>
18+
<label>
19+
{getLabel(label, required)}
20+
{children}
21+
</label>
22+
</div>
23+
);
2824
}

‎src/components/Form.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ export default class Form extends React.Component {
2424
}
2525

2626
renderErrors() {
27-
if (this.state.edit && this.state.status !== "editing") {
28-
return <ErrorList errors={this.state.errors} />;
27+
const {edit, status, errors} = this.state;
28+
if (edit && status !== "editing" && errors.length) {
29+
return <ErrorList errors={errors} />;
2930
}
3031
return null;
3132
}

‎src/components/SchemaField.js‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22

33
import StringField from "./StringField";
44
import ArrayField from "./ArrayField";
@@ -7,22 +7,16 @@ import ObjectField from "./ObjectField";
77
import UnsupportedField from "./UnsupportedField";
88

99

10-
export default class SchemaField extends Component {
11-
static get fieldComponents() {
12-
return {
13-
string: StringField,
14-
array: ArrayField,
15-
boolean: BooleanField,
16-
object: ObjectField,
17-
"date-time": StringField,
18-
number: StringField,
19-
};
20-
}
10+
const COMPONENT_TYPES = {
11+
"string": StringField,
12+
"array": ArrayField,
13+
"boolean": BooleanField,
14+
"object": ObjectField,
15+
"date-time": StringField,
16+
"number": StringField,
17+
};
2118

22-
render() {
23-
const {schema} = this.props;
24-
const FieldComponent = SchemaField.fieldComponents[schema.type] ||
25-
UnsupportedField;
26-
return <FieldComponent {...this.props} />;
27-
}
19+
export default function SchemaField(props) {
20+
const FieldComponent = COMPONENT_TYPES[props.schema.type] || UnsupportedField;
21+
return <FieldComponent {...props} />;
2822
}

‎src/components/SelectField.js‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22

33
import { defaultFieldValue } from "../utils";
44
import Field from "./Field";
55

6-
export default class SelectField extends Component {
7-
onChange(event) {
8-
this.props.onChange(event.target.value);
9-
}
106

11-
render() {
12-
const {schema, formData, options, required, label} = this.props;
13-
return (
14-
<Field label={label} required={required}>
15-
<select value={defaultFieldValue(formData, schema)}
16-
title={schema.description}
17-
onChange={this.onChange.bind(this)}>{
18-
options.map((option, i) => {
19-
return <option key={i}>{option}</option>;
20-
})
21-
}</select>
22-
</Field>
23-
);
24-
}
7+
export default function SelectField({
8+
schema,
9+
formData,
10+
options,
11+
required,
12+
label,
13+
onChange
14+
}) {
15+
return (
16+
<Field label={label} required={required}>
17+
<select
18+
title={schema.description}
19+
value={defaultFieldValue(formData, schema)}
20+
defaultValue={schema.default}
21+
onChange={(event) => onChange(event.target.value)}>{
22+
options.map((option, i) => {
23+
return <option key={i}>{option}</option>;
24+
})
25+
}</select>
26+
</Field>
27+
);
2528
}

‎src/components/StringField.js‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22

33
import TextField from "./TextField";
44
import SelectField from "./SelectField";
55

66

7-
export default class StringField extends Component {
8-
render() {
9-
const {schema, formData, required, onChange} = this.props;
10-
const commonProps = {
11-
schema,
12-
label: schema.title,
13-
formData: formData,
14-
required: required,
15-
onChange: onChange.bind(this),
16-
};
17-
if (Array.isArray(schema.enum)) {
18-
return <SelectField options={schema.enum} {...commonProps} />;
19-
}
20-
return <TextField placeholder={schema.description} {...commonProps} />;
7+
export default function StringField({schema, formData, required, onChange}) {
8+
const commonProps = {
9+
schema,
10+
onChange,
11+
label: schema.title,
12+
formData: formData,
13+
required: required,
14+
};
15+
if (Array.isArray(schema.enum)) {
16+
return <SelectField options={schema.enum} {...commonProps} />;
2117
}
18+
return <TextField placeholder={schema.description} {...commonProps} />;
2219
}

‎src/components/TextField.js‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22

33
import { defaultFieldValue } from "../utils";
44
import Field from "./Field";
55

66

7-
export default class TextField extends Component {
8-
onChange(event) {
9-
this.props.onChange(event.target.value);
10-
}
11-
12-
render() {
13-
const {schema, formData, label, required, placeholder} = this.props;
14-
return (
15-
<Field label={label} required={required}
16-
type={schema.type}>
17-
<input type="text"
18-
value={defaultFieldValue(formData, schema)}
19-
defaultValue={schema.default}
20-
placeholder={placeholder}
21-
required={required}
22-
onChange={this.onChange.bind(this)} />
23-
</Field>
24-
);
25-
}
7+
export default function TextField({
8+
schema,
9+
formData,
10+
label,
11+
required,
12+
placeholder,
13+
onChange
14+
}) {
15+
return (
16+
<Field label={label} required={required}
17+
type={schema.type}>
18+
<input type="text"
19+
value={defaultFieldValue(formData, schema)}
20+
defaultValue={schema.default}
21+
placeholder={placeholder}
22+
required={required}
23+
onChange={(event) => onChange(event.target.value)} />
24+
</Field>
25+
);
2626
}

‎src/components/UnsupportedField.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22

3-
export default class UnsupportedField extends Component {
4-
render() {
5-
// XXX render json as string so dev can inspect faulty subschema
6-
return <div className="unsupported-field">
7-
Unsupported field schema {JSON.stringify(this.props.schema)}.
8-
</div>;
9-
}
3+
4+
export default function UnsupportedField({schema}) {
5+
// XXX render json as string so dev can inspect faulty subschema
6+
return (
7+
<div className="unsupported-field">
8+
Unsupported field schema {JSON.stringify(schema, null, 2)}.
9+
</div>
10+
);
1011
}

0 commit comments

Comments
 (0)