leandrohsilveira / react-formctrl Goto Github PK
View Code? Open in Web Editor NEWA declarative form controller and validator for ReactJS
Home Page: https://leandrohsilveira.github.io/react-formctrl/
A declarative form controller and validator for ReactJS
Home Page: https://leandrohsilveira.github.io/react-formctrl/
The "Complete user form example" available in "https://leandrohsilveira.github.io/react-formctrl/#/users" have responsitivity problems:
Because of #30 task raised the dist/react-formctrl.min.js size from 26kb to 38kb.
But it's not a realiable size calculator, so:
After #3 task, add a continuous integration support
(70,21): Type '{ id: string; name: string; autoFocus: boolean | undefined; onChange: ((fieldCtrl?: FieldStateCon...' is not assignable to type 'IntrinsicAttributes & SelectProps & { children?: ReactNode; }'.
Type '{ id: string; name: string; autoFocus: boolean | undefined; onChange: ((fieldCtrl?: FieldStateCon...' is not assignable to type 'SelectProps'. Types of property 'onChange' are incompatible.
Type '((fieldCtrl?: FieldStateController | undefined) => void) | undefined' is not assignable to type '((event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void) | undefined'.
Type '(fieldCtrl?: FieldStateController | undefined) => void' is not assignable to type '((event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void) | undefined'.
Type '(fieldCtrl?: FieldStateController | undefined) => void' is not assignable to type '(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void'.
The Field component have missing declared properties on PropTypes definitions:
When the referenced match field changes, the confirmation field validation is not processed.
Create automated test for all components:
Currently is not possible to registar an custom field validator.
Proposal:
Specs:
The "ControlledFormProps" typescript interface definition is missing "setFieldValue" function.
When using "Field" component, allow provide an "onBlur" property to do extra "blur" control.
<Field
form="t"
name="a"
onChange={extraChangeControl}
onBlur={extraBlurControl)
onReset={extraResetControl}
>
<MyInputComponent />
</Field>
When using "controlledField" decorator, use the "onChange" and "onBlur" properties to the extra control.
let MyInputComponent = (props) => {
return (
<input
type={props.type}
value={props.value}
onChange={props.onChange} // this is the injected handler
onBlur={props.onBlur} // this is the injected handler
/>
)
}
MyInputComponent = controlledField()(MyInputComponent)
<MyInputComponent
form="t"
name="a"
onChange={extraChangeControl}
onBlur={extraBlurControl}
onReset={extraResetControl}
/>
Requirements
Refactor components business logic to redux like flow:
The Field component have missing properties on typescript definition FieldProps:
Reorganize the live demo navbar menu
Handle field initial value of Date type, and handle submits as Date type
The markdown tables are broking the page responsitivity.
The CustomEvent constructor is not supported by IE 11.
Instead of:
static dispatchRegisterValidators(validators) {
const payload = {detail: onRegisterValidators(validators)}
const event = new CustomEvent(PROVIDER_EVENT, payload)
document.dispatchEvent(event)
}
It should be:
static dispatchRegisterValidators(validators) {
const payload = onRegisterValidators(validators)
const event = FormEventDispatcher.createEvent(PROVIDER_EVENT, payload)
document.dispatchEvent(event)
}
static createEvent(type, payload) {
const customEvent = document.createEvent('CustomEvent')
customEvent.initCustomEvent(type, false, false, payload)
return customEvent
}
Controlling a field:
The controlledField()
decorator will wrap the InputText
component with the Field
component injecting all control properties into InputText
, now it has two required props: form
and name
:
import React from 'react';
import {controlledField} from 'react-formctrl';
let InputText = (props) => {
const { name, fieldCtrl, type, onChange, onBlur } = props;
return (
<input
name={name}
type={type}
onChange={onChange}
onBlur={onBlur}
/>
);
};
InputText = controlledField()(InputText);
export {InputText};
Controlling a form:
The controlledForm()
decorator will wrap the LoginForm
component with FormControl
component, injecting a formCtrl
property that can be used to access all form values and validation state, and the LoginForm
component has now a required form
property:
import React from 'react';
import {Form, controlledForm} from 'react-formctrl';
import {InputText} from './InputText';
let LoginForm = (props) => {
const {form, formCtrl, onSubmit} = props;
return (
<div>
<Form name={form} onSubmit={onSubmit}>
<div>
<InputText
form={form}
name="username"
required
/>
<InputText
form={form}
name="password"
type="password"
minLength={8}
required
/>
<button type="submit" disabled={formCtrl.invalid}>Login</button>
</div>
</Form>
</div>
);
};
LoginForm = controlledForm()(LoginForm);
export {LoginForm};
Form usage:
import React from 'react';
import {LoginForm} from './LoginForm';
function View() {
const handleSubmit = (values, formCtrl) => {
console.log('Login form submited.', values, formCtrl);
};
return (
<div className="view">
<LoginForm form="loginForm" onSubmit={handleSubmit} />
</div>
);
}
Add support to input file handling and file extension validation
Proposal:
Add an "onReset" property to "Form" component.
Create components PropTypes to improve development productivity and component properties validation.
It fails to compile.
/home/leandro/Documentos/dev/material-ui-next-test/node_modules/react-formctrl/lib/provider/provider.d.ts
(236,24): error TS2304: Cannot find name 'ValidatorSpec'.
Create a new function named "setFieldsValues" on FormController
Allow to add dynamic fields to represent a collection of objects.
The current field validation code is terrible.
Refactor to a better code design
Proposal:
Allow attach a callback function to form reset event on Form Controller.
Looks like the backdrop of the dropdown menu item is overriding the menu options.
The messages of validation errors provided are to simple, and have insuficient information about the error.
Currently:
errors is an array of strings.
New:
errors is an array of objects, that each one has an "key" attribute of type string and an optional "params" attibute of type object containing message parameters such like:
const errors = [
{key: 'email'},
{key: 'minLength', params: {minLength: 8}}
]
This is a breaking change!
Use react-markdown library to render de README.md of the repository on the index live demo page.
Library link: https://github.com/showdownjs/showdown
Add Typescript definitions to the Components.
Improve live demo layout by adding bootstrap.
The mobile menu of the live demo is not opening when the trigger button is clicked.
Is your feature request related to a problem? Please describe.
The React Form CTRL event bus increases a lot the final bundle size.
Describe the solution you'd like
The lib should use Context API instead to improve performance and bundle size.
When a string value is provided to Field component "validate" property, a error log is thrown:
warning.js:35 Warning: Failed prop type: Invalid prop `validate` of type `string` supplied to `Field`, expected an array.
in Field (created by CustomValidatorForm)
in CustomValidatorForm (created by CustomValidatorExample)
in FormControl (created by CustomValidatorExample)
in div (created by CustomValidatorExample)
in CustomValidatorExample (created by Routes)
in div (created by Case)
in div (created by Case)
in Case (created by Routes)
in Page (created by Route)
in Route (created by Route)
in Route (created by Routes)
in div (created by Routes)
in Routes (created by AppContent)
in div (created by AppLayout)
in div (created by AppLayout)
in AppLayout (created by AppContent)
in AppContent (created by Route)
in Route (created by App)
in Switch (created by App)
in Router (created by HashRouter)
in HashRouter (created by App)
in FormProvider (created by App)
in App
Increase test coverage to 85% at least
Min number value validator fails if min is zero
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.