@renderforest/rf-ui-library/helpers/customHooks.js

Renderforest UI Library

"use strict";var _excluded=["x"];function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},_typeof(obj)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.useBlockBackgrounScroll=exports.useHandleRef=exports.useIsTabActive=exports.useEnterKeyPress=exports.useRowFocus=exports.useIsElementHovered=exports.useInterval=exports.useHover=exports.useBackdropClick=exports.useEscKeyPress=exports.useKeyPressWithConfigs=exports.isEmptyObject=exports.useResizeObserver=exports.useIsMobile=exports.useWindowSize=exports.useTrailAnimation=void 0;exports.useEventListener=useEventListener,exports.useOnClickOutside=useOnClickOutside,exports.useOnOutsideParentsClick=useOnOutsideParentsClick,exports.useHasOutline=useHasOutline;var _reactSpring=require("react-spring"),_react=require("react"),_consts=require("../consts");function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null!=_i){var _s,_e,_x,_r,_arr=[],_n=!0,_d=!1;try{if(_x=(_i=_i.call(arr)).next,0===i){if(Object(_i)!==_i)return;_n=!1}else for(;!(_n=(_s=_x.call(_i)).done)&&(_arr.push(_s.value),_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{if(!_n&&null!=_i["return"]&&(_r=_i["return"](),Object(_r)!==_r))return}finally{if(_d)throw _e}}return _arr}}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var source,i=1;i<arguments.length;i++)source=null==arguments[i]?{}:arguments[i],i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key])}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))});return target}function _defineProperty(obj,key,value){return key=_toPropertyKey(key),key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return"symbol"===_typeof(key)?key:key+""}function _toPrimitive(input,hint){if("object"!==_typeof(input)||null===input)return input;var prim=input[Symbol.toPrimitive];if(prim!==void 0){var res=prim.call(input,hint||"default");if("object"!==_typeof(res))return res;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===hint?String:Number)(input)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=_objectWithoutPropertiesLoose(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],0<=excluded.indexOf(key)||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],0<=excluded.indexOf(key)||(target[key]=source[key]);return target}var useTrailAnimation=exports.useTrailAnimation=function(dataLength){var interpolate=function(x){return x.interpolate(function(x){return"translate3d(0,".concat(x,"px,0)")})},trail=(0,_reactSpring.useTrail)(dataLength,{config:{mass:5,tension:2e3,friction:200},opacity:1,x:0,from:{opacity:0,x:-40}});return{trail:trail,getStyle:function getStyle(_ref){var x=_ref.x,rest=_objectWithoutProperties(_ref,_excluded);return _objectSpread(_objectSpread({},rest),{},{transform:interpolate(x)})}}};function useEventListener(eventName,handler){var _element=2<arguments.length&&arguments[2]!==void 0?arguments[2]:window,savedHandler=(0,_react.useRef)(handler);// Create a ref that stores handler
// Update ref.current value if handler changes.
// This allows our effect below to always get latest handler ...
// ... without us needing to pass it in effect deps array ...
// ... and potentially cause effect to re-run every render.
(0,_react.useEffect)(function(){savedHandler.current=handler},[handler,savedHandler]),(0,_react.useEffect)(function(){// Make sure element supports addEventListener
// On
var isSupported=_element&&_element.addEventListener;if(isSupported){// Create event listener that calls handler function stored in ref
var eventListener=function(event){return savedHandler.current(event)};// Add event listener
// Remove event listener on cleanup
return _element.addEventListener(eventName,eventListener),function(){_element.removeEventListener(eventName,eventListener)}}},[eventName,_element,savedHandler]// Re-run if eventName or element changes
)}function useOnClickOutside(ref,handler){var listener=function(event){!ref||ref.contains(event.target)||handler(event)};useEventListener("mousedown",listener),useEventListener("touchstart",listener)}function useOnOutsideParentsClick(refsArray,handler){var listener=function(event){var hasPreventedSelector=refsArray.some(function(ref){return!ref||ref.contains(event.target)});hasPreventedSelector||(handler(event),event.stopPropagation())};useEventListener("mousedown",listener),useEventListener("touchstart",listener)}function useHasOutline(){var _useState=(0,_react.useState)(!1),_useState2=_slicedToArray(_useState,2),hasOutline=_useState2[0],setOutline=_useState2[1];return useEventListener("keydown",function handleKeydown(e){var isTabKeyPressed=9===e.keyCode;isTabKeyPressed&&setOutline(!0)}),useEventListener("mousedown",function handleMousedown(){setOutline(!1)}),hasOutline}var useWindowSize=exports.useWindowSize=function(){var isMobileSize=!!(0<arguments.length&&void 0!==arguments[0])&&arguments[0],_window=_consts.IS_GOT_WINDOW?window:{},innerWidth=_window.innerWidth,innerHeight=_window.innerHeight,_useState3=(0,_react.useState)({windowWidth:innerWidth,windowHeight:innerHeight}),_useState4=_slicedToArray(_useState3,2),windowSize=_useState4[0],setWindowSize=_useState4[1];return useEventListener("resize",function handleResize(){setWindowSize({windowWidth:innerWidth,windowHeight:innerHeight})}),windowSize},useIsMobile=exports.useIsMobile=function(){var size=0<arguments.length&&arguments[0]!==void 0?arguments[0]:767,windowSize=useWindowSize(!0);return windowSize.windowWidth<=size},useResizeObserver=exports.useResizeObserver=function(ref,resizeHandlerFunc){var _useState5=(0,_react.useState)(0),_useState6=_slicedToArray(_useState5,2),width=_useState6[0],setWidth=_useState6[1],_useState7=(0,_react.useState)(0),_useState8=_slicedToArray(_useState7,2),height=_useState8[0],setHeight=_useState8[1],observer=new ResizeObserver(function handleResize(){var entries=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];requestAnimationFrame(function(){if(Array.isArray(entries)){var entry=entries[0];setWidth(entry.contentRect.width),setHeight(entry.contentRect.height),resizeHandlerFunc&&resizeHandlerFunc()}})});return(0,_react.useLayoutEffect)(function(){if(ref.current)return observer.observe(ref.current),function(){observer.unobserve(ref.current)}},[ref]),{width:width,height:height}},isEmptyObject=exports.isEmptyObject=function(object){return object&&0===Object.keys(object).length},checkMetaKeys=function(configs,eventKeys){return!(configs&&!isEmptyObject(configs))||(configs.shiftKey&&configs.metaKey?!!(eventKeys.shiftKey&&(eventKeys.metaKey||eventKeys.ctrlKey)):configs.shiftKey?!(!eventKeys.shiftKey||eventKeys.metaKey||eventKeys.ctrlKey):!!configs.metaKey&&!!(!eventKeys.shiftKey&&(eventKeys.metaKey||eventKeys.ctrlKey)))},useKeyPressWithConfigs=exports.useKeyPressWithConfigs=function(targetKey,handler,configs){var keyDownHandler=function(event){var charCode=event.charCode,keyCode=event.keyCode,shiftKey=event.shiftKey,ctrlKey=event.ctrlKey,metaKey=event.metaKey;(charCode||keyCode)===_consts.keysMapping[targetKey]&&checkMetaKeys(configs,{shiftKey:shiftKey,ctrlKey:ctrlKey,metaKey:metaKey})&&handler(event)};(0,_react.useEffect)(function(){return window.addEventListener("keydown",keyDownHandler,{capture:!1}),function(){window.removeEventListener("keydown",keyDownHandler)}},[handler,targetKey,configs])},useEscKeyPress=exports.useEscKeyPress=function(handler){return useKeyPressWithConfigs("escape",handler)},useBackdropClick=exports.useBackdropClick=function(cb,selectorArr){var ref=(0,_react.useRef)(null),isMouseDownOnModal=!1,checkIsOnOutside=function(e){var selectors=selectorArr?selectorArr.map(function(selector){return document.querySelector(selector)}):[],hasPreventedSelector=selectors.some(function(selector){return!!selector&&selector.contains(e.target)});return!!ref&&!!ref.current&&!ref.current.contains(e.target)&&!hasPreventedSelector},onMouseUp=function(e){var isMouseUpOutside=checkIsOnOutside(e);if(!isMouseDownOnModal&&isMouseUpOutside)return cb(e)},onMouseDown=function(e){isMouseDownOnModal=!checkIsOnOutside(e)};return(0,_react.useEffect)(function(){return document.body&&(document.body.addEventListener("mousedown",onMouseDown),document.body.addEventListener("mouseup",onMouseUp),document.body.addEventListener("touchstart",onMouseDown),document.body.addEventListener("touchend",onMouseUp)),function(){document.body&&(document.body.removeEventListener("mousedown",onMouseDown),document.body.removeEventListener("mouseup",onMouseUp),document.body.removeEventListener("touchstart",onMouseDown),document.body.removeEventListener("touchend",onMouseUp))}}),ref},useHover=exports.useHover=function(ref){var _useState9=(0,_react.useState)(!1),_useState10=_slicedToArray(_useState9,2),isElementHover=_useState10[0],setIsElementHover=_useState10[1],handleMouseOver=function(){return setIsElementHover(!0)},handleMouseOut=function(){return setIsElementHover(!1)};return(0,_react.useEffect)(function(){if(ref&&ref.current){var element=ref.current;return element.addEventListener("mouseenter",handleMouseOver),element.addEventListener("mouseleave",handleMouseOut),function(){element.removeEventListener("mouseenter",handleMouseOver),element.removeEventListener("mouseleave",handleMouseOut)}}},[ref]),isElementHover},useInterval=exports.useInterval=function(callback,delay,dependeces){(0,_react.useEffect)(function(){if(null!==delay){var intervalId=setInterval(callback,delay);return function(){return clearInterval(intervalId)}}},[delay].concat(_toConsumableArray(dependeces)))},useIsElementHovered=exports.useIsElementHovered=function(hoveredElementRef){var _useState11=(0,_react.useState)(!1),_useState12=_slicedToArray(_useState11,2),isElementHovered=_useState12[0],setIsElementHovered=_useState12[1];return useEventListener("mouseenter",function(){return setIsElementHovered(!0)},hoveredElementRef),useEventListener("mouseleave",function(){return setIsElementHovered(!1)},hoveredElementRef),isElementHovered},useRowFocus=exports.useRowFocus=function(autocompleteItems,setValue,setInitial){var _useState13=(0,_react.useState)(-1),_useState14=_slicedToArray(_useState13,2),focusedIndex=_useState14[0],setFocusedIndex=_useState14[1];return(0,_react.useEffect)(function(){return-1===focusedIndex?void setInitial():void(autocompleteItems[focusedIndex]&&setValue(autocompleteItems[focusedIndex].value))},[focusedIndex]),useKeyPressWithConfigs("arrowDown",function handleDown(){setFocusedIndex(function(prev){return prev===autocompleteItems.length-1?-1:prev+1})}),useKeyPressWithConfigs("arrowUp",function handleUp(){setFocusedIndex(function(prev){return 0===prev?-1:-1===prev?autocompleteItems.length-1:prev-1})}),focusedIndex},useEnterKeyPress=exports.useEnterKeyPress=function(handler){return useKeyPressWithConfigs("enter",handler)},useIsTabActive=exports.useIsTabActive=function(){var _useState15=(0,_react.useState)(!0),_useState16=_slicedToArray(_useState15,2),isTabActive=_useState16[0],setIsTabActive=_useState16[1];return document.addEventListener("visibilitychange",function(){"visible"===document.visibilityState?setIsTabActive(!0):setIsTabActive(!1)}),isTabActive},useHandleRef=exports.useHandleRef=function(ref){var _useState17=(0,_react.useState)(null),_useState18=_slicedToArray(_useState17,2),elemRef=_useState18[0],setElemRef=_useState18[1];return(0,_react.useEffect)(function(){ref&&ref.current&&!elemRef&&setElemRef(ref.current)},[ref.current]),elemRef},useBlockBackgrounScroll=exports.useBlockBackgrounScroll=function(activeComponentRef,backgroundComponentRef){useEventListener("touchmove",function touchmove(){backgroundComponentRef.style.overflow="hidden"},activeComponentRef.current),useEventListener("touchend",function touchend(){backgroundComponentRef.style.overflowY="overlay"},activeComponentRef.current)};