variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix namespace and object with same name ordering in OutlinePanel (#262)

Browse source 
Fix P-206 namespace and object name rendered in wrong order
This commit is contained in:
Cole Lawrence 2022-07-21 14:04:00 -04:00 committed by GitHub
parent a8176a36f7
commit 00265471ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
theatre/studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx
View file

@ -39,9 +39,15 @@ function NamespaceTree(props: {
return ( return (
<> <>
{[...props.namespace.entries()].map(([label, {object, nested}]) => { {[...props.namespace.entries()].map(([label, {object, nested}]) => {
const children = ( const nestedChildrenElt = nested && (
<React.Fragment key={`${label} - ${props.visualIndentation}`}> <NamespaceTree
{object && ( namespace={nested}
// Question: will there be key conflict if two components have the same labels?
key={'namespaceTree(' + label + ')'}
visualIndentation={props.visualIndentation + 1}
/>
)
const sameNameElt = object && (
<ObjectItem <ObjectItem
depth={props.visualIndentation} depth={props.visualIndentation}
// key is useful for navigating react dev component tree // key is useful for navigating react dev component tree
@ -50,30 +56,22 @@ function NamespaceTree(props: {
sheetObject={object} sheetObject={object}
overrideLabel={label} overrideLabel={label}
/> />
)}
{nested && (
<NamespaceTree
namespace={nested}
// Question: will there be key conflict if two components have the same labels?
key={'namespaceTree(' + label + ')'}
visualIndentation={props.visualIndentation + 1}
/>
)}
</React.Fragment>
) )
return nested ? ( return (
<React.Fragment key={`${label} - ${props.visualIndentation}`}>
{sameNameElt}
{nestedChildrenElt && (
<BaseItem <BaseItem
selectionStatus="not-selectable" selectionStatus="not-selectable"
label={label} label={label}
// key necessary for no duplicate keys (next to other React.Fragments) // key necessary for no duplicate keys (next to other React.Fragments)
key={`baseItem(${label})`} key={`baseItem(${label})`}
depth={props.visualIndentation} depth={props.visualIndentation}
children={children} children={nestedChildrenElt}
/> />
) : ( )}
// if we don't have any nested items, just render the children with no wrapper, here. </React.Fragment>
children
) )
})} })}
</> </>