Dev

packages/evershop/src/components/common/form/fields/Editor.jsx

@@ -57,7 +57,7 @@ export default function Editor({
   uploadApi,
   folderCreateApi
 }) {
-  const [draggable, setDragable] = React.useState(null);
+  const draggable = React.useRef(null);
   const [fileBrowser, setFileBrowser] = React.useState(null);
   const [rows, setRows] = React.useState(
     value
@@ -84,10 +84,6 @@ export default function Editor({
 
   React.useEffect(() => {
     async function initSwappable() {
-      if (draggable) {
-        draggable.destroy();
-      }
-
       const Swappable = await loadSwappable();
       // eslint-disable-next-line new-cap
       const swappable = new Swappable(document.querySelectorAll(`div#rows`), {
@@ -110,7 +106,11 @@ export default function Editor({
         }
         setRows((originRows) => {
           // Swap the source and destination in the rows array
-          const newRows = [...originRows];
+          const newRows = originRows.map((r) => {
+            const newRow = { ...r };
+            newRow.columns = r.columns.map((c) => ({ ...c }));
+            return newRow;
+          });
           const sourceIndex = newRows.findIndex((r) => r.id === source);
           const destinationIndex = newRows.findIndex(
             (r) => r.id === destination
@@ -121,10 +121,10 @@ export default function Editor({
           return newRows;
         });
       });
-      setDragable(swappable);
+      draggable.current = swappable;
     }
     initSwappable();
-  }, [rows]);
+  }, []);
 
   React.useEffect(() => {
     const initEditors = async () => {
@@ -200,16 +200,10 @@ export default function Editor({
   }, []);
 
   const removeRow = (rowId) => {
-    if (draggable) {
-      draggable.destroy();
-    }
     setRows(rows.filter((i) => i.id !== rowId));
   };
 
   const addRow = (row) => {
-    if (draggable) {
-      draggable.destroy();
-    }
     setRows(rows.concat(row));
   };
 
@@ -288,6 +282,7 @@ export default function Editor({
         type="hidden"
         value={JSON.stringify(
           rows.map((row) => ({
+            id: row.id,
             size: row.size,
             columns: row.columns.map((column) => ({
               id: column.id,

packages/evershop/src/components/frontStore/widgets/BasicMenu.jsx

@@ -55,7 +55,7 @@ export default function BasicMenu({
                     {item.name}
                   </a>
                   {item.children.length > 0 && (
-                    <ul className="md:absolute left-0 top-full mt-0 md:mt-3 w-48 bg-white md:shadow-lg rounded-md md:opacity-0 md:group-hover:opacity-100 md:group-hover:translate-y-0 transform transition-all duration-300 ease-in-out min-w-full md:min-w-[250px] z-30 border-t-4">
+                    <ul className="md:absolute left-0 top-full mt-0 md:mt-3 w-48 bg-white md:shadow-lg rounded-md md:opacity-0 md:group-hover:opacity-100 md:group-hover:translate-y-0 transform transition-all duration-300 ease-in-out min-w-full md:min-w-[250px] z-30 md:border-t-4">
                       {item.children.map((subItem, subIndex) => (
                         <li key={subIndex}>
                           <a

packages/evershop/src/modules/cms/pages/frontStore/all/Logo.jsx

@@ -8,7 +8,7 @@ export default function Logo({
   }
 }) {
   return (
-    <div className="logo ml-9 md:ml-0 flex justify-center">
+    <div className="logo md:ml-0 flex justify-center items-center">
       {src && (
         <a href="/" className="logo-icon">
           <img src={src} alt={alt} width={width} height={height} />

packages/evershop/src/modules/cms/pages/frontStore/all/Logo.scss

@@ -1,9 +1,8 @@
 .logo {
   a.logo-icon {
     svg {
-      width: 3rem;
-      height: 3rem;
+      width: 4rem;
+      height: 4rem;
     }
-    margin-right: 0.5rem;
   }
 }