Skip to content

Commit

Permalink
Merge pull request #1781 from carbon-design-system/bugfix/hierarchy-e…
Browse files Browse the repository at this point in the history
…xpand

fix(dragndrop): fixed expand icon
  • Loading branch information
kodiakhq[bot] authored Nov 17, 2020
2 parents 12bcc65 + c13ad1f commit c41709f
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 841 deletions.

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions src/components/List/ListItem/ListItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,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,
Expand Down Expand Up @@ -75,6 +76,7 @@ const ListItemDefaultProps = {
isSelectable: false,
disabled: false,
onSelect: () => {},
renderDropTargets: false,
selected: false,
expanded: false,
secondaryValue: null,
Expand Down Expand Up @@ -105,6 +107,7 @@ const ListItem = ({
value,
secondaryValue,
rowActions,
renderDropTargets,
icon,
iconPosition, // or "right"
onItemMoved,
Expand Down Expand Up @@ -210,6 +213,7 @@ const ListItem = ({
onItemMoved,
itemWillMove,
disabled,
renderDropTargets,
}}>
{renderDragPreview()}
{dragIcon()}
Expand Down Expand Up @@ -325,6 +329,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;
Expand Down
1 change: 1 addition & 0 deletions src/components/List/ListItem/ListItem.story.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const dndProps = {
index: 0,
dragPreviewText: '',
isDragging: false,
renderDropTargets: false,
onItemMoved: identity,
itemWillMove: identity,
};
Expand Down
2 changes: 2 additions & 0 deletions src/components/List/ListItem/ListItem.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,7 @@ describe('ListItem', () => {
id: '1',
value: 'test',
editingStyle: 'single-nesting',
renderDropTargets: true,
};

const Wrapped = wrapInTestContext(UnconnectedListItem, listItemProps);
Expand All @@ -228,6 +229,7 @@ describe('ListItem', () => {
value: 'test',
editingStyle: 'single',
index: '0',
renderDropTargets: true,
};

const Wrapped = wrapInTestContext(UnconnectedListItem, listItemProps);
Expand Down
78 changes: 39 additions & 39 deletions src/components/List/ListItem/ListItemWrapper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const ListItemWrapper = ({
onSelect,
selected,
isDragging,
renderDropTargets,
isLargeRow,
children,
connectDragSource,
Expand Down Expand Up @@ -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>
);
Expand All @@ -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,
Expand Down
5 changes: 3 additions & 2 deletions src/components/List/ListItem/_list-item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
}

&:active {
background: $hover-ui;

cursor: grabbing;
}
}
Expand Down Expand Up @@ -73,7 +75,7 @@
z-index: -100;
}

&-dragging {
&--dragging {
background: $hover-ui;
cursor: grabbing;
}
Expand All @@ -85,7 +87,6 @@
}

.#{$iot-prefix}--list-item {
background: $ui-01;
border-bottom: 1px solid $ui-03;
display: flex;
height: rem(40px);
Expand Down
21 changes: 16 additions & 5 deletions src/components/List/SimpleList/SimpleList.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ describe('SimpleList', () => {

it('SimpleList reorder', () => {
let newData = null;
render(
const { rerender } = render(
<SimpleList
title="Simple list"
items={getListItems(5)}
Expand All @@ -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',
Expand Down
Loading

0 comments on commit c41709f

Please sign in to comment.