@glodon-aiot/react-components/dist/es/ExpandablePannel/index.mjs

aiot react components

var _ = Object.defineProperty;
var I = Object.getOwnPropertySymbols;
var q = Object.prototype.hasOwnProperty, A = Object.prototype.propertyIsEnumerable;
var N = (t, n, o) => n in t ? _(t, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[n] = o, g = (t, n) => {
  for (var o in n || (n = {}))
    q.call(n, o) && N(t, o, n[o]);
  if (I)
    for (var o of I(n))
      A.call(n, o) && N(t, o, n[o]);
  return t;
};
import { jsxs as $, jsx as l } from "react/jsx-runtime";
import { useRef as w, useState as f, useEffect as z } from "react";
import "./style.less.mjs";
import { Iconfont as p } from "../Iconfont/index.mjs";
import { IconButton as E } from "../IconButton/index.mjs";
const U = (t) => {
  var M, k;
  const n = w(null), {
    className: o,
    headerClassName: c,
    style: j,
    visible: F,
    mode: a = "normal",
    header: m,
    icons: d = {
      collapseButton: /* @__PURE__ */ l(p, {
        type: "icon-yincang"
      }),
      expandButton: /* @__PURE__ */ l(p, {
        type: "icon-yincang"
      }),
      fullscreenButton: /* @__PURE__ */ l(p, {
        type: "icon-suofang"
      }),
      exitFullscreenButton: /* @__PURE__ */ l(p, {
        type: "icon-suofang"
      })
    },
    extraButtons: D = [],
    onNormalize: r,
    onMinimize: h,
    onMaximize: y
  } = t, [i, b] = f(a === "max"), [s, B] = f(a === "min"), v = w(null), [G, u] = f(a);
  z(() => {
    b(a === "max"), B(a === "min"), u(a);
  }, [a]);
  const T = () => {
    b(!i), u(i ? "normal" : "max"), i ? r && r() : y && y();
  }, C = () => {
    B(!s), u(s ? "normal" : "min"), s ? r && r() : h && h();
  };
  z(() => {
    v.current && i && (v.current.style.transform = "none");
  }, [i]);
  const x = (k = t.fullScreenContainer) != null ? k : (M = n.current) == null ? void 0 : M.parentElement, e = x == null ? void 0 : x.getBoundingClientRect(), P = {
    position: "fixed",
    top: e == null ? void 0 : e.y,
    left: e == null ? void 0 : e.x,
    width: s ? 0 : e == null ? void 0 : e.width,
    height: e == null ? void 0 : e.height
  };
  return /* @__PURE__ */ $("div", {
    className: "g-expandable-pannel-wrap",
    style: g({
      visibility: F !== !1 ? "visible" : "hidden",
      position: i && !s ? "absolute" : "unset"
    }, i ? P : null),
    ref: n,
    children: [!s && /* @__PURE__ */ $("div", {
      className: `g-expandable-pannel ${i ? "full" : ""} `,
      style: g({}, j),
      children: [m != null ? m : /* @__PURE__ */ l("div", {
        className: `g-expandable-pannel-header ${c != null ? c : ""}`,
        children: /* @__PURE__ */ l(E, {
          onClick: T,
          children: i ? d.exitFullscreenButton : d.fullscreenButton
        })
      }), /* @__PURE__ */ l("div", {
        className: "g-expandable-pannel-body",
        children: t.children
      })]
    }), /* @__PURE__ */ l("div", {
      className: `g-expandable-pannel-expand-bar ${s ? "collapsed" : "expaned"} ${c != null ? c : ""}`,
      children: /* @__PURE__ */ l(E, {
        onClick: C,
        children: s ? d.expandButton : d.collapseButton
      })
    })]
  });
};
export {
  U as ExpandablePannel
};