Refactor radio group buttons

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'
+      <RadioGroupButtons
         name='XPositionReference'
-            value={XPositionReference.Left}
-            checked={props.properties.XPositionReference === XPositionReference.Left}
-            onChange={(event) => props.onChange('XPositionReference', (event.target as HTMLInputElement).value)}
+        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)}
       />
-        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>
       { getCSSInputs(props.properties, props.onChange) }
     </div>
   );

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'
+      <RadioGroupButtons
         name='XPositionReference'
-            value={XPositionReference.Left}
-            defaultChecked={props.properties.XPositionReference === XPositionReference.Left}
+        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() }
+        ]}
       />
-        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>
-
       { getCSSInputs(props.properties) }
     </div>
   </form>);

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

src/Interfaces/IInputGroup.ts

@@ -0,0 +1,4 @@
+export interface IInputGroup {
+  text: string
+  value: string
+}