Use KeyedItem interface in Picker (#1858)

deephaven · Mar 19, 2024 · 0c5980e · 0c5980e
1 parent 4783092
commit 0c5980e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 28 deletions.
diff --git a/packages/components/src/spectrum/picker/Picker.tsx b/packages/components/src/spectrum/picker/Picker.tsx
@@ -99,20 +99,28 @@ export function Picker({
   );
 
   const renderItem = useCallback(
-    ({ key, content, textValue }: NormalizedPickerItem) => (
+    ({ key, item }: NormalizedPickerItem) => (
       // The `textValue` prop gets used to provide the content of `<option>`
       // elements that back the Spectrum Picker. These are not visible in the UI,
       // but are used for accessibility purposes, so we set to an arbitrary
       // 'Empty' value so that they are not empty strings.
       <Item
         key={key as Key}
-        textValue={textValue === '' || textValue == null ? 'Empty' : textValue}
+        textValue={
+          item?.textValue === '' || item?.textValue == null
+            ? 'Empty'
+            : item.textValue
+        }
       >
-        <PickerItemContent>{content}</PickerItemContent>
-        {tooltipOptions == null || content === '' ? null : (
-          <Tooltip options={tooltipOptions}>
-            {createTooltipContent(content)}
-          </Tooltip>
+        {item?.content == null ? null : (
+          <>
+            <PickerItemContent>{item.content}</PickerItemContent>
+            {tooltipOptions == null || item.content === '' ? null : (
+              <Tooltip options={tooltipOptions}>
+                {createTooltipContent(item.content)}
+              </Tooltip>
+            )}
+          </>
         )}
       </Item>
     ),
@@ -143,8 +151,8 @@ export function Picker({
           return (
             <Section
               key={itemOrSection.key}
-              title={itemOrSection.title}
-              items={itemOrSection.items}
+              title={itemOrSection.item?.title}
+              items={itemOrSection.item?.items}
             >
               {renderItem}
             </Section>

diff --git a/packages/components/src/spectrum/picker/PickerUtils.ts b/packages/components/src/spectrum/picker/PickerUtils.ts
@@ -2,6 +2,7 @@ import { isValidElement, Key, ReactElement, ReactNode } from 'react';
 import { SpectrumPickerProps } from '@adobe/react-spectrum';
 import type { ItemRenderer } from '@react-types/shared';
 import Log from '@deephaven/log';
+import { KeyedItem } from '@deephaven/utils';
 import { Item, ItemProps, Section, SectionProps } from '../shared';
 import { PopperOptions } from '../../popper';
 
@@ -46,17 +47,21 @@ export type PickerSelectionChangeHandler = (key: PickerItemKey) => void;
  * form to make rendering items simpler and keep the logic of transformation
  * in separate util methods.
  */
-export interface NormalizedPickerItem {
-  key?: PickerItemKey;
-  content: ReactNode;
-  textValue?: string;
-}
-
-export interface NormalizedPickerSection {
-  key?: Key;
-  title?: ReactNode;
-  items: NormalizedPickerItem[];
-}
+export type NormalizedPickerItem = KeyedItem<
+  {
+    content: ReactNode;
+    textValue?: string;
+  },
+  PickerItemKey | undefined
+>;
+
+export type NormalizedPickerSection = KeyedItem<
+  {
+    title?: ReactNode;
+    items: NormalizedPickerItem[];
+  },
+  Key | undefined
+>;
 
 export type NormalizedSpectrumPickerProps =
   SpectrumPickerProps<NormalizedPickerItem>;
@@ -111,7 +116,10 @@ export function isPickerItemOrSection(
 export function isNormalizedPickerSection(
   maybeNormalizedPickerSection: NormalizedPickerItem | NormalizedPickerSection
 ): maybeNormalizedPickerSection is NormalizedPickerSection {
-  return 'items' in maybeNormalizedPickerSection;
+  return (
+    maybeNormalizedPickerSection.item != null &&
+    'items' in maybeNormalizedPickerSection.item
+  );
 }
 
 /**
@@ -195,8 +203,10 @@ function normalizePickerItem(
 
     return {
       key,
-      title,
-      items,
+      item: {
+        title,
+        items,
+      },
     };
   }
 
@@ -208,8 +218,7 @@ function normalizePickerItem(
 
   return {
     key,
-    content,
-    textValue,
+    item: { content, textValue },
   };
 }
 

diff --git a/packages/utils/src/DataUtils.ts b/packages/utils/src/DataUtils.ts
@@ -4,9 +4,12 @@ export const EMPTY_MAP: ReadonlyMap<never, never> = new Map<never, never>();
 
 export const EMPTY_FUNCTION = (): void => undefined;
 
-export interface KeyedItem<T> {
-  key: string;
-  item?: T;
+export interface KeyedItem<
+  TItem,
+  TKey extends string | number | boolean | undefined = string,
+> {
+  key: TKey;
+  item?: TItem;
 }
 
 export type SelectionT<T = string> = 'all' | Set<T>;