Merge pull request #1133 from ONLYOFFICE/feature/fixed-files-table-cells-render
Feature/fixed files table cells render
This commit is contained in:
commit
7bbffa90a7
@ -0,0 +1,279 @@
|
|||||||
|
import styled, { css } from "styled-components";
|
||||||
|
import Base from "@docspace/components/themes/base";
|
||||||
|
import TableRow from "@docspace/components/table-container/TableRow";
|
||||||
|
import DragAndDrop from "@docspace/components/drag-and-drop";
|
||||||
|
|
||||||
|
const hotkeyBorderStyle = css`
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
border-image-slice: 1;
|
||||||
|
border-image-source: linear-gradient(to left, #2da7db 24px, #2da7db 24px);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const rowCheckboxDraggingStyle = css`
|
||||||
|
margin-left: -20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
border-image-slice: 1;
|
||||||
|
border-image-source: ${(props) => `linear-gradient(to right,
|
||||||
|
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const contextMenuWrapperDraggingStyle = css`
|
||||||
|
margin-right: -20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
border-image-slice: 1;
|
||||||
|
border-image-source: ${(props) => `linear-gradient(to left,
|
||||||
|
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledTableRow = styled(TableRow)`
|
||||||
|
${(props) =>
|
||||||
|
props.isRoom &&
|
||||||
|
css`
|
||||||
|
.table-container_cell {
|
||||||
|
height: 48px;
|
||||||
|
max-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_row-checkbox {
|
||||||
|
padding-left: 20px !important;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
${(props) =>
|
||||||
|
!props.isDragging &&
|
||||||
|
css`
|
||||||
|
:hover {
|
||||||
|
.table-container_cell {
|
||||||
|
cursor: pointer;
|
||||||
|
background: ${(props) =>
|
||||||
|
`${props.theme.filesSection.tableView.row.backgroundActive} !important`};
|
||||||
|
|
||||||
|
margin-top: ${(props) => (props.showHotkeyBorder ? "-2px" : "-1px")};
|
||||||
|
${(props) =>
|
||||||
|
!props.showHotkeyBorder &&
|
||||||
|
css`
|
||||||
|
border-top: ${(props) =>
|
||||||
|
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
|
||||||
|
`}
|
||||||
|
}
|
||||||
|
.table-container_file-name-cell {
|
||||||
|
margin-left: -24px;
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
.table-container_row-context-menu-wrapper {
|
||||||
|
margin-right: -20px;
|
||||||
|
padding-right: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
.table-container_cell {
|
||||||
|
background: ${(props) =>
|
||||||
|
(props.checked || props.isActive) &&
|
||||||
|
`${props.theme.filesSection.tableView.row.backgroundActive} !important`};
|
||||||
|
cursor: ${(props) =>
|
||||||
|
!props.isThirdPartyFolder &&
|
||||||
|
(props.checked || props.isActive) &&
|
||||||
|
"url(/static/images/cursor.palm.react.svg), auto !important"};
|
||||||
|
|
||||||
|
${(props) =>
|
||||||
|
props.inProgress &&
|
||||||
|
css`
|
||||||
|
pointer-events: none;
|
||||||
|
/* cursor: wait; */
|
||||||
|
`}
|
||||||
|
|
||||||
|
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_element-wrapper,
|
||||||
|
.table-container_quick-buttons-wrapper {
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_element-wrapper,
|
||||||
|
.table-container_row-loader {
|
||||||
|
min-width: ${(props) => (props.isRoom ? "40px" : "36px")};
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_element-container {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_row-loader {
|
||||||
|
svg {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_row-checkbox {
|
||||||
|
padding-left: 20px;
|
||||||
|
width: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_file-name-cell {
|
||||||
|
${(props) =>
|
||||||
|
props.showHotkeyBorder &&
|
||||||
|
css`
|
||||||
|
margin-left: -24px;
|
||||||
|
padding-left: 24px;
|
||||||
|
${hotkeyBorderStyle}
|
||||||
|
`};
|
||||||
|
${(props) => props.dragging && rowCheckboxDraggingStyle};
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container_row-context-menu-wrapper {
|
||||||
|
padding-right: 0px;
|
||||||
|
|
||||||
|
${(props) => props.dragging && contextMenuWrapperDraggingStyle};
|
||||||
|
${(props) =>
|
||||||
|
props.showHotkeyBorder &&
|
||||||
|
css`
|
||||||
|
margin-right: -20px;
|
||||||
|
padding-right: 18px;
|
||||||
|
${hotkeyBorderStyle}
|
||||||
|
`};
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit {
|
||||||
|
svg:not(:root) {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
${(props) =>
|
||||||
|
props.showHotkeyBorder &&
|
||||||
|
css`
|
||||||
|
.table-container_cell {
|
||||||
|
margin-top: -2px;
|
||||||
|
|
||||||
|
border-top: 1px solid #2da7db !important;
|
||||||
|
border-right: 0;
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
.table-container_file-name-cell > .table-container_cell {
|
||||||
|
margin-top: 2px;
|
||||||
|
border-top: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-file-name,
|
||||||
|
.row_update-text,
|
||||||
|
.expandButton,
|
||||||
|
.badges,
|
||||||
|
.tag,
|
||||||
|
.author-cell,
|
||||||
|
.table-container_cell > p {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledDragAndDrop = styled(DragAndDrop)`
|
||||||
|
display: contents;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledBadgesContainer = styled.div`
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
${(props) =>
|
||||||
|
props.showHotkeyBorder &&
|
||||||
|
css`
|
||||||
|
margin-top: 1px;
|
||||||
|
`}
|
||||||
|
|
||||||
|
.badges {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badges:last-child {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-items {
|
||||||
|
min-width: 12px;
|
||||||
|
width: max-content;
|
||||||
|
margin: 0 -2px -2px -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-version {
|
||||||
|
width: max-content;
|
||||||
|
margin: 0 5px -2px -2px;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
padding: 0 3.3px 0 4px;
|
||||||
|
p {
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
font-size: 8px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-new-version {
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledQuickButtonsContainer = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.badges {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge:last-child {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-file {
|
||||||
|
svg {
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite {
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-button-icon:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
path {
|
||||||
|
fill: ${(props) =>
|
||||||
|
props.theme.filesSection.tableView.row.shareHoverColor};
|
||||||
|
}
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
StyledQuickButtonsContainer.defaultProps = { theme: Base };
|
||||||
|
|
||||||
|
export {
|
||||||
|
StyledBadgesContainer,
|
||||||
|
StyledQuickButtonsContainer,
|
||||||
|
StyledTableRow,
|
||||||
|
StyledDragAndDrop,
|
||||||
|
};
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef, useCallback } from "react";
|
||||||
import elementResizeDetectorMaker from "element-resize-detector";
|
import elementResizeDetectorMaker from "element-resize-detector";
|
||||||
import TableContainer from "@docspace/components/table-container";
|
import TableContainer from "@docspace/components/table-container";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
@ -8,7 +8,6 @@ import TableBody from "@docspace/components/table-container/TableBody";
|
|||||||
import { isMobile } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
import { Base } from "@docspace/components/themes";
|
import { Base } from "@docspace/components/themes";
|
||||||
import { TableVersions } from "SRC_DIR/helpers/constants";
|
|
||||||
|
|
||||||
const marginCss = css`
|
const marginCss = css`
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
@ -99,14 +98,6 @@ const StyledTableContainer = styled(TableContainer)`
|
|||||||
|
|
||||||
StyledTableContainer.defaultProps = { theme: Base };
|
StyledTableContainer.defaultProps = { theme: Base };
|
||||||
|
|
||||||
const TABLE_COLUMNS = `filesTableColumns_ver-${TableVersions.Files}`;
|
|
||||||
const COLUMNS_SIZE = `filesColumnsSize_ver-${TableVersions.Files}`;
|
|
||||||
const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TableVersions.Files}`;
|
|
||||||
|
|
||||||
const TABLE_ROOMS_COLUMNS = `roomsTableColumns_ver-${TableVersions.Rooms}`;
|
|
||||||
const COLUMNS_ROOMS_SIZE = `roomsColumnsSize_ver-${TableVersions.Rooms}`;
|
|
||||||
const COLUMNS_ROOMS_SIZE_INFO_PANEL = `roomsColumnsSizeInfoPanel_ver-${TableVersions.Rooms}`;
|
|
||||||
|
|
||||||
const elementResizeDetector = elementResizeDetectorMaker({
|
const elementResizeDetector = elementResizeDetectorMaker({
|
||||||
strategy: "scroll",
|
strategy: "scroll",
|
||||||
callOnAdd: false,
|
callOnAdd: false,
|
||||||
@ -121,12 +112,13 @@ const Table = ({
|
|||||||
setHeaderBorder,
|
setHeaderBorder,
|
||||||
theme,
|
theme,
|
||||||
infoPanelVisible,
|
infoPanelVisible,
|
||||||
userId,
|
|
||||||
fetchMoreFiles,
|
fetchMoreFiles,
|
||||||
hasMoreFiles,
|
hasMoreFiles,
|
||||||
filterTotal,
|
filterTotal,
|
||||||
isRooms,
|
isRooms,
|
||||||
withPaging,
|
withPaging,
|
||||||
|
columnStorageName,
|
||||||
|
columnInfoPanelStorageName,
|
||||||
}) => {
|
}) => {
|
||||||
const [tagCount, setTagCount] = React.useState(null);
|
const [tagCount, setTagCount] = React.useState(null);
|
||||||
const [hideColumns, setHideColumns] = React.useState(false);
|
const [hideColumns, setHideColumns] = React.useState(false);
|
||||||
@ -149,7 +141,7 @@ const Table = ({
|
|||||||
}
|
}
|
||||||
}, [sectionWidth]);
|
}, [sectionWidth]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
if (!tagRef?.current) return;
|
if (!tagRef?.current) return;
|
||||||
|
|
||||||
@ -157,7 +149,7 @@ const Table = ({
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const onResize = React.useCallback(
|
const onResize = useCallback(
|
||||||
(node) => {
|
(node) => {
|
||||||
const element = tagRef?.current ? tagRef?.current : node;
|
const element = tagRef?.current ? tagRef?.current : node;
|
||||||
|
|
||||||
@ -172,7 +164,7 @@ const Table = ({
|
|||||||
[tagCount]
|
[tagCount]
|
||||||
);
|
);
|
||||||
|
|
||||||
const onSetTagRef = React.useCallback((node) => {
|
const onSetTagRef = useCallback((node) => {
|
||||||
if (node) {
|
if (node) {
|
||||||
tagRef.current = node;
|
tagRef.current = node;
|
||||||
onResize(node);
|
onResize(node);
|
||||||
@ -181,28 +173,11 @@ const Table = ({
|
|||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const tableColumns = isRooms
|
|
||||||
? `${TABLE_ROOMS_COLUMNS}=${userId}`
|
|
||||||
: `${TABLE_COLUMNS}=${userId}`;
|
|
||||||
const columnStorageName = isRooms
|
|
||||||
? `${COLUMNS_ROOMS_SIZE}=${userId}`
|
|
||||||
: `${COLUMNS_SIZE}=${userId}`;
|
|
||||||
const columnInfoPanelStorageName = isRooms
|
|
||||||
? `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}`
|
|
||||||
: `${COLUMNS_SIZE_INFO_PANEL}=${userId}`;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledTableContainer useReactWindow={!withPaging} forwardedRef={ref}>
|
<StyledTableContainer useReactWindow={!withPaging} forwardedRef={ref}>
|
||||||
<TableHeader
|
<TableHeader
|
||||||
sectionWidth={sectionWidth}
|
sectionWidth={sectionWidth}
|
||||||
containerRef={ref}
|
containerRef={ref}
|
||||||
tableStorageName={tableColumns}
|
|
||||||
columnStorageName={columnStorageName}
|
|
||||||
filesColumnStorageName={`${COLUMNS_SIZE}=${userId}`}
|
|
||||||
roomsColumnStorageName={`${COLUMNS_ROOMS_SIZE}=${userId}`}
|
|
||||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
|
||||||
filesColumnInfoPanelStorageName={`${COLUMNS_SIZE_INFO_PANEL}=${userId}`}
|
|
||||||
roomsColumnInfoPanelStorageName={`${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}`}
|
|
||||||
isRooms={isRooms}
|
isRooms={isRooms}
|
||||||
tagRef={onSetTagRef}
|
tagRef={onSetTagRef}
|
||||||
setHideColumns={setHideColumns}
|
setHideColumns={setHideColumns}
|
||||||
@ -228,9 +203,6 @@ const Table = ({
|
|||||||
setFirsElemChecked={setFirsElemChecked}
|
setFirsElemChecked={setFirsElemChecked}
|
||||||
setHeaderBorder={setHeaderBorder}
|
setHeaderBorder={setHeaderBorder}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
tableColumns={tableColumns}
|
|
||||||
columnStorageName={columnStorageName}
|
|
||||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
|
||||||
tagCount={tagCount}
|
tagCount={tagCount}
|
||||||
isRooms={isRooms}
|
isRooms={isRooms}
|
||||||
hideColumns={hideColumns}
|
hideColumns={hideColumns}
|
||||||
@ -241,13 +213,14 @@ const Table = ({
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default inject(({ filesStore, treeFoldersStore, auth }) => {
|
export default inject(({ filesStore, treeFoldersStore, auth, tableStore }) => {
|
||||||
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
|
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
|
||||||
|
|
||||||
const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
|
const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
|
||||||
|
|
||||||
const isRooms = isRoomsFolder || isArchiveFolder;
|
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||||
|
|
||||||
|
const { columnStorageName, columnInfoPanelStorageName } = tableStore;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
filesList,
|
filesList,
|
||||||
viewAs,
|
viewAs,
|
||||||
@ -276,5 +249,7 @@ export default inject(({ filesStore, treeFoldersStore, auth }) => {
|
|||||||
filterTotal: isRooms ? roomsFilterTotal : filterTotal,
|
filterTotal: isRooms ? roomsFilterTotal : filterTotal,
|
||||||
isRooms,
|
isRooms,
|
||||||
withPaging,
|
withPaging,
|
||||||
|
columnStorageName,
|
||||||
|
columnInfoPanelStorageName,
|
||||||
};
|
};
|
||||||
})(observer(Table));
|
})(observer(Table));
|
||||||
|
@ -4,8 +4,6 @@ import { inject, observer } from "mobx-react";
|
|||||||
import { withTranslation } from "react-i18next";
|
import { withTranslation } from "react-i18next";
|
||||||
import { Events } from "@docspace/common/constants";
|
import { Events } from "@docspace/common/constants";
|
||||||
|
|
||||||
const WITH_AUTHOR = "withAuthorColumn";
|
|
||||||
|
|
||||||
class FilesTableHeader extends React.Component {
|
class FilesTableHeader extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
@ -16,13 +14,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
getTableColumns = (fromUpdate = false) => {
|
getTableColumns = (fromUpdate = false) => {
|
||||||
const {
|
const { t, isRooms, getColumns } = this.props;
|
||||||
t,
|
|
||||||
personal,
|
|
||||||
tableStorageName,
|
|
||||||
isRooms,
|
|
||||||
isPersonalRoom,
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
const defaultColumns = [];
|
const defaultColumns = [];
|
||||||
|
|
||||||
@ -32,7 +24,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
key: "Name",
|
key: "Name",
|
||||||
title: t("Common:Name"),
|
title: t("Common:Name"),
|
||||||
resizable: true,
|
resizable: true,
|
||||||
enable: true,
|
enable: this.props.roomColumnNameIsEnabled,
|
||||||
default: true,
|
default: true,
|
||||||
sortBy: "AZ",
|
sortBy: "AZ",
|
||||||
minWidth: 210,
|
minWidth: 210,
|
||||||
@ -41,7 +33,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
{
|
{
|
||||||
key: "Type",
|
key: "Type",
|
||||||
title: t("Common:Type"),
|
title: t("Common:Type"),
|
||||||
enable: false,
|
enable: this.props.roomColumnTypeIsEnabled,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
sortBy: "roomType",
|
sortBy: "roomType",
|
||||||
onChange: this.onColumnChange,
|
onChange: this.onColumnChange,
|
||||||
@ -50,7 +42,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
{
|
{
|
||||||
key: "Tags",
|
key: "Tags",
|
||||||
title: t("Common:Tags"),
|
title: t("Common:Tags"),
|
||||||
enable: true,
|
enable: this.props.roomColumnTagsIsEnabled,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
sortBy: "Tags",
|
sortBy: "Tags",
|
||||||
withTagRef: true,
|
withTagRef: true,
|
||||||
@ -60,7 +52,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
{
|
{
|
||||||
key: "Owner",
|
key: "Owner",
|
||||||
title: t("ByOwner"),
|
title: t("ByOwner"),
|
||||||
enable: false,
|
enable: this.props.roomColumnOwnerIsEnabled,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
sortBy: "Author",
|
sortBy: "Author",
|
||||||
onChange: this.onColumnChange,
|
onChange: this.onColumnChange,
|
||||||
@ -69,7 +61,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
{
|
{
|
||||||
key: "Activity",
|
key: "Activity",
|
||||||
title: t("ByLastModified"),
|
title: t("ByLastModified"),
|
||||||
enable: true,
|
enable: this.props.roomColumnActivityIsEnabled,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
sortBy: "DateAndTime",
|
sortBy: "DateAndTime",
|
||||||
onChange: this.onColumnChange,
|
onChange: this.onColumnChange,
|
||||||
@ -79,38 +71,30 @@ class FilesTableHeader extends React.Component {
|
|||||||
|
|
||||||
defaultColumns.push(...columns);
|
defaultColumns.push(...columns);
|
||||||
} else {
|
} else {
|
||||||
const authorOption = {
|
|
||||||
key: "Author",
|
|
||||||
title: t("ByAuthor"),
|
|
||||||
enable: false,
|
|
||||||
resizable: true,
|
|
||||||
sortBy: "Author",
|
|
||||||
|
|
||||||
// isDisabled: isPersonalRoom,
|
|
||||||
onClick: this.onFilter,
|
|
||||||
onChange: this.onColumnChange,
|
|
||||||
};
|
|
||||||
|
|
||||||
// if (isPersonalRoom) {
|
|
||||||
// authorOption.defaultSize = 0;
|
|
||||||
// }
|
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
key: "Name",
|
key: "Name",
|
||||||
title: t("Common:Name"),
|
title: t("Common:Name"),
|
||||||
resizable: true,
|
resizable: true,
|
||||||
enable: true,
|
enable: this.props.nameColumnIsEnabled,
|
||||||
default: true,
|
default: true,
|
||||||
sortBy: "AZ",
|
sortBy: "AZ",
|
||||||
minWidth: 210,
|
minWidth: 210,
|
||||||
onClick: this.onFilter,
|
onClick: this.onFilter,
|
||||||
},
|
},
|
||||||
authorOption,
|
{
|
||||||
|
key: "Author",
|
||||||
|
title: t("ByAuthor"),
|
||||||
|
enable: this.props.authorColumnIsEnabled,
|
||||||
|
resizable: true,
|
||||||
|
sortBy: "Author",
|
||||||
|
onClick: this.onFilter,
|
||||||
|
onChange: this.onColumnChange,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: "Created",
|
key: "Created",
|
||||||
title: t("ByCreation"),
|
title: t("ByCreation"),
|
||||||
enable: true,
|
enable: this.props.createdColumnIsEnabled,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
sortBy: "DateAndTimeCreation",
|
sortBy: "DateAndTimeCreation",
|
||||||
onClick: this.onFilter,
|
onClick: this.onFilter,
|
||||||
@ -119,7 +103,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
{
|
{
|
||||||
key: "Modified",
|
key: "Modified",
|
||||||
title: t("ByLastModified"),
|
title: t("ByLastModified"),
|
||||||
enable: true,
|
enable: this.props.modifiedColumnIsEnabled,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
sortBy: "DateAndTime",
|
sortBy: "DateAndTime",
|
||||||
onClick: this.onFilter,
|
onClick: this.onFilter,
|
||||||
@ -128,7 +112,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
{
|
{
|
||||||
key: "Size",
|
key: "Size",
|
||||||
title: t("Common:Size"),
|
title: t("Common:Size"),
|
||||||
enable: true,
|
enable: this.props.sizeColumnIsEnabled,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
sortBy: "Size",
|
sortBy: "Size",
|
||||||
onClick: this.onFilter,
|
onClick: this.onFilter,
|
||||||
@ -137,7 +121,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
{
|
{
|
||||||
key: "Type",
|
key: "Type",
|
||||||
title: t("Common:Type"),
|
title: t("Common:Type"),
|
||||||
enable: true,
|
enable: this.props.typeColumnIsEnabled,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
sortBy: "Type",
|
sortBy: "Type",
|
||||||
onClick: this.onFilter,
|
onClick: this.onFilter,
|
||||||
@ -146,20 +130,18 @@ class FilesTableHeader extends React.Component {
|
|||||||
{
|
{
|
||||||
key: "QuickButtons",
|
key: "QuickButtons",
|
||||||
title: "",
|
title: "",
|
||||||
enable: true,
|
enable: this.props.quickButtonsColumnIsEnabled,
|
||||||
defaultSize: 75,
|
defaultSize: 75,
|
||||||
resizable: false,
|
resizable: false,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
personal && columns.splice(1, 1);
|
|
||||||
|
|
||||||
defaultColumns.push(...columns);
|
defaultColumns.push(...columns);
|
||||||
}
|
}
|
||||||
|
|
||||||
const storageColumns = localStorage.getItem(tableStorageName);
|
const columns = getColumns(defaultColumns);
|
||||||
|
const storageColumns = localStorage.getItem(this.tableStorageName);
|
||||||
const splitColumns = storageColumns && storageColumns.split(",");
|
const splitColumns = storageColumns && storageColumns.split(",");
|
||||||
const columns = this.getColumns(defaultColumns, splitColumns);
|
|
||||||
const resetColumnsSize =
|
const resetColumnsSize =
|
||||||
(splitColumns && splitColumns.length !== columns.length) || !splitColumns;
|
(splitColumns && splitColumns.length !== columns.length) || !splitColumns;
|
||||||
|
|
||||||
@ -167,17 +149,15 @@ class FilesTableHeader extends React.Component {
|
|||||||
this.setTableColumns(tableColumns);
|
this.setTableColumns(tableColumns);
|
||||||
if (fromUpdate) {
|
if (fromUpdate) {
|
||||||
this.setState({
|
this.setState({
|
||||||
columns: columns,
|
columns,
|
||||||
resetColumnsSize: resetColumnsSize,
|
resetColumnsSize,
|
||||||
isRooms: isRooms,
|
isRooms,
|
||||||
isPersonalRoom: isPersonalRoom,
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.state = {
|
this.state = {
|
||||||
columns: columns,
|
columns,
|
||||||
resetColumnsSize: resetColumnsSize,
|
resetColumnsSize,
|
||||||
isRooms: isRooms,
|
isRooms,
|
||||||
isPersonalRoom: isPersonalRoom,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -214,15 +194,12 @@ class FilesTableHeader extends React.Component {
|
|||||||
|
|
||||||
this.isBeginScrolling = true;
|
this.isBeginScrolling = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
componentDidUpdate(prevProps) {
|
||||||
if (this.props.isRooms !== this.state.isRooms) {
|
if (this.props.isRooms !== this.state.isRooms) {
|
||||||
return this.getTableColumns(true);
|
return this.getTableColumns(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.props.isPersonalRoom !== this.state.isPersonalRoom) {
|
|
||||||
return this.getTableColumns(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
const { columns } = this.state;
|
const { columns } = this.state;
|
||||||
if (this.props.withContent !== prevProps.withContent) {
|
if (this.props.withContent !== prevProps.withContent) {
|
||||||
const columnIndex = columns.findIndex((c) => c.key === "Share");
|
const columnIndex = columns.findIndex((c) => c.key === "Share");
|
||||||
@ -244,56 +221,21 @@ class FilesTableHeader extends React.Component {
|
|||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
this.customScrollElm.removeEventListener("scroll", this.onBeginScroll);
|
this.customScrollElm.removeEventListener("scroll", this.onBeginScroll);
|
||||||
}
|
}
|
||||||
getColumns = (defaultColumns, splitColumns) => {
|
|
||||||
const { isPersonalRoom, isRooms } = this.props;
|
|
||||||
|
|
||||||
const columns = [];
|
onColumnChange = (key) => {
|
||||||
|
|
||||||
if (splitColumns) {
|
|
||||||
for (let col of defaultColumns) {
|
|
||||||
const column = splitColumns.find((key) => key === col.key);
|
|
||||||
column ? (col.enable = true) : (col.enable = false);
|
|
||||||
|
|
||||||
if (!isRooms) {
|
|
||||||
if (column === "Author" && isPersonalRoom) {
|
|
||||||
col.enable = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (col.key === "Author" && !isPersonalRoom) {
|
|
||||||
if (!col.enable) {
|
|
||||||
const withAuthor = localStorage.getItem(WITH_AUTHOR);
|
|
||||||
|
|
||||||
if (withAuthor === "true") {
|
|
||||||
col.enable = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
columns.push(col);
|
|
||||||
}
|
|
||||||
return columns;
|
|
||||||
} else {
|
|
||||||
return defaultColumns;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onColumnChange = (key, e) => {
|
|
||||||
const { columns } = this.state;
|
const { columns } = this.state;
|
||||||
|
|
||||||
const columnIndex = columns.findIndex((c) => c.key === key);
|
const columnIndex = columns.findIndex((c) => c.key === key);
|
||||||
if (columnIndex === -1) return;
|
if (columnIndex === -1) return;
|
||||||
|
|
||||||
|
this.props.setColumnEnable(key);
|
||||||
|
|
||||||
columns[columnIndex].enable = !columns[columnIndex].enable;
|
columns[columnIndex].enable = !columns[columnIndex].enable;
|
||||||
this.setState({ columns });
|
this.setState({ columns });
|
||||||
|
|
||||||
const tableColumns = columns.map((c) => c.enable && c.key);
|
const tableColumns = columns.map((c) => c.enable && c.key);
|
||||||
this.setTableColumns(tableColumns);
|
this.setTableColumns(tableColumns);
|
||||||
|
|
||||||
if (key === "Author") {
|
|
||||||
localStorage.setItem(WITH_AUTHOR, columns[columnIndex].enable);
|
|
||||||
}
|
|
||||||
|
|
||||||
const event = new Event(Events.CHANGE_COLUMN);
|
const event = new Event(Events.CHANGE_COLUMN);
|
||||||
|
|
||||||
window.dispatchEvent(event);
|
window.dispatchEvent(event);
|
||||||
@ -356,7 +298,6 @@ class FilesTableHeader extends React.Component {
|
|||||||
setHideColumns,
|
setHideColumns,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
// const { sortBy, sortOrder } = filter;
|
|
||||||
const { columns, resetColumnsSize } = this.state;
|
const { columns, resetColumnsSize } = this.state;
|
||||||
|
|
||||||
const sortBy = isRooms ? roomsFilter.sortBy : filter.sortBy;
|
const sortBy = isRooms ? roomsFilter.sortBy : filter.sortBy;
|
||||||
@ -402,7 +343,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default inject(
|
export default inject(
|
||||||
({ auth, filesStore, selectedFolderStore, treeFoldersStore }) => {
|
({ auth, filesStore, selectedFolderStore, treeFoldersStore, tableStore }) => {
|
||||||
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
|
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -416,17 +357,43 @@ export default inject(
|
|||||||
roomsFilter,
|
roomsFilter,
|
||||||
fetchRooms,
|
fetchRooms,
|
||||||
} = filesStore;
|
} = filesStore;
|
||||||
const { isRecentFolder, isPersonalRoom } = treeFoldersStore;
|
const { isRecentFolder } = treeFoldersStore;
|
||||||
const withContent = canShare;
|
const withContent = canShare;
|
||||||
const sortingVisible = !isRecentFolder;
|
const sortingVisible = !isRecentFolder;
|
||||||
const { personal, withPaging } = auth.settingsStore;
|
const { withPaging } = auth.settingsStore;
|
||||||
|
|
||||||
|
const {
|
||||||
|
tableStorageName,
|
||||||
|
columnStorageName,
|
||||||
|
columnInfoPanelStorageName,
|
||||||
|
filesColumnStorageName,
|
||||||
|
roomsColumnStorageName,
|
||||||
|
filesColumnInfoPanelStorageName,
|
||||||
|
roomsColumnInfoPanelStorageName,
|
||||||
|
|
||||||
|
nameColumnIsEnabled,
|
||||||
|
authorColumnIsEnabled,
|
||||||
|
createdColumnIsEnabled,
|
||||||
|
modifiedColumnIsEnabled,
|
||||||
|
sizeColumnIsEnabled,
|
||||||
|
typeColumnIsEnabled,
|
||||||
|
quickButtonsColumnIsEnabled,
|
||||||
|
|
||||||
|
roomColumnNameIsEnabled,
|
||||||
|
roomColumnTypeIsEnabled,
|
||||||
|
roomColumnTagsIsEnabled,
|
||||||
|
roomColumnOwnerIsEnabled,
|
||||||
|
roomColumnActivityIsEnabled,
|
||||||
|
|
||||||
|
getColumns,
|
||||||
|
setColumnEnable,
|
||||||
|
} = tableStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
isHeaderChecked,
|
isHeaderChecked,
|
||||||
filter,
|
filter,
|
||||||
selectedFolderId: selectedFolderStore.id,
|
selectedFolderId: selectedFolderStore.id,
|
||||||
withContent,
|
withContent,
|
||||||
personal,
|
|
||||||
sortingVisible,
|
sortingVisible,
|
||||||
|
|
||||||
setIsLoading,
|
setIsLoading,
|
||||||
@ -441,7 +408,30 @@ export default inject(
|
|||||||
infoPanelVisible,
|
infoPanelVisible,
|
||||||
withPaging,
|
withPaging,
|
||||||
|
|
||||||
isPersonalRoom,
|
tableStorageName,
|
||||||
|
columnStorageName,
|
||||||
|
columnInfoPanelStorageName,
|
||||||
|
filesColumnStorageName,
|
||||||
|
roomsColumnStorageName,
|
||||||
|
filesColumnInfoPanelStorageName,
|
||||||
|
roomsColumnInfoPanelStorageName,
|
||||||
|
|
||||||
|
nameColumnIsEnabled,
|
||||||
|
authorColumnIsEnabled,
|
||||||
|
createdColumnIsEnabled,
|
||||||
|
modifiedColumnIsEnabled,
|
||||||
|
sizeColumnIsEnabled,
|
||||||
|
typeColumnIsEnabled,
|
||||||
|
quickButtonsColumnIsEnabled,
|
||||||
|
|
||||||
|
roomColumnNameIsEnabled,
|
||||||
|
roomColumnTypeIsEnabled,
|
||||||
|
roomColumnTagsIsEnabled,
|
||||||
|
roomColumnOwnerIsEnabled,
|
||||||
|
roomColumnActivityIsEnabled,
|
||||||
|
|
||||||
|
getColumns,
|
||||||
|
setColumnEnable,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
)(
|
)(
|
||||||
|
@ -6,303 +6,24 @@ import withQuickButtons from "../../../../../HOCs/withQuickButtons";
|
|||||||
import withFileActions from "../../../../../HOCs/withFileActions";
|
import withFileActions from "../../../../../HOCs/withFileActions";
|
||||||
import ItemIcon from "../../../../../components/ItemIcon";
|
import ItemIcon from "../../../../../components/ItemIcon";
|
||||||
import { withTranslation } from "react-i18next";
|
import { withTranslation } from "react-i18next";
|
||||||
import TableRow from "@docspace/components/table-container/TableRow";
|
|
||||||
import TableCell from "@docspace/components/table-container/TableCell";
|
|
||||||
import DragAndDrop from "@docspace/components/drag-and-drop";
|
|
||||||
import FileNameCell from "./sub-components/FileNameCell";
|
|
||||||
import SizeCell from "./sub-components/SizeCell";
|
|
||||||
import AuthorCell from "./sub-components/AuthorCell";
|
|
||||||
import DateCell from "./sub-components/DateCell";
|
|
||||||
import TypeCell from "./sub-components/TypeCell";
|
|
||||||
import TagsCell from "./sub-components/TagsCell";
|
|
||||||
import styled, { css } from "styled-components";
|
|
||||||
import Base from "@docspace/components/themes/base";
|
|
||||||
import { classNames } from "@docspace/components/utils/classNames";
|
import { classNames } from "@docspace/components/utils/classNames";
|
||||||
|
import RoomsRowDataComponent from "./sub-components/RoomsRowData";
|
||||||
const hotkeyBorderStyle = css`
|
import RowDataComponent from "./sub-components/RowData";
|
||||||
border-bottom: 1px solid;
|
import { StyledTableRow, StyledDragAndDrop } from "./StyledTable";
|
||||||
border-image-slice: 1;
|
|
||||||
border-image-source: linear-gradient(to left, #2da7db 24px, #2da7db 24px);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const rowCheckboxDraggingStyle = css`
|
|
||||||
margin-left: -20px;
|
|
||||||
padding-left: 20px;
|
|
||||||
|
|
||||||
border-bottom: 1px solid;
|
|
||||||
border-image-slice: 1;
|
|
||||||
border-image-source: ${(props) => `linear-gradient(to right,
|
|
||||||
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const contextMenuWrapperDraggingStyle = css`
|
|
||||||
margin-right: -20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
|
|
||||||
border-bottom: 1px solid;
|
|
||||||
border-image-slice: 1;
|
|
||||||
border-image-source: ${(props) => `linear-gradient(to left,
|
|
||||||
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledTableRow = styled(TableRow)`
|
|
||||||
${(props) =>
|
|
||||||
props.isRoom &&
|
|
||||||
css`
|
|
||||||
.table-container_cell {
|
|
||||||
height: 48px;
|
|
||||||
max-height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container_row-checkbox {
|
|
||||||
padding-left: 20px !important;
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
${(props) =>
|
|
||||||
!props.isDragging &&
|
|
||||||
css`
|
|
||||||
:hover {
|
|
||||||
.table-container_cell {
|
|
||||||
cursor: pointer;
|
|
||||||
background: ${(props) =>
|
|
||||||
`${props.theme.filesSection.tableView.row.backgroundActive} !important`};
|
|
||||||
|
|
||||||
margin-top: ${(props) => (props.showHotkeyBorder ? "-2px" : "-1px")};
|
|
||||||
${(props) =>
|
|
||||||
!props.showHotkeyBorder &&
|
|
||||||
css`
|
|
||||||
border-top: ${(props) =>
|
|
||||||
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
|
|
||||||
`}
|
|
||||||
}
|
|
||||||
.table-container_file-name-cell {
|
|
||||||
margin-left: -24px;
|
|
||||||
padding-left: 24px;
|
|
||||||
}
|
|
||||||
.table-container_row-context-menu-wrapper {
|
|
||||||
margin-right: -20px;
|
|
||||||
padding-right: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
.table-container_cell {
|
|
||||||
background: ${(props) =>
|
|
||||||
(props.checked || props.isActive) &&
|
|
||||||
`${props.theme.filesSection.tableView.row.backgroundActive} !important`};
|
|
||||||
cursor: ${(props) =>
|
|
||||||
!props.isThirdPartyFolder &&
|
|
||||||
(props.checked || props.isActive) &&
|
|
||||||
"url(/static/images/cursor.palm.react.svg), auto !important"};
|
|
||||||
|
|
||||||
${(props) =>
|
|
||||||
props.inProgress &&
|
|
||||||
css`
|
|
||||||
pointer-events: none;
|
|
||||||
/* cursor: wait; */
|
|
||||||
`}
|
|
||||||
|
|
||||||
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container_element-wrapper,
|
|
||||||
.table-container_quick-buttons-wrapper {
|
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container_element-wrapper,
|
|
||||||
.table-container_row-loader {
|
|
||||||
min-width: ${(props) => (props.isRoom ? "40px" : "36px")};
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container_element-container {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container_row-loader {
|
|
||||||
svg {
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container_row-checkbox {
|
|
||||||
padding-left: 20px;
|
|
||||||
width: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container_file-name-cell {
|
|
||||||
${(props) =>
|
|
||||||
props.showHotkeyBorder &&
|
|
||||||
css`
|
|
||||||
margin-left: -24px;
|
|
||||||
padding-left: 24px;
|
|
||||||
${hotkeyBorderStyle}
|
|
||||||
`};
|
|
||||||
${(props) => props.dragging && rowCheckboxDraggingStyle};
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container_row-context-menu-wrapper {
|
|
||||||
padding-right: 0px;
|
|
||||||
|
|
||||||
${(props) => props.dragging && contextMenuWrapperDraggingStyle};
|
|
||||||
${(props) =>
|
|
||||||
props.showHotkeyBorder &&
|
|
||||||
css`
|
|
||||||
margin-right: -20px;
|
|
||||||
padding-right: 18px;
|
|
||||||
${hotkeyBorderStyle}
|
|
||||||
`};
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit {
|
|
||||||
svg:not(:root) {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
${(props) =>
|
|
||||||
props.showHotkeyBorder &&
|
|
||||||
css`
|
|
||||||
.table-container_cell {
|
|
||||||
margin-top: -2px;
|
|
||||||
|
|
||||||
border-top: 1px solid #2da7db !important;
|
|
||||||
border-right: 0;
|
|
||||||
border-left: 0;
|
|
||||||
}
|
|
||||||
.table-container_file-name-cell > .table-container_cell {
|
|
||||||
margin-top: 2px;
|
|
||||||
border-top: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-file-name,
|
|
||||||
.row_update-text,
|
|
||||||
.expandButton,
|
|
||||||
.badges,
|
|
||||||
.tag,
|
|
||||||
.author-cell,
|
|
||||||
.table-container_cell > p {
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledDragAndDrop = styled(DragAndDrop)`
|
|
||||||
display: contents;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledBadgesContainer = styled.div`
|
|
||||||
margin-left: 8px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
${(props) =>
|
|
||||||
props.showHotkeyBorder &&
|
|
||||||
css`
|
|
||||||
margin-top: 1px;
|
|
||||||
`}
|
|
||||||
|
|
||||||
.badges {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badges:last-child {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.new-items {
|
|
||||||
min-width: 12px;
|
|
||||||
width: max-content;
|
|
||||||
margin: 0 -2px -2px -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-version {
|
|
||||||
width: max-content;
|
|
||||||
margin: 0 5px -2px -2px;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
padding: 0 3.3px 0 4px;
|
|
||||||
p {
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
font-size: 8px;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-new-version {
|
|
||||||
width: max-content;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledQuickButtonsContainer = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.badges {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
margin-right: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge:last-child {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lock-file {
|
|
||||||
svg {
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.favorite {
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-button-icon:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
path {
|
|
||||||
fill: ${(props) =>
|
|
||||||
props.theme.filesSection.tableView.row.shareHoverColor};
|
|
||||||
}
|
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
StyledQuickButtonsContainer.defaultProps = { theme: Base };
|
|
||||||
|
|
||||||
const FilesTableRow = (props) => {
|
const FilesTableRow = (props) => {
|
||||||
const {
|
const {
|
||||||
t,
|
t,
|
||||||
fileContextClick,
|
fileContextClick,
|
||||||
item,
|
item,
|
||||||
onContentFileSelect,
|
|
||||||
checkedProps,
|
checkedProps,
|
||||||
className,
|
className,
|
||||||
value,
|
value,
|
||||||
onMouseClick,
|
onMouseClick,
|
||||||
badgesComponent,
|
|
||||||
dragging,
|
dragging,
|
||||||
isDragging,
|
isDragging,
|
||||||
onDrop,
|
onDrop,
|
||||||
onMouseDown,
|
onMouseDown,
|
||||||
personal,
|
|
||||||
isActive,
|
isActive,
|
||||||
onHideContextMenu,
|
onHideContextMenu,
|
||||||
onFilesClick,
|
onFilesClick,
|
||||||
@ -311,12 +32,9 @@ const FilesTableRow = (props) => {
|
|||||||
setFirsElemChecked,
|
setFirsElemChecked,
|
||||||
setHeaderBorder,
|
setHeaderBorder,
|
||||||
theme,
|
theme,
|
||||||
quickButtonsComponent,
|
|
||||||
getContextModel,
|
getContextModel,
|
||||||
showHotkeyBorder,
|
showHotkeyBorder,
|
||||||
tableColumns,
|
|
||||||
id,
|
id,
|
||||||
hideColumns,
|
|
||||||
isRooms,
|
isRooms,
|
||||||
} = props;
|
} = props;
|
||||||
const { acceptBackground, background } = theme.dragAndDrop;
|
const { acceptBackground, background } = theme.dragAndDrop;
|
||||||
@ -374,33 +92,6 @@ const FilesTableRow = (props) => {
|
|||||||
}
|
}
|
||||||
}, [checkedProps, isActive, showHotkeyBorder]);
|
}, [checkedProps, isActive, showHotkeyBorder]);
|
||||||
|
|
||||||
let availableColumns = [];
|
|
||||||
let authorAvailableDrag = true;
|
|
||||||
let createdAvailableDrag = true;
|
|
||||||
let modifiedAvailableDrag = true;
|
|
||||||
let sizeAvailableDrag = true;
|
|
||||||
let typeAvailableDrag = true;
|
|
||||||
let ownerAvailableDrag = true;
|
|
||||||
let tagsAvailableDrag = true;
|
|
||||||
let activityAvailableDrag = true;
|
|
||||||
let buttonsAvailableDrag = true;
|
|
||||||
|
|
||||||
if (dragging && isDragging) {
|
|
||||||
availableColumns = localStorage.getItem(tableColumns).split(",");
|
|
||||||
|
|
||||||
authorAvailableDrag = availableColumns.includes("Author") && !hideColumns;
|
|
||||||
createdAvailableDrag = availableColumns.includes("Created") && !hideColumns;
|
|
||||||
modifiedAvailableDrag =
|
|
||||||
availableColumns.includes("Modified") && !hideColumns;
|
|
||||||
sizeAvailableDrag = availableColumns.includes("Size") && !hideColumns;
|
|
||||||
typeAvailableDrag = availableColumns.includes("Type") && !hideColumns;
|
|
||||||
buttonsAvailableDrag = availableColumns.includes("QuickButtons");
|
|
||||||
ownerAvailableDrag = availableColumns.includes("Owner") && !hideColumns;
|
|
||||||
tagsAvailableDrag = availableColumns.includes("Tags") && !hideColumns;
|
|
||||||
activityAvailableDrag =
|
|
||||||
availableColumns.includes("Activity") && !hideColumns;
|
|
||||||
}
|
|
||||||
|
|
||||||
const idWithFileExst = item.fileExst
|
const idWithFileExst = item.fileExst
|
||||||
? `${item.id}_${item.fileExst}`
|
? `${item.id}_${item.fileExst}`
|
||||||
: item.id ?? "";
|
: item.id ?? "";
|
||||||
@ -446,161 +137,18 @@ const FilesTableRow = (props) => {
|
|||||||
}
|
}
|
||||||
isRoom={item.isRoom}
|
isRoom={item.isRoom}
|
||||||
>
|
>
|
||||||
<TableCell
|
{isRooms ? (
|
||||||
{...dragStyles}
|
<RoomsRowDataComponent
|
||||||
className={classNames(
|
|
||||||
selectionProp?.className,
|
|
||||||
"table-container_file-name-cell"
|
|
||||||
)}
|
|
||||||
value={value}
|
|
||||||
>
|
|
||||||
<FileNameCell
|
|
||||||
theme={theme}
|
|
||||||
onContentSelect={onContentFileSelect}
|
|
||||||
checked={checkedProps}
|
|
||||||
element={element}
|
element={element}
|
||||||
inProgress={inProgress}
|
dragStyles={dragStyles}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
<StyledBadgesContainer showHotkeyBorder={showHotkeyBorder}>
|
) : (
|
||||||
{badgesComponent}
|
<RowDataComponent
|
||||||
</StyledBadgesContainer>
|
element={element}
|
||||||
</TableCell>
|
dragStyles={dragStyles}
|
||||||
|
|
||||||
{(item.isRoom || isRooms) && (
|
|
||||||
<TableCell
|
|
||||||
style={
|
|
||||||
!typeAvailableDrag
|
|
||||||
? { background: "none !important" }
|
|
||||||
: dragStyles.style
|
|
||||||
}
|
|
||||||
{...selectionProp}
|
|
||||||
>
|
|
||||||
<TypeCell
|
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!item.isRoom && isRooms && (
|
|
||||||
<TableCell
|
|
||||||
style={
|
|
||||||
!typeAvailableDrag
|
|
||||||
? { background: "none !important" }
|
|
||||||
: dragStyles.style
|
|
||||||
}
|
|
||||||
{...selectionProp}
|
|
||||||
></TableCell>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{item.isRoom && (
|
|
||||||
<TableCell
|
|
||||||
style={
|
|
||||||
!tagsAvailableDrag
|
|
||||||
? { background: "none !important" }
|
|
||||||
: dragStyles.style
|
|
||||||
}
|
|
||||||
{...selectionProp}
|
|
||||||
>
|
|
||||||
<TagsCell
|
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!personal && (
|
|
||||||
<TableCell
|
|
||||||
style={
|
|
||||||
!authorAvailableDrag && !ownerAvailableDrag
|
|
||||||
? { background: "none" }
|
|
||||||
: dragStyles.style
|
|
||||||
}
|
|
||||||
{...selectionProp}
|
|
||||||
>
|
|
||||||
<AuthorCell
|
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!item.isRoom && !isRooms && (
|
|
||||||
<TableCell
|
|
||||||
style={
|
|
||||||
!createdAvailableDrag
|
|
||||||
? { background: "none !important" }
|
|
||||||
: dragStyles.style
|
|
||||||
}
|
|
||||||
{...selectionProp}
|
|
||||||
>
|
|
||||||
<DateCell
|
|
||||||
create
|
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<TableCell
|
|
||||||
style={
|
|
||||||
!modifiedAvailableDrag && !activityAvailableDrag
|
|
||||||
? { background: "none" }
|
|
||||||
: dragStyles.style
|
|
||||||
}
|
|
||||||
{...selectionProp}
|
|
||||||
>
|
|
||||||
<DateCell
|
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
|
|
||||||
{!item.isRoom && !isRooms && (
|
|
||||||
<TableCell
|
|
||||||
style={
|
|
||||||
!sizeAvailableDrag ? { background: "none" } : dragStyles.style
|
|
||||||
}
|
|
||||||
{...selectionProp}
|
|
||||||
>
|
|
||||||
<SizeCell
|
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!item.isRoom && !isRooms && (
|
|
||||||
<TableCell
|
|
||||||
style={
|
|
||||||
!typeAvailableDrag
|
|
||||||
? { background: "none !important" }
|
|
||||||
: dragStyles.style
|
|
||||||
}
|
|
||||||
{...selectionProp}
|
|
||||||
>
|
|
||||||
<TypeCell
|
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
{!item.isRoom && !isRooms && (
|
|
||||||
<TableCell
|
|
||||||
style={
|
|
||||||
!buttonsAvailableDrag ? { background: "none" } : dragStyles.style
|
|
||||||
}
|
|
||||||
{...selectionProp}
|
|
||||||
className={classNames(
|
|
||||||
selectionProp?.className,
|
|
||||||
"table-container_quick-buttons-wrapper"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<StyledQuickButtonsContainer>
|
|
||||||
{quickButtonsComponent}
|
|
||||||
</StyledQuickButtonsContainer>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
)}
|
||||||
</StyledTableRow>
|
</StyledTableRow>
|
||||||
</StyledDragAndDrop>
|
</StyledDragAndDrop>
|
||||||
|
@ -0,0 +1,143 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
|
import TableCell from "@docspace/components/table-container/TableCell";
|
||||||
|
import FileNameCell from "./FileNameCell";
|
||||||
|
import TypeCell from "./TypeCell";
|
||||||
|
import TagsCell from "./TagsCell";
|
||||||
|
import AuthorCell from "./AuthorCell";
|
||||||
|
import DateCell from "./DateCell";
|
||||||
|
import { classNames } from "@docspace/components/utils/classNames";
|
||||||
|
import { StyledBadgesContainer } from "../StyledTable";
|
||||||
|
|
||||||
|
const RoomsRowDataComponent = (props) => {
|
||||||
|
const {
|
||||||
|
roomColumnTypeIsEnabled,
|
||||||
|
roomColumnOwnerIsEnabled,
|
||||||
|
roomColumnTagsIsEnabled,
|
||||||
|
roomColumnActivityIsEnabled,
|
||||||
|
|
||||||
|
dragStyles,
|
||||||
|
selectionProp,
|
||||||
|
value,
|
||||||
|
theme,
|
||||||
|
onContentFileSelect,
|
||||||
|
checkedProps,
|
||||||
|
element,
|
||||||
|
inProgress,
|
||||||
|
showHotkeyBorder,
|
||||||
|
badgesComponent,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TableCell
|
||||||
|
{...dragStyles}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
"table-container_file-name-cell"
|
||||||
|
)}
|
||||||
|
value={value}
|
||||||
|
>
|
||||||
|
<FileNameCell
|
||||||
|
theme={theme}
|
||||||
|
onContentSelect={onContentFileSelect}
|
||||||
|
checked={checkedProps}
|
||||||
|
element={element}
|
||||||
|
inProgress={inProgress}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
<StyledBadgesContainer showHotkeyBorder={showHotkeyBorder}>
|
||||||
|
{badgesComponent}
|
||||||
|
</StyledBadgesContainer>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
{roomColumnTypeIsEnabled ? (
|
||||||
|
<TableCell
|
||||||
|
style={
|
||||||
|
!roomColumnTypeIsEnabled
|
||||||
|
? { background: "none !important" }
|
||||||
|
: dragStyles.style
|
||||||
|
}
|
||||||
|
{...selectionProp}
|
||||||
|
>
|
||||||
|
<TypeCell
|
||||||
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
) : (
|
||||||
|
<div />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{roomColumnTagsIsEnabled ? (
|
||||||
|
<TableCell
|
||||||
|
style={
|
||||||
|
!roomColumnTagsIsEnabled
|
||||||
|
? { background: "none !important" }
|
||||||
|
: dragStyles.style
|
||||||
|
}
|
||||||
|
{...selectionProp}
|
||||||
|
>
|
||||||
|
<TagsCell
|
||||||
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
) : (
|
||||||
|
<div />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{roomColumnOwnerIsEnabled ? (
|
||||||
|
<TableCell
|
||||||
|
style={
|
||||||
|
!roomColumnOwnerIsEnabled
|
||||||
|
? { background: "none" }
|
||||||
|
: dragStyles.style
|
||||||
|
}
|
||||||
|
{...selectionProp}
|
||||||
|
>
|
||||||
|
<AuthorCell
|
||||||
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
) : (
|
||||||
|
<div />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{roomColumnActivityIsEnabled ? (
|
||||||
|
<TableCell
|
||||||
|
style={
|
||||||
|
!roomColumnActivityIsEnabled
|
||||||
|
? { background: "none" }
|
||||||
|
: dragStyles.style
|
||||||
|
}
|
||||||
|
{...selectionProp}
|
||||||
|
>
|
||||||
|
<DateCell
|
||||||
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
) : (
|
||||||
|
<div />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default inject(({ tableStore }) => {
|
||||||
|
const {
|
||||||
|
roomColumnTypeIsEnabled,
|
||||||
|
roomColumnOwnerIsEnabled,
|
||||||
|
roomColumnTagsIsEnabled,
|
||||||
|
roomColumnActivityIsEnabled,
|
||||||
|
} = tableStore;
|
||||||
|
|
||||||
|
return {
|
||||||
|
roomColumnTypeIsEnabled,
|
||||||
|
roomColumnOwnerIsEnabled,
|
||||||
|
roomColumnTagsIsEnabled,
|
||||||
|
roomColumnActivityIsEnabled,
|
||||||
|
};
|
||||||
|
})(observer(RoomsRowDataComponent));
|
@ -0,0 +1,186 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
|
import TableCell from "@docspace/components/table-container/TableCell";
|
||||||
|
import FileNameCell from "./FileNameCell";
|
||||||
|
import TypeCell from "./TypeCell";
|
||||||
|
import AuthorCell from "./AuthorCell";
|
||||||
|
import DateCell from "./DateCell";
|
||||||
|
import SizeCell from "./SizeCell";
|
||||||
|
import { classNames } from "@docspace/components/utils/classNames";
|
||||||
|
import {
|
||||||
|
StyledBadgesContainer,
|
||||||
|
StyledQuickButtonsContainer,
|
||||||
|
} from "../StyledTable";
|
||||||
|
|
||||||
|
const RowDataComponent = (props) => {
|
||||||
|
const {
|
||||||
|
authorColumnIsEnabled,
|
||||||
|
createdColumnIsEnabled,
|
||||||
|
modifiedColumnIsEnabled,
|
||||||
|
sizeColumnIsEnabled,
|
||||||
|
typeColumnIsEnabled,
|
||||||
|
quickButtonsColumnIsEnabled,
|
||||||
|
|
||||||
|
dragStyles,
|
||||||
|
selectionProp,
|
||||||
|
value,
|
||||||
|
theme,
|
||||||
|
onContentFileSelect,
|
||||||
|
checkedProps,
|
||||||
|
element,
|
||||||
|
inProgress,
|
||||||
|
showHotkeyBorder,
|
||||||
|
badgesComponent,
|
||||||
|
quickButtonsComponent,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TableCell
|
||||||
|
{...dragStyles}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
"table-container_file-name-cell"
|
||||||
|
)}
|
||||||
|
value={value}
|
||||||
|
>
|
||||||
|
<FileNameCell
|
||||||
|
theme={theme}
|
||||||
|
onContentSelect={onContentFileSelect}
|
||||||
|
checked={checkedProps}
|
||||||
|
element={element}
|
||||||
|
inProgress={inProgress}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
<StyledBadgesContainer showHotkeyBorder={showHotkeyBorder}>
|
||||||
|
{badgesComponent}
|
||||||
|
</StyledBadgesContainer>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
{authorColumnIsEnabled ? (
|
||||||
|
<TableCell
|
||||||
|
style={
|
||||||
|
!authorColumnIsEnabled ? { background: "none" } : dragStyles.style
|
||||||
|
}
|
||||||
|
{...selectionProp}
|
||||||
|
>
|
||||||
|
<AuthorCell
|
||||||
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
) : (
|
||||||
|
<div />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{createdColumnIsEnabled ? (
|
||||||
|
<TableCell
|
||||||
|
style={
|
||||||
|
!createdColumnIsEnabled
|
||||||
|
? { background: "none !important" }
|
||||||
|
: dragStyles.style
|
||||||
|
}
|
||||||
|
{...selectionProp}
|
||||||
|
>
|
||||||
|
<DateCell
|
||||||
|
create
|
||||||
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
) : (
|
||||||
|
<div />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{modifiedColumnIsEnabled ? (
|
||||||
|
<TableCell
|
||||||
|
style={
|
||||||
|
!modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style
|
||||||
|
}
|
||||||
|
{...selectionProp}
|
||||||
|
>
|
||||||
|
<DateCell
|
||||||
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
) : (
|
||||||
|
<div />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{sizeColumnIsEnabled ? (
|
||||||
|
<TableCell
|
||||||
|
style={
|
||||||
|
!sizeColumnIsEnabled ? { background: "none" } : dragStyles.style
|
||||||
|
}
|
||||||
|
{...selectionProp}
|
||||||
|
>
|
||||||
|
<SizeCell
|
||||||
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
) : (
|
||||||
|
<div />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{typeColumnIsEnabled ? (
|
||||||
|
<TableCell
|
||||||
|
style={
|
||||||
|
!typeColumnIsEnabled
|
||||||
|
? { background: "none !important" }
|
||||||
|
: dragStyles.style
|
||||||
|
}
|
||||||
|
{...selectionProp}
|
||||||
|
>
|
||||||
|
<TypeCell
|
||||||
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
) : (
|
||||||
|
<div />
|
||||||
|
)}
|
||||||
|
{quickButtonsColumnIsEnabled ? (
|
||||||
|
<TableCell
|
||||||
|
style={
|
||||||
|
!quickButtonsColumnIsEnabled
|
||||||
|
? { background: "none" }
|
||||||
|
: dragStyles.style
|
||||||
|
}
|
||||||
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
"table-container_quick-buttons-wrapper"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<StyledQuickButtonsContainer>
|
||||||
|
{quickButtonsComponent}
|
||||||
|
</StyledQuickButtonsContainer>
|
||||||
|
</TableCell>
|
||||||
|
) : (
|
||||||
|
<div />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default inject(({ tableStore }) => {
|
||||||
|
const {
|
||||||
|
authorColumnIsEnabled,
|
||||||
|
createdColumnIsEnabled,
|
||||||
|
modifiedColumnIsEnabled,
|
||||||
|
sizeColumnIsEnabled,
|
||||||
|
typeColumnIsEnabled,
|
||||||
|
quickButtonsColumnIsEnabled,
|
||||||
|
} = tableStore;
|
||||||
|
|
||||||
|
return {
|
||||||
|
authorColumnIsEnabled,
|
||||||
|
createdColumnIsEnabled,
|
||||||
|
modifiedColumnIsEnabled,
|
||||||
|
sizeColumnIsEnabled,
|
||||||
|
typeColumnIsEnabled,
|
||||||
|
quickButtonsColumnIsEnabled,
|
||||||
|
};
|
||||||
|
})(observer(RowDataComponent));
|
205
packages/client/src/store/TableStore.js
Normal file
205
packages/client/src/store/TableStore.js
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
import { makeAutoObservable } from "mobx";
|
||||||
|
import { TableVersions } from "SRC_DIR/helpers/constants";
|
||||||
|
|
||||||
|
const TABLE_COLUMNS = `filesTableColumns_ver-${TableVersions.Files}`;
|
||||||
|
const TABLE_ROOMS_COLUMNS = `roomsTableColumns_ver-${TableVersions.Rooms}`;
|
||||||
|
|
||||||
|
const COLUMNS_SIZE = `filesColumnsSize_ver-${TableVersions.Files}`;
|
||||||
|
const COLUMNS_ROOMS_SIZE = `roomsColumnsSize_ver-${TableVersions.Rooms}`;
|
||||||
|
|
||||||
|
const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TableVersions.Files}`;
|
||||||
|
const COLUMNS_ROOMS_SIZE_INFO_PANEL = `roomsColumnsSizeInfoPanel_ver-${TableVersions.Rooms}`;
|
||||||
|
|
||||||
|
class TableStore {
|
||||||
|
authStore;
|
||||||
|
treeFoldersStore;
|
||||||
|
|
||||||
|
roomColumnNameIsEnabled = true; // always true
|
||||||
|
roomColumnTypeIsEnabled = false;
|
||||||
|
roomColumnTagsIsEnabled = true;
|
||||||
|
roomColumnOwnerIsEnabled = false;
|
||||||
|
roomColumnActivityIsEnabled = true;
|
||||||
|
|
||||||
|
nameColumnIsEnabled = true; // always true
|
||||||
|
authorColumnIsEnabled = false;
|
||||||
|
createdColumnIsEnabled = true;
|
||||||
|
modifiedColumnIsEnabled = true;
|
||||||
|
sizeColumnIsEnabled = true;
|
||||||
|
typeColumnIsEnabled = true;
|
||||||
|
quickButtonsColumnIsEnabled = true;
|
||||||
|
|
||||||
|
constructor(authStore, treeFoldersStore) {
|
||||||
|
makeAutoObservable(this);
|
||||||
|
|
||||||
|
this.authStore = authStore;
|
||||||
|
this.treeFoldersStore = treeFoldersStore;
|
||||||
|
}
|
||||||
|
|
||||||
|
setRoomColumnType = (enable) => {
|
||||||
|
this.roomColumnTypeIsEnabled = enable;
|
||||||
|
};
|
||||||
|
|
||||||
|
setRoomColumnTags = (enable) => {
|
||||||
|
this.roomColumnTagsIsEnabled = enable;
|
||||||
|
};
|
||||||
|
|
||||||
|
setRoomColumnOwner = (enable) => {
|
||||||
|
this.roomColumnOwnerIsEnabled = enable;
|
||||||
|
};
|
||||||
|
|
||||||
|
setRoomColumnActivity = (enable) => {
|
||||||
|
this.roomColumnActivityIsEnabled = enable;
|
||||||
|
};
|
||||||
|
|
||||||
|
setAuthorColumn = (enable) => {
|
||||||
|
this.authorColumnIsEnabled = enable;
|
||||||
|
};
|
||||||
|
setCreatedColumn = (enable) => {
|
||||||
|
this.createdColumnIsEnabled = enable;
|
||||||
|
};
|
||||||
|
setModifiedColumn = (enable) => {
|
||||||
|
this.modifiedColumnIsEnabled = enable;
|
||||||
|
};
|
||||||
|
setSizeColumn = (enable) => {
|
||||||
|
this.sizeColumnIsEnabled = enable;
|
||||||
|
};
|
||||||
|
setTypeColumn = (enable) => {
|
||||||
|
this.typeColumnIsEnabled = enable;
|
||||||
|
};
|
||||||
|
setQuickButtonsColumn = (enable) => {
|
||||||
|
this.quickButtonsColumnIsEnabled = enable;
|
||||||
|
};
|
||||||
|
|
||||||
|
setColumnsEnable = () => {
|
||||||
|
const storageColumns = localStorage.getItem(this.tableStorageName);
|
||||||
|
const splitColumns = storageColumns && storageColumns.split(",");
|
||||||
|
|
||||||
|
if (splitColumns) {
|
||||||
|
const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore;
|
||||||
|
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||||
|
|
||||||
|
if (isRooms) {
|
||||||
|
this.setRoomColumnType(splitColumns.includes("Type"));
|
||||||
|
this.setRoomColumnTags(splitColumns.includes("Tags"));
|
||||||
|
this.setRoomColumnOwner(splitColumns.includes("Owner"));
|
||||||
|
this.setRoomColumnActivity(splitColumns.includes("Activity"));
|
||||||
|
} else {
|
||||||
|
this.setAuthorColumn(splitColumns.includes("Author"));
|
||||||
|
this.setCreatedColumn(splitColumns.includes("Created"));
|
||||||
|
this.setModifiedColumn(splitColumns.includes("Modified"));
|
||||||
|
this.setSizeColumn(splitColumns.includes("Size"));
|
||||||
|
this.setTypeColumn(splitColumns.includes("Type"));
|
||||||
|
this.setQuickButtonsColumn(splitColumns.includes("QuickButtons"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
setColumnEnable = (key) => {
|
||||||
|
const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore;
|
||||||
|
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||||
|
|
||||||
|
switch (key) {
|
||||||
|
case "Author":
|
||||||
|
this.setAuthorColumn(!this.authorColumnIsEnabled);
|
||||||
|
return;
|
||||||
|
case "Created":
|
||||||
|
this.setCreatedColumn(!this.createdColumnIsEnabled);
|
||||||
|
return;
|
||||||
|
case "Modified":
|
||||||
|
this.setModifiedColumn(!this.modifiedColumnIsEnabled);
|
||||||
|
return;
|
||||||
|
case "Size":
|
||||||
|
this.setSizeColumn(!this.sizeColumnIsEnabled);
|
||||||
|
return;
|
||||||
|
case "Type":
|
||||||
|
isRooms
|
||||||
|
? this.setRoomColumnType(!this.roomColumnTypeIsEnabled)
|
||||||
|
: this.setTypeColumn(!this.typeColumnIsEnabled);
|
||||||
|
return;
|
||||||
|
case "QuickButtons":
|
||||||
|
this.setQuickButtonsColumn(!this.quickButtonsColumnIsEnabled);
|
||||||
|
return;
|
||||||
|
case "Owner":
|
||||||
|
this.setRoomColumnOwner(!this.roomColumnOwnerIsEnabled);
|
||||||
|
return;
|
||||||
|
case "Tags":
|
||||||
|
this.setRoomColumnTags(!this.roomColumnTagsIsEnabled);
|
||||||
|
return;
|
||||||
|
case "Activity":
|
||||||
|
this.setRoomColumnActivity(!this.roomColumnActivityIsEnabled);
|
||||||
|
return;
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
getColumns = (defaultColumns) => {
|
||||||
|
const storageColumns = localStorage.getItem(this.tableStorageName);
|
||||||
|
const splitColumns = storageColumns && storageColumns.split(",");
|
||||||
|
|
||||||
|
const columns = [];
|
||||||
|
|
||||||
|
if (splitColumns) {
|
||||||
|
this.setColumnsEnable();
|
||||||
|
|
||||||
|
for (let col of defaultColumns) {
|
||||||
|
const column = splitColumns.find((key) => key === col.key);
|
||||||
|
column ? (col.enable = true) : (col.enable = false);
|
||||||
|
|
||||||
|
columns.push(col);
|
||||||
|
}
|
||||||
|
return columns;
|
||||||
|
} else {
|
||||||
|
return defaultColumns;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
get tableStorageName() {
|
||||||
|
const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore;
|
||||||
|
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||||
|
const userId = this.authStore.userStore.user.id;
|
||||||
|
|
||||||
|
return isRooms
|
||||||
|
? `${TABLE_ROOMS_COLUMNS}=${userId}`
|
||||||
|
: `${TABLE_COLUMNS}=${userId}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
get columnStorageName() {
|
||||||
|
const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore;
|
||||||
|
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||||
|
const userId = this.authStore.userStore.user.id;
|
||||||
|
|
||||||
|
return isRooms
|
||||||
|
? `${COLUMNS_ROOMS_SIZE}=${userId}`
|
||||||
|
: `${COLUMNS_SIZE}=${userId}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
get columnInfoPanelStorageName() {
|
||||||
|
const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore;
|
||||||
|
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||||
|
const userId = this.authStore.userStore.user.id;
|
||||||
|
|
||||||
|
return isRooms
|
||||||
|
? `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}`
|
||||||
|
: `${COLUMNS_SIZE_INFO_PANEL}=${userId}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
get filesColumnStorageName() {
|
||||||
|
const userId = this.authStore.userStore.user.id;
|
||||||
|
return `${COLUMNS_SIZE}=${userId}`;
|
||||||
|
}
|
||||||
|
get roomsColumnStorageName() {
|
||||||
|
const userId = this.authStore.userStore.user.id;
|
||||||
|
return `${COLUMNS_ROOMS_SIZE}=${userId}`;
|
||||||
|
}
|
||||||
|
get filesColumnInfoPanelStorageName() {
|
||||||
|
const userId = this.authStore.userStore.user.id;
|
||||||
|
return `${COLUMNS_SIZE_INFO_PANEL}=${userId}`;
|
||||||
|
}
|
||||||
|
get roomsColumnInfoPanelStorageName() {
|
||||||
|
const userId = this.authStore.userStore.user.id;
|
||||||
|
return `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TableStore;
|
@ -31,6 +31,7 @@ import TagsStore from "./TagsStore";
|
|||||||
import PeopleStore from "./PeopleStore";
|
import PeopleStore from "./PeopleStore";
|
||||||
import OformsStore from "./OformsStore";
|
import OformsStore from "./OformsStore";
|
||||||
import AccessRightsStore from "./AccessRightsStore";
|
import AccessRightsStore from "./AccessRightsStore";
|
||||||
|
import TableStore from "./TableStore";
|
||||||
|
|
||||||
const oformsStore = new OformsStore(authStore);
|
const oformsStore = new OformsStore(authStore);
|
||||||
|
|
||||||
@ -136,6 +137,8 @@ const profileActionsStore = new ProfileActionsStore(
|
|||||||
selectedFolderStore
|
selectedFolderStore
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const tableStore = new TableStore(authStore, treeFoldersStore);
|
||||||
|
|
||||||
authStore.infoPanelStore.authStore = authStore;
|
authStore.infoPanelStore.authStore = authStore;
|
||||||
authStore.infoPanelStore.settingsStore = settingsStore;
|
authStore.infoPanelStore.settingsStore = settingsStore;
|
||||||
authStore.infoPanelStore.filesStore = filesStore;
|
authStore.infoPanelStore.filesStore = filesStore;
|
||||||
@ -170,6 +173,7 @@ const store = {
|
|||||||
hotkeyStore,
|
hotkeyStore,
|
||||||
selectFileDialogStore,
|
selectFileDialogStore,
|
||||||
oformsStore,
|
oformsStore,
|
||||||
|
tableStore,
|
||||||
|
|
||||||
tagsStore,
|
tagsStore,
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user