opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-25 17:15:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update select kit component

Browse Source
This commit is contained in:
steven
2023-04-14 12:17:10 +08:00
parent a0003dc571
commit 790e418eec
3 changed files with 17 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ConnectionSidebar.tsx
View File

@ -228,7 +228,7 @@ const ConnectionSidebar = () => {
{databaseList.length > 0 && ( {databaseList.length > 0 && (
<div className="w-full sticky top-0 z-1 my-4"> <div className="w-full sticky top-0 z-1 my-4">
<Select <Select
className="w-full px-4 py-3" className="w-full px-4 py-3 text-base"
value={currentConnectionCtx?.database?.name} value={currentConnectionCtx?.database?.name}
itemList={databaseList.map((database) => { itemList={databaseList.map((database) => {
return { return {

2
src/components/ThemeSelector.tsx
View File

@ -32,7 +32,7 @@ const ThemeSelector = () => {
settingStore.setTheme(theme); 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; export default ThemeSelector;

46
src/components/kit/Select.tsx
View File

@ -1,5 +1,5 @@
import React, { ReactNode, forwardRef } from "react";
import * as SelectUI from "@radix-ui/react-select"; import * as SelectUI from "@radix-ui/react-select";
import React from "react";
import Icon from "../Icon"; import Icon from "../Icon";
interface Props<T = any> { interface Props<T = any> {
@ -21,7 +21,7 @@ const Select = (props: Props) => {
<SelectUI.Trigger <SelectUI.Trigger
className={`${ className={`${
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.Value placeholder={placeholder} />
<SelectUI.Icon className="ml-1 w-5 h-auto shrink-0"> <SelectUI.Icon className="ml-1 w-5 h-auto shrink-0">
@ -32,7 +32,7 @@ const Select = (props: Props) => {
<SelectUI.Content <SelectUI.Content
className="z-[999] mt-1" className="z-[999] mt-1"
style={{ style={{
width: "var(--radix-select-trigger-width)", minWidth: "var(--radix-select-trigger-width)",
}} }}
position="popper" position="popper"
> >
@ -40,9 +40,18 @@ const Select = (props: Props) => {
<SelectUI.Group> <SelectUI.Group>
{placeholder && <SelectUI.Label className="w-full px-3 mt-2 mb-1 text-sm text-gray-400">{placeholder}</SelectUI.Label>} {placeholder && <SelectUI.Label className="w-full px-3 mt-2 mb-1 text-sm text-gray-400">{placeholder}</SelectUI.Label>}
{itemList.map((item) => ( {itemList.map((item) => (
<SelectItem key={item.label} className="whitespace-nowrap" value={item.value}> <SelectUI.Item
{item.label} key={item.label}
</SelectItem> 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.Group>
</SelectUI.Viewport> </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; export default Select;