packages/pass/components/Form/legacy/TextAreaReadonly.tsx

   1 import type { FC } from 'react';
   2 import { useLayoutEffect, useRef, useState } from 'react';
   3
   4 import clsx from '@proton/utils/clsx';
   5
   6 type Props = { children: string; className?: string };
   7
   8 export const TextAreaReadonly: FC<Props> = ({ children, className }) => {
   9     const [height, setHeight] = useState(0);
  10     const ref = useRef<HTMLTextAreaElement>(null);
  11
  12     useLayoutEffect(() => {
  13         if (ref.current) setHeight(ref.current.scrollHeight);
  14     }, [children]);
  15
  16     return (
  17         <textarea
  18             ref={ref}
  19             readOnly
  20             value={children}
  21             className={clsx('w-full h-full text-pre-wrap resize-none h-custom', className)}
  22             style={{ '--h-custom': `${height}px`, opacity: 1 }}
  23         />
  24     );
  25 };