code-picker-react/dist/CodePicker.js

A React version of the jQuery code picker component

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
var defaultSettings = {
    translate: { '\\w': function (c) { return c.toUpperCase(); } },
    lastDigitEntered: null,
    showCredits: true,
};
var CodePicker = function (props, ref) {
    var settings = __assign(__assign({}, defaultSettings), props);
    var inputRefs = useRef([]);
    useEffect(function () {
        if (settings.lastDigitEntered) {
            var fullCode = props.digitBoxes.join('');
            settings.lastDigitEntered(fullCode);
        }
    }, [props.digitBoxes]);
    useImperativeHandle(ref, function () { return ({
        reset: function () {
            props.setDigitBoxes(Array(settings.nrOfBoxes).fill(''));
        }
    }); });
    var handleInputChange = function (index, value) {
        var _a;
        var sanitizedValue = value.split('').filter(function (char) { return settings.allowedChars.includes(char); }).shift() || '';
        var newDigitBoxes = __spreadArray([], props.digitBoxes, true);
        newDigitBoxes[index] = sanitizedValue;
        props.setDigitBoxes(newDigitBoxes);
        if (sanitizedValue && index < settings.nrOfBoxes - 1) {
            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
        }
    };
    var handleKeyDown = function (index, e) {
        var _a;
        if (e.key === 'Backspace' && !props.digitBoxes[index]) {
            if (index > 0) {
                (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
            }
        }
    };
    return (React.createElement("div", { className: "bsms-code-picker" },
        props.digitBoxes.map(function (digit, index) { return (React.createElement("input", { key: index, type: "text", className: "bsms-code-digit bsms-code-digit-".concat(index), value: digit, onChange: function (e) { return handleInputChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, ref: function (el) { inputRefs.current[index] = el; } })); }),
        settings.showCredits && (React.createElement("a", { className: "bsms-code-digit-credits", href: "https://www.berlinsms.de" }, "Credits"))));
};
export default forwardRef(CodePicker);