From 602c32bbea66358fd0dbcc0ecc8543f6f5bc433a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20Flatval?=
<70905152+haakonflatval-cognite@users.noreply.github.com>
Date: Thu, 20 Jun 2024 16:55:50 +0200
Subject: [PATCH] refactor(react-components): refactor info panel (#4627)
* chore(react-components): refactor info panel
* chore: lint fix + small refactor
---
.../components/Architecture/CommandButton.tsx | 34 ++++++++---
.../Architecture/DomainObjectPanel.tsx | 57 +++++++++++--------
2 files changed, 57 insertions(+), 34 deletions(-)
diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
index fa104b2c53a..4d25779a93b 100644
--- a/react-components/src/components/Architecture/CommandButton.tsx
+++ b/react-components/src/components/Architecture/CommandButton.tsx
@@ -20,7 +20,13 @@ export const CommandButtons = ({
return (
<>
{commands.map(
- (command, index): ReactElement => addCommandButton(command, isHorizontal, index)
+ (command, index): ReactElement => (
+
+ )
)}
>
);
@@ -60,7 +66,7 @@ export const CommandButton = ({
return () => {
newCommand.removeEventListener(update);
};
- }, [newCommand]);
+ }, [newCommand.isEnabled, newCommand.isChecked, newCommand.isVisible]);
if (!isVisible) {
return <>>;
@@ -106,14 +112,24 @@ function getDefaultCommand(newCommand: BaseCommand, renderTarget: RevealRenderTa
return newCommand;
}
-function addCommandButton(
- command: BaseCommand | undefined,
- isHorizontal: boolean,
- index: number
-): ReactElement {
+function getKey(command: BaseCommand | undefined, index: number): number {
+ if (command === undefined) {
+ return -index;
+ }
+
+ return command.uniqueId;
+}
+
+function CommandButtonWrapper({
+ command,
+ isHorizontal
+}: {
+ command: BaseCommand | undefined;
+ isHorizontal: boolean;
+}): ReactElement {
if (command === undefined) {
const direction = !isHorizontal ? 'horizontal' : 'vertical';
- return ;
+ return ;
}
- return ;
+ return ;
}
diff --git a/react-components/src/components/Architecture/DomainObjectPanel.tsx b/react-components/src/components/Architecture/DomainObjectPanel.tsx
index aa911ab48b3..10ff2097302 100644
--- a/react-components/src/components/Architecture/DomainObjectPanel.tsx
+++ b/react-components/src/components/Architecture/DomainObjectPanel.tsx
@@ -3,7 +3,7 @@
*/
import { Icon, type IconType, Body } from '@cognite/cogs.js';
import styled from 'styled-components';
-import { useState, type ReactElement } from 'react';
+import { useEffect, useMemo, useState, type ReactElement } from 'react';
import {
DomainObjectPanelUpdater,
type DomainObjectInfo
@@ -27,23 +27,35 @@ export const DomainObjectPanel = (): ReactElement => {
DomainObjectInfo | undefined
>();
- DomainObjectPanelUpdater.setDomainObjectDelegate(setCurrentDomainObjectInfo);
+ const domainObject = currentDomainObjectInfo?.domainObject;
+ const commands = useMemo(() => domainObject?.getPanelToolbar(), [domainObject]);
+ const info = domainObject?.getPanelInfo();
+ const style = domainObject?.getPanelInfoStyle();
+ const root = domainObject?.rootDomainObject;
+
+ useEffect(() => {
+ DomainObjectPanelUpdater.setDomainObjectDelegate(setCurrentDomainObjectInfo);
+
+ if (commands === undefined || info === undefined) {
+ return;
+ }
+
+ // Set in the get string on the copy command if any
+ for (const command of commands) {
+ if (command instanceof CopyToClipboardCommand)
+ command.getString = () => toString(info, t, unitSystem);
+ }
+ }, [setCurrentDomainObjectInfo, commands]);
const { t } = useTranslation();
- if (currentDomainObjectInfo === undefined) {
- return <>>;
- }
- const domainObject = currentDomainObjectInfo.domainObject;
- if (domainObject === undefined) {
- return <>>;
- }
- const info = domainObject.getPanelInfo();
- if (info === undefined) {
- return <>>;
- }
- const style = domainObject.getPanelInfoStyle();
- const root = domainObject.rootDomainObject;
- if (root === undefined) {
+
+ if (
+ domainObject === undefined ||
+ root === undefined ||
+ info === undefined ||
+ commands === undefined ||
+ style === undefined
+ ) {
return <>>;
}
const unitSystem = root.unitSystem;
@@ -51,14 +63,6 @@ export const DomainObjectPanel = (): ReactElement => {
const icon = domainObject.icon as IconType;
const header = info.header;
- const commands = domainObject.getPanelToolbar();
-
- // Set in the get string on the copy command if any
- for (const command of commands) {
- if (command instanceof CopyToClipboardCommand)
- command.getString = () => toString(info, t, unitSystem);
- }
-
const text = header?.getText(t);
return (
{
{text}
)}
-
+
+
+ |
@@ -115,6 +121,7 @@ export const DomainObjectPanel = (): ReactElement => {
function toString(info: PanelInfo, translate: TranslateDelegate, unitSystem: UnitSystem): string {
let result = '';
+
{
const { header } = info;
const text = header?.getText(translate);