diff --git a/src/components/Shortcuts.tsx b/src/components/Shortcuts.tsx index 5fbeea2..7e0ff65 100644 --- a/src/components/Shortcuts.tsx +++ b/src/components/Shortcuts.tsx @@ -1,9 +1,9 @@ import { memo, ReactNode, useCallback, useContext, useMemo } from "react"; -import { TEXT_COLOR } from "../constants"; +import { BG_COLOR, TEXT_COLOR } from "../constants"; import DEFAULT_SHORTCUTS from "../constants/shortcuts"; import DatepickerContext from "../contexts/DatepickerContext"; -import { dateIsSameOrBefore } from "../libs/date"; +import { dateIsSame, dateIsSameOrBefore } from "../libs/date"; import { Period, ShortcutsItem } from "../types"; interface ItemTemplateProps { @@ -26,11 +26,29 @@ const ItemTemplate = memo((props: ItemTemplateProps) => { } = useContext(DatepickerContext); // Functions - const getClassName = useCallback(() => { - const textColor = TEXT_COLOR["600"][primaryColor as keyof (typeof TEXT_COLOR)["600"]]; - const textColorHover = TEXT_COLOR.hover[primaryColor as keyof typeof TEXT_COLOR.hover]; - return `whitespace-nowrap w-1/2 md:w-1/3 lg:w-auto transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 p-2 rounded cursor-pointer ${textColor} ${textColorHover}`; - }, [primaryColor]); + const getClassName = useCallback( + (item?: Period) => { + const baseClass = + "whitespace-nowrap w-1/2 md:w-1/3 lg:w-auto transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 p-2 rounded cursor-pointer"; + + const dayIsSameStart = + period.start && item?.start && dateIsSame(item.start, period.start, "date"); + const dayIsSameEnd = + period.end && item?.end && dateIsSame(item.end, period.end, "date"); + const isActive = dayIsSameStart && dayIsSameEnd; + + const textColorHover = TEXT_COLOR.hover[primaryColor as keyof typeof TEXT_COLOR.hover]; + const bgColorActive = isActive + ? BG_COLOR["500"][primaryColor as keyof (typeof BG_COLOR)["500"]] + : ""; + const textColor = isActive + ? "text-white" + : TEXT_COLOR["600"][primaryColor as keyof (typeof TEXT_COLOR)["600"]]; + + return `${baseClass} ${textColor} ${textColorHover} ${bgColorActive}`; + }, + [primaryColor, period.end, period.start] + ); const chosePeriod = useCallback( (item: Period) => { @@ -72,11 +90,11 @@ const ItemTemplate = memo((props: ItemTemplateProps) => { return ( <li - className={getClassName()} + className={getClassName(Array.isArray(props.item) ? undefined : props.item?.period)} onClick={() => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - chosePeriod(props?.item.period); + if (!Array.isArray(props.item)) { + chosePeriod(props.item?.period); + } }} > {children}