fix(dragndrop): fixed expand icon

carbon-design-system · Nov 10, 2020 · 60393ea · 60393ea
1 parent 35ae31e
commit 60393ea
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 841 deletions.
diff --git a/src/components/List/HierarchyList/__snapshots__/HierarchyList.story.storyshot b/src/components/List/HierarchyList/__snapshots__/HierarchyList.story.storyshot
diff --git a/src/components/List/ListItem/ListItem.jsx b/src/components/List/ListItem/ListItem.jsx
@@ -28,6 +28,7 @@ const ListItemPropTypes = {
   isSelectable: PropTypes.bool,
   disabled: PropTypes.bool,
   onSelect: PropTypes.func,
+  renderDropTargets: PropTypes.bool,
   selected: PropTypes.bool,
   expanded: PropTypes.bool,
   value: PropTypes.string.isRequired,
@@ -70,6 +71,7 @@ const ListItemDefaultProps = {
   isSelectable: false,
   disabled: false,
   onSelect: () => {},
+  renderDropTargets: false,
   selected: false,
   expanded: false,
   secondaryValue: null,
@@ -100,6 +102,7 @@ const ListItem = ({
   value,
   secondaryValue,
   rowActions,
+  renderDropTargets,
   icon,
   iconPosition, // or "right"
   onItemMoved,
@@ -195,6 +198,7 @@ const ListItem = ({
         onItemMoved,
         itemWillMove,
         disabled,
+        renderDropTargets,
       }}>
       {renderDragPreview()}
       {dragIcon()}
@@ -310,6 +314,7 @@ const ds = DragSource(ItemType, cardSource, (connect, monitor) => ({
   connectDragSource: connect.dragSource(),
   connectDragPreview: connect.dragPreview(),
   isDragging: monitor.isDragging(),
+  renderDropTargets: monitor.getItemType() !== null, // render drop targets if anything is dragging
 }));
 
 ListItem.propTypes = ListItemPropTypes;

diff --git a/src/components/List/ListItem/ListItem.story.jsx b/src/components/List/ListItem/ListItem.story.jsx
@@ -18,6 +18,7 @@ const dndProps = {
   index: 0,
   dragPreviewText: '',
   isDragging: false,
+  renderDropTargets: false,
   onItemMoved: identity,
   itemWillMove: identity,
 };

diff --git a/src/components/List/ListItem/ListItem.test.jsx b/src/components/List/ListItem/ListItem.test.jsx
@@ -211,6 +211,7 @@ describe('ListItem', () => {
       id: '1',
       value: 'test',
       editingStyle: 'single-nesting',
+      renderDropTargets: true,
     };
 
     const Wrapped = wrapInTestContext(UnconnectedListItem, listItemProps);
@@ -228,6 +229,7 @@ describe('ListItem', () => {
       value: 'test',
       editingStyle: 'single',
       index: '0',
+      renderDropTargets: true,
     };
 
     const Wrapped = wrapInTestContext(UnconnectedListItem, listItemProps);

diff --git a/src/components/List/ListItem/ListItemWrapper.jsx b/src/components/List/ListItem/ListItemWrapper.jsx
@@ -19,6 +19,7 @@ const ListItemWrapper = ({
   onSelect,
   selected,
   isDragging,
+  renderDropTargets,
   isLargeRow,
   children,
   connectDragSource,
@@ -68,56 +69,54 @@ const ListItemWrapper = ({
         className={classnames(
           `${iotPrefix}--list-item-editable--drag-container`,
           {
-            [`${iotPrefix}--list-item-editable-dragging`]: isDragging,
+            [`${iotPrefix}--list-item-editable--dragging`]: isDragging,
           }
         )}
         ref={(instance) => {
           if (connectDragSource) {
             connectDragSource(instance);
           }
         }}>
-        <div
-          className={classnames(
-            `${iotPrefix}--list-item-editable--drop-targets`,
+        {renderDropTargets && (
+          <div
+            className={classnames(
+              `${iotPrefix}--list-item-editable--drop-targets`,
+              {
+                [`${iotPrefix}--list-item__large`]: isLargeRow,
+              }
+            )}>
             {
-              [`${iotPrefix}--list-item__large`]: isLargeRow,
-            }
-          )}>
-          {
-            // Renders Nested location only if nesting is allowed
-
-            canNest ? (
-              <ListTarget
-                id={id}
-                isDragging={isDragging}
-                targetPosition={DropLocation.Nested}
-                targetSize={TargetSize.Full}
-                itemWillMove={itemWillMove}
-                onItemMoved={onItemMoved}
-              />
-            ) : null
-          }
+              // Renders Nested location only if nesting is allowed
 
-          <ListTarget
-            id={id}
-            isDragging={isDragging}
-            targetPosition={DropLocation.Above}
-            itemWillMove={itemWillMove}
-            targetSize={canNest ? TargetSize.Third : TargetSize.Half}
-            onItemMoved={onItemMoved}
-          />
+              canNest ? (
+                <ListTarget
+                  id={id}
+                  targetPosition={DropLocation.Nested}
+                  targetSize={TargetSize.Full}
+                  itemWillMove={itemWillMove}
+                  onItemMoved={onItemMoved}
+                />
+              ) : null
+            }
 
-          <ListTarget
-            id={id}
-            isDragging={isDragging}
-            targetPosition={DropLocation.Below}
-            itemWillMove={itemWillMove}
-            targetOverride={expanded ? DropLocation.Nested : null} // If item is expanded then the bottom target will nest
-            targetSize={canNest ? TargetSize.Third : TargetSize.Half}
-            onItemMoved={onItemMoved}
-          />
-        </div>
+            <ListTarget
+              id={id}
+              targetPosition={DropLocation.Above}
+              itemWillMove={itemWillMove}
+              targetSize={canNest ? TargetSize.Third : TargetSize.Half}
+              onItemMoved={onItemMoved}
+            />
 
+            <ListTarget
+              id={id}
+              targetPosition={DropLocation.Below}
+              itemWillMove={itemWillMove}
+              targetOverride={expanded ? DropLocation.Nested : null} // If item is expanded then the bottom target will nest
+              targetSize={canNest ? TargetSize.Third : TargetSize.Half}
+              onItemMoved={onItemMoved}
+            />
+          </div>
+        )}
         {body}
       </div>
     );
@@ -140,6 +139,7 @@ const ListItemWrapperProps = {
   isSelectable: PropTypes.bool.isRequired,
   isDragging: PropTypes.bool.isRequired,
   onSelect: PropTypes.func.isRequired,
+  renderDropTargets: PropTypes.bool.isRequired,
   selected: PropTypes.bool.isRequired,
   children: PropTypes.node.isRequired,
   onItemMoved: PropTypes.func.isRequired,

diff --git a/src/components/List/ListItem/_list-item.scss b/src/components/List/ListItem/_list-item.scss
@@ -16,6 +16,8 @@
     }
 
     &:active {
+      background: $hover-ui;
+
       cursor: grabbing;
     }
   }
@@ -73,7 +75,7 @@
     z-index: -100;
   }
 
-  &-dragging {
+  &--dragging {
     background: $hover-ui;
     cursor: grabbing;
   }
@@ -85,7 +87,6 @@
 }
 
 .#{$iot-prefix}--list-item {
-  background: $ui-01;
   border-bottom: 1px solid $ui-03;
   display: flex;
   height: rem(40px);

diff --git a/src/components/List/SimpleList/SimpleList.test.jsx b/src/components/List/SimpleList/SimpleList.test.jsx
@@ -211,7 +211,7 @@ describe('SimpleList', () => {
 
   it('SimpleList reorder', () => {
     let newData = null;
-    render(
+    const { rerender } = render(
       <SimpleList
         title="Simple list"
         items={getListItems(5)}
@@ -228,15 +228,26 @@ describe('SimpleList', () => {
     expect(firstItem).toBeInTheDocument();
     expect(listItems.length).toEqual(5);
 
-    const targets = within(listItems[1]).getAllByTestId('list-target');
-
-    expect(targets.length).toEqual(2);
-
     fireEvent.dragStart(firstItem, {
       dataTransfer: {
         dropEffect: 'move',
       },
     });
+
+    rerender(
+      <SimpleList
+        title="Simple list"
+        items={getListItems(5)}
+        editingStyle={EditingStyle.Multiple}
+        onListUpdated={(newList) => {
+          newData = newList;
+        }}
+      />
+    );
+
+    const targets = within(listItems[1]).getAllByTestId('list-target');
+    expect(targets.length).toEqual(2);
+
     fireEvent.dragEnter(targets[1], {
       dataTransfer: {
         dropEffect: 'move',