umami/components/common/Menu.js

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './Menu.module.css';

function Menu({
  options = [],
  selectedOption,
  className,
  float,
  align = 'left',
  optionClassName,
  selectedClassName,
  onSelect = () => {},
}) {
  return (
    <div
      className={classNames(styles.menu, className, {
        [styles.float]: float,
        [styles.top]: float === 'top',
        [styles.bottom]: float === 'bottom',
        [styles.left]: align === 'left',
        [styles.right]: align === 'right',
      })}
    >
      {options
        .filter(({ hidden }) => !hidden)
        .map(option => {
          const { label, value, className: customClassName, render, divider } = option;

          return render ? (
            render(option)
          ) : (
            <div
              key={value}
              className={classNames(styles.option, optionClassName, customClassName, {
                [selectedClassName]: selectedOption === option,
                [styles.selected]: selectedOption === option,
                [styles.divider]: divider,
              })}
              onClick={e => onSelect(value, e)}
            >
              {label}
            </div>
          );
        })}
    </div>
  );
}

Menu.propTypes = {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.node,
      value: PropTypes.any,
      className: PropTypes.string,
      render: PropTypes.func,
      divider: PropTypes.bool,
    }),
  ),
  selectedOption: PropTypes.any,
  className: PropTypes.string,
  float: PropTypes.oneOf(['top', 'bottom']),
  align: PropTypes.oneOf(['left', 'right']),
  optionClassName: PropTypes.string,
  selectedClassName: PropTypes.string,
  onSelect: PropTypes.func,
};

export default Menu;