feat(popupcls): ✨ Added a popup classname, so the outside world can c…

…ustomise this. This is important to control z-index with other components on the page.
onesine · Oct 11, 2023 · be6480e · be6480e
1 parent bf063fe
commit be6480e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
@@ -29,6 +29,7 @@ const Datepicker: React.FC<DatepickerType> = ({
     disabled = false,
     inputClassName = null,
     containerClassName = null,
+    popupClassName = null,
     toggleClassName = null,
     toggleIcon = undefined,
     displayFormat = DATE_FORMAT,
@@ -327,15 +328,22 @@ const Datepicker: React.FC<DatepickerType> = ({
             : defaultContainerClassName;
     }, [containerClassName]);
 
+    const popupClassNameOverload = useMemo(() => {
+        const defaultPopupClassName =
+            "transition-all ease-out duration-300 absolute z-10 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden";
+        return typeof popupClassName === "function"
+            ? popupClassName(defaultPopupClassName)
+            : typeof popupClassName === "string" && popupClassName !== ""
+            ? popupClassName
+            : defaultPopupClassName;
+    }, [popupClassName]);
+
     return (
         <DatepickerContext.Provider value={contextValues}>
             <div className={containerClassNameOverload} ref={containerRef}>
                 <Input setContextRef={setInputRef} />
 
-                <div
-                    className="transition-all ease-out duration-300 absolute z-10 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden"
-                    ref={calendarContainerRef}
-                >
+                <div className={popupClassNameOverload} ref={calendarContainerRef}>
                     <Arrow ref={arrowRef} />
 
                     <div className="mt-2.5 shadow-sm border border-gray-300 px-1 py-0.5 bg-white dark:bg-slate-800 dark:text-white dark:border-slate-600 rounded-lg">

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -69,6 +69,7 @@ export interface DatepickerType {
     disabled?: boolean;
     classNames?: ClassNamesTypeProp | undefined;
     containerClassName?: ((className: string) => string) | string | null;
+    popupClassName?: ((className: string) => string) | string | null;
     inputClassName?: ((className: string) => string) | string | null;
     toggleClassName?: ((className: string) => string) | string | null;
     toggleIcon?: (open: boolean) => React.ReactNode;