Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 08:58:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 114

Escape key closes modals (#1088)

Browse source 
* Closes #922

* #922 added Windows section to build docs

* go sum updated

* updated go sum

* fixed #963 - calling teams api if not on core

* added command for seeding queries

* added command default to higher level

* linted test

* only need 2 queries

* fixed e2e command for seeding queries

* fixes #952 - added esc key binding to modals

* #952 lint fix
This commit is contained in:
Martavis Parker 2021-06-15 09:56:23 -07:00 committed by GitHub
parent 5e52ba7aea
commit 4bfeddda79
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
frontend/components/modals/Modal/Modal.tsx
View file

@ -1,4 +1,4 @@
import React, { Component } from "react";
import React, { useEffect } from "react";
import classnames from "classnames";
const baseClass = "modal";
@ -10,28 +10,39 @@ interface IModalProps {
className?: string;
}
class Modal extends Component<IModalProps> {
render(): JSX.Element {
const { children, className, onExit, title } = this.props;
const modalContainerClassName = classnames(
`${baseClass}__modal_container`,
className
);
const Modal = ({ children, onExit, title, className }: IModalProps) => {
useEffect(() => {
const closeWithEscapeKey = (e: KeyboardEvent) => {
if (e.key === "Escape") {
onExit();
}
};
return (
<div className={`${baseClass}__background`}>
<div className={modalContainerClassName}>
<div className={`${baseClass}__header`}>
<span>{title}</span>
<div className={`${baseClass}__ex`}>
<button className="button button--unstyled" onClick={onExit} />
</div>
document.addEventListener("keydown", closeWithEscapeKey);
return () => {
document.removeEventListener("keydown", closeWithEscapeKey);
};
}, []);
const modalContainerClassName = classnames(
`${baseClass}__modal_container`,
className
);
return (
<div className={`${baseClass}__background`}>
<div className={modalContainerClassName}>
<div className={`${baseClass}__header`}>
<span>{title}</span>
<div className={`${baseClass}__ex`}>
<button className="button button--unstyled" onClick={onExit} />
</div>
<div className={`${baseClass}__content`}>{children}</div>
</div>
<div className={`${baseClass}__content`}>{children}</div>
</div>
);
}
}
</div>
);
};
export default Modal;