umami/components/common/DropDown.js

import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Menu from './Menu';
import useDocumentClick from 'hooks/useDocumentClick';
import Chevron from 'assets/chevron-down.svg';
import styles from './Dropdown.module.css';
import Icon from './Icon';

function DropDown({ value, className, menuClassName, options = [], onChange = () => {} }) {
  const [showMenu, setShowMenu] = useState(false);
  const ref = useRef();
  const selectedOption = options.find(e => e.value === value);

  function handleShowMenu() {
    setShowMenu(state => !state);
  }

  function handleSelect(selected, e) {
    e.stopPropagation();
    setShowMenu(false);

    onChange(selected);
  }

  useDocumentClick(e => {
    if (!ref.current?.contains(e.target)) {
      setShowMenu(false);
    }
  });

  return (
    <div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}>
      <div className={styles.value}>
        <div className={styles.text}>{options.find(e => e.value === value)?.label || value}</div>
        <Icon icon={<Chevron />} className={styles.icon} size="small" />
      </div>
      {showMenu && (
        <Menu
          className={menuClassName}
          options={options}
          selectedOption={selectedOption}
          onSelect={handleSelect}
          float="bottom"
        />
      )}
    </div>
  );
}

DropDown.propTypes = {
  value: PropTypes.any,
  className: PropTypes.string,
  menuClassName: PropTypes.string,
  options: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.any.isRequired,
      label: PropTypes.node,
    }),
  ),
  onChange: PropTypes.func,
};

export default DropDown;