Web: Common: FilterInput: Fixed filter when selected new item filter items, fixed infinite rendering in small mobile devices
This commit is contained in:
parent
433d0d399f
commit
6bfaae5d2f
@ -107,6 +107,7 @@ class FilterInput extends React.Component {
|
||||
filterValues,
|
||||
openFilterItems: [],
|
||||
hideFilterItems: [],
|
||||
needUpdateFilter: false,
|
||||
};
|
||||
|
||||
this.searchWrapper = React.createRef();
|
||||
@ -124,7 +125,6 @@ class FilterInput extends React.Component {
|
||||
}
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const { selectedFilterData } = this.props;
|
||||
const { filterWidth } = this.state;
|
||||
|
||||
if (
|
||||
this.props.needForUpdate &&
|
||||
@ -469,11 +469,19 @@ class FilterInput extends React.Component {
|
||||
this.isResizeUpdate = false;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
needUpdateFilter: false,
|
||||
});
|
||||
|
||||
this.updateFilter();
|
||||
};
|
||||
onClickFilterItem = (event, filterItem) => {
|
||||
const currentFilterItems = cloneObjectsArray(this.state.filterValues);
|
||||
|
||||
this.setState({
|
||||
needUpdateFilter: true,
|
||||
});
|
||||
|
||||
if (filterItem.isSelector) {
|
||||
const indexFilterItem = currentFilterItems.findIndex(
|
||||
(x) => x.group === filterItem.group
|
||||
@ -718,6 +726,7 @@ class FilterInput extends React.Component {
|
||||
onFilterRender={this.onFilterRender}
|
||||
isDisabled={isDisabled}
|
||||
columnCount={filterColumnCount}
|
||||
needUpdateFilter={this.state.needUpdateFilter}
|
||||
/>
|
||||
</div>
|
||||
</SearchInput>
|
||||
|
@ -39,6 +39,7 @@ class FilterItem extends React.Component {
|
||||
isOpen: false,
|
||||
isOpenSelector: !isOpenSelector,
|
||||
selectedOption,
|
||||
needUpdate: false,
|
||||
};
|
||||
}
|
||||
|
||||
@ -67,6 +68,11 @@ class FilterItem extends React.Component {
|
||||
selectedOption,
|
||||
});
|
||||
}
|
||||
|
||||
if (this.state.needUpdate) {
|
||||
this.props.onFilterRender();
|
||||
this.setNeedUpdate(false);
|
||||
}
|
||||
}
|
||||
|
||||
onSelect = (option) => {
|
||||
@ -77,6 +83,7 @@ class FilterItem extends React.Component {
|
||||
group,
|
||||
inSubgroup: !!inSubgroup,
|
||||
});
|
||||
this.setNeedUpdate(true);
|
||||
};
|
||||
onClick = () => {
|
||||
const { isDisabled, id, onClose } = this.props;
|
||||
@ -85,6 +92,12 @@ class FilterItem extends React.Component {
|
||||
|
||||
toggleCombobox = (e, isOpen) => this.setState({ isOpen });
|
||||
|
||||
setNeedUpdate = (needUpdate) => {
|
||||
this.setState({
|
||||
needUpdate,
|
||||
});
|
||||
};
|
||||
|
||||
onCancelSelector = (e) => {
|
||||
if (
|
||||
this.state.isOpenSelector &&
|
||||
@ -265,17 +278,20 @@ class FilterBlock extends React.Component {
|
||||
this.state = {
|
||||
hideFilterItems: hideFilterItems || [],
|
||||
openFilterItems: openFilterItems || [],
|
||||
needUpdate: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
debugger;
|
||||
const { needUpdate } = this.state;
|
||||
const { needUpdateFilter } = this.props;
|
||||
if (
|
||||
!isEqual(prevState.openFilterItems, this.state.openFilterItems) ||
|
||||
!isEqual(prevState.hideFilterItems, this.state.hideFilterItems)
|
||||
(needUpdate || needUpdateFilter) &&
|
||||
(!isEqual(prevState.openFilterItems, this.state.openFilterItems) ||
|
||||
!isEqual(prevState.hideFilterItems, this.state.hideFilterItems))
|
||||
) {
|
||||
console.log("onFilterRender");
|
||||
this.props.onFilterRender();
|
||||
this.setNeedUpdate(false);
|
||||
}
|
||||
}
|
||||
|
||||
@ -301,6 +317,13 @@ class FilterBlock extends React.Component {
|
||||
|
||||
onDeleteFilterItem = (key) => {
|
||||
this.props.onDeleteFilterItem(key);
|
||||
this.setNeedUpdate(true);
|
||||
};
|
||||
|
||||
setNeedUpdate = (needUpdate) => {
|
||||
this.setState({
|
||||
needUpdate,
|
||||
});
|
||||
};
|
||||
getFilterItems = () => {
|
||||
const { openFilterItems, hideFilterItems } = this.state;
|
||||
@ -342,6 +365,7 @@ class FilterBlock extends React.Component {
|
||||
defaultOption={defaultOption}
|
||||
defaultSelectLabel={defaultSelectLabel}
|
||||
selectedItem={selectedItem}
|
||||
onFilterRender={_this.props.onFilterRender}
|
||||
></FilterItem>
|
||||
);
|
||||
});
|
||||
@ -382,6 +406,7 @@ class FilterBlock extends React.Component {
|
||||
defaultOption={defaultOption}
|
||||
defaultSelectLabel={defaultSelectLabel}
|
||||
selectedItem={selectedItem}
|
||||
onFilterRender={_this.props.onFilterRender}
|
||||
></FilterItem>
|
||||
);
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user