JS-7006: fix + refactoring

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

@@ -91,7 +91,6 @@ const SidebarPageType = observer(class SidebarPageType extends React.Component<I
 
 	init () {
 		const type = this.getObject();
-		const sections = this.getSections();
 		const details: any = this.props.details || {};
 		const newType = Object.assign({
 			recommendedLayout: I.ObjectLayout.Page,
@@ -105,8 +104,7 @@ const SidebarPageType = observer(class SidebarPageType extends React.Component<I
 		this.object = U.Common.objectCopy(details.isNew ? newType : type || newType);
 		this.backup = U.Common.objectCopy(this.object);
 
-		sections.forEach(it => this.updateObject(it.id));
-
+		this.updateSections();
 		this.disableScroll(true);
 		this.disableButton(true);
 	};
@@ -148,7 +146,6 @@ const SidebarPageType = observer(class SidebarPageType extends React.Component<I
 	};
 
 	onChange (update: any) {
-		const sections = this.getSections();
 		const skipFormat = [ 'defaultTypeId' ];
 
 		for (const relationKey in update) {
@@ -170,11 +167,7 @@ const SidebarPageType = observer(class SidebarPageType extends React.Component<I
 			this.updateLayout(update.recommendedLayout);
 		};
 
-		sections.forEach(it => {
-			this.updateObject(it.id);
-			this.forceUpdate();
-		});
-
+		this.updateSections();
 		this.disableButton(!U.Common.objectLength(this.update) || (!this.object.name && !this.object.pluralName));
 
 		// analytics
@@ -275,8 +268,14 @@ const SidebarPageType = observer(class SidebarPageType extends React.Component<I
 		sidebar.rightPanelToggle(false, true, this.props.isPopup);
 	};
 
-	updateObject (id: string) {
-		this.sectionRefs.get(id)?.setObject(this.object);
+	updateSections () {
+		const sections = this.getSections();
+
+		sections.forEach(it => {
+			this.sectionRefs.get(it.id)?.setObject(this.object);
+		});
+
+		this.forceUpdate();
 		this.previewRef?.update(this.object);
 	};
 

src/ts/component/sidebar/section/type/conflict.tsx

@@ -2,11 +2,10 @@ import React, { forwardRef, useState, useEffect, useImperativeHandle } from 'rea
 import $ from 'jquery';
 import { observer } from 'mobx-react';
 import { Title, Icon, ObjectName, IconObject } from 'Component';
-import { I, C, S, U, Relation, translate, keyboard } from 'Lib';
+import { I, S, U, Relation, translate, keyboard } from 'Lib';
 
 const SidebarSectionTypeConflict = observer(forwardRef<{}, I.SidebarSectionComponent>((props, ref) => {
 
-	const { space } = S.Common;
 	const { rootId, object, onChange } = props;
 	const [ dummy, setDummy ] = useState(0);
 	const [ conflictIds, setConflictIds ] = useState([]);

src/ts/component/sidebar/section/type/relation.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState, useRef, useImperativeHandle, useEffect, MouseEvent } from 'react';
 import { observer } from 'mobx-react';
 import { Title, Label, Icon, ObjectName, IconObject } from 'Component';
-import { I, S, C, U, Relation, translate, keyboard, analytics } from 'Lib';
+import { I, S, U, Relation, translate, keyboard, analytics } from 'Lib';
 import { DndContext, closestCenter, useSensors, useSensor, PointerSensor, KeyboardSensor, DragOverlay } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy, sortableKeyboardCoordinates, arrayMove, useSortable } from '@dnd-kit/sortable';
 import { restrictToVerticalAxis, restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';
@@ -126,17 +126,6 @@ const SidebarSectionTypeRelation = observer(forwardRef<I.SidebarSectionRef, I.Si
 		};
 	};
 
-	const loadConflicts = () => {
-		if (isLoaded) {
-			return;
-		};
-
-		U.Data.getConflictRelations(rootId, ids => {
-			setIsLoaded(true);
-			setConflictIds(ids);
-		});
-	};
-
 	const onSortStart = (e: any) => {
 		keyboard.disableSelection(true);
 		setActive(e.active);
@@ -338,7 +327,14 @@ const SidebarSectionTypeRelation = observer(forwardRef<I.SidebarSectionRef, I.Si
 	}));
 
 	useEffect(() => {
-		loadConflicts();
+		if (isLoaded || !object.id) {
+			return;
+		};
+
+		U.Data.getConflictRelations(object.id, ids => {
+			setIsLoaded(true);
+			setConflictIds(ids);
+		});
 	});
 
 	return (
@@ -371,4 +367,4 @@ const SidebarSectionTypeRelation = observer(forwardRef<I.SidebarSectionRef, I.Si
 
 }));
 
-export default SidebarSectionTypeRelation;
+export default SidebarSectionTypeRelation;

src/ts/component/sidebar/section/type/title.tsx

@@ -6,15 +6,18 @@ import { J, analytics, I, keyboard, translate } from 'Lib';
 const SidebarSectionTypeTitle = observer(class SidebarSectionTypeTitle extends React.Component<I.SidebarSectionComponent> {
 	
 	refName = null;
+	range: I.TextRange = null;
 	timeout = 0;
 
 	constructor (props: I.SidebarSectionComponent) {
 		super(props);
 
 		this.onSelect = this.onSelect.bind(this);
+		this.onIconSelect = this.onIconSelect.bind(this);
 		this.onChange = this.onChange.bind(this);
 		this.onKeyDown = this.onKeyDown.bind(this);
 		this.onKeyUp = this.onKeyUp.bind(this);
+		this.onBlur = this.onBlur.bind(this);
 	};
 
     render () {
@@ -34,7 +37,7 @@ const SidebarSectionTypeTitle = observer(class SidebarSectionTypeTitle extends R
 						object={object} 
 						size={24} 
 						canEdit={!readonly}
-						onIconSelect={this.onSelect}
+						onIconSelect={this.onIconSelect}
 						menuParam={{
 							horizontal: I.MenuDirection.Center,
 							className: 'fixed',
@@ -62,9 +65,10 @@ const SidebarSectionTypeTitle = observer(class SidebarSectionTypeTitle extends R
 					<Editable
 						ref={ref => this.refName = ref}
 						readonly={readonly}
-						onBlur={this.onChange}
+						onBlur={this.onBlur}
 						onKeyDown={this.onKeyDown}
 						onKeyUp={this.onKeyUp}
+						onSelect={this.onSelect}
 						placeholder={placeholder}
 					/>
 				</div>
@@ -102,9 +106,13 @@ const SidebarSectionTypeTitle = observer(class SidebarSectionTypeTitle extends R
 
 		this.refName.setValue(text);
 		this.refName.placeholderCheck();
+
+		if (this.range) {
+			this.refName.setRange(this.range);
+		};
 	};
 
-	onSelect (id: string, color: number) {
+	onIconSelect (id: string, color: number) {
 		this.props.onChange({ iconName: id, iconOption: color });
 
 		analytics.stackAdd('SetIcon', { objectType: J.Constant.typeKey.type, color });
@@ -124,6 +132,15 @@ const SidebarSectionTypeTitle = observer(class SidebarSectionTypeTitle extends R
 		});
 	};
 
+	onSelect () {
+		this.range = this.refName.getRange();
+	};
+
+	onBlur () {
+		this.range = null;
+		this.onChange();
+	};
+
 	onKeyUp (e: any) {
 		const value = this.refName?.getTextValue().trim();
 

src/ts/lib/util/data.ts

@@ -815,6 +815,11 @@ class UtilData {
 	};
 
 	getConflictRelations (rootId: string, callBack: (ids: string[]) => void) {
+		if (!rootId) {
+			console.error('[U.Data].getConflictRelations: No rootId');
+			return;
+		};
+
 		C.ObjectTypeListConflictingRelations(rootId, S.Common.space, (message) => {
 			if (message.error.code) {
 				return;