@spaced-out/ui-design-system/lib/components/SubMenu/SubMenu.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import classify from '../../utils/classify';
import {Button} from '../Button';
import type {IconSize, IconType} from '../Icon';
import {Icon} from '../Icon';
import {SubTitleMedium, TEXT_COLORS} from '../Text';

import css from './SubMenu.module.css';


type ClassNames = $ReadOnly<{wrapper?: string}>;

export type SubMenuProps = {
  classNames?: ClassNames,
  title: string,
  titleIcon?: string,
  titleIconSize?: IconSize,
  titleIconType?: IconType,
  children?: React.Node,
  onClose?: () => mixed,
  showClose?: boolean,
};

export const SubMenu: React$AbstractComponent<SubMenuProps, HTMLDivElement> =
  React.forwardRef<SubMenuProps, HTMLDivElement>(
    (
      {
        classNames,
        children,
        title,
        titleIcon,
        titleIconSize,
        titleIconType,
        onClose,
        showClose = false,
      }: SubMenuProps,
      ref,
    ): React.Node => {
      const childrenWithProps = React.Children.map(children, (child) => {
        if (React.isValidElement(child)) {
          return (
            <div className={css.menuChildWrap}>
              {React.cloneElement(child, {})}
            </div>
          );
        }
      });

      return (
        <div
          className={classify(css.subMenuWrapper, classNames?.wrapper)}
          ref={ref}
        >
          <div className={css.subMenuTitleAndButton}>
            <div className={css.subMenuTitleWrapper}>
              {!!titleIcon && (
                <Icon
                  color={TEXT_COLORS.inverseSecondary}
                  name={titleIcon}
                  type={titleIconType}
                  size={titleIconSize}
                  className={css.titleIcon}
                />
              )}
              <SubTitleMedium
                className={css.subMenuHeader}
                color={TEXT_COLORS.inversePrimary}
              >
                {title}
              </SubTitleMedium>
            </div>
            {showClose && (
              <Button
                ariaLabel="Icon Button"
                iconRightName="close"
                onClick={onClose}
                size="small"
                type="ghost"
                actionType="button"
                classNames={{
                  wrapper: css.subMenuCloseButton,
                  icon: css.subMenuCloseIcon,
                }}
              />
            )}
          </div>
          {childrenWithProps}
        </div>
      );
    },
  );

SubMenu.displayName = 'SubMenu';