Web:Common: refactoring new filter input and add support group selector

2022-02-22 17:10:13 +08:00 · 2022-02-22 17:10:13 +08:00 · aa91c011d8
commit aa91c011d8
parent 45c521cd08
7 changed files with 140 additions and 76 deletions
--- a/packages/asc-web-common/components/NewFilterInput/index.js
+++ b/packages/asc-web-common/components/NewFilterInput/index.js
@ -15,29 +15,36 @@ import { StyledFilterInput, StyledSearchInput } from "./StyledFilterInput";

 const FilterInput = ({
  sectionWidth,
-  placeholder,
-  contextMenuHeader,
-  selectedFilterData,
-  viewAs,
-  onChangeViewAs,
-  viewSelectorVisible,
-  getViewSettingsData,
  getFilterData,
+  getSortData,
+  getViewSettingsData,
+  getSelectedFilterData,
  onFilter,
  onSearch,
  onSort,
-  addUserHeader,
-  getSortData,
+  onChangeViewAs,
+  viewAs,
+  placeholder,
+  contextMenuHeader,
+  headerLabel,
+  viewSelectorVisible,
  ...props
 }) => {
  const [viewSettings, setViewSettings] = React.useState([]);
+  const [selectedFilterData, setSelectedFilterData] = React.useState([]);
+
  const [inputValue, setInputValue] = React.useState("");

+  const getSelectedFilterDataAction = React.useCallback(async () => {
+    const data = await getSelectedFilterData();
+
+    setSelectedFilterData(data);
+    setInputValue(!!data.inputValue ? data.inputValue : "");
+  }, [getSelectedFilterData]);
+
  React.useEffect(() => {
-    setInputValue(
-      !!selectedFilterData.inputValue ? selectedFilterData.inputValue : ""
-    );
-  }, [selectedFilterData]);
+    getSelectedFilterDataAction();
+  }, [getSelectedFilterData]);

  React.useEffect(() => {
    getViewSettingsData && setViewSettings(getViewSettingsData());
@ -48,7 +55,7 @@ const FilterInput = ({
  };

  return (
-    <StyledFilterInput sectionWidth={sectionWidth}>
+    <StyledFilterInput {...props} sectionWidth={sectionWidth}>
      <StyledSearchInput
        placeholder={placeholder}
        value={inputValue}
@ -61,7 +68,7 @@ const FilterInput = ({
        contextMenuHeader={contextMenuHeader}
        getFilterData={getFilterData}
        onFilter={onFilter}
-        addUserHeader={addUserHeader}
+        headerLabel={headerLabel}
      />

      {viewSettings &&
@ -76,21 +83,26 @@ const FilterInput = ({
          viewSettings={viewSettings}
        />
      ) : (
-        <SortButton
-          selectedFilterData={selectedFilterData}
-          getSortData={getSortData}
-          onChangeViewAs={onChangeViewAs}
-          viewAs={viewAs === "table" ? "row" : viewAs}
-          viewSettings={viewSettings}
-          onSort={onSort}
-        />
+        <>
+          {(isMobile || isTabletUtils()) && (
+            <SortButton
+              selectedFilterData={selectedFilterData}
+              getSortData={getSortData}
+              onChangeViewAs={onChangeViewAs}
+              viewAs={viewAs === "table" ? "row" : viewAs}
+              viewSettings={viewSettings}
+              onSort={onSort}
+              viewSelectorVisible={viewSelectorVisible}
+            />
+          )}
+        </>
      )}
    </StyledFilterInput>
  );
 };

 FilterInput.defaultProps = {
-  viewSelectorVisible: true,
+  viewSelectorVisible: false,
 };

 export default React.memo(FilterInput);
--- a/packages/asc-web-common/components/NewFilterInput/sub-components/FilterBlock.js
+++ b/packages/asc-web-common/components/NewFilterInput/sub-components/FilterBlock.js
@ -1,6 +1,5 @@
 import React from "react";

-import Aside from "@appserver/components/aside";
 import Backdrop from "@appserver/components/backdrop";
 import Button from "@appserver/components/button";
 import Heading from "@appserver/components/heading";
@ -8,9 +7,8 @@ import IconButton from "@appserver/components/icon-button";

 import FilterBlockItem from "./FilterBlockItem";

-// import Selector from "./Selector";
-
-import PeopleSelector from "people/PeopleSelector"; //TODO: Move out PeopleSelector  of FilterItem
+import PeopleSelector from "people/PeopleSelector";
+import GroupSelector from "people/GroupSelector";

 import {
  StyledFilterBlock,
@ -27,25 +25,23 @@ const FilterBlock = ({
  getFilterData,
  hideFilterBlock,
  onFilter,
-  addUserHeader,
+  headerLabel,
 }) => {
  const [showSelector, setShowSelector] = React.useState({
    show: false,
    isAuthor: false,
    group: "",
-    selectedItems: [],
  });

  const [filterData, setFilterData] = React.useState([]);
  const [filterValues, setFilterValues] = React.useState([]);

-  const changeShowSelector = (isAuthor, group, selectedItems) => {
+  const changeShowSelector = (isAuthor, group) => {
    setShowSelector((val) => {
      return {
        show: !val.show,
        isAuthor: isAuthor,
        group: group,
-        selectedItems: selectedItems,
      };
    });
  };
@ -55,22 +51,27 @@ const FilterBlock = ({

    items.forEach((item) => {
      if (filter.find((value) => value.group === item.group)) {
-        const key = filter.filter((value) => value.group === item.group)[0].key;
+        const currentFilter = filter.filter(
+          (value) => value.group === item.group
+        )[0];
+
        item.groupItem.forEach((groupItem) => {
          groupItem.isSelected = false;
-          if (groupItem.key === key) {
+          if (groupItem.key === currentFilter.key) {
            groupItem.isSelected = true;
          }
          if (groupItem.isSelector) {
            groupItem.isSelected = true;
-            groupItem.selectedItem = key;
+            groupItem.selectedKey = currentFilter.key;
+            groupItem.selectedLabel = currentFilter.label;
          }
        });
      } else {
        item.groupItem.forEach((groupItem) => {
          groupItem.isSelected = false;
          if (groupItem.isSelector) {
-            groupItem.selectedItem = [];
+            groupItem.selectedKey = null;
+            groupItem.selectedLabel = null;
          }
        });
      }
@ -84,8 +85,8 @@ const FilterBlock = ({
    setFilterValues([]);
  };

-  const changeFilterValue = (group, key, isSelected) => {
-    let value = filterValues.filter((item) => item.key !== key);
+  const changeFilterValue = (group, key, isSelected, label) => {
+    let value = filterValues.concat();

    if (isSelected) {
      value = filterValues.filter((item) => item.group !== group);
@ -99,10 +100,17 @@ const FilterBlock = ({
      value.forEach((item) => {
        if (item.group === group) {
          item.key = key;
+          if (label) {
+            item.label = label;
+          }
        }
      });
    } else {
-      value.push({ group, key });
+      if (label) {
+        value.push({ group, key, label });
+      } else {
+        value.push({ group, key });
+      }
    }

    setFilterValues(value);
@ -129,12 +137,12 @@ const FilterBlock = ({
        items.forEach((item) => {
          if (item.group === value.group) {
            item.groupItem.forEach((groupItem) => {
-              if (
-                groupItem.key === value.key ||
-                (groupItem.selectedItem &&
-                  Object.keys(groupItem.selectedItem).length > 0)
-              ) {
+              if (groupItem.key === value.key || groupItem.isSelector) {
                groupItem.isSelected = true;
+                if (groupItem.isSelector) {
+                  groupItem.selectedLabel = value.label;
+                  groupItem.selectedKey = value.key;
+                }
              }
            });
          }
@ -159,10 +167,9 @@ const FilterBlock = ({
    setShowSelector((val) => ({
      ...val,
      show: false,
-      selectedItems: [...items],
    }));

-    changeFilterValue(showSelector.group, items[0].key, false);
+    changeFilterValue(showSelector.group, items[0].key, false, items[0].label);
  };

  return (
@ -170,15 +177,27 @@ const FilterBlock = ({
      {showSelector.show ? (
        <>
          <StyledFilterBlock>
-            <PeopleSelector
-              className="people-selector"
-              isOpen={showSelector.show}
-              withoutAside={true}
-              isMultiSelect={false}
-              onSelect={selectOption}
-              onArrowClick={onArrowClick}
-              headerLabel={addUserHeader}
-            />
+            {showSelector.isAuthor ? (
+              <PeopleSelector
+                className="people-selector"
+                isOpen={showSelector.show}
+                withoutAside={true}
+                isMultiSelect={false}
+                onSelect={selectOption}
+                onArrowClick={onArrowClick}
+                headerLabel={headerLabel}
+              />
+            ) : (
+              <GroupSelector
+                className="people-selector"
+                isOpen={showSelector.show}
+                withoutAside={true}
+                isMultiSelect={false}
+                onSelect={selectOption}
+                onArrowClick={onArrowClick}
+                headerLabel={headerLabel}
+              />
+            )}
          </StyledFilterBlock>
        </>
      ) : (
--- a/packages/asc-web-common/components/NewFilterInput/sub-components/FilterBlockItem.js
+++ b/packages/asc-web-common/components/NewFilterInput/sub-components/FilterBlockItem.js
@ -34,7 +34,7 @@ const FilterBlockItem = ({
    changeFilterValue && changeFilterValue(group, key, isSelected);
  };

-  const showSelectorAction = (event, isAuthor, group, selectedItems, ref) => {
+  const showSelectorAction = (event, isAuthor, group, ref) => {
    let target = event.target;

    while (!!target.parentNode) {
@ -46,7 +46,7 @@ const FilterBlockItem = ({
      }
    }

-    showSelector && showSelector(isAuthor, group, selectedItems);
+    showSelector && showSelector(isAuthor, group);
  };

  const getSelectorItem = (item) => {
@ -62,7 +62,7 @@ const FilterBlockItem = ({
          }
        />
        <StyledFilterBlockItemSelectorText noSelect={true}>
-          {label}
+          {item.label}
        </StyledFilterBlockItemSelectorText>
      </StyledFilterBlockItemSelector>
    ) : (
@ -74,7 +74,6 @@ const FilterBlockItem = ({
            event,
            isAuthor,
            item.group,
-            item.selectedItem,
            clearSelectorRef.current
          )
        }
@ -83,7 +82,7 @@ const FilterBlockItem = ({
          noSelect={true}
          isSelected={item.isSelected}
        >
-          1 user
+          {item.selectedLabel.toLowerCase()}
        </StyledFilterBlockItemTagText>
        {item.isSelected && (
          <StyledFilterBlockItemTagIcon ref={clearSelectorRef}>
@ -119,7 +118,7 @@ const FilterBlockItem = ({
          noSelect={true}
          isSelected={item.isSelected}
        >
-          {item.label}
+          {item.label.toLowerCase()}
        </StyledFilterBlockItemTagText>
        {item.isSelected && (
          <StyledFilterBlockItemTagIcon>
--- a/packages/asc-web-common/components/NewFilterInput/sub-components/FilterButton.js
+++ b/packages/asc-web-common/components/NewFilterInput/sub-components/FilterButton.js
@ -11,7 +11,7 @@ const FilterButton = ({
  contextMenuHeader,
  getFilterData,
  onFilter,
-  addUserHeader,
+  headerLabel,
 }) => {
  const [showFilterBlock, setShowFilterBlock] = React.useState(false);

@ -32,7 +32,7 @@ const FilterButton = ({
          hideFilterBlock={changeShowFilterBlock}
          getFilterData={getFilterData}
          onFilter={onFilter}
-          addUserHeader={addUserHeader}
+          headerLabel={headerLabel}
        />
      )}
    </>
--- a/packages/asc-web-common/components/NewFilterInput/sub-components/SortButton.js
+++ b/packages/asc-web-common/components/NewFilterInput/sub-components/SortButton.js
@ -9,13 +9,14 @@ import ViewSelector from "@appserver/components/view-selector";
 import Text from "@appserver/components/text";

 import { mobile } from "@appserver/components/utils/device";
+import { Base } from "@appserver/components/themes";

 import SortDesc from "../../../../../public/images/sort.desc.react.svg";

 const selectedViewIcon = css`
  svg {
    path {
-      fill: #dfe2e3;
+      fill: ${(props) => props.theme.newFilterInput.sort.selectedViewIcon};
    }
  }
 `;
@ -23,7 +24,7 @@ const selectedViewIcon = css`
 const notSelectedViewIcon = css`
  svg {
    path {
-      fill: #a3a9ae;
+      fill: ${(props) => props.theme.newFilterInput.sort.viewIcon};
    }
  }
 `;
@ -38,6 +39,11 @@ const mobileView = css`
 `;

 const StyledSortButton = styled.div`
+  .combo-button {
+    background: ${(props) =>
+      props.theme.newFilterInput.sort.background} !important;
+  }
+
  .sort-combo-box {
    width: 32px;
    height: 32px;
@ -114,6 +120,10 @@ const StyledSortButton = styled.div`
            css`
              transform: rotate(180deg);
            `}
+
+          path {
+            fill: ${(props) => props.theme.newFilterInput.sort.sortFill};
+          }
        }

        :hover {
@ -124,7 +134,8 @@ const StyledSortButton = styled.div`
      }

      .selected-option-item {
-        background: #f8f9f9;
+        background: ${(props) =>
+          props.theme.newFilterInput.sort.hoverBackground};
        cursor: auto;

        .selected-option-item__icon {
@ -151,6 +162,8 @@ const StyledSortButton = styled.div`
  }
 `;

+StyledSortButton.defaultProps = { theme: Base };
+
 const SortButton = ({
  selectedFilterData,
  getSortData,
@ -158,6 +171,7 @@ const SortButton = ({
  viewAs,
  viewSettings,
  onSort,
+  viewSelectorVisible,
 }) => {
  const [isOpen, setIsOpen] = React.useState(false);

@ -212,16 +226,20 @@ const SortButton = ({

    return (
      <>
-        <DropDownItem noHover className="view-selector-item">
-          <Text fontWeight={600}>View</Text>
-          <ViewSelector
-            className="view-selector"
-            onChangeView={onChangeViewAs}
-            viewAs={viewAs}
-            viewSettings={viewSettings}
-          />
-        </DropDownItem>
-        <DropDownItem isSeparator={true}></DropDownItem>
+        {viewSelectorVisible && (
+          <>
+            <DropDownItem noHover className="view-selector-item">
+              <Text fontWeight={600}>View</Text>
+              <ViewSelector
+                className="view-selector"
+                onChangeView={onChangeViewAs}
+                viewAs={viewAs}
+                viewSettings={viewSettings}
+              />
+            </DropDownItem>
+            <DropDownItem isSeparator={true}></DropDownItem>
+          </>
+        )}
        {data.map((item) => (
          <DropDownItem
            onClick={onOptionClick}
--- a/packages/asc-web-components/themes/base.js
+++ b/packages/asc-web-components/themes/base.js
@ -2045,6 +2045,14 @@ const Base = {
        color: "#ffffff",
      },
    },
+
+    sort: {
+      background: "#ffffff",
+      hoverBackground: "#f8f9f9",
+      selectedViewIcon: "#dfe2e3",
+      viewIcon: "#a3a9ae",
+      sortFill: "#657077",
+    },
  },

  profileInfo: {
--- a/packages/asc-web-components/themes/dark.js
+++ b/packages/asc-web-components/themes/dark.js
@ -2047,6 +2047,14 @@ const Dark = {
        color: "#333333",
      },
    },
+
+    sort: {
+      background: "#333333",
+      hoverBackground: "#292929",
+      selectedViewIcon: "rgba(255, 255, 255, 0.88)",
+      viewIcon: "#858585",
+      sortFill: "rgba(255, 255, 255, 0.6)",
+    },
  },

  profileInfo: {