56 lines
1.7 KiB
TypeScript
Executable File
56 lines
1.7 KiB
TypeScript
Executable File
import dayjs from "dayjs";
|
|
import React, { useCallback, useContext } from "react";
|
|
|
|
import { DATE_FORMAT } from "../constants";
|
|
import DatepickerContext from "../contexts/DatepickerContext";
|
|
|
|
import { PrimaryButton, SecondaryButton } from "./utils";
|
|
|
|
const Footer: React.FC = () => {
|
|
// Contexts
|
|
const { hideDatepicker, period, changeDatepickerValue, configs, classNames } =
|
|
useContext(DatepickerContext);
|
|
|
|
// Functions
|
|
const getClassName = useCallback(() => {
|
|
if (
|
|
typeof classNames !== "undefined" &&
|
|
typeof classNames?.footer === "function"
|
|
) {
|
|
return classNames.footer();
|
|
}
|
|
|
|
return " c-flex c-items-center c-justify-end c-pb-2.5 c-pt-3 c-border-t c-border-gray-300 dark:c-border-gray-700";
|
|
}, [classNames]);
|
|
|
|
return (
|
|
<div className={getClassName()}>
|
|
<div className="c-w-full md:c-w-auto c-flex c-items-center c-justify-center c-space-x-3">
|
|
<SecondaryButton
|
|
onClick={() => {
|
|
hideDatepicker();
|
|
}}
|
|
>
|
|
<>{configs?.footer?.cancel ? configs.footer.cancel : "Cancel"}</>
|
|
</SecondaryButton>
|
|
<PrimaryButton
|
|
onClick={() => {
|
|
if (period.start && period.end) {
|
|
changeDatepickerValue({
|
|
startDate: dayjs(period.start).format(DATE_FORMAT),
|
|
endDate: dayjs(period.end).format(DATE_FORMAT),
|
|
});
|
|
hideDatepicker();
|
|
}
|
|
}}
|
|
disabled={!(period.start && period.end)}
|
|
>
|
|
<>{configs?.footer?.apply ? configs.footer.apply : "Apply"}</>
|
|
</PrimaryButton>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|