Blame · Collapsable.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import {Icon} from 'isl-components/Icon';
b69ab31	9	import {useState} from 'react';
b69ab31	10	import './Collapsable.css';
b69ab31	11
b69ab31	12	export function Collapsable({
b69ab31	13	startExpanded,
b69ab31	14	children,
b69ab31	15	title,
b69ab31	16	className,
b69ab31	17	onToggle,
b69ab31	18	}: {
b69ab31	19	startExpanded?: boolean;
b69ab31	20	children: React.ReactNode;
b69ab31	21	title: React.ReactNode;
b69ab31	22	className?: string;
b69ab31	23	onToggle?: (expanded: boolean) => unknown;
b69ab31	24	}) {
b69ab31	25	const [isExpanded, setIsExpanded] = useState(startExpanded === true);
b69ab31	26	return (
b69ab31	27	<div className={'collapsable' + (className ? ` ${className}` : '')}>
b69ab31	28	<div
b69ab31	29	className="collapsable-title"
b69ab31	30	onClick={() => {
b69ab31	31	const newState = !isExpanded;
b69ab31	32	setIsExpanded(newState);
b69ab31	33	onToggle?.(newState);
b69ab31	34	}}>
b69ab31	35	<Icon icon={isExpanded ? 'chevron-down' : 'chevron-right'} /> {title}
b69ab31	36	</div>
b69ab31	37	{isExpanded ? <div className="collapsable-contents">{children}</div> : null}
b69ab31	38	</div>
b69ab31	39	);
b69ab31	40	}