This repository has been archived by the owner on Jun 3, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 144
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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 react-component/slider#383 * Add tooltip (basic `tipProps` alias) to Slider and RangeSlider Adds support for hoverable and persistent (always visible) tooltips * Remove test css class + undo loading_state propTypes reshuffle * Add propTypes variations template * Put `createSliderWithTooltip` in constructor * Change 'visible' tooltip propType to bool * Fix Slider.react.js 🍝 from RangeSlider * Slider tooltip propTypes: `oneOfType[]` -> single `exact` * Move Slider instantiation from constructor to render method * Spacing * Add changelog entry for Slider/RangeSlider tooltips * Fix markdown syntax + parens * Prettier (comment + ternary formatting) * `visible` -> `always_visible`; `position` -> `placement` * Add DashSlider conditional in componentWillReceiveProps
- Loading branch information
Showing
4 changed files
with
108 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/[email protected]'; | ||
|
|
@@ -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); | ||
| } | ||
|
|
||
|
|
@@ -31,11 +39,27 @@ export default class Slider extends Component { | |
| id, | ||
| loading_state, | ||
| setProps, | ||
| tooltip, | ||
| updatemode, | ||
| vertical, | ||
| } = 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 = Object.assign(tooltip, { | ||
| visible: tooltip.always_visible, | ||
| }); | ||
| delete tipProps.always_visible; | ||
| } else { | ||
| tipProps = tooltip; | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| id={id} | ||
|
|
@@ -45,7 +69,7 @@ export default class Slider extends Component { | |
| className={className} | ||
| style={vertical ? {height: '100%'} : {}} | ||
| > | ||
| <ReactSlider | ||
| <this.DashSlider | ||
| onChange={value => { | ||
| if (updatemode === 'drag') { | ||
| setProps({value}); | ||
|
|
@@ -58,6 +82,7 @@ export default class Slider extends Component { | |
| setProps({value}); | ||
| } | ||
| }} | ||
| tipProps={tooltip} | ||
| value={value} | ||
| {...omit( | ||
| ['className', 'setProps', 'updatemode', 'value'], | ||
|
|
@@ -133,6 +158,31 @@ Slider.propTypes = { | |
| */ | ||
| max: PropTypes.number, | ||
|
|
||
| tooltip: PropTypes.exact({ | ||
| /** | ||
| * Determines whether tooltips should always be visible | ||
| * (as opposed to the default, visible on hover) | ||
| */ | ||
| always_visible: PropTypes.bool, | ||
|
|
||
| /** | ||
| * Determines the placement 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 | ||
| */ | ||
| placement: PropTypes.oneOf([ | ||
| 'left', | ||
| 'right', | ||
| 'top', | ||
| 'bottom', | ||
| 'topLeft', | ||
| 'topRight', | ||
| 'bottomLeft', | ||
| 'bottomRight', | ||
| ]), | ||
| }), | ||
|
|
||
| /** | ||
| * Value by which increments or decrements are made | ||
| */ | ||
|
|
||