Trash View

Trash management with empty dialog

SaaSFile Management

Overview

TrashView displays trashed files and folders with their original path, deletion countdown, and the user who trashed them. Supports bulk restore and permanent delete, empty trash action, row selection, pagination, loading skeleton, and error state.

Usage

import { TrashView } from "@leanicon/web-builder-library/saas";

<TrashView
  items={[
    {
      type: "file",
      item: {
        id: "1",
        name: "report.pdf",
        mimeType: "application/pdf",
        size: 2500000,
        status: "approved",
        folderId: null,
        createdAt: "2024-01-15T10:00:00Z",
        updatedAt: "2024-01-15T10:00:00Z",
        createdBy: { id: "user-1", name: "John Doe", email: "[email protected]" },
      },
      trashedAt: "2024-01-20T14:30:00Z",
      trashedBy: { id: "user-1", name: "John Doe", email: "[email protected]" },
      originalPath: "/Documents/Reports/",
      daysUntilDeletion: 25,
    },
  ]}
  onRestore={async (ids) => console.log("Restore:", ids)}
  onDelete={async (ids) => console.log("Delete:", ids)}
  onEmptyTrash={async () => console.log("Empty trash")}
/>;

Variants

Default

NameDeletedSize
quarterly-report.pdf/Documents/Reports/
Jan 20, 2024Deletes in 25 days
2.38 MB
presentation.pptx/Documents/Presentations/
Jan 19, 2024Deletes in 24 days
4.96 MB

Default (Dark)

NameDeletedSize
quarterly-report.pdf/Documents/Reports/
Jan 20, 2024Deletes in 25 days
2.38 MB

Empty

Trash is empty

Deleted files and folders will appear here

Loading

With Error

Failed to load trash items. Please try again.

With Pagination

NameDeletedSize
quarterly-report.pdf/Documents/Reports/
Jan 20, 2024Deletes in 25 days
2.38 MB