UNPKG

@nexusui/components

Version:

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

82 lines (81 loc) 2.82 kB
import { DataGridProps } from '@mui/x-data-grid'; import { FileRowActionsGeneratorType, FileRowData } from './models'; export interface IFileManagement<T extends FileRowData> extends Omit<DataGridProps, 'columns' | 'rows'> { /** * File rows data to show, T is a generic that extends from FileRowData, user can extend this type * * ``` * interface FileRowData { * id: string; * name: string; * owner: string; * updatedTime: string; * size: number; * path?: string; * isFolder: boolean; * isSubFile?: boolean; * icon?: React.ReactNode; * } * * ``` */ files: ReadonlyArray<T>; /** * Set which file extension should be used as the parent for nested files (when present). * If undefined, files will nest under the first file alphabetically with the same base name * If null, all nesting will be disabled. */ parentFileExtension?: string | null; /** * Row actions generator to generate row actions to show when hover on the file row, * Will have three default and two additional actions. * User can pass in their own actions, the default values shows as below: * * ``` * type FileActionFuncType<T extends FileRowData> = (row: T, action: string) => void; * * interface FileRowActionCellProps<T extends FileRowData> { * row: T; * onAction: FileActionFuncType<T>; * } * * type FileRowActionsGeneratorType = <T extends FileRowData>(props: FileRowActionCellProps<T>) => GridActionsCellItemProps[]; * * const defaultRowActionsGenerator: FileRowActionsGeneratorType = ({ onAction, row }) => [ * { * icon: <FileDownloadIcon />, * label: t('download'), * onClick: () => onAction(row, FileAction.Download), * }, * { * icon: <EditIcon />, * label: row.isSubFile ? t('renameParent') : t('rename'), * onClick: () => onAction(row, FileAction.Edit), * disabled: row.isSubFile, * }, * { * icon: <DeleteIcon />, * label: t('remove'), * onClick: () => onAction(row, FileAction.Remove), * }, * { * icon: <FileOpenIcon />, * label: t('openWith'), * onClick: () => onAction(row, FileAction.Open), * }, * { * icon: <PeopleAltIcon />, * label: t('share'), * onClick: () => onAction(row, FileAction.Share), * }, *]; * ``` * */ rowActionsGenerator?: FileRowActionsGeneratorType<T>; /** * Callback function to be called when the file actions icon is clicked. */ onFileAction: (file: T, action: string) => void; } export declare const FileManagement: <T extends FileRowData>(props: IFileManagement<T>) => import("react/jsx-runtime").JSX.Element;