@wq/material-web/components/ExpandableListItem.js

Web bindings for @wq/material

import React, { useState } from "react";
import { useComponents } from "@wq/react";
import { Collapse } from "@mui/material";
import PropTypes from "prop-types";
export default function ExpandableListItem({
    children,
    open,
    onToggle,
    ...rest
}) {
    const [summary, ...details] = React.Children.toArray(children),
        [internalOpen, setOpen] = useState(false),
        { ListItem, IconButton } = useComponents();
    let toggleOpen;
    if (open === false || open || onToggle) {
        toggleOpen = () => onToggle(!open);
    } else {
        open = internalOpen;
        toggleOpen = () => setOpen(!open);
    }
    return /*#__PURE__*/ React.createElement(
        React.Fragment,
        null,
        /*#__PURE__*/ React.createElement(
            ListItem,
            {
                button: true,
                onClick: toggleOpen,
                secondaryAction: /*#__PURE__*/ React.createElement(IconButton, {
                    icon: open ? "collapse" : "expand",
                    onClick: toggleOpen,
                }),
                ...rest,
            },
            summary
        ),
        /*#__PURE__*/ React.createElement(
            Collapse,
            {
                in: open,
                timeout: "auto",
            },
            details
        )
    );
}
ExpandableListItem.propTypes = {
    children: PropTypes.node,
    open: PropTypes.bool,
    onToggle: PropTypes.func,
};