From 638bfdbc25ac0b8f37554660c9bfe5484de8403e Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Fri, 22 Dec 2023 21:16:13 -0800
Subject: [PATCH] Added renderEmpty function for Dropdown.

---
 package.json                             |  2 +-
 src/components/input/Dropdown.module.css |  6 ++----
 src/components/input/Dropdown.tsx        | 13 ++++++++-----
 src/stories/Dropdown.stories.tsx         | 16 +++++++++++-----
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index ed661a8..1ec9752 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-basics",
-  "version": "0.115.0",
+  "version": "0.116.0",
   "description": "Everyday components for React",
   "license": "MIT",
   "repository": {
diff --git a/src/components/input/Dropdown.module.css b/src/components/input/Dropdown.module.css
index 0aecf65..6b9ffa0 100644
--- a/src/components/input/Dropdown.module.css
+++ b/src/components/input/Dropdown.module.css
@@ -1,7 +1,3 @@
-.menu {
-  border-top: 1px solid var(--border-color);
-}
-
 .field {
   cursor: pointer;
 }
@@ -29,6 +25,8 @@
 
 .search {
   border: 0;
+  border-radius: 0;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .loading {
diff --git a/src/components/input/Dropdown.tsx b/src/components/input/Dropdown.tsx
index ac6b21f..543d033 100644
--- a/src/components/input/Dropdown.tsx
+++ b/src/components/input/Dropdown.tsx
@@ -16,6 +16,7 @@ export interface DropdownProps extends CommonProps {
   name?: string;
   value?: string;
   renderValue?: (value: string) => ReactNode;
+  renderEmpty?: (search: string) => ReactNode;
   menuProps?: MenuProps;
   searchProps?: SearchFieldProps;
   position?: 'top' | 'bottom' | 'left' | 'right';
@@ -23,7 +24,7 @@ export interface DropdownProps extends CommonProps {
   allowSearch?: boolean;
   isLoading?: boolean;
   placeholder?: string;
-  onChange?: (key: Key, e: MouseEvent) => void;
+  onSelect?: (key: Key, e: MouseEvent) => void;
   onSearch?: (value: string) => void;
 }
 
@@ -33,6 +34,7 @@ function Dropdown(props: DropdownProps, ref: Ref<HTMLInputElement>) {
     name,
     value = '',
     renderValue,
+    renderEmpty,
     menuProps = {},
     searchProps = {},
     position = 'bottom',
@@ -40,7 +42,7 @@ function Dropdown(props: DropdownProps, ref: Ref<HTMLInputElement>) {
     allowSearch = false,
     isLoading,
     placeholder,
-    onChange,
+    onSelect,
     onSearch,
     className,
     children,
@@ -50,7 +52,7 @@ function Dropdown(props: DropdownProps, ref: Ref<HTMLInputElement>) {
 
   const handleSelect = (close: () => void, key: Key, e: MouseEvent) => {
     e.stopPropagation();
-    onChange?.(key, e);
+    onSelect?.(key, e);
     close();
   };
 
@@ -86,16 +88,17 @@ function Dropdown(props: DropdownProps, ref: Ref<HTMLInputElement>) {
               )}
               {isLoading ? (
                 <Loading className={styles.loading} icon="dots" position="center" />
-              ) : (
+              ) : items?.length ? (
                 <Menu
                   {...menuProps}
-                  className={classNames(styles.menu, menuProps?.className)}
                   items={items}
                   selectedKey={value}
                   onSelect={handleSelect.bind(null, close)}
                 >
                   {children}
                 </Menu>
+              ) : (
+                renderEmpty?.(search)
               )}
             </div>
           );
diff --git a/src/stories/Dropdown.stories.tsx b/src/stories/Dropdown.stories.tsx
index a46e6b7..ee2c1ff 100644
--- a/src/stories/Dropdown.stories.tsx
+++ b/src/stories/Dropdown.stories.tsx
@@ -15,13 +15,14 @@ export default {
 } as Meta<typeof Dropdown>;
 
 const Template: StoryFn<typeof Dropdown> = args => {
-  const [value, setValue] = useState<any>(args.value);
+  const { value, items } = args;
+  const [selected, setSelected] = useState<any>(value);
   const [search, setSearch] = useState('');
 
-  const renderValue = v => items.find(e => e.value === v)?.label;
+  const renderValue = v => items?.find(e => e.value === v)?.label;
 
   const filteredItems = search
-    ? items.filter(({ label }) => label.toLowerCase().includes(search.toLowerCase()))
+    ? items?.filter(({ label }) => label.toLowerCase().includes(search.toLowerCase()))
     : items;
 
   return (
@@ -31,9 +32,10 @@ const Template: StoryFn<typeof Dropdown> = args => {
         items={filteredItems}
         renderValue={renderValue}
         name="dropdown"
-        value={value}
-        onChange={setValue}
+        value={selected}
+        onSelect={setSelected}
         onSearch={setSearch}
+        renderEmpty={() => <div style={{ textAlign: 'center', padding: 20 }}>No results.</div>}
       />
     </div>
   );
@@ -41,12 +43,14 @@ const Template: StoryFn<typeof Dropdown> = args => {
 
 export const Basic = makeStory(Template, {
   args: {
+    items,
     children: ({ value, label }) => <Item key={value}>{label}</Item>,
   },
 });
 
 export const Preselect = makeStory(Template, {
   args: {
+    items,
     value: 'two',
     children: ({ value, label }) => <Item key={value}>{label}</Item>,
   },
@@ -54,6 +58,7 @@ export const Preselect = makeStory(Template, {
 
 export const WithSearch = makeStory(Template, {
   args: {
+    items,
     allowSearch: true,
     children: ({ value, label }) => <Item key={value}>{label}</Item>,
   },
@@ -61,6 +66,7 @@ export const WithSearch = makeStory(Template, {
 
 export const IsLoading = makeStory(Template, {
   args: {
+    items,
     isLoading: true,
     allowSearch: true,
     children: ({ value, label }) => <Item key={value}>{label}</Item>,