From 76ac3f43faccc8fd8bca575a68ceeb3a20df9ad9 Mon Sep 17 00:00:00 2001
From: hamed-musallam <35760236+hamed-musallam@users.noreply.github.com>
Date: Mon, 3 Jun 2024 10:24:24 +0200
Subject: [PATCH] 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
---
 src/components/hooks/useSelect.tsx    | 21 +++++---
 stories/components/select.stories.tsx | 74 ++++++++++++++++++++++++++-
 2 files changed, 86 insertions(+), 9 deletions(-)

diff --git a/src/components/hooks/useSelect.tsx b/src/components/hooks/useSelect.tsx
index 6df83fef..fa4087e1 100644
--- 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
index 0513d87c..7232b4f5 100644
--- 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' };