office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
73 lines (72 loc) • 2.54 kB
TypeScript
/// <reference types="react" />
import { ITextField, ITextFieldProps } from '../TextField.types';
import { BaseComponent } from '../../../Utilities';
/**
* props.mask:
* The string containing the prompt and format characters.
* Example:
* 'Phone Number: (999) 9999'
*
* _maskCharData
* An array of data containing information regarding the format characters,
* their indices inside the display text, and their corresponding values.
* Example:
* [
* { value: '1', displayIndex: 16, format: /[0-9]/ },
* { value: '2', displayIndex: 17, format: /[0-9]/ },
* { displayIndex: 18, format: /[0-9]/ },
* { value: '4', displayIndex: 22, format: /[0-9]/ },
* ...
* ]
*/
export interface IMaskedTextFieldState {
/**
* The mask string formatted with the input value.
* This is what is displayed inside the TextField
* Example:
* 'Phone Number: 12_ - 4___'
*/
displayValue: string;
/** The index into the rendered value of the first unfilled format character */
maskCursorPosition?: number;
}
export declare const DEFAULT_MASK_CHAR = "_";
export declare class MaskedTextField extends BaseComponent<ITextFieldProps, IMaskedTextFieldState> implements ITextField {
static defaultProps: ITextFieldProps;
/**
* Tell BaseComponent to bypass resolution of componentRef.
*/
protected _skipComponentRefResolution: boolean;
private _textField;
private _maskCharData;
private _isFocused;
private _moveCursorOnMouseUp;
private _changeSelectionData;
constructor(props: ITextFieldProps);
componentWillReceiveProps(newProps: ITextFieldProps): void;
componentDidUpdate(): void;
render(): JSX.Element;
/**
* @return The value of all filled format characters or undefined if not all format characters are filled
*/
readonly value: string | undefined;
/**
*
*/
setValue(newValue: string): void;
focus(): void;
select(): void;
setSelectionStart(value: number): void;
setSelectionEnd(value: number): void;
setSelectionRange(start: number, end: number): void;
readonly selectionStart: number | null;
readonly selectionEnd: number | null;
private _onFocus(event);
private _onBlur(event);
private _onMouseDown(event);
private _onMouseUp(event);
private _onBeforeChange(value);
private _onInputChange(ev, value);
private _onKeyDown(event);
private _onPaste(event);
}