@eeacms/volto-eea-map 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -4,7 +4,13 @@ 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).
 
-### [4.0.0](https://github.com/eea/volto-eea-map/compare/3.3.1...4.0.0) - 22 April 2024
+### [4.1.0](https://github.com/eea/volto-eea-map/compare/4.0.0...4.1.0) - 7 June 2024
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [ichim-david - [`52e141a`](https://github.com/eea/volto-eea-map/commit/52e141a3fab57904c4acb5e7e412c079f78fb0e0)]
+- bump cypress version to 13.1.0 which is what is used by volto 17 [David Ichim - [`01abef9`](https://github.com/eea/volto-eea-map/commit/01abef9089385ee0b672e09aa37c1bf89d9f21b6)]
+## [4.0.0](https://github.com/eea/volto-eea-map/compare/3.3.1...4.0.0) - 22 April 2024
 
 #### :rocket: New Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -34,7 +34,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "cypress": "10.3.1",
+    "cypress": "13.1.0",
     "cypress-fail-fast": "^5.0.1",
     "dotenv": "^16.3.2",
     "husky": "^8.0.3",

package/src/components/Webmap.jsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import { withDeviceSize } from '../hocs';
 import { loadModules } from 'esri-loader';
-import { formatQuery } from 'react-querybuilder';
 
 const MODULES = [
   'esri/Map',
@@ -45,12 +44,19 @@ const Webmap = (props) => {
 
   const mapRef = React.useRef();
   const [modules, setModules] = React.useState({});
+  const [reactQueryBuilder, setReactQueryBuilder] = React.useState(null);
 
   const modules_loaded = React.useRef(false);
 
   React.useEffect(() => {
     if (!modules_loaded.current) {
       modules_loaded.current = true;
+      import(
+        /* webpackChunkName: "react-querybuilder" */ 'react-querybuilder'
+      ).then((module) => {
+        setReactQueryBuilder(module);
+      });
+
       loadModules(MODULES, {
         css: true,
       }).then((modules) => {
@@ -168,7 +174,7 @@ const Webmap = (props) => {
                             : layer?.maxScale,
                           opacity: opacity ? parseFloat(opacity) : 1,
                           definitionExpression: query
-                            ? formatQuery(query, 'sql')
+                            ? reactQueryBuilder.formatQuery(query, 'sql')
                             : '',
                         },
                       ],
@@ -179,7 +185,7 @@ const Webmap = (props) => {
                       layerId: layer.id,
                       url,
                       definitionExpression: query
-                        ? formatQuery(query, 'sql')
+                        ? reactQueryBuilder.formatQuery(query, 'sql')
                         : '',
                       minScale: minScaleOverride
                         ? minScaleOverride

package/src/components/widgets/LayerSelectWidget.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Icon } from '@plone/volto/components';
 import { Input, Select, Button, Grid, Checkbox } from 'semantic-ui-react';
-import { QueryBuilder } from 'react-querybuilder';
-import 'react-querybuilder/dist/query-builder.css';
 
 import { flattenToAppURL } from '@plone/volto/helpers';
 import RichTextWidget from '@plone/volto-slate/widgets/RichTextWidget';
@@ -19,6 +17,12 @@ import resetSVG from '@plone/volto/icons/reset.svg';
 
 import { fetchArcGISData } from '../../utils';
 
+import loadable from '@loadable/component';
+
+const QueryBuilder = loadable(() => import('react-querybuilder'), {
+  resolveComponent: (components) => components.QueryBuilder,
+});
+
 const LayerSelectWidget = (props) => {
   const { onChange, id, data_query } = props;
 
@@ -83,6 +87,9 @@ const LayerSelectWidget = (props) => {
   };
 
   React.useEffect(() => {
+    import(
+      /* webpackChunkName: "react-querybuilder-css" */ 'react-querybuilder/dist/query-builder.css'
+    );
     props.getContent('', null, id);
     //    eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);