feat(component): element can now be selected

src/component/container/elementWrapper.tsx

@@ -9,6 +9,7 @@ export interface ElementWrapperProps {
 	active?: boolean;
 	open?: boolean;
 	title: string;
+	handleClick?: React.MouseEventHandler<HTMLElement>;
 }
 
 export class ElementWrapper extends React.Component<ElementWrapperProps, ElementWrapperState> {
@@ -29,12 +30,13 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 	}
 
 	public render(): JSX.Element {
-		const { active, children, title } = this.props;
+		const { active, children, handleClick, title } = this.props;
 		return (
 			<Element
 				title={title}
 				open={!this.state.open}
 				active={active}
+				handleClick={handleClick}
 				handleIconClick={this.handleIconClick}
 			>
 				{children}

src/component/container/element_list.tsx

@@ -29,7 +29,7 @@ export class ElementList extends React.Component<ElementListProps> {
 
 	public renderList(item: ListPropsListItem, key?: number): JSX.Element {
 		return (
-			<ElementWrapper title={item.value} key={key}>
+			<ElementWrapper title={item.value} key={key} handleClick={item.onClick}>
 				{item.children &&
 					item.children.length > 0 &&
 					item.children.map((child, index) => this.renderList(child, index))}
@@ -59,9 +59,15 @@ export class ElementList extends React.Component<ElementListProps> {
 
 		const patternPath: string = element.getPatternPath() as string;
 
+		const updatePageElement: React.MouseEventHandler<HTMLElement> = event => {
+			event.stopPropagation();
+			this.props.store && this.props.store.setSelectedElement(element);
+		};
+
 		return {
 			label: key,
 			value: patternPath.replace(/^.*\//, ''),
+			onClick: updatePageElement,
 			children: items
 		};
 	}

src/component/presentation/list.tsx

@@ -41,7 +41,7 @@ export interface ListPropsListItem {
 	label?: string;
 	value: string;
 
-	onClick?(event: {}): void;
+	onClick?: React.MouseEventHandler<HTMLElement>;
 }
 
 export class List extends React.Component<ListProps> {