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

Fix InputGroup not refreshing when selecting a different element

Browse source
This commit is contained in:
Eric NGUYEN 2022-09-13 18:12:20 +02:00
parent 021af3e70f
commit 7494383f58
2 changed files with 14 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/Components/ContainerProperties/ContainerForm.tsx
View file

@ -62,6 +62,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value={props.properties.type}
isDisabled={true} />
<TextInputGroup
key={`${props.properties.id}-displayedText`}
labelText='Displayed text'
inputKey='displayedText'
labelClassName=''
@ -70,6 +71,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value={props.properties.displayedText?.toString()}
onChange={(value) => props.onChange('displayedText', value)} />
<TextInputGroup
key={`${props.properties.id}-x`}
labelText='x'
inputKey='x'
labelClassName=''
@ -89,6 +91,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
)
)} />
<TextInputGroup
key={`${props.properties.id}-y`}
labelText='y'
inputKey='y'
labelClassName=''
@ -97,6 +100,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value={(props.properties.y - (props.properties.margin?.top ?? 0)).toString()}
onChange={(value) => props.onChange('y', Number(value) + (props.properties.margin?.top ?? 0))} />
<TextInputGroup
key={`${props.properties.id}-minWidth`}
labelText='Minimum width'
inputKey='minWidth'
labelClassName=''
@ -106,6 +110,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value={props.properties.minWidth.toString()}
onChange={(value) => props.onChange('minWidth', Number(value))} />
<TextInputGroup
key={`${props.properties.id}-maxWidth`}
labelText='Maximum width'
inputKey='maxWidth'
labelClassName=''
@ -115,6 +120,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value={props.properties.maxWidth.toString()}
onChange={(value) => props.onChange('maxWidth', Number(value))} />
<TextInputGroup
key={`${props.properties.id}-width`}
labelText='Width'
inputKey='width'
labelClassName=''
@ -126,6 +132,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
onChange={(value) => props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right))}
isDisabled={props.properties.isFlex} />
<TextInputGroup
key={`${props.properties.id}-height`}
labelText='Height'
inputKey='height'
labelClassName=''
@ -135,6 +142,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value={(props.properties.height + (props.properties.margin?.top ?? 0) + (props.properties.margin?.bottom ?? 0)).toString()}
onChange={(value) => props.onChange('height', Number(value) - (props.properties.margin?.top ?? 0) - (props.properties.margin?.bottom ?? 0))} />
<TextInputGroup
key={`${props.properties.id}-ml`}
labelText='Margin left'
inputKey='left'
labelClassName=''
@ -144,6 +152,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value={(props.properties.margin.left ?? 0).toString()}
onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)} />
<TextInputGroup
key={`${props.properties.id}-mb`}
labelText='Margin bottom'
inputKey='bottom'
labelClassName=''
@ -153,6 +162,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value={(props.properties.margin.bottom ?? 0).toString()}
onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)} />
<TextInputGroup
key={`${props.properties.id}-mt`}
labelText='Margin top'
inputKey='top'
labelClassName=''
@ -162,6 +172,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value={(props.properties.margin.top ?? 0).toString()}
onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)} />
<TextInputGroup
key={`${props.properties.id}-mr`}
labelText='Margin right'
inputKey='right'
labelClassName=''

4
src/Components/InputGroup/TextInputGroup.tsx
View file

@ -1,6 +1,8 @@
import * as React from 'react';
interface ITextInputGroupProps {
/** Use key the same way as React.Key */
key: string
labelKey?: string
labelText: string
inputKey: string
@ -22,7 +24,7 @@ export function TextInputGroup(props: ITextInputGroupProps): JSX.Element {
React.useEffect(() => {
setValue(props.value);
}, [props.value]);
}, [props.value, props.key]);
function OnKeyUp(event: React.KeyboardEvent): void {
switch (event.key) {