fix(calendar): nextui-org#3641,nextui-org#3642 add order and row-reve…

…rse to arrows for rtl layout support
ameybh · Aug 13, 2024 · eccacec · eccacec
1 parent 1973864
commit eccacec
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/packages/components/calendar/src/calendar-base.tsx b/packages/components/calendar/src/calendar-base.tsx
@@ -5,7 +5,6 @@ import type {HTMLAttributes, ReactNode, RefObject} from "react";
 
 import {Fragment} from "react";
 import {useState} from "react";
-import {useLocale} from "@react-aria/i18n";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {Button} from "@nextui-org/button";
 import {chain, mergeProps} from "@react-aria/utils";
@@ -55,8 +54,6 @@ export function CalendarBase(props: CalendarBaseProps) {
 
   const [direction, setDirection] = useState<number>(0);
 
-  const {direction: rtlDirection} = useLocale();
-
   const currentMonth = state.visibleRange.start;
 
   const headers: React.ReactNode[] = [];
@@ -72,7 +69,7 @@ export function CalendarBase(props: CalendarBaseProps) {
             {...prevButtonProps}
             onPress={chain(prevButtonProps.onPress, () => setDirection(-1))}
           >
-            {rtlDirection === "rtl" ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+            <ChevronLeftIcon />
           </Button>
         )}
         <CalendarHeader
@@ -86,7 +83,7 @@ export function CalendarBase(props: CalendarBaseProps) {
             {...nextButtonProps}
             onPress={chain(nextButtonProps.onPress, () => setDirection(1))}
           >
-            {rtlDirection === "rtl" ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+            <ChevronRightIcon />
           </Button>
         )}
       </Fragment>,

diff --git a/packages/core/theme/src/components/calendar.ts b/packages/core/theme/src/components/calendar.ts
@@ -10,18 +10,18 @@ const calendar = tv({
       "rounded-large overflow-x-auto bg-default-50 dark:bg-background",
       "w-[calc(var(--visible-months)_*_var(--calendar-width))]",
     ],
-    prevButton: [],
-    nextButton: [],
+    prevButton: ["order-1"],
+    nextButton: ["order-3"],
     headerWrapper: [
-      "px-4 py-2 flex items-center justify-between gap-2 bg-content1 overflow-hidden",
+      "px-4 py-2 flex items-center justify-between gap-2 bg-content1 overflow-hidden rtl:flex-row-reverse",
       "[&_.chevron-icon]:flex-none",
       // month/year picker wrapper
       "after:content-['']",
       "after:bg-content1 origin-top",
       "after:w-full after:h-0",
       "after:absolute after:top-0 after:left-0",
     ],
-    header: "flex w-full items-center justify-center gap-2 z-10",
+    header: "flex w-full items-center justify-center gap-2 z-10 order-2",
     title: "text-default-500 text-small font-medium",
     content: "w-[calc(var(--visible-months)_*_var(--calendar-width))]",
     gridWrapper: "flex max-w-full overflow-hidden pb-2 h-auto relative",