react-table-mapping
Version:
1,120 lines (1,119 loc) • 37.9 kB
JavaScript
import _e, { forwardRef as xe, createElement as pe, memo as ue, useState as te, useRef as ee, useEffect as ne, useCallback as le, useImperativeHandle as Me } from "react";
import * as P from "@radix-ui/react-select";
import { Slot as $e } from "@radix-ui/react-slot";
import { v4 as fe } from "uuid";
var ie = { exports: {} }, Q = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ge;
function Ne() {
if (ge) return Q;
ge = 1;
var r = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
function i(s, l, a) {
var o = null;
if (a !== void 0 && (o = "" + a), l.key !== void 0 && (o = "" + l.key), "key" in l) {
a = {};
for (var u in l)
u !== "key" && (a[u] = l[u]);
} else a = l;
return l = a.ref, {
$$typeof: r,
type: s,
key: o,
ref: l !== void 0 ? l : null,
props: a
};
}
return Q.Fragment = t, Q.jsx = i, Q.jsxs = i, Q;
}
var K = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var he;
function Se() {
return he || (he = 1, process.env.NODE_ENV !== "production" && function() {
function r(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === f ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case _:
return "Fragment";
case R:
return "Profiler";
case D:
return "StrictMode";
case oe:
return "Suspense";
case z:
return "SuspenseList";
case c:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case A:
return "Portal";
case re:
return (e.displayName || "Context") + ".Provider";
case Y:
return (e._context.displayName || "Context") + ".Consumer";
case X:
var g = e.render;
return e = e.displayName, e || (e = g.displayName || g.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case H:
return g = e.displayName || null, g !== null ? g : r(e.type) || "Memo";
case I:
g = e._payload, e = e._init;
try {
return r(e(g));
} catch {
}
}
return null;
}
function t(e) {
return "" + e;
}
function i(e) {
try {
t(e);
var g = !1;
} catch {
g = !0;
}
if (g) {
g = console;
var w = g.error, M = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return w.call(
g,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
M
), t(e);
}
}
function s(e) {
if (e === _) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === I)
return "<...>";
try {
var g = r(e);
return g ? "<" + g + ">" : "<...>";
} catch {
return "<...>";
}
}
function l() {
var e = v.A;
return e === null ? null : e.getOwner();
}
function a() {
return Error("react-stack-top-frame");
}
function o(e) {
if (j.call(e, "key")) {
var g = Object.getOwnPropertyDescriptor(e, "key").get;
if (g && g.isReactWarning) return !1;
}
return e.key !== void 0;
}
function u(e, g) {
function w() {
L || (L = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
g
));
}
w.isReactWarning = !0, Object.defineProperty(e, "key", {
get: w,
configurable: !0
});
}
function d() {
var e = r(this.type);
return se[e] || (se[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function p(e, g, w, M, U, N, J, k) {
return w = N.ref, e = {
$$typeof: y,
type: e,
key: g,
props: N,
_owner: U
}, (w !== void 0 ? w : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: d
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: J
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: k
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function h(e, g, w, M, U, N, J, k) {
var x = g.children;
if (x !== void 0)
if (M)
if (m(x)) {
for (M = 0; M < x.length; M++)
b(x[M]);
Object.freeze && Object.freeze(x);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else b(x);
if (j.call(g, "key")) {
x = r(e);
var T = Object.keys(g).filter(function(S) {
return S !== "key";
});
M = 0 < T.length ? "{key: someKey, " + T.join(": ..., ") + ": ...}" : "{key: someKey}", ae[x + M] || (T = 0 < T.length ? "{" + T.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
M,
x,
T,
x
), ae[x + M] = !0);
}
if (x = null, w !== void 0 && (i(w), x = "" + w), o(g) && (i(g.key), x = "" + g.key), "key" in g) {
w = {};
for (var $ in g)
$ !== "key" && (w[$] = g[$]);
} else w = g;
return x && u(
w,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), p(
e,
x,
N,
U,
l(),
w,
J,
k
);
}
function b(e) {
typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
}
var E = _e, y = Symbol.for("react.transitional.element"), A = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), D = Symbol.for("react.strict_mode"), R = Symbol.for("react.profiler"), Y = Symbol.for("react.consumer"), re = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), oe = Symbol.for("react.suspense"), z = Symbol.for("react.suspense_list"), H = Symbol.for("react.memo"), I = Symbol.for("react.lazy"), c = Symbol.for("react.activity"), f = Symbol.for("react.client.reference"), v = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, m = Array.isArray, O = console.createTask ? console.createTask : function() {
return null;
};
E = {
react_stack_bottom_frame: function(e) {
return e();
}
};
var L, se = {}, G = E.react_stack_bottom_frame.bind(
E,
a
)(), V = O(s(a)), ae = {};
K.Fragment = _, K.jsx = function(e, g, w, M, U) {
var N = 1e4 > v.recentlyCreatedOwnerStacks++;
return h(
e,
g,
w,
!1,
M,
U,
N ? Error("react-stack-top-frame") : G,
N ? O(s(e)) : V
);
}, K.jsxs = function(e, g, w, M, U) {
var N = 1e4 > v.recentlyCreatedOwnerStacks++;
return h(
e,
g,
w,
!0,
M,
U,
N ? Error("react-stack-top-frame") : G,
N ? O(s(e)) : V
);
};
}()), K;
}
var me;
function Ce() {
return me || (me = 1, process.env.NODE_ENV === "production" ? ie.exports = Ne() : ie.exports = Se()), ie.exports;
}
var n = Ce();
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Ae = (r) => r.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Pe = (r) => r.replace(
/^([A-Z])|[\s-_]+(\w)/g,
(t, i, s) => s ? s.toUpperCase() : i.toLowerCase()
), ve = (r) => {
const t = Pe(r);
return t.charAt(0).toUpperCase() + t.slice(1);
}, be = (...r) => r.filter((t, i, s) => !!t && t.trim() !== "" && s.indexOf(t) === i).join(" ").trim(), Oe = (r) => {
for (const t in r)
if (t.startsWith("aria-") || t === "role" || t === "title")
return !0;
};
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
var Le = {
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round"
};
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Fe = xe(
({
color: r = "currentColor",
size: t = 24,
strokeWidth: i = 2,
absoluteStrokeWidth: s,
className: l = "",
children: a,
iconNode: o,
...u
}, d) => pe(
"svg",
{
ref: d,
...Le,
width: t,
height: t,
stroke: r,
strokeWidth: s ? Number(i) * 24 / Number(t) : i,
className: be("lucide", l),
...!a && !Oe(u) && { "aria-hidden": "true" },
...u
},
[
...o.map(([p, h]) => pe(p, h)),
...Array.isArray(a) ? a : [a]
]
)
);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const q = (r, t) => {
const i = xe(
({ className: s, ...l }, a) => pe(Fe, {
ref: a,
iconNode: t,
className: be(
`lucide-${Ae(ve(r))}`,
`lucide-${r}`,
s
),
...l
})
);
return i.displayName = ve(r), i;
};
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const De = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], Ye = q("check", De);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Ue = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], je = q("chevron-down", Ue);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Ve = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], Be = q("chevron-up", Ve);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Xe = [
["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
["path", { d: "M10 9H8", key: "b1mrlr" }],
["path", { d: "M16 13H8", key: "t4e002" }],
["path", { d: "M16 17H8", key: "z1uh3a" }]
], He = q("file-text", Xe);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const We = [["path", { d: "M5 12h14", key: "1ays0h" }]], Ee = q("minus", We);
/**
* @license lucide-react v0.536.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const qe = [
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
], ze = q("x", qe), Ie = ue(({
lineColor: r,
lineWidth: t,
hoverLineColor: i,
forceUpdate: s,
hoveredMapping: l,
isDragging: a,
disabled: o,
createPath: u,
removeMapping: d,
setHoveredMapping: p,
onBeforeMappingLineRemove: h,
onAfterMappingLineRemove: b,
mappings: E
}) => {
const y = a ? null : l, A = E.filter((R) => R.id !== y), _ = E.find((R) => R.id === y), D = (R) => {
if (!a && !o) {
if (h?.(R) === !1) return;
d(R), b?.(R);
}
};
return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
A.map((R) => {
const Y = u(R.source, R.target);
return Y ? /* @__PURE__ */ n.jsxs("g", { style: {
pointerEvents: o ? "none" : "auto"
}, className: "mapping-line-group", onMouseEnter: () => !a && !o && p(R.id), onMouseLeave: () => !a && !o && p(null), children: [
/* @__PURE__ */ n.jsx("path", { d: Y.path, stroke: r, strokeWidth: t, fill: "none", markerEnd: `url(#arrowhead-${y === R.id ? "hover" : "normal"})`, className: "line-base" }),
/* @__PURE__ */ n.jsx("path", { d: Y.path, style: {
cursor: o ? "not-allowed" : "pointer"
}, strokeWidth: t + 4, className: `hover-area ${a && !o ? "dragging" : ""}`, onClick: () => D(R.id) })
] }, `${R.id}-${s}`) : null;
}),
_ && (() => {
const R = u(_.source, _.target);
return R ? /* @__PURE__ */ n.jsxs("g", { className: "mapping-line-group hovered", onMouseEnter: () => !a && !o && p(_.id), onMouseLeave: () => !a && !o && p(null), children: [
/* @__PURE__ */ n.jsx("path", { d: R.path, stroke: i, strokeWidth: t + 0.5, fill: "none", markerEnd: "url(#arrowhead-hover)", className: "line-base" }),
/* @__PURE__ */ n.jsx("path", { d: R.path, strokeWidth: t + 4.5, className: `hover-area ${a && !o ? "dragging" : ""}`, onClick: () => D(_.id) }),
/* @__PURE__ */ n.jsx("foreignObject", { width: "18", height: "18", x: R.midX - 9, y: R.midY - 9, style: {
overflow: "visible"
}, onClick: () => D(_.id), children: /* @__PURE__ */ n.jsx("div", { className: `mapping-delete-button ${a ? "dragging" : ""}`, children: /* @__PURE__ */ n.jsx(ze, { className: "mapping-delete-icon" }) }) })
] }, `${_.id}-${s}-hovered`) : null;
})()
] });
});
function Ge(r, t, { signal: i, edges: s } = {}) {
let l, a = null;
const o = s != null && s.includes("leading"), u = s == null || s.includes("trailing"), d = () => {
a !== null && (r.apply(l, a), l = void 0, a = null);
}, p = () => {
u && d(), y();
};
let h = null;
const b = () => {
h != null && clearTimeout(h), h = setTimeout(() => {
h = null, p();
}, t);
}, E = () => {
h !== null && (clearTimeout(h), h = null);
}, y = () => {
E(), l = void 0, a = null;
}, A = () => {
E(), d();
}, _ = function(...D) {
if (i?.aborted)
return;
l = this, a = D;
const R = h == null;
b(), o && R && d();
};
return _.schedule = b, _.cancel = y, _.flush = A, i?.addEventListener("abort", y, { once: !0 }), _;
}
function ye({
className: r,
type: t,
iconEnd: i,
iconStart: s,
ref: l,
...a
}) {
const o = ["mapping-table-input", t === "file" && "mapping-table-input-file", s && "mapping-table-input-with-start-icon", i && "mapping-table-input-with-end-icon", r].filter(Boolean).join(" ");
return /* @__PURE__ */ n.jsxs("div", { className: "mapping-table-input-container", children: [
/* @__PURE__ */ n.jsx("input", { type: t, className: o, ref: l, ...a }),
s && /* @__PURE__ */ n.jsx("div", { className: "mapping-table-input-icon-start", children: s }),
i && /* @__PURE__ */ n.jsx("div", { className: "mapping-table-input-icon-end", children: i })
] });
}
ye.displayName = "Input";
function Je({
...r
}) {
return /* @__PURE__ */ n.jsx(P.Root, { "data-slot": "select", ...r });
}
function Ze({
...r
}) {
return /* @__PURE__ */ n.jsx(P.Value, { "data-slot": "select-value", ...r });
}
function Qe({
size: r = "default",
children: t,
...i
}) {
return /* @__PURE__ */ n.jsxs(P.Trigger, { className: "mapping-table-select-trigger", "data-size": r, ...i, children: [
t,
/* @__PURE__ */ n.jsx(P.Icon, { asChild: !0, children: /* @__PURE__ */ n.jsx(je, { style: {
height: "16px",
width: "16px",
opacity: 0.5
} }) })
] });
}
function Ke({
children: r,
position: t = "popper",
...i
}) {
return /* @__PURE__ */ n.jsx(P.Portal, { children: /* @__PURE__ */ n.jsxs(P.Content, { className: "mapping-table-select-content", position: t, ...i, children: [
/* @__PURE__ */ n.jsx(tt, {}),
/* @__PURE__ */ n.jsx(P.Viewport, { children: r }),
/* @__PURE__ */ n.jsx(nt, {})
] }) });
}
function et({
children: r,
...t
}) {
return /* @__PURE__ */ n.jsxs(P.Item, { className: "mapping-table-select-item", ...t, children: [
/* @__PURE__ */ n.jsx(P.ItemText, { children: r }),
/* @__PURE__ */ n.jsx("span", { className: "item-indicator", children: /* @__PURE__ */ n.jsx(P.ItemIndicator, { children: /* @__PURE__ */ n.jsx(Ye, { style: {
height: "16px",
width: "16px"
} }) }) })
] });
}
function tt(r) {
return /* @__PURE__ */ n.jsx(P.ScrollUpButton, { className: "mapping-table-select-scroll-up-button", ...r, children: /* @__PURE__ */ n.jsx(Be, { style: {
height: "16px",
width: "16px"
} }) });
}
function nt(r) {
return /* @__PURE__ */ n.jsx(P.ScrollDownButton, { className: "mapping-table-select-scroll-down-button", ...r, children: /* @__PURE__ */ n.jsx(je, { style: {
height: "16px",
width: "16px"
} }) });
}
const Re = ue(({
fieldId: r,
params: t,
disabled: i = !0,
tableType: s,
tableMappingHook: l
}) => {
const [a, o] = te(() => typeof t == "string" ? t : t.type === "input" || t.type === "select" ? t.value || t.defaultValue || "" : t.value || ""), {
updateSourceFieldValue: u,
updateTargetFieldValue: d
} = l, p = ee(null);
ne(() => {
typeof t != "string" && t.type === "select" && (o(p.current?.value || ""), s === "source" && !t.value && u(r, t.columnKey, p.current?.value || ""), s === "target" && !t.value && d(r, t.columnKey, p.current?.value || ""));
}, []), ne(() => {
typeof t != "string" && (t.type === "input" || t.type === "select" ? t.value !== a && document.activeElement !== p.current && o(t.defaultValue || t.value || "") : t.value !== a && document.activeElement !== p.current && o(t.value || ""));
}, [t]);
const h = le(Ge((y) => {
typeof t != "string" && (t.type === "input" || t.type === "select") && t.columnKey && (s === "source" && u(r, t.columnKey, y), s === "target" && d(r, t.columnKey, y));
}, 300), [r, t, u, d, s]), b = le((y) => {
const A = y.target.value;
o(A), h(A), typeof t != "string" && t.type === "input" && t.onChange?.(A);
}, [h, t]), E = le((y) => {
o(y), h(y), typeof t != "string" && t.type === "select" && t.onChange?.(y);
}, [h, t]);
return typeof t == "string" ? /* @__PURE__ */ n.jsx("div", { className: "custom-cell-text", children: t }) : t.type === "input" ? /* @__PURE__ */ n.jsx("div", { className: "custom-cell-input", children: /* @__PURE__ */ n.jsx(ye, { value: a, ...t.attributes, ref: p, onChange: b, disabled: i }) }) : t.type === "select" ? /* @__PURE__ */ n.jsx("div", { className: "custom-cell-select", children: /* @__PURE__ */ n.jsxs(Je, { defaultValue: a, onValueChange: E, children: [
/* @__PURE__ */ n.jsx(Qe, { disabled: i, children: /* @__PURE__ */ n.jsx(Ze, {}) }),
/* @__PURE__ */ n.jsx(Ke, { children: t.options.map((y) => /* @__PURE__ */ n.jsx(et, { value: y.value, disabled: y.disabled, children: y.label }, y.value)) })
] }) }) : /* @__PURE__ */ n.jsx("div", { className: "custom-cell-text", children: t.value });
});
function we({
className: r = "",
variant: t = "default",
size: i = "default",
asChild: s = !1,
...l
}) {
const a = s ? $e : "button", o = ["mapping-button", `mapping-button--${t}`, `mapping-button--${i}`, r].filter(Boolean).join(" ");
return /* @__PURE__ */ n.jsx(a, { "data-slot": "button", className: o, ...l });
}
const Te = () => /* @__PURE__ */ n.jsxs("div", { className: "no-data-container", children: [
/* @__PURE__ */ n.jsx(He, { width: 24, height: 24 }),
/* @__PURE__ */ n.jsx("span", { style: {
color: "var(--color-text-secondary)"
}, children: "No Data" })
] }), rt = ue(({
field: r,
handleDragStart: t,
disabled: i,
tableMappingHook: s
}) => {
const {
id: l,
key: a,
...o
} = r, p = `repeat(${Object.entries(o ?? {}).filter(([, h]) => h).length}, 1fr) auto`;
return /* @__PURE__ */ n.jsxs("div", { className: "source-table-row", style: {
gridTemplateColumns: p,
flex: 1
}, children: [
Object.entries(o ?? {}).map(([h, b]) => b ? /* @__PURE__ */ n.jsx(Re, { fieldId: l, fieldKey: h, params: b, disabled: i, tableType: "source", tableMappingHook: s }, `${l}-${h}`) : null),
/* @__PURE__ */ n.jsx("div", { id: `connector-source-${l}`, className: "source-connector connector", style: {
cursor: i ? "not-allowed" : "pointer",
pointerEvents: i ? "none" : "auto"
}, onMouseDown: (h) => !i && t(h, l) })
] }, l || a);
}), ot = (r) => {
const {
sourceTableRef: t,
sourceColumns: i,
disabled: s,
noDataComponent: l,
onBeforeSourceFieldRemove: a,
onAfterSourceFieldRemove: o,
handleDragStart: u,
tableMappingHook: d
} = r, {
sourceFields: p,
removeSource: h
} = d, b = (E) => {
a?.(E) !== !1 && (h(E), o?.(E));
};
return /* @__PURE__ */ n.jsxs("div", { ref: t, className: "source-table", children: [
/* @__PURE__ */ n.jsx("div", { className: "source-table-header", children: /* @__PURE__ */ n.jsxs("div", { className: "source-table-header-container", children: [
!s && p.length > 0 ? /* @__PURE__ */ n.jsx("div", { style: {
width: "24px",
height: "24px"
} }) : null,
i.map((E) => /* @__PURE__ */ n.jsx("div", { className: "source-table-header-cell", children: E.title }, E.key))
] }) }),
/* @__PURE__ */ n.jsxs("div", { className: "source-table-body", children: [
p.map((E) => /* @__PURE__ */ n.jsxs("div", { className: "source-table-row-container", children: [
s ? null : /* @__PURE__ */ n.jsx(we, { className: "mapping-button", variant: "outline", size: "icon", onClick: () => b(E.id), children: /* @__PURE__ */ n.jsx(Ee, { width: 12, height: 12 }) }),
/* @__PURE__ */ n.jsx(rt, { field: E, handleDragStart: u, disabled: s, tableMappingHook: d })
] }, E.id || E.key)),
p.length <= 0 ? l || /* @__PURE__ */ n.jsx(Te, {}) : null
] })
] });
}, st = ue(({
field: r,
disabled: t,
tableMappingHook: i
}) => {
const {
id: s,
key: l,
...a
} = r, d = `repeat(${Object.entries(a ?? {}).filter(([, p]) => p).length}, 1fr) auto`;
return /* @__PURE__ */ n.jsxs("div", { className: "target-table-row", style: {
gridTemplateColumns: d
}, children: [
Object.entries(a ?? {}).map(([p, h]) => h ? /* @__PURE__ */ n.jsx(Re, { fieldId: s, fieldKey: p, params: h, disabled: t, tableType: "target", tableMappingHook: i }, `${s}-${p}`) : null),
/* @__PURE__ */ n.jsx("div", { id: `connector-target-${s}`, className: "target-connector connector", style: {
cursor: t ? "not-allowed" : "pointer",
pointerEvents: t ? "none" : "auto"
} })
] }, s || l);
}), at = (r) => {
const {
targetTableRef: t,
targetColumns: i,
disabled: s,
noDataComponent: l,
onBeforeTargetFieldRemove: a,
onAfterTargetFieldRemove: o,
tableMappingHook: u
} = r, {
targetFields: d,
removeTarget: p
} = u, h = (b) => {
a?.(b) !== !1 && (p(b), o?.(b));
};
return /* @__PURE__ */ n.jsxs("div", { ref: t, className: "target-table", children: [
/* @__PURE__ */ n.jsx("div", { className: "target-table-header", children: /* @__PURE__ */ n.jsxs("div", { className: "target-table-header-container", children: [
i.map((b) => /* @__PURE__ */ n.jsx("div", { className: "target-table-header-cell", children: b.title }, b.key)),
!s && d.length > 0 ? /* @__PURE__ */ n.jsx("div", { style: {
width: "24px",
height: "24px"
} }) : null
] }) }),
/* @__PURE__ */ n.jsxs("div", { className: "target-table-body", children: [
d.map((b) => /* @__PURE__ */ n.jsxs("div", { className: "target-table-row-container", children: [
/* @__PURE__ */ n.jsx(st, { field: b, disabled: s, tableMappingHook: u }),
s ? null : /* @__PURE__ */ n.jsx(we, { className: "mapping-button", variant: "outline", size: "icon", onClick: () => h(b.id), children: /* @__PURE__ */ n.jsx(Ee, { width: 12, height: 12 }) })
] }, b.id || b.key)),
d.length <= 0 ? l || /* @__PURE__ */ n.jsx(Te, {}) : null
] })
] });
}, ct = ({
sources: r,
targets: t,
mappings: i,
onStateChange: s
}) => {
const [l, a] = te(0), o = r, u = t, d = i, p = (c, f, v, j) => {
s({
sources: c,
targets: f,
mappings: v,
action: j
});
};
return {
sourceFields: o,
targetFields: u,
mappings: d,
redrawCount: l,
redraw: () => {
a((c) => c + 1);
},
getSourceFields: () => o,
getTargetFields: () => u,
getMappings: () => d,
appendSource: (c) => {
const f = {
...c,
id: c.id ? c.id : `source-${fe()}`
}, v = [...o, f];
p(v, u, d, {
type: "APPEND_SOURCE",
payload: {
source: f
}
});
},
removeSource: (c) => {
const f = o.filter((m) => m.id !== c), v = d.filter((m) => m.source !== c), j = d.filter((m) => m.source === c);
p(f, u, v, {
type: "REMOVE_SOURCE",
payload: {
sourceId: c,
removedMappings: j
}
});
},
updateSourceFields: (c) => {
p(c, u, d, {
type: "UPDATE_SOURCE_FIELDS",
payload: {
previousSources: o,
newSources: c
}
});
},
updateSourceFieldValue: (c, f, v) => {
const j = o.map((m) => m.id === c && typeof m[f] != "string" && (m[f]?.type === "string" || m[f]?.type === "input" || m[f]?.type === "select") ? {
...m,
[f]: {
...m[f],
value: v
}
} : m);
p(j, u, d, {
type: "UPDATE_SOURCE_FIELD_VALUE",
payload: {
sourceId: c,
fieldKey: f,
newValue: v
}
});
},
appendTarget: (c) => {
const f = {
...c,
id: c.id ? c.id : `target-${fe()}`
}, v = [...u, f];
p(o, v, d, {
type: "APPEND_TARGET",
payload: {
target: f
}
});
},
removeTarget: (c) => {
const f = u.filter((m) => m.id !== c), v = d.filter((m) => m.target !== c), j = d.filter((m) => m.target === c);
p(o, f, v, {
type: "REMOVE_TARGET",
payload: {
targetId: c,
removedMappings: j
}
});
},
updateTargetFields: (c) => {
p(o, c, d, {
type: "UPDATE_TARGET_FIELDS",
payload: {
previousTargets: u,
newTargets: c
}
});
},
updateTargetFieldValue: (c, f, v) => {
const j = u.map((m) => m.id === c && typeof m[f] != "string" && (m[f]?.type === "string" || m[f]?.type === "input" || m[f]?.type === "select") ? {
...m,
[f]: {
...m[f],
value: v
}
} : m);
p(o, j, d, {
type: "UPDATE_TARGET_FIELD_VALUE",
payload: {
targetId: c,
fieldKey: f,
newValue: v
}
});
},
addMapping: (c, f) => {
if (d.find((O) => O.source === c && O.target === f)) return;
const j = {
id: `mapping-${c}-${f}`,
source: c,
target: f
}, m = [...d, j];
p(o, u, m, {
type: "ADD_MAPPING",
payload: {
sourceId: c,
targetId: f,
mapping: j
}
});
},
removeMapping: (c) => {
const f = d.find((j) => j.id === c), v = d.filter((j) => j.id !== c);
p(o, u, v, {
type: "REMOVE_MAPPING",
payload: {
mappingId: c,
removedMapping: f
}
});
},
clearMappings: () => {
const c = [...d];
p(o, u, [], {
type: "CLEAR_MAPPINGS",
payload: {
clearedMappings: c
}
});
},
updateMappings: (c) => {
p(o, u, c, {
type: "UPDATE_MAPPINGS",
payload: {
previousMappings: d,
newMappings: c
}
});
},
sameLineMapping: () => {
const c = Math.min(o.length, u.length), f = [];
for (let v = 0; v < c; v++)
f.push({
id: `mapping-${o[v].id}-${u[v].id}`,
source: o[v].id,
target: u[v].id
});
p(o, u, f, {
type: "SAME_LINE_MAPPING",
payload: {
previousMappings: d,
newMappings: f
}
});
},
sameNameMapping: (c) => {
const f = [];
o.forEach((v) => {
u.forEach((j) => {
if (!(typeof v[c] == "string" || typeof j[c] == "string"))
if (v[c]?.columnKey && j[c]?.columnKey)
v[c]?.value === j[c]?.value && f.push({
id: `mapping-${v.id}-${j.id}`,
source: v.id,
target: j.id
});
else
throw new Error("columnKey is required");
});
}), p(o, u, f, {
type: "SAME_NAME_MAPPING",
payload: {
name: c,
previousMappings: d,
newMappings: f
}
});
}
};
}, it = ({
type: r,
startX: t,
startY: i,
endX: s,
endY: l
}) => {
switch (r) {
case "bezier": {
const a = (s - t) / 2;
return `M ${t} ${i} C ${t + a} ${i}, ${s - a} ${l}, ${s} ${l}`;
}
case "straight":
return `M ${t} ${i} L ${s - 7} ${l}`;
case "step": {
const a = t + (s - t) / 2;
return `M ${t} ${i} L ${a} ${i} L ${a} ${l} L ${s} ${l}`;
}
default:
return `M ${t} ${i} L ${s - 7} ${l}`;
}
};
function dt({
ref: r,
sources: t = [],
targets: i = [],
mappings: s = [],
sourceColumns: l = [],
targetColumns: a = [],
lineType: o = "straight",
lineColor: u = "#009bff",
lineWidth: d = 1.5,
hoverLineColor: p = "#e3f3ff",
disabled: h = !1,
noDataComponent: b,
onBeforeSourceFieldRemove: E,
onBeforeTargetFieldRemove: y,
onAfterSourceFieldRemove: A,
onAfterTargetFieldRemove: _,
onAfterMappingLineRemove: D,
onBeforeMappingLineRemove: R,
onAfterMappingChange: Y,
onMappingChange: re
}) {
const X = ct({
sources: t,
targets: i,
mappings: s,
onStateChange: re || (() => {
})
}), {
sourceFields: oe,
targetFields: z,
mappings: H,
redrawCount: I,
redraw: c,
addMapping: f,
removeMapping: v
} = X;
Me(r, () => X);
const j = ee(null), m = ee(null), O = ee(null), L = ee(null), [se, G] = te(null), [V, ae] = te(0), [e, g] = te({
active: !1,
sourceId: "",
startX: 0,
startY: 0,
currentX: 0,
currentY: 0
}), w = () => {
c();
}, M = (k, x) => {
const T = L.current?.getBoundingClientRect();
if (!T) return;
const $ = L.current?.querySelector(`#connector-source-${x}`);
if (!$) return;
const S = $.getBoundingClientRect(), C = S.right - T.left, F = S.top + S.height / 2 - T.top;
g({
active: !0,
sourceId: x,
startX: C,
startY: F,
currentX: C,
currentY: F
}), k.preventDefault(), k.stopPropagation();
}, U = (k) => {
if (!e.active) return;
const x = j.current?.getBoundingClientRect();
if (!x) return;
const T = k.clientX - x.left, $ = k.clientY - x.top;
g({
...e,
currentX: T,
currentY: $
}), k.preventDefault(), k.stopPropagation();
}, N = (k) => {
if (!e.active || !L.current?.getBoundingClientRect()) return;
const T = j.current?.getBoundingClientRect();
if (!T) {
g({
...e,
active: !1
});
return;
}
const $ = k.clientX - T.left, S = k.clientY - T.top;
for (const C of z) {
const F = L.current?.querySelector(`#connector-target-${C.id}`);
if (!F) continue;
const B = F.getBoundingClientRect(), W = B.left - T.left, Z = B.top + B.height / 2 - T.top;
if (Math.sqrt(Math.pow($ - W, 2) + Math.pow(S - Z, 2)) <= 15) {
H.find((de) => de.source === e.sourceId && de.target === C.id) || f(e.sourceId, C.id);
break;
}
}
g({
...e,
active: !1
}), k.preventDefault(), k.stopPropagation();
}, J = le((k, x) => {
const T = L.current?.getBoundingClientRect();
if (!T) return null;
const $ = L.current?.querySelector(`#connector-source-${k}`), S = L.current?.querySelector(`#connector-target-${x}`);
if (!$ || !S || !j.current) return null;
const C = $.getBoundingClientRect(), F = S.getBoundingClientRect(), B = C.right - T.left, W = C.top + C.height / 2 - T.top, Z = F.left - T.left, ce = F.top + F.height / 2 - T.top;
return {
path: it({
type: o,
startX: B,
startY: W,
endX: Z,
endY: ce
}),
startX: B,
startY: W,
endX: Z,
endY: ce,
midX: B + (Z - B) / 2,
midY: W + (ce - W) / 2
};
}, [o]);
return ne(() => {
Y && Y({
sources: oe,
targets: z,
mappings: H
});
}, [H]), ne(() => {
if (m.current && O.current) {
const k = (T) => {
T.forEach(($) => {
if ($.type === "childList") {
const S = m.current, C = O.current;
if (!S || !C) return;
const F = Math.max(S.clientHeight, C.clientHeight);
ae(F);
}
});
}, x = new MutationObserver(k);
return x.observe(m.current, {
childList: !0,
subtree: !0
}), x.observe(O.current, {
childList: !0,
subtree: !0
}), () => {
x.disconnect();
};
}
}, []), ne(() => (window.addEventListener("resize", w), () => {
window.removeEventListener("resize", w);
}), []), /* @__PURE__ */ n.jsx("div", { className: "react-table-mapping", children: /* @__PURE__ */ n.jsxs("div", { ref: L, className: "mapping-container", style: {
minHeight: V !== 0 && V > 180 ? `${V}px` : "180px"
}, children: [
/* @__PURE__ */ n.jsx(ot, { sourceTableRef: m, sourceColumns: l, disabled: h, noDataComponent: b, handleDragStart: M, onBeforeSourceFieldRemove: E, onAfterSourceFieldRemove: A, tableMappingHook: X }),
/* @__PURE__ */ n.jsxs("svg", { ref: j, className: "mapping-svg", style: {
minHeight: V !== 0 && V > 180 ? `${V}px` : "180px"
}, onMouseMove: U, onMouseUp: N, onMouseLeave: (k) => {
N(k), G(null);
}, children: [
/* @__PURE__ */ n.jsx(Ie, { createPath: (k, x) => J(k, x) ?? {
path: "",
midX: 0,
midY: 0
}, lineColor: u, lineWidth: d, hoverLineColor: p, forceUpdate: I, hoveredMapping: se, isDragging: e?.active, disabled: h, removeMapping: v, setHoveredMapping: G, onBeforeMappingLineRemove: R, onAfterMappingLineRemove: D, mappings: H }),
e.active && /* @__PURE__ */ n.jsx("path", { d: o === "straight" ? `M ${e.startX} ${e.startY} L ${e.currentX} ${e.currentY}` : o === "step" ? `M ${e.startX} ${e.startY} L ${e.startX + (e.currentX - e.startX) / 2} ${e.startY} L ${e.startX + (e.currentX - e.startX) / 2} ${e.currentY} L ${e.currentX} ${e.currentY}` : `M ${e.startX} ${e.startY} C ${e.startX} ${e.startY}, ${e.currentX - 100} ${e.currentY}, ${e.currentX} ${e.currentY}`, stroke: u, strokeWidth: d, strokeDasharray: "5,5", fill: "none" }),
/* @__PURE__ */ n.jsxs("defs", { children: [
/* @__PURE__ */ n.jsx("marker", { id: "arrowhead-normal", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "4", markerHeight: "4", orient: "auto", children: /* @__PURE__ */ n.jsx("path", { d: "M 0 0 L 10 5 L 0 10", fill: "none", stroke: u || "#3b82f6", strokeWidth: "1.5" }) }),
/* @__PURE__ */ n.jsx("marker", { id: "arrowhead-hover", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "4", markerHeight: "4", orient: "auto", children: /* @__PURE__ */ n.jsx("path", { d: "M 0 0 L 10 5 L 0 10", fill: "none", stroke: p || "#60a5fa", strokeWidth: "1.5" }) })
] })
] }),
/* @__PURE__ */ n.jsx(at, { targetTableRef: O, targetColumns: a, disabled: h, noDataComponent: b, onBeforeTargetFieldRemove: y, onAfterTargetFieldRemove: _, tableMappingHook: X })
] }) });
}
export {
dt as TableMapping
};
//# sourceMappingURL=index.mjs.map