@devgateway/dvz-ui-react/dist/esm/embeddable/download/index.js

A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.

import { jsx as t, jsxs as c } from "react/jsx-runtime";
import H, { useRef as B, useState as _, useEffect as K } from "react";
import { Container as x, Grid as P, Button as O, Dropdown as g, Icon as Q } from "semantic-ui-react";
import { PostContent as L } from "@devgateway/wp-react-lib";
import { domtoimage as C } from "./dom-to-image.js";
import { saveAs as R } from "file-saver";
import { connect as V } from "react-redux";
const X = H.forwardRef((r, a) => /* @__PURE__ */ t("div", { ref: a, children: r.children })), Y = (r) => {
  const a = B();
  let {
    childContent: h,
    "data-height": te,
    "data-button-label": T,
    "data-png-label": U,
    "data-jpg-label": J,
    "data-jpg-text": S,
    "data-png-text": j,
    "data-check-png": G = "true",
    "data-check-jpg": k = "true",
    "data-title": q,
    "data-default-format": w = "PNG",
    "data-use-title": N = "false",
    "data-style": F = "heavy",
    "data-section-title": $ = "",
    "data-download-tooltip": A = "",
    "data-include-source-url": E = "false",
    "data-source-urlmargin-left": I = 70,
    "data-source-urlmargin-top": W = 10,
    "data-source-urlfont-size": z = 18,
    parent: ne,
    editing: i,
    component: oe,
    unique: ae,
    pageModuleProps: s
  } = r;
  const [p, m] = _(w), d = G == "true" || G === !0, u = k == "true" || k === !0;
  K(() => {
    m(w);
  }, [w]);
  const v = (n) => {
    m(n.target.value);
  };
  function M(n) {
    const o = n.attributes, y = [];
    if (o)
      for (let l = 0; l < o.length; l++)
        y.push(o[l].nodeName);
    const e = y.filter((l) => l.startsWith("data-"));
    return e.length > 0 && e.forEach((l) => {
      n.setAttribute(l, "");
    }), n.classList ? !n.classList.contains("ignore") : !0;
  }
  const f = { filter: M, bgcolor: "#FFF" }, D = (n) => {
    C.cloneNode(a.current).then(function(o) {
      if ([...o.getElementsByTagName("input")].forEach((e) => e.remove()), [...o.querySelectorAll(".question.circle.icon")].forEach((e) => e.remove()), E === "true") {
        const e = document.createElement("div");
        e.style.marginLeft = I + "px", e.style.marginTop = W + "px", e.style.fontSize = z + "px", e.style.fontFamily = "Roboto, sans-serif", e.style.fontWeight = "400", e.style.color = "#66676d", e.style.opacity = "0.75", e.innerHTML = window.location.href, e.style.maxWidth = "90%", e.style.wordWrap = "break-word", e.style.overflowWrap = "break-word", o.appendChild(e);
      }
      f.height = a.current.scrollHeight + 90, f.width = a.current.scrollWidth + 30, o.style.padding = "20px", n === "PNG" && C.toPng(o, f).then(function(e) {
        R(e, U);
      }), n === "JPG" && C.toJpeg(o, f).then(function(e) {
        R(e, J);
      });
    });
  }, b = (n) => {
    i ? alert("Not allowed when editing please preview page") : D(n);
  };
  return /* @__PURE__ */ t(
    x,
    {
      className: `viz download ${F} ${N ? "has-title" : ""}
        ${d || u ? "has-formats" : ""}
        ${i || s != null && s.editing ? "editing" : ""}
        ${d && u ? "multi-format" : ""}
        ${d && !u || !d && u ? "single-format" : ""}`,
      fluid: !0,
      children: /* @__PURE__ */ c(X, { ref: a, children: [
        /* @__PURE__ */ c(P, { stackable: !0, reversed: "mobile", className: "download-header", children: [
          !i && N === "true" && /* @__PURE__ */ t(P.Column, { width: 12, children: /* @__PURE__ */ t(
            L,
            {
              parentUnique: r.unique,
              post: { content: { rendered: decodeURIComponent($) } }
            }
          ) }),
          /* @__PURE__ */ t(
            P.Column,
            {
              className: i ? "editing ignore" : "ignore",
              width: i || N !== "true" ? 16 : 4,
              textAlign: "right",
              children: /* @__PURE__ */ c("div", { className: "wrapper", children: [
                /* @__PURE__ */ c(O, { className: "download", onClick: () => b(p), children: [
                  T,
                  " ",
                  p === "PNG" ? "PNG" : "JPG"
                ] }),
                /* @__PURE__ */ t(
                  g,
                  {
                    className: "download",
                    "data-tooltip": decodeURIComponent(A),
                    trigger: u && d ? /* @__PURE__ */ t(Q, { name: "download", className: "download-icon" }) : null,
                    children: /* @__PURE__ */ c(g.Menu, { children: [
                      q,
                      d === !0 && /* @__PURE__ */ c(g.Item, { onClick: () => {
                        m("PNG"), b("PNG");
                      }, children: [
                        /* @__PURE__ */ t("input", { type: "radio", value: "PNG", checked: p === "PNG", onChange: v }),
                        /* @__PURE__ */ t("label", { children: j })
                      ] }),
                      u === !0 && /* @__PURE__ */ c(g.Item, { onClick: () => {
                        m("JPG"), b("JPG");
                      }, children: [
                        /* @__PURE__ */ t("input", { type: "radio", value: "JPG", checked: p === "JPG", onChange: v }),
                        /* @__PURE__ */ t("label", { children: S })
                      ] })
                    ] })
                  }
                )
              ] })
            }
          )
        ] }),
        !i && /* @__PURE__ */ t(x, { fluid: !0, className: `download area ${i || s != null && s.editing ? "editing" : ""}`, children: /* @__PURE__ */ t(
          L,
          {
            parentUnique: r.unique,
            post: { content: { rendered: h } }
          }
        ) })
      ] })
    }
  );
}, Z = (r) => {
  const a = r.getIn(["data", "pageModuleProps"]), h = {};
  return a && (h.pageModuleProps = a), h;
}, ee = {}, he = V(Z, ee)(Y);
export {
  he as default
};