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

Container: Updated id format + add feedback for the selected container

Browse source
This commit is contained in:
Siklos 2022-08-01 11:11:07 +02:00
parent 893b525d45
commit 94c9ac26c0
2 changed files with 8 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/App.tsx
View file

@ -102,7 +102,7 @@ class App extends React.Component<IAppProps> {
const depth: number = Container.getDepth(parent) + 1;
const container = new Container({
parent,
id: `${depth}-${parent.props.children.length.toString()}`,
id: `${type}-${depth}-${parent.props.children.length.toString()}`,
x: 0,
y: 0,
width: properties?.Width,
@ -135,6 +135,7 @@ class App extends React.Component<IAppProps> {
<button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
<SVGSidebar
MainContainer={this.state.MainContainer}
SelectedContainer={this.state.SelectedContainer}
isOpen={this.state.isSVGSidebarOpen}
onClick={() => this.ToggleSVGSidebar()}
selectContainer={(container: Container) => this.SelectContainer(container)}

7
src/Components/SVGSidebar/SVGSidebar.tsx
View file

@ -4,6 +4,7 @@ import { Container } from '../SVG/Elements/Container';
interface ISVGSidebarProps {
MainContainer: Container | null,
isOpen: boolean,
SelectedContainer: Container | null,
onClick: () => void,
selectContainer: (container: Container) => void
}
@ -46,8 +47,12 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
this.iterateChilds((container: Container, depth: number) => {
const key = container.props.id.toString();
const text = '\t\t'.repeat(depth) + key;
const selectedClass: string = this.props.SelectedContainer !== null &&
this.props.SelectedContainer.props.id === container.props.id
? 'bg-blue-500 hover:bg-slate-500'
: 'bg-slate-400 hover:bg-slate-600';
containerRows.push(
<button className='sidebar-row whitespace-pre text-left hover:bg-slate-600 transition-all' key={key} onClick={() => this.props.selectContainer(container)}>
<button className={`sidebar-row whitespace-pre text-left transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>
{ text }
</button>
);