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/StaticForm.tsx

@@ -0,0 +1,139 @@
+import { MenuAlt2Icon, MenuIcon, MenuAlt3Icon } 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 IStaticFormProps {
+  properties: IProperties
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+}
+
+const getCSSInputs = (properties: IProperties): 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'
+      defaultValue={(properties.style as any)[key]}
+    />);
+  }
+  return groupInput;
+};
+
+const StaticForm: React.FunctionComponent<IStaticFormProps> = (props) => {
+  return (<form
+    key={props.properties.id}
+    onSubmit={(event) => props.onSubmit(event)}
+  >
+    <input type='submit' className='normal-btn block mx-auto mb-4 border-2 border-blue-400 cursor-pointer' value='Submit'/>
+    <div className='grid grid-cols-2 gap-y-4'>
+      <InputGroup
+        labelText='Name'
+        inputKey='id'
+        labelClassName=''
+        inputClassName=''
+        type='string'
+        defaultValue={props.properties.id.toString()}
+        isDisabled={true}
+      />
+      <InputGroup
+        labelText='Parent name'
+        inputKey='parentId'
+        labelClassName=''
+        inputClassName=''
+        type='string'
+        defaultValue={props.properties.parentId?.toString()}
+        isDisabled={true}
+      />
+      <InputGroup
+        labelText='x'
+        inputKey='x'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        defaultValue={props.properties.x.toString()}
+      />
+      <InputGroup
+        labelText='y'
+        inputKey='y'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        defaultValue={props.properties.y.toString()}
+      />
+      <InputGroup
+        labelText='Width'
+        inputKey='width'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        defaultValue={props.properties.width.toString()}
+      />
+      <InputGroup
+        labelText='Height'
+        inputKey='height'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        defaultValue={props.properties.height.toString()}
+      />
+      <InputGroup
+        labelText='Rigid'
+        inputKey='isRigidBody'
+        labelClassName=''
+        inputClassName=''
+        type='checkbox'
+        defaultChecked={props.properties.isRigidBody}
+      />
+      <InputGroup
+        labelText='Anchor'
+        inputKey='isAnchor'
+        labelClassName=''
+        inputClassName=''
+        type='checkbox'
+        defaultChecked={props.properties.isAnchor}
+      />
+      <RadioGroupButtons
+        name='XPositionReference'
+        defaultValue={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()
+          }
+        ]}
+      />
+      { getCSSInputs(props.properties) }
+    </div>
+  </form>);
+};
+
+export default StaticForm;