Async Slider and RangeSlider (plotly#739)

Author: Marc-Andre-Rivet

CHANGELOG.md

@@ -3,10 +3,14 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
-
 ### Changed
+- [#739](https://github.com/plotly/dash-core-components/pull/739) Async Slider and RangeSlider
 - [#729](https://github.com/plotly/dash-core-components/pull/729) Handle case where dcc fails to load when used inside an iframe with a sandbox attribute that only has allow-scripts
 
+### Fixed
+- [#730](https://github.com/plotly/dash-core-components/pull/730) Fixed bug in which input components with type `number` did not correctly update their values.
+- [#731](https://github.com/plotly/dash-core-components/pull/731) Fixed bug where non-clearable dropdowns could still be cleared by typing backspace
+
 ## [1.7.1] - 2020-01-15 (JS-only)
 ### Fixed
 - [#734](https://github.com/plotly/dash-core-components/pull/734) Fix JS-facing release bug where `Plotly.js` was listed in `devDependencies` instead of `dependencies`
@@ -19,10 +23,6 @@ This project adheres to [Semantic Versioning](http://semver.org/).
   - Added responsiveness on graph parent element resize (previously only worked on window.resize)
   - Added new `dash-graph--pending` class to dcc.Graph, present while resizing, (re-)rendering, loading
 
-### Fixed
-- [#730](https://github.com/plotly/dash-core-components/pull/730) Fixed bug in which input components with type `number` did not correctly update their values.
-- [#731](https://github.com/plotly/dash-core-components/pull/731) Fixed bug where non-clearable dropdowns could still be cleared by typing backspace
-
 ### Changed
 - [#723](https://github.com/plotly/dash-core-components/pull/723) Changed npm package content to allow source code inclusion from other projects
 - [#725](https://github.com/plotly/dash-core-components/pull/725) Improve async graph performance by parallelizing resource fetching instead of fetching sequentially

dash_core_components_base/__init__.py

@@ -45,6 +45,7 @@
     'graph',
     'highlight',
     'markdown',
+    'slider',
     'upload'
 ]
 

package-lock.json

@@ -41,15 +41,15 @@
     "plotly.js": "1.52.1",
     "prop-types": "^15.6.0",
     "ramda": "^0.26.1",
-    "rc-slider": "^8.6.11",
+    "rc-slider": "^9.1.0",
     "react-addons-shallow-compare": "^15.6.0",
     "react-dates": "^20.1.0",
     "react-docgen": "^3.0.0",
     "react-dropzone": "^4.1.2",
     "react-markdown": "^4.0.6",
+    "react-resize-detector": "^4.2.1",
     "react-select-fast-filter-options": "^0.2.3",
     "react-virtualized-select": "^3.1.3",
-    "react-resize-detector": "^4.2.1",
     "uniqid": "^5.0.3"
   },
   "devDependencies": {

package.json

@@ -1,111 +1,19 @@
-import React, {Component} from 'react';
+import React, {Component, lazy, Suspense} from 'react';
 import PropTypes from 'prop-types';
-import {assoc, omit, pickBy} from 'ramda';
-import {Range, createSliderWithTooltip} from 'rc-slider';
-import computeSliderStyle from '../utils/computeSliderStyle';
+import rangeSlider from '../utils/LazyLoader/rangeSlider';
+
+const RealRangeSlider = lazy(rangeSlider);
 
 /**
  * A double slider with two handles.
  * Used for specifying a range of numerical values.
  */
 export default class RangeSlider extends Component {
-    constructor(props) {
-        super(props);
-        this.propsToState = this.propsToState.bind(this);
-        this.DashSlider = props.tooltip
-            ? createSliderWithTooltip(Range)
-            : Range;
-        this._computeStyle = computeSliderStyle();
-    }
-
-    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);
-    }
-
-    componentWillMount() {
-        this.propsToState(this.props);
-    }
-
     render() {
-        const {
-            className,
-            id,
-            loading_state,
-            setProps,
-            tooltip,
-            updatemode,
-            vertical,
-            verticalHeight,
-        } = this.props;
-        const value = this.state.value;
-
-        let tipProps;
-        if (tooltip && tooltip.always_visible) {
-            /**
-             * clone `tooltip` but with renamed key `always_visible` -> `visible`
-             * the rc-tooltip API uses `visible`, but `always_visible is more semantic
-             * assigns the new (renamed) key to the old key and deletes the old key
-             */
-            tipProps = assoc('visible', tooltip.always_visible, tooltip);
-            delete tipProps.always_visible;
-        } else {
-            tipProps = tooltip;
-        }
-
-        const truncatedMarks =
-            this.props.marks &&
-            pickBy(
-                (k, mark) => mark >= this.props.min && mark <= this.props.max,
-                this.props.marks
-            );
-
         return (
-            <div
-                id={id}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
-                className={className}
-                style={this._computeStyle(vertical, verticalHeight, tooltip)}
-            >
-                <this.DashSlider
-                    onChange={value => {
-                        if (updatemode === 'drag') {
-                            setProps({value});
-                        } else {
-                            this.setState({value});
-                        }
-                    }}
-                    onAfterChange={value => {
-                        if (updatemode === 'mouseup') {
-                            setProps({value});
-                        }
-                    }}
-                    tipProps={tipProps}
-                    value={value}
-                    marks={truncatedMarks}
-                    {...omit(
-                        [
-                            'className',
-                            'value',
-                            'setProps',
-                            'marks',
-                            'updatemode',
-                            'verticalHeight',
-                        ],
-                        this.props
-                    )}
-                />
-            </div>
+            <Suspense fallback={null}>
+                <RealRangeSlider {...this.props} />
+            </Suspense>
         );
     }
 }
@@ -306,3 +214,6 @@ RangeSlider.defaultProps = {
     persistence_type: 'local',
     verticalHeight: 400,
 };
+
+export const propTypes = RangeSlider.propTypes;
+export const defaultProps = RangeSlider.defaultProps;