Merged PR 163: Remove the static form + rename some components for clarity
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
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
parent
7e3ccdee99
commit
66ea3b1b64
21 changed files with 150 additions and 523 deletions
184
src/Components/ContainerProperties/ContainerForm.tsx
Normal file
184
src/Components/ContainerProperties/ContainerForm.tsx
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
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 IContainerFormProps {
|
||||
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 ContainerForm: React.FunctionComponent<IContainerFormProps> = (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 ContainerForm;
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import * as React from 'react';
|
||||
import { expect, describe, it, vi } from 'vitest';
|
||||
import { XPositionReference } from '../../Enums/XPositionReference';
|
||||
import IContainerProperties from '../../Interfaces/IContainerProperties';
|
||||
import { Properties } from './ContainerProperties';
|
||||
|
||||
describe.concurrent('Properties', () => {
|
||||
it('No properties', () => {
|
||||
render(<Properties
|
||||
properties={undefined}
|
||||
onChange={() => {}}
|
||||
symbols={new Map()}
|
||||
/>);
|
||||
|
||||
expect(screen.queryByText('id')).toBeNull();
|
||||
expect(screen.queryByText('parentId')).toBeNull();
|
||||
expect(screen.queryByText('x')).toBeNull();
|
||||
expect(screen.queryByText('y')).toBeNull();
|
||||
});
|
||||
|
||||
it('Some properties, change values with dynamic input', () => {
|
||||
const prop: IContainerProperties = {
|
||||
id: 'stuff',
|
||||
parentId: 'parentId',
|
||||
linkedSymbolId: '',
|
||||
displayedText: 'stuff',
|
||||
x: 1,
|
||||
y: 1,
|
||||
width: 1,
|
||||
height: 1,
|
||||
minWidth: 1,
|
||||
XPositionReference: XPositionReference.Left,
|
||||
isRigidBody: false,
|
||||
isAnchor: false
|
||||
};
|
||||
|
||||
const handleChange = vi.fn((key, value) => {
|
||||
(prop as any)[key] = value;
|
||||
});
|
||||
|
||||
const { container, rerender } = render(<Properties
|
||||
properties={prop}
|
||||
onChange={handleChange}
|
||||
symbols={new Map()}
|
||||
/>);
|
||||
|
||||
expect(screen.queryByText('id')).toBeDefined();
|
||||
expect(screen.queryByText('parentId')).toBeDefined();
|
||||
expect(screen.queryByText('x')).toBeDefined();
|
||||
expect(screen.queryByText('y')).toBeDefined();
|
||||
|
||||
let propertyId = container.querySelector('#id');
|
||||
let propertyParentId = container.querySelector('#parentId');
|
||||
let propertyX = container.querySelector('#x');
|
||||
let propertyY = container.querySelector('#y');
|
||||
expect(propertyId).toBeDefined();
|
||||
expect((propertyId as HTMLInputElement).value).toBe('stuff');
|
||||
expect(propertyParentId).toBeDefined();
|
||||
expect((propertyParentId as HTMLInputElement).value).toBe('parentId');
|
||||
expect(propertyX).toBeDefined();
|
||||
expect((propertyX as HTMLInputElement).value).toBe('1');
|
||||
expect(propertyY).toBeDefined();
|
||||
expect((propertyY as HTMLInputElement).value).toBe('1');
|
||||
|
||||
fireEvent.change(propertyId as Element, { target: { value: 'stuffed' } });
|
||||
fireEvent.change(propertyParentId as Element, { target: { value: 'parentedId' } });
|
||||
fireEvent.change(propertyX as Element, { target: { value: '2' } });
|
||||
fireEvent.change(propertyY as Element, { target: { value: '2' } });
|
||||
expect(handleChange).toBeCalledTimes(2);
|
||||
|
||||
expect(prop.id).toBe('stuff');
|
||||
expect(prop.parentId).toBe('parentId');
|
||||
expect(prop.x).toBe(2);
|
||||
expect(prop.y).toBe(2);
|
||||
rerender(<Properties
|
||||
properties={Object.assign({}, prop)}
|
||||
onChange={handleChange}
|
||||
symbols={new Map()}
|
||||
/>);
|
||||
|
||||
propertyId = container.querySelector('#id');
|
||||
propertyParentId = container.querySelector('#parentId');
|
||||
propertyX = container.querySelector('#x');
|
||||
propertyY = container.querySelector('#y');
|
||||
expect(propertyId).toBeDefined();
|
||||
expect((propertyId as HTMLInputElement).value).toBe('stuff');
|
||||
expect(propertyParentId).toBeDefined();
|
||||
expect((propertyParentId as HTMLInputElement).value).toBe('parentId');
|
||||
expect(propertyX).toBeDefined();
|
||||
expect((propertyX as HTMLInputElement).value).toBe('2');
|
||||
expect(propertyY).toBeDefined();
|
||||
expect((propertyY as HTMLInputElement).value).toBe('2');
|
||||
});
|
||||
});
|
||||
26
src/Components/ContainerProperties/ContainerProperties.tsx
Normal file
26
src/Components/ContainerProperties/ContainerProperties.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react';
|
||||
import IContainerProperties from '../../Interfaces/IContainerProperties';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import ContainerForm from './ContainerForm';
|
||||
|
||||
interface IPropertiesProps {
|
||||
properties?: IContainerProperties
|
||||
symbols: Map<string, ISymbolModel>
|
||||
onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
|
||||
}
|
||||
|
||||
export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps) => {
|
||||
if (props.properties === undefined) {
|
||||
return <div></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='h-3/5 p-3 bg-slate-200 overflow-y-auto'>
|
||||
<ContainerForm
|
||||
properties={props.properties}
|
||||
symbols={props.symbols}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue