Add option for the properties form to only update on submit (#23)

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/23

src/Components/Properties/Properties.tsx

@@ -1,25 +1,50 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 import ContainerProperties from '../../Interfaces/Properties';
+import { ToggleButton } from '../ToggleButton/ToggleButton';
 import { INPUT_TYPES } from './PropertiesInputTypes';
 
 interface IPropertiesProps {
   properties?: ContainerProperties
   onChange: (key: string, value: string | number | boolean) => void
+  onSubmit: (event: React.FormEvent<HTMLFormElement>, refs: Array<React.RefObject<HTMLInputElement>>) => void
 }
 
 export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps) => {
+  const [isDynamicInput, setIsDynamicInput] = useState<boolean>(true);
+
   if (props.properties === undefined) {
     return <div></div>;
   }
 
   const groupInput: React.ReactNode[] = [];
+  const refs: Array<React.RefObject<HTMLInputElement>> = [];
   Object
     .entries(props.properties)
-    .forEach((pair) => handleProperties(pair, groupInput, props.onChange));
+    .forEach((pair) => handleProperties(pair, groupInput, refs, isDynamicInput, props.onChange));
+
+  const form = isDynamicInput
+    ? <div>
+      { groupInput }
+    </div>
+    : <form
+      key={props.properties.id}
+      onSubmit={(event) => props.onSubmit(event, refs)}
+    >
+      <input type='submit' className='normal-btn block mx-auto' value='Submit'/>
+      { groupInput }
+    </form>
+    ;
 
   return (
-    <div className='p-3 bg-slate-200 h-3/5 overflow-y-auto'>
-      { groupInput }
+    <div className='h-3/5 p-3 bg-slate-200 overflow-y-auto'>
+      <ToggleButton
+        id='isDynamic'
+        text='Dynamic update'
+        title='Enable dynamic svg update'
+        checked={isDynamicInput}
+        onChange={() => setIsDynamicInput(!isDynamicInput)}
+      />
+      { form }
     </div>
   );
 };
@@ -27,6 +52,8 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
 const handleProperties = (
   [key, value]: [string, string | number],
   groupInput: React.ReactNode[],
+  refs: Array<React.RefObject<HTMLInputElement>>,
+  isDynamicInput: boolean,
   onChange: (key: string, value: string | number | boolean) => void
 ): void => {
   const id = `property-${key}`;
@@ -42,31 +69,49 @@ const handleProperties = (
     type = INPUT_TYPES[key];
   }
 
-  const isDisabled = ['id', 'parentId'].includes(key);
-  ///
+  const ref: React.RefObject<HTMLInputElement> = React.useRef<HTMLInputElement>(null);
+  refs.push(ref);
 
-  groupInput.push(
-    <div key={id} className='mt-4'>
-      <label className='text-sm font-medium text-gray-800' htmlFor={id}>{key}</label>
-      <input
-        className='text-base font-medium transition-all text-gray-800 mt-1 block w-full px-3 py-2
+  const isDisabled = ['id', 'parentId'].includes(key);
+  const input = isDynamicInput
+    ? <input
+      className='text-base font-medium transition-all text-gray-800 mt-1 block w-full px-3 py-2
           bg-white border-2 border-white rounded-lg placeholder-gray-800
           focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
          disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none
          '
-        type={type}
-        id={id}
-        value={value}
-        checked={checked}
-        onChange={(event) => {
-          if (type === 'checkbox') {
-            onChange(key, event.target.checked);
-            return;
-          }
-          onChange(key, event.target.value);
-        }}
-        disabled={isDisabled}
-      />
+      type={type}
+      id={key}
+      ref={ref}
+      value={value}
+      checked={checked}
+      onChange={(event) => {
+        if (type === 'checkbox') {
+          onChange(key, event.target.checked);
+          return;
+        }
+        onChange(key, event.target.value);
+      }}
+      disabled={isDisabled}
+    />
+    : <input
+      className='text-base font-medium transition-all text-gray-800 mt-1 block w-full px-3 py-2
+          bg-white border-2 border-white rounded-lg placeholder-gray-800
+          focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
+         disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none
+         '
+      type={type}
+      id={key}
+      ref={ref}
+      defaultValue={value}
+      defaultChecked={checked}
+      disabled={isDisabled}
+    />;
+
+  groupInput.push(
+    <div key={id} className='mt-4'>
+      <label className='text-sm font-medium text-gray-800' htmlFor={key}>{key}</label>
+      {input}
     </div>
   );
 };