chore(Number Input): Convert examples to TypeScript

packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputCustomStep: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(90);
+  const step = 3;
+
+  const stepper = (stepValue: number) => {
+    setValue(value + stepValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue(Number(target.value));
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      onMinus={() => stepper(-step)}
+      onChange={onChange}
+      onPlus={() => stepper(step)}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+    />
+  );
+};

packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(90);
+  const minValue = 90;
+  const maxValue = 100;
+  const step = 3;
+
+  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 stepper = (stepValue: number) => {
+    setValue(value + stepValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
+    setValue(newValue);
+  };
+
+  const onBlur = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
+    setValue(newValue);
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      min={minValue}
+      max={maxValue}
+      onMinus={() => stepper(-step)}
+      onChange={onChange}
+      onBlur={onBlur}
+      onPlus={() => stepper(step)}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+    />
+  );
+};

packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputDefault: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(90);
+
+  const onMinus = () => {
+    const newValue = value - 1;
+    setValue(newValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue(Number(target.value));
+  };
+
+  const onPlus = () => {
+    const newValue = value + 1;
+    setValue(newValue);
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      onMinus={onMinus}
+      onChange={onChange}
+      onPlus={onPlus}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+    />
+  );
+};

packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputDisabled: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(100);
+  const minValue = 0;
+  const maxValue = 100;
+
+  const onMinus = () => {
+    const newValue = value - 1;
+    setValue(newValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue(Number(target.value));
+  };
+
+  const onPlus = () => {
+    const newValue = value + 1;
+    setValue(newValue);
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      min={minValue}
+      max={maxValue}
+      onMinus={onMinus}
+      onChange={onChange}
+      onPlus={onPlus}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+      unit="%"
+      isDisabled
+    />
+  );
+};

packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputUnit: React.FunctionComponent = () => {
+  const [value1, setValue1] = React.useState(90);
+  const [value2, setValue2] = React.useState(Number((1.0).toFixed(2)));
+
+  const onMinus1 = () => setValue1(value1 - 1);
+  const onChange1 = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue1(Number(target.value));
+  };
+  const onPlus1 = () => setValue1(value1 + 1);
+
+  const onMinus2 = () => {
+    const newValue = Number((value2 - 0.01).toFixed(2));
+    setValue2(newValue);
+  };
+  const onChange2 = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue2(Number(target.value));
+  };
+  const onPlus2 = () => {
+    const newValue = Number((value2 + 0.01).toFixed(2));
+    setValue2(newValue);
+  };
+
+  return (
+    <React.Fragment>
+      <NumberInput
+        value={value1}
+        onMinus={onMinus1}
+        onChange={onChange1}
+        onPlus={onPlus1}
+        inputName="input 1"
+        inputAriaLabel="number input 1"
+        minusBtnAriaLabel="minus 1"
+        plusBtnAriaLabel="plus 1"
+        unit="%"
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={value2}
+        onMinus={onMinus2}
+        onChange={onChange2}
+        onPlus={onPlus2}
+        inputName="input 2"
+        inputAriaLabel="number input 2"
+        minusBtnAriaLabel="minus 0.01"
+        plusBtnAriaLabel="plus 0.01"
+        unit="$"
+        unitPosition="before"
+      />
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx

@@ -0,0 +1,55 @@
+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 - 1, minValue, maxValue);
+    setValue(newValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
+    setValue(newValue);
+  };
+
+  const onPlus = () => {
+    const newValue = normalizeBetween(value + 1, minValue, maxValue);
+    setValue(newValue);
+  };
+
+  return (
+    <React.Fragment>
+      With a minimum value of 0 and maximum value of 10
+      <br />
+      <NumberInput
+        value={value}
+        min={minValue}
+        max={maxValue}
+        onMinus={onMinus}
+        onChange={onChange}
+        onPlus={onPlus}
+        inputName="input"
+        inputAriaLabel="number input"
+        minusBtnAriaLabel="minus"
+        plusBtnAriaLabel="plus"
+        unit="%"
+      />
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx

@@ -0,0 +1,80 @@
+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<HTMLInputElement>,
+    updateFunction: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    const target = event.target as HTMLInputElement;
+    updateFunction(Number(target.value));
+  };
+
+  const onMinus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
+    updateFunction(value - 1);
+  };
+
+  const onPlus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
+    updateFunction(value + 1);
+  };
+
+  return (
+    <React.Fragment>
+      <NumberInput
+        value={input1Value}
+        onMinus={() => 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}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input2Value}
+        onMinus={() => 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}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input3Value}
+        onMinus={() => 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}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input4Value}
+        onMinus={() => 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}
+      />
+    </React.Fragment>
+  );
+};

packages/react-core/src/components/NumberInput/examples/WithStatus.tsx → packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NumberInput, ValidatedOptions } from '@patternfly/react-core';
 
-export const WithStatus: React.FunctionComponent = () => {
+export const NumberInputWithStatus: React.FunctionComponent = () => {
   const max = 10;
   const min = 0;
 
@@ -20,8 +20,9 @@ export const WithStatus: React.FunctionComponent = () => {
     validate(newVal);
   };
 
-  const onChange = event => {
-    const newVal = isNaN(event.target.value) ? 5 : Number(event.target.value);
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newVal = isNaN(+target.value) ? 5 : Number(target.value);
     setValue(newVal);
     validate(newVal);
   };