Implementation:Infiniflow Ragflow BulkOperateBar Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, UI_Components
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete toolbar component for bulk operations with delete confirmation and action buttons provided by the RAGFlow frontend.

Description

The BulkOperateBar component renders a toolbar showing the count of selected items and a list of action buttons. It includes built-in delete confirmation dialog integration and supports custom operation items with icons.

Usage

Import this component for table or list views that support multi-select operations such as bulk delete, move, or download.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/bulk-operate-bar.tsx
• Lines: 1-80

Signature

export type BulkOperateItemType = {
  id: string;
  label: string;
  icon: ReactNode;
  onClick: () => void;
};

export function BulkOperateBar({ list, count, className }: {
  list: BulkOperateItemType[];
  count: number;
  className?: string;
}): JSX.Element;

Import

import { BulkOperateBar, BulkOperateItemType } from '@/components/bulk-operate-bar';

I/O Contract

Inputs

Name	Type	Required	Description
list	BulkOperateItemType[]	Yes	Array of bulk operation definitions
count	number	Yes	Number of selected items
className	string	No	CSS class override

Outputs

Name	Type	Description
onClick callbacks	void	Triggered when action button clicked

Usage Examples

import { BulkOperateBar } from '@/components/bulk-operate-bar';

const operations = [
  { id: 'delete', label: 'Delete', icon: <TrashIcon />, onClick: handleDelete },
  { id: 'move', label: 'Move', icon: <MoveIcon />, onClick: handleMove },
];

<BulkOperateBar list={operations} count={selectedIds.length} />

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment