@primer/react/lib/hooks/useDetails.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');

function useDetails({
  ref,
  closeOnOutsideClick,
  defaultOpen,
  onClickOutside
}) {
  const [open, setOpen] = React.useState(defaultOpen);
  const backupRef = React.useRef(null);
  const customRef = ref !== null && ref !== void 0 ? ref : backupRef;
  const onClickOutsideInternal = React.useCallback(event => {
    const {
      current
    } = customRef;
    const eventTarget = event.target;
    const closest = eventTarget.closest('details');
    if (closest !== current) {
      onClickOutside && onClickOutside(event);
      if (!event.defaultPrevented) {
        setOpen(false);
      }
    }
  }, [customRef, setOpen, onClickOutside]);

  // handles the overlay behavior - closing the menu when clicking outside of it
  React.useEffect(() => {
    if (open && closeOnOutsideClick) {
      document.addEventListener('click', onClickOutsideInternal);
      return () => {
        document.removeEventListener('click', onClickOutsideInternal);
      };
    }
  }, [open, closeOnOutsideClick, onClickOutsideInternal]);
  const handleToggle = e => {
    if (!e.defaultPrevented) {
      const eventTarget = e.target;
      setOpen(eventTarget.open);
    }
  };
  const getDetailsProps = () => {
    return {
      onToggle: handleToggle,
      open,
      ref: customRef
    };
  };
  return {
    open,
    setOpen,
    getDetailsProps
  };
}

module.exports = useDetails;