useForm - custom react hook for handling complex forms
npm install @ezderm/ez-formBasics
- 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 in prepareForServer 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 function withDependancy, instead we skip validator function if args have dependencyField and dependency value is different than in state or the state value is falsy
- if we pass dependencyInValidationArgs: true in val rule args, than compare dependencyValue with value passed as arg in validate function
Tests
* init.test
- init default value from schema (keep value in state)
- default isVisible flag in schema
- init values with second arg
- label and label2
- 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 on disabled prop in arg
- onChange cb for text input and selet
- onInputChange for select
* prepareForServer.test
* setSchemaStateValue.test
* getSchemaStateValue.test
* cloneStateValues.test
* npm publish --access public
Flow:
* check type of variable in file: flow type-at-pos /path/to/file.js 6 6
* useForm
* Parameters
* getSchemaStateValue
* Parameters
* setSchemaStateValue
* Parameters
* setSchemaStateValueBulk
* Parameters
* validate
* Parameters
* prepareForServer
* cloneStateValues
* addDynamicItem
* Parameters
* removeDynamicItem
* Parameters
* RenderFieldFunctionArgs
* Properties
* ComponentType
* IntlMessageDescriptor
* Properties
* IntlMessage
* Properties
* InputType
* FormElement
* Properties
* Label
* ErrorMessage
* ValidationRule
* Properties
* SelectValue
* MultiSelectValue
* SchemaValue
* MaskedInputEventTarget
* Properties
* MaskedInputSynteticEvent
* Properties
* StandardFieldMetadata
* Properties
* DynamicFieldMetadata
* Properties
* FieldMetadata
* Schema
* SetSchemaStateArgs
* Properties
* ValuesMap
* SetSchemaStateValueBulkArgs
* Properties
* StandardFieldState
* Properties
* DynamicFieldState
* Properties
* FieldState
* FormState
* InitValuesMap
* AddDynamicItemArgs
* Properties
* RemoveDynamicItemArgs
* Properties
useForm
* schema Schema
* schemaValues InitValuesMap?
getSchemaStateValue
* fieldName string
Returns SchemaValue
setSchemaStateValue
* $0 SetSchemaStateArgs
* $0.fullFieldName
* $0.newValue
* $0.skipValidation (optional, default false)
* $0.onComplete
Returns void
setSchemaStateValueBulk
* $0 SetSchemaStateValueBulkArgs
* $0.valuesMap
* $0.skipValidation (optional, default false)
* $0.onComplete
validate
* dependencyArgs {}? some additional arguments thet we want to pass to validation function
Returns boolean
prepareForServer - function that returns object with pairs fieldName: value
Returns ValuesMap
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
* $0 AddDynamicItemArgs
* $0.dynamicFieldName
* $0.initData
removeDynamicItem
* $0.dynamicFieldName
* $0.index
RenderFieldFunctionArgs
* useSecondLabel boolean?
* isVisible boolean?
* disabled boolean?
* value SchemaValue
Component from React
IntlMessageDescriptor
* id string
* defaultMessage string
* description string?
IntlMessage
* descriptor IntlMessageDescriptor
* values {}?
InputType
Type: ("TEXT_INPUT" | "MASKED_TEXT_INPUT" | "SELECT_INPUT" | "MULTISELECT" | "CHECKBOX" | "RADIOGROUP" | "TEXT_AREA")
FormElement
* type InputType
* Component ComponentType<{value: any, error: string, onChange: function (any): void}>
Label
Type: (string | IntlMessage)
ErrorMessage
Type: (string | IntlMessage)
ValidationRule
* fn function (value: string, message: ErrorMessage?, args: {}?, state: {}?): string
* message ErrorMessage?
* args {dependencyField: string?, dependencyValue: any?, dependencyInValidationArgs: boolean?}?
* validateAnotherField string?
SelectValue
Type: (string | {value: (string | number), label: string} | null)
MultiSelectValue
Type: (Array<string> | Array<{value: (string | number), label: string}>)
SchemaValue
Type: (string | number | boolean | Array<string> | SelectValue | void | {})
MaskedInputEventTarget
* rawValue string
MaskedInputSynteticEvent
* ` any target
* MaskedInputEventTarget
StandardFieldMetadata
* defaultValue SchemaValue formElement
* FormElement label
* Label? label2
* Label? validationRules
* Array<ValidationRule>? isVisible
* boolean?
DynamicFieldMetadata
* dynamicSchemaItem {}
FieldMetadata
Type: (StandardFieldMetadata | DynamicFieldMetadata)
Schema - object that serves as a map of field names and its data
SetSchemaStateArgs
* fullFieldName string newValue
* SchemaValue skipValidation
* boolean onComplete
* Function
ValuesMap - object that maps each fieldName with its (new) value
SetSchemaStateValueBulkArgs
* valuesMap ValuesMap skipValidation
* boolean onComplete
* Function
StandardFieldState
* value any error
* string validationRules
* Array<ValidationRule> isVisible
* boolean
DynamicFieldState
* isDynamic true value
* Array<{}>
FieldState
Type: (StandardFieldState | DynamicFieldState)
FormState
InitValuesMap
AddDynamicItemArgs
* dynamicFieldName string initData
* InitValuesMap
RemoveDynamicItemArgs