auto-views-with-ui-schema

AutoView

• Example
• ComponentsRepo
• UISchema
• Components API
  • AutoView
  • RepositoryProvider
  • Types

Example

import * as React from 'react';
import {
    AutoView,
    CoreSchemaMetaSchema,
    RepositoryProvider
} from './src'; // TODO
import {getRepoWithDefaults} from './test/utils/component-repo';

function App() {
    const components = getRepoWithDefaults('test');
    const schema: CoreSchemaMetaSchema = {
        type: 'object',
        properties: {
            firstName: {
                type: 'string'
            },
            lastName: {
                type: 'string'
            }
        }
    };

    const data = {
        firstName: 'Obi-Wan',
        lastName: 'Kenobi'
    };

    return (
        <RepositoryProvider components={components}>
            <AutoView schema={schema} data={value}/>
        </RepositoryProvider>
    );
}

ComponentsRepo

First of all you have to create set of component which you want to use to render different types of you json schema. This could be done with ComponentsRepo class:

import {ComponentsRepo} from './src';
import {Form} from './form';
import {Input} from './input';
import {MaterialInput} from './material-input';

const components = new ComponentsRepo();
components.register('string', {name: 'custom-string', component: Input}
components.register('string', {name: 'material-string', component: MaterialInput}
components.register('object', {name: 'custom-form', component: Form}

The signature of register is

register(type: SimpleTypes, record: {name: string, component: React.ComponentType<AutoViewProps>})

AutoView will use these components while rendering. Last registred component for specific type will be used for render that type (this could be overriten with uiSchema) Here is example of how components may looks like

Each component which is regstred should have the same API as AutoView component (AutoViewProps);

input.tsx

import {AutoViewProps, createChangeEventHandler} from './src';

export const input = (props: AutoViewProps) => {
    return (
        <input
            type="number"
            value={props.data}
            onChange={createChangeEventHandler(props, e => e.currentTarget.value)}
        />
    );
}

material-input.tsx

import TextField from 'material-ui/TextField';
import {AutoViewProps, createChangeEventHandler} from './src';

export const MaterialInput = (props: AutoViewProps) => {
    return (
        <TextField
            value={props.data}
            floatingLabelText={props.schema.title}
            onChange={createChangeEventHandler(props, e => e.currentTarget.value)}
        />
    );
}

form.tsx

import {AutoViewProps, renderObjectFields} from './src';

export const Form = (props: AutoViewProps) => {
    return (
        <form>
            {renderObjectFields(props)}
        </form>
    );
}

Next step is to pass components to RepositoryProvider

<RepositoryProvider components={components}>
    <AutoView schema={schema} data={value}/>
</RepositoryProvider>

NOTE: you should wrapp AutoView with RepositoryProvider on top level, otherwise AutoView will not be able to render.

UISchema

uiSchema allow to specify components for specific schema nodes.

Following code will register custom-string component for rendering /properties/lastName node. For others string nodes the default component will be used.

import {UISchema} from './src';

const uiSchema = new UISchema('test');
uiSchema.addOverride('/properties/lastName', {name: 'custom-string'});

Next you have to pass uiSchema into AutoView

    <RepositoryProvider components={components}>
        <AutoView
            schema={schema}
            data={value}
            uiSchema={uiSchema}
        />
    </RepositoryProvider>

Components API

AutoView

property	type	default	description
schema	CoreSchemaMetaSchema		json shcema
data	any?		data to represent
uiSchema	UISchema?		data to represent
validation	boolean?	true	enable of disable validation
onChange	AutoEventHandler?		callen whenever data modified / added / moved

RepositoryProvider

property	type	default	description
components	ComponentsRepo		repository with components
validator	Djv?	new Djv()	json schema validator

Types

SimpleTypes = 'string' | 'number' | 'integer' | 'boolean' | 'object' | 'array' | 'null'
AutoEventHandler = (e: {pointer: string, schemaPointer: string, patch?: Operations})