Merge pull request #27949 from dima7a14/master

Update types for "react-input-mask" v2.0.3

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é <https://github.com/apare>
+//                 Dima Danylyuk <https://github.com/dima7a14>
 // 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<HTMLInputElement> {
-        /**
-         * 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<HTMLInputElement>;
-    }
+export interface InputState {
+  value: string;
+  selection: Selection;
 }
 
-declare class ReactInputMask extends React.Component<ReactInputMask.Props> {
+export interface MaskOptions {
+  mask: string;
+  maskChar: string;
+  alwaysShowMask: boolean;
+  formatChars: Record<string, string>;
+  permanents: number[];
+}
+
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * 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<HTMLInputElement>;
+
+  /**
+   * 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<Props> {
 }
 
 export default ReactInputMask;

types/react-input-mask/react-input-mask-tests.tsx

@@ -4,10 +4,10 @@ import * as React from 'react';
 let ref: HTMLInputElement | null = null;
 
 <div>
-    <ReactInputMask mask="+4\9 99 999 99" maskChar={null} />
-    <ReactInputMask mask="+7 (999) 999-99-99" />
-    <ReactInputMask mask="99-99-9999" defaultValue= "13-00-2017" />
-    <ReactInputMask mask="99/99/9999" placeholder= "Enter birthdate" />
-    <ReactInputMask mask="+7 (999) 999-99-99" />
-    <ReactInputMask mask="+7 (999) 999-99-99" inputRef={(node) => ref = node} />
+  <ReactInputMask mask="+4\9 99 999 99" maskChar={null} />
+  <ReactInputMask mask="+7 (999) 999-99-99" />
+  <ReactInputMask mask="99-99-9999" defaultValue="13-00-2017" />
+  <ReactInputMask mask="99/99/9999" placeholder="Enter birthdate" />
+  <ReactInputMask mask="+7 (999) 999-99-99" />
+  <ReactInputMask mask="+7 (999) 999-99-99" inputRef={(node) => ref = node} />
 </div>;

types/react-input-mask/tslint.json

@@ -1 +1,3 @@
-{ "extends": "dtslint/dt.json" }
+{
+    "extends": "dtslint/dt.json"
+}

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é <https://github.com/apare>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from "react";
+
+declare namespace ReactInputMask {
+    interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
+        /**
+         * 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<HTMLInputElement>;
+    }
+}
+
+declare class ReactInputMask extends React.Component<ReactInputMask.Props> {
+}
+
+export default ReactInputMask;

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;
+
+<div>
+    <ReactInputMask mask="+4\9 99 999 99" maskChar={null} />
+    <ReactInputMask mask="+7 (999) 999-99-99" />
+    <ReactInputMask mask="99-99-9999" defaultValue= "13-00-2017" />
+    <ReactInputMask mask="99/99/9999" placeholder= "Enter birthdate" />
+    <ReactInputMask mask="+7 (999) 999-99-99" />
+    <ReactInputMask mask="+7 (999) 999-99-99" inputRef={(node) => ref = node} />
+</div>;

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"
+    ]
+}

types/react-input-mask/v1/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }