Unrefactor Properties form to allow more freedom on the input types and form (#32)

- The css style is now in IProperties.Style again.
- Forms are divided in DynamicForm and StaticForm
- Faster because less logic
- Add RadioGroupButton
- Add InputGroup
- Fix Children Dimensions not using x for their origin

Co-authored-by: Eric NGUYEN <enguyen@techform.fr>
Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/32

src/Components/Properties/DynamicForm.tsx

@@ -0,0 +1,146 @@
+import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { XPositionReference } from '../../Enums/XPositionReference';
+import IProperties from '../../Interfaces/IProperties';
+import { InputGroup } from '../InputGroup/InputGroup';
+import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
+
+interface IDynamicFormProps {
+  properties: IProperties
+  onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
+}
+
+const getCSSInputs = (
+  properties: IProperties,
+  onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
+): JSX.Element[] => {
+  const groupInput: JSX.Element[] = [];
+  for (const key in properties.style) {
+    groupInput.push(<InputGroup
+      key={key}
+      labelText={key}
+      inputKey={key}
+      labelClassName=''
+      inputClassName=''
+      type='string'
+      value={(properties.style as any)[key]}
+      onChange={(event) => onChange(key, event.target.value, true)}
+    />);
+  }
+  return groupInput;
+};
+
+const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
+  return (
+    <div className='grid grid-cols-2 gap-y-4'>
+      <InputGroup
+        labelText='Name'
+        inputKey='id'
+        labelClassName=''
+        inputClassName=''
+        type='string'
+        value={props.properties.id.toString()}
+        isDisabled={true}
+      />
+      <InputGroup
+        labelText='Parent name'
+        inputKey='parentId'
+        labelClassName=''
+        inputClassName=''
+        type='string'
+        value={props.properties.parentId?.toString()}
+        isDisabled={true}
+      />
+      <InputGroup
+        labelText='x'
+        inputKey='x'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        value={props.properties.x.toString()}
+        onChange={(event) => props.onChange('x', event.target.value)}
+      />
+      <InputGroup
+        labelText='y'
+        inputKey='y'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        value={props.properties.y.toString()}
+        onChange={(event) => props.onChange('y', event.target.value)}
+      />
+      <InputGroup
+        labelText='Width'
+        inputKey='width'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        value={props.properties.width.toString()}
+        onChange={(event) => props.onChange('width', event.target.value)}
+      />
+      <InputGroup
+        labelText='Height'
+        inputKey='height'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        value={props.properties.height.toString()}
+        onChange={(event) => props.onChange('height', event.target.value)}
+      />
+      <InputGroup
+        labelText='Rigid'
+        inputKey='isRigidBody'
+        labelClassName=''
+        inputClassName=''
+        type='checkbox'
+        checked={props.properties.isRigidBody}
+        onChange={(event) => props.onChange('isRigidBody', event.target.checked)}
+      />
+      <InputGroup
+        labelText='Anchor'
+        inputKey='isAnchor'
+        labelClassName=''
+        inputClassName=''
+        type='checkbox'
+        checked={props.properties.isAnchor}
+        onChange={(event) => props.onChange('isAnchor', event.target.checked)}
+      />
+      <RadioGroupButtons
+        name='XPositionReference'
+        value={props.properties.XPositionReference.toString()}
+        inputClassName='hidden'
+        labelText='Horizontal alignment'
+        inputGroups={[
+          {
+            text: (
+              <div title='Left' aria-label='left' className='radio-button-icon'>
+                <MenuAlt2Icon className='heroicon' />
+              </div>
+            ),
+            value: XPositionReference.Left.toString()
+          },
+          {
+            text: (
+              <div title='Center' aria-label='center' className='radio-button-icon'>
+                <MenuIcon className='heroicon' />
+              </div>
+            ),
+            value: XPositionReference.Center.toString()
+          },
+          {
+            text: (
+              <div title='Right' aria-label='right' className='radio-button-icon'>
+                <MenuAlt3Icon className='heroicon' />
+              </div>
+            ),
+            value: XPositionReference.Right.toString()
+          }
+        ]}
+        onChange={(event) => props.onChange('XPositionReference', event.target.value)}
+      />
+      { getCSSInputs(props.properties, props.onChange) }
+    </div>
+  );
+};
+
+export default DynamicForm;