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

react-native material ui library

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.usePortal=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");var _reactDom=require("react-dom");var count=0;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=(0,_react.useState)(defaultIsOpen),_useState2=(0,_slicedToArray2.default)(_useState,2),isOpen=_useState2[0],makeOpen=_useState2[1];var open=(0,_react.useRef)(isOpen);var setOpen=function setOpen(v){open.current=v;makeOpen(v);};var renderByRef=(0,_react.useRef)();var portal=(0,_react.useRef)(document.createElement('div'));var elToMountTo=bindTo&&(0,_reactDom.findDOMNode)(bindTo)||document&&document.body;window.portal=portal;var handleKeydown=(0,_react.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=(0,_react.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();};(0,_react.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(0,_reactDom.createPortal)(children,portal.current);},bind:{onMouseDown:handleKeydown,ref:renderByRef}};};exports.usePortal=usePortal;var _default=usePortal;exports.default=_default;
//# sourceMappingURL=usePortal.web.js.map