Skip to content

Commit

Permalink
[Example] With Portals (#617)
Browse files Browse the repository at this point in the history
  • Loading branch information
casesandberg authored Jan 11, 2020
1 parent f262644 commit 6a7f338
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 0 deletions.
23 changes: 23 additions & 0 deletions examples/with-portals/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
23 changes: 23 additions & 0 deletions examples/with-portals/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"dependencies": {
"react": "^16.8.6",
"react-color": "latest",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
8 changes: 8 additions & 0 deletions examples/with-portals/public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!doctype html>

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet" />
<style>#root { font-family: -apple-system, BlinkMacSystemFont, sans-serif; height: 100vh; width: 100vw;
display: flex; align-items: center; justify-content: center; }</style>

<div id="root"></div>
<div id="root-portal"></div>
37 changes: 37 additions & 0 deletions examples/with-portals/src/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/* eslint-disable no-console */
import React from 'react'

import Portal from './Portal'

export class App extends React.Component {
state = {
pickerVisible: false,
}

handleToggleVisibility = () => {
this.setState(({ pickerVisible }) => ({
pickerVisible: !pickerVisible,
}))
}

handleColorChange = ({ hex }) => console.log(hex)

render() {
return (
<div>
<button onClick={ this.handleToggleVisibility }>
Pick Color
</button>

{this.state.pickerVisible && (
<Portal
onChange={ this.handleColorChange }
onClose={ this.handleToggleVisibility }
/>
)}
</div>
)
}
}

export default App
32 changes: 32 additions & 0 deletions examples/with-portals/src/Modal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react'

export const Modal = ({ children, onClose }) => (
<div
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<div
onClick={ onClose }
style={{
backgroundColor: 'rgba(0,0,0,0.2)',
cursor: 'pointer',
position: 'absolute',
width: '100%',
height: '100%',
}}
/>
<div style={{ position: 'relative' }}>
{children}
</div>
</div>
)

export default Modal
23 changes: 23 additions & 0 deletions examples/with-portals/src/Portal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react'
import ReactDOM from 'react-dom'

import { SketchPicker } from 'react-color'
import Modal from './Modal'

export const Portal = ({ onClose, onChange }) => {
const contents = (
<Modal onClose={ onClose }>
<SketchPicker
color="#333"
onChangeComplete={ onChange }
/>
</Modal>
)

return ReactDOM.createPortal(
contents,
document.getElementById('root-portal')
)
}

export default Portal
9 changes: 9 additions & 0 deletions examples/with-portals/src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom'

import App from './App'

ReactDOM.render(
<App />,
document.getElementById('root')
)

0 comments on commit 6a7f338

Please sign in to comment.