diff --git a/src/component/container/pattern_list.tsx b/src/component/container/pattern_list.tsx index 4070e982a..827b98309 100644 --- a/src/component/container/pattern_list.tsx +++ b/src/component/container/pattern_list.tsx @@ -1,8 +1,9 @@ import Input from '../../lsg/patterns/input/'; import { PatternFolder } from '../../store/pattern/folder'; -import List, {ListItemProps} from '../../lsg/patterns/list'; +import List, { ListItemProps } from '../../lsg/patterns/list'; import { action } from 'mobx'; import { observer } from 'mobx-react'; +import { PageElement } from '../../store/page/page_element'; import { Pattern } from '../../store/pattern'; import * as React from 'react'; import { Store } from '../../store'; @@ -18,6 +19,7 @@ export class PatternList extends React.Component { super(props); this.handleSearchInputChange = this.handleSearchInputChange.bind(this); + this.handlePatternClick = this.handlePatternClick.bind(this); } public render(): JSX.Element { @@ -26,11 +28,13 @@ export class PatternList extends React.Component { this.props.store.getPatternRoot() as PatternFolder ); } else { - this.items = this.props.store.searchPatterns(this.props.store.getPatternSearchTerm()).map(pattern => ({ value: pattern.getName() })); + this.items = this.props.store + .searchPatterns(this.props.store.getPatternSearchTerm()) + .map(pattern => ({ value: pattern.getName() })); } return (
- +
); @@ -47,7 +51,12 @@ export class PatternList extends React.Component { }); folder.getPatterns().forEach((pattern: Pattern) => { - result.push({ value: pattern.getName() }); + result.push({ + value: pattern.getName(), + onClick: () => { + this.handlePatternClick(pattern); + } + }); }); } @@ -57,4 +66,8 @@ export class PatternList extends React.Component { protected handleSearchInputChange(evt: React.ChangeEvent): void { this.props.store.setPatternSearchTerm(evt.target.value); } + @action + protected handlePatternClick(pattern: Pattern): void { + new PageElement(pattern).setParent(this.props.store.getSelectedElement()); + } }