Skip to content

Commit ca6dd69

Browse files
dapidapi
committed
Replace react-popover with react-popopo
1 parent 59b3e38 commit ca6dd69

5 files changed

Lines changed: 99 additions & 83 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,12 @@
4141
},
4242
"homepage": "https://github.com/rcdexta/react-trello",
4343
"dependencies": {
44-
"@terebentina/react-popover": "^2.0.0",
4544
"autosize": "^4.0.2",
4645
"classnames": "^2.2.6",
4746
"immutability-helper": "^2.8.1",
4847
"lodash": "^4.17.11",
4948
"prop-types": "^15.7.2",
49+
"react-popopo": "^2.1.3",
5050
"react-redux": "^5.0.7",
5151
"redux": "^4.0.0",
5252
"redux-actions": "^2.6.1",

‎src/components/Lane/LaneHeader/LaneMenu.js‎

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,42 @@
11
import React from 'react'
2-
import PropTypes from 'prop-types'
3-
import Popover from '@terebentina/react-popover'
2+
import PropTypes from 'prop-types'
43

5-
import {
6-
LaneMenuTitle,
7-
LaneMenuHeader,
8-
LaneMenuContent,
9-
DeleteWrapper,
10-
LaneMenuItem,
11-
GenDelButton,
12-
MenuButton,
13-
} from 'rt/styles/Elements'
4+
import {
5+
PopoverWrapper,
6+
Popover,
7+
PopoverContainer,
8+
PopoverContent,
9+
PopoverTrigger
10+
} from 'react-popopo'
1411

15-
const LaneMenu = ({t, onDelete}) => {
16-
return (
17-
<Popover className="menu" position="bottom" trigger={<MenuButton>⋮</MenuButton>}>
18-
<LaneMenuHeader>
19-
<LaneMenuTitle>{t('Lane actions')}</LaneMenuTitle>
20-
<DeleteWrapper>
21-
<GenDelButton>&#10006;</GenDelButton>
22-
</DeleteWrapper>
23-
</LaneMenuHeader>
24-
<LaneMenuContent>
25-
<LaneMenuItem onClick={onDelete}>{t('Delete lane')}</LaneMenuItem>
26-
</LaneMenuContent>
27-
</Popover>
28-
)
29-
}
12+
import {
13+
CustomPopoverContent
14+
} from 'rt/styles/Base'
3015

31-
export default LaneMenu;
16+
import {
17+
LaneMenuTitle,
18+
LaneMenuHeader,
19+
LaneMenuContent,
20+
DeleteWrapper,
21+
LaneMenuItem,
22+
GenDelButton,
23+
MenuButton,
24+
} from 'rt/styles/Elements'
25+
26+
const LaneMenu = ({t, onDelete}) => {
27+
return (
28+
<Popover className="menu" position="bottom" PopoverContent={CustomPopoverContent} trigger={<MenuButton>⋮</MenuButton>}>
29+
<LaneMenuHeader>
30+
<LaneMenuTitle>{t('Lane actions')}</LaneMenuTitle>
31+
<DeleteWrapper>
32+
<GenDelButton>&#10006;</GenDelButton>
33+
</DeleteWrapper>
34+
</LaneMenuHeader>
35+
<LaneMenuContent>
36+
<LaneMenuItem onClick={onDelete}>{t('Delete lane')}</LaneMenuItem>
37+
</LaneMenuContent>
38+
</Popover>
39+
)
40+
}
41+
42+
export default LaneMenu;

‎src/controllers/BoardContainer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
77
import pick from 'lodash/pick'
88
import isEqual from 'lodash/isEqual'
99
import Lane from './Lane'
10-
import { PopoverWrapper } from '@terebentina/react-popover'
10+
import { PopoverWrapper } from 'react-popopo'
1111

1212
import * as boardActions from 'rt/actions/BoardActions'
1313
import * as laneActions from 'rt/actions/LaneActions'

‎src/styles/Base.js‎

Lines changed: 54 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,23 @@
11
import styled, { css, createGlobalStyle } from 'styled-components'
22

3-
export const GlobalStyle = createGlobalStyle`
3+
import {
4+
PopoverContainer,
5+
PopoverContent,
6+
PopoverTrigger
7+
} from 'react-popopo';
48

5-
.popover {
6-
position: absolute;
7-
right: 10px;
8-
}
9-
.popover .popover__content {
10-
visibility: hidden;
11-
margin-top: -5px;
12-
opacity: 0;
13-
position: absolute;
14-
z-index: 10;
15-
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
16-
transition: all 0.3s ease 0ms;
17-
border-radius: 3px;
18-
min-width: 7em;
19-
flex-flow: column nowrap;
20-
background-color: #fff;
21-
color: #000;
22-
padding: 5px; }
23-
.popover .popover__content::before {
24-
content: "";
25-
position: absolute;
26-
background: transparent none repeat scroll 0 0;
27-
border: 6px solid transparent;
28-
transition: all 0.3s ease 0ms;
29-
left: 50%; }
30-
.popover.popover--bottom {
31-
flex-flow: column nowrap; }
32-
.popover.popover--bottom .popover__content {
33-
left: 50%;
34-
transform: translateX(-50%); }
35-
36-
.popover.popover--active .popover__content {
37-
visibility: visible;
38-
opacity: 1;
39-
transition-delay: 100ms; }
40-
.popover[class*="menu"] .popover__content {
41-
border-radius: 3px;
42-
min-width: 7em;
43-
flex-flow: column nowrap;
44-
color: #000; }
45-
.popover[class*="menu"] .popover__content a {
46-
color: rgba(255, 255, 255, 0.56);
47-
padding: .5em 1em;
48-
margin: 0;
49-
text-decoration: none; }
50-
.popover[class*="menu"] .popover__content a:hover {
51-
background-color: #00bcd4 !important;
52-
color: #37474F; }
9+
export const GlobalStyle = createGlobalStyle`
10+
.popover[class*="menu"] .popover__content a {
11+
color: rgba(255, 255, 255, 0.56);
12+
padding: .5em 1em;
13+
margin: 0;
14+
text-decoration: none;
15+
}
5316
17+
.popover[class*="menu"] .popover__content a:hover {
18+
background-color: #00bcd4 !important;
19+
color: #37474F;
20+
}
5421
5522
.comPlainTextContentEditable {
5623
-webkit-user-modify: read-write-plaintext-only;
@@ -86,6 +53,44 @@ export const GlobalStyle = createGlobalStyle`
8653
}
8754
`
8855

56+
export const CustomPopoverContainer = styled(CustomPopoverContainer)`
57+
position: absolute;
58+
right: 10px;
59+
flex-flow: column nowrap;
60+
.popover.popover--active .popover__content {
61+
visibility: visible;
62+
opacity: 1;
63+
transition-delay: 100ms;
64+
}
65+
`
66+
67+
export const CustomPopoverContent = styled(PopoverContent)`
68+
visibility: hidden;
69+
margin-top: -5px;
70+
opacity: 0;
71+
position: absolute;
72+
z-index: 10;
73+
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
74+
transition: all 0.3s ease 0ms;
75+
border-radius: 3px;
76+
min-width: 7em;
77+
flex-flow: column nowrap;
78+
background-color: #fff;
79+
color: #000;
80+
padding: 5px;
81+
left: 50%;
82+
transform: translateX(-50%);
83+
&::before {
84+
content: "";
85+
position: absolute;
86+
background: transparent none repeat scroll 0 0;
87+
border: 6px solid transparent;
88+
transition: all 0.3s ease 0ms;
89+
left: 50%;
90+
}
91+
`
92+
93+
8994
export const BoardWrapper = styled.div`
9095
background-color: #3179ba;
9196
overflow-y: hidden;

‎yarn.lock‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1758,11 +1758,6 @@
17581758
"@svgr/plugin-svgo" "^4.0.3"
17591759
loader-utils "^1.1.0"
17601760

1761-
"@terebentina/react-popover@^2.0.0":
1762-
version "2.0.0"
1763-
resolved "https://registry.yarnpkg.com/@terebentina/react-popover/-/react-popover-2.0.0.tgz#46a46052a889d423646daa1057bbb07879d19908"
1764-
integrity sha1-RqRgUqiJ1CNkbaoQV7uweHnRmQg=
1765-
17661761
"@types/babel__core@^7.1.0":
17671762
version "7.1.2"
17681763
resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"
@@ -11911,6 +11906,11 @@ react-modal@^3.6.1:
1191111906
react-lifecycles-compat "^3.0.0"
1191211907
warning "^3.0.0"
1191311908

11909+
react-popopo@^2.1.3:
11910+
version "2.1.3"
11911+
resolved "https://registry.yarnpkg.com/react-popopo/-/react-popopo-2.1.3.tgz#428e4ea0135e3c904a8327409e250429344b121d"
11912+
integrity sha512-zGw+f/1QDY1lBNb7WZ5Tt4m/zjj/PMziRjLgANBz/FIwP4qTvk6NXcTeASWquBLgcoyV6JpqLfMVz5kohdYoiQ==
11913+
1191411914
react-redux@^5.0.7:
1191511915
version "5.1.1"
1191611916
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.1.tgz#88e368682c7fa80e34e055cd7ac56f5936b0f52f"

0 commit comments

Comments
 (0)