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

Web: Common: FilterInput: Fixed filter when added/removed filter items

Browse Source
This commit is contained in:
Alexey Kostenko 2020-11-09 12:12:26 +03:00
parent 20f92245f4
commit 433d0d399f
2 changed files with 22 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
web/ASC.Web.Common/src/components/FilterInput/FilterInput.js
View File

@ -123,15 +123,18 @@ class FilterInput extends React.Component {
window.removeEventListener("resize", this.throttledResize);
}
componentDidUpdate(prevProps, prevState) {
const { selectedFilterData } = this.props;
const { filterWidth } = this.state;
if (
this.props.needForUpdate &&
this.props.needForUpdate(prevProps, this.props)
) {
let internalFilterData = convertToInternalData(
this.props.getFilterData(),
cloneObjectsArray(this.props.selectedFilterData.filterValues)
cloneObjectsArray(selectedFilterData.filterValues)
);
//this.updateFilter(internalFilterData);
this.updateFilter(internalFilterData);
}
}
shouldComponentUpdate(nextProps, nextState) {
@ -341,7 +344,6 @@ class FilterInput extends React.Component {
newSearchWidth = newSearchWidth - hiddenItemWidth;
if (newSearchWidth >= this.minWidth) {
console.log(hiddenItemWidth);
numberOfHiddenItems--;
} else {
break;
@ -372,8 +374,6 @@ class FilterInput extends React.Component {
const { hideFilterItems } = this.state;
let numberOfHiddenItems = 0;
debugger;
if (!searchWidth || currentFilterItems.length === 0)
return hideFilterItems.length;
@ -393,14 +393,14 @@ class FilterInput extends React.Component {
const filterWidth = this.filterWrapper.current.getBoundingClientRect()
.width;
const searchWidth = fullWidth - filterWidth;
const filterArr = Array.from(
Array.from(this.filterWrapper.current.children).find(
(x) => x.id === "filter-items-container"
).children
);
const searchWidth = fullWidth - filterWidth;
const numberOfHiddenItems = this.calcHiddenItems(searchWidth, filterArr);
if (searchWidth !== 0 && currentFilterItems.length > 0) {
this.setState({
@ -415,70 +415,8 @@ class FilterInput extends React.Component {
: [],
});
}
/*const filterArr = Array.from(
Array.from(this.filterWrapper.current.children).find(
(x) => x.id === "filter-items-container"
).children
);
const searchFilterButton = Array.from(
this.filterWrapper.current.children
).find((x) => x.id != "filter-items-container");
const filterButton = searchFilterButton
? Array.from(searchFilterButton.children)[0]
: null;
if (fullWidth <= this.minWidth && fullWidth > 0) {
this.setState({
openFilterItems: [],
hideFilterItems: cloneObjectsArray(currentFilterItems),
});
} else if (filterWidth > fullWidth / 2) {
let newOpenFilterItems = cloneObjectsArray(currentFilterItems);
let newHideFilterItems = [];
let elementsWidth = 0;
Array.from(filterArr).forEach((element) => {
elementsWidth = elementsWidth + element.getBoundingClientRect().width;
});
if (
filterButton !== null &&
elementsWidth >=
fullWidth / 3 - filterButton.getBoundingClientRect().width
) {
for (let i = 0; i < filterArr.length; i++) {
if (
elementsWidth >
fullWidth / 3 - filterButton.getBoundingClientRect().width
) {
elementsWidth =
elementsWidth - filterArr[i].getBoundingClientRect().width;
const hiddenItem = currentFilterItems.find(
(x) => x.key === filterArr[i].getAttribute("id")
);
if (hiddenItem) newHideFilterItems.push(hiddenItem);
newOpenFilterItems.splice(
newOpenFilterItems.findIndex(
(x) => x.key === filterArr[i].getAttribute("id")
),
1
);
}
}
}
this.setState({
openFilterItems: newOpenFilterItems,
hideFilterItems: newHideFilterItems,
});
} else {
this.setState({
openFilterItems: currentFilterItems.slice(),
hideFilterItems: [],
});
}*/
};
onDeleteFilterItem = (key) => {
const currentFilterItems = this.state.filterValues.slice();
const indexFilterItem = currentFilterItems.findIndex((x) => x.key === key);
@ -531,15 +469,7 @@ class FilterInput extends React.Component {
this.isResizeUpdate = false;
}
if (this.searchWrapper.current && this.filterWrapper.current) {
const fullWidth = this.searchWrapper.current.getBoundingClientRect()
.width;
const filterWidth = this.filterWrapper.current.getBoundingClientRect()
.width;
const searchWidth = fullWidth - filterWidth;
if (searchWidth !== 0 && searchWidth <= this.minWidth)
this.updateFilter();
}
};
onClickFilterItem = (event, filterItem) => {
const currentFilterItems = cloneObjectsArray(this.state.filterValues);
@ -785,7 +715,7 @@ class FilterInput extends React.Component {
onClickFilterItem={this.onClickFilterItem}
onDeleteFilterItem={this.onDeleteFilterItem}
isResizeUpdate={this.isResizeUpdate}
onRender={this.onFilterRender}
onFilterRender={this.onFilterRender}
isDisabled={isDisabled}
columnCount={filterColumnCount}
/>

18
web/ASC.Web.Common/src/components/FilterInput/sub-components/FilterBlock.js
View File

@ -268,6 +268,17 @@ class FilterBlock extends React.Component {
};
}
componentDidUpdate(prevProps, prevState) {
debugger;
if (
!isEqual(prevState.openFilterItems, this.state.openFilterItems) ||
!isEqual(prevState.hideFilterItems, this.state.hideFilterItems)
) {
console.log("onFilterRender");
this.props.onFilterRender();
}
}
shouldComponentUpdate(nextProps, nextState) {
const { hideFilterItems, openFilterItems } = nextProps;
@ -284,9 +295,7 @@ class FilterBlock extends React.Component {
}
return true;
}
if (this.props.isResizeUpdate) {
return true;
}
return !isEqual(this.state, nextState);
}
@ -414,9 +423,6 @@ class FilterBlock extends React.Component {
return result;
};
onRender = () => {
this.props.onRender();
};
render() {
const _this = this;
const filterItems = this.getFilterItems();