Fix: use debounce for switch (#3585)

This commit is contained in:
KVOJJJin 2024-04-18 11:54:54 +08:00 committed by GitHub
parent 80e390b906
commit 8cc1944160
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -2,6 +2,7 @@
'use client' 'use client'
import type { FC, SVGProps } from 'react' import type { FC, SVGProps } from 'react'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { useDebounceFn } from 'ahooks'
import { ArrowDownIcon, TrashIcon } from '@heroicons/react/24/outline' import { ArrowDownIcon, TrashIcon } from '@heroicons/react/24/outline'
import { ExclamationCircleIcon } from '@heroicons/react/24/solid' import { ExclamationCircleIcon } from '@heroicons/react/24/solid'
import dayjs from 'dayjs' import dayjs from 'dayjs'
@ -154,6 +155,14 @@ export const OperationAction: FC<{
onUpdate(operationName) onUpdate(operationName)
} }
const { run: handleSwitch } = useDebounceFn((operationName: OperationName) => {
if (operationName === 'enable' && enabled)
return
if (operationName === 'disable' && !enabled)
return
onOperate(operationName)
}, { wait: 500 })
return <div className='flex items-center' onClick={e => e.stopPropagation()}> return <div className='flex items-center' onClick={e => e.stopPropagation()}>
{isListScene && !embeddingAvailable && ( {isListScene && !embeddingAvailable && (
<Switch defaultValue={false} onChange={() => { }} disabled={true} size='md' /> <Switch defaultValue={false} onChange={() => { }} disabled={true} size='md' />
@ -166,7 +175,7 @@ export const OperationAction: FC<{
<Switch defaultValue={false} onChange={() => { }} disabled={true} size='md' /> <Switch defaultValue={false} onChange={() => { }} disabled={true} size='md' />
</div> </div>
</Tooltip> </Tooltip>
: <Switch defaultValue={enabled} onChange={v => onOperate(v ? 'enable' : 'disable')} size='md' /> : <Switch defaultValue={enabled} onChange={v => handleSwitch(v ? 'enable' : 'disable')} size='md' />
} }
<Divider className='!ml-4 !mr-2 !h-3' type='vertical' /> <Divider className='!ml-4 !mr-2 !h-3' type='vertical' />
</> </>
@ -189,7 +198,7 @@ export const OperationAction: FC<{
<div> <div>
<Switch <Switch
defaultValue={archived ? false : enabled} defaultValue={archived ? false : enabled}
onChange={v => !archived && onOperate(v ? 'enable' : 'disable')} onChange={v => !archived && handleSwitch(v ? 'enable' : 'disable')}
disabled={archived} disabled={archived}
size='md' size='md'
/> />