fix microsoft/powercat-creator-kit#310 (#325)

microsoft · Aug 4, 2023 · 3f0c290 · 3f0c290
1 parent eca35de
commit 3f0c290
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 31 deletions.
diff --git a/Calendar/Calendar/__tests__/calendar-lifecycle.test.ts b/Calendar/Calendar/__tests__/calendar-lifecycle.test.ts
@@ -69,7 +69,7 @@ describe('Calendar', () => {
             ReactTestUtils.Simulate.click(calendarBtn);
         });
         const outputs = component.getOutputs();
-        expect(notifyOutputChanged).toBeCalledTimes(2);
+        expect(notifyOutputChanged).toBeCalledTimes(1);
         expect(outputs.SelectedDateValue?.toDateString()).toEqual(date.toDateString());
         ReactDOM.unmountComponentAtNode(container);
     });

diff --git a/Calendar/Calendar/components/Calendar.tsx b/Calendar/Calendar/components/Calendar.tsx
@@ -1,18 +1,11 @@
 import * as React from 'react';
-import {
-    ThemeProvider,
-    createTheme,
-    IPartialTheme,
-    ICalendar,
-    ICalendarStrings,
-    defaultCalendarStrings,
-} from '@fluentui/react';
+import { ThemeProvider, createTheme, IPartialTheme, ICalendarStrings, defaultCalendarStrings } from '@fluentui/react';
 import { Calendar as CustomCalendar } from '../fluentui-fork/Calendar/Calendar';
 import { ICalendarProps } from './Component.types';
 import { getWeeksFirstDay } from '../components/Utilities';
-import { useAsync } from '@fluentui/react-hooks';
 import { DateTimePickerStrings } from './DateTimePickerStrings';
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 export const CanvasCalendar = React.memo((props: ICalendarProps) => {
     const {
         themeJSON,
@@ -35,6 +28,7 @@ export const CanvasCalendar = React.memo((props: ICalendarProps) => {
         backgroundColor,
         language,
     } = props;
+    const componentRef = React.useRef<HTMLDivElement>(null);
     const [calendarString, setCalendarSting] = React.useState<ICalendarStrings>();
     const theme = React.useMemo(() => {
         try {
@@ -45,25 +39,21 @@ export const CanvasCalendar = React.memo((props: ICalendarProps) => {
         }
     }, [themeJSON]);
 
-    const componentRef = React.useRef<ICalendar>(null);
-    const async = useAsync();
     React.useEffect(() => {
         if (setFocus && setFocus !== '' && componentRef) {
-            async.requestAnimationFrame(() => {
-                (componentRef as React.RefObject<ICalendar>).current?.focus();
-            });
+            const selectedDayBtn = (componentRef.current as HTMLElement).getElementsByClassName(
+                'ms-CalendarDay-daySelected',
+            );
+            if (!isDisabled && selectedDayBtn && selectedDayBtn.length > 0) {
+                (selectedDayBtn[0] as HTMLInputElement).focus();
+            }
         }
-    }, [setFocus, componentRef, async]);
+    }, [setFocus, componentRef, isDisabled]);
 
     function onSelectDate(date: Date) {
         onSelected(date);
     }
 
-    React.useEffect(() => {
-        if (selectedDateValue) onSelected(selectedDateValue);
-        //eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     React.useEffect(() => {
         async function getCalendarStrings() {
             setCalendarSting((await DateTimePickerStrings(language)) as ICalendarStrings);
@@ -95,6 +85,7 @@ export const CanvasCalendar = React.memo((props: ICalendarProps) => {
                 highlightCurrentMonth={highlightCurrentMonth}
                 minDate={minDate}
                 maxDate={maxDate}
+                ref={componentRef}
                 styles={{ root: { background: backgroundColor } }} // To remove transparency
             />
         </ThemeProvider>

diff --git a/Calendar/Calendar/index.ts b/Calendar/Calendar/index.ts
@@ -81,8 +81,10 @@ export class Calendar implements ComponentFramework.ReactControl<IInputs, IOutpu
     }
 
     onSelect = (selectedDateValue: Date): void => {
-        this.selectedDateValue = selectedDateValue;
-        this.notifyOutputChanged();
+        if (this.selectedDateValue !== selectedDateValue) {
+            this.selectedDateValue = selectedDateValue;
+            this.notifyOutputChanged();
+        }
     };
 
     /**

diff --git a/Calendar/Calendar/loc/hu-hu.ts b/Calendar/Calendar/loc/hu-hu.ts
@@ -50,4 +50,4 @@ define([], () => {
         DateTimePickerSecondValueInvalid: 'Helytelen másodperc érték',
         DateTimePickerTextErrorMessage: 'Helyes dátum értéket adjon meg',
     };
-});
+});
diff --git a/Calendar/README.md b/Calendar/README.md
@@ -10,11 +10,11 @@ This code component provides a wrapper around the [Fluent UI Calendar](https://d
 
 The control accepts the following properties:
 
--   **Selected Date** - The date value to be pre-selected or Selected after on change event. 
-For e.g. : 
+-   **Selected Date** - The date value to be pre-selected or Selected after on change event.
+For e.g. :
 ```
 //Today's Date
-Today() 
+Today()
 // or based on language
 DateValue("24/7/2022",Language())
 // or specific regional language
@@ -34,7 +34,7 @@ Language()
 -   **Show Week Numbers** - Specify Yes or No to show or hide week numbers.
 -   **Show Six Weeks by Default** - - Specify Yes to show six weeks by default.
 -   **Minimum Date** - If specified a date value, navigation beyond that date will not be allowed.
--   **Maximum Date** - If specified a date value, navigation beyond that date will not be allowed. Refer example provided for Selected Date. 
+-   **Maximum Date** - If specified a date value, navigation beyond that date will not be allowed. Refer example provided for Selected Date.
 -   **First Day of Week** - Select the day to be displayed as first day of week in calendar.
 
 ### Style Properties
@@ -55,19 +55,19 @@ Language()
 When a date is selected, value can be obtained by the selectedDate output property. Below is a set of sample code which can be added in 'OnChange' property, depending on how to output need to be visualized.
 
 ```
-Set(var_SelectedDate, If(!IsBlank(Self.selectedDateValue), Text(Self.selectedDateValue, ShortDate, Language())));
+Set(varSelectedDate, Text(Self.SelectedDateValue, DateTimeFormat.ShortDate, Language()));
 // Example - Output: 7/14/2022
 
 ```
 
 ```
-Set(var_SelectedDate, If(!IsBlank(Self.selectedDateValue), Text(Self.selectedDateValue, LongDate, Language())));
+Set(varSelectedDate, Text(Self.SelectedDateValue, DateTimeFormat.LongDate, Language()));
 // Example - Output: Sunday, July 3, 2022
 
 ```
 
 ```
-Set(var_SelectedDate, If(!IsBlank(Self.selectedDateValue), Text(Self.selectedDateValue, ShortDate, "en-GB")));
+Set(varSelectedDate, Text(Self.SelectedDateValue,DateTimeFormat.ShortDate, "en-GB"))
 // Example - Output: 14/07/2022
 ```
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,4 +50,4 @@ define([], () => { @@
             DateTimePickerSecondValueInvalid: 'Helytelen másodperc érték',
             DateTimePickerTextErrorMessage: 'Helyes dátum értéket adjon meg',
         };
-    });
+    });