@momo-kits/slider 0.0.34-beta → 0.0.36-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DefaultLabel.js +86 -1
- package/DefaultMarker.js +72 -1
- package/Slider.js +740 -1
- package/Slider.web.js +741 -1
- package/converters.js +79 -1
- package/index.js +3 -1
- package/package.json +3 -10
- package/publish.sh +2 -2
- package/babel.config.js +0 -1
package/DefaultLabel.js
CHANGED
|
@@ -1 +1,86 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { View, StyleSheet } from 'react-native';
|
|
4
|
+
import { Text } from '@momo-kits/core';
|
|
5
|
+
|
|
6
|
+
const sliderRadius = 3;
|
|
7
|
+
const width = 50;
|
|
8
|
+
export default class DefaultLabel extends React.Component {
|
|
9
|
+
render() {
|
|
10
|
+
const {
|
|
11
|
+
oneMarkerValue,
|
|
12
|
+
twoMarkerValue,
|
|
13
|
+
oneMarkerLeftPosition,
|
|
14
|
+
twoMarkerLeftPosition,
|
|
15
|
+
oneMarkerPressed,
|
|
16
|
+
twoMarkerPressed,
|
|
17
|
+
} = this.props;
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<View style={{ position: 'relative' }}>
|
|
21
|
+
{
|
|
22
|
+
Number.isFinite(oneMarkerLeftPosition)
|
|
23
|
+
&& Number.isFinite(oneMarkerValue)
|
|
24
|
+
&& (
|
|
25
|
+
<View
|
|
26
|
+
style={[
|
|
27
|
+
styles.sliderLabel,
|
|
28
|
+
{ left: oneMarkerLeftPosition - width / 2 + sliderRadius },
|
|
29
|
+
oneMarkerPressed && styles.markerPressed,
|
|
30
|
+
]}
|
|
31
|
+
>
|
|
32
|
+
<Text.SubTitle style={styles.sliderLabelText}>{oneMarkerValue}</Text.SubTitle>
|
|
33
|
+
</View>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
{
|
|
38
|
+
Number.isFinite(twoMarkerLeftPosition)
|
|
39
|
+
&& Number.isFinite(twoMarkerValue)
|
|
40
|
+
&& (
|
|
41
|
+
<View
|
|
42
|
+
style={[
|
|
43
|
+
styles.sliderLabel,
|
|
44
|
+
{ left: twoMarkerLeftPosition - width / 2 + sliderRadius },
|
|
45
|
+
twoMarkerPressed && styles.markerPressed,
|
|
46
|
+
]}
|
|
47
|
+
>
|
|
48
|
+
<Text.SubTitle style={styles.sliderLabelText}>{twoMarkerValue}</Text.SubTitle>
|
|
49
|
+
</View>
|
|
50
|
+
)
|
|
51
|
+
}
|
|
52
|
+
</View>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
const styles = StyleSheet.create({
|
|
58
|
+
sliderLabel: {
|
|
59
|
+
position: 'absolute',
|
|
60
|
+
bottom: 0,
|
|
61
|
+
minWidth: width,
|
|
62
|
+
padding: 8,
|
|
63
|
+
backgroundColor: '#f1f1f1',
|
|
64
|
+
},
|
|
65
|
+
sliderLabelText: {
|
|
66
|
+
alignItems: 'center',
|
|
67
|
+
textAlign: 'center',
|
|
68
|
+
fontStyle: 'normal',
|
|
69
|
+
// fontSize: 11,
|
|
70
|
+
},
|
|
71
|
+
markerPressed: {
|
|
72
|
+
borderWidth: 2,
|
|
73
|
+
borderColor: '#999',
|
|
74
|
+
},
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
DefaultLabel.propTypes = {
|
|
78
|
+
oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
79
|
+
twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
80
|
+
|
|
81
|
+
oneMarkerLeftPosition: PropTypes.number,
|
|
82
|
+
twoMarkerLeftPosition: PropTypes.number,
|
|
83
|
+
|
|
84
|
+
oneMarkerPressed: PropTypes.bool,
|
|
85
|
+
twoMarkerPressed: PropTypes.bool,
|
|
86
|
+
};
|
package/DefaultMarker.js
CHANGED
|
@@ -1 +1,72 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
View, StyleSheet, Platform, TouchableHighlight
|
|
4
|
+
} from 'react-native';
|
|
5
|
+
import { Colors } from '@momo-kits/core';
|
|
6
|
+
|
|
7
|
+
class DefaultMarker extends React.Component {
|
|
8
|
+
render() {
|
|
9
|
+
const {
|
|
10
|
+
enabled,
|
|
11
|
+
markerStyle,
|
|
12
|
+
pressed,
|
|
13
|
+
pressedMarkerStyle,
|
|
14
|
+
disabledMarkerStyle
|
|
15
|
+
} = this.props;
|
|
16
|
+
return (
|
|
17
|
+
<TouchableHighlight>
|
|
18
|
+
<View
|
|
19
|
+
style={
|
|
20
|
+
enabled
|
|
21
|
+
? [
|
|
22
|
+
styles.markerStyle,
|
|
23
|
+
markerStyle,
|
|
24
|
+
pressed && styles.pressedMarkerStyle,
|
|
25
|
+
pressed && pressedMarkerStyle,
|
|
26
|
+
]
|
|
27
|
+
: [
|
|
28
|
+
styles.markerStyle,
|
|
29
|
+
styles.disabled,
|
|
30
|
+
disabledMarkerStyle,
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
/>
|
|
34
|
+
</TouchableHighlight>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
const styles = StyleSheet.create({
|
|
40
|
+
markerStyle: {
|
|
41
|
+
height: 24,
|
|
42
|
+
width: 24,
|
|
43
|
+
borderRadius: 12,
|
|
44
|
+
borderWidth: 2,
|
|
45
|
+
borderColor: Colors.pink_03,
|
|
46
|
+
backgroundColor: '#FFFFFF',
|
|
47
|
+
shadowColor: '#000000',
|
|
48
|
+
shadowOffset: {
|
|
49
|
+
width: 0,
|
|
50
|
+
height: 3,
|
|
51
|
+
},
|
|
52
|
+
shadowRadius: 1,
|
|
53
|
+
shadowOpacity: 0.2,
|
|
54
|
+
elevation: 3
|
|
55
|
+
},
|
|
56
|
+
pressedMarkerStyle: {
|
|
57
|
+
...Platform.select({
|
|
58
|
+
web: {},
|
|
59
|
+
ios: {},
|
|
60
|
+
android: {
|
|
61
|
+
height: 20,
|
|
62
|
+
width: 20,
|
|
63
|
+
borderRadius: 20,
|
|
64
|
+
},
|
|
65
|
+
}),
|
|
66
|
+
},
|
|
67
|
+
disabled: {
|
|
68
|
+
backgroundColor: '#d3d3d3',
|
|
69
|
+
},
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
export default DefaultMarker;
|
package/Slider.js
CHANGED
|
@@ -1 +1,740 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _lodash=require("lodash");var _core=require("@momo-kits/core");var _DefaultMarker=_interopRequireDefault(require("./DefaultMarker"));var _DefaultLabel=_interopRequireDefault(require("./DefaultLabel"));var _converters=require("./converters");var _jsxFileName="/Users/trinh.ho2/momo-folk/kits/src/libs/slider/dist/Slider.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var Slider=function(_Component){(0,_inherits2.default)(Slider,_Component);var _super=_createSuper(Slider);function Slider(props){var _this;(0,_classCallCheck2.default)(this,Slider);_this=_super.call(this,props);_this.subscribePanResponder=function(){var customPanResponder=function customPanResponder(start,move,end){return _reactNative.PanResponder.create({onStartShouldSetPanResponder:function onStartShouldSetPanResponder(){return true;},onStartShouldSetPanResponderCapture:function onStartShouldSetPanResponderCapture(){return true;},onMoveShouldSetPanResponder:function onMoveShouldSetPanResponder(){return true;},onMoveShouldSetPanResponderCapture:function onMoveShouldSetPanResponderCapture(){return true;},onPanResponderGrant:function onPanResponderGrant(){return start();},onPanResponderMove:function onPanResponderMove(evt,gestureState){return move(gestureState);},onPanResponderTerminationRequest:function onPanResponderTerminationRequest(){return false;},onPanResponderRelease:function onPanResponderRelease(evt,gestureState){return end(gestureState);},onPanResponderTerminate:function onPanResponderTerminate(evt,gestureState){return end(gestureState);},onShouldBlockNativeResponder:function onShouldBlockNativeResponder(){return true;}});};_this._panResponderBetween=customPanResponder(function(gestureState){_this.startOne(gestureState);_this.startTwo(gestureState);},function(gestureState){_this.moveOne(gestureState);_this.moveTwo(gestureState);},function(gestureState){_this.endOne(gestureState);_this.endTwo(gestureState);});_this._panResponderOne=customPanResponder(_this.startOne,_this.moveOne,_this.endOne);_this._panResponderTwo=customPanResponder(_this.startTwo,_this.moveTwo,_this.endTwo);};_this.startOne=function(){var _this$props=_this.props,enabledOne=_this$props.enabledOne,onChangeStart=_this$props.onChangeStart;var onePressed=_this.state.onePressed;if(enabledOne){onChangeStart();_this.setState({onePressed:!onePressed});}};_this.startTwo=function(){var _this$props2=_this.props,enabledTwo=_this$props2.enabledTwo,onChangeStart=_this$props2.onChangeStart;var twoPressed=_this.state.twoPressed;if(enabledTwo){onChangeStart();_this.setState({twoPressed:!twoPressed});}};_this.moveOne=function(gestureState){var _this$props3=_this.props,enabledOne=_this$props3.enabledOne,vertical=_this$props3.vertical,allowOverlap=_this$props3.allowOverlap,minMarkerOverlapDistance=_this$props3.minMarkerOverlapDistance,touchDimensions=_this$props3.touchDimensions,snapped=_this$props3.snapped,onChange=_this$props3.onChange,onMarkersPosition=_this$props3.onMarkersPosition,_this$props3$allowRan=_this$props3.allowRange,allowRange=_this$props3$allowRan===void 0?[]:_this$props3$allowRan,min=_this$props3.min,max=_this$props3.max;var _this$state=_this.state,pastOne=_this$state.pastOne,positionTwo=_this$state.positionTwo,valueOne=_this$state.valueOne,valueTwo=_this$state.valueTwo,sliderLength=_this$state.sliderLength;if(!enabledOne){return;}var accumDistance=vertical?-gestureState.dy:gestureState.dx;var accumDistanceDisplacement=vertical?gestureState.dx:gestureState.dy;var unconfined=_reactNative.I18nManager.isRTL?pastOne-accumDistance:accumDistance+pastOne;var bottom=0;var trueTop=positionTwo-(allowOverlap?0:minMarkerOverlapDistance>0?minMarkerOverlapDistance:_this.stepLength);var top=trueTop===0?0:trueTop||sliderLength;var confined=unconfined<bottom?bottom:unconfined>top?top:unconfined;var slipDisplacement=touchDimensions.slipDisplacement;if(Math.abs(accumDistanceDisplacement)<slipDisplacement||!slipDisplacement){var value=(0,_converters.positionToValue)(confined,_this.optionsArray,sliderLength);if((allowRange==null?void 0:allowRange.length)>0&&value<(0,_lodash.get)(allowRange,'[0]',min))return;if((allowRange==null?void 0:allowRange.length)>1&&value>(0,_lodash.get)(allowRange,'[1]',max))return;var snappedValue=(0,_converters.valueToPosition)(value,_this.optionsArray,sliderLength);_this.setState({positionOne:snapped?snappedValue:confined});if(value!==valueOne){_this.setState({valueOne:value},function(){var _this$state2=_this.state,newValueOne=_this$state2.valueOne,newPositionOne=_this$state2.positionOne;var change=[newValueOne];if(valueTwo){change.push(valueTwo);}onChange(change);onMarkersPosition([newPositionOne,positionTwo]);});}}};_this.moveTwo=function(gestureState){var _this$props4=_this.props,enabledTwo=_this$props4.enabledTwo,vertical=_this$props4.vertical,allowOverlap=_this$props4.allowOverlap,minMarkerOverlapDistance=_this$props4.minMarkerOverlapDistance,touchDimensions=_this$props4.touchDimensions,snapped=_this$props4.snapped,onChange=_this$props4.onChange,onMarkersPosition=_this$props4.onMarkersPosition;var _this$state3=_this.state,pastTwo=_this$state3.pastTwo,positionOne=_this$state3.positionOne,sliderLength=_this$state3.sliderLength,valueTwo=_this$state3.valueTwo,valueOne=_this$state3.valueOne;if(!enabledTwo){return;}var accumDistance=vertical?-gestureState.dy:gestureState.dx;var accumDistanceDisplacement=vertical?gestureState.dx:gestureState.dy;var unconfined=_reactNative.I18nManager.isRTL?pastTwo-accumDistance:accumDistance+pastTwo;var bottom=positionOne+(allowOverlap?0:minMarkerOverlapDistance>0?minMarkerOverlapDistance:_this.stepLength);var top=sliderLength;var confined=unconfined<bottom?bottom:unconfined>top?top:unconfined;var slipDisplacement=touchDimensions.slipDisplacement;if(Math.abs(accumDistanceDisplacement)<slipDisplacement||!slipDisplacement){var value=(0,_converters.positionToValue)(confined,_this.optionsArray,sliderLength);var snappedValue=(0,_converters.valueToPosition)(value,_this.optionsArray,sliderLength);_this.setState({positionTwo:snapped?snappedValue:confined});if(value!==valueTwo){_this.setState({valueTwo:value},function(){console.log(valueOne);var _this$state4=_this.state,newValueTwo=_this$state4.valueTwo,newPositionTwo=_this$state4.positionTwo;onChange([valueOne,newValueTwo]);onMarkersPosition([positionOne,newPositionTwo]);});}}};_this.endOne=function(gestureState){var _this$props5=_this.props,onToggleOne=_this$props5.onToggleOne,onChangeFinish=_this$props5.onChangeFinish;var _this$state5=_this.state,positionOne=_this$state5.positionOne,onePressed=_this$state5.onePressed,valueOne=_this$state5.valueOne,valueTwo=_this$state5.valueTwo;if(gestureState.moveX===0&&onToggleOne){onToggleOne();return;}_this.setState({pastOne:positionOne,onePressed:!onePressed},function(){var change=[valueOne];if(valueTwo){change.push(valueTwo);}onChangeFinish(change);});};_this.endTwo=function(gestureState){var _this$props6=_this.props,onToggleTwo=_this$props6.onToggleTwo,onChangeFinish=_this$props6.onChangeFinish;var _this$state6=_this.state,twoPressed=_this$state6.twoPressed,positionTwo=_this$state6.positionTwo,valueOne=_this$state6.valueOne,valueTwo=_this$state6.valueTwo;if(gestureState.moveX===0&&onToggleTwo){onToggleTwo();return;}_this.setState({twoPressed:!twoPressed,pastTwo:positionTwo},function(){onChangeFinish([valueOne,valueTwo]);});};var _this$props7=_this.props,optionsArray=_this$props7.optionsArray,_min=_this$props7.min,_max=_this$props7.max,step=_this$props7.step,length=_this$props7.length,values=_this$props7.values;_this.optionsArray=optionsArray||(0,_converters.createArray)(_min,_max,step);var defaultSliderLength=length;_this.stepLength=defaultSliderLength/_this.optionsArray.length;var initialValues=values.map(function(value){return(0,_converters.valueToPosition)(value,_this.optionsArray,defaultSliderLength);});_this.state={valueOne:values[0],valueTwo:values[1],pastOne:initialValues[0],pastTwo:initialValues[1],positionOne:initialValues[0],positionTwo:initialValues[1],sliderLength:defaultSliderLength};_this.subscribePanResponder();return _this;}(0,_createClass2.default)(Slider,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var prevPositionOne=prevState.positionOne,prevPositionTwo=prevState.positionTwo;var _this$state7=this.state,positionOne=_this$state7.positionOne,positionTwo=_this$state7.positionTwo,onePressed=_this$state7.onePressed,twoPressed=_this$state7.twoPressed,sliderLength=_this$state7.sliderLength;var _this$props8=this.props,onMarkersPosition=_this$props8.onMarkersPosition,min=_this$props8.min,max=_this$props8.max,step=_this$props8.step,values=_this$props8.values,optionsArray=_this$props8.optionsArray;if(typeof positionOne==='undefined'&&typeof positionTwo!=='undefined'){return;}if(positionOne!==prevPositionOne||positionTwo!==prevPositionTwo){onMarkersPosition([positionOne,positionTwo]);}if(onePressed||twoPressed){return;}var nextState={};if(prevProps.min!==min||prevProps.max!==max||prevProps.step!==step||prevProps.values[0]!==values[0]||prevState.sliderLength!==sliderLength||prevProps.values[1]!==values[1]||prevState.sliderLength!==sliderLength&&prevProps.values[1]){this.optionsArray=optionsArray||(0,_converters.createArray)(min,max,step);this.stepLength=sliderLength/this.optionsArray.length;var positionOneValue=(0,_converters.valueToPosition)(values[0],this.optionsArray,sliderLength);nextState.valueOne=values[0];nextState.pastOne=positionOneValue;nextState.positionOne=positionOneValue;var positionTwoValue=(0,_converters.valueToPosition)(values[1],this.optionsArray,sliderLength);nextState.valueTwo=values[1];nextState.pastTwo=positionTwoValue;nextState.positionTwo=positionTwoValue;this.setState(nextState);}}},{key:"onContentLayout",value:function onContentLayout(e){var _this$props9=this.props,vertical=_this$props9.vertical,length=_this$props9.length;if(!length){var layoutLength=vertical?e.nativeEvent.layout.height:e.nativeEvent.layout.width;this.setState({sliderLength:layoutLength});}}},{key:"render",value:function render(){var _this2=this;var _this$state8=this.state,positionOne=_this$state8.positionOne,positionTwo=_this$state8.positionTwo,onePressed=_this$state8.onePressed,valueOne=_this$state8.valueOne,twoPressed=_this$state8.twoPressed,valueTwo=_this$state8.valueTwo,sliderLength=_this$state8.sliderLength;var _this$props10=this.props,style=_this$props10.style,selectedStyle=_this$props10.selectedStyle,unselectedStyle=_this$props10.unselectedStyle,markerOffsetX=_this$props10.markerOffsetX,markerOffsetY=_this$props10.markerOffsetY,values=_this$props10.values,customMarker=_this$props10.customMarker,customMarkerLeft=_this$props10.customMarkerLeft,customMarkerRight=_this$props10.customMarkerRight,_this$props10$isMarke=_this$props10.isMarkersSeparated,isMarkersSeparated=_this$props10$isMarke===void 0?false:_this$props10$isMarke,customLabel=_this$props10.customLabel,touchDimensions=_this$props10.touchDimensions,containerStyle=_this$props10.containerStyle,vertical=_this$props10.vertical,trackStyle=_this$props10.trackStyle,markerContainerStyle=_this$props10.markerContainerStyle,enabledOne=_this$props10.enabledOne,enabledTwo=_this$props10.enabledTwo,markerStyle=_this$props10.markerStyle,pressedMarkerStyle=_this$props10.pressedMarkerStyle,disabledMarkerStyle=_this$props10.disabledMarkerStyle,valuePrefix=_this$props10.valuePrefix,valueSuffix=_this$props10.valueSuffix,enableLabel=_this$props10.enableLabel,imageBackgroundSource=_this$props10.imageBackgroundSource;var twoMarkers=values.length===2;var trackOneLength=positionOne;var trackOneStyle=twoMarkers?unselectedStyle:selectedStyle||styles.selectedTrack;var trackThreeLength=twoMarkers?sliderLength-positionTwo:0;var trackThreeStyle=unselectedStyle;var trackTwoLength=sliderLength-trackOneLength-trackThreeLength;var trackTwoStyle=twoMarkers?selectedStyle||styles.selectedTrack:unselectedStyle;var Marker=customMarker;var MarkerLeft=customMarkerLeft;var MarkerRight=customMarkerRight;var Label=customLabel;var borderRadius=touchDimensions.borderRadius;var touchStyle={borderRadius:borderRadius||0};var markerContainerOne={top:markerOffsetY-24,left:trackOneLength+markerOffsetX-24};var markerContainerTwo={top:markerOffsetY-24,right:trackThreeLength-markerOffsetX-24};var newContainerStyle=[styles.container,containerStyle];if(vertical){newContainerStyle.push({transform:[{rotate:'-90deg'}]});}var body=_react.default.createElement(_reactNative.View,{style:{alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:499,columnNumber:13}},_react.default.createElement(_reactNative.View,{style:[styles.fullTrack,{width:sliderLength}],__source:{fileName:_jsxFileName,lineNumber:500,columnNumber:17}},_react.default.createElement(_reactNative.View,{style:[styles.track,trackStyle,trackOneStyle,{width:trackOneLength}],__source:{fileName:_jsxFileName,lineNumber:501,columnNumber:21}}),_react.default.createElement(_reactNative.View,(0,_extends2.default)({style:[styles.track,trackStyle,trackTwoStyle,{width:trackTwoLength}]},twoMarkers?this._panResponderBetween.panHandlers:{},{__source:{fileName:_jsxFileName,lineNumber:509,columnNumber:21}})),twoMarkers&&_react.default.createElement(_reactNative.View,{style:[styles.track,trackStyle,trackThreeStyle,{width:trackThreeLength}],__source:{fileName:_jsxFileName,lineNumber:519,columnNumber:25}}),_react.default.createElement(_reactNative.View,{style:[styles.markerContainer,markerContainerOne,markerContainerStyle,positionOne>sliderLength/2&&styles.topMarkerContainer],__source:{fileName:_jsxFileName,lineNumber:528,columnNumber:21}},_react.default.createElement(_reactNative.View,(0,_extends2.default)({style:[styles.touch,touchStyle],ref:function ref(component){return _this2._markerOne=component;}},this._panResponderOne.panHandlers,{__source:{fileName:_jsxFileName,lineNumber:536,columnNumber:25}}),isMarkersSeparated===false?_react.default.createElement(Marker,{enabled:enabledOne,pressed:onePressed,markerStyle:markerStyle,pressedMarkerStyle:pressedMarkerStyle,disabledMarkerStyle:disabledMarkerStyle,currentValue:valueOne,valuePrefix:valuePrefix,valueSuffix:valueSuffix,__source:{fileName:_jsxFileName,lineNumber:543,columnNumber:37}}):_react.default.createElement(MarkerLeft,{enabled:enabledOne,pressed:onePressed,markerStyle:markerStyle,pressedMarkerStyle:pressedMarkerStyle,disabledMarkerStyle:disabledMarkerStyle,currentValue:valueOne,valuePrefix:valuePrefix,valueSuffix:valueSuffix,__source:{fileName:_jsxFileName,lineNumber:554,columnNumber:37}}))),twoMarkers&&positionOne!==sliderLength&&_react.default.createElement(_reactNative.View,{style:[styles.markerContainer,markerContainerTwo,markerContainerStyle],__source:{fileName:_jsxFileName,lineNumber:568,columnNumber:25}},_react.default.createElement(_reactNative.View,(0,_extends2.default)({style:[styles.touch,touchStyle],ref:function ref(component){return _this2._markerTwo=component;}},this._panResponderTwo.panHandlers,{__source:{fileName:_jsxFileName,lineNumber:575,columnNumber:29}}),isMarkersSeparated===false?_react.default.createElement(Marker,{pressed:twoPressed,markerStyle:markerStyle,pressedMarkerStyle:pressedMarkerStyle,disabledMarkerStyle:disabledMarkerStyle,currentValue:valueTwo,enabled:enabledTwo,valuePrefix:valuePrefix,valueSuffix:valueSuffix,__source:{fileName:_jsxFileName,lineNumber:582,columnNumber:41}}):_react.default.createElement(MarkerRight,{pressed:twoPressed,markerStyle:markerStyle,pressedMarkerStyle:pressedMarkerStyle,disabledMarkerStyle:disabledMarkerStyle,currentValue:valueTwo,enabled:enabledTwo,valuePrefix:valuePrefix,valueSuffix:valueSuffix,__source:{fileName:_jsxFileName,lineNumber:593,columnNumber:41}})))));return _react.default.createElement(_reactNative.View,{style:style,onLayout:function onLayout(e){return _this2.onContentLayout(e);},__source:{fileName:_jsxFileName,lineNumber:612,columnNumber:13}},enableLabel&&_react.default.createElement(Label,{oneMarkerValue:valueOne,twoMarkerValue:valueTwo,oneMarkerLeftPosition:positionOne,twoMarkerLeftPosition:positionTwo,oneMarkerPressed:onePressed,twoMarkerPressed:twoPressed,__source:{fileName:_jsxFileName,lineNumber:614,columnNumber:21}}),imageBackgroundSource&&_react.default.createElement(_reactNative.ImageBackground,{source:imageBackgroundSource,style:[styles.full,newContainerStyle],__source:{fileName:_jsxFileName,lineNumber:624,columnNumber:21}},body),!imageBackgroundSource&&_react.default.createElement(_reactNative.View,{style:newContainerStyle,__source:{fileName:_jsxFileName,lineNumber:632,columnNumber:21}},body));}}]);return Slider;}(_react.Component);exports.default=Slider;var styles=_reactNative.StyleSheet.create({container:{position:'relative',height:50,justifyContent:'center'},fullTrack:{flexDirection:'row'},track:{height:4,backgroundColor:'#A7A7A7'},selectedTrack:{backgroundColor:_core.Colors.primary},markerContainer:{position:'absolute',width:48,height:48,backgroundColor:'transparent',justifyContent:'center',alignItems:'center'},topMarkerContainer:{zIndex:1},touch:{backgroundColor:'transparent',justifyContent:'center',alignItems:'center',alignSelf:'stretch'},full:{width:'100%',height:'100%'}});Slider.defaultProps={values:[0],onChangeStart:function onChangeStart(){},onChange:function onChange(){},onChangeFinish:function onChangeFinish(){},onMarkersPosition:function onMarkersPosition(){},step:1,min:0,max:10,touchDimensions:{height:50,width:50,borderRadius:15,slipDisplacement:200},customMarker:_DefaultMarker.default,customMarkerLeft:_DefaultMarker.default,customMarkerRight:_DefaultMarker.default,customLabel:_DefaultLabel.default,markerOffsetX:0,markerOffsetY:0,onToggleOne:undefined,onToggleTwo:undefined,enabledOne:true,enabledTwo:true,allowOverlap:false,snapped:false,vertical:false,minMarkerOverlapDistance:0,length:280};Slider.propTypes={style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),selectedStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),unselectedStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),markerOffsetX:_propTypes.default.number,markerOffsetY:_propTypes.default.number,values:_propTypes.default.arrayOf(_propTypes.default.number),customMarker:_propTypes.default.func,customMarkerLeft:_propTypes.default.func,customMarkerRight:_propTypes.default.func,isMarkersSeparated:_propTypes.default.bool,touchDimensions:_propTypes.default.object,containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),vertical:_propTypes.default.bool,trackStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),markerContainerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),enabledOne:_propTypes.default.bool,enabledTwo:_propTypes.default.bool,onChangeStart:_propTypes.default.func,onChange:_propTypes.default.func,onChangeFinish:_propTypes.default.func,onMarkersPosition:_propTypes.default.func,step:_propTypes.default.number,min:_propTypes.default.number,max:_propTypes.default.number,customLabel:_propTypes.default.any,onToggleOne:_propTypes.default.func,onToggleTwo:_propTypes.default.func,allowOverlap:_propTypes.default.bool,snapped:_propTypes.default.bool,minMarkerOverlapDistance:_propTypes.default.number,length:_propTypes.default.number,allowRange:_propTypes.default.arrayOf(_propTypes.default.number)};
|
|
1
|
+
import React, { Component } from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import {
|
|
4
|
+
StyleSheet,
|
|
5
|
+
PanResponder,
|
|
6
|
+
View,
|
|
7
|
+
I18nManager,
|
|
8
|
+
ImageBackground,
|
|
9
|
+
} from 'react-native';
|
|
10
|
+
import { get } from 'lodash';
|
|
11
|
+
import { Colors } from '@momo-kits/core';
|
|
12
|
+
import DefaultMarker from './DefaultMarker';
|
|
13
|
+
import DefaultLabel from './DefaultLabel';
|
|
14
|
+
import { createArray, valueToPosition, positionToValue } from './converters';
|
|
15
|
+
|
|
16
|
+
export default class Slider extends Component {
|
|
17
|
+
constructor(props) {
|
|
18
|
+
super(props);
|
|
19
|
+
const {
|
|
20
|
+
optionsArray,
|
|
21
|
+
min,
|
|
22
|
+
max,
|
|
23
|
+
step,
|
|
24
|
+
length,
|
|
25
|
+
values
|
|
26
|
+
} = this.props;
|
|
27
|
+
this.optionsArray = optionsArray
|
|
28
|
+
|| createArray(min, max, step);
|
|
29
|
+
const defaultSliderLength = length;
|
|
30
|
+
this.stepLength = defaultSliderLength / this.optionsArray.length;
|
|
31
|
+
const initialValues = values.map((value) => valueToPosition(value, this.optionsArray, defaultSliderLength));
|
|
32
|
+
this.state = {
|
|
33
|
+
valueOne: values[0],
|
|
34
|
+
valueTwo: values[1],
|
|
35
|
+
pastOne: initialValues[0],
|
|
36
|
+
pastTwo: initialValues[1],
|
|
37
|
+
positionOne: initialValues[0],
|
|
38
|
+
positionTwo: initialValues[1],
|
|
39
|
+
sliderLength: defaultSliderLength
|
|
40
|
+
};
|
|
41
|
+
this.subscribePanResponder();
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
subscribePanResponder = () => {
|
|
45
|
+
const customPanResponder = (start, move, end) => PanResponder.create({
|
|
46
|
+
onStartShouldSetPanResponder: () => true,
|
|
47
|
+
onStartShouldSetPanResponderCapture: () => true,
|
|
48
|
+
onMoveShouldSetPanResponder: () => true,
|
|
49
|
+
onMoveShouldSetPanResponderCapture: () => true,
|
|
50
|
+
onPanResponderGrant: () => start(),
|
|
51
|
+
onPanResponderMove: (evt, gestureState) => move(gestureState),
|
|
52
|
+
onPanResponderTerminationRequest: () => false,
|
|
53
|
+
onPanResponderRelease: (evt, gestureState) => end(gestureState),
|
|
54
|
+
onPanResponderTerminate: (evt, gestureState) => end(gestureState),
|
|
55
|
+
onShouldBlockNativeResponder: () => true,
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
this._panResponderBetween = customPanResponder(
|
|
59
|
+
(gestureState) => {
|
|
60
|
+
this.startOne(gestureState);
|
|
61
|
+
this.startTwo(gestureState);
|
|
62
|
+
},
|
|
63
|
+
(gestureState) => {
|
|
64
|
+
this.moveOne(gestureState);
|
|
65
|
+
this.moveTwo(gestureState);
|
|
66
|
+
},
|
|
67
|
+
(gestureState) => {
|
|
68
|
+
this.endOne(gestureState);
|
|
69
|
+
this.endTwo(gestureState);
|
|
70
|
+
},
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
this._panResponderOne = customPanResponder(
|
|
74
|
+
this.startOne,
|
|
75
|
+
this.moveOne,
|
|
76
|
+
this.endOne,
|
|
77
|
+
);
|
|
78
|
+
this._panResponderTwo = customPanResponder(
|
|
79
|
+
this.startTwo,
|
|
80
|
+
this.moveTwo,
|
|
81
|
+
this.endTwo,
|
|
82
|
+
);
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
startOne = () => {
|
|
86
|
+
const { enabledOne, onChangeStart } = this.props;
|
|
87
|
+
const { onePressed } = this.state;
|
|
88
|
+
if (enabledOne) {
|
|
89
|
+
onChangeStart();
|
|
90
|
+
this.setState({
|
|
91
|
+
onePressed: !onePressed,
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
startTwo = () => {
|
|
97
|
+
const { enabledTwo, onChangeStart } = this.props;
|
|
98
|
+
const { twoPressed } = this.state;
|
|
99
|
+
if (enabledTwo) {
|
|
100
|
+
onChangeStart();
|
|
101
|
+
this.setState({
|
|
102
|
+
twoPressed: !twoPressed,
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
moveOne = (gestureState) => {
|
|
108
|
+
const {
|
|
109
|
+
enabledOne,
|
|
110
|
+
vertical,
|
|
111
|
+
allowOverlap,
|
|
112
|
+
minMarkerOverlapDistance,
|
|
113
|
+
// sliderLength,
|
|
114
|
+
touchDimensions,
|
|
115
|
+
snapped,
|
|
116
|
+
onChange,
|
|
117
|
+
onMarkersPosition,
|
|
118
|
+
allowRange = [],
|
|
119
|
+
min,
|
|
120
|
+
max
|
|
121
|
+
} = this.props;
|
|
122
|
+
const {
|
|
123
|
+
pastOne,
|
|
124
|
+
positionTwo,
|
|
125
|
+
valueOne,
|
|
126
|
+
valueTwo,
|
|
127
|
+
sliderLength
|
|
128
|
+
} = this.state;
|
|
129
|
+
if (!enabledOne) {
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
const accumDistance = vertical
|
|
134
|
+
? -gestureState.dy
|
|
135
|
+
: gestureState.dx;
|
|
136
|
+
const accumDistanceDisplacement = vertical
|
|
137
|
+
? gestureState.dx
|
|
138
|
+
: gestureState.dy;
|
|
139
|
+
|
|
140
|
+
const unconfined = I18nManager.isRTL
|
|
141
|
+
? pastOne - accumDistance
|
|
142
|
+
: accumDistance + pastOne;
|
|
143
|
+
const bottom = 0;
|
|
144
|
+
const trueTop = positionTwo
|
|
145
|
+
- (allowOverlap
|
|
146
|
+
? 0
|
|
147
|
+
: minMarkerOverlapDistance > 0
|
|
148
|
+
? minMarkerOverlapDistance
|
|
149
|
+
: this.stepLength);
|
|
150
|
+
const top = trueTop === 0 ? 0 : trueTop || sliderLength;
|
|
151
|
+
const confined = unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
|
|
152
|
+
const { slipDisplacement } = touchDimensions;
|
|
153
|
+
|
|
154
|
+
if (
|
|
155
|
+
Math.abs(accumDistanceDisplacement) < slipDisplacement
|
|
156
|
+
|| !slipDisplacement
|
|
157
|
+
) {
|
|
158
|
+
const value = positionToValue(
|
|
159
|
+
confined,
|
|
160
|
+
this.optionsArray,
|
|
161
|
+
sliderLength,
|
|
162
|
+
);
|
|
163
|
+
|
|
164
|
+
if (allowRange?.length > 0 && value < get(allowRange, '[0]', min)) return;
|
|
165
|
+
if (allowRange?.length > 1 && value > get(allowRange, '[1]', max)) return;
|
|
166
|
+
|
|
167
|
+
const snappedValue = valueToPosition(
|
|
168
|
+
value,
|
|
169
|
+
this.optionsArray,
|
|
170
|
+
sliderLength,
|
|
171
|
+
);
|
|
172
|
+
|
|
173
|
+
this.setState({
|
|
174
|
+
positionOne: snapped ? snappedValue : confined,
|
|
175
|
+
});
|
|
176
|
+
|
|
177
|
+
if (value !== valueOne) {
|
|
178
|
+
this.setState(
|
|
179
|
+
{
|
|
180
|
+
valueOne: value,
|
|
181
|
+
},
|
|
182
|
+
() => {
|
|
183
|
+
const {
|
|
184
|
+
valueOne: newValueOne,
|
|
185
|
+
positionOne: newPositionOne
|
|
186
|
+
} = this.state;
|
|
187
|
+
const change = [newValueOne];
|
|
188
|
+
if (valueTwo) {
|
|
189
|
+
change.push(valueTwo);
|
|
190
|
+
}
|
|
191
|
+
onChange(change);
|
|
192
|
+
|
|
193
|
+
onMarkersPosition([
|
|
194
|
+
newPositionOne,
|
|
195
|
+
positionTwo,
|
|
196
|
+
]);
|
|
197
|
+
},
|
|
198
|
+
);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
moveTwo = (gestureState) => {
|
|
204
|
+
const {
|
|
205
|
+
enabledTwo,
|
|
206
|
+
vertical,
|
|
207
|
+
allowOverlap,
|
|
208
|
+
minMarkerOverlapDistance,
|
|
209
|
+
// sliderLength,
|
|
210
|
+
touchDimensions,
|
|
211
|
+
snapped,
|
|
212
|
+
onChange,
|
|
213
|
+
onMarkersPosition
|
|
214
|
+
} = this.props;
|
|
215
|
+
const {
|
|
216
|
+
pastTwo,
|
|
217
|
+
positionOne,
|
|
218
|
+
sliderLength,
|
|
219
|
+
valueTwo,
|
|
220
|
+
valueOne,
|
|
221
|
+
} = this.state;
|
|
222
|
+
if (!enabledTwo) {
|
|
223
|
+
return;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
const accumDistance = vertical
|
|
227
|
+
? -gestureState.dy
|
|
228
|
+
: gestureState.dx;
|
|
229
|
+
const accumDistanceDisplacement = vertical
|
|
230
|
+
? gestureState.dx
|
|
231
|
+
: gestureState.dy;
|
|
232
|
+
|
|
233
|
+
const unconfined = I18nManager.isRTL
|
|
234
|
+
? pastTwo - accumDistance
|
|
235
|
+
: accumDistance + pastTwo;
|
|
236
|
+
const bottom = positionOne
|
|
237
|
+
+ (allowOverlap
|
|
238
|
+
? 0
|
|
239
|
+
: minMarkerOverlapDistance > 0
|
|
240
|
+
? minMarkerOverlapDistance
|
|
241
|
+
: this.stepLength);
|
|
242
|
+
const top = sliderLength;
|
|
243
|
+
const confined = unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
|
|
244
|
+
const { slipDisplacement } = touchDimensions;
|
|
245
|
+
|
|
246
|
+
if (
|
|
247
|
+
Math.abs(accumDistanceDisplacement) < slipDisplacement
|
|
248
|
+
|| !slipDisplacement
|
|
249
|
+
) {
|
|
250
|
+
const value = positionToValue(
|
|
251
|
+
confined,
|
|
252
|
+
this.optionsArray,
|
|
253
|
+
sliderLength,
|
|
254
|
+
);
|
|
255
|
+
|
|
256
|
+
const snappedValue = valueToPosition(
|
|
257
|
+
value,
|
|
258
|
+
this.optionsArray,
|
|
259
|
+
sliderLength,
|
|
260
|
+
);
|
|
261
|
+
|
|
262
|
+
this.setState({
|
|
263
|
+
positionTwo: snapped ? snappedValue : confined,
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
if (value !== valueTwo) {
|
|
267
|
+
this.setState(
|
|
268
|
+
{
|
|
269
|
+
valueTwo: value,
|
|
270
|
+
},
|
|
271
|
+
() => {
|
|
272
|
+
console.log(valueOne);
|
|
273
|
+
const {
|
|
274
|
+
valueTwo: newValueTwo,
|
|
275
|
+
positionTwo: newPositionTwo
|
|
276
|
+
} = this.state;
|
|
277
|
+
onChange([
|
|
278
|
+
valueOne,
|
|
279
|
+
newValueTwo,
|
|
280
|
+
]);
|
|
281
|
+
|
|
282
|
+
onMarkersPosition([
|
|
283
|
+
positionOne,
|
|
284
|
+
newPositionTwo,
|
|
285
|
+
]);
|
|
286
|
+
},
|
|
287
|
+
);
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
};
|
|
291
|
+
|
|
292
|
+
endOne = (gestureState) => {
|
|
293
|
+
const { onToggleOne, onChangeFinish } = this.props;
|
|
294
|
+
const {
|
|
295
|
+
positionOne, onePressed, valueOne, valueTwo
|
|
296
|
+
} = this.state;
|
|
297
|
+
if (gestureState.moveX === 0 && onToggleOne) {
|
|
298
|
+
onToggleOne();
|
|
299
|
+
return;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
this.setState(
|
|
303
|
+
{
|
|
304
|
+
pastOne: positionOne,
|
|
305
|
+
onePressed: !onePressed,
|
|
306
|
+
},
|
|
307
|
+
() => {
|
|
308
|
+
const change = [valueOne];
|
|
309
|
+
if (valueTwo) {
|
|
310
|
+
change.push(valueTwo);
|
|
311
|
+
}
|
|
312
|
+
onChangeFinish(change);
|
|
313
|
+
},
|
|
314
|
+
);
|
|
315
|
+
};
|
|
316
|
+
|
|
317
|
+
endTwo = (gestureState) => {
|
|
318
|
+
const { onToggleTwo, onChangeFinish } = this.props;
|
|
319
|
+
const {
|
|
320
|
+
twoPressed, positionTwo, valueOne, valueTwo
|
|
321
|
+
} = this.state;
|
|
322
|
+
if (gestureState.moveX === 0 && onToggleTwo) {
|
|
323
|
+
onToggleTwo();
|
|
324
|
+
return;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
this.setState(
|
|
328
|
+
{
|
|
329
|
+
twoPressed: !twoPressed,
|
|
330
|
+
pastTwo: positionTwo,
|
|
331
|
+
},
|
|
332
|
+
() => {
|
|
333
|
+
onChangeFinish([
|
|
334
|
+
valueOne,
|
|
335
|
+
valueTwo,
|
|
336
|
+
]);
|
|
337
|
+
},
|
|
338
|
+
);
|
|
339
|
+
};
|
|
340
|
+
|
|
341
|
+
componentDidUpdate(prevProps, prevState) {
|
|
342
|
+
const {
|
|
343
|
+
positionOne: prevPositionOne,
|
|
344
|
+
positionTwo: prevPositionTwo,
|
|
345
|
+
} = prevState;
|
|
346
|
+
|
|
347
|
+
const {
|
|
348
|
+
positionOne, positionTwo, onePressed, twoPressed, sliderLength
|
|
349
|
+
} = this.state;
|
|
350
|
+
const {
|
|
351
|
+
onMarkersPosition, min, max, step, values, optionsArray
|
|
352
|
+
} = this.props;
|
|
353
|
+
|
|
354
|
+
if (
|
|
355
|
+
typeof positionOne === 'undefined'
|
|
356
|
+
&& typeof positionTwo !== 'undefined'
|
|
357
|
+
) {
|
|
358
|
+
return;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
if (positionOne !== prevPositionOne || positionTwo !== prevPositionTwo) {
|
|
362
|
+
onMarkersPosition([positionOne, positionTwo]);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
if (onePressed || twoPressed) {
|
|
366
|
+
return;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
const nextState = {};
|
|
370
|
+
if (
|
|
371
|
+
prevProps.min !== min
|
|
372
|
+
|| prevProps.max !== max
|
|
373
|
+
|| prevProps.step !== step
|
|
374
|
+
|| prevProps.values[0] !== values[0]
|
|
375
|
+
|| prevState.sliderLength !== sliderLength
|
|
376
|
+
|| prevProps.values[1] !== values[1]
|
|
377
|
+
|| (prevState.sliderLength !== sliderLength
|
|
378
|
+
&& prevProps.values[1])
|
|
379
|
+
) {
|
|
380
|
+
this.optionsArray = optionsArray
|
|
381
|
+
|| createArray(min, max, step);
|
|
382
|
+
|
|
383
|
+
this.stepLength = sliderLength / this.optionsArray.length;
|
|
384
|
+
|
|
385
|
+
const positionOneValue = valueToPosition(
|
|
386
|
+
values[0],
|
|
387
|
+
this.optionsArray,
|
|
388
|
+
sliderLength,
|
|
389
|
+
);
|
|
390
|
+
// eslint-disable-next-line prefer-destructuring
|
|
391
|
+
nextState.valueOne = values[0];
|
|
392
|
+
nextState.pastOne = positionOneValue;
|
|
393
|
+
nextState.positionOne = positionOneValue;
|
|
394
|
+
|
|
395
|
+
const positionTwoValue = valueToPosition(
|
|
396
|
+
values[1],
|
|
397
|
+
this.optionsArray,
|
|
398
|
+
sliderLength,
|
|
399
|
+
);
|
|
400
|
+
// eslint-disable-next-line prefer-destructuring
|
|
401
|
+
nextState.valueTwo = values[1];
|
|
402
|
+
nextState.pastTwo = positionTwoValue;
|
|
403
|
+
nextState.positionTwo = positionTwoValue;
|
|
404
|
+
|
|
405
|
+
// eslint-disable-next-line react/no-did-update-set-state
|
|
406
|
+
this.setState(nextState);
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
onContentLayout(e) {
|
|
411
|
+
const { vertical, length } = this.props;
|
|
412
|
+
if (!length) {
|
|
413
|
+
const layoutLength = vertical
|
|
414
|
+
? e.nativeEvent.layout.height
|
|
415
|
+
: e.nativeEvent.layout.width;
|
|
416
|
+
this.setState({
|
|
417
|
+
sliderLength: layoutLength
|
|
418
|
+
});
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
render() {
|
|
423
|
+
const {
|
|
424
|
+
positionOne, positionTwo, onePressed, valueOne, twoPressed, valueTwo, sliderLength
|
|
425
|
+
} = this.state;
|
|
426
|
+
const {
|
|
427
|
+
style,
|
|
428
|
+
selectedStyle,
|
|
429
|
+
unselectedStyle,
|
|
430
|
+
// sliderLength,
|
|
431
|
+
markerOffsetX,
|
|
432
|
+
markerOffsetY,
|
|
433
|
+
values,
|
|
434
|
+
customMarker,
|
|
435
|
+
customMarkerLeft,
|
|
436
|
+
customMarkerRight,
|
|
437
|
+
isMarkersSeparated = false,
|
|
438
|
+
customLabel,
|
|
439
|
+
touchDimensions,
|
|
440
|
+
containerStyle,
|
|
441
|
+
vertical,
|
|
442
|
+
trackStyle,
|
|
443
|
+
markerContainerStyle,
|
|
444
|
+
enabledOne,
|
|
445
|
+
enabledTwo,
|
|
446
|
+
markerStyle,
|
|
447
|
+
pressedMarkerStyle,
|
|
448
|
+
disabledMarkerStyle,
|
|
449
|
+
valuePrefix,
|
|
450
|
+
valueSuffix,
|
|
451
|
+
enableLabel,
|
|
452
|
+
imageBackgroundSource
|
|
453
|
+
} = this.props;
|
|
454
|
+
const twoMarkers = values.length === 2; // when allowOverlap, positionTwo could be 0, identified as string '0' and throwing 'RawText 0 needs to be wrapped in <Text>' error
|
|
455
|
+
|
|
456
|
+
const trackOneLength = positionOne;
|
|
457
|
+
const trackOneStyle = twoMarkers
|
|
458
|
+
? unselectedStyle
|
|
459
|
+
: selectedStyle || styles.selectedTrack;
|
|
460
|
+
const trackThreeLength = twoMarkers ? sliderLength - positionTwo : 0;
|
|
461
|
+
const trackThreeStyle = unselectedStyle;
|
|
462
|
+
const trackTwoLength = sliderLength - trackOneLength - trackThreeLength;
|
|
463
|
+
const trackTwoStyle = twoMarkers
|
|
464
|
+
? selectedStyle || styles.selectedTrack
|
|
465
|
+
: unselectedStyle;
|
|
466
|
+
const Marker = customMarker;
|
|
467
|
+
|
|
468
|
+
const MarkerLeft = customMarkerLeft;
|
|
469
|
+
const MarkerRight = customMarkerRight;
|
|
470
|
+
|
|
471
|
+
const Label = customLabel;
|
|
472
|
+
|
|
473
|
+
const {
|
|
474
|
+
borderRadius,
|
|
475
|
+
} = touchDimensions;
|
|
476
|
+
const touchStyle = {
|
|
477
|
+
borderRadius: borderRadius || 0,
|
|
478
|
+
};
|
|
479
|
+
|
|
480
|
+
const markerContainerOne = {
|
|
481
|
+
top: markerOffsetY - 24,
|
|
482
|
+
left: trackOneLength + markerOffsetX - 24,
|
|
483
|
+
};
|
|
484
|
+
|
|
485
|
+
const markerContainerTwo = {
|
|
486
|
+
top: markerOffsetY - 24,
|
|
487
|
+
right: trackThreeLength - markerOffsetX - 24,
|
|
488
|
+
};
|
|
489
|
+
|
|
490
|
+
const newContainerStyle = [styles.container, containerStyle];
|
|
491
|
+
|
|
492
|
+
if (vertical) {
|
|
493
|
+
newContainerStyle.push({
|
|
494
|
+
transform: [{ rotate: '-90deg' }],
|
|
495
|
+
});
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
const body = (
|
|
499
|
+
<View style={{ alignItems: 'center' }}>
|
|
500
|
+
<View style={[styles.fullTrack, { width: sliderLength }]}>
|
|
501
|
+
<View
|
|
502
|
+
style={[
|
|
503
|
+
styles.track,
|
|
504
|
+
trackStyle,
|
|
505
|
+
trackOneStyle,
|
|
506
|
+
{ width: trackOneLength },
|
|
507
|
+
]}
|
|
508
|
+
/>
|
|
509
|
+
<View
|
|
510
|
+
style={[
|
|
511
|
+
styles.track,
|
|
512
|
+
trackStyle,
|
|
513
|
+
trackTwoStyle,
|
|
514
|
+
{ width: trackTwoLength },
|
|
515
|
+
]}
|
|
516
|
+
{...(twoMarkers ? this._panResponderBetween.panHandlers : {})}
|
|
517
|
+
/>
|
|
518
|
+
{twoMarkers && (
|
|
519
|
+
<View
|
|
520
|
+
style={[
|
|
521
|
+
styles.track,
|
|
522
|
+
trackStyle,
|
|
523
|
+
trackThreeStyle,
|
|
524
|
+
{ width: trackThreeLength },
|
|
525
|
+
]}
|
|
526
|
+
/>
|
|
527
|
+
)}
|
|
528
|
+
<View
|
|
529
|
+
style={[
|
|
530
|
+
styles.markerContainer,
|
|
531
|
+
markerContainerOne,
|
|
532
|
+
markerContainerStyle,
|
|
533
|
+
positionOne > sliderLength / 2 && styles.topMarkerContainer,
|
|
534
|
+
]}
|
|
535
|
+
>
|
|
536
|
+
<View
|
|
537
|
+
style={[styles.touch, touchStyle]}
|
|
538
|
+
ref={(component) => (this._markerOne = component)}
|
|
539
|
+
{...this._panResponderOne.panHandlers}
|
|
540
|
+
>
|
|
541
|
+
{isMarkersSeparated === false
|
|
542
|
+
? (
|
|
543
|
+
<Marker
|
|
544
|
+
enabled={enabledOne}
|
|
545
|
+
pressed={onePressed}
|
|
546
|
+
markerStyle={markerStyle}
|
|
547
|
+
pressedMarkerStyle={pressedMarkerStyle}
|
|
548
|
+
disabledMarkerStyle={disabledMarkerStyle}
|
|
549
|
+
currentValue={valueOne}
|
|
550
|
+
valuePrefix={valuePrefix}
|
|
551
|
+
valueSuffix={valueSuffix}
|
|
552
|
+
/>
|
|
553
|
+
) : (
|
|
554
|
+
<MarkerLeft
|
|
555
|
+
enabled={enabledOne}
|
|
556
|
+
pressed={onePressed}
|
|
557
|
+
markerStyle={markerStyle}
|
|
558
|
+
pressedMarkerStyle={pressedMarkerStyle}
|
|
559
|
+
disabledMarkerStyle={disabledMarkerStyle}
|
|
560
|
+
currentValue={valueOne}
|
|
561
|
+
valuePrefix={valuePrefix}
|
|
562
|
+
valueSuffix={valueSuffix}
|
|
563
|
+
/>
|
|
564
|
+
)}
|
|
565
|
+
</View>
|
|
566
|
+
</View>
|
|
567
|
+
{twoMarkers && positionOne !== sliderLength && (
|
|
568
|
+
<View
|
|
569
|
+
style={[
|
|
570
|
+
styles.markerContainer,
|
|
571
|
+
markerContainerTwo,
|
|
572
|
+
markerContainerStyle,
|
|
573
|
+
]}
|
|
574
|
+
>
|
|
575
|
+
<View
|
|
576
|
+
style={[styles.touch, touchStyle]}
|
|
577
|
+
ref={(component) => (this._markerTwo = component)}
|
|
578
|
+
{...this._panResponderTwo.panHandlers}
|
|
579
|
+
>
|
|
580
|
+
{isMarkersSeparated === false
|
|
581
|
+
? (
|
|
582
|
+
<Marker
|
|
583
|
+
pressed={twoPressed}
|
|
584
|
+
markerStyle={markerStyle}
|
|
585
|
+
pressedMarkerStyle={pressedMarkerStyle}
|
|
586
|
+
disabledMarkerStyle={disabledMarkerStyle}
|
|
587
|
+
currentValue={valueTwo}
|
|
588
|
+
enabled={enabledTwo}
|
|
589
|
+
valuePrefix={valuePrefix}
|
|
590
|
+
valueSuffix={valueSuffix}
|
|
591
|
+
/>
|
|
592
|
+
) : (
|
|
593
|
+
<MarkerRight
|
|
594
|
+
pressed={twoPressed}
|
|
595
|
+
markerStyle={markerStyle}
|
|
596
|
+
pressedMarkerStyle={pressedMarkerStyle}
|
|
597
|
+
disabledMarkerStyle={disabledMarkerStyle}
|
|
598
|
+
currentValue={valueTwo}
|
|
599
|
+
enabled={enabledTwo}
|
|
600
|
+
valuePrefix={valuePrefix}
|
|
601
|
+
valueSuffix={valueSuffix}
|
|
602
|
+
/>
|
|
603
|
+
)}
|
|
604
|
+
</View>
|
|
605
|
+
</View>
|
|
606
|
+
)}
|
|
607
|
+
</View>
|
|
608
|
+
</View>
|
|
609
|
+
);
|
|
610
|
+
|
|
611
|
+
return (
|
|
612
|
+
<View style={style} onLayout={(e) => this.onContentLayout(e)}>
|
|
613
|
+
{enableLabel && (
|
|
614
|
+
<Label
|
|
615
|
+
oneMarkerValue={valueOne}
|
|
616
|
+
twoMarkerValue={valueTwo}
|
|
617
|
+
oneMarkerLeftPosition={positionOne}
|
|
618
|
+
twoMarkerLeftPosition={positionTwo}
|
|
619
|
+
oneMarkerPressed={onePressed}
|
|
620
|
+
twoMarkerPressed={twoPressed}
|
|
621
|
+
/>
|
|
622
|
+
)}
|
|
623
|
+
{imageBackgroundSource && (
|
|
624
|
+
<ImageBackground
|
|
625
|
+
source={imageBackgroundSource}
|
|
626
|
+
style={[styles.full, newContainerStyle]}
|
|
627
|
+
>
|
|
628
|
+
{body}
|
|
629
|
+
</ImageBackground>
|
|
630
|
+
)}
|
|
631
|
+
{!imageBackgroundSource && (
|
|
632
|
+
<View style={newContainerStyle}>{body}</View>
|
|
633
|
+
)}
|
|
634
|
+
</View>
|
|
635
|
+
);
|
|
636
|
+
}
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
const styles = StyleSheet.create({
|
|
640
|
+
container: {
|
|
641
|
+
position: 'relative',
|
|
642
|
+
height: 50,
|
|
643
|
+
justifyContent: 'center'
|
|
644
|
+
},
|
|
645
|
+
fullTrack: {
|
|
646
|
+
flexDirection: 'row',
|
|
647
|
+
},
|
|
648
|
+
track: {
|
|
649
|
+
height: 4,
|
|
650
|
+
backgroundColor: '#A7A7A7',
|
|
651
|
+
},
|
|
652
|
+
selectedTrack: {
|
|
653
|
+
backgroundColor: Colors.primary,
|
|
654
|
+
},
|
|
655
|
+
markerContainer: {
|
|
656
|
+
position: 'absolute',
|
|
657
|
+
width: 48,
|
|
658
|
+
height: 48,
|
|
659
|
+
backgroundColor: 'transparent',
|
|
660
|
+
justifyContent: 'center',
|
|
661
|
+
alignItems: 'center',
|
|
662
|
+
},
|
|
663
|
+
topMarkerContainer: {
|
|
664
|
+
zIndex: 1,
|
|
665
|
+
},
|
|
666
|
+
touch: {
|
|
667
|
+
backgroundColor: 'transparent',
|
|
668
|
+
justifyContent: 'center',
|
|
669
|
+
alignItems: 'center',
|
|
670
|
+
alignSelf: 'stretch',
|
|
671
|
+
},
|
|
672
|
+
full: { width: '100%', height: '100%' }
|
|
673
|
+
});
|
|
674
|
+
|
|
675
|
+
Slider.defaultProps = {
|
|
676
|
+
values: [0],
|
|
677
|
+
onChangeStart: () => { },
|
|
678
|
+
onChange: () => { },
|
|
679
|
+
onChangeFinish: () => { },
|
|
680
|
+
onMarkersPosition: () => { },
|
|
681
|
+
step: 1,
|
|
682
|
+
min: 0,
|
|
683
|
+
max: 10,
|
|
684
|
+
touchDimensions: {
|
|
685
|
+
height: 50,
|
|
686
|
+
width: 50,
|
|
687
|
+
borderRadius: 15,
|
|
688
|
+
slipDisplacement: 200,
|
|
689
|
+
},
|
|
690
|
+
customMarker: DefaultMarker,
|
|
691
|
+
customMarkerLeft: DefaultMarker,
|
|
692
|
+
customMarkerRight: DefaultMarker,
|
|
693
|
+
customLabel: DefaultLabel,
|
|
694
|
+
markerOffsetX: 0,
|
|
695
|
+
markerOffsetY: 0,
|
|
696
|
+
onToggleOne: undefined,
|
|
697
|
+
onToggleTwo: undefined,
|
|
698
|
+
enabledOne: true,
|
|
699
|
+
enabledTwo: true,
|
|
700
|
+
allowOverlap: false,
|
|
701
|
+
snapped: false,
|
|
702
|
+
vertical: false,
|
|
703
|
+
minMarkerOverlapDistance: 0,
|
|
704
|
+
length: 280
|
|
705
|
+
};
|
|
706
|
+
|
|
707
|
+
Slider.propTypes = {
|
|
708
|
+
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
709
|
+
selectedStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
710
|
+
unselectedStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
711
|
+
markerOffsetX: PropTypes.number,
|
|
712
|
+
markerOffsetY: PropTypes.number,
|
|
713
|
+
values: PropTypes.arrayOf(PropTypes.number),
|
|
714
|
+
customMarker: PropTypes.func,
|
|
715
|
+
customMarkerLeft: PropTypes.func,
|
|
716
|
+
customMarkerRight: PropTypes.func,
|
|
717
|
+
isMarkersSeparated: PropTypes.bool,
|
|
718
|
+
touchDimensions: PropTypes.object,
|
|
719
|
+
containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
720
|
+
vertical: PropTypes.bool,
|
|
721
|
+
trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
722
|
+
markerContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
723
|
+
enabledOne: PropTypes.bool,
|
|
724
|
+
enabledTwo: PropTypes.bool,
|
|
725
|
+
onChangeStart: PropTypes.func,
|
|
726
|
+
onChange: PropTypes.func,
|
|
727
|
+
onChangeFinish: PropTypes.func,
|
|
728
|
+
onMarkersPosition: PropTypes.func,
|
|
729
|
+
step: PropTypes.number,
|
|
730
|
+
min: PropTypes.number,
|
|
731
|
+
max: PropTypes.number,
|
|
732
|
+
customLabel: PropTypes.any,
|
|
733
|
+
onToggleOne: PropTypes.func,
|
|
734
|
+
onToggleTwo: PropTypes.func,
|
|
735
|
+
allowOverlap: PropTypes.bool,
|
|
736
|
+
snapped: PropTypes.bool,
|
|
737
|
+
minMarkerOverlapDistance: PropTypes.number,
|
|
738
|
+
length: PropTypes.number,
|
|
739
|
+
allowRange: PropTypes.arrayOf(PropTypes.number)
|
|
740
|
+
};
|