From 67cfc422b474cc23cfc370b2de0bf002fca77a80 Mon Sep 17 00:00:00 2001
From: Vyrtsev Mikhail <reeywhaar@gmail.com>
Date: Sun, 7 Jul 2019 17:14:21 +0300
Subject: [PATCH] add onOpen/onClose props

---
 frontend/app/components/dropdown/dropdown.tsx | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/frontend/app/components/dropdown/dropdown.tsx b/frontend/app/components/dropdown/dropdown.tsx
index 10e0fe55..e0305c89 100644
--- a/frontend/app/components/dropdown/dropdown.tsx
+++ b/frontend/app/components/dropdown/dropdown.tsx
@@ -13,6 +13,8 @@ interface Props {
   onTitleClick?: () => void;
   mix?: string;
   theme: Theme;
+  onOpen?: (root: HTMLDivElement) => unknown;
+  onClose?: (root: HTMLDivElement) => unknown;
 }
 
 interface State {
@@ -34,13 +36,24 @@ export default class Dropdown extends Component<Props, State> {
   }
 
   onTitleClick() {
-    this.setState({
-      isActive: !this.state.isActive,
-    });
+    const isActive = !this.state.isActive;
+    this.setState(
+      {
+        isActive,
+      },
+      () => {
+        if (isActive && this.props.onOpen) {
+          this.props.onOpen(this.rootNode!);
+        }
+        if (!isActive && this.props.onClose) {
+          this.props.onClose(this.rootNode!);
+        }
 
-    if (this.props.onTitleClick) {
-      this.props.onTitleClick();
-    }
+        if (this.props.onTitleClick) {
+          this.props.onTitleClick();
+        }
+      }
+    );
   }
 
   receiveMessage(e: { data: string | object }) {
@@ -49,17 +62,27 @@ export default class Dropdown extends Component<Props, State> {
 
       if (!data.clickOutside) return;
       if (!this.state.isActive) return;
-      this.setState({
-        isActive: false,
-      });
+      this.setState(
+        {
+          isActive: false,
+        },
+        () => {
+          this.props.onClose && this.props.onClose(this.rootNode!);
+        }
+      );
     } catch (e) {}
   }
 
   onOutsideClick(e: MouseEvent) {
     if (!this.rootNode || this.rootNode.contains(e.target as Node) || !this.state.isActive) return;
-    this.setState({
-      isActive: false,
-    });
+    this.setState(
+      {
+        isActive: false,
+      },
+      () => {
+        this.props.onClose && this.props.onClose(this.rootNode!);
+      }
+    );
   }
 
   componentDidMount() {