oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

switch to react-tether, solve almost all the popup issues with it

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-03-01 15:43:50 -03:00
parent acef1130cb
commit f9013acbc2
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 62 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
package-lock.json generated
View File

@ -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",

3
package.json
View File

@ -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",

2
src/components/molecules/AccountStatus/Indicator.module.scss
View File

@ -3,7 +3,7 @@
.status {
display: inline-block;
position: relative;
cursor: pointer;
cursor: help;
}
// default: red square

5
src/components/molecules/AccountStatus/Indicator.tsx
View File

@ -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 =>

12
src/components/molecules/AccountStatus/Popover.tsx
View File

@ -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 =>

43
src/components/molecules/AccountStatus/index.tsx
View File

@ -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>
)
}
}