@tiller-ds/upload/DragZone.d.ts

Upload module of Tiller Design System

import React from "react";
import { FieldProps } from "@tiller-ds/form-elements";
import { ComponentTokens, TokenProps } from "@tiller-ds/theme";
import { UploadyWrapperProps } from "./UploadyWrapper";
import { UseFileUpload, File } from "./useFileUpload";
import { BatchItem } from "@rpldy/shared";
export declare type DragZoneProps<T extends File> = {
    /**
     * Whether will user be able to upload multiple files at once
     */
    allowMultiple?: boolean;
    /**
     * Is the DragZone disabled
     */
    disabled?: boolean;
    /**
     * Object return from {@link useFileUpload} hook, used internally for correct behaviour of the file
     * upload
     */
    hook: UseFileUpload<T>;
    /**
     * Subtitle text in the drag window
     */
    subtitle?: React.ReactNode;
    /**
     * Title text in the drag window
     */
    title: React.ReactNode;
    /**
     * Custom mapper for the backend response, used when a subclass of {@link File} is used to extend uploaded file data
     * @param item file that is uploaded
     * @param originalFileName original file name of the file (in case if the backend does a rename)
     */
    mapUploadResponse?: (item: BatchItem, originalFileName: string) => T;
    /**
     * Custom classes for the container.
     * Overrides conflicting default styles, if any.
     *
     * The provided `className` is processed using `tailwind-merge` to eliminate redundant or conflicting Tailwind classes.
     */
    className?: string;
    /**
     * Defines the behaviour of the component once the state resets.
     */
    onReset?: () => void;
    /**
     * Function fired when the component is clicked.
     */
    onClick?: () => void;
    /**
     * Custom upload icon that overrides the default icon.
     */
    uploadIcon?: React.ReactElement;
    /**
     * Enables loading via a custom loader.
     *
     * If set to `null` no loader will be displayed on file upload.
     *
     * @param   {number}  uploadPercentage  Percentage retrieved from the loader on file upload.
     */
    loader?: ((uploadPercentage: number) => React.ReactNode) | null;
    /**
     * Time in milliseconds of how long will dropzone component wait until loader element is shown.
     * Useful when uploading small files which will cause flicker of the loader element.
     * Doesn't adjust uploading percentages for the additional delay time, so UX behaviour needs to be additionally checked.
     */
    preLoadDelay?: number;
    /**
     * Time in milliseconds of how long loader element will be shown after uploading is finished.
     * Useful when uploading small files which will cause flicker of the loader element.
     * Doesn't adjust uploading percentages for the additional delay time, so UX behaviour needs to be additionally checked.
     */
    postLoadDelay?: number;
    /**
     * A unique identifier for testing purposes.
     * This identifier can be used in testing frameworks like Jest or Cypress to locate specific elements for testing.
     * It helps ensure that UI components are behaving as expected across different scenarios.
     * @type {string}
     * @example
     * // Usage:
     * <MyComponent data-testid="my-component" />
     * // In tests:
     * getByTestId('my-component');
     */
    "data-testid"?: string;
} & Omit<UploadyWrapperProps, "children"> & Omit<FieldProps, "children"> & DragZoneTokensProps;
declare type DragZoneTokensProps = {
    tokens?: ComponentTokens<"DragZone">;
};
export default function DragZone<T extends File>({ allowMultiple, disabled, mapUploadResponse, hook, send, enhancer, destinationOptions, listeners, subtitle, title, url, uploadIcon, withCredentials, className, loader, preLoadDelay, postLoadDelay, ...props }: DragZoneProps<T>): JSX.Element;
declare type DragZoneLoaderProps = {
    uploadPercentage?: number;
    spinner?: boolean;
    percentage?: boolean;
} & TokenProps<"DragZone">;
export declare function DragZoneLoader({ uploadPercentage, spinner, percentage, ...props }: DragZoneLoaderProps): JSX.Element;
export {};