@ezderm/ez-form NPM

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 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

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

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

Parameters

schema Schema
schemaValues InitValuesMap?

getSchemaStateValue

Parameters

fieldName string

Returns SchemaValue

setSchemaStateValue

Parameters

$0 SetSchemaStateArgs
- $0.fullFieldName
- $0.newValue
- $0.skipValidation (optional, default false)
- $0.onComplete

Returns void

setSchemaStateValueBulk

Parameters

$0 SetSchemaStateValueBulkArgs
- $0.valuesMap
- $0.skipValidation (optional, default false)
- $0.onComplete

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

Parameters

$0 AddDynamicItemArgs
- $0.dynamicFieldName
- $0.initData

removeDynamicItem

Parameters

$0 RemoveDynamicItemArgs
- $0.dynamicFieldName
- $0.index

RenderFieldFunctionArgs

Properties

useSecondLabel boolean?
isVisible boolean?
disabled boolean?
value SchemaValue

ComponentType

Component from React

IntlMessageDescriptor

Properties

id string
defaultMessage string
description string?

IntlMessage

Properties

descriptor IntlMessageDescriptor
values {}?

InputType

FormElement

Properties

type InputType
Component ComponentType<{value: any, error: string, onChange: function (any): void}>

Label

Type: (string | IntlMessage)

ErrorMessage

Type: (string | IntlMessage)

ValidationRule

Properties

fn function (value: string, message: ErrorMessage?, args: {}?, state: {}?): string
message ErrorMessage?
args {dependencyField: string?, dependencyValue: any?, dependencyInValidationArgs: boolean?}?
validateAnotherField string?