Add DashSlider conditional in componentWillReceiveProps

plotly · Jun 12, 2019 · 224ec57 · 224ec57
1 parent e6f8026
commit 224ec57
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js
@@ -11,13 +11,21 @@ export default class RangeSlider extends Component {
     constructor(props) {
         super(props);
         this.propsToState = this.propsToState.bind(this);
+        this.DashSlider = props.tooltip
+            ? createSliderWithTooltip(Range)
+            : Range;
     }
 
     propsToState(newProps) {
         this.setState({value: newProps.value});
     }
 
     componentWillReceiveProps(newProps) {
+        if (newProps.tooltip !== this.props.tooltip) {
+            this.DashSlider = newProps.tooltip
+                ? createSliderWithTooltip(Range)
+                : Range;
+        }
         this.propsToState(newProps);
     }
 
@@ -37,8 +45,6 @@ export default class RangeSlider extends Component {
         } = this.props;
         const value = this.state.value;
 
-        const DashSlider = tooltip ? createSliderWithTooltip(Range) : Range;
-
         let tipProps;
         if (tooltip && tooltip.always_visible) {
             /**
@@ -47,8 +53,8 @@ export default class RangeSlider extends Component {
              * assigns the new (renamed) key to the old key and deletes the old key
              */
             tipProps = Object.assign(tooltip, {
-                visible: tooltip.always_visible
-            })
+                visible: tooltip.always_visible,
+            });
             delete tipProps.always_visible;
         } else {
             tipProps = tooltip;
@@ -63,7 +69,7 @@ export default class RangeSlider extends Component {
                 className={className}
                 style={vertical ? {height: '100%'} : {}}
             >
-                <DashSlider
+                <this.DashSlider
                     onChange={value => {
                         if (updatemode === 'drag') {
                             setProps({value});

diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js
@@ -11,13 +11,21 @@ export default class Slider extends Component {
     constructor(props) {
         super(props);
         this.propsToState = this.propsToState.bind(this);
+        this.DashSlider = props.tooltip
+            ? createSliderWithTooltip(ReactSlider)
+            : ReactSlider;
     }
 
     propsToState(newProps) {
         this.setState({value: newProps.value});
     }
 
     componentWillReceiveProps(newProps) {
+        if (newProps.tooltip !== this.props.tooltip) {
+            this.DashSlider = newProps.tooltip
+                ? createSliderWithTooltip(ReactSlider)
+                : ReactSlider;
+        }
         this.propsToState(newProps);
     }
 
@@ -37,10 +45,6 @@ export default class Slider extends Component {
         } = this.props;
         const value = this.state.value;
 
-        const DashSlider = tooltip
-            ? createSliderWithTooltip(ReactSlider)
-            : ReactSlider;
-
         let tipProps;
         if (tooltip && tooltip.always_visible) {
             /**
@@ -49,8 +53,8 @@ export default class Slider extends Component {
              * assigns the new (renamed) key to the old key and deletes the old key
              */
             tipProps = Object.assign(tooltip, {
-                visible: tooltip.always_visible
-            })
+                visible: tooltip.always_visible,
+            });
             delete tipProps.always_visible;
         } else {
             tipProps = tooltip;
@@ -65,7 +69,7 @@ export default class Slider extends Component {
                 className={className}
                 style={vertical ? {height: '100%'} : {}}
             >
-                <DashSlider
+                <this.DashSlider
                     onChange={value => {
                         if (updatemode === 'drag') {
                             setProps({value});