remove all implementations of react-onclickoutside and improve on on …

…click-away-wrapper implementation
WorldBrain · Dec 3, 2022 · 9436380 · 9436380
1 parent ec97f41
commit 9436380
Show file tree

Hide file tree

Showing 28 changed files with 201 additions and 159 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/package.json b/package.json
@@ -126,7 +126,6 @@
         "react-firebaseui": "^4.0.0",
         "react-helmet": "^5.2.1",
         "react-markdown": "^5.0.0",
-        "react-onclickoutside": "^6.7.1",
         "react-popper": "^2.3.0",
         "react-redux": "^5.0.7",
         "react-rnd": "^10.3.5",

diff --git a/src/annotations/components/AnnotationCreate.tsx b/src/annotations/components/AnnotationCreate.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import { createRef } from 'react'
 
 import styled from 'styled-components'
-import onClickOutside from 'react-onclickoutside'
 
 import { getKeyName } from '@worldbrain/memex-common/lib/utils/os-specific-key-names'
 import MemexEditor, {
@@ -356,7 +355,7 @@ export class AnnotationCreate extends React.Component<Props, State>
     }
 }
 
-export default onClickOutside(AnnotationCreate)
+export default AnnotationCreate
 
 const SaveCancelArea = styled.div`
     display: flex;

diff --git a/src/annotations/components/AnnotationEditable.tsx b/src/annotations/components/AnnotationEditable.tsx
@@ -641,6 +641,7 @@ export default class AnnotationEditable extends React.Component<Props> {
                     <PopoutBox
                         targetElementRef={this.tutorialButtonRef.current}
                         placement={'bottom'}
+                        closeComponent={() => this.toggleShowTutorial()}
                     >
                         <QuickTutorial
                             markdownHelpOnTop={true}

diff --git a/src/custom-lists/ui/CollectionPicker/index.tsx b/src/custom-lists/ui/CollectionPicker/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import onClickOutside from 'react-onclickoutside'
 import styled, { ThemeProvider } from 'styled-components'
 
 import { StatefulUIElement } from 'src/util/ui-logic'
@@ -534,4 +533,4 @@ const SpaceContextMenuBtn = styled.div`
     align-items: center;
 `
 
-export default onClickOutside(SpacePicker)
+export default SpacePicker
diff --git a/src/dashboard-refactor/header/filters-bar/DomainPicker/index.tsx b/src/dashboard-refactor/header/filters-bar/DomainPicker/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import onClickOutside from 'react-onclickoutside'
 import isEqual from 'lodash/isEqual'
 import styled, { ThemeProvider } from 'styled-components'
 
@@ -15,7 +14,6 @@ import EntryResultsList from 'src/common-ui/GenericPicker/components/EntryResult
 import EntryRow from 'src/common-ui/GenericPicker/components/EntryRow' // ActOnAllTabsButton, // IconStyleWrapper,
 import { KeyEvent, DisplayEntry } from 'src/common-ui/GenericPicker/types'
 import * as Colors from 'src/common-ui/components/design-library/colors'
-import { EntrySelectedList } from 'src/common-ui/GenericPicker/components/EntrySelectedList'
 import * as icons from 'src/common-ui/components/design-library/icons'
 import Icon from '@worldbrain/memex-common/lib/common-ui/components/icon'
 
@@ -252,4 +250,4 @@ const DomainResultItem = styled.div`
     }
 `
 
-export default onClickOutside(DomainPicker)
+export default DomainPicker
diff --git a/src/dashboard-refactor/header/filters-bar/index.tsx b/src/dashboard-refactor/header/filters-bar/index.tsx
@@ -168,10 +168,7 @@ export default class FiltersBar extends PureComponent<FiltersBarProps> {
                 offsetX={10}
                 closeComponent={this.props.toggleDatesFilter}
             >
-                <DatePicker
-                    {...this.props.datePickerProps}
-                    outsideClickIgnoreClass="date-picker-button"
-                />
+                <DatePicker {...this.props.datePickerProps} />
             </PopoutBox>
         )
     }
@@ -192,7 +189,6 @@ export default class FiltersBar extends PureComponent<FiltersBarProps> {
                     {...this.props.spacePickerProps}
                     searchInputPlaceholder="Add Space filters"
                     removeTooltipText="Remove Space filter"
-                    outsideClickIgnoreClass="space-picker-button"
                     filterMode
                 />
             </PopoutBox>
@@ -215,7 +211,6 @@ export default class FiltersBar extends PureComponent<FiltersBarProps> {
                     {...this.props.domainPickerProps}
                     searchInputPlaceholder="Add domain filters"
                     removeToolTipText="Remove filter"
-                    outsideClickIgnoreClass="domain-picker-button"
                 />
             </PopoutBox>
         )

diff --git a/src/dashboard-refactor/header/index.tsx b/src/dashboard-refactor/header/index.tsx
@@ -108,7 +108,7 @@ function renderSyncStatusMenu(
             targetElementRef={syncStatusButtonRef.current}
             offsetX={15}
             offsetY={5}
-            closeComponent={syncStatusMenuProps.onToggleDisplayState}
+            closeComponent={() => syncStatusMenuProps.onToggleDisplayState()}
             placement={'bottom-end'}
         >
             <SyncStatusMenu
@@ -148,7 +148,9 @@ export default class Header extends PureComponent<Props> {
                 </SearchSection>
                 <RightHeader>
                     <PrimaryAction
-                        onClick={syncStatusMenuProps.onToggleDisplayState}
+                        onClick={() =>
+                            syncStatusMenuProps.onToggleDisplayState()
+                        }
                         label={'Sync Status'}
                         size={'medium'}
                         icon={getSyncStatusIcon(syncStatusIconState)}

diff --git a/src/dashboard-refactor/header/sync-status-menu/index.tsx b/src/dashboard-refactor/header/sync-status-menu/index.tsx
@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react'
-import onClickOutside from 'react-onclickoutside'
 import styled, { css } from 'styled-components'
 import moment from 'moment'
 
@@ -62,7 +61,7 @@ export interface SyncStatusMenuProps extends RootState {
     onLoginClick: React.MouseEventHandler
     onClickOutside: React.MouseEventHandler
     syncStatusIconState?: any
-    onToggleDisplayState: React.MouseEventHandler
+    onToggleDisplayState?: () => void
 }
 
 class SyncStatusMenu extends PureComponent<SyncStatusMenuProps> {
@@ -242,7 +241,7 @@ class SyncStatusMenu extends PureComponent<SyncStatusMenuProps> {
     }
 }
 
-export default onClickOutside(SyncStatusMenu)
+export default SyncStatusMenu
 
 const LoadingBox = styled.div`
     height: 100px;

diff --git a/src/dashboard-refactor/index.tsx b/src/dashboard-refactor/index.tsx
@@ -513,9 +513,9 @@ export class DashboardContainer extends StatefulUIElement<
                             isShown: false,
                         }),
                     onToggleDisplayState: () => {
-                        console.log('works')
+                        console.log('toggletriggered')
                         this.processEvent('setSyncStatusMenuDisplayState', {
-                            isShown: !syncMenu.isDisplayed,
+                            isShown: syncMenu.isDisplayed,
                         })
                     },
                 }}
@@ -1091,7 +1091,7 @@ export class DashboardContainer extends StatefulUIElement<
                 <DeleteConfirmModal
                     isShown
                     message="Delete this Space?"
-                    submessage="This does not delete the pages in it"
+                    submessage="This does NOT delete the pages in it"
                     onClose={() => this.processEvent('cancelListDelete', null)}
                     deleteDocs={() =>
                         this.processEvent('confirmListDelete', null)
@@ -1259,11 +1259,11 @@ export class DashboardContainer extends StatefulUIElement<
                                 isShown: false,
                             })
                         }
-                        onToggleDisplayState={() =>
-                            this.processEvent('setSyncStatusMenuDisplayState', {
-                                isShown: !this.state.syncMenu.isDisplayed,
-                            })
-                        }
+                        // onToggleDisplayState={() =>
+                        //     this.processEvent('setSyncStatusMenuDisplayState', {
+                        //         isShown: !this.state.syncMenu.isDisplayed,
+                        //     })
+                        // }
                     />
                 </RightHeader>
             </HeaderBar>

diff --git a/src/dashboard-refactor/logic.ts b/src/dashboard-refactor/logic.ts
@@ -1232,7 +1232,18 @@ export class DashboardLogic extends UILogic<State, Events> {
         })
     }
 
-    setPageHover: EventHandler<'setPageHover'> = ({ event }) => {
+    setPageHover: EventHandler<'setPageHover'> = ({ event, previousState }) => {
+        if (
+            previousState.searchResults.results[event.day].pages.byId[
+                event.pageId
+            ].isCopyPasterShown ||
+            previousState.searchResults.results[event.day].pages.byId[
+                event.pageId
+            ].listPickerShowStatus !== 'hide'
+        ) {
+            return
+        }
+
         this.emitMutation({
             searchResults: {
                 results: {
@@ -3178,7 +3189,7 @@ export class DashboardLogic extends UILogic<State, Events> {
         'setSyncStatusMenuDisplayState'
     > = async ({ event }) => {
         this.emitMutation({
-            syncMenu: { isDisplayed: { $set: event.isShown } },
+            syncMenu: { isDisplayed: { $set: !event.isShown } },
         })
     }