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

SVGSidebar: Improve style with depth

Browse source
This commit is contained in:
Siklos 2022-08-01 01:01:52 +02:00
parent 3cd86d1bff
commit 0a7b6e5204
1 changed files with 23 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,7 @@ interface ISVGSidebarProps {
} }
export class SVGSidebar extends React.Component<ISVGSidebarProps> { export class SVGSidebar extends React.Component<ISVGSidebarProps> {
public iterateChilds(handleContainer: (container: Container) => void): React.ReactNode { public iterateChilds(handleContainer: (container: Container, depth: number) => void): React.ReactNode {
const root = this.props.MainContainer; const root = this.props.MainContainer;
if (!root) { if (!root) {
return null; return null;
@ -16,10 +16,14 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
const queue = [root]; const queue = [root];
const visited = new Set([root]); const visited = new Set([root]);
let depth = 0;
while (queue.length > 0) { while (queue.length > 0) {
let size = queue.length;
while (size-- > 0) {
const container = queue.shift() as Container; const container = queue.shift() as Container;
handleContainer(container); handleContainer(container, depth);
container.props.children.forEach((child) => { container.props.children.forEach((child) => {
if (visited.has(child)) { if (visited.has(child)) {
@ -29,17 +33,20 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
queue.push(child); queue.push(child);
}); });
} }
depth++;
}
} }
public render() { public render() {
const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64'; const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
const containerRows: React.ReactNode[] = []; const containerRows: React.ReactNode[] = [];
this.iterateChilds((container: Container) => { this.iterateChilds((container: Container, depth: number) => {
const key = container.props.id.toString(); const key = container.props.id.toString();
const text = '\t\t'.repeat(depth) + key;
containerRows.push( containerRows.push(
<button className='hover:bg-slate-600 transition-all sidebar-row' key={key} > <button className='sidebar-row whitespace-pre text-left hover:bg-slate-600 transition-all' key={key}>
{ key } { text }
</button> </button>
); );
}); });
@ -52,8 +59,10 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
<div className='bg-slate-500 sidebar-row'> <div className='bg-slate-500 sidebar-row'>
Liste des éléments Liste des éléments
</div> </div>
<div className='overflow-auto divide-y divide-solid'>
{ containerRows } { containerRows }
</div> </div>
</div>
); );
} }
} }