[ #23, #78, #106] Customized shortcut 🎉

Author: onesine

src/components/Datepicker.tsx

@@ -20,7 +20,7 @@ const Datepicker: React.FC<DatepickerType> = ({
     useRange = true,
     showFooter = false,
     showShortcuts = false,
-    configs = null,
+    configs = undefined,
     asSingle = false,
     placeholder = null,
     separator = "~",

src/components/Shortcuts.tsx

@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 import React, { useCallback, useContext, useMemo } from "react";
 
-import { TEXT_COLOR } from "../constants";
+import { DATE_FORMAT, TEXT_COLOR } from "../constants";
 import DEFAULT_SHORTCUTS from "../constants/shortcuts";
 import DatepickerContext from "../contexts/DatepickerContext";
 import { Period, ShortcutsItem } from "../types";
@@ -66,8 +66,6 @@ const ItemTemplate = React.memo((props: ItemTemplateProps) => {
         ]
     );
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     const children = props?.children;
 
     return (
@@ -92,24 +90,56 @@ const Shortcuts: React.FC = () => {
         return typeof data === "function" ? data(numberValue) : null;
     }, []);
 
-    const shortcutOptions = useMemo(
-        () =>
-            configs
-                ? Object.entries(DEFAULT_SHORTCUTS).filter(([key]) => {
-                      return configs.shortcuts && Object.keys(configs.shortcuts).includes(key);
-                  })
-                : Object.entries(DEFAULT_SHORTCUTS),
-        [configs]
-    );
+    const shortcutOptions = useMemo<[string, ShortcutsItem | ShortcutsItem[]][]>(() => {
+        let options;
+        if (configs?.shortcuts && configs?.shortcuts) {
+            const formatConfig = Object.keys(configs.shortcuts).map(item => {
+                if (Object.keys(DEFAULT_SHORTCUTS).includes(item)) {
+                    return [item, DEFAULT_SHORTCUTS[item]];
+                } else {
+                    if (configs.shortcuts && configs?.shortcuts[item]) {
+                        const customConfig = configs?.shortcuts[item];
+                        const text = customConfig?.text;
+                        const start = dayjs(customConfig?.period?.start);
+                        const end = dayjs(customConfig?.period?.end);
+                        if (
+                            text &&
+                            start.isValid() &&
+                            end.isValid() &&
+                            (start.isBefore(end) || start.isSame(end))
+                        ) {
+                            return [
+                                item,
+                                {
+                                    text,
+                                    period: {
+                                        start: start.format(DATE_FORMAT),
+                                        end: end.format(DATE_FORMAT)
+                                    }
+                                }
+                            ];
+                        } else {
+                            return undefined;
+                        }
+                    }
+                    return undefined;
+                }
+            });
+            options = formatConfig?.filter(item => !!item);
+        } else {
+            options = Object.entries(DEFAULT_SHORTCUTS);
+        }
+        return options as [string, ShortcutsItem | ShortcutsItem[]][];
+    }, [configs]);
 
     const printItemText = useCallback((item: ShortcutsItem) => {
         return item?.text ?? null;
     }, []);
 
-    return (
+    return shortcutOptions?.length ? (
         <div className="md:border-b mb-3 lg:mb-0 lg:border-r lg:border-b-0 border-gray-300 dark:border-gray-700 pr-1">
             <ul className="w-full tracking-wide flex flex-wrap lg:flex-col pb-1 lg:pb-0">
-                {shortcutOptions.map(([key, item], index) =>
+                {shortcutOptions?.map(([key, item], index: number) =>
                     Array.isArray(item) ? (
                         item.map((item, index) => (
                             <ItemTemplate key={index} item={item}>
@@ -118,7 +148,10 @@ const Shortcuts: React.FC = () => {
                                     configs?.shortcuts &&
                                     key in configs.shortcuts &&
                                     item.daysNumber
-                                        ? callPastFunction(configs.shortcuts[key], item.daysNumber)
+                                        ? callPastFunction(
+                                              configs.shortcuts[key as "past"],
+                                              item.daysNumber
+                                          )
                                         : item.text}
                                 </>
                             </ItemTemplate>
@@ -127,15 +160,19 @@ const Shortcuts: React.FC = () => {
                         <ItemTemplate key={index} item={item}>
                             <>
                                 {configs?.shortcuts && key in configs.shortcuts
-                                    ? configs.shortcuts[key as keyof typeof configs.shortcuts]
+                                    ? typeof configs.shortcuts[
+                                          key as keyof typeof configs.shortcuts
+                                      ] === "object"
+                                        ? printItemText(item)
+                                        : configs.shortcuts[key as keyof typeof configs.shortcuts]
                                     : printItemText(item)}
                             </>
                         </ItemTemplate>
                     )
                 )}
             </ul>
         </div>
-    );
+    ) : null;
 };
 
 export default Shortcuts;

src/contexts/DatepickerContext.ts

@@ -15,7 +15,7 @@ interface DatepickerStore {
     input?: React.RefObject<HTMLInputElement>;
     asSingle?: boolean;
     primaryColor: string;
-    configs?: Configs | null;
+    configs?: Configs;
     calendarContainer: React.RefObject<HTMLDivElement> | null;
     arrowContainer: React.RefObject<HTMLDivElement> | null;
     hideDatepicker: () => void;
@@ -51,6 +51,7 @@ interface DatepickerStore {
 const DatepickerContext = createContext<DatepickerStore>({
     input: undefined,
     primaryColor: "blue",
+    configs: undefined,
     calendarContainer: null,
     arrowContainer: null,
     // eslint-disable-next-line @typescript-eslint/no-empty-function

src/types/index.ts

@@ -12,11 +12,11 @@ export interface Configs {
         past?: (period: number) => string;
         currentMonth?: string;
         pastMonth?: string;
-    } | null;
+    } & { [key: string]: ShortcutsItem };
     footer?: {
         cancel?: string;
         apply?: string;
-    } | null;
+    };
 }
 
 export interface ShortcutsItem {
@@ -51,19 +51,7 @@ export interface DatepickerType {
     useRange?: boolean;
     showFooter?: boolean;
     showShortcuts?: boolean;
-    configs?: {
-        shortcuts?: {
-            today?: string;
-            yesterday?: string;
-            past?: (period: number) => string;
-            currentMonth?: string;
-            pastMonth?: string;
-        } | null;
-        footer?: {
-            cancel?: string;
-            apply?: string;
-        } | null;
-    } | null;
+    configs?: Configs;
     asSingle?: boolean;
     placeholder?: string;
     separator?: string;