Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@8base/forms

Package Overview
Dependencies
14
Maintainers
3
Versions
189
Issues
File Explorer

Advanced tools

@8base/forms

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

    0.37.2latest

Version published
Maintainers
3
Yearly downloads
13,458
increased by119.4%

Weekly downloads

Readme

Source

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
  • FieldArray
  • Fieldset
  • Form

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'));
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc