mirror of
https://github.com/langgenius/dify.git
synced 2026-04-15 18:06:36 +08:00
90240cb6db
- Replaced direct length checks on subscriptions with a computed subscriptionCount variable for improved readability and performance. - Updated the CreateSubscriptionButton to conditionally render based on the new subscriptionCount variable, enhancing clarity in the component logic. - Adjusted className logic for the button to account for multiple supported methods, ensuring better user experience.
63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Tooltip from '@/app/components/base/tooltip'
|
|
import cn from '@/utils/classnames'
|
|
import { CreateButtonType, CreateSubscriptionButton } from './create'
|
|
import SubscriptionCard from './subscription-card'
|
|
import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
|
|
|
|
type SubscriptionListViewProps = {
|
|
subscriptions?: TriggerSubscription[]
|
|
isLoading: boolean
|
|
showTopBorder?: boolean
|
|
}
|
|
|
|
export const SubscriptionListView: React.FC<SubscriptionListViewProps> = ({
|
|
subscriptions,
|
|
isLoading,
|
|
showTopBorder = false,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className={cn('border-divider-subtle px-4 py-2', showTopBorder && 'border-t')}>
|
|
<div className='flex items-center justify-center py-8'>
|
|
<div className='text-text-tertiary'>{t('common.dataLoading')}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
const subscriptionCount = subscriptions?.length || 0
|
|
|
|
return (
|
|
<div className={cn('border-divider-subtle px-4 py-2', showTopBorder && 'border-t')}>
|
|
<div className='relative mb-3 flex items-center justify-between'>
|
|
{subscriptionCount > 0 && (
|
|
<div className='flex shrink-0 items-center gap-1'>
|
|
<span className='system-sm-semibold-uppercase text-text-secondary'>
|
|
{t('pluginTrigger.subscription.listNum', { num: subscriptionCount })}
|
|
</span>
|
|
<Tooltip popupContent={t('pluginTrigger.subscription.list.tip')} />
|
|
</div>
|
|
)}
|
|
<CreateSubscriptionButton
|
|
buttonType={subscriptionCount > 0 ? CreateButtonType.ICON_BUTTON : CreateButtonType.FULL_BUTTON}
|
|
/>
|
|
</div>
|
|
|
|
{subscriptionCount > 0 && (
|
|
<div className='flex flex-col gap-1'>
|
|
{subscriptions?.map(subscription => (
|
|
<SubscriptionCard
|
|
key={subscription.id}
|
|
data={subscription}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|