From d214cacf33d0fd81cddd1c4b246e7e9fb3c258ca Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Wed, 16 Aug 2017 20:52:01 +0300 Subject: [PATCH 1/3] replace_createClass_with_extends_Component --- Slider.js | 64 ++++++++++++++++++++++++++++--------------------- customMarker.js | 14 +++++------ mockProps.js | 21 ++++++++-------- 3 files changed, 53 insertions(+), 46 deletions(-) diff --git a/Slider.js b/Slider.js index 7a7eb7d..aaa70b0 100644 --- a/Slider.js +++ b/Slider.js @@ -2,13 +2,12 @@ var React = require('react'); var ReactNative = require('react-native'); -var { - PropTypes -} = React; +var PropTypes = require('prop-types'); var { StyleSheet, PanResponder, View, + ViewPropTypes, TouchableHighlight } = ReactNative; @@ -36,29 +35,29 @@ var sliderProps = { optionsArray: PropTypes.array, - containerStyle: View.propTypes.style, - trackStyle: View.propTypes.style, - selectedStyle: View.propTypes.style, - unselectedStyle: View.propTypes.style, - markerStyle: View.propTypes.style, - pressedMarkerStyle: View.propTypes.style + containerStyle: ViewPropTypes.style, + trackStyle: ViewPropTypes.style, + selectedStyle: ViewPropTypes.style, + unselectedStyle: ViewPropTypes.style, + markerStyle: ViewPropTypes.style, + pressedMarkerStyle: ViewPropTypes.style }; -var Slider = React.createClass({ +class Slider extends React.Component { - propTypes: sliderProps, + static propTypes = sliderProps - getDefaultProps: function() { - return mockProps; - }, + static defaultProps = mockProps + + constructor(props) { + super(props) - getInitialState() { this.optionsArray = this.props.optionsArray || converter.createArray(this.props.min,this.props.max,this.props.step); this.stepLength = this.props.sliderLength/this.optionsArray.length; var initialValues = this.props.values.map(value => converter.valueToPosition(value,this.optionsArray,this.props.sliderLength)); - return { + this.state = { pressedOne: true, valueOne: this.props.values[0], valueTwo: this.props.values[1], @@ -67,7 +66,9 @@ var Slider = React.createClass({ positionOne: initialValues[0], positionTwo: initialValues[1] }; - }, + + this.bindFunctions() + } componentWillMount() { var customPanResponder = function (start,move,end) { @@ -88,14 +89,23 @@ var Slider = React.createClass({ this._panResponderOne = customPanResponder(this.startOne, this.moveOne, this.endOne); this._panResponderTwo = customPanResponder(this.startTwo, this.moveTwo, this.endTwo); - }, + } componentWillReceiveProps(nextProps) { var { values } = this.props; if (nextProps.values.join() !== values.join()) { this.set(nextProps); } - }, + } + + bindFunctions() { + this.startOne = this.startOne.bind(this) + this.moveOne = this.moveOne.bind(this) + this.endOne = this.endOne.bind(this) + this.startTwo = this.startTwo.bind(this) + this.moveTwo = this.moveTwo.bind(this) + this.endTwo = this.endTwo.bind(this) + } set(config) { var { max, min, optionsArray, step, values } = config || this.props; @@ -113,21 +123,21 @@ var Slider = React.createClass({ positionOne: initialValues[0], positionTwo: initialValues[1] }); - }, + } startOne () { this.props.onValuesChangeStart(); this.setState({ onePressed: !this.state.onePressed }); - }, + } startTwo () { this.props.onValuesChangeStart(); this.setState({ twoPressed: !this.state.twoPressed }); - }, + } moveOne(gestureState) { var unconfined = gestureState.dx + this.state.pastOne; @@ -154,7 +164,7 @@ var Slider = React.createClass({ this.props.onValuesChange(change); }); } - }, + } moveTwo(gestureState) { var unconfined = gestureState.dx + this.state.pastTwo; @@ -176,7 +186,7 @@ var Slider = React.createClass({ this.props.onValuesChange([this.state.valueOne,this.state.valueTwo]); }); } - }, + } endOne(gestureState) { this.setState({ @@ -189,7 +199,7 @@ var Slider = React.createClass({ } this.props.onValuesChangeFinish(change); }); - }, + } endTwo(gestureState) { this.setState({ @@ -198,7 +208,7 @@ var Slider = React.createClass({ }, function () { this.props.onValuesChangeFinish([this.state.valueOne,this.state.valueTwo]); }); - }, + } render() { var {positionOne, positionTwo} = this.state; @@ -265,7 +275,7 @@ var Slider = React.createClass({ ); } -}); +}; module.exports = Slider; diff --git a/customMarker.js b/customMarker.js index 4b44cd5..b560dcf 100644 --- a/customMarker.js +++ b/customMarker.js @@ -2,21 +2,19 @@ var React = require('react'); var ReactNative = require('react-native'); -var { - PropTypes -} = React; +var PropTypes = require('prop-types'); var { StyleSheet, Image } = ReactNative; -var CustomMarker = React.createClass({ +class CustomMarker extends React.PureComponent({ - propTypes: { + static propTypes = { pressed: PropTypes.bool, - }, + } - render: function () { + render() { return ( ); } -}); +}; var styles = StyleSheet.create({ image: { diff --git a/mockProps.js b/mockProps.js index 34b97cb..6b824c5 100644 --- a/mockProps.js +++ b/mockProps.js @@ -2,29 +2,28 @@ var React = require('react'); var ReactNative = require('react-native'); +var PropTypes = require('prop-types'); var { - PropTypes -} = React; -var { - View + View, + ViewPropTypes } = ReactNative; -var BasicMarker = React.createClass({ +class BasicMarker extends React.Component { - propTypes: { + static propTypes = { pressed: PropTypes.bool, - pressedMarkerStyle: View.propTypes.style, - markerStyle: View.propTypes.style - }, + pressedMarkerStyle: ViewPropTypes.style, + markerStyle: ViewPropTypes.style + } - render: function () { + render() { return ( ); } -}); +}; var mockProps = { values: [0], From ef5812b70eea88e4748245b62264b2c96aaa7c73 Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Wed, 16 May 2018 13:11:11 +0300 Subject: [PATCH 2/3] add onPressTrack --- Slider.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/Slider.js b/Slider.js index aaa70b0..a3a0f34 100644 --- a/Slider.js +++ b/Slider.js @@ -8,7 +8,8 @@ var { PanResponder, View, ViewPropTypes, - TouchableHighlight + TouchableHighlight, + TouchableWithoutFeedback } = ReactNative; var converter = require('./converter.js'); @@ -210,6 +211,11 @@ class Slider extends React.Component { }); } + onPressTrack = (e) => { + if ( this.props.onPressTrack ) + this.props.onPressTrack(e); + } + render() { var {positionOne, positionTwo} = this.state; var {selectedStyle, unselectedStyle, sliderLength} = this.props; @@ -234,8 +240,12 @@ class Slider extends React.Component { }; return ( - - + + { twoMarkers && ( @@ -270,9 +280,8 @@ class Slider extends React.Component { /> ) } - - + ); } }; @@ -281,9 +290,6 @@ module.exports = Slider; var styles = StyleSheet.create({ - container: { - justifyContent: 'center', - }, fullTrack: { flexDirection: 'row', }, From 3f51d7aac69eba0560d2757775c8d31dfa25c739 Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Thu, 17 May 2018 19:33:32 +0300 Subject: [PATCH 3/3] android overflow fix --- Slider.js | 101 +++++++++++++++++++++++++++--------------------------- 1 file changed, 50 insertions(+), 51 deletions(-) diff --git a/Slider.js b/Slider.js index a3a0f34..ccaab52 100644 --- a/Slider.js +++ b/Slider.js @@ -8,7 +8,6 @@ var { PanResponder, View, ViewPropTypes, - TouchableHighlight, TouchableWithoutFeedback } = ReactNative; @@ -72,24 +71,8 @@ class Slider extends React.Component { } componentWillMount() { - var customPanResponder = function (start,move,end) { - return PanResponder.create({ - onStartShouldSetPanResponder: (evt, gestureState) => true, - onStartShouldSetPanResponderCapture: (evt, gestureState) => true, - onMoveShouldSetPanResponder: (evt, gestureState) => true, - onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, - onPanResponderGrant: (evt, gestureState) => start(), - onPanResponderMove: (evt, gestureState) => move(gestureState), - onPanResponderTerminationRequest: (evt, gestureState) => false, - onPanResponderRelease: (evt, gestureState) => end(gestureState), - onPanResponderTerminate: (evt, gestureState) => end(gestureState), - onShouldBlockNativeResponder: (evt, gestureState) => true - }) - }; - - this._panResponderOne = customPanResponder(this.startOne, this.moveOne, this.endOne); - this._panResponderTwo = customPanResponder(this.startTwo, this.moveTwo, this.endTwo); - + this._panResponderOne = this.customPanResponder(this.startOne, this.moveOne, this.endOne); + this._panResponderTwo = this.customPanResponder(this.startTwo, this.moveTwo, this.endTwo); } componentWillReceiveProps(nextProps) { @@ -106,8 +89,24 @@ class Slider extends React.Component { this.startTwo = this.startTwo.bind(this) this.moveTwo = this.moveTwo.bind(this) this.endTwo = this.endTwo.bind(this) + this.customPanResponder = this.customPanResponder.bind(this) } + customPanResponder(start,move,end) { + return PanResponder.create({ + onStartShouldSetPanResponder: (evt, gestureState) => true, + onStartShouldSetPanResponderCapture: (evt, gestureState) => true, + onMoveShouldSetPanResponder: (evt, gestureState) => true, + onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, + onPanResponderGrant: (evt, gestureState) => start(), + onPanResponderMove: (evt, gestureState) => move(gestureState), + onPanResponderTerminationRequest: (evt, gestureState) => false, + onPanResponderRelease: (evt, gestureState) => end(gestureState), + onPanResponderTerminate: (evt, gestureState) => end(gestureState), + onShouldBlockNativeResponder: (evt, gestureState) => true + }) + }; + set(config) { var { max, min, optionsArray, step, values } = config || this.props; this.optionsArray = optionsArray || converter.createArray(min, max, step); @@ -240,48 +239,48 @@ class Slider extends React.Component { }; return ( - - - - - { twoMarkers && ( - - ) } + + + + + + { twoMarkers && ( + + ) } + + + + + { twoMarkers && (positionOne !== this.props.sliderLength) && ( this._markerOne = component} - {...this._panResponderOne.panHandlers} + style={[styles.touch, touchStyle, {left: -(trackThreeLength + width * 1.5)}]} + {...this._panResponderTwo.panHandlers} > - - { twoMarkers && (positionOne !== this.props.sliderLength) && ( - this._markerTwo = component} - {...this._panResponderTwo.panHandlers} - > - - - ) } - - + ) } + ); } }; @@ -290,8 +289,8 @@ module.exports = Slider; var styles = StyleSheet.create({ - fullTrack: { - flexDirection: 'row', + row: { + flexDirection: 'row' }, track: { justifyContent: 'center'