@databiosphere/findable-ui 3.0.0 → 3.1.0

package/lib/config/entities.d.ts

@@ -1,7 +1,7 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
 import { ColumnSort } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
-import { CategoryKey, SelectedFilter, SelectedFilterValue } from "../common/entities";
+import { CategoryKey, SelectCategoryValueView, SelectedFilter, SelectedFilterValue } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
@@ -66,6 +66,7 @@ export interface CategoryGroup {
 export interface CategoryConfig {
     key: string;
     label: string;
+    mapSelectCategoryValue?: (selectCategoryValue: SelectCategoryValueView) => SelectCategoryValueView;
 }
 /**
  * Column configuration.

package/lib/hooks/useCategoryFilter.d.ts

@@ -1,4 +1,4 @@
-import { CategoryKey, CategoryValueKey, Filters, SelectCategory, SelectCategoryView } from "../common/entities";
+import { CategoryKey, CategoryValueKey, Filters, SelectCategory, SelectCategoryValue, SelectCategoryView } from "../common/entities";
 import { CategoryConfig } from "../config/entities";
 /**
  * State backing filter functionality and calculations. Converted to view model for display.
@@ -33,3 +33,9 @@ export declare function buildCategoryViews(categories: SelectCategory[], categor
  * @returns New filter state generated from the current set of selected values and the newly selected value.
  */
 export declare function buildNextFilterState(filterState: FilterState, categoryKey: CategoryKey, selectedValue: CategoryValueKey, selected: boolean): FilterState;
+/**
+ * Default function returning select category value, unmodified.
+ * @param selectCategoryValue - Select category value.
+ * @returns original select category value.
+ */
+export declare function getSelectCategoryValue(selectCategoryValue: SelectCategoryValue): SelectCategoryValue;

package/lib/hooks/useCategoryFilter.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildNextFilterState = exports.buildCategoryViews = void 0;
+exports.getSelectCategoryValue = exports.buildNextFilterState = exports.buildCategoryViews = void 0;
 const constants_1 = require("../common/constants");
 /**
  * Build the view-specific model of the given category value.
@@ -27,11 +27,13 @@ function buildCategoryValueView(categoryValue, categorySelectedFilter) {
  * @returns Full built category value view, ready for display.
  */
 function buildCategoryView(category, categoryValueViews, categoryConfigs) {
+    const categoryConfig = findCategoryConfig(category.key, categoryConfigs);
+    const mapSelectCategoryValue = (categoryConfig === null || categoryConfig === void 0 ? void 0 : categoryConfig.mapSelectCategoryValue) || getSelectCategoryValue;
     return {
         isDisabled: false,
         key: category.key,
-        label: getCategoryLabel(category.key, categoryConfigs),
-        values: categoryValueViews,
+        label: getCategoryLabel(category.key, categoryConfig),
+        values: categoryValueViews.map(mapSelectCategoryValue),
     };
 }
 /**
@@ -107,16 +109,33 @@ function getCategorySelectedFilter(categoryKey, filterState) {
 /**
  * Get the label for the given category key as per the config.
  * @param key - Key of category to find label of.
- * @param categoryConfigs - Category accept list.
+ * @param categoryConfig - Category.
  * @returns the display value for the given category.
  */
-function getCategoryLabel(key, categoryConfigs) {
-    const categoryConfig = categoryConfigs.find((categoryConfig) => categoryConfig.key === key);
+function getCategoryLabel(key, categoryConfig) {
     if (!categoryConfig) {
         return key;
     }
     return categoryConfig.label;
 }
+/**
+ * Default function returning select category value, unmodified.
+ * @param selectCategoryValue - Select category value.
+ * @returns original select category value.
+ */
+function getSelectCategoryValue(selectCategoryValue) {
+    return selectCategoryValue;
+}
+exports.getSelectCategoryValue = getSelectCategoryValue;
+/**
+ * Returns the category config for the given category config key.
+ * @param key - Category config key.
+ * @param categoryConfigs - Category configs.
+ * @returns category config.
+ */
+function findCategoryConfig(key, categoryConfigs) {
+    return categoryConfigs.find((categoryConfig) => categoryConfig.key === key);
+}
 /**
  * Determine if given category value is selected.
  * @param categoryValueKey - The key of the category value to check if selected in the filter state.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "",
   "scripts": {
     "test": "jest",

package/src/config/entities.ts

@@ -3,6 +3,7 @@ import { ColumnSort } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
 import {
   CategoryKey,
+  SelectCategoryValueView,
   SelectedFilter,
   SelectedFilterValue,
 } from "../common/entities";
@@ -77,6 +78,9 @@ export interface CategoryGroup {
 export interface CategoryConfig {
   key: string;
   label: string;
+  mapSelectCategoryValue?: (
+    selectCategoryValue: SelectCategoryValueView
+  ) => SelectCategoryValueView;
 }
 
 /**

package/src/hooks/useCategoryFilter.ts

@@ -73,11 +73,14 @@ function buildCategoryView(
   categoryValueViews: SelectCategoryValueView[],
   categoryConfigs: CategoryConfig[]
 ): SelectCategoryView {
+  const categoryConfig = findCategoryConfig(category.key, categoryConfigs);
+  const mapSelectCategoryValue =
+    categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
   return {
     isDisabled: false,
     key: category.key,
-    label: getCategoryLabel(category.key, categoryConfigs),
-    values: categoryValueViews,
+    label: getCategoryLabel(category.key, categoryConfig),
+    values: categoryValueViews.map(mapSelectCategoryValue),
   };
 }
 
@@ -192,22 +195,43 @@ function getCategorySelectedFilter(
 /**
  * Get the label for the given category key as per the config.
  * @param key - Key of category to find label of.
- * @param categoryConfigs - Category accept list.
+ * @param categoryConfig - Category.
  * @returns the display value for the given category.
  */
 function getCategoryLabel(
   key: string,
-  categoryConfigs: CategoryConfig[]
+  categoryConfig?: CategoryConfig
 ): string {
-  const categoryConfig = categoryConfigs.find(
-    (categoryConfig) => categoryConfig.key === key
-  );
   if (!categoryConfig) {
     return key;
   }
   return categoryConfig.label;
 }
 
+/**
+ * Default function returning select category value, unmodified.
+ * @param selectCategoryValue - Select category value.
+ * @returns original select category value.
+ */
+export function getSelectCategoryValue(
+  selectCategoryValue: SelectCategoryValue
+): SelectCategoryValue {
+  return selectCategoryValue;
+}
+
+/**
+ * Returns the category config for the given category config key.
+ * @param key - Category config key.
+ * @param categoryConfigs - Category configs.
+ * @returns category config.
+ */
+function findCategoryConfig(
+  key: string,
+  categoryConfigs: CategoryConfig[]
+): CategoryConfig | undefined {
+  return categoryConfigs.find((categoryConfig) => categoryConfig.key === key);
+}
+
 /**
  * Determine if given category value is selected.
  * @param categoryValueKey - The key of the category value to check if selected in the filter state.