feat(component): toggle for elements

src/component/container/elementWrapper.tsx

@@ -0,0 +1,44 @@
+import Element from '../../lsg/patterns/element';
+import * as React from 'react';
+
+export interface ElementWrapperState {
+	open?: boolean;
+}
+
+export interface ElementWrapperProps {
+	active?: boolean;
+	open?: boolean;
+	title: string;
+}
+
+export class ElementWrapper extends React.Component<ElementWrapperProps, ElementWrapperState> {
+	public constructor(props: ElementWrapperProps) {
+		super(props);
+
+		this.state = {
+			open: this.props.open
+		};
+
+		this.handleIconClick = this.handleIconClick.bind(this);
+	}
+
+	private handleIconClick(): void {
+		this.setState({
+			open: !this.state.open
+		});
+	}
+
+	public render(): JSX.Element {
+		const { active, children, title } = this.props;
+		return (
+			<Element
+				title={title}
+				open={!this.state.open}
+				active={active}
+				handleIconClick={this.handleIconClick}
+			>
+				{children}
+			</Element>
+		);
+	}
+}

src/component/container/element_list.tsx

@@ -1,4 +1,4 @@
-import Element from '../../lsg/patterns/element';
+import { ElementWrapper } from './elementWrapper';
 import { ListPropsListItem } from '../presentation/list';
 import { observer } from 'mobx-react';
 import { Page } from '../../store/page';
@@ -29,9 +29,9 @@ export class ElementList extends React.Component<ElementListProps> {
 
 	public renderList(item: ListPropsListItem, key?: number): JSX.Element {
 		return (
-			<Element title={item.value} key={key}>
+			<ElementWrapper title={item.value} key={key}>
 				{item.children && item.children.map((child, index) => this.renderList(child, index))}
-			</Element>
+			</ElementWrapper>
 		);
 	}