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

Jump to bottom

refactor: [DHIS2-17825] replace ClickAwayListener with Layer onBackdropClick #3745

Merged
merged 5 commits into from
Aug 8, 2024
Merged

refactor: [DHIS2-17825] replace ClickAwayListener with Layer onBackdropClick #3745

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1ba58bb
chore: replace ClickAwayListener with Layer onBackdropClick
simonadomnisoru Aug 1, 2024
8e576f4
chore: fix Program stage wl cypress tests
simonadomnisoru Aug 1, 2024
7c43afc
chore: fix events wl cypress tests
simonadomnisoru Aug 5, 2024
ae66341
chore: fix Program stage wl cypress tests
simonadomnisoru Aug 5, 2024
a14db05
Merge branch 'master' into DHIS2-17825
simonadomnisoru Aug 8, 2024
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
6 changes: 3 additions & 3 deletions cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/EventWorkingListsUser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -388,11 +388,11 @@ When('you set the date of admission filter', () => {
.within(() => {
cy.contains('More filters')
.click();

cy.contains('Date of admission')
.click();
});

cy.get('[data-test="more-filters-menu"]')
.within(() => cy.contains('Date of admission').click());

cy.get('[data-test="list-view-filter-contents"]')
.within(() => {
cy.get('input[type="text"]')
Expand Down
29 changes: 17 additions & 12 deletions cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/TeiWorkingListsUser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,11 @@ Given('you open the main page with Ngelehun, WHO RMNCH Tracker and First antenat
.within(() => {
cy.contains('More filters')
.click();
cy.contains('Program stage')
.click();
});

cy.get('[data-test="more-filters-menu"]')
.within(() => cy.contains('Program stage').click());

cy.get('[data-test="list-view-filter-contents"]')
.contains('First antenatal care visit')
.click();
Expand All @@ -66,10 +67,11 @@ Given('you open the main page with Ngelehun and Malaria case diagnosis and House
.within(() => {
cy.contains('More filters')
.click();
cy.contains('Program stage')
.click();
});

cy.get('[data-test="more-filters-menu"]')
.within(() => cy.contains('Program stage').click());

cy.get('[data-test="list-view-filter-contents"]')
.contains('Household investigation')
.click();
Expand Down Expand Up @@ -186,10 +188,11 @@ When('you set the WHOMCH Smoking filter to No', () => {
.within(() => {
cy.get('[data-test="more-filters"]').eq(1)
.click();
cy.contains('WHOMCH Smoking')
.click();
});

cy.get('[data-test="more-filters-menu"]')
.within(() => cy.contains('WHOMCH Smoking').click());

cy.get('[data-test="list-view-filter-contents"]')
.contains('No')
.click();
Expand Down Expand Up @@ -580,9 +583,9 @@ When('you open the program stage filters from the more filters dropdown menu', (
.within(() => {
cy.contains('More filters')
.click();
cy.contains('Program stage')
.click();
});
cy.get('[data-test="more-filters-menu"]')
.within(() => cy.contains('Program stage').click());
});

Then('you see the program stages and the default events filters', () => {
Expand Down Expand Up @@ -741,10 +744,11 @@ Given('you open the main page with Ngelehun and WHO RMNCH Tracker context and co
.within(() => {
cy.contains('More filters')
.click();
cy.contains('Program stage')
.click();
});

cy.get('[data-test="more-filters-menu"]')
.within(() => cy.contains('Program stage').click());

cy.get('[data-test="list-view-filter-contents"]')
.contains('Postpartum care visit')
.click();
Expand All @@ -760,10 +764,11 @@ Given('you open the main page with all accesible records in the WHO RMNCH Tracke
.within(() => {
cy.contains('More filters')
.click();
cy.contains('Program stage')
.click();
});

cy.get('[data-test="more-filters-menu"]')
.within(() => cy.contains('Program stage').click());

cy.get('[data-test="list-view-filter-contents"]')
.contains('Postpartum care visit')
.click();
Expand Down
36 changes: 18 additions & 18 deletions ...dules/capture-core/components/ListView/Filters/FilterRestMenu/FilterRestMenu.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
// @flow
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { IconChevronDown16, IconChevronUp16, Button } from '@dhis2/ui';
import { IconChevronDown16, IconChevronUp16, Button, Layer } from '@dhis2/ui';

import { Manager, Popper, Reference } from 'react-popper';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Grow from '@material-ui/core/Grow';
import Paper from '@material-ui/core/Paper';
import MenuList from '@material-ui/core/MenuList';
Expand Down Expand Up @@ -168,17 +167,17 @@ class FilterRestMenuPlain extends React.Component<Props, State> {
}
</Reference>
{this.state.filterSelectorOpen &&
<Popper
placement="bottom-start"
>
{
({ ref, style, placement }) => (
<div
ref={ref}
style={{ ...style, zIndex: 1 }}
data-placement={placement}
>
<ClickAwayListener onClickAway={this.handleClickAway}>
<Layer onBackdropClick={this.handleClickAway} dataTest="more-filters-menu">
<Popper
placement="bottom-start"
>
{
({ ref, style, placement }) => (
<div
ref={ref}
style={{ ...style, zIndex: 1 }}
data-placement={placement}
>
<Grow
in={!!this.state.filterSelectorOpen}
id="menu-list-grow"
Expand All @@ -191,11 +190,12 @@ class FilterRestMenuPlain extends React.Component<Props, State> {
</MenuList>
</Paper>
</Grow>
</ClickAwayListener>
</div>
)
}
</Popper>}
</div>
)
}
</Popper>
</Layer>
}
</Manager>
);
}
Expand Down
40 changes: 20 additions & 20 deletions src/core_modules/capture-core/components/ListView/withEndColumnMenu/RowMenu.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
// @flow
import * as React from 'react';
import { Manager, Popper, Reference } from 'react-popper';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import { spacers, IconMore24, colors } from '@dhis2/ui';
import { spacers, IconMore24, colors, Layer } from '@dhis2/ui';
import Grow from '@material-ui/core/Grow';
import Paper from '@material-ui/core/Paper';
import MenuList from '@material-ui/core/MenuList';
Expand Down Expand Up @@ -125,19 +124,19 @@ class Index extends React.Component<Props, State> {
}
</Reference>
{this.state.menuOpen &&
<Popper
placement="bottom-end"
strategy={'fixed'}
>
{
({ ref, style, placement }) => (
<div
ref={ref}
style={style}
className={classes.popperContainer}
data-placement={placement}
>
<ClickAwayListener onClickAway={this.handleClickAway}>
<Layer onBackdropClick={this.handleClickAway} >
<Popper
placement="bottom-end"
strategy={'fixed'}
>
{
({ ref, style, placement }) => (
<div
ref={ref}
style={style}
className={classes.popperContainer}
data-placement={placement}
>
<Grow
in={!!this.state.menuOpen}
id="menu-list-grow"
Expand All @@ -148,11 +147,12 @@ class Index extends React.Component<Props, State> {
{this.renderMenuItems()}
</Paper>
</Grow>
</ClickAwayListener>
</div>
)
}
</Popper>}
</div>
)
}
</Popper>
</Layer>
}
</Manager>
);
}
Expand Down
36 changes: 18 additions & 18 deletions src/core_modules/capture-core/components/Popper/Popper.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import * as React from 'react';
import { Manager, Popper, Reference } from 'react-popper';
import type { Placement } from '@popperjs/core/lib';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import { Layer } from '@dhis2/ui';
import Grow from '@material-ui/core/Grow';

type Props = {
Expand Down Expand Up @@ -74,18 +74,18 @@ export class MenuPopper extends React.Component<Props, State> {
}
</Reference>
{this.state.popperOpen &&
<Popper
placement={this.props.placement}
>
{
({ ref, style, placement }) => (
<div
ref={ref}
style={{ ...style, zIndex: 1 }}
className={classes ? classes.popperContainer : ''}
data-placement={placement}
>
<ClickAwayListener onClickAway={this.handleClickAway}>
<Layer onBackdropClick={this.handleClickAway} >
<Popper
placement={this.props.placement}
>
{
({ ref, style, placement }) => (
<div
ref={ref}
style={{ ...style, zIndex: 1 }}
className={classes ? classes.popperContainer : ''}
data-placement={placement}
>
<Grow
in={!!this.state.popperOpen}
id="menu-list-grow"
Expand All @@ -96,11 +96,11 @@ export class MenuPopper extends React.Component<Props, State> {
{getPopperContent(this.toggleMenu)}
</React.Fragment>
</Grow>
</ClickAwayListener>
</div>
)
}
</Popper>}
</div>
)
}
</Popper>
</Layer>}
</Manager>
);
}
Expand Down
Loading