react-slider - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

CHANGELOG.md

@@ -5,2 +5,11 @@ # Change Log
 
+## [1.0.7](https://github.com/zillow/react-slider/compare/v1.0.6...v1.0.7) (2020-05-17)
+
+
+### Bug Fixes
+
+* make sure resize is called after the DOM is ready when re-rendering ([46f616e](https://github.com/zillow/react-slider/commit/46f616e1ed71f60611c377015fceaea2bf52a3ca)), closes [#136](https://github.com/zillow/react-slider/issues/136)
+
+
+
 ## [1.0.6](https://github.com/zillow/react-slider/compare/v1.0.5...v1.0.6) (2020-05-10)
@@ -7,0 +16,0 @@

es/components/ReactSlider/ReactSlider.js

@@ -403,6 +403,8 @@ var _jsxFileName = "/Users/brians/git/react-slider/src/components/ReactSlider/ReactSlider.jsx";
       this.state.value.length = value.length;
-    } // If an upperBound has not yet been determined (due to the component being hidden
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    // If an upperBound has not yet been determined (due to the component being hidden
     // during the mount event, or during the last resize), then calculate it now
-
-
     if (this.state.upperBound === 0) {
@@ -506,2 +508,7 @@ this.resize();
         thumb = this.thumb0;
+
+    if (!slider || !thumb) {
+      return;
+    }
+
     var sizeKey = this.sizeKey(); // For the slider size, we want to use the client width/height, excluding any borders
@@ -516,7 +523,12 @@
     var thumbSize = thumbRect[sizeKey.replace('client', '').toLowerCase()];
-    this.setState({
-      upperBound: sliderSize - thumbSize,
-      sliderLength: Math.abs(sliderMax - sliderMin),
-      thumbSize: thumbSize
-    });
+    var upperBound = sliderSize - thumbSize;
+    var sliderLength = Math.abs(sliderMax - sliderMin);
+
+    if (this.state.upperBound !== upperBound || this.state.sliderLength !== sliderLength || this.state.thumbSize !== thumbSize) {
+      this.setState({
+        upperBound: upperBound,
+        sliderLength: sliderLength,
+        thumbSize: thumbSize
+      });
+    }
   } // calculates the offset of a thumb in pixels based on its value.
@@ -523,0 +535,0 @@ ;

es/components/ReactSlider/ReactSlider.md

@@ -112,1 +112,75 @@ Single slider, similar to `<input type="range" defaultValue={0} />`
 ```
+
+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`.
+
+```jsx
+import styled from 'styled-components';
+
+const StyledSlider = styled(ReactSlider)`
+    width: 100%;
+    height: 25px;
+`;
+
+const StyledThumb = styled.div`
+    height: 25px;
+    line-height: 25px;
+    width: 25px;
+    text-align: center;
+    background-color: #000;
+    color: #fff;
+    border-radius: 50%;
+    cursor: grab;
+`;
+
+const Thumb = (props, state) => <StyledThumb {...props}>{state.valueNow}</StyledThumb>;
+
+const StyledTrack = styled.div`
+    top: 0;
+    bottom: 0;
+    background: ${props => (props.index === 2 ? '#f00' : props.index === 1 ? '#0f0' : '#ddd')};
+    border-radius: 999px;
+`;
+
+const Track = (props, state) => <StyledTrack {...props} index={state.index} />;
+
+const StyledContainer = styled.div`
+    resize: horizontal;
+    overflow: auto;
+    width: 50%;
+    max-width: 100%;
+    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>
+    );
+};
+
+<ResizableSlider />
+```

lib/components/ReactSlider/ReactSlider.js

@@ -409,6 +409,8 @@ "use strict";
       this.state.value.length = value.length;
-    } // If an upperBound has not yet been determined (due to the component being hidden
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    // If an upperBound has not yet been determined (due to the component being hidden
     // during the mount event, or during the last resize), then calculate it now
-
-
     if (this.state.upperBound === 0) {
@@ -512,2 +514,7 @@ this.resize();
         thumb = this.thumb0;
+
+    if (!slider || !thumb) {
+      return;
+    }
+
     var sizeKey = this.sizeKey(); // For the slider size, we want to use the client width/height, excluding any borders
@@ -522,7 +529,12 @@
     var thumbSize = thumbRect[sizeKey.replace('client', '').toLowerCase()];
-    this.setState({
-      upperBound: sliderSize - thumbSize,
-      sliderLength: Math.abs(sliderMax - sliderMin),
-      thumbSize: thumbSize
-    });
+    var upperBound = sliderSize - thumbSize;
+    var sliderLength = Math.abs(sliderMax - sliderMin);
+
+    if (this.state.upperBound !== upperBound || this.state.sliderLength !== sliderLength || this.state.thumbSize !== thumbSize) {
+      this.setState({
+        upperBound: upperBound,
+        sliderLength: sliderLength,
+        thumbSize: thumbSize
+      });
+    }
   } // calculates the offset of a thumb in pixels based on its value.
@@ -529,0 +541,0 @@ ;

lib/components/ReactSlider/ReactSlider.md

@@ -112,1 +112,75 @@ Single slider, similar to `<input type="range" defaultValue={0} />`
 ```
+
+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`.
+
+```jsx
+import styled from 'styled-components';
+
+const StyledSlider = styled(ReactSlider)`
+    width: 100%;
+    height: 25px;
+`;
+
+const StyledThumb = styled.div`
+    height: 25px;
+    line-height: 25px;
+    width: 25px;
+    text-align: center;
+    background-color: #000;
+    color: #fff;
+    border-radius: 50%;
+    cursor: grab;
+`;
+
+const Thumb = (props, state) => <StyledThumb {...props}>{state.valueNow}</StyledThumb>;
+
+const StyledTrack = styled.div`
+    top: 0;
+    bottom: 0;
+    background: ${props => (props.index === 2 ? '#f00' : props.index === 1 ? '#0f0' : '#ddd')};
+    border-radius: 999px;
+`;
+
+const Track = (props, state) => <StyledTrack {...props} index={state.index} />;
+
+const StyledContainer = styled.div`
+    resize: horizontal;
+    overflow: auto;
+    width: 50%;
+    max-width: 100%;
+    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>
+    );
+};
+
+<ResizableSlider />
+```

package.json

 {
   "name": "react-slider",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Slider component for React",
@@ -5,0 +5,0 @@ "main": "lib/components/ReactSlider/ReactSlider.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108424

increased by4.62%

Lines of code

2257

increased by0.89%

No dependency changes