in packages/plugin-outline-pane/src/views/tree-branches.tsx [116:187]
render() {
const { isModal } = this.props;
const children: any = [];
let groupContents: any[] = [];
let currentGrp: IPublicModelExclusiveGroup;
const { filterWorking, matchSelf, keywords } = this.state;
const Title = this.props.treeNode.pluginContext.common.editorCabin.Title;
const endGroup = () => {
if (groupContents.length > 0) {
children.push(
<div key={currentGrp.id} className="condition-group-container" data-id={currentGrp.firstNode?.id}>
<div className="condition-group-title">
{/* @ts-ignore */}
<Title
title={currentGrp.title}
match={filterWorking && matchSelf}
keywords={keywords}
/>
</div>
{groupContents}
</div>,
);
groupContents = [];
}
};
const { dropDetail } = this.state;
const dropIndex = dropDetail?.index;
const insertion = (
<div
key="insertion"
className={classNames('insertion', {
invalid: dropDetail?.valid === false,
})}
/>
);
this.props.treeChildren?.forEach((child, index) => {
const childIsModal = child.node.componentMeta?.isModal || false;
if (isModal != childIsModal) {
return;
}
const { conditionGroup } = child.node;
if (conditionGroup !== currentGrp) {
endGroup();
}
if (conditionGroup) {
currentGrp = conditionGroup;
if (index === dropIndex) {
if (groupContents.length > 0) {
groupContents.push(insertion);
} else {
children.push(insertion);
}
}
groupContents.push(<TreeNodeView key={child.nodeId} treeNode={child} isModal={isModal} />);
} else {
if (index === dropIndex) {
children.push(insertion);
}
children.push(<TreeNodeView key={child.nodeId} treeNode={child} isModal={isModal} />);
}
});
endGroup();
const length = this.props.treeChildren?.length || 0;
if (dropIndex != null && dropIndex >= length) {
children.push(insertion);
}
return <div className="tree-node-children">{children}</div>;
}