mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 09:58:04 +08:00
datasource page
This commit is contained in:
@ -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}
|
||||
|
||||
Reference in New Issue
Block a user