From 81874468b5029c4c3ebb5eb13c2b288601d88de5 Mon Sep 17 00:00:00 2001 From: Lode Vanhove Date: Fri, 27 Apr 2018 00:30:02 +0200 Subject: [PATCH 1/2] Add propper RTL support --- src/Slider.js | 267 ++++++++++++++++++++++++-------------------------- 1 file changed, 126 insertions(+), 141 deletions(-) diff --git a/src/Slider.js b/src/Slider.js index 37deee53..552af3b6 100644 --- a/src/Slider.js +++ b/src/Slider.js @@ -1,23 +1,11 @@ -'use strict'; - -import React, { - PureComponent, -} from "react"; - -import { - Animated, - Image, - StyleSheet, - PanResponder, - View, - Easing, - ViewPropTypes -} from "react-native"; +import React, { PureComponent } from 'react'; + +import { Animated, Image, StyleSheet, PanResponder, View, Easing, ViewPropTypes, I18nManager } from 'react-native'; import PropTypes from 'prop-types'; -var TRACK_SIZE = 4; -var THUMB_SIZE = 20; +const TRACK_SIZE = 4; +const THUMB_SIZE = 20; function Rect(x, y, width, height) { this.x = x; @@ -26,22 +14,19 @@ function Rect(x, y, width, height) { this.height = height; } -Rect.prototype.containsPoint = function(x, y) { - return (x >= this.x - && y >= this.y - && x <= this.x + this.width - && y <= this.y + this.height); +Rect.prototype.containsPoint = function (x, y) { + return x >= this.x && y >= this.y && x <= this.x + this.width && y <= this.y + this.height; }; -var DEFAULT_ANIMATION_CONFIGS = { - spring : { - friction : 7, - tension : 100 +const DEFAULT_ANIMATION_CONFIGS = { + spring: { + friction: 7, + tension: 100, }, - timing : { - duration : 150, - easing : Easing.inOut(Easing.ease), - delay : 0 + timing: { + duration: 150, + easing: Easing.inOut(Easing.ease), + delay: 0, }, // decay : { // This has a serious bug // velocity : 1, @@ -107,9 +92,7 @@ export default class Slider extends PureComponent { * to move it easily. * The default is {width: 40, height: 40}. */ - thumbTouchSize: PropTypes.shape( - {width: PropTypes.number, height: PropTypes.number} - ), + thumbTouchSize: PropTypes.shape({ width: PropTypes.number, height: PropTypes.number }), /** * Callback continuously called while the user is dragging the slider. @@ -156,17 +139,17 @@ export default class Slider extends PureComponent { /** * Set to true to animate values with default 'timing' animation type */ - animateTransitions : PropTypes.bool, + animateTransitions: PropTypes.bool, /** * 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. */ - animationConfig : PropTypes.object, + animationConfig: PropTypes.object, }; static defaultProps = { @@ -177,15 +160,15 @@ export default class Slider extends PureComponent { minimumTrackTintColor: '#3f3f3f', maximumTrackTintColor: '#b3b3b3', thumbTintColor: '#343434', - thumbTouchSize: {width: 40, height: 40}, + thumbTouchSize: { width: 40, height: 40 }, debugTouchArea: false, - animationType: 'timing' + animationType: 'timing', }; state = { - containerSize: {width: 0, height: 0}, - trackSize: {width: 0, height: 0}, - thumbSize: {width: 0, height: 0}, + containerSize: { width: 0, height: 0 }, + trackSize: { width: 0, height: 0 }, + thumbSize: { width: 0, height: 0 }, allMeasured: false, value: new Animated.Value(this.props.value), }; @@ -200,23 +183,22 @@ export default class Slider extends PureComponent { onPanResponderTerminationRequest: this._handlePanResponderRequestEnd, onPanResponderTerminate: this._handlePanResponderEnd, }); - }; + } componentWillReceiveProps(nextProps) { - var newValue = nextProps.value; + const newValue = nextProps.value; if (this.props.value !== newValue) { if (this.props.animateTransitions) { this._setCurrentValueAnimated(newValue); - } - else { + } else { this._setCurrentValue(newValue); } } - }; + } render() { - var { + const { minimumValue, maximumValue, minimumTrackTintColor, @@ -230,65 +212,72 @@ export default class Slider extends PureComponent { debugTouchArea, ...other } = this.props; - var {value, containerSize, trackSize, thumbSize, allMeasured} = this.state; - var mainStyles = styles || defaultStyles; - var thumbLeft = value.interpolate({ + const { + value, 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], outputRange: [0, containerSize.width - thumbSize.width], - //extrapolate: 'clamp', + // extrapolate: 'clamp', }); - var valueVisibleStyle = {}; + const valueVisibleStyle = {}; if (!allMeasured) { valueVisibleStyle.opacity = 0; } - var minimumTrackStyle = { + const minimumTrackStyle = { position: 'absolute', - width: Animated.add(thumbLeft, thumbSize.width / 2), + width: Animated.add(minimumTrackWidth, thumbSize.width / 2), backgroundColor: minimumTrackTintColor, - ...valueVisibleStyle + ...valueVisibleStyle, }; - var touchOverflowStyle = this._getTouchOverflowStyle(); + const touchOverflowStyle = this._getTouchOverflowStyle(); return ( - + style={[{ backgroundColor: maximumTrackTintColor }, mainStyles.track, trackStyle]} + renderToHardwareTextureAndroid + onLayout={this._measureTrack} + /> + {this._renderThumbImage()} - {debugTouchArea === true && this._renderDebugThumbTouchRect(thumbLeft)} + {...this._panResponder.panHandlers} + > + {debugTouchArea === true && this._renderDebugThumbTouchRect(minimumTrackWidth)} ); - }; + } _getPropsForComponentUpdate(props) { - var { + const { value, onValueChange, onSlidingStart, @@ -296,23 +285,22 @@ export default class Slider extends PureComponent { style, trackStyle, thumbStyle, - ...otherProps, + ...otherProps } = props; 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? - 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? return false; - }; + } - _handlePanResponderGrant = (/*e: Object, gestureState: Object*/) => { + _handlePanResponderGrant = (/* e: Object, gestureState: Object */) => { this._previousLeft = this._getThumbLeft(this._getCurrentValue()); this._fireChangeEvent('onSlidingStart'); }; @@ -329,7 +317,7 @@ export default class Slider extends PureComponent { _handlePanResponderRequestEnd(e: Object, gestureState: Object) { // Should we allow another component to take over this pan? return false; - }; + } _handlePanResponderEnd = (e: Object, gestureState: Object) => { if (this.props.disabled) { @@ -353,11 +341,11 @@ export default class Slider extends PureComponent { }; _handleMeasure = (name: string, x: Object) => { - var {width, height} = x.nativeEvent.layout; - var size = {width: width, height: height}; + const { width, height } = x.nativeEvent.layout; + const size = { width, height }; - var storeName = `_${name}`; - var currentSize = this[storeName]; + const storeName = `_${name}`; + const currentSize = this[storeName]; if (currentSize && width === currentSize.width && height === currentSize.height) { return; } @@ -369,56 +357,56 @@ export default class Slider extends PureComponent { trackSize: this._trackSize, thumbSize: this._thumbSize, allMeasured: true, - }) + }); } }; - _getRatio = (value: number) => { - return (value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue); - }; + _getRatio = (value: number) => + (value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue); _getThumbLeft = (value: number) => { - var ratio = this._getRatio(value); + const nonRtlRatio = this._getRatio(value); + const ratio = I18nManager.isRTL ? 1 - nonRtlRatio : nonRtlRatio; return ratio * (this.state.containerSize.width - this.state.thumbSize.width); }; _getValue = (gestureState: Object) => { - var length = this.state.containerSize.width - this.state.thumbSize.width; - var thumbLeft = this._previousLeft + gestureState.dx; + const length = this.state.containerSize.width - this.state.thumbSize.width; + 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) { - return Math.max(this.props.minimumValue, - Math.min(this.props.maximumValue, - this.props.minimumValue + Math.round(ratio * (this.props.maximumValue - this.props.minimumValue) / this.props.step) * this.props.step - ) - ); - } else { - return Math.max(this.props.minimumValue, - Math.min(this.props.maximumValue, - ratio * (this.props.maximumValue - this.props.minimumValue) + this.props.minimumValue - ) + return Math.max( + this.props.minimumValue, + Math.min( + this.props.maximumValue, + this.props.minimumValue + + Math.round(ratio * (this.props.maximumValue - 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 = () => { - return this.state.value.__getValue(); - }; + _getCurrentValue = () => this.state.value.__getValue(); _setCurrentValue = (value: number) => { this.state.value.setValue(value); }; _setCurrentValueAnimated = (value: number) => { - var animationType = this.props.animationType; - var animationConfig = Object.assign( - {}, - DEFAULT_ANIMATION_CONFIGS[animationType], - this.props.animationConfig, - {toValue : value} - ); + const animationType = this.props.animationType; + const animationConfig = Object.assign({}, DEFAULT_ANIMATION_CONFIGS[animationType], this.props.animationConfig, { + toValue: value, + }); Animated[animationType](this.state.value, animationConfig).start(); }; @@ -430,10 +418,10 @@ export default class Slider extends PureComponent { }; _getTouchOverflowSize = () => { - var state = this.state; - var props = this.props; + const state = this.state; + const props = this.props; - var size = {}; + const size = {}; if (state.allMeasured === true) { size.width = Math.max(0, props.thumbTouchSize.width - state.thumbSize.width); size.height = Math.max(0, props.thumbTouchSize.height - state.containerSize.height); @@ -443,15 +431,15 @@ export default class Slider extends PureComponent { }; _getTouchOverflowStyle = () => { - var {width, height} = this._getTouchOverflowSize(); + const { width, height } = this._getTouchOverflowSize(); - var touchOverflowStyle = {}; + const touchOverflowStyle = {}; if (width !== undefined && height !== undefined) { - var verticalMargin = -height / 2; + const verticalMargin = -height / 2; touchOverflowStyle.marginTop = verticalMargin; touchOverflowStyle.marginBottom = verticalMargin; - var horizontalMargin = -width / 2; + const horizontalMargin = -width / 2; touchOverflowStyle.marginLeft = horizontalMargin; touchOverflowStyle.marginRight = horizontalMargin; } @@ -465,43 +453,40 @@ export default class Slider extends PureComponent { }; _thumbHitTest = (e: Object) => { - var nativeEvent = e.nativeEvent; - var thumbTouchRect = this._getThumbTouchRect(); + const nativeEvent = e.nativeEvent; + const thumbTouchRect = this._getThumbTouchRect(); return thumbTouchRect.containsPoint(nativeEvent.locationX, nativeEvent.locationY); }; _getThumbTouchRect = () => { - var state = this.state; - var props = this.props; - var touchOverflowSize = this._getTouchOverflowSize(); + const state = this.state; + 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.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 + props.thumbTouchSize.height, ); }; _renderDebugThumbTouchRect = (thumbLeft) => { - var thumbTouchRect = this._getThumbTouchRect(); - var positionStyle = { + const thumbTouchRect = this._getThumbTouchRect(); + const positionStyle = { left: thumbLeft, top: thumbTouchRect.y, width: thumbTouchRect.width, height: thumbTouchRect.height, }; - return ( - - ); + return ; }; _renderThumbImage = () => { - var {thumbImage} = this.props; + const { thumbImage } = this.props; if (!thumbImage) return; @@ -536,5 +521,5 @@ var defaultStyles = StyleSheet.create({ position: 'absolute', backgroundColor: 'green', opacity: 0.5, - } + }, }); From 173fb578c024fd61edabe5a7ef161a7eb3cfd162 Mon Sep 17 00:00:00 2001 From: Lode Vanhove Date: Fri, 27 Apr 2018 00:31:51 +0200 Subject: [PATCH 2/2] Format with Prettier --- src/Slider.js | 118 +++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 93 insertions(+), 25 deletions(-) diff --git a/src/Slider.js b/src/Slider.js index 552af3b6..7174a159 100644 --- a/src/Slider.js +++ b/src/Slider.js @@ -1,6 +1,15 @@ import React, { PureComponent } from 'react'; -import { Animated, Image, StyleSheet, PanResponder, View, Easing, ViewPropTypes, I18nManager } from 'react-native'; +import { + Animated, + Image, + StyleSheet, + PanResponder, + View, + Easing, + ViewPropTypes, + I18nManager, +} from 'react-native'; import PropTypes from 'prop-types'; @@ -14,8 +23,13 @@ function Rect(x, y, width, height) { this.height = height; } -Rect.prototype.containsPoint = function (x, y) { - return x >= this.x && y >= this.y && x <= this.x + this.width && y <= this.y + this.height; +Rect.prototype.containsPoint = function(x, y) { + return ( + x >= this.x && + y >= this.y && + x <= this.x + this.width && + y <= this.y + this.height + ); }; const DEFAULT_ANIMATION_CONFIGS = { @@ -92,7 +106,10 @@ export default class Slider extends PureComponent { * to move it easily. * The default is {width: 40, height: 40}. */ - thumbTouchSize: PropTypes.shape({ width: PropTypes.number, height: PropTypes.number }), + thumbTouchSize: PropTypes.shape({ + width: PropTypes.number, + height: PropTypes.number, + }), /** * Callback continuously called while the user is dragging the slider. @@ -213,7 +230,11 @@ export default class Slider extends PureComponent { ...other } = this.props; const { - value, containerSize, trackSize, thumbSize, allMeasured, + value, + containerSize, + trackSize, + thumbSize, + allMeasured, } = this.state; const mainStyles = styles || defaultStyles; const thumbLeft = value.interpolate({ @@ -243,13 +264,24 @@ export default class Slider extends PureComponent { const touchOverflowStyle = this._getTouchOverflowStyle(); return ( - + - + - {debugTouchArea === true && this._renderDebugThumbTouchRect(minimumTrackWidth)} + {debugTouchArea === true && + this._renderDebugThumbTouchRect(minimumTrackWidth)} ); @@ -291,7 +324,9 @@ export default class Slider extends PureComponent { 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? this._thumbHitTest(e); @@ -346,7 +381,11 @@ export default class Slider extends PureComponent { const storeName = `_${name}`; const currentSize = this[storeName]; - if (currentSize && width === currentSize.width && height === currentSize.height) { + if ( + currentSize && + width === currentSize.width && + height === currentSize.height + ) { return; } this[storeName] = size; @@ -362,12 +401,15 @@ export default class Slider extends PureComponent { }; _getRatio = (value: number) => - (value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue); + (value - this.props.minimumValue) / + (this.props.maximumValue - this.props.minimumValue); _getThumbLeft = (value: number) => { const nonRtlRatio = this._getRatio(value); const ratio = I18nManager.isRTL ? 1 - nonRtlRatio : nonRtlRatio; - return ratio * (this.state.containerSize.width - this.state.thumbSize.width); + return ( + ratio * (this.state.containerSize.width - this.state.thumbSize.width) + ); }; _getValue = (gestureState: Object) => { @@ -383,7 +425,12 @@ export default class Slider extends PureComponent { Math.min( this.props.maximumValue, this.props.minimumValue + - Math.round(ratio * (this.props.maximumValue - this.props.minimumValue) / this.props.step) * this.props.step, + Math.round( + ratio * + (this.props.maximumValue - this.props.minimumValue) / + this.props.step, + ) * + this.props.step, ), ); } @@ -391,7 +438,8 @@ export default class Slider extends PureComponent { this.props.minimumValue, Math.min( this.props.maximumValue, - ratio * (this.props.maximumValue - this.props.minimumValue) + this.props.minimumValue, + ratio * (this.props.maximumValue - this.props.minimumValue) + + this.props.minimumValue, ), ); }; @@ -404,14 +452,19 @@ export default class Slider extends PureComponent { _setCurrentValueAnimated = (value: number) => { const animationType = this.props.animationType; - const animationConfig = Object.assign({}, DEFAULT_ANIMATION_CONFIGS[animationType], this.props.animationConfig, { - toValue: value, - }); + const animationConfig = Object.assign( + {}, + DEFAULT_ANIMATION_CONFIGS[animationType], + this.props.animationConfig, + { + toValue: value, + }, + ); Animated[animationType](this.state.value, animationConfig).start(); }; - _fireChangeEvent = (event) => { + _fireChangeEvent = event => { if (this.props[event]) { this.props[event](this._getCurrentValue()); } @@ -423,8 +476,14 @@ export default class Slider extends PureComponent { const size = {}; if (state.allMeasured === true) { - size.width = Math.max(0, props.thumbTouchSize.width - state.thumbSize.width); - size.height = Math.max(0, props.thumbTouchSize.height - state.containerSize.height); + size.width = Math.max( + 0, + props.thumbTouchSize.width - state.thumbSize.width, + ); + size.height = Math.max( + 0, + props.thumbTouchSize.height - state.containerSize.height, + ); } return size; @@ -455,7 +514,10 @@ export default class Slider extends PureComponent { _thumbHitTest = (e: Object) => { const nativeEvent = e.nativeEvent; const thumbTouchRect = this._getThumbTouchRect(); - return thumbTouchRect.containsPoint(nativeEvent.locationX, nativeEvent.locationY); + return thumbTouchRect.containsPoint( + nativeEvent.locationX, + nativeEvent.locationY, + ); }; _getThumbTouchRect = () => { @@ -467,13 +529,14 @@ export default class Slider extends PureComponent { touchOverflowSize.width / 2 + this._getThumbLeft(this._getCurrentValue()) + (state.thumbSize.width - props.thumbTouchSize.width) / 2, - touchOverflowSize.height / 2 + (state.containerSize.height - props.thumbTouchSize.height) / 2, + touchOverflowSize.height / 2 + + (state.containerSize.height - props.thumbTouchSize.height) / 2, props.thumbTouchSize.width, props.thumbTouchSize.height, ); }; - _renderDebugThumbTouchRect = (thumbLeft) => { + _renderDebugThumbTouchRect = thumbLeft => { const thumbTouchRect = this._getThumbTouchRect(); const positionStyle = { left: thumbLeft, @@ -482,7 +545,12 @@ export default class Slider extends PureComponent { height: thumbTouchRect.height, }; - return ; + return ( + + ); }; _renderThumbImage = () => {