@cerberus-design/react/dist/components/file-upload/file-status.d.ts

The Cerberus Design React component library.

import { HTMLAttributes, MouseEvent } from 'react';
import { FileStatusVariantProps } from 'styled-system/recipes';
import { ProgressBarProps } from '../progress/index';
/**
 * This module contains the FileStatus component.
 * @module
 */
/**
 * The available values of the fileStatus helper Object.
 * @example
 * ```tsx
 * import { fileStatus } from '@cerberus/react'
 * processStatus.TODO // 'todo'
 * ```
 */
export type FileStatusKey = (typeof processStatus)[keyof typeof processStatus];
/**
 * The actions that can be performed on a file.
 */
export type FileStatusActions = 'cancel' | 'retry' | 'delete';
export interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
    /**
     * A unique identifier for the file status. Required for accessibility.
     */
    id: string;
    /**
     * The name of the file.
     */
    file: string;
    /**
     * The percentage of the file that has been processed.
     */
    now: ProgressBarProps['now'];
    /**
     * The status of the file.
     */
    status: processStatus;
    /**
     * The action to perform on the file when a user clicks the
     * button located at the end of the status card.
     * @param status - The status of the file.
     * @param e - The event object.
     * @example
     * ```tsx
     * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
     * ```
     * @default () => {}
     */
    onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void;
}
export type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps;
/**
 * A helper object to represent the status of a file.
 * @example
 * ```tsx
 * import { fileStatus } from '@cerberus/react'
 * processStatus.TODO // 'todo'
 * ```
 */
export declare const enum processStatus {
    TODO = "todo",
    PROCESSING = "processing",
    DONE = "done",
    ERROR = "error"
}
/**
 * A component that displays the status of a file during file processing.
 * @see https://cerberus.digitalu.design/react/file-uploader
 * @example
 * ```tsx
 * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
 * ```
 */
export declare function FileStatus(props: FileStatusProps): import("react/jsx-runtime").JSX.Element;