@undermuz/react-json-form
Version:
Generate JSON-based forms with react
215 lines (213 loc) • 7.53 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/array-form/ArrayFormTabs.tsx
var ArrayFormTabs_exports = {};
__export(ArrayFormTabs_exports, {
ArrayFormTabs: () => ArrayFormTabs
});
module.exports = __toCommonJS(ArrayFormTabs_exports);
var import_react = require("react");
var import_core = require("@dnd-kit/core");
var import_sortable = require("@dnd-kit/sortable");
var import_utilities = require("@dnd-kit/utilities");
var import_react_dom = require("react-dom");
var import_ui = require("../contexts/ui.js");
var import_ArrayFormItem = __toESM(require("./ArrayFormItem.js"));
var import_jsx_runtime = require("react/jsx-runtime");
var import_react2 = require("react");
var SortableTab = ({
tabId,
...props
}) => {
const Ui = (0, import_ui.useJsonFormUi)();
const { attributes, listeners, setNodeRef, transform, transition } = (0, import_sortable.useSortable)({ id: tabId });
const style = {
transform: import_utilities.CSS.Transform.toString(transform),
transition
};
if (!Ui?.Tab) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Ui.Tab,
{
...props,
ref: setNodeRef,
style,
...attributes,
...listeners
}
);
};
var TrashDroppable = () => {
const Ui = (0, import_ui.useJsonFormUi)();
const { isOver, setNodeRef } = (0, import_core.useDroppable)({
id: "trash"
});
if (!Ui?.ArrayForm?.TrashContainer) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Ui.ArrayForm.TrashContainer,
{
isOver,
ref: setNodeRef,
label: "\u041E\u0442\u043F\u0443\u0441\u0442\u0438\u0442\u0435 \u0447\u0442\u043E\u0431\u044B \u0443\u0434\u0430\u043B\u0438\u0442\u044C"
}
);
};
var SortableList = ({
tabs,
onSortEnd,
children
}) => {
const [activeId, setActiveId] = (0, import_react.useState)(null);
const sensors = (0, import_core.useSensors)(
(0, import_core.useSensor)(import_core.PointerSensor, {
activationConstraint: {
distance: 20
}
})
);
const currentIndex = (0, import_react.useMemo)(() => {
return tabs.findIndex((_i) => _i.id === activeId);
}, [tabs, activeId]);
const collisionDetectionStrategy = (0, import_react.useCallback)(
(args) => {
const pointerIntersections = (0, import_core.pointerWithin)(args);
const intersections = pointerIntersections.length > 0 ? (
// If there are droppables intersecting with the pointer, return those
pointerIntersections
) : (0, import_core.rectIntersection)(args);
let overId = (0, import_core.getFirstCollision)(intersections, "id");
if (overId === "trash") {
return intersections;
}
if (overId !== null) {
return (0, import_core.closestCenter)(args);
}
return [];
},
[activeId, tabs]
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_core.DndContext,
{
sensors,
collisionDetection: collisionDetectionStrategy,
onDragEnd: (event) => {
console.log("[onDragEnd]", event);
setActiveId(null);
onSortEnd(event);
},
onDragStart: (event) => {
setActiveId(event.active.id);
},
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_sortable.SortableContext,
{
id: "list",
items: tabs,
strategy: import_sortable.horizontalListSortingStrategy,
children
}
),
typeof document !== "undefined" && (0, import_react_dom.createPortal)(
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.DragOverlay, { children: currentIndex > -1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
SortableTab,
{
tabId: activeId,
label: `#${currentIndex + 1}`
}
) : null }),
document.body
),
activeId !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TrashDroppable, {})
]
}
);
};
var ArrayFormTabs = (props) => {
const {
value,
tab,
addTab,
removeTab,
changeTab,
setTabErrors,
sortTabs,
setTab,
fillArrayDefault,
onRef,
...rest
} = props;
const tabs = value;
const Ui = (0, import_ui.useJsonFormUi)();
const body = value.map((item) => {
return /* @__PURE__ */ (0, import_react2.createElement)(
import_ArrayFormItem.default,
{
...rest,
key: item.id,
id: item.id,
isShow: item.id === tab,
value: item,
onRef,
onChange: changeTab,
onError: setTabErrors
}
);
});
if (!Ui?.ArrayForm || !Ui.Tab || !Ui.Icons)
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: body });
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Ui.ArrayForm, { style: { position: "relative", zIndex: 1 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Ui.ArrayForm.Header, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ui.ArrayForm.Tabs, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableList, { tabs, onSortEnd: sortTabs, children: tabs.map((val, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
SortableTab,
{
label: `#${index + 1}`,
tabId: val.id,
active: tab === val.id,
onSelect: () => setTab(val.id)
},
val.id
)) }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Ui.ArrayForm.Tabs, { actions: true, children: [
(!fillArrayDefault || value.length > 1) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ui.Tab, { onSelect: () => removeTab(tab), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ui.Icons.Tabs.Remove, {}) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ui.Tab, { onSelect: addTab, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ui.Icons.Tabs.Add, {}) })
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ui.ArrayForm.Body, { children: body })
] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ArrayFormTabs
});