@blocklet/payment-react/es/components/collapse.js

Reusable react components for payment kit v2

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { ExpandLessOutlined, ExpandMoreOutlined } from "@mui/icons-material";
import { Box, Collapse, Stack } from "@mui/material";
import { useEffect, useState } from "react";
export default function IconCollapse(rawProps) {
  const props = Object.assign(
    {
      value: "",
      onChange: () => {
      },
      children: null,
      expanded: false,
      addons: null,
      style: {},
      lazy: true,
      card: false
    },
    rawProps
  );
  const [expanded, setExpanded] = useState(props.expanded || false);
  const toggleExpanded = () => {
    const newExpanded = !expanded;
    setExpanded(newExpanded);
  };
  useEffect(() => {
    setExpanded(props.expanded || false);
  }, [props.expanded]);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      Stack,
      {
        direction: "row",
        onClick: (e) => {
          e.stopPropagation();
          props.onChange?.(props.value || "", !expanded);
          toggleExpanded();
        },
        sx: {
          alignItems: "center",
          justifyContent: "space-between",
          width: 1,
          cursor: "pointer",
          fontWeight: 500,
          color: "text.primary",
          "& :hover": { color: "primary.main" },
          ...props.card && {
            borderRadius: 1,
            padding: 1,
            pl: 2,
            backgroundColor: "grey.100"
          },
          ...props.style
        },
        children: [
          /* @__PURE__ */ jsx(Box, { children: typeof props.trigger === "function" ? props.trigger(expanded) : props.trigger }),
          /* @__PURE__ */ jsxs(
            Stack,
            {
              direction: "row",
              spacing: 2,
              sx: {
                alignItems: "center"
              },
              children: [
                props.addons,
                " ",
                expanded ? /* @__PURE__ */ jsx(ExpandLessOutlined, {}) : /* @__PURE__ */ jsx(ExpandMoreOutlined, {})
              ]
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ jsx(Collapse, { in: expanded, sx: { width: "100%" }, children: expanded || props.lazy ? props.children : null })
  ] });
}