Big refactoring with properties + Implement Property

src/Components/Properties/Properties.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import ContainerProperties from '../../Interfaces/Properties';
+
+interface IPropertiesProps {
+  properties?: ContainerProperties,
+  onChange: (key: string, value: string) => void
+}
+
+interface IPropertiesState {
+  hasUpdate: boolean
+}
+
+export class Properties extends React.Component<IPropertiesProps, IPropertiesState> {
+  public state: IPropertiesState;
+
+  constructor(props: IPropertiesProps) {
+    super(props);
+    this.state = {
+      hasUpdate: false
+    };
+  }
+
+  public render() {
+    if (this.props.properties === undefined) {
+      return <div></div>;
+    }
+
+    const groupInput: React.ReactNode[] = [];
+    Object.entries(this.props.properties).forEach((pair) => this.handleProperties(pair, groupInput));
+
+    return (
+      <div>
+        { groupInput }
+      </div>
+    );
+  }
+
+  public handleProperties = ([key, value]: [string, string | number], groupInput: React.ReactNode[]) => {
+    const id = `property-${key}`;
+    const type = typeof value === 'number' ? 'number' : 'text';
+    groupInput.push(
+      <div key={id}>
+        <label className='' htmlFor={id}>{key}</label>
+        <input className='text-black' type={type} id={id} value={value} onChange={(event) => this.props.onChange(key, event.target.value)} />
+      </div>
+    );
+  };
+}