From aa91c011d887414a20f65f3518f9633dbf9f8224 Mon Sep 17 00:00:00 2001 From: Timofey Date: Tue, 22 Feb 2022 17:10:13 +0800 Subject: [PATCH] Web:Common: refactoring new filter input and add support group selector --- .../components/NewFilterInput/index.js | 60 ++++++++------ .../sub-components/FilterBlock.js | 81 ++++++++++++------- .../sub-components/FilterBlockItem.js | 11 ++- .../sub-components/FilterButton.js | 4 +- .../sub-components/SortButton.js | 44 +++++++--- packages/asc-web-components/themes/base.js | 8 ++ packages/asc-web-components/themes/dark.js | 8 ++ 7 files changed, 140 insertions(+), 76 deletions(-) diff --git a/packages/asc-web-common/components/NewFilterInput/index.js b/packages/asc-web-common/components/NewFilterInput/index.js index bab497a718..24feebbb35 100644 --- 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 ( - + {viewSettings && @@ -76,21 +83,26 @@ const FilterInput = ({ viewSettings={viewSettings} /> ) : ( - + <> + {(isMobile || isTabletUtils()) && ( + + )} + )} ); }; FilterInput.defaultProps = { - viewSelectorVisible: true, + viewSelectorVisible: false, }; export default React.memo(FilterInput); diff --git a/packages/asc-web-common/components/NewFilterInput/sub-components/FilterBlock.js b/packages/asc-web-common/components/NewFilterInput/sub-components/FilterBlock.js index 3ad540b6a4..0f93ee7207 100644 --- 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 ? ( <> - + {showSelector.isAuthor ? ( + + ) : ( + + )} ) : ( diff --git a/packages/asc-web-common/components/NewFilterInput/sub-components/FilterBlockItem.js b/packages/asc-web-common/components/NewFilterInput/sub-components/FilterBlockItem.js index b09bbf7da2..c24ebd621a 100644 --- 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 = ({ } /> - {label} + {item.label} ) : ( @@ -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()} {item.isSelected && ( @@ -119,7 +118,7 @@ const FilterBlockItem = ({ noSelect={true} isSelected={item.isSelected} > - {item.label} + {item.label.toLowerCase()} {item.isSelected && ( diff --git a/packages/asc-web-common/components/NewFilterInput/sub-components/FilterButton.js b/packages/asc-web-common/components/NewFilterInput/sub-components/FilterButton.js index 94b665d717..6757f9d8aa 100644 --- 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} /> )} diff --git a/packages/asc-web-common/components/NewFilterInput/sub-components/SortButton.js b/packages/asc-web-common/components/NewFilterInput/sub-components/SortButton.js index 18c1e92d09..9e5a67d93a 100644 --- 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 ( <> - - View - - - + {viewSelectorVisible && ( + <> + + View + + + + + )} {data.map((item) => (