Merge pull request #129 from UW-Macrostrat/postgrest-scroll

Postgrest scroll 4.3.7

Author: davidsklar99

packages/ui-components/CHANGELOG.md

@@ -1,16 +1,29 @@
 # Changelog
 
-## [4.3.6] - 2025-07-10
+## [4.3.7] - 2025-07-09
+
+For PostgRESTInfiniteScrollView
+
+- Even better state management
+- Handle adding toggles to header
+
+## [4.3.6] - 2025-07-09
+
+For PostgRESTInfiniteScrollView
 
 - Handle extra params and intitial items
 - Better state management
 
 ## [4.3.5] - 2025-07-09
 
+For PostgRESTInfiniteScrollView
+
 - Fix import issue
 
 ## [4.3.4] - 2025-07-09
 
+For PostgRESTInfiniteScrollView
+
 - Fix export issue
 
 ## [4.3.3] - 2025-07-03

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/ui-components",
-  "version": "4.3.6",
+  "version": "4.3.7",
   "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,9 +1,12 @@
-import h from "@macrostrat/hyper";
+import hyper from "@macrostrat/hyper";
 import { InfiniteScrollProps, InfiniteScrollView } from "./infinite-scroll";
 import { useAPIResult } from "./api";
 import { useMemo, useState } from "react";
 import { MultiSelect, ItemRenderer, ItemPredicate } from "@blueprintjs/select";
 import { MenuItem, Spinner, InputGroup } from "@blueprintjs/core";
+import styles from "./postgrest.module.sass";
+
+const h = hyper.styled(styles);
 
 interface PostgRESTInfiniteScrollProps extends InfiniteScrollProps<any> {
   id_key: string;
@@ -13,7 +16,7 @@ interface PostgRESTInfiniteScrollProps extends InfiniteScrollProps<any> {
   filterable?: boolean;
   order_key?: string;
   key?: string;
-  toggles: any;
+  toggles?: any;
   SearchBarComponent?: React.ComponentType<{
     onChange: (value: string) => void;
   }>;
@@ -48,6 +51,7 @@ export function PostgRESTInfiniteScrollView(
     MultiSelectComponent,
     extraParams = {},
     key,
+    toggles = null,
     ...rest
   } = props;
 
@@ -195,27 +199,30 @@ export function PostgRESTInfiniteScrollView(
   };
 
   const newKey =
-    key || `${filterValue}-${selectedItems.join(",")}-${props.toString()}`;
+    key || `${filterValue}-${selectedItems.join(",")}-${JSON.stringify(props)}`;
 
   return h("div.postgrest-infinite-scroll", [
-    h.if(filterable)("div.search-bar", [
-      h(SearchBarToUse, {
-        onChange: (value) => setFilterValue(value || ""),
-      }),
-      h(MultiSelectToUse, {
-        items: keys.filter((item) => !selectedItems.includes(item)),
-        itemRenderer,
-        itemPredicate: filterItem,
-        selectedItems,
-        onItemSelect: handleSelect,
-        tagRenderer: (item) => item,
-        onRemove: handleRemove,
-        tagInputProps: {
+    h("div.header", [
+      h.if(filterable)("div.search-bar", [
+        h(SearchBarToUse, {
+          onChange: (value) => setFilterValue(value || ""),
+        }),
+        h(MultiSelectToUse, {
+          items: keys.filter((item) => !selectedItems.includes(item)),
+          itemRenderer,
+          itemPredicate: filterItem,
+          selectedItems,
+          onItemSelect: handleSelect,
+          tagRenderer: (item) => item,
           onRemove: handleRemove,
-          placeholder: "Select a column(s) to filter by...",
-        },
-        popoverProps: { minimal: true },
-      }),
+          tagInputProps: {
+            onRemove: handleRemove,
+            placeholder: "Select a column(s) to filter by...",
+          },
+          popoverProps: { minimal: true },
+        }),
+      ]),
+      h.if(toggles)("div.toggles", toggles),
     ]),
     h(InfiniteScrollView, {
       ...rest,

packages/ui-components/src/postgrest.module.sass

@@ -0,0 +1,12 @@
+.header
+    display: flex
+    width: 100%
+    justify-content: space-between
+    align-items: center
+    gap: 1em
+
+    .search-bar
+        flex: 1 1 auto
+
+    .toggles
+        flex: 0 0 auto

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

@@ -24,4 +24,5 @@ Primary.args = {
   ascending: true,
   route: "https://dev.macrostrat.org/api/pg/sources_metadata",
   delay: 100,
+  toggles: h("h1", "Toggles here"),
 };