refactor: simplify collapsible-panel

experiment-station · Dec 15, 2023 · 45c9238 · 45c9238
1 parent 56d89ca
commit 45c9238
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 103 deletions.
diff --git a/components/ui/client-only.tsx b/components/ui/client-only.tsx
diff --git a/components/ui/collapsible-panel.stories.tsx b/components/ui/collapsible-panel.stories.tsx
@@ -1,50 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { FAKE_EPISODE_SUMMARY } from '@/lib/fixtures/fake-episode-summary';
-import { Button, Flex } from '@radix-ui/themes';
-import { useState } from 'react';
 
 import { CollapsiblePanel } from './collapsible-panel';
 
-export const Controlled: StoryObj<typeof CollapsiblePanel> = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks -- storybook
-    const [open, setOpen] = useState(false);
-    // eslint-disable-next-line react-hooks/rules-of-hooks -- storybook
-    const [content, setContent] = useState(FAKE_EPISODE_SUMMARY);
-
-    return (
-      <Flex direction="column" gap="2">
-        <Flex direction="row" gap="1">
-          <Button
-            highContrast
-            onClick={() => {
-              setOpen((o) => !o);
-            }}
-            size="1"
-          >
-            {open ? 'Shrink' : 'Expand'} content
-          </Button>
-
-          <Button
-            highContrast
-            onClick={() => {
-              setContent((c) => c + FAKE_EPISODE_SUMMARY);
-            }}
-            size="1"
-          >
-            Add more content
-          </Button>
-        </Flex>
-
-        <CollapsiblePanel open={open} title="Controlled">
-          {content}
-        </CollapsiblePanel>
-      </Flex>
-    );
-  },
-};
-
 export const Uncontrolled: StoryObj<typeof CollapsiblePanel> = {
   render: () => (
     <CollapsiblePanel title="Uncontrolled">

diff --git a/components/ui/collapsible-panel.tsx b/components/ui/collapsible-panel.tsx
@@ -6,20 +6,21 @@ import { Box, Card, Flex, Heading, IconButton, Text } from '@radix-ui/themes';
 import { useEffect, useRef, useState } from 'react';
 import { CgClose, CgExpand } from 'react-icons/cg';
 
-import { withClientOnly } from './client-only';
 import styles from './collapsible-panel.module.css';
 
 type Props = PropsWithChildren<{
   height?: number;
-  open?: boolean;
   title: ReactNode;
 }>;
 
-function _CollapsiblePanel({ children, height = 60, ...props }: Props) {
+export function CollapsiblePanel({ children, height = 60, ...props }: Props) {
   const contentRef = useRef<HTMLDivElement | null>(null);
-  const controlledRef = useRef(typeof props.open === 'boolean');
-  const [isHeightCalculated, setIsHeightCalculated] = useState(false);
-  const [open, setOpen] = useState(controlledRef.current ? props.open : false);
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   useEffect(() => {
     if (contentRef.current) {
@@ -29,33 +30,23 @@ function _CollapsiblePanel({ children, height = 60, ...props }: Props) {
         '--max-height',
         `${contentRef.current.scrollHeight}px`,
       );
-
-      setIsHeightCalculated(true);
     }
   }, [height, children]);
 
-  useEffect(() => {
-    if (typeof props.open === 'boolean') {
-      setOpen(props.open);
-    }
-  }, [open, props.open]);
-
   return (
     <Card className={styles.Container}>
-      {controlledRef.current ? null : (
-        <Flex m="2" position="absolute" right="0" top="0">
-          <IconButton
-            onClick={() => {
-              setOpen((o) => !o);
-            }}
-            size="1"
-            tabIndex={-1}
-            variant="ghost"
-          >
-            {open ? <CgClose /> : <CgExpand />}
-          </IconButton>
-        </Flex>
-      )}
+      <Flex m="2" position="absolute" right="0" top="0">
+        <IconButton
+          onClick={() => {
+            setOpen((o) => !o);
+          }}
+          size="1"
+          tabIndex={-1}
+          variant="ghost"
+        >
+          {open ? <CgClose /> : <CgExpand />}
+        </IconButton>
+      </Flex>
 
       <Heading mb="2" size="2">
         {props.title}
@@ -65,9 +56,13 @@ function _CollapsiblePanel({ children, height = 60, ...props }: Props) {
         className={styles.Content}
         data-state={open ? 'open' : 'closed'}
         ref={contentRef}
-        style={{
-          visibility: isHeightCalculated ? 'visible' : 'hidden',
-        }}
+        style={
+          mounted
+            ? {}
+            : {
+                maxHeight: `${height}px`,
+              }
+        }
       >
         <Text color="gray" size="2">
           {children}
@@ -76,5 +71,3 @@ function _CollapsiblePanel({ children, height = 60, ...props }: Props) {
     </Card>
   );
 }
-
-export const CollapsiblePanel = withClientOnly(_CollapsiblePanel);