fix: restore element name editing

meetalva · May 28, 2018 · 8c47f72 · 8c47f72
1 parent 10ee949
commit 8c47f72
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/container/element-list/element-container.tsx b/src/container/element-list/element-container.tsx
@@ -1,3 +1,4 @@
+import * as AlvaUtil from '../../alva-util';
 import * as Components from '../../components';
 import { ElementContentContainer } from './element-content-container';
 import * as MobxReact from 'mobx-react';
@@ -12,6 +13,8 @@ export interface ElementContainerProps {
 export class ElementContainer extends React.Component<ElementContainerProps> {
 	public render(): JSX.Element | null {
 		const { props } = this;
+		const open =
+			props.element.getOpen() || props.element.getDescendants().some(e => e.getSelected());
 		return (
 			<Components.Element
 				active={props.element.getSelected()}
@@ -22,12 +25,11 @@ export class ElementContainer extends React.Component<ElementContainerProps> {
 				highlightPlaceholder={props.element.getPlaceholderHighlighted()}
 				id={props.element.getId()}
 				mayOpen={props.element.acceptsChildren()}
-				open={
-					props.element.getOpen() || props.element.getDescendants().some(e => e.getSelected())
-				}
+				open={open}
+				onChange={AlvaUtil.noop}
 				title={props.element.getName()}
 			>
-				{props.element.getOpen()
+				{open
 					? props.element
 							.getContents()
 							.map(content => (

diff --git a/src/container/element-list/element-list.tsx b/src/container/element-list/element-list.tsx
@@ -65,6 +65,15 @@ export class ElementList extends React.Component {
 		}
 	}
 
+	private handleChange(e: React.FormEvent<HTMLElement>): void {
+		const target = e.target as HTMLInputElement;
+		const changedElement = elementFromTarget(e.target, { sibling: false });
+
+		if (changedElement) {
+			changedElement.setName(target.value);
+		}
+	}
+
 	private handleClick(e: React.MouseEvent<HTMLElement>): void {
 		const target = e.target as HTMLElement;
 		const icon = above(target, `svg[${ElementAnchors.icon}]`);
@@ -329,6 +338,7 @@ export class ElementList extends React.Component {
 				data-drag-root
 				{...{ [ElementAnchors.element]: rootElement.getId() }}
 				onBlur={e => this.handleBlur(e)}
+				onChange={e => this.handleChange(e)}
 				onClick={e => this.handleClick(e)}
 				onContextMenu={e => this.handleContextMenu(e)}
 				onDragEnd={e => this.handleDragEnd(e)}