Issue overlay (#577)

* fixes #384

Positioning and font-size was off.

* Added consistent styling

* Further Changes.

* removed line height.

* fixes #371

* Made minor semantic and code consistency changes.

* anchor tag removed
This commit is contained in:
Himanshu 2018-03-02 22:10:31 +05:30 committed by Cassie Tarakajian
parent ec4e886daf
commit e7505f8205
2 changed files with 37 additions and 4 deletions

View file

@ -9,10 +9,43 @@ class Overlay extends React.Component {
constructor(props) {
super(props);
this.close = this.close.bind(this);
this.handleClick = this.handleClick.bind(this);
this.handleClickOutside = this.handleClickOutside.bind(this);
this.keyPressHandle = this.keyPressHandle.bind(this);
}
componentWillMount() {
document.addEventListener('mousedown', this.handleClick, false);
document.addEventListener('keydown', this.keyPressHandle);
}
componentDidMount() {
this.overlay.focus();
this.node.focus();
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClick, false);
document.removeEventListener('keydown', this.keyPressHandle);
}
handleClick(e) {
if (this.node.contains(e.target)) {
return;
}
this.handleClickOutside();
}
handleClickOutside() {
this.close();
}
keyPressHandle(e) {
// escape key code = 27.
// So here we are checking if the key pressed was Escape key.
if (e.keyCode === 27) {
this.close();
}
}
close() {
@ -36,12 +69,12 @@ class Overlay extends React.Component {
tabIndex="0"
role="main"
aria-label={ariaLabel}
ref={(element) => { this.overlay = element; }}
ref={(node) => { this.node = node; }}
className="overlay__body"
>
<header className="overlay__header">
<h2 className="overlay__title">{title}</h2>
<button className="overlay__close-button" onClick={this.close}>
<button className="overlay__close-button" onClick={this.close} >
<InlineSVG src={exitUrl} alt="close overlay" />
</button>
</header>