ProductGrid

components/ui/ClickOutside/ClickOutside.tsx

@@ -4,35 +4,48 @@ import React, {
   useEffect,
   useRef,
 } from "react";
-import { findDOMNode } from "react-dom";
+
+import { Component } from "react";
+import PropTypes from "prop-types";
 
 export interface ClickOutsideProps {
   onClickOutside: (e?: MouseEvent) => void;
   children: React.ReactNode | any;
+  render: () => void;
 }
 
-const ClickOutside: FunctionComponent<ClickOutsideProps> = ({
-  children,
-  onClickOutside,
-}) => {
-  let node = useRef(null);
+export default class ClickOutside extends Component<ClickOutsideProps> {
+  public domNode: Element | null = null;
 
-  const handleClick = (e: MouseEvent) => {
-    console.log("eeee");
-    if (!e || !node.current.contains(e.target as HTMLInputElement)) {
-      console.log("eeee");
-      // onClickOutside && onClickOutside(e);
+  handleRef = (element) => {
+    this.domNode = element;
+  };
+
+  public componentDidMount() {
+    document.addEventListener("click", this.handleClick, true);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClick, true);
+    document.removeEventListener("touchstart", this.handleClick, true);
+  }
+
+  public handleClick = (event) => {
+    function hasParent(element, root) {
+      return root && root.contains(element);
+    }
+
+    if (!hasParent(event.target, this.domNode)) {
+      if (typeof this.props.onClickOutside === "function") {
+        this.props.onClickOutside(event);
+      }
     }
   };
 
-  useEffect(() => {
-    document.addEventListener("click", handleClick, true);
-    return () => {
-      document.removeEventListener("click", handleClick);
-    };
-  });
-
-  return children;
-};
-
-export default ClickOutside;
+  render() {
+    return null;
+    // return this.props.render({
+    //   innerRef: this.handleRef,
+    // });
+  }
+}

components/ui/Sidebar/Sidebar.tsx

@@ -5,21 +5,13 @@ import s from "./Sidebar.module.css";
 interface Props {
   className?: string;
   children?: any;
-  closeSidebar: () => void;
 }
 
-const Sidebar: FunctionComponent<Props> = ({
-  className,
-  children,
-  closeSidebar,
-}) => {
+const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className);
   return (
     <div className={rootClassName}>
-      <div
-        className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25"
-        onClick={closeSidebar}
-      >
+      <div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25">
         <div className="absolute inset-0 overflow-hidden">
           <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
             <div className="w-screen max-w-2xl">

components/ui/index.ts

@@ -2,4 +2,3 @@ export { default as Button } from "./Button";
 export { default as Container } from "./Container";
 export { default as Sidebar } from "./Sidebar";
 export { default as Logo } from "./Logo";
-export { default as ClickOutside } from "./ClickOutside";

components/ui/types.ts

@@ -0,0 +1 @@
+export type Colors = "violet" | "black" | "pink" | "white";