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

A component library for use with the Open Tender web app

import React, { useCallback, useMemo } from 'react';
import { makeProps } from '../utils';
import Button from './Button';
import View from './View';
const defaultFirstLine = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
const defaultSecondLine = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'];
const defaultThirdLine = ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'];
const defaultFourthLine = ['Clr', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'Del'];
const fifthLine = ['@', 'Space', '.'];
const defaultLines = [
    defaultFirstLine,
    defaultSecondLine,
    defaultThirdLine,
    defaultFourthLine,
    fifthLine
];
const numericFirstLine = ['1', '2', '3'];
const numericSecondLine = ['4', '5', '6'];
const numericThirdLine = ['7', '8', '9'];
const numericFourthLine = ['Clr', '0', 'Del'];
const numericLines = [
    numericFirstLine,
    numericSecondLine,
    numericThirdLine,
    numericFourthLine
];
const dollarLines = [
    numericFirstLine,
    numericSecondLine,
    numericThirdLine,
    ['Clr', '0', '00']
];
const Keypad = ({ handlers, value, config, type = 'default' }) => {
    const isNumeric = type === 'numeric';
    const isDollar = type === 'dollar';
    const prefix = isNumeric || isDollar ? 'numpad' : 'keypad';
    const lines = useMemo(() => (isNumeric ? numericLines : isDollar ? dollarLines : defaultLines), [isNumeric, isDollar]);
    const getButtonClassName = useCallback((key) => {
        if (key === '.' || key === '@')
            return `${prefix}__fixedWidthButton`;
        if (isNumeric || isDollar)
            return `${prefix}__numericButton`;
        return `${prefix}__defaultButton`;
    }, [isNumeric, isDollar, prefix]);
    return (React.createElement(View, Object.assign({}, makeProps(config, `${prefix}__container`)),
        React.createElement("input", Object.assign({ value: value, readOnly: true }, makeProps(config, `${prefix}__input`))),
        React.createElement(View, Object.assign({}, makeProps(config, `${prefix}__buttonsContainer`)), lines.map((line, index) => (React.createElement(View, Object.assign({ key: index }, makeProps(config, `${prefix}__buttonsLine`)), line.map(key => (React.createElement(Button, Object.assign({ onClick: () => handlers.keyPress(key), key: key }, makeProps(config, getButtonClassName(key))), key)))))))));
};
export default Keypad;