@reach/portal
Advanced tools
Comparing version 0.6.2 to 0.7.0
@@ -1,4 +0,3 @@ | ||
import React from "react"; | ||
import React, { useLayoutEffect, useRef, useState } from "react"; | ||
import { createPortal } from "react-dom"; | ||
import Component from "@reach/component-component"; | ||
@@ -9,37 +8,21 @@ function Portal(_ref) { | ||
type = _ref$type === void 0 ? "reach-portal" : _ref$type; | ||
return React.createElement(Component, { | ||
getRefs: function getRefs() { | ||
return { | ||
mountNode: null, | ||
portalNode: null | ||
}; | ||
}, | ||
didMount: function didMount(_ref2) { | ||
var refs = _ref2.refs, | ||
forceUpdate = _ref2.forceUpdate; | ||
// It's possible that the content we are portal has, itself, been portaled. | ||
// In that case, it's important to append to the correct document element. | ||
var ownerDocument = refs.mountNode.ownerDocument; | ||
refs.portalNode = ownerDocument.createElement(type); | ||
ownerDocument.body.appendChild(refs.portalNode); | ||
forceUpdate(); | ||
}, | ||
willUnmount: function willUnmount(_ref3) { | ||
var portalNode = _ref3.refs.portalNode; | ||
portalNode.ownerDocument.body.removeChild(portalNode); | ||
}, | ||
render: function render(_ref4) { | ||
var refs = _ref4.refs; | ||
var portalNode = refs.portalNode; | ||
var mountNode = useRef(null); | ||
var portalNode = useRef(null); | ||
if (!portalNode) { | ||
return React.createElement("div", { | ||
ref: function ref(div) { | ||
return refs.mountNode = div; | ||
} | ||
}); | ||
} else { | ||
return createPortal(children, portalNode); | ||
} | ||
} | ||
var _useState = useState(), | ||
forceUpdate = _useState[1]; | ||
useLayoutEffect(function () { | ||
// It's possible that the content we are portal has, itself, been portaled. | ||
// In that case, it's important to append to the correct document element. | ||
var ownerDocument = mountNode.current.ownerDocument; | ||
portalNode.current = ownerDocument.createElement(type); | ||
ownerDocument.body.appendChild(portalNode.current); | ||
forceUpdate({}); | ||
return function () { | ||
portalNode.current.ownerDocument.body.removeChild(portalNode.current); | ||
}; | ||
}, [type]); | ||
return portalNode.current ? createPortal(children, portalNode.current) : React.createElement("div", { | ||
ref: mountNode | ||
}); | ||
@@ -46,0 +29,0 @@ } |
58
index.js
@@ -6,9 +6,9 @@ "use strict"; | ||
var _react = _interopRequireDefault(require("react")); | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _reactDom = require("react-dom"); | ||
var _componentComponent = _interopRequireDefault(require("@reach/component-component")); | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; } | ||
@@ -19,37 +19,21 @@ function Portal(_ref) { | ||
type = _ref$type === void 0 ? "reach-portal" : _ref$type; | ||
return _react["default"].createElement(_componentComponent["default"], { | ||
getRefs: function getRefs() { | ||
return { | ||
mountNode: null, | ||
portalNode: null | ||
}; | ||
}, | ||
didMount: function didMount(_ref2) { | ||
var refs = _ref2.refs, | ||
forceUpdate = _ref2.forceUpdate; | ||
// It's possible that the content we are portal has, itself, been portaled. | ||
// In that case, it's important to append to the correct document element. | ||
var ownerDocument = refs.mountNode.ownerDocument; | ||
refs.portalNode = ownerDocument.createElement(type); | ||
ownerDocument.body.appendChild(refs.portalNode); | ||
forceUpdate(); | ||
}, | ||
willUnmount: function willUnmount(_ref3) { | ||
var portalNode = _ref3.refs.portalNode; | ||
portalNode.ownerDocument.body.removeChild(portalNode); | ||
}, | ||
render: function render(_ref4) { | ||
var refs = _ref4.refs; | ||
var portalNode = refs.portalNode; | ||
var mountNode = (0, _react.useRef)(null); | ||
var portalNode = (0, _react.useRef)(null); | ||
if (!portalNode) { | ||
return _react["default"].createElement("div", { | ||
ref: function ref(div) { | ||
return refs.mountNode = div; | ||
} | ||
}); | ||
} else { | ||
return (0, _reactDom.createPortal)(children, portalNode); | ||
} | ||
} | ||
var _useState = (0, _react.useState)(), | ||
forceUpdate = _useState[1]; | ||
(0, _react.useLayoutEffect)(function () { | ||
// It's possible that the content we are portal has, itself, been portaled. | ||
// In that case, it's important to append to the correct document element. | ||
var ownerDocument = mountNode.current.ownerDocument; | ||
portalNode.current = ownerDocument.createElement(type); | ||
ownerDocument.body.appendChild(portalNode.current); | ||
forceUpdate({}); | ||
return function () { | ||
portalNode.current.ownerDocument.body.removeChild(portalNode.current); | ||
}; | ||
}, [type]); | ||
return portalNode.current ? (0, _reactDom.createPortal)(children, portalNode.current) : _react["default"].createElement("div", { | ||
ref: mountNode | ||
}); | ||
@@ -56,0 +40,0 @@ } |
{ | ||
"name": "@reach/portal", | ||
"version": "0.6.2", | ||
"version": "0.7.0", | ||
"description": "Declarative portals for React", | ||
"repository": { | ||
"type": "git", | ||
"url": "git+https://github.com/reach/reach-ui.git", | ||
"directory": "packages/portal" | ||
}, | ||
"main": "index.js", | ||
@@ -10,5 +15,2 @@ "module": "es/index.js", | ||
}, | ||
"dependencies": { | ||
"@reach/component-component": "^0.6.2" | ||
}, | ||
"peerDependencies": { | ||
@@ -28,3 +30,3 @@ "react": "^16.8.0", | ||
], | ||
"gitHead": "00e73c5da6d25f50194612f74de71156fde2a80a" | ||
"gitHead": "c6c10662e6eaf229594e4d6e6a38d8c9baa35ffa" | ||
} |
@@ -1,29 +0,25 @@ | ||
import React from "react"; | ||
import React, { useLayoutEffect, useRef, useState } from "react"; | ||
import { createPortal } from "react-dom"; | ||
import Component from "@reach/component-component"; | ||
function Portal({ children, type = "reach-portal" }) { | ||
return ( | ||
<Component | ||
getRefs={() => ({ mountNode: null, portalNode: null })} | ||
didMount={({ refs, forceUpdate }) => { | ||
// It's possible that the content we are portal has, itself, been portaled. | ||
// In that case, it's important to append to the correct document element. | ||
const ownerDocument = refs.mountNode.ownerDocument; | ||
refs.portalNode = ownerDocument.createElement(type); | ||
ownerDocument.body.appendChild(refs.portalNode); | ||
forceUpdate(); | ||
}} | ||
willUnmount={({ refs: { portalNode } }) => { | ||
portalNode.ownerDocument.body.removeChild(portalNode); | ||
}} | ||
render={({ refs }) => { | ||
const { portalNode } = refs; | ||
if (!portalNode) { | ||
return <div ref={div => (refs.mountNode = div)} />; | ||
} else { | ||
return createPortal(children, portalNode); | ||
} | ||
}} | ||
/> | ||
let mountNode = useRef(null); | ||
let portalNode = useRef(null); | ||
let [, forceUpdate] = useState(); | ||
useLayoutEffect(() => { | ||
// It's possible that the content we are portal has, itself, been portaled. | ||
// In that case, it's important to append to the correct document element. | ||
const ownerDocument = mountNode.current.ownerDocument; | ||
portalNode.current = ownerDocument.createElement(type); | ||
ownerDocument.body.appendChild(portalNode.current); | ||
forceUpdate({}); | ||
return () => { | ||
portalNode.current.ownerDocument.body.removeChild(portalNode.current); | ||
}; | ||
}, [type]); | ||
return portalNode.current ? ( | ||
createPortal(children, portalNode.current) | ||
) : ( | ||
<div ref={mountNode} /> | ||
); | ||
@@ -30,0 +26,0 @@ } |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
2
0
7059
118
- Removed@reach/component-component@^0.6.2
- Removed@reach/component-component@0.6.2(transitive)