@8base-react/forms
v1.7.2
Published
8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.
Downloads
359
Readme
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.
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'));