use react-popover for smart placement of account popover

2023-03-15 18:03:00 +01:00 · 2019-02-26 10:26:40 -03:00 · 2019-02-26 10:26:40 -03:00 · 5aff555455
commit 5aff555455
parent 6b5e5e3a44
4 changed files with 138 additions and 67 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1231,6 +1231,14 @@
        "@types/react": "*"
      }
    },
+    "@types/react-popover": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@types/react-popover/-/react-popover-0.5.3.tgz",
+      "integrity": "sha512-xfmnFHRKMXtGdWuSwEg4XiHxODKlN/bPEXfretBpojI7cNoeAtnmpyTmFk4UNcO+ys3W2SOsMXzcaqCNPyYP2g==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/react-router": {
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-4.4.3.tgz",
@ -4904,6 +4912,14 @@
      "integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=",
      "dev": true
    },
+    "css-vendor": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
+      "requires": {
+        "is-in-browser": "^1.0.2"
+      }
+    },
    "css-what": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz",
@ -9711,6 +9727,11 @@
      "integrity": "sha512-but/G3sapV3MNyqiDBLrOi4x8uCIw0RY3o/Vb5GT0sMFHrVV7731wFSVy41T5FO1og7G0gXLJh0MkgPRouko/A==",
      "dev": true
    },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
    "is-installed-globally": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
@ -11211,6 +11232,11 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
    },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
+    },
    "lodash._reinterpolate": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@ -11235,6 +11261,14 @@
      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
      "dev": true
    },
+    "lodash.debounce": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.1.1.tgz",
+      "integrity": "sha1-gSIRw3ipTMKdWqTjNGzwv846ffU=",
+      "requires": {
+        "lodash._getnative": "^3.0.0"
+      }
+    },
    "lodash.memoize": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@ -11277,6 +11311,14 @@
        "lodash._reinterpolate": "~3.0.0"
      }
    },
+    "lodash.throttle": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-3.0.4.tgz",
+      "integrity": "sha1-vE9HH7Mo5Nb9xt8rPTyvET8Pick=",
+      "requires": {
+        "lodash.debounce": "^3.0.0"
+      }
+    },
    "lodash.unescape": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/lodash.unescape/-/lodash.unescape-4.0.1.tgz",
@ -16612,6 +16654,17 @@
      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.8.4.tgz",
      "integrity": "sha512-QhI19OcfhiAn60/O6bMR0w8ApXrPFCjv6+eV0I/P9/AswzjgEAx4L7VxMBCpS/jrythLa12Q9v88req+ys4YpA=="
    },
+    "react-popover": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/react-popover/-/react-popover-0.5.10.tgz",
+      "integrity": "sha512-5SYDTfncywSH00I70oHd4gFRUR8V0rJ4sRADSI/P6G0RVXp9jUgaWloJ0Bk+SFnjpLPuipTKuzQNNd2CTs5Hrw==",
+      "requires": {
+        "css-vendor": "^0.3.1",
+        "debug": "^2.6.8",
+        "lodash.throttle": "^3.0.3",
+        "prop-types": "^15.5.10"
+      }
+    },
    "react-router": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
    "@oceanprotocol/squid": "^0.3.0",
    "@types/is-url": "^1.2.28",
    "@types/react-helmet": "^5.0.8",
+    "@types/react-popover": "^0.5.3",
    "@types/react-transition-group": "^2.0.15",
    "classnames": "^2.2.6",
    "eslint": "^5.6.0",
@ -29,6 +30,7 @@
    "react-dom": "^16.8.1",
    "react-helmet": "^5.2.0",
    "react-moment": "^0.8.4",
+    "react-popover": "^0.5.10",
    "react-router-dom": "^4.3.1",
    "react-transition-group": "^2.5.3",
    "slugify": "^1.3.4",
--- a/src/components/molecules/AccountStatus.module.scss
+++ b/src/components/molecules/AccountStatus.module.scss
@ -35,9 +35,9 @@
 $popoverWidth: 18rem;

 .popover {
-    position: absolute;
-    top: 1.5rem;
-    right: -($spacer / 3);
+    // position: absolute;
+    // top: 1.5rem;
+    // right: -($spacer / 3);
    width: $popoverWidth;
    padding: $spacer / 2;
    background: $brand-black;
@ -47,20 +47,20 @@ $popoverWidth: 18rem;
    color: $brand-grey-light;
    font-size: $font-size-small;

-    &:after {
-        bottom: 100%;
-        right: 2%;
-        border: solid transparent;
-        content: '';
-        height: 0;
-        width: 0;
-        position: absolute;
-        pointer-events: none;
-        border-color: transparent;
-        border-bottom-color: $brand-grey-light;
-        border-width: 10px;
-        margin-left: -10px;
-    }
+    // &:after {
+    //     bottom: 100%;
+    //     right: 2%;
+    //     border: solid transparent;
+    //     content: '';
+    //     height: 0;
+    //     width: 0;
+    //     position: absolute;
+    //     pointer-events: none;
+    //     border-color: transparent;
+    //     border-bottom-color: $brand-grey-light;
+    //     border-width: 10px;
+    //     margin-left: -10px;
+    // }
 }

 .popoverInfoline {
--- a/src/components/molecules/AccountStatus.tsx
+++ b/src/components/molecules/AccountStatus.tsx
@ -2,58 +2,9 @@ import React, { PureComponent } from 'react'
 import cx from 'classnames'
 // import Button from '../atoms/Button'
 import { User } from '../../context/User'
+import Popover from 'react-popover'
 import styles from './AccountStatus.module.scss'

-interface AccountStatusProps {
-    className?: string
-}
-
-interface AccountStatusState {
-    popoverOpen: boolean
-}
-
-export default class AccountStatus extends PureComponent<
-    AccountStatusProps,
-    AccountStatusState
-> {
-    public state = {
-        popoverOpen: false
-    }
-
-    private togglePopover() {
-        this.setState(prevState => ({
-            popoverOpen: !prevState.popoverOpen
-        }))
-    }
-
-    public render() {
-        return (
-            <div
-                className={cx(styles.status, this.props.className)}
-                onMouseEnter={() => this.togglePopover()}
-                onMouseLeave={() => this.togglePopover()}
-                onTouchStart={() => this.togglePopover()}
-            >
-                <User.Consumer>
-                    {states =>
-                        !states.isWeb3 ? (
-                            <span className={styles.statusIndicator} />
-                        ) : !states.isLogged ? (
-                            <span
-                                className={styles.statusIndicatorCloseEnough}
-                            />
-                        ) : states.isLogged ? (
-                            <span className={styles.statusIndicatorActive} />
-                        ) : null
-                    }
-                </User.Consumer>
-
-                {this.state.popoverOpen && <AccountPopover />}
-            </div>
-        )
-    }
-}
-
 const AccountPopover = () => (
    <div className={styles.popover}>
        <div className={styles.accountName}>
@ -83,3 +34,68 @@ const AccountPopover = () => (
        </div> */}
    </div>
 )
+
+interface AccountStatusProps {
+    className?: string
+}
+
+interface AccountStatusState {
+    popoverIsOpen: boolean
+    preferPlace?: string
+    place?: string
+    enterExitTransitionDurationMs?: number
+}
+
+export default class AccountStatus extends PureComponent<
+    AccountStatusProps,
+    AccountStatusState
+> {
+    public state = {
+        popoverIsOpen: false
+    }
+
+    private togglePopover(toState: boolean) {
+        const popoverIsOpen =
+            typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen
+        this.setState({ popoverIsOpen })
+    }
+
+    public AccountIndicator = () => (
+        <div
+            className={cx(styles.status, this.props.className)}
+            onMouseOver={() => this.togglePopover(true)}
+            onMouseOut={() => this.togglePopover(false)}
+            onTouchStart={() => this.togglePopover(true)}
+        >
+            <User.Consumer>
+                {states =>
+                    !states.isWeb3 ? (
+                        <span className={styles.statusIndicator} />
+                    ) : !states.isLogged ? (
+                        <span className={styles.statusIndicatorCloseEnough} />
+                    ) : states.isLogged ? (
+                        <span className={styles.statusIndicatorActive} />
+                    ) : null
+                }
+            </User.Consumer>
+        </div>
+    )
+
+    public render() {
+        const popoverProps = {
+            isOpen: this.state.popoverIsOpen,
+            // preferPlace: this.state.preferPlace,
+            // place: this.state.place,
+            enterExitTransitionDurationMs: 300,
+            tipSize: 0.01,
+            onOuterAction: () => this.togglePopover(false),
+            body: <AccountPopover />
+        }
+
+        return (
+            <Popover {...popoverProps}>
+                <this.AccountIndicator />
+            </Popover>
+        )
+    }
+}