import "./InlineEdit.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { SpecialKey } from "@itwin/appui-abstract" ; import { CommonProps } from "@itwin/core-react" ; import { Input } from "@itwin/itwinui-react" ; interface InlineEditProps extends CommonProps { defaultValue : string ; onChange ? : ( value : string ) => void ; } interface InlineEditState { value : string ; originalValue : string ; } internal export class InlineEdit extends React . Component < InlineEditProps , InlineEditState > { private _inputRef = React . createRef < HTMLInputElement > ( ) ; constructor ( props ) { super ( props ) ; this . state = { value : this . props . defaultValue , originalValue : this . props . defaultValue } ; } internal public override componentDidUpdate ( prevProps , _prevState ) { if ( prevProps . defaultValue !== this . props . defaultValue ) { this . setState ( ( _ , props ) => { return { value : props . defaultValue , originalValue : props . defaultValue } ; } ) ; } } private _onBlur = ( event ) => { this . _sendChange ( event . target . value ) ; } ; private _onFocus = ( event ) => { event . target . select ( ) ; } ; private _onKeyDown = ( event ) => { switch ( event . key ) { case SpecialKey . Escape : this . setState ( ( prevState ) => ( { value : prevState . originalValue } ) , ( ) => this . _inputRef . current ! . select ( ) ) ; break ; case SpecialKey . Enter : this . _sendChange ( this . state . value ) ; break ; } } ; private _onChange = ( event ) => { this . setState ( { value : event . target . value } ) ; } ; private _sendChange ( value ) { if ( this . props . onChange ) this . props . onChange ( value ) ; } public override render ( ) { return ( < Input data - testid = "timeline-duration-edit-input" className = { classnames ( "inline-edit-input" , this . props . className ) } style = { this . props . style } ref = { this . _inputRef } type = "text" value = { this . state . value } size = "small" onFocus = { this . _onFocus } onBlur = { this . _onBlur } onKeyDown = { this . _onKeyDown } onChange = { this . _onChange } / > ) ; } }