From 0cc7f1913852b423bd870748514ab44dcaaca6db Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Thu, 18 Dec 2025 09:39:48 -0500 Subject: [PATCH] Clean up semantic-domain-clicking behavior --- .../src/components/back-to-list-button.tsx | 14 +++-------- .../components/dictionary-entry-display.tsx | 23 +++++++++++-------- .../src/components/dictionary-list.tsx | 8 +++++-- .../src/components/domains-display.tsx | 7 +++++- 4 files changed, 28 insertions(+), 24 deletions(-) diff --git a/platform.bible-extension/src/components/back-to-list-button.tsx b/platform.bible-extension/src/components/back-to-list-button.tsx index de3ebb552e..40297e2958 100644 --- a/platform.bible-extension/src/components/back-to-list-button.tsx +++ b/platform.bible-extension/src/components/back-to-list-button.tsx @@ -1,16 +1,13 @@ // Modified from paranext-core/extensions/src/components/dictionary/back-to-list-button.component.tsx -import type { IEntry } from 'fw-lite-extension'; import { ArrowLeft } from 'lucide-react'; -import { ListboxOption, Button, DrawerClose } from 'platform-bible-react'; +import { Button, DrawerClose } from 'platform-bible-react'; import { LanguageStrings } from 'platform-bible-utils'; /** Props for the BackToListButton component */ type BackToListButtonProps = { /** Callback function to handle back button click, returning to the list view */ - handleBackToListButton?: (option: ListboxOption) => void; - /** Dictionary entry to display in the button */ - dictionaryEntry: IEntry; + handleBackToListButton?: () => void; /** Whether the display is in a drawer or just next to the list */ isDrawer: boolean; /** Localized strings for the button */ @@ -27,18 +24,13 @@ type BackToListButtonProps = { */ export default function BackToListButton({ handleBackToListButton, - dictionaryEntry, isDrawer, localizedStrings, }: BackToListButtonProps) { if (!handleBackToListButton) return undefined; const button = ( - diff --git a/platform.bible-extension/src/components/dictionary-entry-display.tsx b/platform.bible-extension/src/components/dictionary-entry-display.tsx index 24501343f1..ba221c06a4 100644 --- a/platform.bible-extension/src/components/dictionary-entry-display.tsx +++ b/platform.bible-extension/src/components/dictionary-entry-display.tsx @@ -3,13 +3,7 @@ import { useLocalizedStrings } from '@papi/frontend/react'; import type { DictionaryLanguages, IEntry, ISemanticDomain } from 'fw-lite-extension'; import { ChevronUpIcon } from 'lucide-react'; -import { - Button, - DrawerDescription, - DrawerTitle, - Separator, - ListboxOption, -} from 'platform-bible-react'; +import { Button, DrawerDescription, DrawerTitle, Separator } from 'platform-bible-react'; import BackToListButton from './back-to-list-button'; import DomainsDisplay from './domains-display'; import { LOCALIZED_STRING_KEYS } from '../types/localized-string-keys'; @@ -28,7 +22,7 @@ export type DictionaryEntryDisplayProps = DictionaryLanguages & { /** Whether the display is in a drawer or just next to the list */ isDrawer: boolean; /** Callback function to handle back button click, returning to the list view */ - handleBackToListButton?: (option: ListboxOption) => void; + handleBackToListButton?: () => void; /** Callback function to handle scroll to top */ onClickScrollToTop: () => void; /** Callback function to handle click on a semantic domain */ @@ -55,10 +49,19 @@ export default function DictionaryEntryDisplay({ const TitleComponent = isDrawer ? DrawerTitle : 'span'; const DescriptionComponent = isDrawer ? DrawerDescription : 'span'; + /** If domain is clicked, call the provided callback then close the drawer. */ + const onClickDomain = onClickSemanticDomain + ? (domain: ISemanticDomain) => { + onClickSemanticDomain(domain); + if (isDrawer) { + handleBackToListButton?.(); + } + } + : undefined; + return ( <> ))} diff --git a/platform.bible-extension/src/components/dictionary-list.tsx b/platform.bible-extension/src/components/dictionary-list.tsx index ac3c94a7c5..5dfa832216 100644 --- a/platform.bible-extension/src/components/dictionary-list.tsx +++ b/platform.bible-extension/src/components/dictionary-list.tsx @@ -53,6 +53,10 @@ export default function DictionaryList({ return dictionaryData.find((entry) => entry.id === selectedEntryId); }, [dictionaryData, selectedEntryId]); + const clearSelectedEntry = () => { + setSelectedEntryId(undefined); + }; + const handleOptionSelect = (option: ListboxOption) => { setSelectedEntryId((prevId) => (prevId === option.id ? undefined : option.id)); }; @@ -123,7 +127,7 @@ export default function DictionaryList({ isDrawer={false} analysisLanguage={analysisLanguage} dictionaryEntry={selectedEntry} - handleBackToListButton={handleOptionSelect} + handleBackToListButton={clearSelectedEntry} onClickScrollToTop={scrollToTop} onClickSemanticDomain={onClickSemanticDomain} vernacularLanguage={vernacularLanguage} @@ -144,7 +148,7 @@ export default function DictionaryList({ isDrawer analysisLanguage={analysisLanguage} dictionaryEntry={selectedEntry} - handleBackToListButton={() => setSelectedEntryId(undefined)} + handleBackToListButton={clearSelectedEntry} onClickScrollToTop={scrollToTop} onClickSemanticDomain={onClickSemanticDomain} vernacularLanguage={vernacularLanguage} diff --git a/platform.bible-extension/src/components/domains-display.tsx b/platform.bible-extension/src/components/domains-display.tsx index ea4cd8a623..9664a79ac4 100644 --- a/platform.bible-extension/src/components/domains-display.tsx +++ b/platform.bible-extension/src/components/domains-display.tsx @@ -38,7 +38,12 @@ export default function DomainsDisplay({ className="tw-rounded tw-bg-accent tw-px-2 tw-py-0.5 tw-text-xs tw-accent-foreground tw-flex tw-items-center tw-gap-1" disabled={!onClickDomain} key={domain.code} - onClick={() => onClickDomain?.(domain)} + onClick={(e) => { + if (onClickDomain) { + e.stopPropagation(); + onClickDomain(domain); + } + }} type="button" >