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

Web: Common: FilterInput: Refactoring

Browse Source
This commit is contained in:
Alexey Kostenko 2020-11-13 10:26:14 +03:00
parent 913c45a00b
commit 969f7e5c4f
2 changed files with 60 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -81,6 +81,11 @@ const convertToInternalData = function (fullDataArray, inputDataArray) {
return filterItems;
};
const minWidth = 170;
const filterItemPadding = 60;
const maxFilterItemWidth = 260;
const itemsContainerWidth = 40;
class FilterInput extends React.Component {
constructor(props) {
super(props);
@ -89,8 +94,6 @@ class FilterInput extends React.Component {
const { sortDirection, sortId, inputValue } = selectedFilterData;
const sortData = getSortData();
this.minWidth = 170;
const filterValues = selectedFilterData ? this.getDefaultFilterData() : [];
this.state = {
@ -105,7 +108,7 @@ class FilterInput extends React.Component {
filterValues,
openFilterItems: [],
hideFilterItems: [],
hiddenFilterItems: [],
needUpdateFilter: false,
};
@ -178,15 +181,12 @@ class FilterInput extends React.Component {
if (
!isEqual(selectedFilterData, nextProps.selectedFilterData) ||
this.props.viewAs !== nextProps.viewAs ||
this.props.widthProp !== nextProps.widthProp
this.props.widthProp !== nextProps.widthProp ||
sectionWidth !== nextProps.sectionWidth
) {
return true;
}
if (sectionWidth !== nextProps.sectionWidth) {
return true;
}
if (
id != nextProps.id ||
isDisabled != nextProps.isDisabled ||
@ -344,7 +344,7 @@ class FilterInput extends React.Component {
searchText: "",
filterValues: [],
openFilterItems: [],
hideFilterItems: [],
hiddenFilterItems: [],
});
this.onFilter(
[],
@ -366,37 +366,30 @@ class FilterInput extends React.Component {
calcHiddenItemWidth = (item) => {
if (!item) return;
let label = "";
if (item.selectedItem) {
label = item.selectedItem.label
? item.selectedItem.label
: item.defaultSelectLabel;
} else {
label = item.label;
}
let label = this.getItemLabel(item);
const itemWidth =
this.getTextWidth(
item.groupLabel + " " + label,
"bolder 13px sans-serif"
) + 60; // paddings + margin
) + filterItemPadding;
return itemWidth;
};
AddItems = (searchWidth) => {
const { hideFilterItems } = this.state;
if (hideFilterItems.length === 0) return 0;
const { hiddenFilterItems } = this.state;
if (hiddenFilterItems.length === 0) return 0;
let newSearchWidth = searchWidth;
let numberOfHiddenItems = hideFilterItems.length;
let numberOfHiddenItems = hiddenFilterItems.length;
for (let i = 0; i < hideFilterItems.length; i++) {
let hiddenItemWidth = this.calcHiddenItemWidth(
hideFilterItems[i] // last hidden element
);
for (let i = 0; i < hiddenFilterItems.length; i++) {
let hiddenItemWidth = this.calcHiddenItemWidth(hiddenFilterItems[i]);
if (hiddenItemWidth > 260) hiddenItemWidth = 260;
if (hiddenItemWidth > maxFilterItemWidth)
hiddenItemWidth = maxFilterItemWidth;
newSearchWidth = newSearchWidth - hiddenItemWidth;
if (newSearchWidth >= this.minWidth) {
if (newSearchWidth >= minWidth) {
numberOfHiddenItems--;
} else {
break;
@ -407,9 +400,9 @@ class FilterInput extends React.Component {
};
HideItems = (searchWidth, currentFilterItems) => {
const { hideFilterItems } = this.state;
const { hiddenFilterItems } = this.state;
let newSearchWidth = searchWidth;
let numberOfHiddenItems = hideFilterItems.length;
let numberOfHiddenItems = hiddenFilterItems.length;
for (let i = currentFilterItems.length - 1; i >= 0; i--) {
if (currentFilterItems[i].id === "styled-hide-filter") continue;
@ -417,22 +410,21 @@ class FilterInput extends React.Component {
.width;
newSearchWidth = newSearchWidth + filterItemWidth;
numberOfHiddenItems++;
if (numberOfHiddenItems === 1) newSearchWidth - 40; // subtract the width of hidden block
if (numberOfHiddenItems === 1) newSearchWidth - itemsContainerWidth; // subtract the width of hidden block
if (newSearchWidth > this.minWidth) break;
if (newSearchWidth > minWidth) break;
}
return numberOfHiddenItems;
};
calcHiddenItems = (searchWidth, currentFilterItems) => {
const { hideFilterItems } = this.state;
let numberOfHiddenItems = 0;
const { hiddenFilterItems } = this.state;
if (!searchWidth || currentFilterItems.length === 0)
return hideFilterItems.length;
numberOfHiddenItems =
searchWidth < this.minWidth
return hiddenFilterItems.length;
const numberOfHiddenItems =
searchWidth < minWidth
? this.HideItems(searchWidth, currentFilterItems)
: this.AddItems(searchWidth);
@ -468,13 +460,26 @@ class FilterInput extends React.Component {
currentFilterItems.length - numberOfHiddenItems
)
: currentFilterItems.slice(),
hideFilterItems: numberOfHiddenItems
hiddenFilterItems: numberOfHiddenItems
? currentFilterItems.slice(-numberOfHiddenItems)
: [],
});
}
};
getItemLabel = (item) => {
let label = "";
if (item.selectedItem) {
label = item.selectedItem.label
? item.selectedItem.label
: item.defaultSelectLabel;
} else {
label = item.label;
}
return label;
};
onDeleteFilterItem = (key) => {
const currentFilterItems = this.state.filterValues.slice();
const indexFilterItem = currentFilterItems.findIndex((x) => x.key === key);
@ -484,7 +489,7 @@ class FilterInput extends React.Component {
this.setState({
filterValues: currentFilterItems,
openFilterItems: currentFilterItems,
hideFilterItems: [],
hiddenFilterItems: [],
});
let filterValues = cloneObjectsArray(currentFilterItems);
filterValues = filterValues.map(function (item) {
@ -576,7 +581,7 @@ class FilterInput extends React.Component {
this.setState({
filterValues: currentFilterItems,
openFilterItems: currentFilterItems,
hideFilterItems: [],
hiddenFilterItems: [],
});
if (selectFilterItem.selectedItem.key) {
@ -622,7 +627,7 @@ class FilterInput extends React.Component {
this.setState({
filterValues: currentFilterItems,
openFilterItems: currentFilterItems,
hideFilterItems: [],
hiddenFilterItems: [],
});
} else if (subgroupItems.length === 1) {
const selectFilterItem = {
@ -653,7 +658,7 @@ class FilterInput extends React.Component {
this.setState({
filterValues: currentFilterItems,
openFilterItems: currentFilterItems,
hideFilterItems: [],
hiddenFilterItems: [],
});
}
} else {
@ -680,7 +685,7 @@ class FilterInput extends React.Component {
this.setState({
filterValues: currentFilterItems,
openFilterItems: currentFilterItems,
hideFilterItems: [],
hiddenFilterItems: [],
});
const clone = cloneObjectsArray(
@ -724,14 +729,13 @@ class FilterInput extends React.Component {
searchText,
filterValues,
openFilterItems,
hideFilterItems,
hiddenFilterItems,
sortId,
sortDirection,
} = this.state;
const smallSectionWidth = sectionWidth ? sectionWidth < 900 : false;
// console.log("filter input render, openFilterItems", openFilterItems, 'hideFilterItems', hideFilterItems);
let iconSize = 30;
switch (size) {
case "base":
@ -775,7 +779,7 @@ class FilterInput extends React.Component {
<FilterBlock
contextMenuHeader={contextMenuHeader}
openFilterItems={openFilterItems}
hideFilterItems={hideFilterItems}
hiddenFilterItems={hiddenFilterItems}
iconSize={iconSize}
getFilterData={getFilterData}
onClickFilterItem={this.onClickFilterItem}

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

@ -272,10 +272,10 @@ class FilterBlock extends React.Component {
constructor(props) {
super(props);
const { hideFilterItems, openFilterItems } = props;
const { hiddenFilterItems, openFilterItems } = props;
this.state = {
hideFilterItems: hideFilterItems || [],
hiddenFilterItems: hiddenFilterItems || [],
openFilterItems: openFilterItems || [],
needUpdate: false,
};
@ -291,7 +291,7 @@ class FilterBlock extends React.Component {
if (
(needUpdate || needUpdateFilter) &&
(!isEqual(prevState.openFilterItems, this.state.openFilterItems) ||
!isEqual(prevState.hideFilterItems, this.state.hideFilterItems))
!isEqual(prevState.hiddenFilterItems, this.state.hiddenFilterItems))
) {
this.props.onFilterRender();
this.setNeedUpdate(false);
@ -299,15 +299,15 @@ class FilterBlock extends React.Component {
}
shouldComponentUpdate(nextProps, nextState) {
const { hideFilterItems, openFilterItems } = nextProps;
const { hiddenFilterItems, openFilterItems } = nextProps;
if (!isEqual(this.props, nextProps)) {
if (
!isEqual(this.props.hideFilterItems, hideFilterItems) ||
!isEqual(this.props.hiddenFilterItems, hiddenFilterItems) ||
!isEqual(this.props.openFilterItems, openFilterItems)
) {
this.setState({
hideFilterItems,
hiddenFilterItems,
openFilterItems,
});
return false;
@ -329,7 +329,7 @@ class FilterBlock extends React.Component {
});
};
getFilterItems = () => {
const { openFilterItems, hideFilterItems } = this.state;
const { openFilterItems, hiddenFilterItems } = this.state;
const _this = this;
let result = [];
let openItems = [];
@ -373,9 +373,9 @@ class FilterBlock extends React.Component {
);
});
}
if (hideFilterItems.length > 0) {
if (hiddenFilterItems.length > 0) {
let open = false;
let hideFilterItemsList = hideFilterItems.map(function (item) {
let hideFilterItemsList = hiddenFilterItems.map(function (item) {
const {
key,
group,
@ -416,7 +416,7 @@ class FilterBlock extends React.Component {
hideItems.push(
<HideFilter
key="hide-filter"
count={hideFilterItems.length}
count={hiddenFilterItems.length}
isDisabled={this.props.isDisabled}
open={open}
>
@ -481,7 +481,7 @@ class FilterBlock extends React.Component {
}
FilterBlock.propTypes = {
getFilterData: PropTypes.func,
hideFilterItems: PropTypes.array,
hiddenFilterItems: PropTypes.array,
iconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
isDisabled: PropTypes.bool,
onDeleteFilterItem: PropTypes.func,