packages/testing/lib/mockSpotlight.tsx

   1 import type { MouseEventHandler, PropsWithChildren, ReactElement } from 'react';
   2 import { Children, useEffect } from 'react';
   3
   4 import type { SpotlightProps } from '@proton/components';
   5
   6 /**
   7  * Raw spotlight used as a mock for testing
   8  */
   9 export const SpotlightMock = ({ children, show, content, onClose, onDisplayed }: PropsWithChildren<SpotlightProps>) => {
  10     const child = Children.only(children) as ReactElement;
  11
  12     const handleClose: MouseEventHandler = (event) => {
  13         onClose?.(event);
  14     };
  15
  16     useEffect(() => {
  17         if (show) {
  18             onDisplayed?.();
  19         }
  20     }, [show]);
  21
  22     return (
  23         <>
  24             {child}
  25             <div className="spotlight">
  26                 <div>{content}</div>
  27                 <button title={'Close'} className="spotlight-close" onClick={handleClose}>
  28                     {'Close'}
  29                 </button>
  30             </div>
  31         </>
  32     );
  33 };