From dc2f89fbd9f82046946440a301c0a60a9400933b Mon Sep 17 00:00:00 2001 From: Zach Posten Date: Wed, 12 Dec 2018 16:12:10 -0600 Subject: [PATCH 1/2] Create type definitions for react-filepond --- types/react-filepond/index.d.ts | 157 ++++++++++++++++++++++++++++++++ 1 file changed, 157 insertions(+) create mode 100644 types/react-filepond/index.d.ts 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; From 42117f4180e391c1bef5b184980fcb3522e2651d Mon Sep 17 00:00:00 2001 From: Zach Posten Date: Wed, 12 Dec 2018 16:12:29 -0600 Subject: [PATCH 2/2] Create react-filepond typescript definition test It currently reports the error: ERROR: 22:1 strict-export-declare-modifiers 'declare' keyword is redundant here. See: https://github.com/Microsoft/dtslint/blob/master/docs/strict-export-declare-modifiers.md at C:\dev\DefinitelyTyped\node_modules\dtslint\bin\index.js:158:19 at Generator.next () at fulfilled (C:\dev\DefinitelyTyped\node_modules\dtslint\bin\index.js:5:58) at But if I remove the 'declare' keyword on line 22, I get the error A 'declare' modifier is required for a top level declaration in a .d.ts file. I want to use a class under one name in this file and another name externally, what do I do here? --- types/react-filepond/react-filepond-tests.tsx | 51 +++++++++++++++++++ types/react-filepond/tsconfig.json | 25 +++++++++ types/react-filepond/tslint.json | 1 + 3 files changed, 77 insertions(+) create mode 100644 types/react-filepond/react-filepond-tests.tsx create mode 100644 types/react-filepond/tsconfig.json create mode 100644 types/react-filepond/tslint.json 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" }