[Feature] Customization prop: toggleIcon (#49)

Author: JefteCaro

pages/index.js

@@ -69,6 +69,9 @@ export default function Playground() {
                     maxDate={maxDate}
                     disabledDates={disabledDates}
                     startWeekOn={startWeekOn}
+                    toggleIcon={isEmpty => {
+                        return isEmpty ? "Select Date" : "Clear";
+                    }}
                 />
             </div>
 

src/components/Datepicker.tsx

@@ -41,6 +41,7 @@ interface Props {
     disabled?: boolean;
     inputClassName?: string | null;
     toggleClassName?: string | null;
+    toggleIcon?: ((open: boolean) => React.ReactNode) | undefined;
     inputId?: string;
     inputName?: string;
     containerClassName?: string | null;
@@ -69,6 +70,7 @@ const Datepicker: React.FC<Props> = ({
     inputClassName = null,
     containerClassName = null,
     toggleClassName = null,
+    toggleIcon = undefined,
     displayFormat = "YYYY-MM-DD",
     readOnly = false,
     minDate = null,
@@ -286,6 +288,7 @@ const Datepicker: React.FC<Props> = ({
             inputClassName,
             containerClassName,
             toggleClassName,
+            toggleIcon,
             readOnly,
             displayFormat,
             minDate,
@@ -313,6 +316,7 @@ const Datepicker: React.FC<Props> = ({
         inputClassName,
         containerClassName,
         toggleClassName,
+        toggleIcon,
         readOnly,
         displayFormat,
         firstGotoDate,

src/components/Input.tsx

@@ -5,7 +5,7 @@ import { BORDER_COLOR, RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
 import { dateIsValid } from "../helpers";
 
-import { CloseIcon, DateIcon } from "./utils";
+import ToggleButton from "./ToggleButton";
 
 const Input: React.FC = () => {
     // Context
@@ -26,6 +26,7 @@ const Input: React.FC = () => {
         disabled,
         inputClassName,
         toggleClassName,
+        toggleIcon,
         readOnly,
         displayFormat,
         inputId,
@@ -166,6 +167,17 @@ const Input: React.FC = () => {
         };
     }, [calendarContainer, arrowContainer]);
 
+    const renderToggleIcon = useCallback(
+        (isEmpty: boolean) => {
+            return typeof toggleIcon === "undefined" ? (
+                <ToggleButton isEmpty={isEmpty} />
+            ) : (
+                toggleIcon(isEmpty)
+            );
+        },
+        [toggleIcon]
+    );
+
     return (
         <>
             <input
@@ -193,7 +205,7 @@ const Input: React.FC = () => {
                 disabled={disabled}
                 className={`absolute right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed ${toggleClassName}`}
             >
-                {inputText ? <CloseIcon className="h-5 w-5" /> : <DateIcon className="h-5 w-5" />}
+                {renderToggleIcon(inputText == null || (inputText != null && !inputText.length))}
             </button>
         </>
     );

src/components/ToggleButton.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import { CloseIcon, DateIcon } from "./utils";
+
+interface ToggleButtonProps {
+    isEmpty?: boolean | undefined;
+}
+
+const ToggleButton: React.FC<ToggleButtonProps> = (e: ToggleButtonProps): JSX.Element => {
+    return e.isEmpty ? <CloseIcon className="h-5 w-5" /> : <DateIcon className="h-5 w-5" />;
+};
+
+export default ToggleButton;

src/contexts/DatepickerContext.ts

@@ -27,6 +27,7 @@ interface DatepickerStore {
     inputClassName?: string | null;
     containerClassName?: string | null;
     toggleClassName?: string | null;
+    toggleIcon?: (open: boolean) => React.ReactNode;
     readOnly?: boolean;
     startWeekOn?: string | null;
     displayFormat?: string;
@@ -70,7 +71,8 @@ const DatepickerContext = createContext<DatepickerStore>({
     disabledDates: null,
     inputId: undefined,
     inputName: undefined,
-    startWeekOn: "sun"
+    startWeekOn: "sun",
+    toggleIcon: undefined
 });
 
 export default DatepickerContext;