Skip to content

Commit

Permalink
Add support for ImageBackground (ptomasroos#120)
Browse files Browse the repository at this point in the history 
* Add support for ImageBackground

Adds the possibility to pass in a `backgroundImageSource` prop. This is useful when more complex background styles are required (such as a gradient or striped background)

* Update README.md

* Update README.md

* Refactor backgroundImageSource -> imageBackgroundSource

* Revert unrelated change
  • Loading branch information
@FrikkieSnyman @ptomasroos
FrikkieSnyman authored and ptomasroos committed Jun 14, 2019
1 parent 410221b commit 660455a
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 100 deletions.
223 changes: 123 additions & 100 deletions MultiSlider.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';

import {
StyleSheet,
PanResponder,
View,
TouchableHighlight,
Platform,
Dimensions,
I18nManager
I18nManager,
ImageBackground
} from 'react-native';

import DefaultMarker from './DefaultMarker';
import DefaultLabel from './DefaultLabel';
import { createArray, valueToPosition, positionToValue } from './converters';

const ViewPropTypes = require('react-native').ViewPropTypes || ViewPropTypes;

export default class MultiSlider extends React.Component {
static defaultProps = {
values: [0],
Expand Down Expand Up @@ -47,7 +44,7 @@ export default class MultiSlider extends React.Component {
allowOverlap: false,
snapped: false,
vertical: false,
minMarkerOverlapDistance: 0,
minMarkerOverlapDistance: 0
};

constructor(props) {
Expand Down Expand Up @@ -388,20 +385,25 @@ export default class MultiSlider extends React.Component {
});
}

const leftDiff = (Dimensions.get('window').width - this.props.sliderLength) / 2;

return (
<View>
<Label
leftDiff={leftDiff}
oneMarkerValue={this.state.valueOne}
twoMarkerValue={this.state.valueTwo}
oneMarkerLeftPosition={positionOne}
twoMarkerLeftPosition={positionTwo}
/>

<View style={containerStyle}>
<View style={[styles.fullTrack, { width: sliderLength }]}>
const body = (<React.Fragment>
<View style={[styles.fullTrack, { width: sliderLength }]}>
<View
style={[
styles.track,
this.props.trackStyle,
trackOneStyle,
{ width: trackOneLength },
]}
/>
<View
style={[
styles.track,
this.props.trackStyle,
trackTwoStyle,
{ width: trackTwoLength },
]}
/>
{twoMarkers && (
<View
style={[
styles.track,
Expand All @@ -410,100 +412,121 @@ export default class MultiSlider extends React.Component {
{ width: trackOneLength },
]}
/>
)}
<View
style={[
styles.track,
this.props.trackStyle,
trackTwoStyle,
{ width: trackTwoLength },
]}
/>
{twoMarkers && (
<View
style={[
styles.track,
this.props.trackStyle,
trackTwoStyle,
{ width: trackTwoLength },
trackThreeStyle,
{ width: trackThreeLength },
]}
/>
{twoMarkers && (
<View
style={[
styles.track,
this.props.trackStyle,
trackThreeStyle,
{ width: trackThreeLength },
]}
/>
)}
)}
<View
style={[
styles.markerContainer,
markerContainerOne,
this.props.markerContainerStyle,
positionOne > sliderLength / 2 && styles.topMarkerContainer,
]}
>
<View
style={[
styles.markerContainer,
markerContainerOne,
this.props.markerContainerStyle,
positionOne > sliderLength / 2 && styles.topMarkerContainer,
]}
style={[styles.touch, touchStyle]}
ref={component => (this._markerOne = component)}
{...this._panResponderOne.panHandlers}
>
{isMarkersSeparated === false ? (
<Marker
enabled={this.props.enabledOne}
pressed={this.state.onePressed}
markerStyle={[styles.marker, this.props.markerStyle]}
pressedMarkerStyle={this.props.pressedMarkerStyle}
currentValue={this.state.valueOne}
valuePrefix={this.props.valuePrefix}
valueSuffix={this.props.valueSuffix}
/>
) : (
<MarkerLeft
enabled={this.props.enabledOne}
pressed={this.state.onePressed}
markerStyle={[styles.marker, this.props.markerStyle]}
pressedMarkerStyle={this.props.pressedMarkerStyle}
currentValue={this.state.valueOne}
valuePrefix={this.props.valuePrefix}
valueSuffix={this.props.valueSuffix}
/>
)}
</View>
</View>
{twoMarkers &&
positionOne !== this.props.sliderLength && (
<View
style={[styles.touch, touchStyle]}
ref={component => (this._markerOne = component)}
{...this._panResponderOne.panHandlers}
style={[
styles.markerContainer,
markerContainerTwo,
this.props.markerContainerStyle,
]}
>
{isMarkersSeparated === false ? (
<Marker
enabled={this.props.enabledOne}
pressed={this.state.onePressed}
markerStyle={[styles.marker, this.props.markerStyle]}
pressedMarkerStyle={this.props.pressedMarkerStyle}
currentValue={this.state.valueOne}
valuePrefix={this.props.valuePrefix}
valueSuffix={this.props.valueSuffix}
/>
) : (
<MarkerLeft
enabled={this.props.enabledOne}
pressed={this.state.onePressed}
markerStyle={[styles.marker, this.props.markerStyle]}
pressedMarkerStyle={this.props.pressedMarkerStyle}
currentValue={this.state.valueOne}
valuePrefix={this.props.valuePrefix}
valueSuffix={this.props.valueSuffix}
/>
)}
</View>
</View>
{twoMarkers &&
positionOne !== this.props.sliderLength && (
<View
style={[
styles.markerContainer,
markerContainerTwo,
this.props.markerContainerStyle,
]}
style={[styles.touch, touchStyle]}
ref={component => (this._markerTwo = component)}
{...this._panResponderTwo.panHandlers}
>
<View
style={[styles.touch, touchStyle]}
ref={component => (this._markerTwo = component)}
{...this._panResponderTwo.panHandlers}
>
{isMarkersSeparated === false ? (
<Marker
pressed={this.state.twoPressed}
markerStyle={this.props.markerStyle}
pressedMarkerStyle={this.props.pressedMarkerStyle}
currentValue={this.state.valueTwo}
enabled={this.props.enabledTwo}
valuePrefix={this.props.valuePrefix}
valueSuffix={this.props.valueSuffix}
/>
) : (
<MarkerRight
pressed={this.state.twoPressed}
markerStyle={this.props.markerStyle}
pressedMarkerStyle={this.props.pressedMarkerStyle}
currentValue={this.state.valueTwo}
enabled={this.props.enabledTwo}
valuePrefix={this.props.valuePrefix}
valueSuffix={this.props.valueSuffix}
/>
)}
</View>
{isMarkersSeparated === false ? (
<Marker
pressed={this.state.twoPressed}
markerStyle={this.props.markerStyle}
pressedMarkerStyle={this.props.pressedMarkerStyle}
currentValue={this.state.valueTwo}
enabled={this.props.enabledTwo}
valuePrefix={this.props.valuePrefix}
valueSuffix={this.props.valueSuffix}
/>
) : (
<MarkerRight
pressed={this.state.twoPressed}
markerStyle={this.props.markerStyle}
pressedMarkerStyle={this.props.pressedMarkerStyle}
currentValue={this.state.valueTwo}
enabled={this.props.enabledTwo}
valuePrefix={this.props.valuePrefix}
valueSuffix={this.props.valueSuffix}
/>
)}
</View>
)}
</View>
)}
</View>
</View>
</React.Fragment>);
const leftDiff = (Dimensions.get('window').width - this.props.sliderLength) / 2;
return (
<View>
<Label
leftDiff={leftDiff}
oneMarkerValue={this.state.valueOne}
twoMarkerValue={this.state.valueTwo}
oneMarkerLeftPosition={positionOne}
twoMarkerLeftPosition={positionTwo}
/>
{this.props.imageBackgroundSource &&
<ImageBackground source={this.props.imageBackgroundSource} style={[{width: '100%', height: '100%'}, containerStyle]}>
{body}
</ImageBackground>
}
{!this.props.imageBackgroundSource &&
<View style={containerStyle}>
{body}
</View>
}
</View>
);
}
Expand Down
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,3 +97,4 @@ Feel free to contribute to this part of the documentation.
| markerOffsetX | 0 | number | Offset first cursor. |
| markerOffsetY | 0 | number | Offset second cursor. |
| minMarkerOverlapDistance | 0 | number | if this is > 0 and allowOverlap is false, this value will determine the closest two markers can come to each other. This can be used for cases where you have two markers large cursors and you don't want them to overlap. Note that markers will still overlap at the start if starting values are too near. |
| imageBackgroundSource | undefined | string | Specifies the source as required by [ImageBackground](https://facebook.github.io/react-native/docs/imagebackground)|

0 comments on commit 660455a

Please sign in to comment.