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

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

@ -39,42 +39,40 @@ function NamespaceTree(props: {
return (
<>
{[...props.namespace.entries()].map(([label, {object, nested}]) => {
const children = (
const nestedChildrenElt = nested && (
<NamespaceTree
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
depth={props.visualIndentation}
// key is useful for navigating react dev component tree
key={'objectPath(' + object.address.objectKey + ')'}
// object entries should not allow this to be undefined
sheetObject={object}
overrideLabel={label}
/>
)
return (
<React.Fragment key={`${label} - ${props.visualIndentation}`}>
{object && (
<ObjectItem
{sameNameElt}
{nestedChildrenElt && (
<BaseItem
selectionStatus="not-selectable"
label={label}
// key necessary for no duplicate keys (next to other React.Fragments)
key={`baseItem(${label})`}
depth={props.visualIndentation}
// key is useful for navigating react dev component tree
key={'objectPath(' + object.address.objectKey + ')'}
// object entries should not allow this to be undefined
sheetObject={object}
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}
children={nestedChildrenElt}
/>
)}
</React.Fragment>
)
return nested ? (
<BaseItem
selectionStatus="not-selectable"
label={label}
// key necessary for no duplicate keys (next to other React.Fragments)
key={`baseItem(${label})`}
depth={props.visualIndentation}
children={children}
/>
) : (
// if we don't have any nested items, just render the children with no wrapper, here.
children
)
})}
</>
)