Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 163: Remove the static form + rename some components for clarity
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
The static form is hard to maintain so I am removing it + rename some components for clarity + moved some utils files
This commit is contained in:
Eric Nguyen 2022-08-22 14:37:25 +00:00
parent 7e3ccdee99
commit 66ea3b1b64
21 changed files with 150 additions and 523 deletions
Download patch file Download diff file Expand all files Collapse all files

185
src/Components/Properties/DynamicForm.tsx
View file

@ -1,185 +0,0 @@
import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon } from '@heroicons/react/outline';
import * as React from 'react';
import { XPositionReference } from '../../Enums/XPositionReference';
import IContainerProperties from '../../Interfaces/IContainerProperties';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { restoreX, transformX } from '../../utils/svg';
import { InputGroup } from '../InputGroup/InputGroup';
import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
import { Select } from '../Select/Select';
interface IDynamicFormProps {
properties: IContainerProperties
symbols: Map<string, ISymbolModel>
onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
}
const getCSSInputs = (
properties: IContainerProperties,
onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
): 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'
value={(properties.style as any)[key]}
onChange={(event) => onChange(key, event.target.value, true)}
/>);
}
return groupInput;
};
const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
return (
<div className='grid grid-cols-2 gap-y-4'>
<InputGroup
labelText='Name'
inputKey='id'
labelClassName=''
inputClassName=''
type='string'
value={props.properties.id.toString()}
isDisabled={true}
/>
<InputGroup
labelText='Parent name'
inputKey='parentId'
labelClassName=''
inputClassName=''
type='string'
value={props.properties.parentId?.toString()}
isDisabled={true}
/>
<InputGroup
labelText='Displayed text'
inputKey='displayedText'
labelClassName=''
inputClassName=''
type='string'
value={props.properties.displayedText?.toString()}
onChange={(event) => props.onChange('displayedText', event.target.value)}
/>
<InputGroup
labelText='x'
inputKey='x'
labelClassName=''
inputClassName=''
type='number'
isDisabled={props.properties.linkedSymbolId !== ''}
value={transformX(props.properties.x, props.properties.width, props.properties.XPositionReference).toString()}
onChange={(event) => props.onChange('x', restoreX(Number(event.target.value), props.properties.width, props.properties.XPositionReference))}
/>
<InputGroup
labelText='y'
inputKey='y'
labelClassName=''
inputClassName=''
type='number'
value={props.properties.y.toString()}
onChange={(event) => props.onChange('y', Number(event.target.value))}
/>
<InputGroup
labelText='Minimum width'
inputKey='minWidth'
labelClassName=''
inputClassName=''
type='number'
min={1}
value={props.properties.minWidth.toString()}
onChange={(event) => props.onChange('minWidth', Number(event.target.value))}
/>
<InputGroup
labelText='Width'
inputKey='width'
labelClassName=''
inputClassName=''
type='number'
min={props.properties.minWidth}
value={props.properties.width.toString()}
onChange={(event) => props.onChange('width', Number(event.target.value))}
/>
<InputGroup
labelText='Height'
inputKey='height'
labelClassName=''
inputClassName=''
type='number'
min={0}
value={props.properties.height.toString()}
onChange={(event) => props.onChange('height', Number(event.target.value))}
/>
<InputGroup
labelText='Rigid'
inputKey='isRigidBody'
labelClassName=''
inputClassName=''
type='checkbox'
checked={props.properties.isRigidBody}
onChange={(event) => props.onChange('isRigidBody', event.target.checked)}
/>
<InputGroup
labelText='Anchor'
inputKey='isAnchor'
labelClassName=''
inputClassName=''
type='checkbox'
checked={props.properties.isAnchor}
onChange={(event) => props.onChange('isAnchor', event.target.checked)}
/>
<RadioGroupButtons
name='XPositionReference'
value={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()
}
]}
onChange={(event) => props.onChange('XPositionReference', Number(event.target.value))}
/>
<Select
inputKey='linkedSymbolId'
labelText='Align with symbol'
labelClassName=''
inputClassName=''
inputs={[...props.symbols.values()].map(symbol => ({
text: symbol.id,
value: symbol.id
}))}
value={props.properties.linkedSymbolId ?? ''}
onChange={(event) => props.onChange('linkedSymbolId', event.target.value)}
/>
{ getCSSInputs(props.properties, props.onChange) }
</div>
);
};
export default DynamicForm;