IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: TabLe: refactoring table view

Browse Source
This commit is contained in:
Nikita Gopienko 2022-02-22 16:00:26 +03:00
parent b12ec986fc
commit deeff80f26
10 changed files with 36 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/asc-web-components/table-container/TableGroupMenu.js
View File

@ -14,7 +14,6 @@ const TableGroupMenu = (props) => {
onChange,
checkboxOptions,
checkboxMargin,
isLengthenHeader,
...rest
} = props;
@ -27,10 +26,7 @@ const TableGroupMenu = (props) => {
return (
<>
<StyledTableGroupMenu
id="table-container_caption-header"
className={`${
isLengthenHeader ? "lengthen-header" : ""
} table-container_group-menu`}
className="table-container_group-menu"
checkboxMargin={checkboxMargin}
{...rest}
>
@ -66,7 +62,6 @@ const TableGroupMenu = (props) => {
TableGroupMenu.propTypes = {
isChecked: PropTypes.bool,
isIndeterminate: PropTypes.bool,
isLengthenHeader: PropTypes.bool,
headerMenu: PropTypes.arrayOf(PropTypes.object).isRequired,
checkboxOptions: PropTypes.any.isRequired,
onClick: PropTypes.func,

12
packages/asc-web-components/table-container/TableHeader.js
View File

@ -6,11 +6,9 @@ import {
StyledTableRow,
StyledEmptyTableContainer,
} from "./StyledTableContainer";
import Checkbox from "../checkbox";
import TableSettings from "./TableSettings";
import TableHeaderCell from "./TableHeaderCell";
import { size } from "../utils/device";
import TableGroupMenu from "./TableGroupMenu";
const minColumnSize = 150;
const defaultMinColumnSize = 90;
@ -413,15 +411,6 @@ class TableHeader extends React.Component {
columns,
sortBy,
sorted,
isHeaderVisible,
checkboxOptions,
containerRef,
onChange,
isChecked,
isIndeterminate,
headerMenu,
columnStorageName,
hasAccess,
isLengthenHeader,
sortingVisible,
...rest
@ -472,7 +461,6 @@ class TableHeader extends React.Component {
}
TableHeader.defaultProps = {
hasAccess: true,
sortingVisible: true,
};

2
packages/asc-web-components/table-container/TableHeaderCell.js
View File

@ -56,7 +56,7 @@ const TableHeaderCell = ({
{sortingVisible && (
<IconButton
onClick={column.onIconClick ? onIconClick : onClick}
iconName="/static/images/folder arrow.react.svg"
iconName="/static/images/sort.desc.react.svg"
className="header-container-text-icon"
size="small"
hoverColor="#657077"

23
packages/asc-web-components/table-container/TableRow.js
View File

@ -4,8 +4,6 @@ import { StyledTableRow } from "./StyledTableContainer";
import TableCell from "./TableCell";
import ContextMenu from "../context-menu";
import ContextMenuButton from "../context-menu-button";
import Checkbox from "../checkbox";
import Loader from "../loader";
const TableRow = (props) => {
const {
@ -13,16 +11,10 @@ const TableRow = (props) => {
onHideContextMenu,
children,
contextOptions,
checked,
element,
onContentSelect,
item,
className,
style,
selectionProp,
hasAccess,
title,
inProgress,
...rest
} = props;
@ -46,10 +38,6 @@ const TableRow = (props) => {
return contextOptions;
};
const onChange = (e) => {
onContentSelect && onContentSelect(e.target.checked, item);
};
return (
<StyledTableRow
onContextMenu={onContextMenu}
@ -89,24 +77,15 @@ const TableRow = (props) => {
);
};
TableRow.defaultProps = {
hasAccess: true,
};
TableRow.propTypes = {
fileContextClick: PropTypes.func,
children: PropTypes.any,
contextOptions: PropTypes.array,
checked: PropTypes.bool,
element: PropTypes.any,
onContentSelect: PropTypes.func,
onHideContextMenu: PropTypes.func,
item: PropTypes.object,
selectionProp: PropTypes.object,
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
style: PropTypes.object,
hasAccess: PropTypes.bool,
inProgress: PropTypes.bool,
title: PropTypes.string,
};
export default TableRow;

32
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js
View File

@ -188,17 +188,11 @@ class FilesTableHeader extends React.Component {
render() {
const {
t,
containerRef,
isHeaderVisible,
isHeaderChecked,
isHeaderIndeterminate,
getHeaderMenu,
filter,
sectionWidth,
userId,
cbMenuItems,
getCheckboxItemLabel,
firstElemChecked,
sortingVisible,
} = this.props;
@ -224,40 +218,22 @@ class FilesTableHeader extends React.Component {
}
export default inject(
({
auth,
filesStore,
filesActionsStore,
selectedFolderStore,
treeFoldersStore,
}) => {
({ auth, filesStore, selectedFolderStore, treeFoldersStore }) => {
const {
setSelected,
isHeaderVisible,
isHeaderIndeterminate,
isHeaderChecked,
setIsLoading,
filter,
fetchFiles,
canShare,
cbMenuItems,
getCheckboxItemLabel,
firstElemChecked,
} = filesStore;
const { getHeaderMenu } = filesActionsStore;
const {
isPrivacyFolder,
isFavoritesFolder,
isRecentFolder,
} = treeFoldersStore;
const { isPrivacyFolder, isRecentFolder } = treeFoldersStore;
const withContent = canShare || (canShare && isPrivacyFolder && isDesktop);
const sortingVisible = !isRecentFolder;
const { personal } = auth.settingsStore;
return {
isHeaderVisible,
isHeaderIndeterminate,
isHeaderChecked,
filter,
selectedFolderId: selectedFolderStore.id,
@ -265,13 +241,9 @@ export default inject(
personal,
sortingVisible,
setSelected,
setIsLoading,
fetchFiles,
getHeaderMenu,
userId: auth.userStore.user.id,
cbMenuItems,
getCheckboxItemLabel,
firstElemChecked,
};

1
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js
View File

@ -310,6 +310,7 @@ const FilesTableRow = (props) => {
onContentSelect={onContentFileSelect}
checked={checkedProps}
element={element}
inProgress={inProgress}
{...selectionProp}
{...props}
/>

36
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js
View File

@ -2,6 +2,7 @@ import React from "react";
import Link from "@appserver/components/link";
import Checkbox from "@appserver/components/checkbox";
import TableCell from "@appserver/components/table-container/TableCell";
import Loader from "@appserver/components/loader";
const FileNameCell = ({
item,
@ -12,6 +13,7 @@ const FileNameCell = ({
checked,
selectionProp,
t,
inProgress,
}) => {
const { title } = item;
@ -21,20 +23,28 @@ const FileNameCell = ({
return (
<>
<TableCell
hasAccess={true}
checked={checked}
{...selectionProp}
className={`${selectionProp?.className} table-container_row-checkbox-wrapper`}
>
<div className="table-container_element">{element}</div>
<Checkbox
className="table-container_row-checkbox"
onChange={onChange}
isChecked={checked}
title={t("Common:TitleSelectFile")}
{inProgress ? (
<Loader
className="table-container_row-loader"
type="oval"
size="16px"
/>
</TableCell>
) : (
<TableCell
hasAccess={true}
checked={checked}
{...selectionProp}
className={`${selectionProp?.className} table-container_row-checkbox-wrapper`}
>
<div className="table-container_element">{element}</div>
<Checkbox
className="table-container_row-checkbox"
onChange={onChange}
isChecked={checked}
title={t("Common:TitleSelectFile")}
/>
</TableCell>
)}
<Link
type="page"

8
products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
View File

@ -111,7 +111,7 @@ const StyledContainer = styled.div`
@media (min-width: 1024px) {
margin-left: 8px;
}
}
@media ${tablet} {
& > div:first-child {
@ -569,7 +569,8 @@ export default inject(
setIsLoading,
cbMenuItems,
getCheckboxItemLabel,
isEmptyFilesList, getFolderInfo,
isEmptyFilesList,
getFolderInfo,
setBufferSelection,
viewAs,
} = filesStore;
@ -626,7 +627,8 @@ export default inject(
setEmptyTrashDialogVisible,
isEmptyFilesList,
isPrivacyFolder,
viewAs, };
viewAs,
};
}
)(
withTranslation(["Home", "Common", "Translations"])(

78
products/ASC.People/Client/src/pages/Home/Section/Body/TableView/TableHeader.js
View File

@ -124,74 +124,19 @@ class PeopleTableHeader extends React.Component {
fetchPeople(newFilter).finally(() => setIsLoading(false));
};
onChange = (checked) => {
this.props.setSelected(checked ? "all" : "none");
};
onSelect = (e) => {
const key = e.currentTarget.dataset.key;
this.props.setSelected(key);
};
setSelected = (checked) => {
const { isAdmin, setSelected } = this.props;
if (isAdmin) {
setSelected && setSelected(checked ? "all" : "none");
}
};
render() {
const { columns } = this.state;
const {
t,
containerRef,
isHeaderVisible,
isHeaderChecked,
isHeaderIndeterminate,
getHeaderMenu,
filter,
sectionWidth,
isAdmin,
userId,
} = this.props;
const { containerRef, filter, sectionWidth, userId } = this.props;
const { sortOrder } = filter;
const checkboxOptions = (
<>
<DropDownItem
label={t("Common:Active")}
data-key="active"
onClick={this.onSelect}
/>
<DropDownItem
label={t("Translations:DisabledEmployeeStatus")}
data-key="disabled"
onClick={this.onSelect}
/>
<DropDownItem
label={t("LblInvited")}
data-key="invited"
onClick={this.onSelect}
/>
</>
);
return (
<TableHeader
hasAccess={isAdmin}
checkboxSize="48px"
sorted={sortOrder === "descending"}
setSelected={this.setSelected}
containerRef={containerRef}
columns={columns}
columnStorageName={`${COLUMNS_SIZE}=${userId}`}
sectionWidth={sectionWidth}
isHeaderVisible={isHeaderVisible}
checkboxOptions={checkboxOptions}
onChange={this.onChange}
isChecked={isHeaderChecked}
isIndeterminate={isHeaderIndeterminate}
headerMenu={getHeaderMenu(t)}
checkboxMargin="12px"
/>
);
@ -199,35 +144,16 @@ class PeopleTableHeader extends React.Component {
}
export default inject(({ auth, peopleStore }) => {
const {
selectionStore,
headerMenuStore,
filterStore,
usersStore,
loadingStore,
getHeaderMenu,
} = peopleStore;
const { filterStore, usersStore, loadingStore } = peopleStore;
const { setSelected } = selectionStore;
const {
isHeaderVisible,
isHeaderChecked,
isHeaderIndeterminate,
} = headerMenuStore;
const { filter } = filterStore;
const { getUsersList } = usersStore;
const { setIsLoading } = loadingStore;
return {
isAdmin: auth.isAdmin,
setSelected,
isHeaderVisible,
filter,
fetchPeople: getUsersList,
setIsLoading,
getHeaderMenu,
isHeaderChecked,
isHeaderIndeterminate,
userId: auth.userStore.user.id,
};
})(

1
products/ASC.People/Client/src/pages/Home/Section/Body/TableView/TableRow.js
View File

@ -36,7 +36,6 @@ const StyledPeopleRow = styled(TableRow)`
const PeopleTableRow = (props) => {
const {
t,
item,
contextOptionsProps,
element,