1 | import * as React from "react";
|
2 |
|
3 | export interface Selection {
|
4 | start: number;
|
5 | end: number;
|
6 | }
|
7 |
|
8 | export interface InputState {
|
9 | value: string;
|
10 | selection: Selection | null;
|
11 | }
|
12 |
|
13 | export interface BeforeMaskedStateChangeStates {
|
14 | previousState: InputState;
|
15 | currentState: InputState;
|
16 | nextState: InputState;
|
17 | }
|
18 |
|
19 | export type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "children"> & {
|
20 | /**
|
21 | * Mask string. Format characters are:
|
22 | * * `9`: `0-9`
|
23 | * * `a`: `A-Z, a-z`
|
24 | * * `\*`: `A-Z, a-z, 0-9`
|
25 | *
|
26 | * Any character can be escaped with backslash, which usually will appear as double backslash in JS strings.
|
27 | * 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"}`
|
28 | */
|
29 | mask: string | Array<(string | RegExp)>;
|
30 | /**
|
31 | * Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input.
|
32 | */
|
33 | maskChar?: string | null | undefined;
|
34 | maskPlaceholder?: string | null | undefined;
|
35 | /**
|
36 | * Show mask even in empty input without focus.
|
37 | */
|
38 | alwaysShowMask?: boolean | undefined;
|
39 | /**
|
40 | * Use inputRef instead of ref if you need input node to manage focus, selection, etc.
|
41 | */
|
42 | inputRef?: React.Ref<HTMLInputElement> | undefined;
|
43 | /**
|
44 | * In case you need to implement more complex masking behavior, you can provide
|
45 | * beforeMaskedStateChange function to change masked value and cursor position
|
46 | * before it will be applied to the input.
|
47 | *
|
48 | * * previousState: Input state before change. Only defined on change event.
|
49 | * * currentState: Current raw input state. Not defined during component render.
|
50 | * * nextState: Input state with applied mask. Contains value and selection fields.
|
51 | */
|
52 | beforeMaskedStateChange?(states: BeforeMaskedStateChangeStates): InputState;
|
53 |
|
54 | children?: (inputProps: any) => React.ReactNode;
|
55 | };
|
56 |
|
57 | export class ReactInputMask extends React.Component<Props> {
|
58 | }
|
59 |
|
60 | export default ReactInputMask;
|