Merge pull request #540 from ONLYOFFICE/feature/hide-filter-sort

Feature/hide filter sort
ONLYOFFICE · Feb 16, 2022 · 638390d · 638390d
2 parents fb8e074 + 924d9bd
commit 638390d
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 44 deletions.
diff --git a/packages/asc-web-common/components/FilterInput/FilterInput.js b/packages/asc-web-common/components/FilterInput/FilterInput.js
@@ -8,7 +8,7 @@ import ViewSelector from "@appserver/components/view-selector";
 import map from "lodash/map";
 import clone from "lodash/clone";
 import StyledFilterInput from "./StyledFilterInput";
-import { isMobileOnly } from "react-device-detect";
+import { isMobileOnly, isMobile } from "react-device-detect";
 
 const cloneObjectsArray = function (props) {
   return map(props, clone);
@@ -206,13 +206,15 @@ class FilterInput extends React.Component {
       size,
       placeholder,
       sectionWidth,
+      sortItemsVisible,
     } = this.props;
 
     if (
       !equal(selectedFilterData, nextProps.selectedFilterData) ||
       this.props.viewAs !== nextProps.viewAs ||
       this.props.widthProp !== nextProps.widthProp ||
-      sectionWidth !== nextProps.sectionWidth
+      sectionWidth !== nextProps.sectionWidth ||
+      sortItemsVisible !== nextProps.sortItemsVisible
     ) {
       return true;
     }
@@ -825,10 +827,9 @@ class FilterInput extends React.Component {
       filterColumnCount,
       viewAs,
       contextMenuHeader,
-      isMobile,
       sectionWidth,
-      getViewSettingsData,
       viewSelectorVisible,
+      sortItemsVisible,
     } = this.props;
     /* eslint-enable react/prop-types */
 
@@ -850,6 +851,7 @@ class FilterInput extends React.Component {
         : false;
 
     let iconSize = 30;
+
     switch (size) {
       case "base":
         iconSize = 32;
@@ -862,6 +864,7 @@ class FilterInput extends React.Component {
       default:
         break;
     }
+
     return (
       <StyledFilterInput
         smallSectionWidth={smallSectionWidth}
@@ -910,7 +913,7 @@ class FilterInput extends React.Component {
           </SearchInput>
         </div>
         <div ref={this.rectComboBoxRef}>
-          {viewAs !== "table" && (
+          {viewAs !== "table" && (sortItemsVisible || isMobileOnly) && (
             <SortComboBox
               options={getSortData()}
               viewSettings={this.state.viewSettings}
@@ -928,6 +931,7 @@ class FilterInput extends React.Component {
               sortDirection={+sortDirection}
               directionAscLabel={directionAscLabel}
               directionDescLabel={directionDescLabel}
+              sortItemsVisible={sortItemsVisible}
             />
           )}
         </div>
@@ -963,6 +967,7 @@ FilterInput.propTypes = {
   getSortData: PropTypes.func,
   value: PropTypes.string,
   getViewSettingsData: PropTypes.func,
+  sortItemsVisible: PropTypes.bool,
 };
 
 FilterInput.defaultProps = {
@@ -978,6 +983,7 @@ FilterInput.defaultProps = {
   directionAscLabel: "A-Z",
   directionDescLabel: "Z-A",
   viewSelectorVisible: true,
+  sortItemsVisible: true,
 };
 
 export default FilterInput;
diff --git a/packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js b/packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js
@@ -84,6 +84,7 @@ class SortComboBox extends React.Component {
       selectedOption,
       viewAs,
       viewSettings,
+      sortItemsVisible,
     } = this.props;
     const { sortDirection, opened } = this.state;
 
@@ -97,36 +98,46 @@ class SortComboBox extends React.Component {
       { value: "1", label: directionDescLabel },
     ];
 
+    const viewIcon = viewSettings?.find((item) => item.value === viewAs);
+
+    const selectorIcon = sortItemsVisible
+      ? "/static/images/z-a.sorting.react.svg"
+      : viewIcon.icon;
+
     const advancedOptions = (
       <>
-        <DropDownItem noHover>
-          <RadioButtonGroup
-            fontWeight={600}
-            isDisabled={isDisabled}
-            name={"direction"}
-            onClick={this.onChangeSortDirection}
-            options={sortDirectionArray}
-            orientation="vertical"
-            selected={sortDirection.toString()}
-            spacing="0px"
-          />
-        </DropDownItem>
-        <DropDownItem isSeparator />
-        <DropDownItem noHover>
-          <RadioButtonGroup
-            fontWeight={600}
-            isDisabled={isDisabled}
-            name={"sort"}
-            onClick={this.onChangeSortId}
-            options={sortArray}
-            orientation="vertical"
-            selected={selectedOption.key}
-            spacing="0px"
-          />
-        </DropDownItem>
-        {viewSettings && viewSettings.length && viewAs && isMobileOnly && (
+        {sortItemsVisible && (
           <>
+            <DropDownItem noHover>
+              <RadioButtonGroup
+                fontWeight={600}
+                isDisabled={isDisabled}
+                name={"direction"}
+                onClick={this.onChangeSortDirection}
+                options={sortDirectionArray}
+                orientation="vertical"
+                selected={sortDirection.toString()}
+                spacing="0px"
+              />
+            </DropDownItem>
             <DropDownItem isSeparator />
+            <DropDownItem noHover>
+              <RadioButtonGroup
+                fontWeight={600}
+                isDisabled={isDisabled}
+                name={"sort"}
+                onClick={this.onChangeSortId}
+                options={sortArray}
+                orientation="vertical"
+                selected={selectedOption.key}
+                spacing="0px"
+              />
+            </DropDownItem>
+          </>
+        )}
+        {viewSettings && viewSettings.length && viewAs && isMobileOnly && (
+          <>
+            {sortItemsVisible && <DropDownItem isSeparator />}
             <DropDownItem noHover>
               <RadioButtonGroup
                 fontWeight={600}
@@ -161,7 +172,7 @@ class SortComboBox extends React.Component {
         <StyledIconButton sortDirection={!!sortDirection}>
           <IconButton
             color={"#A3A9AE"}
-            iconName="/static/images/z-a.sorting.react.svg"
+            iconName={selectorIcon}
             isDisabled={isDisabled}
             isFill={true}
             onClick={this.onToggleAction}

diff --git a/packages/asc-web-components/table-container/StyledTableContainer.js b/packages/asc-web-components/table-container/StyledTableContainer.js
@@ -141,7 +141,8 @@ const StyledTableHeader = styled.div`
 `;
 
 const StyledTableHeaderCell = styled.div`
-  cursor: ${(props) => (props.showIcon ? "pointer" : "default")};
+  cursor: ${(props) =>
+    props.showIcon && props.sortingVisible ? "pointer" : "default"};
 
   .header-container-text-icon {
     height: 8px;

diff --git a/packages/asc-web-components/table-container/TableHeader.js b/packages/asc-web-components/table-container/TableHeader.js
@@ -441,6 +441,7 @@ class TableHeader extends React.Component {
       columnStorageName,
       hasAccess,
       isLengthenHeader,
+      sortingVisible,
       ...rest
     } = this.props;
 
@@ -494,6 +495,7 @@ class TableHeader extends React.Component {
                     resizable={resizable}
                     defaultSize={column.defaultSize}
                     onMouseDown={this.onMouseDown}
+                    sortingVisible={sortingVisible}
                   />
                 );
               })}
@@ -512,6 +514,7 @@ class TableHeader extends React.Component {
 
 TableHeader.defaultProps = {
   hasAccess: true,
+  sortingVisible: true,
 };
 
 TableHeader.propTypes = {
@@ -533,6 +536,7 @@ TableHeader.propTypes = {
   hasAccess: PropTypes.bool,
   resetColumnsSize: PropTypes.bool,
   isLengthenHeader: PropTypes.bool,
+  sortingVisible: PropTypes.bool,
 };
 
 export default TableHeader;
diff --git a/packages/asc-web-components/table-container/TableHeaderCell.js b/packages/asc-web-components/table-container/TableHeaderCell.js
@@ -13,16 +13,19 @@ const TableHeaderCell = ({
   sortBy,
   sorted,
   defaultSize,
+  sortingVisible,
 }) => {
   const { title, enable, active, minWidth } = column;
 
   const isActive = column.sortBy === sortBy || active;
 
   const onClick = (e) => {
+    if (!sortingVisible) return;
     column.onClick && column.onClick(column.sortBy, e);
   };
 
   const onIconClick = (e) => {
+    if (!sortingVisible) return;
     column.onIconClick();
     e.stopPropagation();
   };
@@ -38,6 +41,7 @@ const TableHeaderCell = ({
       data-min-width={minWidth}
       data-default-size={defaultSize}
       onClick={onClick}
+      sortingVisible={sortingVisible}
     >
       <div className="table-container_header-item">
         <div className="header-container-text-wrapper">
@@ -49,13 +53,15 @@ const TableHeaderCell = ({
             {enable ? title : ""}
           </Text>
 
-          <IconButton
-            onClick={column.onIconClick ? onIconClick : onClick}
-            iconName="/static/images/folder arrow.react.svg"
-            className="header-container-text-icon"
-            size="small"
-            hoverColor="#657077"
-          />
+          {sortingVisible && (
+            <IconButton
+              onClick={column.onIconClick ? onIconClick : onClick}
+              iconName="/static/images/folder arrow.react.svg"
+              className="header-container-text-icon"
+              size="small"
+              hoverColor="#657077"
+            />
+          )}
         </div>
         {resizable && (
           <div
@@ -77,6 +83,7 @@ TableHeaderCell.propTypes = {
   sorted: PropTypes.bool,
   sortBy: PropTypes.string,
   defaultSize: PropTypes.number,
+  sortingVisible: PropTypes.bool,
 };
 
 export default TableHeaderCell;
diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js
@@ -214,6 +214,7 @@ class FilesTableHeader extends React.Component {
       cbMenuItems,
       getCheckboxItemLabel,
       firstElemChecked,
+      sortingVisible,
     } = this.props;
 
     const { sortBy, sortOrder } = filter;
@@ -254,6 +255,7 @@ class FilesTableHeader extends React.Component {
         isIndeterminate={isHeaderIndeterminate}
         headerMenu={getHeaderMenu(t)}
         resetColumnsSize={resetColumnsSize}
+        sortingVisible={sortingVisible}
       />
     );
   }
@@ -281,9 +283,14 @@ export default inject(
       firstElemChecked,
     } = filesStore;
     const { getHeaderMenu } = filesActionsStore;
-    const { isPrivacyFolder } = treeFoldersStore;
+    const {
+      isPrivacyFolder,
+      isFavoritesFolder,
+      isRecentFolder,
+    } = treeFoldersStore;
 
     const withContent = canShare || (canShare && isPrivacyFolder && isDesktop);
+    const sortingVisible = !(isFavoritesFolder || isRecentFolder);
     const { personal } = auth.settingsStore;
 
     return {
@@ -294,6 +301,7 @@ export default inject(
       selectedFolderId: selectedFolderStore.id,
       withContent,
       personal,
+      sortingVisible,
 
       setSelected,
       setIsLoading,

diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js
@@ -7,7 +7,7 @@ import { FilterType } from "@appserver/common/constants";
 import Loaders from "@appserver/common/components/Loaders";
 import FilterInput from "@appserver/common/components/FilterInput";
 import { withLayoutSize } from "@appserver/common/utils";
-import { isMobileOnly, isMobile } from "react-device-detect";
+import { isMobile, isMobileOnly } from "react-device-detect";
 import { inject, observer } from "mobx-react";
 import withLoader from "../../../../HOCs/withLoader";
 import { FileAction } from "@appserver/common/constants";
@@ -334,7 +334,15 @@ class SectionFilterContent extends React.Component {
   render() {
     //console.log("Filter render");
     const selectedFilterData = this.getSelectedFilterData();
-    const { t, sectionWidth, isFiltered, viewAs, personal } = this.props;
+    const {
+      t,
+      sectionWidth,
+      isFiltered,
+      viewAs,
+      personal,
+      isFavoritesFolder,
+      isRecentFolder,
+    } = this.props;
     const filterColumnCount =
       window.innerWidth < 500 ? {} : { filterColumnCount: personal ? 2 : 3 };
 
@@ -354,7 +362,7 @@ class SectionFilterContent extends React.Component {
         isReady={this.state.isReady}
         {...filterColumnCount}
         contextMenuHeader={t("Common:AddFilter")}
-        isMobile={isMobileOnly}
+        sortItemsVisible={!(isFavoritesFolder || isRecentFolder)}
       />
     );
   }