history#UnregisterCallback TypeScript Examples

export function WorkbenchActionList(
  props: WorkbenchActionListProps
): React.ReactElement {
  const { menu, appId } = props;
  const history = getHistory();
  const [activeIndex, setActiveIndex] = useState<number>();
  const [location, setLocation] = useState<Location>(history.location);

  useEffect(() => {
    const unlisten: UnregisterCallback = history.listen((location) => {
      setLocation(location);
    });
    return unlisten;
  }, []);

  useEffect(() => {
    if (!currentAppId) currentAppId = appId;
    if (currentAppId !== appId) {
      historyMap.clear();
      currentAppId = appId;
    }
  }, [appId]);

  useEffect(() => {
    const { pathname, search } = location;

    const { selectedKeys } = initMenuItemAndMatchCurrentPathKeys(
      menu?.menuItems ?? [],
      pathname,
      search,
      ""
    );
    setActiveIndex(Number(selectedKeys[0]));
  }, [menu, location]);

  const handleLinkClick = (item: SidebarMenuSimpleItem): void => {
    if (item.href) return;
    historyMap.set(activeIndex, `${location.pathname}${location.search}`);
  };

  return (
    <div className={styles.workBenchActionList}>
      {menu?.menuItems
        ?.map((item, index) => {
          if (item.type === "default") {
            let url = item.to;
            if (activeIndex !== index && historyMap.has(index)) {
              url = historyMap.get(index);
            }
            return (
              <WorkbenchAction
                key={index}
                icon={item.icon}
                tooltip={item.text}
                to={url as string}
                href={item.href}
                target={item.target}
                active={activeIndex === index}
                linkClick={() => handleLinkClick(item)}
              />
            );
          }
        })
        .filter(Boolean)}
    </div>
  );
}

export function NavMenu(props: SidebarMenuProps): React.ReactElement {
  const { menuItems } = props;

  const history = getHistory();
  const [location, setLocation] = useState<Location>(history.location);
  const unlisten: UnregisterCallback = history.listen((location) => {
    setLocation(location);
  });
  const { pathname, search } = location;

  const [selectedKey, setSelectedKey] = useState<string[]>([]);

  const setSelected = async (): Promise<void> => {
    const { selectedKeys } = initMenuItemAndMatchCurrentPathKeys(
      menuItems,
      pathname,
      search,
      ""
    );
    setSelectedKey(selectedKeys);
  };

  useEffect(() => {
    setSelected();
    return unlisten;
  }, []);

  const renderSimpleMenuItem = (
    item: SidebarMenuSimpleItem
  ): React.ReactNode => {
    return (
      <Menu.Item
        key={String(item.key)}
        title={item.text}
        className={style.simpleMenuItem}
      >
        <Link to={item.to} href={item.href} target={item.target}>
          <span
            className={classNames(style.menuText, style.simpleMenuItemText)}
          >
            {item.text}
          </span>
        </Link>
      </Menu.Item>
    );
  };

  const renderGroupMenu = (item: SidebarMenuGroup): React.ReactNode => {
    return (
      <Menu.ItemGroup
        key={item.key}
        className={style.groupWrapper}
        title={
          <span className={classNames(style.menuText, style.groupText)}>
            {item.title}
          </span>
        }
      >
        {item.items?.map((innerItem) => renderMenuItem(innerItem))}
      </Menu.ItemGroup>
    );
  };

  const renderSubMenu = (item: SidebarMenuGroup): React.ReactNode => {
    return (
      <Menu.SubMenu
        key={item.key}
        className={style.subMenuWrapper}
        popupClassName={style.popupWrapper}
        title={
          <span className={classNames(style.menuText, style.subMenuTitleText)}>
            {item.title}
          </span>
        }
      >
        {item.items?.map((innerItem) => renderMenuItem(innerItem))}
      </Menu.SubMenu>
    );
  };

  const renderMenuItem = (
    item: SidebarMenuItem,
    showSubMenu?: boolean
  ): React.ReactNode => {
    return isSubMenu(item, showSubMenu)
      ? renderSubMenu(item)
      : isGroup(item)
      ? renderGroupMenu(item)
      : renderSimpleMenuItem(item);
  };

  return (
    <Menu
      mode="horizontal"
      selectedKeys={selectedKey}
      className={style.navMenuContainer}
    >
      {menuItems.map((item) => renderMenuItem(item, true))}
    </Menu>
  );
}

export function SidebarMenu(props: SidebarMenuProps): React.ReactElement {
  const { menuItems, collapsed } = props;

  const history = getHistory();
  const [location, setLocation] = useState<Location>(history.location);
  const unlisten: UnregisterCallback = history.listen((location) => {
    setLocation(location);
  });
  const { pathname, search } = location;

  let { selectedKeys, openedKeys } = initMenuItemAndMatchCurrentPathKeys(
    menuItems,
    pathname,
    search,
    ""
  );
  if (collapsed) {
    openedKeys = [];
  }

  useEffect(() => {
    return unlisten;
  }, []);

  const renderSimpleMenuItem = (
    item: SidebarMenuSimpleItem,
    showEmptyIcon?: boolean
  ): React.ReactNode => {
    return (
      <Menu.Item
        key={String(item.key)}
        title={item.text}
        className={style.simpleMenuItem}
      >
        <Link to={item.to} href={item.href} target={item.target}>
          {showEmptyIcon ? (
            <i className={style.menuItemIcon}></i>
          ) : (
            item.icon && (
              <i className={style.menuItemIcon}>
                <GeneralIcon icon={item.icon} size={14} />
              </i>
            )
          )}
          <span
            className={classNames(style.menuText, style.simpleMenuItemText)}
          >
            {item.text}
          </span>
        </Link>
      </Menu.Item>
    );
  };

  const renderGroupMenu = (
    item: SidebarMenuGroup,
    showEmptyIcon?: boolean
  ): React.ReactNode => {
    return (
      <Menu.ItemGroup
        key={item.key}
        className={style.groupWrapper}
        title={
          <span>
            <i
              className={classNames(style.menuItemIcon, style.groupTitlePoint, {
                [style.hideGroupTitlePoint]: !collapsed || showEmptyIcon,
              })}
            ></i>
            <span className={classNames(style.menuText, style.groupText)}>
              {item.title}
            </span>
          </span>
        }
      >
        {item.items.map((innerItem) =>
          renderMenuItem(innerItem, showEmptyIcon)
        )}
      </Menu.ItemGroup>
    );
  };

  const renderSubMenu = (item: SidebarMenuGroup): React.ReactNode => {
    return (
      <Menu.SubMenu
        key={item.key}
        className={style.subMenuWrapper}
        title={
          <span>
            {item.icon && (
              <i className={style.menuItemIcon}>
                <GeneralIcon icon={item.icon} size={14} />
              </i>
            )}
            <span
              className={classNames(style.menuText, style.subMenuTitleText)}
            >
              {item.title}
            </span>
          </span>
        }
      >
        {item.items.map((innerItem) => renderMenuItem(innerItem, true))}
      </Menu.SubMenu>
    );
  };

  const renderMenuItem = (
    item: SidebarMenuItem,
    showEmptyIcon?: boolean
  ): React.ReactNode => {
    return isSubMenu(item)
      ? renderSubMenu(item)
      : isGroup(item)
      ? renderGroupMenu(item, showEmptyIcon)
      : renderSimpleMenuItem(item, showEmptyIcon);
  };

  return (
    <Menu
      mode="inline"
      defaultOpenKeys={uniq(openedKeys)}
      defaultSelectedKeys={selectedKeys}
      selectedKeys={selectedKeys}
      className={style.menuContainer}
      inlineCollapsed={collapsed}
    >
      {menuItems.map((item) => renderMenuItem(item))}
    </Menu>
  );
}