typed-ui
Generic UI for the GraphQL Schema Language.
Install
$ yarn add typed-ui
Docs
Usage
;;;; const Demo = <Put type= name: 'typed-ui Demo' fields: A: args: X: type: name: 'X' fields: xs: type: type: name: 'This is what A returned' fields: B: type: data= A: output: B: output: 'hew' onChange=consolelog />; ;
API
Members
- ListInput ⇒
Component
Returns a list input component with change events handled by the given callback.
- ObjectInput ⇒
Component
Returns an object input component with change events handled by the given callback.
- NonNullInput
TODO A component for non null inputs. Bases component selection on name of type.
- HigherOrderInput ⇒
React.Element
Component for displaying GraphQL input types of higher order.
- ListOutput ⇒
Element
Component for displaying GraphQLObjectType input and output data.
- NonNullOutput
TODO A component for non null inputs. Bases component selection on name of type.
- HigherOrderOutput ⇒
React.Element
Component for displaying GraphQL output types of higher order.
- StringInput ⇒
Component
Returns a text field with change events handled by the given callback.
- IntegerInput ⇒
Component
Returns an integer input component with change events handled by the given callback.
- FloatInput ⇒
Component
Returns a float input component with change events handled by the given callback.
- BooleanInput ⇒
Component
Returns a boolean input component with change events handled by the given callback.
- EnumInput ⇒
Component
Returns a select component with change events handled by the given callback.
- StringOutput ⇒
Component
Returns a div surrounding the supplied data.
- EnumOutput ⇒
Component
Returns a readonly component displaying the supplied data.
- BooleanOutput ⇒
Component
Returns a readonly checkbox displaying the value of the supplied boolean.
- IntegerOutput ⇒
Component
Returns a readonly number input component displaying the integer.
- FloatOutput ⇒
Component
Returns a readonly number input component displaying the float.
- Put ⇒
Component
Component for displaying GraphQL data
Functions
- ListOutput(props) ⇒
Component
Returns a list surrounding the supplied list data.
Component
ListInput ⇒ Returns a list input component with change events handled by the given callback.
Kind: global variable
Returns: Component
- A list input component.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.ofType | GraphQLInputType |
The type of items in the list. |
props.onChange | onChange |
The handler for change events. |
Example (Log list input to the console)
<ListInput ofType=GraphQLString onChange=consolelog />
function
ListInput~onChange : This callback handles ListInput change events.
Kind: inner typedef of ListInput
Param | Type |
---|---|
value | Array.<*> |
Component
ObjectInput ⇒ Returns an object input component with change events handled by the given callback.
Kind: global variable
Returns: Component
- An object input component.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.name | string |
The name of the input object. |
props.fields | Object |
The input object fields. |
props.onChange | onChange |
The handler for change events. |
Example (Log object input to the console)
<ObjectInput name="This is the name of the input object." fields= x: type: GraphQLString onChange=consolelog/>
function
ObjectInput~onChange : This callback handles ObjectInput change events.
Kind: inner typedef of ObjectInput
Param | Type |
---|---|
value | Object |
NonNullInput
TODO A component for non null inputs. Bases component selection on name of type.
React.Element
HigherOrderInput ⇒ Component for displaying GraphQL input types of higher order.
Kind: global variable
Returns: React.Element
- An element displaying the input.
Param | Type | Description |
---|---|---|
ofType | GraphQLInputType |
The type of the input. |
ofType | Object.<GraphQLInputType, Component> |
Map from GraphQL input types to components. |
Element
ListOutput ⇒ Component for displaying GraphQLObjectType input and output data.
Kind: global variable
Returns: Element
- A object surrounding the object items.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.name | string |
The name of the object. |
props.fields | Object |
The type of fields of the object. |
props.data | Object |
The object field args and return data. |
props.data[fieldName].selected | Boolean |
Whether the field is selected. |
props.data[fieldName].input | Object |
The input data for object field arguments. |
props.data[fieldName].input[argName | GraphQLInputType |
The input data for object field arguments. |
props.data[fieldName].output | GraphQLType |
The output data for object field return types. |
props.onChange | onChange |
The handler for change events. |
Example (Display an object of one string)
<ObjectOutput name="This is the name of the object." fields= hew: type: GraphQLString data= hew: 'This is a string field called hew.' />
function
ListOutput~onChange : This callback handles ListOutput change events.
Kind: inner typedef of ListOutput
Param | Type |
---|---|
value | Array.<*> |
NonNullOutput
TODO A component for non null inputs. Bases component selection on name of type.
React.Element
HigherOrderOutput ⇒ Component for displaying GraphQL output types of higher order.
Kind: global variable
Returns: React.Element
- An element displaying the input.
Param | Type | Description |
---|---|---|
ofType | GraphQLOutputType |
The type of the input. |
ofType | Object.<GraphQLOutputType, Component> |
Map from GraphQL input types to components. |
Component
StringInput ⇒ Returns a text field with change events handled by the given callback.
Kind: global variable
Returns: Component
- A text field component.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.onChange | onChange |
The handler for change events. |
Example (Log string input to the console)
<StringInput onChange=consolelog />
function
StringInput~onChange : This callback handles StringInput change events.
Kind: inner typedef of StringInput
Param | Type |
---|---|
value | string |
Component
IntegerInput ⇒ Returns an integer input component with change events handled by the given callback.
Kind: global variable
Returns: Component
- An integer input component.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.onChange | onChange |
The handler for change events. |
Example (Log integer input to the console)
<IntegerInput onChange=consolelog />
function
IntegerInput~onChange : This callback handles IntegerInput change events.
Kind: inner typedef of IntegerInput
Param | Type |
---|---|
value | integer |
Component
FloatInput ⇒ Returns a float input component with change events handled by the given callback.
Kind: global variable
Returns: Component
- A float input component.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.onChange | onChange |
The handler for change events. |
Example (Log float input to the console)
<FloatInput onChange=consolelog />
function
FloatInput~onChange : This callback handles FloatInput change events.
Kind: inner typedef of FloatInput
Param | Type |
---|---|
value | float |
Component
BooleanInput ⇒ Returns a boolean input component with change events handled by the given callback.
Kind: global variable
Returns: Component
- A boolean input component.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.onChange | onChange |
The handler for change events. |
Example (Log boolean input to the console)
<BooleanInput onChange=consolelog />
function
BooleanInput~onChange : This callback handles BooleanInput change events.
Kind: inner typedef of BooleanInput
Param | Type |
---|---|
value | boolean |
Component
EnumInput ⇒ Returns a select component with change events handled by the given callback.
Kind: global variable
Returns: Component
- A select component.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.options | Array.<string> |
= The enum options. |
props.data | string |
= The enum data. |
props.onChange | onChange |
The handler for change events. |
Example (Log enum input to the console)
<EnumInput options='a' 'b' 'c' data="b" onChange=consolelog />
function
EnumInput~onChange : This callback handles EnumInput change events.
Kind: inner typedef of EnumInput
Param | Type |
---|---|
value | string |
Component
StringOutput ⇒ Returns a div surrounding the supplied data.
Kind: global variable
Returns: Component
- A div surrounding the data.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.data | string |
The string data. |
Example (Display the string "abc")
<StringOutput data="abc" />
Component
EnumOutput ⇒ Returns a readonly component displaying the supplied data.
Kind: global variable
Returns: Component
- A component displaying the enum.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
data | string |
The enum data. |
Example (Display an enum)
<EnumOutput data="ABC" />
Component
BooleanOutput ⇒ Returns a readonly checkbox displaying the value of the supplied boolean.
Kind: global variable
Returns: Component
- A chechbox displaying the data.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.data | boolean |
The boolean data. |
Example (Display true)
<BooleanOutput data=true />
Component
IntegerOutput ⇒ Returns a readonly number input component displaying the integer.
Kind: global variable
Returns: Component
- A number input displaying the data.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.data | integer |
The integer data. |
Example (Display an integer)
<IntegerOutput data=true />
Component
FloatOutput ⇒ Returns a readonly number input component displaying the float.
Kind: global variable
Returns: Component
- A number input displaying the data.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.data | float |
The float data. |
Example (Display an float)
<FloatOutput data=true />
Component
Put ⇒ Component for displaying GraphQL data
Kind: global variable
Returns: Component
- A component displaying the data.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.type | GraphQLType |
The type of the data. |
[props.data] | Object |
The initial data. |
[props.onChange] | onChange |
The handler for changes in the data. |
[props.render] | render |
The custom GraphQL data renderer. |
Example (Display a string)
<Put type=GraphQLString data="abc" />
Example (Display an object)
<Put type= name: 'abc' fields: w: type: GraphQLString data= w: 'xyz' />
Example (Log object input to the console)
<Put type= name: 'abc' fields: w: type: GraphQLString data= w: '' onChange=consolelog/>
function
Put~onChange : This callback handles Put change events.
Kind: inner typedef of Put
Param | Type |
---|---|
value | Object |
function
Put~render : This function renders GraphQL data.
Kind: inner typedef of Put
Param | Type |
---|---|
type | GraphQLType |
data | * |
Component
ListOutput(props) ⇒ Returns a list surrounding the supplied list data.
Kind: global function
Returns: Component
- A list surrounding the list items.
Param | Type | Description |
---|---|---|
props | Object |
The component props. |
props.ofType | GraphQLOutputType |
The type of the list items. |
props.data | Array.<*> |
The list data. |
props.onChange | onChange |
The handler for change events. |
Example (Display a list of strings)
<ListOutput ofType=GraphQLString data='abc' 'd' 'xyz' />
Example (Display a list of list of integers)
<ListOutput ofType=GraphQLInt data=0 1 2 10 11 12 50 100/>
function
ListOutput~onChange : This callback handles ListOutput change events.
Kind: inner typedef of ListOutput
Param | Type |
---|---|
value | Array.<*> |
Maintainers
License
MIT © Pi Cubed