tjdify/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx

import React, { type FC } from '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 classNames from '@/utils/classnames'
import Confirm from '@/app/components/base/confirm'

const i18nPrefix = 'dataset.batchAction'
type IBatchActionProps = {
  className?: string
  selectedIds: string[]
  onBatchEnable: () => void
  onBatchDisable: () => void
  onBatchDelete: () => Promise<void>
  onArchive?: () => void
  onCancel: () => void
}

const BatchAction: FC<IBatchActionProps> = ({
  className,
  selectedIds,
  onBatchEnable,
  onBatchDisable,
  onArchive,
  onBatchDelete,
  onCancel,
}) => {
  const { t } = useTranslation()
  const [isShowDeleteConfirm, {
    setTrue: showDeleteConfirm,
    setFalse: hideDeleteConfirm,
  }] = useBoolean(false)
  const [isDeleting, {
    setTrue: setIsDeleting,
  }] = useBoolean(false)

  const handleBatchDelete = async () => {
    setIsDeleting()
    await onBatchDelete()
    hideDeleteConfirm()
  }
  return (
    <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='inline-flex items-center gap-x-2 pl-2 pr-3 py-1'>
          <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}
          </span>
          <span className='text-text-accent text-[13px] font-semibold leading-[16px]'>{t(`${i18nPrefix}.selected`)}</span>
        </div>
        <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'>
          <RiCheckboxCircleLine className='w-4 h-4 text-components-button-ghost-text' />
          <button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchEnable}>
            {t(`${i18nPrefix}.enable`)}
          </button>
        </div>
        <div className='flex items-center gap-x-0.5 px-3 py-2'>
          <RiCloseCircleLine className='w-4 h-4 text-components-button-ghost-text' />
          <button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchDisable}>
            {t(`${i18nPrefix}.disable`)}
          </button>
        </div>
        {onArchive && (
          <div className='flex items-center gap-x-0.5 px-3 py-2'>
            <RiArchive2Line className='w-4 h-4 text-components-button-ghost-text' />
            <button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onArchive}>
              {t(`${i18nPrefix}.archive`)}
            </button>
          </div>
        )}
        <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' />
          <button type='button' className='px-0.5 text-components-button-destructive-ghost-text text-[13px] font-medium leading-[16px]' onClick={showDeleteConfirm}>
            {t(`${i18nPrefix}.delete`)}
          </button>
        </div>

        <Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
        <button type='button' className='px-3.5 py-2 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onCancel}>
          {t(`${i18nPrefix}.cancel`)}
        </button>
      </div>
      {
        isShowDeleteConfirm && (
          <Confirm
            isShow
            title={t('datasetDocuments.list.delete.title')}
            content={t('datasetDocuments.list.delete.content')}
            confirmText={t('common.operation.sure')}
            onConfirm={handleBatchDelete}
            onCancel={hideDeleteConfirm}
            isLoading={isDeleting}
            isDisabled={isDeleting}
          />
        )
      }
    </div>
  )
}

export default React.memo(BatchAction)