react-native-advanced-input-mask
Version:
Text input mask for React Native on iOS, Android and web. Synchronous and easy formatting without hustle
204 lines (203 loc) • 8.11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _enums = require("../enums");
var _affinityCalculationStrategy = require("./helper/affinityCalculationStrategy");
var _Mask = _interopRequireDefault(require("./helper/Mask"));
var _RTLMask = _interopRequireDefault(require("./helper/RTLMask"));
var _CaretString = _interopRequireDefault(require("./model/CaretString"));
var _types = require("./model/types");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
class MaskedTextChangedListener {
textField = null;
afterText = "";
constructor(primaryFormat, affineFormats = [], customNotations = [], affinityCalculationStrategy = _enums.AFFINITY_CALCULATION_STRATEGY.WHOLE_STRING, autocomplete = true, autoskip = false, rightToLeft = false, allowedKeys = "", validationRegex, autocompleteOnFocus = false, defaultValue) {
this.primaryFormat = primaryFormat;
this.affineFormats = affineFormats;
this.customNotations = customNotations;
this.affinityCalculationStrategy = affinityCalculationStrategy;
this.autocomplete = autocomplete;
this.autoskip = autoskip;
this.rightToLeft = rightToLeft;
this.allowedKeys = allowedKeys;
this.autocompleteOnFocus = autocompleteOnFocus;
this.setValidationRegex(validationRegex);
this.setDefaultText(defaultValue);
}
get primaryMask() {
return this.maskGetOrCreate(this.primaryFormat, this.customNotations);
}
setText(text, autocomplete) {
if (!this.textField) {
return;
}
const newText = this.prepareText(text);
if (!this.isValidText(text)) {
return;
}
const useAutocomplete = autocomplete ?? this.autocomplete;
const textAndCaret = new _CaretString.default(newText, newText.length, {
type: _types.CaretGravityType.Forward,
autocomplete: useAutocomplete,
autoskip: false
});
const result = this.pickMask(textAndCaret).apply(textAndCaret);
this.textField.value = result.formattedText.string;
this.textField.setSelectionRange(result.formattedText.caretPosition, result.formattedText.caretPosition);
this.afterText = result.formattedText.string;
}
setAllowedKeys = allowedKeys => {
this.allowedKeys = allowedKeys;
if (this.textField && allowedKeys) {
this.setText(this.textField.value, false);
}
};
get placeholder() {
return this.primaryMask.placeholder();
}
get acceptableTextLength() {
return this.primaryMask.acceptableTextLength();
}
get totalTextLength() {
return this.primaryMask.totalTextLength();
}
get acceptableValueLength() {
return this.primaryMask.acceptableValueLength();
}
get totalValueLength() {
return this.primaryMask.totalValueLength();
}
setTextField = textField => {
this.textField = textField;
};
handleTextChange = event => {
const {
nativeEvent,
target
} = event;
const {
inputType,
text
} = nativeEvent;
const textField = target;
const isDeletion = inputType === "deleteContentForward" || inputType === "deleteContentBackward";
const selectionStart = textField.selectionStart || 0;
const isInside = selectionStart < text.length;
const caretPosition = isDeletion || isInside ? selectionStart : text.length;
const useAutocomplete = isDeletion ? false : this.autocomplete;
const useAutoskip = isDeletion ? this.autoskip : false;
const caretGravity = {
type: isDeletion ? _types.CaretGravityType.Backward : _types.CaretGravityType.Forward,
autoskip: useAutoskip,
autocomplete: useAutocomplete
};
const newText = this.prepareText(text);
if (!this.isValidText(text)) {
const textAndCaret = new _CaretString.default(this.afterText, caretPosition, {
type: _types.CaretGravityType.Backward,
autocomplete: false,
autoskip: false
});
const result = this.pickMask(textAndCaret).apply(textAndCaret);
const currentCaretPosition = textField.selectionEnd;
textField.value = result.formattedText.string;
if (currentCaretPosition && currentCaretPosition > 0) {
textField.setSelectionRange(currentCaretPosition - 1, currentCaretPosition - 1);
}
return result;
}
const textAndCaret = new _CaretString.default(newText, caretPosition, caretGravity);
const result = this.pickMask(textAndCaret).apply(textAndCaret);
textField.value = result.formattedText.string;
textField.setSelectionRange(result.formattedText.caretPosition, result.formattedText.caretPosition);
this.afterText = result.formattedText.string;
return result;
};
prepareText = text => {
return this.allowedKeys ? [...text].filter(char => !this.allowedKeys || this.allowedKeys.includes(char)).join("") : text;
};
isValidText = text => this.validationRegex ? this.validationRegex.test(text) : true;
setDefaultText = defaultValue => {
this.defaultValue = defaultValue;
if (defaultValue) {
const textAndCaret = new _CaretString.default(defaultValue, defaultValue.length, {
type: _types.CaretGravityType.Forward,
autocomplete: false,
autoskip: false
});
const result = this.pickMask(textAndCaret).apply(textAndCaret);
this.afterText = result.formattedText.string;
}
};
handleFocus = event => {
if (this.autocompleteOnFocus) {
const textField = event.target;
const text = textField.value.length > 0 ? textField.value : "";
const textAndCaret = new _CaretString.default(text, text.length, {
type: _types.CaretGravityType.Forward,
autocomplete: true,
autoskip: false
});
const result = this.pickMask(textAndCaret).apply(textAndCaret);
this.afterText = result.formattedText.string;
textField.value = this.afterText;
textField.setSelectionRange(result.formattedText.caretPosition, result.formattedText.caretPosition);
}
};
pickMask = text => {
if (this.affineFormats.length === 0) {
return this.primaryMask;
}
const primaryAffinity = this.calculateAffinity(this.primaryMask, text);
const masksAndAffinities = [];
for (const format of this.affineFormats) {
const candidateMask = this.maskGetOrCreate(format, this.customNotations);
const affinity = this.calculateAffinity(candidateMask, text);
masksAndAffinities.push({
mask: candidateMask,
affinity
});
}
masksAndAffinities.sort((a, b) => b.affinity - a.affinity);
let insertIndex = -1;
for (let i = 0; i < masksAndAffinities.length; i++) {
var _masksAndAffinities$i;
const affinity = (_masksAndAffinities$i = masksAndAffinities[i]) === null || _masksAndAffinities$i === void 0 ? void 0 : _masksAndAffinities$i.affinity;
if (affinity && primaryAffinity === affinity) {
insertIndex = i;
break;
}
}
if (insertIndex >= 0) {
masksAndAffinities.splice(insertIndex, 0, {
mask: this.primaryMask,
affinity: primaryAffinity
});
} else {
masksAndAffinities.push({
mask: this.primaryMask,
affinity: primaryAffinity
});
}
return masksAndAffinities[0].mask;
};
setValidationRegex = validationRegex => {
if (validationRegex) {
this.validationRegex = new RegExp(validationRegex);
} else {
this.validationRegex = undefined;
}
};
getValidationRegex = () => {
var _this$validationRegex;
return (_this$validationRegex = this.validationRegex) === null || _this$validationRegex === void 0 ? void 0 : _this$validationRegex.source;
};
maskGetOrCreate = (format, customNotations) => this.rightToLeft ? _RTLMask.default.getOrCreate(format, customNotations) : _Mask.default.getOrCreate(format, customNotations);
calculateAffinity(mask, text) {
return (0, _affinityCalculationStrategy.calculateAffinityOfMask)(this.affinityCalculationStrategy, mask, text);
}
}
var _default = exports.default = MaskedTextChangedListener;
//# sourceMappingURL=AdvancedTextInputMaskListener.js.map