import { html, Component, createRef } from "../lib/index.js"; export default class Dialog extends Component { body = createRef(); constructor(props) { super(props); this.handleCloseClick = this.handleCloseClick.bind(this); this.handleBackdropClick = this.handleBackdropClick.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); } dismiss() { this.props.onDismiss(); } handleCloseClick(event) { event.preventDefault(); this.dismiss(); } handleBackdropClick(event) { if (event.target.className == "dialog") { this.dismiss(); } } handleKeyDown(event) { if (event.key == "Escape") { this.dismiss(); } } componentDidMount() { window.addEventListener("keydown", this.handleKeyDown); var autofocus = this.body.current.querySelector("input[autofocus]"); if (autofocus) { autofocus.focus(); } } componentWillUnmount() { window.removeEventListener("keydown", this.handleKeyDown); } render() { return html` <div class="dialog" onClick=${this.handleBackdropClick}> <div class="dialog-body" ref=${this.body}> <div class="dialog-header"> <a href="#" class="dialog-close" onClick=${this.handleCloseClick}>×</span> <h2>${this.props.title}</h2> </div> ${this.props.children} </div> </div> `; } }