github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/ui/Notifications.tsx (about)

     1  import React from 'react';
     2  import ReactNotification, {
     3    store as libStore,
     4    ReactNotificationOptions,
     5    DismissOptions,
     6  } from 'react-notifications-component';
     7  import 'react-notifications-component/dist/scss/notification.scss';
     8  import styles from './Notifications.module.scss';
     9  
    10  export default function Notifications() {
    11    return (
    12      <div className={styles.notificationsComponent}>
    13        <ReactNotification />
    14      </div>
    15    );
    16  }
    17  
    18  const defaultParams: Partial<ReactNotificationOptions> = {
    19    insert: 'top',
    20    container: 'top-right',
    21    animationIn: ['animate__animated', 'animate__fadeIn'],
    22    animationOut: ['animate__animated', 'animate__fadeOut'],
    23  };
    24  
    25  export type NotificationOptions = {
    26    title?: string;
    27    message: string | JSX.Element;
    28    additionalInfo?: string[];
    29    type: 'success' | 'danger' | 'info' | 'warning';
    30  
    31    dismiss?: DismissOptions;
    32    onRemoval?: ((id: string, removedBy: ShamefulAny) => void) | undefined;
    33  };
    34  
    35  function Message({
    36    message,
    37    additionalInfo,
    38  }: {
    39    message: string | JSX.Element;
    40    additionalInfo?: string[];
    41  }) {
    42    const msg = typeof message === 'string' ? <p>{message}</p> : message;
    43    return (
    44      <div>
    45        {msg}
    46        {additionalInfo && <h4>Additional Info:</h4>}
    47  
    48        {additionalInfo && (
    49          <ul>
    50            {additionalInfo.map((a) => {
    51              return <li key={a}>{a}</li>;
    52            })}
    53          </ul>
    54        )}
    55      </div>
    56    );
    57  }
    58  
    59  export const store = {
    60    addNotification({
    61      title,
    62      message,
    63      type,
    64      dismiss,
    65      onRemoval,
    66      additionalInfo,
    67    }: NotificationOptions) {
    68      dismiss = dismiss || {
    69        duration: 5000,
    70        pauseOnHover: true,
    71        click: false,
    72        touch: false,
    73        showIcon: true,
    74        onScreen: true,
    75      };
    76  
    77      libStore.addNotification({
    78        ...defaultParams,
    79        title,
    80        message: <Message message={message} additionalInfo={additionalInfo} />,
    81        type,
    82        dismiss,
    83        onRemoval,
    84        container: 'top-right',
    85      });
    86    },
    87  };