@map-colonies/react-components 3.12.2 → 3.13.0

package/src/lib/cesium-map/map-legend/MapLegend.css

@@ -1,135 +1,136 @@
-.mapLegendSidebarContainer {
-  width: 340px;
-  height: 100%;
-  position: relative;
-  overflow-y: auto;
-  overflow-x: hidden;
-  font-size: 16px;
-}
-
-/* Disable drawer animation */
-
-.mapLegendSidebarContainer.mdc-drawer--animate {
-  transform: translateX(0) !important;
-  transition: none !important;
-}
-
-.mapLegendSidebarContainer.mdc-drawer--dismissible {
-  position: relative;
-}
-
-div.MuiPaper-root {
-  transition: none !important;
-}
-
-.mapLegendCloseBtn {
-  position: absolute;
-  top: 0;
-  right: 0;
-  cursor: pointer;
-  width: 50px;
-  height: 50px;
-  padding: 20px;
-  font-size: 24px;
-}
-
-body[dir='rtl'] .mapLegendCloseBtn {
-  right: unset;
-  left: 0;
-}
-
-.mapLegendToggleContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mapLegendIcon {
-  width: 2.5rem;
-  height: 2.5rem;
-}
-
-.sidebarHeaderContainer {
-  text-align: center;
-  margin-top: 40px;
-}
-
-.sidebarTitle {
-  font-size: 1.5rem;
-  font-weight: bold;
-}
-
-.mapLegend {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 10px 14px;
-}
-
-.layerNameContainer {
-  width: 90%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.layerName {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.legendImg {
-  width: 90%;
-  height: 150px;
-  border: 1px solid black;
-  border-radius: 5px;
-  object-fit: cover;
-  cursor: pointer;
-}
-
-.legendActionsContainer {
-  display: flex;
-  flex-direction: row;
-  align-self: center;
-}
-
-.legendAction:not(:last-child)::after {
-  content: '|';
-  margin: 0px 4px;
-}
-
-.mapLegendsList {
-  display: flex;
-  flex-direction: column;
-  padding: 20px 0px;
-  width: 100%;
-  height: 90%;
-}
-
-.legendAction {
-  text-decoration: underline;
-  cursor: pointer;
-  font-size: 1.1rem;
-  transition: all 0.1s ease-in-out;
-  width: max-content;
-}
-
-.legendAction:hover {
-  filter: brightness(1.2);
-}
-
-.noLegendsContainer {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.noLegendsMsg {
-  text-align: center;
-}
+.mapLegendSidebarContainer {
+  width: 340px;
+  height: 100%;
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 16px;
+}
+
+/* Disable drawer animation */
+
+.mapLegendSidebarContainer.mdc-drawer--animate {
+  transform: translateX(0) !important;
+  transition: none !important;
+}
+
+.mapLegendSidebarContainer.mdc-drawer--dismissible {
+  position: relative;
+}
+
+div.MuiPaper-root {
+  transition: none !important;
+}
+
+.mapLegendCloseBtn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  padding: 20px;
+  font-size: 24px;
+}
+
+body[dir='rtl'] .mapLegendCloseBtn {
+  right: unset;
+  left: 0;
+}
+
+.mapLegendToggleContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mapLegendIcon {
+  width: 2rem;
+  height: 2rem;
+  transform: translate(8%, 8%);
+}
+
+.sidebarHeaderContainer {
+  text-align: center;
+  margin-top: 40px;
+}
+
+.sidebarTitle {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.mapLegend {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 10px 14px;
+}
+
+.layerNameContainer {
+  width: 90%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.layerName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.legendImg {
+  width: 90%;
+  height: 150px;
+  border: 1px solid black;
+  border-radius: 5px;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.legendActionsContainer {
+  display: flex;
+  flex-direction: row;
+  align-self: center;
+}
+
+.legendAction:not(:last-child)::after {
+  content: '|';
+  margin: 0px 4px;
+}
+
+.mapLegendsList {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0px;
+  width: 100%;
+  height: 90%;
+}
+
+.legendAction {
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 1.1rem;
+  transition: all 0.1s ease-in-out;
+  width: max-content;
+}
+
+.legendAction:hover {
+  filter: brightness(1.2);
+}
+
+.noLegendsContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.noLegendsMsg {
+  text-align: center;
+}

package/src/lib/cesium-map/map-legend/MapLegend.tsx

@@ -1,92 +1,92 @@
-import React, { useCallback } from 'react';
-import { Tooltip } from '@map-colonies/react-core';
-import { Box } from '../../box';
-
-import './MapLegend.css';
-
-export interface IMapLegend {
-  layer?: string;
-  legendDoc?: string;
-  legendImg?: string;
-  legend?: Record<string, unknown>[];
-}
-interface MapLegendProps {
-  legend: IMapLegend;
-  docText?: string;
-  imgText?: string;
-}
-
-export const MapLegend: React.FC<MapLegendProps> = ({
-  legend: { legendImg, legendDoc, layer },
-  docText,
-  imgText,
-}) => {
-  const handleLegendImgOpen = useCallback(() => {
-    // Open image in a new tab.
-    window.open(legendImg, '_blank');
-  }, [legendImg]);
-
-  const handleLegendDocOpen = useCallback(() => {
-    // Open doc in a new tab.
-    window.open(legendDoc, '_blank');
-  }, [legendDoc]);
-
-  const renderLayerName = useCallback(() => {
-    const MAX_LAYER_NAME_LENGTH = 15;
-
-    const layerNameContainer = (
-      <Box className="layerNameContainer">
-        <h3
-          style={{ maxWidth: `${MAX_LAYER_NAME_LENGTH}ch` }}
-          className="layerName"
-        >
-          {layer}
-        </h3>
-      </Box>
-    );
-
-    if ((layer ?? '').length > MAX_LAYER_NAME_LENGTH) {
-      return <Tooltip content={layer}>{layerNameContainer}</Tooltip>;
-    }
-
-    return layerNameContainer;
-  }, [layer]);
-
-  const renderLinks = useCallback(() => {
-    return [
-      typeof legendImg === 'string' && (
-        <a
-          className="legendAction"
-          href={legendImg}
-          target="_blank"
-          rel="noreferrer"
-        >
-          {imgText}
-        </a>
-      ),
-      typeof legendDoc === 'string' && (
-        <a
-          className="legendAction"
-          href={legendDoc}
-          target="_blank"
-          rel="noreferrer"
-        >
-          {docText}
-        </a>
-      ),
-    ];
-  }, [legendImg, imgText, legendDoc, docText]);
-
-  return (
-    <Box className="mapLegend">
-      {renderLayerName()}
-      <img
-        alt="Map Legend"
-        className="legendImg"
-        src={legendImg}
-        onClick={handleLegendImgOpen}
-      />
-      <Box className="legendActionsContainer">{renderLinks()}</Box>
-    </Box>
-  );
-};
+import React, { useCallback } from 'react';
+import { Tooltip } from '@map-colonies/react-core';
+import { Box } from '../../box';
+
+import './MapLegend.css';
+
+export interface IMapLegend {
+  layer?: string;
+  legendDoc?: string;
+  legendImg?: string;
+  legend?: Record<string, unknown>[];
+}
+interface MapLegendProps {
+  legend: IMapLegend;
+  docText?: string;
+  imgText?: string;
+}
+
+export const MapLegend: React.FC<MapLegendProps> = ({
+  legend: { legendImg, legendDoc, layer },
+  docText,
+  imgText,
+}) => {
+  const handleLegendImgOpen = useCallback(() => {
+    // Open image in a new tab.
+    window.open(legendImg, '_blank');
+  }, [legendImg]);
+
+  const handleLegendDocOpen = useCallback(() => {
+    // Open doc in a new tab.
+    window.open(legendDoc, '_blank');
+  }, [legendDoc]);
+
+  const renderLayerName = useCallback(() => {
+    const MAX_LAYER_NAME_LENGTH = 15;
+
+    const layerNameContainer = (
+      <Box className="layerNameContainer">
+        <h3
+          style={{ maxWidth: `${MAX_LAYER_NAME_LENGTH}ch` }}
+          className="layerName"
+        >
+          {layer}
+        </h3>
+      </Box>
+    );
+
+    if ((layer ?? '').length > MAX_LAYER_NAME_LENGTH) {
+      return <Tooltip content={layer}>{layerNameContainer}</Tooltip>;
+    }
+
+    return layerNameContainer;
+  }, [layer]);
+
+  const renderLinks = useCallback(() => {
+    return [
+      typeof legendImg === 'string' && (
+        <a
+          className="legendAction"
+          href={legendImg}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {imgText}
+        </a>
+      ),
+      typeof legendDoc === 'string' && (
+        <a
+          className="legendAction"
+          href={legendDoc}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {docText}
+        </a>
+      ),
+    ];
+  }, [legendImg, imgText, legendDoc, docText]);
+
+  return (
+    <Box className="mapLegend">
+      {renderLayerName()}
+      <img
+        alt="Map Legend"
+        className="legendImg"
+        src={legendImg}
+        onClick={handleLegendImgOpen}
+      />
+      <Box className="legendActionsContainer">{renderLinks()}</Box>
+    </Box>
+  );
+};

package/src/lib/cesium-map/map-legend/MapLegendList.tsx

@@ -1,47 +1,47 @@
-import React, { useCallback } from 'react';
-import { Box } from '../../box';
-import { IMapLegend, MapLegend } from './MapLegend';
-
-import './MapLegend.css';
-
-interface MapLegendListProps {
-  legends: IMapLegend[];
-  actionsTexts: {
-    docText: string;
-    imgText: string;
-  };
-  noLegendsText: string;
-}
-
-export const MapLegendList: React.FC<MapLegendListProps> = ({
-  legends,
-  actionsTexts: { docText, imgText },
-  noLegendsText,
-}) => {
-  const handleNoLegends = useCallback(() => {
-    return (
-      <Box className="noLegendsContainer">
-        <h2 className="noLegendsMsg">{noLegendsText}</h2>
-      </Box>
-    );
-  }, [noLegendsText]);
-
-  const renderList = useCallback(() => {
-    if (!legends.length) {
-      return handleNoLegends();
-    }
-
-    return legends.map((legend, i) => {
-      return (
-        <MapLegend
-          key={`${legend.layer as string}_${i}`}
-          legend={legend}
-          docText={docText}
-          imgText={imgText}
-        />
-      );
-    });
-  }, [legends]);
-
-  return <Box className="mapLegendsList">{renderList()}</Box>;
-};
+import React, { useCallback } from 'react';
+import { Box } from '../../box';
+import { IMapLegend, MapLegend } from './MapLegend';
+
+import './MapLegend.css';
+
+interface MapLegendListProps {
+  legends: IMapLegend[];
+  actionsTexts: {
+    docText: string;
+    imgText: string;
+  };
+  noLegendsText: string;
+}
+
+export const MapLegendList: React.FC<MapLegendListProps> = ({
+  legends,
+  actionsTexts: { docText, imgText },
+  noLegendsText,
+}) => {
+  const handleNoLegends = useCallback(() => {
+    return (
+      <Box className="noLegendsContainer">
+        <h2 className="noLegendsMsg">{noLegendsText}</h2>
+      </Box>
+    );
+  }, [noLegendsText]);
+
+  const renderList = useCallback(() => {
+    if (!legends.length) {
+      return handleNoLegends();
+    }
+
+    return legends.map((legend, i) => {
+      return (
+        <MapLegend
+          key={`${legend.layer as string}_${i}`}
+          legend={legend}
+          docText={docText}
+          imgText={imgText}
+        />
+      );
+    });
+  }, [legends]);
+
+  return <Box className="mapLegendsList">{renderList()}</Box>;
+};

package/src/lib/cesium-map/map-legend/MapLegendSidebar.tsx

@@ -1,55 +1,55 @@
-import React from 'react';
-import {
-  Icon,
-  Drawer,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerContent,
-} from '@map-colonies/react-core';
-import { IMapLegend } from './MapLegend';
-import { MapLegendList } from './MapLegendList';
-
-import './MapLegend.css';
-
-interface MapLegendSidebarProps {
-  isOpen: boolean;
-  toggleSidebar: () => void;
-  title?: string;
-  noLegendsText?: string;
-  actionsTexts?: { docText: string; imgText: string };
-  legends?: IMapLegend[];
-}
-
-export const MapLegendSidebar: React.FC<MapLegendSidebarProps> = ({
-  isOpen,
-  toggleSidebar,
-  title = 'Map Legends',
-  noLegendsText = 'No legends to display...',
-  actionsTexts = { docText: 'Docs', imgText: 'View Image' },
-  legends = [],
-}) => {
-  return isOpen ? (
-    <Drawer
-      className="mapLegendSidebarContainer"
-      modal={false}
-      dismissible={true}
-      open={isOpen}
-    >
-      <DrawerHeader className="sidebarHeaderContainer">
-        <DrawerTitle className="sidebarTitle">{title}</DrawerTitle>
-      </DrawerHeader>
-      <DrawerContent className="sidebarContent">
-        <Icon
-          onClick={toggleSidebar}
-          className="mapLegendCloseBtn"
-          icon={{ icon: 'close', size: 'small' }}
-        />
-        <MapLegendList
-          noLegendsText={noLegendsText}
-          legends={legends}
-          actionsTexts={actionsTexts}
-        />
-      </DrawerContent>
-    </Drawer>
-  ) : null;
-};
+import React from 'react';
+import {
+  Icon,
+  Drawer,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerContent,
+} from '@map-colonies/react-core';
+import { IMapLegend } from './MapLegend';
+import { MapLegendList } from './MapLegendList';
+
+import './MapLegend.css';
+
+interface MapLegendSidebarProps {
+  isOpen: boolean;
+  toggleSidebar: () => void;
+  title?: string;
+  noLegendsText?: string;
+  actionsTexts?: { docText: string; imgText: string };
+  legends?: IMapLegend[];
+}
+
+export const MapLegendSidebar: React.FC<MapLegendSidebarProps> = ({
+  isOpen,
+  toggleSidebar,
+  title = 'Map Legends',
+  noLegendsText = 'No legends to display...',
+  actionsTexts = { docText: 'Docs', imgText: 'View Image' },
+  legends = [],
+}) => {
+  return isOpen ? (
+    <Drawer
+      className="mapLegendSidebarContainer"
+      modal={false}
+      dismissible={true}
+      open={isOpen}
+    >
+      <DrawerHeader className="sidebarHeaderContainer">
+        <DrawerTitle className="sidebarTitle">{title}</DrawerTitle>
+      </DrawerHeader>
+      <DrawerContent className="sidebarContent">
+        <Icon
+          onClick={toggleSidebar}
+          className="mapLegendCloseBtn"
+          icon={{ icon: 'close', size: 'small' }}
+        />
+        <MapLegendList
+          noLegendsText={noLegendsText}
+          legends={legends}
+          actionsTexts={actionsTexts}
+        />
+      </DrawerContent>
+    </Drawer>
+  ) : null;
+};