Skip to content

chore(DatePicker): updated controlled examples #9171

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

Merged
merged 2 commits into from
May 31, 2023
Merged

chore(DatePicker): updated controlled examples #9171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e8b7ad6
chore(DatePicker): updated controlled examples
May 23, 2023
8efb6ef
Updated logic for controlled example
May 30, 2023
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
17 changes: 10 additions & 7 deletions packages/react-core/src/components/DatePicker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export interface DatePickerRef {
* If the eventKey parameter is set to 'Escape', that will invoke the date pickers
* onEscapePress event to toggle the correct control appropriately.
*/
toggleCalendar: (isOpen?: boolean, eventKey?: string) => void;
toggleCalendar: (isOpen?: boolean) => void;
}

export const yyyyMMddFormat = (date: Date) =>
Expand Down Expand Up @@ -189,10 +189,8 @@ const DatePickerBase = (
ref,
() => ({
setCalendarOpen: (isOpen: boolean) => setPopoverOpen(isOpen),
toggleCalendar: (setOpen?: boolean, eventKey?: string) => {
if (eventKey === KeyTypes.Escape && popoverOpen && !selectOpen) {
setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev));
}
toggleCalendar: (setOpen?: boolean) => {
setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev));
Comment on lines -192 to +193
Copy link
Contributor Author

@thatblindgeye thatblindgeye May 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nicolethoen @tlabaj Pushed an update that makes the example work as intended and added an integration test for the functionality.

I removed the eventKey param as it wasn't being used in the example when added, and it doesn't seem like it would be necessary any more? I tested the datepicker in modal demo and pressing Escape to close the datepicker didn't cause the issue of also closing the modal.

},
isCalendarOpen: popoverOpen
}),
Expand Down Expand Up @@ -222,7 +220,7 @@ const DatePickerBase = (
}
showClose={false}
isVisible={popoverOpen}
shouldClose={(event, _fn) => {
shouldClose={(event, hideFunction) => {
event = event as KeyboardEvent;
if (event.key === KeyTypes.Escape && selectOpen) {
event.stopPropagation();
Expand All @@ -233,7 +231,12 @@ const DatePickerBase = (
if (buttonRef.current && buttonRef.current.contains(event.target as Node)) {
return false;
}
setPopoverOpen(false);

if (popoverOpen) {
event.stopPropagation();
setPopoverOpen(false);
hideFunction();
}
Comment on lines +235 to +239
Copy link
Contributor Author

@thatblindgeye thatblindgeye May 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This prevents the CalendarMonth from opening again when pressing the "Toggle" button to close it, and also allows clicking outside the CalendarMonth to close it.

if (event.key === KeyTypes.Escape && popoverOpen) {
event.stopPropagation();
}
Expand Down
4 changes: 3 additions & 1 deletion packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ export const DatePickerControlled: React.FunctionComponent = () => {
const [value, setValue] = React.useState(initialValue);
return (
<React.Fragment>
<Button onClick={() => setValue(initialValue)}>Reset date</Button>
<DatePicker value={value} onChange={(_event, value) => setValue(value)} />
<br />
<br />
<Button onClick={() => setValue(initialValue)}>Reset date</Button>
</React.Fragment>
);
};
4 changes: 3 additions & 1 deletion packages/react-core/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ export const DatePickerControlledCalendar: React.FunctionComponent = () => {
};
return (
<React.Fragment>
<Button onClick={onClick}>Toggle calendar</Button>
<DatePicker ref={dateRef} />
<br />
<br />
<Button onClick={onClick}>Toggle calendar</Button>
</React.Fragment>
);
};
10 changes: 9 additions & 1 deletion packages/react-integration/cypress/integration/datepicker.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ it('Navigate to demo section', () => {

// TODO: Reenable with issue #8457
xit('Verify validation error can be cleared from outside', () => {
cy.get('.pf-v5-c-date-picker')
cy.get('#date-picker-validator > .pf-v5-c-date-picker')
.children()
.within(() => {
cy.get('input');
Expand All @@ -17,3 +17,11 @@ xit('Verify validation error can be cleared from outside', () => {
cy.get('button').contains('Set date').click();
cy.get('div.pf-m-error').should('not.exist');
});

it('Verify calendar state can be controlled', () => {
cy.get('#date-picker-controlled .pf-v5-c-popover').should('not.exist');
cy.get('button').contains('Toggle').click();
cy.get('#date-picker-controlled .pf-v5-c-popover').should('exist');
cy.get('button').contains('Toggle').click();
cy.get('#date-picker-controlled .pf-v5-c-popover').should('not.exist');
});
23 changes: 20 additions & 3 deletions ...ages/react-integration/demo-app-ts/src/components/demos/DatePickerDemo/DatePickerDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React from 'react';

export const DatePickerDemo = () => {
const [value, setValue] = React.useState('2020-03-18');
const controlledDateRef = React.useRef(null);

const rangeValidator = (date: Date) => {
if (date < new Date('2020-03-17')) {
Expand All @@ -13,9 +14,25 @@ export const DatePickerDemo = () => {

return (
<>
<DatePicker value={value} onChange={(event, value) => setValue(value)} validators={[rangeValidator]} />
<div>
<button onClick={() => setValue('2020-03-18')}>Set date</button>
<div id="date-picker-validator">
<DatePicker value={value} onChange={(event, value) => setValue(value)} validators={[rangeValidator]} />
<div>
<button onClick={() => setValue('2020-03-18')}>Set date</button>
</div>
</div>
<div id="date-picker-controlled">
<DatePicker ref={controlledDateRef} value={value} />
<div>
<button
onClick={() => {
if (controlledDateRef.current) {
controlledDateRef.current.toggleCalendar();
}
}}
>
Toggle
</button>
</div>
</div>
</>
);
Expand Down