Line data    Source code

       1              : import * as React from 'react';
       2              : import { attachLandingBackdrop, type LandingBackdrop as Backdrop, type LandingBackdropOptions } from '@ankoh/dashql-ui/landing_backdrop/landing_backdrop';
       3              : 
       4              : import * as styles from './landing_backdrop_page.module.css';
       5              : 
       6              : /// The backdrop in a React tree on the background of the app
       7            0 : export function LandingBackdrop(props: LandingBackdropOptions): React.ReactElement {
       8            0 :     const { brand, motion, dots, particles } = props;
       9            0 :     const hostRef = React.useRef<HTMLDivElement>(null);
      10            0 :     const backdropRef = React.useRef<Backdrop | null>(null);
      11            0 :     const latest = React.useRef(props);
      12            0 :     latest.current = props;
      13              : 
      14            0 :     React.useEffect(() => {
      15            0 :         if (hostRef.current == null) return;
      16            0 :         const backdrop = attachLandingBackdrop(hostRef.current, latest.current);
      17            0 :         backdropRef.current = backdrop;
      18            0 :         return () => {
      19            0 :             backdropRef.current = null;
      20            0 :             backdrop.dispose();
      21            0 :         };
      22            0 :     }, [brand, motion, dots, particles]);
      23              : 
      24            0 :     React.useEffect(() => { backdropRef.current?.update(props); });
      25              : 
      26            0 :     return <div ref={hostRef} className={styles.host} aria-hidden="true" />;
      27            0 : }