@tiller-ds/data-display/FileBrowser.d.ts

Data display module of Tiller Design System

import * as React from "react";
declare type File = {
    id: string | number;
    name?: string;
    type?: string;
};
declare type ChildrenProps<T extends File> = {
    /**
     * An array of file objects representing the files in the current directory.
     */
    currentFiles: T[];
    /**
     * An array of directory objects representing the current path from the root directory.
     */
    currentPath: T[];
    /**
     * A function that is called when a file is clicked.
     *
     * @param file - The clicked file object.
     */
    handleItemClick: (file: T) => void;
    /**
     * A function that is called to navigate back to the previous directory.
     */
    goBack: () => void;
    /**
     * A function that is called to navigate to a specific directory in the current path.
     *
     * @param index - The index of the directory in the `currentPath` array.
     */
    goToDirectory: (index: number) => void;
    /**
     * A boolean indicating whether the file browser is currently fetching data.
     */
    pending: boolean;
    /**
     * A boolean that controls whether to display breadcrumbs for navigation.
     *
     * @default true
     */
    breadcrumbs?: boolean;
    /**
     * A boolean that controls whether to display file icons next to file names.
     *
     * @default true
     */
    icons?: boolean;
    /**
     * A boolean that controls whether to display a loading indicator when fetching files.
     *
     * @default true
     */
    loading?: boolean;
    /**
     * 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;
    /**
     * 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;
};
declare type ChildrenFunction<T extends File> = (props: ChildrenProps<T>) => React.ReactNode;
declare type FileBrowserProps<T extends File> = {
    /**
     * The root directory which contains the files you want to display initially.
     */
    rootDirectory: T;
    /**
     * Fetches the list of files from a directory asynchronously.
     * @param {T} directory - The directory from which to fetch files.
     * @param {T[]} [currentPath] - The current path of the directory (excluding the `directory` parameter), for context purposes (optional).
     * @returns {Promise<T[]>} A promise that resolves to an array of files in the directory.
     */
    fetchDirectory: (directory: T, currentPath?: T[]) => Promise<T[]>;
    children?: ChildrenFunction<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;
    /**
     * 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;
};
export declare function FileBrowser<T extends File>(props: FileBrowserProps<T>): JSX.Element;
export declare namespace FileBrowser {
    var Table: typeof FileBrowserTable;
}
declare function FileBrowserTable<T extends File>({ currentPath, currentFiles, pending, goBack, goToDirectory, handleItemClick, breadcrumbs, icons, loading, ...props }: ChildrenProps<T>): JSX.Element;
export default FileBrowser;