go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/nodes/static/_nextjs/src/components/expandCollapse.tsx (about)

     1  /**
     2   * Copyright (c) 2024 - Present. Will Charczuk. All rights reserved.
     3   * Use of this source code is governed by a MIT license that can be found in the LICENSE file at the root of the repository.
     4   */
     5  import { Button, Collapse, Icon } from "@blueprintjs/core";
     6  import { useEffect, useState } from "react";
     7  
     8  export interface ExpandCollapseProps {
     9    isOpen?: boolean;
    10    title?: string;
    11    onToggle?: (isOpen: boolean) => void;
    12    children: React.ReactNode;
    13  }
    14  
    15  export function ExpandCollapse(props: ExpandCollapseProps) {
    16    const [isOpen, setIsOpen] = useState<boolean>(props.isOpen !== undefined ? props.isOpen : false)
    17  
    18    useEffect(() => {
    19      if (props.isOpen !== undefined) {
    20        setIsOpen(props.isOpen)
    21      }
    22    }, [props.isOpen])
    23  
    24    const onClick = () => {
    25      setIsOpen(!isOpen)
    26      if (props.onToggle) {
    27        props.onToggle(!isOpen)
    28      }
    29    }
    30  
    31    return (
    32      <div className="expand-collapse">
    33        <Button className="expand-collapse-button" onClick={onClick} icon={isOpen ? "chevron-up" : "chevron-down"} minimal={true}>{props.title !== undefined && (<span className="expand-collapse-title">{props.title}</span>)}</Button>
    34        <Collapse isOpen={isOpen} className="expand-collapse-content">
    35          {props.children}
    36        </Collapse>
    37      </div>
    38    )
    39  }