Share Dialog
File sharing with permissions and link configuration
SaaSFile Management
Overview
ShareDialog provides a tabbed sharing interface for files. The "Share Links" tab lets users create and revoke shareable URLs with configurable access modes and expiration. The "People" tab manages user-level permissions with grant, update, and revoke controls. The PermissionsPanel sub-component displays the list of users with access.
Usage
import { ShareDialog } from "@leanicon/web-builder-library/saas";
<ShareDialog
open={open}
onOpenChange={setOpen}
file={{
id: "file-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]" },
}}
shareLinks={[]}
permissions={[]}
onCreateShareLink={async (config) => console.log("Create:", config)}
onRevokeShareLink={async (id) => console.log("Revoke:", id)}
onGrantPermission={async (config) => console.log("Grant:", config)}
onUpdatePermission={async (id, level) => console.log("Update:", id, level)}
onRevokePermission={async (id) => console.log("Revoke:", id)}
onSearchUsers={async (query) => []}
/>;Variants
Permissions Panel - Default
Live preview unavailable — the code sample is below.
Note: ShareDialog renders as a modal overlay. The variants below show its sub-components inline.
Permissions Panel - With Users
Who has access
JD
John Doe
JS
Jane Smith
Permissions Panel (Dark)
Who has access
JD
John Doe
BW
Bob Wilson
Empty Permissions
No one has been granted access yet.