Add toggle button to disable / enable dynamic update

src/Components/Properties/Properties.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import ContainerProperties from '../../Interfaces/Properties';
+import { ToggleButton } from '../ToggleButton/ToggleButton';
 import { INPUT_TYPES } from './PropertiesInputTypes';
 
 interface IPropertiesProps {
@@ -9,12 +10,12 @@ interface IPropertiesProps {
 }
 
 export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps) => {
+  const [isDynamicInput, setIsDynamicInput] = useState<boolean>(false);
+
   if (props.properties === undefined) {
     return <div></div>;
   }
 
-  const [isDynamicInput, setIsDynamicInput] = useState<boolean>(true);
-
   const groupInput: React.ReactNode[] = [];
   const refs: Array<React.RefObject<HTMLInputElement>> = [];
   Object
@@ -36,10 +37,12 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
 
   return (
     <div className='h-3/5 p-3 bg-slate-200 overflow-y-auto'>
-      <input
-        type='checkbox'
-        onChange={() => { setIsDynamicInput(!isDynamicInput); }}
+      <ToggleButton
+        id='isDynamic'
+        text='Dynamic update'
+        title='Enable dynamic svg update'
         checked={isDynamicInput}
+        onChange={() => setIsDynamicInput(!isDynamicInput)}
       />
       { form }
     </div>
@@ -70,52 +73,45 @@ const handleProperties = (
   refs.push(ref);
 
   const isDisabled = ['id', 'parentId'].includes(key);
-  if (isDynamicInput) {
-    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 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}
-          ref={ref}
-          value={value}
-          checked={checked}
-          onChange={(event) => {
-            if (type === 'checkbox') {
-              onChange(key, event.target.checked);
-              return;
-            }
-            onChange(key, event.target.value);
-          }}
-          disabled={isDisabled}
-        />
-      </div>
-    );
-    return;
-  }
+      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={id}>{key}</label>
-      <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}
-      />
+      <label className='text-sm font-medium text-gray-800' htmlFor={key}>{key}</label>
+      {input}
     </div>
   );
 };

src/Components/ToggleButton/ToggleButton.scss

@@ -0,0 +1,8 @@
+input:checked ~ .dot {
+  transform: translateX(100%);
+}
+input:checked ~ .line {
+  background-color: #3B82F6;
+}
+
+

src/Components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import './ToggleButton.scss';
+
+interface IToggleButtonProps {
+  id: string
+  text: string
+  type?: TOGGLE_TYPE
+  title: string
+  checked: boolean
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+}
+
+export enum TOGGLE_TYPE {
+  MATERIAL,
+  IOS
+}
+
+export const ToggleButton: FC<IToggleButtonProps> = (props) => {
+  const id = `toggle-${props.id}`;
+  const type = props.type ?? TOGGLE_TYPE.MATERIAL;
+  let classLine = 'line w-10 h-4 bg-gray-400 rounded-full shadow-inner';
+  let classDot = 'dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition';
+  if (type === TOGGLE_TYPE.IOS) {
+    classLine = 'line block bg-gray-600 w-14 h-8 rounded-full';
+    classDot = 'dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition';
+  }
+
+  return (
+    <div title={props.title}>
+      <div className="flex items-center justify-center w-full mb-12">
+        <label
+          htmlFor={id}
+          className="flex items-center cursor-pointer"
+        >
+          <div className="relative">
+            <input
+              id={id}
+              type="checkbox"
+              onChange={props.onChange}
+              checked={props.checked}
+              className="sr-only" />
+            <div className={classLine}></div>
+            <div className={classDot}></div>
+          </div>
+          <div className="ml-3 text-gray-700 font-medium">
+            { props.text }
+          </div>
+        </label>
+      </div>
+    </div>
+  );
+};