feat: improve useSelect hook item render (#732)

* feat: improve useSelect hook to support custom item rendering * chore(storybook): create a sample for custom select item * refactor: useSelect interface
zakodium-oss · Jun 3, 2024 · 76ac3f4 · 76ac3f4
1 parent ebdd792
commit 76ac3f4
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 9 deletions.
diff --git a/src/components/hooks/useSelect.tsx b/src/components/hooks/useSelect.tsx
@@ -1,6 +1,6 @@
 import { MenuItem } from '@blueprintjs/core';
 import { ItemRenderer } from '@blueprintjs/select';
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 type FilterType<SourceType, Type> = Pick<
   SourceType,
@@ -9,14 +9,17 @@ type FilterType<SourceType, Type> = Pick<
   }[keyof SourceType]
 >;
 
-interface BaseOptions<T> {
-  itemTextKey: keyof FilterType<T, string>;
+interface ItemOptions<T> {
+  renderItem?: (item: T) => ReactNode;
   defaultSelectedItem?: T;
 }
 
-interface RenderOptions<T> {
+interface BaseOptions<T> extends ItemOptions<T> {
+  itemTextKey: keyof FilterType<T, string>;
+}
+
+interface RenderOptions<T> extends ItemOptions<T> {
   getItemText: (item: T) => string;
-  defaultSelectedItem?: T;
 }
 
 type SelectOptions<T> = BaseOptions<T> | RenderOptions<T>;
@@ -91,16 +94,18 @@ function getItemRenderer<T>(value: T, options: SelectOptions<T>) {
     { handleClick, handleFocus, modifiers, index },
   ) => {
     const label = getLabel(item, options);
+    const { renderItem } = options;
+    const { active, disabled } = modifiers;
     return (
       <MenuItem
-        active={modifiers.active}
-        disabled={modifiers.disabled}
+        active={active}
+        disabled={disabled}
         selected={selectedLabel === label}
         key={index}
         onClick={handleClick}
         onFocus={handleFocus}
         roleStructure="listoption"
-        text={label}
+        text={renderItem?.(item) || label}
       />
     );
   };

diff --git a/stories/components/select.stories.tsx b/stories/components/select.stories.tsx
@@ -6,7 +6,14 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { ItemListRenderer, Select } from '@blueprintjs/select';
-import { Dispatch, Fragment, SetStateAction, useState } from 'react';
+import styled from '@emotion/styled';
+import {
+  CSSProperties,
+  Dispatch,
+  Fragment,
+  SetStateAction,
+  useState,
+} from 'react';
 
 import { Button, useOnOff, useSelect } from '../../src/components';
 
@@ -384,6 +391,71 @@ export function WithCustomStyle() {
   );
 }
 
+const Row = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+});
+
+const Tag = styled.div({
+  borderRadius: '25px',
+  minWidth: '25px',
+  minHeight: '25px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '11px',
+});
+
+export function WithCustomRenderItem() {
+  const { value, ...defaultProps } = useSelect<{
+    label: string;
+    color: CSSProperties['color'];
+  }>({
+    itemTextKey: 'label',
+    renderItem: ({ label, color }) => (
+      <Row>
+        <Tag
+          style={{
+            backgroundColor: color,
+          }}
+        >
+          <span>{label.charAt(0)}</span>
+        </Tag>
+        <span style={{ flex: 1, padding: '0 5px' }}>{label}</span>
+        <Tag
+          style={{
+            border: `${color} 1px solid`,
+            padding: '0 10px',
+          }}
+        >
+          <span>fruits</span>
+        </Tag>
+      </Row>
+    ),
+  });
+  return (
+    <>
+      <Select
+        items={[
+          { label: 'Apple', color: 'greenyellow' },
+          { label: 'Banana', color: 'yellow' },
+          { label: 'Orange', color: 'orange' },
+        ]}
+        filterable={false}
+        itemsEqual="label"
+        {...defaultProps}
+      >
+        <Button
+          style={{ width: '500px' }}
+          text={value?.label ?? 'Select a status'}
+          rightIcon="double-caret-vertical"
+        />
+      </Select>
+      <p>Value outside component is {value?.label}.</p>
+    </>
+  );
+}
+
 export function FixedValueNoopHandle() {
   const defaultProps = useSelect<{ label: string }>({ itemTextKey: 'label' });
   const value = { label: 'Orange' };