occ-fw-ui/src/components/header.tsx

import "ojs/ojtoolbar";
import "ojs/ojmenu";
import "ojs/ojbutton";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";
import { ojMenu } from "ojs/ojmenu";
import { ojButton } from "ojs/ojbutton";
import { FunctionComponent } from "preact";
import { useRef, useState, useEffect } from "preact/hooks";
import { isLinkItem, isPluginItem, NavigationItem, Plugin } from "../hooks/useQuery";
import { NavigateFunction } from "react-router-dom";

type Props = Readonly<{
  appName: string,
  userLogin: string,
  login: () => void,
  logout: () => void,
  navigate: NavigateFunction;
  navigations: NavigationItem[] | undefined,
  plugins: Plugin[] | undefined
}>;

export const Header: FunctionComponent<Props> = ({ appName, userLogin, login, logout, navigate, navigations, plugins }) => {
  const mediaQueryRef = useRef<MediaQueryList>(window.matchMedia(ResponsiveUtils.getFrameworkQuery("sm-only")));
  const [isSmallWidth, setIsSmallWidth] = useState(mediaQueryRef.current.matches);

  useEffect(() => {
    mediaQueryRef.current.addEventListener("change", handleMediaQueryChange);
    return (() => mediaQueryRef.current.removeEventListener("change", handleMediaQueryChange));
  }, [mediaQueryRef]);

  function handleMediaQueryChange(e: MediaQueryListEvent) {
    setIsSmallWidth(e.matches);
  }

  function getDisplayType() {
    return (isSmallWidth ? "icons" : "all");
  };

  function getEndIconClass() {
    return (isSmallWidth ? "oj-icon demo-appheader-avatar" : "oj-component-icon oj-button-menu-dropdown-icon");
  }

  const loginButtonAction = (_: ojButton.ojAction) => {
    login();
  };

  const userMenuAction = (event: ojMenu.ojMenuAction) => {
    switch (event.detail.selectedValue) {
      case "out":
        logout();
        break;
    }
  };

  const navigationAction = (event: ojMenu.ojMenuAction) => {
    const navItem: NavigationItem = event.detail.selectedValue;
    if (isLinkItem(navItem)) {
      window.open(navItem.path, navItem.openInNewTab ? "_blank" : "_self");
    } else if (isPluginItem(navItem)) {
      // window.location.pathname = plugins.find(p => p.name === navItem.pluginName)?.path;
      navigate(plugins.find(p => p.name === navItem.pluginName)?.path);
    }
  };

  return (
    <header role="banner" class="oj-web-applayout-header">
      <div class="oj-web-applayout-max-width oj-flex-bar oj-sm-align-items-center">
        <div class="oj-flex-bar-middle oj-sm-align-items-baseline">
          <span
            role="img"
            class="oj-icon demo-oracle-icon"
            title="Oracle Logo"
            alt="Oracle Logo"></span>
          <h1
            class="oj-sm-only-hide oj-web-applayout-header-title"
            title="Application Name">
            {appName}
          </h1>
          {navigations &&
            <oj-menu-button id="navMenuButton" display="icons" chroming="borderless">
              <span slot="endIcon" class="oj-ux-ico-leading-increase"></span>
              <oj-menu id="navMenu" slot="menu" onojMenuAction={navigationAction}>
                {navigations.map(nav => (
                  <oj-option value={nav.labelKey}>
                    {nav.labelKey}
                    {nav.children &&
                      <oj-menu>
                        {nav.children.map(navChild => (<oj-option value={navChild}>{navChild.labelKey}</oj-option>))}
                      </oj-menu>
                    }
                  </oj-option>
                ))}
              </oj-menu>
            </oj-menu-button>
          }
        </div>
        <div class="oj-flex-bar-end">
          <oj-toolbar>
            {!userLogin &&
              <oj-button id="chroming_button5" chroming="danger" onojAction={loginButtonAction}>Login</oj-button>
            }
            {userLogin &&
              <oj-menu-button id="userMenu" display={getDisplayType()} chroming="borderless">
                <span>{userLogin}</span>
                <span slot="endIcon" class={getEndIconClass()}></span>
                <oj-menu id="menu1" slot="menu" onojMenuAction={userMenuAction}>
                  <oj-option id="pref" value="pref">Preferences</oj-option>
                  <oj-option id="help" value="help">Help</oj-option>
                  <oj-option id="about" value="about">About</oj-option>
                  <oj-option id="out" value="out">Sign Out</oj-option>
                </oj-menu>
              </oj-menu-button>
            }
          </oj-toolbar>
        </div>
      </div>
    </header>
  );
}