viewfinder/packages/react/src/widgets/LeftSidebarWithMenuBase/index.tsx

// TODO figure out how to refactor left sidebar with menu widget

import * as React from 'react';
import {LayoutArgs, layouts, Span} from '@tesseract-design/viewfinder-base';

type BaseMenuItem = {
  label: React.ReactNode,
  icon: React.ReactNode,
  url: unknown,
}

export type MenuItem = BaseMenuItem & {
  id: string,
  secondary?: boolean,
}

export type LeftSidebarWithMenuBaseProps = Omit<React.HTMLProps<HTMLDivElement>, 'span'> & {
  span?: Span,
  items?: MenuItem[],
  linkComponent?: React.ElementType,
  moreLinkComponent?: React.ElementType,
  moreLinkItem?: BaseMenuItem,
  moreItemsOpen?: boolean,
  open?: boolean,
}

export const LeftSidebarWithMenuBase = React.forwardRef<HTMLDivElement, LeftSidebarWithMenuBaseProps>(({
  children,
  span = Span.WIDE,
  open = false,
  items: sidebarMenuItems = [],
  linkComponent: LinkComponent = 'a',
  moreLinkComponent: MoreLinkComponent = LinkComponent,
  moreLinkItem,
  moreItemsOpen = false,
  ...etcProps
}, ref) => {
  const args: LayoutArgs = {
    span,
    mainSidebarOpen: open,
		auxiliaryItemsShown: moreItemsOpen,
  };

  const primarySidebarMenuItems = sidebarMenuItems.filter(s => !s.secondary)
  const secondarySidebarMenuItems = sidebarMenuItems.filter(s => s.secondary)

  const visibleSecondarySidebarMenuItems = secondarySidebarMenuItems.slice(0, 1)
  const moreSecondarySidebarMenuItems = secondarySidebarMenuItems.slice(1)
  const visiblePrimarySidebarMenuItems = (
    visibleSecondarySidebarMenuItems.length === 1
      ? primarySidebarMenuItems.slice(0, 3)
      : primarySidebarMenuItems.slice(0, 4)
  )
  const morePrimarySidebarMenuItems = (
    visibleSecondarySidebarMenuItems.length === 1
      ? primarySidebarMenuItems.slice(3)
      : primarySidebarMenuItems.slice(4)
  )
  const hasMoreSidebarMenuItems = (
    morePrimarySidebarMenuItems.length > 0
    || moreSecondarySidebarMenuItems.length > 0
  )

  return (
    <div
      className={layouts.LeftSidebarWithMenu.SidebarBase()}
      {...etcProps}
      ref={ref}
    >
      <div
        className={layouts.LeftSidebarWithMenu.SidebarMenu()}
      >
        <div>
          <div
            className={layouts.LeftSidebarWithMenu.SidebarMenuSize()}
          >
            <div
              className={layouts.LeftSidebarWithMenu.SidebarMenuGroup()}
            >
              {visiblePrimarySidebarMenuItems.map(({ id, ...item }) => (
                <span
                  className={layouts.LeftSidebarWithMenu.SidebarMenuItem()}
                  key={id}
                >
                  <LinkComponent
                    {...item}
                  />
                </span>
              ))}
            </div>
            <div
              className={layouts.LeftSidebarWithMenu.MoreItems(args)}
            >
              <div
                className={layouts.LeftSidebarWithMenu.MoreItemsScroll()}
              >
                <div
                  className={layouts.LeftSidebarWithMenu.MorePrimarySidebarMenuGroup()}
                >
                  {morePrimarySidebarMenuItems.map(({ id, ...item }) => (
                    <span
                      className={layouts.LeftSidebarWithMenu.MoreSidebarMenuItem()}
                      key={id}
                    >
                      <MoreLinkComponent
                        {...item}
                      />
                    </span>
                  ))}
                </div>
                <div
                  className={layouts.LeftSidebarWithMenu.MoreSecondarySidebarMenuGroup()}
                >
                  {moreSecondarySidebarMenuItems.map(({ id, ...item }) => (
                    <span
                      className={layouts.LeftSidebarWithMenu.MoreSidebarMenuItem()}
                      key={id}
                    >
                      <MoreLinkComponent
                        {...item}
                      />
                    </span>
                  ))}
                </div>
              </div>
            </div>
            {hasMoreSidebarMenuItems && (
              <span
                className={layouts.LeftSidebarWithMenu.MoreToggleSidebarMenuItem()}
              >
                <span
                  className={layouts.LeftSidebarWithMenu.SidebarMenuItem()}
                >
                  <LinkComponent
                    {...moreLinkItem}
                  />
                </span>
              </span>
            )}
            {visibleSecondarySidebarMenuItems.length > 0 && (
              <div
                className={layouts.LeftSidebarWithMenu.SidebarMenuGroup()}
              >
                {visibleSecondarySidebarMenuItems.map(({ id, ...item }) => (
                  <span
                    className={layouts.LeftSidebarWithMenu.SidebarMenuItem()}
                    key={id}
                  >
                  <LinkComponent
                    {...item}
                  />
                </span>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
      {children && (
        <div
          className={layouts.LeftSidebarWithMenu.SidebarMain(args)}
        >
          <div
            className={layouts.LeftSidebarWithMenu.SidebarMainOverflow()}
          >
            {children}
          </div>
        </div>
      )}
    </div>
  )
});