@opengeoweb/layer-select 15.0.0 → 15.2.0

package/index.esm.js

@@ -10,7 +10,7 @@ import { snackbarListener, snackbarReducer, snackbarTypes, snackbarActions } fro
 import { Switch, Grid, List, ToggleButtonGroup, ToggleButton, Box, Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Typography, useTheme, Backdrop, CircularProgress, Button, ListItem, ListItemText, LinearProgress, InputAdornment } from '@mui/material';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
-import { FixedSizeList } from 'react-window';
+import { List as List$1 } from 'react-window';
 import { getDimensionsList, LayerInfoButton, clearImageCacheForAllMaps } from '@opengeoweb/webmap-react';
 import { LayerType, webmapUtils, getWMSServiceId, queryWMSServiceInfo, queryWMSLayers, invalidateWMSGetCapabilities } from '@opengeoweb/webmap';
 import { useFormContext } from 'react-hook-form';
@@ -1788,12 +1788,11 @@ var LayerListRow = function LayerListRow(_ref) {
   });
 };
 
-var LayerList = function LayerList(_ref) {
-  var services = _ref.services,
+var LayerRow = function LayerRow(_ref) {
+  var index = _ref.index,
+    style = _ref.style,
+    services = _ref.services,
     filteredLayers = _ref.filteredLayers,
-    layerSelectHeight = _ref.layerSelectHeight,
-    serviceListHeight = _ref.serviceListHeight,
-    layerSelectWidth = _ref.layerSelectWidth,
     allLayers = _ref.allLayers,
     allMapIds = _ref.allMapIds,
     addLayer = _ref.addLayer,
@@ -1804,13 +1803,70 @@ var LayerList = function LayerList(_ref) {
     searchFilter = _ref.searchFilter,
     isLayerInfoVisibleInStore = _ref.isLayerInfoVisibleInStore,
     _onToggleActiveLayer = _ref.onToggleActiveLayer,
-    currentLayerInfo = _ref.currentLayerInfo;
+    currentLayerInfo = _ref.currentLayerInfo,
+    layerSelectWidth = _ref.layerSelectWidth,
+    rowMargin = _ref.rowMargin;
+  var layer = filteredLayers[index];
+  var service = services[layer.serviceName];
+  if (!service) {
+    return jsx("div", {
+      style: style
+    });
+  }
+  var isActiveLayer = isLayerInfoVisibleInStore && (currentLayerInfo == null ? void 0 : currentLayerInfo.serviceUrl) === service.serviceUrl && (currentLayerInfo == null ? void 0 : currentLayerInfo.layerName) === layer.name;
+  var rowStyle = Object.assign({}, style, {
+    boxSizing: 'border-box',
+    paddingBottom: rowMargin
+  });
+  return jsx("div", {
+    style: rowStyle,
+    children: jsx(LayerListRow, {
+      addLayer: addLayer,
+      addLayerToAllMaps: addLayerToAllMaps,
+      allLayers: allLayers,
+      allMapIds: allMapIds,
+      deleteLayer: deleteLayer,
+      hasActiveLayer: isActiveLayer,
+      layer: layer,
+      layerSelectWidth: layerSelectWidth,
+      mapLayers: mapLayers,
+      onToggleActiveLayer: function onToggleActiveLayer() {
+        return _onToggleActiveLayer({
+          serviceUrl: service.serviceUrl,
+          layerName: layer.name,
+          isActiveLayer: isActiveLayer
+        });
+      },
+      removeLayerFromAllMaps: removeLayerFromAllMaps,
+      searchFilter: searchFilter,
+      service: service
+    })
+  }, layer.name);
+};
+var LayerList = function LayerList(_ref2) {
+  var services = _ref2.services,
+    filteredLayers = _ref2.filteredLayers,
+    layerSelectHeight = _ref2.layerSelectHeight,
+    serviceListHeight = _ref2.serviceListHeight,
+    layerSelectWidth = _ref2.layerSelectWidth,
+    allLayers = _ref2.allLayers,
+    allMapIds = _ref2.allMapIds,
+    addLayer = _ref2.addLayer,
+    addLayerToAllMaps = _ref2.addLayerToAllMaps,
+    deleteLayer = _ref2.deleteLayer,
+    removeLayerFromAllMaps = _ref2.removeLayerFromAllMaps,
+    mapLayers = _ref2.mapLayers,
+    searchFilter = _ref2.searchFilter,
+    isLayerInfoVisibleInStore = _ref2.isLayerInfoVisibleInStore,
+    onToggleActiveLayer = _ref2.onToggleActiveLayer,
+    currentLayerInfo = _ref2.currentLayerInfo;
   var _useLayerSelectTransl = useLayerSelectTranslation(),
     t = _useLayerSelectTransl.t;
   var rowMargin = 4;
   var rowHeight = widthToRowHeight(layerSelectWidth);
   var layerSelectFilterHeight = 155 + serviceListHeight;
   var minHeight = 320;
+  var listHeight = layerSelectHeight - layerSelectFilterHeight < minHeight ? minHeight : layerSelectHeight - layerSelectFilterHeight;
   return jsxs(Box, {
     "data-testid": "layerList",
     children: [jsxs(Box, {
@@ -1819,41 +1875,31 @@ var LayerList = function LayerList(_ref) {
         fontSize: '12px'
       },
       children: [filteredLayers.length, " ", t('layer-list-results')]
-    }), jsx(FixedSizeList, {
-      height: layerSelectHeight - layerSelectFilterHeight < minHeight ? minHeight : layerSelectHeight - layerSelectFilterHeight,
-      itemCount: filteredLayers.length,
-      itemSize: rowHeight + rowMargin,
-      width: "100%",
-      children: function children(_ref2) {
-        var index = _ref2.index,
-          style = _ref2.style;
-        var filter = filteredLayers[index];
-        var service = services[filter.serviceName];
-        var isActiveLayer = isLayerInfoVisibleInStore && (currentLayerInfo == null ? void 0 : currentLayerInfo.serviceUrl) === service.serviceUrl && (currentLayerInfo == null ? void 0 : currentLayerInfo.layerName) === filter.name;
-        return jsx("div", {
-          style: style,
-          children: !!service && jsx(LayerListRow, {
-            addLayer: addLayer,
-            addLayerToAllMaps: addLayerToAllMaps,
-            allLayers: allLayers,
-            allMapIds: allMapIds,
-            deleteLayer: deleteLayer,
-            hasActiveLayer: isActiveLayer,
-            layer: filter,
-            layerSelectWidth: layerSelectWidth,
-            mapLayers: mapLayers,
-            onToggleActiveLayer: function onToggleActiveLayer() {
-              return _onToggleActiveLayer({
-                serviceUrl: service == null ? void 0 : service.serviceUrl,
-                layerName: filter.name,
-                isActiveLayer: isActiveLayer
-              });
-            },
-            removeLayerFromAllMaps: removeLayerFromAllMaps,
-            searchFilter: searchFilter,
-            service: service
-          })
-        }, filter.name);
+    }), jsx(List$1, {
+      defaultHeight: minHeight,
+      rowComponent: LayerRow,
+      rowCount: filteredLayers.length,
+      rowHeight: rowHeight + rowMargin,
+      rowProps: {
+        services: services,
+        filteredLayers: filteredLayers,
+        allLayers: allLayers,
+        allMapIds: allMapIds,
+        addLayer: addLayer,
+        addLayerToAllMaps: addLayerToAllMaps,
+        deleteLayer: deleteLayer,
+        removeLayerFromAllMaps: removeLayerFromAllMaps,
+        mapLayers: mapLayers,
+        searchFilter: searchFilter,
+        isLayerInfoVisibleInStore: isLayerInfoVisibleInStore,
+        onToggleActiveLayer: onToggleActiveLayer,
+        currentLayerInfo: currentLayerInfo,
+        layerSelectWidth: layerSelectWidth,
+        rowMargin: rowMargin
+      },
+      style: {
+        height: listHeight,
+        width: '100%'
       }
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/layer-select",
-  "version": "15.0.0",
+  "version": "15.2.0",
   "description": "GeoWeb layer select library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,15 +8,15 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/shared": "15.0.0",
-    "@opengeoweb/store": "15.0.0",
+    "@opengeoweb/shared": "15.2.0",
+    "@opengeoweb/store": "15.2.0",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "15.0.0",
-    "@opengeoweb/webmap-react": "15.0.0",
-    "@opengeoweb/webmap": "15.0.0",
-    "react-window": "^1.8.10",
-    "@opengeoweb/snackbar": "15.0.0",
-    "@opengeoweb/form-fields": "15.0.0",
+    "@opengeoweb/theme": "15.2.0",
+    "@opengeoweb/webmap-react": "15.2.0",
+    "@opengeoweb/webmap": "15.2.0",
+    "react-window": "^2.2.6",
+    "@opengeoweb/snackbar": "15.2.0",
+    "@opengeoweb/form-fields": "15.2.0",
     "react-hook-form": "^7.50.1",
     "@reduxjs/toolkit": "^2.6.1",
     "lodash": "^4.17.21",

package/src/lib/components/LayerList/LayerList.d.ts

@@ -21,7 +21,7 @@ export interface LayerListProps {
     mapLayers: layerTypes.ReduxLayer[];
     searchFilter: string;
     isLayerInfoVisibleInStore: boolean;
-    onToggleActiveLayer: ({ serviceUrl, layerName, isActiveLayer, }: AddLayerParams & {
+    onToggleActiveLayer: (params: AddLayerParams & {
         isActiveLayer: boolean;
     }) => void;
     currentLayerInfo?: AddLayerParams;