packageDocumentation module import "./Form.scss" ; import * as React from "react" ; import { UiCore } from "../UiCore" ; import { Field } from "./Field" ; import { Button } from "@itwin/itwinui-react" ; public deprecated export type FieldEditor = "textbox" | "multilinetextbox" | "dropdown" | "checkbox" ; public deprecated export interface FieldDef { label ? : string ; editor ? : FieldEditor ; options ? : string [ ] | { [ key ] : string ; } ; value ? : any ; } public deprecated export interface FieldValues { [ key ] : any ; } public deprecated interface FormState { values : FieldValues ; errorMsg : string ; submitSuccess ? : boolean ; } public deprecate export interface FormContextState extends FormState { setValues : ( values : FieldValues ) => void ; } public deprecated export const FormContext = React . createContext < FormContextState | undefined > ( undefined ) ; FormContext . displayName = "core-react:FormContext" ; public export interface FieldDefinitions { [ key ] : FieldDef ; } public export interface FormProps { /** Required async callback the processes the Form data and throws and Error if the data cannot be processed.  */ handleFormSubmit : ( values : FieldValues ) => Promise < void > ; /** Definition used to create each Field in the Form. */ fields : FieldDefinitions ; /** Optional label which will override default Submit button label. */ submitButtonLabel ? : string ; } example public deprecate export class Form extends React . Component < FormProps , FormState > { private _submitButtonLabel = UiCore . translate ( "form.submitButtonLabel" ) ; private _errorPrefix = UiCore . translate ( "form.errorPrefix" ) ; private _errorSuffix = UiCore . translate ( "form.errorSuffix" ) ; constructor ( props ) { super ( props ) ; const values = { } ; Object . keys ( props . fields ) . forEach ( ( key ) => values [ key ] = props . fields [ key ] . value ) ; this . state = { errorMsg : "" , values } ; } param errorMsg private haveError ( errorMsg ) { return errorMsg && errorMsg . length ; } private _setValues = ( values ) => { this . setState ( ( prevState ) => ( { values : { ... prevState . values , ... values } } ) ) ; } ; private _handleSubmit = ( event , values ) => { event . preventDefault ( ) ; if ( ! this . props . handleFormSubmit || ! values || 0 === values . length ) throw new Error ( "A handleFormSubmit function and values must be defined" ) ; this . props . handleFormSubmit ( values ) . then ( ( ) => { } ) . catch ( ( reason ) => { this . setState ( { submitSuccess : false , errorMsg : reason . message } ) ; } ) ; } ; public override render ( ) { const { submitSuccess , errorMsg } = this . state ; const { fields , submitButtonLabel } = this . props ; const context = { ... this . state , setValues : this . _setValues } ; return ( < FormContext . Provider value = { context } > < div className = "core-form-wrapper" > < form onSubmit = { ( event ) => this . _handleSubmit ( event , this . state . values ) } noValidate = { true } > < div className = "core-form-container" > { Object . keys ( fields ) . map ( ( key ) => < Field key = { key } id = { key } { ... this . props . fields [ key ] } / > ) } < div className = "core-form-footer" > < div className = "core-form-buttons" > < Button type = "submit" styleType = "high-visibility" > { submitButtonLabel ? submitButtonLabel : this . _submitButtonLabel } < /Button> < /div> { submitSuccess === false && this . haveError ( errorMsg ) && ( < div className = "core-form-alert" role = "alert" > { `${ this . _errorPrefix }-${ errorMsg } ${ this . _errorSuffix }` } < /div>)} < /div> < /div> < /form> < /div> < /FormContext.Provider>); } }