@dndbuilder.com/react
Version:
Drag and drop builder for React
433 lines (432 loc) • 13.6 kB
JavaScript
import { BlockType as k } from "../types/block.js";
import { Breakpoint as T } from "../types/responsive.js";
import { createRootBlock as m, createBlock as b, createId as u } from "../../../../utils.js";
import { createSlice as C } from "../../../../node_modules/.pnpm/@reduxjs_toolkit@2.5.1_react-redux@9.2.0_@types_react@19.0.10_react@19.0.0_redux@5.0.1__react@19.0.0/node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.js";
import { l as E } from "../../../../_virtual/lodash.js";
import f from "../../../../_virtual/cloneDeep.js";
import g from "../../../../_virtual/index.js";
const v = {
content: {
root: m()
},
selectedBlockId: null,
currentBreakpoint: T.DESKTOP,
currentLocale: "en"
}, B = C({
name: "builder",
// `createSlice` will infer the state type from the `initialState` argument
initialState: v,
reducers: {
// Set builder Content
setContent: (e, o) => {
if (E.isEmpty(o.payload)) {
e.content = {
root: m()
};
return;
}
e.content = o.payload;
},
// Set Header
setHeader: (e, o) => {
e.content.root.children.splice(0, 0, ...o.payload.map((t) => t.id)), o.payload.forEach((t) => {
e.content[t.id] = t;
});
},
// Clear builder Content
clearContent: (e) => {
e.content = {
root: m()
};
},
// Add a block to the selected page
addBlock: (e, o) => {
const { block: t, index: c, select: n = !0 } = o.payload, d = t.parentId;
e.content[t.id] = t, e.content[d].children.splice(
c ?? e.content[d].children.length,
0,
t.id
), e.selectedBlockId = n ? t.id : e.selectedBlockId;
},
// Add multiple blocks to the selected page
addBlocks: (e, o) => {
const { blocks: t, selectedBlockId: c, index: n } = o.payload;
t.forEach((d) => {
var r;
e.content[d.id] = d;
const l = d.parentId;
(r = e.content[l]) == null || r.children.splice(
n ?? e.content[l].children.length,
0,
d.id
);
}), e.selectedBlockId = c;
},
// Update a block
updateBlock: (e, o) => {
const { id: t, block: c } = o.payload;
e.content[t] = {
...e.content[t],
...typeof c == "function" ? c(e.content[t]) : c
};
},
// Duplicate a block
duplicateBlock: (e, o) => {
const t = o.payload.blockId, c = e.content[t], n = o.payload.parentId ?? c.parentId, d = e.content[c.parentId].children.findIndex(
(s) => s === t
), l = o.payload.newId ?? u(), r = ({
targetId: s,
targetParentId: a,
blockId: i,
blockIndex: p
}) => {
const I = e.content[s];
if (I.type === k.TABS) {
B.caseReducers.duplicateTab(e, {
payload: { blockId: s, parentId: a },
type: "builder/duplicateTab"
});
return;
}
const y = {
id: i ?? u(),
type: I.type,
parentId: a,
children: [],
settings: f(I.settings),
advancedSettings: f(I.advancedSettings)
};
e.content[y.id] = y, p ? e.content[a].children.splice(p, 0, y.id) : e.content[a].children.push(y.id), I.children.forEach(
(h) => r({ targetId: h, targetParentId: y.id })
);
};
r({
targetId: t,
targetParentId: n,
blockId: l,
blockIndex: d + 1
}), o.payload.select !== !1 && (e.selectedBlockId = l);
},
// Remove a block
removeBlock: (e, o) => {
const t = o.payload, c = (n) => {
const d = e.content[n], l = d.parentId;
e.content[l].children = e.content[l].children.filter(
(r) => r !== n
), d.children.forEach((r) => c(r)), delete e.content[n];
};
c(t);
},
// Move a block
moveBlock: (e, o) => {
const { sourceId: t, targetId: c, targetIndex: n } = o.payload, d = e.content[t], l = e.content[c], r = e.content[d.parentId].children, s = r.indexOf(t);
if (d.parentId === l.id) {
if (s === n) return;
const i = [...e.content[l.id].children];
i.splice(s, 1);
const p = n > s ? n - 1 : n;
i.splice(p, 0, t), e.content[l.id].children = i;
} else
e.content[d.parentId].children = r.filter(
(a) => a !== t
), e.content[l.id].children.splice(n, 0, t), d.parentId = l.id;
},
// Select block
selectBlock: (e, o) => {
e.selectedBlockId = o.payload;
},
// Unselect block
unselectBlock: (e) => {
e.selectedBlockId = null;
},
// Set current breakpoint
setCurrentBreakpoint: (e, o) => {
e.currentBreakpoint = o.payload;
},
// Set current language
setCurrentLanguage: (e, o) => {
e.currentLocale = o.payload;
},
// Set block settings
setBlockSettings: (e, o) => {
const { id: t, settings: c } = o.payload;
e.content[t].settings = c;
},
// Set block settings value by key
setBlockSettingsValueByKey: (e, o) => {
const { id: t, values: c } = o.payload;
c.forEach((n) => {
const d = n.key.replace("{{BREAKPOINT}}", e.currentBreakpoint).replace("{{LOCALE}}", e.currentLocale);
g.set(e.content[t], `settings.${d}`, n.value);
});
},
setSelectedBlockSettingsValueByKey: (e, o) => {
const t = o.payload, c = e.selectedBlockId;
if (!c)
throw new Error("No selected block");
t.forEach((n) => {
const d = n.key.replace("{{BREAKPOINT}}", e.currentBreakpoint).replace("{{LOCALE}}", e.currentLocale);
g.set(e.content[c], `settings.${d}`, n.value);
});
},
// Set block advance settings
setBlockAdvancedSettings: (e, o) => {
const { id: t, settings: c } = o.payload;
e.content[t].advancedSettings = c;
},
// Set block advance settings value by key
setBlockAdvancedSettingsValueByKey: (e, o) => {
const { id: t, values: c } = o.payload;
c.forEach((n) => {
const d = n.key.replace("{{BREAKPOINT}}", e.currentBreakpoint).replace("{{LOCALE}}", e.currentLocale);
g.set(e.content[t], `advancedSettings.${d}`, n.value);
});
},
// Set selected block advance settings value by key
setSelectedBlockAdvancedSettingsValueByKey: (e, o) => {
const t = o.payload, c = e.selectedBlockId;
if (!c)
throw new Error("No selected block");
t.forEach((n) => {
const d = n.key.replace("{{BREAKPOINT}}", e.currentBreakpoint).replace("{{LOCALE}}", e.currentLocale);
g.set(e.content[c], `advancedSettings.${d}`, n.value);
});
},
// Duplicate Tab
duplicateTab: (e, o) => {
var s;
const { blockId: t, parentId: c } = o.payload, n = f(e.content[t]);
if (n.type !== k.TABS)
throw new Error(`Block type is not '${k.TABS}'`);
const l = ((s = n == null ? void 0 : n.settings) == null ? void 0 : s.tabs).map((a) => ({
id: u(),
label: a.label,
children: a.children.map((i) => ({
id: i,
newId: u()
}))
})), r = b({
...n,
id: u(),
parentId: c ?? n.parentId,
children: [],
settings: {
...n.settings,
activeTabId: l[0].id,
tabs: l.reduce(
(a, i) => (a.push({
id: i.id,
label: i.label,
children: i.children.map((p) => p.newId)
}), a),
[]
)
}
});
e.content[r.id] = r, e.content[r.parentId].children.push(r.id), e.selectedBlockId = r.id, l.forEach((a) => {
a.children.forEach((i) => {
B.caseReducers.duplicateBlock(e, {
payload: {
blockId: i.id,
newId: i.newId,
parentId: r.id,
select: !1
},
type: "builder/duplicateBlock"
});
});
});
},
// Duplicate Tab Item
duplicateTabItem: (e, o) => {
var a, i;
const { blockId: t, tabIndex: c } = o.payload, n = e.content[t];
if (n.type !== k.TABS)
throw new Error(`Block type is not '${k.TABS}'`);
const d = (a = n == null ? void 0 : n.settings) == null ? void 0 : a.tabs, l = d[c];
if (!l)
return;
const r = (i = l.children) == null ? void 0 : i.map((p) => ({
id: p,
newId: u()
}));
r == null || r.forEach((p) => {
B.caseReducers.duplicateBlock(e, {
payload: { blockId: p.id, newId: p.newId, select: !1 },
type: "builder/duplicateBlock"
});
});
const s = {
id: u(),
label: l.label,
children: r == null ? void 0 : r.map((p) => p.newId)
};
d.splice(c + 1, 0, s);
},
// Remove Tab Item
removeTabItem: (e, o) => {
var s;
const { blockId: t, tabIndex: c } = o.payload, n = e.content[t];
if (n.type !== k.TABS)
throw new Error(`Block type is not '${k.TABS}'`);
const d = (s = n == null ? void 0 : n.settings) == null ? void 0 : s.tabs;
d[c].children.forEach((a) => {
B.caseReducers.removeBlock(e, {
payload: a,
type: "builder/removeBlock"
});
}), d.splice(c, 1);
const r = c - 1 >= 0 ? c - 1 : c + 1 < d.length ? c + 1 : 0;
n.settings.activeTabId = d[r].id;
},
// Copy to clipboard
copyToClipboard: (e, o) => {
const t = e.content[o.payload.blockId];
if (!t)
return;
function c(l) {
return !l || !l.length ? [] : l.map((s) => {
const a = e.content[s];
return {
...a,
children: c(a.children)
};
});
}
const n = c(t.children), d = {
...t,
children: n
};
navigator.clipboard && navigator.clipboard.writeText(JSON.stringify(d)).then(() => {
}).catch((l) => {
});
},
insertFromClipboard: (e, o) => {
const { data: t, blockId: c, containerSettings: n } = o.payload, d = B.caseReducers.getClosestContainerBlock(e, {
payload: { blockId: c, containerSettings: n, data: t },
type: "builder/getClosestContainerBlock"
}), l = {
...t,
id: u(),
parentId: d.id
}, r = [], s = (a, i) => !a || !a.children || !a.children.length ? [] : a.children.map((p) => {
const I = u(), y = {
...p,
id: I,
parentId: a.id
};
return i && i.type === k.TABS && (i.settings.tabs = i.settings.tabs.map((h) => ({
...h,
children: h.children.map((S) => S === p.id ? I : S)
}))), r.push({
...y,
children: s(y, p)
}), y.id;
});
r.push({
...l,
children: s(l)
}), B.caseReducers.addBlocks(e, {
payload: { blocks: r, selectedBlockId: l.id },
type: "builder/addBlocks"
});
},
// Get closest Container block
getClosestContainerBlock: (e, o) => {
const { blockId: t, containerSettings: c, data: n } = o.payload, d = e.content[t];
if (!d) {
const l = b({
type: k.CONTAINER,
id: u(),
parentId: "root",
children: [],
settings: c.settings,
advancedSettings: c.advancedSettings
});
return B.caseReducers.addBlock(e, {
payload: {
block: l,
select: !1
},
type: "builder/addBlock"
}), l;
}
if (d.type === k.CONTAINER || t === "root" && (n == null ? void 0 : n.type) === k.CONTAINER)
return d;
if (t === "root" && (n == null ? void 0 : n.type) !== k.CONTAINER) {
const l = b({
type: k.CONTAINER,
id: u(),
parentId: "root",
children: [],
settings: c.settings,
advancedSettings: c.advancedSettings
});
return B.caseReducers.addBlock(e, {
payload: {
block: l,
select: !1
},
type: "builder/addBlock"
}), l;
}
return B.caseReducers.getClosestContainerBlock(e, {
payload: { blockId: d.parentId, containerSettings: c },
type: "builder/getClosestContainerBlock"
});
}
}
}), {
setContent: K,
setHeader: V,
clearContent: P,
addBlock: $,
addBlocks: j,
updateBlock: D,
duplicateBlock: F,
removeBlock: H,
moveBlock: J,
selectBlock: q,
unselectBlock: z,
setCurrentBreakpoint: G,
setCurrentLanguage: M,
setBlockSettings: Q,
setBlockSettingsValueByKey: U,
setSelectedBlockSettingsValueByKey: W,
setBlockAdvancedSettings: X,
setBlockAdvancedSettingsValueByKey: Y,
setSelectedBlockAdvancedSettingsValueByKey: Z,
duplicateTab: _,
duplicateTabItem: ee,
removeTabItem: te,
copyToClipboard: ne,
insertFromClipboard: ce
} = B.actions;
export {
$ as addBlock,
j as addBlocks,
B as builderSlice,
P as clearContent,
ne as copyToClipboard,
F as duplicateBlock,
_ as duplicateTab,
ee as duplicateTabItem,
ce as insertFromClipboard,
J as moveBlock,
H as removeBlock,
te as removeTabItem,
q as selectBlock,
X as setBlockAdvancedSettings,
Y as setBlockAdvancedSettingsValueByKey,
Q as setBlockSettings,
U as setBlockSettingsValueByKey,
K as setContent,
G as setCurrentBreakpoint,
M as setCurrentLanguage,
V as setHeader,
Z as setSelectedBlockAdvancedSettingsValueByKey,
W as setSelectedBlockSettingsValueByKey,
z as unselectBlock,
D as updateBlock
};
//# sourceMappingURL=builder-slice.js.map