react-spatial 1.5.3 → 1.5.5

package/src/components/Zoom/Zoom.test.js

@@ -1,141 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { configure, shallow, mount } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import { act } from 'react-dom/test-utils';
-import MapEvent from 'ol/MapEvent';
-import OLView from 'ol/View';
-import OLMap from 'ol/Map';
-import Zoom from './Zoom';
-
-configure({ adapter: new Adapter() });
-
-describe('Zoom', () => {
-  test('should match snapshot.', () => {
-    const map = new OLMap({});
-    const component = renderer.create(<Zoom map={map} />);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('should match snapshot with custom attributes', () => {
-    const map = new OLMap({});
-    const component = renderer.create(
-      <Zoom map={map} className="foo" tabIndex={-1} title="bar" />,
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('should match snapshot with zoom slider', () => {
-    const map = new OLMap({});
-    const component = renderer.create(<Zoom map={map} zoomSlider />);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  [
-    ['click', {}],
-    ['keypress', { which: 13 }],
-  ].forEach((evt) => {
-    test(`should zoom in on ${evt[0]}.`, () => {
-      const map = new OLMap({ view: new OLView({ zoom: 5 }) });
-      const zooms = shallow(<Zoom map={map} />);
-      zooms
-        .find('.rs-zoom-in')
-        .first()
-        .simulate(...evt);
-
-      expect(map.getView().getZoom()).toBe(6);
-    });
-
-    test(`should zoom in on ${evt[0]} (delta: 0.3).`, () => {
-      const map = new OLMap({ view: new OLView({ zoom: 5 }) });
-      const zooms = shallow(<Zoom map={map} delta={0.3} />);
-      zooms
-        .find('.rs-zoom-in')
-        .first()
-        .simulate(...evt);
-
-      expect(map.getView().getZoom()).toBe(5.3);
-    });
-
-    test(`should zoom out on ${evt[0]}.`, () => {
-      const map = new OLMap({ view: new OLView({ zoom: 5 }) });
-      const zooms = shallow(<Zoom map={map} />);
-      zooms
-        .find('.rs-zoom-out')
-        .first()
-        .simulate(...evt);
-
-      expect(map.getView().getZoom()).toBe(4);
-    });
-
-    test(`should zoom out on ${evt[0]} (delta: 0.3).`, () => {
-      const map = new OLMap({ view: new OLView({ zoom: 5 }) });
-      const zooms = shallow(<Zoom map={map} delta={0.3} />);
-      zooms
-        .find('.rs-zoom-out')
-        .first()
-        .simulate(...evt);
-
-      expect(map.getView().getZoom()).toBe(4.7);
-    });
-  });
-
-  test('should remove zoomSlider control on unmount.', () => {
-    const map = new OLMap({});
-    const spy = jest.spyOn(map, 'removeControl');
-    const spy2 = jest.spyOn(map, 'addControl');
-    const wrapper = mount(<Zoom map={map} zoomSlider />);
-    expect(spy).toHaveBeenCalledTimes(0);
-    wrapper.unmount();
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy.mock.calls[0][0]).toBe(spy2.mock.calls[0][0]);
-  });
-
-  test('should disable zoom-in button on mount with max zoom..', () => {
-    const map = new OLMap({
-      view: new OLView({ maxZoom: 20, zoom: 20 }),
-    });
-    const spy = jest.spyOn(map.getView(), 'setZoom');
-    const wrapper = mount(<Zoom map={map} />);
-    act(() => {
-      map.dispatchEvent(new MapEvent('moveend', map));
-    });
-    wrapper.update();
-    expect(wrapper.find('.rs-zoom-in').prop('disabled')).toEqual(true);
-    wrapper.find('.rs-zoom-in').first().simulate('click');
-    expect(spy).toHaveBeenCalledTimes(0);
-  });
-
-  test('should disable zoom-out button on mount with min zoom.', () => {
-    const map = new OLMap({
-      view: new OLView({ minZoom: 2, zoom: 2 }),
-    });
-    const spy = jest.spyOn(map.getView(), 'setZoom');
-    const wrapper = mount(<Zoom map={map} />);
-    act(() => {
-      map.dispatchEvent(new MapEvent('moveend', map));
-    });
-    wrapper.update();
-    expect(wrapper.find('.rs-zoom-out').prop('disabled')).toEqual(true);
-    wrapper.find('.rs-zoom-out').first().simulate('click');
-    expect(spy).toHaveBeenCalledTimes(0);
-  });
-});
-
-test('should disable zoom-out button when reaching min zoom.', () => {
-  const map = new OLMap({
-    view: new OLView({ minZoom: 2, zoom: 3 }),
-  });
-  const spy = jest.spyOn(map.getView(), 'setZoom');
-  const wrapper = mount(<Zoom map={map} />);
-  wrapper.find('.rs-zoom-out').first().simulate('click');
-  expect(spy).toHaveBeenCalledTimes(1);
-  act(() => {
-    map.dispatchEvent(new MapEvent('moveend', map));
-  });
-  wrapper.update();
-  expect(wrapper.find('.rs-zoom-out').prop('disabled')).toEqual(true);
-});

package/src/components/Zoom/__snapshots__/Zoom.test.js.snap

@@ -1,201 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Zoom should match snapshot with custom attributes 1`] = `
-<div
-  className="foo"
-  tabIndex={-1}
-  title="bar"
->
-  <button
-    className="rs-zoom-in"
-    disabled={false}
-    onClick={[Function]}
-    onKeyPress={[Function]}
-    tabIndex={0}
-    title="Zoom in"
-    type="button"
-  >
-    <svg
-      fill="currentColor"
-      focusable={false}
-      height="1em"
-      stroke="currentColor"
-      strokeWidth="0"
-      style={
-        {
-          "color": undefined,
-        }
-      }
-      viewBox="0 0 448 512"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-      />
-    </svg>
-  </button>
-  <button
-    className="rs-zoom-out"
-    disabled={false}
-    onClick={[Function]}
-    onKeyPress={[Function]}
-    tabIndex={0}
-    title="Zoom out"
-    type="button"
-  >
-    <svg
-      fill="currentColor"
-      focusable={false}
-      height="1em"
-      stroke="currentColor"
-      strokeWidth="0"
-      style={
-        {
-          "color": undefined,
-        }
-      }
-      viewBox="0 0 448 512"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`Zoom should match snapshot with zoom slider 1`] = `
-<div
-  className="rs-zooms-bar"
->
-  <button
-    className="rs-zoom-in"
-    disabled={false}
-    onClick={[Function]}
-    onKeyPress={[Function]}
-    tabIndex={0}
-    title="Zoom in"
-    type="button"
-  >
-    <svg
-      fill="currentColor"
-      focusable={false}
-      height="1em"
-      stroke="currentColor"
-      strokeWidth="0"
-      style={
-        {
-          "color": undefined,
-        }
-      }
-      viewBox="0 0 448 512"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-      />
-    </svg>
-  </button>
-  <div
-    className="rs-zoomslider-wrapper"
-  />
-  <button
-    className="rs-zoom-out"
-    disabled={false}
-    onClick={[Function]}
-    onKeyPress={[Function]}
-    tabIndex={0}
-    title="Zoom out"
-    type="button"
-  >
-    <svg
-      fill="currentColor"
-      focusable={false}
-      height="1em"
-      stroke="currentColor"
-      strokeWidth="0"
-      style={
-        {
-          "color": undefined,
-        }
-      }
-      viewBox="0 0 448 512"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`Zoom should match snapshot. 1`] = `
-<div
-  className="rs-zooms-bar"
->
-  <button
-    className="rs-zoom-in"
-    disabled={false}
-    onClick={[Function]}
-    onKeyPress={[Function]}
-    tabIndex={0}
-    title="Zoom in"
-    type="button"
-  >
-    <svg
-      fill="currentColor"
-      focusable={false}
-      height="1em"
-      stroke="currentColor"
-      strokeWidth="0"
-      style={
-        {
-          "color": undefined,
-        }
-      }
-      viewBox="0 0 448 512"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-      />
-    </svg>
-  </button>
-  <button
-    className="rs-zoom-out"
-    disabled={false}
-    onClick={[Function]}
-    onKeyPress={[Function]}
-    tabIndex={0}
-    title="Zoom out"
-    type="button"
-  >
-    <svg
-      fill="currentColor"
-      focusable={false}
-      height="1em"
-      stroke="currentColor"
-      strokeWidth="0"
-      style={
-        {
-          "color": undefined,
-        }
-      }
-      viewBox="0 0 448 512"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-      />
-    </svg>
-  </button>
-</div>
-`;

package/src/components/Zoom/index.js

@@ -1 +0,0 @@
-export { default } from './Zoom';

package/src/styleguidist/ComponentsList.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-// Import default implementation from react-styleguidist using the full path
-import ComponentsListRenderer from 'react-styleguidist/lib/client/rsg-components/ComponentsList/ComponentsListRenderer';
-import getUrl from 'react-styleguidist/lib/client/utils/getUrl';
-
-const propTypes = {
-  items: PropTypes.array.isRequired,
-  classes: PropTypes.object,
-  hashPath: PropTypes.array,
-  useRouterLinks: PropTypes.bool,
-  useHashId: PropTypes.bool,
-};
-
-const defaultProps = {
-  classes: null,
-  hashPath: [],
-  useRouterLinks: false,
-  useHashId: true,
-};
-
-function ComponentsList({
-  classes,
-  items,
-  useRouterLinks = false,
-  useHashId,
-  hashPath,
-}) {
-  const mappedItems = items.map((item) => {
-    return {
-      ...item,
-      href: item.href
-        ? item.href
-        : // Conflict with Permalink Component: Remove the first '/' to avoid page reload on click
-          getUrl({
-            name: item.name,
-            slug: item.slug,
-            anchor: !useRouterLinks,
-            hashPath: useRouterLinks ? hashPath : false,
-            id: useRouterLinks ? useHashId : false,
-          })
-            .replace(/^\/index.html+/g, '')
-            .replace(/^\/+/g, ''),
-    };
-  });
-  return <ComponentsListRenderer classes={classes} items={mappedItems} />;
-}
-
-ComponentsList.propTypes = propTypes;
-ComponentsList.defaultProps = defaultProps;
-
-export default ComponentsList;

package/src/styleguidist/StyleGuide.js

@@ -1,277 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import React, { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { geopsTheme, Header, Footer } from '@geops/geops-ui';
-import {
-  Hidden,
-  ClickAwayListener,
-  Collapse,
-  List,
-  ListItem,
-  Link,
-} from '@material-ui/core';
-import Open from '@material-ui/icons/ArrowDropDownTwoTone';
-import Close from '@material-ui/icons/ArrowDropUpTwoTone';
-import { ThemeProvider } from '@material-ui/core/styles';
-import Version from 'react-styleguidist/lib/client/rsg-components/Version';
-import Styled from 'react-styleguidist/lib/client/rsg-components/Styled';
-import docConfig from '../../doc/doc-config.json';
-
-const styles = ({ mq }) => {
-  return {
-    root: {
-      backgroundColor: 'white',
-
-      '& .MuiAutocomplete-root': {
-        margin: '20px 0',
-        width: 300,
-      },
-    },
-    version: {
-      padding: '10px 0 0 10px',
-    },
-    content: {
-      top: 68,
-      bottom: 0,
-      height: 'calc(100vh - 60px)',
-      position: 'fixed',
-      width: '100%',
-      zIndex: 0,
-    },
-    scrollable: {
-      overflowY: 'scroll',
-      height: 'calc(100vh - 68px)',
-      [mq.small]: {
-        top: 40,
-        position: 'absolute',
-        width: '100%',
-        height: 'calc(100vh - 108px)',
-      },
-    },
-    main: {
-      margin: 'auto',
-      width: 'calc(100vw - 30px)',
-      maxWidth: 1000,
-      padding: [[15, 30]],
-      paddingLeft: 230,
-      paddingTop: 55,
-      [mq.small]: {
-        padding: 5,
-      },
-      display: 'block',
-    },
-    sidebar: {
-      backgroundColor: '#EFEFEF',
-      border: '#e8e8e8 solid',
-      borderWidth: '0 1px 0 0',
-      position: 'fixed',
-      top: 68,
-      left: 0,
-      bottom: 0,
-      width: '200px',
-      overflow: 'auto',
-    },
-    dropdown: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: '0 10px 0',
-      position: 'fixed',
-      backgroundColor: '#efefef',
-      height: 40,
-      width: '100%',
-      zIndex: 99999,
-      color: '#6987a1',
-      borderBottom: '1px solid #6987a1',
-    },
-    footerWrapper: {
-      marginLeft: 200,
-      [mq.small]: {
-        marginLeft: 0,
-      },
-    },
-  };
-};
-
-export function StyleGuideRenderer({
-  classes,
-  children,
-  version,
-  toc,
-  hasSidebar,
-}) {
-  const [apiKey, setApiKey] = useState();
-  const [dropdownOpen, toggleDropdown] = useState(false);
-  const [expanded, expandSection] = useState();
-  const [selected, setSelected] = useState('Components');
-  const ref = useRef();
-  useEffect(() => {
-    fetch('https://backend.developer.geops.io/publickey')
-      .then((response) => {
-        return response.json();
-      })
-      .then((data) => {
-        setApiKey(data.key);
-      })
-      .catch(() => {
-        setApiKey('error');
-        // eslint-disable-next-line no-console
-        console.error('Request to get the apiKey failed');
-      });
-  }, []);
-
-  if (!apiKey) {
-    return null;
-  }
-
-  // Makes apiKey accessible for all components.
-  window.apiKey = apiKey;
-
-  return (
-    <ThemeProvider theme={geopsTheme}>
-      <div className={classes.root}>
-        <Header
-          title={docConfig.appName}
-          tabs={[{ label: 'Code', href: `${docConfig.githubRepo}` }]}
-        />
-        <div className={classes.content}>
-          <Hidden smUp>
-            <div
-              role="button"
-              type="button"
-              className={classes.dropdown}
-              onClick={() => {
-                return toggleDropdown(!dropdownOpen);
-              }}
-              onKeyDown={(e) => {
-                if (e.keyCode === 13) {
-                  toggleDropdown(!dropdownOpen);
-                }
-              }}
-              tabIndex={0}
-            >
-              {selected}
-              {dropdownOpen ? <Close /> : <Open />}
-            </div>
-            <Collapse in={dropdownOpen} timeout="auto" unmountOnExit>
-              <ClickAwayListener
-                onClickAway={() => {
-                  return toggleDropdown(false);
-                }}
-              >
-                <List
-                  component="div"
-                  disablePadding
-                  style={{
-                    width: '100%',
-                    overflow: 'auto',
-                    maxHeight: 'calc(100vh - 150px)',
-                    top: 40,
-                    backgroundColor: 'white',
-                    boxShadow: '0 10px 15px #35353520',
-                    zIndex: 99999,
-                  }}
-                >
-                  {toc.props.sections.slice(1).map((section) => {
-                    return [
-                      <ListItem
-                        key={section.name}
-                        button
-                        onClick={() => {
-                          return expanded === section.name
-                            ? expandSection()
-                            : expandSection(section.name);
-                        }}
-                        style={{
-                          fontWeight: 'bold',
-                          color: '#6987a1',
-                          borderTop: '1px solid #e8e8e8',
-                        }}
-                      >
-                        {section.name}
-                      </ListItem>,
-                      <Collapse
-                        key={`${section.name}-components`}
-                        in={expanded === section.name}
-                        timeout="auto"
-                        unmountOnExit
-                      >
-                        {section.components.map((component) => {
-                          return (
-                            <ListItem
-                              key={component.name}
-                              button
-                              style={{ paddingLeft: 32 }}
-                              onClick={() => {
-                                setSelected(component.name);
-                                toggleDropdown(false);
-                              }}
-                              tabIndex={-1}
-                              selected={selected === component.name}
-                            >
-                              <Link
-                                style={{ display: 'block', width: '100%' }}
-                                href={`#${component.name.toLowerCase()}`}
-                              >
-                                {component.name}
-                              </Link>
-                            </ListItem>
-                          );
-                        })}
-                      </Collapse>,
-                    ];
-                  })}
-                </List>
-              </ClickAwayListener>
-            </Collapse>
-          </Hidden>
-          <div className={classes.scrollable} ref={ref}>
-            <Hidden xsDown>
-              <div className={classes.sidebar}>
-                <header className={classes.version}>
-                  {version && <Version>{version}</Version>}
-                </header>
-                {hasSidebar ? toc : null}
-              </div>
-            </Hidden>
-            <main className={classes.main}>{children}</main>
-            <div className={classes.footerWrapper}>
-              <Footer
-                onScrollToTop={() => {
-                  ref.current.scrollTo({
-                    top: 0,
-                    left: 0,
-                    behavior: 'smooth',
-                  });
-                }}
-              />
-            </div>
-          </div>
-        </div>
-        <div id="promo">
-          <a
-            href={docConfig.githubRepo}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <div id="promo-text">Fork me on GitHub</div>
-          </a>
-        </div>
-      </div>
-    </ThemeProvider>
-  );
-}
-
-StyleGuideRenderer.defaultProps = {
-  version: null,
-};
-
-StyleGuideRenderer.propTypes = {
-  classes: PropTypes.object.isRequired,
-  children: PropTypes.node.isRequired,
-  version: PropTypes.string,
-  toc: PropTypes.node.isRequired,
-  hasSidebar: PropTypes.bool.isRequired,
-};
-
-export default Styled(styles)(StyleGuideRenderer);

package/src/styleguidist/styleguidist.css

@@ -1,38 +0,0 @@
-/* Overwrtie styleguidist styles */
-
-.link-active {
-  font-weight: bold !important;
-}
-
-header a:hover {
-  text-decoration: none;
-  color: inherit;
-}
-
-#promo {
-  position: fixed;
-  bottom: 55px;
-  background-color: #e90;
-  right: -65px;
-  transform: rotate(-45deg);
-  z-index: 1;
-  line-height: 1.2;
-}
-
-#promo-text {
-  color: white;
-  font-size: 14px;
-  font-family: sans-serif;
-  font-weight: bold;
-  margin: 0;
-  padding: 3px 70px;
-}
-
-#promo a,
-#promo a:hover {
-  text-decoration: none;
-}
-
-footer {
-  position: relative !important;
-}