@micromag/editor 0.3.313 → 0.3.314

package/es/index.js

@@ -1815,7 +1815,7 @@ function buildTree(flattenedItems) {
       var parentId = (_item$parentId = item.parentId) !== null && _item$parentId !== void 0 ? _item$parentId : root.id;
       var parent = (_nodes$parentId = nodes[parentId]) !== null && _nodes$parentId !== void 0 ? _nodes$parentId : findItem(items, parentId);
 
-      if (indexes[parentId]) {
+      if (typeof indexes[parentId] !== 'undefined') {
         indexes[parentId] += 1;
       } else {
         indexes[parentId] = 0;
@@ -1823,9 +1823,12 @@ function buildTree(flattenedItems) {
 
       nodes[id] = {
         id: id,
-        children: children
+        children: children,
+        index: indexes[parentId]
       };
-      parent.children.push(_objectSpread({}, item));
+      parent.children.push(_objectSpread(_objectSpread({}, item), {}, {
+        index: indexes[parentId]
+      }));
     }
   } catch (err) {
     _iterator.e(err);
@@ -2564,53 +2567,24 @@ var SortableTree = function SortableTree(_ref2) {
         return getMovementAnnouncement('onDragOver', id, currentOverId);
       },
       onDragEnd: function onDragEnd(id, currentOverId) {
-        var flat = flattenTree(items);
-
-        if (onChange !== null) {
-          onChange((flat || []).map(function (_ref9) {
-            var itemId = _ref9.id,
-                _ref9$children = _ref9.children,
-                children = _ref9$children === void 0 ? [] : _ref9$children,
-                _ref9$parentId = _ref9.parentId,
-                parentId = _ref9$parentId === void 0 ? null : _ref9$parentId,
-                _ref9$collapsed = _ref9.collapsed,
-                collapsed = _ref9$collapsed === void 0 ? false : _ref9$collapsed;
-            return {
-              id: itemId,
-              props: _objectSpread(_objectSpread({}, (children || []).length > 0 ? {
-                group: {
-                  collapsed: collapsed,
-                  mergeNavItems: true
-                }
-              } : {
-                group: null
-              }), parentId !== null ? {
-                parentId: parentId
-              } : {
-                parentId: null
-              })
-            };
-          }));
-        }
-
         return getMovementAnnouncement('onDragEnd', id, currentOverId);
       },
       onDragCancel: function onDragCancel(id) {
         return "Moving was cancelled. ".concat(id, " was dropped in its original position.");
       }
     };
-  }, [items, onChange, getMovementAnnouncement]);
-  var activeValue = defaultItems.find(function (_ref10) {
-    var _ref10$id = _ref10.id,
-        defaultId = _ref10$id === void 0 ? null : _ref10$id;
+  }, [getMovementAnnouncement]);
+  var activeValue = defaultItems.find(function (_ref9) {
+    var _ref9$id = _ref9.id,
+        defaultId = _ref9$id === void 0 ? null : _ref9$id;
     return defaultId === activeId;
   });
-  var handleDragStart = useCallback(function (_ref11) {
-    var newActiveId = _ref11.active.id;
+  var handleDragStart = useCallback(function (_ref10) {
+    var newActiveId = _ref10.active.id;
     setActiveId(newActiveId);
     setOverId(newActiveId);
-    var newActiveItem = flattenedItems.find(function (_ref12) {
-      var id = _ref12.id;
+    var newActiveItem = flattenedItems.find(function (_ref11) {
+      var id = _ref11.id;
       return id === newActiveId;
     });
 
@@ -2623,14 +2597,14 @@ var SortableTree = function SortableTree(_ref2) {
 
     document.body.style.setProperty('cursor', 'grabbing');
   }, [flattenedItems, setActiveId, setOverId, setCurrentPosition]);
-  var handleDragMove = useCallback(function (_ref13) {
-    var delta = _ref13.delta;
+  var handleDragMove = useCallback(function (_ref12) {
+    var delta = _ref12.delta;
     setOffsetLeft(delta.x);
   }, [setOffsetLeft]);
-  var handleDragOver = useCallback(function (_ref14) {
+  var handleDragOver = useCallback(function (_ref13) {
     var _over$id;
 
-    var over = _ref14.over;
+    var over = _ref13.over;
     setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
   }, [setOverId]);
   var resetState = useCallback(function () {
@@ -2640,21 +2614,21 @@ var SortableTree = function SortableTree(_ref2) {
     setCurrentPosition(null);
     document.body.style.setProperty('cursor', '');
   }, [setOverId, setActiveId, setOffsetLeft, setCurrentPosition]);
-  var handleDragEnd = useCallback(function (_ref15) {
-    var active = _ref15.active,
-        over = _ref15.over;
+  var handleDragEnd = useCallback(function (_ref14) {
+    var active = _ref14.active,
+        over = _ref14.over;
     resetState();
 
     if (projected && over) {
       var depth = projected.depth,
           parentId = projected.parentId;
       var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
-      var overIndex = clonedItems.findIndex(function (_ref16) {
-        var id = _ref16.id;
+      var overIndex = clonedItems.findIndex(function (_ref15) {
+        var id = _ref15.id;
         return id === over.id;
       });
-      var activeIndex = clonedItems.findIndex(function (_ref17) {
-        var id = _ref17.id;
+      var activeIndex = clonedItems.findIndex(function (_ref16) {
+        var id = _ref16.id;
         return id === active.id;
       });
       var activeTreeItem = clonedItems[activeIndex];
@@ -2663,8 +2637,8 @@ var SortableTree = function SortableTree(_ref2) {
       if (depth > 0 && depth >= maxDepth && (activeTreeItem === null || activeTreeItem === void 0 ? void 0 : activeTreeItem.children) !== null && activeTreeItem.children.length > 0) {
         var _loop2 = function _loop2(i) {
           var childId = activeTreeItem.children[i].id;
-          var childIndex = clonedItems.findIndex(function (_ref18) {
-            var id = _ref18.id;
+          var childIndex = clonedItems.findIndex(function (_ref17) {
+            var id = _ref17.id;
             return id === childId;
           });
           clonedItems[childIndex].parentId = parentId;
@@ -2683,9 +2657,37 @@ var SortableTree = function SortableTree(_ref2) {
         parentId: parentId
       });
       var sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
-      var newItems = buildTree(sortedItems); // console.log('drag endd', sortedItems, newItems);
-
+      var newItems = buildTree(sortedItems);
+      console.log('drag endd', sortedItems, newItems);
       setItems(newItems);
+
+      if (onChange !== null) {
+        console.log('hell is flatss', newItems);
+        onChange((newItems || []).map(function (_ref18) {
+          var itemId = _ref18.id,
+              _ref18$children = _ref18.children,
+              children = _ref18$children === void 0 ? [] : _ref18$children,
+              _ref18$parentId = _ref18.parentId,
+              itParentId = _ref18$parentId === void 0 ? null : _ref18$parentId,
+              _ref18$collapsed = _ref18.collapsed,
+              collapsed = _ref18$collapsed === void 0 ? false : _ref18$collapsed;
+          return {
+            id: itemId,
+            props: _objectSpread(_objectSpread({}, (children || []).length > 0 ? {
+              group: {
+                collapsed: collapsed,
+                mergeNavItems: true
+              }
+            } : {
+              group: null
+            }), itParentId !== null ? {
+              parentId: itParentId
+            } : {
+              parentId: null
+            })
+          };
+        }));
+      }
     }
   }, [projected, items, resetState, arrayMove, buildTree, setItems]);
   var handleDragCancel = useCallback(function () {

package/lib/index.js

@@ -1835,7 +1835,7 @@ function buildTree(flattenedItems) {
       var parentId = (_item$parentId = item.parentId) !== null && _item$parentId !== void 0 ? _item$parentId : root.id;
       var parent = (_nodes$parentId = nodes[parentId]) !== null && _nodes$parentId !== void 0 ? _nodes$parentId : findItem(items, parentId);
 
-      if (indexes[parentId]) {
+      if (typeof indexes[parentId] !== 'undefined') {
         indexes[parentId] += 1;
       } else {
         indexes[parentId] = 0;
@@ -1843,9 +1843,12 @@ function buildTree(flattenedItems) {
 
       nodes[id] = {
         id: id,
-        children: children
+        children: children,
+        index: indexes[parentId]
       };
-      parent.children.push(_objectSpread__default["default"]({}, item));
+      parent.children.push(_objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
+        index: indexes[parentId]
+      }));
     }
   } catch (err) {
     _iterator.e(err);
@@ -2584,53 +2587,24 @@ var SortableTree = function SortableTree(_ref2) {
         return getMovementAnnouncement('onDragOver', id, currentOverId);
       },
       onDragEnd: function onDragEnd(id, currentOverId) {
-        var flat = flattenTree(items);
-
-        if (onChange !== null) {
-          onChange((flat || []).map(function (_ref9) {
-            var itemId = _ref9.id,
-                _ref9$children = _ref9.children,
-                children = _ref9$children === void 0 ? [] : _ref9$children,
-                _ref9$parentId = _ref9.parentId,
-                parentId = _ref9$parentId === void 0 ? null : _ref9$parentId,
-                _ref9$collapsed = _ref9.collapsed,
-                collapsed = _ref9$collapsed === void 0 ? false : _ref9$collapsed;
-            return {
-              id: itemId,
-              props: _objectSpread__default["default"](_objectSpread__default["default"]({}, (children || []).length > 0 ? {
-                group: {
-                  collapsed: collapsed,
-                  mergeNavItems: true
-                }
-              } : {
-                group: null
-              }), parentId !== null ? {
-                parentId: parentId
-              } : {
-                parentId: null
-              })
-            };
-          }));
-        }
-
         return getMovementAnnouncement('onDragEnd', id, currentOverId);
       },
       onDragCancel: function onDragCancel(id) {
         return "Moving was cancelled. ".concat(id, " was dropped in its original position.");
       }
     };
-  }, [items, onChange, getMovementAnnouncement]);
-  var activeValue = defaultItems.find(function (_ref10) {
-    var _ref10$id = _ref10.id,
-        defaultId = _ref10$id === void 0 ? null : _ref10$id;
+  }, [getMovementAnnouncement]);
+  var activeValue = defaultItems.find(function (_ref9) {
+    var _ref9$id = _ref9.id,
+        defaultId = _ref9$id === void 0 ? null : _ref9$id;
     return defaultId === activeId;
   });
-  var handleDragStart = React.useCallback(function (_ref11) {
-    var newActiveId = _ref11.active.id;
+  var handleDragStart = React.useCallback(function (_ref10) {
+    var newActiveId = _ref10.active.id;
     setActiveId(newActiveId);
     setOverId(newActiveId);
-    var newActiveItem = flattenedItems.find(function (_ref12) {
-      var id = _ref12.id;
+    var newActiveItem = flattenedItems.find(function (_ref11) {
+      var id = _ref11.id;
       return id === newActiveId;
     });
 
@@ -2643,14 +2617,14 @@ var SortableTree = function SortableTree(_ref2) {
 
     document.body.style.setProperty('cursor', 'grabbing');
   }, [flattenedItems, setActiveId, setOverId, setCurrentPosition]);
-  var handleDragMove = React.useCallback(function (_ref13) {
-    var delta = _ref13.delta;
+  var handleDragMove = React.useCallback(function (_ref12) {
+    var delta = _ref12.delta;
     setOffsetLeft(delta.x);
   }, [setOffsetLeft]);
-  var handleDragOver = React.useCallback(function (_ref14) {
+  var handleDragOver = React.useCallback(function (_ref13) {
     var _over$id;
 
-    var over = _ref14.over;
+    var over = _ref13.over;
     setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
   }, [setOverId]);
   var resetState = React.useCallback(function () {
@@ -2660,21 +2634,21 @@ var SortableTree = function SortableTree(_ref2) {
     setCurrentPosition(null);
     document.body.style.setProperty('cursor', '');
   }, [setOverId, setActiveId, setOffsetLeft, setCurrentPosition]);
-  var handleDragEnd = React.useCallback(function (_ref15) {
-    var active = _ref15.active,
-        over = _ref15.over;
+  var handleDragEnd = React.useCallback(function (_ref14) {
+    var active = _ref14.active,
+        over = _ref14.over;
     resetState();
 
     if (projected && over) {
       var depth = projected.depth,
           parentId = projected.parentId;
       var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
-      var overIndex = clonedItems.findIndex(function (_ref16) {
-        var id = _ref16.id;
+      var overIndex = clonedItems.findIndex(function (_ref15) {
+        var id = _ref15.id;
         return id === over.id;
       });
-      var activeIndex = clonedItems.findIndex(function (_ref17) {
-        var id = _ref17.id;
+      var activeIndex = clonedItems.findIndex(function (_ref16) {
+        var id = _ref16.id;
         return id === active.id;
       });
       var activeTreeItem = clonedItems[activeIndex];
@@ -2683,8 +2657,8 @@ var SortableTree = function SortableTree(_ref2) {
       if (depth > 0 && depth >= maxDepth && (activeTreeItem === null || activeTreeItem === void 0 ? void 0 : activeTreeItem.children) !== null && activeTreeItem.children.length > 0) {
         var _loop2 = function _loop2(i) {
           var childId = activeTreeItem.children[i].id;
-          var childIndex = clonedItems.findIndex(function (_ref18) {
-            var id = _ref18.id;
+          var childIndex = clonedItems.findIndex(function (_ref17) {
+            var id = _ref17.id;
             return id === childId;
           });
           clonedItems[childIndex].parentId = parentId;
@@ -2703,9 +2677,37 @@ var SortableTree = function SortableTree(_ref2) {
         parentId: parentId
       });
       var sortedItems = sortable.arrayMove(clonedItems, activeIndex, overIndex);
-      var newItems = buildTree(sortedItems); // console.log('drag endd', sortedItems, newItems);
-
+      var newItems = buildTree(sortedItems);
+      console.log('drag endd', sortedItems, newItems);
       setItems(newItems);
+
+      if (onChange !== null) {
+        console.log('hell is flatss', newItems);
+        onChange((newItems || []).map(function (_ref18) {
+          var itemId = _ref18.id,
+              _ref18$children = _ref18.children,
+              children = _ref18$children === void 0 ? [] : _ref18$children,
+              _ref18$parentId = _ref18.parentId,
+              itParentId = _ref18$parentId === void 0 ? null : _ref18$parentId,
+              _ref18$collapsed = _ref18.collapsed,
+              collapsed = _ref18$collapsed === void 0 ? false : _ref18$collapsed;
+          return {
+            id: itemId,
+            props: _objectSpread__default["default"](_objectSpread__default["default"]({}, (children || []).length > 0 ? {
+              group: {
+                collapsed: collapsed,
+                mergeNavItems: true
+              }
+            } : {
+              group: null
+            }), itParentId !== null ? {
+              parentId: itParentId
+            } : {
+              parentId: null
+            })
+          };
+        }));
+      }
     }
   }, [projected, items, resetState, sortable.arrayMove, buildTree, setItems]);
   var handleDragCancel = React.useCallback(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/editor",
-    "version": "0.3.313",
+    "version": "0.3.314",
     "description": "",
     "keywords": [
         "javascript"
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "dfd750df11bb0f5141358069679da991694bc886"
+    "gitHead": "c34a27f6354b419a736e248994ea8426529b6575"
 }