Merge pull request #1676 from ONLYOFFICE/feature/selectiona-area-dashboard
Feature/selectiona area dashboard
This commit is contained in:
commit
352da28ee3
@ -10,8 +10,6 @@ const SelectionArea = (props) => {
|
||||
setSelections(added, removed, clear);
|
||||
};
|
||||
|
||||
const itemHeight = viewAs === "table" ? 49 : 59;
|
||||
|
||||
return isMobile ? (
|
||||
<></>
|
||||
) : (
|
||||
@ -23,7 +21,6 @@ const SelectionArea = (props) => {
|
||||
itemClass="user-item"
|
||||
onMove={onMove}
|
||||
viewAs={viewAs}
|
||||
itemHeight={itemHeight}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -11,6 +11,7 @@ const SelectionArea = (props) => {
|
||||
getCountTilesInRow,
|
||||
isRooms,
|
||||
foldersLength,
|
||||
filesLength,
|
||||
isInfoPanelVisible,
|
||||
} = props;
|
||||
|
||||
@ -39,19 +40,26 @@ const SelectionArea = (props) => {
|
||||
};
|
||||
|
||||
const selectableClass = viewAs === "tile" ? "files-item" : "window-item";
|
||||
const itemHeight = viewAs === "table" ? 49 : viewAs === "row" ? 59 : null;
|
||||
|
||||
const countRowsOfFolders = Math.ceil(foldersLength / countTilesInRow);
|
||||
const division = foldersLength % countTilesInRow;
|
||||
const countOfMissingTiles = division ? countTilesInRow - division : 0;
|
||||
const getCountOfMissingFilesTiles = (itemsLength) => {
|
||||
const division = itemsLength % countTilesInRow;
|
||||
return division ? countTilesInRow - division : 0;
|
||||
};
|
||||
|
||||
// const itemsContainer = document.getElementsByClassName(itemsContainerClass);
|
||||
// const folderHeaderHeight = itemsContainer[0]
|
||||
// .getElementsByClassName("folder_header")[0]
|
||||
// .parentElement.getBoundingClientRect().height;
|
||||
// const filesHeaderHeight = itemsContainer[0]
|
||||
// .getElementsByClassName("files_header")[0]
|
||||
// .parentElement.getBoundingClientRect().height;
|
||||
const arrayTypes = [
|
||||
{
|
||||
type: "file",
|
||||
rowCount: Math.ceil(filesLength / countTilesInRow),
|
||||
rowGap: 14,
|
||||
countOfMissingTiles: getCountOfMissingFilesTiles(filesLength),
|
||||
},
|
||||
{
|
||||
type: "folder",
|
||||
rowCount: Math.ceil(foldersLength / countTilesInRow),
|
||||
rowGap: 12,
|
||||
countOfMissingTiles: getCountOfMissingFilesTiles(foldersLength),
|
||||
},
|
||||
];
|
||||
|
||||
return isMobile || dragging ? (
|
||||
<></>
|
||||
@ -64,24 +72,24 @@ const SelectionArea = (props) => {
|
||||
itemClass="files-item"
|
||||
onMove={onMove}
|
||||
viewAs={viewAs}
|
||||
itemHeight={itemHeight}
|
||||
countTilesInRow={countTilesInRow}
|
||||
isRooms={isRooms}
|
||||
countRowsOfFolders={countRowsOfFolders}
|
||||
countOfMissingTiles={countOfMissingTiles}
|
||||
folderTileGap={12}
|
||||
fileTileGap={14}
|
||||
foldersTileHeight={66}
|
||||
filesTileHeight={222}
|
||||
folderHeaderHeight={35}
|
||||
filesHeaderHeight={countRowsOfFolders ? 46 : 0}
|
||||
defaultHeaderHeight={46}
|
||||
arrayTypes={arrayTypes}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, filesStore, treeFoldersStore }) => {
|
||||
const { dragging, viewAs, setSelections, getCountTilesInRow, folders } =
|
||||
filesStore;
|
||||
const {
|
||||
dragging,
|
||||
viewAs,
|
||||
setSelections,
|
||||
getCountTilesInRow,
|
||||
folders,
|
||||
files,
|
||||
} = filesStore;
|
||||
const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
|
||||
const { isVisible: isInfoPanelVisible } = auth.infoPanelStore;
|
||||
|
||||
@ -94,6 +102,7 @@ export default inject(({ auth, filesStore, treeFoldersStore }) => {
|
||||
getCountTilesInRow,
|
||||
isRooms,
|
||||
foldersLength: folders.length,
|
||||
filesLength: files.length,
|
||||
isInfoPanelVisible,
|
||||
};
|
||||
})(observer(SelectionArea));
|
||||
|
@ -16,12 +16,19 @@ class SelectionArea extends React.Component {
|
||||
this.selectableNodes = new Set();
|
||||
|
||||
this.elemRect = {};
|
||||
this.arrayOfTypes = [];
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener("mousedown", this.onTapStart);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.isRooms !== prevProps.isRooms) {
|
||||
this.arrayOfTypes = [];
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("mousedown", this.onTapStart);
|
||||
}
|
||||
@ -36,88 +43,76 @@ class SelectionArea extends React.Component {
|
||||
isIntersects = (itemIndex, itemType) => {
|
||||
const { right, left, bottom, top } = this.areaRect;
|
||||
const { scrollTop } = this.scrollElement;
|
||||
const {
|
||||
viewAs,
|
||||
countTilesInRow,
|
||||
countOfMissingTiles,
|
||||
countRowsOfFolders,
|
||||
folderTileGap,
|
||||
fileTileGap,
|
||||
foldersTileHeight,
|
||||
filesTileHeight,
|
||||
filesHeaderHeight,
|
||||
theme,
|
||||
} = this.props;
|
||||
const { viewAs, countTilesInRow, defaultHeaderHeight, arrayTypes, theme } =
|
||||
this.props;
|
||||
|
||||
const isRtl = theme.interfaceDirection === "rtl";
|
||||
|
||||
const itemHeight = this.props.itemHeight ?? this.elemRect.height;
|
||||
|
||||
let itemTop, itemBottom, itemLeft, itemRight;
|
||||
|
||||
// Tile view
|
||||
if (viewAs === "tile") {
|
||||
let countOfMissingTiles = 0;
|
||||
const itemGap = arrayTypes.find((x) => x.type === itemType).rowGap;
|
||||
|
||||
// TOP/BOTTOM item position
|
||||
if (itemIndex === 0) {
|
||||
itemTop = this.elemRect.top - scrollTop;
|
||||
itemBottom = itemTop + itemHeight;
|
||||
} else if (itemType === "file") {
|
||||
const folderHeight = foldersTileHeight + folderTileGap;
|
||||
const fileHeight = filesTileHeight + fileTileGap;
|
||||
|
||||
const nextRow = Math.floor(
|
||||
(itemIndex + countOfMissingTiles) / countTilesInRow
|
||||
);
|
||||
|
||||
itemTop =
|
||||
this.elemRect.top +
|
||||
folderHeight * countRowsOfFolders +
|
||||
filesHeaderHeight +
|
||||
fileHeight * (nextRow - countRowsOfFolders) -
|
||||
scrollTop;
|
||||
|
||||
itemBottom = itemTop + fileHeight - folderTileGap;
|
||||
itemBottom = itemTop + this.elemRect.height;
|
||||
} else {
|
||||
const rowIndex = Math.trunc(itemIndex / countTilesInRow);
|
||||
const indexOfType = this.arrayOfTypes.findIndex(
|
||||
(x) => x.type === itemType
|
||||
);
|
||||
const headersCount = indexOfType === 0 ? 0 : indexOfType;
|
||||
|
||||
itemTop =
|
||||
this.elemRect.top +
|
||||
(itemHeight + folderTileGap) * rowIndex -
|
||||
scrollTop;
|
||||
itemBottom = itemTop + itemHeight;
|
||||
itemTop = headersCount * defaultHeaderHeight;
|
||||
const itemHeight = this.arrayOfTypes[indexOfType].itemHeight + itemGap;
|
||||
|
||||
if (!headersCount) {
|
||||
const rowIndex = Math.trunc(itemIndex / countTilesInRow);
|
||||
|
||||
itemTop += this.elemRect.top + itemHeight * rowIndex - scrollTop;
|
||||
itemBottom = itemTop + itemHeight - itemGap;
|
||||
} else {
|
||||
let prevRowsCount = 0;
|
||||
|
||||
for (let i = 0; i < indexOfType; i++) {
|
||||
const item = arrayTypes.find(
|
||||
(x) => x.type === this.arrayOfTypes[i].type
|
||||
);
|
||||
|
||||
countOfMissingTiles += item.countOfMissingTiles;
|
||||
prevRowsCount += item.rowCount;
|
||||
|
||||
itemTop +=
|
||||
(this.arrayOfTypes[i].itemHeight + item.rowGap) * item.rowCount;
|
||||
}
|
||||
|
||||
const nextRow =
|
||||
Math.floor((itemIndex + countOfMissingTiles) / countTilesInRow) -
|
||||
prevRowsCount;
|
||||
|
||||
itemTop += this.elemRect.top + itemHeight * nextRow - scrollTop;
|
||||
itemBottom = itemTop + itemHeight - itemGap;
|
||||
}
|
||||
}
|
||||
|
||||
// Set left/right for item
|
||||
let fileIndex = itemIndex % countTilesInRow;
|
||||
if (itemType === "file") {
|
||||
fileIndex = (itemIndex + countOfMissingTiles) % countTilesInRow;
|
||||
}
|
||||
let columnIndex = (itemIndex + countOfMissingTiles) % countTilesInRow;
|
||||
|
||||
// Mirror fileIndex for RTL interface (2, 1, 0 => 0, 1, 2)
|
||||
if (isRtl && viewAs === "tile") {
|
||||
fileIndex = countTilesInRow - 1 - fileIndex;
|
||||
columnIndex = countTilesInRow - 1 - columnIndex;
|
||||
}
|
||||
|
||||
if (fileIndex == 0) {
|
||||
// LEFT/RIGHT item position
|
||||
if (columnIndex == 0) {
|
||||
itemLeft = this.elemRect.left;
|
||||
itemRight = itemLeft + this.elemRect.width;
|
||||
} else {
|
||||
itemLeft =
|
||||
this.elemRect.left + (this.elemRect.width + fileTileGap) * fileIndex;
|
||||
this.elemRect.left + (this.elemRect.width + itemGap) * columnIndex;
|
||||
itemRight = itemLeft + this.elemRect.width;
|
||||
}
|
||||
} else {
|
||||
// Table/row view
|
||||
|
||||
if (itemIndex === 0) {
|
||||
itemTop = this.elemRect.top - scrollTop;
|
||||
itemBottom = itemTop + itemHeight;
|
||||
} else {
|
||||
itemTop = this.elemRect.top + itemHeight * itemIndex - scrollTop;
|
||||
itemBottom = itemTop + itemHeight;
|
||||
}
|
||||
}
|
||||
|
||||
if (viewAs === "tile") {
|
||||
return (
|
||||
right > itemLeft &&
|
||||
left < itemRight &&
|
||||
@ -125,6 +120,15 @@ class SelectionArea extends React.Component {
|
||||
top < itemBottom
|
||||
);
|
||||
} else {
|
||||
const itemHeight = this.elemRect.height;
|
||||
if (itemIndex === 0) {
|
||||
itemTop = this.elemRect.top - scrollTop;
|
||||
itemBottom = itemTop + itemHeight;
|
||||
} else {
|
||||
itemTop = this.elemRect.top + itemHeight * itemIndex - scrollTop;
|
||||
itemBottom = itemTop + itemHeight;
|
||||
}
|
||||
|
||||
return bottom > itemTop && top < itemBottom;
|
||||
}
|
||||
};
|
||||
@ -211,8 +215,13 @@ class SelectionArea extends React.Component {
|
||||
const itemType = splitItem[0];
|
||||
const itemIndex = splitItem[4];
|
||||
|
||||
// console.log("node", node);
|
||||
// console.log("node", node.getBoundingClientRect());
|
||||
//TODO: maybe do this line little bit better
|
||||
if (this.arrayOfTypes.findIndex((x) => x.type === itemType) === -1) {
|
||||
this.arrayOfTypes.push({
|
||||
type: itemType,
|
||||
itemHeight: node.getBoundingClientRect().height,
|
||||
});
|
||||
}
|
||||
|
||||
const isIntersects = this.isIntersects(+itemIndex, itemType);
|
||||
|
||||
@ -330,14 +339,12 @@ class SelectionArea extends React.Component {
|
||||
this.elemRect.left = scroll.scrollLeft + itemsContainerRect.left;
|
||||
}
|
||||
|
||||
if (viewAs === "tile") {
|
||||
const elemRect = itemsContainer[0]
|
||||
.getElementsByClassName(selectableClass)[0]
|
||||
.getBoundingClientRect();
|
||||
const elemRect = itemsContainer[0]
|
||||
.getElementsByClassName(selectableClass)[0]
|
||||
.getBoundingClientRect();
|
||||
|
||||
this.elemRect.width = elemRect.width;
|
||||
this.elemRect.height = elemRect.height;
|
||||
}
|
||||
this.elemRect.width = elemRect.width;
|
||||
this.elemRect.height = elemRect.height;
|
||||
};
|
||||
|
||||
onMove = (e) => {
|
||||
|
Loading…
Reference in New Issue
Block a user