Refactoring/Check details

src/ts/component/page/elements/head/editor.tsx

@@ -30,8 +30,8 @@ const PageHeadEditor = observer(class PageHeadEditor extends React.Component<Pro
 			return null;
 		};
 
-		const check = U.Data.checkDetails(rootId);
-		const object = S.Detail.get(rootId, rootId, [ 'layout', 'layoutAlign' ], true);
+		const check = U.Data.checkDetails(rootId, rootId, [ 'layout', 'layoutAlign' ]);
+		const object = check.object;
 		const header = S.Block.getLeaf(rootId, 'header');
 		const cover = new M.Block({ id: rootId + '-cover', type: I.BlockType.Cover, hAlign: object.layoutAlign, childrenIds: [], fields: {}, content: {} });
 		const icon: any = new M.Block({ id: rootId + '-icon', type: I.BlockType.IconPage, hAlign: object.layoutAlign, childrenIds: [], fields: {}, content: {} });

src/ts/component/page/elements/head/simple.tsx

@@ -178,7 +178,7 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 	init () {
 		const { focused } = focus.state;
 		const { rootId } = this.props;
-		const object = S.Detail.get(rootId, rootId);
+		const object = S.Detail.get(rootId, rootId, [ 'name' ], true);
 
 		this.setValue();
 
@@ -237,7 +237,7 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 	setValue () {
 		const { dateFormat } = S.Common;
 		const { rootId } = this.props;
-		const object = S.Detail.get(rootId, rootId);
+		const object = S.Detail.get(rootId, rootId, []);
 
 		for (const item of EDITORS) {
 			if (!this.refEditable[item.blockId]) {

src/ts/component/page/main/history/left.tsx

@@ -26,8 +26,8 @@ const HistoryLeft = observer(class HistoryLeft extends React.Component<Props> {
 		const { rootId, onCopy } = this.props;
 		const root = S.Block.getLeaf(rootId, rootId);
 		const childrenIds = S.Block.getChildrenIds(rootId, rootId);
-		const check = U.Data.checkDetails(rootId);
-		const object = S.Detail.get(rootId, rootId, [ 'layoutAlign' ]);
+		const check = U.Data.checkDetails(rootId, rootId, [ 'layout', 'layoutAlign' ]);
+		const object = check.object;
 		const icon = new M.Block({ id: `${rootId}-icon`, type: I.BlockType.IconPage, hAlign: object.layoutAlign, childrenIds: [], fields: {}, content: {} });
 		const cover = new M.Block({ id: `${rootId}-cover`, type: I.BlockType.Cover, hAlign: object.layoutAlign, childrenIds: [], fields: {}, content: {} });
 		const cn = [ 'editorWrapper', check.className ];

src/ts/component/page/main/set.tsx

@@ -36,7 +36,7 @@ const PageMainSet = observer(class PageMainSet extends React.Component<I.PageCom
 	render () {
 		const { isLoading, isDeleted } = this.state;
 		const rootId = this.getRootId();
-		const check = U.Data.checkDetails(rootId);
+		const check = U.Data.checkDetails(rootId, rootId, [ 'layout' ]);
 
 		let content = null;
 		if (isDeleted) {
@@ -45,7 +45,7 @@ const PageMainSet = observer(class PageMainSet extends React.Component<I.PageCom
 		if (isLoading) {
 			content = <Loader id="loader" />;
 		} else {
-			const object = S.Detail.get(rootId, rootId, [ 'layout' ], true);
+			const object = check.object;
 			const isCollection = U.Object.isCollectionLayout(object.layout);
 			const children = S.Block.getChildren(rootId, rootId, it => it.isDataview());
 			const cover = new M.Block({ id: rootId + '-cover', type: I.BlockType.Cover, childrenIds: [], fields: {}, content: {} });

src/ts/component/page/main/type.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import $ from 'jquery';
+import { trace } from 'mobx';
 import { observer } from 'mobx-react';
 import { Icon, Header, Footer, Loader, ListPreviewObject, ListObject, Select, Deleted, HeadSimple, EditorControls } from 'Component';
 import { I, C, S, U, J, focus, Action, analytics, Relation, translate } from 'Lib';
@@ -44,8 +45,8 @@ const PageMainType = observer(class PageMainType extends React.Component<I.PageC
 
 		const { config } = S.Common;
 		const rootId = this.getRootId();
-		const check = U.Data.checkDetails(rootId);
-		const object = S.Detail.get(rootId, rootId, J.Relation.type);
+		const check = U.Data.checkDetails(rootId, rootId, J.Relation.type);
+		const object = check.object;
 
 		if (!object) {
 			return null;
@@ -131,6 +132,7 @@ const PageMainType = observer(class PageMainType extends React.Component<I.PageC
 					<EditorControls ref={ref => this.refControls = ref} key="editorControls" {...this.props} rootId={rootId} resize={() => {}} />
 					<HeadSimple 
 						{...this.props} 
+						key="headSimple"
 						ref={ref => this.refHead = ref} 
 						placeholder={translate('defaultNameType')} 
 						rootId={rootId} 

src/ts/component/sidebar/page/object.tsx

@@ -89,7 +89,7 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S
 						compact={this.compact}
 						onClick={e => this.onClick(e, item)}
 						onContext={() => this.onContext(item)}
-						onMouseEnter={() => this.onOver(item)}
+						onMouseEnter={() => this.onOver(item, param.index)}
 						onMouseLeave={() => this.onOut()}
 					/>
 				);
@@ -249,7 +249,7 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S
 			keyMapper: i => (items[i] || {}).id,
 		});
 
-		this.setActive();
+		this.setActive(items[this.n]);
 		this.checkTabButtons();
 	};
 
@@ -560,13 +560,19 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S
 			};
 		};
 
+		let flags = [];
+
+		if (![ I.ObjectContainerType.Type, I.ObjectContainerType.Relation ].includes(this.type)) {
+			flags = [ I.ObjectFlag.SelectTemplate, I.ObjectFlag.DeleteEmpty ];
+		};
+
 		if (this.type == I.ObjectContainerType.Bookmark) {
 			this.onBookmarkMenu(details, cb);
 		} else
 		if (this.type == I.ObjectContainerType.Relation) {
 			this.onRelationMenu(cb);
 		} else {
-			keyboard.pageCreate(details, analytics.route.allObjects, [ I.ObjectFlag.SelectTemplate, I.ObjectFlag.DeleteEmpty ], (message: any) => {
+			keyboard.pageCreate(details, analytics.route.allObjects, flags, (message: any) => {
 				cb(message.targetId);
 			});
 		};
@@ -701,8 +707,9 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S
 		});
 	};
 
-	onOver (item: any) {
+	onOver (item: any, index: number) {
 		if (!keyboard.isMouseDisabled) {
+			this.n = index;
 			this.setActive(item);
 		};
 	};
@@ -846,7 +853,7 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S
 
 				scrollTo = this.currentIndex;
 			} else {
-				this.setActive();
+				this.setActive(items[this.n]);
 				scrollTo = this.n;
 			};
 
@@ -934,17 +941,9 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S
 		this.renderSelection();
 	};
 
-	setActive (item?: any) {
+	setActive (item: any) {
 		this.unsetActive();
 
-		const items = this.getItems();
-
-		if (!item) {
-			item = items[this.n];
-		} else {
-			this.n = items.findIndex(it => it.id == item.id);
-		};
-
 		if (item) {
 			$(this.node).find(`#item-${item.id}`).addClass('active');
 		};

src/ts/lib/util/data.ts

@@ -582,16 +582,18 @@ class UtilData {
 		}, callBack);
 	};
 
-	checkDetails (rootId: string, blockId?: string) {
+	checkDetails (rootId: string, blockId?: string, keys?: string[]) {
 		blockId = blockId || rootId;
+		keys = keys || [];
 
-		const object = S.Detail.get(rootId, blockId, [ 'layout', 'layoutAlign', 'iconImage', 'iconEmoji', 'templateIsBundled' ].concat(J.Relation.cover), true);
+		const object = S.Detail.get(rootId, blockId, [ 'layout', 'layoutAlign', 'iconImage', 'iconEmoji', 'templateIsBundled' ].concat(J.Relation.cover).concat(keys), true);
 		const checkType = S.Block.checkBlockTypeExists(rootId);
 		const { iconEmoji, iconImage, coverType, coverId } = object;
 		const ret = {
 			withCover: false,
 			withIcon: false,
 			className: '',
+			object,
 		};
 
 		let className = [];

src/ts/store/detail.ts

@@ -23,28 +23,30 @@ class DetailStore {
 		});
 	};
 
+	private createListItem (k: string, v: any): Detail {
+		const el = { relationKey: k, value: v };
+
+		makeObservable(el, { value: observable });
+		intercept(el as any, (change: any) => {
+			return (change.newValue === el[change.name] ? null : change); 
+		});
+		return el;
+	}; 
+
 	/** Idempotent. adds details to the detail store. */
 	public set (rootId: string, items: Item[]) {
 		if (!rootId) {
 			console.log('[S.Detail].set: rootId is not defined');
 			return;
 		};
 
-		const map = observable.map(new Map());
+		const map = new Map();
 
 		for (const item of items) {
 			const list: Detail[] = [];
 
 			for (const k in item.details) {
-				const el = { relationKey: k, value: item.details[k] };
-
-				makeObservable(el, { value: observable });
-
-				intercept(el as any, (change: any) => { 
-					return (change.newValue === el[change.name] ? null : change); 
-				});
-
-				list.push(el);
+				list.push(this.createListItem(k, item.details[k]));
 			};
 
 			map.set(item.id, list);
@@ -85,19 +87,16 @@ class DetailStore {
 		};
 
 		for (const k in item.details) {
-			let el = list.find(it => it.relationKey == k);
+			if (clear) {
+				list.push(this.createListItem(k, item.details[k]));
+				continue;
+			};
+
+			const el = list.find(it => it.relationKey == k);
 			if (el) {
-				set(el, { value: item.details[k] });
+				el.value = item.details[k];
 			} else {
-				el = { relationKey: k, value: item.details[k] };
-
-				makeObservable(el, { value: observable });
-
-				list.push(el);
-
-				intercept(el as any, (change: any) => { 
-					return (change.newValue === el[change.name] ? null : change); 
-				});
+				list.push(this.createListItem(k, item.details[k]));
 			};
 		};