@momo-kits/slider 0.0.34-beta → 0.0.36-beta

package/Slider.web.js

@@ -1 +1,741 @@
-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 _DefaultMarker=_interopRequireDefault(require("./DefaultMarker"));var _DefaultLabel=_interopRequireDefault(require("./DefaultLabel"));var _converters=require("./converters");var _colors=_interopRequireDefault(require("../../colors"));var _jsxFileName="/Users/trinh.ho2/momo-folk/kits/src/libs/slider/dist/Slider.web.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);});console.warn('initialValues',initialValues);_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:500,columnNumber:13}},_react.default.createElement(_reactNative.View,{style:[styles.fullTrack,{width:sliderLength}],__source:{fileName:_jsxFileName,lineNumber:501,columnNumber:17}},_react.default.createElement(_reactNative.View,{style:[styles.track,trackStyle,trackOneStyle,{width:trackOneLength}],__source:{fileName:_jsxFileName,lineNumber:502,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:510,columnNumber:21}})),twoMarkers&&_react.default.createElement(_reactNative.View,{style:[styles.track,trackStyle,trackThreeStyle,{width:trackThreeLength}],__source:{fileName:_jsxFileName,lineNumber:520,columnNumber:25}}),_react.default.createElement(_reactNative.View,{style:[styles.markerContainer,markerContainerOne,markerContainerStyle,positionOne>sliderLength/2&&styles.topMarkerContainer],__source:{fileName:_jsxFileName,lineNumber:529,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:537,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:544,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:555,columnNumber:37}}))),twoMarkers&&positionOne!==sliderLength&&_react.default.createElement(_reactNative.View,{style:[styles.markerContainer,markerContainerTwo,markerContainerStyle],__source:{fileName:_jsxFileName,lineNumber:569,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:576,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:583,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:594,columnNumber:41}})))));return _react.default.createElement(_reactNative.View,{style:style,onLayout:function onLayout(e){return _this2.onContentLayout(e);},__source:{fileName:_jsxFileName,lineNumber:613,columnNumber:13}},enableLabel&&_react.default.createElement(Label,{oneMarkerValue:valueOne,twoMarkerValue:valueTwo,oneMarkerLeftPosition:positionOne,twoMarkerLeftPosition:positionTwo,oneMarkerPressed:onePressed,twoMarkerPressed:twoPressed,__source:{fileName:_jsxFileName,lineNumber:615,columnNumber:21}}),imageBackgroundSource&&_react.default.createElement(_reactNative.ImageBackground,{source:imageBackgroundSource,style:[styles.full,newContainerStyle],__source:{fileName:_jsxFileName,lineNumber:625,columnNumber:21}},body),!imageBackgroundSource&&_react.default.createElement(_reactNative.View,{style:newContainerStyle,__source:{fileName:_jsxFileName,lineNumber:633,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:_colors.default.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)};
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+    StyleSheet,
+    PanResponder,
+    View,
+    I18nManager,
+    ImageBackground,
+} from 'react-native';
+import { get } from 'lodash';
+import DefaultMarker from './DefaultMarker';
+import DefaultLabel from './DefaultLabel';
+import { createArray, valueToPosition, positionToValue } from './converters';
+import Colors from '../../colors';
+
+export default class Slider extends Component {
+    constructor(props) {
+        super(props);
+        const {
+            optionsArray,
+            min,
+            max,
+            step,
+            length,
+            values
+        } = this.props;
+        this.optionsArray = optionsArray
+            || createArray(min, max, step);
+        const defaultSliderLength = length;
+        this.stepLength = defaultSliderLength / this.optionsArray.length;
+        const initialValues = values.map((value) => valueToPosition(value, this.optionsArray, defaultSliderLength));
+        console.warn('initialValues', initialValues);
+        this.state = {
+            valueOne: values[0],
+            valueTwo: values[1],
+            pastOne: initialValues[0],
+            pastTwo: initialValues[1],
+            positionOne: initialValues[0],
+            positionTwo: initialValues[1],
+            sliderLength: defaultSliderLength
+        };
+        this.subscribePanResponder();
+    }
+
+    subscribePanResponder = () => {
+        const customPanResponder = (start, move, end) => PanResponder.create({
+            onStartShouldSetPanResponder: () => true,
+            onStartShouldSetPanResponderCapture: () => true,
+            onMoveShouldSetPanResponder: () => true,
+            onMoveShouldSetPanResponderCapture: () => true,
+            onPanResponderGrant: () => start(),
+            onPanResponderMove: (evt, gestureState) => move(gestureState),
+            onPanResponderTerminationRequest: () => false,
+            onPanResponderRelease: (evt, gestureState) => end(gestureState),
+            onPanResponderTerminate: (evt, gestureState) => end(gestureState),
+            onShouldBlockNativeResponder: () => true,
+        });
+
+        this._panResponderBetween = customPanResponder(
+            (gestureState) => {
+                this.startOne(gestureState);
+                this.startTwo(gestureState);
+            },
+            (gestureState) => {
+                this.moveOne(gestureState);
+                this.moveTwo(gestureState);
+            },
+            (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,
+        );
+    };
+
+    startOne = () => {
+        const { enabledOne, onChangeStart } = this.props;
+        const { onePressed } = this.state;
+        if (enabledOne) {
+            onChangeStart();
+            this.setState({
+                onePressed: !onePressed,
+            });
+        }
+    };
+
+    startTwo = () => {
+        const { enabledTwo, onChangeStart } = this.props;
+        const { twoPressed } = this.state;
+        if (enabledTwo) {
+            onChangeStart();
+            this.setState({
+                twoPressed: !twoPressed,
+            });
+        }
+    };
+
+    moveOne = (gestureState) => {
+        const {
+            enabledOne,
+            vertical,
+            allowOverlap,
+            minMarkerOverlapDistance,
+            //   sliderLength,
+            touchDimensions,
+            snapped,
+            onChange,
+            onMarkersPosition,
+            allowRange = [],
+            min,
+            max
+        } = this.props;
+        const {
+            pastOne,
+            positionTwo,
+            valueOne,
+            valueTwo,
+            sliderLength
+        } = this.state;
+        if (!enabledOne) {
+            return;
+        }
+
+        const accumDistance = vertical
+            ? -gestureState.dy
+            : gestureState.dx;
+        const accumDistanceDisplacement = vertical
+            ? gestureState.dx
+            : gestureState.dy;
+
+        const unconfined = I18nManager.isRTL
+            ? pastOne - accumDistance
+            : accumDistance + pastOne;
+        const bottom = 0;
+        const trueTop = positionTwo
+            - (allowOverlap
+                ? 0
+                : minMarkerOverlapDistance > 0
+                    ? minMarkerOverlapDistance
+                    : this.stepLength);
+        const top = trueTop === 0 ? 0 : trueTop || sliderLength;
+        const confined = unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
+        const { slipDisplacement } = touchDimensions;
+
+        if (
+            Math.abs(accumDistanceDisplacement) < slipDisplacement
+            || !slipDisplacement
+        ) {
+            const value = positionToValue(
+                confined,
+                this.optionsArray,
+                sliderLength,
+            );
+
+            if (allowRange?.length > 0 && value < get(allowRange, '[0]', min)) return;
+            if (allowRange?.length > 1 && value > get(allowRange, '[1]', max)) return;
+
+            const snappedValue = valueToPosition(
+                value,
+                this.optionsArray,
+                sliderLength,
+            );
+
+            this.setState({
+                positionOne: snapped ? snappedValue : confined,
+            });
+
+            if (value !== valueOne) {
+                this.setState(
+                    {
+                        valueOne: value,
+                    },
+                    () => {
+                        const {
+                            valueOne: newValueOne,
+                            positionOne: newPositionOne
+                        } = this.state;
+                        const change = [newValueOne];
+                        if (valueTwo) {
+                            change.push(valueTwo);
+                        }
+                        onChange(change);
+
+                        onMarkersPosition([
+                            newPositionOne,
+                            positionTwo,
+                        ]);
+                    },
+                );
+            }
+        }
+    };
+
+    moveTwo = (gestureState) => {
+        const {
+            enabledTwo,
+            vertical,
+            allowOverlap,
+            minMarkerOverlapDistance,
+            //   sliderLength,
+            touchDimensions,
+            snapped,
+            onChange,
+            onMarkersPosition
+        } = this.props;
+        const {
+            pastTwo,
+            positionOne,
+            sliderLength,
+            valueTwo,
+            valueOne,
+        } = this.state;
+        if (!enabledTwo) {
+            return;
+        }
+
+        const accumDistance = vertical
+            ? -gestureState.dy
+            : gestureState.dx;
+        const accumDistanceDisplacement = vertical
+            ? gestureState.dx
+            : gestureState.dy;
+
+        const unconfined = I18nManager.isRTL
+            ? pastTwo - accumDistance
+            : accumDistance + pastTwo;
+        const bottom = positionOne
+            + (allowOverlap
+                ? 0
+                : minMarkerOverlapDistance > 0
+                    ? minMarkerOverlapDistance
+                    : this.stepLength);
+        const top = sliderLength;
+        const confined = unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
+        const { slipDisplacement } = touchDimensions;
+
+        if (
+            Math.abs(accumDistanceDisplacement) < slipDisplacement
+            || !slipDisplacement
+        ) {
+            const value = positionToValue(
+                confined,
+                this.optionsArray,
+                sliderLength,
+            );
+
+            const snappedValue = valueToPosition(
+                value,
+                this.optionsArray,
+                sliderLength,
+            );
+
+            this.setState({
+                positionTwo: snapped ? snappedValue : confined,
+            });
+
+            if (value !== valueTwo) {
+                this.setState(
+                    {
+                        valueTwo: value,
+                    },
+                    () => {
+                        console.log(valueOne);
+                        const {
+                            valueTwo: newValueTwo,
+                            positionTwo: newPositionTwo
+                        } = this.state;
+                        onChange([
+                            valueOne,
+                            newValueTwo,
+                        ]);
+
+                        onMarkersPosition([
+                            positionOne,
+                            newPositionTwo,
+                        ]);
+                    },
+                );
+            }
+        }
+    };
+
+    endOne = (gestureState) => {
+        const { onToggleOne, onChangeFinish } = this.props;
+        const {
+            positionOne, onePressed, valueOne, valueTwo
+        } = this.state;
+        if (gestureState.moveX === 0 && onToggleOne) {
+            onToggleOne();
+            return;
+        }
+
+        this.setState(
+            {
+                pastOne: positionOne,
+                onePressed: !onePressed,
+            },
+            () => {
+                const change = [valueOne];
+                if (valueTwo) {
+                    change.push(valueTwo);
+                }
+                onChangeFinish(change);
+            },
+        );
+    };
+
+    endTwo = (gestureState) => {
+        const { onToggleTwo, onChangeFinish } = this.props;
+        const {
+            twoPressed, positionTwo, valueOne, valueTwo
+        } = this.state;
+        if (gestureState.moveX === 0 && onToggleTwo) {
+            onToggleTwo();
+            return;
+        }
+
+        this.setState(
+            {
+                twoPressed: !twoPressed,
+                pastTwo: positionTwo,
+            },
+            () => {
+                onChangeFinish([
+                    valueOne,
+                    valueTwo,
+                ]);
+            },
+        );
+    };
+
+    componentDidUpdate(prevProps, prevState) {
+        const {
+            positionOne: prevPositionOne,
+            positionTwo: prevPositionTwo,
+        } = prevState;
+
+        const {
+            positionOne, positionTwo, onePressed, twoPressed, sliderLength
+        } = this.state;
+        const {
+            onMarkersPosition, min, max, step, values, optionsArray
+        } = this.props;
+
+        if (
+            typeof positionOne === 'undefined'
+            && typeof positionTwo !== 'undefined'
+        ) {
+            return;
+        }
+
+        if (positionOne !== prevPositionOne || positionTwo !== prevPositionTwo) {
+            onMarkersPosition([positionOne, positionTwo]);
+        }
+
+        if (onePressed || twoPressed) {
+            return;
+        }
+
+        const 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
+                || createArray(min, max, step);
+
+            this.stepLength = sliderLength / this.optionsArray.length;
+
+            const positionOneValue = valueToPosition(
+                values[0],
+                this.optionsArray,
+                sliderLength,
+            );
+            // eslint-disable-next-line prefer-destructuring
+            nextState.valueOne = values[0];
+            nextState.pastOne = positionOneValue;
+            nextState.positionOne = positionOneValue;
+
+            const positionTwoValue = valueToPosition(
+                values[1],
+                this.optionsArray,
+                sliderLength,
+            );
+            // eslint-disable-next-line prefer-destructuring
+            nextState.valueTwo = values[1];
+            nextState.pastTwo = positionTwoValue;
+            nextState.positionTwo = positionTwoValue;
+
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState(nextState);
+        }
+    }
+
+    onContentLayout(e) {
+        const { vertical, length } = this.props;
+        if (!length) {
+            const layoutLength = vertical
+                ? e.nativeEvent.layout.height
+                : e.nativeEvent.layout.width;
+            this.setState({
+                sliderLength: layoutLength
+            });
+        }
+    }
+
+    render() {
+        const {
+            positionOne, positionTwo, onePressed, valueOne, twoPressed, valueTwo, sliderLength
+        } = this.state;
+        const {
+            style,
+            selectedStyle,
+            unselectedStyle,
+            //   sliderLength,
+            markerOffsetX,
+            markerOffsetY,
+            values,
+            customMarker,
+            customMarkerLeft,
+            customMarkerRight,
+            isMarkersSeparated = false,
+            customLabel,
+            touchDimensions,
+            containerStyle,
+            vertical,
+            trackStyle,
+            markerContainerStyle,
+            enabledOne,
+            enabledTwo,
+            markerStyle,
+            pressedMarkerStyle,
+            disabledMarkerStyle,
+            valuePrefix,
+            valueSuffix,
+            enableLabel,
+            imageBackgroundSource
+        } = this.props;
+        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
+
+        const trackOneLength = positionOne;
+        const trackOneStyle = twoMarkers
+            ? unselectedStyle
+            : selectedStyle || styles.selectedTrack;
+        const trackThreeLength = twoMarkers ? sliderLength - positionTwo : 0;
+        const trackThreeStyle = unselectedStyle;
+        const trackTwoLength = sliderLength - trackOneLength - trackThreeLength;
+        const trackTwoStyle = twoMarkers
+            ? selectedStyle || styles.selectedTrack
+            : unselectedStyle;
+        const Marker = customMarker;
+
+        const MarkerLeft = customMarkerLeft;
+        const MarkerRight = customMarkerRight;
+
+        const Label = customLabel;
+
+        const {
+            borderRadius,
+        } = touchDimensions;
+        const touchStyle = {
+            borderRadius: borderRadius || 0,
+        };
+
+        const markerContainerOne = {
+            top: markerOffsetY - 24,
+            left: trackOneLength + markerOffsetX - 24,
+        };
+
+        const markerContainerTwo = {
+            top: markerOffsetY - 24,
+            right: trackThreeLength - markerOffsetX - 24,
+        };
+
+        const newContainerStyle = [styles.container, containerStyle];
+
+        if (vertical) {
+            newContainerStyle.push({
+                transform: [{ rotate: '-90deg' }],
+            });
+        }
+
+        const body = (
+            <View style={{ alignItems: 'center' }}>
+                <View style={[styles.fullTrack, { width: sliderLength }]}>
+                    <View
+                        style={[
+                            styles.track,
+                            trackStyle,
+                            trackOneStyle,
+                            { width: trackOneLength },
+                        ]}
+                    />
+                    <View
+                        style={[
+                            styles.track,
+                            trackStyle,
+                            trackTwoStyle,
+                            { width: trackTwoLength },
+                        ]}
+                        {...(twoMarkers ? this._panResponderBetween.panHandlers : {})}
+                    />
+                    {twoMarkers && (
+                        <View
+                            style={[
+                                styles.track,
+                                trackStyle,
+                                trackThreeStyle,
+                                { width: trackThreeLength },
+                            ]}
+                        />
+                    )}
+                    <View
+                        style={[
+                            styles.markerContainer,
+                            markerContainerOne,
+                            markerContainerStyle,
+                            positionOne > sliderLength / 2 && styles.topMarkerContainer,
+                        ]}
+                    >
+                        <View
+                            style={[styles.touch, touchStyle]}
+                            ref={(component) => (this._markerOne = component)}
+                            {...this._panResponderOne.panHandlers}
+                        >
+                            {isMarkersSeparated === false
+                                ? (
+                                    <Marker
+                                        enabled={enabledOne}
+                                        pressed={onePressed}
+                                        markerStyle={markerStyle}
+                                        pressedMarkerStyle={pressedMarkerStyle}
+                                        disabledMarkerStyle={disabledMarkerStyle}
+                                        currentValue={valueOne}
+                                        valuePrefix={valuePrefix}
+                                        valueSuffix={valueSuffix}
+                                    />
+                                ) : (
+                                    <MarkerLeft
+                                        enabled={enabledOne}
+                                        pressed={onePressed}
+                                        markerStyle={markerStyle}
+                                        pressedMarkerStyle={pressedMarkerStyle}
+                                        disabledMarkerStyle={disabledMarkerStyle}
+                                        currentValue={valueOne}
+                                        valuePrefix={valuePrefix}
+                                        valueSuffix={valueSuffix}
+                                    />
+                                )}
+                        </View>
+                    </View>
+                    {twoMarkers && positionOne !== sliderLength && (
+                        <View
+                            style={[
+                                styles.markerContainer,
+                                markerContainerTwo,
+                                markerContainerStyle,
+                            ]}
+                        >
+                            <View
+                                style={[styles.touch, touchStyle]}
+                                ref={(component) => (this._markerTwo = component)}
+                                {...this._panResponderTwo.panHandlers}
+                            >
+                                {isMarkersSeparated === false
+                                    ? (
+                                        <Marker
+                                            pressed={twoPressed}
+                                            markerStyle={markerStyle}
+                                            pressedMarkerStyle={pressedMarkerStyle}
+                                            disabledMarkerStyle={disabledMarkerStyle}
+                                            currentValue={valueTwo}
+                                            enabled={enabledTwo}
+                                            valuePrefix={valuePrefix}
+                                            valueSuffix={valueSuffix}
+                                        />
+                                    ) : (
+                                        <MarkerRight
+                                            pressed={twoPressed}
+                                            markerStyle={markerStyle}
+                                            pressedMarkerStyle={pressedMarkerStyle}
+                                            disabledMarkerStyle={disabledMarkerStyle}
+                                            currentValue={valueTwo}
+                                            enabled={enabledTwo}
+                                            valuePrefix={valuePrefix}
+                                            valueSuffix={valueSuffix}
+                                        />
+                                    )}
+                            </View>
+                        </View>
+                    )}
+                </View>
+            </View>
+        );
+
+        return (
+            <View style={style} onLayout={(e) => this.onContentLayout(e)}>
+                {enableLabel && (
+                    <Label
+                        oneMarkerValue={valueOne}
+                        twoMarkerValue={valueTwo}
+                        oneMarkerLeftPosition={positionOne}
+                        twoMarkerLeftPosition={positionTwo}
+                        oneMarkerPressed={onePressed}
+                        twoMarkerPressed={twoPressed}
+                    />
+                )}
+                {imageBackgroundSource && (
+                    <ImageBackground
+                        source={imageBackgroundSource}
+                        style={[styles.full, newContainerStyle]}
+                    >
+                        {body}
+                    </ImageBackground>
+                )}
+                {!imageBackgroundSource && (
+                    <View style={newContainerStyle}>{body}</View>
+                )}
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+        height: 50,
+        justifyContent: 'center'
+    },
+    fullTrack: {
+        flexDirection: 'row',
+    },
+    track: {
+        height: 4,
+        backgroundColor: '#A7A7A7',
+    },
+    selectedTrack: {
+        backgroundColor: 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: () => { },
+    onChange: () => { },
+    onChangeFinish: () => { },
+    onMarkersPosition: () => { },
+    step: 1,
+    min: 0,
+    max: 10,
+    touchDimensions: {
+        height: 50,
+        width: 50,
+        borderRadius: 15,
+        slipDisplacement: 200,
+    },
+    customMarker: DefaultMarker,
+    customMarkerLeft: DefaultMarker,
+    customMarkerRight: DefaultMarker,
+    customLabel: DefaultLabel,
+    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.oneOfType([PropTypes.object, PropTypes.array]),
+    selectedStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    unselectedStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    markerOffsetX: PropTypes.number,
+    markerOffsetY: PropTypes.number,
+    values: PropTypes.arrayOf(PropTypes.number),
+    customMarker: PropTypes.func,
+    customMarkerLeft: PropTypes.func,
+    customMarkerRight: PropTypes.func,
+    isMarkersSeparated: PropTypes.bool,
+    touchDimensions: PropTypes.object,
+    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    vertical: PropTypes.bool,
+    trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    markerContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    enabledOne: PropTypes.bool,
+    enabledTwo: PropTypes.bool,
+    onChangeStart: PropTypes.func,
+    onChange: PropTypes.func,
+    onChangeFinish: PropTypes.func,
+    onMarkersPosition: PropTypes.func,
+    step: PropTypes.number,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    customLabel: PropTypes.any,
+    onToggleOne: PropTypes.func,
+    onToggleTwo: PropTypes.func,
+    allowOverlap: PropTypes.bool,
+    snapped: PropTypes.bool,
+    minMarkerOverlapDistance: PropTypes.number,
+    length: PropTypes.number,
+    allowRange: PropTypes.arrayOf(PropTypes.number)
+};