render()

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>;
  }