never stop switching popover libraries, switch to react-popper

2019-03-01 16:21:00 -03:00 · 2019-03-01 16:21:00 -03:00 · 37bff21e4b
parent f9013acbc2
commit 37bff21e4b
6 changed files with 151 additions and 64 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1534,16 +1534,6 @@
        "@types/react-router": "*"
      }
    },
-    "@types/react-tether": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/@types/react-tether/-/react-tether-0.5.5.tgz",
-      "integrity": "sha512-ZM/wd77k/kn+nPQyP3j9tnLfK1MehIG/KXAhPbZeHP4J2ZLQ/xXonzdxbeyOdQgLSQtB0hbuRZcSOUOP/VjQnw==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*",
-        "@types/tether": "*"
-      }
-    },
    "@types/react-transition-group": {
      "version": "2.0.16",
      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.16.tgz",
@ -1559,12 +1549,6 @@
      "integrity": "sha512-42zEJkBpNfMEAvWR5WlwtTH22oDzcMjFsL9gDGExwF8X8WvAiw7Vwop7hPw03QT8TKfec83LwbHj6SvpqM4ELQ==",
      "dev": true
    },
-    "@types/tether": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/@types/tether/-/tether-1.4.4.tgz",
-      "integrity": "sha512-6qhsFJVMuMqaQRVyQVi3zUBLfKYyryktL0ZP0Z3zegzeQ7WKm0PZNCdl3JsaitJbzqaoQ9qsFKMfaj5MiMfcSQ==",
-      "dev": true
-    },
    "@types/underscore": {
      "version": "1.8.9",
      "resolved": "https://registry.npmjs.org/@types/underscore/-/underscore-1.8.9.tgz",
@ -2418,8 +2402,7 @@
    "asap": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
    },
    "asn1": {
      "version": "0.2.4",
@ -5064,6 +5047,15 @@
        "sha.js": "^2.4.8"
      }
    },
+    "create-react-context": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+      "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
    "cross-spawn": {
      "version": "6.0.5",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@ -6290,6 +6282,14 @@
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
    },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
    "end-of-stream": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@ -7490,6 +7490,35 @@
        "bser": "^2.0.0"
      }
    },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
    "fd-slicer": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@ -8998,6 +9027,11 @@
      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
      "dev": true
    },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
    "gzip-size": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
@ -10492,6 +10526,26 @@
        "isarray": "1.0.0"
      }
    },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+          "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+          "requires": {
+            "encoding": "^0.1.11",
+            "is-stream": "^1.0.1"
+          }
+        }
+      }
+    },
    "isstream": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@ -13420,6 +13474,11 @@
        "ts-pnp": "^1.0.0"
      }
    },
+    "popper.js": {
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
+      "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ=="
+    },
    "portfinder": {
      "version": "1.0.20",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@ -17249,6 +17308,19 @@
      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.8.4.tgz",
      "integrity": "sha512-QhI19OcfhiAn60/O6bMR0w8ApXrPFCjv6+eV0I/P9/AswzjgEAx4L7VxMBCpS/jrythLa12Q9v88req+ys4YpA=="
    },
+    "react-popper": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz",
+      "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "<=0.2.2",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      }
+    },
    "react-router": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
@ -17556,15 +17628,6 @@
        "shallowequal": "^1.0.1"
      }
    },
-    "react-tether": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-tether/-/react-tether-2.0.0.tgz",
-      "integrity": "sha512-iJnqTQV42Pf7w4xrg3g1gxSxbBCXleDt8AzlSoAqRINqB+mhcJUeegpB8SFMJ/nKT7lSfMkx3GvUfYY+9sPBGw==",
-      "requires": {
-        "prop-types": "^15.6.2",
-        "tether": "^1.4.5"
-      }
-    },
    "react-transition-group": {
      "version": "2.6.0",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.6.0.tgz",
@ -21072,11 +21135,6 @@
        }
      }
    },
-    "tether": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.5.tgz",
-      "integrity": "sha512-fysT1Gug2wbRi7a6waeu39yVDwiNtvwj5m9eRD+qZDSHKNghLo6KqP/U3yM2ap6TNUL2skjXGJaJJTJqoC31vw=="
-    },
    "text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@ -21373,6 +21431,11 @@
        "mime-types": "~2.1.18"
      }
    },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
    "typedarray": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@ -21393,6 +21456,11 @@
      "integrity": "sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==",
      "dev": true
    },
+    "ua-parser-js": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+    },
    "uglify-js": {
      "version": "3.4.9",
      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
@ -23414,8 +23482,7 @@
    "whatwg-fetch": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
-      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==",
-      "dev": true
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
    },
    "whatwg-mimetype": {
      "version": "2.3.0",
--- a/package.json
+++ b/package.json
@ -25,8 +25,8 @@
    "react-dom": "^16.8.3",
    "react-helmet": "^5.2.0",
    "react-moment": "^0.8.4",
+    "react-popper": "^1.3.3",
    "react-router-dom": "^4.3.1",
-    "react-tether": "^2.0.0",
    "react-transition-group": "^2.6.0",
    "slugify": "^1.3.4",
    "web3": "^1.0.0-beta.46"
@ -41,7 +41,6 @@
    "@types/react-dom": "^16.8.2",
    "@types/react-helmet": "^5.0.8",
    "@types/react-router-dom": "^4.3.1",
-    "@types/react-tether": "^0.5.5",
    "@types/react-transition-group": "^2.0.16",
    "@types/web3": "^1.0.18",
    "@typescript-eslint/eslint-plugin": "^1.4.2",
--- a/src/components/molecules/AccountStatus/Indicator.tsx
+++ b/src/components/molecules/AccountStatus/Indicator.tsx
@ -10,7 +10,7 @@ const Indicator = ({
 }: {
    className?: string
    togglePopover: () => void
-    forwardedRef: any
+    forwardedRef: (ref: HTMLElement | null) => void
 }) => (
    <div
        className={cx(styles.status, className)}
--- a/src/components/molecules/AccountStatus/Popover.module.scss
+++ b/src/components/molecules/AccountStatus/Popover.module.scss
@ -11,6 +11,17 @@ $popoverWidth: 18rem;
    box-shadow: 0 6px 16px 0 rgba($brand-black, .3);
    color: $brand-grey-light;
    font-size: $font-size-small;
+    animation: showPopup .2s ease-in forwards;
+}
+
+@keyframes showPopup {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }

 .popoverInfoline {
--- a/src/components/molecules/AccountStatus/Popover.tsx
+++ b/src/components/molecules/AccountStatus/Popover.tsx
@ -1,10 +1,20 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
 import { User } from '../../../context/User'
 import styles from './Popover.module.scss'

-const Popover = ({ forwardedRef }: { forwardedRef: any }) => (
-    <div className={styles.popover} ref={forwardedRef}>
+const Popover = ({
+    forwardedRef,
+    style,
+    arrowProps
+}: {
+    forwardedRef: (ref: HTMLElement | null) => void
+    style: React.CSSProperties
+    arrowProps: {
+        ref: (ref: HTMLElement | null) => void
+        style: React.CSSProperties
+    }
+}) => (
+    <div className={styles.popover} ref={forwardedRef} style={style}>
        <div className={styles.popoverInfoline}>
            <span className={styles.balance} title="Fake data">
                <strong>30</strong> ETH
@ -39,6 +49,7 @@ const Popover = ({ forwardedRef }: { forwardedRef: any }) => (
                {states => states.network && states.network}
            </User.Consumer> */}
        </div>
+        <div ref={arrowProps.ref} style={arrowProps.style} />
    </div>
 )

--- a/src/components/molecules/AccountStatus/index.tsx
+++ b/src/components/molecules/AccountStatus/index.tsx
@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import TetherComponent from 'react-tether'
+import { Manager, Reference, Popper } from 'react-popper'
 import AccountPopover from './Popover'
 import AccountIndicator from './Indicator'

@ -27,30 +27,29 @@ export default class AccountStatus extends PureComponent<

    public render() {
        return (
-            <TetherComponent
-                // http://tether.io/#options
-                attachment="top center"
-                constraints={[
-                    {
-                        to: 'scrollParent',
-                        attachment: 'together',
-                        pin: true
-                    }
-                ]}
-                // https://github.com/danreeves/react-tether#props
-                renderTarget={ref => (
-                    <AccountIndicator
-                        togglePopover={() => this.togglePopover()}
-                        className={this.props.className}
-                        forwardedRef={ref}
-                    />
+            <Manager>
+                <Reference>
+                    {({ ref }) => (
+                        <AccountIndicator
+                            togglePopover={() => this.togglePopover()}
+                            className={this.props.className}
+                            forwardedRef={ref}
+                        />
+                    )}
+                </Reference>
+                {this.state.isPopoverOpen && (
+                    <Popper placement="auto">
+                        {({ ref, style, placement, arrowProps }) => (
+                            <AccountPopover
+                                forwardedRef={ref}
+                                style={style}
+                                arrowProps={arrowProps}
+                                data-placement={placement}
+                            />
+                        )}
+                    </Popper>
                )}
-                renderElement={ref =>
-                    this.state.isPopoverOpen && (
-                        <AccountPopover forwardedRef={ref} />
-                    )
-                }
-            />
+            </Manager>
        )
    }
 }