JS-4200: HeaderMainIndex as functional component

src/ts/component/header/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef, useRef, useEffect, useImperativeHandle } from 'react';
 import { I, S, U, J, Renderer, keyboard, sidebar, Preview, translate } from 'Lib';
 import { Icon, Sync } from 'Component';
 
@@ -25,92 +25,51 @@ const Components = {
 	mainEmpty:			 HeaderMainEmpty,
 };
 
-class Header extends React.Component<Props> {
+const Header = forwardRef<{}, Props>((props, ref) => {
 
-	refChild: any = null;
+	const { 
+		component, 
+		className = '', 
+		withBanner = false, 
+		rootId = '', 
+		tab = '', 
+		tabs = [], 
+		layout = I.ObjectLayout.Page,
+		isPopup = false,
+		onTab,
+	} = props;
 
-	constructor (props: Props) {
-		super(props);
+	const childRef = useRef(null);
+	const Component = Components[component] || null;
+	const cn = [ 'header', component, className ];
 
-		this.menuOpen = this.menuOpen.bind(this);
-		this.renderLeftIcons = this.renderLeftIcons.bind(this);
-		this.renderTabs = this.renderTabs.bind(this);
-		this.onSearch = this.onSearch.bind(this);
-		this.onTooltipShow = this.onTooltipShow.bind(this);
-		this.onTooltipHide = this.onTooltipHide.bind(this);
-		this.onDoubleClick = this.onDoubleClick.bind(this);
-		this.onExpand = this.onExpand.bind(this);
-		this.onRelation = this.onRelation.bind(this);
-		this.onSync = this.onSync.bind(this);
-	};
-	
-	render () {
-		const { component, className, withBanner } = this.props;
-		const Component = Components[component] || null;
-		const cn = [ 'header', component, className ];
-
-		if (![ 'authIndex' ].includes(component)) {
-			cn.push('isCommon');
-		};
-
-		if (withBanner) {
-			cn.push('withBanner');
-		};
-
-		return (
-			<div id="header" className={cn.join(' ')} onDoubleClick={this.onDoubleClick}>
-				{Component ? (
-					<Component 
-						ref={ref => this.refChild = ref} 
-						{...this.props} 
-						onSearch={this.onSearch}
-						onTooltipShow={this.onTooltipShow}
-						onTooltipHide={this.onTooltipHide}
-						menuOpen={this.menuOpen}
-						renderLeftIcons={this.renderLeftIcons}
-						renderTabs={this.renderTabs}
-						onRelation={this.onRelation}
-					/>
-				) : ''}
-			</div>
-		);
+	if (![ 'authIndex' ].includes(component)) {
+		cn.push('isCommon');
 	};
 
-	componentDidMount () {
-		sidebar.resizePage(null, false);
+	if (withBanner) {
+		cn.push('withBanner');
 	};
 
-	componentDidUpdate () {
-		sidebar.resizePage(null, false);
-
-		if (this.refChild && this.refChild.forceUpdate) {
-			this.refChild.forceUpdate();
-		};
-	};
-
-	renderLeftIcons (onOpen?: () => void) {
-		const { rootId } = this.props;
+	const renderLeftIcons = (onOpen?: () => void) => {
 		const object = S.Detail.get(rootId, rootId, J.Relation.template);
 		const isTypeOrRelation = U.Object.isTypeOrRelationLayout(object.layout);
-		const isDate = U.Object.isDateLayout(object.layout);
 		const showMenu = !isTypeOrRelation;
 		const canSync = showMenu && !object.templateIsBundled && !U.Object.isParticipantLayout(object.layout);
 
 		return (
-			<React.Fragment>
+			<>
 				<Icon 
 					className="expand withBackground" 
 					tooltip={translate('commonOpenObject')} 
-					onClick={onOpen || this.onExpand} 
+					onClick={onOpen || onExpand} 
 				/>
-				{canSync ? <Sync id="button-header-sync" onClick={this.onSync} /> : ''}
-			</React.Fragment>
+				{canSync ? <Sync id="button-header-sync" onClick={onSync} /> : ''}
+			</>
 		);
 	};
 
-	renderTabs () {
-		const { tab, tabs, onTab } = this.props;
-
+	const renderTabs = () => {
 		return (
 			<div id="tabs" className="tabs">
 				{tabs.map((item: any, i: number) => (
@@ -118,8 +77,8 @@ class Header extends React.Component<Props> {
 						key={i}
 						className={[ 'tab', (item.id == tab ? 'active' : '') ].join(' ')} 
 						onClick={() => onTab(item.id)}
-						onMouseOver={e => this.onTooltipShow(e, item.tooltip, item.tooltipCaption)} 
-						onMouseOut={this.onTooltipHide}
+						onMouseOver={e => onTooltipShow(e, item.tooltip, item.tooltipCaption)} 
+						onMouseOut={onTooltipHide}
 					>
 						{item.name}
 					</div>
@@ -128,37 +87,34 @@ class Header extends React.Component<Props> {
 		);
 	};
 
-	onExpand () {
-		const { rootId, layout } = this.props;
-
+	const onExpand = () => {
 		S.Popup.closeAll(null, () => U.Object.openRoute({ id: rootId, layout }));
 	};
 
-	onSearch () {
+	const onSearch = () => {
 		keyboard.onSearchPopup('Header');
 	};
 
-	onTooltipShow (e: any, text: string, caption?: string) {
+	const onTooltipShow = (e: any, text: string, caption?: string) => {
 		const t = Preview.tooltipCaption(text, caption);
 		if (t) {
 			Preview.tooltipShow({ text: t, element: $(e.currentTarget), typeY: I.MenuDirection.Bottom });
 		};
 	};
 
-	onTooltipHide () {
+	const onTooltipHide = () => {
 		Preview.tooltipHide(false);
 	};
 
-	onDoubleClick () {
+	const onDoubleClick = () => {
 		if (U.Common.isPlatformMac()) {
 			Renderer.send('winCommand', 'maximize');
 		};
 	};
 
-	menuOpen (id: string, elementId: string, param: Partial<I.MenuParam>) {
-		const { isPopup } = this.props;
+	const menuOpen = (id: string, elementId: string, param: Partial<I.MenuParam>) => {
 		const st = $(window).scrollTop();
-		const element = $(`${this.getContainer()} ${elementId}`);
+		const element = $(`${getContainer()} ${elementId}`);
 		const menuParam: any = Object.assign({
 			element,
 			offsetY: 4,
@@ -172,18 +128,17 @@ class Header extends React.Component<Props> {
 		S.Menu.closeAllForced(null, () => S.Menu.open(id, menuParam));
 	};
 
-	onRelation (param?: Partial<I.MenuParam>, data?: any) {
+	const onRelation = (param?: Partial<I.MenuParam>, data?: any) => {
 		param = param || {};
 		data = data || {};
 
-		const { isPopup, rootId } = this.props;
 		const cnw = [ 'fixed' ];
 
 		if (!isPopup) {
 			cnw.push('fromHeader');
 		};
 
-		this.menuOpen('blockRelationView', '#button-header-relation', {
+		menuOpen('blockRelationView', '#button-header-relation', {
 			noFlipX: true,
 			noFlipY: true,
 			horizontal: I.MenuDirection.Right,
@@ -198,10 +153,8 @@ class Header extends React.Component<Props> {
 		});
 	};
 
-	onSync = () => {
-		const { rootId } = this.props;
-
-		this.menuOpen('syncStatus', '#button-header-sync', {
+	const onSync = () => {
+		menuOpen('syncStatus', '#button-header-sync', {
 			subIds: [ 'syncStatusInfo' ],
 			data: {
 				rootId,
@@ -209,10 +162,56 @@ class Header extends React.Component<Props> {
 		});
 	};
 
-	getContainer () {
-		return (this.props.isPopup ? '.popup' : '') + ' .header';
+	const getContainer = () => {
+		return (isPopup ? '.popup' : '') + ' .header';
 	};
 
-};
+	useEffect(() => {
+		sidebar.resizePage(null, false);
+	});
+
+	useImperativeHandle(ref, () => ({
+		setRootId: (rootId: string) => {
+			if (childRef.current && childRef.current.setRootId) {
+				childRef.current.setRootId(rootId);
+			};
+		},
+
+		setVersion: (version: string) => {
+			if (childRef.current && childRef.current.setVersion) {
+				childRef.current.setVersion(version);
+			};
+		},
+
+		forceUpdate: () => {
+			if (childRef.current && childRef.current.forceUpdate) {
+				childRef.current.forceUpdate();
+			};
+		},
+	}));
+
+	return (
+		<div 
+			id="header" 
+			className={cn.join(' ')}
+			onDoubleClick={onDoubleClick}
+		>
+			{Component ? (
+				<Component 
+					ref={childRef} 
+					{...props} 
+					onSearch={onSearch}
+					onTooltipShow={onTooltipShow}
+					onTooltipHide={onTooltipHide}
+					menuOpen={menuOpen}
+					renderLeftIcons={renderLeftIcons}
+					renderTabs={renderTabs}
+					onRelation={onRelation}
+				/>
+			) : ''}
+		</div>
+	);
+
+});
 
 export default Header;

src/ts/component/header/main/chat.tsx

@@ -14,10 +14,7 @@ const HeaderMainChat = observer(forwardRef<{}, I.HeaderComponent>((props, ref) =
 
 	return (
 		<>
-			<div className="side left">
-				{renderLeftIcons(onOpen)}
-			</div>
-
+			<div className="side left">{renderLeftIcons(onOpen)}</div>
 			<div className="side center" />
 			<div className="side right" />
 		</>

src/ts/component/header/main/object.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useEffect } from 'react';
+import React, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
 import { observer } from 'mobx-react';
 import { Icon, IconObject, ObjectName, Label } from 'Component';
 import { I, S, U, J, keyboard, translate } from 'Lib';
@@ -8,6 +8,7 @@ const HeaderMainObject = observer(forwardRef<{}, I.HeaderComponent>((props, ref)
 
 	const { rootId, match, isPopup, onSearch, onTooltipShow, onTooltipHide, renderLeftIcons, onRelation, menuOpen } = props;
 	const [ templatesCnt, setTemplateCnt ] = useState(0);
+	const [ dummy, setDummy ] = useState(0);
 	const root = S.Block.getLeaf(rootId, rootId);
 	const object = S.Detail.get(rootId, rootId, J.Relation.template);
 	const isLocked = root ? root.isLocked() : false;
@@ -111,6 +112,10 @@ const HeaderMainObject = observer(forwardRef<{}, I.HeaderComponent>((props, ref)
 		updateTemplatesCnt();
 	});
 
+	useImperativeHandle(ref, () => ({
+		forceUpdate: () => setDummy(dummy + 1),
+	}));
+
 	return (
 		<>
 			<div className="side left">

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

@@ -166,7 +166,7 @@ const PageMainGraph = observer(class PageMainGraph extends React.Component<I.Pag
 
 	initRootId (id: string) {
 		this.rootId = id; 
-		this.refHeader.refChild.setRootId(id);
+		this.refHeader.setRootId(id);
 	};
 
 	getRootId () {

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

@@ -460,7 +460,7 @@ const PageMainHistory = observer(class PageMainHistory extends React.Component<I
 
 	setVersion (version: I.HistoryVersion) {
 		this.refSideLeft?.forceUpdate();
-		this.refSideLeft?.refHeader?.refChild.setVersion(version);
+		this.refSideLeft?.refHeader?.setVersion(version);
 		this.refSideLeft?.refHead?.forceUpdate();
 
 		$(window).trigger('updateDataviewData');