Skip to content

Commit ba910b8

Browse files
yjoseyjose
authored
Merge pull request #50 from raRaRa/master
2 parents b8c9b30 + 696d6e2 commit ba910b8

File tree

7 files changed

+90
-3
lines changed

7 files changed

+90
-3
lines changed

‎__test__/__snapshots__/index.test.js.snap‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 1
1313
closeOnEscape={true}
1414
contentStyle={Object {}}
1515
defaultOpen={false}
16+
disabled={false}
1617
keepTooltipInside={false}
1718
lockScroll={false}
1819
modal={false}
@@ -116,6 +117,7 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 2
116117
closeOnEscape={true}
117118
contentStyle={Object {}}
118119
defaultOpen={false}
120+
disabled={false}
119121
keepTooltipInside={false}
120122
lockScroll={false}
121123
modal={false}
@@ -159,6 +161,7 @@ exports[`it should render correctly 1`] = `
159161
closeOnEscape={true}
160162
contentStyle={Object {}}
161163
defaultOpen={false}
164+
disabled={false}
162165
keepTooltipInside={false}
163166
lockScroll={false}
164167
modal={false}
@@ -192,6 +195,7 @@ exports[`it should render correctly on click and will update the the popup conte
192195
closeOnEscape={true}
193196
contentStyle={Object {}}
194197
defaultOpen={false}
198+
disabled={false}
195199
keepTooltipInside={false}
196200
lockScroll={false}
197201
modal={false}
@@ -300,6 +304,7 @@ exports[`it should render correctly on click and will update the the popup conte
300304
closeOnEscape={true}
301305
contentStyle={Object {}}
302306
defaultOpen={false}
307+
disabled={false}
303308
keepTooltipInside={false}
304309
lockScroll={false}
305310
modal={false}
@@ -348,6 +353,7 @@ exports[`it should render correctly on click and will update the trigger text
348353
closeOnEscape={true}
349354
contentStyle={Object {}}
350355
defaultOpen={false}
356+
disabled={false}
351357
keepTooltipInside={false}
352358
lockScroll={false}
353359
modal={false}
@@ -449,6 +455,7 @@ exports[`it should render correctly on click and will update the trigger text
449455
closeOnEscape={true}
450456
contentStyle={Object {}}
451457
defaultOpen={false}
458+
disabled={false}
452459
keepTooltipInside={false}
453460
lockScroll={false}
454461
modal={false}
@@ -497,6 +504,7 @@ exports[`it should rendered in the bottom center position 1`] = `
497504
closeOnEscape={true}
498505
contentStyle={Object {}}
499506
defaultOpen={false}
507+
disabled={false}
500508
keepTooltipInside={false}
501509
lockScroll={false}
502510
modal={false}
@@ -600,6 +608,7 @@ exports[`it should rendered in the bottom left position 1`] = `
600608
closeOnEscape={true}
601609
contentStyle={Object {}}
602610
defaultOpen={false}
611+
disabled={false}
603612
keepTooltipInside={false}
604613
lockScroll={false}
605614
modal={false}
@@ -703,6 +712,7 @@ exports[`it should rendered in the bottom right position 1`] = `
703712
closeOnEscape={true}
704713
contentStyle={Object {}}
705714
defaultOpen={false}
715+
disabled={false}
706716
keepTooltipInside={false}
707717
lockScroll={false}
708718
modal={false}
@@ -806,6 +816,7 @@ exports[`it should rendered in the left bottom position 1`] = `
806816
closeOnEscape={true}
807817
contentStyle={Object {}}
808818
defaultOpen={false}
819+
disabled={false}
809820
keepTooltipInside={false}
810821
lockScroll={false}
811822
modal={false}
@@ -909,6 +920,7 @@ exports[`it should rendered in the left center position 1`] = `
909920
closeOnEscape={true}
910921
contentStyle={Object {}}
911922
defaultOpen={false}
923+
disabled={false}
912924
keepTooltipInside={false}
913925
lockScroll={false}
914926
modal={false}
@@ -1012,6 +1024,7 @@ exports[`it should rendered in the left top position 1`] = `
10121024
closeOnEscape={true}
10131025
contentStyle={Object {}}
10141026
defaultOpen={false}
1027+
disabled={false}
10151028
keepTooltipInside={false}
10161029
lockScroll={false}
10171030
modal={false}
@@ -1115,6 +1128,7 @@ exports[`it should rendered in the right bottom position 1`] = `
11151128
closeOnEscape={true}
11161129
contentStyle={Object {}}
11171130
defaultOpen={false}
1131+
disabled={false}
11181132
keepTooltipInside={false}
11191133
lockScroll={false}
11201134
modal={false}
@@ -1218,6 +1232,7 @@ exports[`it should rendered in the right center position 1`] = `
12181232
closeOnEscape={true}
12191233
contentStyle={Object {}}
12201234
defaultOpen={false}
1235+
disabled={false}
12211236
keepTooltipInside={false}
12221237
lockScroll={false}
12231238
modal={false}
@@ -1321,6 +1336,7 @@ exports[`it should rendered in the right top position 1`] = `
13211336
closeOnEscape={true}
13221337
contentStyle={Object {}}
13231338
defaultOpen={false}
1339+
disabled={false}
13241340
keepTooltipInside={false}
13251341
lockScroll={false}
13261342
modal={false}
@@ -1424,6 +1440,7 @@ exports[`it should rendered in the top center position 1`] = `
14241440
closeOnEscape={true}
14251441
contentStyle={Object {}}
14261442
defaultOpen={false}
1443+
disabled={false}
14271444
keepTooltipInside={false}
14281445
lockScroll={false}
14291446
modal={false}
@@ -1527,6 +1544,7 @@ exports[`it should rendered in the top left position 1`] = `
15271544
closeOnEscape={true}
15281545
contentStyle={Object {}}
15291546
defaultOpen={false}
1547+
disabled={false}
15301548
keepTooltipInside={false}
15311549
lockScroll={false}
15321550
modal={false}
@@ -1630,6 +1648,7 @@ exports[`it should rendered in the top right position 1`] = `
16301648
closeOnEscape={true}
16311649
contentStyle={Object {}}
16321650
defaultOpen={false}
1651+
disabled={false}
16331652
keepTooltipInside={false}
16341653
lockScroll={false}
16351654
modal={false}
@@ -1732,6 +1751,7 @@ exports[`it shouldn't close on click outside popup 1`] = `
17321751
closeOnEscape={true}
17331752
contentStyle={Object {}}
17341753
defaultOpen={false}
1754+
disabled={false}
17351755
keepTooltipInside={false}
17361756
lockScroll={false}
17371757
modal={false}
@@ -1834,6 +1854,7 @@ exports[`it shouldn't close on click outside popup 2`] = `
18341854
closeOnEscape={true}
18351855
contentStyle={Object {}}
18361856
defaultOpen={false}
1857+
disabled={false}
18371858
keepTooltipInside={false}
18381859
lockScroll={false}
18391860
modal={false}

‎__test__/index.test.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,14 @@ test("it should render correctly on click ", () => {
3939
expect(getByText("popup content")).toBeDefined();
4040
});
4141

42+
test("it should not render when disabled", () => {
43+
const { getByText, queryByText } = render(<PopupTest disabled />);
44+
fireEvent.click(getByText("Trigger"));
45+
expect(queryByText("popup content")).toBeNull();
46+
});
47+
4248
test("it should render correctly on click (on = 'click') ", () => {
43-
const { getByText } = render(<PopupTest on="click"/>);
49+
const { getByText } = render(<PopupTest on="click" />);
4450
fireEvent.click(getByText("Trigger"));
4551
expect(getByText("popup content")).toBeDefined();
4652
});

‎docs/src/mdPages/3.componentApi.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ The reactjs-popup API is inspired by semantic popup docs
2323
| offsetY | 0 | number | OffsetY in pixels to be applied to the Popup. |
2424
| arrow | true | {bool} | Arrow element |
2525
| modal | false | {bool} | A modal component when modal ={true} |
26+
| disabled | false | {bool} | Disable the popup from showing up and close it if it's open |
2627
| lockScroll | false | {bool} | Disable body scroll when modal is open ( work only with modal) |
2728
| closeOnDocumentClick | true | {bool} | close popup when the overlay clicked |
2829
| closeOnEscape | true | {bool} | close popup when Escape clicked |

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"@babel/preset-env": "^7.0.0-beta.44",
2525
"@babel/preset-react": "^7.0.0-beta.44",
2626
"babel-plugin-transform-class-properties": "^6.24.1",
27-
"babel-preset-env": "^1.6.1",
27+
"babel-preset-env": "^1.7.0",
2828
"babel-preset-react": "^6.24.1",
2929
"bili": "^3.0.15",
3030
"cross-env": "^5.1.1",

‎src/index.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default class Popup extends React.PureComponent {
2626
onClose: () => {},
2727
defaultOpen: false,
2828
open: false,
29+
disabled: false,
2930
closeOnDocumentClick: true,
3031
closeOnEscape: true,
3132
on: ["click"],
@@ -67,11 +68,21 @@ export default class Popup extends React.PureComponent {
6768
});
6869
}
6970
}
71+
7072
componentWillReceiveProps(nextProps) {
7173
if (this.props.open === nextProps.open) return;
7274
if (nextProps.open) this.openPopup();
7375
else this.closePopup();
7476
}
77+
78+
componentDidUpdate(prevProps) {
79+
if (prevProps.disabled !== this.props.disabled
80+
&& this.props.disabled
81+
&& this.state.isOpen) {
82+
this.closePopup();
83+
}
84+
}
85+
7586
componentWillUnmount() {
7687
// kill any function to execute if the component is unmounted
7788
clearTimeout(this.timeOut);
@@ -91,7 +102,7 @@ export default class Popup extends React.PureComponent {
91102
else this.openPopup();
92103
};
93104
openPopup = () => {
94-
if (this.state.isOpen) return;
105+
if (this.state.isOpen || this.props.disabled) return;
95106
this.setState({ isOpen: true }, () => {
96107
this.setPosition();
97108
this.props.onOpen();
@@ -291,6 +302,7 @@ if (process.env.NODE_ENV !== "production") {
291302
className: PropTypes.string,
292303
modal: PropTypes.bool,
293304
closeOnDocumentClick: PropTypes.bool,
305+
disabled: PropTypes.bool,
294306
lockScroll: PropTypes.bool,
295307
offsetX: PropTypes.number,
296308
offsetY: PropTypes.number,

‎stories/src/DisabledTooltip.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from "react";
2+
import Popup from "../../src/";
3+
4+
export default class DisabledTooltip extends React.PureComponent {
5+
state = {
6+
disabled: false,
7+
}
8+
render() {
9+
return (
10+
<div>
11+
<div>
12+
<button
13+
style={{marginBottom: '20px'}}
14+
onClick={() => { this.setState({ disabled: !this.state.disabled }) }}
15+
>
16+
Toggle disabled state
17+
</button>
18+
</div>
19+
<Popup
20+
on="hover"
21+
closeOnDocumentClick={true}
22+
trigger={
23+
<button
24+
onClick={() => { this.setState({ disabled: true }) }}
25+
disabled={this.state.disabled}
26+
>
27+
A button with tooltip
28+
</button>
29+
}
30+
disabled={this.state.disabled}
31+
>
32+
<div>
33+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptas
34+
ex, blanditiis reiciendis dolor numquam pariatur facilis, labore, libero
35+
nihil asperiores ae facilis quis commodi dolores, at enim. Deserunt qui,
36+
officiis culpa optio numquam ullam pariatur voluptas tempora doloremque!
37+
</div>
38+
</Popup>
39+
</div>
40+
)
41+
}
42+
}

‎stories/src/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Centred } from "story-router";
66
import PopupElementStory from "./PopupElement";
77
import PopupFuncStory from "./PopupFunc";
88
import PopupInputFocusStory from "./PopupInputFocus";
9+
import DisabledTooltip from "./DisabledTooltip";
910
import ModalStory from "./Modal";
1011
import Menu from "./Menu";
1112
import ControlledModal from "./ControlledModal";
@@ -43,6 +44,10 @@ export default [
4344
name: "Controlled Tooltip Component", // without props
4445
component: Centred(ControlledTooltip)
4546
},
47+
{
48+
name: "Disabled Tooltip Component", // without props
49+
component: Centred(DisabledTooltip)
50+
},
4651
{
4752
name: "Menu Component", // without props
4853
component: Centred(Menu)

0 commit comments

Comments
 (0)