Add useClickAway hook

Author: lyzadanger

src/hooks/test/use-click-away-test.js

@@ -0,0 +1,67 @@
+import { mount } from 'enzyme';
+import { useRef } from 'preact/hooks';
+import { act } from 'preact/test-utils';
+
+import { useClickAway } from '../use-click-away';
+
+describe('useClickAway', () => {
+  let handler;
+
+  const events = [new Event('mousedown'), new Event('click')];
+
+  // Create a fake component to mount in tests that uses the hook
+  function FakeComponent({ enabled = true }) {
+    const myRef = useRef();
+    useClickAway(myRef, handler, { enabled });
+    return (
+      <div ref={myRef}>
+        <button>Hi</button>
+      </div>
+    );
+  }
+
+  function createComponent(props) {
+    return mount(<FakeComponent {...props} />);
+  }
+
+  beforeEach(() => {
+    handler = sinon.stub();
+  });
+
+  events.forEach(event => {
+    it(`should invoke callback once for events outside of element (${event.type})`, () => {
+      const wrapper = createComponent();
+
+      act(() => {
+        document.body.dispatchEvent(event);
+      });
+      wrapper.update();
+
+      assert.calledOnce(handler);
+
+      wrapper.setProps({ enabled: false });
+
+      act(() => {
+        document.body.dispatchEvent(event);
+      });
+
+      // Cleanup of hook should have removed eventListeners, so the callback
+      // is not called again
+      assert.calledOnce(handler);
+    });
+  });
+
+  events.forEach(event => {
+    it(`should not invoke callback on events inside of container (${event.type})`, () => {
+      const wrapper = createComponent();
+      const button = wrapper.find('button');
+
+      act(() => {
+        button.getDOMNode().dispatchEvent(event);
+      });
+      wrapper.update();
+
+      assert.equal(handler.callCount, 0);
+    });
+  });
+});

src/hooks/use-click-away.ts

@@ -0,0 +1,44 @@
+import type { RefObject } from 'preact';
+import { useEffect } from 'preact/hooks';
+
+import { ListenerCollection } from '../util/listener-collection';
+
+type UseClickAwayOptions = {
+  /** Enable listening for away-click events? Can be set to false to disable */
+  enabled?: boolean;
+};
+
+/**
+ * Listen on document.body for click events. If a click event's target is
+ * outside of the `container` element, invoke the `callback`. Do not listen if
+ * not `enabled`.
+ */
+export function useClickAway(
+  container: RefObject<HTMLElement | undefined>,
+  callback: (e: Event) => void,
+  { enabled = true }: UseClickAwayOptions = {}
+) {
+  useEffect(() => {
+    if (!enabled) {
+      return () => {};
+    }
+    const target = document.body;
+    const listeners = new ListenerCollection();
+
+    const handleAwayClick = (event: Event) => {
+      if (
+        container.current &&
+        !container.current.contains(event.target as Node)
+      ) {
+        callback(event);
+      }
+    };
+
+    listeners.add(target, 'mousedown', handleAwayClick);
+    listeners.add(target, 'click', handleAwayClick);
+
+    return () => {
+      listeners.removeAll();
+    };
+  }, [container, enabled, callback]);
+}