diff --git a/types/react-input-mask/index.d.ts b/types/react-input-mask/index.d.ts index c09719f871..ff618e8749 100644 --- a/types/react-input-mask/index.d.ts +++ b/types/react-input-mask/index.d.ts @@ -1,49 +1,73 @@ -// Type definitions for react-input-mask 1.2 +// Type definitions for react-input-mask 2.0 // Project: https://github.com/sanniassin/react-input-mask // Definitions by: Alexandre Paré +// Dima Danylyuk // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.8 +// TypeScript Version: 2.9 -import * as React from "react"; +import * as React from 'react'; -declare namespace ReactInputMask { - interface Props extends React.InputHTMLAttributes { - /** - * Mask string. Format characters are: - * * `9`: `0-9` - * * `a`: `A-Z, a-z` - * * `\*`: `A-Z, a-z, 0-9` - * - * Any character can be escaped with backslash, which usually will appear as double backslash in JS strings. - * For example, German phone mask with unremoveable prefix +49 will look like `mask="+4\\9 99 999 99"` or `mask={"+4\\\\9 99 999 99"}` - */ - mask: string; - /** - * Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input. - */ - maskChar?: string | null; - /** - * Defines format characters with characters as keys and corresponding RegExp string as values. Default ones: - * ``` - * { - * "9": "[0-9]", - * "a": "[A-Za-z]", - * "*": "[A-Za-z0-9]" - * }``` - */ - formatChars?: { [key: string]: string }; - /** - * Show mask even in empty input without focus. - */ - alwaysShowMask?: boolean; - /** - * Use inputRef instead of ref if you need input node to manage focus, selection, etc. - */ - inputRef?: React.Ref; - } +export interface InputState { + value: string; + selection: Selection; } -declare class ReactInputMask extends React.Component { +export interface MaskOptions { + mask: string; + maskChar: string; + alwaysShowMask: boolean; + formatChars: Record; + permanents: number[]; +} + +interface Props extends React.InputHTMLAttributes { + /** + * Mask string. Format characters are: + * * `9`: `0-9` + * * `a`: `A-Z, a-z` + * * `\*`: `A-Z, a-z, 0-9` + * + * Any character can be escaped with backslash, which usually will appear as double backslash in JS strings. + * For example, German phone mask with unremoveable prefix +49 will look like `mask="+4\\9 99 999 99"` or `mask={"+4\\\\9 99 999 99"}` + */ + mask: string; + /** + * Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input. + */ + maskChar?: string | null; + /** + * Defines format characters with characters as keys and corresponding RegExp string as values. Default ones: + * ``` + * { + * "9": "[0-9]", + * "a": "[A-Za-z]", + * "*": "[A-Za-z0-9]" + * }``` + */ + formatChars?: { [key: string]: string }; + /** + * Show mask even in empty input without focus. + */ + alwaysShowMask?: boolean; + /** + * Use inputRef instead of ref if you need input node to manage focus, selection, etc. + */ + inputRef?: React.Ref; + + /** + * In case you need to implement more complex masking behavior, you can provide + * beforeMaskedValueChange function to change masked value and cursor position + * before it will be applied to the input. + */ + beforeMaskedValueChange?( + newState: InputState, + oldState: InputState, + userInput: string, + maskOptions: MaskOptions, + ): InputState; +} + +export class ReactInputMask extends React.Component { } export default ReactInputMask; diff --git a/types/react-input-mask/react-input-mask-tests.tsx b/types/react-input-mask/react-input-mask-tests.tsx index a34b15ac99..93c6b1f638 100644 --- a/types/react-input-mask/react-input-mask-tests.tsx +++ b/types/react-input-mask/react-input-mask-tests.tsx @@ -4,10 +4,10 @@ import * as React from 'react'; let ref: HTMLInputElement | null = null;
- - - - - - ref = node} /> + + + + + + ref = node} />
; diff --git a/types/react-input-mask/tslint.json b/types/react-input-mask/tslint.json index 3db14f85ea..f93cf8562a 100644 --- a/types/react-input-mask/tslint.json +++ b/types/react-input-mask/tslint.json @@ -1 +1,3 @@ -{ "extends": "dtslint/dt.json" } +{ + "extends": "dtslint/dt.json" +} diff --git a/types/react-input-mask/v1/index.d.ts b/types/react-input-mask/v1/index.d.ts new file mode 100644 index 0000000000..c09719f871 --- /dev/null +++ b/types/react-input-mask/v1/index.d.ts @@ -0,0 +1,49 @@ +// Type definitions for react-input-mask 1.2 +// Project: https://github.com/sanniassin/react-input-mask +// Definitions by: Alexandre Paré +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import * as React from "react"; + +declare namespace ReactInputMask { + interface Props extends React.InputHTMLAttributes { + /** + * Mask string. Format characters are: + * * `9`: `0-9` + * * `a`: `A-Z, a-z` + * * `\*`: `A-Z, a-z, 0-9` + * + * Any character can be escaped with backslash, which usually will appear as double backslash in JS strings. + * For example, German phone mask with unremoveable prefix +49 will look like `mask="+4\\9 99 999 99"` or `mask={"+4\\\\9 99 999 99"}` + */ + mask: string; + /** + * Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input. + */ + maskChar?: string | null; + /** + * Defines format characters with characters as keys and corresponding RegExp string as values. Default ones: + * ``` + * { + * "9": "[0-9]", + * "a": "[A-Za-z]", + * "*": "[A-Za-z0-9]" + * }``` + */ + formatChars?: { [key: string]: string }; + /** + * Show mask even in empty input without focus. + */ + alwaysShowMask?: boolean; + /** + * Use inputRef instead of ref if you need input node to manage focus, selection, etc. + */ + inputRef?: React.Ref; + } +} + +declare class ReactInputMask extends React.Component { +} + +export default ReactInputMask; diff --git a/types/react-input-mask/v1/react-input-mask-tests.tsx b/types/react-input-mask/v1/react-input-mask-tests.tsx new file mode 100644 index 0000000000..a34b15ac99 --- /dev/null +++ b/types/react-input-mask/v1/react-input-mask-tests.tsx @@ -0,0 +1,13 @@ +import ReactInputMask from 'react-input-mask'; +import * as React from 'react'; + +let ref: HTMLInputElement | null = null; + +
+ + + + + + ref = node} /> +
; diff --git a/types/react-input-mask/v1/tsconfig.json b/types/react-input-mask/v1/tsconfig.json new file mode 100644 index 0000000000..fddba7dc87 --- /dev/null +++ b/types/react-input-mask/v1/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "jsx": "react", + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../../", + "typeRoots": [ + "../../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "paths": { + "react-input-mask": ["react-input-mask/v1"] + } + }, + "files": [ + "index.d.ts", + "react-input-mask-tests.tsx" + ] +} \ No newline at end of file diff --git a/types/react-input-mask/v1/tslint.json b/types/react-input-mask/v1/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-input-mask/v1/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }