8b8d88f885
Implement symbols - Add, Remove, Select Container - Form - Link with container - Symbol behavior application to container (move to x with xpositionreference) Important changes - Remove SelectedContainer from HistoryState, meaning that it will be slower for each load but will be faster for each operations* (SetHistory, SelectContainer, DeleteContainer, SymbolOperations) - ElementsSidebar now opens with isSidebarOpen meaning that both sidebar will open on toggle - Moved camelize, transformX, restoreX to different modules (stringtools.ts, svg.ts)
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import IContainerProperties from '../../Interfaces/IContainerProperties';
|
|
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
|
import { ToggleButton } from '../ToggleButton/ToggleButton';
|
|
import { Form } from './Form';
|
|
|
|
interface IPropertiesProps {
|
|
properties?: IContainerProperties
|
|
symbols: Map<string, ISymbolModel>
|
|
onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
|
|
onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
|
|
}
|
|
|
|
export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps) => {
|
|
const [isDynamicInput, setIsDynamicInput] = useState<boolean>(true);
|
|
|
|
if (props.properties === undefined) {
|
|
return <div></div>;
|
|
}
|
|
|
|
return (
|
|
<div className='h-3/5 p-3 bg-slate-200 overflow-y-auto'>
|
|
<ToggleButton
|
|
id='isDynamic'
|
|
text='Dynamic update'
|
|
title='Enable dynamic svg update'
|
|
checked={isDynamicInput}
|
|
onChange={() => setIsDynamicInput(!isDynamicInput)}
|
|
/>
|
|
<Form
|
|
properties={props.properties}
|
|
symbols={props.symbols}
|
|
isDynamicInput={isDynamicInput}
|
|
onChange={props.onChange}
|
|
onSubmit={props.onSubmit}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|