feat(lsg): when dragging a pattern only the icon should be visible un…

…der the cursor
meetalva · Dec 18, 2017 · c63db83 · c63db83
1 parent d833658
commit c63db83
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/component/container/pattern_list.tsx b/src/component/container/pattern_list.tsx
@@ -137,6 +137,12 @@ export class PatternListContainer extends React.Component<PatternListContainerPr
 	@action
 	protected handleDragStart(e: React.DragEvent<HTMLElement>, pattern: Pattern): void {
 		const data = pattern.getRelativePath();
+		e.dataTransfer.dropEffect = 'copy';
+		e.dataTransfer.setDragImage(
+			e.currentTarget.querySelector('.pattern__icon') as Element,
+			12,
+			12
+		);
 		e.dataTransfer.setData('patternPath', data);
 	}
 }
diff --git a/src/lsg/patterns/pattern-list/index.tsx b/src/lsg/patterns/pattern-list/index.tsx
@@ -54,9 +54,14 @@ export const PatternListItem: React.StatelessComponent<PatternListItemProps> = p
 	return (
 		<StyledPatternListItem onDragStart={handleDragStart} draggable={draggable} onClick={onClick}>
 			{icon ? (
-				<StyledSVG>{icon}</StyledSVG>
+				<StyledSVG className="pattern__icon">{icon}</StyledSVG>
 			) : (
-				<StyledIcon name={IconName.Robo} size={IconSize.XS} color={colors.grey70} />
+				<StyledIcon
+					className="pattern__icon"
+					name={IconName.Robo}
+					size={IconSize.XS}
+					color={colors.grey70}
+				/>
 			)}
 			{props.children}
 		</StyledPatternListItem>