archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(calendar): arrows changing order when html has dir="rtl" (#3656)

Browse Source 
* fix(calendar): #3641,#3642 add order and row-reverse to arrows for rtl layout support

* chore(changeset): patch @nextui-org/calendar

* chore(changeset): add missing package and revise changeset message

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
This commit is contained in:
Amey Bhavsar 2024-08-30 22:13:04 +05:30 committed by GitHub
parent 56f1d681ff
commit 55c92981e0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/slow-forks-nail.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/calendar": patch
"@nextui-org/theme": patch
---
fixed arrow keys order when html has dir="rtl" (#3641, #3642)

7
packages/components/calendar/src/calendar-base.tsx
View File

@ -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>,

8
packages/core/theme/src/components/calendar.ts
View File

@ -10,10 +10,10 @@ 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-['']",
@ -21,7 +21,7 @@ const calendar = tv({
"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",