UNPKG

3.8 kBJavaScriptView Raw
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.NumberInput = void 0;
4const tslib_1 = require("tslib");
5const React = tslib_1.__importStar(require("react"));
6const number_input_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/NumberInput/number-input"));
7const react_styles_1 = require("@patternfly/react-styles");
8const minus_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/minus-icon'));
9const plus_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/plus-icon'));
10const InputGroup_1 = require("../InputGroup");
11const Button_1 = require("../Button");
12const helpers_1 = require("../../helpers");
13const defaultKeyDownHandler = (args) => (event) => {
14 if (helpers_1.KEY_CODES.ARROW_UP === event.keyCode && args.onPlus) {
15 event.preventDefault();
16 args.onPlus(null, args.inputName);
17 }
18 if (helpers_1.KEY_CODES.ARROW_DOWN === event.keyCode && args.onMinus) {
19 event.preventDefault();
20 args.onMinus(null, args.inputName);
21 }
22};
23const NumberInput = (_a) => {
24 var { value = 0, className, widthChars, isDisabled = false, onMinus = () => { }, onChange, onBlur, onPlus = () => { }, unit, unitPosition = 'after', min, max, inputName, inputAriaLabel = 'Input', minusBtnAriaLabel = 'Minus', plusBtnAriaLabel = 'Plus', inputProps, minusBtnProps, plusBtnProps } = _a, props = tslib_1.__rest(_a, ["value", "className", "widthChars", "isDisabled", "onMinus", "onChange", "onBlur", "onPlus", "unit", "unitPosition", "min", "max", "inputName", "inputAriaLabel", "minusBtnAriaLabel", "plusBtnAriaLabel", "inputProps", "minusBtnProps", "plusBtnProps"]);
25 const numberInputUnit = React.createElement("div", { className: react_styles_1.css(number_input_1.default.numberInputUnit) }, unit);
26 const keyDownHandler = inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });
27 return (React.createElement("div", Object.assign({ className: react_styles_1.css(number_input_1.default.numberInput, className) }, (widthChars && {
28 style: Object.assign({ '--pf-c-number-input--c-form-control--width-chars': widthChars }, props.style)
29 }), props),
30 unit && unitPosition === 'before' && numberInputUnit,
31 React.createElement(InputGroup_1.InputGroup, null,
32 React.createElement(Button_1.Button, Object.assign({ variant: "control", "aria-label": minusBtnAriaLabel, isDisabled: isDisabled || value <= min, onClick: evt => onMinus(evt, inputName) }, minusBtnProps),
33 React.createElement("span", { className: react_styles_1.css(number_input_1.default.numberInputIcon) },
34 React.createElement(minus_icon_1.default, { "aria-hidden": "true" }))),
35 React.createElement("input", Object.assign({ className: react_styles_1.css(number_input_1.default.formControl), type: "number", value: value, name: inputName, "aria-label": inputAriaLabel }, (isDisabled && { disabled: isDisabled }), (onChange && { onChange }), (onBlur && { onBlur }), (!onChange && { readOnly: true }), inputProps, { onKeyDown: keyDownHandler })),
36 React.createElement(Button_1.Button, Object.assign({ variant: "control", "aria-label": plusBtnAriaLabel, isDisabled: isDisabled || value >= max, onClick: evt => onPlus(evt, inputName) }, plusBtnProps),
37 React.createElement("span", { className: react_styles_1.css(number_input_1.default.numberInputIcon) },
38 React.createElement(plus_icon_1.default, { "aria-hidden": "true" })))),
39 unit && unitPosition === 'after' && numberInputUnit));
40};
41exports.NumberInput = NumberInput;
42exports.NumberInput.displayName = 'NumberInput';
43//# sourceMappingURL=NumberInput.js.map
\No newline at end of file