From 374d649fde3bcd95d90f0983589e29af4cf08a9a Mon Sep 17 00:00:00 2001 From: Daniel Lebrecht Date: Wed, 23 Aug 2017 16:38:35 +0200 Subject: [PATCH 001/293] added inputs to transaction builder --- types/bitcoinjs-lib/index.d.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/types/bitcoinjs-lib/index.d.ts b/types/bitcoinjs-lib/index.d.ts index 986bb75e0b..20e7162ecf 100644 --- a/types/bitcoinjs-lib/index.d.ts +++ b/types/bitcoinjs-lib/index.d.ts @@ -206,6 +206,14 @@ export class Transaction { export class TransactionBuilder { constructor(network?: Network, maximumFeeRate?: number); + inputs: Array<{ pubKeys: Buffer[], + signatures: ECSignature[], + prevOutScript: Buffer, + prevOutType: string, + signType: string, + signScript: Buffer, + witness: boolean} >; + addInput(txhash: Buffer | string | Transaction, vout: number, sequence?: number, prevOutScript?: Buffer): number; addOutput(scriptPubKey: Buffer, value: number): number; From aafbcfd90bb6ff374842b5e370e3c08790fa0b46 Mon Sep 17 00:00:00 2001 From: Daniel Lebrecht Date: Tue, 3 Oct 2017 13:57:11 +0200 Subject: [PATCH 002/293] verify should return boolean, fixed inputs --- types/bitcoinjs-lib/bitcoinjs-lib-tests.ts | 2 +- types/bitcoinjs-lib/index.d.ts | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/types/bitcoinjs-lib/bitcoinjs-lib-tests.ts b/types/bitcoinjs-lib/bitcoinjs-lib-tests.ts index 549de76507..868659e6b6 100644 --- a/types/bitcoinjs-lib/bitcoinjs-lib-tests.ts +++ b/types/bitcoinjs-lib/bitcoinjs-lib-tests.ts @@ -53,7 +53,7 @@ describe('bitcoinjs-lib (basic)', () => { const tx = new bitcoin.TransactionBuilder(); tx.addInput('aa94ab02c182214f090e99a0d57021caffd0f195a81c24602b1028b130b63e31', 0); - tx.addOutput(Buffer.from('1Gokm82v6DmtwKEB8AiVhm82hyFSsEvBDK'), 15000); + tx.addOutput(Buffer.from('1Gokm82v6DmtwKEB8AiVhm82hyFSsEvBDK', 'utf8'), 15000); tx.sign(0, keyPair); // tslint:disable-next-line:max-line-length diff --git a/types/bitcoinjs-lib/index.d.ts b/types/bitcoinjs-lib/index.d.ts index 20e7162ecf..796758715d 100644 --- a/types/bitcoinjs-lib/index.d.ts +++ b/types/bitcoinjs-lib/index.d.ts @@ -132,7 +132,7 @@ export class HDNode { toBase58(): string; - verify(hash: Buffer, signature: ECSignature): Buffer; + verify(hash: Buffer, signature: ECSignature): boolean; static HIGHEST_BIT: number; @@ -204,15 +204,16 @@ export class Transaction { } export class TransactionBuilder { - constructor(network?: Network, maximumFeeRate?: number); - + tx: Transaction; inputs: Array<{ pubKeys: Buffer[], - signatures: ECSignature[], - prevOutScript: Buffer, - prevOutType: string, - signType: string, - signScript: Buffer, - witness: boolean} >; + signatures: Buffer[], + prevOutScript: Buffer, + prevOutType: string, + signType: string, + signScript: Buffer, + witness: boolean} >; + + constructor(network?: Network, maximumFeeRate?: number); addInput(txhash: Buffer | string | Transaction, vout: number, sequence?: number, prevOutScript?: Buffer): number; From 5f30e1c83d41fbe04f2d8ed2b9c3f25cdfef5e65 Mon Sep 17 00:00:00 2001 From: Daniel Lebrecht Date: Fri, 13 Oct 2017 17:11:27 +0200 Subject: [PATCH 003/293] added property private key (d) in ECPair class --- types/bitcoinjs-lib/index.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/types/bitcoinjs-lib/index.d.ts b/types/bitcoinjs-lib/index.d.ts index 796758715d..d33bc26e35 100644 --- a/types/bitcoinjs-lib/index.d.ts +++ b/types/bitcoinjs-lib/index.d.ts @@ -66,6 +66,8 @@ export class ECPair { constructor(d: null | undefined, Q: any, options?: { compressed?: boolean, network?: Network }); // Q should be ECPoint, but not sure how to define such type + d: BigInteger; + getAddress(): string; getNetwork(): Network; From 582327e65bef697883c2f27dceac2267e4aeb4ca Mon Sep 17 00:00:00 2001 From: dmayerdesign Date: Sun, 15 Oct 2017 14:44:29 -0400 Subject: [PATCH 004/293] Correct type-o in IOrder --- types/stripe-node/index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/stripe-node/index.d.ts b/types/stripe-node/index.d.ts index 9bf45d3411..379fe4550a 100644 --- a/types/stripe-node/index.d.ts +++ b/types/stripe-node/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for stripe-node 4.7.0 +// Type definitions for stripe-node 4.7.1 // Project: https://github.com/stripe/stripe-node/ // Definitions by: William Johnston , Peter Harris , Sampson Oliver // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -2338,7 +2338,7 @@ declare namespace StripeNode { /** * The timestamps at which the order status was updated */ - status_transactions: { + status_transitions: { canceled: number; fulfiled: number; paid: number; From c6343d34d85acebc46c81e6187cf86c3623b958e Mon Sep 17 00:00:00 2001 From: pr1st0n Date: Thu, 19 Oct 2017 22:06:32 +0300 Subject: [PATCH 005/293] Added definitions for clusterize.js --- types/clusterize.js/clusterize.js-tests.ts | 19 +++++++++++ types/clusterize.js/index.d.ts | 39 ++++++++++++++++++++++ types/clusterize.js/tsconfig.json | 23 +++++++++++++ types/clusterize.js/tslint.json | 1 + 4 files changed, 82 insertions(+) create mode 100644 types/clusterize.js/clusterize.js-tests.ts create mode 100644 types/clusterize.js/index.d.ts create mode 100644 types/clusterize.js/tsconfig.json create mode 100644 types/clusterize.js/tslint.json diff --git a/types/clusterize.js/clusterize.js-tests.ts b/types/clusterize.js/clusterize.js-tests.ts new file mode 100644 index 0000000000..e7e8359185 --- /dev/null +++ b/types/clusterize.js/clusterize.js-tests.ts @@ -0,0 +1,19 @@ +import Clusterize = require('clusterize.js'); + +const clusterize = new Clusterize({ contentId: '', scrollId: '' }); + +clusterize.append(['
  • ']); + +clusterize.prepend(['
  • ']); + +clusterize.getRowsAmount(); + +clusterize.update(['
  • ']); + +clusterize.getScrollProgress(); + +clusterize.refresh(); + +clusterize.clear(); + +clusterize.destroy(); diff --git a/types/clusterize.js/index.d.ts b/types/clusterize.js/index.d.ts new file mode 100644 index 0000000000..31b4f072ca --- /dev/null +++ b/types/clusterize.js/index.d.ts @@ -0,0 +1,39 @@ +// Type definitions for clusterize.js 0.17 +// Project: https://github.com/NeXTs/Clusterize.js +// Definitions by: My Self +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare class Clusterize { + constructor(options: ClusterizeOptions); + + destroy(clean?: boolean): void; + refresh(force?: boolean): void; + clear(): void; + getRowsAmount(): number; + getScrollProgress(): number; + update(data?: string[]): void; + append(rows: string[]): void; + prepend(rows: string[]): void; +} + +interface ClusterizeOptions { + scrollId: string; + contentId: string; + rows?: string[]; + tag?: string; + rows_in_block?: number; + blocks_in_cluster?: number; + show_no_data_row?: boolean; + no_data_text?: string; + no_data_class?: string; + keep_parity?: boolean; + callbacks?: ClusterizeCallbacks; +} + +interface ClusterizeCallbacks { + clusterWillChange?(cb: () => any): any; + clusterChanged?(cb: () => any): any; + scrollingProgress?(cb: (progress: number) => any): any; +} + +export = Clusterize; diff --git a/types/clusterize.js/tsconfig.json b/types/clusterize.js/tsconfig.json new file mode 100644 index 0000000000..319aca3588 --- /dev/null +++ b/types/clusterize.js/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": false, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "clusterize.js-tests.ts" + ] +} diff --git a/types/clusterize.js/tslint.json b/types/clusterize.js/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/clusterize.js/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From d1daeda3b26820c140a33a68c62335cdd4456dc1 Mon Sep 17 00:00:00 2001 From: pr1st0n Date: Thu, 19 Oct 2017 22:28:55 +0300 Subject: [PATCH 006/293] Fixed definitions author. --- types/clusterize.js/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/clusterize.js/index.d.ts b/types/clusterize.js/index.d.ts index 31b4f072ca..beda96d79d 100644 --- a/types/clusterize.js/index.d.ts +++ b/types/clusterize.js/index.d.ts @@ -1,6 +1,6 @@ // Type definitions for clusterize.js 0.17 // Project: https://github.com/NeXTs/Clusterize.js -// Definitions by: My Self +// Definitions by: Pr1st0n // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped declare class Clusterize { From 64b1289e185646ffffb2e23f3292dbbe19ebb09e Mon Sep 17 00:00:00 2001 From: pr1st0n Date: Fri, 20 Oct 2017 11:23:51 +0300 Subject: [PATCH 007/293] Review fixes. --- types/clusterize.js/clusterize.js-tests.ts | 3 +- types/clusterize.js/index.d.ts | 38 ++++++++++++---------- types/clusterize.js/tsconfig.json | 2 +- 3 files changed, 23 insertions(+), 20 deletions(-) diff --git a/types/clusterize.js/clusterize.js-tests.ts b/types/clusterize.js/clusterize.js-tests.ts index e7e8359185..acbfbc36f8 100644 --- a/types/clusterize.js/clusterize.js-tests.ts +++ b/types/clusterize.js/clusterize.js-tests.ts @@ -1,6 +1,7 @@ import Clusterize = require('clusterize.js'); -const clusterize = new Clusterize({ contentId: '', scrollId: '' }); +const options: Clusterize.Options = { contentId: '', scrollId: '' }; +const clusterize = new Clusterize(options); clusterize.append(['
  • ']); diff --git a/types/clusterize.js/index.d.ts b/types/clusterize.js/index.d.ts index beda96d79d..2d0e169c38 100644 --- a/types/clusterize.js/index.d.ts +++ b/types/clusterize.js/index.d.ts @@ -4,7 +4,7 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped declare class Clusterize { - constructor(options: ClusterizeOptions); + constructor(options: Clusterize.Options); destroy(clean?: boolean): void; refresh(force?: boolean): void; @@ -16,24 +16,26 @@ declare class Clusterize { prepend(rows: string[]): void; } -interface ClusterizeOptions { - scrollId: string; - contentId: string; - rows?: string[]; - tag?: string; - rows_in_block?: number; - blocks_in_cluster?: number; - show_no_data_row?: boolean; - no_data_text?: string; - no_data_class?: string; - keep_parity?: boolean; - callbacks?: ClusterizeCallbacks; -} +declare namespace Clusterize { + interface Options { + scrollId: string; + contentId: string; + rows?: string[]; + tag?: string; + rows_in_block?: number; + blocks_in_cluster?: number; + show_no_data_row?: boolean; + no_data_text?: string; + no_data_class?: string; + keep_parity?: boolean; + callbacks?: Callbacks; + } -interface ClusterizeCallbacks { - clusterWillChange?(cb: () => any): any; - clusterChanged?(cb: () => any): any; - scrollingProgress?(cb: (progress: number) => any): any; + interface Callbacks { + clusterWillChange?(cb: () => any): void; + clusterChanged?(cb: () => any): void; + scrollingProgress?(cb: (progress: number) => any): void; + } } export = Clusterize; diff --git a/types/clusterize.js/tsconfig.json b/types/clusterize.js/tsconfig.json index 319aca3588..10ca5c2a1a 100644 --- a/types/clusterize.js/tsconfig.json +++ b/types/clusterize.js/tsconfig.json @@ -7,7 +7,7 @@ "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, - "strictFunctionTypes": false, + "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ "../" From 67a8a0fd9151c27321ef932ebae6622f4b6452b0 Mon Sep 17 00:00:00 2001 From: pr1st0n Date: Fri, 20 Oct 2017 17:21:20 +0300 Subject: [PATCH 008/293] Review fix. --- types/clusterize.js/index.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/clusterize.js/index.d.ts b/types/clusterize.js/index.d.ts index 2d0e169c38..7c549761d6 100644 --- a/types/clusterize.js/index.d.ts +++ b/types/clusterize.js/index.d.ts @@ -32,9 +32,9 @@ declare namespace Clusterize { } interface Callbacks { - clusterWillChange?(cb: () => any): void; - clusterChanged?(cb: () => any): void; - scrollingProgress?(cb: (progress: number) => any): void; + clusterWillChange?(cb: () => void): void; + clusterChanged?(cb: () => void): void; + scrollingProgress?(cb: (progress: number) => void): void; } } From 9e4fd891d59ca3f6ef012619fb332e20e2cd2e09 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Sat, 21 Oct 2017 10:51:01 +0200 Subject: [PATCH 009/293] fix(webpack): `MultiCompiler` extends `Tapable` https://github.com/webpack/webpack/blob/69e0844028950e1316fb4ed9f4ac4593ecc205b3/lib/MultiCompiler.js#L12 --- types/webpack/index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/webpack/index.d.ts b/types/webpack/index.d.ts index b99f489cec..b4e6cbfded 100644 --- a/types/webpack/index.d.ts +++ b/types/webpack/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for webpack 3.0 +// Type definitions for webpack 3.8 // Project: https://github.com/webpack/webpack // Definitions by: Qubo // Benjamin Lim @@ -613,7 +613,7 @@ declare namespace webpack { } } - abstract class MultiCompiler implements ICompiler { + abstract class MultiCompiler extends Tapable implements ICompiler { run(handler: MultiCompiler.Handler): void; watch(watchOptions: MultiCompiler.WatchOptions, handler: MultiCompiler.Handler): MultiWatching; } From 346ab192169a93f3ed5e9615a75724152f41157f Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Sun, 22 Oct 2017 15:30:27 +0200 Subject: [PATCH 010/293] webpack: add update API --- types/webpack/index.d.ts | 52 +++++++++++++++---- types/webpack/webpack-tests.ts | 93 ++++++++++++++++++---------------- 2 files changed, 91 insertions(+), 54 deletions(-) diff --git a/types/webpack/index.d.ts b/types/webpack/index.d.ts index b4e6cbfded..aa7c221825 100644 --- a/types/webpack/index.d.ts +++ b/types/webpack/index.d.ts @@ -98,6 +98,8 @@ declare namespace webpack { stats?: Options.Stats; /** Performance options */ performance?: Options.Performance; + /** Limit the number of parallel processed modules. Can be used to fine tune performance or to get more reliable profiling results */ + parallelism?: number; } interface Entry { @@ -167,6 +169,8 @@ declare namespace webpack { * */ libraryTarget?: 'var' | 'this' | 'commonjs' | 'commonjs2' | 'amd' | 'umd' | 'window' | 'assign' | 'jsonp'; + /** Configure which module or modules will be exposed via the `libraryTarget` */ + libraryExport?: string | string[]; /** If output.libraryTarget is set to umd and output.library is set, setting this to true will name the AMD module. */ umdNamedDefine?: boolean; /** Prefixes every line of the source in the bundle with this string. */ @@ -181,7 +185,7 @@ declare namespace webpack { /** A array of applied post loaders. */ postLoaders?: Rule[]; /** A RegExp or an array of RegExps. Don’t parse files matching. */ - noParse?: RegExp | RegExp[]; + noParse?: RegExp | RegExp[] | ((content: string) => boolean); unknownContextRequest?: string; unknownContextRecursive?: boolean; unknownContextRegExp?: RegExp; @@ -420,7 +424,7 @@ declare namespace webpack { type ConditionSpec = TestConditionSpec | OrConditionSpec | AndConditionSpec | NotConditionSpec; // tslint:disable-next-line:no-empty-interface - interface ConditionArray extends Array {} + interface ConditionArray extends Array { } type Condition = string | RegExp | ((absPath: string) => boolean) | ConditionSpec | ConditionArray; interface OldLoader { @@ -663,6 +667,8 @@ declare namespace webpack { assetsSort?: string; /** Add information about cached (not built) modules */ cached?: boolean; + /** Show cached assets (setting this to `false` only shows emitted files) */ + cachedAssets?: true, /** Add children information */ children?: boolean; /** Add built modules information to chunk information */ @@ -675,16 +681,32 @@ declare namespace webpack { chunksSort?: string; /** Context directory for request shortening */ context?: string; - /** Add details to errors (like resolving log) */ - errorDetails?: boolean; + /** Display the distance from the entry point for each module */ + depth?: false; + /** Display the entry points with the corresponding bundles */ + entrypoints?: boolean; + /** Add --env information */ + env?: boolean; /** Add errors */ errors?: boolean; + /** Add details to errors (like resolving log) */ + errorDetails?: boolean; + /** Exclude assets from being displayed in stats */ + excludeAssets?: StatsExcludeFilter; + /** Exclude modules from being displayed in stats */ + excludeModules?: StatsExcludeFilter; + /** See excludeModules */ + exclude?: StatsExcludeFilter; /** Add the hash of the compilation */ hash?: boolean; + /** Set the maximum number of modules to be shown */ + maxModules?: number; /** Add built modules information */ modules?: boolean; /** Sort the modules by a field */ modulesSort?: string; + /** Show dependencies and origin of warnings/errors */ + moduleTrace?: number; /** Add public path information */ publicPath?: boolean; /** Add information about the reasons why modules are included */ @@ -697,10 +719,20 @@ declare namespace webpack { version?: boolean; /** Add warnings */ warnings?: boolean; + /** Show which exports of a module are used */ + usedExports?: boolean; + /** Filter warnings to be shown */ + warningsFilter?: string | RegExp | (string | RegExp)[] | ((warning: string) => boolean); + /** Show performance hint when file size exceeds `performance.maxAssetSize` */ + performance?: boolean; + /** Show the exports of the modules */ + providedExports?: boolean; } type ToJsonOptions = Preset | ToJsonOptionsObject; + type StatsExcludeFilter = string | string[] | RegExp | RegExp[] | ((assetName: string) => boolean) | ((assetName: string) => boolean)[]; + interface ToStringOptionsObject extends ToJsonOptionsObject { /** `webpack --colors` equivalent */ colors?: boolean; @@ -735,7 +767,7 @@ declare namespace webpack { } class DefinePlugin extends Plugin { - constructor(definitions: {[key: string]: any}); + constructor(definitions: { [key: string]: any }); } class DllPlugin extends Plugin { @@ -861,7 +893,7 @@ declare namespace webpack { } class NamedChunksPlugin extends Plugin { - constructor(nameResolver?: (chunk: any) => string | null ); + constructor(nameResolver?: (chunk: any) => string | null); } class NoEmitOnErrorsPlugin extends Plugin { @@ -888,11 +920,11 @@ declare namespace webpack { } class EnvironmentPlugin extends Plugin { - constructor(envs: string[] | {[key: string]: any}); + constructor(envs: string[] | { [key: string]: any }); } class ProvidePlugin extends Plugin { - constructor(definitions: {[key: string]: any}); + constructor(definitions: { [key: string]: any }); } class SourceMapDevToolPlugin extends Plugin { @@ -926,7 +958,7 @@ declare namespace webpack { } namespace optimize { - class ModuleConcatenationPlugin extends Plugin {} + class ModuleConcatenationPlugin extends Plugin { } class AggressiveMergingPlugin extends Plugin { constructor(options?: AggressiveMergingPlugin.Options); } @@ -1280,7 +1312,7 @@ declare namespace webpack { * @param content * @param sourceMap */ - emitFile(name: string, content: Buffer|string, sourceMap: any): void; + emitFile(name: string, content: Buffer | string, sourceMap: any): void; /** * Access to the compilation's inputFileSystem property. diff --git a/types/webpack/webpack-tests.ts b/types/webpack/webpack-tests.ts index 09405f3271..fa24368546 100644 --- a/types/webpack/webpack-tests.ts +++ b/types/webpack/webpack-tests.ts @@ -116,10 +116,10 @@ configuration = { ] }; -configuration = { +configuration = { entry: { a: "./a", b: "./b" }, output: { filename: "[name].js" }, - plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "init.js" }) ] + plugins: [new webpack.optimize.CommonsChunkPlugin({ name: "init.js" })] }; // @@ -451,8 +451,8 @@ plugin = new webpack.LoaderOptionsPlugin({ debug: true }); plugin = new webpack.EnvironmentPlugin(['a', 'b']); -plugin = new webpack.EnvironmentPlugin({a: true, b: 'c'}); -plugin = new webpack.ProgressPlugin((percent: number, message: string) => {}); +plugin = new webpack.EnvironmentPlugin({ a: true, b: 'c' }); +plugin = new webpack.ProgressPlugin((percent: number, message: string) => { }); plugin = new webpack.HashedModuleIdsPlugin(); plugin = new webpack.HashedModuleIdsPlugin({ hashFunction: 'sha256', @@ -531,8 +531,11 @@ webpack({ source: true, timings: true, version: true, - warnings: true + warnings: true, + warningsFilter: ["filter", /filter/], + excludeAssets: ["filter", "excluded"] }); + if (jsonStats.errors.length > 0) return handleSoftErrors(jsonStats.errors); if (jsonStats.warnings.length > 0) @@ -542,7 +545,7 @@ webpack({ declare const fs: any; -compiler = webpack({ }); +compiler = webpack({}); compiler.outputFileSystem = fs; compiler.run((err, stats) => { // ... @@ -567,47 +570,49 @@ rule = { configuration = { module: { rules: [ - { oneOf: [ - { - test: { - and: [ - /a.\.js$/, - /b\.js$/ - ] - }, - loader: "./loader?first" - }, - { - test: [ - require.resolve("./a"), - require.resolve("./c"), - ], - issuer: require.resolve("./b"), - use: [ - "./loader?second-1", - { - loader: "./loader", - options: "second-2" + { + oneOf: [ + { + test: { + and: [ + /a.\.js$/, + /b\.js$/ + ] }, - { - loader: "./loader", - options: { - get: () => "second-3" - } - } - ] - }, - { - test: { - or: [ + loader: "./loader?first" + }, + { + test: [ require.resolve("./a"), require.resolve("./c"), + ], + issuer: require.resolve("./b"), + use: [ + "./loader?second-1", + { + loader: "./loader", + options: "second-2" + }, + { + loader: "./loader", + options: { + get: () => "second-3" + } + } ] }, - loader: "./loader", - options: "third" - } - ]} + { + test: { + or: [ + require.resolve("./a"), + require.resolve("./c"), + ] + }, + loader: "./loader", + options: "third" + } + ] + } ] } }; @@ -638,7 +643,7 @@ function loader(this: webpack.loader.LoaderContext, source: string | Buffer, sou this.addDependency(''); - this.resolve('context', 'request', ( err: Error, result: string) => {}); + this.resolve('context', 'request', (err: Error, result: string) => { }); this.emitWarning('warning message'); this.emitWarning(new Error('warning message')); @@ -650,6 +655,6 @@ function loader(this: webpack.loader.LoaderContext, source: string | Buffer, sou } (loader as webpack.loader.Loader).raw = true; -(loader as webpack.loader.Loader).pitch = (remainingRequest: string, precedingRequest: string, data: any) => {}; +(loader as webpack.loader.Loader).pitch = (remainingRequest: string, precedingRequest: string, data: any) => { }; const loaderRef: webpack.loader.Loader = loader; console.log(loaderRef.raw === true); From 418ccd2c0c1a3499f0ae494979c0ba7be7aec732 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Sun, 22 Oct 2017 15:31:12 +0200 Subject: [PATCH 011/293] webpack: update header --- types/webpack/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/webpack/index.d.ts b/types/webpack/index.d.ts index aa7c221825..228ade7521 100644 --- a/types/webpack/index.d.ts +++ b/types/webpack/index.d.ts @@ -7,6 +7,7 @@ // Mohsen Azimi // Jonathan Creamer // Ahmed T. Ali +// Alan Agius // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped /// From 0a5138eb79adaa63172df3e82176cf87c8a60708 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Sun, 22 Oct 2017 15:36:43 +0200 Subject: [PATCH 012/293] webpack: fix lint issues --- types/webpack/index.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/webpack/index.d.ts b/types/webpack/index.d.ts index 228ade7521..d13311d7bb 100644 --- a/types/webpack/index.d.ts +++ b/types/webpack/index.d.ts @@ -669,7 +669,7 @@ declare namespace webpack { /** Add information about cached (not built) modules */ cached?: boolean; /** Show cached assets (setting this to `false` only shows emitted files) */ - cachedAssets?: true, + cachedAssets?: true; /** Add children information */ children?: boolean; /** Add built modules information to chunk information */ @@ -723,7 +723,7 @@ declare namespace webpack { /** Show which exports of a module are used */ usedExports?: boolean; /** Filter warnings to be shown */ - warningsFilter?: string | RegExp | (string | RegExp)[] | ((warning: string) => boolean); + warningsFilter?: string | RegExp | Array | ((warning: string) => boolean); /** Show performance hint when file size exceeds `performance.maxAssetSize` */ performance?: boolean; /** Show the exports of the modules */ @@ -732,7 +732,7 @@ declare namespace webpack { type ToJsonOptions = Preset | ToJsonOptionsObject; - type StatsExcludeFilter = string | string[] | RegExp | RegExp[] | ((assetName: string) => boolean) | ((assetName: string) => boolean)[]; + type StatsExcludeFilter = string | string[] | RegExp | RegExp[] | ((assetName: string) => boolean) | Array<(assetName: string) => boolean>; interface ToStringOptionsObject extends ToJsonOptionsObject { /** `webpack --colors` equivalent */ From f3feb4be94cfca69999d1889f43319804eb79399 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Sun, 22 Oct 2017 15:39:02 +0200 Subject: [PATCH 013/293] webpack: update `warningsFilter` --- types/webpack/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/webpack/index.d.ts b/types/webpack/index.d.ts index d13311d7bb..2ab37cba87 100644 --- a/types/webpack/index.d.ts +++ b/types/webpack/index.d.ts @@ -723,7 +723,7 @@ declare namespace webpack { /** Show which exports of a module are used */ usedExports?: boolean; /** Filter warnings to be shown */ - warningsFilter?: string | RegExp | Array | ((warning: string) => boolean); + warningsFilter?: string | string[] | RegExp | RegExp[] | ((warning: string) => boolean); /** Show performance hint when file size exceeds `performance.maxAssetSize` */ performance?: boolean; /** Show the exports of the modules */ From 0937f4ba44051ee31cae3b1378b9e03713a675c1 Mon Sep 17 00:00:00 2001 From: Curtis Maddalozzo Date: Sun, 22 Oct 2017 15:58:22 +0100 Subject: [PATCH 014/293] Add generics to memoize, partial, and once --- types/ramda/index.d.ts | 3 +++ types/ramda/ramda-tests.ts | 12 ++++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/types/ramda/index.d.ts b/types/ramda/index.d.ts index 776c074b73..4d1835f193 100644 --- a/types/ramda/index.d.ts +++ b/types/ramda/index.d.ts @@ -1000,6 +1000,7 @@ declare namespace R { * additional call to fn; instead, the cached result for that set of arguments will be returned. */ memoize(fn: (...a: any[]) => any): (...a: any[]) => any; + memoize(fn: (...a: any[]) => T): (...a: any[]) => T; /** * Create a new object with the own properties of a @@ -1159,6 +1160,7 @@ declare namespace R { * returned in subsequent invocations. */ once(fn: (...a: any[]) => any): (...a: any[]) => any; + once(fn: (...a: any[]) => T): (...a: any[]) => T; /** * A function that returns the first truthy of two arguments otherwise the last argument. Note that this is @@ -1192,6 +1194,7 @@ declare namespace R { * original function's arguments list. In some libraries this function is named `applyLeft`. */ partial(fn: (...a: any[]) => any, ...args: any[]): (...a: any[]) => any; + partial(fn: (...a: any[]) => T, ...args: any[]): (...a: any[]) => T; /** * Accepts as its arguments a function and any number of values and returns a function that, diff --git a/types/ramda/ramda-tests.ts b/types/ramda/ramda-tests.ts index 973edf29e3..9258db6ab0 100644 --- a/types/ramda/ramda-tests.ts +++ b/types/ramda/ramda-tests.ts @@ -261,11 +261,11 @@ R.times(i, 5); })(); (() => { - function multiply(a: number, b: number) { + function multiply(a: number, b: number): number { return a * b; } - const double = R.partial(multiply, 2); + const double = R.partial(multiply, 2); double(2); // => 4 function greet(salutation: string, title: string, firstName: string, lastName: string) { @@ -300,12 +300,20 @@ R.times(i, 5); // Note that argument order matters memoTrackedAdd(2, 1); // => 3 numberOfCalls; // => 3 + + function stringLength(str: string): number { + return str.length; + } + const memoStringLength = R.memoize(stringLength); + const isLong = memoStringLength('short') > 10; // false })(); (() => { const addOneOnce = R.once((x: number) => x + 1); addOneOnce(10); // => 11 addOneOnce(addOneOnce(50)); // => 11 + + const str = R.once(() => 'test')(); })(); (() => { From 7669a801824b96e7d39711ca9a1b9c5bb7a74871 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Sch=C3=BCrmann?= Date: Mon, 18 Sep 2017 10:30:08 +0200 Subject: [PATCH 015/293] Ramda: Tighten type signature for `append` The Ramda documentation clearly states that the element to append an the elements in the list should have the same type. The previous type definition unnecessarily weakened type safety. For example this error could not be detected by TypeScript: interface A { id: number } const list: A[] = [] R.append({idd: 2}, list) Which seems ridiculous. If one wanted an intersection type, one could explicity define it to be used for the list/element type. Additionally, the function `prepend` already is as strict as this proposal, that should probably be consistent. I also deleted a redundant line. --- types/ramda/index.d.ts | 5 ++--- types/ramda/ramda-tests.ts | 4 ---- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/types/ramda/index.d.ts b/types/ramda/index.d.ts index 776c074b73..f13b0d20ec 100644 --- a/types/ramda/index.d.ts +++ b/types/ramda/index.d.ts @@ -225,9 +225,8 @@ declare namespace R { /** * Returns a new list containing the contents of the given list, followed by the given element. */ - append(el: U): (list: T[]) => Array<(T & U)>; - append(el: U, list: T[]): Array<(T & U)>; - append(el: T, list: string): Array; + append(el: T, list: T[]): T[]; + append(el: T): (list: T[]) => T[]; /** * Applies function fn to the argument list args. This is useful for creating a fixed-arity function from diff --git a/types/ramda/ramda-tests.ts b/types/ramda/ramda-tests.ts index 973edf29e3..76e378fdb5 100644 --- a/types/ramda/ramda-tests.ts +++ b/types/ramda/ramda-tests.ts @@ -442,10 +442,6 @@ R.times(i, 5); R.append("tests", ["write", "more"]); // => ['write', 'more', 'tests'] R.append("tests")(["write", "more"]); // => ['write', 'more', 'tests'] R.append("tests", []); // => ['tests'] - R.append(["tests"], ["write", "more"]); // => ['write', 'more', ['tests']] - R.append(["tests"], ["write", "more"]); // => ['write', 'more', ['tests']] - R.append(["tests"])(["write", "more"]); // => ['write', 'more', ['tests']] - R.append(["tests"])(["write", "more"]); // => ['write', 'more', ['tests']] }; () => { From 5c52119b92e2b6dc70cf2b3a577a1c0f7776d377 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Rada?= Date: Mon, 23 Oct 2017 11:58:24 +0200 Subject: [PATCH 016/293] Update DropdownItem.d.ts Missing toggle option in props --- types/reactstrap/lib/DropdownItem.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/reactstrap/lib/DropdownItem.d.ts b/types/reactstrap/lib/DropdownItem.d.ts index 6fae837041..063b59cf0c 100644 --- a/types/reactstrap/lib/DropdownItem.d.ts +++ b/types/reactstrap/lib/DropdownItem.d.ts @@ -9,6 +9,7 @@ interface Props { className?: string; cssModule?: CSSModule; href?: string; + toggle?: boolean; } declare var DropdownItem: React.StatelessComponent; From 126eac680e28d66b64925cadbead2b3ad9ce49ae Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Tue, 24 Oct 2017 07:45:49 +0200 Subject: [PATCH 017/293] webpack: fix lint issues and remove some deprecated stuff --- types/webpack-stream/index.d.ts | 7 --- types/webpack/index.d.ts | 91 ++------------------------------- 2 files changed, 3 insertions(+), 95 deletions(-) diff --git a/types/webpack-stream/index.d.ts b/types/webpack-stream/index.d.ts index d5cb6186ee..74ff6aef7f 100644 --- a/types/webpack-stream/index.d.ts +++ b/types/webpack-stream/index.d.ts @@ -9,13 +9,6 @@ import * as webpack from 'webpack'; export = webpackStream; -/** - * Run webpack with the specified configuration and webpack instance - * - * @param {webpack.Configuration} config - Webpack configuration - * @param {webpack} wp - A webpack object - * @param {webpack.Compiler.Handler} callback - A callback with the webpack stats and error objects. - */ declare function webpackStream( config?: webpack.Configuration, wp?: typeof webpack, diff --git a/types/webpack/index.d.ts b/types/webpack/index.d.ts index 2ab37cba87..e9323cd4b1 100644 --- a/types/webpack/index.d.ts +++ b/types/webpack/index.d.ts @@ -210,7 +210,7 @@ declare namespace webpack { } type Module = OldModule | NewModule; - interface NewResolve { + interface Resolve { /** * A list of directories to resolve modules from. * @@ -307,71 +307,7 @@ declare namespace webpack { symlinks?: boolean; } - interface OldResolve { - /** Replace modules by other modules or paths. */ - alias?: { [key: string]: string; }; - /** - * The directory (absolute path) that contains your modules. - * May also be an array of directories. - * This setting should be used to add individual directories to the search path. - * - * @deprecated Replaced by `modules` in webpack 2. - */ - root?: string | string[]; - /** - * An array of directory names to be resolved to the current directory as well as its ancestors, and searched for modules. - * This functions similarly to how node finds “node_modules” directories. - * For example, if the value is ["mydir"], webpack will look in “./mydir”, “../mydir”, “../../mydir”, etc. - * - * @deprecated Replaced by `modules` in webpack 2. - */ - modulesDirectories?: string[]; - /** - * A directory (or array of directories absolute paths), - * in which webpack should look for modules that weren’t found in resolve.root or resolve.modulesDirectories. - * - * @deprecated Replaced by `modules` in webpack 2. - */ - fallback?: string | string[]; - /** - * An array of extensions that should be used to resolve modules. - * For example, in order to discover CoffeeScript files, your array should contain the string ".coffee". - */ - extensions?: string[]; - /** - * Check these fields in the package.json for suitable files. - * - * @deprecated Replaced by `mainFields` in webpack 2. - */ - packageMains?: Array; - - /** - * Check this field in the package.json for an object. Key-value-pairs are threaded as aliasing according to this spec - * - * @deprecated Replaced by `aliasFields` in webpack 2. - */ - packageAlias?: Array; - - /** - * Enable aggressive but unsafe caching for the resolving of a part of your files. - * Changes to cached paths may cause failure (in rare cases). An array of RegExps, only a RegExp or true (all files) is expected. - * If the resolved path matches, it’ll be cached. - * - * @deprecated Split into `unsafeCache` and `cachePredicate` in webpack 2. - */ - unsafeCache?: RegExp | RegExp[] | boolean; - } - - type Resolve = OldResolve | NewResolve; - - interface OldResolveLoader extends OldResolve { - /** It describes alternatives for the module name that are tried. - * @deprecated Replaced by `moduleExtensions` in webpack 2. - */ - moduleTemplates?: string[]; - } - - interface NewResolveLoader extends NewResolve { + interface ResolveLoader extends Resolve { /** * List of strings to append to a loader's name when trying to resolve it. */ @@ -380,8 +316,6 @@ declare namespace webpack { enforceModuleExtension?: boolean; } - type ResolveLoader = OldResolveLoader | NewResolveLoader; - type ExternalsElement = string | RegExp | ExternalsObjectElement | ExternalsFunctionElement; interface ExternalsObjectElement { @@ -723,7 +657,7 @@ declare namespace webpack { /** Show which exports of a module are used */ usedExports?: boolean; /** Filter warnings to be shown */ - warningsFilter?: string | string[] | RegExp | RegExp[] | ((warning: string) => boolean); + warningsFilter?: string | RegExp | Array | ((warning: string) => boolean); /** Show performance hint when file size exceeds `performance.maxAssetSize` */ performance?: boolean; /** Show the exports of the modules */ @@ -1091,9 +1025,6 @@ declare namespace webpack { * They only care for metadata. The pitch method on the loaders is called from left to right before the loaders are called (from right to left). * If a loader delivers a result in the pitch method the process turns around and skips the remaining loaders, * continuing with the calls to the more left loaders. data can be passed between pitch and normal call. - * @param remainingRequest - * @param precedingRequest - * @param data */ pitch?(remainingRequest: string, precedingRequest: string, data: any): any | undefined; @@ -1198,13 +1129,11 @@ declare namespace webpack { /** * Emit a warning. - * @param message */ emitWarning(message: string | Error): void; /** * Emit a error. - * @param message */ emitError(message: string | Error): void; @@ -1212,24 +1141,16 @@ declare namespace webpack { * Execute some code fragment like a module. * * Don't use require(this.resourcePath), use this function to make loaders chainable! - * - * @param code - * @param filename */ exec(code: string, filename: string): any; /** * Resolve a request like a require expression. - * @param context - * @param request - * @param callback */ resolve(context: string, request: string, callback: (err: Error, result: string) => void): any; /** * Resolve a request like a require expression. - * @param context - * @param request */ resolveSync(context: string, request: string): string; @@ -1237,7 +1158,6 @@ declare namespace webpack { * Adds a file as dependency of the loader result in order to make them watchable. * For example, html-loader uses this technique as it finds src and src-set attributes. * Then, it sets the url's for those attributes as dependencies of the html file that is parsed. - * @param file */ addDependency(file: string): void; @@ -1245,13 +1165,11 @@ declare namespace webpack { * Adds a file as dependency of the loader result in order to make them watchable. * For example, html-loader uses this technique as it finds src and src-set attributes. * Then, it sets the url's for those attributes as dependencies of the html file that is parsed. - * @param file */ dependency(file: string): void; /** * Add a directory as dependency of the loader result. - * @param directory */ addContextDependency(directory: string): void; @@ -1309,9 +1227,6 @@ declare namespace webpack { /** * Emit a file. This is webpack-specific. - * @param name - * @param content - * @param sourceMap */ emitFile(name: string, content: Buffer | string, sourceMap: any): void; From 7907550eec395490795f831e7cc313f97cc77c48 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Tue, 24 Oct 2017 07:49:45 +0200 Subject: [PATCH 018/293] webpack: fix tests --- types/webpack/webpack-tests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/webpack/webpack-tests.ts b/types/webpack/webpack-tests.ts index fa24368546..0816416c2c 100644 --- a/types/webpack/webpack-tests.ts +++ b/types/webpack/webpack-tests.ts @@ -234,7 +234,7 @@ configuration = { configuration = { resolve: { - root: __dirname + modules: [__dirname] } }; From e9f19bb876bc919e0e7830395d3f39c01d762fb1 Mon Sep 17 00:00:00 2001 From: Tom Crockett Date: Tue, 24 Oct 2017 17:33:43 -0700 Subject: [PATCH 019/293] Make component constructor props non-optional --- types/react/index.d.ts | 10 +++++----- types/react/test/index.ts | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/types/react/index.d.ts b/types/react/index.d.ts index 77356b922b..7711ba8749 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -277,7 +277,7 @@ declare namespace React { // tslint:disable-next-line:no-empty-interface interface Component

    extends ComponentLifecycle { } class Component { - constructor(props?: P, context?: any); + constructor(props: P, context?: any); // Disabling unified-signatures to have separate overloads. It's easier to understand this way. // tslint:disable:unified-signatures @@ -327,7 +327,7 @@ declare namespace React { } interface ComponentClass

    { - new (props?: P, context?: any): Component; + new (props: P, context?: any): Component; propTypes?: ValidationMap

    ; contextTypes?: ValidationMap; childContextTypes?: ValidationMap; @@ -336,7 +336,7 @@ declare namespace React { } interface ClassicComponentClass

    extends ComponentClass

    { - new (props?: P, context?: any): ClassicComponent; + new (props: P, context?: any): ClassicComponent; getDefaultProps?(): P; } @@ -347,8 +347,8 @@ declare namespace React { */ type ClassType, C extends ComponentClass

    > = C & - (new (props?: P, context?: any) => T) & - (new (props?: P, context?: any) => { props: P }); + (new (props: P, context?: any) => T) & + (new (props: P, context?: any) => { props: P }); // // Component Specs and Lifecycle diff --git a/types/react/test/index.ts b/types/react/test/index.ts index b9eea759e7..49ce7c697c 100644 --- a/types/react/test/index.ts +++ b/types/react/test/index.ts @@ -262,7 +262,7 @@ class RefComponent extends React.Component { } } -let componentRef: RefComponent | null = new RefComponent(); +let componentRef: RefComponent | null = new RefComponent({}); RefComponent.create({ ref: "componentRef" }); // type of c should be inferred RefComponent.create({ ref: c => componentRef = c }); @@ -609,8 +609,8 @@ if (TestUtils.isElementOfType(emptyElement2, StatelessComponent)) { if (TestUtils.isDOMComponent(container)) { container.getAttribute("className"); -} else if (TestUtils.isCompositeComponent(new ModernComponent())) { - new ModernComponent().props; +} else if (TestUtils.isCompositeComponent(new ModernComponent({ hello: 'hi', foo: 3 }))) { + new ModernComponent({ hello: 'hi', foo: 3 }).props; } // From 73216e2ef23df02103e94adf636d8e71f1bc7d9c Mon Sep 17 00:00:00 2001 From: Tom Crockett Date: Tue, 24 Oct 2017 21:42:28 -0700 Subject: [PATCH 020/293] Propagate non-optional props change to dependent libraries --- types/draft-js/draft-js-tests.tsx | 16 ++++++++++++---- types/jasmine-enzyme/jasmine-enzyme-tests.tsx | 2 +- .../material-ui-pagination-tests.tsx | 2 +- types/material-ui/material-ui-tests.tsx | 2 +- .../react-datepicker/react-datepicker-tests.tsx | 2 +- types/react-dom/test-utils/index.d.ts | 2 +- types/react-lazyload/react-lazyload-tests.tsx | 2 +- .../react-native-material-kit-tests.tsx | 4 ++-- .../react-native-material-ui-tests.tsx | 2 +- .../react-native-modalbox-tests.tsx | 2 +- .../react-native-tab-navigator-tests.tsx | 2 +- .../react-native-vector-icons-tests.tsx | 6 +++--- types/react-onclickoutside/index.d.ts | 2 +- types/react-onsenui/react-onsenui-tests.tsx | 2 +- .../react-redux-toastr-tests.ts | 2 +- .../react-sortable-hoc-tests.tsx | 2 +- types/react-swf/react-swf-tests.ts | 10 ++++++---- 17 files changed, 36 insertions(+), 26 deletions(-) diff --git a/types/draft-js/draft-js-tests.tsx b/types/draft-js/draft-js-tests.tsx index dae23b90ef..87172d9471 100644 --- a/types/draft-js/draft-js-tests.tsx +++ b/types/draft-js/draft-js-tests.tsx @@ -30,7 +30,7 @@ type SyntheticKeyboardEvent = React.KeyboardEvent<{}>; class RichEditorExample extends React.Component<{}, { editorState: EditorState }> { constructor() { - super(); + super({}); const sampleMarkup = 'Bold text, Italic text

    ' + @@ -182,9 +182,17 @@ function getBlockStyle(block: ContentBlock) { } } -class StyleButton extends React.Component<{key: string, active: boolean, label: string, onToggle: (blockType: string) => void, style: string}> { - constructor() { - super(); +interface Props { + key: string + active: boolean + label: string + onToggle: (blockType: string) => void + style: string +} + +class StyleButton extends React.Component { + constructor(props: Props) { + super(props); } onToggle: (event: Event) => void = (event: Event) => { diff --git a/types/jasmine-enzyme/jasmine-enzyme-tests.tsx b/types/jasmine-enzyme/jasmine-enzyme-tests.tsx index 53ee972ed3..6246618d86 100644 --- a/types/jasmine-enzyme/jasmine-enzyme-tests.tsx +++ b/types/jasmine-enzyme/jasmine-enzyme-tests.tsx @@ -254,7 +254,7 @@ describe('toHaveRef', () => { describe('toHaveState', () => { class Fixture extends React.Component { constructor() { - super(); + super({}); this.state = { foo: false, }; diff --git a/types/material-ui-pagination/material-ui-pagination-tests.tsx b/types/material-ui-pagination/material-ui-pagination-tests.tsx index 09246a2646..a7f85d8184 100644 --- a/types/material-ui-pagination/material-ui-pagination-tests.tsx +++ b/types/material-ui-pagination/material-ui-pagination-tests.tsx @@ -18,7 +18,7 @@ interface PagerState { class Pager extends React.Component<{}, PagerState> { constructor() { - super(); + super({}); this.state = { pageIndex: 0 }; diff --git a/types/material-ui/material-ui-tests.tsx b/types/material-ui/material-ui-tests.tsx index 1034d47cad..84b13d2072 100644 --- a/types/material-ui/material-ui-tests.tsx +++ b/types/material-ui/material-ui-tests.tsx @@ -7002,7 +7002,7 @@ class BottomNavigationExample extends Component<{}, { index?: number }> { constructor() { - super(); + super({}); this.state = { index: 0 }; diff --git a/types/react-datepicker/react-datepicker-tests.tsx b/types/react-datepicker/react-datepicker-tests.tsx index 5a29b38149..a92446371d 100644 --- a/types/react-datepicker/react-datepicker-tests.tsx +++ b/types/react-datepicker/react-datepicker-tests.tsx @@ -4,7 +4,7 @@ import DatePicker from 'react-datepicker'; class ReactDatePicker extends React.Component<{}, { startDate: moment.Moment; displayName: string; }> { constructor(props: {}) { - super(); + super(props); this.state = { startDate: moment(), displayName: 'Example' diff --git a/types/react-dom/test-utils/index.d.ts b/types/react-dom/test-utils/index.d.ts index 05362460d4..caa5605ef5 100644 --- a/types/react-dom/test-utils/index.d.ts +++ b/types/react-dom/test-utils/index.d.ts @@ -59,7 +59,7 @@ export interface SyntheticEventData extends OptionalEventProperties { export type EventSimulator = (element: Element | Component, eventData?: SyntheticEventData) => void; export interface MockedComponentClass { - new (): any; + new (props: {}): any; } export interface ShallowRenderer { diff --git a/types/react-lazyload/react-lazyload-tests.tsx b/types/react-lazyload/react-lazyload-tests.tsx index e6f0f9bc81..f673652ef5 100644 --- a/types/react-lazyload/react-lazyload-tests.tsx +++ b/types/react-lazyload/react-lazyload-tests.tsx @@ -7,7 +7,7 @@ interface State { class Normal extends React.Component<{}, State> { constructor() { - super(); + super({}); const arr: string[] = []; for (let i = 0; i < 200; i++) { arr.push(`${i}`); diff --git a/types/react-native-material-kit/react-native-material-kit-tests.tsx b/types/react-native-material-kit/react-native-material-kit-tests.tsx index 4cb415d791..e26abfe5fc 100644 --- a/types/react-native-material-kit/react-native-material-kit-tests.tsx +++ b/types/react-native-material-kit/react-native-material-kit-tests.tsx @@ -141,7 +141,7 @@ class MKRadioButtonTest extends React.Component { radioGroup: MKRadioButton.Group; constructor() { - super(); + super(null); this.radioGroup = new MKRadioButton.Group(); setTheme({radioStyle: { @@ -165,7 +165,7 @@ class MKRadioButtonTest extends React.Component { /// Checkbox class MKCheckboxTest extends React.Component { constructor() { - super(); + super(null); setTheme({checkboxStyle: { fillColor: MKColor.Teal, diff --git a/types/react-native-material-ui/react-native-material-ui-tests.tsx b/types/react-native-material-ui/react-native-material-ui-tests.tsx index 4f875c59a3..4acb9db12e 100644 --- a/types/react-native-material-ui/react-native-material-ui-tests.tsx +++ b/types/react-native-material-ui/react-native-material-ui-tests.tsx @@ -68,7 +68,7 @@ const DialogExample = () => class BottomNavigationExample extends React.Component { constructor() { - super(); + super(null); this.state = { active: 'today' diff --git a/types/react-native-modalbox/react-native-modalbox-tests.tsx b/types/react-native-modalbox/react-native-modalbox-tests.tsx index c8ae1785e7..6a167791f4 100644 --- a/types/react-native-modalbox/react-native-modalbox-tests.tsx +++ b/types/react-native-modalbox/react-native-modalbox-tests.tsx @@ -24,7 +24,7 @@ class Example extends React.Component<{}, State> { modal6: Modal; constructor() { - super(); + super({}); this.state = { isOpen: false, diff --git a/types/react-native-tab-navigator/react-native-tab-navigator-tests.tsx b/types/react-native-tab-navigator/react-native-tab-navigator-tests.tsx index d343a7b84e..18a6ae62ba 100644 --- a/types/react-native-tab-navigator/react-native-tab-navigator-tests.tsx +++ b/types/react-native-tab-navigator/react-native-tab-navigator-tests.tsx @@ -10,7 +10,7 @@ const tabBarImage = 'https://assets-cdn.github.com/images/modules/logos_page/Git class TabTest extends React.Component { constructor() { - super(); + super({}); this.state = { selectedTab: 'home' diff --git a/types/react-native-vector-icons/react-native-vector-icons-tests.tsx b/types/react-native-vector-icons/react-native-vector-icons-tests.tsx index b6adf8d8c6..4e1fe13e8a 100644 --- a/types/react-native-vector-icons/react-native-vector-icons-tests.tsx +++ b/types/react-native-vector-icons/react-native-vector-icons-tests.tsx @@ -43,9 +43,9 @@ class Example extends React.Component { } } -class TabTest extends React.Component { +class TabTest extends React.Component<{}, { selectedTab: string }> { constructor() { - super(); + super({}); this.state = { selectedTab: 'tab1' @@ -85,7 +85,7 @@ class TabTest extends React.Component { class TestCustomIcon extends React.Component { constructor() { - super(); + super({}); } handleButton() { diff --git a/types/react-onclickoutside/index.d.ts b/types/react-onclickoutside/index.d.ts index b342e98529..ad61a418a0 100644 --- a/types/react-onclickoutside/index.d.ts +++ b/types/react-onclickoutside/index.d.ts @@ -26,7 +26,7 @@ export interface OnClickOutProps { export type ComponentConstructor

    = React.ComponentClass

    | React.StatelessComponent

    ; export interface ClickOutComponentClass

    extends React.ComponentClass

    { - new (props?: P, context?: any): React.Component & HandleClickOutside; + new (props: P, context?: any): React.Component & HandleClickOutside; } export default function OnClickOut

    ( diff --git a/types/react-onsenui/react-onsenui-tests.tsx b/types/react-onsenui/react-onsenui-tests.tsx index 33c3e7943c..c3c9486e88 100644 --- a/types/react-onsenui/react-onsenui-tests.tsx +++ b/types/react-onsenui/react-onsenui-tests.tsx @@ -9,7 +9,7 @@ class AppState { interface AppProps {} // tslint:disable-line no-empty-interface export class App extends React.Component { - constructor(props?: AppProps) { + constructor(props: AppProps) { super(props); this.state = new AppState(); } diff --git a/types/react-redux-toastr/react-redux-toastr-tests.ts b/types/react-redux-toastr/react-redux-toastr-tests.ts index f675bf5c78..ac49d2dcdd 100644 --- a/types/react-redux-toastr/react-redux-toastr-tests.ts +++ b/types/react-redux-toastr/react-redux-toastr-tests.ts @@ -18,7 +18,7 @@ function test() { toastr.confirm("Test", { onOk: callback, onCancel: callback }); toastr.error("Error", "Error message"); toastr.info("Info", "Info test", { timeOut: 1000, removeOnHover: true, onShowComplete: callback }); - toastr.success("Test", "Test message", { component: new React.Component() }); + toastr.success("Test", "Test message", { component: new React.Component({}) }); } test(); diff --git a/types/react-sortable-hoc/react-sortable-hoc-tests.tsx b/types/react-sortable-hoc/react-sortable-hoc-tests.tsx index af742734bf..db08db3e0e 100644 --- a/types/react-sortable-hoc/react-sortable-hoc-tests.tsx +++ b/types/react-sortable-hoc/react-sortable-hoc-tests.tsx @@ -50,7 +50,7 @@ class SortableComponent extends React.Component<{}, SortableComponentState> { } public constructor() { - super(); + super({}); this.state = { items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'], axis: 'x' diff --git a/types/react-swf/react-swf-tests.ts b/types/react-swf/react-swf-tests.ts index 11c79c9940..ff42eed6f0 100644 --- a/types/react-swf/react-swf-tests.ts +++ b/types/react-swf/react-swf-tests.ts @@ -1,6 +1,8 @@ var version = ReactSWF.getFPVersion(); var isFPVersionSupported = ReactSWF.isFPVersionSupported('5'); -var reactSWF = new ReactSWF(); -reactSWF.props = { - src:'',pluginspage:'',width:20,height:20 -} +var reactSWF = new ReactSWF({ + src:'', + pluginspage:'', + width:20, + height:20, +}); From 59daf53c63d8485f3207e88bd5dcbf3b2ed9531b Mon Sep 17 00:00:00 2001 From: Alec Hill Date: Tue, 24 Oct 2017 13:41:09 +0000 Subject: [PATCH 021/293] Updated react-responsive types to v3.0 - also addresses issue https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20656 --- types/react-responsive/index.d.ts | 143 ++++++++++-------- .../react-responsive-tests.tsx | 101 ++++++++++++- types/react-responsive/tsconfig.json | 7 +- types/react-responsive/tslint.json | 3 + types/react-responsive/v1/index.d.ts | 65 ++++++++ .../v1/react-responsive-tests.tsx | 42 +++++ types/react-responsive/v1/tsconfig.json | 33 ++++ 7 files changed, 328 insertions(+), 66 deletions(-) create mode 100644 types/react-responsive/tslint.json create mode 100644 types/react-responsive/v1/index.d.ts create mode 100644 types/react-responsive/v1/react-responsive-tests.tsx create mode 100644 types/react-responsive/v1/tsconfig.json diff --git a/types/react-responsive/index.d.ts b/types/react-responsive/index.d.ts index 2b9a37839f..dde02d8dae 100644 --- a/types/react-responsive/index.d.ts +++ b/types/react-responsive/index.d.ts @@ -1,65 +1,90 @@ -// Type definitions for react-responsive 1.1.3 +// Type definitions for react-responsive 3.0 // Project: https://github.com/contra/react-responsive // Definitions by: Alexey Svetliakov +// Alec Hill +// Javier Gonzalez // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.3 +// TypeScript Version: 2.4 -declare module "react-responsive" { - import * as React from "react"; - - namespace MediaQuery { - export interface MediaQueryProps { - query?: string; - // matchers - orientation?: "portrait" | "landscape"; - scan?: "progressive" | "interlace"; - aspectRatio?: string; - deviceAspectRatio?: string; - height?: number | string; - deviceHeight?: number | string; - width?: number | string; - deviceWidth?: number | string; - color?: boolean; - colorIndex?: boolean; - monochrome?: boolean; - resolution?: number | string; - // types - minAspectRatio?: string; - maxAspectRatio?: string; - minDeviceAspectRatio?: string; - maxDeviceAspectRatio?: string; - minHeight?: number | string; - maxHeight?: number | string; - minDeviceHeight?: number | string; - maxDeviceHeight?: number | string; - minDeviceWidth?: number | string; - maxDeviceWidth?: number | string; - minWidth?: number | string; - maxWidth?: number | string; - minColor?: number; - maxColor?: number; - minColorIndex?: number; - maxColorIndex?: number; - minMonochrome?: number; - maxMonochrome?: number; - minResolution?: number | string; - maxResolution?: number | string; - // types - all?: boolean; - grid?: boolean; - aural?: boolean; - braille?: boolean; - handheld?: boolean; - print?: boolean; - projection?: boolean; - screen?: boolean; - tty?: boolean; - tv?: boolean; - embossed?: boolean; - } - } - - class MediaQuery extends React.Component { } - export = MediaQuery; +import * as React from "react"; +export interface MediaQueryTypes { + all?: boolean; + grid?: boolean; + aural?: boolean; + braille?: boolean; + handheld?: boolean; + print?: boolean; + projection?: boolean; + screen?: boolean; + tty?: boolean; + tv?: boolean; + embossed?: boolean; } + +export type MediaQueryType = keyof MediaQueryTypes; + +export interface MediaQueryMatchers { + aspectRatio?: string; + deviceAspectRatio?: string; + height?: number | string; + deviceHeight?: number | string; + width?: number | string; + deviceWidth?: number | string; + color?: boolean; + colorIndex?: boolean; + monochrome?: boolean; + resolution?: number | string; + orientation?: 'portrait' | 'landscape'; + scan?: 'progressive' | 'interlace'; + type?: MediaQueryType; +} + +export interface MediaQueryFeatures extends MediaQueryMatchers { + minAspectRatio?: string; + maxAspectRatio?: string; + + minDeviceAspectRatio?: string; + maxDeviceAspectRatio?: string; + + minHeight?: number | string; + maxHeight?: number | string; + + minDeviceHeight?: number | string; + maxDeviceHeight?: number | string; + + minWidth?: number | string; + maxWidth?: number | string; + + minDeviceWidth?: number | string; + maxDeviceWidth?: number | string; + + minColor?: number; + maxColor?: number; + + minColorIndex?: number; + maxColorIndex?: number; + + minMonochrome?: number; + maxMonochrome?: number; + + minResolution?: number | string; + maxResolution?: number | string; +} + +export interface MediaQueryAllQueryable extends MediaQueryFeatures, MediaQueryTypes {} + +export interface MediaQueryProps extends MediaQueryAllQueryable { + component?: string | React.SFC | React.ClassType | React.ComponentClass; + query?: string; + style?: React.CSSProperties; + className?: string; + children?: React.ReactNode | ((matches: boolean) => React.ReactNode); + values?: Partial; + onBeforeChange?: (matches: boolean) => void; + onChange?: (matches: boolean) => void; +} + +declare class MediaQuery extends React.Component { } +export function toQuery(matchers: Partial): string; +export default MediaQuery; diff --git a/types/react-responsive/react-responsive-tests.tsx b/types/react-responsive/react-responsive-tests.tsx index 28f8f39c30..3445a8d1cf 100644 --- a/types/react-responsive/react-responsive-tests.tsx +++ b/types/react-responsive/react-responsive-tests.tsx @@ -1,7 +1,9 @@ import * as React from "react"; -import * as MediaQuery from "react-responsive"; +import MediaQuery, { + toQuery +} from "react-responsive"; -class Test extends React.Component { +class QueryTests extends React.Component { render() { return (

    @@ -37,6 +39,99 @@ class Test extends React.Component {
    - ) + ); } } + +const ChildrenPropTest: React.SFC = ({ children }) => ; + +class PropsTests extends React.Component { + render() { + return ( +
    + +
  • Item 1
    • +
  • Item 2
    • +     + +
  • Item 1
    • +
  • Item 2
    • +     + +
  • Item 1
    • +
  • Item 2
    • +     + +
    Wrapped
    +
    Content
    +     + + uppercase me! + + + Values supplied for SSR + +
    + ); + } +} + +class FunctionChildrenTest extends React.Component { + render() { + return ( + + {(matches: boolean) => { + if (matches) { + return
    Media query matches!
    ; + } else { + return
    Media query does not match!
    ; + } + }} +     + ); + } +} + +class CallbackTest extends React.Component { + onBeforeChange = (matches: boolean): void => { + if (matches) { + // do something + } + } + + onChange = (matches: boolean): void => { + if (matches) { + // do something else + } + } + + render() { + return ( + + Media query matches! + + ); + } +} + +const queryStrTest: string = toQuery({ + type: 'print', + screen: true, + minHeight: 666 +}); diff --git a/types/react-responsive/tsconfig.json b/types/react-responsive/tsconfig.json index 61a49072b7..294f0c8cde 100644 --- a/types/react-responsive/tsconfig.json +++ b/types/react-responsive/tsconfig.json @@ -2,12 +2,11 @@ "compilerOptions": { "module": "commonjs", "lib": [ - "es6", - "dom" + "es6" ], "noImplicitAny": true, "noImplicitThis": true, - "strictNullChecks": false, + "strictNullChecks": true, "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ @@ -22,4 +21,4 @@ "index.d.ts", "react-responsive-tests.tsx" ] -} \ No newline at end of file +} diff --git a/types/react-responsive/tslint.json b/types/react-responsive/tslint.json new file mode 100644 index 0000000000..f93cf8562a --- /dev/null +++ b/types/react-responsive/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +} diff --git a/types/react-responsive/v1/index.d.ts b/types/react-responsive/v1/index.d.ts new file mode 100644 index 0000000000..2b9a37839f --- /dev/null +++ b/types/react-responsive/v1/index.d.ts @@ -0,0 +1,65 @@ +// Type definitions for react-responsive 1.1.3 +// Project: https://github.com/contra/react-responsive +// Definitions by: Alexey Svetliakov +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +declare module "react-responsive" { + import * as React from "react"; + + namespace MediaQuery { + export interface MediaQueryProps { + query?: string; + // matchers + orientation?: "portrait" | "landscape"; + scan?: "progressive" | "interlace"; + aspectRatio?: string; + deviceAspectRatio?: string; + height?: number | string; + deviceHeight?: number | string; + width?: number | string; + deviceWidth?: number | string; + color?: boolean; + colorIndex?: boolean; + monochrome?: boolean; + resolution?: number | string; + // types + minAspectRatio?: string; + maxAspectRatio?: string; + minDeviceAspectRatio?: string; + maxDeviceAspectRatio?: string; + minHeight?: number | string; + maxHeight?: number | string; + minDeviceHeight?: number | string; + maxDeviceHeight?: number | string; + minDeviceWidth?: number | string; + maxDeviceWidth?: number | string; + minWidth?: number | string; + maxWidth?: number | string; + minColor?: number; + maxColor?: number; + minColorIndex?: number; + maxColorIndex?: number; + minMonochrome?: number; + maxMonochrome?: number; + minResolution?: number | string; + maxResolution?: number | string; + // types + all?: boolean; + grid?: boolean; + aural?: boolean; + braille?: boolean; + handheld?: boolean; + print?: boolean; + projection?: boolean; + screen?: boolean; + tty?: boolean; + tv?: boolean; + embossed?: boolean; + } + } + + class MediaQuery extends React.Component { } + export = MediaQuery; + +} diff --git a/types/react-responsive/v1/react-responsive-tests.tsx b/types/react-responsive/v1/react-responsive-tests.tsx new file mode 100644 index 0000000000..28f8f39c30 --- /dev/null +++ b/types/react-responsive/v1/react-responsive-tests.tsx @@ -0,0 +1,42 @@ +import * as React from "react"; +import * as MediaQuery from "react-responsive"; + +class Test extends React.Component { + render() { + return ( +
    +
    Device Test!
    + +
    You are a desktop or laptop
    + +
    You also have a huge screen
    +     + +
    You are sized like a tablet or mobile phone though
    +     +     + +
    You are a tablet or mobile phone
    +     + +
    You are portrait
    +     + +
    You are landscape
    +     + +
    You are retina
    +     + +
    You are a desktop or laptop
    + +
    You also have a huge screen
    +     + +
    You are sized like a tablet or mobile phone though
    +     +     +
    + ) + } +} diff --git a/types/react-responsive/v1/tsconfig.json b/types/react-responsive/v1/tsconfig.json new file mode 100644 index 0000000000..774fd47a00 --- /dev/null +++ b/types/react-responsive/v1/tsconfig.json @@ -0,0 +1,33 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": false, + "strictFunctionTypes": true, + "baseUrl": "../../", + "typeRoots": [ + "../../" + ], + "types": [], + "paths": { + "react-responsive": [ + "react-responsive/v1" + ], + "react-responsive/*": [ + "react-responsive/v1/*" + ] + }, + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react" + }, + "files": [ + "index.d.ts", + "react-responsive-tests.tsx" + ] +} From 5846c7a080bc00658fcff6665552f245a1b53d8f Mon Sep 17 00:00:00 2001 From: Janeene Beeforth Date: Mon, 16 Oct 2017 00:04:46 +1100 Subject: [PATCH 022/293] Update to react-bootstrap-table version 4.0.6 * Add v2 directory with the previous 2.8 types. * Updated onCellEdit test to match library functionality. The onCellEdit function was altered in version 2.4.3 to require returning the final cell value from the function. This permits altering the value before it gets saved. * Many options were missing, or their values were out of date. * Add a lot of new tests based on example code in react-bootstrap-table. * Remove the rule overrides in tslint for version 4.0.6 * Remove newly-forbidden @type & @memberof JSDoc tags. --- types/react-bootstrap-table/index.d.ts | 2610 ++++++++++++++--- .../react-bootstrap-table-tests.tsx | 1397 ++++++++- types/react-bootstrap-table/tslint.json | 9 +- types/react-bootstrap-table/v2/index.d.ts | 758 +++++ .../v2/react-bootstrap-table-tests.tsx | 175 ++ types/react-bootstrap-table/v2/tsconfig.json | 30 + types/react-bootstrap-table/v2/tslint.json | 10 + 7 files changed, 4607 insertions(+), 382 deletions(-) create mode 100644 types/react-bootstrap-table/v2/index.d.ts create mode 100644 types/react-bootstrap-table/v2/react-bootstrap-table-tests.tsx create mode 100644 types/react-bootstrap-table/v2/tsconfig.json create mode 100644 types/react-bootstrap-table/v2/tslint.json diff --git a/types/react-bootstrap-table/index.d.ts b/types/react-bootstrap-table/index.d.ts index 66f3f8786a..fc48ef0009 100644 --- a/types/react-bootstrap-table/index.d.ts +++ b/types/react-bootstrap-table/index.d.ts @@ -1,66 +1,207 @@ -// Type definitions for react-bootstrap-table 2.6 +// Type definitions for react-bootstrap-table 4.0 // Project: https://github.com/AllenFang/react-bootstrap-table -// Definitions by: Frank Laub , Aleksander Lode , Josué Us +// Definitions by: Frank Laub , +// Aleksander Lode , +// Josué Us +// Janeene Beeforth // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 -/// - // documentation taken from http://allenfang.github.io/react-bootstrap-table/docs.html -import { ComponentClass, Props, ReactElement } from 'react'; -import { EventEmitter } from 'events'; +import { Component, CSSProperties, Props, ReactElement, SyntheticEvent } from 'react'; + +/** + * Row Keys type. Used as the unique primary index for a row. + * This should be either a string or a number. + */ +export type RowKey = T; + +/** + * Cell value type. + */ +export type Cell = T; + +/** + * Row type. This should be an object. + */ +export type Row = T; + +/** + * Table scroll position. + */ +export type ScrollPosition = 'Top' | 'Bottom'; + +/** + * Row selection mode. Single selection = 'radio', multiple selection = 'checkbox'. + */ +export type SelectRowMode = 'none' | 'radio' | 'checkbox'; + +/** + * Sort Order values. 'asc' = ascending, 'desc' = descending. + */ +export type SortOrder = 'asc' | 'desc'; + +/** + * Type of selection for cell editing. + */ +export type CellEditClickMode = 'none' | 'click' | 'dbclick'; + +/** + * Tell react-bootstrap-table how to trigger expanding by clicking on 'row' or 'column' level. + * If the value is 'column', by default all the columns are expandable. If you want to specify some columns as + * unexpandable, check expandable. + * Default is 'row'. + */ +export type ExpandBy = 'row' | 'column'; + +/** + * Used to specify whether a dropdown button should use 'dropup' mode or 'dropdown' mode. + * Default is usually 'dropdown'. + */ +export type DropDirection = 'dropdown' | 'dropup'; + +/** + * List of valid filter types. + * Note: ArrayFilter can only be used as part of the FilterData passed to the BootstrapTable.handleFilterData + * function. It is NOT valid for use when specifying a filter to the TableHeaderColumn filter properties. + */ +export type FilterType = + | 'TextFilter' + | 'RegexFilter' + | 'SelectFilter' + | 'NumberFilter' + | 'DateFilter' + | 'CustomFilter' + | 'ArrayFilter'; + +/** + * Filter conditions that can be used with TextFilter/SelectFilter/RegexFilter filters. + */ +export type FilterCondition = 'eq' | 'like'; + +/** + * Filter comparators used for NumberFilter/DateFilter filters + */ +export type FilterComparator = '=' | '<' | '<=' | '>' | '>=' | '!='; + +/** + * Element type to use for editing a particular column's cells. + */ +export type EditCellType = 'textarea' | 'select' | 'checkbox' | 'datetime'; + +/** + * Position to show the Pagination Panel. Options are above the table ('top'), below the table ('bottom'), or both + * above and below the table ('both'). + */ +export type PaginationPostion = 'top' | 'bottom' | 'both'; + +/** + * Result type for validation when editing. + */ +export type EditValidatorType = 'success' | 'error'; + +/** + * Used to specify the text alignment for a column. + */ +export type DataAlignType = 'left' | 'center' | 'right' | 'start' | 'end'; + +/** + * Boostrap version number. + */ +export type BootstrapVersion = '3' | '4'; + +/** + * CSV Field types supported. + */ +export type CSVFieldType = 'string' | 'number'; + +/** + * Custom attributes for a column/cell/etc. + * Example: { 'data-attr': 'test' } + */ +export interface CustomAttrs { + [attrKey: string]: string | number | boolean; +} + +/** + * Size per page list definition + */ +export type SizePerPageList = number[] | Array<{ text: string, value: number }>; /** * Interface spec for sepcifying functionality to handle remotely * * Consult [documentation](https://allenfang.github.io/react-bootstrap-table/docs.html#remote) * for more info - * */ export interface RemoteObjSpec { - /** If set, cell edits will be handled remotely */ + /** + * If set, cell edits will be handled remotely + */ cellEdit?: boolean; - /** If set insertions will be handled remotely */ + /** + * If set insertions will be handled remotely + */ insertRow?: boolean; - /** If set deletion will be handled remotely */ + /** + * If set deletion will be handled remotely + */ dropRow?: boolean; - /** If set filters will be handled remotely */ + /** + * If set filters will be handled remotely + */ filter?: boolean; - /** If set search will be handled remotely */ + /** + * If set search will be handled remotely + */ search?: boolean; - /** If set, exporting CSV will be handled remotely */ + /** + * If set, exporting CSV will be handled remotely + */ exportCSV?: boolean; - /** If set sorting will be handled remotely */ + /** + * If set sorting will be handled remotely + */ sort?: boolean; - /** If set pagination will be handled remotely */ + /** + * If set pagination will be handled remotely + */ pagination?: boolean; } export interface BootstrapTableProps extends Props { /** - * Set version='4' to use bootstrap@4, else bootstrap@3 is used. + * Bootstrap version to use, values include '3' or '4'. Defaults to '3'. */ - version?: string; + version?: BootstrapVersion; /** * Use data to specify the data that you want to display on table. */ - data: any[]; + data: Array>; /** - * If set, data is remote (use also fetchInfo) + * Normally, react-bootstrap-table handles all the data sorting/filtering/pagination/etc itself internally. + * If this is true, you need to handle all of those manually outside the table. By default it is false. + * This is used mostly with an external/central data store, for example Redux or a database that returns + * already filtered/sorted/paged data. + * + * If a function given, which means you can choose which functionality should be handled with remote or not.Currently, + * we have following functionality you can control: sort, pagination, cellEdit, insertRow, dropRow, filter, search, + * exportCSV. */ - remote?: ((remobeObj: RemoteObjSpec) => RemoteObjSpec) | boolean; // Updated to support ^3.0.0 + remote?: boolean | ((remobeObj: RemoteObjSpec) => RemoteObjSpec); /** * Use keyField to tell table which column is unique. This is same as isKey in - * Tips: You need choose one configuration to set key field: keyField or isKey in + * Tips: react-bootstrap-table support data manipulation(CRUD) so that we need to fetch correct row by a unique column. + * You need choose one of configuration to set the key field: isKey or keyField in . */ keyField?: string; /** - * Use height to set the height of table, default is 100%. + * Use height to set the height of table, default is 100%. The string needs to have a unit, e.g. 'px', '%'. */ height?: string; /** - * Set the max column width (pixels) + * Set the maximum height of table. You need give a string with an unit(px) value like height. */ maxHeight?: string; /** @@ -88,19 +229,19 @@ export interface BootstrapTableProps extends Props { * If a string given, means the value will be presented as the row class. * If a function given, will pass rowData and rowIndex as params and should return string for presenting class. for examples: * @example - * function trClassFormat(rowData,rowIndex){ - * return rowIndex%2==0?"tr-odd":"tr-even"; //return a class name. - * } + * function trClassFormat(rowData,rowIndex) { + * return rowIndex % 2 == 0 ? "tr-odd" : "tr-even"; // return a class name. + * } */ - trClassName?: string | ((rowData: any, rowIndex: number) => string); + trClassName?: string | ((rowData: Row, rowIndex: number) => string); /** * Enable row insertion by setting insertRow to true, default is false. - * If you enable row insertion, there's a button on the upper left side of table. + * If you enable row insertion, there's a button on the upper left side of table. */ insertRow?: boolean; /** * Enable row deletion by setting deleteRow to true, default is false. - * If you enable row deletion, there's a button on the upper left side of table. + * If you enable row deletion, there's a button on the upper left side of table. */ deleteRow?: boolean; /** @@ -118,8 +259,8 @@ export interface BootstrapTableProps extends Props { */ searchPlaceholder?: string; /** - * Enable strict search, default is false. - * More info here: https://github.com/AllenFang/react-bootstrap-table/issues/1199 + * Strict search. Set this flag to apply search terms so that only rows that contain ALL terms are included in the + * search results. */ strictSearch?: boolean; /** @@ -130,15 +271,101 @@ export interface BootstrapTableProps extends Props { multiColumnSearch?: boolean; /** * Enable export csv function, default is false. - * If you enable, there's a button on the upper left side of table. + * If you enable, there's a button on the upper left side of table. */ exportCSV?: boolean; /** * Set CSV filename (e.g. items.csv). Default is spreadsheet.csv */ - csvFileName?: () => string | string; + csvFileName?: string | (() => string); /** - * Enable row selection on table. selectRow accept an object which have the following properties + * If true, it will hide the pagination if there is only one page, default is false. + */ + ignoreSinglePage?: boolean; + /** + * Specify a fix position for the vertical bar if it exist. Available is a number or Top and Bottom + */ + scrollTop?: number | ScrollPosition; + /** + * Add css styles to the react-bs-table-container class. + * For example: containerStyle={ { background: '#00ff00' } } + */ + containerStyle?: CSSProperties; + /** + * Add css styles to the react-bs-table class. + */ + tableStyle?: CSSProperties; + /** + * Add css styles to the react-bs-container-header class. + */ + headerStyle?: CSSProperties; + /** + * Add css styles to the react-bs-container-body class. + */ + bodyStyle?: CSSProperties; + /** + * Add your own class names on the react-bs-table-container class + */ + containerClass?: string; + /** + * Add your own class names on the react-bs-table class + */ + tableContainerClass?: string; + /** + * Add your own class names on the react-bs-container-header class + */ + headerContainerClass?: string; + /** + * Add your own class names on the react-bs-container-body class + */ + bodyContainerClass?: string; + /** + * react-bootstrap-table separate two table element as header and body. + * The tableHeaderClass is for the table element in the header + */ + tableHeaderClass?: string; + /** + * react-bootstrap-table separate two table element as header and body. + * The tableBodyClass is for the table element in the body + */ + tableBodyClass?: string; + /** + * Tell react-bootstrap-table which rows are able to expand. This prop accepts + * a callback function and is suppose to be return an Array of row keys. + * expandableRow is always used with expandComponent, both of props are enable + * the expand row functionality on table. + */ + expandableRow?(row: Row): boolean; + /** + * Tell react-bootstrap-table what's content should be rendered in the expanding + * content. This props accept a callback function and is suppose to be return JSX + * or String. + * expandComponent is always used with expandableRow, both of props are enable + * the expand row functionality on table. + */ + expandComponent?(row: Row): string | ReactElement; + /** + * Assign some alternative options for expand row feature, expandColumnOptions + * only have four available property currently. + */ + expandColumnOptions?: ExpandColumnOptions; + /** + * Enable the multi sort on table and the number value is means max number of sorting column. + */ + multiColumnSort?: number; + /** + * This prop will enable/disable the keyboard navigation cell by cell on table. This is new + * feature from 3.0.0. Default is false. You can have a basic and simple keyboard navigation + * feature on table by enabling keyBoardNav on BootstrapTable. For the usage of keyboard + * navigation is you can click any cell to focus in or use ⬅ ⬆ ⬇ ➡ to natigate the cell. + * + * But if you want more advance features for keyboard navigation or to integrate with cell + * editing, expand row or selection row, you may get interested to see how they work well + * together: In the advance cases, you need to configure keyBoardNav as an object. + */ + keyBoardNav?: boolean | KeyboardNavigation; + /** + * Enable row selection on table. SelectRow accept an object. */ selectRow?: SelectRow; /** @@ -149,51 +376,119 @@ export interface BootstrapTableProps extends Props { * For some options setting on this component, you can set the options attribute and give an object which contain following properties */ options?: Options; + /** + * Used to specify the total number of rows (matching current filter/sort/size per page) in a remote data source. + * Documented in examples, but missing from the main docs. Essential for remote data pagination calculations. + */ fetchInfo?: FetchInfo; - printable?: boolean; - tableStyle?: any; - containerStyle?: any; - headerStyle?: any; - bodyStyle?: any; - ignoreSinglePage?: boolean; - containerClass?: string; - tableContainerClass?: string; - headerContainerClass?: string; - bodyContainerClass?: string; - expandableRow?: (row: any) => boolean; - expandComponent?: (row: any) => any; + /** + * Automatically collapses open rows when doing a sort/filter/search action if those options have been specified. + * Is an object with three possible fields: sort, filter, search. Each field is a flag to specify whether that + * action type should cause expanded rows to close. All three fields default to false. + */ + autoCollapse?: { + sort?: boolean; + filter?: boolean; + search?: boolean; + }; + /** + * Set a style to be used for the table rows. + */ + trStyle?: CSSProperties; + /** + * Disable the automatic tabIndex for navigating between cells. This can be useful if you have a page with multiple + * tables on the page, to stop the tab moving to another table. Default is false. + */ + withoutTabIndex?: boolean; + /** + * Disable writing the header row when exporting to a CSV file. + */ + excludeCSVHeader?: boolean; + /** + * Add a footer to the table. + */ + footer?: boolean; + /** + * Data for the table footer. Format is an array of footer rows, each containing an array of column footer data. + */ + footerData?: FooterData[][]; + /** + * Table footer custom class + */ + tableFooterClass?: string; } -export type SelectRowMode = 'none' | 'radio' | 'checkbox'; +/** + * Footer Data for a column. + */ +export interface FooterData { + /** + * Title to display for the column footer + */ + label: string; + /** + * Index for the column that this footer belongs to + */ + columnIndex: number; + /** + * Text alignment for the data in this footer. + */ + align?: DataAlignType; + /** + * Formatting function for the data in this footer. Used to be able to do things like sum the contents of this + * column in the table so that the footer can be used for totals, etc. + * + * The output value from the formatter function will be used instead of the label if the formatter function is + * defined. + */ + formatter?(tableData: Array>): string | number | ReactElement; +} export interface SelectRow { /** - * For specifing the selection is single(radio) or multiple(checkbox). + * Specify whether the selection column uses single(radio) or multiple(checkbox) selection modes. Required. */ mode: SelectRowMode; /** - * Click the row will trigger selection on that row if enable clickToSelect, default is false. + * If true, clicking the row will trigger selection on that row, default is false. */ clickToSelect?: boolean; /** - * If true, click the row will trigger selection on that row and also trigger cell editing if you enabled cell edit. Default is false. + * If true, clicking the row will trigger selection on that row and also trigger cell editing if you enabled cell edit. Default is false. */ clickToSelectAndEditCell?: boolean; /** - * You can assign the background color of row which be selected. + * If true, clicking the row will trigger expanding the row. Default is false. */ - bgColor?: string; + clickToExpand?: boolean; /** - * You can assign the class name of row which be selected. + * You can assign the background color of row which be selected. + * If your requirement is much complex, you can assign a function to bgColor that + * returns a css color string. */ - className?: string; + bgColor?: string | ((row: Row, isSelect: boolean) => string); + /** + * You can change the width of the selection column by columnWidth (include units). + */ + columnWidth?: string; + /** + * You can assign the class name of selected rows. This can either be a string, or a function that takes two + * arguments: row and isSelect. + * `row`: The current row data. + * `isSelect`: Flag indicating whether this particular row is selected. + */ + className?: string | ((row: Row, isSelect: boolean) => string); /** * Give an array data to perform which rows you want to be selected when table loading. - * The content of array should be the rowkey which you want to be selected. + * The content of array should be the rowkeys for the rows that you want to be selected. */ - selected?: string[] | number[]; + selected?: Array>; /** - * if true, the radio/checkbox column will be hide. + * Provide a list of unselectable row keys. + */ + unselectable?: Array>; + /** + * If true, the radio/checkbox column will be hidden. * You can enable this attribute if you enable clickToSelect and you don't want to show the selection column. */ hideSelectColumn?: boolean; @@ -203,282 +498,635 @@ export interface SelectRow { showOnlySelected?: boolean; /** * Accept a custom callback function, if a row be selected or unselected, this function will be called. - * This callback function taking three arguments row, isSelected and event: - * `row`: is the row data which you wanted to select or unselect. - * `isSelected`: it's a boolean value means "whether or not that row will be selected?". - * `event`: The event target object. - * If return value of this (function) is false, the select or deselect action will not be applied. + * This callback function takes four arguments: row, isSelected, event, and rowIndex: + * `row`: is the row data which you wanted to select or unselect. + * `isSelected`: it's a boolean value means "whether or not that row will be selected?". + * `event`: The event target object. + * `rowIndex`: the index number for the row. + * If the return value of this (function) is false, the select or deselect action will not be applied. */ - onSelect?: (row: any, isSelected: boolean, event: any) => boolean; + onSelect?(row: Row, isSelected: boolean, event: any, rowIndex: number): boolean | void; /** - * Accept a custom callback function, if click select all checkbox, this function will be called. - * This callback function taking two arguments isSelected and currentSelectedAndDisplayData: - * `isSelected`: it's a boolean value means "whether or not that row will be selected?". - * `currentSelectedAndDisplayData`: If pagination enabled, this result is the data which in a page. In contrast, this is all data in table. - * If return value of this function is false, the select all or deselect all action will not be applied. + * Accept a custom callback function, if click select all checkbox, this function will be called. This callback + * function taking two arguments: isSelected, rows. + * isSelectedis a boolean value which means "whether or not that row will be selected?". + * rows is the rows which be selected or unselected. + * + * Tips: + * If the return value of this function is false, the select all or deselect all action will not be applied. + * If return value of this function is an array of rowkeys, this array will be applied as selection row when + * select all triggers. It's useful when you have a validation to filter some rows on selecting all. */ - onSelectAll?: (isSelected: boolean, currentSelectedAndDisplayData: any) => boolean; - + onSelectAll?(isSelected: boolean, rows: Array>): boolean | Array>; /** - * Provide a list of unselectable row keys. + * Function that returns a component to customize the display of the selection checkbox or radio button with. */ - unselectable?: number[]; + customComponent?(props: CustomSelectProps): string | ReactElement; + /** + * Only unselect visible rows. + */ + onlyUnselectVisible?: boolean; } -export type CellEditClickMode = 'none' | 'click' | 'dbclick'; - +/** + * react-bootstrap-table supports cell editing. When you enable this feature, react-bootstrap-table will make + * the target cell editable by either clicking or dbclicking (depending on the properties you set). + */ export interface CellEdit { /** - * To spectify which condition will trigger cell editing.(click or dbclick) + * Spectify which condition will trigger cell editing.(click or dbclick). Required. */ mode: CellEditClickMode; /** - * Enable blurToSave will trigger a saving event on cell when mouse blur on the input field. Default is false. + * Enabling blurToSave will trigger a saving event on the cell when the input field becomes deselected. Default is false. * In the default condition, you need to press ENTER to save the cell. */ blurToSave?: boolean; /** - * Accept a custom callback function, before cell saving, this function will be called. - * This callback function taking three arguments:row, cellName and cellValue - * It's necessary to return a bool value which whether apply this cell editing. + * Enabling blurToEscape will result in a cell edit being cancelled when the user clicks outside the table during + * editing. + * Default is false. */ - beforeSaveCell?: (row: any, cellName: string, cellValue: any) => boolean; + blurToEscape?: boolean; + /** + * nonEditableRows tell react-bootstrap-table which rows should not be edited on all of the columns. Briefly, its a row level limitation + * Please assign a callback function, and this function is supposed to be return an array of row keys. + */ + nonEditableRows?(): Array>; + /** + * Accept a custom callback function, before cell saving, this function will be called. + * This callback function takes four arguments: row, cellName, cellValue and done. + * `row`: the row data to be saved. + * `cellName`: the column dataField cell name that has been modified. + * `cellValue`: the new cell value. + * `done`: a callback function to use if this is an async operation, to indicate if the save data is valid. + * If your validation is async, for example: you want to pop a confirm dialog for user to confim in this case, + * react-bootstrap-table pass a callback function to you. You are supposed to call this callback function with a + * bool value to perfom if it is valid or not in addition, you should return 1 from the main function to tell + * react-bootstrap-table that this is a async operation. + */ + beforeSaveCell?(row: Row, cellName: string, cellValue: Cell, done: (isValid: boolean) => void): boolean | 1; /** * Accept a custom callback function, after cell saving, this function will be called. - * This callback function taking three arguments:row, cellName and cellValue + * This callback function takes three arguments: row, cellName and cellValue */ - afterSaveCell?: (row: any, cellName: string, cellValue: any) => void; + afterSaveCell?(row: Row, cellName: string, cellValue: Cell): void; } -export type SortOrder = 'asc' | 'desc'; - +/** + * Main Options for the Bootstrap Table. + */ export interface Options { /** - * Manage sort field by yourself + * Provide the name of the column that should be sorted by. + * If multi-column sort is active, this is an array of columns. */ - sortName?: string; + sortName?: string | string[]; /** - * Manage sort order by yourself + * Specify whether the sort should be ascending or descending. + * If multi-column sort is active, this is an array of sortOrder items. */ - sortOrder?: SortOrder; + sortOrder?: SortOrder | SortOrder[]; /** - * Assign a default sort field. + * Specify the default sort column. + * Note: when using cleanSort(), this default sort column will be restored. */ defaultSortName?: string; /** - * Assign a default sort ordering. + * Assign a default sort order. + * Note: when using cleanSort(), this default sort order will be restored. */ defaultSortOrder?: SortOrder; /** - * False to disable sort indicator on header column, default is true. + * Set to false to disable sort indicators on header columns, default is true. */ sortIndicator?: boolean; /** - * Change the displaying text on table if data is empty. + * Assign a callback function which will be called after triggering sorting. + * This function takes two argument: `sortName` and `sortOrder`. + * `sortName`: The sort column name, or array of column names if multi-column sort is active. + * `sortOrder`: The sort ordering, or array of ordering if multi-column sort is active. + */ + onSortChange?: + | ((sortName: string, sortOrder: SortOrder) => void) + | ((sortName: ReadonlyArray, sortOrder: ReadonlyArray) => void); + /** + * Change the text displayed on the table if data is empty. */ noDataText?: string | ReactElement; + /** + * If true, this hides the noDataText on the table when the tableis empty. Default is false. + */ + withoutNoDataText?: boolean; /** * A delay for trigger search after a keyup (millisecond) */ searchDelayTime?: number; /** - * A custom text on export csv button - */ - exportCSVText?: string; - /** - * Default is false, if true means you want to ignore any editable configuration when row insert. - */ - ignoreEditable?: boolean; - /** - * Only work on enable search. If true, there will be a button beside search input field for clear search field text. + * Only work on enable search. If true, there will be a button beside the search input field + * that will empty the field when clicked. */ clearSearch?: boolean; /** - * Assign a callback function which will be called after table update. + * Set the default search condition. */ - afterTableComplete?: Function; + defaultSearch?: string; + /** + * Assign a callback function which will be called when search text changes. This function takes + * three argument: + * `searchText`: the text from the search field. + * `colInfos`: Array of column settings (e.g. filterFormatted, etc). + * `multiColumnSearch`: True if multiple column search is enabled. + * In most cases, you only need to use searchText. This function usually used for remote searching. + */ + onSearchChange?(searchText: string, colInfos: ReadonlyArray, multiColumnSearch: boolean): void; + /** + * Assign a callback function which will be called after triggering searching. + * This function takes two argument: search and result. + * `search`: The search text from the user. + * `result`: The results after searching (array of rows that matched the search). + */ + afterSearch?(search: string, result: ReadonlyArray>): void; + /** + * Default is false, if true means you want to ignore any editable columns when creating the insert form. + */ + ignoreEditable?: boolean; + /** + * Assign a callback function that will be called after table updates. + */ + afterTableComplete?(): void; /** * Assign a callback function which will be called after row delete. - * This function taking one argument: rowKeys, which means the row key you dropped. + * This function takes two arguments: + * `rowKeys`: which means the row keys for the deleted rows + * `rows`: the array of row data that was deleted. */ - afterDeleteRow?: (rowKeys: string[]) => void; + afterDeleteRow?(rowKeys: Array>, rows: Array>): void; /** - * Assign a callback function which will be called after row insert. - * This function taking one argument: row, which means the whole row data you added. + * Assign a callback function which will be called after inserting a row. + * This function takes one argument: row, which means the whole row data you added. */ - afterInsertRow?: (row: any) => void; + afterInsertRow?(row: Row): void; /** - * Customize the text of previouse page button + * Assign a callback function which will be called after triggering column filtering. + * This function takes two arguments: filterConds and result. + * `filterConds`: It's an array object which contain all column filter conditions. + * `result`: The results after filtering. + * + * This function only work when you enable columnFilter on or define + * a filter on . */ - prePage?: string; + afterColumnFilter?(filterConds: ReadonlyArray, result: ReadonlyArray>): void; /** - * Customize the text of next page button + * Assign a callback function which will be called when a row is added. This function + * takes three arguments: + * `row`: which represents the new row data + * `colInfos`: Array of Column Descriptions for the table. + * `errorCallback`: Function to call to provide an async error message if the Add fails. + * The function should either return a string immediately, or return false and then return a string through the + * error callback function later. */ - nextPage?: string; + onAddRow?(row: Row, colInfo: ReadonlyArray, errorCallback: (message: string) => void): string | boolean; /** - * Customize the text of first page button + * Assign a callback function which will be called when a filter condition changes. + * This function takes one argument: filterObj which is an object which take dataField + * as object key and the value is the filter condition. */ - firstPage?: string; + onFilterChange?(filterObject: FilterData): void; /** - * Customize the text of last page button + * Assign a callback function which will be called when the export csv button is clicked. + * In this function, you need to return an array of rows to be exported. */ - lastPage?: string; + onExportToCSV?(): Array>; + /** + * Assign a callback function which will be called when a row been deleted. + * This function takes two arguments: + * `rowKeys`: keys for the rows to be deleted. + * `rows`: row data for the rows to be deleted. + */ + onDeleteRow?(rowKeys: Array>, rows: Array>): void; + /** + * Assign a callback function which will be called after a row click. + * This function takes three arguments: + * `row`: which is the row data that was clicked on. + * `columnIndex`: index of the column that was clicked on. + * `rowIndex`: index of the row that was clicked on. + */ + onRowClick?(row: Row, columnIndex: number, rowIndex: number): void; + /** + * Assign a callback function which will be called after a row double click. + * This function takes one argument: row which is the row data that was double clicked on. + */ + onRowDoubleClick?(row: Row): void; + /** + * Assign a callback function which will be called when mouse enters the table. + */ + onMouseEnter?(): void; + /** + * Assign a callback function which will be called when mouse leaves the table. + */ + onMouseLeave?(): void; + /** + * Assign a callback function which will be called when the mouse enters a row in table. + * This function takes two arguments: + * `row`: the row data the mouse entered + * `e`: the mouse event data + */ + onRowMouseOver?(row: Row, e: React.MouseEvent): void; + /** + * Assign a callback function which will be called when mouse leaves a row in table. + * This function takes two arguments: + * `row`: the row data the mouse entered + * `e`: the mouse event data + */ + onRowMouseOut?(row: Row, e: React.MouseEvent): void; + /** + * Assign a callback function which will be called when deleting a row. + * It gives you a chance to customize your confirmation for row deletion. + * This function takes two argument: next and rowKeys: + * `next`: If you confirm the delete, call next() to continue the process. + * `rowKeys` Is the row keys to be deleted, you can call the `next` function to apply this deletion. + */ + handleConfirmDeleteRow?(next: () => void, rowKeys: Array>): void; + /** + * Customize the text of previouse page button. + * If using the default pagination panel, this should be a string to use for the button label. + * If creating a custom pagination panel, this is passed to the panel and can be of any type desired. + */ + prePage?: any; + /** + * Customize the text of next page button. + * If using the default pagination panel, this should be a string to use for the button label. + * If creating a custom pagination panel, this is passed to the panel and can be of any type desired. + */ + nextPage?: any; + /** + * Customize the text of first page button. + * If using the default pagination panel, this should be a string to use for the button label. + * If creating a custom pagination panel, this is passed to the panel and can be of any type desired. + */ + firstPage?: any; + /** + * Customize the text of last page button. + * If using the default pagination panel, this should be a string to use for the button label. + * If creating a custom pagination panel, this is passed to the panel and can be of any type desired. + */ + lastPage?: any; /** * Accept a number, which means the page you want to show as default. */ page?: number; /** * You can change the dropdown list for size per page if you enable pagination. + * Default is [10, 25, 30, 50]. */ - sizePerPageList?: number[]; + sizePerPageList?: SizePerPageList; /** - * Means the size per page you want to locate as default. + * Current chosen size per page. */ sizePerPage?: number; /** - * To define the pagination bar length, default is 5. + * Number of page buttons to show on the pagination bar, default is 5. + * i.e. previous 2 pages + current page + next two pages = 5. */ paginationSize?: number; /** - * To define where to start counting the pages. + * Hide the dropdown list for size per page, default is false. + */ + hideSizePerPage?: boolean; + /** + * Display a short text showing the total number of rows and current lines displayed, + * default is false. If you want to customize this short text, you can give a function + * and this function take three arguments: + * `start`: Current start index + * `to`: Current end index + * `total`: The total data volume. + */ + paginationShowsTotal?: boolean | ((start: number, to: number, total: number) => string | ReactElement); + /** + * Allows you to modify where to start counting the pages, e.g. to set the first page number to 0. + * Default is 1. */ pageStartIndex?: number; /** * Assign a callback function which will be called after page changed. - * This function taking two argument: page and sizePerPage. - * `page`: Current page. - * `sizePerPage`: The data size which in one page. + * This function takes two argument: page and sizePerPage. + * `page`: New page number + * `sizePerPage`: The number of rows to display in one page. */ - onPageChange?: (page: number, sizePerPage: number) => void; + onPageChange?(page: number, sizePerPage: number): void; /** - * Assign a callback function which will be called after size per page dropdown changed. - * This function taking one argument: sizePerPage. - * `sizePerPage`: The data size which in one page. + * Assign a callback function which will be called after the size per page (number of rows per page) + * has been changed. + * This function takes one argument: sizePerPage. + * `sizePerPage`: The new number of rows to display in one page. */ - onSizePerPageList?: (sizePerPage: number) => void; + onSizePerPageList?(sizePerPage: number): void; /** - * Assign a callback function which will be called after trigger sorting. - * This function taking two argument: `sortName` and `sortOrde`r. - * `sortName`: The sort column name - * `sortOrder`: The sort ordering. + * Default is false. If true, the pagination list will be hidden when there is only one page. */ - onSortChange?: (sortName: string, sortOrder: SortOrder) => void; + hidePageListOnlyOnePage?: boolean; /** - * Assign a callback function which will be called after trigger searching. - * This function taking two argument: search and result. - * `search`: The search text which user input. - * `result`: The results after searching. - */ - afterSearch?: (search: string, result: any) => void; - /** - * Assign a callback function which will be called after trigger column filtering. - * This function taking two argument: filterConds and result. - * `filterConds`: It's an array object which contain all column filter conditions. - * `result`: The results after filtering. - */ - afterColumnFilter?: (filterConds: any[], result: any) => void; - /** - * Assign a callback function which will be called after a row click. - * This function taking one argument: row which is the row data which you click on. - */ - onRowClick?: (row: any) => void; - /** - * Assign a callback function which will be called after a row double click. - * This function taking one argument: row which is the row data which you double click on. - */ - onRowDoubleClick?: (row: any) => void; - /** - * Background color on expanded rows. + * Background color on expanded rows (css color value). */ expandRowBgColor?: string; /** - * Assign a callback function which will be called when mouse enter into the table. + * Tell react-bootstrap-table how to trigger expanding by clicking on 'row' or 'column' level. + * If the value is 'column', by default all the columns are expandable. If you want to specify some columns as + * unexpandable, check expandable. + * Default is 'row'. */ - onMouseEnter?: Function; + expandBy?: ExpandBy; /** - * Assign a callback function which will be called when mouse leave from the table. + * Customize the text on the insert button. */ - onMouseLeave?: Function; - /** - * Assign a callback function which will be called when mouse over a row in table. - * This function taking one argument: row which is the row data which mouse over. - */ - onRowMouseOver?: Function; - /** - * Assign a callback function which will be called when mouse leave from a row in table. - * This function taking one argument: row which is the row data which mouse out. - */ - onRowMouseOut?: Function; - - /** - * Assign a callback function which will be called when row dropping. - * It give you a chance to customize your confirmation for row deletion. - * This function taking two argument: next and rowKeys: - * `next`: If you confirm to drop row, call next() to continue the process - * `rowKeys` is the row keys which been deleted, you can call next function to apply this deletion. - */ - handleConfirmDeleteRow?: (next: Function, rowKeys: any[]) => void; - paginationShowsTotal?: boolean | ((start: number, to: number, total: number) => ReactElement); - onSearchChange?: Function; - onAddRow?: Function; - onExportToCSV?: Function; - insertText?: string; + /** + * Customize the text on the delete button. + */ deleteText?: string; + /** + * Customize the text on the save button in the insert modal. + */ saveText?: string; + /** + * Customize the text on the close button in the insert modal. + */ closeText?: string; - // Customization properties /** - * Callback function to be called when a cell is modified - * - * https://allenfang.github.io/react-bootstrap-table/example.html#remote - * + * Customize the text on the export csv button */ - onCellEdit?: (row: any, field: string, value: any) => any; + exportCSVText?: string; /** - * Callback function to be called when filter changing - * - * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-filtering.js#L67 - * + * You can do something before the toastr pop or even disable the toastr!! + * Returning false or void will not trigger the toastr. + * If you want the toastr popup, you should return true always. + * Inputs match the EditValidatorObject.notification field types. */ - onFilterChange?: (filterObj: any) => any; + beforeShowError?(type: EditValidatorType, msg: string, title: string): boolean | void; /** - * Callback function which will be called when a row will be deleted - * - * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-delete-row.js#L27 - * + * Default is true. If false, during printing the toolbar is hidden. */ - onDeleteRow?: (rows: any) => any; + printToolBar?: boolean; /** - * A callback which will be called after page changed - * - * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-paging.js#L30 - * + * ToolBar is the area on the top of table, it contain the search panel, buttons for data manipulation. + * After v3.0.0, you can custom all the components in the ToolBar also itself too. + * Give a toolBar in options props and toolBar only accept a function and a JSX returned value is necessary. */ - onpageChange?: (page: any, sizePerPage: number) => any; + toolBar?(props: ToolBarProps): ReactElement; + /** + * Button group which contain the insert, drop, show only select and export CSV buttons, these button all + * grouped as btn-group class in bootstrap. This is a chance that you can custom this button group. + * Give a btnGroup in options props and btnGroup only accept a function and a JSX returned value is necessary. + * This lets you customize just the left-hand-side of the toolbar if desired. + */ + btnGroup?(props: ButtonGroupProps): ReactElement; + /** + * It's available to customize the insert button by configuring insertBtn in options props, insertBtn only + * accept a function and a JSX returned value is necessary. This function will take one argument: onClick. + * + * The default `InsertButton` component is also exported as a component, so that you can use it as the base + * for your custom component. + */ + insertBtn?(onClick: (e: React.MouseEvent) => void): ReactElement; + /** + * It's available to customize delete button by configuring deleteBtn in options props, deleteBtn onl) => void): ReactElement; + /** + * It's available to customize the export csv button by configuring exportCSVBtn in options props, exportCSVBtn only + * accept a function and a JSX returned value is necessary. This function will take one argument: onClick. + * + * The default `ExportCSVButton` component is also exported as a component, so that you can use it as the base + * for your custom component. + */ + exportCSVBtn?(onClick: (e: React.MouseEvent) => void): ReactElement; + /** + * It's available to custom select only toggle button by configuring showSelectedOnlyBtn in options props. + * showSelectedOnlyBtn only accept a function and a JSX returned value is necessary. + * This function will take two argument: onClick and showSelected. + * + * The default `ShowSelectedOnlyButton` component is also exported as a component, so that you can use it as + * the base for your custom component. + */ + showSelectedOnlyBtn?(onClick: (e: React.MouseEvent) => void, showSelected: boolean): ReactElement; + /** + * You can custom the whole search panel(right side) by searchPanel in options props. searchPanel only accept + * a function and a JSX returned value is necessary. This function will take one argument: props, that contains: + * `searchField`: the default search field component + * `clearBtn`: the default clear button component + * `defaultValue`: the default text for the search field + * `placeholder`: the default placeholder text for the search field + * `clearBtnClick`: the callback function to use when the clear search button is clicked + * `search`: the callback function for triggering the search, which takes the search text as an input. + */ + searchPanel?(props: SearchPanelProps): ReactElement; + /** + * You can custom the search input field only by searchField in options props. searchField only accept a + * function and a JSX returned value is necessary. + * + * The default `SearchField` component is also exported as a component, so that you can use it as the base for + * your custom component. + */ + searchField?(props: SearchFieldProps): ReactElement & SearchFieldInterface>; + /** + * You can custom the clear button for search field by giving clearSearchBtn in options props. + * clearSearchBtn only accept a function and a JSX returned value is necessary. + * + * The default `ClearSearchButton` component is also exported as a component, so that you can use it as the + * base for your own custom component. + */ + clearSearchBtn?(onClick: (e: React.MouseEvent) => void): ReactElement; + /** + * You can customize everything in the insert modal via options.insertModal and we give you the event + * callback, props and some informations: onModalClose, onSave, columns, validateState, ignoreEditable + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/custom-insert-modal.js + */ + insertModal?( + onModalClose: () => void, + onSave: (row: Row) => void, + columns: ReadonlyArray, + validateState: { [dataField: string]: string }, + ignoreEditable: boolean + ): ReactElement; + /** + * You can customize the body of the insert modal via options.insertModalBody and we give you the following + * arguments: columns, validateState {[fieldname]: errorMsg}, ignoreEditable + * + * Note: There is no exported Insert Modal Body component - if you are customising this, you need to create your + * own body component. That component needs to implement a `getFieldValue` method that returns the new row data. It + * will be called by react-bootstrap-table when the save button is clicked in the insert modal window. + */ + insertModalBody?( + columns: ReadonlyArray, + validateState: { [dataField: string]: string }, + ignoreEditable: boolean + ): React.ReactElement & ModalBodyInterface>; + /** + * It's available to custom the header of insert modal by configuring options.insertModalHeader. It only accepts + * a function and a JSX returned value is necessary. This function will take two arguments: closeModal and save. + * `closeModal`: callback function to trigger closing the modal window. + * `save`: callback function to trigger saving the new row data. + * + * The default `InsertModalHeader` component is also exported as a component, so that you can use it as the base + * for your own custom component. + */ + insertModalHeader?(closeModal: () => void, save: () => void): ReactElement; + /** + * It's available to custom the footer of insert modal by configuring options.insertModalFooter. It only accepts + * a function and a JSX returned value is necessary. This function will take two arguments: closeModal and save. + * `closeModal`: callback function to trigger closing the modal window. + * `save`: callback function to trigger saving the new row data. + * + * The default `InsertModalFooter` component is also exported as a component, so that you can use it as the base + * for your own custom component. + */ + insertModalFooter?(closeModal: () => void, save: () => void): ReactElement; + /** + * Function to customize all of components for pagination, including the sizePerPage dropdown and the + * pagination list. + */ + paginationPanel?(props: PaginationPanelProps): ReactElement; + /** + * Function to customize the sizePerPage dropdown. + */ + sizePerPageDropDown?(props: SizePerPageFunctionProps): ReactElement; + /** + * Location for the pagination panel to be displayed. Options are 'top' (above the table), 'bottom' + * (below the table) and 'both' (above and below the table). + */ + paginationPosition?: PaginationPostion; + /** + * Callback when the value in a cell has been modified. It accepts a function that takes three arguments: + * `row`: row that is being edited. + * `fieldName`: column dataField for the cell being edited. + * `value`: new value for the cell. + * The function allows you to make further modifications to the cell value prior to it being saved. You need to + * return the final cell value to use. + */ + onCellEdit?(row: Row, fieldName: string, value: Cell): Cell; + /** + * Custom message to show when the InsertModal save fails validation. + * Default message is 'Form validate errors, please checking!' + */ + insertFailIndicator?: string; + /** + * Function to verify that a key being generated in the Insert Modal is a valid key. + * If the key fails validation, return a string error message. + * If the key is ok, return void. + */ + isValidKey?(key: RowKey): string | void; + /** + * Ability to disable the BOM in the exported CSV file. + * BOM = prepend BOM for UTF-8 XML and text/* types(including HTML) when saving the file. + */ + noAutoBOM?: boolean; + /** + * Custom class to use for the expanded content section of an expanded row. This can either be a string, or a + * function that returns a string and takes three arguments: row, rowIndex, isExpanding. + * `row`: the row expanding/collapsing. + * `rowIndex`: index number of the row. + * `isExpanding`: boolean flag specifying whether the field is expanding or collapsing. + */ + expandBodyClass?: string | ((row: Row, rowIndex: number, isExpanding: boolean) => string); + /** + * Custom class to use for the row itself for an expanded row when it has been expanded. This can either be a + * string, or a function that returns a string and takes two arguments: row and rowIndex. + * `row`: the expanded row. + * `rowIndex`: index number of the row. + */ + expandParentClass?: string | ((row: Row, rowIndex: number) => string); + /** + * Customize the field separator in a CSV export file. Default is ','. + */ + exportCSVSeparator?: string; + /** + * Set a function to be called when expanding or collapsing a row. This function takes two arguments: rowKey + * and isExpand. + * `rowKey`: dataField key for the row that is expanding or collapsing. + * `isExpand`: True if the row is expanding, false if it is collapsing. + */ + onExpand?(rowKey: RowKey, isExpand: boolean): void; + /** + * Specify that only one row should be able to be expanded at the same time. + */ + onlyOneExpanding?: boolean; + /** + * Customize the tooltip text shown when hovering over the prePage button. + */ + prePageTitle?: string; + /** + * Customize the tooltip text shown when hovering over the nextPage button. + */ + nextPageTitle?: string; + /** + * Customize the tooltip text shown when hovering over the firstPage button. + */ + firstPageTitle?: string; + /** + * Customize the tooltip text shown when hovering over the lastPage button. + */ + lastPageTitle?: string; + /** + * Provide an array of expanded rows for the table. + */ + expanding?: Array>; + /** + * Flag to indicate that the table should keep the SizePerPage dropdown open if the table rerenders without any + * user interaction. + */ + keepSizePerPageState?: boolean; + /** + * Flag to indicate that the table should always show next/previous buttons even when there is not next/previous + * page. + */ + alwaysShowAllBtns?: boolean; + /** + * Flag to indicate whether there should be buttons for First and Last page. + */ + withFirstAndLast?: boolean; } -interface FetchInfo { - dataTotalSize?: number; +/** + * Properties for data where only a portion of the data is loaded into the table at one time (i.e. remote data). + */ +export interface FetchInfo { + /** + * Total number of rows that match the current table filter/search properties. + */ + dataTotalSize: number; } -export interface BootstrapTable extends ComponentClass { +/** + * BootstrapTable class definition. + */ +export class BootstrapTable extends Component { /** - * Call this function to insert an new row to table. + * Call this function to insert a new row to table. */ - handleAddRow(row: any): void; + handleAddRow(row: Row): void; /** - * Call this function to insert an new row as first row on table. + * Call this function to insert a new row as the first row in the table. */ - handleAddRowAtBegin(row: any): void; + handleAddRowAtBegin(row: Row): void; /** - * Call this function to drop rows in table. + * Call this function to drop/delete rows from the table. */ - handleDropRow(rowKeys: any[]): void; + handleDropRow(rowKeys: Array>): void; /** * Call this function to do column filtering on table. + * @example: + * // Filtering passing an array of values + * this.refs.table.handleFilterData({ + * name: { type: 'ArrayFilter', value: ['Item name 3', 'Item name 4'] }, + * price: { type: 'ArrayFilter', value: [2100, 2104] } + * }); */ - handleFilterData(filter: any): void; + handleFilterData(filter: FilterData): void; /** * Call this function with search text for fully searching. */ @@ -486,262 +1134,1512 @@ export interface BootstrapTable extends ComponentClass { /** * Call this function to sort table. */ - handleSort(order: SortOrder, field: string): void; + handleSort(order: SortOrder, dataField: string): void; /** * Call this function to get the page by a rowkey */ - getPageByRowKey(rowKey: string): any; + getPageByRowKey(rowKey: RowKey): number; /** * Call this function to export table as csv. */ handleExportCSV(): void; /** - * Clean all the selection state on table. + * Reset the sort options to the defaults. Documented in examples but missing from main options list. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/clean-sorted-table.js + */ + cleanSort(): void; + /** + * Deselect all rows in the table. */ cleanSelected(): void; + /** + * Call reset to clean all the status on the table currently (sort, editing, filtering, search). + */ + reset(): void; } -interface BootstrapTable extends ComponentClass { } -declare const BootstrapTable: BootstrapTable; -export type DataAlignType = 'left' | 'center' | 'right' | 'start' | 'end'; export interface TableHeaderColumnProps extends Props { /** - * The field of data you want to show on column. + * The field of data you want to show on column. This is used throughout react-bootstrap-table as the column field + * name. */ dataField?: string; /** - * Use isKey to tell table which column is unique. This is same as keyField in - * Tips: You need choose one configuration to set key field: isKey or keyField in + * Use isKey to tell table which column is unique. This is same as the keyField in + * Tips: You need choose one configuration to set key field: isKey or the keyField in */ isKey?: boolean; /** - * Set the column width. ex: 150, it's means 150px + * Set the column width, including the units. e.g. '10%' or '150px' */ width?: string; /** - * Set align in column, value is left, center, right, start and end. + * Set the text alignment in the column, possible values are 'left', 'center', 'right', 'start' and 'end'. */ dataAlign?: DataAlignType; - /** * Alignment of text in the column header. + * Tip: If you don't set the headerAlign, it will default to the setting for dataAlign. */ headerAlign?: DataAlignType; /** - * True to enable table sorting. Default is disabled. + * True to enable table sorting on this column. Default is disabled. */ dataSort?: boolean; - /** - * Default search string. - */ - defaultSearch?: string; /** * Allow user to render a custom sort caret. You should give a function and should return a JSX. - * This function taking one arguments: order which present the sort order currently. + * This function takes two arguments: order and fieldName. + * `direction`: the current sort order. + * `fieldName`: the dataField name of the field currently being sorted. */ - caretRender?: Function; - /** - * Give an Object like following to able to customize your own editing component. - * This Object should contain these two property: - * getElement(REQUIRED): Accept a callback function and take two arguments: onUpdate and props. - * customEditorParameters: Another extra data for custom cell edit component. - */ - customEditor?: { getElement: (onUpdate: any, props: any) => ReactElement, customEditorParameters?: object }; + caretRender?(direction: SortOrder | null, fieldName: string): string | ReactElement; /** * To customize the column. This callback function should return a String or a React Component. - * In addition, this function taking two argument: cell and row. + * In addition, this function taking four argument: cell, row, formatExtraData, rowIdx. + * The formatExtraData will be the value which you assign it on */ - dataFormat?: (cell: any, row: any, formatExtraData?: any) => string | ReactElement; + dataFormat?(cell: Cell, row: Row, formatExtraData: any, rowIndex: number): string | ReactElement; /** - * To to enable search or filter data on formatting. Default is false + * It's useful with dataFormat, you can give any data you want to be passed to the formatter. + */ + formatExtraData?: any; + /** + * Allow you to add your custom attributes on TD element. + * Example: tdAttr={ { 'data-attr': 'test' } } + */ + tdAttr?: CustomAttrs; + /** + * Allow you to add your custom style object on TD element. + */ + tdStyle?: CSSProperties; + /** + * Allow you to add your custom style object on TH element. + */ + thStyle?: CSSProperties; + /** + * When true, the column will filter using the value returned by the column's formatter. + * When false (default), the column will filter using the pre-formatted value. */ filterFormatted?: boolean; /** - * True to hide column. + * Return the value you want to be filtered on that column. + * It's useful if your column data is an object. + * @example: (cell, row) => cell.fieldOne; + * @see: https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/search-format-table.js + */ + filterValue?(cell: Cell, row: Row): any; + /** + * Customize the cell content when exporting to a CSV file. This function takes two argument: cell, row. + */ + csvFormat?(cell: Cell, row: Row): string; + /** + * Customize the column header text for the column when exporting to a CSV file. + */ + csvHeader?: string; + /** + * It's usually used with csvFormat, and it's same as formatExtraData. + * You can give any additional data you want to be passed to the csvFormat function. + */ + csvFormatExtraData?: any; + /** + * Set to true to hide the column. Default is false. Often used to hide rowKey columns that are required to + * identify a row but that do not need to be visible. */ hidden?: boolean; /** - * True to hide from insert dialog + * Used to specify whether a column will be exported to csv. + * + * If true, the column will be included in the export. This is usually used with hidden columns, as those are not + * exported by default. + * + * If false, the column will be excluded from the csv export. + */ + export?: boolean; + /** + * Usually used with Options.expandBy. + * You can assign which columns will trigger a row expansion or not. + * If false, clicking on a row inside this column will not cause the row to expand. + */ + expandable?: boolean; + /** + * Set this to true to hide this column on insert modal. Default is false. + * + * This is often used together with autoValue for auto-generated columns like row keys. */ hiddenOnInsert?: boolean; /** - * True to hide the dropdown for sizePerPage. + * It only work for enabling insertRow and be assign on rowKey column. If true, the value of rowkey will be + * generated automatically after a row insertion. If a function given, you can customize the value by yourself and + * remember to return the value for the cell from the function. */ - hideSizePerPage?: boolean; + autovalue?: boolean | (() => Cell); /** * False to disable search functionality on column, default is true. */ searchable?: boolean; /** - * Give a customize function for data sorting. - * This function taking four arguments: a, b, order, sortField, extraData + * Show the title on each column in the data section of the table. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column/column-title-table.js */ - sortFunc?: (a: any, b: any, order: SortOrder, sortField: any, extraData: any) => number; + columnTitle?: boolean | string | ((cell: Cell, row: Row, rowIndex: number, colIndex: number) => string); /** - * It's a extra data for custom sort function, if defined, this data will be pass as fifth argument in sortFunc. + * Show the title on each column in the header section of the table, default is true. + */ + headerTitle?: boolean; + /** + * If the children of TableHeaderColumn is a JSX or Object, we prefer to add this prop to describe this column with + * a pure text(String). It will be used on the placeholder or tips in the filter, search field or insert field etc. + */ + headerText?: string; + /** + * Give a custom callback function for data sorting. + * This function takes five arguments: a, b, order, sortField, extraData + * The extraData value is the data from the sortFuncExtraData. + */ + sortFunc?(a: Cell, b: Cell, order: SortOrder, sortField: string, extraData: any): number; + /** + * Extra data for the custom sort function. If defined, this data will be passed as fifth argument in sortFunc. */ sortFuncExtraData?: any; /** * Add custom css class on table header column, this attribute only accept String or Function. - * If Function, it taking four arguments: cell, row, rowIndex, columnIndex. + * If Function, it takes four arguments: cell, row, rowIndex, columnIndex. * In addition, this function should return a String which is the class name you want to add on. */ - className?: string | ((cell: any, row: any, rowIndex: number, columnIndex: number) => string); + className?: string | ((cell: Cell, row: Row, rowIndex: number, columnIndex: number) => string); /** * Add custom css class on table body column, this attribute only accept String or Function. * If Function, it taking four arguments: cell, row, rowIndex, columnIndex. * In addition, this function should return a String which is the class name you want to add on. */ - columnClassName?: String | ((cell: any, row: any, rowIndex: number, columnIndex: number) => string); + columnClassName?: string | ((cell: Cell, row: Row, rowIndex: number, columnIndex: number) => string); /** - * Add True to set column editable, false is non-editable. If give Object, - * you can do more customization when editing cell. This object have following properties: - * @example - * { - * type: //edit type, avaiable value is textarea, select, checkbox - * validator: //give function for validation and taking only one "cell value" as argument. This function should return Bool. - * options:{ - * values: //values means data in select or checkbox.If checkbox, use ':'(colon) to separate value, ex: Y:N - * } - * } + * Add custom css class on editing cell, if assign a callback function, you are supposed to return a String for class name */ - editable?: boolean | Editable; + editColumnClassName?: string | ((cell: Cell, row: Row) => string); /** - * It only work when you enable insertRow and be assign on rowKey column. - * If true, the row key will be generated automatically after a row insertion. + * Add custom css class for invalid editing cell, if assign a callback function, you are supposed to return a String for class name */ - autoValue?: boolean; + invalidEditColumnClassName?: string | ((cell: Cell, row: Row) => string); + /** + * boolean: Add True to set column editable, false is non-editable. + * function: You have ability to control the editable level on cell instead of column level. For this + * callback function, you are supposed to be return a bool value to decide this cell editable or not + * This callback accepts four arguments: cell, row, rowIndex, columnIndex. + * object: @see Editable interface. + */ + editable?: boolean | Editable | ((cell: Cell, row: Row, rowIndex: number, columnIndex: number) => boolean | string | EditValidatorObject); + /** + * Give an Object like following to able to customize your own editing component. + * This Object should contain these two property: + * getElement(REQUIRED): Accept a callback function and take two arguments: onUpdate and props. + * customEditorParameters: Additional data for custom cell edit component. + */ + customEditor?: CustomEditor; /** * To Enable a column filter within header column. - * This feature support a lots of filter type and condition. Please check example - * Following is the format for filter + * This feature support a lots of filter types and conditions. */ filter?: Filter; - - onSort?: Function; - /** - * Header for column in generated CSV file - */ - csvHeader?: string; - csvFormat?: Function; - columnTitle?: boolean; - sort?: SortOrder; - formatExtraData?: any; - - /** - * Row in the header on which this header column present. + * This is always used together with rowSpan and colSpan, to create multi-row/multi-column headers. + * Row is the header row on which this header column present. */ row?: number; - /** * Indicates how many rows this column takes. * Default: 1 */ rowSpan?: number; - /** * Indicates how many columns this column takes. * Default: 1 */ colSpan?: number; - /** - * Return the value you want to be filtered on that column. - * It's useful if your column data is an object. + * Specify the field type to use when exporting this column to CSV. Available types are 'number' and 'string'. + * Defaults to 'string'. */ - filterValue?: Function; - + csvFieldType?: CSVFieldType; /** - * Allow you to add your custom attributes on TD element. + * Set the column class name for the actively filtered column. Can be either a string, or a function that takes two + * parameters: order and dataField. + * `order`: current sort order for the column. + * `dataField`: current column's dataField. + * This allows you to specify a different className depending on whether the current dataField is being sorted 'asc' + * or 'desc'. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/sort-style-table.js#L36-L37 */ - tdAttr?: object; - + sortHeaderColumnClassName?: string | ((order: SortOrder, dataField: string) => string); /** - * Allow you to add your custom style object on TD element. + * Specify custom tdAttrs to use for a cell that is being edited within this column. */ - tdStyle?: object; - + editTdAttr?: CustomAttrs; /** - * Allow you to add your custom style object on TH element. + * Custom insert editor element. This is a function to generate a custom edit element to display in the InsertModal + * form. The function takes five arguments: column, attr, editorClass, ignoreEditable, defaultValue. + * `column`: column information given to the insert modal. + * `attr`: EditableAttrs from the TableHeader.editable object options. + * `editorClass`: className to apply to the editor component. + * `ignoreEditable`: boolean flag indicating whether editable fields should be ignored in the insert modal + * `defaultValue`: the default value to use for this cell. + * The function should return either a JSX element for the field, or false to default back to the standard edit + * element. */ - thStyle?: object; + customInsertEditor?: { + getElement( + column: InsertModalColumnDescription, + attr: EditableAttrs, + editorClass: string, + ignoreEditable: boolean, + defaultValue: Cell + ): ReactElement | boolean; + }; + /** + * Support specifying that the column should start sorting with the 'asc' option. + */ + defaultASC?: boolean; } -export interface Editable { - type?: string; // edit type, avaiable value is textarea, select, checkbox - /** - * Function for validation and taking only one "cell value" as argument. This function should return Bool. - */ - validator?: (cell: any) => boolean; - /** - * @example - * { - * values: //values means data in select or checkbox. If checkbox, use ':'(colon) to separate value, ex: Y:N - * } - */ - options?: any; +/** + * Editable Attributes. Poorly documented, but used when creating custom editor components. + */ +export interface EditableAttrs { /** - * Configuration for the textarea editable type + * Placeholder text to use for the cell editor field. + */ + placeholder?: string; + /** + * Function to pass a reference to the input editor field. + */ + ref?(ref: any): any; + /** + * Callback for onKeyDown. + */ + onKeyDown?(): void; + /** + * Callback for on cell blur. + */ + onBlur?(): void; +} + +/** + * Editable Select option values + */ +export type EditSelectOptionValue = + | Array<{ text: string; value: string; }> + | string[] + | number[]; + +/** + * Editable Checkbox option values. This should be a string with the true/false value separated by a colon. + * e.g. "Yes:No" + */ +export type EditCheckboxOptionValue = string; + +/** + * Object to use to customize the properties for an editable column. + */ +export interface Editable { + /** + * Edit field type, avaiable value is 'textarea', 'select', 'checkbox' and 'datetime' + */ + type?: EditCellType; + /** + * Class name to use for the editor component. + */ + className?: string; + /** + * Number of columns to display for a text area component. */ cols?: number; + /** + * Number of rows to display for a text area component. + */ rows?: number; + /** + * Used to specify a field that can be modified in the insert modal when adding a new row, but cannot be edited + * inside the table after the row has been inserted. + */ + readOnly?: boolean; + /** + * CSS Style to use for the editor component. + */ + style?: CSSProperties; + /** + * Validation function for the column. It takes the new "cell value" as argument. This function should return + * a boolean true/false for isValid, or an EditValidatorObject (so that an error message can be provided). + */ + validator?(cell: Cell, row: Row): boolean | string | EditValidatorObject; + /** + * Data in a select or checkbox. If a checkbox, use a string with a ':'(colon) to separate the two values, ex: Y:N + * The callback function can be used to customize the select options based on other field values within the row. + * If the array is an array of objects, the fields 'text' can be used for the display text and 'value' to specify + * the option's value. + */ + options?: { + values: + | EditSelectOptionValue + | EditCheckboxOptionValue + | ((row: Row) => EditCheckboxOptionValue | EditSelectOptionValue); + }; + /** + * Default value to show in the edit field in the Insert Modal for this column. + */ + defaultValue?: Cell; + /** + * @deprecated Use placeholder inside the attrs field instead. + * Text to display as placeholder text in the editor component. + */ + placeholder?: string; + /** + * Additional attributes for the editor component. + */ + attrs?: EditableAttrs; } + export type SetFilterCallback = (targetValue: any) => boolean; export interface ApplyFilterParameter { callback: SetFilterCallback; } -export type FilterType = 'TextFilter' | 'RegexFilter' | 'SelectFilter' | 'NumberFilter' | 'DateFilter' | 'CustomFilter'; -export interface Filter { +/** + * Text filter type. + */ +export interface TextFilter { /** - * "TextFilter"||"SelectFilter"||"NumberFilter"||"DateFilter"||"RegexFilter"||"YOUR_CUSTOM_FILTER" + * Filter type must be 'TextFilter'. */ - type?: FilterType; + type: 'TextFilter'; /** - * Default value on filter. If type is NumberFilter or DateFilter, this value will like { number||date: xxx, comparator: '>' } - */ - defaultValue?: any; - /** - * Assign a millisecond for delay when trigger filtering, default is 500. + * Delay time in milliseconds after the last key press prior to applying the filter. Defaults to 500ms. */ delay?: number; /** - * Only work on TextFilter. Assign the placeholder text on text and regex filter + * Placeholder text to show in the filter. */ - placeholder?: string | RegExp; + placeholder?: string; /** - * Only work on NumberFilter. Accept an array which conatin the filter condition, like: ['<','>','='] + * Condition. Can be 'eq' (exactly equal) or 'like' (contains the given string). Defaults to 'like'. */ - numberComparators?: string[]; - - /** - * Options for the filter. - */ - options?: any; - - /** - * Comparison condition for the NumberFilter - */ - condition?: string; - - /** - * Get element which represent filter. - */ - getElement?: (filterHandler: (parameters?: ApplyFilterParameter) => void, filterParameters: any) => JSX.Element; - - /** - * Parameters for custom filter - */ - customFilterParameters?: any; + condition?: FilterCondition; + /** + * Default value for the text filter. Defaults to '' + */ + defaultValue?: string; + /** + * CSS Style to use for the select filter. + */ + style?: CSSProperties; } -export interface TableHeaderColumn extends ComponentClass { } -declare const TableHeaderColumn: TableHeaderColumn; - -declare class TableDataSet extends EventEmitter { - constructor(data: any); - setData(data: any): void; - clear(): void; - getData(): any; +export interface SelectFilterOptionsType { + [value: string]: string | number | boolean; + [value: number]: string | number | boolean; } + +/** + * Select filter type + */ +export interface SelectFilter { + /** + * Filter type must be 'SelectFilter' + */ + type: 'SelectFilter'; + /** + * Placeholder text to show in the filter. + */ + selectText?: string; + /** + * Options for the filter select. + */ + options: SelectFilterOptionsType; + /** + * Condition. Can be 'eq' (exactly equal) or 'like' (contains the given string). Defaults to 'like'. + */ + condition?: FilterCondition; + /** + * Default value for the select filter. + */ + defaultValue?: string | number | boolean; + /** + * CSS Style to use for the select filter. + */ + style?: CSSProperties; + /** + * Disable the empty option in the dropdown filter. + */ + withoutEmptyOption?: boolean; +} + +/** + * Regex filter type + */ +export interface RegexFilter { + /** + * Filter type must be 'RegexFilter' + */ + type: 'RegexFilter'; + /** + * Delay time in milliseconds after the last key press prior to applying the filter. Defaults to 500ms. + */ + delay?: number; + /** + * Placeholder text to show in the filter. + */ + placeholder?: string; + /** + * Default value + */ + defaultValue?: string; + /** + * CSS Style to use for the select filter. + */ + style?: CSSProperties; +} + +/** + * Number filter type + */ +export interface NumberFilter { + /** + * Filter type must be 'NumberFilter' + */ + type: 'NumberFilter'; + /** + * Delay time in milliseconds after the last key press prior to applying the filter. Defaults to 500ms. + */ + delay?: number; + /** + * Placeholder text to show in the filter. + */ + placeholder?: string; + /** + * Number filter comparators + */ + numberComparators?: FilterComparator[]; + /** + * Default value for the filter. + */ + defaultValue?: { + /** + * Number value. + */ + number: number; + /** + * Comparator value. + */ + comparator: FilterComparator; + }; + /** + * If this is a select number field, disable the empty option in the dropdown. + */ + withoutEmptyOption?: boolean; + /** + * Specify that the comparator field MUST have a comparator selected. + */ + withoutEmptyComparatorOption?: boolean; + /** + * Specify that the value field MUST have a number value specified. + */ + withoutEmptyNumberOption?: boolean; + /** + * List of number options that can be selected, if the number field is a select dropdown instead of a text edit. + */ + options?: number[]; + /** + * CSS Style to use for the select filter. + */ + style?: { + number: CSSProperties; + comparator: CSSProperties; + }; +} + +/** + * Date filter type + */ +export interface DateFilter { + /** + * Filter type must be 'DateFilter' + */ + type: 'DateFilter'; + /** + * Delay time in milliseconds after the last key press prior to applying the filter. Defaults to 500ms. + */ + delay?: number; + /** + * Date filter comparators + */ + dateComparators?: FilterComparator[]; + /** + * Default value for the filter. + */ + defaultValue?: { + /** + * Date value. String values will be automatically converted to dates. + */ + date: Date | string; + /** + * Comparator value. + */ + comparator: FilterComparator; + }; + /** + * CSS Style to use for the select filter. + */ + style?: { + date: CSSProperties; + comparator: CSSProperties; + }; +} + +/** + * Custom filter type. + */ +export interface CustomFilter { + /** + * Type must be 'CustomFilter' + */ + type: 'CustomFilter'; + /** + * Function to generate the filter component + */ + getElement( + filterHandler: (parameters?: ApplyFilterParameter) => void, + customFilterParameters: object + ): ReactElement; + /** + * Custom filter parameters to be passed to the generator function + */ + customFilterParameters: object; +} + +/** + * Collection of filter types. + */ +export type Filter = TextFilter | SelectFilter | RegexFilter | NumberFilter | DateFilter | CustomFilter; + +/** + * The "value" type for a number filter + */ +export interface NumberFilterValue { + number: number; + comparator: FilterComparator; +} + +/** + * The "value" type for a date filter. + */ +export interface DateFilterValue { + date: Date | string; + comparator: FilterComparator; +} + +/** + * Text Filter's data object. + */ +export interface TextFilterData { + type: 'TextFilter'; + value: string; +} + +/** + * Select Filter's data object. + */ +export interface SelectFilterData { + type: 'SelectFilter'; + value: string; +} + +/** + * Regex Filter's data object. + */ +export interface RegexFilterData { + type: 'RegexFilter'; + value: string; +} + +/** + * Number Filter's data object. + */ +export interface NumberFilterData { + type: 'NumberFilter'; + value: NumberFilterValue; +} + +/** + * Date Filter's data object. + */ +export interface DateFilterData { + type: 'DateFilter'; + value: DateFilterValue; +} + +/** + * Data object returned for an array filter. + */ +export interface ArrayFilterData { + type: 'ArrayFilter'; + value: string[] | number[]; +} + +/** + * Valid types for the "value" field inside a filter's data object. + */ +export type FilterValueData = string | number | string[] | number[] | DateFilterValue | NumberFilterValue; + +/** + * Combined types of filter data objects. + */ +export type FilterValue = + | TextFilterData + | SelectFilterData + | RegexFilterData + | NumberFilterData + | DateFilterData + | ArrayFilterData; + +/** + * Filter object that can be passed to BootstrapTableFilter.handleFilterData function. + */ +export interface FilterData { + [dataField: string]: FilterValue; +} + +/** + * TableHeaderColumn class definition. + */ +export class TableHeaderColumn extends Component { + /** + * Function to reset the filter on this column to the default values. + */ + cleanFiltered(): void; + /** + * Apply a filter value. + */ + applyFilter(value: FilterValueData): void; +} + +/** + * Customize the options for Keyboard Navigation. + */ +export interface KeyboardNavigation { + /** + * Return a style object which will be applied on the navigating cell. + */ + customStyle?: CSSProperties; + /** + * Set to false to disable click to navigate, usually user wants to click to select row instead of navigation. + */ + clickToNav?: boolean; + /** + * Return a style object which will be applied on the both of navigating and editing cell. + */ + customStyleOnEditCell?: CSSProperties; + /** + * When set to true, pressing ENTER will begin to edit the cell if cellEdit is also enabled. + */ + enterToEdit?: boolean; + /** + * When set to true, pressing ENTER will expand or collapse the current row. + */ + enterToExpand?: boolean; +} + +/** + * Input properties for the expandColumnComponent function when customising the expand indicator. + */ +export interface ExpandColumnComponentProps { + /** + * True if the current row is able to be expanded. + */ + isExpandableRow: boolean; + /** + * True if the current row is currently expanded. + */ + isExpanded: boolean; +} + +/** + * Customize the options for expand row feature. + */ +export interface ExpandColumnOptions { + /** + * Will enable an indicator column at first column if true. Default is false. + */ + expandColumnVisible?: boolean; + /** + * a callback function to customize the appearance of the indicator column. + */ + expandColumnComponent?(props: ExpandColumnComponentProps): string | ReactElement; + /** + * set the width of indicator column. + */ + columnWidth?: number | string; + /** + * If both an indicator column and a selection column are displaying, this specifies whether the indicator column + * should be shown first. Default is true, false will move the expand indicator column after selection column. + */ + expandColumnBeforeSelectColumn?: boolean; +} + +/** + * Properties provided in the callback to create a custom component for the selection column radio/checkboxes + */ +export interface CustomSelectProps { + /** + * What type of selection should be used? Values are 'radio' (single) or 'checkbox' (multiple). + */ + type: SelectRowMode; + /** + * True if the current row being drawn is selected. + */ + checked: boolean; + /** + * True if the current row being drawn is not permitted to be selected. + */ + disabled: boolean; + /** + * Callback that should be used when someone selects the current row. + * `event`: the current event target + * `rowIndex`: the index of the current row being toggled. + */ + onChange(event: any, rowIndex: string | number): void; + /** + * Index for the row currently being rendered. + * If the rowIndex is 'Header', it means this rendering is for header selection column. + */ + rowIndex: number | string; + /** + * The indeterminate flag is used to indicate that there are some rows selected, but it is neither all rows nor + * no rows. As far as the select all checkbox is concerned, it is neither true nor false. + */ + indeterminate: boolean; +} + +/** + * Details of the column settings, provided to the Options.onSearchChange callback function. + * The values for these settings come from the properties for a column. + * + * Note: the list of options is poorly documented. This list comes from double-checking the + * react-bootstrap-table source code to check what properties actually get passed to the + * onSearchChange callback function. + */ +export interface ColumnDescription { + /** + * Name of the column. + * Comes from TableHeader.dataField property. + */ + name: string; + /** + * Column text alignment setting + * Comes from TableHeader.dataAlign property. + */ + align: DataAlignType; + /** + * Column sorting setting. If true, the column can be used to sort the data. + * Comes from TableHeader.dataSort property. + */ + sort: boolean; + /** + * Column data format function. + * Comes from TableHeader.dataFormat property. + */ + format(cell: Cell, row: Row, formatExtraData: any, rowIndex: number): string | ReactElement; + /** + * The formatExtraData setting for the column. + * Comes from TableHeader.formatExtraData property. + */ + formatExtraData: any; + /** + * Whether data should be filtered based on the formatted value, or the raw data value. + * Comes from TableHeader.filterFormatted property. + */ + filterFormatted: boolean; + /** + * Filter function for the column. + * Comes from TableHeader.filterValue property. + */ + filterValue(cell: Cell, row: Row): any; + /** + * Setting for whether the data in this column can be edited. + * Comes from TableHeader.editable property. + */ + editable: boolean | Editable | ((cell: Cell, row: Row, rowIndex: number, columnIndex: number) => boolean | string | EditValidatorObject); + /** + * Custom editor settings to use when editing the data in this column. + * Comes from TableHeader.customEditor property. + */ + customEditor: CustomEditor; + /** + * Flag to indicate whether this column should be visible or not. + * Comes from TableHeader.hidden property. + */ + hidden: boolean; + /** + * Flag to indicate whether this column should be hidden on the insert modal. + * Comes from TableHeader.hiddenOnInsert property. + */ + hiddenOnInsert: boolean; + /** + * Flag to indicate whether the data in this column should be included in a search. + * Comes from TableHeader.searchable property. + */ + searchable: boolean; + /** + * Custom className setting for this column. + * Comes from TableHeader.columnClassName property. + */ + className: string | ((cell: Cell, row: Row, rowIndex: number, columnIndex: number) => string); + /** + * Custom className setting for this column when a cell in the column is being edited. + * Comes from TableHeader.editColumnClassName property. + */ + editClassName: string | ((cell: Cell, row: Row) => string); + /** + * Custom className setting for this column when a cell in the column contains invalid data. + * Comes from TableHeader.invalidEditColumnClassName property. + */ + invalidEditColumnClassName: string | ((cell: Cell, row: Row) => string); + /** + * Custom title to display for this column. + * Comes from TableHeader.columnTitle property. + */ + columnTitle: boolean; + /** + * Width setting for this column. + * Comes from TableHeader.width property. + */ + width: string; + /** + * Custom header value/component/children to use for this column. + * Comes from TableHeader.headerText || TableHeader.children properties. + */ + text: string | number | boolean | ReactElement; + /** + * Custom sort function to use for this column. + * Comes from TableHeader.sortFunc property. + */ + sortFunc(a: any, b: any, order: SortOrder, sortField: string, extraData: any): number; + /** + * Extra data to be provided to the search function for this column. + * Comes from TableHeader.sortFuncExtraData property. + */ + sortFuncExtraData: any; + /** + * Flag to indicate whether this column should be included in a CSV export. + * Comes from TableHeader.export property. + */ + export: boolean; + /** + * Flag to indicate whether this column is expandable. + * Comes from TableHeader.expandable property. + */ + expandable: boolean; + /** + * Custom attributes (e.g. {'data-attr': 'test'}) to be applied to cells in this column. + * Comes from TableHeader.tdAttr property. + */ + attrs: CustomAttrs; + /** + * Custom attributes (e.g. {'data-attr': 'test'}) to use for cells that are being edited in this column. + * Comes from TableHeader.editTdAttr property. + */ + editAttrs: CustomAttrs; + /** + * CSS style properties to use for cells in this column. + * Comes from TableHeader.tdStyle property. + */ + style: CSSProperties; +} + +/** + * Props provided to the Options.toolBar callback function for creating a custom toolbar. + */ +export interface ToolBarProps { + /** + * Rendered components to use in the toolbar. + */ + components: ButtonGroupProps & { + /** + * Search panel component. + */ + searchPanel: ReactElement; + /** + * Button group components. + */ + btnGroup: ReactElement; // button groups JSX + /** + * The individual search field. + */ + searchField: ReactElement; // search field JSX + /** + * The button to clear the search field. + */ + clearBtn: ReactElement; // clear search field JSX + }; + /** + * Event callbacks to use with a custom toolbar. + */ + event: { + /** + * Callback to activate the insert row modal window. + */ + openInsertModal(): void; + /** + * Callback to close the insert row modal window. + */ + closeInsertModal(): void; + /** + * Callback to delete selected row(s) from the table. + */ + dropRow(): void; + /** + * Callback to toggle between showing all rows and showing only selected rows. + */ + showOnlyToogle(): void; + /** + * Callback to export the table to a CSV file. + */ + exportCSV(): void; + /** + * Callback to apply a search. + */ + search(): void; + }; +} + +/** + * Left-hand side Button elements (used when customizing the toolbar). + */ +export interface ButtonGroupProps { + /** + * Export to CSV button. + */ + exportCSVBtn: ReactElement; + /** + * Insert button (to add a row). + */ + insertBtn: ReactElement; + /** + * Delete button. + */ + deleteBtn: ReactElement; + /** + * Toggle button to switch between showing all rows and showing selected rows only. + */ + showSelectedOnlyBtn: ReactElement; +} + +/** + * Properties that are given to the Options.searchPanel callback function. + */ +export interface SearchPanelProps { + /** + * Default search field component. + */ + searchField: ReactElement; + /** + * Default clear search field button component. + */ + clearBtn: ReactElement; + /** + * The default search text. + */ + defaultValue: string; + /** + * The placeholder text for the search field. + */ + placeholder: string; + /** + * A callback to trigger the clear search field event. + */ + clearBtnClick(): void; + /** + * A callback to trigger a search, takes the search text as an input. + */ + search(searchText: string): void; +} + +/** + * Properties passed as props to the Options.paginationPanel function when generating a custom pagination panel. + */ +export interface PaginationPanelProps { + /** + * Current page number + */ + currPage: number; + /** + * Current number of rows to show per page + */ + sizePerPage: number; + /** + * Choices for size per page dropdown component + */ + sizePerPageList: SizePerPageList; + /** + * Index number for the first page of data. + * Comes from Options.pageStartIndex. + */ + pageStartIndex: number; + /** + * Callback function to use to change page. + */ + changePage(pageNum: number): void; + /** + * Callback function to trigger the toggle on sizePerPage dropdown button + */ + toggleDropDown(): void; + /** + * Callback function to use to set a new size per page. + */ + changeSizePerPage(sizePerPage: number): void; + /** + * The basic components for the pagination panel, provided here so that you have the option to use some of them + * if you don't want to customize all of them. + */ + components: { + /** + * Text/element to display when displaying the total number of rows. + */ + totalText: string | ReactElement; + /** + * Default sizePerPageDropdown component. + */ + sizePerPageDropDown: SizePerPageDropDown; + /** + * The default list of page change buttons. + */ + pageList: HTMLUListElement; + }; +} + +/** + * Properties given to the Options.sizePerPageDropDown function used to generate a custom sizePerPage component to + * render in the pagination panel. + */ +export interface SizePerPageFunctionProps { + /** + * Flag to indicate that the sizePerPage dropdown should currently be 'open'. + */ + open: boolean; + /** + * Flag indicating that the sizePerPage dropdown should be hidden. + */ + hideSizePerPage: boolean; + /** + * Current size per page as a string value. + */ + currSizePerPage: string; + /** + * Array of the size per page options to display in the dropdown. + */ + sizePerPageList: SizePerPageList; + /** + * On-click toggle function callback to open/close the size per page dropdown list. + */ + toggleDropDown(): void; + /** + * Callback function to use to change the current size per page. + */ + changeSizePerPage(newSizePerPage: number): void; +} + +/** + * Custom Editor Props passed to the getElement function in the TableHeader.customEditor object. + */ +export interface CustomEditorProps extends EditableAttrs { + /** + * The row data for the cell being edited. + */ + row: Row; + /** + * Default value for the editor cell. + */ + defaultValue: Cell; + /** + * Contents of the customEditorParameters object. + */ + [parameterName: string]: any; +} + +/** + * Object to provide a custom editor component to use for a table column. + * @see: https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/cell-edit/custom-cell-edit-table.js + */ +export interface CustomEditor { + /** + * Required. Function to use to create the custom cell editor. Takes two parameters: + * `onUpdate`: callback function to call to update the value inside the cell. + * `props`: + */ + getElement(onUpdate: (updatedCell: Cell) => void, props: CustomEditorProps): ReactElement; + /** + * Additional parameters to pass to the getElement function inside the props argument. + */ + customEditorParameters?: object; +} + +/** + * Validation object that can be returned from cell editing validation. + */ +export interface EditValidatorObject { + /** + * Boolean flag indicating whether the cell value is valid. + */ + isValid: boolean; + /** + * Notification object providing details on the validation result. + */ + notification: { + /** + * One of 'success' or 'error' + */ + type: EditValidatorType; + /** + * A text message explaining the validation result. + */ + msg: string; + /** + * A text title explaining the validation result. + */ + title: string; + }; +} + +/** + * Properties that can be passed to the InsertButton, DeleteButton, ExportCSVButton and ClearSearchButton + * components. + */ +export interface ButtonProps { + /** + * Label for the button + */ + btnText?: string; + /** + * Bootstrap css style class for the button, e.g. 'btn-warning' + */ + btnContextual?: string; + /** + * Custom class for the button + */ + className?: string; + /** + * Glyphicon glyph string for the button, e.g. 'glyphicon-edit' + */ + btnGlyphicon?: string; + /** + * Function to be called to activate the normal onClick functionality for this button. + */ + onClick?(e: React.MouseEvent): void; +} + +/** + * Properties that can be passed to the ShowSelectedOnlyButton component. + */ +export interface ShowSelectedButtonProps { + /** + * Label for when clicking the button will toggle the table back into "show all rows" mode. + */ + showAllText?: string; + /** + * Label for when clicking the button will toggle the table into "show only selected rows" mode. + */ + showOnlySelectText?: string; + /** + * Bootstrap css style class for the button, e.g. 'btn-warning' + */ + btnContextual?: string; + /** + * Custom class for the button + */ + className?: string; + /** + * Glyphicon glyph string for the button, e.g. 'glyphicon-edit' + */ + btnGlyphicon?: string; + /** + * Function to be called to activate the normal onClick functionality for this button. + */ + onClick?(e: React.MouseEvent): void; +} + +/** + * Properties that can be passed to the SearchField component. + */ +export interface SearchFieldProps { + /** + * Custom css class name + */ + className?: string; + /** + * Default value for the search field + */ + defaultValue?: string; + /** + * Placeholder text for the search field + */ + placeholder?: string; + /** + * callback funciton to call when a key is released + */ + onKeyUp?(e: React.KeyboardEvent): void; +} + +/** + * Interface that must be implemented for a custom search field component. + */ +export interface SearchFieldInterface { + /** + * getValue should return the current search text. + */ + getValue(): string; + /** + * setValue should update the current search text to the given value. + */ + setValue(search: string): void; +} + +/** + * Modal Column data passed to Options.insertModal and Options.insertModalBody. + */ +export interface InsertModalColumnDescription { + /** + * Flag to indicate that this is the key field for the column. It is only present if there is more than + * one column in the table. + * Comes from TableHeader.isKey field. + */ + isKey?: boolean; + /** + * Header text/element for the column. + * Comes from TableHeader.headerText or TableHeader.children. + */ + name: string | ReactElement; + /** + * Field name for the column data. + * Comes from TableHeader.dataField. + */ + field: string; // children.props.dataField, + /** + * Flag to indicate whether this column is editable. + * Comes from TableHeader.editable. + */ + editable: boolean | Editable | ((cell: Cell, row: Row, rowIndex: number, columnIndex: number) => boolean | string | EditValidatorObject); + /** + * Custom element to use for the Insert field element. + * Comes from TableHeader.customInsertEditor. + */ + customInsertEditor( + column: InsertModalColumnDescription, + attr: EditableAttrs, + editorClass: string, + ignoreEditable: boolean, + defaultValue: Cell + ): ReactElement | boolean; + /** + * Flag to indicate whether this column should be hidden on the Insert Modal page. + * Comes from TableHeader.hiddenOnInsert. + */ + hiddenOnInsert: boolean; // children.props.hiddenOnInsert, + /** + * Flag to indicate whether the table should check that a key does not already exist. + * Comes from TableHeader.keyValidator. + */ + keyValidator: boolean; // children.props.keyValidator + /** + * Flag to indicate that the field should be auto-generated rather than edited. It is only present if there is more + * than one column in the table. + * Comes from TableHeader.autoValue. + */ + autoValue?: boolean; + /** + * Format function for the field. It is only present if there is more than one column in the table. Value is either + * 'false', meaning that there is no format function present, or a wrapper function that returns the formatted string + * content for the field using the TableHeader.dataFormat function to generate that string. + * + * Based on from TableHeader.dataFormat, but is applied as a wrapper function around that function. + */ + format?: boolean | ((cell: Cell) => string); +} + +/** + * Properties that can be passed to the InsertModalHeader component. + */ +export interface InsertModalHeaderProps { + /** + * Header class name. + */ + className?: string; + /** + * Title to display in the header. + */ + title?: string; + /** + * Callback function to call prior to closing the Insert Modal window. + */ + beforeClose?(e: SyntheticEvent): void; + /** + * Callback function to call to close the Insert Modal window. + */ + onModalClose?(closeModal: () => void): void; + /** + * Set to true to hide the close button. Default is false. + */ + hideClose?: boolean; + /** + * Bootstrap version. + */ + version?: BootstrapVersion; +} + +/** + * Properties that can be passed to the InsertModalFooter component. + */ +export interface InsertModalFooterProps { + /** + * Header class name. + */ + className?: string; + /** + * Text to display on the Save button + */ + saveBtnText?: string; + /** + * Text to display on the Close button + */ + closeBtnText?: string; + /** + * Bootstrap css class name for the close button, example: 'btn-warning' + */ + closeBtnContextual?: string; + /** + * Bootstrap css class name for the save button, example: 'btn-success' + */ + saveBtnContextual?: string; + /** + * Custom class name for the close button. + */ + closeBtnClass?: string; + /** + * Custom class name for the save button. + */ + saveBtnClass?: string; + /** + * Callback function to call prior to closing the Insert Modal window. + */ + beforeClose?(e: SyntheticEvent): void; + /** + * Callback function to call to close the Insert Modal window. + */ + onModalClose?(closeModal: () => void): void; + /** + * Callback function to be called prior to saving the new row. + */ + beforeSave?(e: SyntheticEvent): void; + /** + * Callback function to be called to save the new row. + */ + onSave?(save: () => void): void; +} + +/** + * Interface that must be implemented by a custom insert modal body component. + */ +export interface ModalBodyInterface { + /** + * The required getFieldValue method that must be implemented on a customized insert modal body that returns the + * new row data when the save button is clicked in the modal window. + */ + getFieldValue(): Row; +} + +/** + * Properties that can be given to the SizePerPageDropDown component. + */ +export interface SizePerPageDropDownProps { + /** + * Custom class name to use for the component. + */ + className?: string; + /** + * Bootstrap css style class for the button, e.g. 'btn-warning' + */ + btnContextual?: string; + /** + * Whether the button menu should 'dropup' or 'dropdown'. + */ + variation?: DropDirection; + /** + * Callback function that should be triggered when the user clicks on the dropdown button. + */ + onClick?(toggleDropDown: () => void): void; + /** + * Current size per page + */ + currSizePerPage?: string; + /** + * Size Per Page options list + */ + options?: number[] | Array<{ text: string, value: number }>; + /** + * Flag to indicate that the dropdown is open + */ + open?: boolean; + /** + * Flag to indicate that the dropdown is currently hidden + */ + hidden?: boolean; +} + +/** + * Default InsertButton component. Can be used to create custom toolbars, etc. + */ +export class InsertButton extends Component {} + +/** + * Default DeleteButton component. Can be used to create custom toolbars, etc. + */ +export class DeleteButton extends Component {} + +/** + * Default ExportCSVButton component. Can be used to create custom toolbars, etc. + */ +export class ExportCSVButton extends Component {} + +/** + * Default ShowSelectedOnlyButton component for toggling between showing all rows or only + * selected rows. Can be used to create custom toolbars, etc. + */ +export class ShowSelectedOnlyButton extends Component {} + +/** + * Default SearchField component. Can be used to create custom toolbars, etc. + */ +export class SearchField extends Component implements SearchFieldInterface { + getValue(): string; + setValue(search: string): void; +} + +/** + * Default ClearSearchButton component. Can be used to create custom toolbars, etc. + */ +export class ClearSearchButton extends Component {} + +/** + * Default header component used for the Insert modal. Can be used to customize the + * insert row modal form. + */ +export class InsertModalHeader extends Component {} + +/** + * Default footer component used for the Insert modal. Can be used to customize the + * insert row modal form. + */ +export class InsertModalFooter extends Component {} + +/** + * Default size per page component used in the pagination row. Can be used to customize + * the size per page dropdown. + */ +export class SizePerPageDropDown extends Component {} diff --git a/types/react-bootstrap-table/react-bootstrap-table-tests.tsx b/types/react-bootstrap-table/react-bootstrap-table-tests.tsx index c8f25dfa56..524c036423 100644 --- a/types/react-bootstrap-table/react-bootstrap-table-tests.tsx +++ b/types/react-bootstrap-table/react-bootstrap-table-tests.tsx @@ -1,8 +1,43 @@ import * as React from 'react'; import { render } from 'react-dom'; -import { BootstrapTable, TableHeaderColumn, ApplyFilterParameter, Filter } from 'react-bootstrap-table'; +import { + ApplyFilterParameter, + BootstrapTable, + ButtonGroupProps, + Cell, + CellEdit, + ColumnDescription, + CustomSelectProps, + DeleteButton, + EditableAttrs, + EditValidatorObject, + ExpandColumnComponentProps, + ExpandColumnOptions, + ExportCSVButton, + Filter, + FilterData, + FooterData, + InsertButton, + InsertModalColumnDescription, + InsertModalFooter, + InsertModalHeader, + ModalBodyInterface, + Options, + PaginationPanelProps, + SearchField, + SearchFieldInterface, + SearchFieldProps, + SearchPanelProps, + SelectRow, + ShowSelectedOnlyButton, + SizePerPageDropDown, + SortOrder, + TableHeaderColumn, + ToolBarProps +} from 'react-bootstrap-table'; -const products = [{ +interface Product { id: number; name: string; price: number; } +const products: Product[] = [{ id: 1, name: "Item name 1", price: 100 @@ -32,7 +67,8 @@ const qualityType = { 2: 'unknown' }; -function enumFormatter(cell: any, row: any, enumObject: any) { +function enumFormatter(cell: any, row: any, enumObject: any, rowIndex: number) { + console.log(`The row index: ${rowIndex}`); return enumObject[cell]; } @@ -91,7 +127,7 @@ class RemoteProps extends React.Component { return remoteObj; }} options={{ - onCellEdit: (row: any, fieldName: string, value: any) => { console.info(row); } + onCellEdit: (row: any, fieldName: string, value: any) => { console.info(row); return value; } }} > Product ID @@ -145,27 +181,20 @@ const thStyleExample = Product Price ; -// Adopted from https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-header-span/column-header-span-complex.js -export default class ColumnHeaderSpanComplex extends React.Component { +/** + * Adopted from https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-header-span/column-header-span-complex.js + */ +class ColumnHeaderSpanComplex extends React.Component { render() { - const selectRow = { - mode: 'checkbox', - bgColor: 'rgb(238, 193, 213)' - }; - - const cellEdit = { - mode: 'click', - blurToSave: true - }; + const options: Options = { exportCSVSeparator: '##' }; return ( - + ID Product name price Coupon - In stock + In stock Customer name order @@ -173,3 +202,1335 @@ export default class ColumnHeaderSpanComplex extends React.Component { ); } } + +/** + * Pagination options + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/pagination/custom-pagination-table.js + */ +class PaginationTable extends React.Component { + sizePerPageListChange = (sizePerPage: number) => { + alert(`sizePerPage: ${sizePerPage}`); + } + + onPageChange = (page: number, sizePerPage: number) => { + alert(`page: ${page}, sizePerPage: ${sizePerPage}`); + } + + renderShowsTotal = (start: number, to: number, total: number) => { + return ( +

    + From {start} to {to}, totals is {total}  (its a customize text) +

    + ); + } + + render() { + const options: Options = { + onPageChange: this.onPageChange, + onSizePerPageList: this.sizePerPageListChange, + page: 2, // which page you want to show as default + sizePerPageList: [{ + text: '5', value: 5 + }, { + text: '10', value: 10 + }, { + text: 'All', value: products.length + }], // you can change the dropdown list for size per page + sizePerPage: 5, // which size per page you want to locate as default + pageStartIndex: 0, // where to start counting the pages + paginationSize: 3, // the pagination bar size. + prePage: 'Prev', // Previous page button text + nextPage: 'Next', // Next page button text + firstPage: 'First', // First page button text + lastPage: 'Last', // Last page button text + prePageTitle: 'Go to previous', // Previous page button title + nextPageTitle: 'Go to next', // Next page button title + firstPageTitle: 'Go to first', // First page button title + lastPageTitle: 'Go to Last', // Last page button title + paginationShowsTotal: this.renderShowsTotal, // Accept bool or function + paginationPosition: 'top', // default is bottom, top and both is all available + keepSizePerPageState: true, // default is false, enable will keep sizePerPage dropdown state(open/clode) when external rerender happened + hideSizePerPage: true, // You can hide the dropdown for sizePerPage + alwaysShowAllBtns: true, // Always show next and previous button + withFirstAndLast: false, // Hide the going to First and Last page button + hidePageListOnlyOnePage: true // Hide the page list if only one page. + }; + + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Adopted from https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/cell-edit/blur-to-escape-table.js + */ +class BlurToEscapeTable extends React.Component { + render() { + const cellEditProp: CellEdit = { + mode: 'click', + blurToEscape: true + }; + + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Cell classnames, row saving hooks. + * @see https://githum.com/AllenFang/react-bootstrap-table/blob/master/examples/js/cell-edit/cell-edit-classname.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/cell-edit/cell-edit-hook-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/insert-row-table.js + */ +class EditCellClassNameTable extends React.Component { + jobNameValidator = (value: string) => { + const response: EditValidatorObject = { isValid: true, notification: { type: 'success', msg: '', title: '' } }; + if (!value) { + response.isValid = false; + response.notification.type = 'error'; + response.notification.msg = 'Value must be inserted'; + response.notification.title = 'Requested Value'; + } else if (value.length < 10) { + response.isValid = false; + response.notification.type = 'error'; + response.notification.msg = 'Value must have 10+ characters'; + response.notification.title = 'Invalid Value'; + } + return response; + } + + jobStatusValidator = (value: string) => { + const nan = isNaN(parseInt(value, 10)); + if (nan) { + return 'Job Status must be a integer!'; + } + return true; + } + + invalidJobStatus = (cell: string, row: any) => { + console.log(`${cell} at row id: ${row.id} fails on editing`); + return 'invalid-jobstatus-class'; + } + + editingJobStatus = (cell: string, row: any) => { + console.log(`${cell} at row id: ${row.id} in current editing`); + return 'editing-jobstatus-class'; + } + + onBeforeSaveCellAsync = (row: any, cellName: string, cellValue: any, done: (ok: boolean) => void): boolean | 1 => { + setTimeout(() => { + done(false); // it's not ok to save :( + }, 3000); + return 1; // return 1 === async operation. + } + + onAfterSaveCell(row: any, cellName: string, cellValue: any) { + alert(`Save cell ${cellName} with value ${cellValue}`); + let rowStr = ''; + for (const prop in row) { + rowStr += `${prop}: ${row[prop]}\n`; + } + alert('The whole row :\n' + rowStr); + } + + onAfterInsertRow = (row: any) => { + let newRowStr = ''; + + for (const prop in row) { + newRowStr += `${prop}: ${row[prop]} \n`; + } + alert('The new row is:\n ' + newRowStr); + } + + render() { + const cellEditProp: CellEdit = { + mode: 'dbclick', + blurToSave: true, + beforeSaveCell: this.onBeforeSaveCellAsync, + afterSaveCell: this.onAfterSaveCell + }; + const options: Options = { + afterInsertRow: this.onAfterInsertRow // A hook for after insert rows + }; + const jobs = [ + { id: 1, status: '200', name: 'Item name 1', type: 'B', active: 'N' }, + { id: 2, status: '200', name: 'Item name 2', type: 'B', active: 'Y' } + ]; + const jobTypes = ['A', 'B', 'C', 'D']; + + return ( + + Job ID + Job Status + Job Name + Job Type + Active + + ); + } +} + +/** + * Multiple field sorting, filtering, searching and clearing + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/filter-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/multi-search-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/search-clear-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/strict-multi-search-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-search.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/custom-caret-sort-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/custom-sort-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/sort-style-table.js + */ +class MultiSortAndFiltering extends React.Component { + tableRef: BootstrapTable | null; + idRef: TableHeaderColumn | null; + state = { data: products }; + + onSortChange = (name: string, order: SortOrder) => { + console.log(`Next sort = ${name}:${order}`); + } + + cleanSort = () => { this.tableRef.cleanSort(); }; + + cleanSelected = () => { this.tableRef.cleanSelected(); }; + + onFilterChange = (filter: FilterData) => { + Object.keys(filter).forEach((column) => { + console.log(`Filtering ${column}: ${JSON.stringify(filter[column])}`); + }); + } + + cleanFilters = () => { this.idRef.cleanFiltered(); }; + + afterColumnFilter = (filterConds: ReadonlyArray, result: ReadonlyArray) => { + console.log('Filter Conditions: '); + filterConds.forEach((filterCond: FilterData) => { + Object.keys(filterCond).forEach((fieldName: string) => + console.log(`Filter column = ${fieldName}, Filter value = ${filterCond[fieldName]}`)); + }); + console.log('Result is:'); + for (const resultItem of result) { + console.log(`Product: ${resultItem.id}, ${resultItem.name}, ${resultItem.price}`); + } + } + + onSearchChange = (searchText: string, colInfos: ReadonlyArray, multiColumnSearch: boolean) => { + this.setState({ data: products.filter((product) => product.name = searchText) }); + } + + afterSearch = (searchText: string, result: ReadonlyArray) => { + console.log(`Your search text is ${searchText}`); + console.log('Result is:'); + for (const resultItem of result) { + console.log(`Product: ${resultItem.id}, ${resultItem.name}, ${resultItem.price}`); + } + } + + getNameCaret = (direction: SortOrder | null, fieldName: string) => + (direction === 'asc') + ? ( up) + : (direction === 'desc') + ? ( down) + : ( up/down) + + revertSortFunc = (a: Product, b: Product, order: SortOrder) => + (order === 'desc') ? a.price - b.price : b.price - a.price + + customSortStyle = (order: SortOrder, dataField: string) => + (order === 'desc') ? 'sort-desc' : 'sort-asc' + + render() { + const options: Options = { + onSortChange: this.onSortChange, + onFilterChange: this.onFilterChange, + noDataText: 'This is custom text for empty data', + withoutNoDataText: false, + afterColumnFilter: this.afterColumnFilter, + onSearchChange: this.onSearchChange, + afterSearch: this.afterSearch, + clearSearch: true, + sortIndicator: true + }; + return ( +
    + + + Product ID + Product Name + =', '<=', '='] }}>Product Price + +
    + ); + } +} + +/** + * Sort with extra data. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/custom-sort-with-extra-data-table.js + */ +class CustomSortWithExtraDataTable extends React.Component { + sortByName = (a: any, b: any, order: SortOrder, field: string, enumObject: any) => { + if (order === 'desc') { + if (enumObject[a[field]] > enumObject[b[field]]) { + return -1; + } else if (enumObject[a[field]] < enumObject[b[field]]) { + return 1; + } + return 0; + } + if (enumObject[a[field]] < enumObject[b[field]]) { + return -1; + } else if (enumObject[a[field]] > enumObject[b[field]]) { + return 1; + } + return 0; + } + + render() { + return ( + + Product ID + Product Name + + Product Quality + + ); + } +} + +/** + * Render custom pagination with provided SizePerPageDropDown component. + */ +class CustomPagination extends React.Component { + renderPagination = (props: PaginationPanelProps) => ( +
    + +
    + + + +
    +
    + ) + + render() { + const options: Options = { + paginationPanel: this.renderPagination + }; + + return ( + + + + + + ); + } +} + +/** + * Customize the entire insert modal. + * Adapted from https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/custom-insert-modal.js + */ +class CustomModal extends React.Component { + handleSaveBtnClick = (columns: ReadonlyArray, onSave: (row: any) => void) => { + const newRow: {[field: string]: string} = {}; + columns.forEach((column, i) => { + newRow[column.field] = (this.refs[column.field] as HTMLInputElement).value; + }, this); + onSave(newRow); + } + + createCustomModal = ( + onModalClose: () => void, + onSave: (row: any) => void, + columns: ReadonlyArray, + validateState: { [dataField: string]: string }, + ignoreEditable: boolean + ) => ( +
    +

    Custom Insert Modal

    +
    + { + columns.map((column, i) => { + const { + editable, + format, + field, + name, + hiddenOnInsert + } = column; + + if (hiddenOnInsert) { + return null; + } + const error = validateState[field] ? + ({validateState[field]}) : + null; + return ( +
    + + + {error} +
    + ); + }) + } +
    +
    + + +
    +
    + ) + + render() { + const options: Options = { + insertModal: this.createCustomModal + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Custom Insert Modal Fields, both as a custom component and as custom fields. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/custom-insert-modal-field.js + */ +class SalesRadioField extends React.Component<{editorClass: string, ignoreEditable: boolean}> { + yes: HTMLInputElement | null; + no: HTMLInputElement | null; + + getFieldValue = () => { + return this.yes.checked ? 'Yes' : 'No'; + } + + render() { + return ( +
    + + +
    + ); + } +} +class CustomInsertModalFieldTable extends React.Component { + customKeyField = ( + column: InsertModalColumnDescription, + attr: EditableAttrs, + editorClass: string, + ignoreEditable: boolean + ) => { + const seqId = products.length; + return ( + + ); + } + + customNameField = ( + column: InsertModalColumnDescription, + attr: EditableAttrs, + editorClass: string, + ignoreEditable: boolean, + defaultValue: any) => { + const fruits = ['banana', 'apple', 'orange', 'tomato', 'strawberries']; + return ( + + ); + } + + customSaleField = ( + column: InsertModalColumnDescription, + attr: EditableAttrs, + editorClass: string, + ignoreEditable: boolean, + defaultValue: any) => { + return ( + + ); + } + + render() { + return ( + + Product ID + Product Name + On Sales? + Product Price + + ); + } +} + +/** + * Custom modal header, body & footer. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/default-custom-insert-modal-header.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/custom-insert-modal-body.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/default-custom-insert-modal-footer.js + */ +interface MyCustomBodyProps { + columns: ReadonlyArray; + validateState: { [dataField: string]: string }; + ignoreEditable: boolean; +} +class MyCustomBody extends React.Component implements ModalBodyInterface { + getFieldValue() { + const newRow: {[field: string]: string} = {}; + this.props.columns.forEach((column, i) => { + newRow[column.field] = (this.refs[column.field] as HTMLInputElement).value; + }, this); + return newRow; + } + + render() { + const { columns, validateState } = this.props; + return ( +
    +

    Custom body

    +
    + { + this.props.columns.map((column, i) => { + const { + editable, + format, + field, + name, + hiddenOnInsert + } = column; + + if (hiddenOnInsert) { + return null; + } + const error = validateState[field] ? + ({validateState[field]}) : + null; + return ( +
    + + + {error} +
    + ); + }) + } +
    +
    + ); + } +} +class DefaultCustomInsertModalHeaderFooterTable extends React.Component { + createCustomModalFooter = (closeModal: () => void, save: () => void) => { + return ( + {}} + beforeSave={(e) => {}} + onModalClose={closeModal} + onSave={save} /> + ); + } + + createCustomModalHeader = (closeModal: () => void, save: () => void) => { + return ( + { }} + onModalClose={closeModal} + hideClose={true} /> + ); + } + + createCustomModalBody = ( + columns: ReadonlyArray, + validateState: { [dataField: string]: string }, + ignoreEditable: boolean + ) => ( + + ) + + render() { + const options: Options = { + insertModalFooter: this.createCustomModalFooter, + insertModalHeader: this.createCustomModalHeader, + insertModalBody: this.createCustomModalBody + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Custom Toolbar, including Search Panel & Buttons, and custom delete confirmation. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/toolbar/custom-button-group.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/toolbar/custom-toolbar-1.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/search/default-custom-search-field.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/search/custom-search-panel-1.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/search/fully-custom-search-field.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-button/default-custom-insert-button.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/delete-button/default-custom-delete-button.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/csv-button/default-custom-csv-button.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/del-row-custom-confirm.js + */ +class MySearchField extends React.Component implements SearchFieldInterface { + field: SearchField | null; + + getValue() { + return this.field.getValue(); + } + + setValue(search: string) { + this.field.setValue(search); + } + + render() { + const { ...rest} = this.props; + return ( + { this.field = node; }} + /> + ); + } +} +class CustomButtonGroup extends React.Component { + createInsertButton = (onClick: (e: React.MouseEvent<{}>) => void) => ( + + ) + + createDeleteButton = (onClick: (e: React.MouseEvent<{}>) => void) => ( + + ) + + createExportCSVButton = (onClick: (e: React.MouseEvent<{}>) => void) => ( + + ) + + createShowSelectedOnlyButton = (onClick: (e: React.MouseEvent<{}>) => void, showSelected: boolean) => ( + + ) + + createCustomButtonGroup = (props: ButtonGroupProps) => ( +
    + {props.showSelectedOnlyBtn} + {props.exportCSVBtn} + {props.insertBtn} + {props.deleteBtn} + +
    + ) + + createCustomSearchField = (props: SearchFieldProps) => ( + + ) + + createCustomClearSearch = (onClick: (e: React.MouseEvent<{}>) => void) => ( + + ) + + createCustomSearchPanel = (props: SearchPanelProps) => ( +
    +
    + + {props.clearBtn} + +
    + {props.searchField} +
    + ) + + createCustomToolBar = (props: ToolBarProps) => { + return ( +
    + {props.components.btnGroup} +
    + {props.components.searchPanel} +
    +
    + ); + } + + customConfirm = (next: () => void, dropRowKeys: ReadonlyArray) => { + const dropRowKeysStr = dropRowKeys.join(','); + if (confirm(`(It's a custom confirm)Are you sure you want to delete ${dropRowKeysStr}?`)) { + next(); + } + } + + render() { + const selectRow: SelectRow = { + mode: 'checkbox', + showOnlySelected: true + }; + const options: Options = { + insertBtn: this.createInsertButton, + deleteBtn: this.createDeleteButton, + exportCSVBtn: this.createExportCSVButton, + showSelectedOnlyBtn: this.createShowSelectedOnlyButton, + btnGroup: this.createCustomButtonGroup, + clearSearch: true, + clearSearchBtn: this.createCustomClearSearch, + searchField: this.createCustomSearchField, + searchPanel: this.createCustomSearchPanel, + toolBar: this.createCustomToolBar, + searchDelayTime: 3000, + handleConfirmDeleteRow: this.customConfirm + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Expanding Rows & Selection + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/expand-row-by-column.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/expand-row-with-selection.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/custom-expand-indicator.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/custom-expand-class.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/auto-collapse.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/manage-expanding.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/all-select.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/custom-multi-select-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/default-select-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/select-bgcolor-dynamic-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/select-filter-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/select-hook-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/select-row-class-table.js + */ +class ExpandRowExample extends React.Component<{}, {expanding: number[]}> { + isExpandableRow = (row: any) => row.id === 2; + + expandComponent = (row: any) => ( +
    You expanded the row.
    + ) + + expandColumnComponent = ({ isExpandableRow, isExpanded }: ExpandColumnComponentProps) => { + const content = isExpandableRow + ? (isExpanded ? '(-)' : '(+)') + : ' '; + return ( +
    {content}
    + ); + } + + handleExpand = (rowKey: number, isExpand: boolean) => { + if (isExpand) { + this.setState({ expanding: [...this.state.expanding] }); + } else { + this.setState({ expanding: [...this.state.expanding.filter(id => id !== rowKey)] }); + } + } + + onSelectAll = (isSelected: boolean) => (isSelected) ? products.map(row => row.id) : []; + + onSelect = (row: Product, isSelected: boolean, e: React.MouseEvent, rowIndex: number) => { + const rowStr = `id: "${row.id}", name: ${row.name}, price: ${row.price}`; + console.log(e); + alert(`Selected: ${isSelected}, rowIndex: ${rowIndex}, row: ${rowStr}`); + } + + customMultiSelect = (props: CustomSelectProps) => ( +
    + props.onChange(e, props.rowIndex)} + ref={input => { + if (input) { + input.indeterminate = props.indeterminate; + } + }} /> + +
    + ) + + selectedRowClass = (row: Product, isSelect: boolean) => + (isSelect) + ? ((row.id >= 3) ? 'bigger-than-three-select-row' : 'less-than-three-select-row') + : '' + + render() { + const options: Options = { + expandRowBgColor: 'rgb(242, 255, 163)', + expandBy: 'column', + onlyOneExpanding: true, + expanding: this.state.expanding, + onExpand: this.handleExpand, + expandParentClass: 'custom-expand-parent', + expandBodyClass: (row, rowIndex, isExpanding) => { + return (!isExpanding) + ? 'current-is-hidden' + : (rowIndex > 1) + ? 'custom-expand-body-1' + : 'custom-expand-body-0'; + } + }; + const selectRow: SelectRow = { + mode: 'checkbox', + bgColor: (row: Product, isSelect: boolean) => + (isSelect) + ? ((row.id < 2) ? 'blue' : ((row.id < 4) ? 'red' : 'yellow')) + : null, + clickToSelect: true, // click to select, default is false + clickToExpand: true, // click to expand row, default is false + onSelect: this.onSelect, + onSelectAll: this.onSelectAll, + customComponent: this.customMultiSelect, + hideSelectColumn: false, + selected: [0, 2], + showOnlySelected: true, + onlyUnselectVisible: true, + className: this.selectedRowClass, + columnWidth: '60px', + unselectable: [1, 3] + }; + const expandColumnOptions: ExpandColumnOptions = { + expandColumnVisible: true, + expandColumnBeforeSelectColumn: false, + expandColumnComponent: this.expandColumnComponent, + columnWidth: 50 + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Table mouse enter/leave events + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/others/mouse-event-table.js + */ +class MouseEventTable extends React.Component { + render() { + const options: Options = { + onMouseLeave: () => { console.log('mouse left table'); }, + onMouseEnter: () => { console.log('mouse entered table'); }, + onRowMouseOut: (row: any, e: React.MouseEvent<{}>) => { + console.log(e); + console.log('mouse left row ' + row.id); + }, + onRowMouseOver: (row: any, e: React.MouseEvent<{}>) => { + console.log(e); + console.log('mouse entered row ' + row.id); + } + }; + + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Hidden on insert modal with async row error callback & read-only field + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/hide-on-insert-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/insert-error-handle-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/validator-table-read-only.js + */ +class HideOnInsertTable extends React.Component { + handleAddRowWithASyncError = (row: any, colInfo: ReadonlyArray, errorCallback: (msg: string) => void) => { + setTimeout(() => { + errorCallback('Sorry, There\'s some error happend'); + }, 5000); + return false; + } + render() { + const jobs = [ + { id: 1, status: '200', name: 'Item name 1', type: 'B', active: 'N' }, + { id: 2, status: '200', name: 'Item name 2', type: 'B', active: 'Y' } + ]; + const jobTypes = ['A', 'B', 'C', 'D']; + const options: Options = { + onAddRow: this.handleAddRowWithASyncError + }; + return ( + + Job ID + Job Name + Job Type + Active + + ); + } +} + +/** + * Edit field types + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/edit-type-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/insert-default-value-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/insert-error-handle-table.js + */ +class EditTypeTable extends React.Component { + formatType = (cell: any) => `TYPE_${cell}`; + + jobTypes = (row: any) => (row.id > 2) ? ['A', 'B'] : ['B', 'C', 'D', 'E']; + + handleAddRowWithSyncError = () => { + return 'Sorry, There\'s some error happend'; + } + + render() { + const jobTypes = [ + { value: 'A', text: 'TYPE_A' }, + { value: 'B', text: 'TYPE_B' }, + { value: 'C', text: 'TYPE_C' }, + { value: 'D', text: 'TYPE_D' } + ]; + const jobs = [ + { id: 1, name: 'Item name 1', type1: 'A', type2: 'B', active: 'N', datetime: '2001-12-28T14:57:00' }, + { id: 2, name: 'Item name 2', type1: 'A', type2: 'B', active: 'Y', datetime: '2002-12-28T14:57:00' } + ]; + const attrs = { + rows: 10, + onKeyDown: () => { console.log('keydown event trigger'); } + }; + const cellEditProp: CellEdit = { + mode: 'click', + blurToSave: true + }; + const options: Options = { + onAddRow: this.handleAddRowWithSyncError + }; + return ( + + Job ID + Job Name + Job Type1 + Job Type2 + Active + Date Time + + ); + } +} + +/** + * React component format for column. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-format/react-column-format-table.js + */ +class ActiveFormatter extends React.Component<{ active: boolean }> { + render() { + return ( + + ); + } +} + +export default class ReactColumnFormatTable extends React.Component { + activeFormatter = (cell: boolean, row: any) => (); + render() { + const jobs = [ + { id: 1, name: 'Item name 1', type1: 'A', type2: 'B', active: 'N', datetime: '2001-12-28T14:57:00' }, + { id: 2, name: 'Item name 2', type1: 'A', type2: 'B', active: 'Y', datetime: '2002-12-28T14:57:00' } + ]; + return ( + + + Job Name + Active + + ); + } +} + +/** + * Format Extra Data + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-format/extra-data-column-format-table.js + */ +class ExtraDataColumnFormatTable extends React.Component { + enumFormatter = (cell: number, row: any, enumObject: {[id: number]: string}) => enumObject[cell]; + render() { + const qualityType = { + 0: 'good', + 1: 'bad', + 2: 'unknown' + }; + const inStockStatus = { + 1: 'yes', + 2: 'no' + }; + return ( + + Product ID + Product Name + Product Quality + Product Stock Status + + ); + } +} + +/** + * Column titles + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column/column-title-table.js + */ +class ColumnAlignTable extends React.Component { + customTitle = (cell: number, row: any, rowIndex: number, colIndex: number) => `${row.name} for ${cell}`; + + render() { + const options: Options = { + exportCSVText: 'my_export', + insertText: 'my_insert', + deleteText: 'my_delete', + saveText: 'my_save', + closeText: 'my_close' + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Table Footer + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/footer/footer-table.js + */ +class FooterTable extends React.Component { + render() { + const footerData: FooterData[][] = [ + [ + { label: 'Total', columnIndex: 0 }, + { + label: 'Total value', + columnIndex: 2, + align: 'right', + formatter: (tableData: Array<{price: number}>) => { + let label = 0; + for (let i = 0, tableDataLen = tableData.length; i < tableDataLen; i++) { + label += tableData[i].price; + } + return ( + {label} + ); + } + } + ] + ]; + + return ( +
    + + Product ID + Product Name + Product Price + +
    + ); + } +} + +/** + * Keyboard navigation + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/keyboard-nav/custom-style-nav-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/keyboard-nav/custom-style-nav-with-cell-edit-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/keyboard-nav/disable-click-to-nav-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/keyboard-nav/enter-to-edit-with-nav-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/keyboard-nav/nav-with-expand-table.js + */ +class CustomStyleNavTable extends React.Component { + customStyle = (cell: any, row: any) => { + return { + backgroundColor: 'red' + }; + } + + render() { + const cellEdit: CellEdit = { + mode: 'click', + blurToSave: true + }; + const keyBoardNav = { + customStyleOnEditCell: this.customStyle, + customStyle: this.customStyle, + clickToNav: false, + enterToEdit: true, + enterToExpand: false + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Table body styles + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/inline-style-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/table-class-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/td-class-string-table.js + */ +class TrClassStringTable extends React.Component { + render() { + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Table styles set by functions. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/td-class-function-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/tr-class-function-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/tr-style-table.js + */ +class TrClassFunctionTable extends React.Component { + headerColumnClassNameFormat = () => 'th-string-example'; + + columnClassNameFormat = (fieldValue: string | number, row: Product, rowIdx: number, colIdx: number) => + rowIdx % 2 === 0 ? 'td-column-function-even-example' : 'td-column-function-odd-example' + + trClassFormat = (rowData: ReadonlyArray, rIndex: number) => + rIndex % 3 === 0 ? 'tr-function-example' : '' + + trStyle = (row: Product, rowIndex: number) => ({ backgroundColor: '#FFFAFA' }); + + render() { + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Filter types. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/all-filters.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/date-filter-programmatically.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/number-filter-programmatically.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/regex-filter-programmatically.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/select-filter-programmatically.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/text-filter-programmatically.js + */ +class AllFilters extends React.Component { + name1: TableHeaderColumn | null; + name2: TableHeaderColumn | null; + quality: TableHeaderColumn | null; + price: TableHeaderColumn | null; + satisfaction: TableHeaderColumn | null; + inStockDate: TableHeaderColumn | null; + + handlerClickCleanFiltered = () => { + this.name1.cleanFiltered(); + this.name2.cleanFiltered(); + this.quality.cleanFiltered(); + this.price.cleanFiltered(); + this.satisfaction.cleanFiltered(); + this.inStockDate.cleanFiltered(); + } + + applyFiltersProgramatically = () => { + this.name1.applyFilter('Item 1'); + this.name2.applyFilter('[name]'); + this.quality.applyFilter(1); + this.price.applyFilter({ + number: 10.5, + comparator: '<=' + }); + this.satisfaction.applyFilter({ + number: 2, + comparator: '>' + }); + this.inStockDate.applyFilter({ + date: new Date(2015, 0, 1), + comparator: '=' + }); + } + + dateFormatter = (cell: Date, row: any) => { + if (typeof cell !== 'object') { + cell = new Date(cell); + } + + return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`; + } + + render() { + const satisfaction = [0, 1, 2, 3, 4, 5]; + const qualityType = { + 0: 'good', + 1: 'bad', + 2: 'unknown' + }; + return ( + + + Product ID +
    clear filters +     + { this.name1 = node; }} dataField='name' filter={{ type: 'TextFilter', placeholder: 'Please enter a value' }}>Product Name + { this.name2 = node; }} dataField='name' filter={{ type: 'RegexFilter', placeholder: 'Please enter a regex' }}>Product Name + < TableHeaderColumn ref={(node) => { this.quality = node; }} dataField='quality' filter={{ type: 'SelectFilter', options: qualityType }} + dataFormat={enumFormatter} formatExtraData={qualityType}>Product Quality     + { this.price = node; }} dataField='price' filter={{ type: 'NumberFilter', delay: 1000 }}>Product Price + < TableHeaderColumn ref= {(node) => { this.satisfaction = node; }} dataField='satisfaction' filter={{ type: 'NumberFilter', options: satisfaction }}>Buyer Satisfaction     + < TableHeaderColumn ref= {(node) => { this.inStockDate = node; }} dataField='inStockDate' filter={{ type: 'DateFilter' }} dataFormat={this.dateFormatter}>In Stock From     +     + ); + } +} + +/** + * Set Array filter programatically + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/array-filter-programmatically.js + */ +class ProgrammaticallyArrayFilter extends React.Component { + table: BootstrapTable | null; + + /* Filtering passing an array of values */ + handleBtnClick = () => { + this.table.handleFilterData({ + name: { type: 'ArrayFilter', value: ['Item name 3', 'Item name 4'] }, + price: { type: 'ArrayFilter', value: [2100, 2104] } + }); + } + + render() { + return ( +
    + + { this.table = node; }} data={products}> + Product ID + Product Name + Product Price + +
    + ); + } +} diff --git a/types/react-bootstrap-table/tslint.json b/types/react-bootstrap-table/tslint.json index bf0a68ff4e..6fafe521cb 100644 --- a/types/react-bootstrap-table/tslint.json +++ b/types/react-bootstrap-table/tslint.json @@ -1,10 +1,3 @@ { - "extends": "dtslint/dt.json", - "rules": { - // TODO - "ban-types": false, - "prefer-method-signature": false, - "strict-export-declare-modifiers": false, - "no-empty-interface": false - } + "extends": "dtslint/dt.json" } diff --git a/types/react-bootstrap-table/v2/index.d.ts b/types/react-bootstrap-table/v2/index.d.ts new file mode 100644 index 0000000000..11c0f7f943 --- /dev/null +++ b/types/react-bootstrap-table/v2/index.d.ts @@ -0,0 +1,758 @@ +// Type definitions for react-bootstrap-table 2.6 +// Project: https://github.com/AllenFang/react-bootstrap-table +// Definitions by: Frank Laub , Aleksander Lode , Josué Us +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +/// + +// documentation taken from http://allenfang.github.io/react-bootstrap-table/docs.html + +import { ComponentClass, Props, ReactElement } from 'react'; +import { EventEmitter } from 'events'; + +/** + * Interface spec for sepcifying functionality to handle remotely + * + * Consult [documentation](https://allenfang.github.io/react-bootstrap-table/docs.html#remote) + * for more info + */ +export interface RemoteObjSpec { + /** + * If set, cell edits will be handled remotely + */ + cellEdit?: boolean; + /** + * If set insertions will be handled remotely + */ + insertRow?: boolean; + /** + * If set deletion will be handled remotely + */ + dropRow?: boolean; + /** + * If set filters will be handled remotely + */ + filter?: boolean; + /** + * If set search will be handled remotely + */ + search?: boolean; + /** + * If set, exporting CSV will be handled remotely + */ + exportCSV?: boolean; + /** + * If set sorting will be handled remotely + */ + sort?: boolean; + /** + * If set pagination will be handled remotely + */ + pagination?: boolean; +} + +export interface BootstrapTableProps extends Props { + /** + * Set version='4' to use bootstrap@4, else bootstrap@3 is used. + */ + version?: string; + /** + * Use data to specify the data that you want to display on table. + */ + data: any[]; + /** + * If set, data is remote (use also fetchInfo) + */ + remote?: ((remobeObj: RemoteObjSpec) => RemoteObjSpec) | boolean; // Updated to support ^3.0.0 + /** + * Use keyField to tell table which column is unique. This is same as isKey in + * Tips: You need choose one configuration to set key field: keyField or isKey in + */ + keyField?: string; + /** + * Use height to set the height of table, default is 100%. + */ + height?: string; + /** + * Set the max column width (pixels) + */ + maxHeight?: string; + /** + * Enable striped by setting striped to true. Same as Bootstrap table class .table-striped, default is false. + */ + striped?: boolean; + /** + * Enable hover by setting hover to true. Same as Bootstrap table class .table-hover, default is false. + */ + hover?: boolean; + /** + * Enable condensed by setting condensed to true. Same as Bootstrap table class .table-condensed, default is false. + */ + condensed?: boolean; + /** + * Become a borderless table by setting bordered to false, default is true. + */ + bordered?: boolean; + /** + * Enable pagination by setting pagination to true, default is false. + */ + pagination?: boolean; + /** + * Assign the class name of row(tr). This attribute accept a string or function and function is a better way to do more customization. + * If a string given, means the value will be presented as the row class. + * If a function given, will pass rowData and rowIndex as params and should return string for presenting class. for examples: + * @example + * function trClassFormat(rowData,rowIndex){ + * return rowIndex%2==0?"tr-odd":"tr-even"; //return a class name. + * } + */ + trClassName?: string | ((rowData: any, rowIndex: number) => string); + /** + * Enable row insertion by setting insertRow to true, default is false. + * If you enable row insertion, there's a button on the upper left side of table. + */ + insertRow?: boolean; + /** + * Enable row deletion by setting deleteRow to true, default is false. + * If you enable row deletion, there's a button on the upper left side of table. + */ + deleteRow?: boolean; + /** + * Enable column filter by setting columnFilter to true, default is false. + * If enabled, there're input text field per column under the table, user can input your filter condition by each column. + */ + columnFilter?: boolean; + /** + * Enable search by setting search to true, default is false. + * If enabled, there is a on the upper left side of the table. The default place holder is Search + */ + search?: boolean; + /** + * Set searchPlaceholder to change the placeholder in search field, default is Search. + */ + searchPlaceholder?: string; + /** + * Enable strict search, default is false. + * More info here: https://github.com/AllenFang/react-bootstrap-table/issues/1199 + */ + strictSearch?: boolean; + /** + * Enable multi search by multiColumnSearch, default is false. + * If you want to use multi search, you must enable search at first. + * Tips: Use space to delimited search text. EX: 3 4, which means match all 3 or 4 datas in table. + */ + multiColumnSearch?: boolean; + /** + * Enable export csv function, default is false. + * If you enable, there's a button on the upper left side of table. + */ + exportCSV?: boolean; + /** + * Set CSV filename (e.g. items.csv). Default is spreadsheet.csv + */ + csvFileName?: () => string | string; + /** + * Enable row selection on table. selectRow accept an object which have the following properties + */ + selectRow?: SelectRow; + /** + * Enable cell editing on table. cellEdit accept an object which have the following properties + */ + cellEdit?: CellEdit; + /** + * For some options setting on this component, you can set the options attribute and give an object which contain following properties + */ + options?: Options; + fetchInfo?: FetchInfo; + printable?: boolean; + tableStyle?: any; + containerStyle?: any; + headerStyle?: any; + bodyStyle?: any; + ignoreSinglePage?: boolean; + containerClass?: string; + tableContainerClass?: string; + headerContainerClass?: string; + bodyContainerClass?: string; + expandableRow?: (row: any) => boolean; + expandComponent?: (row: any) => any; +} + +export type SelectRowMode = 'none' | 'radio' | 'checkbox'; + +export interface SelectRow { + /** + * For specifing the selection is single(radio) or multiple(checkbox). + */ + mode: SelectRowMode; + /** + * Click the row will trigger selection on that row if enable clickToSelect, default is false. + */ + clickToSelect?: boolean; + /** + * If true, click the row will trigger selection on that row and also trigger cell editing if you enabled cell edit. Default is false. + */ + clickToSelectAndEditCell?: boolean; + /** + * You can assign the background color of row which be selected. + */ + bgColor?: string; + /** + * You can assign the class name of row which be selected. + */ + className?: string; + /** + * Give an array data to perform which rows you want to be selected when table loading. + * The content of array should be the rowkey which you want to be selected. + */ + selected?: string[] | number[]; + /** + * if true, the radio/checkbox column will be hide. + * You can enable this attribute if you enable clickToSelect and you don't want to show the selection column. + */ + hideSelectColumn?: boolean; + /** + * Default is false, if enabled, there will be a button on top of table for toggling selected rows only. + */ + showOnlySelected?: boolean; + /** + * Accept a custom callback function, if a row be selected or unselected, this function will be called. + * This callback function taking three arguments row, isSelected and event: + * `row`: is the row data which you wanted to select or unselect. + * `isSelected`: it's a boolean value means "whether or not that row will be selected?". + * `event`: The event target object. + * If return value of this (function) is false, the select or deselect action will not be applied. + */ + onSelect?: (row: any, isSelected: boolean, event: any) => boolean; + /** + * Accept a custom callback function, if click select all checkbox, this function will be called. + * This callback function taking two arguments isSelected and currentSelectedAndDisplayData: + * `isSelected`: it's a boolean value means "whether or not that row will be selected?". + * `currentSelectedAndDisplayData`: If pagination enabled, this result is the data which in a page. In contrast, this is all data in table. + * If return value of this function is false, the select all or deselect all action will not be applied. + */ + onSelectAll?: (isSelected: boolean, currentSelectedAndDisplayData: any) => boolean; + + /** + * Provide a list of unselectable row keys. + */ + unselectable?: number[]; +} + +export type CellEditClickMode = 'none' | 'click' | 'dbclick'; + +export interface CellEdit { + /** + * To spectify which condition will trigger cell editing.(click or dbclick) + */ + mode: CellEditClickMode; + /** + * Enable blurToSave will trigger a saving event on cell when mouse blur on the input field. Default is false. + * In the default condition, you need to press ENTER to save the cell. + */ + blurToSave?: boolean; + /** + * Accept a custom callback function, before cell saving, this function will be called. + * This callback function taking three arguments:row, cellName and cellValue + * It's necessary to return a bool value which whether apply this cell editing. + */ + beforeSaveCell?: (row: any, cellName: string, cellValue: any) => boolean; + /** + * Accept a custom callback function, after cell saving, this function will be called. + * This callback function taking three arguments:row, cellName and cellValue + */ + afterSaveCell?: (row: any, cellName: string, cellValue: any) => void; +} + +export type SortOrder = 'asc' | 'desc'; + +export interface Options { + /** + * Manage sort field by yourself + */ + sortName?: string; + /** + * Manage sort order by yourself + */ + sortOrder?: SortOrder; + /** + * Assign a default sort field. + */ + defaultSortName?: string; + /** + * Assign a default sort ordering. + */ + defaultSortOrder?: SortOrder; + /** + * False to disable sort indicator on header column, default is true. + */ + sortIndicator?: boolean; + /** + * Change the displaying text on table if data is empty. + */ + noDataText?: string | ReactElement; + /** + * A delay for trigger search after a keyup (millisecond) + */ + searchDelayTime?: number; + /** + * A custom text on export csv button + */ + exportCSVText?: string; + /** + * Default is false, if true means you want to ignore any editable configuration when row insert. + */ + ignoreEditable?: boolean; + /** + * Only work on enable search. If true, there will be a button beside search input field for clear search field text. + */ + clearSearch?: boolean; + /** + * Assign a callback function which will be called after table update. + */ + afterTableComplete?: Function; + /** + * Assign a callback function which will be called after row delete. + * This function taking one argument: rowKeys, which means the row key you dropped. + */ + afterDeleteRow?: (rowKeys: string[]) => void; + /** + * Assign a callback function which will be called after row insert. + * This function taking one argument: row, which means the whole row data you added. + */ + afterInsertRow?: (row: any) => void; + /** + * Customize the text of previouse page button + */ + prePage?: string; + /** + * Customize the text of next page button + */ + nextPage?: string; + /** + * Customize the text of first page button + */ + firstPage?: string; + /** + * Customize the text of last page button + */ + lastPage?: string; + /** + * Accept a number, which means the page you want to show as default. + */ + page?: number; + /** + * You can change the dropdown list for size per page if you enable pagination. + */ + sizePerPageList?: number[]; + /** + * Means the size per page you want to locate as default. + */ + sizePerPage?: number; + /** + * To define the pagination bar length, default is 5. + */ + paginationSize?: number; + /** + * To define where to start counting the pages. + */ + pageStartIndex?: number; + /** + * Assign a callback function which will be called after page changed. + * This function taking two argument: page and sizePerPage. + * `page`: Current page. + * `sizePerPage`: The data size which in one page. + */ + onPageChange?: (page: number, sizePerPage: number) => void; + /** + * Assign a callback function which will be called after size per page dropdown changed. + * This function taking one argument: sizePerPage. + * `sizePerPage`: The data size which in one page. + */ + onSizePerPageList?: (sizePerPage: number) => void; + /** + * Assign a callback function which will be called after trigger sorting. + * This function taking two argument: `sortName` and `sortOrde`r. + * `sortName`: The sort column name + * `sortOrder`: The sort ordering. + */ + onSortChange?: (sortName: string, sortOrder: SortOrder) => void; + /** + * Assign a callback function which will be called after trigger searching. + * This function taking two argument: search and result. + * `search`: The search text which user input. + * `result`: The results after searching. + */ + afterSearch?: (search: string, result: any) => void; + /** + * Assign a callback function which will be called after trigger column filtering. + * This function taking two argument: filterConds and result. + * `filterConds`: It's an array object which contain all column filter conditions. + * `result`: The results after filtering. + */ + afterColumnFilter?: (filterConds: any[], result: any) => void; + /** + * Assign a callback function which will be called after a row click. + * This function taking one argument: row which is the row data which you click on. + */ + onRowClick?: (row: any) => void; + /** + * Assign a callback function which will be called after a row double click. + * This function taking one argument: row which is the row data which you double click on. + */ + onRowDoubleClick?: (row: any) => void; + /** + * Background color on expanded rows. + */ + expandRowBgColor?: string; + /** + * Assign a callback function which will be called when mouse enter into the table. + */ + onMouseEnter?: Function; + /** + * Assign a callback function which will be called when mouse leave from the table. + */ + onMouseLeave?: Function; + /** + * Assign a callback function which will be called when mouse over a row in table. + * This function taking one argument: row which is the row data which mouse over. + */ + onRowMouseOver?: Function; + /** + * Assign a callback function which will be called when mouse leave from a row in table. + * This function taking one argument: row which is the row data which mouse out. + */ + onRowMouseOut?: Function; + + /** + * Assign a callback function which will be called when row dropping. + * It give you a chance to customize your confirmation for row deletion. + * This function taking two argument: next and rowKeys: + * `next`: If you confirm to drop row, call next() to continue the process + * `rowKeys` is the row keys which been deleted, you can call next function to apply this deletion. + */ + handleConfirmDeleteRow?: (next: Function, rowKeys: any[]) => void; + paginationShowsTotal?: boolean | ((start: number, to: number, total: number) => string | ReactElement); + onSearchChange?: Function; + onAddRow?: Function; + onExportToCSV?: Function; + + insertText?: string; + deleteText?: string; + saveText?: string; + closeText?: string; + // Customization properties + /** + * Callback function to be called when a cell is modified + * + * https://allenfang.github.io/react-bootstrap-table/example.html#remote + */ + onCellEdit?: (row: any, field: string, value: any) => any; + /** + * Callback function to be called when filter changing + * + * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-filtering.js#L67 + */ + onFilterChange?: (filterObj: any) => any; + /** + * Callback function which will be called when a row will be deleted + * + * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-delete-row.js#L27 + */ + onDeleteRow?: (rows: any) => any; + /** + * A callback which will be called after page changed + * + * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-paging.js#L30 + */ + onpageChange?: (page: any, sizePerPage: number) => any; +} + +interface FetchInfo { + dataTotalSize?: number; +} + +export interface BootstrapTable extends ComponentClass { + /** + * Call this function to insert an new row to table. + */ + handleAddRow(row: any): void; + /** + * Call this function to insert an new row as first row on table. + */ + handleAddRowAtBegin(row: any): void; + /** + * Call this function to drop rows in table. + */ + handleDropRow(rowKeys: any[]): void; + /** + * Call this function to do column filtering on table. + */ + handleFilterData(filter: any): void; + /** + * Call this function with search text for fully searching. + */ + handleSearch(search: string): void; + /** + * Call this function to sort table. + */ + handleSort(order: SortOrder, field: string): void; + /** + * Call this function to get the page by a rowkey + */ + getPageByRowKey(rowKey: string): any; + /** + * Call this function to export table as csv. + */ + handleExportCSV(): void; + /** + * Clean all the selection state on table. + */ + cleanSelected(): void; +} +interface BootstrapTable extends ComponentClass { } +declare const BootstrapTable: BootstrapTable; +export type DataAlignType = 'left' | 'center' | 'right' | 'start' | 'end'; + +export interface TableHeaderColumnProps extends Props { + /** + * The field of data you want to show on column. + */ + dataField?: string; + /** + * Use isKey to tell table which column is unique. This is same as keyField in + * Tips: You need choose one configuration to set key field: isKey or keyField in + */ + isKey?: boolean; + /** + * Set the column width. ex: 150, it's means 150px + */ + width?: string; + /** + * Set align in column, value is left, center, right, start and end. + */ + dataAlign?: DataAlignType; + + /** + * Alignment of text in the column header. + */ + headerAlign?: DataAlignType; + /** + * True to enable table sorting. Default is disabled. + */ + dataSort?: boolean; + /** + * Default search string. + */ + defaultSearch?: string; + /** + * Allow user to render a custom sort caret. You should give a function and should return a JSX. + * This function taking one arguments: order which present the sort order currently. + */ + caretRender?: Function; + /** + * Give an Object like following to able to customize your own editing component. + * This Object should contain these two property: + * getElement(REQUIRED): Accept a callback function and take two arguments: onUpdate and props. + * customEditorParameters: Another extra data for custom cell edit component. + */ + customEditor?: { getElement: (onUpdate: any, props: any) => ReactElement, customEditorParameters?: object }; + /** + * To customize the column. This callback function should return a String or a React Component. + * In addition, this function taking two argument: cell and row. + */ + dataFormat?: (cell: any, row: any, formatExtraData?: any) => string | ReactElement; + /** + * To to enable search or filter data on formatting. Default is false + */ + filterFormatted?: boolean; + /** + * True to hide column. + */ + hidden?: boolean; + /** + * True to hide from insert dialog + */ + hiddenOnInsert?: boolean; + /** + * True to hide the dropdown for sizePerPage. + */ + hideSizePerPage?: boolean; + /** + * False to disable search functionality on column, default is true. + */ + searchable?: boolean; + /** + * Give a customize function for data sorting. + * This function taking four arguments: a, b, order, sortField, extraData + */ + sortFunc?: (a: any, b: any, order: SortOrder, sortField: any, extraData: any) => number; + /** + * It's a extra data for custom sort function, if defined, this data will be pass as fifth argument in sortFunc. + */ + sortFuncExtraData?: any; + /** + * Add custom css class on table header column, this attribute only accept String or Function. + * If Function, it taking four arguments: cell, row, rowIndex, columnIndex. + * In addition, this function should return a String which is the class name you want to add on. + */ + className?: string | ((cell: any, row: any, rowIndex: number, columnIndex: number) => string); + /** + * Add custom css class on table body column, this attribute only accept String or Function. + * If Function, it taking four arguments: cell, row, rowIndex, columnIndex. + * In addition, this function should return a String which is the class name you want to add on. + */ + columnClassName?: String | ((cell: any, row: any, rowIndex: number, columnIndex: number) => string); + /** + * Add True to set column editable, false is non-editable. If give Object, + * you can do more customization when editing cell. This object have following properties: + * @example + * { + * type: //edit type, avaiable value is textarea, select, checkbox + * validator: //give function for validation and taking only one "cell value" as argument. This function should return Bool. + * options:{ + * values: //values means data in select or checkbox.If checkbox, use ':'(colon) to separate value, ex: Y:N + * } + * } + */ + editable?: boolean | Editable; + /** + * It only work when you enable insertRow and be assign on rowKey column. + * If true, the row key will be generated automatically after a row insertion. + */ + autoValue?: boolean; + /** + * To Enable a column filter within header column. + * This feature support a lots of filter type and condition. Please check example + * Following is the format for filter + */ + filter?: Filter; + + onSort?: Function; + + /** + * Header for column in generated CSV file + */ + csvHeader?: string; + csvFormat?: Function; + columnTitle?: boolean; + sort?: SortOrder; + formatExtraData?: any; + + /** + * Row in the header on which this header column present. + */ + row?: number; + + /** + * Indicates how many rows this column takes. + * Default: 1 + */ + rowSpan?: number; + + /** + * Indicates how many columns this column takes. + * Default: 1 + */ + colSpan?: number; + + /** + * Return the value you want to be filtered on that column. + * It's useful if your column data is an object. + */ + filterValue?: Function; + + /** + * Allow you to add your custom attributes on TD element. + */ + tdAttr?: object; + + /** + * Allow you to add your custom style object on TD element. + */ + tdStyle?: object; + + /** + * Allow you to add your custom style object on TH element. + */ + thStyle?: object; +} +export interface Editable { + type?: string; // edit type, avaiable value is textarea, select, checkbox + /** + * Function for validation and taking only one "cell value" as argument. This function should return Bool. + */ + validator?: (cell: any) => boolean; + /** + * @example + * { + * values: //values means data in select or checkbox. If checkbox, use ':'(colon) to separate value, ex: Y:N + * } + */ + options?: any; + + /** + * Configuration for the textarea editable type + */ + cols?: number; + rows?: number; +} +export type SetFilterCallback = (targetValue: any) => boolean; +export interface ApplyFilterParameter { + callback: SetFilterCallback; +} + +export type FilterType = 'TextFilter' | 'RegexFilter' | 'SelectFilter' | 'NumberFilter' | 'DateFilter' | 'CustomFilter'; +export interface Filter { + /** + * "TextFilter"||"SelectFilter"||"NumberFilter"||"DateFilter"||"RegexFilter"||"YOUR_CUSTOM_FILTER" + */ + type?: FilterType; + /** + * Default value on filter. If type is NumberFilter or DateFilter, this value will like { number||date: xxx, comparator: '>' } + */ + defaultValue?: any; + /** + * Assign a millisecond for delay when trigger filtering, default is 500. + */ + delay?: number; + /** + * Only work on TextFilter. Assign the placeholder text on text and regex filter + */ + placeholder?: string | RegExp; + /** + * Only work on NumberFilter. Accept an array which conatin the filter condition, like: ['<','>','='] + */ + numberComparators?: string[]; + + /** + * Options for the filter. + */ + options?: any; + + /** + * Comparison condition for the NumberFilter + */ + condition?: string; + + /** + * Get element which represent filter. + */ + getElement?: (filterHandler: (parameters?: ApplyFilterParameter) => void, filterParameters: any) => JSX.Element; + + /** + * Parameters for custom filter + */ + customFilterParameters?: any; +} + +export interface TableHeaderColumn extends ComponentClass { } +declare const TableHeaderColumn: TableHeaderColumn; + +declare class TableDataSet extends EventEmitter { + constructor(data: any); + setData(data: any): void; + clear(): void; + getData(): any; +} diff --git a/types/react-bootstrap-table/v2/react-bootstrap-table-tests.tsx b/types/react-bootstrap-table/v2/react-bootstrap-table-tests.tsx new file mode 100644 index 0000000000..c8f25dfa56 --- /dev/null +++ b/types/react-bootstrap-table/v2/react-bootstrap-table-tests.tsx @@ -0,0 +1,175 @@ +import * as React from 'react'; +import { render } from 'react-dom'; +import { BootstrapTable, TableHeaderColumn, ApplyFilterParameter, Filter } from 'react-bootstrap-table'; + +const products = [{ + id: 1, + name: "Item name 1", + price: 100 +}, { + id: 2, + name: "Item name 2", + price: 100 +}]; + +// It's a data format example. +function priceFormatter(cell: any, row: any) { + return ' ' + cell; +} + +render( + + Product ID + Product Name + Product Price + , + document.getElementById("app") +); + +const qualityType = { + 0: 'good', + 1: 'bad', + 2: 'unknown' +}; + +function enumFormatter(cell: any, row: any, enumObject: any) { + return enumObject[cell]; +} + +class SelectFilterWithDefaultValue extends React.Component { + render() { + return ( + + Product ID + Product Name + Product Quality + + ); + } +} + +class TextFilterWithCondition extends React.Component { + render() { + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +function getCustomFilter(filterHandler: (parameters?: ApplyFilterParameter) => void, customFilterParameters: any) { + return ( +
    + ); +} + +class CustomFilter extends React.Component { + render() { + const filter: Filter = { type: 'CustomFilter', getElement: getCustomFilter, customFilterParameters: { textOK: 'yes', textNOK: 'no' } }; + return ( + + Product ID + Product Name + Product Is In Stock + + ); + } +} + +class RemoteProps extends React.Component { + render() { + const filter: Filter = { type: 'CustomFilter', getElement: getCustomFilter, customFilterParameters: { textOK: 'yes', textNOK: 'no' } }; + return ( + { + remoteObj.cellEdit = true; + return remoteObj; + }} + options={{ + onCellEdit: (row: any, fieldName: string, value: any) => { console.info(row); } + }} + > + Product ID + Product Name + Product Is In Stock + + ); + } +} + +class RemoteBool extends React.Component { + render() { + const filter: Filter = { type: 'CustomFilter', getElement: getCustomFilter, customFilterParameters: { textOK: 'yes', textNOK: 'no' } }; + return ( + + Product ID + Product Name + Product Is In Stock + + ); + } +} + +/** + * See http://allenfang.github.io/react-bootstrap-table/docs.html#tdAttr + */ +const tdAttrExample = + Product ID + Product Name + Product Price +; + +/** + * See http://allenfang.github.io/react-bootstrap-table/docs.html#tdStyle + */ +const tdStyleExample = + Product ID + Product Name + Product Price +; + +/** + * See http://allenfang.github.io/react-bootstrap-table/docs.html#thStyle + */ +const thStyleExample = + Product ID + Product Name + Product Price +; + +// Adopted from https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-header-span/column-header-span-complex.js +export default class ColumnHeaderSpanComplex extends React.Component { + render() { + const selectRow = { + mode: 'checkbox', + bgColor: 'rgb(238, 193, 213)' + }; + + const cellEdit = { + mode: 'click', + blurToSave: true + }; + return ( + + ID + Product + name + price + Coupon + In stock + Customer + name + order + + ); + } +} diff --git a/types/react-bootstrap-table/v2/tsconfig.json b/types/react-bootstrap-table/v2/tsconfig.json new file mode 100644 index 0000000000..eee5850865 --- /dev/null +++ b/types/react-bootstrap-table/v2/tsconfig.json @@ -0,0 +1,30 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": false, + "strictFunctionTypes": true, + "paths": { + "react-bootstrap-table": [ + "react-bootstrap-table/v2" + ] + }, + "baseUrl": "../../", + "jsx": "react", + "typeRoots": [ + "../../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-bootstrap-table-tests.tsx" + ] +} diff --git a/types/react-bootstrap-table/v2/tslint.json b/types/react-bootstrap-table/v2/tslint.json new file mode 100644 index 0000000000..bf0a68ff4e --- /dev/null +++ b/types/react-bootstrap-table/v2/tslint.json @@ -0,0 +1,10 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + // TODO + "ban-types": false, + "prefer-method-signature": false, + "strict-export-declare-modifiers": false, + "no-empty-interface": false + } + } From ed43ece3e55c8b435298c99fc57971fd6bbc842d Mon Sep 17 00:00:00 2001 From: pr1st0n Date: Wed, 25 Oct 2017 17:46:59 +0300 Subject: [PATCH 023/293] Added execCommand and isReadOnly CodeMirror.Editor functions. --- types/codemirror/index.d.ts | 6 ++++++ types/codemirror/test/index.ts | 3 +++ 2 files changed, 9 insertions(+) diff --git a/types/codemirror/index.d.ts b/types/codemirror/index.d.ts index 4bf1844114..cfcbd9d5b3 100644 --- a/types/codemirror/index.d.ts +++ b/types/codemirror/index.d.ts @@ -2,6 +2,7 @@ // Project: https://github.com/marijnh/CodeMirror // Definitions by: mihailik // nrbernard +// Pr1st0n // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped export = CodeMirror; @@ -336,6 +337,11 @@ declare namespace CodeMirror { "subtract" Reduce the indentation of the line. */ indentLine(line: number, dir?: string): void; + /** Tells you whether the editor's content can be edited by the user. */ + isReadOnly(): boolean; + + /** Runs the command with the given name on the editor. */ + execCommand(name: string): void; /** Give the editor focus. */ focus(): void; diff --git a/types/codemirror/test/index.ts b/types/codemirror/test/index.ts index e283abe974..39c601f159 100644 --- a/types/codemirror/test/index.ts +++ b/types/codemirror/test/index.ts @@ -68,3 +68,6 @@ myCodeMirror.on( ); CodeMirror.registerHelper("lint", "javascript", {}); + +myCodeMirror.isReadOnly(); +myCodeMirror.execCommand('selectAll'); From 540eb0e5870cc47394abb8082048ed85d22e009c Mon Sep 17 00:00:00 2001 From: Homa Wong Date: Wed, 25 Oct 2017 14:44:10 -0700 Subject: [PATCH 024/293] Update index.d.ts --- types/lodash/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/lodash/index.d.ts b/types/lodash/index.d.ts index f1685af04f..b0e4f6848d 100644 --- a/types/lodash/index.d.ts +++ b/types/lodash/index.d.ts @@ -9515,7 +9515,7 @@ declare namespace _ { * @param value The value to check. * @return Returns true if value is correctly classified, else false. */ - isFunction(value?: any): value is ((...args: any[]) => any) | Function; + isFunction(value?: any): value is (...args: any[]) => any; } interface LoDashImplicitWrapper { From 1eba1a5d753fb3f0ea47b2e4cbfc00fe1b221d34 Mon Sep 17 00:00:00 2001 From: Daniel Lebrecht Date: Thu, 26 Oct 2017 02:06:45 +0200 Subject: [PATCH 025/293] builder addOutput now takes Buffer | string nullData.output.encode Buffer fixing bugs according to @bobrosoft --- types/bitcoinjs-lib/index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/bitcoinjs-lib/index.d.ts b/types/bitcoinjs-lib/index.d.ts index d33bc26e35..50fdc498e6 100644 --- a/types/bitcoinjs-lib/index.d.ts +++ b/types/bitcoinjs-lib/index.d.ts @@ -219,7 +219,7 @@ export class TransactionBuilder { addInput(txhash: Buffer | string | Transaction, vout: number, sequence?: number, prevOutScript?: Buffer): number; - addOutput(scriptPubKey: Buffer, value: number): number; + addOutput(scriptPubKey: Buffer | string, value: number): number; build(): Transaction; @@ -537,7 +537,7 @@ export namespace script { output: { check(script: Buffer): boolean; decode(buffer: Buffer): Buffer; - encode(data: Buffer[]): Buffer; + encode(data: Buffer): Buffer; }; }; } From a670727a3721d3db44a20c3091454508fdcba2b1 Mon Sep 17 00:00:00 2001 From: Edward Sammut Alessi Date: Thu, 26 Oct 2017 17:56:50 +0200 Subject: [PATCH 026/293] Add typings for leo/args --- types/args/args-tests.ts | 67 +++++++++++++++++++++++++++++++ types/args/index.d.ts | 87 ++++++++++++++++++++++++++++++++++++++++ types/args/tsconfig.json | 22 ++++++++++ types/args/tslint.json | 1 + 4 files changed, 177 insertions(+) create mode 100644 types/args/args-tests.ts create mode 100644 types/args/index.d.ts create mode 100644 types/args/tsconfig.json create mode 100644 types/args/tslint.json diff --git a/types/args/args-tests.ts b/types/args/args-tests.ts new file mode 100644 index 0000000000..3430288cd3 --- /dev/null +++ b/types/args/args-tests.ts @@ -0,0 +1,67 @@ +import * as args from "args"; + +args + .option("opt1", "desc") + .option("opt2", "desc", false, (value: any): any => value) + .options([ + { + name: 'opt3', + description: 'desc', + defaultValue: 1, + init: (value: any) => { }, + }, + { + name: 'opt4', + description: 'desc', + }, + ]) + .command("cm1", "desc") + .command("cm2", "desc", (value: any): void => { }, ['a']) + .example("ex1", "desc") + .examples([ + { + usage: "ex2", + description: "desc", + }, + ]); + +args.parse(['~/bin/node', '~/dir', 'arg', '--param'], { + help: true, + name: "name", + version: true, + usageFilter: (a: any): any => a, + value: "value", + mri: { + args: ['a'], + alias: { + a: "b", + c: ['d'], + }, + boolean: ['wat'], + default: { + foo: 'bar', + }, + string: ['zulu'], + unknown: (param: string): boolean => true, + }, + minimist: { + string: ['string'], + boolean: ['string'], + alias: { + bar: 'foo', + foo: ['bar1', 'bar2'], + }, + default: { + foo: 'bar', + }, + stopEarly: true, + "--": false, + unknown: (param: string): boolean => true, + }, + mainColor: "yellow", + subColor: "dim" +}); + +args.showHelp(); + +const x: string = args.sub[0]; diff --git a/types/args/index.d.ts b/types/args/index.d.ts new file mode 100644 index 0000000000..4e77da737b --- /dev/null +++ b/types/args/index.d.ts @@ -0,0 +1,87 @@ +declare var args: Args.API; +export = args; + +declare namespace Args { + export interface IMriUnknownFunction { + (param: string): boolean + } + + export interface IMinimistUnknownFunction { + (param: string): boolean + } + + export interface IMriArguments { + args?: string[]; + alias?: { + [key: string]: string | string[] + }; + boolean?: string | string[]; + default?: { + [key: string]: any + }; + string?: string | string[]; + unknown?: IMriUnknownFunction; + } + + export interface IMinimistArguments { + string?: string | string[]; + boolean?: boolean | string | string[]; + alias?: { + [key: string]: string | string[] + }; + default?: { + [key: string]: any + }; + stopEarly?: boolean; + "--"?: boolean; + unknown?: IMinimistUnknownFunction; + } + + export interface IOptionInitFunction { + (value: any): any; + } + + export interface ICommandInitFunction { + (name: string, sub: {}[], options: {}[]): void; + } + + export interface IUsageFilterFunction { + (output: any): any; + } + + export interface IConfiguration { + help?: boolean; + name?: string; + version?: boolean; + usageFilter?: IUsageFilterFunction; + value?: string; + mri: IMriArguments; + minimist?: IMinimistArguments; + mainColor: string | string[]; + subColor: string | string[]; + } + + export interface IOption { + name: string; + description: string; + init?: IOptionInitFunction; + defaultValue?: any; + } + + export interface IExample { + usage: string; + description: string; + } + + export interface API { + sub: string[]; + + option(name: string | [string, string], description: string, defaultValue?: any, init?: IOptionInitFunction): API; + options(list: IOption[]): API; + command(name: string, description: string, init?: ICommandInitFunction, aliases?: string[]): API; + example(usage: string, description: string): API; + examples(list: IExample[]): API; + parse(argv: string[], options?: IConfiguration): { [key: string]: any }; + showHelp(): void; + } +} diff --git a/types/args/tsconfig.json b/types/args/tsconfig.json new file mode 100644 index 0000000000..ccc4d54297 --- /dev/null +++ b/types/args/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "args-tests.ts" + ] +} diff --git a/types/args/tslint.json b/types/args/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/args/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From 17e36b8576cddb120ed2e5c974c1619a24de6870 Mon Sep 17 00:00:00 2001 From: Edward Sammut Alessi Date: Thu, 26 Oct 2017 18:46:27 +0200 Subject: [PATCH 027/293] Updates to follow guidelines --- types/args/index.d.ts | 142 ++++++++++++++++++--------------------- types/args/tsconfig.json | 3 +- 2 files changed, 68 insertions(+), 77 deletions(-) diff --git a/types/args/index.d.ts b/types/args/index.d.ts index 4e77da737b..b6048d2c5f 100644 --- a/types/args/index.d.ts +++ b/types/args/index.d.ts @@ -1,87 +1,77 @@ -declare var args: Args.API; +// Type definitions for args 3.0 +// Project: https://github.com/leo/args#readme +// Definitions by: Slessi +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.2 + export = args; -declare namespace Args { - export interface IMriUnknownFunction { - (param: string): boolean - } +declare namespace args { + let sub: string[]; - export interface IMinimistUnknownFunction { - (param: string): boolean - } + function option(name: string | [string, string], description: string, defaultValue?: any, init?: OptionInitFunction): typeof args; + function options(list: Option[]): typeof args; + function command(name: string, description: string, init?: CommandInitFunction, aliases?: string[]): typeof args; + function example(usage: string, description: string): typeof args; + function examples(list: Example[]): typeof args; + function parse(argv: string[], options?: ConfigurationOptions): { [key: string]: any }; + function showHelp(): void; +} - export interface IMriArguments { - args?: string[]; - alias?: { - [key: string]: string | string[] - }; - boolean?: string | string[]; - default?: { - [key: string]: any - }; - string?: string | string[]; - unknown?: IMriUnknownFunction; - } +type MriUnknownFunction = (param: string) => boolean; +type MinimistUnknownFunction = (param: string) => boolean; - export interface IMinimistArguments { - string?: string | string[]; - boolean?: boolean | string | string[]; - alias?: { - [key: string]: string | string[] - }; - default?: { - [key: string]: any - }; - stopEarly?: boolean; - "--"?: boolean; - unknown?: IMinimistUnknownFunction; - } +type OptionInitFunction = (value: any) => any; +type CommandInitFunction = (name: string, sub: string[], options: ConfigurationOptions) => void; +type UsageFilterFunction = (output: any) => any; - export interface IOptionInitFunction { - (value: any): any; - } +interface MriOptions { + args?: string[]; + alias?: { + [key: string]: string | string[] + }; + boolean?: string | string[]; + default?: { + [key: string]: any + }; + string?: string | string[]; + unknown?: MriUnknownFunction; +} - export interface ICommandInitFunction { - (name: string, sub: {}[], options: {}[]): void; - } +interface MinimistOptions { + string?: string | string[]; + boolean?: boolean | string | string[]; + alias?: { + [key: string]: string | string[] + }; + default?: { + [key: string]: any + }; + stopEarly?: boolean; + "--"?: boolean; + unknown?: MinimistUnknownFunction; +} - export interface IUsageFilterFunction { - (output: any): any; - } +interface ConfigurationOptions { + help?: boolean; + name?: string; + version?: boolean; + usageFilter?: UsageFilterFunction; + value?: string; + mri: MriOptions; + minimist?: MinimistOptions; + mainColor: string | string[]; + subColor: string | string[]; +} - export interface IConfiguration { - help?: boolean; - name?: string; - version?: boolean; - usageFilter?: IUsageFilterFunction; - value?: string; - mri: IMriArguments; - minimist?: IMinimistArguments; - mainColor: string | string[]; - subColor: string | string[]; - } +interface Option { + name: string; + description: string; + init?: OptionInitFunction; + defaultValue?: any; +} - export interface IOption { - name: string; - description: string; - init?: IOptionInitFunction; - defaultValue?: any; - } - - export interface IExample { - usage: string; - description: string; - } - - export interface API { - sub: string[]; - - option(name: string | [string, string], description: string, defaultValue?: any, init?: IOptionInitFunction): API; - options(list: IOption[]): API; - command(name: string, description: string, init?: ICommandInitFunction, aliases?: string[]): API; - example(usage: string, description: string): API; - examples(list: IExample[]): API; - parse(argv: string[], options?: IConfiguration): { [key: string]: any }; - showHelp(): void; - } +interface Example { + usage: string; + description: string; } diff --git a/types/args/tsconfig.json b/types/args/tsconfig.json index ccc4d54297..d287417769 100644 --- a/types/args/tsconfig.json +++ b/types/args/tsconfig.json @@ -7,6 +7,7 @@ "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, + "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ "../" @@ -19,4 +20,4 @@ "index.d.ts", "args-tests.ts" ] -} +} \ No newline at end of file From 11ac6579bcb8bfb74e4af61660b206c67dd1833c Mon Sep 17 00:00:00 2001 From: Marc-Andre Roy Date: Thu, 26 Oct 2017 16:44:04 -0400 Subject: [PATCH 028/293] Add typings for guid npm package. --- types/guid/guid-tests.ts | 5 +++++ types/guid/index.d.ts | 38 ++++++++++++++++++++++++++++++++++++++ types/guid/tsconfig.json | 22 ++++++++++++++++++++++ types/guid/tslint.json | 1 + 4 files changed, 66 insertions(+) create mode 100644 types/guid/guid-tests.ts create mode 100644 types/guid/index.d.ts create mode 100644 types/guid/tsconfig.json create mode 100644 types/guid/tslint.json diff --git a/types/guid/guid-tests.ts b/types/guid/guid-tests.ts new file mode 100644 index 0000000000..cb5008d2a2 --- /dev/null +++ b/types/guid/guid-tests.ts @@ -0,0 +1,5 @@ +import guid = require('guid'); + +const newRawGuid: string = guid.raw(); +const isAGuid: boolean = guid.isGuid(newRawGuid); +const newGuidObject: object = guid.create(); diff --git a/types/guid/index.d.ts b/types/guid/index.d.ts new file mode 100644 index 0000000000..210a1f9584 --- /dev/null +++ b/types/guid/index.d.ts @@ -0,0 +1,38 @@ +// Type definitions for guid 1.0 +// Project: https://github.com/dandean/guid +// Definitions by: Marc-Andre Roy +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/** Declaration file generated by dts-gen */ + +export = guid; + +declare function guid(guid: string | guid): any; + +declare namespace guid { + const EMPTY: string; + + const prototype: { + }; + + function create(): object; + + function isGuid(value: string): boolean; + + function raw(): string; + + namespace create { + const prototype: { + }; + } + + namespace isGuid { + const prototype: { + }; + } + + namespace raw { + const prototype: { + }; + } +} diff --git a/types/guid/tsconfig.json b/types/guid/tsconfig.json new file mode 100644 index 0000000000..5d335b8f70 --- /dev/null +++ b/types/guid/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "guid-tests.ts" + ] +} diff --git a/types/guid/tslint.json b/types/guid/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/guid/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From ff0e6eb19af0d2b7f22c064f1f08cd126595f8b3 Mon Sep 17 00:00:00 2001 From: Jacob Copeland Date: Thu, 26 Oct 2017 23:52:51 -0400 Subject: [PATCH 029/293] Updated type definitions for email-templates for v3.1 --- .../email-templates/email-templates-tests.ts | 37 +--- types/email-templates/index.d.ts | 204 ++++++------------ 2 files changed, 79 insertions(+), 162 deletions(-) diff --git a/types/email-templates/email-templates-tests.ts b/types/email-templates/email-templates-tests.ts index 3c4493402c..c36852de31 100644 --- a/types/email-templates/email-templates-tests.ts +++ b/types/email-templates/email-templates-tests.ts @@ -1,29 +1,14 @@ -import EmailTemplates = require('email-templates'); +import * as Email from 'email-templates'; -const EmailTemplate = EmailTemplates.EmailTemplate; -const template = new EmailTemplate("./"); -const templateWithOptions = new EmailTemplate('./', {disableJuice: true, sassOptions: {}, juiceOptions: {}}); -const users = [ - { - email: 'pappa.pizza@spaghetti.com', - name: { - first: 'Pappa', - last: 'Pizza' - } +const email = new Email.EmailTemplate({ + message: { + from: 'Test@tesitng.com' }, - { - email: 'mister.geppetto@spaghetti.com', - name: { - first: 'Mister', - last: 'Geppetto' - } - } -]; + transport: { + jsonTransport: true + }} +); -const templates = users.map((user) => { - return template.render(user) - .then((results) => { - const {html, subject, text} = results; - return html; - }); -}); +email.juiceResources('

    bob

    '); +email.render('mars/html.pug', {name: 'elon'}); +email.send({template: 'mars', message: {to: 'elon@spacex.com'}, locals: {name: 'Elon'}}); diff --git a/types/email-templates/index.d.ts b/types/email-templates/index.d.ts index d76c23aed3..bb6a3321c7 100644 --- a/types/email-templates/index.d.ts +++ b/types/email-templates/index.d.ts @@ -1,152 +1,84 @@ -// Type definitions for node-email-templates 2.6 +// Type definitions for node-email-templates 3.1 // Project: https://github.com/niftylettuce/node-email-templates // Definitions by: Cyril Schumacher // Matus Gura +// Jacob Copeland // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -/** - * @summary Interface for result of email template. - * @interface - */ -interface EmailTemplateResults { +export interface EmailConfig { /** - * @summary HTML result. - * @type {string} + * The message */ - html: string; - + message: any; /** - * @summary Text result. - * @type {string} + * The nodemailer Transport created via nodemailer.createTransport */ - text: string; - + transport: any; /** - * @summary Subject result. - * @type {string} + * The email template directory and engine information */ - subject: string; + views?: any; + /** + * Do you really want to send, false for test or development + */ + send?: boolean; + /** + * Preview the email + */ + preview?: boolean; + /** + * Set to object to configure and Enable + */ + i18n?: any; + /** + * Pass a custom render function if necessary + */ + render?: { view: string, locals: any }; + /** + * + */ + htmlToText?: any; + /** + * + */ + juice?: boolean; + /** + * + */ + juiceResources?: any; } -/** - * @summary Callback signature. - */ -type EmailTemplateCallback = (err: any, results: EmailTemplateResults) => void; - -/** - * @summary Interface for email-template options - * @interface - */ -interface EmailTemplateOptions { - disableJuice?: boolean; - juiceOptions?: any; - sassOptions?: any; -} - -declare module "email-templates" { +export interface EmailOptions { /** - * @summary Email template class. - * @class + * The template name */ - class EmailTemplate { - /** - * @summary Constructor. - * @param {string} templateDir The template directory. - */ - constructor(templateDir: string, options?: EmailTemplateOptions); - - /** - * @summary Render a single template. - * @param locals The template variables. - * @param locale The language code. - */ - render(locals: any, locale?: string): Promise; - - /** - * @summary Render a single template. - * @param callback The callback function. - */ - render(callback: EmailTemplateCallback): void; - - /** - * @summary Render a single template. - * @param locals The template variables. - * @param callback The callback function. - */ - render(locals: any, callback: EmailTemplateCallback): void; - - /** - * @summary Render a single template. - * @param locals The template variables. - * @param locale The language code. - * @param callback The callback function. - */ - render(locals: any, locale: string, callback: EmailTemplateCallback): void; - - /** - * @summary Render text - * @param locals The template variables. - * @param locale The language code. - */ - renderText(locals: any, locale?: string): Promise; - - /** - * @summary Render text - * @param locals The template variables. - * @param callback The language code. - */ - renderText(locals: any, callback: EmailTemplateCallback): void; - - /** - * @summary Render text - * @param locals The template variables. - * @param locale The language code. - * @param callback The language code. - */ - renderText(locals: any, locale: string, callback: EmailTemplateCallback): void; - - /** - * @summary Render subject - * @param locals The template variables. - * @param locale The language code. - */ - renderSubject(locals: any, locale?: string): Promise; - - /** - * @summary Render subject - * @param locals The template variables. - * @param callback The language code. - */ - renderSubject(locals: any, callback: EmailTemplateCallback): void; - - /** - * @summary Render subject - * @param locals The template variables. - * @param locale The language code. - * @param callback The language code. - */ - renderSubject(locals: any, locale: string, callback: EmailTemplateCallback): void; - - /** - * @summary Render HTML - * @param locals The template variables. - * @param locale The language code. - */ - renderHtml(locals: any, locale?: string): Promise; - - /** - * @summary Render HTML - * @param locals The template variables. - * @param callback The language code. - */ - renderHtml(locals: any, callback: EmailTemplateCallback): void; - - /** - * @summary Render HTML - * @param locals The template variables. - * @param locale The language code. - * @param callback The language code. - */ - renderHtml(locals: any, locale: string, callback: EmailTemplateCallback): void; - } + template: string; + /** + * Nodemailer Message + */ + message: any; + /** + * The Template Variables + */ + locals: any; +} + +export class EmailTemplate { + constructor(config: EmailConfig); + + /** + * shorthand use of `juiceResources` with the config + * mainly for custom renders like from a database). + */ + juiceResources(html: string): Promise ; + + /** + * Render the Email, Used by send, but can be called by itself. + */ + render(view: string, locals: any): Promise; + + /** + * Send the Email. + */ + send(options: EmailOptions): any; } From aef155f339f6c8e446cf1245440041a3d01afc3c Mon Sep 17 00:00:00 2001 From: Vlad Rindevich Date: Fri, 27 Oct 2017 12:10:26 +0700 Subject: [PATCH 030/293] feat(react-tabs): export props for every component --- types/react-tabs/index.d.ts | 83 +++++++++++----------------- types/react-tabs/react-tabs-tests.ts | 16 +++++- 2 files changed, 46 insertions(+), 53 deletions(-) diff --git a/types/react-tabs/index.d.ts b/types/react-tabs/index.d.ts index 02344cf8b1..a4a528046a 100644 --- a/types/react-tabs/index.d.ts +++ b/types/react-tabs/index.d.ts @@ -6,59 +6,38 @@ import * as React from 'react'; -export as namespace ReactTabs; - -declare namespace ReactTabs { - - interface TabsProps { - className?: string | Array | { [name: string]: boolean; }; - defaultFocus?: boolean; - defaultIndex?: number; - disabledTabClassName?: string; - forceRenderTabPanel?: boolean; - onSelect?: (index: number, last: number, event: Event) => boolean | void; - selectedIndex?: number; - selectedTabClassName?: string; - selectedTabPanelClassName?: string; - } - - interface Tabs extends React.ComponentClass {} - - interface TabListProps { - className?: string | Array | { [name: string]: boolean; }; - } - - interface TabList extends React.ComponentClass {} - - interface TabProps { - className?: string | Array | { [name: string]: boolean; }; - disabled?: boolean; - disabledClassName?: string; - selectedClassName?: string; - } - - interface Tab extends React.ComponentClass {} - - interface TabPanelProps { - className?: string | Array | { [name: string]: boolean; }; - forceRender?: boolean; - selectedClassName?: string; - } - - interface TabPanel extends React.ComponentClass {} +export interface TabsProps { + className?: string | Array | { [name: string]: boolean; }; + defaultFocus?: boolean; + defaultIndex?: number; + disabledTabClassName?: string; + forceRenderTabPanel?: boolean; + onSelect?: (index: number, last: number, event: Event) => boolean | void; + selectedIndex?: number; + selectedTabClassName?: string; + selectedTabPanelClassName?: string; } -declare const Tabs: ReactTabs.Tabs; -declare const TabList: ReactTabs.TabList; -declare const Tab: ReactTabs.Tab; -declare const TabPanel: ReactTabs.TabPanel; +export interface TabListProps { + className?: string | Array | { [name: string]: boolean; }; +} -declare function resetIdCounter(): void; +export interface TabProps { + className?: string | Array | { [name: string]: boolean; }; + disabled?: boolean; + disabledClassName?: string; + selectedClassName?: string; +} -export { - Tabs, - TabList, - Tab, - TabPanel, - resetIdCounter -}; +export interface TabPanelProps { + className?: string | Array | { [name: string]: boolean; }; + forceRender?: boolean; + selectedClassName?: string; +} + +export declare class Tabs extends React.Component {} +export declare class TabList extends React.Component {} +export declare class Tab extends React.Component {} +export declare class TabPanel extends React.Component {} + +export declare function resetIdCounter(): void; diff --git a/types/react-tabs/react-tabs-tests.ts b/types/react-tabs/react-tabs-tests.ts index f726780dcb..a7b86de6e0 100644 --- a/types/react-tabs/react-tabs-tests.ts +++ b/types/react-tabs/react-tabs-tests.ts @@ -1,9 +1,23 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { Tabs, TabList, Tab, TabPanel, resetIdCounter } from "react-tabs"; +import { + Tabs, + TabsProps, + TabList, + TabListProps, + Tab, + TabProps, + TabPanel, + TabPanelProps, + resetIdCounter } from "react-tabs"; resetIdCounter(); +interface TestTabProps extends TabProps {} +interface TestTabListProps extends TabListProps {} +interface TestTabPanelProps extends TabPanelProps {} +interface TestTabsProps extends TabsProps {} + class TestApp extends React.Component { onSelect = (index: number, last: number, event: Event) => { console.log("selected tab: " + index.toString()); From 73890010c2ec5ace2f8ea4c681192ea9db324291 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Fri, 27 Oct 2017 07:57:57 +0200 Subject: [PATCH 031/293] webpack: `moduleTrace` should be a `boolean` --- types/webpack/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/webpack/index.d.ts b/types/webpack/index.d.ts index 819016f70d..31383129d7 100644 --- a/types/webpack/index.d.ts +++ b/types/webpack/index.d.ts @@ -642,7 +642,7 @@ declare namespace webpack { /** Sort the modules by a field */ modulesSort?: string; /** Show dependencies and origin of warnings/errors */ - moduleTrace?: number; + moduleTrace?: boolean; /** Add public path information */ publicPath?: boolean; /** Add information about the reasons why modules are included */ From a33c9d1eed8c65f2ad47ec120c4387d04084493d Mon Sep 17 00:00:00 2001 From: Edward Sammut Alessi Date: Fri, 27 Oct 2017 10:09:58 +0200 Subject: [PATCH 032/293] Fix lint warnings --- types/args/index.d.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/types/args/index.d.ts b/types/args/index.d.ts index b6048d2c5f..43e1f86e85 100644 --- a/types/args/index.d.ts +++ b/types/args/index.d.ts @@ -2,20 +2,20 @@ // Project: https://github.com/leo/args#readme // Definitions by: Slessi // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.2 -export = args; +declare const c: args; +export = c; -declare namespace args { - let sub: string[]; +interface args { + sub: string[]; - function option(name: string | [string, string], description: string, defaultValue?: any, init?: OptionInitFunction): typeof args; - function options(list: Option[]): typeof args; - function command(name: string, description: string, init?: CommandInitFunction, aliases?: string[]): typeof args; - function example(usage: string, description: string): typeof args; - function examples(list: Example[]): typeof args; - function parse(argv: string[], options?: ConfigurationOptions): { [key: string]: any }; - function showHelp(): void; + option(name: string | [string, string], description: string, defaultValue?: any, init?: OptionInitFunction): args; + options(list: Option[]): args; + command(name: string, description: string, init?: CommandInitFunction, aliases?: string[]): args; + example(usage: string, description: string): args; + examples(list: Example[]): args; + parse(argv: string[], options?: ConfigurationOptions): { [key: string]: any }; + showHelp(): void; } type MriUnknownFunction = (param: string) => boolean; From 677ca9aa2856d426755c1846cadd9b5da3a876a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kov=C3=A1cs=20Vince?= Date: Fri, 27 Oct 2017 13:10:41 +0200 Subject: [PATCH 033/293] vue-scroll accepts elements too not just string for container and elements --- types/vue-scrollto/index.d.ts | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/types/vue-scrollto/index.d.ts b/types/vue-scrollto/index.d.ts index 5ca330d646..c9e056b261 100644 --- a/types/vue-scrollto/index.d.ts +++ b/types/vue-scrollto/index.d.ts @@ -9,10 +9,10 @@ import { PluginFunction } from "vue"; declare namespace VueScrollTo { interface Options { // The element you want to scroll to. - el?: string; - element?: string; + el?: string | Element; + element?: string | Element; // The container that has to be scrolled. Default: body - container?: string; + container?: string | Element; // The duration (in milliseconds) of the scrolling animation. Default: 500 duration?: number; // The easing to be used when animating. Default: ease @@ -31,17 +31,25 @@ declare namespace VueScrollTo { // Whether or not we want scrolling on the y axis. Default: true y?: boolean; } + + interface VueStatic { + (options: VueScrollTo.Options): void; + + (element: string | Element, options?: VueScrollTo.Options): void; + + (element: string | Element, duration: number, options?: VueScrollTo.Options): void; + } } declare class VueScrollTo { static install: PluginFunction; - scrollTo(element: string | HTMLElement, options?: VueScrollTo.Options): void; + scrollTo: VueScrollTo.VueStatic; } -declare module "vue/types/vue" { +declare module 'vue/types/vue' { interface Vue { - $scrollTo: typeof VueScrollTo.prototype.scrollTo; + $scrollTo: VueScrollTo.VueStatic; } } From 088e63ab57e84f4eb505ff7ad9616829104681a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kov=C3=A1cs=20Vince?= Date: Fri, 27 Oct 2017 14:28:16 +0200 Subject: [PATCH 034/293] Remove qualifier is unnecessary since 'VueScrollTo' is in scope. --- types/vue-scrollto/index.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/vue-scrollto/index.d.ts b/types/vue-scrollto/index.d.ts index c9e056b261..d3a7ec7efb 100644 --- a/types/vue-scrollto/index.d.ts +++ b/types/vue-scrollto/index.d.ts @@ -33,11 +33,11 @@ declare namespace VueScrollTo { } interface VueStatic { - (options: VueScrollTo.Options): void; + (options: Options): void; - (element: string | Element, options?: VueScrollTo.Options): void; + (element: string | Element, options?: Options): void; - (element: string | Element, duration: number, options?: VueScrollTo.Options): void; + (element: string | Element, duration: number, options?: Options): void; } } From 7758f8bcb995a8d9f841cde4c02500663804c06f Mon Sep 17 00:00:00 2001 From: Edward Sammut Alessi Date: Fri, 27 Oct 2017 15:07:11 +0200 Subject: [PATCH 035/293] Fix name for option type --- types/args/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/args/index.d.ts b/types/args/index.d.ts index 43e1f86e85..2ef8b1eb88 100644 --- a/types/args/index.d.ts +++ b/types/args/index.d.ts @@ -65,7 +65,7 @@ interface ConfigurationOptions { } interface Option { - name: string; + name: [string, string]; description: string; init?: OptionInitFunction; defaultValue?: any; From 5a1c6ddc309df5bc64a11d1a9d0a9723b7da826b Mon Sep 17 00:00:00 2001 From: Marc-Andre Roy Date: Fri, 27 Oct 2017 09:21:06 -0400 Subject: [PATCH 036/293] Improve tests, types, and whatnot --- types/guid/guid-tests.ts | 19 ++++++++++++++++--- types/guid/index.d.ts | 5 ++--- types/guid/tsconfig.json | 1 + 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/types/guid/guid-tests.ts b/types/guid/guid-tests.ts index cb5008d2a2..52e0a738d1 100644 --- a/types/guid/guid-tests.ts +++ b/types/guid/guid-tests.ts @@ -1,5 +1,18 @@ import guid = require('guid'); -const newRawGuid: string = guid.raw(); -const isAGuid: boolean = guid.isGuid(newRawGuid); -const newGuidObject: object = guid.create(); +// $ExpectType object +guid.create(); + +// $ExpectType string +guid.raw(); + +const newRawGuid = guid.raw(); + +// $ExpectType boolean +guid.isGuid(newRawGuid); + +// $ExpectType string +guid.EMPTY; + +// $ExpectType object +guid(guid.create()); diff --git a/types/guid/index.d.ts b/types/guid/index.d.ts index 210a1f9584..9d1c6b2ea2 100644 --- a/types/guid/index.d.ts +++ b/types/guid/index.d.ts @@ -2,12 +2,11 @@ // Project: https://github.com/dandean/guid // Definitions by: Marc-Andre Roy // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped - -/** Declaration file generated by dts-gen */ +// TypeScript Version: 2.2 export = guid; -declare function guid(guid: string | guid): any; +declare function guid(guid: object): object; declare namespace guid { const EMPTY: string; diff --git a/types/guid/tsconfig.json b/types/guid/tsconfig.json index 5d335b8f70..17563577fd 100644 --- a/types/guid/tsconfig.json +++ b/types/guid/tsconfig.json @@ -7,6 +7,7 @@ "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, + "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ "../" From 19c7df4d0c86673700b5849a99f16f18e443f1ed Mon Sep 17 00:00:00 2001 From: pdeva Date: Fri, 27 Oct 2017 15:00:25 -0700 Subject: [PATCH 037/293] Update DropdownToggle.d.ts --- types/react-bootstrap/lib/DropdownToggle.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/react-bootstrap/lib/DropdownToggle.d.ts b/types/react-bootstrap/lib/DropdownToggle.d.ts index e5655c22f8..d166c5ae25 100644 --- a/types/react-bootstrap/lib/DropdownToggle.d.ts +++ b/types/react-bootstrap/lib/DropdownToggle.d.ts @@ -9,6 +9,7 @@ declare namespace DropdownToggle { useAnchor?: boolean; bsClass?:string; // Added since v0.30.0 bsStyle?:string; + bsSize?:string; } } declare class DropdownToggle extends React.Component { } From 0c6218ec00d5b5ff06306c0e4d9b883d2ede0775 Mon Sep 17 00:00:00 2001 From: Jacob Date: Fri, 27 Oct 2017 18:44:08 -0400 Subject: [PATCH 038/293] Updated for proper module export After reading today about module export and having a problem importing the definition, I updated to declare namespace and export. now import * as Email from 'email-templates' works with const email = new Email(etc) --- types/email-templates/index.d.ts | 36 +++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/types/email-templates/index.d.ts b/types/email-templates/index.d.ts index bb6a3321c7..12dceb181d 100644 --- a/types/email-templates/index.d.ts +++ b/types/email-templates/index.d.ts @@ -5,7 +5,7 @@ // Jacob Copeland // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -export interface EmailConfig { +interface EmailConfig { /** * The message */ @@ -48,7 +48,7 @@ export interface EmailConfig { juiceResources?: any; } -export interface EmailOptions { +interface EmailOptions { /** * The template name */ @@ -63,22 +63,42 @@ export interface EmailOptions { locals: any; } -export class EmailTemplate { +declare class EmailTemplate { constructor(config: EmailConfig); - /** * shorthand use of `juiceResources` with the config * mainly for custom renders like from a database). */ juiceResources(html: string): Promise ; - /** - * Render the Email, Used by send, but can be called by itself. + * + * @param view The Html pug to render + * @param locals The template Variables */ render(view: string, locals: any): Promise; - /** - * Send the Email. + * Send the Email */ send(options: EmailOptions): any; } + +declare namespace EmailTemplate { + /** + * shorthand use of `juiceResources` with the config + * mainly for custom renders like from a database). + */ + function juiceResources(html: string): Promise ; + + /** + * + * @param view The Html pug to render + * @param locals The template Variables + */ + function render(view: string, locals: any): Promise; + + /** + * Send the Email + */ + function send(options: EmailOptions): any; +} +export = EmailTemplate; From c6e432c71466572e2fedd3a35d56adfa985ab230 Mon Sep 17 00:00:00 2001 From: Jacob Date: Fri, 27 Oct 2017 18:46:11 -0400 Subject: [PATCH 039/293] Updated test to reflect module export Correctly fixed the definition to use import * as Email from 'email-templates' --- types/email-templates/email-templates-tests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/email-templates/email-templates-tests.ts b/types/email-templates/email-templates-tests.ts index c36852de31..d16d0c0620 100644 --- a/types/email-templates/email-templates-tests.ts +++ b/types/email-templates/email-templates-tests.ts @@ -1,6 +1,6 @@ import * as Email from 'email-templates'; -const email = new Email.EmailTemplate({ +const email = new Email({ message: { from: 'Test@tesitng.com' }, From 9f478ae4cc1ec875a3fadca87882fd25babb0540 Mon Sep 17 00:00:00 2001 From: jessezhang91 Date: Fri, 27 Oct 2017 23:40:56 -0400 Subject: [PATCH 040/293] [mock-knex] add types for mock-knex --- types/mock-knex/index.d.ts | 79 ++++++++++++++++++++++++++++++ types/mock-knex/mock-knex-tests.ts | 29 +++++++++++ types/mock-knex/tsconfig.json | 23 +++++++++ types/mock-knex/tslint.json | 1 + 4 files changed, 132 insertions(+) create mode 100644 types/mock-knex/index.d.ts create mode 100644 types/mock-knex/mock-knex-tests.ts create mode 100644 types/mock-knex/tsconfig.json create mode 100644 types/mock-knex/tslint.json diff --git a/types/mock-knex/index.d.ts b/types/mock-knex/index.d.ts new file mode 100644 index 0000000000..5633000ab9 --- /dev/null +++ b/types/mock-knex/index.d.ts @@ -0,0 +1,79 @@ +// Type definitions for mock-knex 0.3 +// Project: https://github.com/colonyamerican/mock-knex +// Definitions by: Jesse Zhang +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.2 + +/// + +import * as Knex from "knex"; +import { EventEmitter } from "events"; + +/** + * Attaches mocked client to knex instance + * + * @param knex initialized knex client + */ +export function mock(knex: Knex): void; + +/** + * Detaches mocked client from knex instance + * + * @param knex initialized knex client + */ +export function unmock(knex: Knex): void; + +/** + * Returns query Tracker instance + */ +export function getTracker(): Tracker; + +/** + * The tracker enables you to catch and respond to queries that occur during testing, see Test for more examples. + */ +export interface Tracker extends EventEmitter { + /** + * Enables query tracking mock on mocked knex client + */ + install(): void; + + /** + * Disables query tracking mock on mocked knex client. Also resets 'step' counter. + */ + uninstall(): void; + + /** + * Add event listener for 'query' event. It gets esecuted for each query that should end up in database. + * Instead of this callback gets executed and its up to you to assert queries and mock database responses. + * + * @param callback A function that gets executed on 'query' event. + */ + on(event: 'query', callback: (query: QueryDetails, step: number) => void): this; +} + +/** + * The object containing query details that is being sent to knex database dialect on query execution. + * Object properties signature matches with knex toSQL() output with additional method returns(values). + */ +export interface QueryDetails extends Knex.Sql { + /** + * Function that needs to be called to mock database query result for knex. + * + * @param error The Error, string or instance of Error, which represents why the result was rejected + */ + reject(error: Error | string): void; + + /** + * Function that needs to be called to mock database query result for knex. + * + * @param values An array of mock data to be returned by database. For Bookshelf this is mostly array of objects. Knex could return any type of data. + */ + response(values: any[], options?: QueryDetailsResponseOption): void; +} + +export interface QueryDetailsResponseOption { + /** + * Is this a stream response, defaults to false + */ + stream: boolean; +} diff --git a/types/mock-knex/mock-knex-tests.ts b/types/mock-knex/mock-knex-tests.ts new file mode 100644 index 0000000000..ec4ef0024e --- /dev/null +++ b/types/mock-knex/mock-knex-tests.ts @@ -0,0 +1,29 @@ +import * as knex from "knex"; +import * as mockDb from "mock-knex"; + +const db = knex({ + client: 'sqlite' +}); + +mockDb.mock(db); + +const tracker = mockDb.getTracker(); +tracker.install(); +tracker.on('query', (query, step) => { + if (query.method === "first" || step === 1) { + query.response([{ + a: 1 + }, { + a: 2 + }, { + a: 3 + }], { + stream: false + }); + } else { + query.reject(new Error("bad query")); + } +}); +tracker.uninstall(); + +mockDb.unmock(db); diff --git a/types/mock-knex/tsconfig.json b/types/mock-knex/tsconfig.json new file mode 100644 index 0000000000..427ad9f843 --- /dev/null +++ b/types/mock-knex/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "mock-knex-tests.ts" + ] +} diff --git a/types/mock-knex/tslint.json b/types/mock-knex/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/mock-knex/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From b58290d346b44d0e1b0199a3aa9d4b96b63af328 Mon Sep 17 00:00:00 2001 From: Ondrej Sevcik Date: Sat, 28 Oct 2017 09:40:55 +0200 Subject: [PATCH 041/293] Remove myself from maintainer list I don't have time to maintain it anymore and also I haven't used CKEditor typings for more than 2y now. --- types/ckeditor/index.d.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/types/ckeditor/index.d.ts b/types/ckeditor/index.d.ts index c61dd9c467..150bc7e7a6 100644 --- a/types/ckeditor/index.d.ts +++ b/types/ckeditor/index.d.ts @@ -1,7 +1,6 @@ // Type definitions for CKEditor // Project: http://ckeditor.com/ -// Definitions by: Ondrej Sevcik -// Thomas Wittwer +// Definitions by: Thomas Wittwer // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // WORK-IN-PROGRESS: Any contribution support welcomed. From 8f9739685b4dc06c2b1c85bd8148d2299fead924 Mon Sep 17 00:00:00 2001 From: Edward Sammut Alessi Date: Sat, 28 Oct 2017 20:35:52 +0200 Subject: [PATCH 042/293] Move types only used once inline --- types/args/index.d.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/types/args/index.d.ts b/types/args/index.d.ts index 2ef8b1eb88..70b784564d 100644 --- a/types/args/index.d.ts +++ b/types/args/index.d.ts @@ -11,19 +11,14 @@ interface args { option(name: string | [string, string], description: string, defaultValue?: any, init?: OptionInitFunction): args; options(list: Option[]): args; - command(name: string, description: string, init?: CommandInitFunction, aliases?: string[]): args; + command(name: string, description: string, init?: (name: string, sub: string[], options: ConfigurationOptions) => void, aliases?: string[]): args; example(usage: string, description: string): args; examples(list: Example[]): args; parse(argv: string[], options?: ConfigurationOptions): { [key: string]: any }; showHelp(): void; } -type MriUnknownFunction = (param: string) => boolean; -type MinimistUnknownFunction = (param: string) => boolean; - type OptionInitFunction = (value: any) => any; -type CommandInitFunction = (name: string, sub: string[], options: ConfigurationOptions) => void; -type UsageFilterFunction = (output: any) => any; interface MriOptions { args?: string[]; @@ -35,7 +30,7 @@ interface MriOptions { [key: string]: any }; string?: string | string[]; - unknown?: MriUnknownFunction; + unknown?: (param: string) => boolean; } interface MinimistOptions { @@ -49,14 +44,14 @@ interface MinimistOptions { }; stopEarly?: boolean; "--"?: boolean; - unknown?: MinimistUnknownFunction; + unknown?: (param: string) => boolean; } interface ConfigurationOptions { help?: boolean; name?: string; version?: boolean; - usageFilter?: UsageFilterFunction; + usageFilter?: (output: any) => any; value?: string; mri: MriOptions; minimist?: MinimistOptions; @@ -65,7 +60,7 @@ interface ConfigurationOptions { } interface Option { - name: [string, string]; + name: string | [string, string]; description: string; init?: OptionInitFunction; defaultValue?: any; From bc39d3d32046c106fcf866e1766045c7632939ff Mon Sep 17 00:00:00 2001 From: Winslow Dalpe Date: Sat, 28 Oct 2017 15:51:36 -0700 Subject: [PATCH 043/293] Adding typings for moment-holiday PR upstream to add typings in the library has been open for a while without feedback. Adding the typings here until that PR changes state. --- types/moment-holiday/index.d.ts | 71 +++++++++++ types/moment-holiday/moment-holiday-tests.ts | 126 +++++++++++++++++++ types/moment-holiday/package.json | 6 + types/moment-holiday/tsconfig.json | 23 ++++ types/moment-holiday/tslint.json | 1 + 5 files changed, 227 insertions(+) create mode 100644 types/moment-holiday/index.d.ts create mode 100644 types/moment-holiday/moment-holiday-tests.ts create mode 100644 types/moment-holiday/package.json create mode 100644 types/moment-holiday/tsconfig.json create mode 100644 types/moment-holiday/tslint.json diff --git a/types/moment-holiday/index.d.ts b/types/moment-holiday/index.d.ts new file mode 100644 index 0000000000..fffe81ed73 --- /dev/null +++ b/types/moment-holiday/index.d.ts @@ -0,0 +1,71 @@ +// Type definitions for moment-holiday 1.5 +// Project: https://github.com/kodie/moment-holiday +// Definitions by: Robert Winslow Dalpe +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +import * as moment from 'moment'; + +declare module 'moment' { + interface Moment extends Object { + holiday( + holidays?: string[] | string, + adjust?: boolean): Moment | false | { [holidayName: string]: Moment }; + + holidays( + holidays?: string[] | string, + adjust?: boolean): Moment | false | { [holidayName: string]: Moment }; + + isHoliday( + holidays?: string[] | string | null, + adjust?: boolean): boolean | string | string[]; + + previousHoliday(count?: number, adjust?: boolean): Moment[] | Moment; + + previousHolidays(count?: number, adjust?: boolean): Moment[] | Moment; + + nextHoliday(count?: number, adjust?: boolean): Moment[] | Moment; + + nextHolidays(count?: number, adjust?: boolean): Moment[] | Moment; + + holidaysBetween(m: Moment, adjust?: boolean): Moment[] | false; + } + + interface HolidayDefinition { + date: string; + keywords?: string[]; + keywords_y?: string[]; + keywords_n?: string[]; + regions?: string[]; + regions_n?: string[]; + } + + interface HolidaysMapping { + [holidayName: string]: HolidayDefinition; + } + + interface Holidays { + active: HolidaysMapping; + active_last: HolidaysMapping; + } + + interface HolidayModifier { + set( + holidays: HolidaysMapping | string | string[], + specifics?: any): HolidayModifier; + + add( + holidays: HolidaysMapping | string, + specifics?: any): HolidayModifier; + + remove(holidays: string | string[]): HolidayModifier; + + undo(): HolidayModifier; + + load(locales: string | string[]): HolidayModifier; + + extendParser(parserFunc: (m: Moment, date: string) => Moment | Moment[] | false | void): HolidayModifier; + } + + let holidays: Holidays; + let modifyHolidays: HolidayModifier; +} diff --git a/types/moment-holiday/moment-holiday-tests.ts b/types/moment-holiday/moment-holiday-tests.ts new file mode 100644 index 0000000000..d6d0941f38 --- /dev/null +++ b/types/moment-holiday/moment-holiday-tests.ts @@ -0,0 +1,126 @@ +import * as moment from 'moment'; + +let holidayResult: moment.Moment | false | { [holidayName: string]: moment.Moment }; +holidayResult = moment().holiday([]); +holidayResult = moment().holiday([], false); +holidayResult = moment().holiday([], true); +holidayResult = moment().holiday('string'); +holidayResult = moment().holiday('string', false); +holidayResult = moment().holiday('string', true); +holidayResult = moment().holiday(['array', 'of', 'strings']); +holidayResult = moment().holiday(['array', 'of', 'strings'], false); +holidayResult = moment().holiday(['array', 'of', 'strings'], true); + +holidayResult = moment().holidays([]); +holidayResult = moment().holidays([], false); +holidayResult = moment().holidays([], true); +holidayResult = moment().holidays('string'); +holidayResult = moment().holidays('string', false); +holidayResult = moment().holidays('string', true); +holidayResult = moment().holidays(['array', 'of', 'strings']); +holidayResult = moment().holidays(['array', 'of', 'strings'], false); +holidayResult = moment().holidays(['array', 'of', 'strings'], true); + +let isHolidayResult: boolean | string | string[]; +isHolidayResult = moment().isHoliday(); +isHolidayResult = moment().isHoliday([]); +isHolidayResult = moment().isHoliday([], false); +isHolidayResult = moment().isHoliday([], true); +isHolidayResult = moment().isHoliday(['array', 'of', 'strings']); +isHolidayResult = moment().isHoliday(['array', 'of', 'strings'], false); +isHolidayResult = moment().isHoliday(['array', 'of', 'strings'], true); +isHolidayResult = moment().isHoliday('string'); +isHolidayResult = moment().isHoliday('string', false); +isHolidayResult = moment().isHoliday('string', true); +isHolidayResult = moment().isHoliday(null); +isHolidayResult = moment().isHoliday(null, false); +isHolidayResult = moment().isHoliday(null, true); + +let previousHolidayResult: moment.Moment[] | moment.Moment; +previousHolidayResult = moment().previousHoliday(); +previousHolidayResult = moment().previousHoliday(1); +previousHolidayResult = moment().previousHoliday(1, false); +previousHolidayResult = moment().previousHoliday(1, true); +previousHolidayResult = moment().previousHolidays(); +previousHolidayResult = moment().previousHolidays(1); +previousHolidayResult = moment().previousHolidays(1, false); +previousHolidayResult = moment().previousHolidays(1, true); + +let nextHolidayResult: moment.Moment[] | moment.Moment; +nextHolidayResult = moment().nextHoliday(); +nextHolidayResult = moment().nextHoliday(1); +nextHolidayResult = moment().nextHoliday(1, false); +nextHolidayResult = moment().nextHoliday(1, true); +nextHolidayResult = moment().nextHolidays(); +nextHolidayResult = moment().nextHolidays(1); +nextHolidayResult = moment().nextHolidays(1, false); +nextHolidayResult = moment().nextHolidays(1, true); + +let holidaysBetweenResult: moment.Moment[] | false; +holidaysBetweenResult = moment().holidaysBetween(moment()); +holidaysBetweenResult = moment().holidaysBetween(moment(), false); +holidaysBetweenResult = moment().holidaysBetween(moment(), true); + +let holidayDefinition: moment.HolidayDefinition = { + date: 'string' +}; +holidayDefinition = { + date: 'string', + keywords: ['array'], +}; +holidayDefinition = { + date: 'string', + keywords: ['array'], + keywords_n: ['array'], +}; +holidayDefinition = { + date: 'string', + keywords: ['array'], + keywords_n: ['array'], + keywords_y: ['array'], +}; +holidayDefinition = { + date: 'string', + keywords: ['array'], + keywords_n: ['array'], + keywords_y: ['array'], + regions: ['array'], +}; +holidayDefinition = { + date: 'string', + keywords: ['array'], + keywords_n: ['array'], + keywords_y: ['array'], + regions: ['array'], + regions_n: ['array'] +}; + +const holidays: moment.Holidays = moment.holidays; +let activeHolidays: moment.HolidaysMapping = moment.holidays.active; +activeHolidays = { + 'Some holiday name': holidayDefinition +}; + +let lastActiveHolidays: moment.HolidaysMapping = moment.holidays.active_last; +lastActiveHolidays = { + 'Some holiday name': holidayDefinition +}; + +let holidayModifier: moment.HolidayModifier = moment.modifyHolidays; +holidayModifier = holidayModifier.set('string'); +holidayModifier = holidayModifier.set(['array']); +holidayModifier = holidayModifier.set(activeHolidays); +holidayModifier = holidayModifier.set('string', {}); +holidayModifier = holidayModifier.set(['array'], {}); +holidayModifier = holidayModifier.set(activeHolidays, {}); +holidayModifier = holidayModifier.add(activeHolidays); +holidayModifier = holidayModifier.add('string'); +holidayModifier = holidayModifier.add(activeHolidays, {}); +holidayModifier = holidayModifier.add('string', {}); +holidayModifier = holidayModifier.remove('string'); +holidayModifier = holidayModifier.remove(['array']); +holidayModifier = holidayModifier.undo(); +holidayModifier = holidayModifier.load('string'); +holidayModifier = holidayModifier.load(['string']); +holidayModifier = holidayModifier.extendParser((m: moment.Moment, d: string): moment.Moment | moment.Moment[] | false | void => { +}); diff --git a/types/moment-holiday/package.json b/types/moment-holiday/package.json new file mode 100644 index 0000000000..4c7554a28e --- /dev/null +++ b/types/moment-holiday/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "moment": ">=2.0.0" + } +} diff --git a/types/moment-holiday/tsconfig.json b/types/moment-holiday/tsconfig.json new file mode 100644 index 0000000000..d03f37e12c --- /dev/null +++ b/types/moment-holiday/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "moment-holiday-tests.ts" + ] +} diff --git a/types/moment-holiday/tslint.json b/types/moment-holiday/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/moment-holiday/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From 893b0c790c8ea24c1080fe6da1f52d62a08704d9 Mon Sep 17 00:00:00 2001 From: Homa Wong Date: Sat, 28 Oct 2017 16:58:34 -0700 Subject: [PATCH 044/293] Update index.d.ts --- types/lodash/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/lodash/index.d.ts b/types/lodash/index.d.ts index b0e4f6848d..b8d83d27b3 100644 --- a/types/lodash/index.d.ts +++ b/types/lodash/index.d.ts @@ -9515,7 +9515,7 @@ declare namespace _ { * @param value The value to check. * @return Returns true if value is correctly classified, else false. */ - isFunction(value?: any): value is (...args: any[]) => any; + isFunction(value?: F): value is F; } interface LoDashImplicitWrapper { From 11526a8ca01e8a9489a5f1824afe8823a2d73b3a Mon Sep 17 00:00:00 2001 From: Homa Wong Date: Sat, 28 Oct 2017 19:33:56 -0700 Subject: [PATCH 045/293] Update index.d.ts --- types/lodash/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/lodash/index.d.ts b/types/lodash/index.d.ts index b8d83d27b3..b0e4f6848d 100644 --- a/types/lodash/index.d.ts +++ b/types/lodash/index.d.ts @@ -9515,7 +9515,7 @@ declare namespace _ { * @param value The value to check. * @return Returns true if value is correctly classified, else false. */ - isFunction(value?: F): value is F; + isFunction(value?: any): value is (...args: any[]) => any; } interface LoDashImplicitWrapper { From 8c196e90dfb50a6e3429fc7c615cbb6798a42073 Mon Sep 17 00:00:00 2001 From: Jacob Date: Sat, 28 Oct 2017 23:00:37 -0400 Subject: [PATCH 046/293] Updated per Reviewer Request changed import statement per reviewer's request. --- types/email-templates/email-templates-tests.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/types/email-templates/email-templates-tests.ts b/types/email-templates/email-templates-tests.ts index d16d0c0620..20401cb83e 100644 --- a/types/email-templates/email-templates-tests.ts +++ b/types/email-templates/email-templates-tests.ts @@ -1,6 +1,7 @@ -import * as Email from 'email-templates'; +import EmailTemplates = require('email-templates'); -const email = new Email({ + +const email = new EmailTemplates({ message: { from: 'Test@tesitng.com' }, From 239b0857a586c97f033ef958af851175f9888e23 Mon Sep 17 00:00:00 2001 From: Jacob Date: Sat, 28 Oct 2017 23:08:10 -0400 Subject: [PATCH 047/293] Removed extra whitespace Not sure how an extra line showed up. This should be good now for linting. --- types/email-templates/email-templates-tests.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/types/email-templates/email-templates-tests.ts b/types/email-templates/email-templates-tests.ts index 20401cb83e..a3311d6e81 100644 --- a/types/email-templates/email-templates-tests.ts +++ b/types/email-templates/email-templates-tests.ts @@ -1,6 +1,5 @@ import EmailTemplates = require('email-templates'); - const email = new EmailTemplates({ message: { from: 'Test@tesitng.com' From cce915c86c661f6a61417e695d075247302c20bc Mon Sep 17 00:00:00 2001 From: Jasper Roloff Date: Sun, 29 Oct 2017 18:58:03 +0100 Subject: [PATCH 048/293] updates umzug types to support custom resolver --- types/umzug/index.d.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/types/umzug/index.d.ts b/types/umzug/index.d.ts index 0954170b71..634c247bd4 100644 --- a/types/umzug/index.d.ts +++ b/types/umzug/index.d.ts @@ -28,6 +28,16 @@ declare namespace umzug { */ wrap?: (fn: T) => T; + /** + * A function that maps a file path to a migration object in the form + * { up: Function, down: Function }. The default for this is to require(...) + * the file as javascript, but you can use this to transpile TypeScript, + * read raw sql etc. + * See https://github.com/sequelize/umzug/tree/master/test/fixtures + * for examples. + */ + customResolver?(path: string): { up: () => Promise, down?: () => Promise }; + } interface JSONStorageOptions { From 3688a1f75d2c3516c6843195524d577cac6d59f1 Mon Sep 17 00:00:00 2001 From: Al Tabayoyon Date: Sun, 29 Oct 2017 20:36:45 -0700 Subject: [PATCH 049/293] Updates types/jsbn: index.d.ts and jsbn-tests.ts Issue: Error in @types/jsbn Typescript declarations file. Symptom: After installing typescript, jsbn and @types/jsbn in a project, creation of a Typescript file that import of BigInteger with import {BigInteger} from 'jsbn'; results in TS2306: File node_modules/@types/jsbn/index.d.ts is not a module. Resolution: In @types/jsbn/index.d.ts, replace line declare namespace jsbn { with declare module 'jsbn' { Additional Notes: When using current @types/jsbn as is, using Webstorm's "quickfix" to resolve a reference to BigInteger example: const bi = new BigInteger('2', 16); may result in adding import BigInteger = jsbn.BigInteger; which will work with local builds but if it becomes a published npm package (lets call it zzz), a browser-side application (e.g. Angular) importing package zzz will result in a JavaScript runtime error as it is unable to resolve 'jsbn.BigInteger'. --- types/jsbn/index.d.ts | 2 +- types/jsbn/jsbn-tests.ts | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/types/jsbn/index.d.ts b/types/jsbn/index.d.ts index cde50e0df2..2614718b81 100644 --- a/types/jsbn/index.d.ts +++ b/types/jsbn/index.d.ts @@ -3,7 +3,7 @@ // Definitions by: Eugene Chernyshov // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -declare namespace jsbn { +declare module 'jsbn' { interface RandomGenerator { nextBytes(bytes: number[]): void; diff --git a/types/jsbn/jsbn-tests.ts b/types/jsbn/jsbn-tests.ts index 76088a32b6..eb5959173f 100644 --- a/types/jsbn/jsbn-tests.ts +++ b/types/jsbn/jsbn-tests.ts @@ -1,16 +1,15 @@ - -var BigInteger = jsbn.BigInteger; +import {BigInteger} from 'jsbn'; // constructor tests var x = new BigInteger("AABB", 16); x = new BigInteger("75643564363473453456342378564387956906736546456235345"); // method tests -var isBigInteger: jsbn.BigInteger; +var isBigInteger: BigInteger; var isNumber: number; var isBoolean: boolean; var isString: string; -var isDivmod: jsbn.BigInteger[]; +var isDivmod: BigInteger[]; var isByteArray: number[]; x.copyTo(x); From 18c2cdb543cd978058627e12f90a54c31125830e Mon Sep 17 00:00:00 2001 From: Cameron Crothers Date: Mon, 30 Oct 2017 14:50:37 +1100 Subject: [PATCH 050/293] Support ldapjs change as per docs --- types/ldapjs/index.d.ts | 4 ++++ types/ldapjs/ldapjs-tests.ts | 11 +++++++++++ types/ldapjs/tsconfig.json | 3 +-- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/types/ldapjs/index.d.ts b/types/ldapjs/index.d.ts index 0afbf16046..8034add042 100644 --- a/types/ldapjs/index.d.ts +++ b/types/ldapjs/index.d.ts @@ -71,6 +71,10 @@ export interface Change { }; } +export var Change: { + new(change: Change): Change; +} + export interface SearchCallBack { (error: Error, result: EventEmitter): void; } diff --git a/types/ldapjs/ldapjs-tests.ts b/types/ldapjs/ldapjs-tests.ts index 6b2d879142..ec106fd29a 100644 --- a/types/ldapjs/ldapjs-tests.ts +++ b/types/ldapjs/ldapjs-tests.ts @@ -18,3 +18,14 @@ let opts: ldap.SearchOptions = { client.search('o=example', opts, (err: Error, res: NodeJS.EventEmitter): void => { // nothing }); + +let change = new ldap.Change({ + operation: 'add', + modification: { + pets: ['cat', 'dog'] + } +}); + +client.modify('cn=foo, o=example', change, function(err) { + // nothing +}); diff --git a/types/ldapjs/tsconfig.json b/types/ldapjs/tsconfig.json index 1f1d5bafc9..1f4da0daf0 100644 --- a/types/ldapjs/tsconfig.json +++ b/types/ldapjs/tsconfig.json @@ -7,7 +7,6 @@ "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": false, - "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ "../" @@ -20,4 +19,4 @@ "index.d.ts", "ldapjs-tests.ts" ] -} \ No newline at end of file +} From 7f4e260887ab697741f776f9963038bf8433b169 Mon Sep 17 00:00:00 2001 From: Al Tabayoyon Date: Sun, 29 Oct 2017 20:57:45 -0700 Subject: [PATCH 051/293] Updated version from v1.2 to v1.3.0 --- types/jsbn/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/jsbn/index.d.ts b/types/jsbn/index.d.ts index 2614718b81..5941b48c0e 100644 --- a/types/jsbn/index.d.ts +++ b/types/jsbn/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for jsbn v1.2 +// Type definitions for jsbn v1.3.0 // Project: http://www-cs-students.stanford.edu/%7Etjw/jsbn/ // Definitions by: Eugene Chernyshov // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped From 87400f8dce2f15283d6c7d344569012369a5cb33 Mon Sep 17 00:00:00 2001 From: Cameron Crothers Date: Mon, 30 Oct 2017 15:30:07 +1100 Subject: [PATCH 052/293] Put strictFunctionTypes back --- types/ldapjs/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/types/ldapjs/tsconfig.json b/types/ldapjs/tsconfig.json index 1f4da0daf0..a0df7615fd 100644 --- a/types/ldapjs/tsconfig.json +++ b/types/ldapjs/tsconfig.json @@ -7,6 +7,7 @@ "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": false, + "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ "../" From 175347f17b064b99d21dd55a2f55e456c6ef3252 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kov=C3=A1cs=20Vince?= Date: Mon, 30 Oct 2017 08:50:03 +0100 Subject: [PATCH 053/293] Remove white space between coresponding methods --- types/vue-scrollto/index.d.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/types/vue-scrollto/index.d.ts b/types/vue-scrollto/index.d.ts index d3a7ec7efb..47371283d9 100644 --- a/types/vue-scrollto/index.d.ts +++ b/types/vue-scrollto/index.d.ts @@ -34,9 +34,7 @@ declare namespace VueScrollTo { interface VueStatic { (options: Options): void; - (element: string | Element, options?: Options): void; - (element: string | Element, duration: number, options?: Options): void; } } From e3a0447a5ddaef2d4106e7be8c4a7af74d0db2f1 Mon Sep 17 00:00:00 2001 From: Damian Senn Date: Mon, 30 Oct 2017 10:27:06 +0100 Subject: [PATCH 054/293] Add missing options to selectize config --- types/selectize/index.d.ts | 35 ++++++++++++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/types/selectize/index.d.ts b/types/selectize/index.d.ts index 449d09ce52..c441137558 100644 --- a/types/selectize/index.d.ts +++ b/types/selectize/index.d.ts @@ -11,6 +11,11 @@ declare namespace Selectize { // General // ------------------------------------------------------------------------------------------------------------ + /** + * An array of the initial selected values. By default this is populated from the original input element. + */ + items?: T[]; + /** * The string to separate items by. This option is only used when Selectize is instantiated from a * element. @@ -94,6 +99,13 @@ declare namespace Selectize { */ hideSelected?: boolean; + /** + * If true, the dropdown will be closed after a selection is made. + * + * Default: false + */ + closeAfterSelect?: boolean; + /** * If true, Selectize will treat any options with a "" value like normal. This defaults to false to * accomodate the common