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
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 ifSchemaContext
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 ifSchemaContext
is provided. -
ignorePristineValues
- This flag allow you to optimize initial data, for example if you don't send mutation with data which has not changed
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'));