@patternfly/react-core 4.198.15 → 4.198.18

package/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
+
+export const ComposableSimpleDropdown: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleRef = React.useRef<HTMLButtonElement>();
+  const menuRef = React.useRef<HTMLDivElement>();
+  const [selected, setSelected] = React.useState<number>(0);
+
+  const handleMenuKeys = (event: KeyboardEvent) => {
+    if (!isOpen) {
+      return;
+    }
+    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        setIsOpen(!isOpen);
+        toggleRef.current.focus();
+      }
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen, menuRef]);
+
+  const onToggleClick = (ev: React.MouseEvent) => {
+    ev.stopPropagation(); // Stop handleClickOutside from handling
+    setTimeout(() => {
+      if (menuRef.current) {
+        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+    setIsOpen(!isOpen);
+  };
+
+  const monthStrings = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ];
+
+  const dateString = (date: Date) => `${monthStrings[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+
+  const date = new Date();
+
+  const toggleText = {
+    0: 'Today ',
+    1: 'Yesterday ',
+    2: 'Last 7 days ',
+    3: 'Last 14 days '
+  };
+
+  const dateText = {
+    0: <small className="pf-u-color-200">({dateString(date)})</small>,
+    1: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
+      </small>
+    ),
+    2: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
+      </small>
+    ),
+    3: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
+      </small>
+    )
+  };
+
+  const toggle = (
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} style={{ minWidth: '250px' }}>
+      <span style={{ verticalAlign: 'middle', marginRight: '8px' }}>{toggleText[selected]}</span>
+      {dateText[selected]}
+    </MenuToggle>
+  );
+  const menu = (
+    // eslint-disable-next-line no-console
+    <Menu ref={menuRef} onSelect={(_ev, itemId) => setSelected(itemId as number)} selected={selected}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId={0}>Today</MenuItem>
+          <MenuItem itemId={1}>Yesterday</MenuItem>
+          <MenuItem itemId={2}>Last 7 days</MenuItem>
+          <MenuItem itemId={3}>Last 14 days</MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+};

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