From 6d56ea49cf80d87887770199ac1aff75d1d76046 Mon Sep 17 00:00:00 2001
From: Eric NGUYEN <enguyen@techform.fr>
Date: Tue, 16 Aug 2022 13:46:54 +0200
Subject: [PATCH] Refactor radio group buttons

---
 src/Components/Properties/DynamicForm.tsx     | 47 +++++-----------
 src/Components/Properties/StaticForm.tsx      | 44 ++++-----------
 .../RadioGroupButtons/RadioGroupButtons.tsx   | 53 +++++++++++++++++++
 src/Interfaces/IInputGroup.ts                 |  4 ++
 4 files changed, 80 insertions(+), 68 deletions(-)
 create mode 100644 src/Components/RadioGroupButtons/RadioGroupButtons.tsx
 create mode 100644 src/Interfaces/IInputGroup.ts

diff --git a/src/Components/Properties/DynamicForm.tsx b/src/Components/Properties/DynamicForm.tsx
index 008c6c2..142763f 100644
--- a/src/Components/Properties/DynamicForm.tsx
+++ b/src/Components/Properties/DynamicForm.tsx
@@ -2,6 +2,7 @@ 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
@@ -103,41 +104,17 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         checked={props.properties.isAnchor}
         onChange={(event) => props.onChange('isAnchor', event.target.checked)}
       />
-      <label>
-        Horizontal alignment
-      </label>
-      <div id='XPositionReference'>
-        <label>
-          <input
-            type='radio'
-            name='XPositionReference'
-            value={XPositionReference.Left}
-            checked={props.properties.XPositionReference === XPositionReference.Left}
-            onChange={(event) => props.onChange('XPositionReference', (event.target as HTMLInputElement).value)}
-          />
-        Left
-        </label>
-        <label>
-          <input
-            type='radio'
-            name='XPositionReference'
-            value={XPositionReference.Center}
-            checked={props.properties.XPositionReference === XPositionReference.Center}
-            onChange={(event) => props.onChange('XPositionReference', (event.target as HTMLInputElement).value)}
-          />
-        Center
-        </label>
-        <label>
-          <input
-            type='radio'
-            name='XPositionReference'
-            value={XPositionReference.Right}
-            checked={props.properties.XPositionReference === XPositionReference.Right}
-            onChange={(event) => props.onChange('XPositionReference', (event.target as HTMLInputElement).value)}
-          />
-        Right
-        </label>
-      </div>
+      <RadioGroupButtons
+        name='XPositionReference'
+        value={props.properties.XPositionReference.toString()}
+        labelText='Horizontal alignment'
+        inputGroups={[
+          { text: 'Left', value: XPositionReference.Left.toString() },
+          { text: 'Center', value: XPositionReference.Center.toString() },
+          { text: 'Right', value: XPositionReference.Right.toString() }
+        ]}
+        onChange={(event) => props.onChange('XPositionReference', event.target.value)}
+      />
       { getCSSInputs(props.properties, props.onChange) }
     </div>
   );
diff --git a/src/Components/Properties/StaticForm.tsx b/src/Components/Properties/StaticForm.tsx
index bd3bcec..e7cb6d8 100644
--- a/src/Components/Properties/StaticForm.tsx
+++ b/src/Components/Properties/StaticForm.tsx
@@ -2,6 +2,7 @@ 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
@@ -97,39 +98,16 @@ const StaticForm: React.FunctionComponent<IStaticFormProps> = (props) => {
         type='checkbox'
         defaultChecked={props.properties.isAnchor}
       />
-      <label>
-        Horizontal alignment
-      </label>
-      <div id='XPositionReference'>
-        <label>
-          <input
-            type='radio'
-            name='XPositionReference'
-            value={XPositionReference.Left}
-            defaultChecked={props.properties.XPositionReference === XPositionReference.Left}
-          />
-        Left
-        </label>
-        <label>
-          <input
-            type='radio'
-            name='XPositionReference'
-            value={XPositionReference.Center}
-            defaultChecked={props.properties.XPositionReference === XPositionReference.Center}
-          />
-        Center
-        </label>
-        <label>
-          <input
-            type='radio'
-            name='XPositionReference'
-            value={XPositionReference.Right}
-            defaultChecked={props.properties.XPositionReference === XPositionReference.Right}
-          />
-        Right
-        </label>
-      </div>
-
+      <RadioGroupButtons
+        name='XPositionReference'
+        defaultValue={props.properties.XPositionReference.toString()}
+        labelText='Horizontal alignment'
+        inputGroups={[
+          { text: 'Left', value: XPositionReference.Left.toString() },
+          { text: 'Center', value: XPositionReference.Center.toString() },
+          { text: 'Right', value: XPositionReference.Right.toString() }
+        ]}
+      />
       { getCSSInputs(props.properties) }
     </div>
   </form>);
diff --git a/src/Components/RadioGroupButtons/RadioGroupButtons.tsx b/src/Components/RadioGroupButtons/RadioGroupButtons.tsx
new file mode 100644
index 0000000..76f1433
--- /dev/null
+++ b/src/Components/RadioGroupButtons/RadioGroupButtons.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { IInputGroup } from '../../Interfaces/IInputGroup';
+
+interface IRadioGroupButtonsProps {
+  name: string
+  value?: string
+  defaultValue?: string
+  labelText: string
+  inputGroups: IInputGroup[]
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+export const RadioGroupButtons: React.FunctionComponent<IRadioGroupButtonsProps> = (props) => {
+  let inputGroups;
+  if (props.value !== undefined) {
+    inputGroups = props.inputGroups.map((inputGroup) => (
+      <label key={inputGroup.value}>
+        <input
+          type='radio'
+          name={props.name}
+          value={inputGroup.value}
+          checked={props.value === inputGroup.value}
+          onChange={props.onChange}
+        />
+        {inputGroup.text}
+      </label>
+    ));
+  } else {
+    inputGroups = props.inputGroups.map((inputGroup) => (
+      <label key={inputGroup.value}>
+        <input
+          type='radio'
+          name={props.name}
+          value={inputGroup.value}
+          defaultChecked={props.defaultValue === inputGroup.value}
+          onChange={props.onChange}
+        />
+        {inputGroup.text}
+      </label>
+    ));
+  }
+
+  return (
+    <>
+      <label>
+        {props.labelText}
+      </label>
+      <div id='XPositionReference'>
+        { inputGroups }
+      </div>
+    </>
+  );
+};
diff --git a/src/Interfaces/IInputGroup.ts b/src/Interfaces/IInputGroup.ts
new file mode 100644
index 0000000..eba23cd
--- /dev/null
+++ b/src/Interfaces/IInputGroup.ts
@@ -0,0 +1,4 @@
+export interface IInputGroup {
+  text: string
+  value: string
+}