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

handle closing user and notification popover cards when clicking outside of the card #90

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

handle closing user and notification popover cards when clicking outside of the card #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
32da9e3
close user card popover if click is outside of popover
mamadou-niakate Oct 14, 2022
c0cf884
Merge pull request #1 from mamadou-niakate/bugFix/close-user-card
mamadou-niakate Oct 21, 2022
d725f8e
close the notification card if click outside
metmetal Oct 21, 2022
5883b74
Merge pull request #3 from mamadou-niakate/bugFix/close-notification-…
mamadou-niakate Oct 27, 2022
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
32 changes: 27 additions & 5 deletions src/components/Layout/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,18 @@ const MdNotificationsActiveWithBadge = withBadge({
})(MdNotificationsActive);

class Header extends React.Component {
state = {
isOpenNotificationPopover: false,
isNotificationConfirmed: false,
isOpenUserCardPopover: false,
};
constructor(props) {
super(props);

this.state = {
isOpenNotificationPopover: false,
isNotificationConfirmed: false,
isOpenUserCardPopover: false,
};
}

toggleNotificationPopover = () => {
this.props.handleContentClickStateChange(true);
this.setState({
isOpenNotificationPopover: !this.state.isOpenNotificationPopover,
});
Expand All @@ -63,6 +68,10 @@ class Header extends React.Component {
};

toggleUserCardPopover = () => {
// set isContentClicked state in "MainLyout" component to true
// so that when click is outside of popover, isContentClicked will be set to false
// then the popover will be closed
this.props.handleContentClickStateChange(true);
this.setState({
isOpenUserCardPopover: !this.state.isOpenUserCardPopover,
});
Expand All @@ -75,6 +84,19 @@ class Header extends React.Component {
document.querySelector('.cr-sidebar').classList.toggle('cr-sidebar--open');
};

componentDidUpdate() {
// need to close popover if click is outside of popover :
// check if popover is open and isContentClicked is false
// if so, close the popover
if (this.state.isOpenUserCardPopover && !this.props.isContentClicked) {
this.setState({ isOpenUserCardPopover: this.props.isContentClicked });
}

if (this.state.isOpenNotificationPopover && !this.props.isContentClicked) {
this.setState({ isOpenNotificationPopover: this.props.isContentClicked });
}
}

render() {
const { isNotificationConfirmed } = this.state;

Expand Down
27 changes: 25 additions & 2 deletions src/components/Layout/MainLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,17 @@ import NotificationSystem from 'react-notification-system';
import { NOTIFICATION_SYSTEM_STYLE } from 'utils/constants';

class MainLayout extends React.Component {
constructor(props) {
super(props);
this.state = {
isContentClicked: false, // state to control if Content tag is clicked
};
// bind handleContentClickStateChange to the current component
// so that it can be use as props in Header component
this.handleContentClickStateChange =
this.handleContentClickStateChange.bind(this);
}

static isSidebarOpen() {
return document
.querySelector('.cr-sidebar')
Expand Down Expand Up @@ -61,6 +72,15 @@ class MainLayout extends React.Component {
) {
this.openSidebar('close');
}
// this.handleContentClickStateChange(false);
};

handleContentClickStateChange(open) {
this.setState({ isContentClicked: open });
}

handleMainContentClick = () => {
this.handleContentClickStateChange(false);
};

checkBreakpoint(breakpoint) {
Expand Down Expand Up @@ -89,10 +109,13 @@ class MainLayout extends React.Component {
render() {
const { children } = this.props;
return (
<main className="cr-app bg-light">
<main className="cr-app bg-light" onClick={this.handleMainContentClick}>
<Sidebar />
<Content fluid onClick={this.handleContentClick}>
<Header />
<Header
isContentClicked={this.state.isContentClicked}
handleContentClickStateChange={this.handleContentClickStateChange}
/>
{children}
<Footer />
</Content>
Expand Down