React higher order component to add "click outside" events to elements

with-click-outside.ts

import React, { MouseEvent, PureComponent } from 'react';

interface Props {
  onClickOutside: () => any;
}

// @TODO: element should be constrained to 'keyof ReactHTML' but this causes some crazy memory leak
export const withClickOutside = (element: string) => {
  const Element = element;

  // Props should include those from ReactHTML props / attributes
  class WithClickOutside extends PureComponent<Props> {
    private clicked: boolean = false;

    public componentDidMount() {
      window.addEventListener('click', this.windowClick);
    }

    public componentWillUnmount() {
      window.removeEventListener('click', this.windowClick);
    }

    public render() {
      const { children } = this.props;

      return (
        <Element onClick={this.onClick}>
          {children}
        </Element>
      );
    }

    private onClick = (event: MouseEvent) => {
      this.clicked = true;

      if (this.props.onClick) {
        this.props.onClick(event);
      }
    }

    private windowClick = () => {
      if (!this.clicked) {
        this.props.onClickOutside();
      }

      this.clicked = false;
    }
  }

  return WithClickOutside;
};




export const ClickOutsideDiv = withClickOutside('div');