Merge pull request #168 from UW-Macrostrat/postgrest

onSearchChange for PostgRESTInfiniteScrollView

Author: davidsklar99

packages/ui-components/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [4.4.6] - 2025-08-13
+
+onSearchChange for PostgRESTInfiniteScrollView
+
 ## [4.4.5] - 2025-08-12
 
 Fix broken Pagination component

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/ui-components",
-  "version": "4.4.5",
+  "version": "4.4.6",
   "description": "UI components for React and Blueprint.js",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/ui-components/src/postgrest-infinite-scroll.ts

@@ -1,7 +1,7 @@
 import hyper from "@macrostrat/hyper";
 import { InfiniteScrollProps, InfiniteScrollView } from "./infinite-scroll";
 import { useAPIResult } from "./api";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { MultiSelect, ItemRenderer, ItemPredicate } from "@blueprintjs/select";
 import {
   MenuItem,
@@ -45,6 +45,7 @@ interface PostgRESTInfiniteScrollProps extends InfiniteScrollProps<any> {
     title: string;
     children: React.ReactNode;
   }>;
+  onSearchChange: (value: string) => void;
 }
 
 export function PostgRESTInfiniteScrollView(
@@ -70,6 +71,7 @@ export function PostgRESTInfiniteScrollView(
     searchColumns = undefined,
     group_key = undefined,
     filter_threshold = 0,
+    onSearchChange = () => {},
     ...rest
   } = props;
 
@@ -82,6 +84,11 @@ export function PostgRESTInfiniteScrollView(
   );
 
   const [filterValue, setFilterValue] = useState<string>("");
+
+  useEffect(() => {
+    onSearchChange(filterValue);
+  }, [filterValue]);
+
   const hideData = filterValue.length < filter_threshold;
 
   const SearchBarToUse = SearchBarComponent ?? SearchBar;

packages/ui-components/stories/postgrest-infinite-scroll.stories.ts

@@ -26,6 +26,7 @@ Primary.args = {
   delay: 100,
   toggles: h("h1", "Toggles here"),
   searchColumns: [{ value: "name", label: "Name" }],
+  onSearchChange: (e) => console.log("Search changed:", e),
 };
 
 export const Multiselect = Template.bind({});