feat(portal): simple base implementation

CHANGELOG.md

@@ -33,6 +33,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add Button `text` prop @mnajdova ([#177](https://github.com/stardust-ui/react/pull/177))
 - Add accessibility keyboard action handlers @sophieH29 ([#121](https://github.com/stardust-ui/react/pull/121))
 - Add accessibility description for `Text` component @codepretty ([#205](https://github.com/stardust-ui/react/pull/205))
+- Add `Portal`, `PortalInner` and `Ref` components base implementation @Bugaa92 ([#144](https://github.com/stardust-ui/react/pull/144))
 
 <!--------------------------------[ v0.5.0 ]------------------------------- -->
 ## [v0.5.0](https://github.com/stardust-ui/react/tree/v0.5.0) (2018-08-30)

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
+
+class PortalExamplePortal extends React.Component {
+  state = { log: [], logCount: 0 }
+
+  handleClick = () =>
+    this.setState({
+      log: [`${new Date().toLocaleTimeString()}: handleClick`, ...this.state.log].slice(0, 20),
+      logCount: this.state.logCount + 1,
+    })
+
+  clearLog = () => this.setState({ log: [], logCount: 0 })
+
+  render() {
+    const { log, logCount } = this.state
+
+    return (
+      <div>
+        <Portal
+          content={
+            <div
+              style={{
+                background: '#ddd',
+                position: 'fixed',
+                left: '40%',
+                top: '45%',
+                zIndex: 1000,
+              }}
+            >
+              <Header>This is a basic portal</Header>
+              <p>Portals have tons of great callback functions to hook into.</p>
+              <p>To close, simply click the close button or click away</p>
+            </div>
+          }
+          trigger={<Button content={'Toggle portal'} onClick={this.handleClick} />}
+        />
+        <Divider />
+        <div>
+          <Button size="small" onClick={this.clearLog} content="Clear" />
+          <span>
+            Event Log <Label circular>{logCount}</Label>
+          </span>
+          <pre>{log.map((e, i) => <div key={i}>{e}</div>)}</pre>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default PortalExamplePortal

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

@@ -0,0 +1,48 @@
+import React from 'react'
+import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
+
+class PortalExamplePortal extends React.Component {
+  state = { log: [], logCount: 0 }
+
+  handleClick = () =>
+    this.setState({
+      log: [`${new Date().toLocaleTimeString()}: handleClick`, ...this.state.log].slice(0, 20),
+      logCount: this.state.logCount + 1,
+    })
+
+  clearLog = () => this.setState({ log: [], logCount: 0 })
+
+  render() {
+    const { log, logCount } = this.state
+
+    return (
+      <div>
+        <Portal trigger={<Button content={'Toggle portal'} onClick={this.handleClick} />}>
+          <div
+            style={{
+              background: '#ddd',
+              position: 'fixed',
+              left: '40%',
+              top: '45%',
+              zIndex: 1000,
+            }}
+          >
+            <Header>This is a basic portal</Header>
+            <p>Portals have tons of great callback functions to hook into.</p>
+            <p>To close, simply click the close button or click away</p>
+          </div>
+        </Portal>
+        <Divider />
+        <div>
+          <Button size="small" onClick={this.clearLog} content="Clear" />
+          <span>
+            Event Log <Label circular>{logCount}</Label>
+          </span>
+          <pre>{log.map((e, i) => <div key={i}>{e}</div>)}</pre>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default PortalExamplePortal

docs/src/examples/components/Portal/Types/PortalExampleControlled.shorthand.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
+
+class PortalExampleControlled extends React.Component {
+  state = { log: [], logCount: 0, open: false }
+
+  handleClick = (logContent: string) => {
+    this.setState({ open: !this.state.open })
+    this.writeLog(logContent)
+  }
+
+  clearLog = () => this.setState({ log: [], logCount: 0 })
+
+  writeLog = eventName =>
+    this.setState({
+      log: [`${new Date().toLocaleTimeString()}: ${eventName}`, ...this.state.log].slice(0, 20),
+      logCount: this.state.logCount + 1,
+    })
+
+  render() {
+    const { log, logCount, open } = this.state
+    const btnContent = open ? 'Close Portal' : 'Open Portal'
+
+    return (
+      <div>
+        <div>
+          <Button content={btnContent} onClick={this.handleClick.bind(this, btnContent)} />
+          <Divider />
+          <Button size="small" onClick={this.clearLog} content="Clear" />
+          <span>
+            Event Log <Label circular>{logCount}</Label>
+          </span>
+          <pre>{log.map((e, i) => <div key={i}>{e}</div>)}</pre>
+        </div>
+        <Portal
+          open={open}
+          content={
+            <div
+              style={{
+                background: '#ddd',
+                position: 'fixed',
+                left: '40%',
+                top: '45%',
+                zIndex: 1000,
+              }}
+            >
+              <Header>This is a controlled portal</Header>
+              <p>Portals have tons of great callback functions to hook into.</p>
+              <p>To close, simply click the close button</p>
+            </div>
+          }
+        />
+      </div>
+    )
+  }
+}
+
+export default PortalExampleControlled

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

@@ -0,0 +1,55 @@
+import React from 'react'
+import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
+
+class PortalExampleControlled extends React.Component {
+  state = { log: [], logCount: 0, open: false }
+
+  handleClick = (logContent: string) => {
+    this.setState({ open: !this.state.open })
+    this.writeLog(logContent)
+  }
+
+  clearLog = () => this.setState({ log: [], logCount: 0 })
+
+  writeLog = eventName =>
+    this.setState({
+      log: [`${new Date().toLocaleTimeString()}: ${eventName}`, ...this.state.log].slice(0, 20),
+      logCount: this.state.logCount + 1,
+    })
+
+  render() {
+    const { log, logCount, open } = this.state
+    const btnContent = open ? 'Close Portal' : 'Open Portal'
+
+    return (
+      <div>
+        <div>
+          <Button content={btnContent} onClick={this.handleClick.bind(this, btnContent)} />
+          <Divider />
+          <Button size="small" onClick={this.clearLog} content="Clear" />
+          <span>
+            Event Log <Label circular>{logCount}</Label>
+          </span>
+          <pre>{log.map((e, i) => <div key={i}>{e}</div>)}</pre>
+        </div>
+        <Portal open={open}>
+          <div
+            style={{
+              background: '#ddd',
+              position: 'fixed',
+              left: '40%',
+              top: '45%',
+              zIndex: 1000,
+            }}
+          >
+            <Header>This is a controlled portal</Header>
+            <p>Portals have tons of great callback functions to hook into.</p>
+            <p>To close, simply click the close button</p>
+          </div>
+        </Portal>
+      </div>
+    )
+  }
+}
+
+export default PortalExampleControlled

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

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

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