Merge pull request #1 from mariovalney/master

Added "onClear" callback

Author: frankleng

README.md

@@ -93,13 +93,16 @@ const DemoComponent = () => {
 	const handleChange = (selectedDate: Date) => {
 		console.log(selectedDate)
 	}
+	const handleClear = () => {
+		console.log('Date is cleared!')
+	}
 	const handleClose = (state: boolean) => {
 		setShow(state)
 	}
 
 	return (
 		<div>
-			<Datepicker options={options} onChange={handleChange} show={show} setShow={handleClose} />
+			<Datepicker options={options} onChange={handleChange} onClear={handleClear} show={show} setShow={handleClose} />
 		</div>
 	)
 }
@@ -179,6 +182,7 @@ const DemoComponent = () => {
 - value?: Date
 - options?: [IOptions](###IOptions)
 - onChange?: (date: Date) => void
+- onClear?: () => void
 - show: boolean
 - setShow: (show: boolean) => void
 - classNames?: string

demo-app/pages/index.tsx

@@ -1,6 +1,7 @@
 import type { NextPage } from "next"
 import { useState } from "react"
 import DatePicker from "tailwind-datepicker-react"
+// import DatePicker from "../../dist/Components/DatePicker"
 import ThemeSelector from "../components/ThemeSelector"
 import { IOptions } from "tailwind-datepicker-react/types/Options"
 
@@ -27,6 +28,7 @@ const Home: NextPage = () => {
 			selected: "",
 		},
 	}
+
 	return (
 		<div className="flex flex-col items-center w-full h-full gap-5 mt-20">
 			<ThemeSelector />

src/Components/Buttons.tsx

@@ -98,15 +98,18 @@ export const ButtonToday = () => {
 }
 
 export const ButtonClear = () => {
-	const { setShowSelectedDate, options } = useContext(DatePickerContext)
+	const { setShowSelectedDate, onClear, options } = useContext(DatePickerContext)
 	return (
 		<button
 			type="button"
 			className={twMerge(
 				"w-full px-5 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg dark:text-white dark:bg-gray-700 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 focus:ring-4 focus:ring-blue-300",
 				options?.theme?.clearBtn
 			)}
-			onClick={() => setShowSelectedDate(false)}
+			onClick={() => {
+				setShowSelectedDate(false);
+				if (onClear) onClear()
+			}}
 		>
 			{options?.clearBtnText}
 		</button>

src/Components/DatePicker.tsx

@@ -10,15 +10,16 @@ export interface IDatePickerProps {
 	children?: ReactElement | ReactNode
 	options?: IOptions
 	onChange?: (date: Date) => void
+	onClear?: () => void
 	show: boolean
 	setShow: (show: boolean) => void
 	classNames?: string
 	selectedDateState?: [Date, (date: Date) => void]
 }
 
-const DatePicker = ({ value, children, options, onChange, classNames, show, setShow, selectedDateState }: IDatePickerProps) => (
+const DatePicker = ({ value, children, options, onChange, onClear, classNames, show, setShow, selectedDateState }: IDatePickerProps) => (
 	<div className={twMerge("w-full", classNames)}>
-		<DatePickerProvider options={options} onChange={onChange} show={show} setShow={setShow} selectedDateState={selectedDateState}>
+		<DatePickerProvider options={options} onChange={onChange} onClear={onClear} show={show} setShow={setShow} selectedDateState={selectedDateState}>
 			<DatePickerMain value={value} options={options}>
 				{children}
 			</DatePickerMain>

src/Components/DatePickerProvider.tsx

@@ -15,6 +15,7 @@ interface IDatePickerContext {
 	setShowSelectedDate: Dispatch<SetStateAction<boolean>>
 	selectedMonth: number
 	selectedYear: number
+	onClear: () => void
 	getFormattedDate: (date: Date | number, formatOptions?: Intl.DateTimeFormatOptions | null | undefined) => string
 }
 
@@ -32,20 +33,21 @@ export const DatePickerContext = createContext<IDatePickerContext>({
 	setShowSelectedDate: () => {},
 	selectedMonth: 0,
 	selectedYear: 0,
+	onClear: () => {},
 	getFormattedDate: () => "",
 })
 
 interface IDatePickerProviderProps {
 	children: ReactElement
 	options?: IOptions
 	onChange?: (date: Date) => void
+	onClear: () => void
 	show: boolean
 	setShow: (show: boolean) => void
 	selectedDateState?: [Date, (date: Date) => void]
 }
 
-const DatePickerProvider = ({ children, options: customOptions, onChange, show, setShow, selectedDateState }: IDatePickerProviderProps) => {
-
+const DatePickerProvider = ({ children, options: customOptions, onChange, onClear, show, setShow, selectedDateState }: IDatePickerProviderProps) => {
 	const options = { ...defaultOptions, ...customOptions }
 	const [view, setView] = useState<Views>("days")
 	const [selectedDate, setSelectedDate] = selectedDateState || useState<Date>(options?.defaultDate || new Date())
@@ -67,7 +69,7 @@ const DatePickerProvider = ({ children, options: customOptions, onChange, show,
 
 	return (
 		<DatePickerContext.Provider
-			value={{ options, view, setView, show, setShow, selectedDate, changeSelectedDate, showSelectedDate, setShowSelectedDate, selectedMonth, selectedYear, getFormattedDate }}
+			value={{ options, view, setView, show, setShow, selectedDate, changeSelectedDate, showSelectedDate, setShowSelectedDate, selectedMonth, selectedYear, onClear, getFormattedDate }}
 		>
 			{children}
 		</DatePickerContext.Provider>