Add callback functions to slider for when slider starts being dragged, and when it stops. (#1287)
parent
9a916e0176
commit
f5c11382cb
|
@ -81,6 +81,14 @@ export interface SliderProps extends ReactToolbox.Props {
|
||||||
* Callback function that will be invoked when the slider value changes.
|
* Callback function that will be invoked when the slider value changes.
|
||||||
*/
|
*/
|
||||||
onChange?: Function;
|
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.
|
* 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
|
* @default false
|
||||||
|
|
|
@ -18,6 +18,8 @@ const factory = (ProgressBar, Input) => {
|
||||||
max: PropTypes.number,
|
max: PropTypes.number,
|
||||||
min: PropTypes.number,
|
min: PropTypes.number,
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
|
onDragStart: PropTypes.func,
|
||||||
|
onDragStop: PropTypes.func,
|
||||||
pinned: PropTypes.bool,
|
pinned: PropTypes.bool,
|
||||||
snaps: PropTypes.bool,
|
snaps: PropTypes.bool,
|
||||||
step: PropTypes.number,
|
step: PropTypes.number,
|
||||||
|
@ -45,6 +47,8 @@ const factory = (ProgressBar, Input) => {
|
||||||
editable: false,
|
editable: false,
|
||||||
max: 100,
|
max: 100,
|
||||||
min: 0,
|
min: 0,
|
||||||
|
onDragStart: () => {},
|
||||||
|
onDragStop: () => {},
|
||||||
pinned: false,
|
pinned: false,
|
||||||
snaps: false,
|
snaps: false,
|
||||||
step: 0.01,
|
step: 0.01,
|
||||||
|
@ -73,6 +77,16 @@ const factory = (ProgressBar, Input) => {
|
||||||
return this.state.inputFocused || !nextState.inputFocused;
|
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() {
|
componentWillUnmount() {
|
||||||
window.removeEventListener('resize', this.handleResize);
|
window.removeEventListener('resize', this.handleResize);
|
||||||
events.removeEventsFromDocument(this.getMouseEventMap());
|
events.removeEventsFromDocument(this.getMouseEventMap());
|
||||||
|
|
|
@ -42,16 +42,18 @@ This component can be styled by context providing a theme with the key `RTSlider
|
||||||
|
|
||||||
| Name | Type | Default | Description|
|
| Name | Type | Default | Description|
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
| `className` | `String` | `''` | Additional class name to provide custom styling.|
|
| `className` | `String` | `''` | Additional class name to provide custom styling.|
|
||||||
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
|
| `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.|
|
| `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.|
|
| `max` | `Number` | `100` | Maximum value permitted.|
|
||||||
| `min` | `Number` | `0` | Minimum value permitted.|
|
| `min` | `Number` | `0` | Minimum value permitted.|
|
||||||
| `onChange` | `Function` | | Callback function that will be invoked when the slider value changes.|
|
| `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.|
|
| `onDragStart` | `Function` | `() => {}` | Callback function that will be invoked when the slider starts being dragged. |
|
||||||
| `snaps` | `Boolean` | `false` | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
|
| `onDragStop` | `Function` | `() => {}` | Callback function that will be invoked when the slider stops being dragged.|
|
||||||
| `step` | `Number` | `0.01` | Amount to vary the value when the knob is moved or increase/decrease is called.|
|
| `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.|
|
||||||
| `value` | `Number` | `0` | Current value of the slider.|
|
| `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
|
## Theme
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue