Web: Files: Fixed first scroll to deep folder.
This commit is contained in:
parent
7dfb0b3d4b
commit
11211406f7
@ -2,7 +2,11 @@ import React from "react";
|
|||||||
import TreeMenu from "@appserver/components/tree-menu";
|
import TreeMenu from "@appserver/components/tree-menu";
|
||||||
import TreeNode from "@appserver/components/tree-menu/sub-components/tree-node";
|
import TreeNode from "@appserver/components/tree-menu/sub-components/tree-node";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import { FolderType, ShareAccessRights } from "@appserver/common/constants";
|
import {
|
||||||
|
ConflictResolveType,
|
||||||
|
FolderType,
|
||||||
|
ShareAccessRights,
|
||||||
|
} from "@appserver/common/constants";
|
||||||
import toastr from "studio/toastr";
|
import toastr from "studio/toastr";
|
||||||
|
|
||||||
import { onConvertFiles } from "../../helpers/files-converter";
|
import { onConvertFiles } from "../../helpers/files-converter";
|
||||||
@ -215,8 +219,8 @@ class TreeFolders extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
getItems = (data) => {
|
getItems = (data) => {
|
||||||
const { withoutProvider, theme } = this.props;
|
const { withoutProvider, theme, parentId } = this.props;
|
||||||
return data.map((item) => {
|
return data.map((item, index) => {
|
||||||
const dragging = this.props.dragging ? this.showDragItems(item) : false;
|
const dragging = this.props.dragging ? this.showDragItems(item) : false;
|
||||||
|
|
||||||
const showBadge = item.newItems
|
const showBadge = item.newItems
|
||||||
@ -232,6 +236,23 @@ class TreeFolders extends React.Component {
|
|||||||
let value = "";
|
let value = "";
|
||||||
if (dragging) value = `${item.id} dragging ${provider}`;
|
if (dragging) value = `${item.id} dragging ${provider}`;
|
||||||
|
|
||||||
|
if (this.needScroll) {
|
||||||
|
console.log("this.needScroll", this.needScroll);
|
||||||
|
if (item.parentId.toString() === parentId.toString()) {
|
||||||
|
if (index === this.child) {
|
||||||
|
this.props.setIsLoadingNodes(false);
|
||||||
|
const selectedNode = document.getElementsByClassName(
|
||||||
|
"rc-tree-node-selected"
|
||||||
|
)[0];
|
||||||
|
if (selectedNode) {
|
||||||
|
document
|
||||||
|
.querySelector("#folder-tree-scroll-bar > .scroll-body")
|
||||||
|
.scrollTo(0, selectedNode.offsetTop + index * 36);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if ((item.folders && item.folders.length > 0) || serviceFolder) {
|
if ((item.folders && item.folders.length > 0) || serviceFolder) {
|
||||||
return (
|
return (
|
||||||
<TreeNode
|
<TreeNode
|
||||||
@ -322,6 +343,12 @@ class TreeFolders extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
getNewTreeData(treeData, curId, child, pos) {
|
getNewTreeData(treeData, curId, child, pos) {
|
||||||
|
this.child = null;
|
||||||
|
!this.expand && this.props.setIsLoadingNodes(true);
|
||||||
|
if (!this.expand && curId.toString() === this.props.parentId.toString()) {
|
||||||
|
this.needScroll = true;
|
||||||
|
this.child = child.length - 1;
|
||||||
|
}
|
||||||
this.loop(treeData, child, pos);
|
this.loop(treeData, child, pos);
|
||||||
this.setLeaf(treeData, curId, 10);
|
this.setLeaf(treeData, curId, 10);
|
||||||
}
|
}
|
||||||
@ -398,6 +425,8 @@ class TreeFolders extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onExpand = (expandedKeys, treeNode) => {
|
onExpand = (expandedKeys, treeNode) => {
|
||||||
|
this.needScroll = false;
|
||||||
|
this.expand = true;
|
||||||
if (treeNode.node && !treeNode.node.children) {
|
if (treeNode.node && !treeNode.node.children) {
|
||||||
if (treeNode.expanded) {
|
if (treeNode.expanded) {
|
||||||
this.onLoadData(treeNode.node, true);
|
this.onLoadData(treeNode.node, true);
|
||||||
@ -461,6 +490,7 @@ class TreeFolders extends React.Component {
|
|||||||
disabled,
|
disabled,
|
||||||
theme,
|
theme,
|
||||||
isPanel,
|
isPanel,
|
||||||
|
isLoadingNodes,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -469,7 +499,7 @@ class TreeFolders extends React.Component {
|
|||||||
className="files-tree-menu"
|
className="files-tree-menu"
|
||||||
checkable={false}
|
checkable={false}
|
||||||
draggable={dragging}
|
draggable={dragging}
|
||||||
disabled={isLoading || disabled}
|
disabled={isLoadingNodes || isLoading || disabled}
|
||||||
multiple={false}
|
multiple={false}
|
||||||
showIcon
|
showIcon
|
||||||
switcherIcon={this.switcherIcon}
|
switcherIcon={this.switcherIcon}
|
||||||
@ -520,6 +550,8 @@ export default inject(
|
|||||||
setExpandedKeys,
|
setExpandedKeys,
|
||||||
setExpandedPanelKeys,
|
setExpandedPanelKeys,
|
||||||
getSubfolders,
|
getSubfolders,
|
||||||
|
setIsLoadingNodes,
|
||||||
|
isLoadingNodes,
|
||||||
} = treeFoldersStore;
|
} = treeFoldersStore;
|
||||||
const { id /* rootFolderType */ } = selectedFolderStore;
|
const { id /* rootFolderType */ } = selectedFolderStore;
|
||||||
|
|
||||||
@ -545,6 +577,8 @@ export default inject(
|
|||||||
setExpandedKeys,
|
setExpandedKeys,
|
||||||
setExpandedPanelKeys,
|
setExpandedPanelKeys,
|
||||||
getSubfolders,
|
getSubfolders,
|
||||||
|
setIsLoadingNodes,
|
||||||
|
isLoadingNodes,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
)(withTranslation(["Home", "Common"])(observer(TreeFolders)));
|
)(withTranslation(["Home", "Common"])(observer(TreeFolders)));
|
||||||
|
@ -16,6 +16,8 @@ const FolderTreeBody = ({
|
|||||||
selectedKeys,
|
selectedKeys,
|
||||||
theme,
|
theme,
|
||||||
isDisableTree,
|
isDisableTree,
|
||||||
|
parentId,
|
||||||
|
isLoadingNodes,
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation(["SelectFolder", "Common"]);
|
const { t } = useTranslation(["SelectFolder", "Common"]);
|
||||||
|
|
||||||
@ -33,7 +35,7 @@ const FolderTreeBody = ({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isAvailable ? (
|
{isAvailable ? (
|
||||||
<StyledTree theme={theme}>
|
<StyledTree theme={theme} isLoadingNodes={isLoadingNodes}>
|
||||||
<div className="selection-panel_tree-folder">
|
<div className="selection-panel_tree-folder">
|
||||||
<Scrollbar id="folder-tree-scroll-bar" stype="mediumBlack">
|
<Scrollbar id="folder-tree-scroll-bar" stype="mediumBlack">
|
||||||
<TreeFolders
|
<TreeFolders
|
||||||
@ -48,6 +50,7 @@ const FolderTreeBody = ({
|
|||||||
disabled={isDisableTree}
|
disabled={isDisableTree}
|
||||||
needUpdate={false}
|
needUpdate={false}
|
||||||
defaultExpandAll
|
defaultExpandAll
|
||||||
|
parentId={parentId}
|
||||||
/>
|
/>
|
||||||
</Scrollbar>
|
</Scrollbar>
|
||||||
</div>
|
</div>
|
||||||
@ -71,7 +74,7 @@ FolderTreeBody.defaultProps = {
|
|||||||
export default inject(
|
export default inject(
|
||||||
({ filesStore, treeFoldersStore, selectedFolderStore }) => {
|
({ filesStore, treeFoldersStore, selectedFolderStore }) => {
|
||||||
const { filter, isLoading } = filesStore;
|
const { filter, isLoading } = filesStore;
|
||||||
const { expandedPanelKeys } = treeFoldersStore;
|
const { expandedPanelKeys, isLoadingNodes } = treeFoldersStore;
|
||||||
|
|
||||||
const expandedKeysProp = expandedPanelKeys
|
const expandedKeysProp = expandedPanelKeys
|
||||||
? expandedPanelKeys
|
? expandedPanelKeys
|
||||||
@ -83,6 +86,7 @@ export default inject(
|
|||||||
|
|
||||||
filter,
|
filter,
|
||||||
isLoading,
|
isLoading,
|
||||||
|
isLoadingNodes,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
)(observer(FolderTreeBody));
|
)(observer(FolderTreeBody));
|
||||||
|
@ -222,6 +222,7 @@ class SelectFileDialog extends React.Component {
|
|||||||
maxInputWidth,
|
maxInputWidth,
|
||||||
folderId,
|
folderId,
|
||||||
fileInfo,
|
fileInfo,
|
||||||
|
storeParentId,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const {
|
const {
|
||||||
isVisible,
|
isVisible,
|
||||||
@ -285,6 +286,7 @@ class SelectFileDialog extends React.Component {
|
|||||||
filesListTitle={filesListTitle}
|
filesListTitle={filesListTitle}
|
||||||
fileId={fileInfo?.id}
|
fileId={fileInfo?.id}
|
||||||
newFilter={this.newFilter}
|
newFilter={this.newFilter}
|
||||||
|
parentId={storeParentId}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -332,7 +334,7 @@ export default inject(
|
|||||||
|
|
||||||
const { treeFolders, setExpandedPanelKeys } = treeFoldersStore;
|
const { treeFolders, setExpandedPanelKeys } = treeFoldersStore;
|
||||||
const { filter } = filesStore;
|
const { filter } = filesStore;
|
||||||
const { id: storeFolderId } = selectedFolderStore;
|
const { id: storeFolderId, parentId } = selectedFolderStore;
|
||||||
|
|
||||||
const { settingsStore } = auth;
|
const { settingsStore } = auth;
|
||||||
const { theme } = settingsStore;
|
const { theme } = settingsStore;
|
||||||
@ -345,6 +347,7 @@ export default inject(
|
|||||||
filter,
|
filter,
|
||||||
treeFolders,
|
treeFolders,
|
||||||
storeFolderId,
|
storeFolderId,
|
||||||
|
storeParentId: parentId,
|
||||||
folderId,
|
folderId,
|
||||||
theme: theme,
|
theme: theme,
|
||||||
setExpandedPanelKeys,
|
setExpandedPanelKeys,
|
||||||
|
@ -35,6 +35,7 @@ const SelectFolderDialogAsideView = ({
|
|||||||
primaryButtonName,
|
primaryButtonName,
|
||||||
isDisableTree,
|
isDisableTree,
|
||||||
isDisableButton,
|
isDisableButton,
|
||||||
|
parentId,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<StyledModalDialog
|
<StyledModalDialog
|
||||||
@ -73,6 +74,7 @@ const SelectFolderDialogAsideView = ({
|
|||||||
<div className="selection-panel_aside-tree">
|
<div className="selection-panel_aside-tree">
|
||||||
{folderId && resultingFolderTree ? (
|
{folderId && resultingFolderTree ? (
|
||||||
<FolderTreeBody
|
<FolderTreeBody
|
||||||
|
parentId={parentId}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
folderTree={resultingFolderTree}
|
folderTree={resultingFolderTree}
|
||||||
onSelect={onSelectFolder}
|
onSelect={onSelectFolder}
|
||||||
|
@ -187,6 +187,7 @@ class SelectFolderDialog extends React.Component {
|
|||||||
folderTitle,
|
folderTitle,
|
||||||
expandedKeys,
|
expandedKeys,
|
||||||
isDisableButton,
|
isDisableButton,
|
||||||
|
storeParentId,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const {
|
const {
|
||||||
displayType,
|
displayType,
|
||||||
@ -226,6 +227,7 @@ class SelectFolderDialog extends React.Component {
|
|||||||
isAvailable={isAvailable}
|
isAvailable={isAvailable}
|
||||||
isDisableTree={isDisableTree}
|
isDisableTree={isDisableTree}
|
||||||
isDisableButton={isDisableButton}
|
isDisableButton={isDisableButton}
|
||||||
|
parentId={storeParentId}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<SelectionPanel
|
<SelectionPanel
|
||||||
@ -250,6 +252,7 @@ class SelectFolderDialog extends React.Component {
|
|||||||
folderSelection
|
folderSelection
|
||||||
newFilter={this.newFilter}
|
newFilter={this.newFilter}
|
||||||
isDisableButton={isDisableButton}
|
isDisableButton={isDisableButton}
|
||||||
|
parentId={storeParentId}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -289,7 +292,7 @@ export default inject(
|
|||||||
const { treeFolders, setExpandedPanelKeys } = treeFoldersStore;
|
const { treeFolders, setExpandedPanelKeys } = treeFoldersStore;
|
||||||
|
|
||||||
const { filter } = filesStore;
|
const { filter } = filesStore;
|
||||||
const { id } = selectedFolderStore;
|
const { id, parentId } = selectedFolderStore;
|
||||||
const {
|
const {
|
||||||
setFolderId,
|
setFolderId,
|
||||||
setFolderTitle,
|
setFolderTitle,
|
||||||
@ -305,6 +308,7 @@ export default inject(
|
|||||||
return {
|
return {
|
||||||
theme: theme,
|
theme: theme,
|
||||||
storeFolderId: id,
|
storeFolderId: id,
|
||||||
|
storeParentId: parentId,
|
||||||
providerKey,
|
providerKey,
|
||||||
folderTitle,
|
folderTitle,
|
||||||
folderId,
|
folderId,
|
||||||
|
@ -45,6 +45,7 @@ const SelectionPanelBody = ({
|
|||||||
page,
|
page,
|
||||||
newFilter,
|
newFilter,
|
||||||
isDisableButton,
|
isDisableButton,
|
||||||
|
parentId,
|
||||||
}) => {
|
}) => {
|
||||||
const onMouseEvent = (event) => {
|
const onMouseEvent = (event) => {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
@ -87,6 +88,7 @@ const SelectionPanelBody = ({
|
|||||||
certainFolders
|
certainFolders
|
||||||
isAvailable={isAvailable}
|
isAvailable={isAvailable}
|
||||||
selectedKeys={[`${folderId}`]}
|
selectedKeys={[`${folderId}`]}
|
||||||
|
parentId={parentId}
|
||||||
expandedKeys={expandedKeys}
|
expandedKeys={expandedKeys}
|
||||||
isDisableTree={isDisableTree}
|
isDisableTree={isDisableTree}
|
||||||
displayType="modal"
|
displayType="modal"
|
||||||
|
@ -262,6 +262,7 @@ const StyledTree = styled.div`
|
|||||||
`}
|
`}
|
||||||
|
|
||||||
.scroll-body {
|
.scroll-body {
|
||||||
|
${(props) => props.isLoadingNodes && "overflow-y: hidden !important"};
|
||||||
overflow-x: hidden !important;
|
overflow-x: hidden !important;
|
||||||
padding-right: 0px !important;
|
padding-right: 0px !important;
|
||||||
}
|
}
|
||||||
|
@ -11,6 +11,7 @@ class TreeFoldersStore {
|
|||||||
expandedKeys = [];
|
expandedKeys = [];
|
||||||
expandedPanelKeys = null;
|
expandedPanelKeys = null;
|
||||||
rootFoldersTitles = {};
|
rootFoldersTitles = {};
|
||||||
|
isLoadingNodes = false;
|
||||||
|
|
||||||
constructor(selectedFolderStore) {
|
constructor(selectedFolderStore) {
|
||||||
makeAutoObservable(this);
|
makeAutoObservable(this);
|
||||||
@ -36,6 +37,9 @@ class TreeFoldersStore {
|
|||||||
this.treeFolders = treeFolders;
|
this.treeFolders = treeFolders;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
setIsLoadingNodes = (isLoadingNodes) => {
|
||||||
|
this.isLoadingNodes = isLoadingNodes;
|
||||||
|
};
|
||||||
setSelectedNode = (node) => {
|
setSelectedNode = (node) => {
|
||||||
if (node[0]) {
|
if (node[0]) {
|
||||||
this.selectedTreeNode = node;
|
this.selectedTreeNode = node;
|
||||||
|
Loading…
Reference in New Issue
Block a user