From b40949b2195ce24bc532f6b6768c17d2d57a2d0a Mon Sep 17 00:00:00 2001 From: EllyssonMike Date: Sat, 17 Feb 2024 16:59:34 -0300 Subject: [PATCH 1/2] Add shortcutClassName and shortcutItemClassName properties to allow custom styles configurations --- src/components/Datepicker.tsx | 6 ++++++ src/components/Shortcuts.tsx | 34 ++++++++++++++++++++++++++----- src/contexts/DatepickerContext.ts | 4 ++++ src/types/index.ts | 2 ++ 4 files changed, 41 insertions(+), 5 deletions(-) diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx index 54e90b78..11db6f78 100644 --- a/src/components/Datepicker.tsx +++ b/src/components/Datepicker.tsx @@ -28,6 +28,8 @@ const Datepicker: React.FC = ({ i18n = LANGUAGE, disabled = false, inputClassName = null, + shortcutClassName = null, + shortcutItemClassName = null, containerClassName = null, toggleClassName = null, toggleIcon = undefined, @@ -267,6 +269,8 @@ const Datepicker: React.FC = ({ value, disabled, inputClassName, + shortcutClassName, + shortcutItemClassName, containerClassName, toggleClassName, toggleIcon, @@ -300,6 +304,8 @@ const Datepicker: React.FC = ({ value, disabled, inputClassName, + shortcutClassName, + shortcutItemClassName, containerClassName, toggleClassName, toggleIcon, diff --git a/src/components/Shortcuts.tsx b/src/components/Shortcuts.tsx index ae54b21c..85456488 100644 --- a/src/components/Shortcuts.tsx +++ b/src/components/Shortcuts.tsx @@ -22,15 +22,29 @@ const ItemTemplate = React.memo((props: ItemTemplateProps) => { dayHover, changeDayHover, hideDatepicker, - changeDatepickerValue + changeDatepickerValue, + shortcutItemClassName } = useContext(DatepickerContext); // Functions const getClassName: () => string = 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 hasTextConfig = + typeof shortcutItemClassName === "function" && + /text-[a-zA-Z0-9]+/g.test(shortcutItemClassName("")); + + const defaultShortcutClassName = `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}`; + return typeof shortcutItemClassName === "function" + ? hasTextConfig + ? shortcutItemClassName( + defaultShortcutClassName.replace(textColor, "").replace(textColorHover, "") + ) + : shortcutItemClassName(defaultShortcutClassName) + : typeof shortcutItemClassName === "string" && shortcutItemClassName !== "" + ? shortcutItemClassName + : defaultShortcutClassName; + }, [primaryColor, shortcutItemClassName]); const chosePeriod = useCallback( (item: Period) => { @@ -81,7 +95,7 @@ const ItemTemplate = React.memo((props: ItemTemplateProps) => { const Shortcuts: React.FC = () => { // Contexts - const { configs } = useContext(DatepickerContext); + const { configs, shortcutClassName } = useContext(DatepickerContext); const callPastFunction = useCallback((data: unknown, numberValue: number) => { return typeof data === "function" ? data(numberValue) : null; @@ -131,9 +145,19 @@ const Shortcuts: React.FC = () => { return item?.text ?? null; }, []); + const shurtcutClassNameOverload = useMemo(() => { + const defaultShortcutClassName = + "w-full tracking-wide flex flex-wrap lg:flex-col pb-1 lg:pb-0"; + return typeof shortcutClassName === "function" + ? shortcutClassName(defaultShortcutClassName) + : typeof shortcutClassName === "string" && shortcutClassName !== "" + ? shortcutClassName + : defaultShortcutClassName; + }, [shortcutClassName]); + return shortcutOptions?.length ? (
-
    +
      {shortcutOptions.map(([key, item], index: number) => Array.isArray(item) ? ( item.map((item, index) => ( diff --git a/src/contexts/DatepickerContext.ts b/src/contexts/DatepickerContext.ts index d42aadd8..e5e6f505 100644 --- a/src/contexts/DatepickerContext.ts +++ b/src/contexts/DatepickerContext.ts @@ -36,6 +36,8 @@ interface DatepickerStore { value: DateValueType; disabled?: boolean; inputClassName?: ((className: string) => string) | string | null; + shortcutClassName?: ((className: string) => string) | string | null; + shortcutItemClassName?: ((className: string) => string) | string | null; containerClassName?: ((className: string) => string) | string | null; toggleClassName?: ((className: string) => string) | string | null; toggleIcon?: (open: boolean) => React.ReactNode; @@ -78,6 +80,8 @@ const DatepickerContext = createContext({ i18n: LANGUAGE, disabled: false, inputClassName: "", + shortcutClassName: "", + shortcutItemClassName: "", containerClassName: "", toggleClassName: "", readOnly: false, diff --git a/src/types/index.ts b/src/types/index.ts index b9e561cd..e3396139 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -69,6 +69,8 @@ export interface DatepickerType { disabled?: boolean; classNames?: ClassNamesTypeProp | undefined; containerClassName?: ((className: string) => string) | string | null; + shortcutClassName?: ((className: string) => string) | string | null; + shortcutItemClassName?: ((className: string) => string) | string | null; inputClassName?: ((className: string) => string) | string | null; toggleClassName?: ((className: string) => string) | string | null; toggleIcon?: (open: boolean) => React.ReactNode; From cb2f5126e2c2bd43b04e84f507678a377e3871d6 Mon Sep 17 00:00:00 2001 From: EllyssonMike Date: Sat, 17 Feb 2024 17:37:59 -0300 Subject: [PATCH 2/2] Removed useless regex verification --- src/components/Shortcuts.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/Shortcuts.tsx b/src/components/Shortcuts.tsx index 85456488..2790ea22 100644 --- a/src/components/Shortcuts.tsx +++ b/src/components/Shortcuts.tsx @@ -30,17 +30,10 @@ const ItemTemplate = React.memo((props: ItemTemplateProps) => { const getClassName: () => string = 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]; - const hasTextConfig = - typeof shortcutItemClassName === "function" && - /text-[a-zA-Z0-9]+/g.test(shortcutItemClassName("")); const defaultShortcutClassName = `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}`; return typeof shortcutItemClassName === "function" - ? hasTextConfig - ? shortcutItemClassName( - defaultShortcutClassName.replace(textColor, "").replace(textColorHover, "") - ) - : shortcutItemClassName(defaultShortcutClassName) + ? shortcutItemClassName(defaultShortcutClassName) : typeof shortcutItemClassName === "string" && shortcutItemClassName !== "" ? shortcutItemClassName : defaultShortcutClassName;