Implement pseudo dynamic input

src/Components/ContainerProperties/ContainerForm.tsx

@@ -7,6 +7,7 @@ import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../utils/default';
 import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, RestoreX, TransformX } from '../../utils/svg';
 import { InputGroup } from '../InputGroup/InputGroup';
+import { TextInputGroup } from '../InputGroup/TextInputGroup';
 import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
 import { Select } from '../Select/Select';
 
@@ -20,7 +21,7 @@ function GetCSSInputs(properties: IContainerProperties,
   onChange: (key: string, value: string | number | boolean, type: PropertyType) => void): JSX.Element[] {
   const groupInput: JSX.Element[] = [];
   for (const key in properties.style) {
-    groupInput.push(<InputGroup
+    groupInput.push(<TextInputGroup
       key={key}
       labelText={key}
       inputKey={key}
@@ -28,7 +29,7 @@ function GetCSSInputs(properties: IContainerProperties,
       inputClassName=''
       type='string'
       value={(properties.style as any)[key]}
-      onChange={(event) => onChange(key, event.target.value, PropertyType.Style)} />);
+      onChange={(value) => onChange(key, value, PropertyType.Style)} />);
   }
   return groupInput;
 }
@@ -60,15 +61,15 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         type='string'
         value={props.properties.type}
         isDisabled={true} />
-      <InputGroup
+      <TextInputGroup
         labelText='Displayed text'
         inputKey='displayedText'
         labelClassName=''
         inputClassName=''
         type='string'
         value={props.properties.displayedText?.toString()}
-        onChange={(event) => props.onChange('displayedText', event.target.value)} />
+        onChange={(value) => props.onChange('displayedText', value)} />
-      <InputGroup
+      <TextInputGroup
         labelText='x'
         inputKey='x'
         labelClassName=''
@@ -76,26 +77,26 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         type='number'
         isDisabled={props.properties.linkedSymbolId !== ''}
         value={TransformX(RemoveXMargin(props.properties.x, props.properties.margin.left), props.properties.width, props.properties.xPositionReference).toString()}
-        onChange={(event) => props.onChange(
+        onChange={(value) => props.onChange(
           'x',
           ApplyXMargin(
             RestoreX(
-              Number(event.target.value),
+              Number(value),
               props.properties.width,
               props.properties.xPositionReference
             ),
             props.properties.margin.left
           )
         )} />
-      <InputGroup
+      <TextInputGroup
         labelText='y'
         inputKey='y'
         labelClassName=''
         inputClassName=''
         type='number'
         value={(props.properties.y - (props.properties.margin?.top ?? 0)).toString()}
-        onChange={(event) => props.onChange('y', Number(event.target.value) + (props.properties.margin?.top ?? 0))} />
+        onChange={(value) => props.onChange('y', Number(value) + (props.properties.margin?.top ?? 0))} />
-      <InputGroup
+      <TextInputGroup
         labelText='Minimum width'
         inputKey='minWidth'
         labelClassName=''
@@ -103,8 +104,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         type='number'
         min={1}
         value={props.properties.minWidth.toString()}
-        onChange={(event) => props.onChange('minWidth', Number(event.target.value))} />
+        onChange={(value) => props.onChange('minWidth', Number(value))} />
-      <InputGroup
+      <TextInputGroup
         labelText='Maximum width'
         inputKey='maxWidth'
         labelClassName=''
@@ -112,8 +113,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         type='number'
         min={1}
         value={props.properties.maxWidth.toString()}
-        onChange={(event) => props.onChange('maxWidth', Number(event.target.value))} />
+        onChange={(value) => props.onChange('maxWidth', Number(value))} />
-      <InputGroup
+      <TextInputGroup
         labelText='Width'
         inputKey='width'
         labelClassName=''
@@ -122,9 +123,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         min={props.properties.minWidth}
         max={props.properties.maxWidth}
         value={(RemoveWidthMargin(props.properties.width, props.properties.margin.left, props.properties.margin.right)).toString()}
-        onChange={(event) => props.onChange('width', ApplyWidthMargin(Number(event.target.value), props.properties.margin.left, props.properties.margin.right))}
+        onChange={(value) => props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right))}
         isDisabled={props.properties.isFlex} />
-      <InputGroup
+      <TextInputGroup
         labelText='Height'
         inputKey='height'
         labelClassName=''
@@ -132,8 +133,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         type='number'
         min={0}
         value={(props.properties.height + (props.properties.margin?.top ?? 0) + (props.properties.margin?.bottom ?? 0)).toString()}
-        onChange={(event) => props.onChange('height', Number(event.target.value) - (props.properties.margin?.top ?? 0) - (props.properties.margin?.bottom ?? 0))} />
+        onChange={(value) => props.onChange('height', Number(value) - (props.properties.margin?.top ?? 0) - (props.properties.margin?.bottom ?? 0))} />
-      <InputGroup
+      <TextInputGroup
         labelText='Margin left'
         inputKey='left'
         labelClassName=''
@@ -141,8 +142,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         type='number'
         min={0}
         value={(props.properties.margin.left ?? 0).toString()}
-        onChange={(event) => props.onChange('left', Number(event.target.value), PropertyType.Margin)} />
+        onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)} />
-      <InputGroup
+      <TextInputGroup
         labelText='Margin bottom'
         inputKey='bottom'
         labelClassName=''
@@ -150,8 +151,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         type='number'
         min={0}
         value={(props.properties.margin.bottom ?? 0).toString()}
-        onChange={(event) => props.onChange('bottom', Number(event.target.value), PropertyType.Margin)} />
+        onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)} />
-      <InputGroup
+      <TextInputGroup
         labelText='Margin top'
         inputKey='top'
         labelClassName=''
@@ -159,8 +160,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         type='number'
         min={0}
         value={(props.properties.margin.top ?? 0).toString()}
-        onChange={(event) => props.onChange('top', Number(event.target.value), PropertyType.Margin)} />
+        onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)} />
-      <InputGroup
+      <TextInputGroup
         labelText='Margin right'
         inputKey='right'
         labelClassName=''
@@ -168,7 +169,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         type='number'
         min={0}
         value={(props.properties.margin.right ?? 0).toString()}
-        onChange={(event) => props.onChange('right', Number(event.target.value), PropertyType.Margin)} />
+        onChange={(value) => props.onChange('right', Number(value), PropertyType.Margin)} />
       <InputGroup
         labelText='Flex'
         inputKey='isFlex'

src/Components/InputGroup/TextInputGroup.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Properties } from '../ContainerProperties/ContainerProperties';
+
+interface ITextInputGroupProps {
+  labelKey?: string
+  labelText: string
+  inputKey: string
+  labelClassName: string
+  inputClassName: string
+  type: string
+  value: string
+  defaultValue?: string
+  min?: number
+  max?: number
+  isDisabled?: boolean
+  onChange: (newValue: string) => void
+}
+
+const className = 'input-group';
+
+export function TextInputGroup(props: ITextInputGroupProps): JSX.Element {
+  const [value, setValue] = React.useState(props.value);
+
+  React.useEffect(() => {
+    setValue(props.value);
+  }, [props.value]);
+
+  function OnKeyUp(event: React.KeyboardEvent): void {
+    switch (event.key) {
+      case 'Enter':
+        props.onChange(value);
+        break;
+      case 'Escape':
+        setValue(props.value);
+        break;
+    }
+  }
+
+  return <>
+    <label
+      key={props.labelKey}
+      className={`mt-4 text-xs font-medium text-gray-800 ${props.labelClassName}`}
+      htmlFor={props.inputKey}
+    >
+      {props.labelText}
+    </label>
+    <input
+      key={props.inputKey}
+      id={props.inputKey}
+      className={`${className} ${props.inputClassName}`}
+      type={props.type}
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+      onKeyUp={OnKeyUp}
+      min={props.min}
+      max={props.max}
+      disabled={props.isDisabled} />
+  </>;
+}