feat: support for custom item children for the dropdown

quid · Feb 20, 2019 · d481d5b · d481d5b
1 parent fdc39be
commit d481d5b
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 14 deletions.
diff --git a/packages/react-dropdown/src/Categories.js b/packages/react-dropdown/src/Categories.js
@@ -135,13 +135,15 @@ export default function DropdownCategories({
         return (
           <Categories key={categoryId}>
             <Category twoColumn={twoColumn}>
-              <Divider
-                isHighlighted={isHighlighted}
-                isSelected={isSelected}
-                twoColumn={twoColumn}
-              >
-                <GroupTitle>{category.label}</GroupTitle>
-              </Divider>
+              {!category.hidden && (
+                <Divider
+                  isHighlighted={isHighlighted}
+                  isSelected={isSelected}
+                  twoColumn={twoColumn}
+                >
+                  <GroupTitle>{category.label}</GroupTitle>
+                </Divider>
+              )}
               <Divider twoColumn={twoColumn}>
                 <DropdownItems
                   categoryId={categoryId}

diff --git a/packages/react-dropdown/src/Items.js b/packages/react-dropdown/src/Items.js
@@ -122,12 +122,21 @@ export default function DropdownItems({
               disabled: isDisabled,
             })}
           >
-            <HighlightValue
-              highlight={highlight}
-              value={item.label}
-              valueToHighlight={inputValue}
-              disabled={isDisabled}
-            />
+            {item.children ? (
+              item.children({
+                isHighlighted: isHighlighted,
+                isSelected: isSelected,
+                isDisabled: isDisabled,
+                item,
+              })
+            ) : (
+              <HighlightValue
+                highlight={highlight}
+                value={item.label}
+                valueToHighlight={inputValue}
+                disabled={isDisabled}
+              />
+            )}
           </Item>
         );
       })}

diff --git a/packages/react-dropdown/src/dropdownTypes.js b/packages/react-dropdown/src/dropdownTypes.js
@@ -12,11 +12,18 @@ export type DropdownItem = {
   label: string,
   categoryId?: number | string,
   disabled?: boolean,
+  children?: ({
+    isSelected: boolean,
+    isDisabled: boolean,
+    isHighlighted: boolean,
+    item: DropdownItem,
+  }) => React.Node,
 };
 
 export type DropdownCategory = {
   id: number | string,
   label: string,
+  hidden?: boolean,
 };
 
 export type ExtendedCategory = DropdownCategory & {

diff --git a/packages/react-dropdown/src/index.js b/packages/react-dropdown/src/index.js
@@ -143,7 +143,7 @@ const Dropdown = ({
                 </Reference>
                 {isOpen && (
                   <DropdownList
-                    innerRef={ref}
+                    ref={ref}
                     style={style}
                     twoColumn={twoColumn}
                     items={items}

diff --git a/packages/react-dropdown/src/index.test.js b/packages/react-dropdown/src/index.test.js
@@ -521,3 +521,28 @@ it('supports dark theme', () => {
     )
   ).toHaveStyleRule('background-color', 'gray6');
 });
+
+it('Children provided trough items should be present', () => {
+  const wrapper = mount(
+    <Dropdown
+      items={[
+        {
+          id: 131,
+          categoryId: 'c',
+          label: 'Thirteen',
+          children: ({ isHighlighted, isSelected, isDisabled, item }) => (
+            <div data-child="hw" data-itemid={item.id}>
+              Hello world.
+            </div>
+          ),
+        },
+      ]}
+      initialIsOpen={true}
+    >
+      {({ getInputProps }) => <Input {...getInputProps()} />}
+    </Dropdown>
+  );
+  const children = wrapper.find('div[data-child="hw"]');
+  expect(children.prop('data-itemid')).toBe(131);
+  expect(children.length).toBe(1);
+});