@open-tender/store/dist/esm/components/Keypad.js

A library of hooks, reducers, utility functions, and types for use with Open Tender applications that utilize our in-store POS API

import { useCallback, useMemo, useState } from 'react';
import { useAppSelector } from '../app/hooks';
import { selectKioskConfig } from '../slices';
import { getKeyboardValue } from '../utils';
var Keypad = function (_a) {
    var children = _a.children, maxLength = _a.maxLength, type = _a.type, value = _a.value, handlers = _a.handlers, isEmail = _a.isEmail, _b = _a.autoCapitalize, autoCapitalize = _b === void 0 ? false : _b;
    var _c = useAppSelector(selectKioskConfig), keypad = _c.keypad, numpad = _c.numpad;
    var isDollar = type === 'dollar';
    var config = type === 'numeric' || isDollar ? numpad : keypad;
    var _d = useState(autoCapitalize), isShiftOn = _d[0], setIsShiftOn = _d[1];
    var handleOnKeyPress = useCallback(function (key) {
        var isShiftKey = key === '\u21E7';
        if (isShiftKey) {
            setIsShiftOn(function (prev) { return !prev; });
            return;
        }
        var newValue = getKeyboardValue(key, value, maxLength, isShiftOn);
        handlers.change(newValue);
        if (autoCapitalize) {
            setIsShiftOn(newValue.length === 0);
        }
    }, [handlers, value, maxLength, isShiftOn, autoCapitalize]);
    var viewHandlers = useMemo(function () { return ({ keyPress: handleOnKeyPress }); }, [handleOnKeyPress]);
    if (!config)
        return null;
    return children({
        config: config,
        handlers: viewHandlers,
        value: value,
        type: type,
        isEmail: isEmail,
        isShiftOn: isShiftOn,
        autoCapitalize: autoCapitalize
    });
};
export default Keypad;