@declarion/react 0.87.0 → 0.88.0

package/dist-lib/components/detail-layout/DraggableChildrenTable.js

@@ -1,79 +1,79 @@
 import { coerceDisplayString as e } from "../../lib/display-value.js";
-import { fieldDisplayName as t } from "../../types/schema.js";
-import { Icon as n } from "../primitives/Icons.js";
-import { Btn as r } from "../primitives/Btn.js";
-import { IconBtn as i } from "../primitives/IconBtn.js";
-import { useText as a } from "../../hooks/useText.js";
-import { renderField as o } from "../fields/index.js";
-import { dataTableCellStyle as s, dataTableHeadCellStyle as c, dataTableStyle as l } from "../primitives/dataTableStyles.js";
-import { useCallback as u, useMemo as d, useRef as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { DndContext as h, PointerSensor as g, closestCenter as _, useSensor as v, useSensors as y } from "@dnd-kit/core";
-import { SortableContext as b, useSortable as x, verticalListSortingStrategy as S } from "@dnd-kit/sortable";
-import { CSS as C } from "@dnd-kit/utilities";
+import { fieldDisplayName as t, isUserEditableField as n } from "../../types/schema.js";
+import { Icon as r } from "../primitives/Icons.js";
+import { Btn as i } from "../primitives/Btn.js";
+import { IconBtn as a } from "../primitives/IconBtn.js";
+import { useText as o } from "../../hooks/useText.js";
+import { renderField as s } from "../fields/index.js";
+import { dataTableCellStyle as c, dataTableHeadCellStyle as l, dataTableStyle as u } from "../primitives/dataTableStyles.js";
+import { useCallback as d, useMemo as f, useRef as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { DndContext as g, PointerSensor as _, closestCenter as v, useSensor as y, useSensors as b } from "@dnd-kit/core";
+import { SortableContext as x, useSortable as S, verticalListSortingStrategy as C } from "@dnd-kit/sortable";
+import { CSS as w } from "@dnd-kit/utilities";
 //#region src/components/detail-layout/DraggableChildrenTable.tsx
-function w({ config: e, childEntity: i, schema: o, rows: s, onChange: x, validationErrors: C, refs: w }) {
-	let E = a(), D = f(null), O = e.position_field, k = e.columns, A = y(v(g, { activationConstraint: { distance: 5 } })), j = new Set(Array.isArray(e.foreign_key) ? e.foreign_key : [e.foreign_key]), M = k.filter((e) => {
-		if (j.has(e) || e === O) return !1;
-		let t = i.fields.get(e);
-		return !(!t || t.auto || t.primary || t.source);
-	}), N = new Set(k.filter((e) => {
-		if (e === O) return !0;
-		let t = i.fields.get(e);
-		return t && (t.auto || t.primary || t.source);
-	})), P = k.filter((e) => e !== O), F = d(() => s.filter((e) => !e._deleted).map((e) => e._key), [s]), I = u((e, t, n) => {
-		x(s.map((r) => r._key === e ? {
+function T({ config: e, childEntity: a, schema: s, rows: c, onChange: S, validationErrors: w, refs: T }) {
+	let D = o(), O = p(null), k = e.position_field, A = e.columns, j = b(y(_, { activationConstraint: { distance: 5 } })), M = new Set(Array.isArray(e.foreign_key) ? e.foreign_key : [e.foreign_key]), N = A.filter((e) => {
+		if (M.has(e) || e === k) return !1;
+		let t = a.fields.get(e);
+		return !(!t || !n(t));
+	}), P = new Set(A.filter((e) => {
+		if (e === k) return !0;
+		let t = a.fields.get(e);
+		return t && !n(t);
+	})), F = A.filter((e) => e !== k), I = f(() => c.filter((e) => !e._deleted).map((e) => e._key), [c]), L = d((e, t, n) => {
+		S(c.map((r) => r._key === e ? {
 			...r,
 			[t]: n,
 			_dirty: !0
 		} : r));
-	}, [s, x]), L = u(() => {
-		let t = s.filter((e) => !e._deleted).reduce((e, t) => {
-			let n = typeof t[O] == "number" ? t[O] : -1;
+	}, [c, S]), R = d(() => {
+		let t = c.filter((e) => !e._deleted).reduce((e, t) => {
+			let n = typeof t[k] == "number" ? t[k] : -1;
 			return Math.max(e, n);
 		}, -1), n = {
 			_key: crypto.randomUUID(),
 			_dirty: !0,
-			[O]: t + 1
+			[k]: t + 1
 		}, r = e.quick_add?.defaults ?? {};
-		for (let e of M) {
-			let t = i.fields.get(e);
+		for (let e of N) {
+			let t = a.fields.get(e);
 			t && (r[e] === void 0 ? t.default === void 0 ? t.type === "bool" && (n[e] = !1) : n[e] = t.default : n[e] = r[e]);
 		}
-		x([...s, n]);
+		S([...c, n]);
 	}, [
-		s,
-		x,
-		M,
-		i,
+		c,
+		S,
+		N,
+		a,
 		e.quick_add?.defaults,
-		O
-	]), R = u((e) => {
-		x(s.map((t) => t._key === e ? {
+		k
+	]), z = d((e) => {
+		S(c.map((t) => t._key === e ? {
 			...t,
 			_deleted: !0
 		} : t));
-	}, [s, x]), z = u((e) => {
-		x(s.map((t) => t._key === e ? {
+	}, [c, S]), B = d((e) => {
+		S(c.map((t) => t._key === e ? {
 			...t,
 			_deleted: !1
 		} : t));
-	}, [s, x]), B = u((e) => {
+	}, [c, S]), V = d((e) => {
 		let { active: t, over: n } = e;
 		if (!n || t.id === n.id) return;
-		let r = s.filter((e) => !e._deleted), i = s.filter((e) => e._deleted), a = r.findIndex((e) => e._key === String(t.id)), o = r.findIndex((e) => e._key === String(n.id));
+		let r = c.filter((e) => !e._deleted), i = c.filter((e) => e._deleted), a = r.findIndex((e) => e._key === String(t.id)), o = r.findIndex((e) => e._key === String(n.id));
 		if (a === -1 || o === -1) return;
-		let c = [...r], [l] = c.splice(a, 1);
-		c.splice(o, 0, l), x([...c.map((e, t) => ({
+		let s = [...r], [l] = s.splice(a, 1);
+		s.splice(o, 0, l), S([...s.map((e, t) => ({
 			...e,
-			[O]: t,
-			_dirty: e[O] !== t || e._dirty
+			[k]: t,
+			_dirty: e[k] !== t || e._dirty
 		})), ...i]);
 	}, [
-		s,
-		x,
-		O
-	]), V = u((e) => {
+		c,
+		S,
+		k
+	]), H = d((e) => {
 		let t = e.target, n = t.closest("td");
 		if (!n) return;
 		let r = n.closest("tr");
@@ -97,7 +97,7 @@ function w({ config: e, childEntity: i, schema: o, rows: s, onChange: x, validat
 			if (o < t.length - 1) {
 				let e = t[o + 1].cells[a]?.querySelector("input, select, textarea, [tabindex]");
 				e && e.focus();
-			} else L(), requestAnimationFrame(() => {
+			} else R(), requestAnimationFrame(() => {
 				let e = i.querySelectorAll("tr"), t = e[e.length - 1];
 				if (t) {
 					let e = t.querySelector("input, select, textarea, [tabindex]");
@@ -105,92 +105,92 @@ function w({ config: e, childEntity: i, schema: o, rows: s, onChange: x, validat
 				}
 			});
 		} else e.key === "Escape" && t.blur?.();
-	}, [L]), H = c;
-	return /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("div", {
+	}, [R]), U = l;
+	return /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("div", {
 		style: { overflowX: "auto" },
-		children: /* @__PURE__ */ p(h, {
-			sensors: A,
-			collisionDetection: _,
-			onDragEnd: B,
-			children: /* @__PURE__ */ m("table", {
-				ref: D,
-				style: l,
-				onKeyDown: V,
-				children: [/* @__PURE__ */ p("thead", { children: /* @__PURE__ */ m("tr", { children: [
-					/* @__PURE__ */ p("th", { style: {
-						...H,
+		children: /* @__PURE__ */ m(g, {
+			sensors: j,
+			collisionDetection: v,
+			onDragEnd: V,
+			children: /* @__PURE__ */ h("table", {
+				ref: O,
+				style: u,
+				onKeyDown: H,
+				children: [/* @__PURE__ */ m("thead", { children: /* @__PURE__ */ h("tr", { children: [
+					/* @__PURE__ */ m("th", { style: {
+						...U,
 						width: 32,
 						padding: "0 4px"
 					} }),
-					P.map((e) => {
-						let n = i.fields.get(e);
-						return /* @__PURE__ */ p("th", {
-							style: H,
-							children: n ? t(E, n, e, o.entities) : e
+					F.map((e) => {
+						let n = a.fields.get(e);
+						return /* @__PURE__ */ m("th", {
+							style: U,
+							children: n ? t(D, n, e, s.entities) : e
 						}, e);
 					}),
-					/* @__PURE__ */ p("th", { style: {
-						...H,
+					/* @__PURE__ */ m("th", { style: {
+						...U,
 						width: 40
 					} })
-				] }) }), /* @__PURE__ */ p(b, {
-					items: F,
-					strategy: S,
-					children: /* @__PURE__ */ p("tbody", { children: s.map((e) => /* @__PURE__ */ p(T, {
+				] }) }), /* @__PURE__ */ m(x, {
+					items: I,
+					strategy: C,
+					children: /* @__PURE__ */ m("tbody", { children: c.map((e) => /* @__PURE__ */ m(E, {
 						row: e,
-						columns: P,
-						editableColumns: M,
-						displayOnlyColumns: N,
-						childEntity: i,
-						validationErrors: C,
-						refs: w,
-						onCellChange: I,
-						onDelete: R,
-						onUndoDelete: z
+						columns: F,
+						editableColumns: N,
+						displayOnlyColumns: P,
+						childEntity: a,
+						validationErrors: w,
+						refs: T,
+						onCellChange: L,
+						onDelete: z,
+						onUndoDelete: B
 					}, e._key)) })
 				})]
 			})
 		})
-	}), /* @__PURE__ */ p("div", {
+	}), /* @__PURE__ */ m("div", {
 		style: { marginTop: 8 },
-		children: /* @__PURE__ */ p(r, {
+		children: /* @__PURE__ */ m(i, {
 			kind: "ghost",
 			size: "xs",
-			icon: /* @__PURE__ */ p(n.plus, { size: 12 }),
-			onClick: L,
-			children: E("record.row.add", "Add row")
+			icon: /* @__PURE__ */ m(r.plus, { size: 12 }),
+			onClick: R,
+			children: D("record.row.add", "Add row")
 		})
 	})] });
 }
-function T({ row: t, columns: r, editableColumns: c, displayOnlyColumns: l, childEntity: u, validationErrors: d, refs: f, onCellChange: h, onDelete: g, onUndoDelete: _ }) {
-	let v = a(), y = !!t._deleted, b = d?.[t._key], { attributes: S, listeners: w, setNodeRef: T, transform: E, transition: D, isDragging: O } = x({
+function E({ row: t, columns: n, editableColumns: i, displayOnlyColumns: l, childEntity: u, validationErrors: d, refs: f, onCellChange: p, onDelete: g, onUndoDelete: _ }) {
+	let v = o(), y = !!t._deleted, b = d?.[t._key], { attributes: x, listeners: C, setNodeRef: T, transform: E, transition: D, isDragging: O } = S({
 		id: t._key,
 		disabled: y
 	}), k = {
-		transform: C.Translate.toString(E),
+		transform: w.Translate.toString(E),
 		transition: D,
 		zIndex: O ? 10 : void 0,
 		opacity: O ? .5 : void 0
-	}, A = s, j = {
+	}, A = c, j = {
 		padding: "4px 4px",
 		borderBottom: "1px solid var(--divider)",
 		verticalAlign: "middle"
 	};
-	return /* @__PURE__ */ m("tr", {
+	return /* @__PURE__ */ h("tr", {
 		ref: T,
 		style: {
 			...k,
 			opacity: y ? .5 : k?.opacity ?? 1
 		},
 		children: [
-			/* @__PURE__ */ p("td", {
+			/* @__PURE__ */ m("td", {
 				style: {
 					padding: "4px 4px",
 					borderBottom: "1px solid var(--divider)",
 					width: 32,
 					verticalAlign: "middle"
 				},
-				children: !y && /* @__PURE__ */ p("button", {
+				children: !y && /* @__PURE__ */ m("button", {
 					type: "button",
 					style: {
 						cursor: "grab",
@@ -200,19 +200,19 @@ function T({ row: t, columns: r, editableColumns: c, displayOnlyColumns: l, chil
 						border: 0,
 						display: "inline-flex"
 					},
-					...S,
-					...w,
-					children: /* @__PURE__ */ p(n.grid, { size: 14 })
+					...x,
+					...C,
+					children: /* @__PURE__ */ m(r.grid, { size: 14 })
 				})
 			}),
-			r.map((n) => {
-				let r = u.fields.get(n), i = b?.includes(n), a = l.has(n), s = c.includes(n);
-				return y || a || !s ? /* @__PURE__ */ p("td", {
+			n.map((n) => {
+				let r = u.fields.get(n), a = b?.includes(n), o = l.has(n), c = i.includes(n);
+				return y || o || !c ? /* @__PURE__ */ m("td", {
 					style: {
 						...A,
 						textDecoration: y ? "line-through" : "none"
 					},
-					children: r ? o({
+					children: r ? s({
 						field: r,
 						fieldName: n,
 						value: t[n],
@@ -221,40 +221,40 @@ function T({ row: t, columns: r, editableColumns: c, displayOnlyColumns: l, chil
 						refs: f,
 						t: v
 					}) : e(t[n])
-				}, n) : /* @__PURE__ */ p("td", {
+				}, n) : /* @__PURE__ */ m("td", {
 					style: {
 						...j,
-						outline: i ? "1px solid var(--danger)" : "none",
+						outline: a ? "1px solid var(--danger)" : "none",
 						outlineOffset: -1,
-						borderRadius: i ? "var(--radius-sm)" : 0
+						borderRadius: a ? "var(--radius-sm)" : 0
 					},
-					title: i ? v("record.row.field_required", "{field} is required", { field: n }) : void 0,
-					children: r ? o({
+					title: a ? v("record.row.field_required", "{field} is required", { field: n }) : void 0,
+					children: r ? s({
 						field: r,
 						fieldName: n,
 						value: t[n],
 						mode: "edit",
-						onChange: (e) => h(t._key, n, e),
+						onChange: (e) => p(t._key, n, e),
 						record: t,
 						refs: f,
 						t: v
 					}) : e(t[n])
 				}, n);
 			}),
-			/* @__PURE__ */ p("td", {
+			/* @__PURE__ */ m("td", {
 				style: {
 					padding: "4px 8px",
 					borderBottom: "1px solid var(--divider)",
 					verticalAlign: "middle"
 				},
-				children: y ? /* @__PURE__ */ p(i, {
+				children: y ? /* @__PURE__ */ m(a, {
 					size: 24,
-					icon: /* @__PURE__ */ p(n.refresh, { size: 12 }),
+					icon: /* @__PURE__ */ m(r.refresh, { size: 12 }),
 					onClick: () => _(t._key),
 					title: v("record.row.undo_delete", "Undo delete")
-				}) : /* @__PURE__ */ p(i, {
+				}) : /* @__PURE__ */ m(a, {
 					size: 24,
-					icon: /* @__PURE__ */ p(n.trash, { size: 12 }),
+					icon: /* @__PURE__ */ m(r.trash, { size: 12 }),
 					onClick: () => g(t._key),
 					title: v("record.row.delete", "Delete row")
 				})
@@ -263,4 +263,4 @@ function T({ row: t, columns: r, editableColumns: c, displayOnlyColumns: l, chil
 	});
 }
 //#endregion
-export { w as DraggableChildrenTable };
+export { T as DraggableChildrenTable };