Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(react-components): refactor info panel #4627

Merged
merged 2 commits into from
Jun 20, 2024
Merged

refactor(react-components): refactor info panel #4627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
55800f1
chore(react-components): refactor info panel
haakonflatval-cognite Jun 20, 2024
dfa9b09
chore: lint fix + small refactor
haakonflatval-cognite Jun 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 25 additions & 9 deletions react-components/src/components/Architecture/CommandButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,13 @@ export const CommandButtons = ({
return (
<>
{commands.map(
(command, index): ReactElement => addCommandButton(command, isHorizontal, index)
(command, index): ReactElement => (
<CommandButtonWrapper
command={command}
isHorizontal={isHorizontal}
key={getKey(command, index)}
/>
)
)}
</>
);
Expand Down Expand Up @@ -60,7 +66,7 @@ export const CommandButton = ({
return () => {
newCommand.removeEventListener(update);
};
}, [newCommand]);
}, [newCommand.isEnabled, newCommand.isChecked, newCommand.isVisible]);

if (!isVisible) {
return <></>;
Expand Down Expand Up @@ -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 <Divider key={index} weight="2px" length="24px" direction={direction} />;
return <Divider weight="2px" length="24px" direction={direction} />;
}
return <CommandButton key={command.uniqueId} command={command} isHorizontal={isHorizontal} />;
return <CommandButton command={command} isHorizontal={isHorizontal} />;
}
57 changes: 32 additions & 25 deletions react-components/src/components/Architecture/DomainObjectPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -27,38 +27,42 @@ 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;

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 (
<Container
Expand All @@ -81,7 +85,9 @@ export const DomainObjectPanel = (): ReactElement => {
<Body size={HEADER_SIZE}>{text}</Body>
</PaddedTh>
)}
<CommandButtons commands={commands} isHorizontal={true} />
<th>
<CommandButtons commands={commands} isHorizontal={true} />
</th>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -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);
Expand Down
Loading