@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
84 lines • 3.66 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTextValidation = void 0;
const react_1 = __importDefault(require("react"));
const characters_1 = __importDefault(require("../../common/utils/characters"));
/** Validates the string value for invisible characters. */
const useTextValidation = ({ value, onChange, invisibleCharacterWarning }) => {
const callback = invisibleCharacterWarning === null || invisibleCharacterWarning === void 0 ? void 0 : invisibleCharacterWarning.callback;
const callbackDelay = invisibleCharacterWarning === null || invisibleCharacterWarning === void 0 ? void 0 : invisibleCharacterWarning.callbackDelay;
const state = react_1.default.useRef({ detectedCodePoints: new Set() });
const clearState = react_1.default.useCallback(() => {
state.current.timeout && clearTimeout(state.current.timeout);
state.current.checkedValue = undefined;
state.current.detectedCodePoints = new Set();
}, []);
const detectionRegex = react_1.default.useMemo(() => characters_1.default.invisibleZeroWidthCharacters.createRegex(), []);
const detectIssues = react_1.default.useCallback((value) => {
detectionRegex.lastIndex = 0;
let matchArray = detectionRegex.exec(value);
while (matchArray) {
const codePoint = matchArray[0].codePointAt(0);
if (codePoint) {
state.current.detectedCodePoints.add(codePoint);
}
matchArray = detectionRegex.exec(value);
}
}, [detectionRegex]);
// Checks if the value contains any problematic characters with a small delay.
const checkValue = react_1.default.useCallback((value) => {
state.current.detectedCodePoints = new Set();
if (typeof value === "number") {
clearState();
}
else if (typeof value === "string") {
detectIssues(value);
}
else {
value.forEach((arrayValue) => detectIssues(arrayValue));
}
callback === null || callback === void 0 ? void 0 : callback(state.current.detectedCodePoints);
}, [callback, clearState, detectIssues]);
const scheduleCheck = react_1.default.useCallback((value) => {
if (state.current.checkedValue === value) {
return;
}
state.current.checkedValue = value;
state.current.timeout = window.setTimeout(() => {
if (state.current.checkedValue === value) {
checkValue(value);
clearState();
}
}, callbackDelay !== null && callbackDelay !== void 0 ? callbackDelay : 500);
}, [checkValue, clearState, callbackDelay]);
// Do check via onChange handler
const wrappedOnChangeHandler = react_1.default.useCallback((event) => {
const { value } = event.target;
if (value != null && typeof value === "string") {
scheduleCheck(value);
}
else {
clearState();
}
onChange === null || onChange === void 0 ? void 0 : onChange(event);
}, [clearState, onChange, scheduleCheck]);
// No callback, return
if (!callback) {
return onChange;
}
if (value == null && onChange == null) {
return onChange;
}
if (value != null) {
scheduleCheck(value);
return onChange;
}
else {
return wrappedOnChangeHandler;
}
};
exports.useTextValidation = useTextValidation;
//# sourceMappingURL=useTextValidation.js.map