feat(combobox): add itemToElement to render items as custom components (#2766)

Author: RyanDubowsky

packages/react/src/components/ComboBox/ComboBox-story.js

@@ -49,6 +49,16 @@ const props = () => ({
   onChange: action('onChange'),
 });
 
+const itemToElement = item => {
+  const itemAsArray = item.text.split(' ');
+  return (
+    <div>
+      <span>{itemAsArray[0]}</span>
+      <span style={{ color: 'red' }}> {itemAsArray[1]}</span>
+    </div>
+  );
+};
+
 storiesOf('ComboBox', module)
   .addDecorator(withKnobs)
   .add(
@@ -68,6 +78,24 @@ storiesOf('ComboBox', module)
       },
     }
   )
+  .add(
+    'items as components',
+    () => (
+      <div style={{ width: 300 }}>
+        <ComboBox
+          items={items}
+          itemToString={item => (item ? item.text : '')}
+          itemToElement={itemToElement}
+          {...props()}
+        />
+      </div>
+    ),
+    {
+      info: {
+        text: 'ComboBox',
+      },
+    }
+  )
   .add(
     'custom text input handling',
     () => (

packages/react/src/components/ComboBox/ComboBox-test.js

@@ -82,6 +82,16 @@ describe('ComboBox', () => {
     expect(onInputChange).toHaveBeenCalledWith('something');
   });
 
+  it('should render custom item components', () => {
+    const wrapper = mount(<ComboBox {...mockProps} />);
+    wrapper.setProps({
+      itemToElement: item => <div className="mock-item">{item.text}</div>,
+    });
+    openMenu(wrapper);
+
+    expect(wrapper.find(`.mock-item`).length).toBe(mockProps.items.length);
+  });
+
   describe('should display initially selected item found in `initialSelectedItem`', () => {
     it('using an object type for the `initialSelectedItem` prop', () => {
       const wrapper = mount(

packages/react/src/components/ComboBox/ComboBox.js

@@ -94,6 +94,12 @@ export default class ComboBox extends React.Component {
      */
     itemToString: PropTypes.func,
 
+    /**
+     * Optional function to render items as custom components instead of strings.
+     * Defaults to null and is overriden by a getter
+     */
+    itemToElement: PropTypes.func,
+
     /**
      * `onChange` is a utility for this controlled component to communicate to a
      * consuming component when a specific dropdown item is selected.
@@ -156,6 +162,7 @@ export default class ComboBox extends React.Component {
   static defaultProps = {
     disabled: false,
     itemToString: defaultItemToString,
+    itemToElement: null,
     shouldFilterItem: defaultShouldFilterItem,
     type: 'default',
     ariaLabel: 'Choose an item',
@@ -229,6 +236,7 @@ export default class ComboBox extends React.Component {
       id,
       items,
       itemToString,
+      itemToElement,
       titleText,
       helperText,
       placeholder,
@@ -261,6 +269,9 @@ export default class ComboBox extends React.Component {
       <div className={helperClasses}>{helperText}</div>
     ) : null;
     const wrapperClasses = cx(`${prefix}--list-box__wrapper`);
+
+    // needs to be Capitalized for react to render it correctly
+    const ItemToElement = itemToElement;
     const input = (
       <Downshift
         {...downshiftProps}
@@ -337,7 +348,11 @@ export default class ComboBox extends React.Component {
                         false
                       }
                       {...getItemProps({ item, index })}>
-                      {itemToString(item)}
+                      {itemToElement ? (
+                        <ItemToElement key={itemToString(item)} {...item} />
+                      ) : (
+                        itemToString(item)
+                      )}
                     </ListBox.MenuItem>
                   )
                 )}