packageDocumentation module import * as React from "react" ; import { Checkbox , Input , Select , SelectOption , Textarea } from "@itwin/itwinui-react" ; import { FieldDef , FormContext , FormContextState } from "./Form" ; public deprecated export interface FieldProps extends FieldDef { id : string ; } type FieldDefOptions = FieldDef [ "options" ] ; public deprecated export class Field extends React . Component < FieldProps > { constructor ( props ) { super ( props ) ; } private _generateSelectOptions = ( propOptions ) : SelectOption < string > [ ] => { let selectOptions = [ ] ; if ( propOptions instanceof Array ) { selectOptions = propOptions . map ( ( option ) => ( { value : option , label : option } ) ) ; } else if ( propOptions !== undefined ) { selectOptions = Object . keys ( propOptions ) . map ( ( key ) => ( { value : key , label : propOptions [ key ] } ) ) ; } return selectOptions ; } ; public override render ( ) { const selectOptions = this . _generateSelectOptions ( this . props . options ) ; return ( < FormContext . Consumer > { ( context ) => ( < div className = "core-form-group" > { this . props . editor ! . toLowerCase ( ) !== "checkbox" && this . props . label && < label className = "core-form-label" htmlFor = { this . props . id } > { this . props . label } < /label>} { this . props . editor ! . toLowerCase ( ) === "textbox" && ( < Input id = { this . props . id } value = { context ! . values [ this . props . id ] } onChange = { ( event ) => context ! . setValues ( { [ this . props . id ] : event . currentTarget . value } ) } className = "core-form-input" size = "small" / > ) } { this . props . editor ! . toLowerCase ( ) === "checkbox" && ( < Checkbox label = { this . props . label } id = { this . props . id } checked = { context ! . values [ this . props . id ] } onChange = { ( ) => context ! . setValues ( { [ this . props . id ] : ! context ! . values [ this . props . id ] } ) } />)} { this . props . editor ! . toLowerCase ( ) === "multilinetextbox" && ( < Textarea id = { this . props . id } value = { context ! . values [ this . props . id ] } onChange = { ( event ) => context ! . setValues ( { [ this . props . id ] : event . currentTarget . value } ) } className = "core-form-textarea" / > ) } { this . props . editor ! . toLowerCase ( ) === "dropdown" && this . props . options && ( < Select id = { this . props . id } value = { context ! . values [ this . props . id ] } onChange = { ( newValue ) => context ! . setValues ( { [ this . props . id ] : newValue } ) } options = { selectOptions } className = "core-form-select" size = "small" / > ) } < /div>)} < /FormContext.Consumer>); } }