react-spatial 1.5.2 → 1.5.3

package/src/utils/getPolygonPattern.test.js

@@ -0,0 +1,61 @@
+import getPolygonPattern from './getPolygonPattern';
+
+describe('getPolygonPattern()', () => {
+  test('render pattern with default properties (id=1, color = [235, 0, 0, 1])', () => {
+    const color = [235, 0, 0, 1];
+    const pattern = getPolygonPattern();
+    expect(pattern).toEqual(color);
+    expect(pattern.id).toBe();
+    expect(pattern.color).toBe();
+    expect(pattern.empty).toBe();
+    expect(pattern.canvas).toBe();
+  });
+
+  test('render pattern 0 (no fill) color and (light blue) opacity', () => {
+    const id = 0;
+    const color = [0, 60, 80, 0.41000000000000003];
+    const pattern = getPolygonPattern(id, [0, 60, 80, 0.41000000000000003]);
+    expect(pattern.id).toBe(id);
+    expect(pattern.color).toEqual(color);
+    expect(pattern.empty).toBe(true);
+    expect(pattern.canvas).toBe();
+  });
+
+  test('render pattern 1 (full by color) color and (light blue) opacity', () => {
+    const id = 1;
+    const color = [0, 60, 80, 0.41000000000000003];
+    const pattern = getPolygonPattern(id, [0, 60, 80, 0.41000000000000003]);
+    expect(pattern).toEqual(color);
+    expect(pattern.id).toBe();
+    expect(pattern.color).toBe();
+    expect(pattern.empty).toBe();
+    expect(pattern.canvas).toBe();
+  });
+
+  test('render pattern 2 (cross) color and (light blue) opacity', () => {
+    const id = 2;
+    const color = [0, 60, 80, 0.41000000000000003];
+    const pattern = getPolygonPattern(id, [0, 60, 80, 0.41000000000000003]);
+    expect(pattern.id).toBe(id);
+    expect(pattern.color).toEqual(color);
+    expect(pattern.empty).toBe();
+  });
+
+  test('render pattern 3 (diagonal line from bottom-left tot top-right) with color (light blue) and opacity', () => {
+    const id = 3;
+    const color = [0, 60, 80, 0.41000000000000003];
+    const pattern = getPolygonPattern(id, [0, 60, 80, 0.41000000000000003]);
+    expect(pattern.id).toBe(id);
+    expect(pattern.color).toEqual(color);
+    expect(pattern.empty).toBe();
+  });
+
+  test('render pattern 4 (diagonal line from top-left to bottom-right) with color (light blue) and opacity', () => {
+    const id = 4;
+    const color = [0, 60, 80, 0.41000000000000003];
+    const pattern = getPolygonPattern(id, [0, 60, 80, 0.41000000000000003]);
+    expect(pattern.id).toBe(id);
+    expect(pattern.color).toEqual(color);
+    expect(pattern.empty).toBe();
+  });
+});

package/src/utils/timeUtils.js

@@ -0,0 +1,52 @@
+/**
+ * Returns a string representation of a number, with a zero if the number is lower than 10.
+ * @ignore
+ */
+export const pad = (integer) => {
+  return integer < 10 ? `0${integer}` : integer;
+};
+
+/**
+ * Returns a 'hh:mm' string from a time in ms.
+ * @param {Number} timeInMs Time in milliseconds.
+ * @ignore
+ */
+export const getHoursAndMinutes = (timeInMs) => {
+  if (!timeInMs || timeInMs <= 0) {
+    return '';
+  }
+  const date = new Date(timeInMs);
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+};
+
+/**
+ * Returns a string representing a delay.
+ * @param {Number} timeInMs Delay time in milliseconds.
+ * @ignore
+ */
+export const getDelayString = (delayInMs) => {
+  let timeInMs = delayInMs;
+  if (timeInMs < 0) {
+    timeInMs = 0;
+  }
+  const h = Math.floor(timeInMs / 3600000);
+  const m = Math.floor((timeInMs % 3600000) / 60000);
+  const s = Math.floor(((timeInMs % 3600000) % 60000) / 1000);
+
+  if (s === 0 && h === 0 && m === 0) {
+    return '0';
+  }
+  if (s === 0 && h === 0) {
+    return `${m}m`;
+  }
+  if (s === 0) {
+    return `${h}h${m}m`;
+  }
+  if (m === 0 && h === 0) {
+    return `${s}s`;
+  }
+  if (h === 0) {
+    return `${m}m${s}s`;
+  }
+  return `${h}h${m}m${s}s`;
+};

package/src/utils/timeUtils.test.js

@@ -0,0 +1,30 @@
+import { getHoursAndMinutes, getDelayString } from './timeUtils';
+
+const RealDate = Date;
+describe('timeUtils', () => {
+  beforeEach(() => {
+    global.Date = jest.fn(() => {
+      return {
+        getHours: () => {
+          return 0;
+        },
+        getMinutes: () => {
+          return 2;
+        },
+      };
+    });
+    Object.assign(Date, RealDate);
+  });
+
+  afterEach(() => {
+    global.Date = RealDate;
+  });
+
+  test('getHoursAndMinutes should be correct.', () => {
+    expect(getHoursAndMinutes(123456)).toBe('00:02');
+  });
+
+  test('getDelayString should be correct.', () => {
+    expect(getDelayString(123456)).toBe('2m3s');
+  });
+});

package/styleguide.config.js

@@ -0,0 +1,251 @@
+const TerserPlugin = require('terser-webpack-plugin');
+const path = require('path');
+const { version } = require('./package.json');
+
+module.exports = {
+  version,
+  template: {
+    favicon: 'images/favicon.png',
+    head: {
+      links: [
+        {
+          rel: 'stylesheet',
+          href: 'https://fonts.googleapis.com/css?family=Lato:400,700',
+        },
+      ],
+    },
+  },
+  assetsDir: 'src/',
+  styleguideDir: 'styleguide-build',
+  require: [
+    path.join(__dirname, 'src/themes/default/examples.scss'),
+    path.join(__dirname, 'src/styleguidist/styleguidist.css'),
+    'ol/ol.css',
+  ],
+  moduleAliases: {
+    'react-spatial': path.resolve(__dirname, 'src'),
+  },
+  sections: [
+    {
+      name: '',
+
+      content: 'README.md',
+    },
+    {
+      name: 'Maps',
+      description:
+        'A collection of React components for spatial web development of map components.',
+      components: [
+        'src/components/BaseLayerSwitcher/[A-Z]*.js',
+        'src/components/BasicMap/[A-Z]*.js',
+        'src/components/CanvasSaveButton/[A-Z]*.js',
+        'src/components/Copyright/[A-Z]*.js',
+        'src/components/FeatureExportButton/[A-Z]*.js',
+        'src/components/FitExtent/[A-Z]*.js',
+        'src/components/Geolocation/[A-Z]*.js',
+        'src/components/LayerTree/[A-Z]*.js',
+        'src/components/MousePosition/[A-Z]*.js',
+        'src/components/NorthArrow/[A-Z]*.js',
+        'src/components/Permalink/[A-Z]*.js',
+        'src/components/Popup/[A-Z]*.js',
+        'src/components/Overlay/[A-Z]*.js',
+        'src/components/ScaleLine/[A-Z]*.js',
+        'src/components/Zoom/[A-Z]*.js',
+      ],
+      exampleMode: 'expand', // 'hide' | 'collapse' | 'expand'
+      usageMode: 'collapse', // 'hide' | 'collapse' | 'expand'
+    },
+    {
+      name: 'Realtime',
+      description:
+        'A collection of React components for spatial web development of realtime components.',
+      components: ['src/components/RouteSchedule/[A-Z]*.js'],
+      exampleMode: 'expand', // 'hide' | 'collapse' | 'expand'
+      usageMode: 'collapse', // 'hide' | 'collapse' | 'expand'
+    },
+    {
+      name: 'Stops',
+      description:
+        'A collection of React components for spatial web development of stops components.',
+      components: ['src/components/StopsFinder/StopsFinder.js'],
+      exampleMode: 'expand', // 'hide' | 'collapse' | 'expand'
+    },
+  ],
+  webpackConfig: {
+    optimization: {
+      minimize: false, // Terser minification is broken since webpack 5
+      minimizer: [
+        // new TerserPlugin({
+        //   test: /build\//,
+        //   include: /\/build/,
+        // }),
+        // new TerserPlugin<SwcOptions>({
+        //   minify: TerserPlugin.swcMinify,
+        //   terserOptions: {
+        //     // `swc` options
+        //   },
+        // }),
+        // new TerserPlugin<UglifyJSOptions>({
+        //   minify: TerserPlugin.uglifyJsMinify,
+        //   terserOptions: {
+        //     // `uglif-js` options
+        //   },
+        // }),
+        new TerserPlugin({
+          minify: TerserPlugin.esbuildMinify,
+          // test: /Line\.js$/,
+          terserOptions: {
+            // `esbuild` options
+            // loader: '.js=jsx',
+            loader: 'jsx',
+          },
+        }),
+      ],
+    },
+    module: {
+      rules: [
+        // Babel loader, will use your project’s .babelrc
+        // Transpile js
+        {
+          // Match js, jsx, ts & tsx files
+          test: /\.[jt]sx?$/,
+          loader: 'esbuild-loader',
+          options: {
+            // JavaScript version to compile to
+            target: 'es2015',
+            loader: 'jsx',
+            minify: true,
+            sourcemap: true,
+          },
+        },
+        // Load css and scss files.
+        {
+          test: /\.s?css$/,
+          use: ['style-loader', 'css-loader', 'sass-loader'],
+        },
+        {
+          test: /^((?!url).)*\.svg$/,
+          exclude: [
+            path.resolve(__dirname, 'node_modules', '@geops', 'geops-ui'),
+          ],
+          use: [
+            { loader: 'babel-loader' },
+            {
+              loader: 'react-svg-loader',
+              options: {
+                jsx: true, // true outputs JSX tags
+              },
+            },
+          ],
+        },
+        {
+          test: /^((?!url).)*\.svg$/,
+          include: [
+            path.resolve(__dirname, 'node_modules', '@geops', 'geops-ui'), // Load geops-ui SVGs using file-loader
+          ],
+          use: [
+            {
+              loader: require.resolve('@svgr/webpack'),
+              options: {
+                svgoConfig: {
+                  plugins: [
+                    {
+                      removeViewBox: false,
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              loader: 'file-loader',
+              options: {
+                jsx: true,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.url\.svg$/,
+          loader: 'url-loader',
+        },
+        {
+          test: /\.png$|.ico$/,
+          use: [
+            {
+              loader: 'url-loader',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  theme: {
+    color: {
+      links: '#6987a1',
+      linkHover: '#76B833',
+    },
+    fontFamily: {
+      base: 'Lato',
+    },
+    fontSize: {
+      base: 16,
+      text: 17,
+      small: 14,
+      h1: 48,
+      h2: 36,
+      h3: 24,
+      h4: 18,
+      h5: 16,
+      h6: 16,
+    },
+  },
+  styles: {
+    StyleGuide: {
+      '@global body': {
+        overflowY: 'hidden',
+        overflowX: 'hidden',
+        fontFamily: 'Arial',
+      },
+    },
+    Playground: {
+      preview: {
+        fontSize: '18px',
+        marginBottom: '24px',
+      },
+    },
+    Heading: {
+      heading: {
+        fontWeight: 900,
+        marginTop: 50,
+      },
+      heading1: {
+        marginTop: 0,
+      },
+    },
+    Para: {
+      para: {
+        lineHeight: '2.25rem',
+        fontSize: '1.125rem',
+      },
+    },
+    ComponentsList: {
+      isChild: {
+        fontSize: 16,
+      },
+      item: {
+        margin: '10px 0',
+        fontSize: 18,
+      },
+    },
+    Section: {
+      root: {
+        marginBottom: '120px',
+      },
+    },
+  },
+  showSidebar: true,
+  styleguideComponents: {
+    ComponentsList: path.join(__dirname, 'src/styleguidist/ComponentsList'),
+    StyleGuideRenderer: path.join(__dirname, 'src/styleguidist/StyleGuide'),
+  },
+};

package/components/BaseLayerSwitcher/BaseLayerSwitcher.js

@@ -1,231 +0,0 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { FaChevronLeft } from "react-icons/fa";
-import { Layer } from "mobility-toolbox-js/ol";
-import { unByKey } from "ol/Observable";
-const propTypes = {
-  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,
-  layerImages: PropTypes.objectOf(PropTypes.string),
-  className: PropTypes.string,
-  altText: PropTypes.string,
-  titles: PropTypes.shape({
-    button: PropTypes.string,
-    openSwitcher: PropTypes.string,
-    closeSwitcher: PropTypes.string
-  }),
-  closeButtonImage: PropTypes.node,
-  t: PropTypes.func
-};
-const defaultProps = {
-  className: "rs-base-layer-switcher",
-  altText: "Source not found",
-  titles: {
-    button: "Base layers",
-    openSwitcher: "Open Baselayer-Switcher",
-    closeSwitcher: "Close Baselayer-Switcher"
-  },
-  closeButtonImage: /* @__PURE__ */ React.createElement(FaChevronLeft, null),
-  layerImages: void 0,
-  t: (s) => {
-    return s;
-  }
-};
-const getVisibleLayer = (layers) => {
-  return layers.find((layer) => {
-    return layer.visible;
-  });
-};
-const getNextImage = (currentLayer, layers, layerImages) => {
-  const currentIndex = layers.indexOf(
-    layers.find((layer) => {
-      return layer === currentLayer;
-    })
-  );
-  const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;
-  return layerImages[nextIndex];
-};
-const getImageStyle = (url) => {
-  return url ? {
-    backgroundImage: `url(${url})`,
-    backgroundSize: "cover",
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "center"
-  } : null;
-};
-function BaseLayerSwitcher({
-  layers,
-  layerImages,
-  className,
-  altText,
-  titles,
-  closeButtonImage,
-  t
-}) {
-  const [switcherOpen, setSwitcherOpen] = useState(false);
-  const [isClosed, setIsClosed] = useState(true);
-  const [currentLayer, setCurrentLayer] = useState(
-    getVisibleLayer(layers) || layers[0]
-  );
-  useEffect(() => {
-    const olKeys = (layers || []).map((layer) => {
-      return layer.on("change:visible", (evt) => {
-        if (evt.target.visible && currentLayer !== evt.target) {
-          setCurrentLayer(evt.target);
-        }
-      });
-    });
-    return () => {
-      unByKey(olKeys);
-    };
-  }, [currentLayer, layers]);
-  const images = layerImages ? Object.keys(layerImages).map((layerImage) => {
-    return layerImages[layerImage];
-  }) : layers.map((layer) => {
-    return layer.get("previewImage");
-  });
-  const openClass = switcherOpen ? " rs-open" : "";
-  const hiddenStyle = switcherOpen && !isClosed ? "visible" : "hidden";
-  const handleSwitcherClick = () => {
-    if (layers.length === 2) {
-      const nextLayer = layers.find((layer) => {
-        return !layer.visible;
-      });
-      if (currentLayer.setVisible) {
-        currentLayer.setVisible(false);
-      } else {
-        currentLayer.visible = false;
-      }
-      setCurrentLayer(nextLayer);
-      if (nextLayer.setVisible) {
-        nextLayer.setVisible(true);
-      } else {
-        nextLayer.visible = true;
-      }
-      return;
-    }
-    return setSwitcherOpen(true) && setIsClosed(false);
-  };
-  const onLayerSelect = (layer) => {
-    if (!switcherOpen) {
-      setSwitcherOpen(true);
-      return;
-    }
-    setCurrentLayer(layer);
-    if (layer.setVisible) {
-      layer.setVisible(true);
-    } else {
-      layer.visible = true;
-    }
-    layers.filter((l) => {
-      return l !== layer;
-    }).forEach((l) => {
-      if (l.setVisible) {
-        l.setVisible(false);
-      } else {
-        l.visible = false;
-      }
-    });
-    setSwitcherOpen(false);
-  };
-  const nextImage = getNextImage(currentLayer, layers, images);
-  useEffect(() => {
-    if (currentLayer !== getVisibleLayer(layers)) {
-      setCurrentLayer(getVisibleLayer(layers) || layers[0]);
-    }
-  }, [currentLayer, layers]);
-  useEffect(() => {
-    let timeout;
-    if (!switcherOpen) {
-      timeout = setTimeout(() => {
-        setIsClosed(true);
-      }, 200);
-    } else {
-      timeout = setTimeout(() => {
-        setIsClosed(false);
-      }, 800);
-    }
-    return () => {
-      return clearTimeout(timeout);
-    };
-  }, [switcherOpen]);
-  if (!layers || layers.length < 2 || !currentLayer) {
-    return null;
-  }
-  const toggleBtn = /* @__PURE__ */ React.createElement("div", {
-    className: "rs-base-layer-switcher-btn-wrapper"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "rs-base-layer-switcher-close-btn",
-    role: "button",
-    onClick: () => {
-      return setSwitcherOpen(false);
-    },
-    onKeyPress: (e) => {
-      return e.which === 13 && setSwitcherOpen(false);
-    },
-    tabIndex: switcherOpen ? "0" : "-1",
-    "aria-label": titles.closeSwitcher,
-    title: titles.closeSwitcher
-  }, closeButtonImage));
-  return /* @__PURE__ */ React.createElement("div", {
-    className: `${className}${openClass}`
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: `rs-base-layer-switcher-button rs-opener${openClass}`,
-    role: "button",
-    title: titles.openSwitcher,
-    "aria-label": titles.openSwitcher,
-    onClick: handleSwitcherClick,
-    onKeyPress: (e) => {
-      if (e.which === 13) {
-        handleSwitcherClick();
-      }
-    },
-    style: getImageStyle(nextImage),
-    tabIndex: "0"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "rs-base-layer-switcher-title"
-  }, layers.length !== 2 ? titles.button : layers.find((layer) => {
-    return !layer.visible;
-  }) && t(
-    layers.find((layer) => {
-      return !layer.visible;
-    }).name
-  )), nextImage ? null : /* @__PURE__ */ React.createElement("span", {
-    className: "rs-alt-text"
-  }, t(altText))), layers.map((layer, idx) => {
-    const layerName = layer.name;
-    const activeClass = layerName === currentLayer.name ? " rs-active" : "";
-    const imageStyle = getImageStyle(
-      layerImages ? layerImages[`${layer.key}`] : layer.get("previewImage")
-    );
-    return /* @__PURE__ */ React.createElement("div", {
-      key: layer.key,
-      className: "rs-base-layer-switcher-btn-wrapper",
-      style: {
-        overflow: hiddenStyle,
-        zIndex: layers.length - idx
-      }
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: `rs-base-layer-switcher-button${openClass}`,
-      role: "button",
-      title: t(layerName),
-      "aria-label": t(layerName),
-      onClick: () => {
-        return onLayerSelect(layer);
-      },
-      onKeyPress: (e) => {
-        if (e.which === 13) {
-          onLayerSelect(layer);
-        }
-      },
-      style: imageStyle,
-      tabIndex: switcherOpen ? "0" : "-1"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: `rs-base-layer-switcher-title${activeClass}`
-    }, t(layerName)), imageStyle ? null : /* @__PURE__ */ React.createElement("span", {
-      className: "rs-alt-text"
-    }, t(altText))));
-  }), toggleBtn);
-}
-BaseLayerSwitcher.propTypes = propTypes;
-BaseLayerSwitcher.defaultProps = defaultProps;
-export default BaseLayerSwitcher;

package/components/BaseLayerSwitcher/BaseLayerSwitcher.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/BaseLayerSwitcher/BaseLayerSwitcher.js"],
-  "sourcesContent": ["/* eslint-disable jsx-a11y/interactive-supports-focus */\nimport React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { FaChevronLeft } from 'react-icons/fa';\nimport { Layer } from 'mobility-toolbox-js/ol';\nimport { unByKey } from 'ol/Observable';\n\nconst propTypes = {\n  /**\n   * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).\n   */\n  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,\n\n  /**\n   * Object containing relative paths to the base layer images. Object\n   * keys need to correspond to layer keys\n   */\n  layerImages: PropTypes.objectOf(PropTypes.string),\n\n  /**\n   * CSS class to apply on the container.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Alternative text rendered if layer images can't be loaded\n   */\n  altText: PropTypes.string,\n\n  /**\n   * Button titles.\n   */\n  titles: PropTypes.shape({\n    button: PropTypes.string,\n    openSwitcher: PropTypes.string,\n    closeSwitcher: PropTypes.string,\n  }),\n\n  /**\n   * Image (node) rendered in the switcher close button.\n   */\n  closeButtonImage: PropTypes.node,\n\n  /**\n   * Translation function.\n   * @param {function} Translation function returning the translated string.\n   */\n  t: PropTypes.func,\n};\n\nconst defaultProps = {\n  className: 'rs-base-layer-switcher',\n  altText: 'Source not found',\n  titles: {\n    button: 'Base layers',\n    openSwitcher: 'Open Baselayer-Switcher',\n    closeSwitcher: 'Close Baselayer-Switcher',\n  },\n  closeButtonImage: <FaChevronLeft />,\n  layerImages: undefined,\n  t: (s) => {\n    return s;\n  },\n};\n\nconst getVisibleLayer = (layers) => {\n  return layers.find((layer) => {\n    return layer.visible;\n  });\n};\n\nconst getNextImage = (currentLayer, layers, layerImages) => {\n  const currentIndex = layers.indexOf(\n    layers.find((layer) => {\n      return layer === currentLayer;\n    }),\n  );\n  const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;\n  return layerImages[nextIndex];\n};\n\nconst getImageStyle = (url) => {\n  return url\n    ? {\n        backgroundImage: `url(${url})`,\n        backgroundSize: 'cover',\n        backgroundRepeat: 'no-repeat',\n        backgroundPosition: 'center',\n      }\n    : null;\n};\n\n/**\n * The BaseLayerSwitcher component renders a button interface for switching the visible\n * [mobility-toolbox-js layer](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * when defined as base layer.\n */\n\nfunction BaseLayerSwitcher({\n  layers,\n  layerImages,\n  className,\n  altText,\n  titles,\n  closeButtonImage,\n  t,\n}) {\n  const [switcherOpen, setSwitcherOpen] = useState(false);\n  const [isClosed, setIsClosed] = useState(true);\n  const [currentLayer, setCurrentLayer] = useState(\n    getVisibleLayer(layers) || layers[0],\n  );\n\n  useEffect(() => {\n    // Update the layer selected when a visibility changes.\n    const olKeys = (layers || []).map((layer) => {\n      return layer.on('change:visible', (evt) => {\n        if (evt.target.visible && currentLayer !== evt.target) {\n          setCurrentLayer(evt.target);\n        }\n      });\n    });\n    return () => {\n      unByKey(olKeys);\n    };\n  }, [currentLayer, layers]);\n\n  /* Images are loaded from props if provided, fallback from layer */\n  const images = layerImages\n    ? Object.keys(layerImages).map((layerImage) => {\n        return layerImages[layerImage];\n      })\n    : layers.map((layer) => {\n        return layer.get('previewImage');\n      });\n\n  const openClass = switcherOpen ? ' rs-open' : '';\n  const hiddenStyle = switcherOpen && !isClosed ? 'visible' : 'hidden';\n\n  const handleSwitcherClick = () => {\n    if (layers.length === 2) {\n      /* On only two layer options the opener becomes a layer toggle button */\n      const nextLayer = layers.find((layer) => {\n        return !layer.visible;\n      });\n      if (currentLayer.setVisible) {\n        currentLayer.setVisible(false);\n      } else {\n        currentLayer.visible = false;\n      }\n      setCurrentLayer(nextLayer);\n      if (nextLayer.setVisible) {\n        nextLayer.setVisible(true);\n      } else {\n        nextLayer.visible = true;\n      }\n      return;\n    }\n    // eslint-disable-next-line consistent-return\n    return setSwitcherOpen(true) && setIsClosed(false);\n  };\n\n  const onLayerSelect = (layer) => {\n    if (!switcherOpen) {\n      setSwitcherOpen(true);\n      return;\n    }\n    setCurrentLayer(layer);\n    if (layer.setVisible) {\n      layer.setVisible(true);\n    } else {\n      // eslint-disable-next-line no-param-reassign\n      layer.visible = true;\n    }\n    layers\n      .filter((l) => {\n        return l !== layer;\n      })\n      .forEach((l) => {\n        if (l.setVisible) {\n          l.setVisible(false);\n        } else {\n          // eslint-disable-next-line no-param-reassign\n          l.visible = false;\n        }\n      });\n    setSwitcherOpen(false);\n  };\n\n  /* Get next image for closed button */\n  const nextImage = getNextImage(currentLayer, layers, images);\n\n  useEffect(() => {\n    /* Ensure correct layer is active on app load */\n    if (currentLayer !== getVisibleLayer(layers)) {\n      setCurrentLayer(getVisibleLayer(layers) || layers[0]);\n    }\n  }, [currentLayer, layers]);\n\n  useEffect(() => {\n    /* Used for correct layer image render with animation */\n    let timeout;\n    if (!switcherOpen) {\n      timeout = setTimeout(() => {\n        setIsClosed(true);\n      }, 200);\n    } else {\n      timeout = setTimeout(() => {\n        setIsClosed(false);\n      }, 800);\n    }\n    return () => {\n      return clearTimeout(timeout);\n    };\n  }, [switcherOpen]);\n\n  if (!layers || layers.length < 2 || !currentLayer) {\n    return null;\n  }\n\n  const toggleBtn = (\n    <div className=\"rs-base-layer-switcher-btn-wrapper\">\n      <div\n        className=\"rs-base-layer-switcher-close-btn\"\n        role=\"button\"\n        onClick={() => {\n          return setSwitcherOpen(false);\n        }}\n        onKeyPress={(e) => {\n          return e.which === 13 && setSwitcherOpen(false);\n        }}\n        tabIndex={switcherOpen ? '0' : '-1'}\n        aria-label={titles.closeSwitcher}\n        title={titles.closeSwitcher}\n      >\n        {closeButtonImage}\n      </div>\n    </div>\n  );\n\n  return (\n    <div className={`${className}${openClass}`}>\n      <div\n        className={`rs-base-layer-switcher-button rs-opener${openClass}`}\n        role=\"button\"\n        title={titles.openSwitcher}\n        aria-label={titles.openSwitcher}\n        onClick={handleSwitcherClick}\n        onKeyPress={(e) => {\n          if (e.which === 13) {\n            handleSwitcherClick();\n          }\n        }}\n        style={getImageStyle(nextImage)}\n        tabIndex=\"0\"\n      >\n        <div className=\"rs-base-layer-switcher-title\">\n          {layers.length !== 2\n            ? titles.button\n            : layers.find((layer) => {\n                return !layer.visible;\n              }) &&\n              t(\n                layers.find((layer) => {\n                  return !layer.visible;\n                }).name,\n              )}\n        </div>\n        {nextImage ? null : <span className=\"rs-alt-text\">{t(altText)}</span>}\n      </div>\n      {layers.map((layer, idx) => {\n        const layerName = layer.name;\n        const activeClass = layerName === currentLayer.name ? ' rs-active' : '';\n        const imageStyle = getImageStyle(\n          layerImages ? layerImages[`${layer.key}`] : layer.get('previewImage'),\n        );\n        return (\n          <div\n            key={layer.key}\n            className=\"rs-base-layer-switcher-btn-wrapper\"\n            style={{\n              /* stylelint-disable-next-line value-keyword-case */\n              overflow: hiddenStyle,\n              /* stylelint-disable-next-line value-keyword-case */\n              zIndex: layers.length - idx,\n            }}\n          >\n            <div\n              className={`rs-base-layer-switcher-button${openClass}`}\n              role=\"button\"\n              title={t(layerName)}\n              aria-label={t(layerName)}\n              onClick={() => {\n                return onLayerSelect(layer);\n              }}\n              onKeyPress={(e) => {\n                if (e.which === 13) {\n                  onLayerSelect(layer);\n                }\n              }}\n              style={imageStyle}\n              tabIndex={switcherOpen ? '0' : '-1'}\n            >\n              <div className={`rs-base-layer-switcher-title${activeClass}`}>\n                {t(layerName)}\n              </div>\n              {imageStyle ? null : (\n                <span className=\"rs-alt-text\">{t(altText)}</span>\n              )}\n            </div>\n          </div>\n        );\n      })}\n      {toggleBtn}\n    </div>\n  );\n}\n\nBaseLayerSwitcher.propTypes = propTypes;\nBaseLayerSwitcher.defaultProps = defaultProps;\n\nexport default BaseLayerSwitcher;\n"],
-  "mappings": "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",
-  "names": []
-}

package/components/BaseLayerSwitcher/index.js

@@ -1 +0,0 @@
-export { default } from "./BaseLayerSwitcher";

package/components/BaseLayerSwitcher/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/BaseLayerSwitcher/index.js"],
-  "sourcesContent": ["export { default } from './BaseLayerSwitcher';\n"],
-  "mappings": "AAAA,wBAAwB;",
-  "names": []
-}