From 790e418eecef31ab51149ff4ce10cbe642f45a9d Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Fri, 14 Apr 2023 12:17:10 +0800
Subject: [PATCH] chore: update select kit component

---
 src/components/ConnectionSidebar.tsx |  2 +-
 src/components/ThemeSelector.tsx     |  2 +-
 src/components/kit/Select.tsx        | 46 +++++++++-------------------
 3 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/src/components/ConnectionSidebar.tsx b/src/components/ConnectionSidebar.tsx
index 24988e9..4fad024 100644
--- a/src/components/ConnectionSidebar.tsx
+++ b/src/components/ConnectionSidebar.tsx
@@ -228,7 +228,7 @@ const ConnectionSidebar = () => {
               {databaseList.length > 0 && (
                 <div className="w-full sticky top-0 z-1 my-4">
                   <Select
-                    className="w-full px-4 py-3"
+                    className="w-full px-4 py-3 text-base"
                     value={currentConnectionCtx?.database?.name}
                     itemList={databaseList.map((database) => {
                       return {
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index 7b42e75..86e0782 100644
--- a/src/components/ThemeSelector.tsx
+++ b/src/components/ThemeSelector.tsx
@@ -32,7 +32,7 @@ const ThemeSelector = () => {
     settingStore.setTheme(theme);
   };
 
-  return <Select className="w-40" value={theme} itemList={themeItemList} onValueChange={handleThemeChange} />;
+  return <Select className="w-auto min-w-[120px]" value={theme} itemList={themeItemList} onValueChange={handleThemeChange} />;
 };
 
 export default ThemeSelector;
diff --git a/src/components/kit/Select.tsx b/src/components/kit/Select.tsx
index b307025..7098959 100644
--- a/src/components/kit/Select.tsx
+++ b/src/components/kit/Select.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode, forwardRef } from "react";
 import * as SelectUI from "@radix-ui/react-select";
+import React from "react";
 import Icon from "../Icon";
 
 interface Props<T = any> {
@@ -21,7 +21,7 @@ const Select = (props: Props) => {
       <SelectUI.Trigger
         className={`${
           className || ""
-        } flex flex-row justify-between items-center dark:text-gray-300 bg-white dark:bg-zinc-700 border dark:border-zinc-800 px-3 py-2 rounded-lg`}
+        } flex flex-row justify-between items-center text-sm whitespace-nowrap dark:text-gray-300 bg-white dark:bg-zinc-700 border dark:border-zinc-800 px-3 py-2 rounded-lg`}
       >
         <SelectUI.Value placeholder={placeholder} />
         <SelectUI.Icon className="ml-1 w-5 h-auto shrink-0">
@@ -32,7 +32,7 @@ const Select = (props: Props) => {
         <SelectUI.Content
           className="z-[999] mt-1"
           style={{
-            width: "var(--radix-select-trigger-width)",
+            minWidth: "var(--radix-select-trigger-width)",
           }}
           position="popper"
         >
@@ -40,9 +40,18 @@ const Select = (props: Props) => {
             <SelectUI.Group>
               {placeholder && <SelectUI.Label className="w-full px-3 mt-2 mb-1 text-sm text-gray-400">{placeholder}</SelectUI.Label>}
               {itemList.map((item) => (
-                <SelectItem key={item.label} className="whitespace-nowrap" value={item.value}>
-                  {item.label}
-                </SelectItem>
+                <SelectUI.Item
+                  key={item.label}
+                  className={`${
+                    className || ""
+                  } w-full px-3 py-2 whitespace-nowrap truncate text-ellipsis overflow-x-hidden text-sm rounded-lg flex flex-row justify-between items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800`}
+                  value={item.value}
+                >
+                  <SelectUI.ItemText className="truncate">{item.label}</SelectUI.ItemText>
+                  <SelectUI.ItemIndicator className="w-5 h-auto">
+                    <Icon.BiCheck className="w-full h-auto" />
+                  </SelectUI.ItemIndicator>
+                </SelectUI.Item>
               ))}
             </SelectUI.Group>
           </SelectUI.Viewport>
@@ -52,29 +61,4 @@ const Select = (props: Props) => {
   );
 };
 
-interface SelectItemProps {
-  value: string;
-  children: ReactNode;
-  disabled?: boolean;
-  className?: string;
-}
-
-const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(({ children, className, ...props }, forwardedRef) => {
-  return (
-    <SelectUI.Item
-      className={`${
-        className || ""
-      } w-full px-3 py-2 rounded-lg flex flex-row justify-between items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800`}
-      {...props}
-      ref={forwardedRef}
-    >
-      <SelectUI.ItemText>{children}</SelectUI.ItemText>
-      <SelectUI.ItemIndicator className="w-5 h-auto">
-        <Icon.BiCheck className="w-full h-auto" />
-      </SelectUI.ItemIndicator>
-    </SelectUI.Item>
-  );
-});
-SelectItem.displayName = "SelectItem";
-
 export default Select;