@ezderm/ez-form v1.26.0
Basics
- Keep input value and error in state
- Handle
onChange
event on input to update state (validation is performed here) - "externalized"
formElement
(formElements file) defaultValue
*label
,label2
Additional requirements
- Trigger an action on input change (get some data, update another field, …)
- Validate another field (
validateAnotherField
) on input change (i.e. password confirmation - when password is changed, confirmation should be validated again) withDependancy
validation- Update another field(s) on change (i.e country-state selects or clinics-primary clinic, address same as patient's)
- multiselect
onValueClick
isVisible
(invisible items don't pass through validation nor are included inprepareForServer
result) (probably will be a part of schema)disabled
field- pass
additionalProps
specific to underling element (i.e. options for select, optionRenderer, labelIcon, etc.) * dynamic sub-foms - be able to dynamically extend schema (i.e add contact method (1 field), add address info(group of fields))
Form utils
- init form from schema with initial data
- prepare form data for server (withAdditionalProps option for selects)
- clone form data to be able to revert form to some previous state
- update form state -
setSchemaStateValue
,setSchemaStateValues
(Bulk
) *validate
function
Differences with original schema:
withDependancy
validation: no wraper functionwithDependancy
, instead we skip validator function if args havedependencyField
and dependency value is different than in state or the state value is falsyif we pass
dependencyInValidationArgs
: true in val rule args, than comparedependencyValue
with value passed as arg in validate functionTests
- init.test
- init default value from schema (keep value in state)
- default isVisible flag in schema
- init values with second arg
-
label
andlabel2
- select init with obj/string that is/is't in options - multi select ([] with obj/string that is/is't in options) - update.test - update field value in state onChange
- validation.test
- validate value on
inputChage
- support string and intl error messages (message is handled in formElemet) - support default and custom error messages - args property for validation func (based on another schema field or fixed arg) - validate another field - prevent cyclically validation with validate another field (validate another field only on field change) - with dependancy validation render.test - render componet based on
isVisible
prop in arg - disable component based ondisabled
prop in arg -onChange
cb for text input and selet -onInputChange
for selectprepareForServer.test
- setSchemaStateValue.test
- getSchemaStateValue.test
- cloneStateValues.test
- init.test
- init default value from schema (keep value in state)
- default isVisible flag in schema
- init values with second arg
-
* npm publish --access public
Publish
1) commit all work with clean Flow and Eslint warning output 2) make sure that all tests are passing 3) increment version in package.json 4) run "npm publish --access public"
Flow:
- check type of variable in file: flow type-at-pos /path/to/file.js 6 6
API
Table of Contents
- useForm
- getSchemaStateValue
- setSchemaStateValue
- setSchemaStateValueBulk
- validate
- prepareForServer
- cloneStateValues
- addDynamicItem
- removeDynamicItem
- RenderFieldFunctionArgs
- ComponentType
- IntlMessageDescriptor
- IntlMessage
- InputType
- FormElement
- Label
- ErrorMessage
- ValidationRule
- SelectValue
- MultiSelectValue
- SchemaValue
- MaskedInputEventTarget
- MaskedInputSynteticEvent
- StandardFieldMetadata
- DynamicFieldMetadata
- FieldMetadata
- Schema
- SetSchemaStateArgs
- ValuesMap
- SetSchemaStateValueBulkArgs
- StandardFieldState
- DynamicFieldState
- FieldState
- FormState
- InitValuesMap
- AddDynamicItemArgs
- RemoveDynamicItemArgs
useForm
useForm
Parameters
schema
SchemaschemaValues
InitValuesMap?
getSchemaStateValue
getSchemaStateValue
Parameters
fieldName
string
Returns SchemaValue
setSchemaStateValue
setSchemaStateValue
Parameters
$0.fullFieldName
$0.newValue
$0.skipValidation
(optional, defaultfalse
)$0.onComplete
Returns void
setSchemaStateValueBulk
setSchemaStateValueBulk
Parameters
$0
SetSchemaStateValueBulkArgs$0.valuesMap
$0.skipValidation
(optional, defaultfalse
)$0.onComplete
validate
validate
Parameters
dependencyArgs
{}? some additional arguments thet we want to pass to validation function
Returns boolean
prepareForServer
prepareForServer - function that returns object with pairs fieldName: value
Returns ValuesMap
cloneStateValues
cloneStateValues - very similar to prepareForServer. The only difference is that it doesn't transform values at all, i.e. select/multiselect, trimming, etc
Returns {}
addDynamicItem
addDynamicItem
Parameters
$0.dynamicFieldName
$0.initData
removeDynamicItem
removeDynamicItem
Parameters
$0.dynamicFieldName
$0.index
RenderFieldFunctionArgs
RenderFieldFunctionArgs
Properties
useSecondLabel
boolean?isVisible
boolean?disabled
boolean?value
SchemaValue
ComponentType
Component from React
IntlMessageDescriptor
IntlMessageDescriptor
Properties
IntlMessage
IntlMessage
Properties
descriptor
IntlMessageDescriptorvalues
{}?
InputType
InputType
Type: ("TEXT_INPUT"
| "MASKED_TEXT_INPUT"
| "SELECT_INPUT"
| "MULTISELECT"
| "CHECKBOX"
| "RADIOGROUP"
| "TEXT_AREA"
)
FormElement
FormElement
Properties
type
InputTypeComponent
ComponentType<{value: any, error: string, onChange: function (any): void}>
Label
Label
Type: (string | IntlMessage)
ErrorMessage
ErrorMessage
Type: (string | IntlMessage)
ValidationRule
ValidationRule
Properties
fn
function (value: string, message: ErrorMessage?, args: {}?, state: {}?): stringmessage
ErrorMessage?args
{dependencyField: string?, dependencyValue: any?, dependencyInValidationArgs: boolean?}?validateAnotherField
string?
SelectValue
SelectValue
Type: (string | {value: (string | number), label: string} | null)
MultiSelectValue
MultiSelectValue
Type: (Array[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Array<{value: (string | number), label: string}>)
SchemaValue
SchemaValue
Type: (string | number | boolean | Array[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | SelectValue | void | {})
MaskedInputEventTarget
MaskedInputEventTarget
Properties
rawValue
string
MaskedInputSynteticEvent
MaskedInputSynteticEvent
Properties
any
target
MaskedInputEventTarget
StandardFieldMetadata
StandardFieldMetadata
Properties
defaultValue
SchemaValueformElement
FormElementlabel
Label?label2
Label?validationRules
Array<ValidationRule>?isVisible
boolean?
DynamicFieldMetadata
DynamicFieldMetadata
Properties
dynamicSchemaItem
{}
FieldMetadata
FieldMetadata
Type: (StandardFieldMetadata | DynamicFieldMetadata)
Schema
Schema - object that serves as a map of field names and its data
SetSchemaStateArgs
SetSchemaStateArgs
Properties
fullFieldName
stringnewValue
SchemaValueskipValidation
booleanonComplete
Function
ValuesMap
ValuesMap - object that maps each fieldName with its (new) value
SetSchemaStateValueBulkArgs
SetSchemaStateValueBulkArgs
Properties
StandardFieldState
StandardFieldState
Properties
value
anyerror
stringvalidationRules
Array<ValidationRule>isVisible
boolean
DynamicFieldState
DynamicFieldState
Properties
isDynamic
true
value
Array<{}>
FieldState
FieldState
Type: (StandardFieldState | DynamicFieldState)
FormState
FormState
InitValuesMap
InitValuesMap
AddDynamicItemArgs
AddDynamicItemArgs
Properties
dynamicFieldName
stringinitData
InitValuesMap
RemoveDynamicItemArgs
RemoveDynamicItemArgs
Properties
5 months ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago