[WIP] - Portal component experiment

docs/src/examples/components/Portal/Types/PortalExample.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { Button, Portal } from 'stardust'
+
+class PortalExample extends React.Component {
+  render() {
+    return (
+      <Portal
+        trigger={
+          <Button
+            onClick={() => {
+              console.log('onClick outer')
+            }}
+          >
+            Open/close portal
+          </Button>
+        }
+      >
+        <div
+          style={{
+            position: 'fixed',
+            left: '40%',
+            top: '50%',
+            padding: '50px',
+            backgroundColor: 'silver',
+          }}
+        >
+          portal popup
+        </div>
+      </Portal>
+    )
+  }
+}
+
+export default PortalExample

docs/src/examples/components/Portal/Types/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Portal"
+      description="A portal."
+      examplePath="components/Portal/Types/PortalExample"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Portal/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Types from './Types'
+
+const PortalExamples = () => (
+  <div>
+    <Types />
+  </div>
+)
+
+export default PortalExamples

src/components/Portal/Portal.tsx

@@ -0,0 +1,90 @@
+import React, { cloneElement } from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+import { AutoControlledComponent, eventStack, makeDebugger } from '../../lib'
+
+const debug = makeDebugger('portal')
+
+class Portal extends AutoControlledComponent {
+  static propTypes = {
+    trigger: PropTypes.node,
+
+    open: PropTypes.bool,
+
+    defaultOpen: PropTypes.bool,
+  }
+
+  static autoControlledProps = ['open']
+
+  handleTriggerClick = () => {
+    debug('handleTriggerClick()')
+    this.props.trigger.props.onClick()
+    this.setState({ open: !this.state.open })
+  }
+
+  handlePortalMouseEnter = () => {
+    debug('handlePortalMouseEnter()')
+  }
+
+  componentDidMount() {
+    debug('componentDidMount()', this.state)
+    if (this.state.open) {
+      this.createPortal()
+    }
+  }
+
+  componentDidUpdate() {
+    debug('componentDidUpdate()', this.state)
+    if (this.state.open) {
+      this.createPortal()
+    }
+  }
+
+  componentWillUnmount() {
+    debug('componentWillUnmount()')
+  }
+
+  createPortal() {
+    if (this.state.portalEl) {
+      return
+    }
+    console.log('creating portalEl')
+    const portalEl = document.createElement('div')
+    document.body.appendChild(portalEl)
+    eventStack.sub('mouseenter', this.handlePortalMouseEnter, {
+      target: portalEl,
+    })
+    this.setState({
+      portalEl,
+    })
+  }
+
+  destroyPortal() {}
+
+  // To discuss:
+  // when to create rootNode? (it is required in render, componentWillMount is deprecated)
+  // should multiple portals share it? (how would mouseenter/mouseleave on portalEl work then?)
+  // when to destroy it (it is too early in componentWillUnmount)
+
+  render() {
+    const { trigger } = this.props
+    debug('render')
+
+    if (!trigger) {
+      return
+    }
+
+    return (
+      <React.Fragment>
+        {cloneElement(trigger, {
+          onClick: this.handleTriggerClick,
+        })}
+        {this.state.open &&
+          this.state.portalEl &&
+          ReactDOM.createPortal(this.props.children, this.state.portalEl)}
+      </React.Fragment>
+    )
+  }
+}
+
+export default Portal

src/components/Portal/index.ts

@@ -0,0 +1 @@
+export { default } from './Portal'

src/index.ts

@@ -4,5 +4,6 @@ export { default as Divider } from './components/Divider'
 export { default as Layout } from './components/Layout'
 export { default as List } from './components/List'
 export { ListItem } from './components/List'
+export { default as Portal } from './components/Portal'
 export { default as Provider } from './components/Provider'
 export { default as ProviderConsumer } from './components/Provider/ProviderConsumer'