dify/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx

import { Button } from '@langgenius/dify-ui/button'
import { Checkbox } from '@langgenius/dify-ui/checkbox'
import { RiArrowRightLine } from '@remixicon/react'
import * as React from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import Link from '@/next/link'
import { useParams } from '@/next/navigation'

type ActionsProps = {
  disabled?: boolean
  handleNextStep: () => void
  showSelect?: boolean
  totalOptions?: number
  selectedOptions?: number
  onSelectAll?: (checked: boolean) => void
  tip?: string
}

const Actions = ({
  disabled,
  handleNextStep,
  showSelect = false,
  totalOptions,
  selectedOptions,
  onSelectAll,
  tip = '',
}: ActionsProps) => {
  const { t } = useTranslation()
  const { datasetId } = useParams()

  const indeterminate = useMemo(() => {
    if (!showSelect) return false
    if (selectedOptions === undefined || totalOptions === undefined) return false
    return selectedOptions > 0 && selectedOptions < totalOptions
  }, [showSelect, selectedOptions, totalOptions])

  const checked = useMemo(() => {
    if (!showSelect) return false
    if (selectedOptions === undefined || totalOptions === undefined) return false
    return selectedOptions > 0 && selectedOptions === totalOptions
  }, [showSelect, selectedOptions, totalOptions])

  return (
    <div className="flex items-center gap-x-2 overflow-hidden">
      {showSelect && (
        <>
          <label className="flex shrink-0 cursor-pointer items-center gap-x-2 py-[3px] pr-2 pl-4">
            <Checkbox
              onCheckedChange={(checked) => onSelectAll?.(checked)}
              indeterminate={indeterminate}
              checked={checked}
            />
            <span className="system-sm-medium text-text-accent">
              {t(($) => $['operation.selectAll'], { ns: 'common' })}
            </span>
          </label>
          {tip && (
            <div title={tip} className="max-w-full truncate system-xs-regular text-text-tertiary">
              {tip}
            </div>
          )}
        </>
      )}
      <div className="flex grow items-center justify-end gap-x-2">
        <Link href={`/datasets/${datasetId}/documents`} replace>
          <Button variant="ghost" className="px-3 py-2">
            {t(($) => $['operation.cancel'], { ns: 'common' })}
          </Button>
        </Link>
        <Button
          disabled={disabled}
          variant="primary"
          onClick={handleNextStep}
          className="gap-x-0.5"
        >
          <span className="px-0.5">{t(($) => $['stepOne.button'], { ns: 'datasetCreation' })}</span>
          <RiArrowRightLine className="size-4" />
        </Button>
      </div>
    </div>
  )
}

export default React.memo(Actions)