Skip to content

Datepicker onCalendarOpenStateChange prop #28136

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
jurokapsiar merged 6 commits into from
Jun 12, 2023
Merged

Datepicker onCalendarOpenStateChange prop #28136

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8e431d2
Datepicker onCalendarOpenStateChange prop
Jun 5, 2023
ecbbbf8
Datepicker onCalendarOpenStateChange prop
Jun 5, 2023
8c54ab0
fix
Jun 9, 2023
68b801a
example
Jun 9, 2023
39f1ed2
pretty
Jun 11, 2023
b6a230b
Merge branch 'master' into v0-datepicker-open-state
jurokapsiar Jun 11, 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
3 changes: 3 additions & 0 deletions packages/fluentui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm

Copy link
Collaborator

@fabricteam fabricteam Jun 11, 2023

Choose a reason for hiding this comment

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

🕵 FluentUI-v0 Open the Visual Regressions report to inspect the 1 screenshots

✅ There was 0 screenshots added, 1 screenshots removed, 1259 screenshots unchanged, 0 screenshots with different dimensions and 0 screenshots with visible difference.

unknown 1 screenshots
Image Name Diff(in Pixels) Image Type
Chat.Chat Example Details Teams High Contrast.chromium.png 0 Removed

## [Unreleased]

### Fixes
- `Datepicker`: add onCalendarOpenStateChange prop. @jurokapsiar ([#28136](https://github.com/microsoft/fluentui/pull/28136))

<!--------------------------------[ v0.66.4 ]------------------------------- -->
## [v0.66.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-northstar_v0.66.4) (2023-03-10)
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-northstar_v0.66.3..@fluentui/react-northstar_v0.66.4)
Expand Down
4 changes: 2 additions & 2 deletions ...luentui/docs/src/examples/components/Datepicker/Types/DatepickerExampleOpen.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import * as React from 'react';
import { Datepicker } from '@fluentui/react-northstar';

const DatepickerExampleOpen = () => {
const [open] = useBooleanKnob({ name: 'open' });
const [open, setOpen] = useBooleanKnob({ name: 'open' });

return <Datepicker calendarOpenState={open} />;
return <Datepicker calendarOpenState={open} onCalendarOpenStateChange={(_, { calendarOpenState }) => setOpen(calendarOpenState)}/>;
};

export default DatepickerExampleOpen;
36 changes: 30 additions & 6 deletions packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,14 @@ export interface DatepickerProps extends UIComponentProps, Partial<ICalendarStri
/** Controls the calendar's open state. */
calendarOpenState?: boolean;

/**
* Called on change of the open state.
*
* @param event - React's original SyntheticEvent.
* @param data - All props and proposed value.
*/
onCalendarOpenStateChange?: ComponentEventHandler<DatepickerProps>;

/** Initial 'selectedDate' value. */
defaultSelectedDate?: Date;

Expand Down Expand Up @@ -253,6 +261,21 @@ export const Datepicker = React.forwardRef<HTMLDivElement, DatepickerProps>((pro
: '',
);

const trySetOpenState = (
newValue: boolean,
event:
| React.SyntheticEvent
| React.KeyboardEvent
| React.MouseEvent
| KeyboardEvent
| MouseEvent
| TouchEvent
| WheelEvent,
) => {
setOpenState(newValue);
_.invoke(props, 'onCalendarOpenStateChange', event, { ...props, ...{ calendarOpenState: newValue } });
};

const calendarOptions: IDayGridOptions = {
selectedDate,
navigatedDate: !!selectedDate && !error ? selectedDate : props.today ?? new Date(),
Expand All @@ -274,10 +297,10 @@ export const Datepicker = React.forwardRef<HTMLDivElement, DatepickerProps>((pro
actionHandlers: {
open: e => {
if (allowManualInput) {
setOpenState(!openState);
trySetOpenState(!openState, e);
} else {
// Keep popup open in case we can only enter the date through calendar.
setOpenState(true);
trySetOpenState(true, e);
}

e.preventDefault();
Expand Down Expand Up @@ -309,7 +332,7 @@ export const Datepicker = React.forwardRef<HTMLDivElement, DatepickerProps>((pro
onDateChange: (e, itemProps) => {
const targetDay = itemProps.value;
setSelectedDate(targetDay.originalDate);
setOpenState(false);
trySetOpenState(false, e);
setError('');
setFormattedDate(valueFormatter(targetDay.originalDate));

Expand All @@ -325,10 +348,10 @@ export const Datepicker = React.forwardRef<HTMLDivElement, DatepickerProps>((pro
const overrideInputProps = (predefinedProps: InputProps): InputProps => ({
onClick: (e): void => {
if (allowManualInput) {
setOpenState(!openState);
trySetOpenState(!openState, e);
} else {
// Keep popup open in case we can only enter the date through calendar.
setOpenState(true);
trySetOpenState(true, e);
}

_.invoke(predefinedProps, 'onClick', e, predefinedProps);
Expand Down Expand Up @@ -415,7 +438,7 @@ export const Datepicker = React.forwardRef<HTMLDivElement, DatepickerProps>((pro
onOpenChange: (e, { open }) => {
// In case the event is a click on input, we ignore such events as it should be directly handled by input.
if (!(e.type === 'click' && e.target === inputRef?.current)) {
setOpenState(open);
trySetOpenState(open, e);
_.invoke(predefinedProps, 'onOpenChange', e, { open });
}
},
Expand Down Expand Up @@ -454,6 +477,7 @@ Datepicker.propTypes = {
fallbackToLastCorrectDateOnBlur: PropTypes.bool,
defaultCalendarOpenState: PropTypes.bool,
calendarOpenState: PropTypes.bool,
onCalendarOpenStateChange: PropTypes.func,

selectedDate: PropTypes.instanceOf(Date),
defaultSelectedDate: PropTypes.instanceOf(Date),
Expand Down