Merge pull request #79 from JefteCaro/master

[Fix] className overrides accept functions

Author: JefteCaro

pages/index.js

@@ -3,6 +3,7 @@ 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({
@@ -62,7 +63,7 @@ export default function Playground() {
                             yesterday: "YText",
                             past: period => `P-${period} Text`,
                             currentMonth: "CMText",
-                            pastMonth: "PMText",
+                            pastMonth: "PMText"
                         },
                         footer: {
                             cancel: "CText",
@@ -78,6 +79,10 @@ 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,7 +9,14 @@ 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 } from "../types";
+import {
+    Period,
+    DateValueType,
+    DateType,
+    DateRangeType,
+    ClassNamesTypeProp,
+    ClassNameParam
+} from "../types";
 
 import { Arrow, VerticalDash } from "./utils";
 
@@ -40,12 +47,12 @@ interface Props {
     i18n?: string;
     disabled?: boolean;
     classNames?: ClassNamesTypeProp | undefined;
-    inputClassName?: string | null;
+    inputClassName?: ((args?: ClassNameParam) => string) | string | null;
     toggleClassName?: string | null;
-    toggleIcon?: ((open: boolean) => React.ReactNode) | undefined;
+    toggleIcon?: ((open: ClassNameParam) => React.ReactNode) | undefined;
     inputId?: string;
     inputName?: string;
-    containerClassName?: string | null;
+    containerClassName?: ((args?: ClassNameParam) => string) | string | null;
     displayFormat?: string;
     readOnly?: boolean;
     minDate?: DateType | null;

src/components/Input.tsx

@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 import React, { useCallback, useContext, useEffect, useRef } from "react";
 
-import {BORDER_COLOR, DATE_FORMAT, RING_COLOR} from "../constants";
+import { BORDER_COLOR, DATE_FORMAT, RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
 import { dateIsValid } from "../helpers";
 

src/contexts/DatepickerContext.ts

@@ -8,7 +8,8 @@ import {
     DateValueType,
     DateType,
     DateRangeType,
-    ClassNamesTypeProp
+    ClassNamesTypeProp,
+    ClassNameParam
 } from "../types";
 
 interface DatepickerStore {
@@ -33,9 +34,9 @@ interface DatepickerStore {
     i18n: string;
     value: DateValueType;
     disabled?: boolean;
-    inputClassName?: string | null;
-    containerClassName?: string | null;
-    toggleClassName?: string | null;
+    inputClassName?: ((args?: ClassNameParam) => string) | string | null;
+    containerClassName?: ((args?: ClassNameParam) => string) | string | null;
+    toggleClassName?: ((args?: ClassNameParam) => string) | string | null;
     toggleIcon?: (open: boolean) => React.ReactNode;
     readOnly?: boolean;
     startWeekOn?: string | null;

src/types/index.ts

@@ -36,8 +36,10 @@ export type DateRangeType = {
 export type DateValueType = DateRangeType | null;
 
 export type ClassNamesTypeProp = {
-    container: (p?: object | null | undefined) => string | undefined;
-    input: (p?: object | null | undefined) => string | undefined;
-    toggleButton: (p?: object | null | undefined) => string | undefined;
-    footer: (p?: object | null | undefined) => string | undefined;
+    container?: (p?: object | null | undefined) => string | undefined;
+    input?: (p?: object | null | undefined) => string | undefined;
+    toggleButton?: (p?: object | null | undefined) => string | undefined;
+    footer?: (p?: object | null | undefined) => string | undefined;
 };
+
+export type ClassNameParam = ClassNameParam[] | string | number | boolean | undefined;