Merge pull request #248 from avalonmediasystem/nested-dnd

Fix DnD drop-zone calculation for nested timespans

Author: Dananji

public/dev/manifest.json

@@ -391,6 +391,36 @@
                         {
                           "id": "http://localhost:3001/dev/lunchroom_manners/canvas/1#t=323,333",
                           "type": "Canvas"
+                        },
+                        {
+                          "id": "http://localhost:3001/dev/lunchroom_manners/canvas/range/2-2-1-1",
+                          "type": "Range",
+                          "label": {
+                            "en": [
+                              "Not Talking Loudly"
+                            ]
+                          },
+                          "items": [
+                            {
+                              "id": "http://localhost:3001/dev/lunchroom_manners/canvas/1#t=323,330",
+                              "type": "Canvas"
+                            },
+                            {
+                              "id": "http://localhost:3001/dev/lunchroom_manners/canvas/range/2-2-1-1-1",
+                              "type": "Range",
+                              "label": {
+                                "en": [
+                                  "Waiting for Friends"
+                                ]
+                              },
+                              "items": [
+                                {
+                                  "id": "http://localhost:3001/dev/lunchroom_manners/canvas/1#t=324,329",
+                                  "type": "Canvas"
+                                }
+                              ]
+                            }
+                          ]
                         }
                       ]
                     },

src/components/ListItem.js

@@ -90,13 +90,11 @@ const ListItem = ({ item, children }) => {
     }
   };
 
-  const { begin, end, items, label, type, active, valid } = item;
+  const { begin, end, nestedSpan, items, label, type, active, valid } = item;
 
   const itemProp = {
     childrenCount: items ? items.length : 0,
-    label: label,
-    type: type,
-    active: active,
+    label, type, active, nestedSpan
   };
 
   /**

src/components/ListItemControls.js

@@ -7,7 +7,7 @@ import PopoverBody from 'react-bootstrap/PopoverBody';
 import PopoverHeader from 'react-bootstrap/PopoverHeader';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { connect, useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   handleEditingTimespans,
   updateStructureStatus,