Typescript support

[dguayrobotiq]

It's really hard working with this library on Typescript. Is there any plan to add Typescript support? Or does anyone have a definition file for this library?

[rvanheest]

:+1: same experience here! See Q5 in https://github.com/uptick/react-keyed-file-browser/issues/24. It would be really nice if someone could contribute a .d.ts file!

[jlo-1]

As @jarekwg mentioned in https://github.com/uptick/react-keyed-file-browser/issues/24, we have no intention on supporting Typescript, however, we are happy to merge in a definition file if someone would like to contribute. Thanks!

[graywolf336]

I was in need of TypeScript support as well since I am trying out this project, so I spent some time and got a definition file started. It is not complete in the slightest nor do I promise it is correct.

Huge shoutout to the project creators and maintainers for this great project! 👏

type AnyObject = { [key: string]: any }; //TODO: replace anything using this

declare module 'react-keyed-file-browser' {
    //#region icons
    export interface IIcons {
        File: JSX.Element,
        Image: JSX.Element,
        Video: JSX.Element,
        Audio: JSX.Element,
        Archive: JSX.Element,
        Word: JSX.Element,
        Excel: JSX.Element,
        PowerPoint: JSX.Element,
        Text: JSX.Element,
        PDF: JSX.Element,
        Rename: JSX.Element,
        Folder: JSX.Element,
        FolderOpen: JSX.Element,
        Delete: JSX.Element,
        Loading: JSX.Element,
        Download: JSX.Element,
    }

    export const Icons = {
        FontAwesome: (version: 4 | 5) => IIcons
    }
    //#endregion icons

    export interface FileBrowserFile {
        key: string,
        modified: number,
        size: number,
    }

    export interface FileBrowserFolder extends FileBrowserFile { }

    //#region props
    export interface TableHeaderRenderProps {
        select?: (fileKey: string) => void,
        fileKey?: string,

        connectDropTarget?: (headerElem: JSX.Element) => JSX.Element,
        isOver?: boolean,
        isSelected?: boolean,

        browserProps?: {
            createFiles?: (files: FileBrowserFile[], prefix: string) => void
            moveFolder?: (oldFolderKey: string, newFolderKey: string) => void,
            moveFile?: (oldFileKey: string, newFileKey: string) => void,
        },
    }

    export interface FilterRendererProps {
        value: string,
        updateFilter: (newValue: string) => void,
    }

    export interface FileBrowserProps {
        files: FileBrowserFile[],
        actions?: JSX.Element,
        showActionBar?: boolean,
        canFilter?: boolean,
        noFilesMessage?: string | JSX.Element,

        group?: () => void,
        sort?: () => void,

        icons?: IIcons,

        nestChildren?: boolean,
        renderStyle?: 'list' | 'table',

        startOpen?: boolean,

        headerRenderer?: (() => JSX.Element) | null,
        headerRendererProps?: TableHeaderRenderProps,
        filterRenderer?: () => JSX.Element,
        filterRendererProps?: FilterRendererProps,
        fileRenderer?: () => JSX.Element,
        fileRendererProps?: AnyObject,
        folderRenderer?: () => JSX.Element,
        folderRendererProps?: AnyObject,
        detailRenderer?: () => JSX.Element,
        detailRendererProps?: AnyObject,
        actionRenderer?: () => JSX.Element,
        confirmDeletionRenderer?: () => void,
        confirmMultipleDeletionRenderer?: () => void,

        onCreateFiles?: (files: File[], prefix: string) => void
        onCreateFolder?: (key: string) => void,
        onMoveFile?: (oldFileKey: string, newFileKey: string) => void,
        onMoveFolder?: (oldFolderKey: string, newFolderKey: string) => void,
        onRenameFile?: (oldFileKey: string, newFileKey: string) => void,
        onRenameFolder?: (oldFolderKey: string, newFolderKey: string) => void,
        onDeleteFile?: (fileKey: string) => void,
        onDeleteFolder?: (folderKey: string) => void,
        onDownloadFile?: (keys: string[]) => void,

        onSelect?: (fileOrFolder: FileBrowserFile | FileBrowserFolder) => void,
        onSelectFile?: (file: FileBrowserFile) => void,
        onSelectFolder?: (folder: FileBrowserFolder) => void,

        onPreviewOpen?: (file: FileBrowserFile) => void,
        onPreviewClose?: (file: FileBrowserFile) => void,

        onFolderOpen?: (folder: FileBrowserFolder) => void,
        onFolderClose?: (folder: FileBrowserFolder) => void,
    }
    //#endregion props

    export class FileBrowser extends React.Component<FileBrowserProps> { }

    export default FileBrowser;
}

[ossareh]

@graywolf336 any chance you have this in a fork? I checked your profile but could not see it. If not I'm happy to create a fork, and add this, and then submit it as a PR.

[graywolf336]

I do not have this in a fork, I just use it modules definition folder. Not all of the items are correct due to my understanding of TypeScript and React, especially the renderers.

[fbessou]

Hello there ! Just to let you know that I am preparing a PR based on @graywolf336's work.

[graywolf336]

Please double check everything as I can't promise you the renderers are correct. 😬

[fbessou]

@graywolf336, I sent a PR with the type definitions can you check that it doesn't break your project ? :slightly_smiling_face:

[dreadera]

Hi All, I have started work for the typescript integration to RKFB. I'll be closing this as it's quite out-dated. feel free to continue the discussion on the PR itself #189