Web: Files: added close events by keys, fixed focus in aside
This commit is contained in:
parent
f8b791fa54
commit
6c69ece258
@ -20,6 +20,7 @@ class AddGroupsPanelComponent extends React.Component {
|
||||
changeLanguage(i18n);
|
||||
|
||||
this.state = { showActionPanel: false };
|
||||
this.scrollRef = React.createRef();
|
||||
}
|
||||
|
||||
onPlusClick = () =>
|
||||
@ -52,6 +53,22 @@ class AddGroupsPanelComponent extends React.Component {
|
||||
onClose();
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const scroll = this.scrollRef.current.getElementsByClassName('scroll-body');
|
||||
setTimeout(() => scroll[1] && scroll[1].focus(), 2000);
|
||||
window.addEventListener("keyup", this.onKeyPress);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener("keyup", this.onKeyPress);
|
||||
}
|
||||
|
||||
onKeyPress = event => {
|
||||
if (event.key === "Esc" || event.key === "Escape") {
|
||||
this.props.onClose();
|
||||
}
|
||||
};
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
const { showActionPanel } = this.state;
|
||||
const { visible, accessRight } = this.props;
|
||||
@ -107,7 +124,7 @@ class AddGroupsPanelComponent extends React.Component {
|
||||
/>
|
||||
</StyledHeaderContent>
|
||||
|
||||
<StyledBody>
|
||||
<StyledBody ref={this.scrollRef}>
|
||||
<GroupSelector
|
||||
isOpen={visible}
|
||||
isMultiSelect
|
||||
|
@ -22,6 +22,8 @@ class AddUsersPanelComponent extends React.Component {
|
||||
this.state = {
|
||||
showActionPanel: false
|
||||
};
|
||||
|
||||
this.scrollRef = React.createRef();
|
||||
}
|
||||
|
||||
onPlusClick = () =>
|
||||
@ -53,6 +55,22 @@ class AddUsersPanelComponent extends React.Component {
|
||||
onClose();
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const scroll = this.scrollRef.current.getElementsByClassName('scroll-body');
|
||||
setTimeout(() => scroll[1] && scroll[1].focus(), 2000);
|
||||
window.addEventListener("keyup", this.onKeyPress);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener("keyup", this.onKeyPress);
|
||||
}
|
||||
|
||||
onKeyPress = event => {
|
||||
if (event.key === "Esc" || event.key === "Escape") {
|
||||
this.props.onClose();
|
||||
}
|
||||
};
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
const { showActionPanel } = this.state;
|
||||
const { visible, accessRight } = this.props;
|
||||
@ -108,7 +126,7 @@ class AddUsersPanelComponent extends React.Component {
|
||||
/>*/}
|
||||
</StyledHeaderContent>
|
||||
|
||||
<StyledBody>
|
||||
<StyledBody ref={this.scrollRef}>
|
||||
<PeopleSelector
|
||||
displayType="aside"
|
||||
withoutAside
|
||||
|
@ -2,7 +2,7 @@ import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "react-redux";
|
||||
import { withRouter } from "react-router";
|
||||
import { Backdrop, Heading, Aside, toastr } from "asc-web-components";
|
||||
import { Backdrop, Heading, Aside, toastr, ModalDialog } from "asc-web-components";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { utils as commonUtils } from "asc-web-common";
|
||||
import i18n from "./i18n";
|
||||
@ -88,27 +88,24 @@ class OperationsPanelComponent extends React.Component {
|
||||
|
||||
return (
|
||||
<StyledAsidePanel visible={visible}>
|
||||
<Backdrop onClick={onClose} visible={visible} zIndex={zIndex} />
|
||||
<Aside className="header_aside-panel" visible={visible}>
|
||||
<StyledContent>
|
||||
<StyledHeaderContent className="files-operations-panel">
|
||||
<Heading size="medium" truncate>
|
||||
{isRecycleBinFolder ? t("Restore"): isCopy ? t("Copy") : t("Move")}
|
||||
</Heading>
|
||||
</StyledHeaderContent>
|
||||
<StyledBody className="files-operations-body">
|
||||
<TreeFolders
|
||||
expandedKeys={expandedKeys}
|
||||
data={data}
|
||||
filter={filter}
|
||||
onLoading={onLoading}
|
||||
isLoading={isLoading}
|
||||
onSelect={this.onSelect}
|
||||
needUpdate={false}
|
||||
/>
|
||||
</StyledBody>
|
||||
</StyledContent>
|
||||
</Aside>
|
||||
<ModalDialog
|
||||
visible={visible}
|
||||
displayType='aside'
|
||||
zIndex={zIndex}
|
||||
headerContent={isRecycleBinFolder ? t("Restore"): isCopy ? t("Copy") : t("Move")}
|
||||
onClose={onClose}
|
||||
bodyContent={
|
||||
<TreeFolders
|
||||
expandedKeys={expandedKeys}
|
||||
data={data}
|
||||
filter={filter}
|
||||
onLoading={onLoading}
|
||||
isLoading={isLoading}
|
||||
onSelect={this.onSelect}
|
||||
needUpdate={false}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</StyledAsidePanel>
|
||||
);
|
||||
}
|
||||
|
@ -61,6 +61,7 @@ class SharingPanelComponent extends React.Component {
|
||||
};
|
||||
|
||||
this.ref = React.createRef();
|
||||
this.scrollRef = React.createRef();
|
||||
}
|
||||
|
||||
onPlusClick = () =>
|
||||
@ -186,7 +187,7 @@ class SharingPanelComponent extends React.Component {
|
||||
this.setState({ isNotifyUsers: !this.state.isNotifyUsers });
|
||||
|
||||
onShowUsersPanel = () =>
|
||||
this.setState({ showAddUsersPanel: !this.state.showAddUsersPanel });
|
||||
this.setState({ showAddUsersPanel: !this.state.showAddUsersPanel, showActionPanel: false });
|
||||
|
||||
onFullAccessItemClick = (item) => {
|
||||
const newUsers = this.state.shareDataItems;
|
||||
@ -438,7 +439,7 @@ class SharingPanelComponent extends React.Component {
|
||||
});
|
||||
|
||||
onShowGroupsPanel = () =>
|
||||
this.setState({ showAddGroupsPanel: !this.state.showAddGroupsPanel });
|
||||
this.setState({ showAddGroupsPanel: !this.state.showAddGroupsPanel, showActionPanel: false });
|
||||
|
||||
onChangeMessage = (e) => this.setState({ message: e.target.value });
|
||||
|
||||
@ -449,12 +450,27 @@ class SharingPanelComponent extends React.Component {
|
||||
componentDidMount() {
|
||||
this.props.onLoading(true);
|
||||
this.getShareData();
|
||||
|
||||
document.addEventListener("keyup", this.onKeyPress);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("keyup", this.onKeyPress);
|
||||
}
|
||||
|
||||
onKeyPress = event => {
|
||||
const { showAddUsersPanel, showEmbeddingPanel, showAddGroupsPanel } = this.state;
|
||||
if(showAddUsersPanel || showEmbeddingPanel || showAddGroupsPanel) return;
|
||||
if (event.key === "Esc" || event.key === "Escape") {
|
||||
this.props.onClose();
|
||||
}
|
||||
};
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if(this.state.showPanel !== prevState.showPanel && this.state.showPanel === false) {
|
||||
this.props.onClose();
|
||||
}
|
||||
this.scrollRef.current.view.focus();
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -590,7 +606,7 @@ class SharingPanelComponent extends React.Component {
|
||||
/>*/}
|
||||
</div>
|
||||
</StyledSharingHeaderContent>
|
||||
<StyledSharingBody stype="mediumBlack" style={{height: '83vh'}}>
|
||||
<StyledSharingBody ref={this.scrollRef} stype="mediumBlack" style={{height: '83vh'}}>
|
||||
{shareDataItems.map((item, index) => (
|
||||
<SharingRow
|
||||
key={index}
|
||||
|
@ -16,6 +16,18 @@ const PanelStyles = css`
|
||||
`;
|
||||
|
||||
const StyledAsidePanel = styled.div`
|
||||
z-index: 310;
|
||||
.modal-dialog-aside {
|
||||
padding: 0;
|
||||
transform: translateX(${(props) => (props.visible ? "0" : "500px")});
|
||||
width: 500px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 320px;
|
||||
transform: translateX(${(props) => (props.visible ? "0" : "320px")});
|
||||
}
|
||||
}
|
||||
|
||||
.header_aside-panel {
|
||||
transform: translateX(${(props) => (props.visible ? "0" : "500px")});
|
||||
width: 500px;
|
||||
@ -78,10 +90,6 @@ const StyledContent = styled.div`
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.files-operations-body {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.header_aside-panel-header {
|
||||
max-width: 500px;
|
||||
margin: 0 0 0 16px;
|
||||
|
Loading…
Reference in New Issue
Block a user