0.0.2 • Published 1 year ago
@delinternet/react-automate-form v0.0.2
@delinternet/react-automate-form
How to extend it
import ValidatorAdapter from './validator';
import controllers from './Components/Controllers';
import renderViews from './Components/RenderViews';
import FormManager, { container, CommonInputAdapter as adapter } from '@delinternet/react-automate-form';
// ================================
// EXTENDING THE FORM LIBRARY
// ================================
container.registerValidator(new ValidatorAdapter());
// Registering our custom Controllers views
for (const [key, RenderView] of Object.entries(renderViews)) {
container.registerViewRenders(key, RenderView);
}
// Registering our controllers | The library is agnostic to the components
for (const [key, Controller] of Object.entries(controllers)) {
container.registerController(key, adapter(Controller));
}
// Export our customized instance of the Library
export default FormManager;
How to use it
import FormManager from './form';
import { validationRulesBuilder } from '@joseaburt/json-driven-validator';
const controllersConfigs = [
{
type: 'text',
name: 'name',
label: 'Name',
placeholder: 'Name',
responsive: { xs: 12, sm: 6, md: 6, lg: 4 },
validationRules: validationRulesBuilder({
type: 'string',
constrains: [
{
method: 'email',
params: {
message: 'First Name is required',
},
},
],
}),
},
];
const defaultState = { name: '--' };
const formManager = new FormManager({ formIndex: 'example', defaultState });
const controllers = formManager.initControllers(controllersConfigs);
class AppFormListener {
onErrors({ errors, manager }) {}
onStateChange({ value, previous, manager }) {}
onNameStateChange({ value, previous, manager }) {}
onNameError({ givenValue, isValid, reason, manager }) {}
}
formManager.setControllersHandlers(new AppFormListener());
export default function App() {
return <div>{controllers}</div>;
}