import React from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputVaryingSizes: React.FunctionComponent = () => { const [input1Value, setInput1Value] = React.useState(1); const [input2Value, setInput2Value] = React.useState(1234567890); const [input3Value, setInput3Value] = React.useState(5); const [input4Value, setInput4Value] = React.useState(12345); const onChange = ( event: React.FormEvent, updateFunction: React.Dispatch> ) => { const value = (event.target as HTMLInputElement).value; updateFunction(value === '' ? value : +value); }; const onMinus = (value: number | '', updateFunction: React.Dispatch>) => { updateFunction((value || 0) - 1); }; const onPlus = (value: number | '', updateFunction: React.Dispatch>) => { updateFunction((value || 0) + 1); }; return ( onMinus(input1Value, setInput1Value)} onChange={(event) => onChange(event, setInput1Value)} onPlus={() => onPlus(input1Value, setInput1Value)} inputName="input1" inputAriaLabel="number input 1" minusBtnAriaLabel="input 2 minus" plusBtnAriaLabel="input 2 plus" widthChars={1} />
onMinus(input2Value, setInput2Value)} onChange={(event) => onChange(event, setInput2Value)} onPlus={() => onPlus(input2Value, setInput2Value)} inputName="input2" inputAriaLabel="number input 2" minusBtnAriaLabel="input 2 minus" plusBtnAriaLabel="input 2 plus" widthChars={10} />
onMinus(input3Value, setInput3Value)} onChange={(event) => onChange(event, setInput3Value)} onPlus={() => onPlus(input3Value, setInput3Value)} inputName="input3" inputAriaLabel="number input 3" minusBtnAriaLabel="input 3 minus" plusBtnAriaLabel="input 3 plus" widthChars={5} />
onMinus(input4Value, setInput4Value)} onChange={(event) => onChange(event, setInput4Value)} onPlus={() => onPlus(input4Value, setInput4Value)} inputName="input4" inputAriaLabel="number input 4" minusBtnAriaLabel="input 4 minus" plusBtnAriaLabel="input 4 plus" widthChars={5} /> ); };