Expandable component

Author: mxschmitt

packages/html-reporter/src/links.tsx

@@ -69,6 +69,33 @@ export const ProjectLink: React.FunctionComponent<{
   </Link>;
 };
 
+export const Expandable: React.FunctionComponent<{
+  summary: React.ReactNode,
+  children: React.ReactNode,
+  className?: string,
+  style?: React.CSSProperties,
+}> = ({ summary, children, className, style }) => {
+  const [expanded, setExpanded] = React.useState(false);
+
+  const handleToggle = (e: React.SyntheticEvent<HTMLDetailsElement>) => {
+    setExpanded(e.currentTarget.open);
+  };
+
+  return (
+    <details
+      style={style}
+      className={className}
+      onToggle={handleToggle}
+    >
+      <summary style={{ cursor: 'pointer', listStyle: 'none', whiteSpace: 'nowrap', paddingLeft: 4 }}>
+        {expanded ? icons.downArrow() : icons.rightArrow()}
+        {summary}
+      </summary>
+      {children}
+    </details>
+  );
+};
+
 export const AttachmentLink: React.FunctionComponent<{
   attachment: TestAttachment,
   result: TestResult,
@@ -77,7 +104,6 @@ export const AttachmentLink: React.FunctionComponent<{
   openInNewTab?: boolean,
 }> = ({ attachment, result, href, linkName, openInNewTab }) => {
   const [flash, triggerFlash] = useFlash();
-  const [expanded, setExpanded] = React.useState(false);
   useAnchor('attachment-' + result.attachments.indexOf(attachment), triggerFlash);
 
   const summaryContent = (
@@ -117,20 +143,16 @@ export const AttachmentLink: React.FunctionComponent<{
   }
 
   return (
-    <details
+    <Expandable
       style={{ lineHeight: '32px' }}
       className={clsx(flash && 'flash')}
-      onToggle={e => setExpanded(e.currentTarget.open)}
+      summary={summaryContent}
     >
-      <summary style={{ cursor: 'pointer', listStyle: 'none', whiteSpace: 'nowrap', paddingLeft: 4 }}>
-        {expanded ? icons.downArrow() : icons.rightArrow()}
-        {summaryContent}
-      </summary>
       <div className='attachment-body'>
         <CopyToClipboard value={attachment.body!}/>
         {linkifyText(attachment.body!)}
       </div>
-    </details>
+    </Expandable>
   );
 };