@eeacms/volto-n2k 1.0.35 → 1.1.0

package/src/components/manage/Blocks/ExploreSites/View.jsx

@@ -39,13 +39,10 @@ const View = (props) => {
       }),
       new source.TileWMS({
         extent: [
-          -3603195.606899999,
-          3197087.8112000003,
-          3796164.5945000015,
+          -3603195.606899999, 3197087.8112000003, 3796164.5945000015,
           1.1077138825000003e7,
         ],
-        url:
-          'https://bio.discomap.eea.europa.eu/arcgis/services/ProtectedSites/Natura2000Sites/MapServer/WMSServer',
+        url: 'https://bio.discomap.eea.europa.eu/arcgis/services/ProtectedSites/Natura2000Sites/MapServer/WMSServer',
         params: { LAYERS: '2', TILED: true },
         serverType: 'geoserver',
         transition: 0,
@@ -65,9 +62,7 @@ const View = (props) => {
         ...options,
         extent: new extent.buffer(
           [
-            -3603195.606899999,
-            3197087.8112000003,
-            3796164.5945000015,
+            -3603195.606899999, 3197087.8112000003, 3796164.5945000015,
             1.1077138825000003e7,
           ],
           -3603195.606899999 * 0.01,

package/src/components/manage/Blocks/ExploreSites/index.js

@@ -11,7 +11,7 @@ export function getActiveSitesURL(site_codes) {
   );
 }
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.explore_sites_map = {
     id: 'explore_sites_map',
     title: 'Explore sites map',
@@ -21,4 +21,4 @@ export default (config) => {
     view: ExploreSitesView,
   };
   return config;
-};
+}

package/src/components/manage/Blocks/ExploreSites/schema.js

@@ -1,4 +1,4 @@
-export default {
+const schema = {
   title: 'Explore sites map',
 
   fieldsets: [
@@ -13,3 +13,5 @@ export default {
 
   required: [],
 };
+
+export default schema;

package/src/components/manage/Blocks/ExploreSpecies/View.jsx

@@ -39,13 +39,10 @@ const View = (props) => {
       }),
       new source.TileWMS({
         extent: [
-          -3690067.3068000004,
-          3129776.6937999986,
-          3858418.0045999996,
+          -3690067.3068000004, 3129776.6937999986, 3858418.0045999996,
           1.1124223900300004e7,
         ],
-        url:
-          'https://bio.discomap.eea.europa.eu/arcgis/services/Article17/HabitatsDirective_ART_17_WMS_version_2020_08_public/MapServer/WmsServer',
+        url: 'https://bio.discomap.eea.europa.eu/arcgis/services/Article17/HabitatsDirective_ART_17_WMS_version_2020_08_public/MapServer/WmsServer',
         params: { LAYERS: '7', TILED: true },
         serverType: 'geoserver',
         // Countries have transparency, so do not fade tiles:
@@ -66,9 +63,7 @@ const View = (props) => {
         ...options,
         extent: new extent.buffer(
           [
-            -3690067.3068000004,
-            3129776.6937999986,
-            3858418.0045999996,
+            -3690067.3068000004, 3129776.6937999986, 3858418.0045999996,
             1.1124223900300004e7,
           ],
           -3690067.3068000004 * 0.01,

package/src/components/manage/Blocks/ExploreSpecies/index.js

@@ -11,7 +11,7 @@ export function getActiveSpeciesURL(site_codes) {
   );
 }
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.explore_species_map = {
     id: 'explore_species_map',
     title: 'Explore species map',
@@ -21,4 +21,4 @@ export default (config) => {
     view: ExploreSpeciesView,
   };
   return config;
-};
+}

package/src/components/manage/Blocks/ExploreSpecies/schema.js

@@ -1,4 +1,4 @@
-export default {
+const schema = {
   title: 'Explore species map',
 
   fieldsets: [
@@ -13,3 +13,5 @@ export default {
 
   required: [],
 };
+
+export default schema;

package/src/components/manage/Blocks/HabitatClassification/index.js

@@ -1,7 +1,7 @@
 import HabitatClassification from './View';
 import getSchema from './schema';
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.custom_connected_block = {
     ...config.blocks.blocksConfig.custom_connected_block,
     blocks: {
@@ -14,4 +14,4 @@ export default (config) => {
     },
   };
   return config;
-};
+}

package/src/components/manage/Blocks/HabitatDistribution/index.js

@@ -7,7 +7,7 @@ export function getHabitatDistributionURL(code_2000) {
   );
 }
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.custom_connected_block = {
     ...config.blocks.blocksConfig.custom_connected_block,
     blocks: {
@@ -20,4 +20,4 @@ export default (config) => {
     },
   };
   return config;
-};
+}

package/src/components/manage/Blocks/HabitatProtectedSites/index.js

@@ -7,7 +7,7 @@ export function getHabitatProtectedSitesURL(code_2000) {
   );
 }
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.custom_connected_block = {
     ...config.blocks.blocksConfig.custom_connected_block,
     blocks: {
@@ -20,4 +20,4 @@ export default (config) => {
     },
   };
   return config;
-};
+}

package/src/components/manage/Blocks/HabitatsBanner/Edit.jsx

@@ -3,7 +3,6 @@ import { SidebarPortal } from '@plone/volto/components';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import getSchema from './schema';
 import View from './View';
-import './style.less';
 
 const Edit = (props) => {
   const schema = useMemo(() => getSchema(props), [props]);

package/src/components/manage/Blocks/HabitatsBanner/View.jsx

@@ -9,6 +9,7 @@ import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs';
 import { replaceQueryParam } from '@eeacms/volto-n2k/helpers';
 import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
 import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
+
 import './style.less';
 
 const SwiperLoader = loadable.lib(() => import('swiper'));
@@ -30,13 +31,18 @@ const _View = (props) => {
     props.data.habitat_pictures_provider,
   );
   const habitat = props.providers_data?.[habitat_provider] || {};
-  const habitat_pictures =
-    props.providers_data?.[habitat_pictures_provider] || {};
+  const habitat_pictures = useMemo(
+    () => props.providers_data?.[habitat_pictures_provider] || {},
+    [props.providers_data, habitat_pictures_provider],
+  );
 
   const { code_2000 = [], scientific_name = [] } = habitat;
   const { attribution_copyright = [] } = habitat_pictures;
 
-  const pictures = habitat_pictures?.['WebURL'] || [];
+  const pictures = useMemo(
+    () => habitat_pictures?.['WebURL'] || [],
+    [habitat_pictures],
+  );
   const pictures_length = useMemo(
     () => pictures.filter((picture) => !!picture)?.length,
     [pictures],
@@ -111,39 +117,41 @@ const _View = (props) => {
                 <p>{attribution_copyright[activeSlide]}</p>
               )}
             </div>
-            <SwiperLoader>
-              {() => {
-                return (
-                  <SwiperReactLoader>
-                    {({ Swiper, SwiperSlide }) => {
-                      return (
-                        <>
-                          <Swiper
-                            loop={true}
-                            allowTouchMove={false}
-                            initialSlide={0}
-                            slidesPerView={1}
-                            spaceBetween={0}
-                            onBeforeInit={(swiper) => {
-                              swiperEl.current = swiper;
-                            }}
-                          >
-                            {pictures.map((source, index) => (
-                              <SwiperSlide>
-                                <img
-                                  src={getSource(source)}
-                                  alt={pictures[index]}
-                                />
-                              </SwiperSlide>
-                            ))}
-                          </Swiper>
-                        </>
-                      );
-                    }}
-                  </SwiperReactLoader>
-                );
-              }}
-            </SwiperLoader>
+            {__CLIENT__ && (
+              <SwiperLoader>
+                {() => {
+                  return (
+                    <SwiperReactLoader>
+                      {({ Swiper, SwiperSlide }) => {
+                        return (
+                          <>
+                            <Swiper
+                              loop={true}
+                              allowTouchMove={false}
+                              initialSlide={0}
+                              slidesPerView={1}
+                              spaceBetween={0}
+                              onBeforeInit={(swiper) => {
+                                swiperEl.current = swiper;
+                              }}
+                            >
+                              {pictures.map((source, index) => (
+                                <SwiperSlide>
+                                  <img
+                                    src={getSource(source)}
+                                    alt={pictures[index]}
+                                  />
+                                </SwiperSlide>
+                              ))}
+                            </Swiper>
+                          </>
+                        );
+                      }}
+                    </SwiperReactLoader>
+                  );
+                }}
+              </SwiperLoader>
+            )}
           </div>
         )}
       </div>
@@ -162,10 +170,10 @@ const View = compose(
   })),
 )(_View);
 
-export default (props) => {
+export default function $View(props) {
   return (
     <VisibilitySensor Placeholder={() => <div>loading....&nbsp;</div>}>
       <View {...props} />
     </VisibilitySensor>
   );
-};
+}

package/src/components/manage/Blocks/HabitatsBanner/index.js

@@ -2,7 +2,7 @@ import worldSVG from '@plone/volto/icons/world.svg';
 import Edit from './Edit';
 import View from './View';
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.habitats_banner = {
     id: 'habitats_banner',
     title: 'Habitats banner',
@@ -21,4 +21,4 @@ export default (config) => {
     blockHasOwnFocusManagement: false,
   };
   return config;
-};
+}

package/src/components/manage/Blocks/HabitatsBanner/style.less

@@ -3,8 +3,6 @@
 
 @import (multiple, reference, optional) '../../theme.config';
 
-@import 'swiper/swiper.less';
-
 @{view} {
   .habitat-banner-details {
     &::before {

package/src/components/manage/Blocks/ImageText/View.jsx

@@ -1,15 +1,22 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { UniversalLink } from '@plone/volto/components';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
-import { Editor } from 'slate';
+import { createEditor } from 'slate';
 import cx from 'classnames';
 import './styles.less';
 
 const View = (props) => {
   const { data = {} } = props;
-  const value = { children: data.value || [], isVoid: Editor.isVoid };
-  const valueUndefined =
-    !value.children.length || Editor.string(value, []) === '';
+  const [value, setValue] = useState(createEditor());
+
+  useEffect(() => {
+    setValue((value) => {
+      value.children = data.value || [];
+      return value;
+    });
+  }, [data.value]);
+
+  const valueUndefined = !value.children.length || value.string([]) === '';
 
   const ImageText = () => {
     return (

package/src/components/manage/Blocks/ImageText/index.js

@@ -2,7 +2,7 @@ import ImageTextEdit from './Edit';
 import ImageTextView from './View';
 import worldSVG from '@plone/volto/icons/world.svg';
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.image_text = {
     id: 'image_text',
     title: 'Image text',
@@ -21,4 +21,4 @@ export default (config) => {
     },
   };
   return config;
-};
+}

package/src/components/manage/Blocks/ImageText/schema.js

@@ -1,68 +1,70 @@
-export default () => ({
-  title: 'Image text',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['theme', 'hasBorder', 'rounded'],
+export default function getSchema() {
+  return {
+    title: 'Image text',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['theme', 'hasBorder', 'rounded'],
+      },
+      {
+        id: 'image',
+        title: 'Image',
+        fields: ['image', 'imageSize', 'imageTitle'],
+      },
+      {
+        id: 'link',
+        title: 'Link',
+        fields: ['linkTitle', 'href', 'target'],
+      },
+    ],
+    properties: {
+      theme: {
+        title: 'Theme',
+        choices: [
+          ['light', 'Light'],
+          ['grey', 'Grey'],
+          ['dark', 'Dark'],
+        ],
+        default: 'light',
+      },
+      hasBorder: {
+        title: 'With border',
+        type: 'boolean',
+        default: true,
+      },
+      rounded: {
+        title: 'Rounded',
+        type: 'boolean',
+        default: true,
+      },
+      image: {
+        title: 'Image',
+        widget: 'object_by_path',
+      },
+      imageSize: {
+        title: 'Size',
+        type: 'number',
+      },
+      imageTitle: {
+        title: 'Title',
+      },
+      linkTitle: {
+        title: 'Title',
+      },
+      href: {
+        title: 'Url',
+        widget: 'textarea',
+      },
+      target: {
+        title: 'Target',
+        choices: [
+          ['_blank', 'New tab'],
+          ['_self', 'Same tab'],
+        ],
+        defaultValue: '_self',
+      },
     },
-    {
-      id: 'image',
-      title: 'Image',
-      fields: ['image', 'imageSize', 'imageTitle'],
-    },
-    {
-      id: 'link',
-      title: 'Link',
-      fields: ['linkTitle', 'href', 'target'],
-    },
-  ],
-  properties: {
-    theme: {
-      title: 'Theme',
-      choices: [
-        ['light', 'Light'],
-        ['grey', 'Grey'],
-        ['dark', 'Dark'],
-      ],
-      default: 'light',
-    },
-    hasBorder: {
-      title: 'With border',
-      type: 'boolean',
-      default: true,
-    },
-    rounded: {
-      title: 'Rounded',
-      type: 'boolean',
-      default: true,
-    },
-    image: {
-      title: 'Image',
-      widget: 'object_by_path',
-    },
-    imageSize: {
-      title: 'Size',
-      type: 'number',
-    },
-    imageTitle: {
-      title: 'Title',
-    },
-    linkTitle: {
-      title: 'Title',
-    },
-    href: {
-      title: 'Url',
-      widget: 'textarea',
-    },
-    target: {
-      title: 'Target',
-      choices: [
-        ['_blank', 'New tab'],
-        ['_self', 'Same tab'],
-      ],
-      defaultValue: '_self',
-    },
-  },
-  required: [],
-});
+    required: [],
+  };
+}

package/src/components/manage/Blocks/LabeledList/index.js

@@ -1,7 +1,7 @@
 import LabeledListView from './View';
 import getSchema from './schema';
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.custom_connected_block = {
     ...config.blocks.blocksConfig.custom_connected_block,
     blocks: {
@@ -14,4 +14,4 @@ export default (config) => {
     },
   };
   return config;
-};
+}

package/src/components/manage/Blocks/LabeledList/style.less

@@ -15,8 +15,8 @@
       display: inline-flex;
       align-items: center;
       padding: 0.25rem 0.5rem;
-      margin: 0.5rem;
       border-radius: 6px;
+      margin: 0.5rem;
       font-size: 0.9rem;
       font-weight: bold;
     }

package/src/components/manage/Blocks/Landing/EditBlockWrapper.jsx

@@ -115,9 +115,9 @@ class EditBlockWrapper extends React.Component {
                   basic
                   title="Add block"
                   onClick={() => {
-                    this.setState({
-                      addNewBlockOpened: !this.state.addNewBlockOpened,
-                    });
+                    this.setState((prevState) => ({
+                      addNewBlockOpened: !prevState.addNewBlockOpened,
+                    }));
                   }}
                   className="column-block-add-button"
                 >

package/src/components/manage/Blocks/Landing/index.js

@@ -57,8 +57,7 @@ export const tiles = [
     image: toolkit,
     title: 'Toolkit',
     description: 'TOOLKIT',
-    link:
-      'https://op.europa.eu/:lang/publication-detail/-/publication/e33a1119-8fa2-11ec-8c40-01aa75ed71a1',
+    link: 'https://op.europa.eu/:lang/publication-detail/-/publication/e33a1119-8fa2-11ec-8c40-01aa75ed71a1',
   },
 ];
 
@@ -84,7 +83,7 @@ export const getStyle = (props) => {
   };
 };
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.landing_block = {
     id: 'landing_block',
     title: 'Landing block',
@@ -103,4 +102,4 @@ export default (config) => {
     blockHasOwnFocusManagement: true,
   };
   return config;
-};
+}

package/src/components/manage/Blocks/List/View.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Icon } from '@plone/volto/components';
 
 import arrowSVG from '@plone/volto/icons/up-key.svg';
@@ -7,8 +7,11 @@ import './style.less';
 
 const View = (props) => {
   const { data = {} } = props;
-  const provider_data = props.provider_data || {};
-  const columns = React.useMemo(() => {
+  const provider_data = useMemo(
+    () => props.provider_data || {},
+    [props.provider_data],
+  );
+  const columns = useMemo(() => {
     const temp = provider_data[Object.keys(provider_data)?.[0]]?.length || 0;
     if (data.count < temp && data.count > 0) {
       return data.count;

package/src/components/manage/Blocks/List/index.js

@@ -1,7 +1,7 @@
 import ListView from './View';
 import getSchema from './schema';
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.custom_connected_block = {
     ...config.blocks.blocksConfig.custom_connected_block,
     blocks: {
@@ -14,4 +14,4 @@ export default (config) => {
     },
   };
   return config;
-};
+}

package/src/components/manage/Blocks/List/style.less

@@ -58,9 +58,9 @@
           display: block;
           width: 16px;
           height: 16px;
+          border-radius: 50%;
           margin-right: 1rem;
           background-color: @secondaryColor;
-          border-radius: 50%;
           content: '';
         }
       }

package/src/components/manage/Blocks/N2KCountryProfileMap/View.jsx

@@ -91,8 +91,7 @@ const View = (props) => {
             .replaceAll(' ', '')
             .replaceAll('{country}', country),
         },
-        url:
-          'https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/Natura2000Sites/MapServer',
+        url: 'https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/Natura2000Sites/MapServer',
       }),
     ]);
     fetch(
@@ -142,9 +141,7 @@ const View = (props) => {
         view={{
           center: [0, 0],
           extent: extent || [
-            -6319125.804807394,
-            3070702.923644739,
-            9584655.106275197,
+            -6319125.804807394, 3070702.923644739, 9584655.106275197,
             12091128.659149397,
           ],
           zoom: 2,

package/src/components/manage/Blocks/N2KCountryProfileMap/index.js

@@ -2,7 +2,7 @@ import worldSVG from '@plone/volto/icons/world.svg';
 import Edit from './Edit';
 import View from './View';
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.n2k_country_profile_map = {
     id: 'n2k_country_profile_map',
     title: 'N2K country profile map',
@@ -21,4 +21,4 @@ export default (config) => {
     blockHasOwnFocusManagement: false,
   };
   return config;
-};
+}

package/src/components/manage/Blocks/NavigationAnchors/index.js

@@ -2,7 +2,7 @@ import NavigationAnchorsEdit from './Edit';
 import NavigationAnchorsView from './View';
 import worldSVG from '@plone/volto/icons/world.svg';
 
-export default (config) => {
+export default function applyConfig(config) {
   config.blocks.blocksConfig.navigation_anchors = {
     id: 'navigation_anchors',
     title: 'Navigation anchors',
@@ -20,4 +20,4 @@ export default (config) => {
     },
   };
   return config;
-};
+}