import React from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputUnitThreshold: React.FunctionComponent = () => { const [value, setValue] = React.useState(0); const minValue = 0; const maxValue = 10; const normalizeBetween = (value, min, max) => { if (min !== undefined && max !== undefined) { return Math.max(Math.min(value, max), min); } else if (value <= min) { return min; } else if (value >= max) { return max; } return value; }; const onMinus = () => { const newValue = normalizeBetween((value as number) - 1, minValue, maxValue); setValue(newValue); }; const onChange = (event: React.FormEvent) => { const value = (event.target as HTMLInputElement).value; setValue(value === '' ? value : +value); }; const onBlur = (event: React.FocusEvent) => { const blurVal = +event.target.value; if (blurVal < minValue) { setValue(minValue); } else if (blurVal > maxValue) { setValue(maxValue); } }; const onPlus = () => { const newValue = normalizeBetween((value as number) + 1, minValue, maxValue); setValue(newValue); }; return ( With a minimum value of 0 and maximum value of 10
); };