typed-ui v0.6.1

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.

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

ObjectInput ⇒ Component

Returns an object input component with change events handled by the given callback.

Kind: global variable
Returns: Component - An object input component.

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

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.

ListOutput ⇒ Element

Component for displaying GraphQLObjectType input and output data.

Kind: global variable
Returns: Element - A object surrounding the object items.

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

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.

StringInput ⇒ Component

Returns a text field with change events handled by the given callback.

Kind: global variable
Returns: Component - A text field component.

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

IntegerInput ⇒ Component

Returns an integer input component with change events handled by the given callback.

Kind: global variable
Returns: Component - An integer input component.

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

FloatInput ⇒ Component

Returns a float input component with change events handled by the given callback.

Kind: global variable
Returns: Component - A float input component.

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

BooleanInput ⇒ Component

Returns a boolean input component with change events handled by the given callback.

Kind: global variable
Returns: Component - A boolean input component.

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

EnumInput ⇒ Component

Returns a select component with change events handled by the given callback.

Kind: global variable
Returns: Component - A select component.

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

StringOutput ⇒ Component

Returns a div surrounding the supplied data.

Kind: global variable
Returns: Component - A div surrounding the 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.

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.

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.

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.

Example (Display an float)

<FloatOutput data={true} />

Put ⇒ Component

Component for displaying GraphQL data

Kind: global variable
Returns: Component - A component displaying the data.

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

Put~render : function

This function renders GraphQL data.

Kind: inner typedef of Put

ListOutput(props) ⇒ Component

Returns a list surrounding the supplied list data.

Kind: global function
Returns: Component - A list surrounding the list items.

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

Maintainers

• Dylan Richardson
• Craig Valenti
• Kyle Lawson

License

MIT © Pi Cubed