feat: convert week_picker_test.test into ts

Hacker0x01 · May 23, 2024 · 887eb12 · 887eb12
1 parent ff3607c
commit 887eb12
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 41 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -124,7 +124,7 @@ export type DatePickerProps = Omit<
 > &
   Pick<AdditionalProps, "excludeScrollbar"> &
   Pick<CalendarIconProps, "icon"> &
-  Omit<PortalProps, "children"> &
+  Omit<PortalProps, "children" | "portalId"> &
   Omit<
     PopperComponentProps,
     | "className"
@@ -1332,7 +1332,11 @@ export default class DatePicker extends Component<
       ) : null;
 
       if (this.state.open && this.props.portalId) {
-        portalContainer = <Portal {...this.props}>{portalContainer}</Portal>;
+        portalContainer = (
+          <Portal portalId={this.props.portalId} {...this.props}>
+            {portalContainer}
+          </Portal>
+        );
       }
 
       return (

diff --git a/src/month.tsx b/src/month.tsx
@@ -98,6 +98,8 @@ interface MonthProps
     | "preSelection"
     | "selected"
     | "showWeekNumber"
+    | "chooseDayAriaLabelPrefix"
+    | "disabledDayAriaLabelPrefix"
   > {
   monthClassName?: (date: Date) => string;
   onDayClick?: (
@@ -132,6 +134,8 @@ interface MonthProps
   showFourColumnMonthYearPicker?: boolean;
   showQuarterYearPicker?: boolean;
   weekAriaLabelPrefix?: WeekProps["ariaLabelPrefix"];
+  chooseDayAriaLabelPrefix?: WeekProps["chooseDayAriaLabelPrefix"];
+  disabledDayAriaLabelPrefix?: WeekProps["disabledDayAriaLabelPrefix"];
 }
 
 /**

diff --git a/src/popper_component.tsx b/src/popper_component.tsx
@@ -6,33 +6,29 @@ import Portal from "./portal";
 import TabLoop from "./tab_loop";
 import withFloating from "./with_floating";
 
-import type { ReferenceType, UseFloatingReturn } from "@floating-ui/react";
+import type { FloatingProps } from "./with_floating";
 
 interface PortalProps
   extends Omit<React.ComponentPropsWithoutRef<typeof Portal>, "children"> {}
 interface TabLoopProps
   extends Omit<React.ComponentPropsWithoutRef<typeof TabLoop>, "children"> {}
 
-interface PopperComponentProps<RT extends ReferenceType = ReferenceType>
-  extends PortalProps,
-    TabLoopProps {
+interface PopperComponentProps
+  extends Omit<PortalProps, "portalId">,
+    TabLoopProps,
+    FloatingProps {
   className?: string;
   wrapperClassName?: string;
-  hidePopper?: boolean;
   popperComponent: React.ReactNode;
   popperContainer?: React.FC<React.PropsWithChildren>;
-  popperProps: UseFloatingReturn<RT> & {
-    arrowRef: React.RefObject<SVGSVGElement>;
-  };
   targetComponent: React.ReactNode;
   popperOnKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
   showArrow?: boolean;
+  portalId?: PortalProps["portalId"];
 }
 
 // Exported for testing purposes
-export class PopperComponent<
-  RT extends ReferenceType = ReferenceType,
-> extends Component<PopperComponentProps<RT>> {
+export class PopperComponent extends Component<PopperComponentProps> {
   static get defaultProps(): Partial<PopperComponentProps> {
     return {
       hidePopper: true,

diff --git a/src/with_floating.tsx b/src/with_floating.tsx
@@ -5,12 +5,19 @@ import {
   flip,
   autoUpdate,
   type UseFloatingOptions,
-  type ReferenceType,
   type Middleware,
   type Placement,
+  type UseFloatingReturn,
 } from "@floating-ui/react";
 import React, { useRef } from "react";
 
+export interface FloatingProps {
+  hidePopper?: boolean;
+  popperProps: UseFloatingReturn & {
+    arrowRef: React.RefObject<SVGSVGElement>;
+  };
+}
+
 export interface WithFloatingProps {
   popperModifiers?: Middleware[];
   popperProps?: Omit<UseFloatingOptions, "middleware">;
@@ -34,37 +41,34 @@ export interface WithFloatingProps {
  *
  * @returns A new component with floating behavior.
  */
-export default function withFloating<
-  T extends object,
-  RT extends ReferenceType = ReferenceType,
->(Component: React.ComponentType<T>) {
-  const WithFloating: React.FC<T & WithFloatingProps> = (
-    props,
-  ): JSX.Element => {
-    const alt_props = {
-      ...props,
-      popperModifiers: props.popperModifiers ?? [],
-      popperProps: props.popperProps ?? {},
-      hidePopper:
-        typeof props.hidePopper === "boolean" ? props.hidePopper : true,
-    };
+export default function withFloating<T extends FloatingProps>(
+  Component: React.ComponentType<T>,
+) {
+  type R = Omit<T, "popperProps"> & WithFloatingProps;
+  const WithFloating: React.FC<R> = (props): JSX.Element => {
+    const hidePopper: boolean =
+      typeof props.hidePopper === "boolean" ? props.hidePopper : true;
     const arrowRef: React.RefObject<HTMLElement> = useRef(null);
-    const floatingProps = useFloating<RT>({
-      open: !alt_props.hidePopper,
+    const floatingProps = useFloating({
+      open: !hidePopper,
       whileElementsMounted: autoUpdate,
-      placement: alt_props.popperPlacement,
+      placement: props.popperPlacement,
       middleware: [
         flip({ padding: 15 }),
         offset(10),
         arrow({ element: arrowRef }),
-        ...alt_props.popperModifiers,
+        ...(props.popperModifiers ?? []),
       ],
-      ...alt_props.popperProps,
+      ...props.popperProps,
     });
 
-    return (
-      <Component {...alt_props} popperProps={{ ...floatingProps, arrowRef }} />
-    );
+    const componentProps = {
+      ...props,
+      hidePopper,
+      popperProps: { ...floatingProps, arrowRef },
+    } as unknown as T;
+
+    return <Component {...componentProps} />;
   };
 
   return WithFloating;

diff --git a/test/week_picker_test.test.js → test/week_picker_test.test.tsx b/test/week_picker_test.test.js → test/week_picker_test.test.tsx
@@ -1,6 +1,7 @@
+import { render, fireEvent } from "@testing-library/react";
 import React from "react";
+
 import DatePicker from "../src/index";
-import { render, fireEvent } from "@testing-library/react";
 
 describe("WeekPicker", () => {
   it("should change the week when clicked on any option in the picker", () => {
@@ -9,8 +10,10 @@ describe("WeekPicker", () => {
       <DatePicker onChange={onChangeSpy} showWeekPicker />,
     );
     expect(onChangeSpy).not.toHaveBeenCalled();
-    fireEvent.focus(container.querySelector("input"));
-    fireEvent.click(container.querySelector(".react-datepicker__day"));
+    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+    fireEvent.click(
+      container.querySelector(".react-datepicker__day") ?? new HTMLElement(),
+    );
     expect(onChangeSpy).toHaveBeenCalled();
   });
 
@@ -20,8 +23,14 @@ describe("WeekPicker", () => {
       <DatePicker onChange={onChangeSpy} showWeekPicker showWeekNumbers />,
     );
     expect(onChangeSpy).not.toHaveBeenCalled();
-    fireEvent.focus(container.querySelector("input"));
-    fireEvent.click(container.querySelector(".react-datepicker__week-number"));
+    const input = container.querySelector("input");
+    expect(input).not.toBeNull();
+    fireEvent.focus(input ?? new HTMLElement());
+    const weekNumber = container.querySelector(
+      ".react-datepicker__week-number",
+    );
+    expect(weekNumber).not.toBeNull();
+    fireEvent.click(weekNumber ?? new HTMLElement());
     expect(onChangeSpy).toHaveBeenCalled();
   });
 });