Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Sep 2, 2022. It is now read-only.

Commit 45cf64d

Browse files
author
Chris Nelson
committed
Merge branch 'refactor-components'
2 parents 15ffb37 + 6b65294 commit 45cf64d

File tree

8 files changed

+198
-11
lines changed

8 files changed

+198
-11
lines changed

‎src/ArgField.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import { isEnum } from './graphql_utils';
3+
import SimpleArgField from './SimpleArgField';
4+
import InputObjectArgField from './InputObjectArgField';
5+
import EnumArgField from './EnumArgField';
6+
7+
const ArgField = ({ arg, schema, argValueChange, prefix=[] }) => {
8+
if (arg.type.kind == "INPUT_OBJECT") {
9+
return (
10+
<InputObjectArgField
11+
prefix={prefix}
12+
schema={schema}
13+
arg={arg}
14+
argValueChange={argValueChange}
15+
/>
16+
);
17+
} else if (isEnum(arg)) {
18+
return (
19+
<EnumArgField arg={arg} argValueChange={argValueChange} prefix={prefix} schema={schema} />
20+
);
21+
} else {
22+
return (
23+
<SimpleArgField
24+
prefix={prefix}
25+
arg={arg}
26+
argValueChange={argValueChange}
27+
/>
28+
);
29+
30+
}
31+
}
32+
33+
export default ArgField;

‎src/ArgField.spec.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import ArgField from './ArgField';
4+
import InputObjectArgField from './InputObjectArgField';
5+
6+
const simpleArg = {
7+
name: "Foo",
8+
type: {
9+
kind: "SCALAR",
10+
name: "String"
11+
}
12+
};
13+
14+
const inputObjectArg = {
15+
name: "Foo",
16+
type: {
17+
kind: "INPUT_OBJECT",
18+
name: "FooInput"
19+
}
20+
};
21+
22+
const schema = {};
23+
24+
it('renders simple args', () => {
25+
const wrapper = shallow(<ArgField arg={simpleArg} schema={schema} />);
26+
expect(wrapper.find('input')).toBeTruthy();
27+
});
28+
29+
it('renders input objects', () => {
30+
const wrapper = shallow(<ArgField arg={inputObjectArg} schema={schema} />);
31+
expect(wrapper.find(InputObjectArgField).length).toEqual(1);
32+
});

‎src/ArgsForm.js

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React, { Component } from 'react';
2+
import SimpleArgField from './SimpleArgField';
3+
import ArgField from './ArgField';
24
import { findInputFields, findType, findEffectiveType, findEnumValues, isEnum } from './graphql_utils';
35

46
class ArgsForm extends Component {
@@ -48,7 +50,14 @@ class ArgsForm extends Component {
4850
} else if (isEnum(arg)) {
4951
return this.renderEnumField(arg, prefix);
5052
} else {
51-
return this.renderSimpleArgField(arg, prefix);
53+
return (
54+
<SimpleArgField
55+
prefix={prefix}
56+
arg={arg}
57+
onChange={(event)=> this.argValueChange(prefix.concat(arg.name) : arg.name, event.target.value)}
58+
/>
59+
);
60+
5261
}
5362
}
5463

@@ -57,19 +66,16 @@ class ArgsForm extends Component {
5766
.map( simpleField => this.renderArgField(simpleField, prefix.concat(arg.name)));
5867
}
5968

60-
renderSimpleArgField(arg, prefix=[]) {
61-
return (
62-
<div>
63-
<label>{arg.name}</label>
64-
<input name={arg.name} onChange={ (event)=> this.argValueChange(prefix.concat(arg.name) : arg.name, event.target.value)}/>
65-
</div>
66-
);
67-
}
68-
6969
render() {
7070
return (
7171
<form>
72-
{this.props.args.map((arg) => this.renderArgField(arg))}
72+
{this.props.args.map((arg) => (
73+
<ArgField
74+
arg={arg}
75+
schema={this.props.schema}
76+
argValueChange={ (name, value)=> this.argValueChange(name, value) }
77+
/>
78+
))}
7379
<input type="button" value={this.props.buttonLabel} onClick={ () => this.props.onExecute(this.state.argValues) } />
7480
</form>
7581
);

‎src/EnumArgField.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { findEnumValues, findEffectiveType } from './graphql_utils';
3+
4+
const EnumArgField = ({arg, schema, argValueChange, prefix}) => {
5+
const enumValues = findEnumValues(schema, findEffectiveType(arg.type).name);
6+
return (
7+
<div>
8+
<label>{arg.name}</label>
9+
<select name={arg.name} onChange={ (event) => { argValueChange(prefix.concat(arg.name), event.target.value) } }>
10+
{ enumValues.map( (enumValue, index) => (
11+
<option key={index}>{enumValue.name}</option>
12+
))
13+
}
14+
</select>
15+
</div>
16+
);
17+
};
18+
19+
export default EnumArgField

‎src/EnumArgField.spec.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import EnumArgField from './EnumArgField';
4+
5+
const enumArg = {
6+
name: "Foo",
7+
type: {
8+
kind: "ENUM",
9+
name: "FooEnum"
10+
}
11+
};
12+
13+
const schema = {
14+
types: [
15+
{
16+
name: "FooEnum",
17+
kind: "ENUM",
18+
enumValues: [
19+
{
20+
name: "FOO"
21+
},
22+
{
23+
name: "BAR"
24+
}
25+
]
26+
}
27+
]
28+
};
29+
30+
it('renders select with options', () => {
31+
const wrapper = shallow(<EnumArgField arg={enumArg} schema={schema} />);
32+
expect(wrapper.find('select').length).toEqual(1);
33+
});

‎src/InputObjectArgField.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { findInputFields } from './graphql_utils';
3+
import ArgField from './ArgField';
4+
5+
const InputObjectArgField = ({arg, argValueChange, prefix=[], schema}) => (
6+
<fieldset>
7+
{ findInputFields(schema, arg.type.name)
8+
.map( (inputField, index) => (
9+
<ArgField key={index} arg={inputField} prefix={prefix.concat(arg.name)} argValueChange={argValueChange} />
10+
))
11+
}
12+
</fieldset>
13+
);
14+
15+
export default InputObjectArgField;

‎src/InputObjectArgField.spec.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import InputObjectArgField from './InputObjectArgField';
4+
import ArgField from './ArgField';
5+
6+
const inputObjectArg = {
7+
name: "Foo",
8+
type: {
9+
kind: "INPUT_OBJECT",
10+
name: "FooInput"
11+
}
12+
};
13+
14+
const schema = {
15+
types: [{
16+
name: "FooInput",
17+
inputFields: [
18+
{
19+
name: "bar",
20+
type: {
21+
kind: "SCALAR"
22+
}
23+
},
24+
{
25+
name: "baz",
26+
type: {
27+
kind: "SCALAR"
28+
}
29+
}
30+
]
31+
}]
32+
};
33+
34+
35+
it('renders input objects', () => {
36+
const wrapper = shallow(<InputObjectArgField arg={inputObjectArg} schema={schema} />);
37+
expect(wrapper.find(ArgField).length).toEqual(2);
38+
});

‎src/SimpleArgField.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
const SimpleArgField = ({arg, argValueChange, prefix}) =>
4+
(
5+
<div>
6+
<label>{arg.name}</label>
7+
<input name={arg.name} onChange={ (event) => argValueChange(prefix.concat(arg.name), event.target.value)} />
8+
</div>
9+
);
10+
11+
export default SimpleArgField

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /