@patternfly/react-core 4.208.10 → 4.208.11

package/src/components/AlertGroup/examples/AlertGroupSingularDynamicOverflow.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [overflowMessage, setOverflowMessage] = React.useState<string>('');
+
+  const maxDisplayed = 4;
+
+  const getOverflowMessage = (alertsNumber: number) => {
+    const overflow = alertsNumber - maxDisplayed;
+    if (overflow > 0) {
+      return `View ${overflow} more alerts`;
+    }
+    return '';
+  };
+
+  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+    setOverflowMessage(getOverflowMessage(alerts.length + 1));
+  };
+
+  const removeAlert = (key: React.Key) => {
+    const newAlerts = alerts.filter(alert => alert.key !== key);
+    setAlerts(newAlerts);
+    setOverflowMessage(getOverflowMessage(newAlerts.length));
+  };
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => new Date().getTime();
+
+  const addSuccessAlert = () => {
+    addAlert('Toast success alert', 'success', getUniqueId());
+  };
+
+  const addDangerAlert = () => {
+    addAlert('Toast danger alert', 'danger', getUniqueId());
+  };
+
+  const addInfoAlert = () => {
+    addAlert('Toast info alert', 'info', getUniqueId());
+  };
+
+  const onOverflowClick = () => {
+    // eslint-disable-next-line no-console
+    console.log('Overflow message clicked');
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+          Add single success alert
+        </button>
+        <button onClick={addDangerAlert} type="button" className={btnClasses}>
+          Add single danger alert
+        </button>
+        <button onClick={addInfoAlert} type="button" className={btnClasses}>
+          Add single info alert
+        </button>
+      </InputGroup>
+      <AlertGroup isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
+        {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (
+          <Alert
+            isInline
+            variant={AlertVariant[variant]}
+            title={title}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+            key={key}
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

package/src/components/AlertGroup/examples/AlertGroupStatic.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Alert, AlertGroup } from '@patternfly/react-core';
+
+export const AlertGroupStatic: React.FunctionComponent = () => (
+  <React.Fragment>
+    <AlertGroup>
+      <Alert title="Success alert" variant="success" isInline />
+      <Alert title="Info alert" variant="info" isInline />
+    </AlertGroup>
+  </React.Fragment>
+);

package/src/components/AlertGroup/examples/AlertGroupToast.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupToast: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+
+  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+  };
+
+  const removeAlert = (key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+  };
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => new Date().getTime();
+
+  const addSuccessAlert = () => {
+    addAlert('Toast success alert', 'success', getUniqueId());
+  };
+
+  const addDangerAlert = () => {
+    addAlert('Toast danger alert', 'danger', getUniqueId());
+  };
+
+  const addInfoAlert = () => {
+    addAlert('Toast info alert', 'info', getUniqueId());
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+          Add toast success alert
+        </button>
+        <button onClick={addDangerAlert} type="button" className={btnClasses}>
+          Add toast danger alert
+        </button>
+        <button onClick={addInfoAlert} type="button" className={btnClasses}>
+          Add toast info alert
+        </button>
+      </InputGroup>
+      <AlertGroup isToast isLiveRegion>
+        {alerts.map(({ key, variant, title }) => (
+          <Alert
+            variant={AlertVariant[variant]}
+            title={title}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+            key={key}
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

package/src/components/AlertGroup/examples/AlertGroupToastOverflowCapture.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [overflowMessage, setOverflowMessage] = React.useState<string>('');
+
+  const maxDisplayed = 4;
+
+  const getOverflowMessage = (alertsNumber: number) => {
+    const overflow = alertsNumber - maxDisplayed;
+    if (overflow > 0) {
+      return `View ${overflow} more alerts`;
+    }
+    return '';
+  };
+
+  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+    setOverflowMessage(getOverflowMessage(alerts.length + 1));
+  };
+
+  const removeAlert = (key: React.Key) => {
+    const newAlerts = alerts.filter(alert => alert.key !== key);
+    setAlerts(newAlerts);
+    setOverflowMessage(getOverflowMessage(newAlerts.length));
+  };
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => new Date().getTime();
+
+  const addSuccessAlert = () => {
+    addAlert('Toast success alert', 'success', getUniqueId());
+  };
+
+  const addDangerAlert = () => {
+    addAlert('Toast danger alert', 'danger', getUniqueId());
+  };
+
+  const addInfoAlert = () => {
+    addAlert('Toast info alert', 'info', getUniqueId());
+  };
+
+  const onOverflowClick = () => {
+    // eslint-disable-next-line no-console
+    console.log('Overflow message clicked');
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+          Add toast success alert
+        </button>
+        <button onClick={addDangerAlert} type="button" className={btnClasses}>
+          Add toast danger alert
+        </button>
+        <button onClick={addInfoAlert} type="button" className={btnClasses}>
+          Add toast info alert
+        </button>
+      </InputGroup>
+      <AlertGroup isToast isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
+        {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (
+          <Alert
+            variant={AlertVariant[variant]}
+            title={title}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+            key={key}
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

package/src/helpers/index.ts

@@ -9,3 +9,4 @@ export * from './Popper/Popper';
 export * from './useIsomorphicLayout';
 export * from './KeyboardHandler';
 export * from './resizeObserver';
+export * from './useInterval';

package/src/helpers/useInterval.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+/** This is a custom React hook in a format suggest by Dan Abramov in a blog post here:
+ * https://overreacted.io/making-setinterval-declarative-with-react-hooks/. It allows setInterval to be used
+ * declaratively in functional React components.
+ */
+
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = React.useRef(() => {});
+
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  React.useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}