easy-email-pro-theme 1.50.2 → 1.50.3

package/lib/index.js

@@ -63,7 +63,7 @@ import { cloneDeep, get, isEqual, set, omit as omit$2, merge as merge$1, debounc
 import { Editor, Range, Node, Transforms, Path, Text as Text$2, createEditor } from "slate";
 import { nanoid } from "nanoid";
 import { Form, Input, Modal, Collapse, Space, Empty, Card, Grid, Button as Button$2, Drawer, Switch, Typography as Typography$1, Tabs, Radio, Divider as Divider$2, Alert, Popconfirm, Tooltip, Message, PageHeader, Spin, Layout as Layout$2, Popover, Select as Select$1, Slider, InputNumber, Tag, Link as Link$3, List as List$1, Skeleton, Trigger } from "@arco-design/web-react";
-import { IconPlus, IconDelete, IconEdit, IconLeft, IconCopy, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconLock, IconUnlock, IconQuestionCircle, IconLink, IconCloud, IconSend, IconDown } from "@arco-design/web-react/icon";
+import { IconPlus, IconDelete, IconEdit, IconLeft, IconCopy, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconLock, IconUnlock, IconQuestionCircle, IconLink, IconCloud, IconDragDotVertical, IconSend, IconDown } from "@arco-design/web-react/icon";
 import { unstable_batchedUpdates, createPortal } from "react-dom";
 import mjml from "mjml-browser";
 import { HistoryEditor } from "slate-history";
@@ -29936,6 +29936,7 @@ var FieldType = /* @__PURE__ */ ((FieldType2) => {
   FieldType2["IMAGE"] = "image";
   FieldType2["SLIDER"] = "slider";
   FieldType2["RICHTEXT"] = "richtext";
+  FieldType2["SWITCH"] = "switch";
   return FieldType2;
 })(FieldType || {});
 const getFieldByType = (type) => {
@@ -29946,7 +29947,8 @@ const getFieldByType = (type) => {
     [FieldType.COLOR]: AttributeField.ColorPickerField,
     [FieldType.IMAGE]: AttributeField.ImageUrl,
     [FieldType.PIXEL]: AttributeField.PixelField,
-    [FieldType.SLIDER]: AttributeField.SliderField
+    [FieldType.SLIDER]: AttributeField.SliderField,
+    [FieldType.SWITCH]: AttributeField.SwitchField
   }[type];
 };
 function FieldItem(props) {
@@ -32371,7 +32373,8 @@ const WidgetTypeOptions = [
   { value: FieldType.NUMBER, label: "Number" },
   { value: FieldType.ENUM, label: "Enum" },
   { value: FieldType.COLOR, label: "Color" },
-  { value: FieldType.IMAGE, label: "Image" }
+  { value: FieldType.IMAGE, label: "Image" },
+  { value: FieldType.SWITCH, label: "Switch" }
   // { value: FieldType.SLIDER, label: "Slider" },
   // { value: FieldType.PIXEL_AND_PERCENT, label: "Pixel and percent" },
 ];
@@ -32392,6 +32395,21 @@ const formItemStyle = {
 function FieldConfigItem(props) {
   const { getFieldValue } = useEditorContext();
   const keyField = getFieldValue(null, props.name);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: props.id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0 : 1
+  };
   const onHandleRemove = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -32400,10 +32418,16 @@ function FieldConfigItem(props) {
   return /* @__PURE__ */ React__default.createElement(
     Collapse.Item,
     {
-      style: { backgroundColor: "#fff" },
+      ref: setNodeRef,
+      style: __spreadValues({ backgroundColor: "#fff" }, style),
       name: props.name,
       header: props.label,
-      extra: /* @__PURE__ */ React__default.createElement(Button$2, { icon: /* @__PURE__ */ React__default.createElement(IconDelete, null), onClick: onHandleRemove }),
+      extra: /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(Button$2, { icon: /* @__PURE__ */ React__default.createElement(IconDelete, null), onClick: onHandleRemove }), /* @__PURE__ */ React__default.createElement(
+        Button$2,
+        __spreadValues(__spreadValues({
+          icon: /* @__PURE__ */ React__default.createElement(IconDragDotVertical, null)
+        }, listeners), attributes)
+      )),
       contentStyle: { width: "100%", padding: "20px 16px" }
     },
     /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 22, offset: 0 }, /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical", style: { width: "100%" } }, /* @__PURE__ */ React__default.createElement(
@@ -32458,6 +32482,8 @@ function WidgetConfigPanel({
   containerHeight
 }) {
   const { values, setFieldValue, getFieldValue } = useEditorContext();
+  const idsMap = useRef(/* @__PURE__ */ new Map());
+  const [draggingItem, setDraggingItem] = useState(null);
   const widgetElement = values.widgetElement;
   if (!widgetElement) {
     throw new Error(`Invalid widgetElement`);
@@ -32491,175 +32517,243 @@ function WidgetConfigPanel({
     },
     [setFieldValue, widgetElement]
   );
+  const items = useMemo(() => {
+    return widgetElement.data.config.map((item2, index2) => {
+      let id = idsMap.current.get(item2);
+      if (!id) {
+        id = nanoid();
+        idsMap.current.set(item2, id);
+      }
+      return { id, item: item2 };
+    });
+  }, [widgetElement.data.config]);
+  const itemIds = useMemo(() => {
+    return items.map((item2) => item2.id);
+  }, [items]);
+  const onDragStart = useCallback(
+    (event) => {
+      setActiveTab([]);
+      const matchItem = items.find((item2) => {
+        const activeId = event.active.id.toString();
+        return activeId === item2.id;
+      });
+      if (matchItem) {
+        setDraggingItem(matchItem.item);
+      }
+    },
+    [items]
+  );
+  const onDragEnd = useCallback(
+    ({ active, over }) => {
+      if (!active.id || !over) {
+        return;
+      }
+      const activeId = active.id.toString();
+      const overId = over.id.toString();
+      if (activeId !== overId) {
+        const oldIndex = items.findIndex((item2) => item2.id === activeId);
+        const newIndex = items.findIndex((item2) => item2.id === overId);
+        const newConfig = arrayMove(
+          widgetElement.data.config,
+          oldIndex,
+          newIndex
+        );
+        const cloneWidgetElement = cloneDeep(widgetElement);
+        cloneWidgetElement.data.config = cloneDeep(newConfig);
+        setFieldValue(null, `widgetElement`, cloneWidgetElement);
+      }
+    },
+    [items, setFieldValue, widgetElement]
+  );
   const contentEditable = getFieldValue(
     null,
     `widgetElement.data.contentEditable`
   );
-  console.log("contentEditable", contentEditable);
+  const overlayContent = useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(
+      Collapse.Item,
+      {
+        header: draggingItem == null ? void 0 : draggingItem.label,
+        name: "overlayContent",
+        extra: /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(Button$2, { icon: /* @__PURE__ */ React__default.createElement(IconDelete, null) }), /* @__PURE__ */ React__default.createElement(Button$2, { icon: /* @__PURE__ */ React__default.createElement(IconDragDotVertical, null) }))
+      }
+    );
+  }, [draggingItem == null ? void 0 : draggingItem.label]);
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(
-    Tabs,
+    DndContext,
     {
-      defaultActiveTab: "Setting",
-      renderTabHeader: (_, DefaultHeader) => /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          className: styles.largeTabsHeader,
-          style: { display: "flex", alignItems: "center" }
-        },
-        /* @__PURE__ */ React__default.createElement(DefaultHeader, { style: { flex: 1 } })
-      )
+      collisionDetection: closestCenter,
+      onDragStart,
+      onDragEnd,
+      modifiers: [restrictToVerticalAxis]
     },
-    /* @__PURE__ */ React__default.createElement(
-      Tabs.TabPane,
+    /* @__PURE__ */ React__default.createElement(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React__default.createElement(
+      Tabs,
       {
-        key: "Setting",
-        style: { padding: 10 },
-        title: /* @__PURE__ */ React__default.createElement("div", { style: { height: 40, lineHeight: "40px" } }, "Setting")
+        defaultActiveTab: "Setting",
+        renderTabHeader: (_, DefaultHeader) => /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            className: styles.largeTabsHeader,
+            style: { display: "flex", alignItems: "center" }
+          },
+          /* @__PURE__ */ React__default.createElement(DefaultHeader, { style: { flex: 1 } })
+        )
       },
-      /* @__PURE__ */ React__default.createElement(Grid.Row, { style: { paddingTop: 20 } }, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 22, offset: 1 }, /* @__PURE__ */ React__default.createElement(
-        AttributeField.TextField,
+      /* @__PURE__ */ React__default.createElement(
+        Tabs.TabPane,
         {
-          name: "widgetElement.title",
-          label: "Title",
-          path: null,
-          formItem: {
-            layout: "vertical",
-            labelCol: {},
-            wrapperCol: {}
+          key: "Setting",
+          style: { padding: 10 },
+          title: /* @__PURE__ */ React__default.createElement("div", { style: { height: 40, lineHeight: "40px" } }, "Setting")
+        },
+        /* @__PURE__ */ React__default.createElement(Grid.Row, { style: { paddingTop: 20 } }, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 22, offset: 1 }, /* @__PURE__ */ React__default.createElement(
+          AttributeField.TextField,
+          {
+            name: "widgetElement.title",
+            label: "Title",
+            path: null,
+            formItem: {
+              layout: "vertical",
+              labelCol: {},
+              wrapperCol: {}
+            }
           }
-        }
-      ), /* @__PURE__ */ React__default.createElement(
-        AttributeField.TextAreaField,
-        {
-          rows: 3,
-          name: "widgetElement.data.description",
-          label: "Description",
-          fallbackValue: "",
-          path: null,
-          formItem: {
-            layout: "vertical",
-            labelCol: {},
-            wrapperCol: {}
-          }
-        }
-      ))),
-      /* @__PURE__ */ React__default.createElement(Divider$2, null),
-      /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 22, offset: 1 }, /* @__PURE__ */ React__default.createElement(
-        AttributeField.SwitchField,
-        {
-          name: "widgetElement.data.contentEditable",
-          label: /* @__PURE__ */ React__default.createElement(Space, null, t("Content editable"), /* @__PURE__ */ React__default.createElement(
-            Tooltip,
-            {
-              content: t(
-                `Once enabled, the widget's text and button blocks will be editable directly in the editor`
-              )
-            },
-            /* @__PURE__ */ React__default.createElement(IconQuestionCircle, { style: { fontSize: 16 } })
-          )),
-          path: null,
-          style: { position: "relative", top: 0 },
-          formItem: {
-            layout: "inline",
-            labelCol: {
-              span: 10,
-              style: {
-                textAlign: "left"
-              }
-            },
-            wrapperCol: {
-              span: 12,
-              style: {
-                textAlign: "left"
-              }
+        ), /* @__PURE__ */ React__default.createElement(
+          AttributeField.TextAreaField,
+          {
+            rows: 3,
+            name: "widgetElement.data.description",
+            label: "Description",
+            fallbackValue: "",
+            path: null,
+            formItem: {
+              layout: "vertical",
+              labelCol: {},
+              wrapperCol: {}
             }
           }
-        }
-      ), !contentEditable && /* @__PURE__ */ React__default.createElement(
-        AttributeField.SwitchField,
-        {
-          name: "widgetElement.data.staticLogicEnabled",
-          label: /* @__PURE__ */ React__default.createElement(Space, null, t("Static logic enabled"), /* @__PURE__ */ React__default.createElement(
-            Tooltip,
-            {
-              content: t(
-                `If enabled, only the input value will be used as the data for dynamic rendering`
-              )
-            },
-            /* @__PURE__ */ React__default.createElement(IconQuestionCircle, { style: { fontSize: 16 } })
-          )),
-          path: null,
-          style: { position: "relative", top: 0, marginBottom: 0 },
-          formItem: {
-            style: {},
-            layout: "inline",
-            labelCol: {
-              span: 10,
-              style: {
-                textAlign: "left",
-                paddingBottom: 50
-              }
-            },
-            wrapperCol: {
-              span: 12,
-              style: {
-                textAlign: "left"
+        ))),
+        /* @__PURE__ */ React__default.createElement(Divider$2, null),
+        /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 22, offset: 1 }, /* @__PURE__ */ React__default.createElement(
+          AttributeField.SwitchField,
+          {
+            name: "widgetElement.data.contentEditable",
+            label: /* @__PURE__ */ React__default.createElement(Space, null, t("Content editable"), /* @__PURE__ */ React__default.createElement(
+              Tooltip,
+              {
+                content: t(
+                  `Once enabled, the widget's text and button blocks will be editable directly in the editor`
+                )
+              },
+              /* @__PURE__ */ React__default.createElement(IconQuestionCircle, { style: { fontSize: 16 } })
+            )),
+            path: null,
+            style: { position: "relative", top: 0 },
+            formItem: {
+              layout: "inline",
+              labelCol: {
+                span: 10,
+                style: {
+                  textAlign: "left"
+                }
+              },
+              wrapperCol: {
+                span: 12,
+                style: {
+                  textAlign: "left"
+                }
               }
             }
           }
-        }
-      )))
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      Tabs.TabPane,
-      {
-        key: "Input",
-        title: /* @__PURE__ */ React__default.createElement(
-          "div",
+        ), !contentEditable && /* @__PURE__ */ React__default.createElement(
+          AttributeField.SwitchField,
           {
-            style: {
-              height: 40,
-              lineHeight: "40px",
-              paddingLeft: 10,
-              paddingRight: 10
+            name: "widgetElement.data.staticLogicEnabled",
+            label: /* @__PURE__ */ React__default.createElement(Space, null, t("Static logic enabled"), /* @__PURE__ */ React__default.createElement(
+              Tooltip,
+              {
+                content: t(
+                  `If enabled, only the input value will be used as the data for dynamic rendering`
+                )
+              },
+              /* @__PURE__ */ React__default.createElement(IconQuestionCircle, { style: { fontSize: 16 } })
+            )),
+            path: null,
+            style: { position: "relative", top: 0, marginBottom: 0 },
+            formItem: {
+              style: {},
+              layout: "inline",
+              labelCol: {
+                span: 10,
+                style: {
+                  textAlign: "left",
+                  paddingBottom: 50
+                }
+              },
+              wrapperCol: {
+                span: 12,
+                style: {
+                  textAlign: "left"
+                }
+              }
             }
-          },
-          /* @__PURE__ */ React__default.createElement(Grid.Row, { justify: "space-between", align: "center" }, /* @__PURE__ */ React__default.createElement("span", null), /* @__PURE__ */ React__default.createElement("span", null, "Input"), /* @__PURE__ */ React__default.createElement(Button$2, { icon: /* @__PURE__ */ React__default.createElement(IconPlus, null), onClick: onAdd }))
-        )
-      },
+          }
+        )))
+      ),
       /* @__PURE__ */ React__default.createElement(
-        Collapse,
+        Tabs.TabPane,
         {
-          bordered: false,
-          activeKey: activeTab,
-          onChange: (key2, keys2) => setActiveTab(keys2)
+          key: "Input",
+          title: /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              style: {
+                height: 40,
+                lineHeight: "40px",
+                paddingLeft: 10,
+                paddingRight: 10
+              }
+            },
+            /* @__PURE__ */ React__default.createElement(Grid.Row, { justify: "space-between", align: "center" }, /* @__PURE__ */ React__default.createElement("span", null), /* @__PURE__ */ React__default.createElement("span", null, "Input"), /* @__PURE__ */ React__default.createElement(Button$2, { icon: /* @__PURE__ */ React__default.createElement(IconPlus, null), onClick: onAdd }))
+          )
         },
-        /* @__PURE__ */ React__default.createElement(Card, { title: "Attributes", bodyStyle: { padding: 0 } }, /* @__PURE__ */ React__default.createElement(
-          FullHeightOverlayScrollbars,
+        /* @__PURE__ */ React__default.createElement(
+          Collapse,
           {
-            height: `calc(${containerHeight} - 110px)`
+            bordered: false,
+            activeKey: activeTab,
+            onChange: (key2, keys2) => setActiveTab(keys2)
           },
-          (widgetElement.data.config || []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(
-            FieldConfigItem,
-            __spreadProps(__spreadValues({
-              path: null,
-              key: index2
-            }, item2), {
-              name: `widgetElement.data.config.${index2}`,
-              onRemove: () => onRemove(index2)
-            })
-          )),
-          /* @__PURE__ */ React__default.createElement(
-            Collapse.Item,
+          /* @__PURE__ */ React__default.createElement(Card, { title: "Attributes", bodyStyle: { padding: 0 } }, /* @__PURE__ */ React__default.createElement(
+            FullHeightOverlayScrollbars,
             {
-              header: "",
-              name: "hidden",
-              style: { display: "none" }
-            }
-          )
-        ))
+              height: `calc(${containerHeight} - 110px)`
+            },
+            (widgetElement.data.config || []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(
+              FieldConfigItem,
+              __spreadProps(__spreadValues({
+                path: null,
+                key: idsMap.current.get(item2)
+              }, item2), {
+                id: idsMap.current.get(item2),
+                name: `widgetElement.data.config.${index2}`,
+                onRemove: () => onRemove(index2)
+              })
+            )),
+            /* @__PURE__ */ React__default.createElement(
+              Collapse.Item,
+              {
+                header: "",
+                name: "hidden",
+                style: { display: "none" }
+              }
+            )
+          ))
+        )
       )
-    )
+    )),
+    /* @__PURE__ */ React__default.createElement(DragOverlay, null, overlayContent)
   ));
 }
 const styleText$a = ".MergeTagComponent-image {\n  max-width: 150px;\n}";

package/lib/typings/components/ConfigurationPanel/components/WidgetConfigPanel/widgetFields/FieldConfigItem/index.d.ts

@@ -7,4 +7,5 @@ export declare function FieldConfigItem(props: {
     type: string;
     path: Path | null;
     onRemove: () => void;
+    id: string;
 }): React.JSX.Element;

package/lib/typings/components/ConfigurationPanel/components/WidgetConfigPanel/widgetFields/constants.d.ts

@@ -7,5 +7,6 @@ export declare const enum FieldType {
     COLOR = "color",
     IMAGE = "image",
     SLIDER = "slider",
-    RICHTEXT = "richtext"
+    RICHTEXT = "richtext",
+    SWITCH = "switch"
 }

package/lib/typings/components/ConfigurationPanel/components/WidgetConfigPanel/widgetFields/index.d.ts

@@ -7,7 +7,7 @@ export declare const getFieldByType: (type: string) => ((props: EnhancerProps &
     value: boolean;
     onChange: (val: boolean) => void;
     showLimit?: boolean | undefined;
-}, "onChange" | "value">) => React.JSX.Element) | typeof import("../../AttributeField/PixelAndPercentField").PixelAndPercentField | typeof import("../../AttributeField/ImageUrl").ImageUrl | undefined;
+}, "onChange" | "value">) => React.JSX.Element) | ((props: EnhancerProps & Omit<import("@arco-design/web-react").SwitchProps & React.RefAttributes<unknown>, "onChange" | "value">) => React.JSX.Element) | typeof import("../../AttributeField/PixelAndPercentField").PixelAndPercentField | typeof import("../../AttributeField/ImageUrl").ImageUrl | undefined;
 export declare function FieldItem(props: {
     name: string;
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "1.50.2",
+  "version": "1.50.3",
   "description": "",
   "files": [
     "lib"