react-spatial 1.5.2 → 1.5.3

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

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NorthArrow should match snapshot rotated. 1`] = `
+<div
+  className="rs-north-arrow"
+  style={
+    {
+      "transform": "rotate(45deg)",
+    }
+  }
+>
+  <svg
+    data-file-name="SvgNorthArrow"
+  />
+</div>
+`;
+
+exports[`NorthArrow should match snapshot with children. 1`] = `
+<div
+  className="rs-north-arrow"
+  style={
+    {
+      "transform": "rotate(0deg)",
+    }
+  }
+>
+  <svg
+    baseProfile="tiny"
+    fill="currentColor"
+    height="1em"
+    stroke="currentColor"
+    strokeWidth="0"
+    style={
+      {
+        "color": undefined,
+      }
+    }
+    version="1.2"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="8.5"
+      cy="8.5"
+      r="2.5"
+    />
+    <path
+      d="M16 10c-2 0-3 3-4.5 3s-1.499-1-3.5-1c-2 0-3.001 4-3.001 4h14.001s-1-6-3-6zM20 3h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2v-12c0-1.103-.897-2-2-2zm0 14h-16v-12h16v12z"
+    />
+  </svg>
+</div>
+`;
+
+exports[`NorthArrow should match snapshot with circle. 1`] = `
+<div
+  className="rs-north-arrow"
+  style={
+    {
+      "transform": "rotate(0deg)",
+    }
+  }
+>
+  <svg
+    data-file-name="SvgNorthArrowCircle"
+  />
+</div>
+`;
+
+exports[`NorthArrow should match snapshot with custom attributes. 1`] = `
+<div
+  className="test-class"
+  style={
+    {
+      "transform": "rotate(0deg)",
+    }
+  }
+  tabIndex={0}
+>
+  <svg
+    data-file-name="SvgNorthArrow"
+  />
+</div>
+`;
+
+exports[`NorthArrow should match snapshot with default value. 1`] = `
+<div
+  className="rs-north-arrow"
+  style={
+    {
+      "transform": "rotate(0deg)",
+    }
+  }
+>
+  <svg
+    data-file-name="SvgNorthArrow"
+  />
+</div>
+`;
+
+exports[`NorthArrow should react on view rotation (transform: \`rotate(20deg)\`) 1`] = `
+<div class="rs-north-arrow"
+     style="transform: rotate(20deg);"
+>
+  <svg data-file-name="SvgNorthArrow">
+  </svg>
+</div>
+`;
+
+exports[`NorthArrow should react on view rotation with offset (transform: \`rotate(10deg)\`) 1`] = `
+<div class="rs-north-arrow"
+     style="transform: rotate(10deg);"
+>
+  <svg data-file-name="SvgNorthArrow">
+  </svg>
+</div>
+`;

package/src/components/NorthArrow/index.js

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

package/src/components/Overlay/Overlay.js

@@ -0,0 +1,176 @@
+import React, { Component, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Resizable } from 're-resizable';
+import ResizeHandler from '../ResizeHandler';
+
+const propTypes = {
+  /**
+   * CSS class added to container.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Children content of the overlay.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Observed element to define screen size.
+   */
+  observe: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+    PropTypes.instanceOf(Component),
+    PropTypes.shape({ current: PropTypes.node }),
+    PropTypes.shape({ current: PropTypes.instanceOf(Component) }),
+  ]),
+
+  /**
+   * Deactivate the ability to resize the overlay on mobile.
+   * /!\ This prop is only used if isMobile (observer width < 768px).
+   */
+  isMobileResizable: PropTypes.bool,
+
+  /**
+   * Size parameters to the Resizable component on mobile.
+   * Pass following prop to re-resizable component: 'size', 'defaultSize', 'minHeight' & 'maxHeight'
+   * (https://github.com/bokuweb/re-resizable)
+   * /!\ This prop is only used if isMobile (observer width < 768px).
+   */
+  mobileSize: PropTypes.shape({
+    minimalHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    maximalHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    defaultSize: PropTypes.shape({
+      height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    }),
+    size: PropTypes.shape({
+      height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    }),
+  }),
+
+  /**
+   * Minimal width to consider the observed as mobile.
+   * Default is 768px.
+   */
+  thresholdWidthForMobile: PropTypes.number,
+
+  /**
+   * Callback when stop resizing
+   * Pass following prop to re-resizable component
+   * (https://github.com/bokuweb/re-resizable)
+   */
+  onResizeStop: PropTypes.func,
+
+  /**
+   * Callback when start resizing
+   * Pass following prop to re-resizable component
+   * (https://github.com/bokuweb/re-resizable)
+   */
+  onResizeStart: PropTypes.func,
+};
+
+const defaultMobileSize = {
+  defaultSize: {
+    width: '100%',
+    height: '25%',
+  },
+  size: undefined,
+  maximalHeight: '100%',
+  minimalHeight: '25%',
+};
+
+const defaultProps = {
+  className: null,
+  children: null,
+  observe: null,
+  isMobileResizable: true,
+  mobileSize: defaultMobileSize,
+  thresholdWidthForMobile: 768,
+  onResizeStop: () => {},
+  onResizeStart: () => {},
+};
+
+/**
+ * The Overlay component creates a resizable, swipable overlay <div\>
+ */
+const Overlay = ({
+  observe,
+  className,
+  children,
+  isMobileResizable,
+  mobileSize,
+  onResizeStop,
+  onResizeStart,
+  thresholdWidthForMobile,
+}) => {
+  const [isMobile, setIsMobile] = useState();
+
+  const onResize = (entries) => {
+    for (let i = 0; i < entries.length; i += 1) {
+      const { width } = entries[i].contentRect;
+      setIsMobile(width <= thresholdWidthForMobile);
+    }
+  };
+
+  let resizableMobileSize;
+  if (mobileSize) {
+    resizableMobileSize = { ...defaultMobileSize, ...mobileSize };
+  }
+
+  return (
+    <>
+      {observe ? <ResizeHandler observe={observe} onResize={onResize} /> : null}
+      {isMobile ? (
+        <Resizable
+          style={{
+            position: 'absolute',
+          }}
+          enable={{
+            top: isMobileResizable,
+            right: false,
+            bottom: false,
+            left: false,
+            topRight: false,
+            bottomRight: false,
+            bottomLeft: false,
+            topLeft: false,
+          }}
+          maxHeight={mobileSize && resizableMobileSize.maximalHeight}
+          minHeight={mobileSize && resizableMobileSize.minimalHeight}
+          handleComponent={{
+            top: <div className="tm-overlay-handler">&mdash;</div>,
+          }}
+          onResizeStart={onResizeStart}
+          onResizeStop={onResizeStop}
+          handleStyles={{
+            top: {
+              top: '-20px',
+              height: '20px',
+              padding: '20px 0',
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            },
+          }}
+          size={resizableMobileSize.size}
+          defaultSize={mobileSize && resizableMobileSize.defaultSize}
+          className={`tm-overlay-mobile${className ? ` ${className}` : ''}`}
+        >
+          <div className="tm-overlay-mobile-content">{children}</div>
+        </Resizable>
+      ) : (
+        <div className={`tm-overlay${className ? ` ${className}` : ''}`}>
+          {children}
+        </div>
+      )}
+    </>
+  );
+};
+
+Overlay.propTypes = propTypes;
+Overlay.defaultProps = defaultProps;
+
+export default Overlay;

package/src/components/Overlay/Overlay.test.js

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { act } from 'react-dom/test-utils';
+import { configure, mount } from 'enzyme';
+import renderer from 'react-test-renderer';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import ResizeObserver from 'resize-observer-polyfill';
+import { Resizable } from 're-resizable';
+import Overlay from './Overlay';
+
+jest.mock('resize-observer-polyfill');
+
+configure({ adapter: new Adapter() });
+
+const propTypes = {
+  isMobileResizable: PropTypes.bool,
+  thresholdWidthForMobile: PropTypes.number,
+};
+
+const defaultProps = {
+  isMobileResizable: undefined,
+  thresholdWidthForMobile: undefined,
+};
+
+const BasicComponent = ({ thresholdWidthForMobile, isMobileResizable }) => {
+  const [ref, setRef] = useState(null);
+
+  return (
+    <>
+      <div
+        ref={(node) => {
+          if (node !== ref) {
+            setRef(node);
+          }
+        }}
+        className="observer"
+      />
+      <Overlay
+        observe={ref}
+        thresholdWidthForMobile={thresholdWidthForMobile}
+        isMobileResizable={isMobileResizable}
+      >
+        Test content
+      </Overlay>
+    </>
+  );
+};
+BasicComponent.propTypes = propTypes;
+BasicComponent.defaultProps = defaultProps;
+
+describe('Overlay', () => {
+  test('should match snapshot.', () => {
+    const component = renderer.create(<Overlay>Test content</Overlay>);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('should react on observe resize.', () => {
+    const wrapper = mount(<BasicComponent />);
+    const target = wrapper.find('.observer').getDOMNode();
+
+    act(() => {
+      // The mock class set the onResize property, we just have to run it to
+      // simulate a resize
+      ResizeObserver.onResize([
+        {
+          target,
+          contentRect: {
+            width: 200,
+            height: 200,
+          },
+        },
+      ]);
+    });
+    wrapper.update();
+
+    expect(wrapper.find('.tm-overlay').length > 0).toBe(false);
+    expect(wrapper.find('.tm-overlay-mobile').length > 0).toBe(true);
+  });
+
+  test('should force mobile overlay display on big screen.', () => {
+    const wrapper = mount(
+      <BasicComponent thresholdWidthForMobile={Infinity} />,
+    );
+    const target = wrapper.find('.observer').getDOMNode();
+
+    act(() => {
+      ResizeObserver.onResize([
+        {
+          target,
+          contentRect: {
+            width: 1200,
+            height: 200,
+          },
+        },
+      ]);
+    });
+    wrapper.update();
+
+    expect(wrapper.find('.tm-overlay').length > 0).toBe(false);
+    expect(wrapper.find('.tm-overlay-mobile').length > 0).toBe(true);
+  });
+
+  test('should allow resizing with top handler on mobile.', () => {
+    const wrapper = mount(<BasicComponent />);
+    const target = wrapper.find('.observer').getDOMNode();
+
+    // Force resize to make it mobile.
+    act(() => {
+      ResizeObserver.onResize([
+        {
+          target,
+          contentRect: {
+            width: 200,
+            height: 200,
+          },
+        },
+      ]);
+    });
+    wrapper.update();
+
+    const resizableProps = wrapper.find(Resizable).props();
+
+    expect(resizableProps.enable.top).toBe(true);
+  });
+
+  test('should not allow resizing with top handler on mobile.', () => {
+    const wrapper = mount(<BasicComponent isMobileResizable={false} />);
+    const target = wrapper.find('.observer').getDOMNode();
+
+    // Force resize to make it mobile.
+    act(() => {
+      ResizeObserver.onResize([
+        {
+          target,
+          contentRect: {
+            width: 200,
+            height: 200,
+          },
+        },
+      ]);
+    });
+    wrapper.update();
+
+    const resizableProps = wrapper.find(Resizable).props();
+
+    expect(resizableProps.enable.top).toBe(false);
+  });
+});

package/src/components/Overlay/README.md

@@ -0,0 +1,59 @@
+
+The following example demonstrates the use of Overlay.
+
+```jsx
+import React, { useState, useEffect, useRef } from 'react';
+import Overlay from 'react-spatial/components/Overlay';
+
+function OverlayExample() {
+  const [open, setOpen] = useState(true);
+  const [ref, setRef] = useState(null);
+  const refDiv = useRef(null);
+
+  useEffect(() => {
+    setRef(refDiv);
+  }, [refDiv]);
+  
+  return (
+    <div
+      className="tm-overlay-example"
+      ref={refDiv}
+    >
+      <div
+        role="button"
+        className="tm-clickable-feature"
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        Toggle Overlay
+      </div>
+      {open && ref ? (
+        <Overlay
+          observe={ref.current}
+          className="tm-overlay-container"
+          mobileSize={{
+              minimalHeight: '25%',
+              maximalHeight: '80%',
+              defaultSize: {
+                height: '40%',
+                width: '100%',
+              },
+            }}
+        >
+          <div
+            role="button"
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            Close Overlay
+          </div>
+        </Overlay>
+      ) : null}
+    </div>
+  );
+}
+
+<OverlayExample />;
+```

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Overlay should match snapshot. 1`] = `
+<div
+  className="tm-overlay"
+>
+  Test content
+</div>
+`;

package/src/components/Overlay/index.js

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