feat: integrate pattern list search

src/component/container/pattern_list.tsx

@@ -1,5 +1,7 @@
+import Input from '../../lsg/patterns/input/';
 import { PatternFolder } from '../../store/pattern/folder';
 import { List, ListPropsListItem } from '../presentation/list';
+import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import { Pattern } from '../../store/pattern';
 import * as React from 'react';
@@ -11,15 +13,27 @@ export interface PatternListProps {
 
 @observer
 export class PatternList extends React.Component<PatternListProps> {
+	public items: ListPropsListItem[] = [];
 	public constructor(props: PatternListProps) {
 		super(props);
+
+		this.handleSearchInputChange = this.handleSearchInputChange.bind(this);
 	}
 
 	public render(): JSX.Element {
-		const items: ListPropsListItem[] = this.createItemsFromFolder(
-			this.props.store.getPatternRoot() as PatternFolder
+		if (this.props.store.getPatternSearchTerm() === '') {
+			this.items = this.createItemsFromFolder(
+				this.props.store.getPatternRoot() as PatternFolder
+			);
+		} else {
+			this.items = this.props.store.searchPatterns(this.props.store.getPatternSearchTerm()).map(pattern => ({ value: pattern.getName() }));
+		}
+		return (
+			<div>
+				<Input handleChange={this.handleSearchInputChange}/>
+				<List headline="Patterns" items={this.items} />
+			</div>
 		);
-		return <List headline="Patterns" items={items} />;
 	}
 
 	public createItemsFromFolder(folder: PatternFolder): ListPropsListItem[] {
@@ -39,4 +53,8 @@ export class PatternList extends React.Component<PatternListProps> {
 
 		return result;
 	}
+	@action
+	protected handleSearchInputChange(evt: React.ChangeEvent<HTMLInputElement>): void {
+		this.props.store.setPatternSearchTerm(evt.target.value);
+	}
 }

src/store/index.ts

@@ -11,7 +11,7 @@ import { Project } from './project';
 
 export class Store {
 	@MobX.observable private currentPage?: Page;
-	@MobX.observable private patternSearchTerm: string;
+	@MobX.observable private patternSearchTerm: string = '';
 	@MobX.observable private projects: Map<string, Project> = new Map();
 	@MobX.observable private patternRoot: PatternFolder;
 	@MobX.observable private selectedElement?: PageElement;
@@ -117,7 +117,7 @@ export class Store {
 	}
 
 	public searchPatterns(term: string): Pattern[] {
-		return this.patternRoot.searchPatterns(term);
+		return this.patternRoot ? this.patternRoot.searchPatterns(term) : [];
 	}
 
 	public setPageFromJsonInternal(json: JsonObject, projectId: string, pageId: string): void {

src/store/pattern/index.ts

@@ -61,6 +61,9 @@ export class Pattern {
 	}
 
 	public matches(term: string): boolean {
+		if (!term || !this.name) {
+			return false;
+		}
 		return this.name.toLowerCase().indexOf(term.toLowerCase()) >= 0;
 	}