react-spatial 1.5.2 → 1.5.3

package/src/components/LayerTree/LayerTree.test.js

@@ -0,0 +1,337 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import 'jest-canvas-mock';
+import renderer from 'react-test-renderer';
+import { Layer } from 'mobility-toolbox-js/ol';
+import LayerTree from './LayerTree';
+
+configure({ adapter: new Adapter() });
+
+const mountLayerTree = (layers) => {
+  return mount(<LayerTree layers={layers} />);
+};
+
+const renderLayerTree = (layers, props) => {
+  const component = renderer.create(
+    <LayerTree layers={layers} {...(props || {})} />,
+  );
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+};
+
+const classItem = '.rs-layer-tree-item';
+const toggleItem = '.rs-layer-tree-toggle';
+
+describe('LayerTree', () => {
+  let layers;
+
+  beforeEach(() => {
+    layers = [
+      new Layer({
+        name: 'root',
+      }),
+      new Layer({
+        name: '1',
+        children: [
+          new Layer({
+            name: '1-1',
+            group: 'radio',
+            properties: {
+              radioGroup: 'radio',
+            },
+          }),
+          new Layer({
+            name: '1-2',
+            group: 'radio',
+            properties: {
+              radioGroup: 'radio',
+            },
+            visible: false,
+            children: [
+              new Layer({
+                name: '1-2-1',
+                visible: false,
+              }),
+              new Layer({
+                name: '1-2-2',
+                visible: false,
+              }),
+              new Layer({
+                name: '2',
+                visible: false,
+              }),
+            ],
+          }),
+        ],
+      }),
+    ];
+  });
+  describe('matches snapshots', () => {
+    test('using default properties.', () => {
+      renderLayerTree(layers);
+    });
+
+    test('when no layers.', () => {
+      const component = renderer.create(<LayerTree layers={[]} />);
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    test('when renderItem is used.', () => {
+      renderLayerTree(layers, {
+        renderItem: (item) => {
+          const { name } = item;
+          return <div key={name}>{name}</div>;
+        },
+      });
+    });
+
+    test('when classNames are used.', () => {
+      renderLayerTree(layers, { className: 'foo' });
+    });
+
+    test('when an item is hidden.', () => {
+      renderLayerTree(layers, {
+        isItemHidden: (item) => {
+          return !!item.children.length;
+        },
+      });
+    });
+
+    test('when an item is hidden (different layer tree levels)', () => {
+      renderLayerTree(layers, {
+        isItemHidden: (item) => {
+          return item.isBaseLayer || item.get('hideInLegend');
+        },
+      });
+    });
+
+    test('when an item use renderBeforeItem.', () => {
+      renderLayerTree(layers, {
+        renderBeforeItem: (layer, level) => {
+          const { name } = layer;
+          return (
+            <div>
+              Render name before item: {name}, level: {level}
+            </div>
+          );
+        },
+      });
+    });
+
+    test('when an item use renderAfterItem.', () => {
+      renderLayerTree(layers, {
+        renderAfterItem: (layer, level) => {
+          const { name } = layer;
+          return (
+            <div>
+              Render name after item: {name}, level: {level}
+            </div>
+          );
+        },
+      });
+    });
+
+    test('when expandChildren is true.', () => {
+      renderLayerTree(layers, {
+        expandChildren: true,
+      });
+    });
+
+    test('when expandChildren is a function.', () => {
+      renderLayerTree(layers, {
+        expandChildren: (lyrs) => {
+          return lyrs.length === 3;
+        },
+      });
+    });
+
+    test('when items are always expanded', () => {
+      const newLayers = [
+        new Layer({
+          name: 'Expanded layer 1 (because of level 1)',
+          visible: true,
+          children: [
+            new Layer({
+              name: 'Expanded layer 1.1 (because of isAlwaysExpanded=true)',
+              visible: true,
+              properties: {
+                isAlwaysExpanded: true,
+              },
+              children: [
+                new Layer({
+                  name: 'Expanded layer 1.1.1 (because of isAlwaysExpanded=true)',
+                  visible: true,
+                  properties: {
+                    isAlwaysExpanded: true,
+                  },
+                  children: [
+                    new Layer({
+                      name: 'Visible layer 1.1.1.1 (as parent is expanded)',
+                      visible: true,
+                    }),
+                  ],
+                }),
+                new Layer({
+                  name: 'Hidden layer 1.1.1 (because of hidden=true)',
+                  visible: true,
+                  properties: {
+                    hideInLegend: true,
+                  },
+                  children: [
+                    new Layer({
+                      name: 'Invisible layer 1.1.1.1 (as parent is hidden)',
+                      visible: true,
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            new Layer({
+              name: 'Expanded layer 1.2 (because of isAlwaysExpanded=true)',
+              visible: true,
+              properties: {
+                isAlwaysExpanded: true,
+              },
+              children: [
+                new Layer({
+                  name: 'Visible layer 1.2.1 (as parent is expanded)',
+                  visible: true,
+                  children: [
+                    new Layer({
+                      name: 'Invisible layer 1.2.1.1 (as parent isAlwaysExpanded=false)',
+                      visible: true,
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        }),
+        new Layer({
+          name: 'Expanded layer 2 (because of level 1)',
+          visible: true,
+          children: [
+            new Layer({
+              name: 'Visible layer 2.1 (as parent is expanded)',
+              visible: true,
+              children: [
+                new Layer({
+                  name: 'Invisible layer 2.1.1 (as parent isAlwaysExpanded=false)',
+                  visible: true,
+                  properties: {
+                    isAlwaysExpanded: true,
+                  },
+                  children: [
+                    new Layer({
+                      name: 'Invisible layer 2.1.1.1 (as parent is not visible)',
+                      visible: true,
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            new Layer({
+              name: 'Visible layer 2.2 (as parent is expanded)',
+              visible: true,
+              children: [
+                new Layer({
+                  name: 'Invisible layer 2.2.1 (as parent isAlwaysExpanded=false)',
+                  visible: true,
+                  children: [
+                    new Layer({
+                      name: 'Invisible layer 2.2.1.1 (as parent is not visible)',
+                      visible: true,
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        }),
+      ];
+
+      renderLayerTree(newLayers, {
+        isItemHidden: (item) => {
+          return item.get('hideInLegend');
+        },
+      });
+    });
+  });
+
+  describe('triggers onInputClick', () => {
+    let wrapper;
+    let spy;
+    let spy2;
+    const newLayers = [
+      new Layer({
+        name: 'foo',
+      }),
+    ];
+    const expectCalled = () => {
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy2).toHaveBeenCalledTimes(0);
+      expect(spy.mock.calls[0][0].name).toBe('foo');
+    };
+
+    beforeEach(() => {
+      spy = jest.spyOn(LayerTree.prototype, 'onInputClick');
+      spy2 = jest.spyOn(LayerTree.prototype, 'onToggle');
+      wrapper = mountLayerTree(newLayers);
+    });
+
+    afterEach(() => {
+      spy.mockRestore();
+      spy2.mockRestore();
+    });
+
+    test('when we press enter with keyboard on the label element.', () => {
+      wrapper.find('label').at(0).simulate('keypress', { which: 13 });
+      expectCalled();
+    });
+
+    test('when we click on input.', () => {
+      wrapper.find('input').at(0).simulate('click');
+      expectCalled();
+    });
+
+    test('when we click on toggle button (label+arrow) of an item without children.', () => {
+      wrapper.find(classItem).first().childAt(1).simulate('click');
+      expectCalled();
+    });
+  });
+
+  describe('triggers onToggle', () => {
+    let wrapper;
+    let spy;
+    const newLayers = [
+      new Layer({
+        name: '1',
+        children: [
+          new Layer({
+            name: '1-1',
+          }),
+          new Layer({
+            name: '1-1-1',
+          }),
+        ],
+      }),
+    ];
+
+    const expectCalled = () => {
+      expect(spy).toHaveBeenCalledTimes(1);
+    };
+
+    beforeEach(() => {
+      spy = jest.spyOn(LayerTree.prototype, 'onToggle');
+      wrapper = mountLayerTree(newLayers);
+    });
+
+    test('when we click on toggle button (label+arrow) of an item with children', () => {
+      wrapper.find(toggleItem).first().simulate('click');
+      expectCalled();
+    });
+  });
+});

package/src/components/LayerTree/README.md

@@ -0,0 +1,92 @@
+The following example demonstrates the use of LayerTree.
+
+```jsx
+import React, { useEffect } from 'react';
+import { MapboxLayer, MapboxStyleLayer, Layer } from 'mobility-toolbox-js/ol';
+import { Style, Circle, Stroke, Fill } from 'ol/style';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import GeoJSONFormat from 'ol/format/GeoJSON';
+import LayerTree from 'react-spatial/components/LayerTree';
+import BasicMap from 'react-spatial/components/BasicMap';
+
+const baseBright = new MapboxLayer({
+  name: 'Base - Bright',
+  group: 'baseLayer',
+  url: `https://maps.geops.io/styles/base_bright_v2/style.json?key=${apiKey}`,
+});
+
+const railLines = new MapboxStyleLayer({
+  name: 'Railways routes',
+  mapboxLayer: baseBright,
+  styleLayer: {
+    id: 'rail',
+    type: 'line',
+    source: 'base',
+    'source-layer': 'osm_edges',
+    filter: ['==', 'vehicle_type_prior', 'Zug'],
+    paint: {
+      'line-color': 'rgba(255, 0, 0, 1)',
+      'line-width': 2,
+    },
+  },
+});
+
+const passengerFrequencies = new MapboxStyleLayer({
+  name: 'Passenger frequencies',
+  mapboxLayer: baseBright,
+  styleLayer: {
+    id: 'passagierfrequenzen',
+    type: 'circle',
+    source: 'base',
+    'source-layer': 'osm_points',
+    filter: ['has', 'dwv'],
+    paint: {
+      'circle-radius': ['*', ['sqrt', ['/', ['get', 'dwv'], Math.PI]], 0.2],
+      'circle-color': 'rgb(254, 160, 0)',
+      'circle-stroke-width': 2,
+      'circle-stroke-color': 'rgb(254, 160, 0)',
+      'circle-opacity': [
+        'case',
+        ['boolean', ['feature-state', 'hover'], false],
+        1,
+        0.7,
+      ],
+    },
+  },
+});
+
+baseBright.children = [passengerFrequencies, railLines];
+
+const baseDark = new MapboxLayer({
+  name: 'Base - Dark',
+  group: 'baseLayer',
+  visible: false,
+  url: `https://maps.geops.io/styles/base_dark_v2/style.json?key=${apiKey}`,
+});
+
+const baseTravic = new MapboxLayer({
+  url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
+  group: 'baseLayer',
+  visible: false,
+  properties: {
+    hidden: true,
+  },
+});
+
+const layers = [baseDark, baseTravic, baseBright];
+
+<div className="rs-layer-tree-example">
+  <BasicMap
+    layers={layers}
+    center={[876887.69, 5928515.41]}
+    zoom={8}
+    tabIndex={0}
+  />
+  <LayerTree
+    layers={layers}
+    isItemHidden={(layer) => layer.get('hidden')}
+    expandChildren
+  />
+</div>;
+```