@devloops/react-native-variant/lib/module/Helpers/Hooks/usePortal.web.js

react-native material ui library

import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useState,useRef,useEffect,useCallback}from'react';import{createPortal,findDOMNode}from'react-dom';var count=0;export var usePortal=function usePortal(_ref){var _ref$closeOnOutsideCl=_ref.closeOnOutsideClick,closeOnOutsideClick=_ref$closeOnOutsideCl===void 0?true:_ref$closeOnOutsideCl,_ref$closeOnEsc=_ref.closeOnEsc,closeOnEsc=_ref$closeOnEsc===void 0?true:_ref$closeOnEsc,renderOnClickedElement=_ref.renderOnClickedElement,renderBelowClickedElement=_ref.renderBelowClickedElement,_ref$bindTo=_ref.bindTo,bindTo=_ref$bindTo===void 0?document.body:_ref$bindTo,_ref$isOpen=_ref.isOpen,defaultIsOpen=_ref$isOpen===void 0?false:_ref$isOpen,_ref$stateful=_ref.stateful,stateful=_ref$stateful===void 0?true:_ref$stateful;var _useState=useState(defaultIsOpen),_useState2=_slicedToArray(_useState,2),isOpen=_useState2[0],makeOpen=_useState2[1];var open=useRef(isOpen);var setOpen=function setOpen(v){open.current=v;makeOpen(v);};var renderByRef=useRef();var portal=useRef(document.createElement('div'));var elToMountTo=bindTo&&findDOMNode(bindTo)||document&&document.body;window.portal=portal;var handleKeydown=useCallback(function(e){var ESC=27;if(!closeOnEsc)return;e.keyCode===ESC&&stateful&&setOpen(false);},[stateful]);var openPortal=function openPortal(e){if(e==null){setOpen(true);return;}if(e&&e.nativeEvent)e.nativeEvent.stopImmediatePropagation();if(renderOnClickedElement){portal.current.style="\n        height: 100%;\n        position: fixed;\n        left: 0;\n        right:0;\n        bottom:0;\n        top: 0;\n      ";}else if(renderBelowClickedElement){portal.current.style="\n      height: 100%;\n      position: fixed;\n      left: 0;\n      right:0;\n      bottom:0;\n      top: 0;\n      ";}stateful&&setOpen(true);};var closePortal=useCallback(function(){open.current&&setOpen(false);},[isOpen,setOpen]);var handleOutsideMouseClick=function handleOutsideMouseClick(_ref2){var target=_ref2.target,button=_ref2.button;window["target"+count++]=target;if(portal.current.contains(target)||!open.current||button!==0||!portal.current)return;stateful&&closeOnOutsideClick&&closePortal();};useEffect(function(){elToMountTo.appendChild(portal.current);document.addEventListener('keydown',handleKeydown);document.addEventListener('click',handleOutsideMouseClick);return function(){document.removeEventListener('keydown',handleKeydown);document.removeEventListener('click',handleOutsideMouseClick);elToMountTo.removeChild(portal.current);};},[]);return{isOpen:open.current,openPortal:openPortal,onMouseDown:handleKeydown,ref:renderByRef,closePortal:closePortal,togglePortal:function togglePortal(e){return isOpen?setOpen(false):openPortal(e);},Portal:function Portal(_ref3){var children=_ref3.children;return createPortal(children,portal.current);},bind:{onMouseDown:handleKeydown,ref:renderByRef}};};export default usePortal;
//# sourceMappingURL=usePortal.web.js.map