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