@ -1,8 +1,12 @@
import React , { type FC } from 'react'
import React , { type FC } from 'react'
import { RiArchive2Line , RiCheckboxCircleLine , RiCloseCircleLine , RiDeleteBinLine } from '@remixicon/react'
import { RiArchive2Line , RiCheckboxCircleLine , RiCloseCircleLine , RiDeleteBinLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import Divider from '@/app/components/base/divider'
import Divider from '@/app/components/base/divider'
import classNames from '@/utils/classnames'
import classNames from '@/utils/classnames'
import Confirm from '@/app/components/base/confirm'
const i18nPrefix = 'dataset.batchAction'
type IBatchActionProps = {
type IBatchActionProps = {
className? : string
className? : string
selectedIds : string [ ]
selectedIds : string [ ]
@ -22,6 +26,11 @@ const BatchAction: FC<IBatchActionProps> = ({
onBatchDelete ,
onBatchDelete ,
onCancel ,
onCancel ,
} ) = > {
} ) = > {
const { t } = useTranslation ( )
const [ isShowDeleteConfirm , {
setTrue : showDeleteConfirm ,
setFalse : hideDeleteConfirm ,
} ] = useBoolean ( false )
return (
return (
< div className = { classNames ( 'w-full flex justify-center gap-x-2' , className ) } >
< div className = { classNames ( 'w-full flex justify-center gap-x-2' , className ) } >
< div className = 'flex items-center gap-x-1 p-1 rounded-[10px] bg-components-actionbar-bg-accent border border-components-actionbar-border-accent shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]' >
< div className = 'flex items-center gap-x-1 p-1 rounded-[10px] bg-components-actionbar-bg-accent border border-components-actionbar-border-accent shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]' >
@ -29,41 +38,53 @@ const BatchAction: FC<IBatchActionProps> = ({
< span className = 'w-5 h-5 flex items-center justify-center px-1 py-0.5 bg-text-accent rounded-md text-text-primary-on-surface text-xs font-medium' >
< span className = 'w-5 h-5 flex items-center justify-center px-1 py-0.5 bg-text-accent rounded-md text-text-primary-on-surface text-xs font-medium' >
{ selectedIds . length }
{ selectedIds . length }
< / span >
< / span >
< span className = 'text-text-accent text-[13px] font-semibold leading-[16px]' > Selected < / span >
< span className = 'text-text-accent text-[13px] font-semibold leading-[16px]' > { t ( ` ${ i18nPrefix } .selected ` ) } < / span >
< / div >
< / div >
< Divider type = 'vertical' className = 'mx-0.5 h-3.5 bg-divider-regular' / >
< Divider type = 'vertical' className = 'mx-0.5 h-3.5 bg-divider-regular' / >
< div className = 'flex items-center gap-x-0.5 px-3 py-2' >
< div className = 'flex items-center gap-x-0.5 px-3 py-2' >
< RiCheckboxCircleLine className = 'w-4 h-4 text-components-button-ghost-text' / >
< RiCheckboxCircleLine className = 'w-4 h-4 text-components-button-ghost-text' / >
< button className = 'px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick = { onBatchEnable } >
< button className = 'px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick = { onBatchEnable } >
Enable
{ t ( ` ${ i18nPrefix } .enable ` ) }
< / button >
< / button >
< / div >
< / div >
< div className = 'flex items-center gap-x-0.5 px-3 py-2' >
< div className = 'flex items-center gap-x-0.5 px-3 py-2' >
< RiCloseCircleLine className = 'w-4 h-4 text-components-button-ghost-text' / >
< RiCloseCircleLine className = 'w-4 h-4 text-components-button-ghost-text' / >
< button className = 'px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick = { onBatchDisable } >
< button className = 'px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick = { onBatchDisable } >
Disable
{ t ( ` ${ i18nPrefix } .disable ` ) }
< / button >
< / button >
< / div >
< / div >
{ onArchive && (
{ onArchive && (
< div className = 'flex items-center gap-x-0.5 px-3 py-2' >
< div className = 'flex items-center gap-x-0.5 px-3 py-2' >
< RiArchive2Line className = 'w-4 h-4 text-components-button-ghost-text' / >
< RiArchive2Line className = 'w-4 h-4 text-components-button-ghost-text' / >
< button className = 'px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick = { onBatchDisable } >
< button className = 'px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick = { onBatchDisable } >
Archive
{ t ( ` ${ i18nPrefix } .archive ` ) }
< / button >
< / button >
< / div >
< / div >
) }
) }
< div className = 'flex items-center gap-x-0.5 px-3 py-2' >
< div className = 'flex items-center gap-x-0.5 px-3 py-2' >
< RiDeleteBinLine className = 'w-4 h-4 text-components-button-destructive-ghost-text' / >
< RiDeleteBinLine className = 'w-4 h-4 text-components-button-destructive-ghost-text' / >
< button className = 'px-0.5 text-components-button-destructive-ghost-text text-[13px] font-medium leading-[16px]' onClick = { onBatchDelete } >
< button className = 'px-0.5 text-components-button-destructive-ghost-text text-[13px] font-medium leading-[16px]' onClick = { showDeleteConfirm } >
Delete
{ t ( ` ${ i18nPrefix } .delete ` ) }
< / button >
< / button >
< / div >
< / div >
< Divider type = 'vertical' className = 'mx-0.5 h-3.5 bg-divider-regular' / >
< Divider type = 'vertical' className = 'mx-0.5 h-3.5 bg-divider-regular' / >
< button className = 'px-3.5 py-2 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick = { onCancel } >
< button className = 'px-3.5 py-2 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick = { onCancel } >
Cancel
{ t ( ` ${ i18nPrefix } .cancel ` ) }
< / button >
< / button >
< / div >
< / div >
{
isShowDeleteConfirm && (
< Confirm
isShow
title = { t ( 'datasetDocuments.list.delete.title' ) }
content = { t ( 'datasetDocuments.list.delete.content' ) }
confirmText = { t ( 'common.operation.sure' ) }
onConfirm = { onBatchDelete }
onCancel = { hideDeleteConfirm }
/ >
)
}
< / div >
< / div >
)
)
}
}