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:
parent
ec4e886daf
commit
e7505f8205
2 changed files with 37 additions and 4 deletions
|
@ -9,10 +9,43 @@ class Overlay extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.close = this.close.bind(this);
|
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() {
|
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() {
|
close() {
|
||||||
|
@ -36,7 +69,7 @@ class Overlay extends React.Component {
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
role="main"
|
role="main"
|
||||||
aria-label={ariaLabel}
|
aria-label={ariaLabel}
|
||||||
ref={(element) => { this.overlay = element; }}
|
ref={(node) => { this.node = node; }}
|
||||||
className="overlay__body"
|
className="overlay__body"
|
||||||
>
|
>
|
||||||
<header className="overlay__header">
|
<header className="overlay__header">
|
||||||
|
|
Loading…
Reference in a new issue