Merge remote-tracking branch 'origin/master'

Author: onesine

src/components/Calendar/Days.tsx

@@ -204,13 +204,18 @@ const Days: React.FC<Props> = ({
     );
 
     const buttonClass = useCallback(
-        (day: number, type: "current" | "previous" | "next") => {
+        (day: number, type: "current" | "next" | "previous") => {
             const baseClass = "flex items-center justify-center w-12 h-12 lg:w-10 lg:h-10";
-            return cn(
-                baseClass,
-                !activeDateData(day).active ? hoverClassByDay(day) : activeDateData(day).className,
-                isDateDisabled(day, type) && "line-through"
-            );
+            if (type === "current") {
+                return cn(
+                    baseClass,
+                    !activeDateData(day).active
+                        ? hoverClassByDay(day)
+                        : activeDateData(day).className,
+                    isDateDisabled(day, type) && "line-through"
+                );
+            }
+            return cn(baseClass, isDateDisabled(day, type) && "line-through", "text-gray-400");
         },
         [activeDateData, hoverClassByDay, isDateDisabled]
     );
@@ -345,7 +350,7 @@ const Days: React.FC<Props> = ({
                     type="button"
                     key={index}
                     disabled={isDateDisabled(item, "previous")}
-                    className="flex items-center justify-center text-gray-400 h-12 w-12 lg:w-10 lg:h-10"
+                    className={`${buttonClass(item, "previous")}`}
                     onClick={() => handleClickDay(item, "previous")}
                     onMouseOver={() => {
                         hoverDay(item, "previous");
@@ -375,7 +380,7 @@ const Days: React.FC<Props> = ({
                     type="button"
                     key={index}
                     disabled={isDateDisabled(item, "next")}
-                    className="flex items-center justify-center text-gray-400 h-12 w-12 lg:w-10 lg:h-10"
+                    className={`${buttonClass(item, "next")}`}
                     onClick={() => handleClickDay(item, "next")}
                     onMouseOver={() => {
                         hoverDay(item, "next");

src/components/Shortcuts.tsx

@@ -91,41 +91,43 @@ const Shortcuts: React.FC = () => {
     }, []);
 
     const shortcutOptions = useMemo<[string, ShortcutsItem | ShortcutsItem[]][]>(() => {
-        const options: [string, ShortcutsItem | ShortcutsItem[]][] = [];
-        if (configs && configs.shortcuts) {
-            Object.keys(configs.shortcuts).forEach(item => {
-                if (Object.keys(DEFAULT_SHORTCUTS).includes(item)) {
-                    options.push([item, DEFAULT_SHORTCUTS[item]]);
-                }
-            });
-            if (configs.shortcuts.custom && configs.shortcuts.custom.length > 0) {
-                configs.shortcuts.custom.forEach(customConfig => {
-                    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))
-                    ) {
-                        options.push([
+        if (!configs?.shortcuts) {
+            return Object.entries(DEFAULT_SHORTCUTS);
+        }
+
+        return Object.entries(configs.shortcuts).flatMap(([key, customConfig]) => {
+            if (Object.prototype.hasOwnProperty.call(DEFAULT_SHORTCUTS, key)) {
+                return [[key, DEFAULT_SHORTCUTS[key]]];
+            }
+
+            const { text, period } = customConfig as {
+                text: string;
+                period: { start: string; end: string };
+            };
+            if (!text || !period) {
+                return [];
+            }
+
+            const start = dayjs(period.start);
+            const end = dayjs(period.end);
+
+            if (start.isValid() && end.isValid() && (start.isBefore(end) || start.isSame(end))) {
+                return [
+                    [
+                        text,
+                        {
                             text,
-                            {
-                                text,
-                                period: {
-                                    start: start.format(DATE_FORMAT),
-                                    end: end.format(DATE_FORMAT)
-                                }
+                            period: {
+                                start: start.format(DATE_FORMAT),
+                                end: end.format(DATE_FORMAT)
                             }
-                        ]);
-                    }
-                });
+                        }
+                    ]
+                ];
             }
-        } else {
-            return Object.entries(DEFAULT_SHORTCUTS);
-        }
-        return options;
+
+            return [];
+        });
     }, [configs]);
 
     const printItemText = useCallback((item: ShortcutsItem) => {

src/types/index.ts

@@ -7,16 +7,19 @@ export interface Period {
     end: string | null;
 }
 
+interface CustomShortcuts {
+    [key: string]: ShortcutsItem;
+}
+
 interface DefaultShortcuts {
     today?: string;
     yesterday?: string;
     past?: (period: number) => string;
     currentMonth?: string;
     pastMonth?: string;
-    custom?: ShortcutsItem[];
 }
 export interface Configs {
-    shortcuts?: DefaultShortcuts;
+    shortcuts?: DefaultShortcuts | CustomShortcuts;
     footer?: {
         cancel?: string;
         apply?: string;