datasource page

This commit is contained in:
zxhlyh
2025-06-27 15:01:33 +08:00
parent 18b1a9cb2e
commit 8f2ad89027
6 changed files with 180 additions and 9 deletions

View File

@ -1,5 +1,6 @@
import type { FC } from 'react'
import { useState } from 'react'
import cn from '@/utils/classnames'
import {
RiMoreFill,
} from '@remixicon/react'
@ -8,6 +9,8 @@ import {
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import ActionButton from '@/app/components/base/action-button'
import type { ActionButtonProps } from '@/app/components/base/action-button'
export type Item = {
value: string | number
@ -18,14 +21,20 @@ type DropdownProps = {
secondItems?: Item[]
onSelect: (item: Item) => void
renderTrigger?: (open: boolean) => React.ReactNode
triggerProps?: ActionButtonProps
popupClassName?: string
itemClassName?: string
secondItemClassName?: string
}
const Dropdown: FC<DropdownProps> = ({
items,
onSelect,
secondItems,
renderTrigger,
triggerProps,
popupClassName,
itemClassName,
secondItemClassName,
}) => {
const [open, setOpen] = useState(false)
@ -45,14 +54,15 @@ const Dropdown: FC<DropdownProps> = ({
renderTrigger
? renderTrigger(open)
: (
<div
className={`
flex h-6 w-6 cursor-pointer items-center justify-center rounded-md
${open && 'bg-divider-regular'}
`}
<ActionButton
{...triggerProps}
className={cn(
open && 'bg-divider-regular',
triggerProps?.className,
)}
>
<RiMoreFill className='h-4 w-4 text-text-tertiary' />
</div>
</ActionButton>
)
}
</PortalToFollowElemTrigger>
@ -65,7 +75,10 @@ const Dropdown: FC<DropdownProps> = ({
items.map(item => (
<div
key={item.value}
className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover'
className={cn(
'flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover',
itemClassName,
)}
onClick={() => handleSelect(item)}
>
{item.text}
@ -87,7 +100,10 @@ const Dropdown: FC<DropdownProps> = ({
secondItems.map(item => (
<div
key={item.value}
className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover'
className={cn(
'flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover',
secondItemClassName,
)}
onClick={() => handleSelect(item)}
>
{item.text}