feat: add ResizeObserver to handle slider resize programatically

zillow · Mar 4, 2022 · 95bd172 · 95bd172
1 parent d1cbe4e
commit 95bd172
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 34 deletions.
diff --git a/src/components/ReactSlider/ReactSlider.jsx b/src/components/ReactSlider/ReactSlider.jsx
@@ -372,6 +372,9 @@ class ReactSlider extends React.Component {
             zIndices.push(i);
         }
 
+        this.resizeObserver = null;
+        this.resizeElementRef = React.createRef();
+
         this.state = {
             index: -1,
             upperBound: 0,
@@ -383,7 +386,8 @@ class ReactSlider extends React.Component {
 
     componentDidMount() {
         if (typeof window !== 'undefined') {
-            window.addEventListener('resize', this.handleResize);
+            this.resizeObserver = new ResizeObserver(this.handleResize);
+            this.resizeObserver.observe(this.resizeElementRef.current);
             this.resize();
         }
     }
@@ -416,8 +420,8 @@ class ReactSlider extends React.Component {
 
     componentWillUnmount() {
         this.clearPendingResizeTimeouts();
-        if (typeof window !== 'undefined') {
-            window.removeEventListener('resize', this.handleResize);
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
         }
     }
 
@@ -1118,6 +1122,7 @@ class ReactSlider extends React.Component {
             {
                 ref: r => {
                     this.slider = r;
+                    this.resizeElementRef.current = r;
                 },
                 style: { position: 'relative' },
                 className: this.props.className + (this.props.disabled ? ' disabled' : ''),

diff --git a/src/components/ReactSlider/ReactSlider.md b/src/components/ReactSlider/ReactSlider.md
@@ -177,8 +177,7 @@ const Track = (props, state) => <StyledTrack {...props} index={state.index} />;
 />
 ```
 
-In some case you may need to programatically tell the slider to resize, for example if the parent container is resizing independently of the window.
-Set a [ref](https://reactjs.org/docs/refs-and-the-dom.html) on the slider component, and call `resize`.
+In some case you may need to programmatically tell the slider to resize, for example if the parent container is resizing independently of the window. Since `v2.0.0` this is handled internally by `ResizeObserver`.
 
 ```jsx
 import styled from 'styled-components';
@@ -218,35 +217,15 @@ const StyledContainer = styled.div`
     padding-right: 8px;
 `;
 
-const ResizableSlider = () => {
-    const containerRef = React.useRef();
-    const sliderRef = React.useRef();
-    React.useEffect(() => {
-        if (typeof ResizeObserver === 'undefined') {
-            return;
-        }
-
-        const resizeObserver = new ResizeObserver(() => {
-            sliderRef.current.resize();
-        });
-        resizeObserver.observe(containerRef.current);
-
-        return () => {
-            resizeObserver.unobserve(containerRef.current);
-        };
-    });
-
-    return (
-        <StyledContainer ref={containerRef}>
-            <StyledSlider
-                ref={sliderRef}
-                defaultValue={[50, 75]}
-                renderTrack={Track}
-                renderThumb={Thumb}
-            />
-        </StyledContainer>
-    );
-};
+const ResizableSlider = () => (
+    <StyledContainer>
+        <StyledSlider
+            defaultValue={[50, 75]}
+            renderTrack={Track}
+            renderThumb={Thumb}
+        />
+    </StyledContainer>
+);
 
 <ResizableSlider />
 ```

diff --git a/src/components/ReactSlider/__tests__/ReactSlider.test.js b/src/components/ReactSlider/__tests__/ReactSlider.test.js
@@ -2,6 +2,14 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import ReactSlider from '../ReactSlider';
 
+window.ResizeObserver =
+    window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+        disconnect: jest.fn(),
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+    }));
+
 describe('<ReactSlider>', () => {
     it('can render', () => {
         const tree = renderer.create(<ReactSlider />).toJSON();