From 8e431d2419b33080d75822ff04e455fa59df0baa Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 5 Jun 2023 06:29:56 +0200 Subject: [PATCH 1/5] Datepicker onCalendarOpenStateChange prop --- .../src/components/Datepicker/Datepicker.tsx | 31 +++++++++++++++---- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx index 9f2fc59d0dcb49..ad763b877ff7d9 100644 --- a/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx +++ b/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx @@ -100,6 +100,14 @@ export interface DatepickerProps extends UIComponentProps, Partial; + /** Initial 'selectedDate' value. */ defaultSelectedDate?: Date; @@ -253,6 +261,16 @@ export const Datepicker = React.forwardRef((pro : '', ); + const trySetOpenState = ( + newValue: boolean, + event: 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(), @@ -274,10 +292,10 @@ export const Datepicker = React.forwardRef((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(); @@ -309,7 +327,7 @@ export const Datepicker = React.forwardRef((pro onDateChange: (e, itemProps) => { const targetDay = itemProps.value; setSelectedDate(targetDay.originalDate); - setOpenState(false); + trySetOpenState(false, e); setError(''); setFormattedDate(valueFormatter(targetDay.originalDate)); @@ -325,10 +343,10 @@ export const Datepicker = React.forwardRef((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); @@ -415,7 +433,7 @@ export const Datepicker = React.forwardRef((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 }); } }, @@ -454,6 +472,7 @@ Datepicker.propTypes = { fallbackToLastCorrectDateOnBlur: PropTypes.bool, defaultCalendarOpenState: PropTypes.bool, calendarOpenState: PropTypes.bool, + onCalendarOpenStateChange: PropTypes.func, selectedDate: PropTypes.instanceOf(Date), defaultSelectedDate: PropTypes.instanceOf(Date), From ecbbbf8bb258239555376cb612a7d8bb9be9d262 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 5 Jun 2023 06:55:57 +0200 Subject: [PATCH 2/5] Datepicker onCalendarOpenStateChange prop --- packages/fluentui/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 1eb7881cf83358..dd07189e7c946f 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -18,6 +18,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### Fixes +- `Datepicker`: add onCalendarOpenStateChange prop. @jurokapsiar ([#28136](https://github.com/microsoft/fluentui/pull/28136)) + ## [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) From 8c54ab0f9c3875032a8f521d57c4c269ca2d689c Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Thu, 8 Jun 2023 21:21:51 -0700 Subject: [PATCH 3/5] fix --- .../src/components/Datepicker/Datepicker.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx index ad763b877ff7d9..42540f07835676 100644 --- a/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx +++ b/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx @@ -106,7 +106,7 @@ export interface DatepickerProps extends UIComponentProps, Partial; + onCalendarOpenStateChange?: ComponentEventHandler; /** Initial 'selectedDate' value. */ defaultSelectedDate?: Date; @@ -263,14 +263,19 @@ export const Datepicker = React.forwardRef((pro const trySetOpenState = ( newValue: boolean, - event: React.KeyboardEvent | React.MouseEvent | KeyboardEvent | MouseEvent | TouchEvent | WheelEvent, + 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(), From 68b801a59f71eca27e242c96f0a69a451a9ea79c Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Fri, 9 Jun 2023 09:28:11 +0200 Subject: [PATCH 4/5] example --- .../Datepicker/Types/DatepickerExampleOpen.shorthand.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fluentui/docs/src/examples/components/Datepicker/Types/DatepickerExampleOpen.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Datepicker/Types/DatepickerExampleOpen.shorthand.tsx index cf9926bb91c882..16d78638a6f194 100644 --- a/packages/fluentui/docs/src/examples/components/Datepicker/Types/DatepickerExampleOpen.shorthand.tsx +++ b/packages/fluentui/docs/src/examples/components/Datepicker/Types/DatepickerExampleOpen.shorthand.tsx @@ -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 ; + return setOpen(calendarOpenState)}/>; }; export default DatepickerExampleOpen; From 39f1ed2bd38b4480e325c15637405e9d4bbe05d0 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Sun, 11 Jun 2023 15:46:02 -0700 Subject: [PATCH 5/5] pretty --- .../Datepicker/Types/DatepickerExampleOpen.shorthand.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/fluentui/docs/src/examples/components/Datepicker/Types/DatepickerExampleOpen.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Datepicker/Types/DatepickerExampleOpen.shorthand.tsx index 16d78638a6f194..1ee55b7d13f917 100644 --- a/packages/fluentui/docs/src/examples/components/Datepicker/Types/DatepickerExampleOpen.shorthand.tsx +++ b/packages/fluentui/docs/src/examples/components/Datepicker/Types/DatepickerExampleOpen.shorthand.tsx @@ -4,8 +4,12 @@ import { Datepicker } from '@fluentui/react-northstar'; const DatepickerExampleOpen = () => { const [open, setOpen] = useBooleanKnob({ name: 'open' }); - - return setOpen(calendarOpenState)}/>; + return ( + setOpen(calendarOpenState)} + /> + ); }; export default DatepickerExampleOpen;