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)} />
-      <InputGroup
+        onChange={(value) => props.onChange('displayedText', value)} />
+      <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))} />
-      <InputGroup
+        onChange={(value) => props.onChange('y', Number(value) + (props.properties.margin?.top ?? 0))} />
+      <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))} />
-      <InputGroup
+        onChange={(value) => props.onChange('minWidth', Number(value))} />
+      <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))} />
-      <InputGroup
+        onChange={(value) => props.onChange('maxWidth', Number(value))} />
+      <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))} />
-      <InputGroup
+        onChange={(value) => props.onChange('height', Number(value) - (props.properties.margin?.top ?? 0) - (props.properties.margin?.bottom ?? 0))} />
+      <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)} />
-      <InputGroup
+        onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)} />
+      <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)} />
-      <InputGroup
+        onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)} />
+      <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)} />
-      <InputGroup
+        onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)} />
+      <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'