@redus/georedus-ui 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @orioro/template-react
 
+## 0.17.0
+
+### Minor Changes
+
+- expose leftPanel.categoryIcons
+
+## 0.16.0
+
+### Minor Changes
+
+- expose leftPanel props
+
 ## 0.15.0
 
 ### Minor Changes

package/dist/LeftPanel/LeftPanel.d.ts

@@ -1,4 +1,5 @@
-export function LeftPanel({ viewConfState, viewConfDispatch, viewSpecs, resolvedViews, open, onSetOpen, syncedMapsRef, mapContainerRef, }: {
+export const LeftPanel: React.MemoExoticComponent<typeof LeftPanelInner>;
+declare function LeftPanelInner({ viewConfState, viewConfDispatch, viewSpecs, resolvedViews, open, onSetOpen, syncedMapsRef, mapContainerRef, categoryIcons, header: customHeader, footer: customFooter, }: {
     viewConfState: any;
     viewConfDispatch: any;
     viewSpecs: any;
@@ -7,5 +8,9 @@ export function LeftPanel({ viewConfState, viewConfDispatch, viewSpecs, resolved
     onSetOpen: any;
     syncedMapsRef: any;
     mapContainerRef: any;
+    categoryIcons?: undefined;
+    header?: undefined;
+    footer?: undefined;
 }): React.JSX.Element;
 import React from 'react';
+export {};

package/dist/ViewMenu/ViewMenu.d.ts

@@ -1,4 +1,4 @@
-export function ViewMenu({ viewSpecs, viewConfState, resolvedViews, onSetView, onDeactivateView, style, ...props }: {
+export function ViewMenu({ viewSpecs, viewConfState, resolvedViews, onSetView, onDeactivateView, style, categoryIcons, ...props }: {
     [x: string]: any;
     viewSpecs: any;
     viewConfState: any;
@@ -6,5 +6,13 @@ export function ViewMenu({ viewSpecs, viewConfState, resolvedViews, onSetView, o
     onSetView: any;
     onDeactivateView: any;
     style: any;
+    categoryIcons?: {
+        'populacao-e-domicilios': React.JSX.Element;
+        educacao: React.JSX.Element;
+        'infraestrutura-e-servicos-urbanos': React.JSX.Element;
+        saude: React.JSX.Element;
+        'emergencias-climaticas': React.JSX.Element;
+        'divisoes-territoriais': React.JSX.Element;
+    } | undefined;
 }): React.JSX.Element;
 import React from 'react';

package/dist/main.js

@@ -16,7 +16,7 @@ import { scaleQuantile } from 'd3-scale';
 import { csvParse } from 'd3-dsv';
 import { strAutoCast } from '@orioro/cast';
 import { fmtLayerAbsoluteId, waves_1, makeSyncedMaps, LayeredMap, svgImageGenerator, SVG_PATTERNS, useMapRegistry, useTilesLoading, HoverTooltip, layeredMapOnClickHandler, DynamicImages, ControlContainer, InspectControl, MapWindow, TerrainControl, fitGeometry } from '@orioro/react-maplibre-util';
-import React$1, { useState, useMemo, useCallback, useContext, createContext, useReducer, useEffect, useRef } from 'react';
+import React$1, { useState, useMemo, useCallback, useContext, createContext, memo, useReducer, useEffect, useRef } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { colord } from 'colord';
 import { Heading, Portal, Badge, Tabs, Tooltip, IconButton, Theme, Text, Popover, Dialog } from '@radix-ui/themes';
@@ -8202,9 +8202,9 @@ function ViewControl(_ref8) {
   }))));
 }
 
-var _excluded$3 = ["viewSpecs", "viewConfState", "resolvedViews", "onSetView", "onDeactivateView", "style"];
+var _excluded$3 = ["viewSpecs", "viewConfState", "resolvedViews", "onSetView", "onDeactivateView", "style", "categoryIcons"];
 var _templateObject$3, _templateObject2$1;
-var STATIC_NODE_ICONS = {
+var CATEGORY_ICONS = {
   'populacao-e-domicilios': /*#__PURE__*/React$1.createElement(Icon, {
     path: mdiAccountGroup
   }),
@@ -8350,6 +8350,8 @@ function ViewMenu(_ref4) {
     onSetView = _ref4.onSetView,
     onDeactivateView = _ref4.onDeactivateView,
     style = _ref4.style,
+    _ref4$categoryIcons = _ref4.categoryIcons,
+    categoryIcons = _ref4$categoryIcons === void 0 ? CATEGORY_ICONS : _ref4$categoryIcons,
     props = _objectWithoutProperties(_ref4, _excluded$3);
   var viewSpecsById = useMemo(function () {
     return Object.fromEntries(viewSpecs.map(function (spec) {
@@ -8385,7 +8387,7 @@ function ViewMenu(_ref4) {
         style: {
           position: 'relative'
         }
-      }, STATIC_NODE_ICONS[node.id], activeViewsCount > 0 && /*#__PURE__*/React$1.createElement(ActiveCounter, null, activeViewsCount));
+      }, categoryIcons[node.id] || node.id, activeViewsCount > 0 && /*#__PURE__*/React$1.createElement(ActiveCounter, null, activeViewsCount));
     }
   }, props))));
 }
@@ -8646,7 +8648,7 @@ var OPEN_WIDTH = {
 var CLOSED_WIDTH = '60px';
 var HEADER_HEIGHT = 60;
 var LogoContainer = styled(Flex)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  height: 100%;\n\n  svg {\n    height: 100%;\n    width: auto;\n  }\n"])));
-function LeftPanel(_ref) {
+function LeftPanelInner(_ref) {
   var viewConfState = _ref.viewConfState,
     viewConfDispatch = _ref.viewConfDispatch,
     viewSpecs = _ref.viewSpecs,
@@ -8654,8 +8656,54 @@ function LeftPanel(_ref) {
     open = _ref.open,
     onSetOpen = _ref.onSetOpen,
     syncedMapsRef = _ref.syncedMapsRef,
-    mapContainerRef = _ref.mapContainerRef;
+    mapContainerRef = _ref.mapContainerRef,
+    _ref$categoryIcons = _ref.categoryIcons,
+    categoryIcons = _ref$categoryIcons === void 0 ? undefined : _ref$categoryIcons,
+    _ref$header = _ref.header,
+    customHeader = _ref$header === void 0 ? undefined : _ref$header,
+    _ref$footer = _ref.footer,
+    customFooter = _ref$footer === void 0 ? undefined : _ref$footer;
   var dialogs = useDialogs();
+  var header = typeof customHeader !== 'undefined' ? customHeader : /*#__PURE__*/React$1.createElement(Flex, {
+    px: "12px",
+    py: "10px",
+    height: HEADER_HEIGHT,
+    alignItems: "center",
+    direction: "row",
+    style: {
+      backgroundColor: 'var(--accent-9)',
+      whiteSpace: 'nowrap',
+      flexShrink: 0,
+      flexGrow: 0
+    }
+  }, /*#__PURE__*/React$1.createElement(LogoContainer, {
+    direction: "row",
+    gap: "8px"
+  }, /*#__PURE__*/React$1.createElement(GeoReDUSLogoSymbol, null), /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      transition: open ? 'opacity .7s ease-out' : 'opacity .1s ease-out',
+      opacity: open ? 1 : 0
+    }
+  }, /*#__PURE__*/React$1.createElement(GeoReDUSLogoText, null))));
+  var footer = typeof customFooter !== 'undefined' ? customFooter : /*#__PURE__*/React$1.createElement(Flex, {
+    p: "2",
+    style: {
+      backgroundColor: 'white'
+    },
+    direction: "row",
+    justifyContent: "center"
+  }, /*#__PURE__*/React$1.createElement("img", {
+    style: {
+      transition: 'opacity .1s ease-out',
+      opacity: open ? 1 : 0,
+      height: 48,
+      width: 'auto'
+
+      // height: 'auto',
+      // width: '100%',
+    },
+    src: "/georedus/assets/parcerias.png"
+  }));
   return /*#__PURE__*/React$1.createElement("div", {
     style: {
       position: 'fixed',
@@ -8727,31 +8775,12 @@ function LeftPanel(_ref) {
     onClick: function onClick(e) {
       return onSetOpen(true);
     }
-  }, /*#__PURE__*/React$1.createElement(Flex, {
-    px: "12px",
-    py: "10px",
-    height: HEADER_HEIGHT,
-    alignItems: "center",
-    direction: "row",
-    style: {
-      backgroundColor: 'var(--accent-9)',
-      whiteSpace: 'nowrap',
-      flexShrink: 0,
-      flexGrow: 0
-    }
-  }, /*#__PURE__*/React$1.createElement(LogoContainer, {
-    direction: "row",
-    gap: "8px"
-  }, /*#__PURE__*/React$1.createElement(GeoReDUSLogoSymbol, null), /*#__PURE__*/React$1.createElement("div", {
-    style: {
-      transition: open ? 'opacity .7s ease-out' : 'opacity .1s ease-out',
-      opacity: open ? 1 : 0
-    }
-  }, /*#__PURE__*/React$1.createElement(GeoReDUSLogoText, null)))), Array.isArray(viewSpecs) ? /*#__PURE__*/React$1.createElement(ViewMenu, {
+  }, header, Array.isArray(viewSpecs) ? /*#__PURE__*/React$1.createElement(ViewMenu, {
     style: {
       flexGrow: 1,
       height: '1px'
     },
+    categoryIcons: categoryIcons,
     viewSpecs: viewSpecs,
     viewConfState: viewConfState,
     resolvedViews: resolvedViews,
@@ -8831,26 +8860,9 @@ function LeftPanel(_ref) {
     }
   }, /*#__PURE__*/React$1.createElement(LoadingOverlay, {
     message: null
-  })), /*#__PURE__*/React$1.createElement(Flex, {
-    p: "2",
-    style: {
-      backgroundColor: 'white'
-    },
-    direction: "row",
-    justifyContent: "center"
-  }, /*#__PURE__*/React$1.createElement("img", {
-    style: {
-      transition: 'opacity .1s ease-out',
-      opacity: open ? 1 : 0,
-      height: 48,
-      width: 'auto'
-
-      // height: 'auto',
-      // width: '100%',
-    },
-    src: "/georedus/assets/parcerias.png"
-  }))));
+  })), footer));
 }
+var LeftPanel = /*#__PURE__*/memo(LeftPanelInner);
 
 var ViewLayoutControlContext = /*#__PURE__*/createContext(null);
 var DRAG_HANDLE_BORDER_RADIUS = 10;
@@ -11286,6 +11298,7 @@ function HoverLegend(_ref) {
 }
 var DEFAULT_MAP_PROPS = {};
 var DEFAULT_SVG_IMAGES = {};
+var DEFAULT_LEFT_PANEL_PROPS = {};
 function GeoReDUSInner(_ref2) {
   var globalState = _ref2.state,
     onSetGlobalState = _ref2.onSetState,
@@ -11296,7 +11309,9 @@ function GeoReDUSInner(_ref2) {
     _ref2$mapProps = _ref2.mapProps,
     mapProps = _ref2$mapProps === void 0 ? DEFAULT_MAP_PROPS : _ref2$mapProps,
     _ref2$svgImages = _ref2.svgImages,
-    svgImages = _ref2$svgImages === void 0 ? DEFAULT_SVG_IMAGES : _ref2$svgImages;
+    svgImages = _ref2$svgImages === void 0 ? DEFAULT_SVG_IMAGES : _ref2$svgImages,
+    _ref2$leftPanel = _ref2.leftPanel,
+    leftPanelProps = _ref2$leftPanel === void 0 ? DEFAULT_LEFT_PANEL_PROPS : _ref2$leftPanel;
   var MAP_SVG_IMAGE_GENERATOR = useMemo(function () {
     return svgImageGenerator(_objectSpread2(_objectSpread2({
       mdiTree: mdiTree,
@@ -11656,7 +11671,7 @@ function GeoReDUSInner(_ref2) {
       }
     });
   }, []);
-  return /*#__PURE__*/React$1.createElement(Flex, null, /*#__PURE__*/React$1.createElement(LeftPanel, {
+  return /*#__PURE__*/React$1.createElement(Flex, null, /*#__PURE__*/React$1.createElement(LeftPanel, _extends({
     open: leftPanelOpen,
     onSetOpen: setLeftPanelOpen,
     viewSpecs: resolvedViewSpecs,
@@ -11664,7 +11679,7 @@ function GeoReDUSInner(_ref2) {
     viewConfDispatch: viewConfDispatch,
     resolvedViews: resolvedViews,
     syncedMapsRef: syncedMapsRef
-  }), /*#__PURE__*/React$1.createElement(Flex, {
+  }, leftPanelProps)), /*#__PURE__*/React$1.createElement(Flex, {
     style: {
       position: 'fixed',
       zIndex: 2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redus/georedus-ui",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "packageManager": "yarn@4.0.2",
   "type": "module",
   "main": "dist/main.js",