@docyrus/react-collapsible
Version:
docy-collapsible component for react
56 lines (55 loc) • 2.6 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
import { cn } from "../lib/utils";
const DEFAULT_ANIMATION_DURATION = 200;
const DEFAULT_ORIENTATION = "vertical";
const DocyCollapsibleTrigger = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ _jsx(CollapsiblePrimitive.Trigger, {
ref: ref,
className: cn("cursor-pointer transition-all", className),
...props
}));
DocyCollapsibleTrigger.displayName = "DocyCollapsibleTrigger";
const DocyCollapsibleContent = /*#__PURE__*/ React.forwardRef(({ className, animationDuration = DEFAULT_ANIMATION_DURATION, orientation: _orientation = DEFAULT_ORIENTATION, style, ...props }, ref)=>{
// Note: Radix Collapsible only supports vertical orientation
// The orientation prop is kept for API consistency but has no effect
return /*#__PURE__*/ _jsx(CollapsiblePrimitive.Content, {
ref: ref,
className: cn("overflow-hidden transition-all", className),
style: {
transitionDuration: `${animationDuration}ms`,
...style
},
...props
});
});
DocyCollapsibleContent.displayName = "DocyCollapsibleContent";
const DocyCollapsible = /*#__PURE__*/ React.forwardRef(({ children, trigger, open, defaultOpen = false, onOpenChange, disabled = false, animationDuration = DEFAULT_ANIMATION_DURATION, className, triggerClassName, contentClassName, orientation = DEFAULT_ORIENTATION, ...props }, ref)=>{
const triggerElement = /*#__PURE__*/ _jsx(DocyCollapsibleTrigger, {
className: triggerClassName,
children: /*#__PURE__*/ React.isValidElement(trigger) ? /*#__PURE__*/ React.cloneElement(trigger, {
className: cn(trigger.props.className, triggerClassName)
}) : trigger
});
return /*#__PURE__*/ _jsxs(CollapsiblePrimitive.Root, {
ref: ref,
open: open,
defaultOpen: defaultOpen,
onOpenChange: onOpenChange,
disabled: disabled,
className: cn("w-full", className),
...props,
children: [
triggerElement,
/*#__PURE__*/ _jsx(DocyCollapsibleContent, {
className: contentClassName,
animationDuration: animationDuration,
orientation: orientation,
children: children
})
]
});
});
DocyCollapsible.displayName = "DocyCollapsible";
export { DocyCollapsible, DocyCollapsibleTrigger, DocyCollapsibleContent, };