fix - zoom to target when search result is clicked

samvera-labs · May 1, 2024 · 0c56986 · 0c56986
1 parent 344df42
commit 0c56986
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/src/components/Viewer/InformationPanel/ContentSearch/Item.tsx b/src/components/Viewer/InformationPanel/ContentSearch/Item.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { Item as ItemStyled } from "./Item.styled";
 
 import {
@@ -18,9 +18,17 @@ import AnnotationItemPlainText from "./PlainText";
 
 type Props = {
   annotation: AnnotationNormalized;
+  activeContentSearchTarget?: string;
+  setActiveContentSearchTarget: React.Dispatch<
+    React.SetStateAction<string | undefined>
+  >;
 };
 
-export const ContentSearchItem: React.FC<Props> = ({ annotation }) => {
+export const ContentSearchItem: React.FC<Props> = ({
+  annotation,
+  activeContentSearchTarget,
+  setActiveContentSearchTarget,
+}) => {
   const dispatch: any = useViewerDispatch();
   const viewerState: ViewerContextStore = useViewerState();
   const {
@@ -31,7 +39,6 @@ export const ContentSearchItem: React.FC<Props> = ({ annotation }) => {
     configOptions,
     OSDImageLoaded,
   } = viewerState;
-  const [activeContentSearchTarget, setActiveContentSearchTarget] = useState();
 
   const canvas: CanvasNormalized = vault.get({
     id: activeCanvas,

diff --git a/src/components/Viewer/InformationPanel/ContentSearch/Page.tsx b/src/components/Viewer/InformationPanel/ContentSearch/Page.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   AnnotationNormalized,
   AnnotationPageNormalized,
@@ -17,6 +17,9 @@ type GroupedAnnotations = {
 export const ContentSearchPage: React.FC<Props> = ({ annotationPage }) => {
   const viewerState: ViewerContextStore = useViewerState();
   const { contentSearchVault, configOptions } = viewerState;
+  const [activeContentSearchTarget, setActiveContentSearchTarget] = useState<
+    string | undefined
+  >();
 
   const searchResultsLimit = configOptions.contentSearch?.searchResultsLimit;
   const searchText = configOptions.localeText?.contentSearch;
@@ -51,7 +54,12 @@ export const ContentSearchPage: React.FC<Props> = ({ annotationPage }) => {
       : annotations;
 
     return annotationsShown.map((annotation, i) => (
-      <ContentSearchItem key={i} annotation={annotation} />
+      <ContentSearchItem
+        key={i}
+        annotation={annotation}
+        activeContentSearchTarget={activeContentSearchTarget}
+        setActiveContentSearchTarget={setActiveContentSearchTarget}
+      />
     ));
   }