tomekwojcik/react-custom-popup
1
0
Fork 0
Code Releases Activity

Initial commit.

Browse Source
This commit is contained in:
Tomek Wójcik
2019-02-13 21:10:40 +01:00
commit 88a6747e7f
24 changed files with 8644 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example/.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
assets/example.css*
assets/example.js*

2
example/assets/marx.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

108
example/example.js Normal file
View File

@@ -0,0 +1,108 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Popup from '../lib/react-custom-popup.js';
const CUSTOM_DIMENSION = 500;
class App extends React.Component {
constructor (props) {
super(props);
this.onCustomLayoutCheckboxClick = this.onCustomLayoutCheckboxClick.bind(this);
this.onHideOverlayCheckboxClick = this.onHideOverlayCheckboxClick.bind(this);
this.onShowPopupButtonClick = this.onShowPopupButtonClick.bind(this);
this.onPopupOverlayClick = this.onPopupOverlayClick.bind(this);
this.refButton = React.createRef();
this.state = {
customLayout: false,
hideOverlay: false,
popupVisible: false
};
}
onHideOverlayCheckboxClick (event) {
this.setState({hideOverlay: !this.state.hideOverlay});
}
onCustomLayoutCheckboxClick (event) {
this.setState({customLayout: !this.state.customLayout});
}
onShowPopupButtonClick (event) {
event.stopPropagation();
event.preventDefault();
this.setState({popupVisible: true});
}
onPopupOverlayClick (event) {
event.stopPropagation();
event.preventDefault();
this.setState({popupVisible: false});
}
onPopupLayout (currentLayout) {
return [
(window.innerWidth - CUSTOM_DIMENSION) / 2,
(window.innerHeight - CUSTOM_DIMENSION) / 2,
CUSTOM_DIMENSION,
CUSTOM_DIMENSION
];
}
render () {
return (
<React.Fragment>
<h1>React Custom Popup Example</h1>
<p>
<strong>Configure</strong>
<br/>
<input
id="checkboxHideOverlay"
type="checkbox"
defaultValue={this.state.hideOverlay}
onClick={this.onHideOverlayCheckboxClick}
/>
<label htmlFor="checkboxHideOverlay">Hide overlay</label>
<br/>
<input
id="checkboxCustomLayout"
type="checkbox"
defaultValue={this.state.customLayout}
onClick={this.onCustomLayoutCheckboxClick}
/>
<label htmlFor="checkboxCustomLayout">Custom layout</label>
</p>
<button
ref={this.refButton}
onClick={this.onShowPopupButtonClick}
>
Show Popup
</button>
<Popup
anchor={this.refButton}
hideOverlay={this.state.hideOverlay}
visible={this.state.popupVisible}
onLayout={
(this.state.customLayout) ? this.onPopupLayout : undefined
}
onOverlayClick={this.onPopupOverlayClick}
>
<div id="popup" className={`${this.state.customLayout ? 'custom-layout' : ''}`}>
<h2>Hello, I'm a popup!</h2>
<p>
<button onClick={this.onPopupOverlayClick}>Close</button>
</p>
</div>
</Popup>
</React.Fragment>
);
}
}
window.addEventListener('load', () => {
ReactDOM.render(
<App />, document.getElementById('main')
);
});

43
example/example.scss Normal file
View File

@@ -0,0 +1,43 @@
@import "../src/Popup";
#main {
margin: 1em;
p {
input[type="checkbox"] {
margin-right: 0.5em;
}
label {
line-height: 1;
}
}
}
#popup {
background: white;
box-shadow: 0px 0px 2px #ebebeb;
border: 1px solid #ebebeb;
border-radius: 2px;
padding: 16px;
&.custom-layout {
height: 500px;
width: 500px;
}
h2 {
margin-top: 0px;
}
p {
margin-bottom: 0px;
text-align: right;
}
}
.bthlabs-react-custom-popup {
.bthlabs-rcp-overlay {
background: rgba(0, 0, 0, 0.2);
}
}

16
example/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React Custom Popup Example</title>
<meta name="description" content="React Custom Popup Example">
<meta name="author" content="Tomek Wójcik <contact@bthlabs.pl> (https://www.bthlabs.pl/)">
<link rel="stylesheet" href="assets/marx.min.css">
<link rel="stylesheet" href="assets/example.css">
</head>
<body>
<div id="main">
</div>
<script src="assets/example.js"></script>
</body>
</html>