diff --git a/packages/geoview-basemap-panel/src/basemap-panel.tsx b/packages/geoview-basemap-panel/src/basemap-panel.tsx index 8484b70dabf..35c0ed0c090 100644 --- a/packages/geoview-basemap-panel/src/basemap-panel.tsx +++ b/packages/geoview-basemap-panel/src/basemap-panel.tsx @@ -288,7 +288,7 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element { // eslint-disable-next-line react/no-array-index-key return {basemap.altText}; })} -
+ } /> diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx index e64ba496473..333ae305d06 100644 --- a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx +++ b/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx @@ -73,7 +73,7 @@ export default function Version(): JSX.Element { return ( -
+ -
+ ); } diff --git a/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts b/packages/geoview-core/src/core/components/common/layer-icon-style.ts similarity index 100% rename from packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts rename to packages/geoview-core/src/core/components/common/layer-icon-style.ts diff --git a/packages/geoview-core/src/core/components/common/layer-icon.tsx b/packages/geoview-core/src/core/components/common/layer-icon.tsx index 596737cf022..8da9393ed8f 100644 --- a/packages/geoview-core/src/core/components/common/layer-icon.tsx +++ b/packages/geoview-core/src/core/components/common/layer-icon.tsx @@ -1,8 +1,78 @@ -import { Box, CircularProgressBase, ErrorIcon, GroupWorkOutlinedIcon } from '@/ui'; +import { useTheme } from '@mui/material/styles'; +import { Box, CircularProgressBase, ErrorIcon, GroupWorkOutlinedIcon, IconButton, BrowserNotSupportedIcon } from '@/ui'; import { TypeLegendLayer } from '@/core/components/layers/types'; -import { IconStack } from '@/core/components/icon-stack/icon-stack'; +import { getSxClasses } from './layer-icon-style'; +import { useIconLayerSet } from '@/core/stores/store-interface-and-intial-values/layer-state'; import { LayerListEntry } from '.'; +export interface TypeIconStackProps { + layerPath: string; + onIconClick?: () => void; + onStackIconClick?: (e: React.KeyboardEvent) => void; +} + +/** + * Icon Stack to represent layer icons + * + * @param {string} layerPath + * @returns {JSX.Element} the icon stack item + */ +function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIconStackProps): JSX.Element | null { + const theme = useTheme(); + const sxClasses = getSxClasses(theme); + + const iconData = useIconLayerSet(layerPath); + + const iconImage: string = iconData?.length > 0 ? iconData[0] : ''; + const iconImageStacked: string = iconData?.length > 1 ? iconData[1] : ''; + const numOfIcons: number | undefined = iconData?.length; + + const iconStackContent = (): JSX.Element | null => { + // TODO: refactor - try to remove the nested ternary to simplify reading + // eslint-disable-next-line no-nested-ternary + return numOfIcons === 1 ? ( + + ) : // eslint-disable-next-line no-nested-ternary + numOfIcons && numOfIcons > 0 ? ( + onStackIconClick?.(e)} aria-hidden="true"> + + + + ) : layerPath !== '' && iconData.length === 0 && layerPath.charAt(0) !== '!' ? ( + onStackIconClick?.(e)} aria-hidden="true"> + + + ) : null; + }; + + return iconStackContent(); +} + interface LayerIconProps { layer: TypeLegendLayer | LayerListEntry; } diff --git a/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx b/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx index 2f930b786a6..e05b1514d9e 100644 --- a/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx +++ b/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx @@ -289,7 +289,7 @@ const ResponsiveGridLayout = forwardRef( [theme.breakpoints.down('md')]: { justifyContent: 'space-between' }, }} > - {rightTop ??
} + {rightTop ?? } {!fullWidth && !hideEnlargeBtn && renderEnlargeButton()} diff --git a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx index 2f09bedf814..9bba8733b6f 100644 --- a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx +++ b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx @@ -64,11 +64,7 @@ export default function DataTableModal(): JSX.Element { * @returns {JSX.Element} */ const getCellValue = (cellValue: string): JSX.Element => { - return ( - - {cellValue} - - ); + return {cellValue}; }; /** diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts new file mode 100644 index 00000000000..88c96738447 --- /dev/null +++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts @@ -0,0 +1,29 @@ +import { Theme } from '@mui/material/styles'; + +// ? I doubt we want to define an explicit type for style properties? +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const getSxClasses = (theme: Theme): any => ({ + tooltipItem: { + color: theme.palette.geoViewColor.bgColor.light[900], + background: theme.palette.geoViewColor.bgColor.dark[900], + opacity: 0.9, + fontSize: theme.palette.geoViewFontSize.default, + padding: '3px 8px', + borderRadius: '5px', + textAlign: 'center', + maxWidth: '350px', + maxHeight: '60px', + position: 'absolute', + display: 'flex', + top: '-5px', + left: '3px', + }, + tooltipText: { + fontSize: theme.palette.geoViewFontSize.default, + color: theme.palette.geoViewColor.bgColor.light[900], + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden', + padding: '5px', + }, +}); diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx index 439886def25..d400e9f65c4 100644 --- a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx +++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx @@ -5,13 +5,14 @@ import { useTheme, Theme } from '@mui/material/styles'; import { Box } from '@/ui'; import { logger } from '@/core/utils/logger'; import { useMapHoverFeatureInfo, useMapPointerPosition } from '@/core/stores/store-interface-and-intial-values/map-state'; +import { getSxClasses } from './hover-tooltip-styles'; /** * Hover tooltip component to show name field information on hover * * @returns {JSX.Element} the hover tooltip component */ -export function HoverTooltip(): JSX.Element { +export function HoverTooltip(): JSX.Element | null { // Log, commented too annoying // logger.logTraceRender('components/hover-tooltip/hover-tooltip'); @@ -21,38 +22,14 @@ export function HoverTooltip(): JSX.Element { iconImage: React.CSSProperties; } = useTheme(); - const sxClasses = { - tooltipItem: { - color: theme.palette.geoViewColor.bgColor.light[900], - background: theme.palette.geoViewColor.bgColor.dark[900], - opacity: 0.9, - fontSize: theme.palette.geoViewFontSize.default, - padding: '3px 8px', - borderRadius: '5px', - textAlign: 'center', - maxWidth: '350px', - maxHeight: '60px', - position: 'absolute', - display: 'flex', - top: '-5px', - left: '3px', - }, - tooltipText: { - fontSize: theme.palette.geoViewFontSize.default, - color: theme.palette.geoViewColor.bgColor.light[900], - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - overflow: 'hidden', - padding: '5px', - }, - }; - // internal component state const [pixel, setPixel] = useState<[number, number]>([0, 0]); const [tooltipValue, setTooltipValue] = useState(''); const [tooltipIcon, setTooltipIcon] = useState(''); const [showTooltip, setShowTooltip] = useState(false); + const sxClasses = getSxClasses(theme); + // store state const hoverFeatureInfo = useMapHoverFeatureInfo(); const pointerPosition = useMapPointerPosition(); @@ -81,6 +58,10 @@ export function HoverTooltip(): JSX.Element { if (pointerPosition !== undefined) setPixel(pointerPosition.pixel as [number, number]); }, [pointerPosition]); + if (showTooltip && !tooltipValue) { + return null; + } + return ( void; - onStackIconClick?: (e: React.KeyboardEvent) => void; -} - -/** - * Icon Stack to represent layer icons - * - * @param {string} layerPath - * @returns {JSX.Element} the icon stack item - */ -export function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIconStackProps): JSX.Element | null { - const theme = useTheme(); - const sxClasses = getSxClasses(theme); - - const iconData = useIconLayerSet(layerPath); - - const iconImage: string = iconData && iconData.length > 0 ? iconData[0] : ''; - const iconImageStacked: string = iconData && iconData.length > 1 ? iconData[1] : ''; - const numOfIcons: number | undefined = iconData?.length; - - const iconStackContent = (): JSX.Element | null => { - // TODO: refactor - try to remove the nested ternary to simplify reading - // eslint-disable-next-line no-nested-ternary - return numOfIcons === 1 ? ( - - ) : // eslint-disable-next-line no-nested-ternary - numOfIcons && numOfIcons > 0 ? ( - onStackIconClick?.(e)} aria-hidden="true"> - - - - ) : layerPath !== '' && iconData.length === 0 && layerPath.charAt(0) !== '!' ? ( - onStackIconClick?.(e)} aria-hidden="true"> - - - ) : null; - }; - - return iconStackContent(); -} diff --git a/packages/geoview-core/src/core/components/index.ts b/packages/geoview-core/src/core/components/index.ts index 6a306a4e0c3..88fea82a31b 100644 --- a/packages/geoview-core/src/core/components/index.ts +++ b/packages/geoview-core/src/core/components/index.ts @@ -25,7 +25,6 @@ export * from './geolocator/geolocator'; export * from './geolocator/geolocator-style'; export * from './guide/guide-panel'; export * from './hover-tooltip/hover-tooltip'; -export * from './icon-stack/icon-stack'; export * from './legend/legend'; export * from './lightbox/lightbox'; export * from './map/map'; diff --git a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx index 07445a6aaf3..4c3362d2492 100644 --- a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx +++ b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx @@ -1090,7 +1090,7 @@ export function AddNewLayer(): JSX.Element { }, stepContent: { children: ( -
handleDrop(e)} @@ -1099,7 +1099,7 @@ export function AddNewLayer(): JSX.Element { onDragLeave={(e) => handleDragLeave(e)} > {drag && ( -
{t('layers.dropzone')} -
+ )} -
+ -
+

{t('layers.drop')} @@ -1150,7 +1150,7 @@ export function AddNewLayer(): JSX.Element { />
-

+ ), }, }, diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx index f7277313754..e6754719c37 100644 --- a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx +++ b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx @@ -37,6 +37,7 @@ import { import { LAYER_STATUS } from '@/core/utils/constant'; import { ArrowDownwardIcon, ArrowUpIcon, TableViewIcon } from '@/ui/icons'; import { Divider } from '@/ui/divider/divider'; +import { Box } from '@/ui/layout'; interface SingleLayerProps { layer: TypeLegendLayer; @@ -123,10 +124,10 @@ export function SingleLayer({ depth, layer, setIsLayersListPanelVisible, index, if (datatableSettings[layer.layerPath]) { return ( - + {itemsLengthDesc}   - + ); } return itemsLengthDesc; diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx index 2c0737c694d..3a42b64d1f0 100644 --- a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx +++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx @@ -153,7 +153,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element { {renderHeaderCheckbox()} - {t('general.name')} + {t('general.name')} )} @@ -164,7 +164,9 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element { {item.icon ? {item.name} : } - {item.name} + + {item.name} + ))} diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx index f4ade4726e9..00e98a513ae 100644 --- a/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx +++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx @@ -42,7 +42,7 @@ export function LayerOpacityControl(props: LayerOpacityControlProps): JSX.Elemen }; return ( -
+ {t('layers.opacity')} -
+ ); } diff --git a/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx b/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx index dad6d2bef82..22aaff61faa 100644 --- a/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx +++ b/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx @@ -88,7 +88,7 @@ export function MousePosition(): JSX.Element { ...sxClasses.mousePositionCheckmark, }} /> - {position} + {position} ); })} diff --git a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx index 9dce2d59fa1..dcd78e6f86e 100644 --- a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx +++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx @@ -161,7 +161,7 @@ export function NavBar(props: NavBarProps): JSX.Element { }); if (panels.length > 0) { - return
{panels}
; + return {panels}; } return null; })} diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx index 97558776f39..dae66dbe8c5 100644 --- a/packages/geoview-core/src/core/components/notifications/notifications.tsx +++ b/packages/geoview-core/src/core/components/notifications/notifications.tsx @@ -96,7 +96,7 @@ export default function Notifications(): JSX.Element { {getNotificationIcon(notification)} - {notification.message} + {notification.message} {notification.count > 1 ? ( @@ -112,8 +112,8 @@ export default function Notifications(): JSX.Element { return ( -
- + + 99 ? '99+' : notificationsCount} color="error"> -
+ ); } diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx index 3b3da308507..325e34b99e5 100644 --- a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx +++ b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx @@ -7,6 +7,7 @@ import makeStyles from '@mui/styles/makeStyles'; import { ChevronLeftIcon, Tooltip } from '@/ui'; import { logger } from '@/core/utils/logger'; +import { Box } from '@/ui/layout'; // TODO: We need to find solution to remove makeStyles with either plain css or material ui. const useStyles = makeStyles(() => ({ @@ -98,8 +99,9 @@ export function OverviewMapToggle(props: OverviewMapToggleProps): JSX.Element { return ( -
-
+ -
-
+ + ); } diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map.tsx b/packages/geoview-core/src/core/components/overview-map/overview-map.tsx index cc61353eed0..9f496757cea 100644 --- a/packages/geoview-core/src/core/components/overview-map/overview-map.tsx +++ b/packages/geoview-core/src/core/components/overview-map/overview-map.tsx @@ -19,6 +19,7 @@ import { useAppDisplayLanguage, useAppDisplayTheme } from '@/core/stores/store-i import { useMapOverviewMapHideZoom, useMapProjection, useMapZoom } from '@/core/stores/store-interface-and-intial-values/map-state'; import { MapEventProcessor } from '@/api/event-processors/event-processor-children/map-event-processor'; import { logger } from '@/core/utils/logger'; +import { Box } from '@/ui/layout'; // TODO: We need to find solution to remove makeStyles with either plain css or material ui. const useStyles = makeStyles(() => ({ @@ -216,5 +217,5 @@ export function OverviewMap(props: OverwiewMapProps): JSX.Element { // eslint-disable-next-line react-hooks/exhaustive-deps }, [displayLanguage, displayTheme]); - return
; + return ; } diff --git a/packages/geoview-core/src/core/containers/html-to-react.tsx b/packages/geoview-core/src/core/containers/html-to-react.tsx index f6d0d0b081f..ace685019e5 100644 --- a/packages/geoview-core/src/core/containers/html-to-react.tsx +++ b/packages/geoview-core/src/core/containers/html-to-react.tsx @@ -1,5 +1,6 @@ import { CSSProperties, ReactNode } from 'react'; import parse from 'html-react-parser'; +import { Box } from '@/ui/layout'; /** * Interface used for custom html elements @@ -37,11 +38,11 @@ export function HtmlToReact(props: HtmlToReactProps): JSX.Element { // eslint-disable-next-line react/jsx-props-no-spreading return ( -
+ {reactItems.map((item: TrustedHTML, index) => ( // eslint-disable-next-line react/no-array-index-key -
{item as ReactNode}
+ {item as ReactNode} ))} -
+ ); } diff --git a/packages/geoview-core/src/ui/modal/modal.tsx b/packages/geoview-core/src/ui/modal/modal.tsx index ecbcccba4ef..bd5086ea2b9 100644 --- a/packages/geoview-core/src/ui/modal/modal.tsx +++ b/packages/geoview-core/src/ui/modal/modal.tsx @@ -213,13 +213,14 @@ export function Modal(props: TypeDialogProps): JSX.Element { -
{typeof modal.content === 'string' ? : modal.content} -
+ {modal.footer?.actions && modal.footer?.actions.length >= 1 ? (