@patternfly/react-core 4.243.0 → 4.244.0

package/src/components/NumberInput/examples/NumberInput.md

@@ -9,479 +9,40 @@ propComponents: ['NumberInput']
 
 ### Default
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class BasicNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 90
-    };
-
-    this.onMinus = () => {
-      this.setState({
-        value: this.state.value - 1
-      });
-    };
-
-    this.onChange = event => {
-      this.setState({
-        value: Number(event.target.value)
-      });
-    };
-
-    this.onPlus = () => {
-      this.setState({
-        value: this.state.value + 1
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    return (
-      <NumberInput
-        value={value}
-        onMinus={this.onMinus}
-        onChange={this.onChange}
-        onPlus={this.onPlus}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-      />
-    );
-  }
-}
+```ts file="./NumberInputDefault.tsx"
 ```
 
 ### With unit
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class UnitNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value1: 90,
-      value2: (1.0).toFixed(2)
-    };
-
-    this.onMinus1 = () => {
-      this.setState({
-        value1: this.state.value1 - 1
-      });
-    };
-
-    this.onChange1 = event => {
-      this.setState({
-        value1: Number(event.target.value)
-      });
-    };
-
-    this.onPlus1 = () => {
-      this.setState({
-        value1: this.state.value1 + 1
-      });
-    };
-
-    this.onMinus2 = () => {
-      this.setState({
-        value2: (Number(this.state.value2) - 0.01).toFixed(2)
-      });
-    };
-
-    this.onChange2 = event => {
-      this.setState({
-        value2: event.target.value
-      });
-    };
-
-    this.onPlus2 = () => {
-      this.setState({
-        value2: (Number(this.state.value2) + 0.01).toFixed(2)
-      });
-    };
-  }
-
-  render() {
-    const { value1, value2 } = this.state;
-    return (
-      <React.Fragment>
-        <NumberInput
-          value={value1}
-          onMinus={this.onMinus1}
-          onChange={this.onChange1}
-          onPlus={this.onPlus1}
-          inputName="input 1"
-          inputAriaLabel="number input 1"
-          minusBtnAriaLabel="minus 1"
-          plusBtnAriaLabel="plus 1"
-          unit="%"
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={value2}
-          onMinus={this.onMinus2}
-          onChange={this.onChange2}
-          onPlus={this.onPlus2}
-          inputName="input 2"
-          inputAriaLabel="number input 2"
-          minusBtnAriaLabel="minus 0.01"
-          plusBtnAriaLabel="plus 0.01"
-          unit="$"
-          unitPosition="before"
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./NumberInputUnit.tsx"
 ```
 
 ### With unit and thresholds
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class UnitThresholdNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 0
-    };
-    this.minValue = 0;
-    this.maxValue = 10;
-
-    this.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;
-    };
-
-    this.onMinus = () => {
-      this.setState({
-        value: this.normalizeBetween(this.state.value - 1, this.minValue, this.maxValue)
-      });
-    };
-
-    this.onChange = event => {
-      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
-      this.setState({
-        value: newValue > this.maxValue ? this.maxValue : newValue < this.minValue ? this.minValue : newValue
-      });
-    };
-
-    this.onPlus = () => {
-      this.setState({
-        value: this.normalizeBetween(this.state.value + 1, this.minValue, this.maxValue)
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <React.Fragment>
-        With a minimum value of 0 and maximum value of 10
-        <br />
-        <NumberInput
-          value={value}
-          min={this.minValue}
-          max={this.maxValue}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input"
-          inputAriaLabel="number input"
-          minusBtnAriaLabel="minus"
-          plusBtnAriaLabel="plus"
-          unit="%"
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./NumberInputUnitThreshold.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class DisabledNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 100
-    };
-
-    this.onMinus = () => {
-      this.setState({
-        value: this.state.value - 1
-      });
-    };
-
-    this.onChange = event => {
-      this.setState({
-        value: Number(event.target.value)
-      });
-    };
-
-    this.onPlus = () => {
-      this.setState({
-        value: this.state.value + 1
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    const minValue = 0;
-    const maxValue = 100;
-
-    return (
-      <NumberInput
-        value={value}
-        min={minValue}
-        max={maxValue}
-        onMinus={this.onMinus}
-        onChange={this.onChange}
-        onPlus={this.onPlus}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-        unit="%"
-        isDisabled
-      />
-    );
-  }
-}
-
+```ts file="./NumberInputDisabled.tsx"
 ```
+
 ### With status
 
-```ts file="./WithStatus.tsx"
+```ts file="./NumberInputWithStatus.tsx"
 ```
 
 ### Varying sizes
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class NumberInputSizes extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      input1Value: 1,
-      input2Value: 1234567890,
-      input3Value: 5,
-      input4Value: 12345
-    };
-
-    this.onChange = event => {
-      this.setState({
-        [`${event.target.name}Value`]: Number(event.target.value)
-      });
-    };
-
-    this.onMinus = (e, inputName) => {
-      this.setState({
-        [`${inputName}Value`]: this.state[`${inputName}Value`] - 1
-      });
-    };
-
-    this.onPlus = (e, inputName) => {
-      this.setState({
-        [`${inputName}Value`]: this.state[`${inputName}Value`] + 1
-      });
-    };
-  }
-
-  render() {
-    const { input1Value, input2Value, input3Value, input4Value } = this.state;
-
-    return (
-      <React.Fragment>
-        <NumberInput
-          value={input1Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input1"
-          inputAriaLabel="number input 1"
-          minusBtnAriaLabel="input 2 minus"
-          plusBtnAriaLabel="input 2 plus"
-          widthChars={1}
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={input2Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input2"
-          inputAriaLabel="number input 2"
-          minusBtnAriaLabel="input 2 minus"
-          plusBtnAriaLabel="input 2 plus"
-          widthChars={10}
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={input3Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input3"
-          inputAriaLabel="number input 3"
-          minusBtnAriaLabel="input 3 minus"
-          plusBtnAriaLabel="input 3 plus"
-          widthChars={5}
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={input4Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input4"
-          inputAriaLabel="number input 4"
-          minusBtnAriaLabel="input 4 minus"
-          plusBtnAriaLabel="input 4 plus"
-          widthChars={5}
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./NumberInputVaryingSizes.tsx"
 ```
 
 ### Custom increment/decrement
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class CustomStepNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 90,
-      step: 3
-    };
-
-    this.stepper = step => () => {
-      this.setState(prev => ({ ...prev, value: prev.value + step }));
-    };
-
-    this.onChange = event => {
-      this.setState({
-        value: Number(event.target.value)
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    return (
-      <NumberInput
-        value={value}
-        onMinus={this.stepper(-3)}
-        onChange={this.onChange}
-        onPlus={this.stepper(3)}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-      />
-    );
-  }
-}
+```ts file="./NumberInputCustomStep.tsx"
 ```
 
 ### Custom increment/decrement and thresholds
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class CustomStepNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 90,
-      step: 3
-    };
-    this.minValue = 90;
-    this.maxValue = 100;
-
-    this.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;
-    };
-
-    this.stepper = step => () => {
-      this.setState(prev => ({
-        ...prev,
-        value: this.normalizeBetween(prev.value + step, this.minValue, this.maxValue)
-      }));
-    };
-
-    this.onChange = event => {
-      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
-      this.setState({
-        value: newValue
-      });
-    };
-
-    this.onBlur = event => {
-      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
-      this.setState({
-        value: newValue > this.maxValue ? this.maxValue : newValue < this.minValue ? this.minValue : newValue
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    return (
-      <NumberInput
-        value={value}
-        min={this.minValue}
-        max={this.maxValue}
-        onMinus={this.stepper(-3)}
-        onChange={this.onChange}
-        onBlur={this.onBlur}
-        onPlus={this.stepper(3)}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-      />
-    );
-  }
-}
+```ts file="./NumberInputCustomStepAndThreshold.tsx"
 ```

package/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"
+    />
+  );
+};

package/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"
+    />
+  );
+};

package/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"
+    />
+  );
+};

package/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
+    />
+  );
+};

package/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>
+  );
+};