Untitled

/** Multiple Snackbar Demo Code **/
import React from 'react';
import Snackbar, { SnackbarContent } from '@nokia-csf-uxr/ccfk/Snackbar';
import Button from '@nokia-csf-uxr/ccfk/Button';
const MESSAGE_SAMPLE = [
  'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi repellendus quod doloribus',
  'Dignissimos, facilis maiores libero iste dolore facere in nulla aperiam!Praesentium fugit accusamus consequatur fugiat nostrum maxime!',
  'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi repellendus quod doloribus. Dignissimos, facilis maiores libero iste dolore facere in nulla aperiam!Praesentium fugit accusamus consequatur fugiat nostrum maxime!',
];
/** This is a demo composition to demonstrate multiple messages. */
const SnackbarMultipleDemo = (props) => {
  const [open, setOpen] = React.useState(false);
  const [message, setMessage] = React.useState(undefined);
  const [messages, setMessages] = React.useState([]);
  // close on 'escape key'
  React.useEffect(() => {
    const onEsc = (e) => {
      if (e.key === 'Escape') {
        setOpen(false);
      }
    };
    window.addEventListener('keydown', onEsc);
    return () => {
      window.removeEventListener('keydown', onEsc);
    };
  }, []);
  React.useEffect(() => {
    if (messages.length && !message) {
      // Set a new snack when we don't have an active one
      setMessage({ ...messages[0] });
      setMessages((prev) => prev.slice(1));
      setOpen(true);
    } else if (messages.length && message && open) {
      // Close an active snack when a new one is added
      setOpen(false);
    }
  }, [messages, message, open]);
  const handleClick = (message) => (e) => {
    setMessages((prev) => [...prev, { text: message, key: new Date().getTime() }]);
  };
  return (
    <>
      <Button onClick={handleClick(MESSAGE_SAMPLE[0])}>FIRST MESSAGE</Button>
      <Button onClick={handleClick(MESSAGE_SAMPLE[1])}>SECOND MESSAGE</Button>
      <Button onClick={handleClick(MESSAGE_SAMPLE[2])}>THIRD MESSAGE</Button>
      {message && (
        <Snackbar
          key={message.key}
          open={open}
          onClose={() => {
            setOpen(false);
          }}
          onExited={() => {
            setMessage(undefined);
          }}
          {...props}
        >
          <SnackbarContent>{message.text}</SnackbarContent>
        </Snackbar>
      )}
    </>
  );
};
export default SnackbarMultipleDemo;
/** END Multiple Snackbar Demo Code **/