feat(component): functionality to add patterns to element list with d…

…rag and drop

src/component/container/elementWrapper.tsx

@@ -3,24 +3,30 @@ import * as React from 'react';
 
 export interface ElementWrapperState {
 	open?: boolean;
+	highlight?: boolean;
 }
 
 export interface ElementWrapperProps {
 	active?: boolean;
 	open?: boolean;
 	title: string;
 	handleClick?: React.MouseEventHandler<HTMLElement>;
+	handleDragDrop?: React.DragEventHandler<HTMLElement>;
 }
 
 export class ElementWrapper extends React.Component<ElementWrapperProps, ElementWrapperState> {
 	public constructor(props: ElementWrapperProps) {
 		super(props);
 
 		this.state = {
-			open: this.props.open
+			open: this.props.open,
+			highlight: false
 		};
 
 		this.handleIconClick = this.handleIconClick.bind(this);
+		this.handleDragEnter = this.handleDragEnter.bind(this);
+		this.handleDragLeave = this.handleDragLeave.bind(this);
+		this.handleDragDrop = this.handleDragDrop.bind(this);
 	}
 
 	private handleIconClick(): void {
@@ -29,15 +35,38 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 		});
 	}
 
+	private handleDragEnter(e: React.DragEvent<HTMLElement>): void {
+		this.setState({
+			highlight: true
+		});
+	}
+
+	private handleDragLeave(e: React.DragEvent<HTMLElement>): void {
+		this.setState({
+			highlight: false
+		});
+	}
+
+	private handleDragDrop(e: React.DragEvent<HTMLElement>): void {
+		this.setState({
+			highlight: false
+		});
+		this.props.handleDragDrop && this.props.handleDragDrop(e);
+	}
+
 	public render(): JSX.Element {
 		const { active, children, handleClick, title } = this.props;
 		return (
 			<Element
 				title={title}
 				open={!this.state.open}
 				active={active}
+				highlight={this.state.highlight}
 				handleClick={handleClick}
 				handleIconClick={this.handleIconClick}
+				handleDragEnter={this.handleDragEnter}
+				handleDragLeave={this.handleDragLeave}
+				handleDragDrop={this.handleDragDrop}
 			>
 				{children}
 			</Element>

src/component/container/element_list.tsx

@@ -36,6 +36,7 @@ export class ElementList extends React.Component<ElementListProps> {
 				key={key}
 				handleClick={item.onClick}
 				active={item.active}
+				handleDragDrop={item.handleDragDrop}
 			>
 				{item.children &&
 					item.children.length > 0 &&
@@ -85,6 +86,10 @@ export class ElementList extends React.Component<ElementListProps> {
 			label: key,
 			value: patternPath.replace(/^.*\//, ''),
 			onClick: updatePageElement,
+			handleDragDrop: (e: React.DragEvent<HTMLElement>) => {
+				const transfePatternPath = e.dataTransfer.getData('patternPath');
+				element.addChild(new PageElement(this.props.store.getPattern(transfePatternPath)));
+			},
 			children: items,
 			active: element === selectedElement
 		};

src/component/container/pattern_list.tsx

@@ -20,6 +20,7 @@ export class PatternList extends React.Component<PatternListProps> {
 
 		this.handleSearchInputChange = this.handleSearchInputChange.bind(this);
 		this.handlePatternClick = this.handlePatternClick.bind(this);
+		this.handleDragStart = this.handleDragStart.bind(this);
 	}
 
 	public render(): JSX.Element {
@@ -53,6 +54,10 @@ export class PatternList extends React.Component<PatternListProps> {
 			folder.getPatterns().forEach((pattern: Pattern) => {
 				result.push({
 					value: pattern.getName(),
+					draggable: true,
+					handleDragStart: (e: React.DragEvent<HTMLElement>) => {
+						this.handleDragStart(e, pattern);
+					},
 					onClick: () => {
 						this.handlePatternClick(pattern);
 					}
@@ -73,4 +78,9 @@ export class PatternList extends React.Component<PatternListProps> {
 			selectedElement.addChild(new PageElement(pattern));
 		}
 	}
+	@action
+	protected handleDragStart(e: React.DragEvent<HTMLElement>, pattern: Pattern): void {
+		const data = pattern.getRelativePath();
+		e.dataTransfer.setData('patternPath', data);
+	}
 }