Function parseContextMenuAsReactNode

packages/utils/src/context-menu.tsx:66–122

(menus: IPublicTypeContextMenuItem[], options: IOptions)

let destroyFn: Function | undefined;

export function parseContextMenuAsReactNode(menus: IPublicTypeContextMenuItem[], options: IOptions): React.ReactNode[] {
  const { common, commonUI } = options.pluginContext || {};
  const { intl = (title: any) => title } = common?.utils || {};
  const { HelpTip } = commonUI || {};

  const children: React.ReactNode[] = [];
  menus.forEach((menu, index) => {
    if (menu.type === IPublicEnumContextMenuType.SEPARATOR) {
      children.push(<Divider key={menu.name || index} />);
      return;
    }

    if (menu.type === IPublicEnumContextMenuType.MENU_ITEM) {
      if (menu.items && menu.items.length) {
        children.push((
          <PopupItem
            className={classNames('engine-context-menu-item', {
              disabled: menu.disabled,
            })}
            key={menu.name}
            label={<div className="engine-context-menu-text">{intl(menu.title)}</div>}
          >
            <Menu className="next-context engine-context-menu">
              { parseContextMenuAsReactNode(menu.items, options) }
            </Menu>
          </PopupItem>
        ));
      } else {
        children.push((
          <Item
            className={classNames('engine-context-menu-item', {
              disabled: menu.disabled,
            })}
            disabled={menu.disabled}
            onClick={() => {
              menu.action?.();
            }}
            key={menu.name}
          >
            <div className="engine-context-menu-text">
              { menu.title ? intl(menu.title) : null }
              { menu.help ? <HelpTip size="xs" help={menu.help} direction="right" /> : null }
            </div>
          </Item>
        ));
      }
    }

    if (menu.type === IPublicEnumContextMenuType.NODE_TREE) {
      children.push((
        <Tree node={options.nodes?.[0]} options={options} />
      ));
    }
  });

  return children;
}