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

Big refactoring with properties + Implement Property

Browse source
This commit is contained in:
Siklos 2022-08-01 16:16:31 +02:00
parent 43fb019e05
commit d2492520b4
5 changed files with 133 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import * as React from 'react';
import { Properties } from '../Properties/Properties';
import { Container } from '../SVG/Elements/Container';
interface IElementsSidebarProps {
@ -6,6 +7,7 @@ interface IElementsSidebarProps {
isOpen: boolean,
SelectedContainer: Container | null,
onClick: () => void,
onPropertyChange: (key: string, value: string) => void,
selectContainer: (container: Container) => void
}
@ -39,10 +41,10 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
const containerRows: React.ReactNode[] = [];
this.iterateChilds((container: Container) => {
const depth: number = Container.getDepth(container);
const key = container.props.id.toString();
const key = container.props.properties.id.toString();
const text = '|\t'.repeat(depth) + key;
const selectedClass: string = this.props.SelectedContainer !== null &&
this.props.SelectedContainer.props.id === container.props.id
this.props.SelectedContainer.props.properties.id === container.props.properties.id
? 'bg-blue-500 hover:bg-blue-600'
: 'bg-slate-400 hover:bg-slate-600';
containerRows.push(
@ -53,7 +55,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
});
return (
<div className={`fixed bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
<div className={`fixed flex flex-col bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
<button className='close-button hover:bg-slate-600 justify-start' onClick={this.props.onClick}>
&times; Close
</button>
@ -63,6 +65,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
<div className='overflow-auto divide-y divide-solid divide-slate-500'>
{ containerRows }
</div>
<Properties properties={this.props.SelectedContainer?.GetProperties()} onChange={this.props.onPropertyChange}></Properties>
</div>
);
}