svg-layout-designer-react/src/Components/Properties/Properties.tsx

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>, properties: ContainerProperties) => 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[] = [];
  Object
    .entries(props.properties)
    .forEach((pair) => handleProperties(pair, groupInput, isDynamicInput, props.onChange));

  const form = isDynamicInput
    ? <div className='grid grid-cols-2 gap-4'>
      { groupInput }
    </div>
    : <form
      key={props.properties.id}
      onSubmit={(event) => props.onSubmit(event, props.properties as ContainerProperties)}
    >
      <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'>
        { groupInput }
      </div>
    </form>
    ;

  return (
    <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>
  );
};

const handleProperties = (
  [key, value]: [string, string | number],
  groupInput: React.ReactNode[],
  isDynamicInput: boolean,
  onChange: (key: string, value: string | number | boolean) => void
): void => {
  const id = `property-${key}`;
  let type = 'text';
  let checked;

  /// hardcoded stuff for ergonomy ///
  if (typeof value === 'boolean') {
    checked = value;
  }

  if (key in INPUT_TYPES) {
    type = INPUT_TYPES[key];
  }

  const className = `
        w-full
        text-xs font-medium transition-all text-gray-800 mt-1 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`;
  const isDisabled = ['id', 'parentId'].includes(key);
  const input = isDynamicInput
    ? <input
      key={key}
      id={key}
      className={className}
      type={type}
      value={value}
      checked={checked}
      onChange={(event) => {
        if (type === 'checkbox') {
          onChange(key, event.target.checked);
          return;
        }
        onChange(key, event.target.value);
      }}
      disabled={isDisabled}
    />
    : <input
      key={key}
      id={key}
      className={className}
      type={type}
      defaultValue={value}
      defaultChecked={checked}
      disabled={isDisabled}
    />;

  groupInput.push(
    <label
      key={id}
      className='mt-4 text-xs font-medium text-gray-800'
      htmlFor={key}
    >
      {key}
    </label>
  );
  groupInput.push(input);
};