vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Add callback functions to slider for when slider starts being dragged, and when it stops. (#1287)

old
Izak Filmalter 2017-04-02 08:09:11 -04:00 committed by Javi Velasco
parent 9a916e0176
commit f5c11382cb
3 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/slider/Slider.d.ts vendored
View File

@ -81,6 +81,14 @@ export interface SliderProps extends ReactToolbox.Props {
* Callback function that will be invoked when the slider value changes.
*/
onChange?: Function;
/**
* Callback function that will be invoked when the slider starts being dragged.
*/
onDragStart?: Function;
/**
* Callback function that will be invoked when the slider stops being dragged.
*/
onDragStop?: Function;
/**
* If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
* @default false

14
components/slider/Slider.js
View File

@ -18,6 +18,8 @@ const factory = (ProgressBar, Input) => {
max: PropTypes.number,
min: PropTypes.number,
onChange: PropTypes.func,
onDragStart: PropTypes.func,
onDragStop: PropTypes.func,
pinned: PropTypes.bool,
snaps: PropTypes.bool,
step: PropTypes.number,
@ -45,6 +47,8 @@ const factory = (ProgressBar, Input) => {
editable: false,
max: 100,
min: 0,
onDragStart: () => {},
onDragStop: () => {},
pinned: false,
snaps: false,
step: 0.01,
@ -73,6 +77,16 @@ const factory = (ProgressBar, Input) => {
return this.state.inputFocused || !nextState.inputFocused;
}
componentWillUpdate(nextProps, nextState) {
if (nextState.pressed !== this.state.pressed) {
if (nextState.pressed) {
this.props.onDragStart();
} else {
this.props.onDragStop();
}
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
events.removeEventsFromDocument(this.getMouseEventMap());

22
components/slider/readme.md
View File

@ -42,16 +42,18 @@ This component can be styled by context providing a theme with the key `RTSlider
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `className` | `String` | `''` | Additional class name to provide custom styling.|
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
| `editable` | `Boolean` | `false` | If true, an input is shown and the user can set the slider from keyboard value.|
| `max` | `Number` | `100` | Maximum value permitted.|
| `min` | `Number` | `0` | Minimum value permitted.|
| `onChange` | `Function` | | Callback function that will be invoked when the slider value changes.|
| `pinned` | `Boolean` | `false` | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.|
| `snaps` | `Boolean` | `false` | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
| `step` | `Number` | `0.01` | Amount to vary the value when the knob is moved or increase/decrease is called.|
| `value` | `Number` | `0` | Current value of the slider.|
| `className` | `String` | `''` | Additional class name to provide custom styling.|
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
| `editable` | `Boolean` | `false` | If true, an input is shown and the user can set the slider from keyboard value.|
| `max` | `Number` | `100` | Maximum value permitted.|
| `min` | `Number` | `0` | Minimum value permitted.|
| `onChange` | `Function` | | Callback function that will be invoked when the slider value changes.|
| `onDragStart` | `Function` | `() => {}` | Callback function that will be invoked when the slider starts being dragged. |
| `onDragStop` | `Function` | `() => {}` | Callback function that will be invoked when the slider stops being dragged.|
| `pinned` | `Boolean` | `false` | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.|
| `snaps` | `Boolean` | `false` | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
| `step` | `Number` | `0.01` | Amount to vary the value when the knob is moved or increase/decrease is called.|
| `value` | `Number` | `0` | Current value of the slider.|
## Theme