Skip to content

Commit 98d14d0

Browse files
dapidapi
authored
Merge pull request #295 from rcdexta/replace-react-popover-with-popopo
[#201] Replace react-popover to fix Failed prop type
2 parents b27ca72 + 3e67ea5 commit 98d14d0

8 files changed

Lines changed: 2678 additions & 2825 deletions

File tree

‎.nvmrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
10.13.0
1+
v10.16.0

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1414
* Add `editLaneTitle` and `onLaneUpdate` props (availability to inline edit lane
1515
title)
1616

17+
### Fixes
18+
19+
* #201 Fixed Warning: Failed prop type by replacing `react-popover` with
20+
`react-popopo`
21+
22+
### Improvements
23+
24+
* Removed `react-popover`'s CSS classes.
25+
1726
## [2.2.0-alpha.1] - 2019-07-01
1827

1928
### Added

‎package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-trello",
3-
"version": "2.3.0-alpha.2",
3+
"version": "2.3.1",
44
"description": "Pluggable components to add a trello like kanban board to your application",
55
"main": "dist/index.js",
66
"jsnext:main": "components/index.js",
@@ -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.9",
5050
"react-redux": "^5.0.7",
5151
"redux": "^4.0.0",
5252
"redux-actions": "^2.6.1",
@@ -94,11 +94,9 @@
9494
"identity-obj-proxy": "^3.0.0",
9595
"jest": "^24.8.0",
9696
"jest-cli": "^24.8.0",
97-
"node-sass": "^4.5.3",
9897
"prettier": "1.14.3",
9998
"pretty-quick": "^1.7.0",
10099
"react": "^16.8.0",
101-
"react-addons-test-utils": "^15.6.2",
102100
"react-dom": "^16.8.0",
103101
"react-i18next": "^10.11.0",
104102
"react-test-renderer": "^16.8.6",

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

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
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 { Popover } from 'react-popopo'
145

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-
}
6+
import { CustomPopoverContent, CustomPopoverContainer } from 'rt/styles/Base'
307

31-
export default LaneMenu;
8+
import {
9+
LaneMenuTitle,
10+
LaneMenuHeader,
11+
LaneMenuContent,
12+
DeleteWrapper,
13+
LaneMenuItem,
14+
GenDelButton,
15+
MenuButton,
16+
} from 'rt/styles/Elements'
17+
18+
const TEST= PropTypes.elementType;
19+
20+
const LaneMenu = ({t, onDelete}) => (
21+
<Popover position="bottom" PopoverContainer={CustomPopoverContainer} PopoverContent={CustomPopoverContent} trigger={<MenuButton>⋮</MenuButton>}>
22+
<LaneMenuHeader>
23+
<LaneMenuTitle>{t('Lane actions')}</LaneMenuTitle>
24+
<DeleteWrapper>
25+
<GenDelButton>&#10006;</GenDelButton>
26+
</DeleteWrapper>
27+
</LaneMenuHeader>
28+
<LaneMenuContent>
29+
<LaneMenuItem onClick={onDelete}>{t('Delete lane')}</LaneMenuItem>
30+
</LaneMenuContent>
31+
</Popover>
32+
)
33+
34+
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: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,12 @@
11
import styled, { css, createGlobalStyle } from 'styled-components'
22

3-
export const GlobalStyle = createGlobalStyle`
4-
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; }
53-
3+
import {
4+
PopoverContainer,
5+
PopoverContent,
6+
PopoverTrigger
7+
} from 'react-popopo'
548

9+
export const GlobalStyle = createGlobalStyle`
5510
.comPlainTextContentEditable {
5611
-webkit-user-modify: read-write-plaintext-only;
5712
cursor: text;
@@ -86,6 +41,48 @@ export const GlobalStyle = createGlobalStyle`
8641
}
8742
`
8843

44+
export const CustomPopoverContainer = styled(PopoverContainer)`
45+
position: absolute;
46+
right: 10px;
47+
flex-flow: column nowrap;
48+
`
49+
50+
export const CustomPopoverContent = styled(PopoverContent)`
51+
visibility: hidden;
52+
margin-top: -5px;
53+
opacity: 0;
54+
position: absolute;
55+
z-index: 10;
56+
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
57+
transition: all 0.3s ease 0ms;
58+
border-radius: 3px;
59+
min-width: 7em;
60+
flex-flow: column nowrap;
61+
background-color: #fff;
62+
color: #000;
63+
padding: 5px;
64+
left: 50%;
65+
transform: translateX(-50%);
66+
${props => props.active && `
67+
visibility: visible;
68+
opacity: 1;
69+
transition-delay: 100ms;
70+
`}
71+
&::before {
72+
visibility: hidden;
73+
}
74+
a {
75+
color: rgba(255, 255, 255, 0.56);
76+
padding: .5em 1em;
77+
margin: 0;
78+
text-decoration: none;
79+
&:hover {
80+
background-color: #00bcd4 !important;
81+
color: #37474F;
82+
}
83+
}
84+
`
85+
8986
export const BoardWrapper = styled.div`
9087
background-color: #3179ba;
9188
overflow-y: hidden;

0 commit comments

Comments
 (0)