@ozen-ui/kit
Version:
React component library
184 lines (183 loc) • 8.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useInputOTPEvents = void 0;
var tslib_1 = require("tslib");
var isFunction_1 = require("../../../utils/isFunction");
var isKey_1 = require("../../../utils/isKey");
var isKeys_1 = require("../../../utils/isKeys");
var number_1 = require("../../../utils/number");
var helper_1 = require("../helper");
var useInputOTPEvents = function (_a) {
var inputs = _a.inputs, valueByIndex = _a.valueByIndex, setValueByIndex = _a.setValueByIndex, validateFromProps = _a.validate, length = _a.length, onPasteFromProps = _a.onPaste, onKeyDownFromProps = _a.onKeyDown, onFinish = _a.onFinish, mask = _a.mask, finishBehavior = _a.finishBehavior;
var validate = function (value) {
if ((0, isFunction_1.isFunction)(validateFromProps)) {
return validateFromProps(value);
}
return true;
};
var tryToFinish = function (valueByIndex, index, options) {
var _a;
var _b = (options !== null && options !== void 0 ? options : {}).isEnter, isEnter = _b === void 0 ? false : _b;
var requiredValueByIndex = valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [];
var stringValue = (0, helper_1.valueToString)(requiredValueByIndex);
var isFullFilledValue = requiredValueByIndex.filter(function (value) { return value !== ''; }).length === length;
var isChangeOnLastInput = index + 1 === length;
var maskedRawValue = (0, helper_1.maskValue)(mask, valueByIndex);
var finishContext = {
isChangeOnLastInput: isChangeOnLastInput,
inputIndex: index,
value: (0, helper_1.valueToString)(valueByIndex),
rawValue: valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [],
maskedValue: (0, helper_1.valueToString)(maskedRawValue),
maskedRawValue: maskedRawValue,
isFullFilled: isFullFilledValue,
isEnter: isEnter,
};
var isFinish = finishBehavior(finishContext);
if (isFinish) {
var activeElement = document.activeElement;
if (activeElement instanceof HTMLElement) {
activeElement.blur();
}
if (onFinish) {
var maskedValueByIndex = (_a = valueByIndex === null || valueByIndex === void 0 ? void 0 : valueByIndex.map(function (value, index) { return (0, helper_1.maskSymbol)(mask, value, index); })) !== null && _a !== void 0 ? _a : [];
onFinish(stringValue, valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [], (0, helper_1.valueToString)(maskedValueByIndex), maskedValueByIndex);
}
}
};
var onInputChange = function (event, index) {
event.preventDefault();
var target = event.target;
var value = (function () {
var _a;
var previousValue = (_a = valueByIndex === null || valueByIndex === void 0 ? void 0 : valueByIndex[index]) !== null && _a !== void 0 ? _a : '';
var previousMaskedValue = (0, helper_1.maskSymbol)(mask, previousValue, index);
var rawValue = target.value;
var changedValuePart = rawValue.replace(previousMaskedValue, '');
if (changedValuePart.length > 1) {
return changedValuePart.slice(0, 1);
}
return changedValuePart;
})();
var isValidValue = validate(value);
var newValueByIndex = valueByIndex ? tslib_1.__spreadArray([], tslib_1.__read(valueByIndex), false) : [];
if (isValidValue) {
newValueByIndex[index] = value;
var isLastInput = index === length - 1;
var firstEmptyInputIndex = newValueByIndex.findIndex(function (value) { return !value; });
if (isLastInput && firstEmptyInputIndex !== -1) {
var firstEmptyInput = inputs.current[firstEmptyInputIndex];
if (firstEmptyInput) {
firstEmptyInput.focus();
}
}
else {
var nextInput = inputs.current[index + 1];
if (nextInput) {
nextInput.disabled = false;
nextInput.focus();
}
}
setValueByIndex(newValueByIndex);
}
tryToFinish(newValueByIndex, index);
};
var onKeyDown = function (event, index) {
if (onKeyDownFromProps) {
onKeyDownFromProps(event);
}
var target = event.target;
if ((0, isKey_1.isKey)(event, 'Backspace')) {
var newValueByIndex = valueByIndex ? tslib_1.__spreadArray([], tslib_1.__read(valueByIndex), false) : [];
if (target.value === '') {
var previousInput = inputs.current[index - 1];
var previousInputIndex = index - 1;
if (previousInput) {
newValueByIndex[previousInputIndex] = '';
previousInput.focus();
event.preventDefault();
}
}
else {
newValueByIndex[index] = '';
}
setValueByIndex(newValueByIndex);
}
else if ((0, isKeys_1.isKeys)(event, ['ArrowLeft', 'ArrowDown'])) {
event.preventDefault();
var previousInput = inputs.current[index - 1];
if (previousInput) {
previousInput.focus();
}
}
else if ((0, isKeys_1.isKeys)(event, ['ArrowRight', 'ArrowUp'])) {
event.preventDefault();
var nextInput = inputs.current[index + 1];
if (nextInput) {
nextInput.focus();
}
}
else if ((0, isKey_1.isKey)(event, 'Enter')) {
tryToFinish(valueByIndex, index, {
isEnter: true,
});
}
};
var onPaste = function (event, inputIndex) {
event.preventDefault();
if (onPasteFromProps) {
onPasteFromProps(event);
}
var currentInputs = inputs.current;
var pastedValue = event.clipboardData.getData('Text');
var newValueByIndex = valueByIndex ? tslib_1.__spreadArray([], tslib_1.__read(valueByIndex), false) : [];
var lastChangedInputIndex = {
current: null,
};
var focusedInputIndex = {
current: null,
};
tslib_1.__spreadArray([], tslib_1.__read(pastedValue), false).forEach(function (symbol, symbolIndex) {
var currentInputIndex = symbolIndex + inputIndex;
var isIndexExistInArray = currentInputIndex >= 0 && currentInputIndex < currentInputs.length;
if (isIndexExistInArray && validate(symbol)) {
lastChangedInputIndex.current = currentInputIndex;
newValueByIndex[currentInputIndex] = symbol;
var nextInput = currentInputs[currentInputIndex + 1];
if (nextInput) {
focusedInputIndex.current = currentInputIndex + 1;
}
}
});
if ((0, number_1.isNumber)(focusedInputIndex.current)) {
var input = currentInputs[focusedInputIndex.current];
if (input) {
input.disabled = false;
input.focus();
}
}
setValueByIndex(newValueByIndex);
if (lastChangedInputIndex.current !== null) {
tryToFinish(newValueByIndex, lastChangedInputIndex.current);
}
};
var onInputSelect = function (index) {
setTimeout(function () {
var currentInput = inputs.current[index];
if (!currentInput) {
return;
}
var originalType = currentInput.type;
currentInput.type = 'text';
currentInput.setSelectionRange(1, 1);
currentInput.type = originalType;
});
};
return {
onInputChange: onInputChange,
onKeyDown: onKeyDown,
onPaste: onPaste,
onInputSelect: onInputSelect,
};
};
exports.useInputOTPEvents = useInputOTPEvents;