@devgateway/dvz-ui-react 1.8.2 → 1.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),w=require("react"),o=require("semantic-ui-react"),q=require("@devgateway/wp-react-lib"),j=require("./dom-to-image.js"),I=require("file-saver"),H=require("react-redux"),Q=w.forwardRef((s,a)=>t.jsx("div",{ref:a,children:s.children})),V=s=>{const a=w.useRef();let{childContent:b,"data-height":Y,"data-button-label":L,"data-png-label":S,"data-jpg-label":U,"data-jpg-text":E,"data-png-text":J,"data-check-png":C="true","data-check-jpg":G="true","data-title":T,"data-default-format":P="PNG","data-use-title":N="false","data-style":D="heavy","data-section-title":F="","data-download-tooltip":B="","data-include-source-url":y="false","data-include-filters":k="false","data-source-urlmargin-left":O=70,"data-source-urlmargin-top":R=10,"data-source-urlfont-size":v=18,parent:Z,editing:i,component:ee,unique:te,pageModuleProps:l}=s;const[A,h]=w.useState(P),[$,c]=w.useState(!1),d=C=="true"||C===!0,u=G=="true"||G===!0;w.useEffect(()=>{h(P)},[P]);function M(n){const r=n.attributes,g=[];if(r)for(let e=0;e<r.length;e++)g.push(r[e].nodeName);const f=g.filter(e=>e.startsWith("data-"));if(f.length>0&&f.forEach(e=>{n.setAttribute(e,"")}),n.classList){if(n.classList.contains("ignore"))return!1;if(!(k===!0||k==="true")){const x=["filter-component","data-filters-reset","data-filters-apply","filter-search"];for(const z of x)if(n.classList.contains(z))return!1}return!0}return!0}const p={filter:M,bgcolor:"#FFF",imagePlaceholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgQb9Z3kAAAAASUVORK5CYII=",cacheBust:!0},W=n=>{j.domtoimage.cloneNode(a.current).then(function(r){[...r.getElementsByTagName("input")].forEach(e=>e.remove()),[...r.querySelectorAll(".question.circle.icon")].forEach(e=>e.remove());const g=y==="true"||y===!0;if(g){const e=document.createElement("div");e.style.marginLeft=O+"px",e.style.marginTop=R+"px",e.style.fontSize=v+"px",e.style.fontFamily="Roboto, sans-serif",e.style.fontWeight="400",e.style.color="#66676d",e.style.opacity="0.75",e.textContent=window.location.href,e.style.maxWidth="90%",e.style.wordWrap="break-word",e.style.overflowWrap="break-word",r.appendChild(e)}const f=50;p.height=a.current.scrollHeight+f*2,g&&(p.height+=(Number.parseInt(R,10)||0)+(Number.parseInt(v,10)||0)*2),p.width=a.current.scrollWidth+f*2,r.style.padding=`${f}px`,n==="PNG"&&j.domtoimage.toPng(r,p).then(function(e){if(!e)throw new Error("PNG render returned empty result");return fetch(e).then(x=>x.blob())}).then(function(e){I.saveAs(e,S)}).catch(function(e){console.error("PNG download failed:",e)}),n==="JPG"&&j.domtoimage.toJpeg(r,p).then(function(e){if(!e)throw new Error("JPEG render returned empty result");return fetch(e).then(x=>x.blob())}).then(function(e){I.saveAs(e,U)}).catch(function(e){console.error("JPG download failed:",e)})})},m=n=>{i?alert("Not allowed when editing please preview page"):W(n)};return t.jsx(o.Container,{className:`viz download ${D} ${N?"has-title":""}
|
|
2
2
|
${d||u?"has-formats":""}
|
|
3
3
|
${i||l!=null&&l.editing?"editing":""}
|
|
4
4
|
${d&&u?"multi-format":""}
|
|
5
|
-
${d&&!u||!d&&u?"single-format":""}`,fluid:!0,children:t.jsxs(Q,{ref:a,children:[t.jsxs(o.Grid,{stackable:!0,reversed:"mobile",className:"download-header",children:[!i&&
|
|
5
|
+
${d&&!u||!d&&u?"single-format":""}`,fluid:!0,children:t.jsxs(Q,{ref:a,children:[t.jsxs(o.Grid,{stackable:!0,reversed:"mobile",className:"download-header",children:[!i&&N==="true"&&t.jsx(o.Grid.Column,{width:12,children:t.jsx(q.PostContent,{parentUnique:s.unique,post:{content:{rendered:decodeURIComponent(F)}}})}),t.jsx(o.Grid.Column,{className:i?"editing ignore":"ignore",width:i||N!=="true"?16:4,textAlign:"right",children:t.jsxs("div",{className:"wrapper",children:[t.jsxs(o.Button,{className:"download",onClick:()=>m(A),children:[L," ",A==="PNG"?"PNG":"JPG"]}),t.jsx(o.Dropdown,{className:"download","data-tooltip":decodeURIComponent(B),open:$,onOpen:()=>c(!0),onClose:()=>c(!1),trigger:u&&d?t.jsx(o.Icon,{name:"download",className:"download-icon"}):null,children:t.jsxs(o.Dropdown.Menu,{children:[T,d===!0&&t.jsx(o.Dropdown.Item,{onClick:()=>{h("PNG"),m("PNG"),c(!1)},children:t.jsxs("div",{className:"ui radio checkbox",children:[t.jsx("input",{type:"radio",className:"hidden",readOnly:!0,tabIndex:0,checked:A==="PNG"}),t.jsx("label",{onClick:n=>{n.stopPropagation(),h("PNG"),m("PNG"),c(!1)},children:J})]})}),u===!0&&t.jsx(o.Dropdown.Item,{onClick:()=>{h("JPG"),m("JPG"),c(!1)},children:t.jsxs("div",{className:"ui radio checkbox",children:[t.jsx("input",{type:"radio",className:"hidden",readOnly:!0,tabIndex:0,checked:A==="JPG"}),t.jsx("label",{onClick:n=>{n.stopPropagation(),h("JPG"),m("JPG"),c(!1)},children:E})]})})]})})]})})]}),!i&&t.jsx(o.Container,{fluid:!0,className:`download area ${i||l!=null&&l.editing?"editing":""}`,children:t.jsx(q.PostContent,{parentUnique:s.unique,post:{content:{rendered:b}}})})]})})},_=s=>{const a=s.getIn(["data","pageModuleProps"]),b={};return a&&(b.pageModuleProps=a),b},K={},X=H.connect(_,K)(V);exports.default=X;
|
|
@@ -1,149 +1,151 @@
|
|
|
1
1
|
import { jsx as t, jsxs as l } from "react/jsx-runtime";
|
|
2
|
-
import K, { useRef as X, useState as
|
|
3
|
-
import { Container as
|
|
2
|
+
import K, { useRef as X, useState as E, useEffect as Y } from "react";
|
|
3
|
+
import { Container as J, Grid as G, Button as Z, Dropdown as b, Icon as _ } from "semantic-ui-react";
|
|
4
4
|
import { PostContent as U } from "@devgateway/wp-react-lib";
|
|
5
|
-
import { domtoimage as
|
|
6
|
-
import { saveAs as
|
|
5
|
+
import { domtoimage as y } from "./dom-to-image.js";
|
|
6
|
+
import { saveAs as F } from "file-saver";
|
|
7
7
|
import { connect as ee } from "react-redux";
|
|
8
8
|
const te = K.forwardRef((a, r) => /* @__PURE__ */ t("div", { ref: r, children: a.children })), ne = (a) => {
|
|
9
9
|
const r = X();
|
|
10
10
|
let {
|
|
11
|
-
childContent:
|
|
11
|
+
childContent: A,
|
|
12
12
|
"data-height": ae,
|
|
13
|
-
"data-button-label":
|
|
14
|
-
"data-png-label":
|
|
15
|
-
"data-jpg-label":
|
|
16
|
-
"data-jpg-text":
|
|
17
|
-
"data-png-text":
|
|
13
|
+
"data-button-label": T,
|
|
14
|
+
"data-png-label": S,
|
|
15
|
+
"data-jpg-label": B,
|
|
16
|
+
"data-jpg-text": D,
|
|
17
|
+
"data-png-text": $,
|
|
18
18
|
"data-check-png": k = "true",
|
|
19
19
|
"data-check-jpg": x = "true",
|
|
20
|
-
"data-title":
|
|
21
|
-
"data-default-format":
|
|
22
|
-
"data-use-title":
|
|
23
|
-
"data-style":
|
|
24
|
-
"data-section-title":
|
|
25
|
-
"data-download-tooltip":
|
|
26
|
-
"data-include-source-url":
|
|
27
|
-
"data-include-filters":
|
|
28
|
-
"data-source-urlmargin-left":
|
|
29
|
-
"data-source-urlmargin-top":
|
|
30
|
-
"data-source-urlfont-size":
|
|
20
|
+
"data-title": j,
|
|
21
|
+
"data-default-format": P = "PNG",
|
|
22
|
+
"data-use-title": C = "false",
|
|
23
|
+
"data-style": q = "heavy",
|
|
24
|
+
"data-section-title": O = "",
|
|
25
|
+
"data-download-tooltip": W = "",
|
|
26
|
+
"data-include-source-url": R = "false",
|
|
27
|
+
"data-include-filters": v = "false",
|
|
28
|
+
"data-source-urlmargin-left": z = 70,
|
|
29
|
+
"data-source-urlmargin-top": I = 10,
|
|
30
|
+
"data-source-urlfont-size": L = 18,
|
|
31
31
|
parent: ie,
|
|
32
32
|
editing: i,
|
|
33
33
|
component: le,
|
|
34
34
|
unique: se,
|
|
35
35
|
pageModuleProps: s
|
|
36
36
|
} = a;
|
|
37
|
-
const [
|
|
37
|
+
const [N, p] = E(P), [M, c] = E(!1), d = k == "true" || k === !0, u = x == "true" || x === !0;
|
|
38
38
|
Y(() => {
|
|
39
|
-
p(
|
|
40
|
-
}, [
|
|
39
|
+
p(P);
|
|
40
|
+
}, [P]);
|
|
41
41
|
function H(n) {
|
|
42
|
-
const o = n.attributes,
|
|
42
|
+
const o = n.attributes, g = [];
|
|
43
43
|
if (o)
|
|
44
44
|
for (let e = 0; e < o.length; e++)
|
|
45
|
-
|
|
46
|
-
const f =
|
|
45
|
+
g.push(o[e].nodeName);
|
|
46
|
+
const f = g.filter((e) => e.startsWith("data-"));
|
|
47
47
|
if (f.length > 0 && f.forEach((e) => {
|
|
48
48
|
n.setAttribute(e, "");
|
|
49
49
|
}), n.classList) {
|
|
50
50
|
if (n.classList.contains("ignore")) return !1;
|
|
51
|
-
if (!(
|
|
52
|
-
const
|
|
51
|
+
if (!(v === !0 || v === "true")) {
|
|
52
|
+
const w = [
|
|
53
53
|
"filter-component",
|
|
54
54
|
"data-filters-reset",
|
|
55
55
|
"data-filters-apply",
|
|
56
56
|
"filter-search"
|
|
57
57
|
];
|
|
58
|
-
for (const V of
|
|
58
|
+
for (const V of w)
|
|
59
59
|
if (n.classList.contains(V)) return !1;
|
|
60
60
|
}
|
|
61
61
|
return !0;
|
|
62
62
|
}
|
|
63
63
|
return !0;
|
|
64
64
|
}
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
const h = { filter: H, bgcolor: "#FFF", imagePlaceholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgQb9Z3kAAAAASUVORK5CYII=", cacheBust: !0 }, Q = (n) => {
|
|
66
|
+
y.cloneNode(r.current).then(function(o) {
|
|
67
|
+
[...o.getElementsByTagName("input")].forEach((e) => e.remove()), [...o.querySelectorAll(".question.circle.icon")].forEach((e) => e.remove());
|
|
68
|
+
const g = R === "true" || R === !0;
|
|
69
|
+
if (g) {
|
|
68
70
|
const e = document.createElement("div");
|
|
69
|
-
e.style.marginLeft =
|
|
71
|
+
e.style.marginLeft = z + "px", e.style.marginTop = I + "px", e.style.fontSize = L + "px", e.style.fontFamily = "Roboto, sans-serif", e.style.fontWeight = "400", e.style.color = "#66676d", e.style.opacity = "0.75", e.textContent = window.location.href, e.style.maxWidth = "90%", e.style.wordWrap = "break-word", e.style.overflowWrap = "break-word", o.appendChild(e);
|
|
70
72
|
}
|
|
71
73
|
const f = 50;
|
|
72
|
-
|
|
74
|
+
h.height = r.current.scrollHeight + f * 2, g && (h.height += (Number.parseInt(I, 10) || 0) + (Number.parseInt(L, 10) || 0) * 2), h.width = r.current.scrollWidth + f * 2, o.style.padding = `${f}px`, n === "PNG" && y.toPng(o, h).then(function(e) {
|
|
73
75
|
if (!e) throw new Error("PNG render returned empty result");
|
|
74
|
-
return fetch(e).then((
|
|
76
|
+
return fetch(e).then((w) => w.blob());
|
|
75
77
|
}).then(function(e) {
|
|
76
|
-
|
|
78
|
+
F(e, S);
|
|
77
79
|
}).catch(function(e) {
|
|
78
80
|
console.error("PNG download failed:", e);
|
|
79
|
-
}), n === "JPG" &&
|
|
81
|
+
}), n === "JPG" && y.toJpeg(o, h).then(function(e) {
|
|
80
82
|
if (!e) throw new Error("JPEG render returned empty result");
|
|
81
|
-
return fetch(e).then((
|
|
83
|
+
return fetch(e).then((w) => w.blob());
|
|
82
84
|
}).then(function(e) {
|
|
83
|
-
|
|
85
|
+
F(e, B);
|
|
84
86
|
}).catch(function(e) {
|
|
85
87
|
console.error("JPG download failed:", e);
|
|
86
88
|
});
|
|
87
89
|
});
|
|
88
|
-
},
|
|
90
|
+
}, m = (n) => {
|
|
89
91
|
i ? alert("Not allowed when editing please preview page") : Q(n);
|
|
90
92
|
};
|
|
91
93
|
return /* @__PURE__ */ t(
|
|
92
|
-
|
|
94
|
+
J,
|
|
93
95
|
{
|
|
94
|
-
className: `viz download ${
|
|
96
|
+
className: `viz download ${q} ${C ? "has-title" : ""}
|
|
95
97
|
${d || u ? "has-formats" : ""}
|
|
96
98
|
${i || s != null && s.editing ? "editing" : ""}
|
|
97
99
|
${d && u ? "multi-format" : ""}
|
|
98
100
|
${d && !u || !d && u ? "single-format" : ""}`,
|
|
99
101
|
fluid: !0,
|
|
100
102
|
children: /* @__PURE__ */ l(te, { ref: r, children: [
|
|
101
|
-
/* @__PURE__ */ l(
|
|
102
|
-
!i &&
|
|
103
|
+
/* @__PURE__ */ l(G, { stackable: !0, reversed: "mobile", className: "download-header", children: [
|
|
104
|
+
!i && C === "true" && /* @__PURE__ */ t(G.Column, { width: 12, children: /* @__PURE__ */ t(
|
|
103
105
|
U,
|
|
104
106
|
{
|
|
105
107
|
parentUnique: a.unique,
|
|
106
|
-
post: { content: { rendered: decodeURIComponent(
|
|
108
|
+
post: { content: { rendered: decodeURIComponent(O) } }
|
|
107
109
|
}
|
|
108
110
|
) }),
|
|
109
111
|
/* @__PURE__ */ t(
|
|
110
|
-
|
|
112
|
+
G.Column,
|
|
111
113
|
{
|
|
112
114
|
className: i ? "editing ignore" : "ignore",
|
|
113
|
-
width: i ||
|
|
115
|
+
width: i || C !== "true" ? 16 : 4,
|
|
114
116
|
textAlign: "right",
|
|
115
117
|
children: /* @__PURE__ */ l("div", { className: "wrapper", children: [
|
|
116
|
-
/* @__PURE__ */ l(Z, { className: "download", onClick: () =>
|
|
117
|
-
|
|
118
|
+
/* @__PURE__ */ l(Z, { className: "download", onClick: () => m(N), children: [
|
|
119
|
+
T,
|
|
118
120
|
" ",
|
|
119
|
-
|
|
121
|
+
N === "PNG" ? "PNG" : "JPG"
|
|
120
122
|
] }),
|
|
121
123
|
/* @__PURE__ */ t(
|
|
122
|
-
|
|
124
|
+
b,
|
|
123
125
|
{
|
|
124
126
|
className: "download",
|
|
125
|
-
"data-tooltip": decodeURIComponent(
|
|
126
|
-
open:
|
|
127
|
+
"data-tooltip": decodeURIComponent(W),
|
|
128
|
+
open: M,
|
|
127
129
|
onOpen: () => c(!0),
|
|
128
130
|
onClose: () => c(!1),
|
|
129
131
|
trigger: u && d ? /* @__PURE__ */ t(_, { name: "download", className: "download-icon" }) : null,
|
|
130
|
-
children: /* @__PURE__ */ l(
|
|
131
|
-
|
|
132
|
-
d === !0 && /* @__PURE__ */ t(
|
|
133
|
-
p("PNG"),
|
|
132
|
+
children: /* @__PURE__ */ l(b.Menu, { children: [
|
|
133
|
+
j,
|
|
134
|
+
d === !0 && /* @__PURE__ */ t(b.Item, { onClick: () => {
|
|
135
|
+
p("PNG"), m("PNG"), c(!1);
|
|
134
136
|
}, children: /* @__PURE__ */ l("div", { className: "ui radio checkbox", children: [
|
|
135
|
-
/* @__PURE__ */ t("input", { type: "radio", className: "hidden", readOnly: !0, tabIndex: 0, checked:
|
|
137
|
+
/* @__PURE__ */ t("input", { type: "radio", className: "hidden", readOnly: !0, tabIndex: 0, checked: N === "PNG" }),
|
|
136
138
|
/* @__PURE__ */ t("label", { onClick: (n) => {
|
|
137
|
-
n.stopPropagation(), p("PNG"),
|
|
138
|
-
}, children:
|
|
139
|
+
n.stopPropagation(), p("PNG"), m("PNG"), c(!1);
|
|
140
|
+
}, children: $ })
|
|
139
141
|
] }) }),
|
|
140
|
-
u === !0 && /* @__PURE__ */ t(
|
|
141
|
-
p("JPG"),
|
|
142
|
+
u === !0 && /* @__PURE__ */ t(b.Item, { onClick: () => {
|
|
143
|
+
p("JPG"), m("JPG"), c(!1);
|
|
142
144
|
}, children: /* @__PURE__ */ l("div", { className: "ui radio checkbox", children: [
|
|
143
|
-
/* @__PURE__ */ t("input", { type: "radio", className: "hidden", readOnly: !0, tabIndex: 0, checked:
|
|
145
|
+
/* @__PURE__ */ t("input", { type: "radio", className: "hidden", readOnly: !0, tabIndex: 0, checked: N === "JPG" }),
|
|
144
146
|
/* @__PURE__ */ t("label", { onClick: (n) => {
|
|
145
|
-
n.stopPropagation(), p("JPG"),
|
|
146
|
-
}, children:
|
|
147
|
+
n.stopPropagation(), p("JPG"), m("JPG"), c(!1);
|
|
148
|
+
}, children: D })
|
|
147
149
|
] }) })
|
|
148
150
|
] })
|
|
149
151
|
}
|
|
@@ -152,19 +154,19 @@ const te = K.forwardRef((a, r) => /* @__PURE__ */ t("div", { ref: r, children: a
|
|
|
152
154
|
}
|
|
153
155
|
)
|
|
154
156
|
] }),
|
|
155
|
-
!i && /* @__PURE__ */ t(
|
|
157
|
+
!i && /* @__PURE__ */ t(J, { fluid: !0, className: `download area ${i || s != null && s.editing ? "editing" : ""}`, children: /* @__PURE__ */ t(
|
|
156
158
|
U,
|
|
157
159
|
{
|
|
158
160
|
parentUnique: a.unique,
|
|
159
|
-
post: { content: { rendered:
|
|
161
|
+
post: { content: { rendered: A } }
|
|
160
162
|
}
|
|
161
163
|
) })
|
|
162
164
|
] })
|
|
163
165
|
}
|
|
164
166
|
);
|
|
165
167
|
}, oe = (a) => {
|
|
166
|
-
const r = a.getIn(["data", "pageModuleProps"]),
|
|
167
|
-
return r && (
|
|
168
|
+
const r = a.getIn(["data", "pageModuleProps"]), A = {};
|
|
169
|
+
return r && (A.pageModuleProps = r), A;
|
|
168
170
|
}, re = {}, we = ee(oe, re)(ne);
|
|
169
171
|
export {
|
|
170
172
|
we as default
|