From 9cc98267457b0d69d4699b27d881430c169c2c2a Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Sun, 5 Jul 2020 23:35:00 +0530
Subject: simplified exit on outside click + rotating arrow in dropdown menu

---
 src/client/util/GroupManager.tsx    |  7 +++++++
 src/client/util/GroupMemberView.tsx |  7 +++++++
 src/client/views/MainViewModal.tsx  | 33 +--------------------------------
 3 files changed, 15 insertions(+), 32 deletions(-)

(limited to 'src')

diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 0e710457e..b14dcf55b 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -362,6 +362,13 @@ export default class GroupManager extends React.Component<{}> {
                             placeholder={"Select users"}
                             value={this.selectedUsers}
                             closeMenuOnSelect={false}
+                            styles={{
+                                dropdownIndicator: (base, state) => ({
+                                    ...base,
+                                    transition: '0.5s all ease',
+                                    transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined
+                                })
+                            }}
                         />
                     </div>
                     <div className="group-content">
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index 4377a1428..cc279b6b2 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -42,6 +42,13 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
                                     placeholder={"Add members"}
                                     value={null}
                                     closeMenuOnSelect={true}
+                                    styles={{
+                                        dropdownIndicator: (base, state) => ({
+                                            ...base,
+                                            transition: '0.5s all ease',
+                                            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined
+                                        })
+                                    }}
                                 />
                             </div>
                             <button onClick={() => console.log(GroupManager.Instance.deleteGroup(this.props.group))}>Delete group</button>
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index 2bdd159c9..0b73a6ad7 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
 import "./MainViewModal.scss";
-import { Opt } from '../../fields/Doc';
-import { Lambda, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 
 export interface MainViewOverlayProps {
@@ -18,35 +16,6 @@ export interface MainViewOverlayProps {
 @observer
 export default class MainViewModal extends React.Component<MainViewOverlayProps> {
 
-    private ref: React.RefObject<HTMLDivElement> = React.createRef();
-    private displayedListenerDisposer: Opt<Lambda>;
-
-    componentDidMount() {
-
-        document.removeEventListener("pointerdown", this.close);
-
-        this.displayedListenerDisposer = reaction(() => this.props.isDisplayed, (isDisplayed) => {
-            if (isDisplayed) document.addEventListener("pointerdown", this.close);
-            else document.removeEventListener("pointerdown", this.close);
-        });
-    }
-
-    componentWillUnmount() {
-        this.displayedListenerDisposer?.();
-        document.removeEventListener("pointerdown", this.close);
-    }
-
-    close = (e: PointerEvent) => {
-
-        const { left, right, top, bottom } = this.ref.current!.getBoundingClientRect();
-
-        if (e.clientX === 0 && e.clientY === 0) return; // why does this happen?
-        if (e.clientX < left || e.clientX > right || e.clientY > bottom || e.clientY < top) {
-            this.props.closeOnExternalClick?.();
-        }
-
-    }
-
     render() {
         const p = this.props;
         const dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1;
@@ -60,10 +29,10 @@ export default class MainViewModal extends React.Component<MainViewOverlayProps>
                         ...(p.dialogueBoxStyle || {}),
                         opacity: p.isDisplayed ? dialogueOpacity : 0
                     }}
-                    ref={this.ref}
                 >{p.contents}</div>
                 <div
                     className={"overlay"}
+                    onClick={this.props?.closeOnExternalClick}
                     style={{
                         backgroundColor: "gainsboro",
                         ...(p.overlayStyle || {}),
-- 
cgit v1.2.3-70-g09d2