typed-ui

0.6.1 • Public • Published

typed-ui

Build Status npm Package Coveralls Known Vulnerabilities License Contributors npm Downloads Commitizen Friendly Github Stars

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

ListInputComponent

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

ObjectInputComponent

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.

HigherOrderInputReact.Element

Component for displaying GraphQL input types of higher order.

ListOutputElement

Component for displaying GraphQLObjectType input and output data.

NonNullOutput

TODO A component for non null inputs. Bases component selection on name of type.

HigherOrderOutputReact.Element

Component for displaying GraphQL output types of higher order.

StringInputComponent

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

IntegerInputComponent

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

FloatInputComponent

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

BooleanInputComponent

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

EnumInputComponent

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

StringOutputComponent

Returns a div surrounding the supplied data.

EnumOutputComponent

Returns a readonly component displaying the supplied data.

BooleanOutputComponent

Returns a readonly checkbox displaying the value of the supplied boolean.

IntegerOutputComponent

Returns a readonly number input component displaying the integer.

FloatOutputComponent

Returns a readonly number input component displaying the float.

PutComponent

Component for displaying GraphQL data

Functions

ListOutput(props)Component

Returns a list surrounding the supplied list data.

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

License

MIT © Pi Cubed

Package Sidebar

Install

npm i typed-ui

Weekly Downloads

3

Version

0.6.1

License

MIT

Unpacked Size

3.12 MB

Total Files

24

Last publish

Collaborators

  • crazycreje
  • drich14