fix(calendar): rtl navigation

heroui-inc · Jan 16, 2025 · 26b2921 · 26b2921
1 parent 26fc514
commit 26b2921
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/packages/components/calendar/src/calendar-base.tsx b/packages/components/calendar/src/calendar-base.tsx
@@ -9,6 +9,7 @@ import {Button} from "@nextui-org/button";
 import {chain, mergeProps} from "@react-aria/utils";
 import {AnimatePresence, LazyMotion, MotionConfig} from "framer-motion";
 import {ResizablePanel} from "@nextui-org/framer-utils";
+import {useLocale} from "@react-aria/i18n";
 
 import {ChevronLeftIcon} from "./chevron-left";
 import {ChevronRightIcon} from "./chevron-right";
@@ -55,20 +56,29 @@ export function CalendarBase(props: CalendarBaseProps) {
 
   const [direction, setDirection] = useState<number>(0);
 
+  const {direction: localeDirection} = useLocale();
+
   const currentMonth = state.visibleRange.start;
 
   const headers: React.ReactNode[] = [];
   const calendars: React.ReactNode[] = [];
 
+  const isLTR = localeDirection === "ltr";
+
   for (let i = 0; i < visibleMonths; i++) {
     let d = currentMonth.add({months: i});
 
     headers.push(
       <Fragment key={`calendar-header-${i}`}>
         {i === 0 && (
           <Button
-            {...prevButtonProps}
-            onPress={chain(prevButtonProps.onPress, () => setDirection(-1))}
+            {...(isLTR ? prevButtonProps : nextButtonProps)}
+            className={
+              isLTR ? prevButtonProps?.["className"] : `${nextButtonProps?.["className"]} order-1`
+            }
+            onPress={chain(isLTR ? prevButtonProps.onPress : nextButtonProps.onPress, () =>
+              setDirection(-1),
+            )}
           >
             <ChevronLeftIcon />
           </Button>
@@ -81,8 +91,13 @@ export function CalendarBase(props: CalendarBaseProps) {
         />
         {i === visibleMonths - 1 && (
           <Button
-            {...nextButtonProps}
-            onPress={chain(nextButtonProps.onPress, () => setDirection(1))}
+            {...(isLTR ? nextButtonProps : prevButtonProps)}
+            className={
+              isLTR ? nextButtonProps?.["className"] : `${prevButtonProps?.["className"]} order-3`
+            }
+            onPress={chain(isLTR ? nextButtonProps.onPress : prevButtonProps.onPress, () =>
+              setDirection(1),
+            )}
           >
             <ChevronRightIcon />
           </Button>