bulk-operate-bar.tsx

Overview

bulk-operate-bar.tsx defines a React functional component called BulkOperateBar that renders a user interface element for performing bulk operations on a selected list of items (typically files). It displays the count of selected items, a visual icon, and a set of actionable buttons corresponding to different bulk operations (e.g., delete, move, copy). The component visually distinguishes destructive actions like "delete" by highlighting them and wraps these actions with a confirmation dialog to prevent accidental triggers.

This component is intended for use in applications where users select multiple items and then apply one or more bulk operations to them in a streamlined, visually clear manner.

Detailed Explanation

Types

BulkOperateItemType

A type that defines the shape of each bulk operation item.

Props

BulkOperateBarProps

Component: BulkOperateBar

function BulkOperateBar({
  list,
  count,
  className,
}: BulkOperateBarProps): JSX.Element

Purpose

Renders a card UI showing the number of selected files and a list of bulk operation buttons. It visually distinguishes the "delete" action by coloring it with an error state and wrapping it in a confirmation dialog.

Parameters

• list: The bulk operation items to display.

• count: The number of currently selected files.

• className: Optional CSS classes to customize styling.

Behavior

• Displays the count of selected files.

• Displays an icon (BrushCleaning) next to the count.

• For each item in list, renders a button with the provided icon and label.

• If the item's id is "delete", the button is styled with an error color and wrapped inside a ConfirmDeleteDialog component.

• Clicking a non-delete button immediately triggers its onClick handler.

• Clicking the delete button triggers the confirmation dialog; only after confirming will the onClick handler be called.

Usage Example

import { BulkOperateBar, BulkOperateItemType } from './bulk-operate-bar';
import { Trash2, Edit3 } from 'lucide-react';

const operations: BulkOperateItemType[] = [
  {
    id: 'delete',
    label: 'Delete',
    icon: <Trash2 />,
    onClick: () => console.log('Delete confirmed'),
  },
  {
    id: 'rename',
    label: 'Rename',
    icon: <Edit3 />,
    onClick: () => console.log('Rename clicked'),
  },
];

function Example() {
  return <BulkOperateBar list={operations} count={3} />;
}

Implementation Details

• The component uses utility function cn (likely a classnames helper) to conditionally apply CSS classes.

• The isDeleteItem function is memoized with useCallback to efficiently check whether an item is the delete operation by comparing its id.

• The component uses UI primitives (Card, CardContent, Button, Separator) imported from local UI libraries, ensuring consistent styling.

• The ConfirmDeleteDialog wraps the delete action button to provide a modal confirmation step.

• The delete button's onClick is overridden with a no-op to prevent immediate execution, forcing the user to confirm first.

• Other buttons trigger their onClick handlers immediately on click.

Interaction with Other System Parts

• UI Components: Depends on custom UI components (Button, Card, CardContent, Separator) which are shared across the app for consistent design.

• ConfirmDeleteDialog: Integrates with this dialog component to handle confirmation of destructive actions.

• Icons: Uses lucide-react icons for consistent iconography.

• Utility: The cn utility is used for class name composition.

• Usage Context: This component is typically used in file management or list interfaces where multiple items can be selected and bulk operations applied.

Mermaid Diagram: Component Structure and Workflow

componentDiagram
    BulkOperateBar <|-- ConfirmDeleteDialog
    BulkOperateBar --> Button
    BulkOperateBar --> Card
    BulkOperateBar --> CardContent
    BulkOperateBar --> Separator
    BulkOperateBar --> BrushCleaningIcon

    BulkOperateBar : +list: BulkOperateItemType[]
    BulkOperateBar : +count: number
    BulkOperateBar : +className?: string
    BulkOperateBar : +isDeleteItem(id: string): boolean
    BulkOperateBar : +render()

    ConfirmDeleteDialog : +hidden: boolean
    ConfirmDeleteDialog : +onOk: () => void

    Button : +variant: string
    Button : +onClick: () => void

Summary

The BulkOperateBar component presents a user-friendly interface for applying operations to multiple selected items with visual clarity and safety measures (confirmation dialogs for deletes). It is modular, reusable, and integrates seamlessly with the app's design system and confirmation dialog pattern. Its clear API and separation of concerns make it easy to extend with additional bulk operations as needed.