Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added disabled prop #50

Merged
merged 3 commits into from
Oct 31, 2018
Merged

Added disabled prop #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a1f665d
First commit on the new disabled prop
raRaRa Oct 19, 2018
df93c99
Added test, updated docs and more
raRaRa Oct 20, 2018
696d6e2
Merge remote-tracking branch 'upstream/master'
raRaRa Oct 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions __test__/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 1
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -116,6 +117,7 @@ exports[`it should close on click outside popup (closeOnDocumentClick = true ) 2
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -159,6 +161,7 @@ exports[`it should render correctly 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -192,6 +195,7 @@ exports[`it should render correctly on click and will update the the popup conte
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -300,6 +304,7 @@ exports[`it should render correctly on click and will update the the popup conte
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -348,6 +353,7 @@ exports[`it should render correctly on click and will update the trigger text
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -449,6 +455,7 @@ exports[`it should render correctly on click and will update the trigger text
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -497,6 +504,7 @@ exports[`it should rendered in the bottom center position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -600,6 +608,7 @@ exports[`it should rendered in the bottom left position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -703,6 +712,7 @@ exports[`it should rendered in the bottom right position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -806,6 +816,7 @@ exports[`it should rendered in the left bottom position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -909,6 +920,7 @@ exports[`it should rendered in the left center position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -1012,6 +1024,7 @@ exports[`it should rendered in the left top position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -1115,6 +1128,7 @@ exports[`it should rendered in the right bottom position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -1218,6 +1232,7 @@ exports[`it should rendered in the right center position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -1321,6 +1336,7 @@ exports[`it should rendered in the right top position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -1424,6 +1440,7 @@ exports[`it should rendered in the top center position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -1527,6 +1544,7 @@ exports[`it should rendered in the top left position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -1630,6 +1648,7 @@ exports[`it should rendered in the top right position 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -1732,6 +1751,7 @@ exports[`it shouldn't close on click outside popup 1`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down Expand Up @@ -1834,6 +1854,7 @@ exports[`it shouldn't close on click outside popup 2`] = `
closeOnEscape={true}
contentStyle={Object {}}
defaultOpen={false}
disabled={false}
keepTooltipInside={false}
lockScroll={false}
modal={false}
Expand Down
8 changes: 7 additions & 1 deletion __test__/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,14 @@ test("it should render correctly on click ", () => {
expect(getByText("popup content")).toBeDefined();
});

test("it should not render when disabled", () => {
const { getByText, queryByText } = render(<PopupTest disabled />);
fireEvent.click(getByText("Trigger"));
expect(queryByText("popup content")).toBeNull();
});

test("it should render correctly on click (on = 'click') ", () => {
const { getByText } = render(<PopupTest on="click"/>);
const { getByText } = render(<PopupTest on="click" />);
fireEvent.click(getByText("Trigger"));
expect(getByText("popup content")).toBeDefined();
});
Expand Down
1 change: 1 addition & 0 deletions docs/src/mdPages/3.componentApi.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ The reactjs-popup API is inspired by semantic popup docs
| offsetY | 0 | number | OffsetY in pixels to be applied to the Popup. |
| arrow | true | {bool} | Arrow element |
| modal | false | {bool} | A modal component when modal ={true} |
| disabled | false | {bool} | Disable the popup from showing up and close it if it's open |
| lockScroll | false | {bool} | Disable body scroll when modal is open ( work only with modal) |
| closeOnDocumentClick | true | {bool} | close popup when the overlay clicked |
| closeOnEscape | true | {bool} | close popup when Escape clicked |
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"@babel/preset-env": "^7.0.0-beta.44",
"@babel/preset-react": "^7.0.0-beta.44",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bili": "^3.0.15",
"cross-env": "^5.1.1",
Expand Down
14 changes: 13 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default class Popup extends React.PureComponent {
onClose: () => {},
defaultOpen: false,
open: false,
disabled: false,
closeOnDocumentClick: true,
closeOnEscape: true,
on: ["click"],
Expand Down Expand Up @@ -67,11 +68,21 @@ export default class Popup extends React.PureComponent {
});
}
}

componentWillReceiveProps(nextProps) {
if (this.props.open === nextProps.open) return;
if (nextProps.open) this.openPopup();
else this.closePopup();
}

componentDidUpdate(prevProps) {
if (prevProps.disabled !== this.props.disabled
&& this.props.disabled
&& this.state.isOpen) {
this.closePopup();
}
}

componentWillUnmount() {
// kill any function to execute if the component is unmounted
clearTimeout(this.timeOut);
Expand All @@ -91,7 +102,7 @@ export default class Popup extends React.PureComponent {
else this.openPopup();
};
openPopup = () => {
if (this.state.isOpen) return;
if (this.state.isOpen || this.props.disabled) return;
this.setState({ isOpen: true }, () => {
this.setPosition();
this.props.onOpen();
Expand Down Expand Up @@ -291,6 +302,7 @@ if (process.env.NODE_ENV !== "production") {
className: PropTypes.string,
modal: PropTypes.bool,
closeOnDocumentClick: PropTypes.bool,
disabled: PropTypes.bool,
lockScroll: PropTypes.bool,
offsetX: PropTypes.number,
offsetY: PropTypes.number,
Expand Down
42 changes: 42 additions & 0 deletions stories/src/DisabledTooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from "react";
import Popup from "../../src/";

export default class DisabledTooltip extends React.PureComponent {
state = {
disabled: false,
}
render() {
return (
<div>
<div>
<button
style={{marginBottom: '20px'}}
onClick={() => { this.setState({ disabled: !this.state.disabled }) }}
>
Toggle disabled state
</button>
</div>
<Popup
on="hover"
closeOnDocumentClick={true}
trigger={
<button
onClick={() => { this.setState({ disabled: true }) }}
disabled={this.state.disabled}
>
A button with tooltip
</button>
}
disabled={this.state.disabled}
>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptas
ex, blanditiis reiciendis dolor numquam pariatur facilis, labore, libero
nihil asperiores ae facilis quis commodi dolores, at enim. Deserunt qui,
officiis culpa optio numquam ullam pariatur voluptas tempora doloremque!
</div>
</Popup>
</div>
)
}
}
5 changes: 5 additions & 0 deletions stories/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Centred } from "story-router";
import PopupElementStory from "./PopupElement";
import PopupFuncStory from "./PopupFunc";
import PopupInputFocusStory from "./PopupInputFocus";
import DisabledTooltip from "./DisabledTooltip";
import ModalStory from "./Modal";
import Menu from "./Menu";
import ControlledModal from "./ControlledModal";
Expand Down Expand Up @@ -43,6 +44,10 @@ export default [
name: "Controlled Tooltip Component", // without props
component: Centred(ControlledTooltip)
},
{
name: "Disabled Tooltip Component", // without props
component: Centred(DisabledTooltip)
},
{
name: "Menu Component", // without props
component: Centred(Menu)
Expand Down