[Fix] inputClassName, containerClassName, and toggleClassName accept functions to override component className (#64)

Author: Marcin Charmułowicz

pages/index.js

@@ -3,7 +3,6 @@ import { useState } from "react";
 import { COLORS } from "../src/constants";
 import dayjs from "dayjs";
 import Head from "next/head";
-import { twMerge } from "tailwind-merge";
 
 export default function Playground() {
     const [value, setValue] = useState({
@@ -79,10 +78,6 @@ export default function Playground() {
                     i18n={i18n}
                     disabled={disabled}
                     inputClassName={inputClassName}
-                    /**
-                     * `twMerge` Test
-                     */
-                    // inputClassName={twMerge(inputClassName, 'dark:bg-white')}
                     containerClassName={containerClassName}
                     toggleClassName={toggleClassName}
                     displayFormat={displayFormat}

src/components/Datepicker.tsx

@@ -9,14 +9,7 @@ import { COLORS, DATE_FORMAT, DEFAULT_COLOR, LANGUAGE } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
 import { formatDate, nextMonth, previousMonth } from "../helpers";
 import useOnClickOutside from "../hooks";
-import {
-    Period,
-    DateValueType,
-    DateType,
-    DateRangeType,
-    ClassNamesTypeProp,
-    ClassNameParam
-} from "../types";
+import { Period, DateValueType, DateType, DateRangeType, ClassNamesTypeProp } from "../types";
 
 import { Arrow, VerticalDash } from "./utils";
 
@@ -46,13 +39,13 @@ interface Props {
     startFrom?: Date | null;
     i18n?: string;
     disabled?: boolean;
-    classNames?: ClassNamesTypeProp | undefined;
-    inputClassName?: ((args?: ClassNameParam) => string) | string | null;
-    toggleClassName?: string | null;
-    toggleIcon?: ((open: ClassNameParam) => React.ReactNode) | undefined;
+    classNames?: ClassNamesTypeProp;
+    inputClassName?: ((className: string) => string) | string | null;
+    containerClassName?: ((className: string) => string) | string | null;
+    toggleClassName?: ((className: string) => string) | string | null;
+    toggleIcon?: (open: boolean) => React.ReactNode;
     inputId?: string;
     inputName?: string;
-    containerClassName?: ((args?: ClassNameParam) => string) | string | null;
     displayFormat?: string;
     readOnly?: boolean;
     minDate?: DateType | null;
@@ -348,12 +341,18 @@ const Datepicker: React.FC<Props> = ({
         inputRef
     ]);
 
+    const defaultContainerClassName = "relative w-full text-gray-700";
+
+    const containerClassNameOverload =
+        typeof containerClassName === "function"
+            ? containerClassName(defaultContainerClassName)
+            : typeof containerClassName === "string"
+            ? `${defaultContainerClassName} ${containerClassName}`
+            : defaultContainerClassName;
+
     return (
         <DatepickerContext.Provider value={contextValues}>
-            <div
-                className={`relative w-full text-gray-700 ${containerClassName}`}
-                ref={containerRef}
-            >
+            <div className={containerClassNameOverload} ref={containerRef}>
                 <Input setContextRef={setInputRef} />
 
                 <div

src/components/Input.tsx

@@ -52,15 +52,21 @@ const Input: React.FC<Props> = (e: Props) => {
     const getClassName = useCallback(() => {
         const input = inputRef.current;
 
-        if (input && typeof classNames != "undefined" && typeof classNames.input === "function") {
-            return classNames?.input(input);
+        if (input && typeof classNames !== "undefined" && typeof classNames?.input === "function") {
+            return classNames.input(input);
         }
 
         const border = BORDER_COLOR.focus[primaryColor as keyof typeof BORDER_COLOR.focus];
         const ring =
             RING_COLOR["second-focus"][primaryColor as keyof (typeof RING_COLOR)["second-focus"]];
-        const classNameOverload = typeof inputClassName === "string" ? inputClassName : "";
-        return `relative transition-all duration-300 py-2.5 pl-4 pr-14 w-full border-gray-300 dark:bg-slate-800 dark:text-white/80 dark:border-slate-600 rounded-lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring disabled:opacity-40 disabled:cursor-not-allowed ${border} ${ring} ${classNameOverload}`;
+
+        const defaultInputClassName = `relative transition-all duration-300 py-2.5 pl-4 pr-14 w-full border-gray-300 dark:bg-slate-800 dark:text-white/80 dark:border-slate-600 rounded-lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring disabled:opacity-40 disabled:cursor-not-allowed ${border} ${ring}`;
+
+        return typeof inputClassName === "function"
+            ? inputClassName(defaultInputClassName)
+            : typeof inputClassName === "string"
+            ? `${defaultInputClassName} ${inputClassName}`
+            : defaultInputClassName;
     }, [inputRef, classNames, primaryColor, inputClassName]);
 
     const handleInputChange = useCallback(
@@ -210,12 +216,19 @@ const Input: React.FC<Props> = (e: Props) => {
         if (
             button &&
             typeof classNames !== "undefined" &&
-            typeof classNames.toggleButton === "function"
+            typeof classNames?.toggleButton === "function"
         ) {
             return classNames.toggleButton(button);
         }
 
-        return `absolute right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed ${toggleClassName}`;
+        const defaultToggleClassName =
+            "absolute right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed";
+
+        return typeof toggleClassName === "function"
+            ? toggleClassName(defaultToggleClassName)
+            : typeof toggleClassName === "string"
+            ? `${defaultToggleClassName} ${toggleClassName}`
+            : defaultToggleClassName;
     }, [toggleClassName, buttonRef, classNames]);
 
     return (

src/contexts/DatepickerContext.ts

@@ -8,8 +8,7 @@ import {
     DateValueType,
     DateType,
     DateRangeType,
-    ClassNamesTypeProp,
-    ClassNameParam
+    ClassNamesTypeProp
 } from "../types";
 
 interface DatepickerStore {
@@ -34,9 +33,9 @@ interface DatepickerStore {
     i18n: string;
     value: DateValueType;
     disabled?: boolean;
-    inputClassName?: ((args?: ClassNameParam) => string) | string | null;
-    containerClassName?: ((args?: ClassNameParam) => string) | string | null;
-    toggleClassName?: ((args?: ClassNameParam) => string) | string | null;
+    inputClassName?: ((className: string) => string) | string | null;
+    containerClassName?: ((className: string) => string) | string | null;
+    toggleClassName?: ((className: string) => string) | string | null;
     toggleIcon?: (open: boolean) => React.ReactNode;
     readOnly?: boolean;
     startWeekOn?: string | null;
@@ -46,7 +45,7 @@ interface DatepickerStore {
     disabledDates?: DateRangeType[] | null;
     inputId?: string;
     inputName?: string;
-    classNames?: ClassNamesTypeProp | undefined;
+    classNames?: ClassNamesTypeProp;
 }
 
 const DatepickerContext = createContext<DatepickerStore>({

src/types/index.ts

@@ -41,5 +41,3 @@ export type ClassNamesTypeProp = {
     toggleButton?: (p?: object | null | undefined) => string | undefined;
     footer?: (p?: object | null | undefined) => string | undefined;
 };
-
-export type ClassNameParam = ClassNameParam[] | string | number | boolean | undefined;