Implement pseudo dynamic input

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} />
+  </>;
+}