fix(LayerTree): make contents of title clickable

terrestris · May 28, 2024 · 334e8aa · 334e8aa
1 parent ed10fca
commit 334e8aa
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 52 deletions.
diff --git a/src/Grid/FeatureGrid/FeatureGrid.tsx b/src/Grid/FeatureGrid/FeatureGrid.tsx
@@ -31,7 +31,7 @@ type OwnProps = {
     selectedFeatures: OlFeature<OlGeometry>[]) => void;
 };
 
-export type FeatureGridProps<T> = OwnProps & RgCommonGridProps<T> & TableProps<T>;
+export type FeatureGridProps<T extends AnyObject = AnyObject> = OwnProps & RgCommonGridProps<T> & TableProps<T>;
 
 const defaultClassName = `${CSS_PREFIX}feature-grid`;
 

diff --git a/src/LayerTree/LayerTree.less b/src/LayerTree/LayerTree.less
@@ -2,8 +2,4 @@
   .out-of-range {
     opacity: 0.5;
   }
-
-  .ant-tree-node-content-wrapper {
-    pointer-events: none;
-  }
 }
diff --git a/src/LayerTree/LayerTree.spec.tsx b/src/LayerTree/LayerTree.spec.tsx
@@ -1,12 +1,12 @@
-import { act,fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import OlLayerBase from 'ol/layer/Base';
 import OlLayerGroup from 'ol/layer/Group';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import OlSourceTileWMS from 'ol/source/TileWMS';
 import * as React from 'react';
 
-import TestUtil from '../Util/TestUtil';;
+import TestUtil from '../Util/TestUtil';
 import { renderInMapContext } from '@terrestris/react-util/dist/Util/rtlTestUtils';
 import userEvent from '@testing-library/user-event';
 
@@ -237,38 +237,38 @@ describe('<LayerTree />', () => {
       <LayerTree />
     );
 
-    const layer1Span = screen.queryByText('layer1');
-    const layer2Span = screen.queryByText('layer2');
-
     // eslint-disable-next-line testing-library/no-node-access
-    expect(layer1Span?.parentNode?.parentNode).toHaveClass('ant-tree-treenode-checkbox-checked');
+    const layer1Node = screen.getByText('layer1').closest('.ant-tree-treenode')!;
     // eslint-disable-next-line testing-library/no-node-access
-    expect(layer2Span?.parentNode?.parentNode).not.toHaveClass('ant-tree-treenode-checkbox-checked');
+    const layer2Node = screen.getByText('layer2').closest('.ant-tree-treenode')!;
+
+    expect(layer1Node).toHaveClass('ant-tree-treenode-checkbox-checked');
+    expect(layer2Node).not.toHaveClass('ant-tree-treenode-checkbox-checked');
   });
 
   it('sets the layers visibility on check', async () => {
     renderInMapContext(map,
       <LayerTree />
     );
 
-    const layer1Span = screen.getByText('layer1');
-    const layer2Span = screen.getByText('layer2');
-
     // eslint-disable-next-line testing-library/no-node-access
-    expect(layer1Span?.parentNode?.parentNode).toHaveClass('ant-tree-treenode-checkbox-checked');
+    const layer1Node = screen.getByText('layer1').closest('.ant-tree-treenode')!;
     // eslint-disable-next-line testing-library/no-node-access
-    expect(layer2Span?.parentNode?.parentNode).not.toHaveClass('ant-tree-treenode-checkbox-checked');
+    const layer2Node = screen.getByText('layer2').closest('.ant-tree-treenode')!;
+
+    expect(layer1Node).toHaveClass('ant-tree-treenode-checkbox-checked');
+    expect(layer2Node).not.toHaveClass('ant-tree-treenode-checkbox-checked');
 
     expect(layer1.getVisible()).toBe(true);
     expect(layer2.getVisible()).toBe(false);
 
-    await userEvent.click(layer1Span);
-    await userEvent.click(layer2Span);
-
     // eslint-disable-next-line testing-library/no-node-access
-    expect(layer1Span?.parentNode?.parentNode).not.toHaveClass('ant-tree-treenode-checkbox-checked');
+    await userEvent.click(layer1Node.querySelector('.ant-tree-checkbox')!);
     // eslint-disable-next-line testing-library/no-node-access
-    expect(layer2Span?.parentNode?.parentNode).toHaveClass('ant-tree-treenode-checkbox-checked');
+    await userEvent.click(layer2Node.querySelector('.ant-tree-checkbox')!);
+
+    expect(layer1Node).not.toHaveClass('ant-tree-treenode-checkbox-checked');
+    expect(layer2Node).toHaveClass('ant-tree-treenode-checkbox-checked');
 
     expect(layer1.getVisible()).toBe(false);
     expect(layer2.getVisible()).toBe(true);
@@ -279,41 +279,38 @@ describe('<LayerTree />', () => {
       <LayerTree />
     );
 
-    const layer1Span = screen.getByText('layer1');
-    const layer2Span = screen.getByText('layer2');
-
     // eslint-disable-next-line testing-library/no-node-access
-    expect(layer1Span?.parentNode?.parentNode).toHaveClass('ant-tree-treenode-checkbox-checked');
+    const layer1Node = screen.getByText('layer1').closest('.ant-tree-treenode')!;
     // eslint-disable-next-line testing-library/no-node-access
-    expect(layer2Span?.parentNode?.parentNode).not.toHaveClass('ant-tree-treenode-checkbox-checked');
+    const layer2Node = screen.getByText('layer2').closest('.ant-tree-treenode')!;
+
+    expect(layer1Node).toHaveClass('ant-tree-treenode-checkbox-checked');
+    expect(layer2Node).not.toHaveClass('ant-tree-treenode-checkbox-checked');
 
     act(() => {
       layer1.setVisible(false);
       layer2.setVisible(true);
     });
 
-    // eslint-disable-next-line testing-library/no-node-access
-    expect(layer1Span?.parentNode?.parentNode).not.toHaveClass('ant-tree-treenode-checkbox-checked');
-    // eslint-disable-next-line testing-library/no-node-access
-    expect(layer2Span?.parentNode?.parentNode).toHaveClass('ant-tree-treenode-checkbox-checked');
+    expect(layer1Node).not.toHaveClass('ant-tree-treenode-checkbox-checked');
+    expect(layer2Node).toHaveClass('ant-tree-treenode-checkbox-checked');
   });
 
   it('sets the out-of-range class if the layer is not visible', () => {
     renderInMapContext(map,
       <LayerTree />
     );
 
-    const layer1Span = screen.getByText('layer1');
-
     // eslint-disable-next-line testing-library/no-node-access
-    expect(layer1Span?.parentNode?.parentNode).toHaveClass('out-of-range');
+    const layer1Node = screen.getByText('layer1').closest('.ant-tree-treenode')!;
+
+    expect(layer1Node).toHaveClass('out-of-range');
 
     act(() => {
       map.getView().setZoom(10);
     });
 
-    // eslint-disable-next-line testing-library/no-node-access
-    expect(layer1Span?.parentNode?.parentNode).not.toHaveClass('out-of-range');
+    expect(layer1Node).not.toHaveClass('out-of-range');
   });
 
   it('adds/removes layers to the tree if added/removed internally', () => {
@@ -374,11 +371,13 @@ describe('<LayerTree />', () => {
       <LayerTree />
     );
 
-    const layerSubGroupSpan = screen.getByText('layerSubGroup');
+    // eslint-disable-next-line testing-library/no-node-access
+    const layerSubGroupNode = screen.getByText('layerSubGroup').closest('.ant-tree-treenode')!;
 
     expect(layer3.getVisible()).toBe(false);
 
-    await userEvent.click(layerSubGroupSpan);
+    // eslint-disable-next-line testing-library/no-node-access
+    await userEvent.click(layerSubGroupNode.querySelector('.ant-tree-checkbox')!);
 
     expect(layer3.getVisible()).toBe(true);
   });
@@ -394,21 +393,18 @@ describe('<LayerTree />', () => {
       await userEvent.click(caret);
     }
 
-    const layerSubGroupSpan = screen.getByText('layerSubGroup');
-
     // eslint-disable-next-line testing-library/no-node-access
-    let layerSubGroupCheckbox = layerSubGroupSpan?.parentNode?.parentNode?.querySelector('.ant-tree-checkbox-checked');
-
-    expect(layerSubGroupCheckbox).toBe(null);
+    const layerSubGroupNode = screen.getByText('layerSubGroup').closest('.ant-tree-treenode')!;
 
-    const layer3Span = screen.getByText('layer3');
+    expect(layerSubGroupNode).not.toHaveClass('ant-tree-treenode-checkbox-checked');
 
-    await userEvent.click(layer3Span);
+    // eslint-disable-next-line testing-library/no-node-access
+    const layer3Node = screen.getByText('layer3').closest('.ant-tree-treenode')!;
 
     // eslint-disable-next-line testing-library/no-node-access
-    layerSubGroupCheckbox = layerSubGroupSpan?.parentNode?.parentNode?.querySelector('.ant-tree-checkbox-checked');
+    await userEvent.click(layer3Node.querySelector('.ant-tree-checkbox')!);
 
-    expect(layerSubGroupCheckbox).toBeInstanceOf(HTMLSpanElement);
+    expect(layerSubGroupNode).toHaveClass('ant-tree-treenode-checkbox-checked');
   });
 
   it('renders the layers in correct order', () => {

diff --git a/src/LayerTree/LayerTree.tsx b/src/LayerTree/LayerTree.tsx
@@ -3,8 +3,15 @@ import './LayerTree.less';
 import Logger from '@terrestris/base-util/dist/Logger';
 import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
-import { Tree, TreeDataNode } from 'antd';
-import { BasicDataNode, DataNode, TreeProps } from 'antd/lib/tree';
+import {
+  Tree,
+  TreeDataNode
+} from 'antd';
+import {
+  BasicDataNode,
+  DataNode,
+  TreeProps
+} from 'antd/lib/tree';
 import _isFunction from 'lodash/isFunction';
 import { getUid } from 'ol';
 import { EventsKey as OlEventsKey } from 'ol/events';
@@ -89,7 +96,7 @@ const LayerTree: React.FC<LayerTreeProps> = ({
       return;
     }
 
-    let childNodes: TreeDataNode[] = [];
+    let childNodes: TreeDataNode[]|undefined = undefined;
 
     if (filterFunction && [layer].filter(filterFunction).length === 0) {
       return;
@@ -108,10 +115,14 @@ const LayerTree: React.FC<LayerTreeProps> = ({
 
     return {
       key: getUid(layer),
-      title: getTreeNodeTitle(layer),
+      title: <div
+        onClick={e => e.stopPropagation()}
+      >
+        {getTreeNodeTitle(layer)}
+      </div>,
       className: MapUtil.layerInResolutionRange(layer, map) ? '' : 'out-of-range',
       // Required to identify a group layer/node.
-      children: layer instanceof OlLayerGroup ? childNodes : undefined
+      children: childNodes
     } as TreeDataNode;
   }, [map, getTreeNodeTitle, filterFunction]);