diff --git a/types/react-filepond/index.d.ts b/types/react-filepond/index.d.ts new file mode 100644 index 0000000000..057cade36b --- /dev/null +++ b/types/react-filepond/index.d.ts @@ -0,0 +1,157 @@ +// Type definitions for react-filepond 5.0 +// Project: https://github.com/pqina/react-filepond +// Definitions by: Zach Posten +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +// See the docs for more info on any given prop +// https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#setting-options + +import * as React from 'react'; + +type FilePondOrigin = 'limbo' | 'local'; + +export interface FilePondFileProps { + src: string; + name?: string; + size?: number; + type?: string; + origin?: FilePondOrigin; +} + +export class FilePondFile extends React.Component { } +export { FilePondFile as File }; + +export interface FilePondItem { + file: File; + fileSize: number; + fileType: string; + filename: string; + fileExtension: string; + filenameWithoutExtension: string; + id: string; + serverId: string; + status: number; + archived: boolean; + abortLoad: () => void; + abortProcessing: () => void; + getMetadata: (key: any) => any; + setMetadata: (key: any, value: any, silent: boolean) => void; +} + +interface FilePondDragDropProps { + dropOnPage?: boolean; + dropOnElement?: boolean; + dropValidation?: boolean; + ignoredFiles?: string[]; +} + +interface FilePondServerConfigProps { + server?: string; + instantUpload?: boolean; +} + +interface FilePondLabelProps { + labelDecimalSeparator?: string; + labelThousandsSeparator?: string; + labelIdle?: string; + labelFileWaitingForSize?: string; + labelFileSizeNotAvailable?: string; + labelFileLoading?: string; + labelFileLoadError?: string; + labelFileProcessing?: string; + labelFileProcessingComplete?: string; + labelFileProcessingAborted?: string; + labelFileProcessingError?: string; + labelTapToCancel?: string; + labelTapToRetry?: string; + labelTapToUndo?: string; + labelButtonRemoveItem?: string; + labelButtonAbortItemLoad?: string; + labelButtonRetryItemLoad?: string; + labelButtonAbortItemProcessing?: string; + labelButtonUndoItemProcessing?: string; + labelButtonRetryItemProcessing?: string; + labelButtonProcessItem?: string; +} + +interface FilePondSvgIconProps { + iconRemove?: string; + iconProcess?: string; + iconRetry?: string; + iconUndo?: string; +} + +interface FilePondErrorDescription { + main: string; + sub: string; +} + +/** + * Note that in my testing, callbacks that include an error prop + * always give the error as the second prop, with the file as + * the first prop. This is contradictory to the current docs. + */ +interface FilePondCallbackProps { + oninit?: () => void; + onwarning?: (error: any, file?: FilePondItem, status?: any) => void; + onerror?: (file?: FilePondItem, error?: FilePondErrorDescription, status?: any) => void; + onaddfilestart?: (file: FilePondItem) => void; + onaddfileprogress?: (file: FilePondItem, progress: number) => void; + onaddfile?: (file: FilePondItem, error: FilePondErrorDescription) => void; + onprocessfilestart?: (file: FilePondItem) => void; + onprocessfileprogress?: (file: FilePondItem, progress: number) => void; + onprocessfileabort?: (file: FilePondItem) => void; + onprocessfileundo?: (file: FilePondItem) => void; + onprocessfile?: (file: FilePondItem, error: FilePondErrorDescription) => void; + onremovefile?: (file: FilePondItem) => void; + onpreparefile?: (file: FilePondItem, output: any) => void; + onupdatefiles?: (fileItems: FilePondItem[]) => void; +} + +interface FilePondHookProps { + beforeRemoveFile?: (fileItem: FilePondItem) => boolean; +} + +interface FilePondBaseProps { + children?: React.ReactElement | Array>; + id?: string; + name?: string; + className?: string; + required?: boolean; + captureMethod?: any; + allowDrop?: boolean; + allowBrowse?: boolean; + allowPaste?: boolean; + allowMultiple?: boolean; + allowReplace?: boolean; + allowRevert?: boolean; + maxFiles?: number; + acceptedFileTypes?: string[]; + metadata?: {[key: string]: any}; +} + +export interface FilePondProps extends + FilePondDragDropProps, + FilePondServerConfigProps, + FilePondLabelProps, + FilePondSvgIconProps, + FilePondCallbackProps, + FilePondHookProps, + FilePondBaseProps {} + +export class FilePond extends React.Component { + setOptions: (options: FilePondProps) => void; + addFile: (source: FilePondItem) => void; + addFiles: (source: FilePondItem[]) => void; + removeFile: (query: string) => void; + removeFiles: () => void; + processFile: (query: string) => void; + processFiles: () => void; + getFile: () => FilePondItem; + getFiles: () => FilePondItem[]; + browse: () => void; + context: () => void; +} + +export function registerPlugin(...plugins: any[]): void; diff --git a/types/react-filepond/react-filepond-tests.tsx b/types/react-filepond/react-filepond-tests.tsx new file mode 100644 index 0000000000..b0718a6b87 --- /dev/null +++ b/types/react-filepond/react-filepond-tests.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import * as filepond from 'react-filepond'; + +interface AppState { + filenames: string[]; +} + +// Example mostly taken from: +// https://github.com/pqina/react-filepond +class App extends React.Component<{}, AppState> { + private pond: filepond.FilePond | null; + + constructor(props: {}) { + super(props); + + this.state = { + // Set initial files + filenames: ['index.html'] + }; + } + + private handleInit() { + console.log('FilePond instance has initialized', this.pond); + } + + render() { + return ( +
+ {/* Pass FilePond properties as attributes */} + this.pond = ref} + allowMultiple={true} + maxFiles={3} + server='/api' + oninit={() => this.handleInit() } + onupdatefiles={(fileItems) => { + // Set current file objects to this.state + this.setState({ + filenames: fileItems.map(fileItem => fileItem.file.name) + }); + }} + > + {/* Update current files */} + {this.state.filenames.map(file => ( + + ))} + +
+ ); + } +} diff --git a/types/react-filepond/tsconfig.json b/types/react-filepond/tsconfig.json new file mode 100644 index 0000000000..474ea2e33f --- /dev/null +++ b/types/react-filepond/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "jsx": "react", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-filepond-tests.tsx" + ] +} diff --git a/types/react-filepond/tslint.json b/types/react-filepond/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-filepond/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }