Update changelog.

Author: T4rk1n

components/dash-core-components/src/components/RangeSlider.react.js

@@ -134,6 +134,20 @@ RangeSlider.propTypes = {
          * Custom style for the tooltip.
          */
         style: PropTypes.object,
+        /**
+         * Reference to a function in the `window.dccFunctions` namespace.
+         * This can be added in a scrip in the asset folder.
+         *
+         * For example, in `assets/tooltip.js`:
+         * ```
+         * window.dccFunctions = window.dccFunctions || {};
+         * window.dccFunctions.multByTen = function(value) {
+         *     return value * 10;
+         * }
+         * ```
+         * Then in the component `tooltip={'transform': 'multByTen'
+         */
+        transform: PropTypes.string,
     }),
 
     /**

components/dash-core-components/src/components/Slider.react.js

@@ -116,6 +116,20 @@ Slider.propTypes = {
          * Custom style for the tooltip.
          */
         style: PropTypes.object,
+        /**
+         * Reference to a function in the `window.dccFunctions` namespace.
+         * This can be added in a scrip in the asset folder.
+         *
+         * For example, in `assets/tooltip.js`:
+         * ```
+         * window.dccFunctions = window.dccFunctions || {};
+         * window.dccFunctions.multByTen = function(value) {
+         *     return value * 10;
+         * }
+         * ```
+         * Then in the component `tooltip={'transform': 'multByTen'
+         */
+        transform: PropTypes.string,
     }),
 
     /**

components/dash-core-components/src/fragments/RangeSlider.react.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {assoc, pick, isNil, pipe, dissoc} from 'ramda';
+import {assoc, pick, isNil, pipe, omit} from 'ramda';
 import {Range, createSliderWithTooltip} from 'rc-slider';
 import computeSliderStyle from '../utils/computeSliderStyle';
 
@@ -11,7 +11,10 @@ import {
     setUndefined,
 } from '../utils/computeSliderMarkers';
 import {propTypes, defaultProps} from '../components/RangeSlider.react';
-import {formatSliderTooltip} from '../utils/formatSliderTooltip';
+import {
+    formatSliderTooltip,
+    transformSliderTooltip,
+} from '../utils/formatSliderTooltip';
 
 const sliderProps = [
     'min',
@@ -82,19 +85,23 @@ export default class RangeSlider extends Component {
              */
             tipProps = pipe(
                 assoc('visible', tooltip.always_visible),
-                dissoc('always_visible'),
-                dissoc('format'),
-                dissoc('style')
+                omit(['always_visible', 'format', 'style', 'transform'])
             )(tooltip);
-            if (tooltip.format || tooltip.style) {
-                tipFormatter = tipValue => (
-                    <div style={tooltip.style}>
-                        {formatSliderTooltip(
-                            tooltip.format || '{value}',
-                            tipValue
-                        )}
-                    </div>
-                );
+            if (tooltip.format || tooltip.style || tooltip.transform) {
+                tipFormatter = tipValue => {
+                    let t = tipValue;
+                    if (tooltip.transform) {
+                        t = transformSliderTooltip(tooltip.transform, tipValue);
+                    }
+                    return (
+                        <div style={tooltip.style}>
+                            {formatSliderTooltip(
+                                tooltip.format || '{value}',
+                                t
+                            )}
+                        </div>
+                    );
+                };
             }
         }
 

components/dash-core-components/src/fragments/Slider.react.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import ReactSlider, {createSliderWithTooltip} from 'rc-slider';
-import {assoc, isNil, pick, pipe, dissoc} from 'ramda';
+import {assoc, isNil, pick, pipe, omit} from 'ramda';
 import computeSliderStyle from '../utils/computeSliderStyle';
 
 import 'rc-slider/assets/index.css';
@@ -11,7 +11,10 @@ import {
     setUndefined,
 } from '../utils/computeSliderMarkers';
 import {propTypes, defaultProps} from '../components/Slider.react';
-import {formatSliderTooltip} from '../utils/formatSliderTooltip';
+import {
+    formatSliderTooltip,
+    transformSliderTooltip,
+} from '../utils/formatSliderTooltip';
 
 const sliderProps = [
     'min',
@@ -82,19 +85,23 @@ export default class Slider extends Component {
              */
             tipProps = pipe(
                 assoc('visible', tooltip.always_visible),
-                dissoc('always_visible'),
-                dissoc('format'),
-                dissoc('style')
+                omit(['always_visible', 'format', 'style', 'transform'])
             )(tooltip);
-            if (tooltip.format || tooltip.style) {
-                tipFormatter = tipValue => (
-                    <div style={tooltip.style}>
-                        {formatSliderTooltip(
-                            tooltip.format || '{value}',
-                            tipValue
-                        )}
-                    </div>
-                );
+            if (tooltip.format || tooltip.style || tooltip.transform) {
+                tipFormatter = tipValue => {
+                    let t = tipValue;
+                    if (tooltip.transform) {
+                        t = transformSliderTooltip(tooltip.transform, tipValue);
+                    }
+                    return (
+                        <div style={tooltip.style}>
+                            {formatSliderTooltip(
+                                tooltip.format || '{value}',
+                                t
+                            )}
+                        </div>
+                    );
+                };
             }
         }
 

components/dash-core-components/src/utils/formatSliderTooltip.js

@@ -1,5 +1,19 @@
-import {replace} from 'ramda';
+import {replace, path, split, concat, pipe} from 'ramda';
 
 export const formatSliderTooltip = (template, value) => {
     return replace('{value}', value, template);
 };
+
+export const transformSliderTooltip = (funcName, value) => {
+    const func = pipe(
+        split('.'),
+        s => concat(['dccFunctions'], s),
+        s => path(s, window)
+    )(funcName);
+    if (!func) {
+        throw new Error(
+            `Invalid func for slider tooltip transform: ${funcName}`
+        );
+    }
+    return func(value);
+};

components/dash-core-components/tests/integration/sliders/assets/transform.js

@@ -0,0 +1,4 @@
+window.dccFunctions = window.dccFunctions || {};
+window.dccFunctions.transformTooltip = function(value) {
+    return "Transformed " + value
+}

components/dash-core-components/tests/integration/sliders/test_sliders.py

@@ -583,6 +583,12 @@ def test_sls016_sliders_format_tooltips(dash_dcc):
                 id="range-slider",
                 tooltip={"format": "Custom tooltip: {value}", "always_visible": True},
             ),
+            dcc.Slider(
+                min=20,
+                max=100,
+                id="slider-transform",
+                tooltip={"always_visible": True, "transform": "transformTooltip"},
+            ),
         ],
         style={"padding": "12px", "marginTop": "48px"},
     )
@@ -603,6 +609,9 @@ def test_sls016_sliders_format_tooltips(dash_dcc):
     dash_dcc.wait_for_style_to_equal(
         "#slider .rc-slider-tooltip-inner > div", "padding", "8px"
     )
+    dash_dcc.wait_for_text_to_equal(
+        "#slider-transform .rc-slider-tooltip-content", "Transformed 20"
+    )
 
     dash_dcc.percy_snapshot("sliders-format-tooltips")