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

import { MenuAlt2Icon, MenuIcon, MenuAlt3Icon } from '@heroicons/react/outline';
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
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
}

const getCSSInputs = (properties: IProperties): JSX.Element[] => {
  const groupInput: JSX.Element[] = [];
  for (const key in properties.style) {
    groupInput.push(<InputGroup
      key={key}
      labelText={key}
      inputKey={key}
      labelClassName=''
      inputClassName=''
      type='string'
      defaultValue={(properties.style as any)[key]}
    />);
  }
  return groupInput;
};

const StaticForm: React.FunctionComponent<IStaticFormProps> = (props) => {
  return (<form
    key={props.properties.id}
    onSubmit={(event) => props.onSubmit(event)}
  >
    <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'>
      <InputGroup
        labelText='Name'
        inputKey='id'
        labelClassName=''
        inputClassName=''
        type='string'
        defaultValue={props.properties.id.toString()}
        isDisabled={true}
      />
      <InputGroup
        labelText='Parent name'
        inputKey='parentId'
        labelClassName=''
        inputClassName=''
        type='string'
        defaultValue={props.properties.parentId?.toString()}
        isDisabled={true}
      />
      <InputGroup
        labelText='x'
        inputKey='x'
        labelClassName=''
        inputClassName=''
        type='number'
        defaultValue={props.properties.x.toString()}
      />
      <InputGroup
        labelText='y'
        inputKey='y'
        labelClassName=''
        inputClassName=''
        type='number'
        defaultValue={props.properties.y.toString()}
      />
      <InputGroup
        labelText='Width'
        inputKey='width'
        labelClassName=''
        inputClassName=''
        type='number'
        defaultValue={props.properties.width.toString()}
      />
      <InputGroup
        labelText='Height'
        inputKey='height'
        labelClassName=''
        inputClassName=''
        type='number'
        defaultValue={props.properties.height.toString()}
      />
      <InputGroup
        labelText='Rigid'
        inputKey='isRigidBody'
        labelClassName=''
        inputClassName=''
        type='checkbox'
        defaultChecked={props.properties.isRigidBody}
      />
      <InputGroup
        labelText='Anchor'
        inputKey='isAnchor'
        labelClassName=''
        inputClassName=''
        type='checkbox'
        defaultChecked={props.properties.isAnchor}
      />
      <RadioGroupButtons
        name='XPositionReference'
        defaultValue={props.properties.XPositionReference.toString()}
        inputClassName='hidden'
        labelText='Horizontal alignment'
        inputGroups={[
          {
            text: (
              <div title='Left' aria-label='left' className='radio-button-icon'>
                <MenuAlt2Icon className='heroicon' />
              </div>
            ),
            value: XPositionReference.Left.toString()
          },
          {
            text: (
              <div title='Center' aria-label='center' className='radio-button-icon'>
                <MenuIcon className='heroicon' />
              </div>
            ),
            value: XPositionReference.Center.toString()
          },
          {
            text: (
              <div title='Right' aria-label='right' className='radio-button-icon'>
                <MenuAlt3Icon className='heroicon' />
              </div>
            ),
            value: XPositionReference.Right.toString()
          }
        ]}
      />
      { getCSSInputs(props.properties) }
    </div>
  </form>);
};

export default StaticForm;