Web: Common: fixed filter

This commit is contained in:
Nikita Gopienko 2020-08-25 14:03:49 +03:00
parent 1975943d9b
commit 366821d868
3 changed files with 30 additions and 37 deletions

View File

@ -389,7 +389,7 @@ class FilterInput extends React.Component {
if (fullWidth <= this.minWidth || filterWidth > fullWidth / 2) this.updateFilter(); if (fullWidth <= this.minWidth || filterWidth > fullWidth / 2) this.updateFilter();
} }
} }
onClickFilterItem(event, filterItem, openItem) { onClickFilterItem(event, filterItem) {
const currentFilterItems = cloneObjectsArray(this.state.filterValues); const currentFilterItems = cloneObjectsArray(this.state.filterValues);
@ -415,7 +415,6 @@ class FilterInput extends React.Component {
defaultOptionLabel: filterItem.defaultOptionLabel, defaultOptionLabel: filterItem.defaultOptionLabel,
defaultSelectLabel: filterItem.defaultSelectLabel, defaultSelectLabel: filterItem.defaultSelectLabel,
selectedItem, selectedItem,
openItem
}; };
currentFilterItems.push(selectFilterItem); currentFilterItems.push(selectFilterItem);
this.setState({ this.setState({

View File

@ -309,11 +309,9 @@ class FilterBlock extends React.Component {
} }
if (hideFilterItems.length > 0) { if (hideFilterItems.length > 0) {
let open = false; let open = false;
let showItem = false;
let hideFilterItemsList = hideFilterItems.map(function (item) { let hideFilterItemsList = hideFilterItems.map(function (item) {
const { key, group, groupLabel, label, typeSelector, groupsCaption, defaultOptionLabel, defaultOption, defaultSelectLabel, selectedItem, openItem } = item; const { key, group, groupLabel, label, typeSelector, groupsCaption, defaultOptionLabel, defaultOption, defaultSelectLabel, selectedItem } = item;
open = key.indexOf('_-1') == -1 ? false : true open = key.indexOf('_-1') == -1 ? false : true
showItem = openItem || !!(item.selectedItem ? item.selectedItem.key : item.key);
return <FilterItem return <FilterItem
block={true} block={true}
isDisabled={_this.props.isDisabled} isDisabled={_this.props.isDisabled}
@ -337,7 +335,7 @@ class FilterBlock extends React.Component {
</FilterItem> </FilterItem>
}) })
hideItems.push( hideItems.push(
<HideFilter key="hide-filter" count={hideFilterItems.length} isDisabled={this.props.isDisabled} openItem={showItem} open={open}> <HideFilter key="hide-filter" count={hideFilterItems.length} isDisabled={this.props.isDisabled} open={open}>
{ {
hideFilterItemsList hideFilterItemsList
} }
@ -353,7 +351,7 @@ class FilterBlock extends React.Component {
let result = []; let result = [];
d.forEach(element => { d.forEach(element => {
if (!element.inSubgroup) { if (!element.inSubgroup) {
element.onClick = !element.isSeparator && !element.isHeader && !element.disabled ? ((e, open) => _this.props.onClickFilterItem(e, element, open)) : undefined; element.onClick = !element.isSeparator && !element.isHeader && !element.disabled ? ((e) => _this.props.onClickFilterItem(e, element)) : undefined;
element.key = element.group != element.key ? element.group + "_" + element.key : element.key; element.key = element.group != element.key ? element.group + "_" + element.key : element.key;
if (element.subgroup != undefined) { if (element.subgroup != undefined) {
if (d.findIndex(x => x.group === element.subgroup) == -1) element.disabled = true; if (d.findIndex(x => x.group === element.subgroup) == -1) element.disabled = true;

View File

@ -32,39 +32,36 @@ class HideFilter extends React.Component {
render() { render() {
//console.log("HideFilter render"); //console.log("HideFilter render");
const { isDisabled, count, children, openItem } = this.props; const { isDisabled, count, children } = this.props;
const { popoverOpen } = this.state; const { popoverOpen } = this.state;
return ( return (
<> <div
<div className="styled-hide-filter"
className="styled-hide-filter" onClick={this.onClick.bind(this, !popoverOpen)}
onClick={this.onClick.bind(this, !popoverOpen)} ref={this.ref}
ref={this.ref} >
> <StyledHideFilterButton id="PopoverLegacy" isDisabled={isDisabled}>
<StyledHideFilterButton id="PopoverLegacy" isDisabled={isDisabled}> {count}
{count} <Caret isOpen={popoverOpen}>
<Caret isOpen={popoverOpen && openItem}> <Icons.ExpanderDownIcon
<Icons.ExpanderDownIcon color="#A3A9AE"
color="#A3A9AE" isfill={true}
isfill={true} size="scale"
size="scale" />
/> </Caret>
</Caret> </StyledHideFilterButton>
</StyledHideFilterButton>
<div className="dropdown-style" ref={this.dropDownRef}> <div className="dropdown-style" ref={this.dropDownRef}>
<DropDown <DropDown
className="drop-down" className="drop-down"
clickOutsideAction={this.handleClickOutside} clickOutsideAction={this.handleClickOutside}
manualY="8px" manualY="8px"
open={popoverOpen && openItem} open={popoverOpen}
> >
{children} {children}
</DropDown> </DropDown>
</div>
</div> </div>
{popoverOpen && !openItem && children} </div>
</>
); );
} }
} }
@ -73,6 +70,5 @@ HideFilter.propTypes = {
count: PropTypes.number, count: PropTypes.number,
isDisabled: PropTypes.bool, isDisabled: PropTypes.bool,
open: PropTypes.bool, open: PropTypes.bool,
openItem: PropTypes.bool
} }
export default HideFilter; export default HideFilter;