@open-tender/ui
Version:
A component library for use with the Open Tender web app
53 lines (52 loc) • 2.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const utils_1 = require("../utils");
const Button_1 = tslib_1.__importDefault(require("./Button"));
const View_1 = tslib_1.__importDefault(require("./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 = (0, react_1.useMemo)(() => (isNumeric ? numericLines : isDollar ? dollarLines : defaultLines), [isNumeric, isDollar]);
const getButtonClassName = (0, react_1.useCallback)((key) => {
if (key === '.' || key === '@')
return `${prefix}__fixedWidthButton`;
if (isNumeric || isDollar)
return `${prefix}__numericButton`;
return `${prefix}__defaultButton`;
}, [isNumeric, isDollar, prefix]);
return (react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_1.makeProps)(config, `${prefix}__container`)),
react_1.default.createElement("input", Object.assign({ value: value, readOnly: true }, (0, utils_1.makeProps)(config, `${prefix}__input`))),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_1.makeProps)(config, `${prefix}__buttonsContainer`)), lines.map((line, index) => (react_1.default.createElement(View_1.default, Object.assign({ key: index }, (0, utils_1.makeProps)(config, `${prefix}__buttonsLine`)), line.map(key => (react_1.default.createElement(Button_1.default, Object.assign({ onClick: () => handlers.keyPress(key), key: key }, (0, utils_1.makeProps)(config, getButtonClassName(key))), key)))))))));
};
exports.default = Keypad;