typed-ui

Generic UI for the GraphQL Schema Language.

Install

$ yarn add typed-ui

Docs

https://typed-ui.js.org

Usage

import React from 'react';
import { render } from 'react-dom';
import {
  GraphQLObjectType,
  GraphQLInputObjectType,
  GraphQLString,
  GraphQLList,
  GraphQLNonNull
} from 'graphql';
import { Put } from '../../src';

const Demo = () => (
  <Put
    type={
      new GraphQLObjectType({
        name: 'typed-ui Demo',
        fields: {
          A: {
            args: {
              X: {
                type: new GraphQLInputObjectType({
                  name: 'X',
                  fields: {
                    xs: { type: GraphQLList(GraphQLNonNull(GraphQLString)) }
                  }
                })
              }
            },
            type: new GraphQLObjectType({
              name: 'This is what A returned',
              fields: {
                B: { type: GraphQLList(GraphQLString) }
              }
            })
          }
        }
      })
    }
    data={{
      A: { output: { B: { output: ['hew'] } } }
    }}
    onChange={console.log}
  />
);

render(<Demo />, document.querySelector('#demo'));

API

Members

Functions

ListInput ⇒ Component

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={console.log} />

ListInput~onChange : function

This callback handles ListInput change events.

Kind: inner typedef of ListInput

| Param | Type | | ----- | ----------------------------- | | value | Array.<*> |

ObjectInput ⇒ Component

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={console.log}
/>

ObjectInput~onChange : function

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.

Kind: global variable

HigherOrderInput ⇒ React.Element

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. |

ListOutput ⇒ Element

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.' }}
/>

ListOutput~onChange : function

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.

Kind: global variable

HigherOrderOutput ⇒ React.Element

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. |

StringInput ⇒ Component

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={console.log} />

StringInput~onChange : function

This callback handles StringInput change events.

Kind: inner typedef of StringInput

| Param | Type | | ----- | ------------------- | | value | string |

IntegerInput ⇒ Component

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={console.log} />

IntegerInput~onChange : function

This callback handles IntegerInput change events.

Kind: inner typedef of IntegerInput

| Param | Type | | ----- | -------------------- | | value | integer |

FloatInput ⇒ Component

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={console.log} />

FloatInput~onChange : function

This callback handles FloatInput change events.

Kind: inner typedef of FloatInput

| Param | Type | | ----- | ------------------ | | value | float |

BooleanInput ⇒ Component

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={console.log} />

BooleanInput~onChange : function

This callback handles BooleanInput change events.

Kind: inner typedef of BooleanInput

| Param | Type | | ----- | -------------------- | | value | boolean |

EnumInput ⇒ Component

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={console.log} />

EnumInput~onChange : function

This callback handles EnumInput change events.

Kind: inner typedef of EnumInput

| Param | Type | | ----- | ------------------- | | value | string |

StringOutput ⇒ Component

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" />

EnumOutput ⇒ Component

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" />

BooleanOutput ⇒ Component

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} />

IntegerOutput ⇒ Component

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} />

FloatOutput ⇒ Component

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} />

Put ⇒ Component

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={
    new GraphQLObjectType({
      name: 'abc',
      fields: { w: { type: GraphQLString } }
    })
  }
  data={{ w: 'xyz' }}
/>

Example (Log object input to the console)

<Put
  type={
    new GraphQLInputObjectType({
      name: 'abc',
      fields: { w: { type: GraphQLString } }
    })
  }
  data={{ w: '' }}
  onChange={console.log}
/>

• Put ⇒ Component
  • ~onChange : function
  • ~render : function

Put~onChange : function

This callback handles Put change events.

Kind: inner typedef of Put

| Param | Type | | ----- | ------------------- | | value | Object |

Put~render : function

This function renders GraphQL data.

Kind: inner typedef of Put

| Param | Type | | ----- | ------------------------ | | type | GraphQLType | | data | * |

ListOutput(props) ⇒ Component

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={new GraphQLList(GraphQLInt)}
  data={[[0, 1, 2], [10, 11, 12], [50, 100]]}
/>

ListOutput~onChange : function

This callback handles ListOutput change events.

Kind: inner typedef of ListOutput

| Param | Type | | ----- | ----------------------------- | | value | Array.<*> |

Maintainers

• Dylan Richardson
• Craig Valenti
• Kyle Lawson

License

MIT © Pi Cubed