renderBreadcrumb()

in packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx [55:134]
75 lines of code
13 McCabe index (conditional complexity)

  renderBreadcrumb() {
    const { settings, editor } = this.main;
    // const shouldIgnoreRoot = config.props?.ignoreRoot;
    const { shouldIgnoreRoot } = this.state;
    if (!settings) {
      return null;
    }
    if (settings.isMultiple) {
      return (
        <div className="lc-settings-navigator">
          {createIcon(settings.componentMeta?.icon, {
            className: 'lc-settings-navigator-icon',
          })}
          <div style={{ marginLeft: '5px' }}>
            <Title title={settings.componentMeta!.title} />
            <span> x {settings.nodes.length}</span>
          </div>
        </div>
      );
    }

    const designer = editor.get('designer');
    const current = designer?.currentSelection?.getNodes()?.[0];
    let node: INode | null = settings.first;
    const focusNode = node.document?.focusNode;

    const items = [];
    let l = 3;
    while (l-- > 0 && node) {
      const _node = node;
      // dirty code: should remove
      if (shouldIgnoreRoot && node.isRoot()) {
        break;
      }
      if (focusNode && node.contains(focusNode)) {
        l = 0;
      }
      const props =
        l === 2
          ? {}
          : {
            onMouseOver: hoverNode.bind(null, _node, true),
            onMouseOut: hoverNode.bind(null, _node, false),
            onClick: () => {
              if (!_node) {
                return;
              }
              selectNode.call(null, _node);
              const getName = (node: any) => {
                const npm = node?.componentMeta?.npm;
                return [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
                  node?.componentMeta?.componentName ||
                  '';
              };
              const selected = getName(current);
              const target = getName(_node);
              editor?.eventBus.emit('skeleton.settingsPane.Breadcrumb', {
                selected,
                target,
              });
            },
          };
      items.unshift(
        <Breadcrumb.Item {...props} key={node.id}>
          <Title title={node.title} />
        </Breadcrumb.Item>,
      );
      node = node.parent;
    }

    return (
      <div className="lc-settings-navigator">
        {createIcon(this.main.componentMeta?.icon, {
          className: 'lc-settings-navigator-icon',
          class: 'lc-settings-navigator-icon',
        })}
        <Breadcrumb className="lc-settings-node-breadcrumb">{items}</Breadcrumb>
      </div>
    );
  }