@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
46 lines • 2.95 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const formik_1 = require("formik");
const react_core_1 = require("@patternfly/react-core");
const utils_1 = require("./utils");
const exclamation_circle_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon"));
// eslint-disable-next-line react/display-name
const NumberInputField = React.forwardRef((_a, ref) => {
var { label, labelIcon, helperText, isRequired, validate, idPostfix, minValue = 0, maxValue, children, formatValue, onChange } = _a, props = tslib_1.__rest(_a, ["label", "labelIcon", "helperText", "isRequired", "validate", "idPostfix", "minValue", "maxValue", "children", "formatValue", "onChange"]);
const [field, { touched, error }, { setValue }] = (0, formik_1.useField)({
name: props.name,
validate,
});
const fieldId = (0, utils_1.getFieldId)(props.name, 'numberinput', idPostfix);
const isValid = !(touched && error);
const errorMessage = !isValid ? error : '';
const doChange = (value) => {
let newValue = value < minValue ? minValue : value;
newValue = maxValue && newValue > maxValue ? maxValue : newValue;
newValue = formatValue ? formatValue(newValue) : newValue;
setValue(newValue);
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
};
const onPlus = () => {
doChange(field.value + 1);
};
const onMinus = () => {
doChange(field.value - 1);
};
const handleChange = (event) => {
const targetValue = event.target.value;
doChange(isNaN(targetValue) ? 0 : Number(targetValue));
};
return (React.createElement(react_core_1.FormGroup, { fieldId: fieldId, label: label, isRequired: isRequired, labelIcon: labelIcon },
React.createElement(react_core_1.Split, null,
React.createElement(react_core_1.SplitItem, { isFilled: true },
React.createElement(react_core_1.NumberInput, Object.assign({}, props, { value: field.value, onMinus: onMinus, onChange: handleChange, onPlus: onPlus, min: minValue, max: maxValue, ref: ref, id: fieldId, "aria-describedby": `${fieldId}-helper` }))),
React.createElement(react_core_1.SplitItem, null, children)),
(errorMessage || helperText) && (React.createElement(react_core_1.FormHelperText, null,
React.createElement(react_core_1.HelperText, null,
React.createElement(react_core_1.HelperTextItem, { icon: errorMessage && React.createElement(exclamation_circle_icon_1.default, null), variant: errorMessage ? 'error' : 'default', id: errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper` }, errorMessage ? errorMessage : helperText))))));
});
exports.default = NumberInputField;
//# sourceMappingURL=NumberInputField.js.map