Skip to content

Commit

Permalink
fix the according to comments
Browse files Browse the repository at this point in the history
  • Loading branch information
cphelefu committed Jul 12, 2024
1 parent 83c0503 commit 7dcd850
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 25 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, MouseEvent } from 'react';
import { useTheme } from '@mui/material/styles';
import { getSxClasses } from './nav-bar-style';
Expand Down Expand Up @@ -82,7 +81,7 @@ export default function NavbarPanelButton({ buttonPanel }: NavbarPanelButtonType
<Box sx={{ width: `${buttonPanel.panel?.width ?? 300}px`, maxHeight: '500px' }}>
<DialogTitle sx={sxClasses.popoverTitle}>{(buttonPanel.panel?.title as string) ?? ''}</DialogTitle>
<DialogContent>
<HtmlToReact htmlContent={(buttonPanel?.panel?.content ?? '') as any} />
<HtmlToReact htmlContent={(buttonPanel?.panel?.content ?? '') as string} />
</DialogContent>
</Box>
</Popover>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,6 @@ export const getSxClasses = (theme: Theme): any => ({
fontSize: theme.palette.geoViewFontSize.default,
fontWeight: '700',
color: theme.palette.geoViewColor.textColor.main,
borderBottom: `1px solid ${theme.palette.geoViewColor.bgColor.dark[100]}}`
borderBottom: `1px solid ${theme.palette.geoViewColor.bgColor.dark[100]}}`,
},
});
33 changes: 11 additions & 22 deletions packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useRef, useState, Fragment } from 'react';
import { useCallback, useEffect, useRef, useState, Fragment, isValidElement } from 'react';

import { useTranslation } from 'react-i18next';

Expand All @@ -21,8 +21,7 @@ type NavBarProps = {
api: NavBarApi;
};

type DefaultNavbar = 'fullScreen' | 'location' | 'home' | 'zoomIn' | 'zoomOut';
type NavbarButtonGroup = Record<string, TypeButtonPanel | DefaultNavbar>;
type NavbarButtonGroup = Record<string, TypeButtonPanel | JSX.Element>;
type NavButtonGroups = Record<string, NavbarButtonGroup>;

/**
Expand All @@ -42,18 +41,10 @@ export function NavBar(props: NavBarProps): JSX.Element {
// get the expand or collapse from store
const navBarComponents = useUINavbarComponents();

const defaultNavbar: Record<DefaultNavbar, JSX.Element> = {
fullScreen: <Fullscreen />,
location: <Location />,
home: <Home />,
zoomIn: <ZoomIn />,
zoomOut: <ZoomOut />,
};

// internal state
const navBarRef = useRef<HTMLDivElement>(null);
const defaultButtonGroups: NavButtonGroups = {
zoom: { zoomIn: 'zoomIn', zoomOut: 'zoomOut' },
zoom: { zoomIn: <ZoomIn />, zoomOut: <ZoomOut /> },
};
const [buttonPanelGroups, setButtonPanelGroups] = useState<NavButtonGroups>(defaultButtonGroups);

Expand All @@ -63,15 +54,15 @@ export function NavBar(props: NavBarProps): JSX.Element {

let displayButtons: NavbarButtonGroup = {};
if (navBarComponents.includes('fullscreen')) {
displayButtons = { ...displayButtons, fullScreen: 'fullScreen' };
displayButtons = { ...displayButtons, fullScreen: <Fullscreen /> };
}

if (navBarComponents.includes('location')) {
displayButtons = { ...displayButtons, location: 'location' };
displayButtons = { ...displayButtons, location: <Location /> };
}

if (navBarComponents.includes('home')) {
displayButtons = { ...displayButtons, home: 'home' };
displayButtons = { ...displayButtons, home: <Home /> };
}

setButtonPanelGroups({
Expand Down Expand Up @@ -130,11 +121,7 @@ export function NavBar(props: NavBarProps): JSX.Element {
};
}, [navBarApi, handleNavApiAddButtonPanel, handleNavApiRemoveButtonPanel]);

function renderButtonPanel(buttonPanel: TypeButtonPanel | DefaultNavbar, key: string): JSX.Element | null {
if (typeof buttonPanel === 'string') {
return <Fragment key={`${key}-component`}>{defaultNavbar[buttonPanel as DefaultNavbar]}</Fragment>;
}

function renderButtonPanel(buttonPanel: TypeButtonPanel, key: string): JSX.Element | null {
if (!buttonPanel.button.visible) {
return null;
}
Expand Down Expand Up @@ -173,8 +160,10 @@ export function NavBar(props: NavBarProps): JSX.Element {
orientation="vertical"
>
{Object.keys(buttonPanelGroup).map((buttonPanelKey) => {
const buttonPanel: TypeButtonPanel | DefaultNavbar = buttonPanelGroup[buttonPanelKey];
return renderButtonPanel(buttonPanel, buttonPanelKey);
if (isValidElement(buttonPanelGroup[buttonPanelKey])) {
return <Fragment key={`${buttonPanelKey}-component`}>{buttonPanelGroup[buttonPanelKey] as JSX.Element}</Fragment>;
}
return renderButtonPanel(buttonPanelGroup[buttonPanelKey] as TypeButtonPanel, buttonPanelKey);
})}
</ButtonGroup>
</Fragment>
Expand Down

0 comments on commit 7dcd850

Please sign in to comment.