40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import React, { useState, useCallback } from "react";
|
|
import Button, { ButtonType } from "./Button";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
interface ExpandoProps {
|
|
name: string;
|
|
title: JSX.Element;
|
|
children: JSX.Element;
|
|
error: string;
|
|
}
|
|
|
|
const Expando: React.FC<ExpandoProps> = ({ title, children }) => {
|
|
const [expanded, setExpanded] = useState(false);
|
|
|
|
const open = useCallback(() => setExpanded(true), []);
|
|
const close = useCallback(() => setExpanded(false), []);
|
|
|
|
return (
|
|
<div>
|
|
{!expanded && (
|
|
<Button buttonType={ButtonType.secondary} onClick={open}>
|
|
{title} <FontAwesomeIcon icon={faCaretDown} />
|
|
</Button>
|
|
)}
|
|
|
|
{expanded && (
|
|
<div>
|
|
<Button buttonType={ButtonType.secondary} onClick={close}>
|
|
{title} <FontAwesomeIcon icon={faCaretUp} />
|
|
</Button>
|
|
{children}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Expando;
|