Sha256: 61fa8c422a1b734a035f4fc36408bec53d0c7040471cbd629dac5799b34ca3fb
Contents?: true
Size: 1.26 KB
Versions: 124
Compression:
Stored size: 1.26 KB
Contents
import classnames from 'classnames'
import React, { useContext, useRef, useEffect } from 'react'
import { buildCss } from '../../utilities/props'
import { globalProps } from '../../utilities/globalProps'
import { hideElement, showElement } from '../_helper_functions'
import CollapsibleContext from '../context'
export type CollapsibleContentProps = {
children?: React.ReactNode[] | React.ReactNode | string,
className?: string,
}
const CollapsibleContent = ({
children,
className,
...props
}: CollapsibleContentProps) => {
const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
const contentCSS = buildCss('pb_collapsible_content_kit')
const contentSpacing = globalProps(props)
const contentRef = useRef(null);
useEffect(() => {
// Use the showElement and hideElement functions based on the context value
if (contentRef.current) {
if (context.collapsed) {
hideElement(contentRef.current);
} else {
showElement(contentRef.current);
}
}
}, [context.collapsed]);
return (
<div ref={contentRef}
data-collapsible-content="true"
className={classnames(contentCSS, contentSpacing, "toggle-content", className)}>
{children}
</div>
)
}
export default CollapsibleContent
Version data entries
124 entries across 124 versions & 1 rubygems