From 30eb0cb1532c3ddb0ad1d94af8923061a6eb17d7 Mon Sep 17 00:00:00 2001 From: Wes Copeland Date: Tue, 4 Feb 2025 19:17:42 -0500 Subject: [PATCH] feat: add BaseSelectNative component (#3169) --- .../components/+vendor/BaseSelectNative.tsx | 49 +++++++++++++++++++ .../FullPaginator/FullPaginator.test.tsx | 3 +- .../FullPaginator/FullPaginator.tsx | 42 +++++++--------- .../AchievementCommentsMainRoot.test.tsx | 2 +- .../GameClaimsCommentsMainRoot.test.tsx | 2 +- .../GameCommentsMainRoot.test.tsx | 2 +- .../GameHashesCommentsMainRoot.test.tsx | 2 +- .../GameModificationCommentsMainRoot.test.tsx | 2 +- .../LeaderboardCommentsMainRoot.test.tsx | 2 +- .../UserCommentsMainRoot.test.tsx | 2 +- .../UserModerationCommentsMainRoot.test.tsx | 2 +- .../TopAchieversMainRoot.test.tsx | 3 +- .../components/+root/MessagesRoot.test.tsx | 3 +- 13 files changed, 79 insertions(+), 37 deletions(-) create mode 100644 resources/js/common/components/+vendor/BaseSelectNative.tsx diff --git a/resources/js/common/components/+vendor/BaseSelectNative.tsx b/resources/js/common/components/+vendor/BaseSelectNative.tsx new file mode 100644 index 0000000000..091c5986c7 --- /dev/null +++ b/resources/js/common/components/+vendor/BaseSelectNative.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import { LuChevronDown } from 'react-icons/lu'; + +import { cn } from '@/common/utils/cn'; + +export interface BaseSelectPropsNative extends React.SelectHTMLAttributes { + children: React.ReactNode; +} + +const BaseSelectNative = React.forwardRef( + ({ className, children, ...props }, ref) => { + return ( +
+ + {!props.multiple && ( + + + )} +
+ ); + }, +); +BaseSelectNative.displayName = 'BaseSelectNative'; + +export { BaseSelectNative }; diff --git a/resources/js/common/components/FullPaginator/FullPaginator.test.tsx b/resources/js/common/components/FullPaginator/FullPaginator.test.tsx index d2b7abcd9e..0157ee0aa8 100644 --- a/resources/js/common/components/FullPaginator/FullPaginator.test.tsx +++ b/resources/js/common/components/FullPaginator/FullPaginator.test.tsx @@ -107,8 +107,7 @@ describe('Component: FullPaginator', () => { ); // ACT - await userEvent.click(screen.getByRole('combobox')); - await userEvent.click(screen.getByRole('option', { name: '2' })); + await userEvent.selectOptions(screen.getByRole('combobox'), ['2']); // ASSERT expect(onPageSelectValueChange).toHaveBeenCalledWith(2); diff --git a/resources/js/common/components/FullPaginator/FullPaginator.tsx b/resources/js/common/components/FullPaginator/FullPaginator.tsx index 989abc973e..2f0db8e740 100644 --- a/resources/js/common/components/FullPaginator/FullPaginator.tsx +++ b/resources/js/common/components/FullPaginator/FullPaginator.tsx @@ -1,4 +1,4 @@ -import type { FC } from 'react'; +import { type ChangeEvent, type FC, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { LuArrowLeft, LuArrowLeftToLine, LuArrowRight, LuArrowRightToLine } from 'react-icons/lu'; @@ -11,13 +11,7 @@ import { import { cn } from '@/common/utils/cn'; import { baseButtonVariants } from '../+vendor/BaseButton'; -import { - BaseSelect, - BaseSelectContent, - BaseSelectItem, - BaseSelectTrigger, - BaseSelectValue, -} from '../+vendor/BaseSelect'; +import { BaseSelectNative } from '../+vendor/BaseSelectNative'; interface FullPaginatorProps { onPageSelectValueChange: (newPageValue: number) => void; @@ -36,6 +30,8 @@ export const FullPaginator: FC = ({ links: { firstPageUrl, lastPageUrl, nextPageUrl, previousPageUrl }, } = paginatedData; + const [internalValue, setInternalValue] = useState(String(currentPage)); + if (!previousPageUrl && !nextPageUrl) { return ; } @@ -43,6 +39,11 @@ export const FullPaginator: FC = ({ // Generate an array of all page numbers. We'll use this to populate the select control. const pageOptions = Array.from({ length: lastPage }, (_, i) => i + 1); + const handlePageSelect = (event: ChangeEvent) => { + setInternalValue(event.target.value); + onPageSelectValueChange(Number(event.target.value)); + }; + return ( @@ -83,22 +84,17 @@ export const FullPaginator: FC = ({ > {t('Page')} - onPageSelectValueChange(Number(value))} + - - - - - - {pageOptions.map((page) => ( - - {page} - - ))} - - + {pageOptions.map((page) => ( + + ))} + {t('of {{pageNumber, number}}', { pageNumber: lastPage })} diff --git a/resources/js/features/comments/AchievementCommentsMainRoot/AchievementCommentsMainRoot.test.tsx b/resources/js/features/comments/AchievementCommentsMainRoot/AchievementCommentsMainRoot.test.tsx index 3550bd1bc9..f90504b9ff 100644 --- a/resources/js/features/comments/AchievementCommentsMainRoot/AchievementCommentsMainRoot.test.tsx +++ b/resources/js/features/comments/AchievementCommentsMainRoot/AchievementCommentsMainRoot.test.tsx @@ -191,7 +191,7 @@ describe('Component: AchievementCommentsMainRoot', () => { // ACT const comboboxEl = screen.getAllByRole('combobox')[0]; await userEvent.click(comboboxEl); - await userEvent.click(screen.getByRole('option', { name: '2' })); + await userEvent.selectOptions(comboboxEl, ['2']); // ASSERT expect(visitSpy).toHaveBeenCalledOnce(); diff --git a/resources/js/features/comments/GameClaimsCommentsMainRoot/GameClaimsCommentsMainRoot.test.tsx b/resources/js/features/comments/GameClaimsCommentsMainRoot/GameClaimsCommentsMainRoot.test.tsx index 6163d4d87e..a9d3b8b4d3 100644 --- a/resources/js/features/comments/GameClaimsCommentsMainRoot/GameClaimsCommentsMainRoot.test.tsx +++ b/resources/js/features/comments/GameClaimsCommentsMainRoot/GameClaimsCommentsMainRoot.test.tsx @@ -166,7 +166,7 @@ describe('Component: GameClaimsCommentsMainRoot', () => { // ACT const comboboxEl = screen.getAllByRole('combobox')[0]; await userEvent.click(comboboxEl); - await userEvent.click(screen.getByRole('option', { name: '2' })); + await userEvent.selectOptions(comboboxEl, ['2']); // ASSERT expect(visitSpy).toHaveBeenCalledOnce(); diff --git a/resources/js/features/comments/GameCommentsMainRoot/GameCommentsMainRoot.test.tsx b/resources/js/features/comments/GameCommentsMainRoot/GameCommentsMainRoot.test.tsx index 94039e6de4..5ad0a1c5f8 100644 --- a/resources/js/features/comments/GameCommentsMainRoot/GameCommentsMainRoot.test.tsx +++ b/resources/js/features/comments/GameCommentsMainRoot/GameCommentsMainRoot.test.tsx @@ -182,7 +182,7 @@ describe('Component: GameCommentsMainRoot', () => { // ACT const comboboxEl = screen.getAllByRole('combobox')[0]; await userEvent.click(comboboxEl); - await userEvent.click(screen.getByRole('option', { name: '2' })); + await userEvent.selectOptions(comboboxEl, ['2']); // ASSERT expect(visitSpy).toHaveBeenCalledOnce(); diff --git a/resources/js/features/comments/GameHashesCommentsMainRoot/GameHashesCommentsMainRoot.test.tsx b/resources/js/features/comments/GameHashesCommentsMainRoot/GameHashesCommentsMainRoot.test.tsx index 3eba5bc5c8..097e8c4a82 100644 --- a/resources/js/features/comments/GameHashesCommentsMainRoot/GameHashesCommentsMainRoot.test.tsx +++ b/resources/js/features/comments/GameHashesCommentsMainRoot/GameHashesCommentsMainRoot.test.tsx @@ -166,7 +166,7 @@ describe('Component: GameHashesCommentsMainRoot', () => { // ACT const comboboxEl = screen.getAllByRole('combobox')[0]; await userEvent.click(comboboxEl); - await userEvent.click(screen.getByRole('option', { name: '2' })); + await userEvent.selectOptions(comboboxEl, ['2']); // ASSERT expect(visitSpy).toHaveBeenCalledOnce(); diff --git a/resources/js/features/comments/GameModificationCommentsMainRoot/GameModificationCommentsMainRoot.test.tsx b/resources/js/features/comments/GameModificationCommentsMainRoot/GameModificationCommentsMainRoot.test.tsx index 2a3a7875dd..f56e6045f6 100644 --- a/resources/js/features/comments/GameModificationCommentsMainRoot/GameModificationCommentsMainRoot.test.tsx +++ b/resources/js/features/comments/GameModificationCommentsMainRoot/GameModificationCommentsMainRoot.test.tsx @@ -184,7 +184,7 @@ describe('Component: GameModificationCommentsMainRoot', () => { // ACT const comboboxEl = screen.getAllByRole('combobox')[0]; await userEvent.click(comboboxEl); - await userEvent.click(screen.getByRole('option', { name: '2' })); + await userEvent.selectOptions(comboboxEl, ['2']); // ASSERT expect(visitSpy).toHaveBeenCalledOnce(); diff --git a/resources/js/features/comments/LeaderboardCommentsMainRoot/LeaderboardCommentsMainRoot.test.tsx b/resources/js/features/comments/LeaderboardCommentsMainRoot/LeaderboardCommentsMainRoot.test.tsx index 2ba05f3315..7ab1544666 100644 --- a/resources/js/features/comments/LeaderboardCommentsMainRoot/LeaderboardCommentsMainRoot.test.tsx +++ b/resources/js/features/comments/LeaderboardCommentsMainRoot/LeaderboardCommentsMainRoot.test.tsx @@ -159,7 +159,7 @@ describe('Component: LeaderboardCommentsMainRoot', () => { // ACT const comboboxEl = screen.getAllByRole('combobox')[0]; await userEvent.click(comboboxEl); - await userEvent.click(screen.getByRole('option', { name: '2' })); + await userEvent.selectOptions(comboboxEl, ['2']); // ASSERT expect(visitSpy).toHaveBeenCalledOnce(); diff --git a/resources/js/features/comments/UserCommentsMainRoot/UserCommentsMainRoot.test.tsx b/resources/js/features/comments/UserCommentsMainRoot/UserCommentsMainRoot.test.tsx index 95277e9e7f..0482b3a489 100644 --- a/resources/js/features/comments/UserCommentsMainRoot/UserCommentsMainRoot.test.tsx +++ b/resources/js/features/comments/UserCommentsMainRoot/UserCommentsMainRoot.test.tsx @@ -179,7 +179,7 @@ describe('Component: UserCommentsMainRoot', () => { // ACT const comboboxEl = screen.getAllByRole('combobox')[0]; await userEvent.click(comboboxEl); - await userEvent.click(screen.getByRole('option', { name: '2' })); + await userEvent.selectOptions(comboboxEl, ['2']); // ASSERT expect(visitSpy).toHaveBeenCalledOnce(); diff --git a/resources/js/features/comments/UserModerationCommentsMainRoot/UserModerationCommentsMainRoot.test.tsx b/resources/js/features/comments/UserModerationCommentsMainRoot/UserModerationCommentsMainRoot.test.tsx index 54af06039f..f339c361b4 100644 --- a/resources/js/features/comments/UserModerationCommentsMainRoot/UserModerationCommentsMainRoot.test.tsx +++ b/resources/js/features/comments/UserModerationCommentsMainRoot/UserModerationCommentsMainRoot.test.tsx @@ -147,7 +147,7 @@ describe('Component: UserModerationCommentsMainRoot', () => { // ACT const comboboxEl = screen.getAllByRole('combobox')[0]; await userEvent.click(comboboxEl); - await userEvent.click(screen.getByRole('option', { name: '2' })); + await userEvent.selectOptions(comboboxEl, ['2']); // ASSERT expect(visitSpy).toHaveBeenCalledOnce(); diff --git a/resources/js/features/games/components/TopAchieversMainRoot/TopAchieversMainRoot.test.tsx b/resources/js/features/games/components/TopAchieversMainRoot/TopAchieversMainRoot.test.tsx index 4f2e2d6023..8a1568dd0b 100644 --- a/resources/js/features/games/components/TopAchieversMainRoot/TopAchieversMainRoot.test.tsx +++ b/resources/js/features/games/components/TopAchieversMainRoot/TopAchieversMainRoot.test.tsx @@ -138,8 +138,7 @@ describe('Component: TopAchieversMainRoot', () => { // ACT const comboboxEl = screen.getAllByRole('combobox')[0]; - await userEvent.click(comboboxEl); - await userEvent.click(screen.getByRole('option', { name: '2' })); + await userEvent.selectOptions(comboboxEl, ['2']); // ASSERT expect(visitSpy).toHaveBeenCalledOnce(); diff --git a/resources/js/features/messages/components/+root/MessagesRoot.test.tsx b/resources/js/features/messages/components/+root/MessagesRoot.test.tsx index e89e5b3674..2e80f9151e 100644 --- a/resources/js/features/messages/components/+root/MessagesRoot.test.tsx +++ b/resources/js/features/messages/components/+root/MessagesRoot.test.tsx @@ -120,8 +120,7 @@ describe('Component: MessagesRoot', () => { // ACT const paginatorCombobox = screen.getAllByRole('combobox')[0]; - await userEvent.click(paginatorCombobox); - await userEvent.click(screen.getByRole('option', { name: '2' })); + await userEvent.selectOptions(paginatorCombobox, ['2']); // ASSERT expect(visitSpy).toHaveBeenCalledOnce();