@momo-kits/slider 0.0.34-beta → 0.0.34

package/Slider.js

@@ -1 +1,738 @@
-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)};
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {
+  StyleSheet,
+  PanResponder,
+  View,
+  I18nManager,
+  ImageBackground,
+  Text,
+} from 'react-native';
+import {get} from 'lodash';
+import {Colors, Spacing} from '@momo-kits/core';
+import DefaultMarker from './DefaultMarker';
+import DefaultLabel from './DefaultLabel';
+import {createArray, valueToPosition, positionToValue} from './converters';
+
+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 ? (
+                <>
+                  {onePressed && (
+                    <View style={styles.valueContainer}>
+                      <Text>{valueOne}</Text>
+                    </View>
+                  )}
+                  <Marker
+                    enabled={enabledOne}
+                    pressed={onePressed}
+                    markerStyle={markerStyle}
+                    pressedMarkerStyle={pressedMarkerStyle}
+                    disabledMarkerStyle={disabledMarkerStyle}
+                    currentValue={valueOne}
+                    valuePrefix={valuePrefix}
+                    valueSuffix={valueSuffix}
+                  />
+                </>
+              ) : (
+                <>
+                  {onePressed && (
+                    <View style={styles.valueContainer}>
+                      <Text>{valueTwo}</Text>
+                    </View>
+                  )}
+                  <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 ? (
+                  <>
+                    {twoPressed && (
+                      <View style={styles.valueContainer}>
+                        <Text>{valueTwo}</Text>
+                      </View>
+                    )}
+                    <Marker
+                      pressed={twoPressed}
+                      markerStyle={markerStyle}
+                      pressedMarkerStyle={pressedMarkerStyle}
+                      disabledMarkerStyle={disabledMarkerStyle}
+                      currentValue={valueTwo}
+                      enabled={enabledTwo}
+                      valuePrefix={valuePrefix}
+                      valueSuffix={valueSuffix}
+                    />
+                  </>
+                ) : (
+                  <>
+                    {twoPressed && (
+                      <View style={styles.valueContainer}>
+                        <Text>{valueTwo}</Text>
+                      </View>
+                    )}
+                    <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: Colors.black_03,
+    borderRadius: 2,
+  },
+  selectedTrack: {
+    backgroundColor: Colors.pink_05_b,
+  },
+  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%'},
+  valueContainer: {
+    width: 40,
+    height: 32,
+    borderRadius: Spacing.S,
+    backgroundColor: Colors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    top: -36,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.24,
+    shadowRadius: 6,
+    elevation: 12,
+  },
+});
+
+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),
+};