Replace getActiveElement prop with ref in ItemRendererProps

palantir · Feb 8, 2023 · a1f24f5 · a1f24f5
1 parent 7120387
commit a1f24f5
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 40 deletions.
diff --git a/packages/docs-app/src/examples/select-examples/selectExample.tsx b/packages/docs-app/src/examples/select-examples/selectExample.tsx
@@ -18,7 +18,7 @@ import * as React from "react";
 
 import { H5, Menu, MenuDivider, MenuItem, Switch } from "@blueprintjs/core";
 import { Example, ExampleProps } from "@blueprintjs/docs-theme";
-import { isCreateNewItem, ItemListRendererProps, ListItemsProps } from "@blueprintjs/select";
+import { ItemListRendererProps } from "@blueprintjs/select";
 import { Film, FilmSelect, filterFilm, TOP_100_FILMS } from "@blueprintjs/select/examples";
 
 export interface ISelectExampleState {
@@ -95,7 +95,6 @@ export class SelectExample extends React.PureComponent<ExampleProps, ISelectExam
                     allowCreate={allowCreate}
                     createNewItemPosition={this.state.createFirst ? "first" : "last"}
                     disabled={disabled}
-                    getActiveElement={grouped ? this.getGroupedActiveElement : undefined}
                     itemDisabled={this.isItemDisabled}
                     itemListRenderer={grouped ? this.renderGroupedItemList : undefined}
                     itemListPredicate={grouped ? this.groupedItemListPredicate : undefined}
@@ -171,25 +170,6 @@ export class SelectExample extends React.PureComponent<ExampleProps, ISelectExam
         return /[0-9]/.test(firstLetter) ? "0-9" : firstLetter;
     }
 
-    private getGroupedActiveElement: ListItemsProps<Film>["getActiveElement"] = ({
-        activeItem,
-        filteredItems,
-        index,
-        itemsParent,
-    }) => {
-        if (itemsParent != null) {
-            if (isCreateNewItem(activeItem)) {
-                return itemsParent.children.item(index) as HTMLElement;
-            }
-
-            const group = this.getGroup(activeItem);
-            const groupedItems = this.getGroupedItems(filteredItems);
-            const groupIndex = groupedItems.findIndex(item => item.group === group);
-            return itemsParent.children.item(index + groupIndex + 1) as HTMLElement;
-        }
-        return undefined;
-    };
-
     private getGroupedItems = (filteredItems: Film[]) => {
         return filteredItems.reduce<Array<{ group: string; index: number; items: Film[]; key: number }>>(
             (acc, item, index) => {

diff --git a/packages/select/src/__examples__/films.tsx b/packages/select/src/__examples__/films.tsx
@@ -140,11 +140,12 @@ export const TOP_100_FILMS: Film[] = [
  */
 export function getFilmItemProps(
     film: Film,
-    { handleClick, handleFocus, modifiers, query }: ItemRendererProps,
+    { handleClick, handleFocus, modifiers, ref, query }: ItemRendererProps,
 ): MenuItemProps & React.Attributes & React.HTMLAttributes<HTMLAnchorElement> {
     return {
         active: modifiers.active,
         disabled: modifiers.disabled,
+        elementRef: ref,
         key: film.rank,
         label: film.year.toString(),
         onClick: handleClick,

diff --git a/packages/select/src/common/itemRenderer.ts b/packages/select/src/common/itemRenderer.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { MouseEventHandler } from "react";
+import { MouseEventHandler, Ref } from "react";
 
 /** @deprecated use ItemModifiers */
 export type IItemModifiers = ItemModifiers;
@@ -38,6 +38,9 @@ export type IItemRendererProps = ItemRendererProps;
  * An `itemRenderer` receives the item as its first argument, and this object as its second argument.
  */
 export interface ItemRendererProps {
+    /** A ref that receives the native HTML element rendered by this item. */
+    ref: Ref<HTMLLIElement>;
+
     /** Click event handler to select this item. */
     handleClick: MouseEventHandler<HTMLElement>;
 

diff --git a/packages/select/src/common/listItemsProps.ts b/packages/select/src/common/listItemsProps.ts
@@ -46,14 +46,6 @@ export interface ListItemsProps<T> extends Props {
      */
     activeItem?: T | CreateNewItem | null;
 
-    /** If provided, this function will be used in place of the default implementation. */
-    getActiveElement?: (props: {
-        activeItem: CreateNewItem | T | null;
-        filteredItems: T[];
-        index: number;
-        itemsParent: HTMLElement;
-    }) => HTMLElement | undefined;
-
     /** Array of items in the list. */
     items: T[];
 

diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
@@ -169,6 +169,8 @@ export class QueryList<T> extends AbstractComponent2<QueryListProps<T>, IQueryLi
 
     private itemsParentRef?: HTMLElement | null;
 
+    private itemRefs = new Map<number, HTMLElement>();
+
     private refHandlers = {
         itemsParent: (ref: HTMLElement | null) => (this.itemsParentRef = ref),
     };
@@ -394,6 +396,13 @@ export class QueryList<T> extends AbstractComponent2<QueryListProps<T>, IQueryLi
                 index,
                 modifiers,
                 query,
+                ref: node => {
+                    if (node) {
+                        this.itemRefs.set(index, node);
+                    } else {
+                        this.itemRefs.delete(index);
+                    }
+                },
             });
         }
 
@@ -417,19 +426,12 @@ export class QueryList<T> extends AbstractComponent2<QueryListProps<T>, IQueryLi
     private getActiveElement() {
         const { activeItem, filteredItems } = this.state;
         if (this.itemsParentRef != null) {
-            const { getActiveElement } = this.props;
             if (isCreateNewItem(activeItem)) {
                 const index = this.isCreateItemFirst() ? 0 : filteredItems.length;
-                if (typeof getActiveElement === "function") {
-                    return getActiveElement({ activeItem, filteredItems, index, itemsParent: this.itemsParentRef });
-                }
-                return this.itemsParentRef.children.item(index) as HTMLElement;
+                return this.itemRefs.get(index) ?? (this.itemsParentRef.children.item(index) as HTMLElement);
             } else {
                 const index = this.getActiveIndex();
-                if (typeof getActiveElement === "function") {
-                    return getActiveElement({ activeItem, filteredItems, index, itemsParent: this.itemsParentRef });
-                }
-                return this.itemsParentRef.children.item(index) as HTMLElement;
+                return this.itemRefs.get(index) ?? (this.itemsParentRef.children.item(index) as HTMLElement);
             }
         }
         return undefined;