@harvest-profit/npk
Version:
NPK UI Design System
88 lines • 3.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.rule = void 0;
const SPECIAL_KEYS = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'Escape', 'Shift', 'Control', 'Alt', 'Meta', 'CapsLock', 'NumLock', 'ScrollLock', 'Insert', 'Home', 'End', 'PageUp', 'PageDown'];
const utils_1 = require("../utils");
function keyMatchesMask(key, match) {
if (typeof match === 'string') {
return key === match;
}
if (match instanceof RegExp) {
return match.test(key);
}
return false;
}
const rule = (match, ruleCB) => {
return [match, ruleCB];
};
exports.rule = rule;
exports.default = (props) => {
const { onKeyDown, mask, valueRef, navigateWithArrows } = props || {};
const rules = mask?.mask || [];
const handleOnKeyDown = (event) => {
const previousValue = valueRef?.current || event.currentTarget.value || '';
if (mask?.shiftFocusIf && previousValue === '' && event.key === 'Backspace') {
setTimeout(() => {
(0, utils_1.nextFocusableElement)({ activeElem: event.currentTarget, reverse: true, parent: '[data-component=input-group]' })?.focus();
}, 10);
if (onKeyDown)
onKeyDown(event, true);
return;
}
if ((navigateWithArrows && event.key === 'ArrowLeft')) {
setTimeout(() => {
(0, utils_1.nextFocusableElement)({ activeElem: event.currentTarget, reverse: true, parent: '[data-component=input-group]', requireParentMatch: event.key === 'ArrowLeft' })?.focus();
}, 10);
if (onKeyDown)
onKeyDown(event, true);
return;
}
if ((navigateWithArrows && event.key === 'ArrowRight')) {
setTimeout(() => {
(0, utils_1.nextFocusableElement)({ activeElem: event.currentTarget, parent: '[data-component=input-group]', requireParentMatch: event.key === 'ArrowRight' })?.focus();
}, 10);
if (onKeyDown)
onKeyDown(event, true);
return;
}
if (SPECIAL_KEYS.includes(event.key)) {
if (onKeyDown)
onKeyDown(event, true);
return;
}
const selectionStart = isFinite(event.currentTarget.selectionStart) ? event.currentTarget.selectionStart : previousValue.length + 1;
const selectionEnd = isFinite(event.currentTarget.selectionEnd) ? event.currentTarget.selectionEnd : previousValue.length + 1;
const nextValue = previousValue.slice(0, selectionStart) + event.key + previousValue.slice(selectionEnd);
let validInput = false;
for (let index = 0; index < rules.length; index++) {
const [match, rule] = rules[index];
if (keyMatchesMask(event.key, match)) {
if (!rule) {
validInput = true;
break;
}
if (rule({ key: event.key, previousValue, nextValue, cursorIndex: selectionStart, target: event.currentTarget })) {
validInput = true;
break;
}
}
}
if (mask?.shiftFocusIf && mask?.shiftFocusIf(nextValue, event.key)) {
setTimeout(() => {
(0, utils_1.nextFocusableElement)({ activeElem: event.target, parent: '[data-component=input-group]' })?.focus();
}, 10);
}
if (!validInput && !event.metaKey && !event.ctrlKey) {
event.preventDefault();
return;
}
if (onKeyDown)
onKeyDown(event, false);
};
return {
onKeyDown: mask ? handleOnKeyDown : onKeyDown,
formatter: mask?.formatter || ((value) => value),
aria: mask?.aria || {}
};
};
//# sourceMappingURL=useMask.js.map