@skbkontur/react-imask/dist/cjs/hook.js

React input mask

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = useIMask;
const imask_1 = __importDefault(require("@skbkontur/imask"));
const react_1 = require("react");
function useIMask(opts, { onAccept, onComplete, ref = (0, react_1.useRef)(null), defaultValue, defaultUnmaskedValue, defaultTypedValue, } = {}) {
    const maskRef = (0, react_1.useRef)(null);
    const [lastAcceptState, setLastAcceptState] = (0, react_1.useState)({});
    const [value, setValue] = (0, react_1.useState)('');
    const [unmaskedValue, setUnmaskedValue] = (0, react_1.useState)('');
    const [typedValue, setTypedValue] = (0, react_1.useState)();
    const _destroyMask = (0, react_1.useCallback)(() => {
        var _a;
        (_a = maskRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
        maskRef.current = null;
    }, []);
    const storeLastAcceptedValues = (0, react_1.useCallback)(() => {
        const m = maskRef.current;
        if (!m)
            return;
        setLastAcceptState({
            value: m.value,
            unmaskedValue: m.unmaskedValue,
            typedValue: m.typedValue,
        });
        setTypedValue(m.typedValue);
        setUnmaskedValue(m.unmaskedValue);
        setValue(m.value);
    }, []);
    const _onAccept = (0, react_1.useCallback)((event) => {
        const m = maskRef.current;
        if (!m)
            return;
        storeLastAcceptedValues();
        onAccept === null || onAccept === void 0 ? void 0 : onAccept(m.value, m, event);
    }, [onAccept]);
    const _onComplete = (0, react_1.useCallback)((event) => maskRef.current && (onComplete === null || onComplete === void 0 ? void 0 : onComplete(maskRef.current.value, maskRef.current, event)), [onComplete]);
    (0, react_1.useEffect)(() => {
        const { value: lastAcceptValue, ...state } = lastAcceptState;
        const mask = maskRef.current;
        if (!mask || value === undefined)
            return;
        if (lastAcceptValue !== value) {
            mask.value = value;
            if (mask.value !== value)
                _onAccept();
        }
        setLastAcceptState(state);
    }, [value]);
    (0, react_1.useEffect)(() => {
        const { unmaskedValue: lastAcceptUnmaskedValue, ...state } = lastAcceptState;
        const mask = maskRef.current;
        if (!mask || unmaskedValue === undefined)
            return;
        if (lastAcceptUnmaskedValue !== unmaskedValue) {
            mask.unmaskedValue = unmaskedValue;
            if (mask.unmaskedValue !== unmaskedValue)
                _onAccept();
        }
        setLastAcceptState(state);
    }, [unmaskedValue]);
    (0, react_1.useEffect)(() => {
        const { typedValue: lastAcceptTypedValue, ...state } = lastAcceptState;
        const mask = maskRef.current;
        if (!mask || typedValue === undefined)
            return;
        if (lastAcceptTypedValue !== typedValue) {
            mask.typedValue = typedValue;
            if (!mask.masked.typedValueEquals(typedValue))
                _onAccept();
        }
        setLastAcceptState(state);
    }, [typedValue]);
    (0, react_1.useEffect)(() => {
        const el = ref.current;
        if (!el || !(opts === null || opts === void 0 ? void 0 : opts.mask))
            return _destroyMask();
        const mask = maskRef.current;
        if (!mask) {
            if (el && (opts === null || opts === void 0 ? void 0 : opts.mask)) {
                maskRef.current = (0, imask_1.default)(el, opts);
                storeLastAcceptedValues();
                if (defaultValue !== undefined)
                    setValue(defaultValue);
                if (defaultUnmaskedValue !== undefined)
                    setUnmaskedValue(defaultUnmaskedValue);
                if (defaultTypedValue !== undefined)
                    setTypedValue(defaultTypedValue);
            }
        }
        else {
            mask === null || mask === void 0 ? void 0 : mask.updateOptions(opts); // TODO fix no idea
        }
    }, [opts, _destroyMask, _onAccept]);
    (0, react_1.useEffect)(() => {
        if (!maskRef.current)
            return;
        const mask = maskRef.current;
        mask.on('accept', _onAccept);
        mask.on('complete', _onComplete);
        return () => {
            mask.off('accept', _onAccept);
            mask.off('complete', _onComplete);
        };
    }, [_onAccept, _onComplete]);
    (0, react_1.useEffect)(() => _destroyMask, [_destroyMask]);
    return {
        ref,
        maskRef,
        value, setValue,
        unmaskedValue, setUnmaskedValue,
        typedValue, setTypedValue,
    };
}
//# sourceMappingURL=hook.js.map