@8base/forms

8base Forms

8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.

API

Table of Contents

• Field
  • Properties
• FieldArray
• Fieldset
  • Properties
• Form
  • Properties

Field

Extends React.Component

Field wrapper based on Field from the react-final-form. This component accepts FieldProps and other props for easy implementation with the 8base API.

Properties

• fieldSchema FieldSchema? The 8base API field schema.
• name string? The name of field, based on the 8base API table schema.

FieldArray

Extends React.Component

FieldArray wrapper based on FieldArray from the react-final-form-arrays. It accepts FieldArrayProps as a prop.

Fieldset

Extends React.Component

Fieldset passes relation table schema to the children fields.

Properties

• tableSchema TableSchema? The 8base API table schema.
• tableSchemaName string? The name of the 8base API table schema. This prop only works if SchemaContext is provided.

Form

Extends React.Component

Form wrapper based on Form from the react-final-form. This component accepts FormProps and other props for easy implementation with the 8base API.

Properties

• tableSchema TableSchema? The 8base API table schema.
• tableSchemaName string? The name of the 8base API table schema. This prop only works if SchemaContext is provided.

Examples

Basic Form

import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';

const TABLE_SCHEMA = {
  name: 'client',
  displayName: 'Client',
  isSystem: false,
  fields: [{
    name: 'firstName',
    displayName: 'First Name',
    description: null,
    fieldType: 'TEXT',
    fieldTypeAttributes: {
      format: 'UNFORMATTED',
      fieldSize: 100,
    },
    isList: false,
    isRequired: true,
    isUnique: false,
    defaultValue: 'Vladimir',
    relation: null,
  }, {
    name: 'lastName',
    displayName: 'Last Name',
    description: null,
    fieldType: 'TEXT',
    fieldTypeAttributes: {
      format: 'UNFORMATTED',
      fieldSize: 100,
    },
    isList: false,
    isRequired: true,
    isUnique: false,
    defaultValue: 'Putin',
    relation: null,
  }, {
    name: 'age',
    displayName: 'Age',
    description: null,
    fieldType: 'NUMBER',
    fieldTypeAttributes: {
      format: 'UNFORMATTED',
      fieldSize: 100,
    },
    isList: false,
    isRequired: true,
    isUnique: false,
    defaultValue: null,
    relation: null,
  }],
};

render(
  <Form type="CREATE" onSubmit={onSubmit}>
    {
      ({ handleSubmit }) => (
        <form onSubmit={ handleSubmit }>
          <Field name="firstName" component="input" />
          <Field name="lastName" component="input" />
          <Field name="age" component="input" />
          <button type="submit">Create Client</button>
        </form>
      )
    }
  </Form>
, document.getElementById('root'));

Form with FieldArray

import React from 'react';
import { render } from 'react-dom';
import { Form, Field, FieldArray } from '@8base/forms';

const TABLE_SCHEMA = {
  name: 'client',
  displayName: 'Client',
  isSystem: false,
  fields: [{
    name: 'firstName',
    displayName: 'First Name',
    description: null,
    fieldType: 'TEXT',
    fieldTypeAttributes: {
      format: 'UNFORMATTED',
      fieldSize: 100,
    },
    isList: false,
    isRequired: true,
    isUnique: false,
    defaultValue: 'Vladimir',
    relation: null,
  }, {
    name: 'lastName',
    displayName: 'Last Name',
    description: null,
    fieldType: 'TEXT',
    fieldTypeAttributes: {
      format: 'UNFORMATTED',
      fieldSize: 100,
    },
    isList: false,
    isRequired: true,
    isUnique: false,
    defaultValue: 'Putin',
    relation: null,
  }, {
    name: 'age',
    displayName: 'Age',
    description: null,
    fieldType: 'NUMBER',
    fieldTypeAttributes: {
      format: 'UNFORMATTED',
      fieldSize: 100,
    },
    isList: false,
    isRequired: true,
    isUnique: false,
    defaultValue: null,
    relation: null,
  }, {
    name: 'fieldArray',
    displayName: 'FieldArray',
    description: null,
    fieldType: 'TEXT',
    fieldTypeAttributes: {
      format: 'UNFORMATTED',
      fieldSize: 100,
    },
    isList: true,
    isRequired: true,
    isUnique: false,
    defaultValue: null,
    relation: null,
  }],
};

render(
  <Form type="CREATE" onSubmit={onSubmit}>
    {
      ({ handleSubmit }) => (
        <form onSubmit={ handleSubmit }>
          <Field name="firstName" component="input" />
          <Field name="lastName" component="input" />
          <Field name="age" component="input" />
          <FieldArray name="fieldArray">
            {
              React.Children.toArray(({ fields }) => (
                <React.Fragment>
                  {
                    fields.map((name, index) => (
                      <React.Fragment>
                        <Field key={ name } name={ name } component="input" />
                        <button onClick={ () => fields.remove(index) }>Remove</button>
                      </React.Fragment>
                    ))
                  }
                  <button onClick={ () => fields.push('New Field Array Item') }>Add</button>
                </React.Fragment>
              ))
            }
          </FieldArray>
          <button type="submit">Create Client</button>
        </form>
      )
    }
  </Form>
, document.getElementById('root'));

Multiple Forms with TableSchemaProvider

import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';
import { TableSchemaProvider } from '@8base/table-schema-provider';

const SCHEMA = [{
  name: 'client',
  displayName: 'Client',
  isSystem: false,
  fields: [{
    name: 'firstName',
    displayName: 'First Name',
    description: null,
    fieldType: 'TEXT',
    fieldTypeAttributes: {
      format: 'UNFORMATTED',
      fieldSize: 100,
    },
    isList: false,
    isRequired: true,
    isUnique: false,
    defaultValue: 'Vladimir',
    relation: null,
  }, {
    name: 'lastName',
    displayName: 'Last Name',
    description: null,
    fieldType: 'TEXT',
    fieldTypeAttributes: {
      format: 'UNFORMATTED',
      fieldSize: 100,
    },
    isList: false,
    isRequired: true,
    isUnique: false,
    defaultValue: 'Putin',
    relation: null,
  }, {
    name: 'age',
    displayName: 'Age',
    description: null,
    fieldType: 'NUMBER',
    fieldTypeAttributes: {
      format: 'UNFORMATTED',
      fieldSize: 100,
    },
    isList: false,
    isRequired: true,
    isUnique: false,
    defaultValue: null,
    relation: null,
  }],
}, {
  name: 'order',
  displayName: 'Order',
  isSystem: false,
  fields: [{
    name: 'name',
    displayName: 'name',
    description: null,
    fieldType: 'TEXT',
    fieldTypeAttributes: {
      format: 'UNFORMATTED',
      fieldSize: 100,
    },
    isList: false,
    isRequired: true,
    isUnique: false,
    defaultValue: null,
    relation: null,
  }, {
    name: 'deliveryDate',
    displayName: 'Delivery Date',
    description: null,
    fieldType: 'DATE',
    fieldTypeAttributes: {
      format: 'DATE',
      fieldSize: 100,
    },
    isList: false,
    isRequired: true,
    isUnique: false,
    defaultValue: null,
    relation: null,
  }],
}];

render(
  <TableSchemaProvider schema={SCHEMA}>
    <Form type="CREATE" tableSchemaName="client" onSubmit={ onSubmitClient }>
      {
        ({ handleSubmit }) => (
          <form onSubmit={ handleSubmit }>
            <Field name="firstName" component="input" />
            <Field name="lastName" component="input" />
            <Field name="age" component="input" />
            <button type="submit">Create Client</button>
          </form>
        )
      }
    </Form>
    <Form type="CREATE" tableSchemaName="order" onSubmit={onSubmitOrder}>
      {
        ({ handleSubmit }) => (
          <form onSubmit={ handleSubmit }>
            <Field name="name" component="input" />
            <Field name="deliveryDate" component="input" />
            <button type="submit">Create Order</button>
          </form>
        )
      }
    </Form>
  </TableSchemaProvider>
, document.getElementById('root'));

Complex form

import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';
import { TableSchemaProvider } from '@8base/table-schema-provider';

const SCHEMA = [{
  id: 'TABLE_SCHEMA_ID',
  name: 'tableSchema',
  displayName: 'Table Schema',
  isSystem: false,
  fields: [
    {
      name: 'scalar',
      displayName: 'Scalar',
      description: null,
      fieldType: 'TEXT',
      fieldTypeAttributes: {
        format: 'UNFORMATTED',
        fieldSize: 100,
      },
      isList: false,
      isRequired: false,
      isUnique: false,
      defaultValue: 'Scalar Default Value',
      relation: null,
    },
    {
      name: 'scalarList',
      displayName: 'Scalar List',
      description: null,
      fieldType: 'TEXT',
      fieldTypeAttributes: {
        format: 'UNFORMATTED',
        fieldSize: 100,
      },
      isList: true,
      isRequired: false,
      isUnique: false,
      defaultValue: 'Scalar List Default Value 1',
      relation: null,
    },
    {
      name: 'relation',
      displayName: 'Relation',
      description: null,
      fieldType: 'RELATION',
      fieldTypeAttributes: null,
      isList: false,
      isRequired: false,
      isUnique: null,
      defaultValue: null,
      relation: {
        id: 'RELATION_FIELD_ID_1',
        relationTableName: 'RELATION_TABLE_NAME_1',
        relationFieldName: 'aid',
        refTable: {
          id: 'RELATION_TABLE_SCHEMA_ID',
        },
        refFieldIsList: false,
        refFieldIsRequired: true,
      },
    },
    {
      name: 'relationList',
      displayName: 'RelationList',
      description: null,
      fieldType: 'RELATION',
      fieldTypeAttributes: null,
      isList: true,
      isRequired: false,
      isUnique: null,
      defaultValue: null,
      relation: {
        id: 'RELATION_FIELD_ID_2',
        relationTableName: 'RELATION_TABLE_NAME_2',
        relationFieldName: 'aid',
        refTable: {
          id: 'RELATION_TABLE_SCHEMA_ID',
        },
        refFieldIsList: false,
        refFieldIsRequired: true,
      },
    },
  ],
}, {
  id: 'RELATION_TABLE_SCHEMA_ID',
  name: 'relationTableSchema',
  displayName: 'Relation Table Schema',
  isSystem: false,
  fields: [
    {
      name: 'scalar',
      displayName: 'Scalar',
      description: null,
      fieldType: 'TEXT',
      fieldTypeAttributes: {
        format: 'UNFORMATTED',
        fieldSize: 100,
      },
      isList: false,
      isRequired: false,
      isUnique: false,
      defaultValue: 'Scalar Default Value',
      relation: null,
    },
    {
      name: 'scalarList',
      displayName: 'Scalar List',
      description: null,
      fieldType: 'TEXT',
      fieldTypeAttributes: {
        format: 'UNFORMATTED',
        fieldSize: 100,
      },
      isList: true,
      isRequired: false,
      isUnique: false,
      defaultValue: 'Scalar List Default Value 1',
      relation: null,
    },
    {
      name: 'relation',
      displayName: 'Relation',
      description: null,
      fieldType: 'RELATION',
      fieldTypeAttributes: null,
      isList: false,
      isRequired: false,
      isUnique: null,
      defaultValue: null,
      relation: {
        id: 'RELATION_FIELD_ID_3',
        relationTableName: 'RELATION_TABLE_NAME_1',
        relationFieldName: 'aid',
        refTable: {
          id: 'TABLE_SCHEMA_ID',
        },
        refFieldIsList: false,
        refFieldIsRequired: true,
      },
    },
    {
      name: 'relationList',
      displayName: 'RelationList',
      description: null,
      fieldType: 'RELATION',
      fieldTypeAttributes: null,
      isList: true,
      isRequired: false,
      isUnique: null,
      defaultValue: null,
      relation: {
        id: 'RELATION_FIELD_ID_4',
        relationTableName: 'RELATION_TABLE_NAME_2',
        relationFieldName: 'aid',
        refTable: {
          id: 'TABLE_SCHEMA_ID',
        },
        refFieldIsList: false,
        refFieldIsRequired: true,
      },
    },
  ],
}];

const INITIAL_VALUES = {
  scalar: 'Scalar Value',
  scalarList: [
    'Scalar List Value',
  ],
  relation: {
    scalar: 'Relation Scalar Value',
  },
  relationList: [{
    scalar: 'Relation List Scalar Value',
  }],
};

render(
  <TableSchemaProvider value={ SCHEMA }>
    <Form type="CREATE" tableSchemaName="tableSchema" initialValues={ INITIAL_VALUES } onSubmit={ onSubmitForm }>
      {
        ({ handleSubmit }) => (
          <form onSubmit={ handleSubmit }>
            <Field name="scalar" component="input" />
            <FieldArray name="scalarList">
              {
                ({ fields }) => (
                  fields.map((name) => (
                    <Field key={ name } name={ name } component="input" />
                  ))
                )
              }
            </FieldArray>
            <Fieldset tableSchemaName="relationTableSchema">
              <Field name="relation.scalar" component="input" />
            </Fieldset>
            <FieldArray name="relationList">
              {
                ({ fields }) => (
                  fields.map((name) => (
                    <Fieldset key={ name } tableSchemaName="relationTableSchema">
                      <Field name={ `${name}.scalar` } component="input" />
                    </Fieldset>
                  ))
                )
              }
            </FieldArray>
          </form>
        )
      }
    </Form>
  </TableSchemaProvider>
, document.getElementById('root'));