Merge pull request #161 from quid/feat/dropdown-support-customize-dropdownlist

feat: make Dropdown supports customize dropdown list

Author: expectNothin9

packages/react-dropdown/src/List.js

@@ -19,7 +19,7 @@ import {
   type HighlightedIndex,
 } from './dropdownTypes.js';
 
-type Props = {
+export type ListProps = {
   items: Array<DropdownItem>,
   categories: Array<DropdownCategory>,
   inputValue: ?string,
@@ -53,7 +53,7 @@ export const List = styled.div`
   min-width: 27.86em;
 `;
 
-const DropdownList: React.ComponentType<Props> = styled(
+const DropdownList: React.ComponentType<ListProps> = styled(
   React.forwardRef(
     (
       {
@@ -69,7 +69,7 @@ const DropdownList: React.ComponentType<Props> = styled(
         highlight,
         multiselect,
         ...props
-      }: Props,
+      }: ListProps,
       ref: React.ElementRef<any>
     ) => {
       const filteredItems = useFilter ? filterFn(items, inputValue) : items;

packages/react-dropdown/src/index.js

@@ -8,7 +8,7 @@
 import * as React from 'react';
 import { type GetInputPropsReturn } from 'downshift';
 import { filterItems, callAll } from './utils';
-import DropdownList from './List';
+import DropdownList, { type ListProps } from './List';
 import InputCreator from './InputCreator';
 import styled from '@emotion/styled/macro';
 import MultiDownshift, {
@@ -60,6 +60,7 @@ type Props = {
     MultiControllerStateAndHelpers
   ) => void,
   renderDropdown?: ({ dropdown: React.Node }) => React.Node,
+  customizeDropdownList?: React.ComponentType<ListProps>,
 };
 
 const DropdownContainer = styled.div`
@@ -88,6 +89,7 @@ const Dropdown = ({
   onSelect,
   highlight = false,
   renderDropdown = defaultRenderDropdown,
+  customizeDropdownList,
   ...props
 }: Props) => {
   if (defaultSelectedItems != null && selectedItems != null) {
@@ -101,6 +103,8 @@ const Dropdown = ({
       'Warning: Failed prop type: You provided a `selectedItems` prop to a form field without an `onChange` handler. If the field should be mutable use `defaultSelectedItems`. Otherwise, set `onChange`.'
     );
   }
+  const List = customizeDropdownList || DropdownList;
+
   return (
     <Manager>
       <MultiDownshift
@@ -162,7 +166,7 @@ const Dropdown = ({
                   {isOpen &&
                     renderDropdown({
                       dropdown: (
-                        <DropdownList
+                        <List
                           // $FlowFixMe(fzivolo): react-popper has wrong types?
                           ref={ref}
                           style={style}

packages/react-dropdown/src/index.test.js

@@ -772,6 +772,20 @@ it('custom renderDropdown function should render', () => {
   expect(wrapper.find('ul li').hostNodes().length > 0).toBe(true);
 });
 
+it('customize DropdownList should be rendered', () => {
+  const customizeDropdownList = () => <div id="customizeList"></div>;
+  const wrapper = mount(
+    <Dropdown
+      items={items.slice(0, 2)}
+      defaultIsOpen={true}
+      customizeDropdownList={customizeDropdownList}
+    >
+      {({ getInputProps }) => <input {...getInputProps()} />}
+    </Dropdown>
+  );
+  expect(wrapper.find('#customizeList')).toHaveLength(1);
+});
+
 it('DropdownList could be styled', () => {
   const StyledDropdown = styled(Dropdown)`
     ${DL} {