From 4a1c16d81643e116c0a365e2d814563ccbafa330 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Mon, 3 Jun 2019 18:21:29 -0400 Subject: [PATCH 01/15] Bump rc-slider minor version This is so we can use the `visible` prop in `tipProps`, introduced in `rc-slider` 8.6.1 (undocumented in the `rc-slider` repo's HISTORY.md) See https://github.com/react-component/slider/pull/383 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 107bf1a2d..0c2bd605e 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "moment": "^2.20.1", "prop-types": "^15.6.0", "ramda": "^0.24.1", - "rc-slider": "^8.3.1", + "rc-slider": "^8.6.11", "react-addons-shallow-compare": "^15.6.0", "react-dates": "^20.1.0", "react-docgen": "^3.0.0", From c920c02e342ad026340f3926cfbf8362bc96abbe Mon Sep 17 00:00:00 2001 From: wbrgss Date: Mon, 3 Jun 2019 18:25:10 -0400 Subject: [PATCH 02/15] Add tooltip (basic `tipProps` alias) to Slider and RangeSlider Adds support for hoverable and persistent (always visible) tooltips --- src/components/RangeSlider.react.js | 58 ++++++++++++++++++----------- src/components/Slider.react.js | 20 +++++++++- 2 files changed, 55 insertions(+), 23 deletions(-) diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js index 4352554ce..2651373eb 100644 --- a/src/components/RangeSlider.react.js +++ b/src/components/RangeSlider.react.js @@ -1,7 +1,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import {Range} from 'rc-slider'; +import {Range, createSliderWithTooltip} from 'rc-slider'; /** * A double slider with two handles. @@ -31,21 +31,26 @@ export default class RangeSlider extends Component { id, loading_state, setProps, + tooltip, updatemode, vertical, } = this.props; const value = this.state.value; + const DashSlider = tooltip + ? createSliderWithTooltip(Range) + : Range; + return (
- { if (updatemode === 'drag') { setProps({value}); @@ -58,6 +63,7 @@ export default class RangeSlider extends Component { setProps({value}); } }} + tipProps={tooltip} value={value} {...omit( ['className', 'value', 'setProps', 'updatemode'], @@ -152,6 +158,34 @@ RangeSlider.propTypes = { */ pushable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), + /** + * Object that holds optional tooltip parameters + */ + tooltip: PropTypes.shape({ + /** + * Determines whether tooltips should always be visible + */ + visible: PropTypes.bool, + }), + + /** + * Object that holds the loading state object coming from dash-renderer + */ + loading_state: PropTypes.shape({ + /** + * Determines if the component is loading or not + */ + is_loading: PropTypes.bool, + /** + * Holds which property is loading + */ + prop_name: PropTypes.string, + /** + * Holds the name of the component that is loading + */ + component_name: PropTypes.string, + }), + /** * Value by which increments or decrements are made */ @@ -177,24 +211,6 @@ RangeSlider.propTypes = { * Dash-assigned callback that gets fired when the value changes. */ setProps: PropTypes.func, - - /** - * Object that holds the loading state object coming from dash-renderer - */ - loading_state: PropTypes.shape({ - /** - * Determines if the component is loading or not - */ - is_loading: PropTypes.bool, - /** - * Holds which property is loading - */ - prop_name: PropTypes.string, - /** - * Holds the name of the component that is loading - */ - component_name: PropTypes.string, - }), }; RangeSlider.defaultProps = { diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js index 6397f0d3a..efc4204f9 100644 --- a/src/components/Slider.react.js +++ b/src/components/Slider.react.js @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import ReactSlider from 'rc-slider'; +import ReactSlider, {createSliderWithTooltip} from 'rc-slider'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; import './css/rc-slider@6.1.2.css'; @@ -31,11 +31,16 @@ export default class Slider extends Component { id, loading_state, setProps, + tooltip, updatemode, vertical, } = this.props; const value = this.state.value; + const DashSlider = tooltip + ? createSliderWithTooltip(ReactSlider) + : ReactSlider; + return (
- { if (updatemode === 'drag') { setProps({value}); @@ -58,6 +63,7 @@ export default class Slider extends Component { setProps({value}); } }} + tipProps={tooltip} value={value} {...omit( ['className', 'setProps', 'updatemode', 'value'], @@ -133,6 +139,16 @@ Slider.propTypes = { */ max: PropTypes.number, + /** + * Object that holds optional tooltip parameters + */ + tooltip: PropTypes.shape({ + /** + * Determines whether tooltips should always be visible + */ + visible: PropTypes.bool, + }), + /** * Value by which increments or decrements are made */ From 6ffe732a185d47e9eab47c488c7abfb6c0cbdd8f Mon Sep 17 00:00:00 2001 From: wbrgss Date: Mon, 3 Jun 2019 18:27:40 -0400 Subject: [PATCH 03/15] Remove test css class + undo loading_state propTypes reshuffle --- src/components/RangeSlider.react.js | 38 ++++++++++++++--------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js index 2651373eb..521ed7543 100644 --- a/src/components/RangeSlider.react.js +++ b/src/components/RangeSlider.react.js @@ -47,7 +47,7 @@ export default class RangeSlider extends Component { data-dash-is-loading={ (loading_state && loading_state.is_loading) || undefined } - className={className + ' desu'} + className={className} style={vertical ? {height: '100%'} : {}} > Date: Tue, 4 Jun 2019 15:10:14 -0400 Subject: [PATCH 04/15] Add propTypes variations template --- src/components/Slider.react.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js index efc4204f9..fcb287574 100644 --- a/src/components/Slider.react.js +++ b/src/components/Slider.react.js @@ -142,12 +142,22 @@ Slider.propTypes = { /** * Object that holds optional tooltip parameters */ - tooltip: PropTypes.shape({ + tooltip: PropTypes.oneOfType([ + + // TODO: variations on PropTypes.exact + /** * Determines whether tooltips should always be visible */ - visible: PropTypes.bool, - }), + PropTypes.exact({ + visible: PropTypes.oneOf(['visible', 'hover']) + }), + + PropTypes.exact([ + visible: PropTypes.oneOf(['visible', 'hover']), + position: PropTypes.oneOf(['top', 'hover']) + ]) + ]), /** * Value by which increments or decrements are made From 90e2fd159a3d41528991858793b1b0ba637bd1c6 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Sat, 8 Jun 2019 14:51:29 -0400 Subject: [PATCH 05/15] Put `createSliderWithTooltip` in constructor --- src/components/RangeSlider.react.js | 36 ++++++++++++++++++++--------- src/components/Slider.react.js | 34 +++++++++++++++------------ 2 files changed, 44 insertions(+), 26 deletions(-) diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js index 521ed7543..07417426e 100644 --- a/src/components/RangeSlider.react.js +++ b/src/components/RangeSlider.react.js @@ -11,6 +11,9 @@ 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) { @@ -37,10 +40,6 @@ export default class RangeSlider extends Component { } = this.props; const value = this.state.value; - const DashSlider = tooltip - ? createSliderWithTooltip(Range) - : Range; - return (
- { if (updatemode === 'drag') { setProps({value}); @@ -158,15 +157,30 @@ RangeSlider.propTypes = { */ pushable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), - /** - * Object that holds optional tooltip parameters - */ - tooltip: PropTypes.shape({ + tooltip: PropTypes.oneOfType([ /** * Determines whether tooltips should always be visible + * (as opposed to the default, visible on hover) */ - visible: PropTypes.bool, - }), + PropTypes.exact({ + visible: PropTypes.oneOf(['visible', 'hover']).isRequired + }), + + /** + * Determines the position of tooltips + * See https://github.com/react-component/tooltip#api + * top/bottom{*} sets the _origin_ of the tooltip, so e.g. `topLeft` will + * in reality appear to be on the top right of the handle + */ + PropTypes.exact({ + position: PropTypes.oneOf(['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']).isRequired + }), + + PropTypes.exact({ + visible: PropTypes.oneOf(['visible', 'hover']), + position: PropTypes.oneOf(['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']) + }) + ]), /** * Value by which increments or decrements are made diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js index fcb287574..0e9dfe434 100644 --- a/src/components/Slider.react.js +++ b/src/components/Slider.react.js @@ -11,6 +11,9 @@ export default class Slider extends Component { constructor(props) { super(props); this.propsToState = this.propsToState.bind(this); + this.DashSlider = props.tooltip + ? createSliderWithTooltip(Range) + : Range; } propsToState(newProps) { @@ -37,10 +40,6 @@ export default class Slider extends Component { } = this.props; const value = this.state.value; - const DashSlider = tooltip - ? createSliderWithTooltip(ReactSlider) - : ReactSlider; - return (
- { if (updatemode === 'drag') { setProps({value}); @@ -139,24 +138,29 @@ Slider.propTypes = { */ max: PropTypes.number, - /** - * Object that holds optional tooltip parameters - */ tooltip: PropTypes.oneOfType([ - - // TODO: variations on PropTypes.exact - /** * Determines whether tooltips should always be visible + * (as opposed to the default, visible on hover) + */ + PropTypes.exact({ + visible: PropTypes.oneOf(['visible', 'hover']).isRequired + }), + + /** + * Determines the position of tooltips + * See https://github.com/react-component/tooltip#api + * top/bottom{*} sets the _origin_ of the tooltip, so e.g. `topLeft` will + * in reality appear to be on the top right of the handle */ PropTypes.exact({ - visible: PropTypes.oneOf(['visible', 'hover']) + position: PropTypes.oneOf(['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']).isRequired }), - PropTypes.exact([ + PropTypes.exact({ visible: PropTypes.oneOf(['visible', 'hover']), - position: PropTypes.oneOf(['top', 'hover']) - ]) + position: PropTypes.oneOf(['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']) + }) ]), /** From fd7c768df5aa4d154902b3a6b752e31c081509d0 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Sat, 8 Jun 2019 15:09:46 -0400 Subject: [PATCH 06/15] Change 'visible' tooltip propType to bool --- src/components/RangeSlider.react.js | 32 ++++++++++++++++++++++------- src/components/Slider.react.js | 30 +++++++++++++++++++++------ 2 files changed, 49 insertions(+), 13 deletions(-) diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js index 07417426e..1a274783f 100644 --- a/src/components/RangeSlider.react.js +++ b/src/components/RangeSlider.react.js @@ -12,8 +12,8 @@ export default class RangeSlider extends Component { super(props); this.propsToState = this.propsToState.bind(this); this.DashSlider = props.tooltip - ? createSliderWithTooltip(Range) - : Range; + ? createSliderWithTooltip(Range) + : Range; } propsToState(newProps) { @@ -163,7 +163,7 @@ RangeSlider.propTypes = { * (as opposed to the default, visible on hover) */ PropTypes.exact({ - visible: PropTypes.oneOf(['visible', 'hover']).isRequired + visible: PropTypes.bool.isRequired, }), /** @@ -173,13 +173,31 @@ RangeSlider.propTypes = { * in reality appear to be on the top right of the handle */ PropTypes.exact({ - position: PropTypes.oneOf(['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']).isRequired + position: PropTypes.oneOf([ + 'left', + 'right', + 'top', + 'bottom', + 'topLeft', + 'topRight', + 'bottomLeft', + 'bottomRight', + ]).isRequired, }), PropTypes.exact({ - visible: PropTypes.oneOf(['visible', 'hover']), - position: PropTypes.oneOf(['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']) - }) + visible: PropTypes.bool, + position: PropTypes.oneOf([ + 'left', + 'right', + 'top', + 'bottom', + 'topLeft', + 'topRight', + 'bottomLeft', + 'bottomRight', + ]), + }), ]), /** diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js index 0e9dfe434..2ab63f72a 100644 --- a/src/components/Slider.react.js +++ b/src/components/Slider.react.js @@ -12,8 +12,8 @@ export default class Slider extends Component { super(props); this.propsToState = this.propsToState.bind(this); this.DashSlider = props.tooltip - ? createSliderWithTooltip(Range) - : Range; + ? createSliderWithTooltip(Range) + : Range; } propsToState(newProps) { @@ -144,7 +144,7 @@ Slider.propTypes = { * (as opposed to the default, visible on hover) */ PropTypes.exact({ - visible: PropTypes.oneOf(['visible', 'hover']).isRequired + visible: PropTypes.bool.isRequired, }), /** @@ -154,13 +154,31 @@ Slider.propTypes = { * in reality appear to be on the top right of the handle */ PropTypes.exact({ - position: PropTypes.oneOf(['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']).isRequired + position: PropTypes.oneOf([ + 'left', + 'right', + 'top', + 'bottom', + 'topLeft', + 'topRight', + 'bottomLeft', + 'bottomRight', + ]).isRequired, }), PropTypes.exact({ visible: PropTypes.oneOf(['visible', 'hover']), - position: PropTypes.oneOf(['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']) - }) + position: PropTypes.oneOf([ + 'left', + 'right', + 'top', + 'bottom', + 'topLeft', + 'topRight', + 'bottomLeft', + 'bottomRight', + ]), + }), ]), /** From 01a203e108bd4118db90b41a6c2bc15f984cd931 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Sat, 8 Jun 2019 15:36:55 -0400 Subject: [PATCH 07/15] Fix Slider.react.js :spaghetti: from RangeSlider --- src/components/Slider.react.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js index 2ab63f72a..584455491 100644 --- a/src/components/Slider.react.js +++ b/src/components/Slider.react.js @@ -12,8 +12,8 @@ export default class Slider extends Component { super(props); this.propsToState = this.propsToState.bind(this); this.DashSlider = props.tooltip - ? createSliderWithTooltip(Range) - : Range; + ? createSliderWithTooltip(ReactSlider) + : ReactSlider; } propsToState(newProps) { From c2e16d31f83b6e36e236a59f06b20f9b2e702407 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Mon, 10 Jun 2019 00:55:21 -0400 Subject: [PATCH 08/15] Slider tooltip propTypes: `oneOfType[]` -> single `exact` --- src/components/RangeSlider.react.js | 63 +++++++++++------------------ src/components/Slider.react.js | 63 +++++++++++------------------ 2 files changed, 46 insertions(+), 80 deletions(-) diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js index 1a274783f..1bd73aad8 100644 --- a/src/components/RangeSlider.react.js +++ b/src/components/RangeSlider.react.js @@ -157,48 +157,31 @@ RangeSlider.propTypes = { */ pushable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), - tooltip: PropTypes.oneOfType([ - /** - * Determines whether tooltips should always be visible - * (as opposed to the default, visible on hover) - */ - PropTypes.exact({ - visible: PropTypes.bool.isRequired, - }), + tooltip: PropTypes.exact({ + + /** + * Determines whether tooltips should always be visible + * (as opposed to the default, visible on hover) + */ + visible: PropTypes.bool, /** - * Determines the position of tooltips - * See https://github.com/react-component/tooltip#api - * top/bottom{*} sets the _origin_ of the tooltip, so e.g. `topLeft` will - * in reality appear to be on the top right of the handle - */ - PropTypes.exact({ - position: PropTypes.oneOf([ - 'left', - 'right', - 'top', - 'bottom', - 'topLeft', - 'topRight', - 'bottomLeft', - 'bottomRight', - ]).isRequired, - }), - - PropTypes.exact({ - visible: PropTypes.bool, - position: PropTypes.oneOf([ - 'left', - 'right', - 'top', - 'bottom', - 'topLeft', - 'topRight', - 'bottomLeft', - 'bottomRight', - ]), - }), - ]), + * Determines the position of tooltips + * See https://github.com/react-component/tooltip#api + * top/bottom{*} sets the _origin_ of the tooltip, so e.g. `topLeft` will + * in reality appear to be on the top right of the handle + */ + position: PropTypes.oneOf([ + 'left', + 'right', + 'top', + 'bottom', + 'topLeft', + 'topRight', + 'bottomLeft', + 'bottomRight', + ]), + }), /** * Value by which increments or decrements are made diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js index 584455491..41f0b6996 100644 --- a/src/components/Slider.react.js +++ b/src/components/Slider.react.js @@ -138,48 +138,31 @@ Slider.propTypes = { */ max: PropTypes.number, - tooltip: PropTypes.oneOfType([ - /** - * Determines whether tooltips should always be visible - * (as opposed to the default, visible on hover) - */ - PropTypes.exact({ - visible: PropTypes.bool.isRequired, - }), + tooltip: PropTypes.exact({ + + /** + * Determines whether tooltips should always be visible + * (as opposed to the default, visible on hover) + */ + visible: PropTypes.bool, /** - * Determines the position of tooltips - * See https://github.com/react-component/tooltip#api - * top/bottom{*} sets the _origin_ of the tooltip, so e.g. `topLeft` will - * in reality appear to be on the top right of the handle - */ - PropTypes.exact({ - position: PropTypes.oneOf([ - 'left', - 'right', - 'top', - 'bottom', - 'topLeft', - 'topRight', - 'bottomLeft', - 'bottomRight', - ]).isRequired, - }), - - PropTypes.exact({ - visible: PropTypes.oneOf(['visible', 'hover']), - position: PropTypes.oneOf([ - 'left', - 'right', - 'top', - 'bottom', - 'topLeft', - 'topRight', - 'bottomLeft', - 'bottomRight', - ]), - }), - ]), + * Determines the position of tooltips + * See https://github.com/react-component/tooltip#api + * top/bottom{*} sets the _origin_ of the tooltip, so e.g. `topLeft` will + * in reality appear to be on the top right of the handle + */ + position: PropTypes.oneOf([ + 'left', + 'right', + 'top', + 'bottom', + 'topLeft', + 'topRight', + 'bottomLeft', + 'bottomRight', + ]), + }), /** * Value by which increments or decrements are made From fb755c96ec2ff7c8713eef6c3b2b6d794a30b886 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Mon, 10 Jun 2019 00:59:14 -0400 Subject: [PATCH 09/15] Move Slider instantiation from constructor to render method --- src/components/RangeSlider.react.js | 9 +++++---- src/components/Slider.react.js | 9 +++++---- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js index 1bd73aad8..3343cdbdb 100644 --- a/src/components/RangeSlider.react.js +++ b/src/components/RangeSlider.react.js @@ -11,9 +11,6 @@ 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) { @@ -40,6 +37,10 @@ export default class RangeSlider extends Component { } = this.props; const value = this.state.value; + const DashSlider = tooltip + ? createSliderWithTooltip(Range) + : Range; + return (
- { if (updatemode === 'drag') { setProps({value}); diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js index 41f0b6996..4f278b6e5 100644 --- a/src/components/Slider.react.js +++ b/src/components/Slider.react.js @@ -11,9 +11,6 @@ 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) { @@ -40,6 +37,10 @@ export default class Slider extends Component { } = this.props; const value = this.state.value; + const DashSlider = tooltip + ? createSliderWithTooltip(ReactSlider) + : ReactSlider; + return (
- { if (updatemode === 'drag') { setProps({value}); From 37470e6836e68e0b795658a5e8aeb3a3c013002c Mon Sep 17 00:00:00 2001 From: wbrgss Date: Mon, 10 Jun 2019 01:02:36 -0400 Subject: [PATCH 10/15] Spacing --- src/components/RangeSlider.react.js | 1 - src/components/Slider.react.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js index 3343cdbdb..2b62ad347 100644 --- a/src/components/RangeSlider.react.js +++ b/src/components/RangeSlider.react.js @@ -159,7 +159,6 @@ RangeSlider.propTypes = { pushable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), tooltip: PropTypes.exact({ - /** * Determines whether tooltips should always be visible * (as opposed to the default, visible on hover) diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js index 4f278b6e5..120401457 100644 --- a/src/components/Slider.react.js +++ b/src/components/Slider.react.js @@ -140,7 +140,6 @@ Slider.propTypes = { max: PropTypes.number, tooltip: PropTypes.exact({ - /** * Determines whether tooltips should always be visible * (as opposed to the default, visible on hover) From 592a5fb65f5dad97b934477236b3e6cae9211046 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Tue, 11 Jun 2019 12:54:17 -0400 Subject: [PATCH 11/15] Add changelog entry for Slider/RangeSlider tooltips --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 621981113..0798a0568 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,9 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] +### Added +- Ability to add tooltips to `Slider` and `RangeSlider`, which can be visible always or on hover. Tooltips also take a position argument. [#564] + ### Fixed - Fixed `min_date_allowed` and `max_date_allowed` bug in `DatePickerRange` [#551]https://github.com/plotly/dash-core-components/issues/551) - Fixed unwanted `resize()` calls on unmounted `Graph`s [#534](https://github.com/plotly/dash-core-components/issues/534) From 11292cbc00e5669bded9e824448b1675d26bced2 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Tue, 11 Jun 2019 13:37:14 -0400 Subject: [PATCH 12/15] Fix markdown syntax + parens --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0798a0568..16f514e1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] ### Added -- Ability to add tooltips to `Slider` and `RangeSlider`, which can be visible always or on hover. Tooltips also take a position argument. [#564] +- Ability to add tooltips to `Slider` and `RangeSlider`, which can be visible always or on hover. Tooltips also take a position argument. [#564](https://github.com/plotly/dash-core-components/pull/564) ### Fixed - Fixed `min_date_allowed` and `max_date_allowed` bug in `DatePickerRange` [#551]https://github.com/plotly/dash-core-components/issues/551) From 0c08d7963a4bd1f8e306e5e5ae80a0c1ffc2a91b Mon Sep 17 00:00:00 2001 From: wbrgss Date: Tue, 11 Jun 2019 13:51:27 -0400 Subject: [PATCH 13/15] Prettier (comment + ternary formatting) --- src/components/RangeSlider.react.js | 22 ++++++++++------------ src/components/Slider.react.js | 18 +++++++++--------- 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js index 2b62ad347..54accb351 100644 --- a/src/components/RangeSlider.react.js +++ b/src/components/RangeSlider.react.js @@ -37,9 +37,7 @@ export default class RangeSlider extends Component { } = this.props; const value = this.state.value; - const DashSlider = tooltip - ? createSliderWithTooltip(Range) - : Range; + const DashSlider = tooltip ? createSliderWithTooltip(Range) : Range; return (
Date: Tue, 11 Jun 2019 22:10:08 -0400 Subject: [PATCH 14/15] `visible` -> `always_visible`; `position` -> `placement` --- src/components/RangeSlider.react.js | 23 +++++++++++++++++++---- src/components/Slider.react.js | 21 ++++++++++++++++++--- 2 files changed, 37 insertions(+), 7 deletions(-) diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js index 54accb351..23350e13a 100644 --- a/src/components/RangeSlider.react.js +++ b/src/components/RangeSlider.react.js @@ -39,6 +39,21 @@ export default class RangeSlider extends Component { const DashSlider = tooltip ? createSliderWithTooltip(Range) : Range; + 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 = Object.assign(tooltip, { + visible: tooltip.always_visible + }) + delete tipProps.always_visible; + } else { + tipProps = tooltip; + } + return (
`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 = Object.assign(tooltip, { + visible: tooltip.always_visible + }) + delete tipProps.always_visible; + } else { + tipProps = tooltip; + } + return (
Date: Wed, 12 Jun 2019 14:51:10 -0400 Subject: [PATCH 15/15] Add DashSlider conditional in componentWillReceiveProps --- src/components/RangeSlider.react.js | 16 +++++++++++----- src/components/Slider.react.js | 18 +++++++++++------- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js index 23350e13a..629809152 100644 --- a/src/components/RangeSlider.react.js +++ b/src/components/RangeSlider.react.js @@ -11,6 +11,9 @@ 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) { @@ -18,6 +21,11 @@ export default class RangeSlider extends Component { } 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%'} : {}} > - { if (updatemode === 'drag') { setProps({value}); diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js index c9d47d050..760740cdc 100644 --- a/src/components/Slider.react.js +++ b/src/components/Slider.react.js @@ -11,6 +11,9 @@ 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) { @@ -18,6 +21,11 @@ export default class Slider extends Component { } 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%'} : {}} > - { if (updatemode === 'drag') { setProps({value});