react-spatial 1.4.1 → 1.5.2-beta.6

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

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

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

package/src/components/Overlay/Overlay.js

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

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

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

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

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