mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
switch to react-tether, solve almost all the popup issues with it
This commit is contained in:
parent
acef1130cb
commit
f9013acbc2
GPG Key ID:
606EEEF3C479A91F
33
package-lock.json
generated
33
package-lock.json
generated
@ -1534,6 +1534,16 @@
|
||||
"@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",
|
||||
@ -1549,6 +1559,12 @@
|
||||
"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",
|
||||
@ -17540,10 +17556,14 @@
|
||||
"shallowequal": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"react-tiny-popover": {
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmjs.org/react-tiny-popover/-/react-tiny-popover-3.4.2.tgz",
|
||||
"integrity": "sha512-3lH+GHvyJbjHNg14B7Md8bpUapQ5W3s8IdBFguODjrgEV1+LWrKOmVrpe8xhIQDOkgkiDfLwMVgsI7BQM9Udpg=="
|
||||
"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",
|
||||
@ -21052,6 +21072,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"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",
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-moment": "^0.8.4",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-tiny-popover": "^3.4.2",
|
||||
"react-tether": "^2.0.0",
|
||||
"react-transition-group": "^2.6.0",
|
||||
"slugify": "^1.3.4",
|
||||
"web3": "^1.0.0-beta.46"
|
||||
@ -41,6 +41,7 @@
|
||||
"@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",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
.status {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
// default: red square
|
||||
|
||||
@ -5,15 +5,18 @@ import styles from './Indicator.module.scss'
|
||||
|
||||
const Indicator = ({
|
||||
className,
|
||||
togglePopover
|
||||
togglePopover,
|
||||
forwardedRef
|
||||
}: {
|
||||
className?: string
|
||||
togglePopover: () => void
|
||||
forwardedRef: any
|
||||
}) => (
|
||||
<div
|
||||
className={cx(styles.status, className)}
|
||||
onMouseOver={togglePopover}
|
||||
onMouseOut={togglePopover}
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<User.Consumer>
|
||||
{states =>
|
||||
|
||||
@ -3,12 +3,8 @@ import { Link } from 'react-router-dom'
|
||||
import { User } from '../../../context/User'
|
||||
import styles from './Popover.module.scss'
|
||||
|
||||
const Popover = ({ togglePopover }: { togglePopover: () => void }) => (
|
||||
<div
|
||||
className={styles.popover}
|
||||
onMouseOver={togglePopover}
|
||||
onMouseOut={togglePopover}
|
||||
>
|
||||
const Popover = ({ forwardedRef }: { forwardedRef: any }) => (
|
||||
<div className={styles.popover} ref={forwardedRef}>
|
||||
<div className={styles.popoverInfoline}>
|
||||
<span className={styles.balance} title="Fake data">
|
||||
<strong>30</strong> ETH
|
||||
@ -22,10 +18,6 @@ const Popover = ({ togglePopover }: { togglePopover: () => void }) => (
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.popoverInfoline}>
|
||||
<Link to={'/faucet'}>Request Ether</Link>
|
||||
</div>
|
||||
|
||||
<div className={styles.popoverInfoline}>
|
||||
<User.Consumer>
|
||||
{states =>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import Popover, { ArrowContainer } from 'react-tiny-popover'
|
||||
import TetherComponent from 'react-tether'
|
||||
import AccountPopover from './Popover'
|
||||
import AccountIndicator from './Indicator'
|
||||
|
||||
@ -27,31 +27,30 @@ export default class AccountStatus extends PureComponent<
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<Popover
|
||||
isOpen={this.state.isPopoverOpen}
|
||||
padding={10}
|
||||
position={'bottom'}
|
||||
transitionDuration={0.2}
|
||||
windowBorderPadding={15}
|
||||
content={({ position, targetRect, popoverRect }) => (
|
||||
<ArrowContainer
|
||||
position={position}
|
||||
targetRect={targetRect}
|
||||
popoverRect={popoverRect}
|
||||
arrowColor={'#8b98a9'}
|
||||
arrowSize={10}
|
||||
>
|
||||
<AccountPopover
|
||||
togglePopover={() => this.togglePopover()}
|
||||
/>
|
||||
</ArrowContainer>
|
||||
)}
|
||||
>
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
renderElement={ref =>
|
||||
this.state.isPopoverOpen && (
|
||||
<AccountPopover forwardedRef={ref} />
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user