108 lines
2.9 KiB
JavaScript
108 lines
2.9 KiB
JavaScript
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')
|
|
);
|
|
});
|