feat(DateInput): replace onCalendarClose to onCalendarOpenChanged

VKCOM · Nov 1, 2024 · 685009d · 685009d
1 parent 8bc9bab
commit 685009d
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 22 deletions.
diff --git a/packages/vkui/src/components/DateInput/DateInput.test.tsx b/packages/vkui/src/components/DateInput/DateInput.test.tsx
@@ -126,19 +126,23 @@ describe('DateInput', () => {
 
   it('should call onCloseCalendar calendar was closed', async () => {
     jest.useFakeTimers();
-    const onCalendarClose = jest.fn();
-    const { container } = render(<DateInput value={date} onCalendarClose={onCalendarClose} />);
+    const onCalendarOpenChanged = jest.fn();
+    const { container } = render(
+      <DateInput value={date} onCalendarOpenChanged={onCalendarOpenChanged} />,
+    );
     const inputLikes = getInputsLike(container);
 
     const [dates] = inputLikes;
 
     await userEvent.click(dates);
-    expect(onCalendarClose).toHaveBeenCalledTimes(0);
+    expect(onCalendarOpenChanged).toHaveBeenCalledTimes(1);
+    expect(onCalendarOpenChanged.mock.calls[0][0]).toBeTruthy();
 
     expect(container.contains(document.activeElement)).toBeTruthy();
     await userEvent.click(screen.getByText(`${date.getDate() - 1}`));
 
-    expect(onCalendarClose).toHaveBeenCalledTimes(1);
+    expect(onCalendarOpenChanged).toHaveBeenCalledTimes(2);
+    expect(onCalendarOpenChanged.mock.calls[1][0]).toBeFalsy();
 
     expect(container.contains(document.activeElement)).toBeFalsy();
   });

diff --git a/packages/vkui/src/components/DateInput/DateInput.tsx b/packages/vkui/src/components/DateInput/DateInput.tsx
@@ -64,7 +64,7 @@ export interface DateInputProps
   clearFieldLabel?: string;
   showCalendarLabel?: string;
   disableCalendar?: boolean;
-  onCalendarClose?: VoidFunction;
+  onCalendarOpenChanged?: (opened: boolean) => void;
 }
 
 const elementsConfig = (index: number) => {
@@ -150,7 +150,7 @@ export const DateInput = ({
   nextMonthIcon,
   disableCalendar = false,
   renderDayContent,
-  onCalendarClose,
+  onCalendarOpenChanged,
   ...props
 }: DateInputProps): React.ReactNode => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -209,7 +209,7 @@ export const DateInput = ({
     onInternalValueChange,
     getInternalValue,
     value,
-    onCalendarClose,
+    onCalendarOpenChanged,
   });
 
   const { sizeY = 'none' } = useAdaptivity();

diff --git a/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx b/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx
@@ -133,20 +133,23 @@ describe('DateRangeInput', () => {
 
   it('should call onCalendarClose callback when calendar was closed', async () => {
     jest.useFakeTimers();
-    const onCalendarClose = jest.fn();
+    const onCalendarOpenChanged = jest.fn();
     const { container } = render(
-      <DateRangeInput value={[startDate, null]} onCalendarClose={onCalendarClose} />,
+      <DateRangeInput value={[startDate, null]} onCalendarOpenChanged={onCalendarOpenChanged} />,
     );
     const inputLikes = getInputsLike(container);
     const [dates] = inputLikes;
 
     await userEvent.click(dates);
-    expect(onCalendarClose).toHaveBeenCalledTimes(0);
+
+    expect(onCalendarOpenChanged).toHaveBeenCalledTimes(1);
+    expect(onCalendarOpenChanged.mock.calls[0][0]).toBeTruthy();
 
     expect(container.contains(document.activeElement)).toBeTruthy();
     await userEvent.click(screen.getAllByText('15')[0]);
 
-    expect(onCalendarClose).toHaveBeenCalledTimes(1);
+    expect(onCalendarOpenChanged).toHaveBeenCalledTimes(2);
+    expect(onCalendarOpenChanged.mock.calls[1][0]).toBeFalsy();
 
     expect(container.contains(document.activeElement)).toBeFalsy();
   });

diff --git a/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx b/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx
@@ -55,7 +55,7 @@ export interface DateRangeInputProps
     Omit<FormFieldProps, 'maxHeight'> {
   calendarPlacement?: PlacementWithAuto;
   closeOnChange?: boolean;
-  onCalendarClose?: VoidFunction;
+  onCalendarOpenChanged?: (opened: boolean) => void;
   clearFieldLabel?: string;
   showCalendarLabel?: string;
   changeStartDayLabel?: string;
@@ -143,7 +143,7 @@ export const DateRangeInput = ({
   prevMonthIcon,
   nextMonthIcon,
   disableCalendar = false,
-  onCalendarClose,
+  onCalendarOpenChanged,
   renderDayContent,
   ...props
 }: DateRangeInputProps): React.ReactNode => {
@@ -225,7 +225,7 @@ export const DateRangeInput = ({
     onInternalValueChange,
     getInternalValue,
     value,
-    onCalendarClose,
+    onCalendarOpenChanged,
   });
 
   const { sizeY = 'none' } = useAdaptivity();

diff --git a/packages/vkui/src/hooks/useDateInput.ts b/packages/vkui/src/hooks/useDateInput.ts
@@ -18,7 +18,7 @@ export interface UseDateInputDependencies<T, D> {
   onInternalValueChange: (value: string[]) => void;
   getInternalValue: (value?: D | undefined) => string[];
   onChange?: (value?: D | undefined) => void;
-  onCalendarClose?: VoidFunction;
+  onCalendarOpenChanged?: (opened: boolean) => void;
 }
 
 export function useDateInput<T extends HTMLElement, D>({
@@ -31,7 +31,7 @@ export function useDateInput<T extends HTMLElement, D>({
   onInternalValueChange,
   getInternalValue,
   value,
-  onCalendarClose,
+  onCalendarOpenChanged,
 }: UseDateInputDependencies<T, D>): {
   rootRef: React.RefObject<HTMLDivElement>;
   calendarRef: React.RefObject<HTMLDivElement>;
@@ -55,9 +55,18 @@ export function useDateInput<T extends HTMLElement, D>({
   const { window } = useDOM();
 
   const _onCalendarClose = useCallback(() => {
-    closeCalendar();
-    onCalendarClose?.();
-  }, [closeCalendar, onCalendarClose]);
+    if (open) {
+      closeCalendar();
+      onCalendarOpenChanged?.(false);
+    }
+  }, [closeCalendar, onCalendarOpenChanged, open]);
+
+  const _onCalendarOpen = useCallback(() => {
+    if (!open) {
+      openCalendar();
+      onCalendarOpenChanged?.(true);
+    }
+  }, [onCalendarOpenChanged, open, openCalendar]);
 
   const removeFocusFromField = React.useCallback(() => {
     if (focusedElement !== null) {
@@ -109,14 +118,14 @@ export function useDateInput<T extends HTMLElement, D>({
 
     if (element) {
       element.focus();
-      openCalendar();
+      _onCalendarOpen();
       range.selectNodeContents(element as Node);
 
       const selection = window!.getSelection();
       selection?.removeAllRanges();
       selection?.addRange(range);
     }
-  }, [disabled, focusedElement, openCalendar, refs, window]);
+  }, [disabled, focusedElement, _onCalendarOpen, refs, window]);
 
   const clear = React.useCallback(() => {
     onChange?.(undefined);
@@ -198,7 +207,7 @@ export function useDateInput<T extends HTMLElement, D>({
     rootRef,
     calendarRef,
     open,
-    openCalendar,
+    openCalendar: _onCalendarOpen,
     closeCalendar: _onCalendarClose,
     internalValue,
     focusedElement,