react-spatial 1.5.2 → 1.5.3

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

@@ -0,0 +1,201 @@
+// 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

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

package/{propTypes.js → src/propTypes.js}

@@ -1,22 +1,25 @@
-import PropTypes from "prop-types";
-const STATE_BOARDING = "BOARDING";
-const STATE_LEAVING = "LEAVING";
+import PropTypes from 'prop-types';
+
+const STATE_BOARDING = 'BOARDING';
+const STATE_LEAVING = 'LEAVING';
+
 const station = PropTypes.shape({
-  arrivalDelay: PropTypes.number,
-  aimedArrivalTime: PropTypes.number,
-  arrivalTime: PropTypes.number,
+  arrivalDelay: PropTypes.number, // time in milliseconds.
+  aimedArrivalTime: PropTypes.number, // time in milliseconds.
+  arrivalTime: PropTypes.number, // time in milliseconds with the delay included.
   cancelled: PropTypes.bool,
   coordinates: PropTypes.arrayOf(PropTypes.number),
-  aimedDepartureTime: PropTypes.number,
-  departureDelay: PropTypes.number,
-  departureTime: PropTypes.number,
+  aimedDepartureTime: PropTypes.number, // time in milliseconds.
+  departureDelay: PropTypes.number, // time in milliseconds.
+  departureTime: PropTypes.number, // time in milliseconds with the delay included
   noDropOff: PropTypes.bool,
   noPickUp: PropTypes.bool,
   stationId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   stationName: PropTypes.string,
   wheelchairAccessible: PropTypes.bool,
-  state: PropTypes.oneOf([null, STATE_BOARDING, STATE_LEAVING])
+  state: PropTypes.oneOf([null, STATE_BOARDING, STATE_LEAVING]),
 });
+
 const lineInfos = PropTypes.shape({
   backgroundColor: PropTypes.string,
   bicyclesAllowed: PropTypes.bool,
@@ -39,11 +42,12 @@ const lineInfos = PropTypes.shape({
   shortName: PropTypes.string,
   stations: PropTypes.arrayOf(station),
   vehicleType: PropTypes.number,
-  wheelchairAccessible: PropTypes.bool
+  wheelchairAccessible: PropTypes.bool,
 });
+
 export default {
   lineInfos,
   station,
   STATE_BOARDING,
-  STATE_LEAVING
+  STATE_LEAVING,
 };

package/{setupTests.js → src/setupTests.js}

@@ -1,3 +1,3 @@
 global.URL.createObjectURL = jest.fn(() => {
-  return "fooblob";
+  return 'fooblob';
 });

package/src/styleguidist/ComponentsList.js

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,277 @@
+/* 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

@@ -0,0 +1,38 @@
+/* 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;
+}