@activecollab/components/dist/esm/presentation/whiteboard/fileElement.d.ts

ActiveCollab Components

import React, { ReactElement } from "react";
import { CardResizeHandlers } from "./linkElement";
/**
 * The file card is the second element built on `StackedCard`, and it mirrors the
 * card in a project's Files tab (`Folders/GridView/Items/File.js`): a thumbnail
 * over a strip with the name, then size · date.
 *
 * Its lifecycle is the app's real upload lifecycle, which is two phases and not
 * one — the distinction the ring alone doesn't tell you:
 *
 *   uploading   XHR progress 0–100. `ProgressRing radius={22} stroke={4}` with
 *               the percentage, exactly as `Items/FileUpload.js` does it.
 *   preparing   bytes are in, the server is generating the thumbnail. Progress
 *               is no longer knowable, so the ring gives way to the
 *               indeterminate `SpinnerLoader` at the same size — again as the
 *               real card does at `progress === 100`.
 *   ready       the thumbnail exists; the card renders it.
 *   error       the upload failed: retry, same as the app's `ArrowRefreshIcon`.
 *
 * Both phases reserve the same box as the finished cover, so a card never
 * reflows as it climbs — the discipline the unfurl ladder established.
 */
export declare const FILE_DEFAULT_WIDTH = 208;
export declare const MAX_UPLOAD_BYTES: number;
export declare const UPLOAD_TICK_MS = 110;
export declare const UPLOAD_STEP = 9;
export declare const PREPARING_MS = 1100;
/** What the mock keeps about a picked file. */
export interface PickedFile {
    /** Name without the extension — truncates on its own. */
    base: string;
    /** Extension without the dot; never truncated, as in the real card. */
    extension: string;
    size: number;
    mimeType: string;
    /** An object URL, so an image really renders. Null for everything else. */
    thumbnailUrl: string | null;
}
/** A file element on the board. Position lives in the shared positions map. */
export interface FileElementDef {
    id: string;
    width: number;
    /** null while the card is an empty placeholder waiting for a file. */
    file: PickedFile | null;
}
export declare const FILE_SIZE_UNITS: [string, number][];
export declare const formatFileSize: (value: number) => string;
export declare const describeFile: (file: File) => PickedFile;
export declare const revokeThumbnail: (file: PickedFile | null) => void;
/** The first actual file on a clipboard or a drop, or null if there is none. */
export declare const binaryFrom: (data: DataTransfer | null) => File | null;
export type UploadStatus = "uploading" | "preparing" | "ready" | "error";
export interface UploadController {
    status: UploadStatus;
    /** 0–100, as the app's XHR reports it. Only meaningful while uploading. */
    progress: number;
    retry: () => void;
}
/**
 * Drives one file through the upload lifecycle. Stands in for
 * `useFileHandler` + the XHR in `utils/upload.jsx`: ticks progress to 100,
 * hands over to the thumbnail phase, then resolves.
 */
export declare const useMockUpload: (file: PickedFile | null) => UploadController;
export declare const StyledFileCard: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../..").IStackedCardProps & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
export declare const StyledUploadCover: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledFileFallback: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledFileName: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledDropOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledHiddenFileInput: import("styled-components").StyledComponent<"input", any, {}, never>;
export declare const StyledPlaceholderBox: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const FilePlaceholder: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => ReactElement;
export interface FileToolbarProps {
    status: UploadStatus | "placeholder";
    onPick?: () => void;
    onCancel?: () => void;
    onRetry?: () => void;
    onDelete: () => void;
}
export declare const FileFormattingToolbar: ({ status, onPick, onCancel, onRetry, onDelete, }: FileToolbarProps) => ReactElement;
export interface FileUploadCardProps {
    element: FileElementDef;
    selected: boolean;
    resize: CardResizeHandlers;
    onCancel: () => void;
    onDelete: () => void;
}
/**
 * A file element with a file attached: the card runs the upload lifecycle and
 * then renders the finished preview.
 */
export declare const FileUploadCard: ({ element, selected, resize, onCancel, onDelete, }: FileUploadCardProps) => ReactElement;
export declare const renderFileThumbnail: (file: PickedFile | null) => ReactElement;
export interface FileElementProps {
    element: FileElementDef;
    selected: boolean;
    /** Open the file picker as soon as a freshly drawn placeholder lands. */
    autoOpen: boolean;
    onPickFile: (file: File) => void;
    resize: CardResizeHandlers;
    onCancel: () => void;
    onDelete: () => void;
}
/**
 * The two shapes of a file element: an empty placeholder that can be clicked or
 * dropped onto, and the uploading/ready card.
 *
 * A box drawn with the File tool opens the picker immediately. Dismissing the
 * picker fires no change, so the card simply stays a placeholder — which is what
 * makes Esc a no-op by construction rather than by handling.
 */
export declare const FileElement: ({ element, selected, autoOpen, onPickFile, resize, onCancel, onDelete, }: FileElementProps) => ReactElement;
//# sourceMappingURL=fileElement.d.ts.map