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

Fix missing key for cssinput

Browse source
This commit is contained in:
Eric NGUYEN 2022-09-14 11:25:54 +02:00
parent 7494383f58
commit b62aee978b
2 changed files with 14 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -23,6 +23,7 @@ function GetCSSInputs(properties: IContainerProperties,
for (const key in properties.style) {
groupInput.push(<TextInputGroup
key={key}
id={key}
labelText={key}
inputKey={key}
labelClassName=''
@ -62,7 +63,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value={props.properties.type}
isDisabled={true} />
<TextInputGroup
key={`${props.properties.id}-displayedText`}
id={`${props.properties.id}-displayedText`}
labelText='Displayed text'
inputKey='displayedText'
labelClassName=''
@ -71,7 +72,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`}
id={`${props.properties.id}-x`}
labelText='x'
inputKey='x'
labelClassName=''
@ -91,7 +92,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
)
)} />
<TextInputGroup
key={`${props.properties.id}-y`}
id={`${props.properties.id}-y`}
labelText='y'
inputKey='y'
labelClassName=''
@ -100,7 +101,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`}
id={`${props.properties.id}-minWidth`}
labelText='Minimum width'
inputKey='minWidth'
labelClassName=''
@ -110,7 +111,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`}
id={`${props.properties.id}-maxWidth`}
labelText='Maximum width'
inputKey='maxWidth'
labelClassName=''
@ -120,7 +121,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`}
id={`${props.properties.id}-width`}
labelText='Width'
inputKey='width'
labelClassName=''
@ -132,7 +133,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`}
id={`${props.properties.id}-height`}
labelText='Height'
inputKey='height'
labelClassName=''
@ -142,7 +143,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`}
id={`${props.properties.id}-ml`}
labelText='Margin left'
inputKey='left'
labelClassName=''
@ -152,7 +153,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`}
id={`${props.properties.id}-mb`}
labelText='Margin bottom'
inputKey='bottom'
labelClassName=''
@ -162,7 +163,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`}
id={`${props.properties.id}-mt`}
labelText='Margin top'
inputKey='top'
labelClassName=''
@ -172,7 +173,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`}
id={`${props.properties.id}-mr`}
labelText='Margin right'
inputKey='right'
labelClassName=''

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

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