github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/ui/Dropdown.tsx (about)

     1  import React from 'react';
     2  import {
     3    ClickEvent,
     4    Menu,
     5    MenuProps,
     6    MenuHeader,
     7    SubMenu as LibSubmenu,
     8    MenuItem as LibMenuItem,
     9    MenuButton as LibMenuButton,
    10    FocusableItem as LibFocusableItem,
    11    MenuGroup as LibMenuGroup,
    12  } from '@szhsin/react-menu';
    13  
    14  import cx from 'classnames';
    15  import styles from './Dropdown.module.scss';
    16  
    17  export interface DropdownProps {
    18    id?: string;
    19  
    20    /** Whether the button is disabled or not */
    21    disabled?: boolean;
    22    ['data-testid']?: string;
    23    className?: string;
    24    menuButtonClassName?: string;
    25  
    26    /** Dropdown label */
    27    label: string;
    28  
    29    /** Dropdown value*/
    30    value?: string;
    31  
    32    children?: JSX.Element[] | JSX.Element;
    33  
    34    /** Event that fires when an item is activated*/
    35    onItemClick?: (event: ClickEvent) => void;
    36  
    37    overflow?: MenuProps['overflow'];
    38    position?: MenuProps['position'];
    39    direction?: MenuProps['direction'];
    40    align?: MenuProps['align'];
    41    viewScroll?: MenuProps['viewScroll'];
    42    arrow?: MenuProps['arrow'];
    43    offsetX?: MenuProps['offsetX'];
    44    offsetY?: MenuProps['offsetY'];
    45  
    46    ariaLabel?: MenuProps['aria-label'];
    47  
    48    menuButton?: JSX.Element;
    49  
    50    portal?: MenuProps['portal'];
    51  }
    52  
    53  export default function Dropdown({
    54    id,
    55    children,
    56    className,
    57    disabled,
    58    value,
    59    label,
    60    onItemClick,
    61    overflow,
    62    position,
    63    direction,
    64    align,
    65    viewScroll,
    66    arrow,
    67    offsetX,
    68    offsetY,
    69    menuButtonClassName = '',
    70    ariaLabel,
    71    portal,
    72    ...props
    73  }: DropdownProps) {
    74    const menuButtonComponent = props.menuButton || (
    75      <MenuButton
    76        aria-label={ariaLabel}
    77        className={`${styles.dropdownMenuButton} ${menuButtonClassName}`}
    78        disabled={disabled}
    79        type="button"
    80      >
    81        {value || label}
    82      </MenuButton>
    83    );
    84  
    85    return (
    86      <Menu
    87        id={id}
    88        aria-label={ariaLabel}
    89        className={cx(className, styles.dropdownMenu)}
    90        data-testid={props['data-testid']}
    91        onItemClick={onItemClick}
    92        overflow={overflow}
    93        position={position}
    94        direction={direction}
    95        align={align}
    96        viewScroll={viewScroll}
    97        arrow={arrow}
    98        offsetX={offsetX}
    99        offsetY={offsetY}
   100        menuButton={menuButtonComponent}
   101        portal={portal}
   102      >
   103        <MenuHeader>{label}</MenuHeader>
   104        {children}
   105      </Menu>
   106    );
   107  }
   108  
   109  export const SubMenu = LibSubmenu;
   110  export const MenuItem = LibMenuItem;
   111  export const MenuButton = LibMenuButton as ShamefulAny;
   112  export const FocusableItem = LibFocusableItem;
   113  export const MenuGroup = LibMenuGroup;