@eeacms/volto-eea-map 0.1.5 → 0.1.6

package/CHANGELOG.md

@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.6](https://github.com/eea/volto-eea-map/compare/0.1.5...0.1.6)
+
+- Lint fix [`f5561d1`](https://github.com/eea/volto-eea-map/commit/f5561d1581201bd635b4e53e8a46decaf684438f)
+- Map improvements [`c75d16c`](https://github.com/eea/volto-eea-map/commit/c75d16c265136d9f676e194540e613bb742fb51b)
+
 #### [0.1.5](https://github.com/eea/volto-eea-map/compare/0.1.4...0.1.5)
 
+> 4 August 2022
+
+- Develop [`#5`](https://github.com/eea/volto-eea-map/pull/5)
 - Center on extent only on map load [`b63f586`](https://github.com/eea/volto-eea-map/commit/b63f586e0df68faa755bb0d25e297530e36ef7c9)
 - Configure proxy for all map subdomains [`0f19030`](https://github.com/eea/volto-eea-map/commit/0f19030569e1f77b1ff7657669e876519712840f)
 - Prevent unnecessary rerenders of ma [`8752384`](https://github.com/eea/volto-eea-map/commit/8752384b3bbd7b564a25b3e4347c47692106f556)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/EEAMap/Edit.jsx

@@ -2,26 +2,18 @@ import React from 'react';
 import { SidebarPortal } from '@plone/volto/components';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import { Schema } from './Schema';
-import Webmap from './components/Webmap';
+import View from './View';
+import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import './styles/map.css';
-import ExtraViews from './components/widgets/ExtraViews';
-import {
-  PrivacyProtection,
-  addPrivacyProtectionToSchema,
-} from '@eeacms/volto-embed';
 
 const Edit = (props) => {
   const { block, data, onChangeBlock, selected } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
 
-  const { map_data = {}, height } = data;
   if (__SERVER__) return '';
   return (
     <div>
-      <PrivacyProtection data={data} {...props}>
-        <Webmap data={map_data} height={height} />
-        <ExtraViews data={data} />
-      </PrivacyProtection>
+      <View data={data} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}

package/src/components/Blocks/EEAMap/components/Webmap.jsx

@@ -19,7 +19,7 @@ const Webmap = (props) => {
 
   const data = React.useMemo(() => props.data || {}, [props.data]);
 
-  const { base = {}, layers = {}, id, legend = {}, general = {} } = data;
+  const { base = {}, layers = {}, legend = {}, general = {} } = data;
 
   const { base_layer = '' } = base;
 
@@ -68,6 +68,7 @@ const Webmap = (props) => {
     }
   }, [setModules, options]);
 
+  // eslint-disable-next-line no-unused-vars
   const esri = React.useMemo(() => {
     if (Object.keys(modules).length === 0) return {};
     const {
@@ -156,7 +157,7 @@ const Webmap = (props) => {
       const legendWidget = new Expand({
         content: new Legend({
           view: view,
-          style: 'classic', // other styles include 'classic'
+          style: 'classic',
         }),
         view: view,
         expanded: false,
@@ -190,9 +191,8 @@ const Webmap = (props) => {
       });
     }
     return { view, map };
-  }, [modules, base_layer, map_layers]);
+  }, [modules, base_layer, map_layers, general, legend]);
 
-  const currentLayerView = esri.view?.layerViews?.items?.[0];
   return (
     <div>
       <div

package/src/components/Blocks/EEAMap/components/widgets/ExtraViews.jsx

@@ -18,7 +18,7 @@ const ExtraViews = ({ data }) => {
   } = data;
 
   return (
-    <>
+    <div className="extra-eea-map-content">
       {map_data.layers?.map_layers[0] && (show_download || show_viewer) && (
         <div
           style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
@@ -56,7 +56,7 @@ const ExtraViews = ({ data }) => {
       )}
       {show_legend && <LegendWidget data={map_data} />}
       {description && serializeNodes(description)}
-    </>
+    </div>
   );
 };
 

package/src/components/Blocks/EEAMap/components/widgets/LegendWidget.jsx

@@ -50,12 +50,13 @@ const LayerLegend = ({ data, name }) => {
 };
 
 const LegendWidget = (props) => {
-  const { data = {} } = props;
+  const data = React.useMemo(() => props.data, [props.data]);
   const { layers = {} } = data;
   const { map_layers = [] } = layers;
   const [legendLayers, setLegendLayers] = React.useState([]);
 
   const activeLayer = map_layers.length > 0 ? map_layers[0]?.map_layer : '';
+
   const fetchLegend = async (url) => {
     let legendData = await fetchArcgisData(url);
 

package/src/components/Blocks/EEAMap/components/widgets/MapEditorWidget.jsx

@@ -7,7 +7,10 @@ import PanelsSchema from './panelsSchema';
 
 const MapEditorWidget = (props) => {
   const [open, setOpen] = React.useState(false);
-  const { onChange = {}, block = {}, value = {}, id } = props;
+  const { onChange = {}, id } = props;
+  const block = React.useMemo(() => props.block, [props.block]);
+  const value = React.useMemo(() => props.value, [props.value]);
+
   const [intValue, setIntValue] = React.useState(value);
 
   const dataForm = { map_data: intValue };