Removes position code. This is an artifact of a failed experiment

ctrlplusb · Feb 26, 2021 · 4684f81 · 4684f81
1 parent c97ed94
commit 4684f81
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -264,27 +264,27 @@ Should you wish to avoid the render of a placeholder and have an eager render of
 ### Loading different child components based on size
 
 ```javascript
-import React from 'react';
-import LargeChildComponent from './LargeChildComponent';
-import SmallChildComponent from './SmallChildComponent';
-import sizeMe from 'react-sizeme';
+import React from 'react'
+import LargeChildComponent from './LargeChildComponent'
+import SmallChildComponent from './SmallChildComponent'
+import sizeMe from 'react-sizeme'
 
 function MyComponent(props) {
-  const { width, height } = props.size;
+  const { width, height } = props.size
 
-  const ToRenderChild = height > 600
-    ? LargeChildComponent
-    : SmallChildComponent;
+  const ToRenderChild = height > 600 ? LargeChildComponent : SmallChildComponent
 
   return (
     <div>
-      <h1>My size is {width}x{height}</div>
+      <h1>
+        My size is {width}x{height}
+      </div>
       <ToRenderChild />
     </div>
-  );
+  )
 }
 
-export default sizeMe({ monitorHeight: true })(MyComponent);
+export default sizeMe({ monitorHeight: true })(MyComponent)
 ```
 
 > EXTRA POINTS! Combine the above with a code splitting API (e.g. Webpack's System.import) to avoid unnecessary code downloads for your clients. Zing!
@@ -299,7 +299,7 @@ Okay, I am gonna be up front here and tell you that using this library in an SSR
 
 A standard `sizeMe` configuration involves the rendering of a placeholder component. After the placeholder is mounted to the DOM we extract it's dimension information and pass it on to your actual component. We do this in order to avoid any unnecessary render cycles for possibly deep component trees. Whilst this is useful for a purely client side set up, this is less than useful for an SSR context as the delivered page will contain empty placeholders. Ideally you want actual content to be delivered so that users without JS can still have an experience, or SEO bots can scrape your website.
 
-To avoid the rendering of placeholders in this context you can make use of the `noPlaceholders` global configuration value. Setting this flag will disables any placeholder rendering. Instead your wrapped component will be rendered directly - however it's initial render will contain no values within the `size` prop (i.e. `width`, `height`, and `position` will be `null`).
+To avoid the rendering of placeholders in this context you can make use of the `noPlaceholders` global configuration value. Setting this flag will disables any placeholder rendering. Instead your wrapped component will be rendered directly - however it's initial render will contain no values within the `size` prop (i.e. `width`, and `height` will be `null`).
 
 ```javascript
 import sizeMe from 'react-sizeme'

diff --git a/react-sizeme.d.ts b/react-sizeme.d.ts
@@ -14,7 +14,6 @@ declare namespace sizeMe {
 
   export interface SizeMeOptions {
     monitorHeight?: boolean
-    monitorPosition?: boolean
     monitorWidth?: boolean
     noPlaceholder?: boolean
     refreshMode?: 'throttle' | 'debounce'

diff --git a/src/__tests__/with-size.test.js b/src/__tests__/with-size.test.js
@@ -22,12 +22,10 @@ describe('withSize', () => {
       return <div>No given size</div>
     }
 
-    const { width, height, position } = size
-    const p = position || {}
+    const { width, height } = size
     const result = (
       <div>
-        w: {width || 'null'}, h: {height || 'null'}, l: {p.left || 'null'}, r:{' '}
-        {p.right || 'null'}, t: {p.top || 'null'}, b: {p.bottom || 'null'}
+        w: {width || 'null'}, h: {height || 'null'}
       </div>
     )
     if (debug) {
@@ -36,11 +34,8 @@ describe('withSize', () => {
     return result
   }
 
-  const expected = ({ width, height, position }) => {
-    const p = position || {}
-    return `w: ${width || 'null'}, h: ${height || 'null'}, l: ${p.left ||
-      'null'}, r: ${p.right || 'null'}, t: ${p.top || 'null'}, b: ${p.bottom ||
-      'null'}`
+  const expected = ({ width, height }) => {
+    return `w: ${width || 'null'}, h: ${height || 'null'}`
   }
 
   const delay = (fn, time) =>
@@ -90,7 +85,7 @@ describe('withSize', () => {
         const action = () =>
           withSize({ monitorHeight: false, monitorWidth: false })
         expect(action).toThrow(
-          /You have to monitor at least one of the width, height, or position/,
+          /You have to monitor at least one of the width or height/,
         )
       })
     })
@@ -336,41 +331,6 @@ describe('withSize', () => {
     })
   })
 
-  describe('When the size event has occurred when only position is being monitored', () => {
-    it('Then expected position should be provided to the rendered component', () => {
-      const SizeAwareComponent = withSize({
-        monitorWidth: false,
-        monitorHeight: false,
-        monitorPosition: true,
-      })(SizeRender)
-
-      const mounted = mount(<SizeAwareComponent />)
-
-      // Initial render should be as expected.
-      expect(mounted.html()).toEqual(placeholderHtml)
-
-      // Get the callback for size changes.
-      const checkIfSizeChangedCallback =
-        resizeDetectorMock.listenTo.mock.calls[0][1]
-      checkIfSizeChangedCallback({
-        getBoundingClientRect: () => ({
-          width: 100,
-          height: 150,
-          left: 55,
-          right: 66,
-          top: 77,
-          bottom: 88,
-        }),
-      })
-
-      // Update should have occurred immediately.
-      mounted.update()
-      expect(mounted.text()).toEqual(
-        expected({ position: { left: 55, right: 66, top: 77, bottom: 88 } }),
-      )
-    })
-  })
-
   describe('When the size event has occurred when width and height are being monitored', () => {
     it('Then expected sizes should be provided to the rendered component', () => {
       const SizeAwareComponent = withSize({
@@ -401,7 +361,6 @@ describe('withSize', () => {
       const SizeAwareComponent = withSize({
         monitorHeight: true,
         monitorWidth: true,
-        monitorPos: true,
       })(({ otherProp }) => <div>{otherProp}</div>)
 
       const mounted = mount(<SizeAwareComponent otherProp="foo" />)
@@ -413,10 +372,6 @@ describe('withSize', () => {
         getBoundingClientRect: () => ({
           width: 100,
           height: 100,
-          left: 55,
-          right: 66,
-          top: 77,
-          bottom: 88,
         }),
       })
 

diff --git a/src/with-size.js b/src/with-size.js
@@ -15,7 +15,6 @@ const errMsg =
 const defaultConfig = {
   monitorWidth: true,
   monitorHeight: false,
-  monitorPosition: false,
   refreshRate: 16,
   refreshMode: 'throttle',
   noPlaceholder: false,
@@ -80,8 +79,7 @@ const renderWrapper = WrappedComponent => {
     } = props
 
     const noSizeData =
-      size == null ||
-      (size.width == null && size.height == null && size.position == null)
+      size == null || (size.width == null && size.height == null)
 
     const renderPlaceholder = noSizeData && !disablePlaceholder
 
@@ -129,16 +127,15 @@ function withSize(config = defaultConfig) {
   const {
     monitorWidth = defaultConfig.monitorWidth,
     monitorHeight = defaultConfig.monitorHeight,
-    monitorPosition = defaultConfig.monitorPosition,
     refreshRate = defaultConfig.refreshRate,
     refreshMode = defaultConfig.refreshMode,
     noPlaceholder = defaultConfig.noPlaceholder,
     resizeDetectorStrategy = defaultConfig.resizeDetectorStrategy,
   } = config
 
   invariant(
-    monitorWidth || monitorHeight || monitorPosition,
-    'You have to monitor at least one of the width, height, or position when using "sizeMe"',
+    monitorWidth || monitorHeight,
+    'You have to monitor at least one of the width or height when using "sizeMe"',
   )
 
   invariant(
@@ -165,7 +162,6 @@ function withSize(config = defaultConfig) {
       state = {
         width: undefined,
         height: undefined,
-        position: undefined,
       }
 
       componentDidMount() {
@@ -255,34 +251,19 @@ function withSize(config = defaultConfig) {
       hasSizeChanged = (current, next) => {
         const c = current
         const n = next
-        const cp = c.position || {}
-        const np = n.position || {}
 
         return (
           (monitorWidth && c.width !== n.width) ||
-          (monitorHeight && c.height !== n.height) ||
-          (monitorPosition &&
-            (cp.top !== np.top ||
-              cp.left !== np.left ||
-              cp.bottom !== np.bottom ||
-              cp.right !== np.right))
+          (monitorHeight && c.height !== n.height)
         )
       }
 
       checkIfSizeChanged = refreshDelayStrategy(refreshRate, el => {
-        const {
-          width,
-          height,
-          right,
-          left,
-          top,
-          bottom,
-        } = el.getBoundingClientRect()
+        const { width, height } = el.getBoundingClientRect()
 
         const next = {
           width: monitorWidth ? width : null,
           height: monitorHeight ? height : null,
-          position: monitorPosition ? { right, left, top, bottom } : null,
         }
 
         if (this.hasSizeChanged(this.strategisedGetState(), next)) {