@react-native-community/slider/dist/RNCSliderNativeComponent.web.js

React Native component used to select a single value from a range of values.

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _reactDom=_interopRequireDefault(require("react-dom"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _excluded=["value","minimumValue","maximumValue","step","minimumTrackTintColor","maximumTrackTintColor","thumbTintColor","thumbStyle","style","inverted","enabled","trackHeight","thumbSize","onRNCSliderSlidingStart","onRNCSliderSlidingComplete","onRNCSliderValueChange"];var _this=this,_jsxFileName="C:\\Dev\\Projects\\react-native-slider\\src\\js\\RNCSliderNativeComponent.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;}var RCTSliderWebComponent=_react.default.forwardRef(function(_ref,forwardedRef){var initialValue=_ref.value,_ref$minimumValue=_ref.minimumValue,minimumValue=_ref$minimumValue===void 0?0:_ref$minimumValue,_ref$maximumValue=_ref.maximumValue,maximumValue=_ref$maximumValue===void 0?0:_ref$maximumValue,_ref$step=_ref.step,step=_ref$step===void 0?1:_ref$step,_ref$minimumTrackTint=_ref.minimumTrackTintColor,minimumTrackTintColor=_ref$minimumTrackTint===void 0?'#009688':_ref$minimumTrackTint,_ref$maximumTrackTint=_ref.maximumTrackTintColor,maximumTrackTintColor=_ref$maximumTrackTint===void 0?'#939393':_ref$maximumTrackTint,_ref$thumbTintColor=_ref.thumbTintColor,thumbTintColor=_ref$thumbTintColor===void 0?'#009688':_ref$thumbTintColor,_ref$thumbStyle=_ref.thumbStyle,thumbStyle=_ref$thumbStyle===void 0?{}:_ref$thumbStyle,_ref$style=_ref.style,style=_ref$style===void 0?[]:_ref$style,_ref$inverted=_ref.inverted,inverted=_ref$inverted===void 0?false:_ref$inverted,_ref$enabled=_ref.enabled,enabled=_ref$enabled===void 0?true:_ref$enabled,_ref$trackHeight=_ref.trackHeight,trackHeight=_ref$trackHeight===void 0?4:_ref$trackHeight,_ref$thumbSize=_ref.thumbSize,thumbSize=_ref$thumbSize===void 0?20:_ref$thumbSize,_ref$onRNCSliderSlidi=_ref.onRNCSliderSlidingStart,onRNCSliderSlidingStart=_ref$onRNCSliderSlidi===void 0?function(){}:_ref$onRNCSliderSlidi,_ref$onRNCSliderSlidi2=_ref.onRNCSliderSlidingComplete,onRNCSliderSlidingComplete=_ref$onRNCSliderSlidi2===void 0?function(){}:_ref$onRNCSliderSlidi2,_ref$onRNCSliderValue=_ref.onRNCSliderValueChange,onRNCSliderValueChange=_ref$onRNCSliderValue===void 0?function(){}:_ref$onRNCSliderValue,others=(0,_objectWithoutProperties2.default)(_ref,_excluded);var onValueChange=(0,_react.useCallback)(function(value){onRNCSliderValueChange&&onRNCSliderValueChange({nativeEvent:{fromUser:true,value:value}});},[onRNCSliderValueChange]);var onSlidingStart=(0,_react.useCallback)(function(value){onRNCSliderSlidingStart&&onRNCSliderSlidingStart({nativeEvent:{fromUser:true,value:value}});},[onRNCSliderSlidingStart]);var onSlidingComplete=(0,_react.useCallback)(function(value){onRNCSliderSlidingComplete&&onRNCSliderSlidingComplete({nativeEvent:{fromUser:true,value:value}});},[onRNCSliderSlidingComplete]);var containerSize=_react.default.useRef({width:0,height:0});var containerPositionX=_react.default.useRef(0);var containerRef=forwardedRef||_react.default.createRef();var hasBeenResized=_react.default.useRef(false);var _React$useState=_react.default.useState(initialValue||minimumValue),_React$useState2=(0,_slicedToArray2.default)(_React$useState,2),value=_React$useState2[0],setValue=_React$useState2[1];_react.default.useLayoutEffect(function(){_updateValue(initialValue);},[initialValue,_updateValue]);var percentageValue=(value-minimumValue)/(maximumValue-minimumValue);var minPercent=percentageValue;var maxPercent=1-percentageValue;var onResize=function onResize(){hasBeenResized.current=true;};_react.default.useEffect(function(){window.addEventListener('resize',onResize);return function(){window.removeEventListener('resize',onResize);};},[]);var containerStyle=_reactNative.StyleSheet.compose({flexGrow:1,flexShrink:1,flexBasis:'auto',flexDirection:'row',userSelect:'none',alignItems:'center',cursor:'pointer'},style);var trackStyle={height:trackHeight,borderRadius:trackHeight/2,userSelect:'none'};var minimumTrackStyle=Object.assign({},trackStyle,{backgroundColor:minimumTrackTintColor,flexGrow:minPercent*100});var maximumTrackStyle=Object.assign({},trackStyle,{backgroundColor:maximumTrackTintColor,flexGrow:maxPercent*100});var thumbViewStyle=_reactNative.StyleSheet.compose({width:thumbSize,height:thumbSize,backgroundColor:thumbTintColor,zIndex:1,borderRadius:thumbSize/2,overflow:'hidden',userSelect:'none'},thumbStyle);var decimalPrecision=_react.default.useRef(calculatePrecision(minimumValue,maximumValue,step));_react.default.useEffect(function(){decimalPrecision.current=calculatePrecision(minimumValue,maximumValue,step);},[maximumValue,minimumValue,step]);var updateContainerPositionX=function updateContainerPositionX(){var _ReactDOM$findDOMNode,_ReactDOM$findDOMNode2;var positionX=(_ReactDOM$findDOMNode=_reactDom.default.findDOMNode(containerRef.current))==null?void 0:(_ReactDOM$findDOMNode2=_ReactDOM$findDOMNode.getBoundingClientRect())==null?void 0:_ReactDOM$findDOMNode2.x;containerPositionX.current=positionX!=null?positionX:0;};var _updateValue=(0,_react.useCallback)(function(newValue){var hardRounded=decimalPrecision.current<20?Number.parseFloat(newValue.toFixed(decimalPrecision.current)):newValue;var withinBounds=Math.max(minimumValue,Math.min(hardRounded,maximumValue));if(value!==withinBounds){setValue(withinBounds);onValueChange(withinBounds);return withinBounds;}return hardRounded;},[minimumValue,maximumValue,value,onValueChange]);var getValueFromNativeEvent=function getValueFromNativeEvent(_ref2){var pageX=_ref2.pageX;var _containerSize$curren=containerSize.current.width,width=_containerSize$curren===void 0?1:_containerSize$curren;if(hasBeenResized.current){hasBeenResized.current=false;updateContainerPositionX();}var containerX=containerPositionX.current;if(pageX<containerX){return inverted?maximumValue:minimumValue;}else if(pageX>containerX+width){return inverted?minimumValue:maximumValue;}else{var x=pageX-containerX;var newValue=inverted?maximumValue-(maximumValue-minimumValue)*x/width:minimumValue+(maximumValue-minimumValue)*x/width;return step?Math.round(newValue/step)*step:newValue;}};var onTouchEnd=function onTouchEnd(_ref3){var nativeEvent=_ref3.nativeEvent;var newValue=_updateValue(getValueFromNativeEvent(nativeEvent));onSlidingComplete(newValue);};var onMove=function onMove(_ref4){var nativeEvent=_ref4.nativeEvent;_updateValue(getValueFromNativeEvent(nativeEvent));};var accessibilityActions=function accessibilityActions(event){var tenth=(maximumValue-minimumValue)/10;switch(event.nativeEvent.actionName){case'increment':_updateValue(value+(step||tenth));break;case'decrement':_updateValue(value-(step||tenth));break;}};var handleAccessibilityKeys=function handleAccessibilityKeys(key){switch(key){case'ArrowUp':case'ArrowRight':accessibilityActions({nativeEvent:{actionName:'increment'}});break;case'ArrowDown':case'ArrowLeft':accessibilityActions({nativeEvent:{actionName:'decrement'}});break;}};_react.default.useImperativeHandle(forwardedRef,function(){return{updateValue:function updateValue(val){_updateValue(val);}};},[_updateValue]);return _react.default.createElement(_reactNative.View,(0,_extends2.default)({ref:containerRef,onLayout:function onLayout(_ref5){var nativeEvent=_ref5.nativeEvent;containerSize.current=nativeEvent.layout;if(containerRef.current){updateContainerPositionX();}},accessibilityActions:[{name:'increment',label:'increment'},{name:'decrement',label:'decrement'}],onAccessibilityAction:accessibilityActions,accessible:true,accessibleValue:value,accessibilityRole:'adjustable',style:containerStyle,onStartShouldSetResponder:function onStartShouldSetResponder(){return enabled;},onMoveShouldSetResponder:function onMoveShouldSetResponder(){return enabled;},onResponderGrant:function onResponderGrant(){return onSlidingStart(value);},onResponderRelease:onTouchEnd,onResponderMove:onMove,onKeyDown:function onKeyDown(_ref6){var key=_ref6.nativeEvent.key;return handleAccessibilityKeys(key);}},others,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:365,columnNumber:7}}),_react.default.createElement(_reactNative.View,{pointerEvents:"none",style:minimumTrackStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:389,columnNumber:9}}),_react.default.createElement(_reactNative.View,{pointerEvents:"none",style:thumbViewStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:390,columnNumber:9}}),_react.default.createElement(_reactNative.View,{pointerEvents:"none",style:maximumTrackStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:391,columnNumber:9}}));});function calculatePrecision(minimumValue,maximumValue,step){if(!step){return Infinity;}else{var decimals=[minimumValue,maximumValue,step].map(function(value){return((value+'').split('.').pop()||'').length;});return Math.max.apply(Math,(0,_toConsumableArray2.default)(decimals));}}RCTSliderWebComponent.displayName='RTCSliderWebComponent';var _default=RCTSliderWebComponent;exports.default=_default;