@patternfly/react-core 4.198.16 → 4.198.17

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -6,70 +6,22 @@ propComponents:
   [
     'MultipleFileUpload',
     'MultipleFileUploadMain',
-    'MultipleFileUploadTitle',
-    'MultipleFileUploadTitleIcon',
-    'MultipleFileUploadTitleText',
-    'MultipleFileUploadTitleTextSeparator',
-    'MultipleFileUploadButton',
-    'MultipleFileUploadInfo',
     'MultipleFileUploadStatus',
     'MultipleFileUploadStatusItem',
   ]
 beta: true
 ---
 
-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';
 
 File upload - multiple is able to:
 
-- accept one or more files via browse or drag-and-drop
-- provide their data to you using file objects via the `onFileDrop` callback prop
-- read files as dataURLs, calling provided callbacks as needed when files start/finish being read, as well as when the read succeeds or fails
-- display (in real time) the upload progress/status of each file
-  - uploaded files are represented by the `MultipleFileUploadStatusItem` component, this component includes the aforementioned built-in file reading logic
-  - if you prefer to supply your own file reading logic and strictly use `MultipleFileUploadStatusItem` as a display component, the `customFileHandler`, `fileName`, `fileSize`, `progressValue`, and `progressVariant` props exist to allow you to do that
-
-### General intended structure
-
-File upload - multiple is designed in a composable manner to maximize flexibility. The general intended component relationships are arranged similarly to:
-
-```js noLive
-import {
-  MultipleFileUpload,
-  MultipleFileUploadInfo,
-  MultipleFileUploadMain,
-  MultipleFileUploadTitle,
-  MultipleFileUploadTitleIcon,
-  MultipleFileUploadTitleText,
-  MultipleFileUploadTitleTextSeparator,
-  MultipleFileUploadButton,
-  MultipleFileUploadStatus,
-  MultipleFileUploadStatusItem
-} from '@patternfly/react-core';
-
-<MultipleFileUpload>
-  <MultipleFileUploadMain>
-    <MultipleFileUploadTitle>
-      <MultipleFileUploadTitleIcon />
-
-      <MultipleFileUploadTitleText>
-        main title text
-        <MultipleFileUploadTitleTextSeparator>title text separator</MultipleFileUploadTitleTextSeparator>
-      </MultipleFileUploadTitleText>
-    </MultipleFileUploadTitle>
-
-    <MultipleFileUploadButton />
-
-    <MultipleFileUploadInfo>Accepted file types: x, y, z</MultipleFileUploadInfo>
-  </MultipleFileUploadMain>
-
-  <MultipleFileUploadStatus>
-    <MultipleFileUploadStatusItem />
-  </MultipleFileUploadStatus>
-</MultipleFileUpload>
-```
+- Accept one or more files via browse or drag-and-drop
+- Provide their data to you using file objects via the `onFileDrop` callback prop
+- Read files as dataURLs, calling provided callbacks as needed when files start/finish being read, as well as when the read succeeds or fails
+- Display (in real time) the upload progress/status of each file
+  - Uploaded files are represented by the multiple file upload status item component, this component includes the aforementioned built-in file reading logic
+  - If you prefer to supply your own file reading logic and strictly use multiple file upload status item as a display component, the `customFileHandler`, `fileName`, `fileSize`, `progressValue`, and `progressVariant` props exist to allow you to do that
 
 ### Restricting file size and type
 
@@ -85,8 +37,3 @@ Restricting file sizes and types in this way is for user convenience only, and i
 
 ```ts file="./MultipleFileUploadBasic.tsx"
 ```
-
-### Horizontal
-
-```ts file="./MultipleFileUploadHorizontal.tsx"
-```

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -1,20 +1,12 @@
 import React from 'react';
 import {
   MultipleFileUpload,
-  MultipleFileUploadInfo,
   MultipleFileUploadMain,
-  MultipleFileUploadTitle,
-  MultipleFileUploadTitleIcon,
-  MultipleFileUploadTitleText,
-  MultipleFileUploadTitleTextSeparator,
-  MultipleFileUploadButton,
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
-  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,10 +16,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 [modalText, setModalText] = React.useState('');
+  const [statusIcon, setStatusIcon] = React.useState('inProgress');
 
   // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed
   if (!showStatus && currentFiles.length > 0) {
@@ -35,17 +28,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[]) => {
@@ -88,63 +79,46 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     ]);
   };
 
-  // dropzone prop that communicates to the user that files they've attempted to upload are not an appropriate type
-  const handleDropRejected = (files: File[], _event: React.DragEvent<HTMLElement>) => {
-    if (files.length === 1) {
-      setModalText(`${files[0].name} is not an accepted file type`);
-    } else {
-      const rejectedMessages = files.reduce((acc, file) => (acc += `${file.name}, `), '');
-      setModalText(`${rejectedMessages}are not accepted file types`);
-    }
-  };
-
   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
-      }}
-    >
-      <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'
+        }}
+        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>
+        )}
+      </MultipleFileUpload>
+      <Checkbox
+        id="horizontal-checkbox"
+        label="Show as horizontal"
+        isChecked={isHorizontal}
+        onChange={() => setIsHorizontal(!isHorizontal)}
+      />
+    </>
   );
 };

package/src/components/MultipleFileUpload/index.ts

@@ -1,10 +1,4 @@
 export * from './MultipleFileUpload';
-export * from './MultipleFileUploadInfo';
 export * from './MultipleFileUploadMain';
-export * from './MultipleFileUploadTitle';
-export * from './MultipleFileUploadTitleIcon';
-export * from './MultipleFileUploadTitleText';
-export * from './MultipleFileUploadTitleTextSeparator';
-export * from './MultipleFileUploadButton';
 export * from './MultipleFileUploadStatus';
 export * from './MultipleFileUploadStatusItem';

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