1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import styles from '@patternfly/react-styles/css/components/NumberInput/number-input';
|
4 | import { css } from '@patternfly/react-styles';
|
5 | import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
|
6 | import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
|
7 | import { InputGroup } from '../InputGroup';
|
8 | import { Button } from '../Button';
|
9 | import { KEY_CODES } from '../../helpers';
|
10 | const defaultKeyDownHandler = (args) => (event) => {
|
11 | if (KEY_CODES.ARROW_UP === event.keyCode && args.onPlus) {
|
12 | event.preventDefault();
|
13 | args.onPlus(null, args.inputName);
|
14 | }
|
15 | if (KEY_CODES.ARROW_DOWN === event.keyCode && args.onMinus) {
|
16 | event.preventDefault();
|
17 | args.onMinus(null, args.inputName);
|
18 | }
|
19 | };
|
20 | export const NumberInput = (_a) => {
|
21 | 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 = __rest(_a, ["value", "className", "widthChars", "isDisabled", "onMinus", "onChange", "onBlur", "onPlus", "unit", "unitPosition", "min", "max", "inputName", "inputAriaLabel", "minusBtnAriaLabel", "plusBtnAriaLabel", "inputProps", "minusBtnProps", "plusBtnProps"]);
|
22 | const numberInputUnit = React.createElement("div", { className: css(styles.numberInputUnit) }, unit);
|
23 | const keyDownHandler = inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });
|
24 | return (React.createElement("div", Object.assign({ className: css(styles.numberInput, className) }, (widthChars && {
|
25 | style: Object.assign({ '--pf-c-number-input--c-form-control--width-chars': widthChars }, props.style)
|
26 | }), props),
|
27 | unit && unitPosition === 'before' && numberInputUnit,
|
28 | React.createElement(InputGroup, null,
|
29 | React.createElement(Button, Object.assign({ variant: "control", "aria-label": minusBtnAriaLabel, isDisabled: isDisabled || value <= min, onClick: evt => onMinus(evt, inputName) }, minusBtnProps),
|
30 | React.createElement("span", { className: css(styles.numberInputIcon) },
|
31 | React.createElement(MinusIcon, { "aria-hidden": "true" }))),
|
32 | React.createElement("input", Object.assign({ className: css(styles.formControl), type: "number", value: value, name: inputName, "aria-label": inputAriaLabel }, (isDisabled && { disabled: isDisabled }), (onChange && { onChange }), (onBlur && { onBlur }), (!onChange && { readOnly: true }), inputProps, { onKeyDown: keyDownHandler })),
|
33 | React.createElement(Button, Object.assign({ variant: "control", "aria-label": plusBtnAriaLabel, isDisabled: isDisabled || value >= max, onClick: evt => onPlus(evt, inputName) }, plusBtnProps),
|
34 | React.createElement("span", { className: css(styles.numberInputIcon) },
|
35 | React.createElement(PlusIcon, { "aria-hidden": "true" })))),
|
36 | unit && unitPosition === 'after' && numberInputUnit));
|
37 | };
|
38 | NumberInput.displayName = 'NumberInput';
|
39 |
|
\ | No newline at end of file |