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 popover library

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-02-26 20:26:53 -03:00
parent db90d7cb5a
commit d58ed5dc29
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 42 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
package-lock.json generated
View File

@ -4912,14 +4912,6 @@
"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",
@ -9727,11 +9719,6 @@
"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",
@ -11232,11 +11219,6 @@
"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",
@ -11261,14 +11243,6 @@
"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",
@ -11311,14 +11285,6 @@
"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",
@ -16654,17 +16620,6 @@
"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",
@ -17032,6 +16987,11 @@
"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-transition-group": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.3.tgz",

2
package.json
View File

@ -30,8 +30,8 @@
"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-tiny-popover": "^3.4.2",
"react-transition-group": "^2.5.3",
"slugify": "^1.3.4",
"web3": "^1.0.0-beta.43"

5
src/components/Header.module.scss
View File

@ -1,9 +1,6 @@
@import '../styles/variables';
.header {
// background: $brand-black
// url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center -6rem;
// background-size: cover;
width: 100%;
padding: $spacer / 2 0;
}
@ -97,5 +94,5 @@
.accountStatus {
margin-left: $spacer;
margin-bottom: .3rem;
margin-bottom: .2rem;
}

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

@ -12,7 +12,6 @@
height: $font-size-small;
display: block;
background: $red;
margin-bottom: -.1rem;
}
// yellow triangle

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

@ -5,17 +5,15 @@ import styles from './Indicator.module.scss'
const Indicator = ({
className,
showPopover,
hidePopover
togglePopover
}: {
className?: string
showPopover: any
hidePopover: any
togglePopover: any
}) => (
<div
className={cx(styles.status, className)}
onMouseOver={showPopover}
onMouseOut={hidePopover}
onMouseOver={togglePopover}
onMouseOut={togglePopover}
>
<User.Consumer>
{states =>

19
src/components/molecules/AccountStatus/Popover.module.scss
View File

@ -3,9 +3,6 @@
$popoverWidth: 18rem;
.popover {
// position: absolute;
// top: 1.5rem;
// right: -($spacer / 3);
width: $popoverWidth;
padding: $spacer / 2;
background: $brand-black;
@ -14,21 +11,6 @@ $popoverWidth: 18rem;
box-shadow: 0 6px 16px 0 rgba($brand-black, .3);
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;
// }
}
.popoverInfoline {
@ -75,7 +57,6 @@ $popoverWidth: 18rem;
.balance {
font-size: $font-size-small;
color: $brand-grey-light;
margin-left: $spacer / 2;
white-space: nowrap;

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

@ -3,17 +3,11 @@ import { User } from '../../../context/User'
import Faucet from './Faucet'
import styles from './Popover.module.scss'
const Popover = ({
showPopover,
hidePopover
}: {
showPopover: any
hidePopover: any
}) => (
const Popover = ({ togglePopover }: { togglePopover: any }) => (
<div
className={styles.popover}
onMouseOver={showPopover}
onMouseOut={hidePopover}
onMouseOver={togglePopover}
onMouseOut={togglePopover}
>
<div className={styles.accountName}>
<User.Consumer>

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

@ -1,5 +1,5 @@
import React, { PureComponent } from 'react'
import Popover from 'react-popover'
import Popover, { ArrowContainer } from 'react-tiny-popover'
import AccountPopover from './Popover'
import AccountIndicator from './Indicator'
@ -8,7 +8,7 @@ interface AccountStatusProps {
}
interface AccountStatusState {
popoverIsOpen: boolean
isPopoverOpen: boolean
}
export default class AccountStatus extends PureComponent<
@ -16,34 +16,39 @@ export default class AccountStatus extends PureComponent<
AccountStatusState
> {
public state = {
popoverIsOpen: false
isPopoverOpen: false
}
public togglePopover(toState?: boolean) {
const popoverIsOpen =
typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen
this.setState({ popoverIsOpen })
public togglePopover() {
this.setState(prevState => ({
isPopoverOpen: !prevState.isPopoverOpen
}))
}
public render() {
const popoverProps = {
isOpen: this.state.popoverIsOpen,
enterExitTransitionDurationMs: 300,
tipSize: 0.01,
onOuterAction: () => this.togglePopover(false),
body: (
<AccountPopover
showPopover={() => this.togglePopover(true)}
hidePopover={() => this.togglePopover(false)}
/>
)
}
return (
<Popover {...popoverProps}>
<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>
)}
>
<AccountIndicator
showPopover={() => this.togglePopover(true)}
hidePopover={() => this.togglePopover(false)}
togglePopover={() => this.togglePopover()}
className={this.props.className}
/>
</Popover>