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

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = IconCollapse;
var _jsxRuntime = require("react/jsx-runtime");
var _iconsMaterial = require("@mui/icons-material");
var _material = require("@mui/material");
var _react = require("react");
function IconCollapse(rawProps) {
  const props = Object.assign({
    value: "",
    onChange: () => {},
    children: null,
    expanded: false,
    addons: null,
    style: {},
    lazy: true,
    card: false
  }, rawProps);
  const [expanded, setExpanded] = (0, _react.useState)(props.expanded || false);
  const toggleExpanded = () => {
    const newExpanded = !expanded;
    setExpanded(newExpanded);
  };
  (0, _react.useEffect)(() => {
    setExpanded(props.expanded || false);
  }, [props.expanded]);
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Box, {
        children: typeof props.trigger === "function" ? props.trigger(expanded) : props.trigger
      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: "row",
        spacing: 2,
        sx: {
          alignItems: "center"
        },
        children: [props.addons, " ", expanded ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ExpandLessOutlined, {}) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ExpandMoreOutlined, {})]
      })]
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Collapse, {
      in: expanded,
      sx: {
        width: "100%"
      },
      children: expanded || props.lazy ? props.children : null
    })]
  });
}