chore(@clayui/core): add test for nested items

liferay · Sep 16, 2021 · a118a2a · a118a2a
1 parent 8cfd75c
commit a118a2a
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 26 deletions.
diff --git a/packages/clay-core/src/tree-view/DragLayer.tsx b/packages/clay-core/src/tree-view/DragLayer.tsx
@@ -32,6 +32,11 @@ function getItemStyles(
 
 	return {
 		WebkitTransform: transform,
+		backgroundColor: 'white',
+		border: '1px solid aliceblue',
+		maxWidth: '140px',
+		padding: '2px',
+		textAlign: 'center',
 		transform,
 	};
 }

diff --git a/packages/clay-core/src/tree-view/__tests__/useTree.ts b/packages/clay-core/src/tree-view/__tests__/useTree.ts
@@ -77,4 +77,50 @@ describe('useTree', () => {
 
 		expect(result).toMatchObject(newTree);
 	});
+
+	it('can move nested items', () => {
+		const tree = [
+			{
+				children: [{name: 'Blogs'}, {name: 'Documents and Media'}],
+				name: 'Liferay Drive',
+			},
+			{
+				children: [{name: 'Blogs'}, {name: 'Documents and Media'}],
+				name: 'Repositories',
+			},
+			{
+				children: [{name: 'PDF'}, {name: 'Word'}],
+				name: 'Documents and Media',
+			},
+		];
+
+		const newTree = [
+			{
+				children: [
+					{name: 'Blogs'},
+					{
+						children: [{name: 'PDF'}],
+						name: 'Documents and Media',
+					},
+				],
+				name: 'Liferay Drive',
+			},
+			{
+				children: [{name: 'Blogs'}, {name: 'Documents and Media'}],
+				name: 'Repositories',
+			},
+			{
+				children: [{name: 'Word'}],
+				name: 'Documents and Media',
+			},
+		];
+
+		const immutableTree = createImmutableTree(tree, 'children');
+
+		immutableTree.produce([2, 0], [0, 1]);
+
+		const result = immutableTree.applyPatches();
+
+		expect(result).toMatchObject(newTree);
+	});
 });
diff --git a/packages/clay-core/src/tree-view/useItem.tsx b/packages/clay-core/src/tree-view/useItem.tsx
@@ -56,7 +56,7 @@ export function ItemContextProvider({children, value}: Props) {
 		preview(getEmptyImage(), {captureDraggingState: true});
 	}, [preview]);
 
-	const [, drop] = useDrop({
+	const [{overTarget}, drop] = useDrop({
 		accept: 'treeViewItem',
 		collect: (monitor) => ({
 			canDrop: monitor.canDrop(),
@@ -81,6 +81,7 @@ export function ItemContextProvider({children, value}: Props) {
 	return (
 		<ItemContext.Provider value={item}>
 			{React.cloneElement(children as JSX.Element, {
+				overTarget,
 				ref: childRef,
 			})}
 		</ItemContext.Provider>

diff --git a/packages/clay-core/src/tree-view/useTree.ts b/packages/clay-core/src/tree-view/useTree.ts
@@ -178,33 +178,15 @@ export function createImmutableTree<T extends Array<Record<string, any>>>(
 
 					const pathToAdd = nodeByPath(path);
 
-					if (pathToAdd.parent) {
-						if (!Array.isArray(pathToAdd.parent[nestedKey])) {
-							pathToAdd.parent[nestedKey] = [];
-						}
-
-						pathToAdd.parent[nestedKey].splice(pathToAdd.index, 1);
-						pathToAdd.parent[nestedKey].splice(
-							pathToAdd.index,
-							0,
-							nodeToRemove.item
-						);
-						pathToAdd.parent[nestedKey].splice(
-							pathToAdd.index + 1,
-							0,
-							pathToAdd.item
-						);
-					} else {
-						if (!Array.isArray(pathToAdd.item[nestedKey])) {
-							pathToAdd.item[nestedKey] = [];
-						}
-
-						pathToAdd.item[nestedKey] = [
-							...pathToAdd.item[nestedKey],
-							nodeToRemove.item,
-						];
+					if (!Array.isArray(pathToAdd.item[nestedKey])) {
+						pathToAdd.item[nestedKey] = [];
 					}
 
+					pathToAdd.item[nestedKey] = [
+						...pathToAdd.item[nestedKey],
+						nodeToRemove.item,
+					];
+
 					break;
 				}
 				default: