@ezderm/ez-form

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

Table of Contents

• 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

useForm

Parameters

• schema Schema
• schemaValues InitValuesMap?

getSchemaStateValue

getSchemaStateValue

Parameters

• fieldName string

Returns SchemaValue

setSchemaStateValue

setSchemaStateValue

Parameters

• $0 SetSchemaStateArgs

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

Returns void

setSchemaStateValueBulk

setSchemaStateValueBulk

Parameters

• $0 SetSchemaStateValueBulkArgs

  • $0.valuesMap
  • $0.skipValidation (optional, default false)
  • $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 AddDynamicItemArgs

  • $0.dynamicFieldName
  • $0.initData

removeDynamicItem

removeDynamicItem

Parameters

• $0 RemoveDynamicItemArgs

  • $0.dynamicFieldName
  • $0.index

RenderFieldFunctionArgs

RenderFieldFunctionArgs

Properties

• useSecondLabel boolean?
• isVisible boolean?
• disabled boolean?
• value SchemaValue

ComponentType

Component from React

IntlMessageDescriptor

IntlMessageDescriptor

Properties

• id string
• defaultMessage string
• description string?

IntlMessage

IntlMessage

Properties

• descriptor IntlMessageDescriptor
• values {}?

InputType

InputType

Type: ("TEXT_INPUT" | "MASKED_TEXT_INPUT" | "SELECT_INPUT" | "MULTISELECT" | "CHECKBOX" | "RADIOGROUP" | "TEXT_AREA")

FormElement

FormElement

Properties

• type InputType
• Component 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: {}?): string
• message 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> | Array<{value: (string | number), label: string}>)

SchemaValue

SchemaValue

Type: (string | number | boolean | Array<string> | SelectValue | void | {})

MaskedInputEventTarget

MaskedInputEventTarget

Properties

• rawValue string

MaskedInputSynteticEvent

MaskedInputSynteticEvent

Properties

• `` any
• target MaskedInputEventTarget

StandardFieldMetadata

StandardFieldMetadata

Properties

• defaultValue SchemaValue
• formElement FormElement
• label 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 string
• newValue SchemaValue
• skipValidation boolean
• onComplete Function

ValuesMap

ValuesMap - object that maps each fieldName with its (new) value

SetSchemaStateValueBulkArgs

SetSchemaStateValueBulkArgs

Properties

• valuesMap ValuesMap
• skipValidation boolean
• onComplete Function

StandardFieldState

StandardFieldState

Properties

• value any
• error string
• validationRules Array<ValidationRule>
• isVisible boolean

DynamicFieldState

DynamicFieldState

Properties

• isDynamic true
• value Array<{}>

FieldState

FieldState

Type: (StandardFieldState | DynamicFieldState)

FormState

FormState

InitValuesMap

InitValuesMap

AddDynamicItemArgs

AddDynamicItemArgs

Properties

• dynamicFieldName string
• initData InitValuesMap

RemoveDynamicItemArgs

RemoveDynamicItemArgs

Properties

• dynamicFieldName string
• index number