react-kggraph 0.0.24 → 0.0.26
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.
- package/lib/index.es3.js +67 -64
- package/lib/index.es37.js +6 -6
- package/lib/index.es39.js +21 -0
- package/lib/index.es40.js +43 -0
- package/lib/index.es41.js +42 -0
- package/lib/index.es42.js +88 -18
- package/lib/index.es43.js +54 -39
- package/lib/index.es44.js +30 -39
- package/lib/index.es7.js +298 -289
- package/lib/index.es8.js +29 -29
- package/lib/src/components/Graph/components/ActionBar/index.d.ts +2 -0
- package/lib/src/components/Graph/types.d.ts +3 -1
- package/lib/style.css +1 -1
- package/package.json +1 -1
- package/lib/index.es45.js +0 -91
- package/lib/index.es46.js +0 -58
- package/lib/index.es47.js +0 -33
package/lib/index.es3.js
CHANGED
|
@@ -28,7 +28,7 @@ const it = ({
|
|
|
28
28
|
data: de,
|
|
29
29
|
getAllGraphData: I,
|
|
30
30
|
highPathAnalysis: z = [],
|
|
31
|
-
graphInfo:
|
|
31
|
+
graphInfo: g,
|
|
32
32
|
stepNextApi: re,
|
|
33
33
|
knowledgeCardApi: ae,
|
|
34
34
|
colors: E,
|
|
@@ -39,11 +39,11 @@ const it = ({
|
|
|
39
39
|
noDataDesc: He = "暂无数据"
|
|
40
40
|
}) => {
|
|
41
41
|
var _, G, ee;
|
|
42
|
-
const j = N(null), [
|
|
42
|
+
const j = N(null), [p, P] = v([]), u = N(null), K = N(null), X = 1, [Me, Z] = v(!1), [w, B] = v({}), [T, W] = v({}), [ue, ge] = v("cose-bilkent"), J = N(null), Q = N(null), [fe, V] = v(["", ""]), H = N(E);
|
|
43
43
|
O(() => {
|
|
44
44
|
H.current = E;
|
|
45
45
|
}, [E]);
|
|
46
|
-
const [
|
|
46
|
+
const [f, L] = v({
|
|
47
47
|
visible: !1,
|
|
48
48
|
x: 0,
|
|
49
49
|
y: 0,
|
|
@@ -54,16 +54,19 @@ const it = ({
|
|
|
54
54
|
x: 0,
|
|
55
55
|
y: 0,
|
|
56
56
|
content: ""
|
|
57
|
-
}),
|
|
57
|
+
}), ye = Se({ cyRef: u, setContextMenu: L, onPathAnalysis: (_ = K.current) == null ? void 0 : _.onPathAnalysis, setPathNodes: V, actionCircle: le });
|
|
58
58
|
O(() => {
|
|
59
|
-
(z == null ? void 0 : z.length) > 1 && Re(
|
|
60
|
-
}, [R(z), R(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
59
|
+
(z == null ? void 0 : z.length) > 1 && Re(u, { pathNodes: z, isGrayed: !1 });
|
|
60
|
+
}, [R(z), R(p)]), O(() => {
|
|
61
|
+
const s = [], r = [];
|
|
62
|
+
p.forEach((l) => {
|
|
63
|
+
l.group === "nodes" ? s.push(l.data) : l.group === "edges" && r.push(l.data);
|
|
64
|
+
}), I == null || I({ graphData: p, nodeStatic: w, relationStatic: T, data: { nodes: s, links: r } });
|
|
65
|
+
}, [R(p), R(w), R(T)]), O(() => {
|
|
66
|
+
var a;
|
|
67
|
+
if (!j.current || u.current) return;
|
|
68
|
+
const { elements: s, typeListObj: r, relationListObj: l } = F(de, { typeObj: w, graphInfo: g });
|
|
69
|
+
B(r), P(s), W(l), document.addEventListener("contextmenu", function(t) {
|
|
67
70
|
t.preventDefault();
|
|
68
71
|
});
|
|
69
72
|
const e = C({
|
|
@@ -78,11 +81,11 @@ const it = ({
|
|
|
78
81
|
// 使用预设布局,完全依赖 position
|
|
79
82
|
}
|
|
80
83
|
});
|
|
81
|
-
if (
|
|
84
|
+
if (u.current = e, ((a = g == null ? void 0 : g.searchNodes) == null ? void 0 : a.length) === 2)
|
|
82
85
|
je(
|
|
83
86
|
e,
|
|
84
|
-
|
|
85
|
-
|
|
87
|
+
g.searchNodes[0],
|
|
88
|
+
g.searchNodes[1]
|
|
86
89
|
);
|
|
87
90
|
else {
|
|
88
91
|
const t = e.layout(ne());
|
|
@@ -135,7 +138,7 @@ const it = ({
|
|
|
135
138
|
targetNode: o,
|
|
136
139
|
bgColor: o.style("background-color")
|
|
137
140
|
});
|
|
138
|
-
}),
|
|
141
|
+
}), u.current = e, e.on("click", "node", (t) => {
|
|
139
142
|
const o = t.target;
|
|
140
143
|
e.nodes().removeClass("selected grayed highlighted"), e.edges().removeClass("selected grayed highlighted"), o.addClass("selected");
|
|
141
144
|
const d = o.neighborhood().nodes().add(o), x = d.edgesWith(d);
|
|
@@ -143,29 +146,29 @@ const it = ({
|
|
|
143
146
|
}), e.on("tap", (t) => {
|
|
144
147
|
t.target === e && (L((o) => ({ ...o, visible: !1 })), e.nodes().removeClass("grayed highlighted highlight selected correlationStyle path-node level-highlight level-selected level-grayed"), e.edges().removeClass("grayed highlighted highlight selected correlationStyle path-edge level-highlightedge level-grayed"));
|
|
145
148
|
}), () => {
|
|
146
|
-
|
|
149
|
+
u.current && (u.current.destroy(), u.current = null);
|
|
147
150
|
};
|
|
148
151
|
}, []);
|
|
149
152
|
const me = async (s) => {
|
|
150
|
-
const { id:
|
|
153
|
+
const { id: r, kgId: l } = s, e = u.current;
|
|
151
154
|
if (!e) return;
|
|
152
|
-
const
|
|
153
|
-
if (!
|
|
155
|
+
const a = e.$(`#${r}`);
|
|
156
|
+
if (!a || a.length === 0) {
|
|
154
157
|
console.error("当前节点不存在");
|
|
155
158
|
return;
|
|
156
159
|
}
|
|
157
|
-
const t = e.nodes().filter((n) => n.data("parentId") ? (n.data("parentId") ===
|
|
160
|
+
const t = e.nodes().filter((n) => n.data("parentId") ? (n.data("parentId") === r || n.data("idLabel") === `${r}-${n.data("name")}`) && n.data("zktype") === s.zktype : !1);
|
|
158
161
|
if (t.length > 0) {
|
|
159
|
-
const n = t.map((
|
|
160
|
-
(
|
|
161
|
-
), D = e.edges().filter((
|
|
162
|
+
const n = t.map((c) => c.id()), d = t.connectedEdges(), x = e.edges().filter(
|
|
163
|
+
(c) => c.data("source") === r && n.includes(c.data("target"))
|
|
164
|
+
), D = e.edges().filter((c) => c.data("appendedBy") === r), M = d.merge(x).merge(D).filter((c) => c.data().zktype === s.zktype);
|
|
162
165
|
t.animate({
|
|
163
166
|
style: { opacity: 0 }
|
|
164
167
|
}, {
|
|
165
168
|
duration: 200,
|
|
166
169
|
complete: () => {
|
|
167
|
-
e.remove(t), e.remove(M), P((
|
|
168
|
-
const S =
|
|
170
|
+
e.remove(t), e.remove(M), P((c) => {
|
|
171
|
+
const S = c.filter((m) => {
|
|
169
172
|
var b, te;
|
|
170
173
|
const i = m.data.zktype;
|
|
171
174
|
if (m.group === "nodes" && n.includes((b = m.data) == null ? void 0 : b.id) && i && i === s.zktype)
|
|
@@ -174,16 +177,16 @@ const it = ({
|
|
|
174
177
|
const be = Array.from(D).map((ke) => {
|
|
175
178
|
const A = ke.data();
|
|
176
179
|
return `${A.source}-${A.target}-${A.label}`;
|
|
177
|
-
}), q = m.data, xe = be.includes(`${q.source}-${q.target}-${q.label}`), Ne = ((te = m.data) == null ? void 0 : te.appendedBy) ===
|
|
180
|
+
}), q = m.data, xe = be.includes(`${q.source}-${q.target}-${q.label}`), Ne = ((te = m.data) == null ? void 0 : te.appendedBy) === r;
|
|
178
181
|
return !xe && !Ne;
|
|
179
182
|
}
|
|
180
183
|
return !0;
|
|
181
|
-
}), { typeListObj:
|
|
182
|
-
return B(
|
|
183
|
-
}),
|
|
184
|
+
}), { typeListObj: y, relationListObj: U } = F({}, { graphData: S, typeObj: {} });
|
|
185
|
+
return B(y), W(U), S;
|
|
186
|
+
}), a.data("appendedNodes", []), a.data("isExpanded", !1);
|
|
184
187
|
}
|
|
185
188
|
}), setTimeout(() => {
|
|
186
|
-
|
|
189
|
+
a.removed() || (a.style("border-width", ""), a.style("border-color", ""));
|
|
187
190
|
}, 300);
|
|
188
191
|
} else {
|
|
189
192
|
try {
|
|
@@ -192,7 +195,7 @@ const it = ({
|
|
|
192
195
|
content: "正在展开...",
|
|
193
196
|
duration: 0
|
|
194
197
|
});
|
|
195
|
-
const n = await re({ uri:
|
|
198
|
+
const n = await re({ uri: r, queryType: 1, kgId: l, zktype: s.zktype }), { elements: d, typeListObj: x, relationListObj: D } = F(n.data, { graphData: p, typeObj: w, relationObj: T, zktype: s.zktype });
|
|
196
199
|
if (B(x), W(D), !((d == null ? void 0 : d.length) > 0)) {
|
|
197
200
|
setTimeout(() => {
|
|
198
201
|
k.destroy(), k.warning("暂无数据");
|
|
@@ -206,7 +209,7 @@ const it = ({
|
|
|
206
209
|
// 与你的期望边长匹配
|
|
207
210
|
offset: 30
|
|
208
211
|
// 随机偏移,避免完全重叠
|
|
209
|
-
}),
|
|
212
|
+
}), c = d.map((i) => {
|
|
210
213
|
if (i.group === "nodes") {
|
|
211
214
|
const b = $e * X;
|
|
212
215
|
return {
|
|
@@ -218,11 +221,11 @@ const it = ({
|
|
|
218
221
|
},
|
|
219
222
|
data: {
|
|
220
223
|
...i.data,
|
|
221
|
-
parentId:
|
|
224
|
+
parentId: r,
|
|
222
225
|
// 标记父节点
|
|
223
|
-
appendedBy:
|
|
226
|
+
appendedBy: r,
|
|
224
227
|
// 标记由谁追加
|
|
225
|
-
idLabel:
|
|
228
|
+
idLabel: r + "-" + i.data.label,
|
|
226
229
|
zktype: s.zktype,
|
|
227
230
|
isAppended: !0,
|
|
228
231
|
// 标记是追加节点
|
|
@@ -235,16 +238,16 @@ const it = ({
|
|
|
235
238
|
...i,
|
|
236
239
|
data: {
|
|
237
240
|
...i.data,
|
|
238
|
-
appendedBy:
|
|
241
|
+
appendedBy: r,
|
|
239
242
|
zktype: s.zktype
|
|
240
243
|
}
|
|
241
244
|
};
|
|
242
|
-
}), S = e.add(
|
|
243
|
-
P([...
|
|
244
|
-
const
|
|
245
|
-
|
|
246
|
-
const m = e.nodes().difference(
|
|
247
|
-
m.forEach((i) => i.lock()), M.placeNewNodes(
|
|
245
|
+
}), S = e.add(c);
|
|
246
|
+
P([...p, ...c]);
|
|
247
|
+
const y = S.filter(":node"), U = y.map((i) => i.id());
|
|
248
|
+
a.data("appendedNodes", U), a.data("isExpanded", !0);
|
|
249
|
+
const m = e.nodes().difference(y);
|
|
250
|
+
m.forEach((i) => i.lock()), M.placeNewNodes(y), e.layout({
|
|
248
251
|
name: "cose-bilkent",
|
|
249
252
|
randomize: !1,
|
|
250
253
|
// ⚠️ 这是关键!保持已有节点位置不变
|
|
@@ -261,7 +264,7 @@ const it = ({
|
|
|
261
264
|
gravity: 0.6
|
|
262
265
|
}).run(), setTimeout(() => {
|
|
263
266
|
m.forEach((i) => i.unlock());
|
|
264
|
-
}, 2e3),
|
|
267
|
+
}, 2e3), y.animate({
|
|
265
268
|
style: {
|
|
266
269
|
opacity: 1,
|
|
267
270
|
width: 20,
|
|
@@ -271,10 +274,10 @@ const it = ({
|
|
|
271
274
|
duration: 400,
|
|
272
275
|
easing: "ease-out",
|
|
273
276
|
complete: () => {
|
|
274
|
-
|
|
277
|
+
y.style("opacity", ""), y.style("width", ""), y.style("height", "");
|
|
275
278
|
}
|
|
276
279
|
}), setTimeout(() => {
|
|
277
|
-
|
|
280
|
+
a.removed() || (a.style("border-width", ""), a.style("border-color", ""), e.center(a), e.zoom(e.zoom()));
|
|
278
281
|
}, 600);
|
|
279
282
|
} else
|
|
280
283
|
console.log("没有找到相关节点数据");
|
|
@@ -288,16 +291,16 @@ const it = ({
|
|
|
288
291
|
}, he = {
|
|
289
292
|
expanded: "typed-literal",
|
|
290
293
|
contract: "uri"
|
|
291
|
-
}, ve = (s,
|
|
294
|
+
}, ve = (s, r) => {
|
|
292
295
|
var e;
|
|
293
|
-
console.log("handleMenuAction:::", s,
|
|
294
|
-
const
|
|
295
|
-
if (
|
|
296
|
-
const
|
|
297
|
-
if (["expanded", "contract"].includes(
|
|
298
|
-
me({ kgId:
|
|
299
|
-
else if (
|
|
300
|
-
const o =
|
|
296
|
+
console.log("handleMenuAction:::", s, r);
|
|
297
|
+
const l = r || f.targetNode;
|
|
298
|
+
if (l) {
|
|
299
|
+
const a = s.ids, t = l.data();
|
|
300
|
+
if (["expanded", "contract"].includes(a))
|
|
301
|
+
me({ kgId: g.kgId, ...t, zktype: he[a] });
|
|
302
|
+
else if (a === "nodeInfo") {
|
|
303
|
+
const o = l, n = {
|
|
301
304
|
id: o.id(),
|
|
302
305
|
data: o.data(),
|
|
303
306
|
position: o.position(),
|
|
@@ -308,18 +311,18 @@ const it = ({
|
|
|
308
311
|
style: o.style()
|
|
309
312
|
};
|
|
310
313
|
J.current.open(n);
|
|
311
|
-
} else
|
|
312
|
-
(e = s.onClick) == null || e.call(s,
|
|
314
|
+
} else a === "knowledgeCard" && Q.current.open(l.data());
|
|
315
|
+
(e = s.onClick) == null || e.call(s, l), L({ visible: !1, x: 0, y: 0, targetNode: null });
|
|
313
316
|
}
|
|
314
317
|
};
|
|
315
|
-
return console.log(111, !(((G =
|
|
318
|
+
return console.log(111, !(((G = p == null ? void 0 : p.nodes) == null ? void 0 : G.length) > 0), p), /* @__PURE__ */ h(Pe, { value: { pathNodes: fe, setPathNodes: V, graphInfo: g, graphData: p, layoutType: ue, setLayoutType: ge, knowledgeCardApi: ae, queryStatisticsConfig: ce, actionBar: ie }, children: /* @__PURE__ */ oe("div", { className: We("cytoscape-container relative", pe), children: [
|
|
316
319
|
/* @__PURE__ */ h("div", { className: "btn-group" }),
|
|
317
320
|
/* @__PURE__ */ h(
|
|
318
321
|
Le,
|
|
319
322
|
{
|
|
320
323
|
ref: K,
|
|
321
|
-
cyRef:
|
|
322
|
-
graphInfo:
|
|
324
|
+
cyRef: u,
|
|
325
|
+
graphInfo: g,
|
|
323
326
|
initNodeScale: X,
|
|
324
327
|
cyContainerRef: j,
|
|
325
328
|
typeObj: w,
|
|
@@ -329,13 +332,13 @@ const it = ({
|
|
|
329
332
|
),
|
|
330
333
|
/* @__PURE__ */ oe("div", { className: "relative h-100", children: [
|
|
331
334
|
/* @__PURE__ */ h("div", { ref: j, className: "cy-container" }),
|
|
332
|
-
|
|
335
|
+
f.visible && f.targetNode && /* @__PURE__ */ h(
|
|
333
336
|
"div",
|
|
334
337
|
{
|
|
335
338
|
style: {
|
|
336
339
|
position: "absolute",
|
|
337
|
-
left: `${
|
|
338
|
-
top: `${
|
|
340
|
+
left: `${f.x}px`,
|
|
341
|
+
top: `${f.y}px`,
|
|
339
342
|
// backgroundColor: 'white',
|
|
340
343
|
// border: '1px solid #ccc',
|
|
341
344
|
// borderRadius: '50%',
|
|
@@ -349,7 +352,7 @@ const it = ({
|
|
|
349
352
|
overflow: "hidden"
|
|
350
353
|
},
|
|
351
354
|
onClick: (s) => s.stopPropagation(),
|
|
352
|
-
children: /* @__PURE__ */ h(Oe, { items:
|
|
355
|
+
children: /* @__PURE__ */ h(Oe, { items: ye, centerImage: (ee = f == null ? void 0 : f.targetNode) == null ? void 0 : ee.data().image, targetNode: f.targetNode, onClick: (s, r) => ve(s, r) })
|
|
353
356
|
}
|
|
354
357
|
),
|
|
355
358
|
$.visible && /* @__PURE__ */ h(
|
package/lib/index.es37.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs as c, jsx as r, Fragment as o } from "react/jsx-runtime";
|
|
2
|
-
import N from "./index.
|
|
3
|
-
import k from "./index.
|
|
4
|
-
import y from "./index.
|
|
5
|
-
import C from "./index.
|
|
6
|
-
import S from "./index.
|
|
7
|
-
import v from "./index.
|
|
2
|
+
import N from "./index.es39.js";
|
|
3
|
+
import k from "./index.es40.js";
|
|
4
|
+
import y from "./index.es41.js";
|
|
5
|
+
import C from "./index.es42.js";
|
|
6
|
+
import S from "./index.es43.js";
|
|
7
|
+
import v from "./index.es44.js";
|
|
8
8
|
import { Row as x, Col as f, Empty as q } from "antd";
|
|
9
9
|
/* empty css */
|
|
10
10
|
const i = (e) => {
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as o, jsxs as r } from "react/jsx-runtime";
|
|
2
|
+
import { Row as i, Col as p } from "antd";
|
|
3
|
+
const d = ({ properties: t, excludedKeys: l = [] }) => {
|
|
4
|
+
const s = t.filter(
|
|
5
|
+
(e) => !l.includes(e.propertyKey)
|
|
6
|
+
);
|
|
7
|
+
return /* @__PURE__ */ o(i, { className: "property-section-wraper", children: s.map((e, a) => /* @__PURE__ */ r(p, { span: 24, className: "section-item", children: [
|
|
8
|
+
/* @__PURE__ */ r("div", { className: "detail-label", children: [
|
|
9
|
+
e.propertyKey,
|
|
10
|
+
":"
|
|
11
|
+
] }),
|
|
12
|
+
/* @__PURE__ */ r("div", { className: "detail-value", children: [
|
|
13
|
+
" ",
|
|
14
|
+
e.propertyValue,
|
|
15
|
+
" "
|
|
16
|
+
] })
|
|
17
|
+
] }, a)) });
|
|
18
|
+
};
|
|
19
|
+
export {
|
|
20
|
+
d as default
|
|
21
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsx as s, jsxs as o } from "react/jsx-runtime";
|
|
2
|
+
import { Space as d, Button as i } from "antd";
|
|
3
|
+
import { downloadFile as x } from "./index.es12.js";
|
|
4
|
+
const w = ({ documents: l, forceSingleColumn: c = !1, source: r }) => {
|
|
5
|
+
const a = (e) => e.toLowerCase().endsWith(".pdf") ? /* @__PURE__ */ s("span", { className: "w-24px h-30px i-custom-pdf-doc inline-block" }) : e.toLowerCase().endsWith(".docx") || e.toLowerCase().endsWith(".doc") ? /* @__PURE__ */ s("span", { className: "w-24px h-30px i-custom-doc-doc inline-block" }) : e.toLowerCase().endsWith(".pptx") || e.toLowerCase().endsWith(".ppt") ? /* @__PURE__ */ s("span", { className: "w-24px h-30px i-custom-ppt-doc inline-block" }) : e.toLowerCase().endsWith(".txt") ? /* @__PURE__ */ s("span", { className: "w-24px h-30px i-custom-txt-doc inline-block" }) : e.toLowerCase().endsWith(".csv") ? /* @__PURE__ */ s("span", { className: "w-24px h-30px i-custom-csv-doc inline-block" }) : e.toLowerCase().endsWith(".xls") || e.toLowerCase().endsWith(".xlsx") ? /* @__PURE__ */ s("span", { className: "w-24px h-30px i-custom-xls-doc inline-block" }) : /* @__PURE__ */ s("span", { className: "w-24px h-30px i-custom-else-doc inline-block" }), p = (e) => {
|
|
6
|
+
const n = e.split("/");
|
|
7
|
+
return n[n.length - 1];
|
|
8
|
+
};
|
|
9
|
+
return /* @__PURE__ */ s("div", { className: r === "qa-card" ? "grid grid-cols-1" : `grid ${c ? "grid-cols-1 gap-y-5" : "grid-cols-1 md:grid-cols-2 gap-x-100px gap-y-10px"}`, children: l.map((e, n) => {
|
|
10
|
+
const t = p(e.propertyValue);
|
|
11
|
+
return /* @__PURE__ */ o("div", { className: "flex items-center justify-between transition-all", children: [
|
|
12
|
+
/* @__PURE__ */ o("div", { className: "flex items-center min-w-0 flex-1", children: [
|
|
13
|
+
/* @__PURE__ */ s("div", { className: "mr-3 text-xl flex-shrink-0", children: a(t) }),
|
|
14
|
+
/* @__PURE__ */ s("div", { className: "min-w-0", children: /* @__PURE__ */ s("div", { className: "truncate", title: decodeURIComponent(t), children: decodeURIComponent(t) }) })
|
|
15
|
+
] }),
|
|
16
|
+
/* @__PURE__ */ o(d, { className: "flex-shrink-0", children: [
|
|
17
|
+
/* @__PURE__ */ s(
|
|
18
|
+
i,
|
|
19
|
+
{
|
|
20
|
+
className: "px-0px",
|
|
21
|
+
type: "link",
|
|
22
|
+
onClick: () => window.open(e.propertyValue, "_blank"),
|
|
23
|
+
children: "查看"
|
|
24
|
+
}
|
|
25
|
+
),
|
|
26
|
+
/* @__PURE__ */ s(
|
|
27
|
+
i,
|
|
28
|
+
{
|
|
29
|
+
type: "link",
|
|
30
|
+
className: "px-0px",
|
|
31
|
+
onClick: () => {
|
|
32
|
+
x(e.propertyValue, t);
|
|
33
|
+
},
|
|
34
|
+
children: "下载"
|
|
35
|
+
}
|
|
36
|
+
)
|
|
37
|
+
] })
|
|
38
|
+
] }, n);
|
|
39
|
+
}) });
|
|
40
|
+
};
|
|
41
|
+
export {
|
|
42
|
+
w as default
|
|
43
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as s } from "react";
|
|
3
|
+
import { Image as t } from "antd";
|
|
4
|
+
const m = ({ images: o, forceSingleColumn: i = !1, source: d = "" }) => (s(0), /* @__PURE__ */ e("div", { className: d === "qa-card" ? "grid grid-cols-1" : `grid ${i ? "grid-cols-1 gap-y-3" : "grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-20px"}`, children: /* @__PURE__ */ e(
|
|
5
|
+
t.PreviewGroup,
|
|
6
|
+
{
|
|
7
|
+
preview: {
|
|
8
|
+
// onVisibleChange: (visible) => {
|
|
9
|
+
// if (visible) {
|
|
10
|
+
// handlePreviewOpen();
|
|
11
|
+
// } else {
|
|
12
|
+
// handlePreviewClose();
|
|
13
|
+
// }
|
|
14
|
+
// },
|
|
15
|
+
mask: !0,
|
|
16
|
+
zIndex: 9999,
|
|
17
|
+
getContainer: () => document.getElementById("root") || document.body
|
|
18
|
+
},
|
|
19
|
+
children: o.map((r, a) => /* @__PURE__ */ e("div", { className: "group rounded-lg overflow-hidden transition-shadow", children: /* @__PURE__ */ e("div", { className: "h-185px relative overflow-hidden", children: /* @__PURE__ */ e(
|
|
20
|
+
t,
|
|
21
|
+
{
|
|
22
|
+
src: r.propertyValue,
|
|
23
|
+
alt: r.propertyKey,
|
|
24
|
+
style: {
|
|
25
|
+
width: "100%",
|
|
26
|
+
height: "185px",
|
|
27
|
+
objectFit: "cover"
|
|
28
|
+
// cover 保证图片充满容器,可能会裁剪
|
|
29
|
+
// 或者使用 'contain' 保证图片完整显示,可能会有留白
|
|
30
|
+
// objectFit: 'contain',
|
|
31
|
+
},
|
|
32
|
+
className: "transition-transform duration-300 group-hover:scale-105 rounded-6px",
|
|
33
|
+
preview: {
|
|
34
|
+
cover: /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "text-white text-14px", children: "点击查看" }) })
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
) }) }, a))
|
|
38
|
+
}
|
|
39
|
+
) }));
|
|
40
|
+
export {
|
|
41
|
+
m as default
|
|
42
|
+
};
|
package/lib/index.es42.js
CHANGED
|
@@ -1,21 +1,91 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import { jsxs as m, Fragment as x, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useState as u, useRef as p, useEffect as f } from "react";
|
|
3
|
+
import { Modal as C } from "antd";
|
|
4
|
+
const R = ({ videos: c, forceSingleColumn: V = !1, source: j = "" }) => {
|
|
5
|
+
const [n, l] = u(null), [i, h] = u({}), v = p({}), s = p(null), g = () => {
|
|
6
|
+
s.current && (s.current.pause(), s.current.currentTime = 0), l(null);
|
|
7
|
+
};
|
|
8
|
+
f(() => {
|
|
9
|
+
n && s.current && s.current.play().catch(() => {
|
|
10
|
+
});
|
|
11
|
+
}, [n]);
|
|
12
|
+
const y = (t, r) => {
|
|
13
|
+
if (i[r]) return;
|
|
14
|
+
const e = document.createElement("video");
|
|
15
|
+
e.src = t, e.crossOrigin = "anonymous", e.muted = !0, e.preload = "metadata", e.onloadeddata = () => {
|
|
16
|
+
e.currentTime = 0.1;
|
|
17
|
+
}, e.onseeked = () => {
|
|
18
|
+
const o = document.createElement("canvas");
|
|
19
|
+
o.width = e.videoWidth, o.height = e.videoHeight;
|
|
20
|
+
const d = o.getContext("2d");
|
|
21
|
+
if (d) {
|
|
22
|
+
d.drawImage(e, 0, 0, o.width, o.height);
|
|
23
|
+
const w = o.toDataURL("image/jpeg", 0.8);
|
|
24
|
+
h((N) => ({ ...N, [r]: w }));
|
|
25
|
+
}
|
|
26
|
+
e.src = "";
|
|
27
|
+
}, e.onerror = () => {
|
|
28
|
+
e.src = "";
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
return f(() => {
|
|
32
|
+
c.forEach((t, r) => {
|
|
33
|
+
y(t.propertyValue, r);
|
|
34
|
+
});
|
|
35
|
+
}, [c]), /* @__PURE__ */ m(x, { children: [
|
|
36
|
+
/* @__PURE__ */ a("div", { className: "video-wraper", children: c.map((t, r) => {
|
|
37
|
+
t.propertyValue.split("/").pop();
|
|
38
|
+
const e = i[r];
|
|
39
|
+
return /* @__PURE__ */ a("div", { className: "rounded-lg overflow-hidden transition-shadow", children: /* @__PURE__ */ m("div", { className: "video-item", children: [
|
|
40
|
+
/* @__PURE__ */ a(
|
|
41
|
+
"video",
|
|
42
|
+
{
|
|
43
|
+
ref: (o) => {
|
|
44
|
+
v.current[r] = o;
|
|
45
|
+
},
|
|
46
|
+
src: t.propertyValue,
|
|
47
|
+
poster: e,
|
|
48
|
+
className: "video-item-video",
|
|
49
|
+
muted: !0,
|
|
50
|
+
playsInline: !0,
|
|
51
|
+
preload: "metadata",
|
|
52
|
+
onClick: () => l(t.propertyValue)
|
|
53
|
+
}
|
|
54
|
+
),
|
|
55
|
+
!n && /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ a(
|
|
56
|
+
"div",
|
|
57
|
+
{
|
|
58
|
+
className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:scale-110 transition-transform",
|
|
59
|
+
onClick: () => l(t.propertyValue),
|
|
60
|
+
children: /* @__PURE__ */ a("span", { className: "w-24px h-24px i-custom-video-play inline-block" })
|
|
61
|
+
}
|
|
62
|
+
) })
|
|
63
|
+
] }) }, r);
|
|
64
|
+
}) }),
|
|
65
|
+
/* @__PURE__ */ a(
|
|
66
|
+
C,
|
|
67
|
+
{
|
|
68
|
+
open: !!n,
|
|
69
|
+
footer: null,
|
|
70
|
+
onCancel: g,
|
|
71
|
+
width: "auto",
|
|
72
|
+
centered: !0,
|
|
73
|
+
className: "video-modal",
|
|
74
|
+
wrapClassName: "modal-wrapClassName",
|
|
75
|
+
getContainer: () => document.getElementById("root"),
|
|
76
|
+
children: n && /* @__PURE__ */ a(
|
|
77
|
+
"video",
|
|
78
|
+
{
|
|
79
|
+
ref: s,
|
|
80
|
+
src: n,
|
|
81
|
+
controls: !0,
|
|
82
|
+
className: "max-w-[80vw] max-h-[80vh] mt-10px"
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
] });
|
|
18
88
|
};
|
|
19
89
|
export {
|
|
20
|
-
|
|
90
|
+
R as default
|
|
21
91
|
};
|
package/lib/index.es43.js
CHANGED
|
@@ -1,43 +1,58 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { jsx as l, jsxs as o } from "react/jsx-runtime";
|
|
2
|
+
import { useState as g, useRef as y } from "react";
|
|
3
|
+
import { Row as d, Flex as h, Button as p } from "antd";
|
|
4
|
+
const j = ({ audios: m, forceSingleColumn: u = !1, source: f = "" }) => {
|
|
5
|
+
const [s, a] = g(null), n = y({}), x = (e) => {
|
|
6
|
+
var t, i;
|
|
7
|
+
if (s === e)
|
|
8
|
+
(t = n.current[e]) == null || t.pause(), a(null);
|
|
9
|
+
else {
|
|
10
|
+
if (s && ((i = n.current[s]) == null || i.pause()), a(e), !n.current[e]) {
|
|
11
|
+
const c = new Audio(e);
|
|
12
|
+
n.current[e] = c;
|
|
13
|
+
}
|
|
14
|
+
n.current[e].play(), n.current[e].onended = () => a(null);
|
|
15
|
+
}
|
|
8
16
|
};
|
|
9
|
-
return /* @__PURE__ */
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
17
|
+
return /* @__PURE__ */ l(
|
|
18
|
+
"div",
|
|
19
|
+
{
|
|
20
|
+
className: f === "qa-card" ? "grid grid-cols-1" : `grid ${u ? "grid-cols-1 gap-y-3" : "grid-cols-2 gap-x-100px gap-y-20px"}`,
|
|
21
|
+
children: m.map((e, t) => {
|
|
22
|
+
const i = e.propertyValue.split("/").pop() || "未命名音频", c = s === e.propertyValue;
|
|
23
|
+
return /* @__PURE__ */ o(d, { className: "flex items-center justify-between transition-all", justify: "space-between", align: "middle", children: [
|
|
24
|
+
/* @__PURE__ */ o(d, { className: "flex items-center min-w-0 flex-1", align: "middle", children: [
|
|
25
|
+
/* @__PURE__ */ l("div", { className: "mr-3 text-xl flex-shrink-0", children: /* @__PURE__ */ l("span", { className: "w-24px h-30px i-custom-audio inline-block" }) }),
|
|
26
|
+
/* @__PURE__ */ l("div", { className: "min-w-0", children: /* @__PURE__ */ l("div", { className: "truncate", title: i, children: i }) })
|
|
27
|
+
] }),
|
|
28
|
+
/* @__PURE__ */ o(h, { className: "flex-shrink-0 ml-3", children: [
|
|
29
|
+
/* @__PURE__ */ l(
|
|
30
|
+
p,
|
|
31
|
+
{
|
|
32
|
+
className: "px-0",
|
|
33
|
+
type: "link",
|
|
34
|
+
onClick: () => x(e.propertyValue),
|
|
35
|
+
children: c ? "暂停" : "播放"
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
/* @__PURE__ */ l(
|
|
39
|
+
p,
|
|
40
|
+
{
|
|
41
|
+
className: "px-0",
|
|
42
|
+
type: "link",
|
|
43
|
+
onClick: () => {
|
|
44
|
+
const r = document.createElement("a");
|
|
45
|
+
r.href = e.propertyValue, r.download = i, r.click();
|
|
46
|
+
},
|
|
47
|
+
children: "下载"
|
|
48
|
+
}
|
|
49
|
+
)
|
|
50
|
+
] })
|
|
51
|
+
] }, t);
|
|
52
|
+
})
|
|
53
|
+
}
|
|
54
|
+
);
|
|
40
55
|
};
|
|
41
56
|
export {
|
|
42
|
-
|
|
57
|
+
j as default
|
|
43
58
|
};
|