@@ -2679,37 +2245,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
className="iot--list-item-editable--drag-container"
role="listitem"
>
-
diff --git a/src/components/List/ListItem/ListItem.jsx b/src/components/List/ListItem/ListItem.jsx
index 078ac40f35..b6158d2dbc 100644
--- 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
index ebbe976cfe..18c76a2a14 100644
--- 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
index 55525abe9a..456dd25d11 100644
--- 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
index 6a5ea8066d..a02e6c33d0 100644
--- 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,7 +69,7 @@ const ListItemWrapper = ({
className={classnames(
`${iotPrefix}--list-item-editable--drag-container`,
{
- [`${iotPrefix}--list-item-editable-dragging`]: isDragging,
+ [`${iotPrefix}--list-item-editable--dragging`]: isDragging,
}
)}
ref={(instance) => {
@@ -76,48 +77,46 @@ const ListItemWrapper = ({
connectDragSource(instance);
}
}}>
-
{
- [`${iotPrefix}--list-item__large`]: isLargeRow,
- }
- )}>
- {
- // Renders Nested location only if nesting is allowed
-
- canNest ? (
-
- ) : null
- }
+ // Renders Nested location only if nesting is allowed
-
+ canNest ? (
+
+ ) : null
+ }
-
-
+
+
+