Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4666 from matrix-org/t3chguy/image-view-focuslock

Browse Source 
Apply FocusLock to ImageView to capture Escape handling
This commit is contained in:
Michael Telatynski 2020-06-03 15:37:18 +01:00 committed by GitHub
commit 030cc5cdea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/views/elements/ImageView.js
View File

@ -15,8 +15,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
'use strict';
import React from 'react';
import PropTypes from 'prop-types';
import {MatrixClientPeg} from "../../../MatrixClientPeg";
@ -27,6 +25,7 @@ import AccessibleButton from "./AccessibleButton";
import Modal from "../../../Modal";
import * as sdk from "../../../index";
import {Key} from "../../../Keyboard";
import FocusLock from "react-focus-lock";
export default class ImageView extends React.Component {
static propTypes = {
@ -50,16 +49,6 @@ export default class ImageView extends React.Component {
this.state = { rotationDegrees: 0 };
}
// XXX: keyboard shortcuts for managing dialogs should be done by the modal
// dialog base class somehow, surely...
componentDidMount() {
document.addEventListener("keydown", this.onKeyDown);
}
componentWillUnmount() {
document.removeEventListener("keydown", this.onKeyDown);
}
onKeyDown = (ev) => {
if (ev.key === Key.ESCAPE) {
ev.stopPropagation();
@ -195,7 +184,14 @@ export default class ImageView extends React.Component {
const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style};
return (
<div className="mx_ImageView">
<FocusLock
returnFocus={true}
lockProps={{
onKeyDown: this.onKeyDown,
role: "dialog",
}}
className="mx_ImageView"
>
<div className="mx_ImageView_lhs">
</div>
<div className="mx_ImageView_content">
@ -231,7 +227,7 @@ export default class ImageView extends React.Component {
</div>
<div className="mx_ImageView_rhs">
</div>
</div>
</FocusLock>
);
}
}