rhythnic / react-form-wrapper Goto Github PK
View Code? Open in Web Editor NEWCompose controlled forms in React.
License: MIT License
Compose controlled forms in React.
License: MIT License
NOTE: TEMPORARY, UNTIL VALIDATION API IMPLEMENTED
enable FormWrapper to accept a disableSubmit function, that runs on every update, receives the form values, and returns a boolean.
Provide documentation for basic functionality and intended validation API.
Setting the default value of the value prop to an empty object caused some nested forms to have a value when they should not have one. Removing the default prop causes errors when setting the state-contained value on the parent form. So now, when creating the Immutable object to contain the form values, in the parent state, we need to ensure that props.value has value, and use an empty object if it does not.
Refactor to minimize the creation of objects.
null does not cause a parameter to use the default value, only undefined does. anticipate receiving the null object and handle by not setting state and not throwing an error.
in src/index.js
Add a function 'at' to the object returned by getField. The 'at' function takes a string to append to the name used in getField, and returns the results of calling getField on that appended name.
Add a checkbox method to the result of calling 'getField' on an array field. Checkbox accepts a string and returns a copy of the original getField properties, with the value set to the string and the checked property set according to whether or not the array contains the string.
Improve package structure, and generated folders for publication, including "es" and "umd".
Refactor some functions
Attempt to incorporate more input types into the examples
Do you have any plans for validation implementation?
Would you be willing to share your plans for implementing the validation and accept PRs? :)
The plan for now is that validation is declared using an array of validation config objects.
const validation = [
{
// name scopes validation object
name: 'one[].two',
// event that triggers validation function
run: [ 'blur' ],
// event that clears validation errors,
clear: [ 'change' ],
// if name not used, event that clears error, scoped to the active field
clearSelf: [ 'focus' ],
// function to run
validate(formValue, fieldName, fieldValue) {
}
}
]
Return options from validate function
The validation config array is passed as an option when wrapping component
export default FormWrapper({ validation })(MyComponent);
A validation config object can also be passed as an option in the 'field' function. In this case, scoping the config object with a name is not necessary.
const validation = {
run: [ 'blur' ],
clear: [ 'change' ],
validate(formValue, fieldName, fieldValue) {
return !fieldValue ? "Required" : null;
}
}
...
<input { ...field('myField', null, { validation } ) placeholder="My Field" />
Deprecate getName, getValue, getField. Use only 'field' API.
Include small example in main README file.
If 'getField' accepted a props object, it could set those properties on the field and add additional properties based on the type of field. For instance, { type: 'checkbox' } would enable getField to set the value and checked props on the input.
Update tests for refactored code
Write unit tests for existing functions
Allow users to import the 'update' function, in order to easily update an Immutable.js object with the JSON patch object.
Add mocha, expect assertion library.
React throwing warning, indicating that uncontrolled input is being switched to controlled.
Array fields whose values are undefined default to List, but null values remain null. Also default null array values to List.
Don't use the presence of props.onReset to determine whether or not to reset state.value.
If state.value, reset value.
If props.onReset, forward reset event.
All fields are cached by childname, so if the form wrapper's name prop changes, any fields accessed by the childname will be wrong. Either cache by fullname only or clear the cache when the name prop updates.
Occurring because pushed objects or arrays are converted with Map and List. Will use fromJS instead.
As of React 15.1.0, a warning is displayed if the props object is not a plain JS object. The result of calling 'field' has a constructor and a prototype.
don't pass boolean as the value prop to a checkbox field.
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.