@bradtech/form
React form generator originally used in Brad Technology web applications.
Getting started
npm i @bradtech/formOR
yarn add @bradtech/formBuilding a basic form
index.tsx
import React from 'react'
import { FormComponent } from '@bradtech/form'
import userForm from './user-form'
export default class App extends React.Component<any, any> {
constructor(props: MyProps) {
super(props)
this.state = {}
}
render() {
return (
<>
<FormComponent form={userForm} {...this.props} />
</>
)
}
}user-form.js
import { FormComponent } from '@bradtech/form'
export default {
fields: {
email: {
type: FormComponent.EMAIL,
label: 'fields.email',
mandatory: true,
searchable: true,
options: {
autoComplete: 'email',
},
},
password: {
label: 'password.title',
type: FormComponent.PASSWORD,
mandatory: FormComponent.MODE_CREATE,
options: {
minLength: 6,
},
},
name: {
type: FormComponent.GROUP,
fields: {
lastname: {
label: 'fields.lastname',
mandatory: true,
searchable: true,
options: {
autoComplete: 'family-name',
},
},
firstname: {
label: 'fields.firstname',
mandatory: true,
searchable: true,
options: {
autoComplete: 'given-name',
},
},
},
},
},
buttons: {
submit: true,
delete: true,
cancel: true,
extras: [],
},
actions: {
create: data => console.log(data),
read: uid => console.log(`users/${uid}`),
update: ({ uid, ...data }) => console.log(uid, data),
delete: ({ uid }) => console.log(`users/${uid}`),
},
extras: [],
}Result
Using the search component
index.tsx
import React from 'react'
import { SearchComponent } from '@bradtech/form'
import userSearch from './user-search'
export default class App extends React.Component {
constructor(props: any) {
super(props)
this.state = {}
}
render() {
const { tableType } = this.state
return <SearchComponent form={userSearch} {...this.props} />
}
}user-search.js
import { FormComponent } from '@bradtech/form'
import Api from '../../Api'
import { SearchComponent } from '../../Form'
export default {
mode: FormComponent.MODE_SEARCH,
fields: {
search: {
type: FormComponent.GROUP,
fields: {
keywords: {
label: 'fields.lastname_firstname_email',
search: {
mode: SearchComponent.BEGINS_WITH,
},
options: {
autoComplete: 'off',
},
},
},
},
},
buttons: {
submit: {
label: 'fields.search',
icon: 'search',
},
cancel: {
label: 'fields.reset',
icon: 'undo',
},
extras: [],
},
actions: {},
extras: [],
}Search component result
