Web: Common: fixed filter
This commit is contained in:
parent
1975943d9b
commit
366821d868
@ -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({
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user