kylefang/react-native-slider
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-slider.git synced 2026-01-12 17:42:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #119 from inthepocket/feature/right-to-left-support

Browse Source 
Feature/right to left support
This commit is contained in:
Jean Regisser
2018-07-10 09:22:04 +02:00
committed by GitHub
parent 8668a4f22a 173fb578c0
commit f331a687ef
1 changed files with 190 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
src/Slider.js
View File

@@ -1,8 +1,4 @@
'use strict'; import React, { PureComponent } from 'react';
import React, {
PureComponent,
} from "react";
import { import {
Animated, Animated,
@@ -11,13 +7,14 @@ import {
PanResponder, PanResponder,
View, View,
Easing, Easing,
ViewPropTypes ViewPropTypes,
} from "react-native"; I18nManager,
} from 'react-native';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
var TRACK_SIZE = 4; const TRACK_SIZE = 4;
var THUMB_SIZE = 20; const THUMB_SIZE = 20;
function Rect(x, y, width, height) { function Rect(x, y, width, height) {
this.x = x; this.x = x;
@@ -27,21 +24,23 @@ function Rect(x, y, width, height) {
} }
Rect.prototype.containsPoint = function(x, y) { Rect.prototype.containsPoint = function(x, y) {
return (x >= this.x return (
&& y >= this.y x >= this.x &&
&& x <= this.x + this.width y >= this.y &&
&& y <= this.y + this.height); x <= this.x + this.width &&
y <= this.y + this.height
);
}; };
var DEFAULT_ANIMATION_CONFIGS = { const DEFAULT_ANIMATION_CONFIGS = {
spring : { spring: {
friction : 7, friction: 7,
tension : 100 tension: 100,
}, },
timing : { timing: {
duration : 150, duration: 150,
easing : Easing.inOut(Easing.ease), easing: Easing.inOut(Easing.ease),
delay : 0 delay: 0,
}, },
// decay : { // This has a serious bug // decay : { // This has a serious bug
// velocity : 1, // velocity : 1,
@@ -107,9 +106,10 @@ export default class Slider extends PureComponent {
* to move it easily. * to move it easily.
* The default is {width: 40, height: 40}. * The default is {width: 40, height: 40}.
*/ */
thumbTouchSize: PropTypes.shape( thumbTouchSize: PropTypes.shape({
{width: PropTypes.number, height: PropTypes.number} width: PropTypes.number,
), height: PropTypes.number,
}),
/** /**
* Callback continuously called while the user is dragging the slider. * Callback continuously called while the user is dragging the slider.
@@ -156,17 +156,17 @@ export default class Slider extends PureComponent {
/** /**
* Set to true to animate values with default 'timing' animation type * Set to true to animate values with default 'timing' animation type
*/ */
animateTransitions : PropTypes.bool, animateTransitions: PropTypes.bool,
/** /**
* Custom Animation type. 'spring' or 'timing'. * Custom Animation type. 'spring' or 'timing'.
*/ */
animationType : PropTypes.oneOf(['spring', 'timing']), animationType: PropTypes.oneOf(['spring', 'timing']),
/** /**
* Used to configure the animation parameters. These are the same parameters in the Animated library. * Used to configure the animation parameters. These are the same parameters in the Animated library.
*/ */
animationConfig : PropTypes.object, animationConfig: PropTypes.object,
}; };
static defaultProps = { static defaultProps = {
@@ -177,15 +177,15 @@ export default class Slider extends PureComponent {
minimumTrackTintColor: '#3f3f3f', minimumTrackTintColor: '#3f3f3f',
maximumTrackTintColor: '#b3b3b3', maximumTrackTintColor: '#b3b3b3',
thumbTintColor: '#343434', thumbTintColor: '#343434',
thumbTouchSize: {width: 40, height: 40}, thumbTouchSize: { width: 40, height: 40 },
debugTouchArea: false, debugTouchArea: false,
animationType: 'timing' animationType: 'timing',
}; };
state = { state = {
containerSize: {width: 0, height: 0}, containerSize: { width: 0, height: 0 },
trackSize: {width: 0, height: 0}, trackSize: { width: 0, height: 0 },
thumbSize: {width: 0, height: 0}, thumbSize: { width: 0, height: 0 },
allMeasured: false, allMeasured: false,
value: new Animated.Value(this.props.value), value: new Animated.Value(this.props.value),
}; };
@@ -200,23 +200,22 @@ export default class Slider extends PureComponent {
onPanResponderTerminationRequest: this._handlePanResponderRequestEnd, onPanResponderTerminationRequest: this._handlePanResponderRequestEnd,
onPanResponderTerminate: this._handlePanResponderEnd, onPanResponderTerminate: this._handlePanResponderEnd,
}); });
}; }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
var newValue = nextProps.value; const newValue = nextProps.value;
if (this.props.value !== newValue) { if (this.props.value !== newValue) {
if (this.props.animateTransitions) { if (this.props.animateTransitions) {
this._setCurrentValueAnimated(newValue); this._setCurrentValueAnimated(newValue);
} } else {
else {
this._setCurrentValue(newValue); this._setCurrentValue(newValue);
} }
} }
}; }
render() { render() {
var { const {
minimumValue, minimumValue,
maximumValue, maximumValue,
minimumTrackTintColor, minimumTrackTintColor,
@@ -234,65 +233,88 @@ export default class Slider extends PureComponent {
animateTransitions, animateTransitions,
...other ...other
} = this.props; } = this.props;
var {value, containerSize, trackSize, thumbSize, allMeasured} = this.state; const {
var mainStyles = styles || defaultStyles; value,
var thumbLeft = value.interpolate({ containerSize,
trackSize,
thumbSize,
allMeasured,
} = this.state;
const mainStyles = styles || defaultStyles;
const thumbLeft = value.interpolate({
inputRange: [minimumValue, maximumValue],
outputRange: I18nManager.isRTL
? [0, -(containerSize.width - thumbSize.width)]
: [0, containerSize.width - thumbSize.width],
// extrapolate: 'clamp',
});
const minimumTrackWidth = value.interpolate({
inputRange: [minimumValue, maximumValue], inputRange: [minimumValue, maximumValue],
outputRange: [0, containerSize.width - thumbSize.width], outputRange: [0, containerSize.width - thumbSize.width],
//extrapolate: 'clamp', // extrapolate: 'clamp',
}); });
var valueVisibleStyle = {}; const valueVisibleStyle = {};
if (!allMeasured) { if (!allMeasured) {
valueVisibleStyle.opacity = 0; valueVisibleStyle.opacity = 0;
} }
var minimumTrackStyle = { const minimumTrackStyle = {
position: 'absolute', position: 'absolute',
width: Animated.add(thumbLeft, thumbSize.width / 2), width: Animated.add(minimumTrackWidth, thumbSize.width / 2),
backgroundColor: minimumTrackTintColor, backgroundColor: minimumTrackTintColor,
...valueVisibleStyle ...valueVisibleStyle,
}; };
var touchOverflowStyle = this._getTouchOverflowStyle(); const touchOverflowStyle = this._getTouchOverflowStyle();
return ( return (
<View {...other} style={[mainStyles.container, style]} onLayout={this._measureContainer}> <View
{...other}
style={[mainStyles.container, style]}
onLayout={this._measureContainer}
>
<View <View
style={[{backgroundColor: maximumTrackTintColor,}, mainStyles.track, trackStyle]} style={[
renderToHardwareTextureAndroid={true} { backgroundColor: maximumTrackTintColor },
onLayout={this._measureTrack} /> mainStyles.track,
trackStyle,
]}
renderToHardwareTextureAndroid
onLayout={this._measureTrack}
/>
<Animated.View <Animated.View
renderToHardwareTextureAndroid={true} renderToHardwareTextureAndroid
style={[mainStyles.track, trackStyle, minimumTrackStyle]} /> style={[mainStyles.track, trackStyle, minimumTrackStyle]}
/>
<Animated.View <Animated.View
onLayout={this._measureThumb} onLayout={this._measureThumb}
renderToHardwareTextureAndroid={true} renderToHardwareTextureAndroid
style={[ style={[
{backgroundColor: thumbTintColor}, { backgroundColor: thumbTintColor },
mainStyles.thumb, thumbStyle, mainStyles.thumb,
thumbStyle,
{ {
transform: [ transform: [{ translateX: thumbLeft }, { translateY: 0 }],
{ translateX: thumbLeft }, ...valueVisibleStyle,
{ translateY: 0 } },
],
...valueVisibleStyle
}
]} ]}
> >
{this._renderThumbImage()} {this._renderThumbImage()}
</Animated.View> </Animated.View>
<View <View
renderToHardwareTextureAndroid={true} renderToHardwareTextureAndroid
style={[defaultStyles.touchArea, touchOverflowStyle]} style={[defaultStyles.touchArea, touchOverflowStyle]}
{...this._panResponder.panHandlers}> {...this._panResponder.panHandlers}
{debugTouchArea === true && this._renderDebugThumbTouchRect(thumbLeft)} >
{debugTouchArea === true &&
this._renderDebugThumbTouchRect(minimumTrackWidth)}
</View> </View>
</View> </View>
); );
}; }
_getPropsForComponentUpdate(props) { _getPropsForComponentUpdate(props) {
var { const {
value, value,
onValueChange, onValueChange,
onSlidingStart, onSlidingStart,
@@ -300,23 +322,24 @@ export default class Slider extends PureComponent {
style, style,
trackStyle, trackStyle,
thumbStyle, thumbStyle,
...otherProps, ...otherProps
} = props; } = props;
return otherProps; return otherProps;
}; }
_handleStartShouldSetPanResponder = (e: Object, /*gestureState: Object*/): boolean => { _handleStartShouldSetPanResponder = (
e: Object /* gestureState: Object */,
): boolean =>
// Should we become active when the user presses down on the thumb? // Should we become active when the user presses down on the thumb?
return this._thumbHitTest(e); this._thumbHitTest(e);
};
_handleMoveShouldSetPanResponder(/*e: Object, gestureState: Object*/): boolean { _handleMoveShouldSetPanResponder(/* e: Object, gestureState: Object */): boolean {
// Should we become active when the user moves a touch over the thumb? // Should we become active when the user moves a touch over the thumb?
return false; return false;
}; }
_handlePanResponderGrant = (/*e: Object, gestureState: Object*/) => { _handlePanResponderGrant = (/* e: Object, gestureState: Object */) => {
this._previousLeft = this._getThumbLeft(this._getCurrentValue()); this._previousLeft = this._getThumbLeft(this._getCurrentValue());
this._fireChangeEvent('onSlidingStart'); this._fireChangeEvent('onSlidingStart');
}; };
@@ -333,7 +356,7 @@ export default class Slider extends PureComponent {
_handlePanResponderRequestEnd(e: Object, gestureState: Object) { _handlePanResponderRequestEnd(e: Object, gestureState: Object) {
// Should we allow another component to take over this pan? // Should we allow another component to take over this pan?
return false; return false;
}; }
_handlePanResponderEnd = (e: Object, gestureState: Object) => { _handlePanResponderEnd = (e: Object, gestureState: Object) => {
if (this.props.disabled) { if (this.props.disabled) {
@@ -357,12 +380,16 @@ export default class Slider extends PureComponent {
}; };
_handleMeasure = (name: string, x: Object) => { _handleMeasure = (name: string, x: Object) => {
var {width, height} = x.nativeEvent.layout; const { width, height } = x.nativeEvent.layout;
var size = {width: width, height: height}; const size = { width, height };
var storeName = `_${name}`; const storeName = `_${name}`;
var currentSize = this[storeName]; const currentSize = this[storeName];
if (currentSize && width === currentSize.width && height === currentSize.height) { if (
currentSize &&
width === currentSize.width &&
height === currentSize.height
) {
return; return;
} }
this[storeName] = size; this[storeName] = size;
@@ -373,89 +400,109 @@ export default class Slider extends PureComponent {
trackSize: this._trackSize, trackSize: this._trackSize,
thumbSize: this._thumbSize, thumbSize: this._thumbSize,
allMeasured: true, allMeasured: true,
}) });
} }
}; };
_getRatio = (value: number) => { _getRatio = (value: number) =>
return (value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue); (value - this.props.minimumValue) /
}; (this.props.maximumValue - this.props.minimumValue);
_getThumbLeft = (value: number) => { _getThumbLeft = (value: number) => {
var ratio = this._getRatio(value); const nonRtlRatio = this._getRatio(value);
return ratio * (this.state.containerSize.width - this.state.thumbSize.width); const ratio = I18nManager.isRTL ? 1 - nonRtlRatio : nonRtlRatio;
return (
ratio * (this.state.containerSize.width - this.state.thumbSize.width)
);
}; };
_getValue = (gestureState: Object) => { _getValue = (gestureState: Object) => {
var length = this.state.containerSize.width - this.state.thumbSize.width; const length = this.state.containerSize.width - this.state.thumbSize.width;
var thumbLeft = this._previousLeft + gestureState.dx; const thumbLeft = this._previousLeft + gestureState.dx;
var ratio = thumbLeft / length; const nonRtlRatio = thumbLeft / length;
const ratio = I18nManager.isRTL ? 1 - nonRtlRatio : nonRtlRatio;
if (this.props.step) { if (this.props.step) {
return Math.max(this.props.minimumValue, return Math.max(
Math.min(this.props.maximumValue, this.props.minimumValue,
this.props.minimumValue + Math.round(ratio * (this.props.maximumValue - this.props.minimumValue) / this.props.step) * this.props.step Math.min(
) this.props.maximumValue,
); this.props.minimumValue +
} else { Math.round(
return Math.max(this.props.minimumValue, ratio *
Math.min(this.props.maximumValue, (this.props.maximumValue - this.props.minimumValue) /
ratio * (this.props.maximumValue - this.props.minimumValue) + this.props.minimumValue this.props.step,
) ) *
this.props.step,
),
); );
} }
return Math.max(
this.props.minimumValue,
Math.min(
this.props.maximumValue,
ratio * (this.props.maximumValue - this.props.minimumValue) +
this.props.minimumValue,
),
);
}; };
_getCurrentValue = () => { _getCurrentValue = () => this.state.value.__getValue();
return this.state.value.__getValue();
};
_setCurrentValue = (value: number) => { _setCurrentValue = (value: number) => {
this.state.value.setValue(value); this.state.value.setValue(value);
}; };
_setCurrentValueAnimated = (value: number) => { _setCurrentValueAnimated = (value: number) => {
var animationType = this.props.animationType; const animationType = this.props.animationType;
var animationConfig = Object.assign( const animationConfig = Object.assign(
{}, {},
DEFAULT_ANIMATION_CONFIGS[animationType], DEFAULT_ANIMATION_CONFIGS[animationType],
this.props.animationConfig, this.props.animationConfig,
{toValue : value} {
toValue: value,
},
); );
Animated[animationType](this.state.value, animationConfig).start(); Animated[animationType](this.state.value, animationConfig).start();
}; };
_fireChangeEvent = (event) => { _fireChangeEvent = event => {
if (this.props[event]) { if (this.props[event]) {
this.props[event](this._getCurrentValue()); this.props[event](this._getCurrentValue());
} }
}; };
_getTouchOverflowSize = () => { _getTouchOverflowSize = () => {
var state = this.state; const state = this.state;
var props = this.props; const props = this.props;
var size = {}; const size = {};
if (state.allMeasured === true) { if (state.allMeasured === true) {
size.width = Math.max(0, props.thumbTouchSize.width - state.thumbSize.width); size.width = Math.max(
size.height = Math.max(0, props.thumbTouchSize.height - state.containerSize.height); 0,
props.thumbTouchSize.width - state.thumbSize.width,
);
size.height = Math.max(
0,
props.thumbTouchSize.height - state.containerSize.height,
);
} }
return size; return size;
}; };
_getTouchOverflowStyle = () => { _getTouchOverflowStyle = () => {
var {width, height} = this._getTouchOverflowSize(); const { width, height } = this._getTouchOverflowSize();
var touchOverflowStyle = {}; const touchOverflowStyle = {};
if (width !== undefined && height !== undefined) { if (width !== undefined && height !== undefined) {
var verticalMargin = -height / 2; const verticalMargin = -height / 2;
touchOverflowStyle.marginTop = verticalMargin; touchOverflowStyle.marginTop = verticalMargin;
touchOverflowStyle.marginBottom = verticalMargin; touchOverflowStyle.marginBottom = verticalMargin;
var horizontalMargin = -width / 2; const horizontalMargin = -width / 2;
touchOverflowStyle.marginLeft = horizontalMargin; touchOverflowStyle.marginLeft = horizontalMargin;
touchOverflowStyle.marginRight = horizontalMargin; touchOverflowStyle.marginRight = horizontalMargin;
} }
@@ -469,27 +516,33 @@ export default class Slider extends PureComponent {
}; };
_thumbHitTest = (e: Object) => { _thumbHitTest = (e: Object) => {
var nativeEvent = e.nativeEvent; const nativeEvent = e.nativeEvent;
var thumbTouchRect = this._getThumbTouchRect(); const thumbTouchRect = this._getThumbTouchRect();
return thumbTouchRect.containsPoint(nativeEvent.locationX, nativeEvent.locationY); return thumbTouchRect.containsPoint(
}; nativeEvent.locationX,
nativeEvent.locationY,
_getThumbTouchRect = () => {
var state = this.state;
var props = this.props;
var touchOverflowSize = this._getTouchOverflowSize();
return new Rect(
touchOverflowSize.width / 2 + this._getThumbLeft(this._getCurrentValue()) + (state.thumbSize.width - props.thumbTouchSize.width) / 2,
touchOverflowSize.height / 2 + (state.containerSize.height - props.thumbTouchSize.height) / 2,
props.thumbTouchSize.width,
props.thumbTouchSize.height
); );
}; };
_renderDebugThumbTouchRect = (thumbLeft) => { _getThumbTouchRect = () => {
var thumbTouchRect = this._getThumbTouchRect(); const state = this.state;
var positionStyle = { const props = this.props;
const touchOverflowSize = this._getTouchOverflowSize();
return new Rect(
touchOverflowSize.width / 2 +
this._getThumbLeft(this._getCurrentValue()) +
(state.thumbSize.width - props.thumbTouchSize.width) / 2,
touchOverflowSize.height / 2 +
(state.containerSize.height - props.thumbTouchSize.height) / 2,
props.thumbTouchSize.width,
props.thumbTouchSize.height,
);
};
_renderDebugThumbTouchRect = thumbLeft => {
const thumbTouchRect = this._getThumbTouchRect();
const positionStyle = {
left: thumbLeft, left: thumbLeft,
top: thumbTouchRect.y, top: thumbTouchRect.y,
width: thumbTouchRect.width, width: thumbTouchRect.width,
@@ -499,13 +552,13 @@ export default class Slider extends PureComponent {
return ( return (
<Animated.View <Animated.View
style={[defaultStyles.debugThumbTouchArea, positionStyle]} style={[defaultStyles.debugThumbTouchArea, positionStyle]}
pointerEvents='none' pointerEvents="none"
/> />
); );
}; };
_renderThumbImage = () => { _renderThumbImage = () => {
var {thumbImage} = this.props; const { thumbImage } = this.props;
if (!thumbImage) return; if (!thumbImage) return;
@@ -540,5 +593,5 @@ var defaultStyles = StyleSheet.create({
position: 'absolute', position: 'absolute',
backgroundColor: 'green', backgroundColor: 'green',
opacity: 0.5, opacity: 0.5,
} },
}); });