Header

Installation

npm i @cloud-ru/uikit-product-header

Props

Header

type HeaderProps = WithSupportProps<{
  children: ReactNode;
  className?: string;
}>;

MobileHeader

type MobileHeaderProps = {
  children: ReactNode;
  className?: string;
  onMenuClick?(target: HTMLElement): void;
};

MobileMenu

type MobileMenuProps = WithSupportProps<{
  children: ReactNode;
}>;

type MobileMenuReference = {
  toggleOpen(target: HTMLElement): void;
  close(): void;
};

HeaderBalanceTooltip

type HeaderBalanceTooltipProps = WithSupportProps<{
  customBalanceTooltip?: ReactNode;
  balanceVariant?: BalanceVariant;
  balance?: number;
  bonuses?: number;
  bonusesUnit?: string;
  limit?: number;
  onBalanceClick?(): void;
  onRechargeClick?(): void;
  isMobile?: boolean;
}>;

HeaderLogo

type HeaderLogoProps = WithSupportProps<{
  children: ReactNode;
  href: string;
  onClick?(e?: MouseEvent<HTMLAnchorElement>): void;
}>;

HeaderMenu

Root

type HeaderMenuRootProps = WithSupportProps<{
  title: string;
  children: ReactNode;
}>;

Item

type HeaderMenuItemProps = WithSupportProps<{
  icon: ReactElement;
  title: string;
  href: string;
  target?: HTMLAttributeAnchorTarget;
  onClick?: MouseEventHandler<HTMLAnchorElement>;
}>;

HeaderToolbar

Root

type HeaderToolbarRootProps = WithSupportProps<{
  isMobile?: boolean;
  children: ReactNode;
}>;

Item

type HeaderToolbarItemProps = WithSupportProps<{
  className?: string;
  icon: ReactElement;
  title: string;
  href?: string;
  target?: HTMLAttributeAnchorTarget;
  onClick?: MouseEventHandler<HTMLElement>;
  isMobile?: boolean;
}>;

ProfileItem

type HeaderToolbarProfileItemProps = Omit<HeaderToolbarItemProps, 'icon'> & {
  name: string;
  src?: string;
};

ProfileMenu

type HeaderToolbarProfileMenuProps = WithSupportProps<{
  name: string;
  children: ReactNode;
  src?: string;
}>;

ProfileMenuAvatarItem

type HeaderToolbarProfileMenuAvatarItemProps = Omit<HeaderToolbarProfileMenuItemProps, 'icon'>;

ProfileMenuItem

type HeaderToolbarProfileMenuItemProps = WithSupportProps<{
  icon: ReactElement;
  title: string;
  href: string;
  target?: HTMLAttributeAnchorTarget;
  onClick?: MouseEventHandler<HTMLAnchorElement>;
}>;

HeaderProjectSelector

type HeaderProjectSelectorProps = WithSupportProps<{
  value: string;
  items: Item[];
  onChange(value: string): void;
  onCreate?(): void;
  onEdit?(value: string): void;
  createDisabledReason?: string;
  isMobile?: boolean;
}>;

type Item = ProjectGroup | WorkspaceGroup;

type ProjectGroup = {
  label: string;
  projects: ProjectOption[];
};

type ProjectOption = {
  label: string;
  value: string;
  editable?: boolean;
};

type WorkspaceGroup = {
  label: string;
  workspaces: WorkspaceOption[];
};

type WorkspaceOption = {
  label: string;
  value: string;
  editable?: boolean;
};

HeaderProjectDescription

type HeaderProjectDescriptionProps = {
  label: string;
};

Usage

import {
  DocumentationInterfaceSVG,
  NotifyInterfaceSVG,
  QuestionInterfaceSVG,
  SupportInterfaceSVG,
} from '@cloud-ru/uikit-product-icons';
import { Badge } from '@cloud-ru/uikit-product-badge-private';
import { Divider } from '@snack-uikit/divider';
import { PredefinedMLSpaceLogo } from '@cloud-ru/uikit-product-predefined-icons-private';
import {
  Header,
  HeaderBalanceTooltip,
  HeaderLogo,
  HeaderMenu,
  HeaderProjectDescription,
  HeaderProjectSelector,
  HeaderToolbar,
  MobileHeader,
  MobileMenu,
  MobileMenuReference,
} from '@cloud-ru/uikit-product-header';
import { useMatchMedia } from '@cloud-ru/uikit-product-utils';
import { SidebarMobile } from '@cloud-ru/uikit-product-sidebar';

function App() {
  const { isMobile } = useMatchMedia();
  const [workspace, setWorkspace] = useState('workspace-0');
  const mobileMenuRef = useRef<MobileMenuReference>(null);

  function handleLogoClick() {}

  function handleBalanceClick() {}

  function handleRechargeClick() {}

  function handleNotifyClick() {}

  function handleWorkspaceCreate() {}

  function handleWorkspaceChange(workspace: string) {
    setWorkspace(workspace);
  }

  if(isMobile) {
    return (
      <>
        <MobileHeader onMenuClick={target => mobileMenuRef.current?.toggleOpen(target)}>
          <HeaderLogo {...} />
          <HeaderBalanceTooltip isMobile {...} />
        </MobileHeader>
          <MobileMenu ref={mobileMenuRef}>
            <HeaderToolbar.Root isMobile>
              <HeaderToolbar.ProfileItem isMobile {...} />
              <HeaderToolbar.Item isMobile {...} />
            </HeaderToolbar.Root>
            <Divider />
            <HeaderProjectSelector isMobile {...} />
            <SidebarMobile {...} />
          </MobileMenu>
        </>
      );
  }

  return (
    <Header>
      <HeaderMenu.Root title='Платформы'>
        <HeaderMenu.Item icon={<QuestionInterfaceSVG />} title='ML Space' href='/ml-space' />
        <HeaderMenu.Item icon={<QuestionInterfaceSVG />} title='Enterprise' href='/enterprise' />
        <HeaderMenu.Item icon={<QuestionInterfaceSVG />} title='SVP' href='/svp' />
        <HeaderMenu.Item icon={<QuestionInterfaceSVG />} title='Advanced' href='/advanced' />
      </HeaderMenu.Root>
      <HeaderLogo href='/' onClick={handleLogoClick}>
        <PredefinedMLSpaceLogo height={16} />
      </HeaderLogo>
      <HeaderProjectSelector
        onChange={handleWorkspaceChange}
        onCreate={handleWorkspaceCreate}
        value={workspace}
        items={[
          {
            label: 'Ultrimax',
            workspaces: [
              { label: 'Zialactic', value: 'workspace-0' },
              { label: 'Zaggles', value: 'workspace-1' },
              { label: 'Isologia', value: 'workspace-2' },
              { label: 'Undertap', value: 'workspace-3' },
              { label: 'Gluid', value: 'workspace-4' },
              { label: 'Insource', value: 'workspace-5' },
            ],
          },
        ]}
      />
      <HeaderBalanceTooltip
        balance={144_401_810}
        limit={155_500_000}
        onBalanceClick={handleBalanceClick}
        onRechargeClick={handleRechargeClick}
      />
      <HeaderProjectDescription label={'ЗАО "Блачные технологии"'} />
      <HeaderToolbar.Root>
        <HeaderToolbar.Item
          icon={
            <Badge number={2} type={Badge.types.Alert}>
              <NotifyInterfaceSVG />
            </Badge>
          }
          title='Уведомления'
          onClick={handleNotifyClick}
        />
        <HeaderToolbar.Item icon={<DocumentationInterfaceSVG />} title='Документация' href='/documentation' />
        <HeaderToolbar.Item icon={<SupportInterfaceSVG />} title='Поддержка' href='/support' />
        <HeaderToolbar.ProfileMenu name='Андрей Иванов'>
          <HeaderToolbar.ProfileMenuAvatarItem title='Профиль' href='/profile' />
          <HeaderToolbar.ProfileMenuItem icon={<QuestionInterfaceSVG />} title='Выход' href='/logout' />
        </HeaderToolbar.ProfileMenu>
      </HeaderToolbar.Root>
    </Header>
  );
}

Changelog