forked from facebook/react
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request facebook#108 from bvaughn/reach-ui-menubutton
Use @reach MenuButton for owner stack menu [WIP]
- Loading branch information
Showing
14 changed files
with
408 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| index.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React from "react"; | ||
| import { createPortal } from "react-dom"; | ||
| import Component from "@reach/component-component"; | ||
|
|
||
| var Portal = function Portal(_ref) { | ||
| var children = _ref.children, | ||
| _ref$type = _ref.type, | ||
| type = _ref$type === undefined ? "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; | ||
|
|
||
| if (!portalNode) { | ||
| return React.createElement("div", { ref: function ref(div) { | ||
| return refs.mountNode = div; | ||
| } }); | ||
| } else { | ||
| return createPortal(children, portalNode); | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| export default Portal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React from "react"; | ||
| import Portal from "../src/index"; | ||
|
|
||
| export let name = "Basic"; | ||
|
|
||
| export let Example = () => ( | ||
| <div | ||
| style={{ | ||
| height: 40, | ||
| overflow: "auto" | ||
| }} | ||
| > | ||
| <div style={{ border: "solid 5px", padding: 20, marginLeft: 170 }}> | ||
| This is in the normal react root, with an overflow hidden parent, clips | ||
| the box. | ||
| </div> | ||
| <Portal> | ||
| <div | ||
| style={{ | ||
| position: "absolute", | ||
| top: 0, | ||
| left: 20, | ||
| width: 100, | ||
| border: "solid 5px", | ||
| padding: 20, | ||
| background: "#f0f0f0" | ||
| }} | ||
| > | ||
| This is in the portal, rendered in the DOM at the document root so the | ||
| CSS doesn't screw things up, but we render it in the react hierarchy | ||
| where it makes sense. | ||
| </div> | ||
| </Portal> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| "use strict"; | ||
|
|
||
| exports.__esModule = true; | ||
|
|
||
| var _react = require("react"); | ||
|
|
||
| var _react2 = _interopRequireDefault(_react); | ||
|
|
||
| var _reactDom = require("react-dom"); | ||
|
|
||
| var _componentComponent = require("@reach/component-component"); | ||
|
|
||
| var _componentComponent2 = _interopRequireDefault(_componentComponent); | ||
|
|
||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
|
|
||
| var Portal = function Portal(_ref) { | ||
| var children = _ref.children, | ||
| _ref$type = _ref.type, | ||
| type = _ref$type === undefined ? "reach-portal" : _ref$type; | ||
| return _react2.default.createElement(_componentComponent2.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; | ||
|
|
||
| if (!portalNode) { | ||
| return _react2.default.createElement("div", { ref: function ref(div) { | ||
| return refs.mountNode = div; | ||
| } }); | ||
| } else { | ||
| return (0, _reactDom.createPortal)(children, portalNode); | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| exports.default = Portal; |
Oops, something went wrong.