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

Merged PR 227: Refactor Properties in ContainerProperties

Browse source 
Commit 927934a5: Refactor Style inputs to replace React.CSSProperties by IStyle
This commit is contained in:
Eric Nguyen 2022-11-08 09:09:17 +00:00
parent 6ee4eb2986
commit 1116185b9f
11 changed files with 122 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -21,24 +21,6 @@ interface IContainerFormProps {
onChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void
}
function GetCSSInputs(properties: IContainerProperties,
onChange: (key: string, value: string | number | boolean, type: PropertyType) => void): JSX.Element[] {
const groupInput: JSX.Element[] = [];
for (const key in properties.style) {
groupInput.push(<TextInputGroup
key={key}
id={key}
labelText={key}
inputKey={key}
labelClassName='col-span-2'
inputClassName='col-span-3'
type='string'
value={(properties.style as any)[key]}
onChange={(value) => onChange(key, value, PropertyType.Style)} />);
}
return groupInput;
}
export function ContainerForm(props: IContainerFormProps): JSX.Element {
const categoryHeight = 'h-11';
return (
@ -400,16 +382,73 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
</div>
</Category>
<Category category={{
Type: 'Style',
DisplayedText: Text({ textId: '@ContainerStyle' })
}}
heightClass={`${categoryHeight}`}
>
<div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
{GetCSSInputs(props.properties, props.onChange)}
</div>
</Category>
{ props.properties.style !== undefined &&
<Category category={{
Type: 'Style',
DisplayedText: Text({ textId: '@ContainerStyle' })
}}
heightClass={`${categoryHeight}`}
>
<div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
<TextInputGroup
id={`${props.properties.id}-stroke`}
labelText={Text({ textId: '@StyleStroke' })}
inputKey='stroke'
labelClassName='col-span-2'
inputClassName='col-span-3'
type='string'
value={props.properties.style.stroke ?? 'black'}
onChange={(value) => props.onChange('stroke', value, PropertyType.Style)}
/>
<InputGroup
labelKey={`${props.properties.id}-strokeOpacity`}
labelText={Text({ textId: '@StyleStrokeOpacity' })}
inputKey='strokeOpacity'
labelClassName='col-span-2'
inputClassName='col-span-3'
type='range'
min={0}
max={1}
step={0.01}
value={(props.properties.style.strokeOpacity ?? 1).toString()}
onChange={(event) => props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style)}
/>
<TextInputGroup
id={`${props.properties.id}-strokeWidth`}
labelText={Text({ textId: '@StyleStrokeWidth' })}
inputKey='strokeWidth'
labelClassName='col-span-2'
inputClassName='col-span-3'
type='number'
value={(props.properties.style.strokeWidth ?? 1).toString()}
onChange={(value) => props.onChange('strokeWidth', Number(value), PropertyType.Style)}
/>
<TextInputGroup
id={`${props.properties.id}-fill`}
labelText={Text({ textId: '@StyleFill' })}
inputKey='fill'
labelClassName='col-span-2'
inputClassName='col-span-3'
type='string'
value={props.properties.style.fill ?? 'black'}
onChange={(value) => props.onChange('fill', value, PropertyType.Style)}
/>
<InputGroup
labelKey={`${props.properties.id}-fillOpacity`}
labelText={Text({ textId: '@StyleFillOpacity' })}
inputKey='fillOpacity'
labelClassName='col-span-2'
inputClassName='col-span-3'
type='range'
min={0}
max={1}
step={0.01}
value={(props.properties.style.fillOpacity ?? 1).toString()}
onChange={(event) => props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style)}
/>
</div>
</Category>
}
</div>
);
}