mirror of https://github.com/langgenius/dify.git
refactor(subscription): optimize subscription count handling in list view
- 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.
This commit is contained in:
parent
cca48f07aa
commit
90240cb6db
|
|
@ -146,7 +146,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
|
|||
triggerPopupSameWidth: buttonType === CreateButtonType.FULL_BUTTON,
|
||||
}}
|
||||
triggerProps={{
|
||||
className: cn('h-8 bg-transparent px-0 hover:bg-transparent', methodType !== DEFAULT_METHOD && 'pointer-events-none', buttonType === CreateButtonType.FULL_BUTTON && 'grow'),
|
||||
className: cn('h-8 bg-transparent px-0 hover:bg-transparent', methodType !== DEFAULT_METHOD && supportedMethods.length > 1 && 'pointer-events-none', buttonType === CreateButtonType.FULL_BUTTON && 'grow'),
|
||||
}}
|
||||
popupProps={{
|
||||
wrapperClassName: 'z-[1000]',
|
||||
|
|
|
|||
|
|
@ -29,24 +29,25 @@ export const SubscriptionListView: React.FC<SubscriptionListViewProps> = ({
|
|||
</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'>
|
||||
{subscriptions?.length && (
|
||||
{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: subscriptions?.length || 0 })}
|
||||
{t('pluginTrigger.subscription.listNum', { num: subscriptionCount })}
|
||||
</span>
|
||||
<Tooltip popupContent={t('pluginTrigger.subscription.list.tip')} />
|
||||
</div>
|
||||
)}
|
||||
<CreateSubscriptionButton
|
||||
buttonType={subscriptions?.length ? CreateButtonType.ICON_BUTTON : CreateButtonType.FULL_BUTTON}
|
||||
buttonType={subscriptionCount > 0 ? CreateButtonType.ICON_BUTTON : CreateButtonType.FULL_BUTTON}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{subscriptions?.length && (
|
||||
{subscriptionCount > 0 && (
|
||||
<div className='flex flex-col gap-1'>
|
||||
{subscriptions?.map(subscription => (
|
||||
<SubscriptionCard
|
||||
|
|
|
|||
Loading…
Reference in New Issue