packages/components/containers/layout/SubSettingsSection.tsx

   1 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
   2 import { useEffect, useRef } from 'react';
   3 import { Link } from 'react-router-dom';
   4
   5 import { c } from 'ttag';
   6
   7 import Icon from '@proton/components/components/icon/Icon';
   8 import ProtonBadge from '@proton/components/components/protonBadge/ProtonBadge';
   9 import SettingsSectionTitle from '@proton/components/containers/account/SettingsSectionTitle';
  10 import useNotifications from '@proton/components/hooks/useNotifications';
  11 import { textToClipboard } from '@proton/shared/lib/helpers/browser';
  12 import clsx from '@proton/utils/clsx';
  13
  14 export interface SubSettingsSectionProps extends ComponentPropsWithoutRef<'div'> {
  15     id: string;
  16     className?: string;
  17     observer?: IntersectionObserver;
  18     title?: string;
  19     beta?: boolean;
  20     children: ReactNode;
  21 }
  22
  23 const SubSettingsSection = ({ id, observer, title, beta, children, className, ...rest }: SubSettingsSectionProps) => {
  24     const ref = useRef<HTMLDivElement>(null);
  25     const { createNotification } = useNotifications();
  26
  27     useEffect(() => {
  28         const el = ref.current;
  29         if (!observer || !el) {
  30             return;
  31         }
  32         observer.observe(el);
  33         return () => {
  34             observer.unobserve(el);
  35         };
  36     }, [observer, ref.current]);
  37
  38     const handleLinkClick = () => {
  39         const hash = document.location.hash;
  40         const dehashedHref = document.location.href.replace(hash, '');
  41
  42         const urlToCopy = `${dehashedHref}#${id}`;
  43         textToClipboard(urlToCopy);
  44
  45         createNotification({
  46             text: c('Info').t`Link copied to clipboard`,
  47         });
  48     };
  49
  50     return (
  51         <>
  52             <div className="relative">
  53                 <div id={id} className="header-height-anchor" />
  54             </div>
  55             <section
  56                 {...rest}
  57                 id={id}
  58                 ref={ref}
  59                 data-target-id={id}
  60                 className={clsx([className, 'sub-settings-section'])}
  61             >
  62                 {title && (
  63                     <SettingsSectionTitle className="group-hover-opacity-container relative">
  64                         <Link
  65                             to={`#${id}`}
  66                             onClick={handleLinkClick}
  67                             className="sub-settings-section-anchor absolute group-hover:opacity-100"
  68                             aria-hidden="true"
  69                             tabIndex={-1}
  70                         >
  71                             <Icon name="link" />
  72                         </Link>
  73                         {title}
  74                         {beta && (
  75                             <ProtonBadge
  76                                 className="align-middle"
  77                                 text={c('Info').t`Beta`}
  78                                 tooltipText={c('Tooltip').t`Feature in early access`}
  79                             />
  80                         )}
  81                     </SettingsSectionTitle>
  82                 )}
  83                 {children}
  84             </section>
  85         </>
  86     );
  87 };
  88
  89 export default SubSettingsSection;