easy-email-extensions 3.0.14 → 3.1.0
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/BlockLayer/components/BlockTree/index.d.ts +38 -17
- package/lib/BlockLayer/components/BlockTree/transparentImage.d.ts +1 -0
- package/lib/BlockLayer/hooks/useAvatarWrapperDrop.d.ts +24 -0
- package/lib/BlockLayer/index.d.ts +1 -0
- package/lib/components/Form/index.d.ts +16 -16
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -2
- package/lib/index.js.map +1 -1
- package/lib/index2.js +479 -445
- package/lib/index2.js.map +1 -1
- package/lib/index3.js +1 -2
- package/lib/index3.js.map +1 -1
- package/lib/style.css +1 -1
- package/package.json +4 -8
- package/lib/BlockLayer/components/BlockTree/components/BlockTreeItem/index.d.ts +0 -23
- package/lib/BlockLayer/components/BlockTree/components/TreeCollapse.d.ts +0 -6
package/lib/index2.js
CHANGED
@@ -54,15 +54,14 @@ var __async = (__this, __arguments, generator) => {
|
|
54
54
|
});
|
55
55
|
};
|
56
56
|
import * as React from "react";
|
57
|
-
import React__default, {
|
58
|
-
import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useEditorProps, getShadowRoot, FIXED_CONTAINER_ID, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
|
59
|
-
import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml,
|
60
|
-
import { ReactSortable } from "react-sortablejs";
|
61
|
-
import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
|
57
|
+
import React__default, { Children, isValidElement, cloneElement, createContext, useContext, Component, useMemo, memo, forwardRef, useEffect, useRef, useLayoutEffect, useState, createRef, useImperativeHandle, PureComponent, useCallback, useReducer, createElement, Suspense } from "react";
|
58
|
+
import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useEditorProps, getShadowRoot, FIXED_CONTAINER_ID, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_ID, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
|
59
|
+
import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getNodeIdxFromClassName, getParentIdx, getNodeIdxClassName, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
|
62
60
|
import ReactDOM, { findDOMNode, createPortal } from "react-dom";
|
63
|
-
|
64
|
-
|
65
|
-
|
61
|
+
import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
|
62
|
+
var index$2 = "";
|
63
|
+
const title = "_title_pteer_1";
|
64
|
+
var styles$6 = {
|
66
65
|
title
|
67
66
|
};
|
68
67
|
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
@@ -5498,313 +5497,6 @@ function EyeIcon$1({
|
|
5498
5497
|
iconName: "icon-eye"
|
5499
5498
|
});
|
5500
5499
|
}
|
5501
|
-
const treeNodeList = "_treeNodeList_7a1ah_1";
|
5502
|
-
const treeNodeWrapper = "_treeNodeWrapper_7a1ah_6";
|
5503
|
-
const treeNode = "_treeNode_7a1ah_1";
|
5504
|
-
const treeNodeSelected = "_treeNodeSelected_7a1ah_18";
|
5505
|
-
const treeNodeTitle = "_treeNodeTitle_7a1ah_21";
|
5506
|
-
var styles$8 = {
|
5507
|
-
treeNodeList,
|
5508
|
-
treeNodeWrapper,
|
5509
|
-
treeNode,
|
5510
|
-
treeNodeSelected,
|
5511
|
-
treeNodeTitle
|
5512
|
-
};
|
5513
|
-
const TreeCollapse = React__default.memo(({ expand, setExpand, hasChildren }) => {
|
5514
|
-
const onToggle = useCallback(() => {
|
5515
|
-
setExpand((v) => !v);
|
5516
|
-
}, [setExpand]);
|
5517
|
-
if (!hasChildren)
|
5518
|
-
return /* @__PURE__ */ React__default.createElement(IconFont, {
|
5519
|
-
size: 12,
|
5520
|
-
iconName: "icon-dot",
|
5521
|
-
onClickCapture: onToggle
|
5522
|
-
});
|
5523
|
-
if (expand) {
|
5524
|
-
return /* @__PURE__ */ React__default.createElement(IconFont, {
|
5525
|
-
size: 12,
|
5526
|
-
iconName: "icon-minus-square",
|
5527
|
-
onClickCapture: onToggle
|
5528
|
-
});
|
5529
|
-
}
|
5530
|
-
return /* @__PURE__ */ React__default.createElement(IconFont, {
|
5531
|
-
size: 12,
|
5532
|
-
iconName: "icon-plus-square",
|
5533
|
-
onClickCapture: onToggle
|
5534
|
-
});
|
5535
|
-
});
|
5536
|
-
function classnames$1(...rest) {
|
5537
|
-
return rest.filter((item2) => typeof item2 === "string").join(" ");
|
5538
|
-
}
|
5539
|
-
const DATA_ATTRIBUTE_ID = "data-tree-node-id";
|
5540
|
-
const DATA_ATTRIBUTE_INDEX = "data-tree-node-index";
|
5541
|
-
function BlockTreeItem(props) {
|
5542
|
-
var _a, _b;
|
5543
|
-
const {
|
5544
|
-
nodeData,
|
5545
|
-
renderTitle,
|
5546
|
-
defaultExpandAll,
|
5547
|
-
onDragStart,
|
5548
|
-
onDragMove,
|
5549
|
-
onDragEnd,
|
5550
|
-
onSpill,
|
5551
|
-
indent,
|
5552
|
-
index: index2,
|
5553
|
-
onSelect: handleSelect,
|
5554
|
-
onMouseEnter: handleMouseEnter,
|
5555
|
-
onContextMenu: handleContextMenu
|
5556
|
-
} = props;
|
5557
|
-
const [expand, setExpand] = useState(Boolean(defaultExpandAll));
|
5558
|
-
const ulRef = useRef(null);
|
5559
|
-
const initedRef = useRef(false);
|
5560
|
-
useEffect(() => {
|
5561
|
-
const ulEle = ulRef.current;
|
5562
|
-
if (!ulEle)
|
5563
|
-
return;
|
5564
|
-
if (!initedRef.current) {
|
5565
|
-
initedRef.current = true;
|
5566
|
-
if (!expand) {
|
5567
|
-
ulEle.style.setProperty("max-height", "0px");
|
5568
|
-
}
|
5569
|
-
return;
|
5570
|
-
}
|
5571
|
-
if (expand) {
|
5572
|
-
const onTransitionEnd = () => {
|
5573
|
-
ulEle.style.removeProperty("max-height");
|
5574
|
-
ulEle.removeEventListener("transitionend", onTransitionEnd);
|
5575
|
-
};
|
5576
|
-
ulEle.style.setProperty("transition", "none");
|
5577
|
-
ulEle.style.removeProperty("max-height");
|
5578
|
-
const maxHeight = ulEle.getBoundingClientRect().height;
|
5579
|
-
ulEle.style.setProperty("max-height", "0px");
|
5580
|
-
ulEle.addEventListener("transitionend", onTransitionEnd);
|
5581
|
-
requestAnimationFrame(() => {
|
5582
|
-
ulEle.style.setProperty("transition", "all .3s ease-out");
|
5583
|
-
ulEle.style.setProperty("max-height", maxHeight + "px");
|
5584
|
-
});
|
5585
|
-
} else {
|
5586
|
-
ulEle.style.setProperty("transition", "none");
|
5587
|
-
const maxHeight = ulEle.getBoundingClientRect().height;
|
5588
|
-
ulEle.style.setProperty("max-height", maxHeight + "px");
|
5589
|
-
requestAnimationFrame(() => {
|
5590
|
-
ulEle.style.setProperty("transition", "all .3s ease-out");
|
5591
|
-
ulEle.style.setProperty("max-height", "0px");
|
5592
|
-
});
|
5593
|
-
}
|
5594
|
-
}, [expand]);
|
5595
|
-
const onStart = useCallback((evt, sortable, store) => {
|
5596
|
-
if (onDragStart) {
|
5597
|
-
onDragStart(evt, sortable, store);
|
5598
|
-
}
|
5599
|
-
setExpand(false);
|
5600
|
-
}, [onDragStart]);
|
5601
|
-
const onSelect = useCallback((ev) => {
|
5602
|
-
ev.stopPropagation();
|
5603
|
-
handleSelect(nodeData.id);
|
5604
|
-
}, [nodeData.id, handleSelect]);
|
5605
|
-
const onMouseEnter = useCallback((ev) => {
|
5606
|
-
handleMouseEnter && handleMouseEnter(nodeData.id, ev);
|
5607
|
-
}, [nodeData.id, handleMouseEnter]);
|
5608
|
-
const onContextMenu = useCallback((ev) => {
|
5609
|
-
handleContextMenu && handleContextMenu(nodeData, ev);
|
5610
|
-
}, [handleContextMenu, nodeData]);
|
5611
|
-
return /* @__PURE__ */ React__default.createElement("li", {
|
5612
|
-
className: styles$8.treeNodeWrapper
|
5613
|
-
}, /* @__PURE__ */ React__default.createElement(ReactSortable, __spreadValues({
|
5614
|
-
revertOnSpill: true,
|
5615
|
-
list: [{ id: nodeData.id }],
|
5616
|
-
setList: () => {
|
5617
|
-
},
|
5618
|
-
onMove: onDragMove,
|
5619
|
-
onEnd: onDragEnd,
|
5620
|
-
onStart,
|
5621
|
-
onSpill
|
5622
|
-
}, {
|
5623
|
-
animation: 150,
|
5624
|
-
fallbackOnBody: true,
|
5625
|
-
swapThreshold: 0.65,
|
5626
|
-
ghostClass: "ghost",
|
5627
|
-
group: "shared"
|
5628
|
-
}), /* @__PURE__ */ React__default.createElement("div", __spreadValues({
|
5629
|
-
onMouseEnter,
|
5630
|
-
onContextMenu,
|
5631
|
-
className: classnames$1(styles$8.treeNode)
|
5632
|
-
}, {
|
5633
|
-
[DATA_ATTRIBUTE_ID]: nodeData.id,
|
5634
|
-
[DATA_ATTRIBUTE_INDEX]: index2
|
5635
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
5636
|
-
style: { width: indent * 18 }
|
5637
|
-
}), /* @__PURE__ */ React__default.createElement(TreeCollapse, {
|
5638
|
-
hasChildren: Boolean((_a = nodeData.children) == null ? void 0 : _a.length),
|
5639
|
-
expand,
|
5640
|
-
setExpand
|
5641
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
5642
|
-
className: styles$8.treeNodeTitle,
|
5643
|
-
onClick: onSelect
|
5644
|
-
}, renderTitle(nodeData)), /* @__PURE__ */ React__default.createElement(IconFont, {
|
5645
|
-
iconName: "icon-drag",
|
5646
|
-
style: { cursor: "grab", fontSize: 12 }
|
5647
|
-
}))), /* @__PURE__ */ React__default.createElement("ul", {
|
5648
|
-
ref: ulRef,
|
5649
|
-
style: { overflow: "hidden" },
|
5650
|
-
className: styles$8.treeNodeList
|
5651
|
-
}, (_b = nodeData.children) == null ? void 0 : _b.map((item2, index22) => {
|
5652
|
-
return /* @__PURE__ */ React__default.createElement(BlockTreeItem, {
|
5653
|
-
key: index22,
|
5654
|
-
index: index22,
|
5655
|
-
onSelect: handleSelect,
|
5656
|
-
onMouseEnter: handleMouseEnter,
|
5657
|
-
onContextMenu: handleContextMenu,
|
5658
|
-
nodeData: item2,
|
5659
|
-
renderTitle,
|
5660
|
-
indent: indent + 1,
|
5661
|
-
defaultExpandAll,
|
5662
|
-
onDragStart,
|
5663
|
-
onDragMove,
|
5664
|
-
onDragEnd,
|
5665
|
-
onSpill
|
5666
|
-
});
|
5667
|
-
})));
|
5668
|
-
}
|
5669
|
-
const getCurrenTreeNode = (ele, rootEle) => {
|
5670
|
-
if (ele.classList.contains(styles$8.treeNode))
|
5671
|
-
return ele;
|
5672
|
-
if (ele.parentElement && rootEle && rootEle.contains(ele.parentElement))
|
5673
|
-
return getCurrenTreeNode(ele.parentElement, rootEle);
|
5674
|
-
return null;
|
5675
|
-
};
|
5676
|
-
function BlockTree(props) {
|
5677
|
-
const [eleRef, setEleRef] = useState(null);
|
5678
|
-
const [selectedId, setSelectedId] = useState(props.selectedId);
|
5679
|
-
const dropDataRef = useRef(null);
|
5680
|
-
const {
|
5681
|
-
treeData,
|
5682
|
-
allowDrop,
|
5683
|
-
onDrop,
|
5684
|
-
onSelect,
|
5685
|
-
onMouseEnter,
|
5686
|
-
onMouseLeave,
|
5687
|
-
onContextMenu
|
5688
|
-
} = props;
|
5689
|
-
const treeDataMap = useMemo(() => {
|
5690
|
-
const map2 = {};
|
5691
|
-
const loop2 = (node) => {
|
5692
|
-
if (map2[node.id]) {
|
5693
|
-
console.warn(`have same id ${node.id}`);
|
5694
|
-
}
|
5695
|
-
map2[node.id] = node;
|
5696
|
-
if (node.children) {
|
5697
|
-
node.children.forEach((item2) => {
|
5698
|
-
loop2(item2);
|
5699
|
-
});
|
5700
|
-
}
|
5701
|
-
};
|
5702
|
-
treeData.forEach((item2) => {
|
5703
|
-
loop2(item2);
|
5704
|
-
});
|
5705
|
-
return map2;
|
5706
|
-
}, [treeData]);
|
5707
|
-
useEffect(() => {
|
5708
|
-
setSelectedId(props.selectedId);
|
5709
|
-
}, [props.selectedId]);
|
5710
|
-
useEffect(() => {
|
5711
|
-
if (!eleRef)
|
5712
|
-
return;
|
5713
|
-
if (selectedId) {
|
5714
|
-
const node = eleRef.querySelector("." + styles$8.treeNodeSelected);
|
5715
|
-
if (node) {
|
5716
|
-
node.classList.remove(styles$8.treeNodeSelected);
|
5717
|
-
}
|
5718
|
-
setTimeout(() => {
|
5719
|
-
const selectedNode = eleRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${selectedId}"]`);
|
5720
|
-
if (selectedNode) {
|
5721
|
-
selectedNode.classList.add(styles$8.treeNodeSelected);
|
5722
|
-
selectedNode.scrollIntoView({
|
5723
|
-
block: "center",
|
5724
|
-
behavior: "smooth"
|
5725
|
-
});
|
5726
|
-
}
|
5727
|
-
}, 50);
|
5728
|
-
}
|
5729
|
-
}, [eleRef, selectedId]);
|
5730
|
-
const onDragStart = useCallback((evt, sortable, store) => {
|
5731
|
-
}, []);
|
5732
|
-
const onDragMove = useCallback((evt, originalEvent) => {
|
5733
|
-
const dragEle = getCurrenTreeNode(evt.dragged);
|
5734
|
-
const dropEle = getCurrenTreeNode(evt.related);
|
5735
|
-
if (dropEle && dragEle) {
|
5736
|
-
const dragId = dragEle.getAttribute(DATA_ATTRIBUTE_ID);
|
5737
|
-
const dragIndex = dragEle.getAttribute(DATA_ATTRIBUTE_INDEX);
|
5738
|
-
const dropId = dropEle.getAttribute(DATA_ATTRIBUTE_ID);
|
5739
|
-
const dropIndex = dropEle.getAttribute(DATA_ATTRIBUTE_INDEX);
|
5740
|
-
const currentDropData = {
|
5741
|
-
dragNode: treeDataMap[dragId],
|
5742
|
-
dragIndex: Number(dragIndex),
|
5743
|
-
dropIndex: Number(dropIndex),
|
5744
|
-
dropNode: treeDataMap[dropId],
|
5745
|
-
willInsertAfter: evt.willInsertAfter,
|
5746
|
-
event: originalEvent
|
5747
|
-
};
|
5748
|
-
const isAllowDrop = allowDrop(currentDropData);
|
5749
|
-
if (isAllowDrop) {
|
5750
|
-
dropEle.classList.add(styles$8.treeNodeDrop);
|
5751
|
-
dropDataRef.current = currentDropData;
|
5752
|
-
return true;
|
5753
|
-
}
|
5754
|
-
}
|
5755
|
-
return false;
|
5756
|
-
}, [allowDrop, treeDataMap]);
|
5757
|
-
const onDragEnd = useCallback((evt) => {
|
5758
|
-
if (dropDataRef.current) {
|
5759
|
-
onDrop(dropDataRef.current);
|
5760
|
-
}
|
5761
|
-
dropDataRef.current = null;
|
5762
|
-
}, [dropDataRef, , onDrop]);
|
5763
|
-
const onSpill = useCallback((evt) => {
|
5764
|
-
dropDataRef.current = null;
|
5765
|
-
}, []);
|
5766
|
-
return useMemo(() => /* @__PURE__ */ React__default.createElement("div", {
|
5767
|
-
ref: setEleRef,
|
5768
|
-
className: styles$8.tree,
|
5769
|
-
onMouseLeave
|
5770
|
-
}, props.treeData.map((item2) => /* @__PURE__ */ React__default.createElement("ul", {
|
5771
|
-
key: item2.id,
|
5772
|
-
className: styles$8.treeNodeList
|
5773
|
-
}, /* @__PURE__ */ React__default.createElement(BlockTreeItem, {
|
5774
|
-
nodeData: item2,
|
5775
|
-
renderTitle: props.renderTitle,
|
5776
|
-
indent: 0,
|
5777
|
-
index: 0,
|
5778
|
-
onSelect,
|
5779
|
-
onMouseEnter,
|
5780
|
-
onContextMenu,
|
5781
|
-
defaultExpandAll: Boolean(props.defaultExpandAll),
|
5782
|
-
onDragStart,
|
5783
|
-
onDragMove,
|
5784
|
-
onDragEnd,
|
5785
|
-
onSpill
|
5786
|
-
})))), [
|
5787
|
-
onContextMenu,
|
5788
|
-
onDragEnd,
|
5789
|
-
onDragMove,
|
5790
|
-
onDragStart,
|
5791
|
-
onMouseEnter,
|
5792
|
-
onMouseLeave,
|
5793
|
-
onSelect,
|
5794
|
-
onSpill,
|
5795
|
-
props.defaultExpandAll,
|
5796
|
-
props.renderTitle,
|
5797
|
-
props.treeData
|
5798
|
-
]);
|
5799
|
-
}
|
5800
|
-
const wrap$1 = "_wrap_aul3a_1";
|
5801
|
-
const listItem = "_listItem_aul3a_13";
|
5802
|
-
const contextmenuMark = "_contextmenuMark_aul3a_23";
|
5803
|
-
var styles$7 = {
|
5804
|
-
wrap: wrap$1,
|
5805
|
-
listItem,
|
5806
|
-
contextmenuMark
|
5807
|
-
};
|
5808
5500
|
function _extends$f() {
|
5809
5501
|
_extends$f = Object.assign || function(target2) {
|
5810
5502
|
for (var i2 = 1; i2 < arguments.length; i2++) {
|
@@ -21735,7 +21427,7 @@ var __assign$y = globalThis && globalThis.__assign || function() {
|
|
21735
21427
|
};
|
21736
21428
|
return __assign$y.apply(this, arguments);
|
21737
21429
|
};
|
21738
|
-
function wrapper
|
21430
|
+
function wrapper(picker, displayName) {
|
21739
21431
|
var _a;
|
21740
21432
|
return _a = function(_super) {
|
21741
21433
|
__extends$5(PickerWrapper, _super);
|
@@ -21748,11 +21440,11 @@ function wrapper$1(picker, displayName) {
|
|
21748
21440
|
return PickerWrapper;
|
21749
21441
|
}(React__default.Component), _a.displayName = displayName, _a;
|
21750
21442
|
}
|
21751
|
-
var DatePicker = wrapper
|
21752
|
-
var MonthPicker = wrapper
|
21753
|
-
var YearPicker = wrapper
|
21754
|
-
var WeekPicker = wrapper
|
21755
|
-
var QuarterPicker = wrapper
|
21443
|
+
var DatePicker = wrapper(React__default.createElement(DatePicker$2, null), "DatePicker");
|
21444
|
+
var MonthPicker = wrapper(React__default.createElement(MonthPicker$1, null), "MonthPicker");
|
21445
|
+
var YearPicker = wrapper(React__default.createElement(YearPicker$1, null), "YearPicker");
|
21446
|
+
var WeekPicker = wrapper(React__default.createElement(WeekPicker$1, null), "WeekPicker");
|
21447
|
+
var QuarterPicker = wrapper(React__default.createElement(QuarterPicker$1, null), "QuarterPicker");
|
21756
21448
|
var RangePicker = PickerRange;
|
21757
21449
|
Object.assign(DatePicker, { MonthPicker, YearPicker, WeekPicker, QuarterPicker, RangePicker });
|
21758
21450
|
var DatePicker$1 = DatePicker;
|
@@ -27893,7 +27585,7 @@ var __rest$2 = globalThis && globalThis.__rest || function(s, e) {
|
|
27893
27585
|
}
|
27894
27586
|
return t;
|
27895
27587
|
};
|
27896
|
-
function TabPane$
|
27588
|
+
function TabPane$1(props, ref) {
|
27897
27589
|
var shouldRender = useRef(false);
|
27898
27590
|
var getPrefixCls = useContext(ConfigContext).getPrefixCls;
|
27899
27591
|
var children = props.children, className = props.className, style = props.style, lazyload = props.lazyload, isActive = props.isActive, rest = __rest$2(props, ["children", "className", "style", "lazyload", "isActive"]);
|
@@ -27901,10 +27593,10 @@ function TabPane$2(props, ref) {
|
|
27901
27593
|
shouldRender.current = lazyload ? shouldRender.current || isActive : true;
|
27902
27594
|
return shouldRender.current && React__default.createElement("div", __assign$b({ ref }, omit$1(rest, ["destroyOnHide", "title", "closable"]), { className: cs(prefixCls2 + "-pane", className), style }), children);
|
27903
27595
|
}
|
27904
|
-
var TabPaneRef = React__default.forwardRef(TabPane$
|
27596
|
+
var TabPaneRef = React__default.forwardRef(TabPane$1);
|
27905
27597
|
TabPaneRef.displayName = "TabPane";
|
27906
27598
|
TabPaneRef.isTabPane = true;
|
27907
|
-
var TabPane$
|
27599
|
+
var TabPane$2 = TabPaneRef;
|
27908
27600
|
function DropdownIcon(props) {
|
27909
27601
|
var prefixCls2 = props.prefixCls, currentOffset = props.currentOffset, headerSize = props.headerSize, headerWrapperSize = props.headerWrapperSize, getTitleRef = props.getTitleRef, paneChildren = props.paneChildren, direction = props.direction;
|
27910
27602
|
var paneKeys = paneChildren.map(function(child) {
|
@@ -28609,7 +28301,7 @@ function Tabs(baseProps, ref) {
|
|
28609
28301
|
var ForwardRefTabs = React__default.forwardRef(Tabs);
|
28610
28302
|
var TabsComponent = ForwardRefTabs;
|
28611
28303
|
TabsComponent.displayName = "Tabs";
|
28612
|
-
TabsComponent.TabPane = TabPane$
|
28304
|
+
TabsComponent.TabPane = TabPane$2;
|
28613
28305
|
var Tabs$1 = TabsComponent;
|
28614
28306
|
function ownKeys$3(object, enumerableOnly) {
|
28615
28307
|
var keys2 = Object.keys(object);
|
@@ -30501,10 +30193,10 @@ function TreeList(props, ref) {
|
|
30501
30193
|
treeRef.current.handleCheck && treeRef.current.handleCheck(!checked, node.props._key, e);
|
30502
30194
|
}
|
30503
30195
|
}, []);
|
30504
|
-
var handleLoadMore = useCallback(function(
|
30196
|
+
var handleLoadMore = useCallback(function(treeNode) {
|
30505
30197
|
if (isFunction$5(loadMore)) {
|
30506
|
-
var dataRef =
|
30507
|
-
return loadMore(
|
30198
|
+
var dataRef = treeNode.props.dataRef;
|
30199
|
+
return loadMore(treeNode, dataRef);
|
30508
30200
|
}
|
30509
30201
|
return [];
|
30510
30202
|
}, [loadMore]);
|
@@ -30942,6 +30634,138 @@ IconUpload.defaultProps = {
|
|
30942
30634
|
};
|
30943
30635
|
IconUpload.displayName = "IconUpload";
|
30944
30636
|
var IconUpload$1 = IconUpload;
|
30637
|
+
const transparentImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
|
30638
|
+
const img = new Image();
|
30639
|
+
img.width = 0;
|
30640
|
+
img.height = 0;
|
30641
|
+
img.src = transparentImage;
|
30642
|
+
function BlockTree(props) {
|
30643
|
+
const [blockTreeRef, setBlockTreeRef] = useState(null);
|
30644
|
+
const [selectedId, setSelectedId] = useState(props.selectedId);
|
30645
|
+
const dragNode = useRef(null);
|
30646
|
+
const { treeData, allowDrop, onContextMenu } = props;
|
30647
|
+
useEffect(() => {
|
30648
|
+
setSelectedId(props.selectedId);
|
30649
|
+
}, [props.selectedId]);
|
30650
|
+
const onDragStart = useCallback((e, node) => {
|
30651
|
+
var _a;
|
30652
|
+
e.dataTransfer.dropEffect = "none";
|
30653
|
+
const dragNodeData = node.props.dataRef;
|
30654
|
+
dragNode.current = {
|
30655
|
+
dataRef: dragNodeData,
|
30656
|
+
parent: node.props.parent,
|
30657
|
+
key: node.props._key,
|
30658
|
+
parentKey: node.props.parentKey
|
30659
|
+
};
|
30660
|
+
(_a = props.onDragStart) == null ? void 0 : _a.call(props);
|
30661
|
+
}, [props.onDragStart]);
|
30662
|
+
const onDragMove = useCallback((option) => {
|
30663
|
+
if (!dragNode.current)
|
30664
|
+
return false;
|
30665
|
+
const dropData = option.dropNode.props.dataRef;
|
30666
|
+
const dropId = option.dropNode.props._key;
|
30667
|
+
const currentDropData = {
|
30668
|
+
dragNode: { key: dragNode.current.key },
|
30669
|
+
dropNode: {
|
30670
|
+
dataRef: dropData,
|
30671
|
+
parent: option.dropNode.props.parent,
|
30672
|
+
key: dropId
|
30673
|
+
},
|
30674
|
+
dropPosition: option.dropPosition
|
30675
|
+
};
|
30676
|
+
const isAllowDrop = allowDrop(currentDropData);
|
30677
|
+
if (isAllowDrop) {
|
30678
|
+
return true;
|
30679
|
+
}
|
30680
|
+
return false;
|
30681
|
+
}, [dragNode]);
|
30682
|
+
const onDrop = useCallback((info2) => {
|
30683
|
+
const { dropNode, dropPosition, e } = info2;
|
30684
|
+
e.dataTransfer.dropEffect = "move";
|
30685
|
+
if (!dragNode.current || !dropNode)
|
30686
|
+
return;
|
30687
|
+
const dropData = dropNode.props.dataRef;
|
30688
|
+
const currentDropData = {
|
30689
|
+
dragNode: dragNode.current,
|
30690
|
+
dropNode: {
|
30691
|
+
dataRef: dropData,
|
30692
|
+
parent: dropNode.props.parent,
|
30693
|
+
key: dropNode.props._key,
|
30694
|
+
parentKey: dropNode.props.parentKey
|
30695
|
+
},
|
30696
|
+
dropPosition
|
30697
|
+
};
|
30698
|
+
props.onDrop(currentDropData);
|
30699
|
+
}, []);
|
30700
|
+
const renderTitle = useCallback((nodeData) => {
|
30701
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
30702
|
+
style: { display: "inline-flex", width: "100%" },
|
30703
|
+
onContextMenu: (ev) => onContextMenu && onContextMenu(nodeData, ev)
|
30704
|
+
}, props.renderTitle(nodeData));
|
30705
|
+
}, [onContextMenu]);
|
30706
|
+
const onDragEnd = useCallback(() => {
|
30707
|
+
var _a;
|
30708
|
+
dragNode.current = null;
|
30709
|
+
(_a = props.onDragEnd) == null ? void 0 : _a.call(props);
|
30710
|
+
}, [props.onDragEnd]);
|
30711
|
+
const onSelect = useCallback((selectedKeys2) => {
|
30712
|
+
props.onSelect(selectedKeys2[0]);
|
30713
|
+
}, [props.onSelect]);
|
30714
|
+
useEffect(() => {
|
30715
|
+
if (blockTreeRef) {
|
30716
|
+
blockTreeRef.addEventListener("dragover", (e) => {
|
30717
|
+
if (e.dataTransfer) {
|
30718
|
+
e.dataTransfer.dropEffect = "move";
|
30719
|
+
}
|
30720
|
+
});
|
30721
|
+
}
|
30722
|
+
}, [blockTreeRef]);
|
30723
|
+
const selectedKeys = useMemo(() => selectedId ? [selectedId] : [], [selectedId]);
|
30724
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
30725
|
+
ref: setBlockTreeRef,
|
30726
|
+
onMouseLeave: props.onMouseLeave
|
30727
|
+
}, /* @__PURE__ */ React__default.createElement(CacheTree, {
|
30728
|
+
selectedKeys,
|
30729
|
+
draggable: true,
|
30730
|
+
size: "small",
|
30731
|
+
treeData,
|
30732
|
+
blockNode: true,
|
30733
|
+
fieldNames: {
|
30734
|
+
key: "id"
|
30735
|
+
},
|
30736
|
+
onDragEnd,
|
30737
|
+
onDragStart,
|
30738
|
+
onDrop,
|
30739
|
+
allowDrop: onDragMove,
|
30740
|
+
onSelect,
|
30741
|
+
renderTitle
|
30742
|
+
}));
|
30743
|
+
}
|
30744
|
+
function CacheTree(props) {
|
30745
|
+
const [cacheProps, setCacheProps] = useState(props);
|
30746
|
+
const lastProps = useRef(props);
|
30747
|
+
const debounceCallback = useCallback(lodash.exports.debounce((data) => {
|
30748
|
+
setCacheProps(data);
|
30749
|
+
}, 300), []);
|
30750
|
+
useEffect(() => {
|
30751
|
+
if (lastProps.current.treeData !== props.treeData) {
|
30752
|
+
lastProps.current = props;
|
30753
|
+
debounceCallback(props);
|
30754
|
+
} else {
|
30755
|
+
lastProps.current = props;
|
30756
|
+
setCacheProps(props);
|
30757
|
+
}
|
30758
|
+
}, [props]);
|
30759
|
+
return useMemo(() => /* @__PURE__ */ React__default.createElement(Tree$1, __spreadValues({}, cacheProps)), [cacheProps]);
|
30760
|
+
}
|
30761
|
+
const wrap$1 = "_wrap_aul3a_1";
|
30762
|
+
const listItem = "_listItem_aul3a_13";
|
30763
|
+
const contextmenuMark = "_contextmenuMark_aul3a_23";
|
30764
|
+
var styles$5 = {
|
30765
|
+
wrap: wrap$1,
|
30766
|
+
listItem,
|
30767
|
+
contextmenuMark
|
30768
|
+
};
|
30945
30769
|
var rngBrowser = { exports: {} };
|
30946
30770
|
var getRandomValues = typeof crypto != "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto != "undefined" && typeof window.msCrypto.getRandomValues == "function" && msCrypto.getRandomValues.bind(msCrypto);
|
30947
30771
|
if (getRandomValues) {
|
@@ -31150,7 +30974,7 @@ const btnWrap = "_btn-wrap_jzksr_43";
|
|
31150
30974
|
const upload = "_upload_jzksr_68";
|
31151
30975
|
const wrap = "_wrap_jzksr_80";
|
31152
30976
|
const urlInput = "_urlInput_jzksr_80";
|
31153
|
-
var styles$
|
30977
|
+
var styles$4 = {
|
31154
30978
|
container: container$1,
|
31155
30979
|
error,
|
31156
30980
|
item,
|
@@ -31312,16 +31136,16 @@ class Uploader {
|
|
31312
31136
|
this.handler[event2] = handles.filter((item2) => item2 !== fn);
|
31313
31137
|
}
|
31314
31138
|
}
|
31315
|
-
function classnames(...rest) {
|
31139
|
+
function classnames$1(...rest) {
|
31316
31140
|
return rest.filter((item2) => typeof item2 === "string").join(" ");
|
31317
31141
|
}
|
31318
31142
|
function previewLoadImage(url) {
|
31319
31143
|
return new Promise((resolve) => {
|
31320
|
-
const
|
31321
|
-
|
31322
|
-
|
31323
|
-
|
31324
|
-
|
31144
|
+
const img2 = new Image();
|
31145
|
+
img2.setAttribute("crossOrigin", "Anonymous");
|
31146
|
+
img2.src = url;
|
31147
|
+
img2.onload = () => resolve(img2);
|
31148
|
+
img2.onerror = () => resolve(img2);
|
31325
31149
|
});
|
31326
31150
|
}
|
31327
31151
|
const defaultImagesMap$1 = {
|
@@ -31392,30 +31216,30 @@ function ImageUploader(props) {
|
|
31392
31216
|
const content = useMemo(() => {
|
31393
31217
|
if (isUploading) {
|
31394
31218
|
return /* @__PURE__ */ React__default.createElement("div", {
|
31395
|
-
className: styles$
|
31219
|
+
className: styles$4["item"]
|
31396
31220
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
31397
|
-
className: classnames(styles$
|
31221
|
+
className: classnames$1(styles$4["info"])
|
31398
31222
|
}, /* @__PURE__ */ React__default.createElement("img", {
|
31399
31223
|
src: getImg$1("AttributePanel_03"),
|
31400
31224
|
alt: "Loading..."
|
31401
31225
|
}), /* @__PURE__ */ React__default.createElement("div", {
|
31402
|
-
className: styles$
|
31226
|
+
className: styles$4["btn-wrap"]
|
31403
31227
|
})));
|
31404
31228
|
}
|
31405
31229
|
if (!props.value) {
|
31406
31230
|
return /* @__PURE__ */ React__default.createElement("div", {
|
31407
|
-
className: styles$
|
31231
|
+
className: styles$4["upload"],
|
31408
31232
|
onClick: onUpload
|
31409
31233
|
}, /* @__PURE__ */ React__default.createElement(IconPlus$1, null), /* @__PURE__ */ React__default.createElement("div", null, "Upload"));
|
31410
31234
|
}
|
31411
31235
|
return /* @__PURE__ */ React__default.createElement("div", {
|
31412
|
-
className: styles$
|
31236
|
+
className: styles$4["item"]
|
31413
31237
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
31414
|
-
className: classnames(styles$
|
31238
|
+
className: classnames$1(styles$4["info"])
|
31415
31239
|
}, /* @__PURE__ */ React__default.createElement("img", {
|
31416
31240
|
src: props.value
|
31417
31241
|
}), /* @__PURE__ */ React__default.createElement("div", {
|
31418
|
-
className: styles$
|
31242
|
+
className: styles$4["btn-wrap"]
|
31419
31243
|
}, /* @__PURE__ */ React__default.createElement("a", {
|
31420
31244
|
title: "Preview",
|
31421
31245
|
onClick: () => setPreview(true)
|
@@ -31431,9 +31255,9 @@ function ImageUploader(props) {
|
|
31431
31255
|
});
|
31432
31256
|
}
|
31433
31257
|
return /* @__PURE__ */ React__default.createElement("div", {
|
31434
|
-
className: styles$
|
31258
|
+
className: styles$4.wrap
|
31435
31259
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
31436
|
-
className: styles$
|
31260
|
+
className: styles$4["container"]
|
31437
31261
|
}, content, /* @__PURE__ */ React__default.createElement(Input$5, {
|
31438
31262
|
onPaste,
|
31439
31263
|
value: props.value,
|
@@ -38385,7 +38209,7 @@ function ColorPicker(props) {
|
|
38385
38209
|
height: 32,
|
38386
38210
|
width: 32,
|
38387
38211
|
padding: 4,
|
38388
|
-
border: "1px solid
|
38212
|
+
border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
|
38389
38213
|
borderRadius: showInput ? void 0 : 4,
|
38390
38214
|
fontSize: 0,
|
38391
38215
|
borderRight: showInput ? "none" : void 0,
|
@@ -38396,7 +38220,7 @@ function ColorPicker(props) {
|
|
38396
38220
|
style: {
|
38397
38221
|
position: "relative",
|
38398
38222
|
display: "block",
|
38399
|
-
border: "1px solid
|
38223
|
+
border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
|
38400
38224
|
borderRadius: 2,
|
38401
38225
|
width: "100%",
|
38402
38226
|
height: "100%",
|
@@ -38443,7 +38267,7 @@ function RadioGroup(props) {
|
|
38443
38267
|
const helperText = "_helperText_cmm2s_1";
|
38444
38268
|
const labelHidden = "_label-hidden_cmm2s_9";
|
38445
38269
|
const editTab = "_editTab_cmm2s_20";
|
38446
|
-
var styles$
|
38270
|
+
var styles$3 = {
|
38447
38271
|
helperText,
|
38448
38272
|
"label-hidden": "_label-hidden_cmm2s_9",
|
38449
38273
|
labelHidden,
|
@@ -38532,7 +38356,7 @@ function enhancer(Component2, changeAdapter) {
|
|
38532
38356
|
alignment: alignment ? alignment : inline ? "center" : void 0,
|
38533
38357
|
distribution
|
38534
38358
|
}, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, /* @__PURE__ */ React__default.createElement("label", {
|
38535
|
-
className: labelHidden2 ? styles$
|
38359
|
+
className: labelHidden2 ? styles$3["label-hidden"] : void 0,
|
38536
38360
|
htmlFor: id
|
38537
38361
|
}, /* @__PURE__ */ React__default.createElement("span", {
|
38538
38362
|
style: { whiteSpace: "pre" }
|
@@ -38551,7 +38375,7 @@ function enhancer(Component2, changeAdapter) {
|
|
38551
38375
|
value: valueAdapter ? valueAdapter(currentValue) : currentValue,
|
38552
38376
|
onChange: onFieldChange
|
38553
38377
|
})))), /* @__PURE__ */ React__default.createElement("div", {
|
38554
|
-
className: styles$
|
38378
|
+
className: styles$3.helperText
|
38555
38379
|
}, /* @__PURE__ */ React__default.createElement("small", null, helpText))));
|
38556
38380
|
});
|
38557
38381
|
};
|
@@ -38603,7 +38427,10 @@ function CheckBoxGroup(props) {
|
|
38603
38427
|
value: item2.value
|
38604
38428
|
}, item2.label))));
|
38605
38429
|
}
|
38606
|
-
|
38430
|
+
function classnames(...rest) {
|
38431
|
+
return rest.filter((item2) => typeof item2 === "string").join(" ");
|
38432
|
+
}
|
38433
|
+
const { TabPane } = Tabs$1;
|
38607
38434
|
function EditTab(props) {
|
38608
38435
|
const { value, additionItem } = props;
|
38609
38436
|
const onAddTab = () => {
|
@@ -38613,14 +38440,14 @@ function EditTab(props) {
|
|
38613
38440
|
props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
|
38614
38441
|
};
|
38615
38442
|
return /* @__PURE__ */ React__default.createElement(Tabs$1, {
|
38616
|
-
className: classnames
|
38443
|
+
className: classnames(styles$3.editTab),
|
38617
38444
|
style: { border: "none" },
|
38618
38445
|
type: "card",
|
38619
38446
|
tabPosition: props.tabPosition,
|
38620
38447
|
editable: true,
|
38621
38448
|
onAddTab,
|
38622
38449
|
onDeleteTab
|
38623
|
-
}, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane
|
38450
|
+
}, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane, {
|
38624
38451
|
style: { paddingLeft: 12 },
|
38625
38452
|
title: `${props.label || "Tab"} ${index2 + 1}`,
|
38626
38453
|
key: index2
|
@@ -39411,46 +39238,46 @@ function ContextMenu({
|
|
39411
39238
|
left,
|
39412
39239
|
top
|
39413
39240
|
},
|
39414
|
-
className: styles$
|
39241
|
+
className: styles$5.wrap,
|
39415
39242
|
onClick: (e) => e.stopPropagation()
|
39416
39243
|
}, !isFirst && /* @__PURE__ */ React__default.createElement("div", {
|
39417
|
-
className: styles$
|
39244
|
+
className: styles$5.listItem,
|
39418
39245
|
onClick: handleMoveUp
|
39419
39246
|
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39420
39247
|
iconName: "icon-top",
|
39421
39248
|
style: { marginRight: 10 }
|
39422
39249
|
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move up")), /* @__PURE__ */ React__default.createElement("div", {
|
39423
|
-
className: styles$
|
39250
|
+
className: styles$5.listItem,
|
39424
39251
|
onClick: handleMoveDown
|
39425
39252
|
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39426
39253
|
iconName: "icon-bottom",
|
39427
39254
|
style: { marginRight: 10 }
|
39428
39255
|
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move down")), /* @__PURE__ */ React__default.createElement("div", {
|
39429
|
-
className: styles$
|
39256
|
+
className: styles$5.listItem,
|
39430
39257
|
onClick: handleCopy
|
39431
39258
|
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39432
39259
|
iconName: "icon-copy",
|
39433
39260
|
style: { marginRight: 10 }
|
39434
39261
|
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Copy")), /* @__PURE__ */ React__default.createElement("div", {
|
39435
|
-
className: styles$
|
39262
|
+
className: styles$5.listItem,
|
39436
39263
|
onClick: handleAddToCollection
|
39437
39264
|
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39438
39265
|
iconName: "icon-start",
|
39439
39266
|
style: { marginRight: 10 }
|
39440
39267
|
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection")), /* @__PURE__ */ React__default.createElement("div", {
|
39441
|
-
className: styles$
|
39268
|
+
className: styles$5.listItem,
|
39442
39269
|
onClick: handleDelete
|
39443
39270
|
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39444
39271
|
iconName: "icon-delete",
|
39445
39272
|
style: { marginRight: 10 }
|
39446
39273
|
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Delete")), /* @__PURE__ */ React__default.createElement("div", {
|
39447
|
-
className: styles$
|
39274
|
+
className: styles$5.listItem,
|
39448
39275
|
onClick: handleAddToCollection
|
39449
39276
|
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39450
39277
|
iconName: "icon-start",
|
39451
39278
|
style: { marginRight: 10 }
|
39452
39279
|
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection"))), /* @__PURE__ */ React__default.createElement("div", {
|
39453
|
-
className: styles$
|
39280
|
+
className: styles$5.contextmenuMark,
|
39454
39281
|
onClick: onClose,
|
39455
39282
|
onContextMenu: (e) => {
|
39456
39283
|
e.preventDefault();
|
@@ -39458,6 +39285,173 @@ function ContextMenu({
|
|
39458
39285
|
}
|
39459
39286
|
}), modal);
|
39460
39287
|
}
|
39288
|
+
function useAvatarWrapperDrop() {
|
39289
|
+
const [blockLayerRef, setBlockLayerRef] = useState(null);
|
39290
|
+
const { setHoverIdx, setDirection } = useHoverIdx();
|
39291
|
+
const { dataTransfer, setDataTransfer } = useDataTransfer();
|
39292
|
+
const {
|
39293
|
+
formState: { values: values2 }
|
39294
|
+
} = useEditorContext();
|
39295
|
+
const valuesRef = useRef(values2);
|
39296
|
+
const dataTransferRef = useRef(dataTransfer);
|
39297
|
+
useEffect(() => {
|
39298
|
+
valuesRef.current = values2;
|
39299
|
+
}, [values2]);
|
39300
|
+
useEffect(() => {
|
39301
|
+
dataTransferRef.current = dataTransfer;
|
39302
|
+
}, [dataTransfer]);
|
39303
|
+
function isKeyObject(o) {
|
39304
|
+
return o.key !== void 0;
|
39305
|
+
}
|
39306
|
+
const removeHightLightClassName = useCallback(() => {
|
39307
|
+
if (!blockLayerRef)
|
39308
|
+
return;
|
39309
|
+
blockLayerRef.querySelectorAll(".arco-tree-node-title-gap-top, .arco-tree-node-title-gap-bottom, .arco-tree-node-title-highlight").forEach((item2) => {
|
39310
|
+
item2.classList.remove("arco-tree-node-title-gap-top", "arco-tree-node-title-gap-bottom", "arco-tree-node-title-highlight");
|
39311
|
+
});
|
39312
|
+
}, [blockLayerRef]);
|
39313
|
+
const allowDrop = useCallback((params) => {
|
39314
|
+
const { dragNode, dropNode, dropPosition } = params;
|
39315
|
+
let dragType;
|
39316
|
+
if (isKeyObject(dragNode)) {
|
39317
|
+
const blockData = lodash.exports.get(valuesRef.current, dragNode.key);
|
39318
|
+
if (!blockData)
|
39319
|
+
return false;
|
39320
|
+
dragType = blockData.type;
|
39321
|
+
} else {
|
39322
|
+
dragType = dragNode.type;
|
39323
|
+
}
|
39324
|
+
const dragBlock = BlockManager.getBlockByType(dragType);
|
39325
|
+
if (!dragBlock)
|
39326
|
+
return false;
|
39327
|
+
if (dropPosition === 0) {
|
39328
|
+
if (dragBlock.validParentType.includes(dropNode.dataRef.type) && dropNode.dataRef.children.length === 0) {
|
39329
|
+
return {
|
39330
|
+
position: 0,
|
39331
|
+
key: dropNode.key
|
39332
|
+
};
|
39333
|
+
} else if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
|
39334
|
+
return {
|
39335
|
+
position: -1,
|
39336
|
+
key: dropNode.key
|
39337
|
+
};
|
39338
|
+
}
|
39339
|
+
} else {
|
39340
|
+
if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
|
39341
|
+
return {
|
39342
|
+
position: dropPosition,
|
39343
|
+
key: dropNode.key
|
39344
|
+
};
|
39345
|
+
}
|
39346
|
+
}
|
39347
|
+
setDirection("");
|
39348
|
+
setHoverIdx("");
|
39349
|
+
return false;
|
39350
|
+
}, [setDirection, setHoverIdx, removeHightLightClassName]);
|
39351
|
+
useEffect(() => {
|
39352
|
+
if (blockLayerRef) {
|
39353
|
+
const onDragOver = lodash.exports.debounce((ev) => {
|
39354
|
+
var _a, _b, _c, _d;
|
39355
|
+
if (!dataTransferRef.current)
|
39356
|
+
return;
|
39357
|
+
const blockNode = getBlockNodeByChildEle(ev.target);
|
39358
|
+
if (!blockNode || !ev.target)
|
39359
|
+
return;
|
39360
|
+
const directionPosition = getDirectionPosition(ev, 5);
|
39361
|
+
const treeNodeEle = (_b = (_a = blockNode.parentNode) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode;
|
39362
|
+
if (!treeNodeEle)
|
39363
|
+
return;
|
39364
|
+
removeHightLightClassName();
|
39365
|
+
const dropIdx = getNodeIdxFromClassName(blockNode.classList);
|
39366
|
+
if (!dropIdx)
|
39367
|
+
return;
|
39368
|
+
const dropParentIdx = getParentIdx(dropIdx);
|
39369
|
+
const dropBlockData = lodash.exports.get(valuesRef.current, dropIdx);
|
39370
|
+
const dropParentBlockData = dropParentIdx ? lodash.exports.get(valuesRef.current, dropParentIdx) : null;
|
39371
|
+
let dropPosition = 0;
|
39372
|
+
if (directionPosition.vertical.direction === "top" && directionPosition.vertical.isEdge) {
|
39373
|
+
dropPosition = -1;
|
39374
|
+
} else if (directionPosition.vertical.direction === "bottom" && directionPosition.vertical.isEdge) {
|
39375
|
+
dropPosition = 1;
|
39376
|
+
}
|
39377
|
+
const dropResult = allowDrop({
|
39378
|
+
dragNode: {
|
39379
|
+
type: dataTransferRef.current.type
|
39380
|
+
},
|
39381
|
+
dropNode: {
|
39382
|
+
dataRef: dropBlockData,
|
39383
|
+
key: dropIdx,
|
39384
|
+
parent: dropParentBlockData
|
39385
|
+
},
|
39386
|
+
dropPosition
|
39387
|
+
});
|
39388
|
+
if (!dropResult)
|
39389
|
+
return;
|
39390
|
+
const node = (_d = (_c = document.querySelector(`[data-tree-idx="${dropResult.key}"]`)) == null ? void 0 : _c.parentNode) == null ? void 0 : _d.parentNode;
|
39391
|
+
if (node instanceof HTMLElement) {
|
39392
|
+
removeHightLightClassName();
|
39393
|
+
node.classList.add("arco-tree-node-title-gap-bottom");
|
39394
|
+
}
|
39395
|
+
setDirection(getDirectionFormDropPosition(dropResult.position));
|
39396
|
+
setHoverIdx(dropResult.key);
|
39397
|
+
if (dropResult.position === -1) {
|
39398
|
+
treeNodeEle.classList.add("arco-tree-node-title-gap-top");
|
39399
|
+
setDataTransfer((dataTransfer2) => {
|
39400
|
+
return __spreadProps(__spreadValues({}, dataTransfer2), {
|
39401
|
+
parentIdx: dropParentIdx,
|
39402
|
+
positionIndex: getIndexByIdx(dropIdx)
|
39403
|
+
});
|
39404
|
+
});
|
39405
|
+
} else if (dropResult.position === 1) {
|
39406
|
+
setDataTransfer((dataTransfer2) => {
|
39407
|
+
return __spreadProps(__spreadValues({}, dataTransfer2), {
|
39408
|
+
parentIdx: dropParentIdx,
|
39409
|
+
positionIndex: getIndexByIdx(dropIdx) + 1
|
39410
|
+
});
|
39411
|
+
});
|
39412
|
+
treeNodeEle.classList.add("arco-tree-node-title-gap-bottom");
|
39413
|
+
} else {
|
39414
|
+
treeNodeEle.classList.add("arco-tree-node-title-highlight");
|
39415
|
+
setDataTransfer((dataTransfer2) => {
|
39416
|
+
return __spreadProps(__spreadValues({}, dataTransfer2), {
|
39417
|
+
parentIdx: getIndexByIdx(dropIdx),
|
39418
|
+
positionIndex: 0
|
39419
|
+
});
|
39420
|
+
});
|
39421
|
+
}
|
39422
|
+
});
|
39423
|
+
const onDragend = (ev) => {
|
39424
|
+
removeHightLightClassName();
|
39425
|
+
};
|
39426
|
+
const onDrop = (ev) => {
|
39427
|
+
setTimeout(() => {
|
39428
|
+
removeHightLightClassName();
|
39429
|
+
}, 0);
|
39430
|
+
};
|
39431
|
+
blockLayerRef.addEventListener("dragover", onDragOver);
|
39432
|
+
blockLayerRef.addEventListener("drop", onDrop);
|
39433
|
+
blockLayerRef.addEventListener("dragleave", onDragend);
|
39434
|
+
return () => {
|
39435
|
+
blockLayerRef.removeEventListener("dragover", onDragOver);
|
39436
|
+
blockLayerRef.removeEventListener("drop", onDrop);
|
39437
|
+
blockLayerRef.removeEventListener("dragleave", onDragend);
|
39438
|
+
};
|
39439
|
+
}
|
39440
|
+
}, [blockLayerRef, dataTransferRef, valuesRef, removeHightLightClassName]);
|
39441
|
+
return {
|
39442
|
+
setBlockLayerRef,
|
39443
|
+
blockLayerRef,
|
39444
|
+
allowDrop,
|
39445
|
+
removeHightLightClassName
|
39446
|
+
};
|
39447
|
+
}
|
39448
|
+
function getDirectionFormDropPosition(position) {
|
39449
|
+
if (position === -1)
|
39450
|
+
return "top";
|
39451
|
+
if (position === 1)
|
39452
|
+
return "bottom";
|
39453
|
+
return "";
|
39454
|
+
}
|
39461
39455
|
function BlockLayer() {
|
39462
39456
|
const {
|
39463
39457
|
pageData: pageData2,
|
@@ -39465,8 +39459,14 @@ function BlockLayer() {
|
|
39465
39459
|
} = useEditorContext();
|
39466
39460
|
const { onUploadImage, onAddCollection } = useEditorProps();
|
39467
39461
|
const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
|
39468
|
-
const { setHoverIdx } = useHoverIdx();
|
39462
|
+
const { setHoverIdx, setIsDragging, setDirection } = useHoverIdx();
|
39469
39463
|
const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock } = useBlock();
|
39464
|
+
const {
|
39465
|
+
setBlockLayerRef,
|
39466
|
+
allowDrop,
|
39467
|
+
blockLayerRef,
|
39468
|
+
removeHightLightClassName
|
39469
|
+
} = useAvatarWrapperDrop();
|
39470
39470
|
const [contextMenuData, setContextMenuData] = useState(null);
|
39471
39471
|
const onToggleVisible = useCallback(({ id }, e) => {
|
39472
39472
|
e.stopPropagation();
|
@@ -39478,12 +39478,14 @@ function BlockLayer() {
|
|
39478
39478
|
}, [setValueByIdx2, values2]);
|
39479
39479
|
const renderTitle = useCallback((data) => {
|
39480
39480
|
const block2 = BlockManager.getBlockByType(data.type);
|
39481
|
+
const isPage = data.type === BasicType.PAGE;
|
39481
39482
|
return /* @__PURE__ */ React__default.createElement("div", {
|
39482
|
-
|
39483
|
+
"data-tree-idx": data.id,
|
39484
|
+
className: classnames(styles$6.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
|
39483
39485
|
}, /* @__PURE__ */ React__default.createElement(TextStyle, {
|
39484
39486
|
size: "smallest"
|
39485
39487
|
}, block2 == null ? void 0 : block2.name), /* @__PURE__ */ React__default.createElement("div", {
|
39486
|
-
className: styles$
|
39488
|
+
className: styles$6.eyeIcon
|
39487
39489
|
}, /* @__PURE__ */ React__default.createElement(EyeIcon$1, {
|
39488
39490
|
blockData: data,
|
39489
39491
|
onToggleVisible
|
@@ -39516,35 +39518,63 @@ function BlockLayer() {
|
|
39516
39518
|
const onMouseLeave = useCallback(() => {
|
39517
39519
|
setHoverIdx("");
|
39518
39520
|
}, [setHoverIdx]);
|
39519
|
-
const
|
39520
|
-
|
39521
|
-
|
39522
|
-
|
39523
|
-
|
39524
|
-
|
39525
|
-
return true;
|
39526
|
-
}
|
39527
|
-
if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
|
39528
|
-
return true;
|
39529
|
-
}
|
39530
|
-
return false;
|
39531
|
-
}, []);
|
39521
|
+
const onDragStart = useCallback(() => {
|
39522
|
+
setIsDragging(true);
|
39523
|
+
}, [setIsDragging]);
|
39524
|
+
const onDragEnd = useCallback(() => {
|
39525
|
+
setIsDragging(false);
|
39526
|
+
}, [setIsDragging]);
|
39532
39527
|
const onDrop = useCallback((params) => {
|
39533
|
-
const { dragNode, dropNode,
|
39534
|
-
const dragBlock = BlockManager.getBlockByType(dragNode.type);
|
39528
|
+
const { dragNode, dropNode, dropPosition } = params;
|
39529
|
+
const dragBlock = BlockManager.getBlockByType(dragNode.dataRef.type);
|
39535
39530
|
if (!dragBlock)
|
39536
|
-
return;
|
39537
|
-
|
39538
|
-
|
39531
|
+
return false;
|
39532
|
+
const dropIndex = getIndexByIdx(dropNode.key);
|
39533
|
+
if (dropPosition === 0) {
|
39534
|
+
if (dragBlock.validParentType.includes(dropNode.dataRef.type) && dropNode.dataRef.children.length === 0) {
|
39535
|
+
moveBlock(dragNode.key, getChildIdx(dropNode.key, 0));
|
39536
|
+
} else if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
|
39537
|
+
moveBlock(dragNode.key, getChildIdx(dropNode.parentKey, dropIndex));
|
39538
|
+
}
|
39539
39539
|
} else {
|
39540
|
-
moveBlock(dragNode.
|
39540
|
+
moveBlock(dragNode.key, getChildIdx(dropNode.parentKey, dropPosition > 0 ? dropIndex + 1 : dropIndex));
|
39541
39541
|
}
|
39542
39542
|
}, [moveBlock]);
|
39543
|
+
useEffect(() => {
|
39544
|
+
if (!blockLayerRef)
|
39545
|
+
return;
|
39546
|
+
if (focusIdx2) {
|
39547
|
+
setTimeout(() => {
|
39548
|
+
const selectedNode = blockLayerRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${focusIdx2}"]`);
|
39549
|
+
if (selectedNode) {
|
39550
|
+
selectedNode.scrollIntoView({
|
39551
|
+
block: "center",
|
39552
|
+
behavior: "smooth"
|
39553
|
+
});
|
39554
|
+
}
|
39555
|
+
}, 50);
|
39556
|
+
}
|
39557
|
+
}, [blockLayerRef, focusIdx2]);
|
39558
|
+
const blockTreeAllowDrop = useCallback((data) => {
|
39559
|
+
var _a, _b;
|
39560
|
+
const dropResult = allowDrop(data);
|
39561
|
+
if (dropResult) {
|
39562
|
+
const node = (_b = (_a = document.querySelector(`[data-tree-idx="${dropResult.key}"]`)) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode;
|
39563
|
+
if (node instanceof HTMLElement) {
|
39564
|
+
removeHightLightClassName();
|
39565
|
+
node.classList.add("arco-tree-node-title-gap-bottom");
|
39566
|
+
}
|
39567
|
+
setDirection(getDirectionFormDropPosition(dropResult.position));
|
39568
|
+
setHoverIdx(dropResult.key);
|
39569
|
+
}
|
39570
|
+
return dropResult;
|
39571
|
+
}, [allowDrop]);
|
39543
39572
|
const hasFocus = Boolean(focusIdx2);
|
39544
39573
|
return useMemo(() => {
|
39545
39574
|
if (!hasFocus)
|
39546
39575
|
return null;
|
39547
39576
|
return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
|
39577
|
+
ref: setBlockLayerRef,
|
39548
39578
|
id: "BlockLayerManager"
|
39549
39579
|
}, {
|
39550
39580
|
[DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
|
@@ -39553,9 +39583,11 @@ function BlockLayer() {
|
|
39553
39583
|
defaultExpandAll: true,
|
39554
39584
|
treeData,
|
39555
39585
|
renderTitle,
|
39556
|
-
allowDrop,
|
39586
|
+
allowDrop: blockTreeAllowDrop,
|
39557
39587
|
onContextMenu,
|
39558
39588
|
onDrop,
|
39589
|
+
onDragStart,
|
39590
|
+
onDragEnd,
|
39559
39591
|
onSelect,
|
39560
39592
|
onMouseEnter,
|
39561
39593
|
onMouseLeave
|
@@ -39583,7 +39615,9 @@ function BlockLayer() {
|
|
39583
39615
|
onAddCollection,
|
39584
39616
|
moveBlock,
|
39585
39617
|
copyBlock,
|
39586
|
-
removeBlock
|
39618
|
+
removeBlock,
|
39619
|
+
onDragEnd,
|
39620
|
+
onDragStart
|
39587
39621
|
]);
|
39588
39622
|
}
|
39589
39623
|
function Help(props) {
|
@@ -39815,10 +39849,6 @@ const MergeTags = React__default.memo((props) => {
|
|
39815
39849
|
onSelect: (vals) => onSelect(vals[0])
|
39816
39850
|
}));
|
39817
39851
|
});
|
39818
|
-
const wrapper = "_wrapper_j840r_1";
|
39819
|
-
var styles$4 = {
|
39820
|
-
wrapper
|
39821
|
-
};
|
39822
39852
|
const AttributesPanelWrapper = (props) => {
|
39823
39853
|
const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
|
39824
39854
|
const { mergeTags } = useEditorProps();
|
@@ -39831,11 +39861,9 @@ const AttributesPanelWrapper = (props) => {
|
|
39831
39861
|
}, [focusBlock2, setFocusBlock]);
|
39832
39862
|
if (!focusBlock2 || !block2)
|
39833
39863
|
return null;
|
39834
|
-
return /* @__PURE__ */ React__default.createElement("div", {
|
39835
|
-
className: styles$4.wrapper
|
39836
|
-
}, /* @__PURE__ */ React__default.createElement("div", {
|
39864
|
+
return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", {
|
39837
39865
|
style: {
|
39838
|
-
border: "1px solid
|
39866
|
+
border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
|
39839
39867
|
borderBottom: "none",
|
39840
39868
|
padding: "12px 24px"
|
39841
39869
|
}
|
@@ -39850,7 +39878,10 @@ const AttributesPanelWrapper = (props) => {
|
|
39850
39878
|
}, /* @__PURE__ */ React__default.createElement(Stack$6, {
|
39851
39879
|
spacing: "extraTight",
|
39852
39880
|
alignment: "center"
|
39853
|
-
}, /* @__PURE__ */ React__default.createElement(EyeIcon, null), /* @__PURE__ */ React__default.createElement(TextStyle,
|
39881
|
+
}, /* @__PURE__ */ React__default.createElement(EyeIcon, null), /* @__PURE__ */ React__default.createElement(TextStyle, {
|
39882
|
+
variation: "strong",
|
39883
|
+
size: "large"
|
39884
|
+
}, `${block2.name} attributes`)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, props.extra))), Boolean(focusBlock2.data.hidden) && mergeTags && /* @__PURE__ */ React__default.createElement(Stack$6, {
|
39854
39885
|
spacing: "extraTight"
|
39855
39886
|
}, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Hide if"), /* @__PURE__ */ React__default.createElement(MergeTags, {
|
39856
39887
|
isSelect: true,
|
@@ -39877,8 +39908,10 @@ function EyeIcon() {
|
|
39877
39908
|
if (focusBlock2.type === BasicType.PAGE)
|
39878
39909
|
return null;
|
39879
39910
|
return focusBlock2.data.hidden ? /* @__PURE__ */ React__default.createElement(IconEyeInvisible$1, {
|
39911
|
+
style: { cursor: "pointer", fontSize: 18 },
|
39880
39912
|
onClick: onToggleVisible
|
39881
39913
|
}) : /* @__PURE__ */ React__default.createElement(IconEye$1, {
|
39914
|
+
style: { cursor: "pointer", fontSize: 18 },
|
39882
39915
|
onClick: onToggleVisible
|
39883
39916
|
});
|
39884
39917
|
}
|
@@ -40005,10 +40038,10 @@ function Padding(props = {}) {
|
|
40005
40038
|
bottom,
|
40006
40039
|
right
|
40007
40040
|
};
|
40008
|
-
}, [paddingList, defaultPaddingList]);
|
40041
|
+
}, [paddingList, defaultPaddingList, defaultPaddingValue, paddingValue]);
|
40009
40042
|
const onChancePadding = useCallback((val) => {
|
40010
40043
|
change(focusIdx2 + `.attributes[${attributeName}]`, val);
|
40011
|
-
}, [focusIdx2, attributeName]);
|
40044
|
+
}, [focusIdx2, attributeName, change]);
|
40012
40045
|
return /* @__PURE__ */ React__default.createElement(Form$3, {
|
40013
40046
|
initialValues: paddingFormValues,
|
40014
40047
|
subscription: { submitting: true, pristine: true },
|
@@ -41821,7 +41854,7 @@ function Margin() {
|
|
41821
41854
|
const BlocksPanel$1 = "_BlocksPanel_15fho_1";
|
41822
41855
|
const blockItem = "_blockItem_15fho_5";
|
41823
41856
|
const closeBtn = "_closeBtn_15fho_12";
|
41824
|
-
var styles$
|
41857
|
+
var styles$2 = {
|
41825
41858
|
BlocksPanel: BlocksPanel$1,
|
41826
41859
|
blockItem,
|
41827
41860
|
closeBtn
|
@@ -41879,7 +41912,7 @@ __publicField(BlockMarketManager, "category", []);
|
|
41879
41912
|
__publicField(BlockMarketManager, "subscriptHandles", []);
|
41880
41913
|
const mask = "_mask_1a0xw_1";
|
41881
41914
|
const drag = "_drag_1a0xw_12";
|
41882
|
-
var styles$
|
41915
|
+
var styles$1 = {
|
41883
41916
|
mask,
|
41884
41917
|
drag
|
41885
41918
|
};
|
@@ -41889,7 +41922,7 @@ const BlockMaskWrapper = (props) => {
|
|
41889
41922
|
const { type, payload } = props;
|
41890
41923
|
const onMouseDown = useCallback(() => {
|
41891
41924
|
if (ref.current) {
|
41892
|
-
ref.current.classList.add(styles$
|
41925
|
+
ref.current.classList.add(styles$1.drag);
|
41893
41926
|
}
|
41894
41927
|
}, []);
|
41895
41928
|
const onMaskMouseDown = useCallback((ev) => {
|
@@ -41901,7 +41934,7 @@ const BlockMaskWrapper = (props) => {
|
|
41901
41934
|
useEffect(() => {
|
41902
41935
|
const mouseup = () => {
|
41903
41936
|
if (ref.current) {
|
41904
|
-
ref.current.classList.remove(styles$
|
41937
|
+
ref.current.classList.remove(styles$1.drag);
|
41905
41938
|
}
|
41906
41939
|
};
|
41907
41940
|
document.addEventListener("mouseup", mouseup);
|
@@ -41912,7 +41945,7 @@ const BlockMaskWrapper = (props) => {
|
|
41912
41945
|
return /* @__PURE__ */ React__default.createElement("div", {
|
41913
41946
|
style: { position: "relative" }
|
41914
41947
|
}, props.children, /* @__PURE__ */ React__default.createElement("div", {
|
41915
|
-
className: styles$
|
41948
|
+
className: styles$1.wrapper,
|
41916
41949
|
style: {
|
41917
41950
|
position: "absolute",
|
41918
41951
|
height: "100%",
|
@@ -41927,7 +41960,7 @@ const BlockMaskWrapper = (props) => {
|
|
41927
41960
|
payload
|
41928
41961
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
41929
41962
|
ref,
|
41930
|
-
className: styles$
|
41963
|
+
className: styles$1.mask,
|
41931
41964
|
onMouseDown: onMaskMouseDown
|
41932
41965
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
41933
41966
|
ref: dragRef,
|
@@ -43973,13 +44006,13 @@ const BlocksPanel = (props) => {
|
|
43973
44006
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
43974
44007
|
onClick: toggleVisible
|
43975
44008
|
}, props.children), ele && visible && createPortal(/* @__PURE__ */ React__default.createElement("div", {
|
43976
|
-
className: styles$
|
44009
|
+
className: styles$2.BlocksPanel,
|
43977
44010
|
style: {
|
43978
44011
|
pointerEvents: isDragging ? "none" : void 0,
|
43979
44012
|
position: "fixed",
|
43980
44013
|
width: isDragging ? 0 : 650,
|
44014
|
+
backgroundColor: "var(--color-bg-2)",
|
43981
44015
|
zIndex: 200,
|
43982
|
-
top: 0,
|
43983
44016
|
left: 60,
|
43984
44017
|
maxHeight: "85vh",
|
43985
44018
|
transition: "width .5s",
|
@@ -43989,7 +44022,7 @@ const BlocksPanel = (props) => {
|
|
43989
44022
|
bodyStyle: { padding: 0 },
|
43990
44023
|
title: "Drag block",
|
43991
44024
|
extra: /* @__PURE__ */ React__default.createElement("div", {
|
43992
|
-
className: styles$
|
44025
|
+
className: styles$2.closeBtn
|
43993
44026
|
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
43994
44027
|
iconName: "icon-close",
|
43995
44028
|
onClick: toggleVisible
|
@@ -44000,7 +44033,8 @@ const BlocksPanel = (props) => {
|
|
44000
44033
|
}, filterCategories.map((category, index2) => /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
|
44001
44034
|
style: {
|
44002
44035
|
padding: 0,
|
44003
|
-
overflow: "auto"
|
44036
|
+
overflow: "auto",
|
44037
|
+
height: 500
|
44004
44038
|
},
|
44005
44039
|
key: category.title,
|
44006
44040
|
title: /* @__PURE__ */ React__default.createElement("div", {
|
@@ -44015,17 +44049,16 @@ const BlocksPanel = (props) => {
|
|
44015
44049
|
};
|
44016
44050
|
const BlockPanelItem = React__default.memo((props) => {
|
44017
44051
|
return /* @__PURE__ */ React__default.createElement(Tabs$1, {
|
44018
|
-
style: { padding: "20px 0" },
|
44019
44052
|
tabPosition: "left"
|
44020
44053
|
}, props.category.blocks.map((block2, index2) => {
|
44021
44054
|
return /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
|
44022
|
-
style: { padding: 0 },
|
44055
|
+
style: { padding: 0, height: 500 },
|
44023
44056
|
key: block2.title,
|
44024
44057
|
title: /* @__PURE__ */ React__default.createElement(Stack$6, {
|
44025
44058
|
alignment: "center",
|
44026
44059
|
spacing: "extraTight"
|
44027
44060
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
44028
|
-
className: styles$
|
44061
|
+
className: styles$2.blockItem
|
44029
44062
|
}, block2.title), block2.description && /* @__PURE__ */ React__default.createElement(Help, {
|
44030
44063
|
title: block2.description
|
44031
44064
|
}))
|
@@ -44042,11 +44075,14 @@ const BlockPanelItem = React__default.memo((props) => {
|
|
44042
44075
|
}));
|
44043
44076
|
});
|
44044
44077
|
function ShortcutToolbar() {
|
44078
|
+
const blocksPanelRef = useRef(null);
|
44045
44079
|
return /* @__PURE__ */ React__default.createElement(Stack$6, {
|
44046
44080
|
vertical: true,
|
44047
44081
|
alignment: "center",
|
44048
44082
|
distribution: "center"
|
44049
|
-
}, /* @__PURE__ */ React__default.createElement(
|
44083
|
+
}, /* @__PURE__ */ React__default.createElement(BlocksPanel, null, /* @__PURE__ */ React__default.createElement("div", {
|
44084
|
+
ref: blocksPanelRef
|
44085
|
+
})), /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
|
44050
44086
|
type: BasicType.TEXT
|
44051
44087
|
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
44052
44088
|
title: "Text",
|
@@ -44090,22 +44126,25 @@ function ShortcutToolbar() {
|
|
44090
44126
|
cursor: "move",
|
44091
44127
|
color: "#e5afe5"
|
44092
44128
|
}
|
44093
|
-
})), /* @__PURE__ */ React__default.createElement(
|
44129
|
+
})), /* @__PURE__ */ React__default.createElement(IconFont, {
|
44130
|
+
onClick: () => {
|
44131
|
+
var _a;
|
44132
|
+
return (_a = blocksPanelRef.current) == null ? void 0 : _a.click();
|
44133
|
+
},
|
44094
44134
|
iconName: "icon-more",
|
44095
44135
|
style: {
|
44096
44136
|
display: "flex",
|
44097
44137
|
alignItems: "center",
|
44098
44138
|
justifyContent: "center",
|
44099
|
-
color: "#000",
|
44100
44139
|
width: 30,
|
44101
44140
|
height: 30,
|
44102
44141
|
borderRadius: "50%",
|
44103
|
-
|
44142
|
+
color: "var(--color-text-2)",
|
44143
|
+
boxShadow: "0 0 12px -3px var(--color-text-2)",
|
44104
44144
|
fontSize: 18
|
44105
44145
|
}
|
44106
|
-
}))
|
44146
|
+
}));
|
44107
44147
|
}
|
44108
|
-
var styles$1 = {};
|
44109
44148
|
function SourceCodePanel() {
|
44110
44149
|
const { setValueByIdx, focusBlock, values } = useBlock();
|
44111
44150
|
const { focusIdx } = useFocusIdx();
|
@@ -44116,7 +44155,7 @@ function SourceCodePanel() {
|
|
44116
44155
|
return "";
|
44117
44156
|
return JSON.stringify(focusBlock, null, 2) || "";
|
44118
44157
|
}, [focusBlock]);
|
44119
|
-
const
|
44158
|
+
const onChangeCode = useCallback((event) => {
|
44120
44159
|
try {
|
44121
44160
|
const parseValue = JSON.parse(JSON.stringify(eval("(" + event.target.value + ")")));
|
44122
44161
|
const block = BlockManager.getBlockByType(parseValue.type);
|
@@ -44161,9 +44200,7 @@ function SourceCodePanel() {
|
|
44161
44200
|
}, [focusBlock, focusIdx, pageData]);
|
44162
44201
|
if (!focusBlock)
|
44163
44202
|
return null;
|
44164
|
-
return /* @__PURE__ */ React__default.createElement(Collapse$1, {
|
44165
|
-
className: styles$1.wrapper
|
44166
|
-
}, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
|
44203
|
+
return /* @__PURE__ */ React__default.createElement(Collapse$1, null, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
|
44167
44204
|
name: "json",
|
44168
44205
|
header: "Json source",
|
44169
44206
|
contentStyle: { padding: "8px 13px" }
|
@@ -44171,7 +44208,7 @@ function SourceCodePanel() {
|
|
44171
44208
|
key: code,
|
44172
44209
|
defaultValue: code,
|
44173
44210
|
autoSize: { maxRows: 25 },
|
44174
|
-
onBlur:
|
44211
|
+
onBlur: onChangeCode
|
44175
44212
|
})), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
|
44176
44213
|
name: "mjml",
|
44177
44214
|
header: "MJML source",
|
@@ -44225,7 +44262,7 @@ function Toolbar({
|
|
44225
44262
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
44226
44263
|
style: {
|
44227
44264
|
color: "#ffffff",
|
44228
|
-
backgroundColor: "
|
44265
|
+
backgroundColor: "var(--selected-color)",
|
44229
44266
|
height: "22px",
|
44230
44267
|
display: "inline-flex",
|
44231
44268
|
padding: "1px 5px",
|
@@ -44265,7 +44302,7 @@ function ToolItem(props) {
|
|
44265
44302
|
onClick: props.onClick,
|
44266
44303
|
style: {
|
44267
44304
|
color: "#ffffff",
|
44268
|
-
backgroundColor: "
|
44305
|
+
backgroundColor: "var(--selected-color)",
|
44269
44306
|
height: 22,
|
44270
44307
|
fontSize: props.width || 14,
|
44271
44308
|
lineHeight: "22px",
|
@@ -44275,7 +44312,7 @@ function ToolItem(props) {
|
|
44275
44312
|
cursor: "pointer",
|
44276
44313
|
justifyContent: "center"
|
44277
44314
|
},
|
44278
|
-
className: classnames
|
44315
|
+
className: classnames("iconfont", props.iconName)
|
44279
44316
|
});
|
44280
44317
|
}
|
44281
44318
|
function FocusTooltip() {
|
@@ -44620,10 +44657,9 @@ var styles = {
|
|
44620
44657
|
container,
|
44621
44658
|
customScrollBar
|
44622
44659
|
};
|
44623
|
-
const { TabPane } = Tabs$1;
|
44624
44660
|
const SimpleLayout = (props) => {
|
44625
44661
|
const { height: containerHeight } = useEditorProps();
|
44626
|
-
return /* @__PURE__ */ React__default.createElement(Layout$1,
|
44662
|
+
return /* @__PURE__ */ React__default.createElement(Layout$1, {
|
44627
44663
|
style: {
|
44628
44664
|
display: "flex",
|
44629
44665
|
width: "100vw",
|
@@ -44631,40 +44667,38 @@ const SimpleLayout = (props) => {
|
|
44631
44667
|
minWidth: 1400
|
44632
44668
|
}
|
44633
44669
|
}, /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
|
44634
|
-
theme: "light",
|
44635
|
-
width: 60,
|
44636
|
-
style: { border: "1px solid #f0f0f0" }
|
44637
|
-
}, /* @__PURE__ */ React__default.createElement(ShortcutToolbar, null)), /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
|
44638
44670
|
style: {
|
44639
|
-
|
44671
|
+
width: 360
|
44672
|
+
}
|
44673
|
+
}, /* @__PURE__ */ React__default.createElement(Card$1, {
|
44674
|
+
bodyStyle: { padding: 0 },
|
44675
|
+
style: { border: "none" }
|
44676
|
+
}, /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
|
44677
|
+
style: { width: 60 }
|
44678
|
+
}, /* @__PURE__ */ React__default.createElement(ShortcutToolbar, null)), /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
|
44679
|
+
className: styles.customScrollBar,
|
44680
|
+
style: {
|
44681
|
+
width: 300,
|
44682
|
+
paddingBottom: 50,
|
44683
|
+
border: "none",
|
44640
44684
|
height: containerHeight,
|
44641
44685
|
overflow: "auto"
|
44642
|
-
}
|
44643
|
-
className: styles.customScrollBar,
|
44644
|
-
theme: "light",
|
44645
|
-
width: 300
|
44686
|
+
}
|
44646
44687
|
}, /* @__PURE__ */ React__default.createElement(Card$1, {
|
44647
|
-
|
44648
|
-
style: {
|
44649
|
-
}, /* @__PURE__ */ React__default.createElement(Tabs$1, {
|
44650
|
-
style: { borderLeft: "none" },
|
44651
|
-
defaultActiveTab: "Layout"
|
44652
|
-
}, /* @__PURE__ */ React__default.createElement(TabPane, {
|
44653
|
-
style: { paddingTop: 10 },
|
44654
|
-
key: "Layout",
|
44655
|
-
title: "Layout"
|
44688
|
+
title: "Layout",
|
44689
|
+
style: { border: "none" }
|
44656
44690
|
}, /* @__PURE__ */ React__default.createElement(BlockLayer, null))))), /* @__PURE__ */ React__default.createElement(Layout$1, {
|
44657
44691
|
style: { height: containerHeight }
|
44658
44692
|
}, props.children), /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
|
44659
44693
|
style: { height: containerHeight },
|
44660
|
-
theme: "light",
|
44661
44694
|
width: 350
|
44662
44695
|
}, /* @__PURE__ */ React__default.createElement(Card$1, {
|
44663
44696
|
size: "small",
|
44664
44697
|
id: "rightSide",
|
44665
44698
|
style: {
|
44666
44699
|
maxHeight: "100%",
|
44667
|
-
height: "100%"
|
44700
|
+
height: "100%",
|
44701
|
+
borderLeft: "none"
|
44668
44702
|
},
|
44669
44703
|
bodyStyle: { padding: 0 },
|
44670
44704
|
className: styles.customScrollBar
|
@@ -44675,7 +44709,7 @@ const SimpleLayout = (props) => {
|
|
44675
44709
|
}, /* @__PURE__ */ React__default.createElement(AttributePanel, null)), /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
|
44676
44710
|
key: "Source code",
|
44677
44711
|
title: "Source code"
|
44678
|
-
}, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null)))))
|
44712
|
+
}, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null));
|
44679
44713
|
};
|
44680
44714
|
export { EditTabField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, TextAreaField as E, FontFamily as F, NumberField as G, Height as H, InteractivePrompt as I, SliderField as J, ColorPickerField as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, ImageUploaderField as O, Padding as P, SelectField as Q, AutoCompleteField as R, ShortcutToolbar as S, TextAlign as T, UploadField as U, VerticalAlign as V, Width as W, RadioGroupField as X, SwitchField as Y, DatePickerField as Z, CheckboxField as _, BlockAttributeConfigurationManager as a, InlineTextField as a0, enhancer as a1, RichTextField as a2, Align as b, commonjsGlobal as c, AttributesPanelWrapper as d, ContainerBackgroundColor as e, TextDecoration as f, Background as g, LineHeight as h, TextTransform as i, BackgroundColor as j, Direction as k, Link as l, Border as m, BorderColor as n, FontSize as o, MergeTags as p, BorderStyle as q, FontStyle as r, BorderWidth as s, FontWeight as t, BlockMarketManager as u, BlockMaskWrapper as v, SourceCodePanel as w, SimpleLayout as x, TextField as y, SearchField as z };
|
44681
44715
|
//# sourceMappingURL=index2.js.map
|