@patternfly/react-core 4.198.16 → 4.198.19

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

@@ -159,9 +159,20 @@ class UnitThresholdNumberInput extends React.Component {
     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.state.value - 1
+        value: this.normalizeBetween(this.state.value - 1, this.minValue, this.maxValue)
       });
     };
 
@@ -174,7 +185,7 @@ class UnitThresholdNumberInput extends React.Component {
 
     this.onPlus = () => {
       this.setState({
-        value: this.state.value + 1
+        value: this.normalizeBetween(this.state.value + 1, this.minValue, this.maxValue)
       });
     };
   }
@@ -369,12 +380,12 @@ class CustomStepNumberInput extends React.Component {
     super(props);
     this.state = {
       value: 90,
-      step: 3,
+      step: 3
     };
 
     this.stepper = step => () => {
-      this.setState(prev => ({...prev, value: prev.value + step }))
-    }
+      this.setState(prev => ({ ...prev, value: prev.value + step }));
+    };
 
     this.onChange = event => {
       this.setState({
@@ -400,3 +411,65 @@ class CustomStepNumberInput extends React.Component {
   }
 }
 ```
+
+### 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.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}
+        onPlus={this.stepper(3)}
+        inputName="input"
+        inputAriaLabel="number input"
+        minusBtnAriaLabel="minus"
+        plusBtnAriaLabel="plus"
+      />
+    );
+  }
+}
+```

package/src/demos/MultipleFileUploadDemos.md

@@ -0,0 +1,16 @@
+---
+id: File upload - multiple
+section: components
+beta: true
+---
+
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+
+## Demos
+
+### Rejected file handling
+
+This demo shows how to add a modal to alert users that the file(s) they attempted to drop was of a non-acceptable type.
+
+```ts file="./examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx"
+```

package/src/{components/MultipleFileUpload/examples/MultipleFileUploadHorizontal.tsx → demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx}

@@ -1,20 +1,13 @@
 import React from 'react';
 import {
   MultipleFileUpload,
-  MultipleFileUploadInfo,
   MultipleFileUploadMain,
-  MultipleFileUploadTitle,
-  MultipleFileUploadTitleIcon,
-  MultipleFileUploadTitleText,
-  MultipleFileUploadTitleTextSeparator,
-  MultipleFileUploadButton,
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
-  Modal
+  Modal,
+  Checkbox
 } from '@patternfly/react-core';
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {
   fileName: string;
@@ -24,9 +17,11 @@ interface readFile {
 }
 
 export const MultipleFileUploadBasic: React.FunctionComponent = () => {
+  const [isHorizontal, setIsHorizontal] = React.useState(false);
   const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
   const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
   const [showStatus, setShowStatus] = React.useState(false);
+  const [statusIcon, setStatusIcon] = React.useState('inProgress');
   const [modalText, setModalText] = React.useState('');
 
   // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed
@@ -35,17 +30,15 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   }
 
   // determine the icon that should be shown for the overall status list
-  const getStatusIcon = () => {
+  React.useEffect(() => {
     if (readFileData.length < currentFiles.length) {
-      return <InProgressIcon />;
-    }
-
-    if (readFileData.every(file => file.loadResult === 'success')) {
-      return <CheckCircleIcon />;
+      setStatusIcon('inProgress');
+    } else if (readFileData.every(file => file.loadResult === 'success')) {
+      setStatusIcon('success');
+    } else {
+      setStatusIcon('danger');
     }
-
-    return <TimesCircleIcon />;
-  };
+  }, [readFileData, currentFiles]);
 
   // remove files from both state arrays based on their name
   const removeFiles = (namesOfFilesToRemove: string[]) => {
@@ -101,51 +94,54 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   const successfullyReadFileCount = readFileData.filter(fileData => fileData.loadResult === 'success').length;
 
   return (
-    <MultipleFileUpload
-      onFileDrop={handleFileDrop}
-      dropzoneProps={{
-        accept: 'image/jpeg, application/msword, application/pdf, image/png',
-        onDropRejected: handleDropRejected
-      }}
-      isHorizontal
-    >
-      <MultipleFileUploadMain>
-        <MultipleFileUploadTitle>
-          <MultipleFileUploadTitleIcon />
-          <MultipleFileUploadTitleText>
-            Drag and drop files here
-            <MultipleFileUploadTitleTextSeparator>or</MultipleFileUploadTitleTextSeparator>
-          </MultipleFileUploadTitleText>
-        </MultipleFileUploadTitle>
-        <MultipleFileUploadButton />
-        <MultipleFileUploadInfo>Accepted file types: JPEG, Doc, PDF, PNG</MultipleFileUploadInfo>
-      </MultipleFileUploadMain>
-      {showStatus && (
-        <MultipleFileUploadStatus
-          statusToggleText={`${successfullyReadFileCount} of ${currentFiles.length} files uploaded`}
-          statusToggleIcon={getStatusIcon()}
-        >
-          {currentFiles.map(file => (
-            <MultipleFileUploadStatusItem
-              file={file}
-              key={file.name}
-              onClearClick={() => removeFiles([file.name])}
-              onReadSuccess={handleReadSuccess}
-              onReadFail={handleReadFail}
-            />
-          ))}
-        </MultipleFileUploadStatus>
-      )}
-      <Modal
-        isOpen={!!modalText}
-        title="Unsupported file"
-        titleIconVariant="warning"
-        showClose
-        aria-label="unsupported file upload attempted"
-        onClose={() => setModalText('')}
+    <>
+      <MultipleFileUpload
+        onFileDrop={handleFileDrop}
+        dropzoneProps={{
+          accept: 'image/jpeg, application/msword, application/pdf, image/png',
+          onDropRejected: handleDropRejected
+        }}
+        isHorizontal={isHorizontal}
       >
-        {modalText}
-      </Modal>
-    </MultipleFileUpload>
+        <MultipleFileUploadMain
+          titleIcon={<UploadIcon />}
+          titleText="Drag and drop files here"
+          titleTextSeparator="or"
+          infoText="Accepted file types: JPEG, Doc, PDF, PNG"
+        />
+        {showStatus && (
+          <MultipleFileUploadStatus
+            statusToggleText={`${successfullyReadFileCount} of ${currentFiles.length} files uploaded`}
+            statusToggleIcon={statusIcon}
+          >
+            {currentFiles.map(file => (
+              <MultipleFileUploadStatusItem
+                file={file}
+                key={file.name}
+                onClearClick={() => removeFiles([file.name])}
+                onReadSuccess={handleReadSuccess}
+                onReadFail={handleReadFail}
+              />
+            ))}
+          </MultipleFileUploadStatus>
+        )}
+        <Modal
+          isOpen={!!modalText}
+          title="Unsupported file"
+          titleIconVariant="warning"
+          showClose
+          aria-label="unsupported file upload attempted"
+          onClose={() => setModalText('')}
+        >
+          {modalText}
+        </Modal>
+      </MultipleFileUpload>
+      <Checkbox
+        id="horizontal-checkbox"
+        label="Show as horizontal"
+        isChecked={isHorizontal}
+        onChange={() => setIsHorizontal(!isHorizontal)}
+      />
+    </>
   );
 };