|
5 | 5 | PanResponder,
|
6 | 6 | View,
|
7 | 7 | Platform,
|
8 |
| - Dimensions, |
9 | 8 | I18nManager,
|
10 | 9 | ImageBackground,
|
11 | 10 | } from 'react-native';
|
@@ -45,7 +44,8 @@ export default class MultiSlider extends React.Component {
|
45 | 44 | snapped: false,
|
46 | 45 | vertical: false,
|
47 | 46 | minMarkerOverlapDistance: 0,
|
48 |
| - testID: undefined |
| 47 | + testID: undefined, |
| 48 | + renderTrack: undefined, |
49 | 49 | };
|
50 | 50 |
|
51 | 51 | constructor(props) {
|
@@ -380,6 +380,7 @@ export default class MultiSlider extends React.Component {
|
380 | 380 | sliderLength,
|
381 | 381 | markerOffsetX,
|
382 | 382 | markerOffsetY,
|
| 383 | + renderTrack, |
383 | 384 | } = this.props;
|
384 | 385 | const twoMarkers = this.props.values.length == 2; // when allowOverlap, positionTwo could be 0, identified as string '0' and throwing 'RawText 0 needs to be wrapped in <Text>' error
|
385 | 386 |
|
@@ -432,23 +433,48 @@ export default class MultiSlider extends React.Component {
|
432 | 433 | const body = (
|
433 | 434 | <React.Fragment>
|
434 | 435 | <View style={[styles.fullTrack, { width: sliderLength }]}>
|
435 |
| - <View |
436 |
| - style={[ |
437 |
| - styles.track, |
438 |
| - this.props.trackStyle, |
439 |
| - trackOneStyle, |
440 |
| - { width: trackOneLength }, |
441 |
| - ]} |
442 |
| - /> |
443 |
| - <View |
444 |
| - style={[ |
445 |
| - styles.track, |
446 |
| - this.props.trackStyle, |
447 |
| - trackTwoStyle, |
448 |
| - { width: trackTwoLength }, |
449 |
| - ]} |
450 |
| - {...(twoMarkers ? this._panResponderBetween.panHandlers : {})} |
451 |
| - /> |
| 436 | + {renderTrack ? ( |
| 437 | + renderTrack({ |
| 438 | + selectedStyle: !twoMarkers, |
| 439 | + style: [ |
| 440 | + styles.track, |
| 441 | + this.props.trackStyle, |
| 442 | + trackOneStyle, |
| 443 | + { width: trackOneLength }, |
| 444 | + ], |
| 445 | + }) |
| 446 | + ) : ( |
| 447 | + <View |
| 448 | + style={[ |
| 449 | + styles.track, |
| 450 | + this.props.trackStyle, |
| 451 | + trackOneStyle, |
| 452 | + { width: trackOneLength }, |
| 453 | + ]} |
| 454 | + /> |
| 455 | + )} |
| 456 | + {renderTrack ? ( |
| 457 | + renderTrack({ |
| 458 | + selectedStyle: !!twoMarkers, |
| 459 | + style: [ |
| 460 | + styles.track, |
| 461 | + this.props.trackStyle, |
| 462 | + trackTwoStyle, |
| 463 | + { width: trackTwoLength }, |
| 464 | + ], |
| 465 | + ...(twoMarkers ? this._panResponderBetween.panHandlers : {}), |
| 466 | + }) |
| 467 | + ) : ( |
| 468 | + <View |
| 469 | + style={[ |
| 470 | + styles.track, |
| 471 | + this.props.trackStyle, |
| 472 | + trackTwoStyle, |
| 473 | + { width: trackTwoLength }, |
| 474 | + ]} |
| 475 | + {...(twoMarkers ? this._panResponderBetween.panHandlers : {})} |
| 476 | + /> |
| 477 | + )} |
452 | 478 | {twoMarkers && (
|
453 | 479 | <View
|
454 | 480 | style={[
|
|
0 commit comments