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

Add option for the properties form to only update on submit (#23)
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/23
This commit is contained in:
Siklos 2022-08-11 08:37:10 -04:00
parent 7c16d6c97d
commit ac56f84196
12 changed files with 256 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/Components/ElementsSidebar/ElementsSidebar.test.tsx
View file

@ -25,6 +25,7 @@ describe.concurrent('Elements sidebar', () => {
isHistoryOpen={false}
SelectedContainer={null}
OnPropertyChange={() => {}}
OnPropertiesSubmit={() => {}}
SelectContainer={() => {}}
DeleteContainer={() => {}}
AddContainer={() => {}}
@ -57,6 +58,7 @@ describe.concurrent('Elements sidebar', () => {
isHistoryOpen={false}
SelectedContainer={MainContainer}
OnPropertyChange={() => {}}
OnPropertiesSubmit={() => {}}
SelectContainer={() => {}}
DeleteContainer={() => {}}
AddContainer={() => {}}
@ -70,12 +72,12 @@ describe.concurrent('Elements sidebar', () => {
expect(screen.queryByText('y')).toBeDefined();
expect(screen.queryByText('width')).toBeDefined();
expect(screen.queryByText('height')).toBeDefined();
const propertyId = container.querySelector('#property-id');
const propertyParentId = container.querySelector('#property-parentId');
const propertyX = container.querySelector('#property-x');
const propertyY = container.querySelector('#property-y');
const propertyWidth = container.querySelector('#property-width');
const propertyHeight = container.querySelector('#property-height');
const propertyId = container.querySelector('#id');
const propertyParentId = container.querySelector('#parentId');
const propertyX = container.querySelector('#x');
const propertyY = container.querySelector('#y');
const propertyWidth = container.querySelector('#width');
const propertyHeight = container.querySelector('#height');
expect((propertyId as HTMLInputElement).value).toBe(MainContainer.properties.id.toString());
expect(propertyParentId).toBeDefined();
expect((propertyParentId as HTMLInputElement).value).toBe('');
@ -146,6 +148,7 @@ describe.concurrent('Elements sidebar', () => {
isHistoryOpen={false}
SelectedContainer={MainContainer}
OnPropertyChange={() => {}}
OnPropertiesSubmit={() => {}}
SelectContainer={() => {}}
DeleteContainer={() => {}}
AddContainer={() => {}}
@ -202,6 +205,7 @@ describe.concurrent('Elements sidebar', () => {
isHistoryOpen={false}
SelectedContainer={SelectedContainer}
OnPropertyChange={() => {}}
OnPropertiesSubmit={() => {}}
SelectContainer={selectContainer}
DeleteContainer={() => {}}
AddContainer={() => {}}
@ -212,8 +216,8 @@ describe.concurrent('Elements sidebar', () => {
expect(screen.getByText(/main/i));
const child1 = screen.getByText(/child-1/i);
expect(child1);
const propertyId = container.querySelector('#property-id');
const propertyParentId = container.querySelector('#property-parentId');
const propertyId = container.querySelector('#id');
const propertyParentId = container.querySelector('#parentId');
expect((propertyId as HTMLInputElement).value).toBe(MainContainer.properties.id.toString());
expect((propertyParentId as HTMLInputElement).value).toBe('');
@ -225,6 +229,7 @@ describe.concurrent('Elements sidebar', () => {
isHistoryOpen={false}
SelectedContainer={SelectedContainer}
OnPropertyChange={() => {}}
OnPropertiesSubmit={() => {}}
SelectContainer={selectContainer}
DeleteContainer={() => {}}
AddContainer={() => {}}

7
src/Components/ElementsSidebar/ElementsSidebar.tsx
View file

@ -14,6 +14,7 @@ interface IElementsSidebarProps {
isHistoryOpen: boolean
SelectedContainer: IContainerModel | null
OnPropertyChange: (key: string, value: string | number | boolean) => void
OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>, refs: Array<React.RefObject<HTMLInputElement>>) => void
SelectContainer: (container: IContainerModel) => void
DeleteContainer: (containerid: string) => void
AddContainer: (index: number, type: string, parent: string) => void
@ -145,7 +146,11 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
props.DeleteContainer(onClickContainerId);
}} />
</Menu>
<Properties properties={props.SelectedContainer?.properties} onChange={props.OnPropertyChange}></Properties>
<Properties
properties={props.SelectedContainer?.properties}
onChange={props.OnPropertyChange}
onSubmit={props.OnPropertiesSubmit}
/>
</div>
);
};