added a new example in sb for improve collapsible component #528

rad-ui · Dec 24, 2024 · 8e68c62 · 8e68c62
1 parent c775e09
commit 8e68c62
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 72 deletions.
diff --git a/src/components/ui/Collapsible/Collapsible.tsx b/src/components/ui/Collapsible/Collapsible.tsx
@@ -27,7 +27,7 @@ export type CollapsibleProps = {
   trigger?: ReactNode;
   items: { content: string | ReactNode }[];
   disabled?: boolean;
-  defaultOpen?: { content: string | ReactNode };
+  defaultPos?: number;
   onOpenChange?: Dispatch<SetStateAction<boolean>>;
 } & PropsWithChildren;
 
@@ -43,7 +43,9 @@ const Collapsible = ({ children, items, ...props }: CollapsibleProps) => {
   const title = props.title;
 
   // Default Value to show
-  const defaultOpen = props.defaultOpen;
+  const defaultPos = props.defaultPos;
+
+
 
   // Onclick Handler
 
@@ -71,15 +73,15 @@ const Collapsible = ({ children, items, ...props }: CollapsibleProps) => {
       ) : (
         <>
           {/* Default value to be shown */}
-          {defaultOpen && (
-            <CollapsibleItem>{defaultOpen.content}</CollapsibleItem>
-          )}
+          {defaultPos!=undefined ? items[defaultPos] && (
+            <CollapsibleItem>{items[defaultPos].content}</CollapsibleItem>
+          ) : null}
           {/* Collapsable Content  */}
-          <CollapsibleContent state={props.open ?? open}>
+          <CollapsibleContent>
             {items.map((item, index) => (
-              item !== defaultOpen && (
+              defaultPos!=undefined? item !== items[defaultPos] && (
                 <CollapsibleItem key={index}>{item.content}</CollapsibleItem>
-              )
+              ) : <CollapsibleItem key={index}>{item.content}</CollapsibleItem>
             ))}
           </CollapsibleContent>
         </>

diff --git a/src/components/ui/Collapsible/fragments/CollapsibleContent.tsx b/src/components/ui/Collapsible/fragments/CollapsibleContent.tsx
@@ -5,20 +5,20 @@ import { CollapsibleContext } from '../contexts/CollapsibleContext';
 type CollapsibleContentProps = {
     children: React.ReactNode;
     className?: string;
-    state: boolean
+
 }
 
-const CollapsibleContent: React.FC<CollapsibleContentProps> = ({children,className='',state}:CollapsibleContentProps) => {
+const CollapsibleContent: React.FC<CollapsibleContentProps> = ({children,className=''}:CollapsibleContentProps) => {
 
-    const {rootClass} = useContext(CollapsibleContext)
+    const {rootClass,open} = useContext(CollapsibleContext)
 
     return (
       <div
         className={clsx(`${rootClass}-content`, className)}
-        aria-hidden={!state}
-        data-state={state? "expanded" : "collapsed"}
+        aria-hidden={!open}
+        data-state={open? "expanded" : "collapsed"}
       >
-        {state && children}
+        {open && children}
       </div>
     );
 }

diff --git a/src/components/ui/Collapsible/fragments/CollapsibleTrigger.tsx b/src/components/ui/Collapsible/fragments/CollapsibleTrigger.tsx
@@ -14,42 +14,6 @@ type CollapsibleTriggerProps = {
     index?: number
 }
 
-// Icons
-  const ExpandIcon = () => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="size-6"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
-      />
-    </svg>
-  );
-
-  const CollapseIcon = () => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="size-6"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"
-      />
-    </svg>
-  );
-
-
 
 const CollapsibleTrigger = ({children,className, ...props}: CollapsibleTriggerProps) => {
     const {rootClass,open,onOpenChange,disabled} = useContext(CollapsibleContext)

diff --git a/src/components/ui/Collapsible/stories/Collapsible.stories.tsx b/src/components/ui/Collapsible/stories/Collapsible.stories.tsx
@@ -3,6 +3,11 @@ import React, { useState } from "react";
 import SandboxEditor from "~/components/tools/SandboxEditor/SandboxEditor";
 import Collapsible from "~/components/ui/Collapsible/Collapsible";
 import Button from "../../Button/Button";
+import CollapsibleContent from "../fragments/CollapsibleContent";
+import CollapsibleHeader from "../fragments/CollapsibleHeader";
+import CollapsibleItem from "../fragments/CollapsibleItem";
+import CollapsibleRoot from "../fragments/CollapsibleRoot";
+import CollapsibleTrigger from "../fragments/CollapsibleTrigger";
 
 const Items = [
   {
@@ -58,7 +63,7 @@ export const ExternalTrigger = () => {
           onOpenChange={setOpen}
           title="Quote"
           items={Items}
-          defaultOpen={Items[0]}
+          defaultPos={0}
           trigger={
             <Button  style={{ margin: "0" }}>
               {open ? "CLOSE" : "OPEN"}
@@ -69,3 +74,24 @@ export const ExternalTrigger = () => {
     </section>
   );
 };
+
+
+export const CustomTrigger = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <section>
+      <SandboxEditor className="">
+        <CollapsibleRoot open={open} onOpenChange={setOpen}>
+          <CollapsibleHeader title="Composable">
+            <CollapsibleTrigger>
+              <Button style={{ margin: "0" }}>{open ? "CLOSE" : "OPEN"}</Button>
+            </CollapsibleTrigger>
+          </CollapsibleHeader>
+          <CollapsibleItem>{Items[0].content}</CollapsibleItem>
+          <CollapsibleContent>{Items.map((item) => item != Items[0] && <CollapsibleItem>{item.content}</CollapsibleItem>)}</CollapsibleContent>
+        </CollapsibleRoot>
+      </SandboxEditor>
+    </section>
+  );
+}
diff --git a/src/components/ui/Collapsible/tests/Collapsible.test.tsx b/src/components/ui/Collapsible/tests/Collapsible.test.tsx
@@ -2,7 +2,6 @@ import { fireEvent, render } from "@testing-library/react";
 import React from "react";
 import Collapsible from "../Collapsible";
 
-import CollapsibleContent from "../fragments/CollapsibleContent";
 import CollapsibleHeader from "../fragments/CollapsibleHeader";
 import CollapsibleItem from "../fragments/CollapsibleItem";
 import CollapsibleTrigger from "../fragments/CollapsibleTrigger";
@@ -56,7 +55,7 @@ describe("Collapsible Component", () => {
 
     it("renders default open content when provided", () => {
         const { getByText } = render(
-            <Collapsible defaultOpen={{ content: "Default Item" }} items={[{ content: "Item 1" }]} />
+            <Collapsible defaultPos={0} items={[{ content: "Default Item" }]} />
         );
         expect(getByText("Default Item")).toBeInTheDocument();
     });
@@ -85,25 +84,6 @@ describe("CollapsibleTrigger Component", () => {
     });
 });
 
-describe("CollapsibleContent Component", () => {
-    it("renders children when open", () => {
-        const { getByText } = render(
-            <CollapsibleContent state={true}>
-                <div>Content</div>
-            </CollapsibleContent>
-        );
-        expect(getByText("Content")).toBeInTheDocument();
-    });
-
-    it("does not render children when closed", () => {
-        const { queryByText } = render(
-            <CollapsibleContent state={false}>
-                <div>Content</div>
-            </CollapsibleContent>
-        );
-        expect(queryByText("Content")).not.toBeInTheDocument();
-    });
-});
 
 describe("CollapsibleItem Component", () => {
     it("renders item content", () => {