2019-07-15 12:53:12 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import InputBlock from '../input-block';
|
2019-08-15 13:27:13 +00:00
|
|
|
import ComboBox from '../combobox';
|
2019-07-18 09:35:03 +00:00
|
|
|
|
|
|
|
import FilterButton from './filter-button';
|
|
|
|
import HideFilter from './hide-filter';
|
|
|
|
import CloseButton from './close-button';
|
2019-07-15 12:53:12 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
import isEqual from 'lodash/isEqual';
|
2019-07-17 12:36:13 +00:00
|
|
|
const StyledSearchInput = styled.div`
|
|
|
|
min-width: 200px;
|
2019-07-19 09:48:19 +00:00
|
|
|
font-family: Open Sans;
|
|
|
|
font-style: normal;
|
2019-07-17 12:36:13 +00:00
|
|
|
`;
|
2019-07-19 09:48:19 +00:00
|
|
|
const StyledFilterBlock = styled.div`
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2019-08-08 09:45:00 +00:00
|
|
|
`;
|
2019-07-15 12:53:12 +00:00
|
|
|
const StyledFilterItem = styled.div`
|
2019-07-17 12:36:13 +00:00
|
|
|
display: ${props => props.block ? 'block' : 'inline-block'};
|
|
|
|
margin-bottom: ${props => props.block ? '3px' : '0'};
|
2019-08-23 07:16:18 +00:00
|
|
|
position: relative;
|
2019-07-15 14:24:17 +00:00
|
|
|
height: 100%;
|
2019-07-19 09:48:19 +00:00
|
|
|
padding: 3px 44px 3px 7px;
|
2019-07-15 12:53:12 +00:00
|
|
|
margin-right: 2px;
|
2019-07-17 12:36:13 +00:00
|
|
|
border: 1px solid #ECEEF1;
|
2019-07-15 12:53:12 +00:00
|
|
|
border-radius: 3px;
|
2019-07-17 12:36:13 +00:00
|
|
|
background-color: #F8F9F9;
|
2019-07-19 09:48:19 +00:00
|
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
font-size: 13px;
|
2019-08-20 11:52:49 +00:00
|
|
|
line-height: 15px;
|
2019-07-19 09:48:19 +00:00
|
|
|
|
2019-07-17 12:36:13 +00:00
|
|
|
&:last-child{
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
`;
|
2019-07-19 09:48:19 +00:00
|
|
|
const StyledCloseButtonBlock = styled.div`
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
position: absolute;
|
|
|
|
height: 100%;
|
|
|
|
width: 25px;
|
|
|
|
border-left: 1px solid #ECEEF1;
|
2019-07-17 12:36:13 +00:00
|
|
|
right: 0;
|
2019-07-19 09:48:19 +00:00
|
|
|
top: 0;
|
2019-07-15 12:53:12 +00:00
|
|
|
`;
|
2019-08-15 13:27:13 +00:00
|
|
|
const StyledComboBox = styled(ComboBox)`
|
|
|
|
display: inline-block;
|
|
|
|
background: transparent;
|
|
|
|
cursor: pointer;
|
2019-08-20 11:30:29 +00:00
|
|
|
vertical-align: middle;
|
2019-08-15 13:27:13 +00:00
|
|
|
margin-left: -10px;
|
|
|
|
`;
|
2019-08-20 12:53:16 +00:00
|
|
|
const StyledFilterName = styled.span`
|
|
|
|
line-height: 18px;
|
|
|
|
margin-left: 5px;
|
|
|
|
`;
|
2019-08-15 13:27:13 +00:00
|
|
|
|
|
|
|
class FilterItem extends React.Component {
|
|
|
|
constructor(props) {
|
2019-08-23 07:16:18 +00:00
|
|
|
super(props);
|
2019-08-15 13:27:13 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
this.state = {
|
|
|
|
id: this.props.id
|
|
|
|
};
|
2019-08-15 13:27:13 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
this.onSelect = this.onSelect.bind(this);
|
2019-08-15 13:27:13 +00:00
|
|
|
}
|
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
onSelect(option) {
|
2019-08-15 13:27:13 +00:00
|
|
|
this.props.onSelectFilterItem(null, {
|
|
|
|
key: option.group + "_" + option.key,
|
|
|
|
label: option.label,
|
2019-08-19 13:35:39 +00:00
|
|
|
group: option.group,
|
|
|
|
inSubgroup: !!option.inSubgroup
|
2019-08-15 13:27:13 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
render() {
|
|
|
|
return (
|
2019-08-15 13:27:13 +00:00
|
|
|
<StyledFilterItem key={this.state.id} id={this.state.id} block={this.props.block} >
|
2019-08-23 07:16:18 +00:00
|
|
|
{this.props.groupLabel}:
|
|
|
|
{this.props.groupItems.length > 1 ?
|
|
|
|
<StyledComboBox
|
|
|
|
options={this.props.groupItems}
|
|
|
|
isDisabled={this.props.isDisabled}
|
|
|
|
onSelect={this.onSelect}
|
|
|
|
selectedOption={{
|
|
|
|
key: this.state.id,
|
|
|
|
label: this.props.label
|
|
|
|
}}
|
|
|
|
size='content'
|
|
|
|
scaled={false}
|
|
|
|
noBorder={true}
|
|
|
|
opened={this.props.opened}
|
|
|
|
></StyledComboBox>
|
|
|
|
: <StyledFilterName>{this.props.label}</StyledFilterName>
|
|
|
|
}
|
2019-08-20 12:53:16 +00:00
|
|
|
|
2019-07-19 09:48:19 +00:00
|
|
|
<StyledCloseButtonBlock>
|
2019-07-18 09:35:03 +00:00
|
|
|
<CloseButton
|
2019-08-15 13:27:13 +00:00
|
|
|
isDisabled={this.props.isDisabled}
|
|
|
|
onClick={!this.props.isDisabled ? ((e) => this.props.onClose(e, this.props.id)) : undefined}
|
2019-07-15 12:53:12 +00:00
|
|
|
/>
|
2019-07-19 09:48:19 +00:00
|
|
|
</StyledCloseButtonBlock>
|
2019-08-15 13:27:13 +00:00
|
|
|
</StyledFilterItem>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
const cloneObjectsArray = function (props) {
|
|
|
|
return _.map(props, _.clone);;
|
|
|
|
}
|
2019-07-15 12:53:12 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
const convertToInternalData = function (fullDataArray, inputDataArray) {
|
|
|
|
let filterItems = [];
|
|
|
|
for (let i = 0; i < inputDataArray.length; i++) {
|
|
|
|
let filterValue = fullDataArray.find(x => ((x.key === inputDataArray[i].key.replace(inputDataArray[i].group + "_", '')) && x.group === inputDataArray[i].group && !x.inSubgroup));
|
|
|
|
if (filterValue) {
|
|
|
|
inputDataArray[i].key = inputDataArray[i].group + "_" + inputDataArray[i].key;
|
|
|
|
inputDataArray[i].label = filterValue.label;
|
|
|
|
inputDataArray[i].groupLabel = !fullDataArray.inSubgroup ? fullDataArray.find(x => (x.group === inputDataArray[i].group)).label : inputDataArray[i].groupLabel;
|
|
|
|
filterItems.push(inputDataArray[i]);
|
|
|
|
} else {
|
|
|
|
filterValue = fullDataArray.find(x => ((x.key === inputDataArray[i].key.replace(inputDataArray[i].group + "_", '')) && x.group === inputDataArray[i].group && x.inSubgroup));
|
|
|
|
if (filterValue) {
|
|
|
|
inputDataArray[i].key = inputDataArray[i].group + "_" + inputDataArray[i].key;
|
|
|
|
inputDataArray[i].label = filterValue.label;
|
|
|
|
inputDataArray[i].groupLabel = fullDataArray.find(x => (x.subgroup === inputDataArray[i].group)).label;
|
|
|
|
filterItems.push(inputDataArray[i]);
|
|
|
|
} else {
|
|
|
|
filterValue = fullDataArray.find(x => ((x.subgroup === inputDataArray[i].group)));
|
|
|
|
if (filterValue) {
|
|
|
|
let subgroupItems = fullDataArray.filter(function (t) {
|
|
|
|
return (t.group == filterValue.subgroup);
|
|
|
|
});
|
|
|
|
if (subgroupItems.length > 1) {
|
|
|
|
inputDataArray[i].key = inputDataArray[i].group + "_-1";
|
|
|
|
inputDataArray[i].label = filterValue.defaultSelectLabel;
|
|
|
|
inputDataArray[i].groupLabel = fullDataArray.find(x => (x.subgroup === inputDataArray[i].group)).label;
|
|
|
|
filterItems.push(inputDataArray[i]);
|
|
|
|
} else if (subgroupItems.length == 1) {
|
|
|
|
|
|
|
|
let selectFilterItem = {
|
|
|
|
key: subgroupItems[0].group + "_" + subgroupItems[0].key,
|
|
|
|
group: subgroupItems[0].group,
|
|
|
|
label: subgroupItems[0].label,
|
|
|
|
groupLabel: fullDataArray.find(x => x.subgroup === subgroupItems[0].group).label,
|
|
|
|
inSubgroup: true
|
|
|
|
};
|
|
|
|
filterItems.push(selectFilterItem);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-08-08 09:45:00 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
}
|
|
|
|
return filterItems;
|
2019-08-08 09:45:00 +00:00
|
|
|
}
|
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
class SearchInput extends React.Component {
|
2019-07-15 12:53:12 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
2019-08-13 08:07:35 +00:00
|
|
|
this.input = React.createRef();
|
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
function getDefaultFilterData() {
|
2019-08-08 09:45:00 +00:00
|
|
|
let filterData = props.getFilterData();
|
|
|
|
let filterItems = [];
|
2019-08-23 07:16:18 +00:00
|
|
|
let selectedFilterData = cloneObjectsArray(props.selectedFilterData);
|
|
|
|
selectedFilterData.forEach(defaultFilterValue => {
|
|
|
|
let filterValue = filterData.find(x => ((x.key === defaultFilterValue.key.replace(defaultFilterValue.group + "_", '')) && x.group === defaultFilterValue.group));
|
|
|
|
let groupLabel = '';
|
|
|
|
|
|
|
|
let groupFilterItem = filterData.find(x => (x.key === defaultFilterValue.group));
|
|
|
|
if (groupFilterItem != undefined) {
|
|
|
|
groupLabel = groupFilterItem.label;
|
|
|
|
} else {
|
|
|
|
let subgroupFilterItem = filterData.find(x => (x.subgroup === defaultFilterValue.group))
|
|
|
|
if (subgroupFilterItem != undefined) {
|
|
|
|
groupLabel = subgroupFilterItem.label;
|
2019-08-19 13:35:39 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
}
|
2019-08-19 13:35:39 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
if (filterValue != undefined) {
|
|
|
|
defaultFilterValue.key = defaultFilterValue.group + "_" + defaultFilterValue.key;
|
|
|
|
defaultFilterValue.label = filterValue.label;
|
|
|
|
defaultFilterValue.groupLabel = groupLabel;
|
|
|
|
filterItems.push(defaultFilterValue);
|
|
|
|
}
|
2019-08-08 09:45:00 +00:00
|
|
|
});
|
|
|
|
return filterItems;
|
|
|
|
}
|
|
|
|
|
2019-07-17 12:36:13 +00:00
|
|
|
this.minWidth = 190;
|
2019-08-08 09:45:00 +00:00
|
|
|
this.isResizeUpdate = false;
|
2019-07-15 12:53:12 +00:00
|
|
|
this.state = {
|
2019-08-22 08:58:18 +00:00
|
|
|
inputValue: props.value,
|
2019-08-23 07:16:18 +00:00
|
|
|
filterItems: props.selectedFilterData && props.isNeedFilter ? getDefaultFilterData() : [],
|
2019-07-17 12:36:13 +00:00
|
|
|
openFilterItems: [],
|
|
|
|
hideFilterItems: []
|
2019-07-15 12:53:12 +00:00
|
|
|
};
|
2019-07-17 12:36:13 +00:00
|
|
|
this.searchWrapper = React.createRef();
|
|
|
|
this.filterWrapper = React.createRef();
|
|
|
|
|
2019-07-15 12:53:12 +00:00
|
|
|
this.onClickDropDownItem = this.onClickDropDownItem.bind(this);
|
|
|
|
this.getData = this.getData.bind(this);
|
2019-08-13 08:07:35 +00:00
|
|
|
this.clearFilter = this.clearFilter.bind(this);
|
2019-07-15 12:53:12 +00:00
|
|
|
this.onDeleteFilterItem = this.onDeleteFilterItem.bind(this);
|
2019-07-15 14:24:17 +00:00
|
|
|
this.getFilterItems = this.getFilterItems.bind(this);
|
2019-07-17 12:36:13 +00:00
|
|
|
this.updateFilter = this.updateFilter.bind(this);
|
2019-08-13 08:07:35 +00:00
|
|
|
this.onInputChange = this.onInputChange.bind(this);
|
|
|
|
|
2019-07-17 12:36:13 +00:00
|
|
|
this.resize = this.resize.bind(this);
|
2019-07-15 12:53:12 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
this.throttledResize = _.throttle(this.resize, 300);
|
|
|
|
}
|
|
|
|
|
|
|
|
onClickDropDownItem(event, filterItem) {
|
|
|
|
let currentFilterItems = cloneObjectsArray(this.state.filterItems);
|
2019-08-08 09:45:00 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
if (!!filterItem.subgroup) {
|
|
|
|
let indexFilterItem = currentFilterItems.findIndex(x => x.group === filterItem.subgroup);
|
|
|
|
if (indexFilterItem != -1) {
|
|
|
|
currentFilterItems.splice(indexFilterItem, 1);
|
2019-08-19 13:35:39 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
let subgroupItems = this.props.getFilterData().filter(function (t) {
|
2019-08-20 12:53:16 +00:00
|
|
|
return (t.group == filterItem.subgroup);
|
|
|
|
});
|
2019-08-23 07:16:18 +00:00
|
|
|
if (subgroupItems.length > 1) {
|
2019-08-20 12:53:16 +00:00
|
|
|
let selectFilterItem = {
|
2019-08-23 07:16:18 +00:00
|
|
|
key: filterItem.subgroup + "_-1",
|
2019-08-20 12:53:16 +00:00
|
|
|
group: filterItem.subgroup,
|
2019-08-23 07:16:18 +00:00
|
|
|
label: filterItem.defaultSelectLabel,
|
2019-08-20 12:53:16 +00:00
|
|
|
groupLabel: filterItem.label,
|
|
|
|
inSubgroup: true
|
|
|
|
};
|
2019-08-23 07:16:18 +00:00
|
|
|
if (indexFilterItem != -1)
|
|
|
|
currentFilterItems.splice(indexFilterItem, 0, selectFilterItem);
|
2019-08-21 09:07:45 +00:00
|
|
|
else
|
2019-08-23 07:16:18 +00:00
|
|
|
currentFilterItems.push(selectFilterItem);
|
|
|
|
this.setState({ filterItems: currentFilterItems });
|
|
|
|
this.updateFilter(currentFilterItems);
|
|
|
|
} else if (subgroupItems.length == 1) {
|
|
|
|
|
2019-08-20 12:53:16 +00:00
|
|
|
let selectFilterItem = {
|
2019-08-23 07:16:18 +00:00
|
|
|
key: subgroupItems[0].group + "_" + subgroupItems[0].key,
|
2019-08-20 12:53:16 +00:00
|
|
|
group: subgroupItems[0].group,
|
2019-08-23 07:16:18 +00:00
|
|
|
label: subgroupItems[0].label,
|
2019-08-20 12:53:16 +00:00
|
|
|
groupLabel: this.props.getFilterData().find(x => x.subgroup === subgroupItems[0].group).label,
|
|
|
|
inSubgroup: true
|
|
|
|
};
|
2019-08-23 07:16:18 +00:00
|
|
|
if (indexFilterItem != -1)
|
|
|
|
currentFilterItems.splice(indexFilterItem, 0, selectFilterItem);
|
2019-08-21 09:07:45 +00:00
|
|
|
else
|
2019-08-23 07:16:18 +00:00
|
|
|
currentFilterItems.push(selectFilterItem);
|
|
|
|
let clone = cloneObjectsArray(currentFilterItems.filter(function (item) {
|
2019-08-20 12:53:16 +00:00
|
|
|
return item.key != '-1';
|
|
|
|
}));
|
2019-08-23 07:16:18 +00:00
|
|
|
clone.map(function (item) {
|
|
|
|
item.key = item.key.replace(item.group + "_", '');
|
2019-08-20 12:53:16 +00:00
|
|
|
return item;
|
|
|
|
})
|
2019-08-23 07:16:18 +00:00
|
|
|
if (typeof this.props.onChangeFilter === "function")
|
2019-08-20 12:53:16 +00:00
|
|
|
this.props.onChangeFilter({
|
|
|
|
inputValue: this.state.inputValue,
|
2019-08-23 07:16:18 +00:00
|
|
|
filterValues: this.props.isNeedFilter ?
|
|
|
|
clone.filter(function (item) {
|
|
|
|
return item.key != '-1';
|
|
|
|
}) :
|
|
|
|
null
|
2019-08-20 12:53:16 +00:00
|
|
|
});
|
2019-08-23 07:16:18 +00:00
|
|
|
this.setState({ filterItems: currentFilterItems });
|
|
|
|
this.updateFilter(currentFilterItems);
|
2019-08-20 12:53:16 +00:00
|
|
|
}
|
2019-08-08 09:45:00 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
|
|
|
|
} else {
|
2019-08-19 13:35:39 +00:00
|
|
|
let filterItems = this.getData();
|
2019-07-15 12:53:12 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
let indexFilterItem = currentFilterItems.findIndex(x => x.group === filterItem.group);
|
|
|
|
if (indexFilterItem != -1) {
|
|
|
|
currentFilterItems.splice(indexFilterItem, 1);
|
2019-08-19 13:35:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
let selectFilterItem = {
|
2019-08-23 07:16:18 +00:00
|
|
|
key: filterItem.key,
|
2019-08-19 13:35:39 +00:00
|
|
|
group: filterItem.group,
|
2019-08-23 07:16:18 +00:00
|
|
|
label: filterItem.label,
|
2019-08-19 13:35:39 +00:00
|
|
|
groupLabel: filterItem.inSubgroup ? filterItems.find(x => x.subgroup === filterItem.group).label : filterItems.find(x => x.key === filterItem.group).label
|
|
|
|
};
|
2019-08-23 07:16:18 +00:00
|
|
|
if (indexFilterItem != -1)
|
|
|
|
currentFilterItems.splice(indexFilterItem, 0, selectFilterItem);
|
|
|
|
else
|
|
|
|
currentFilterItems.push(selectFilterItem);
|
|
|
|
this.setState({ filterItems: currentFilterItems });
|
|
|
|
this.updateFilter(currentFilterItems);
|
|
|
|
|
|
|
|
let clone = cloneObjectsArray(currentFilterItems.filter(function (item) {
|
2019-08-19 13:35:39 +00:00
|
|
|
return item.key != '-1';
|
|
|
|
}));
|
2019-08-23 07:16:18 +00:00
|
|
|
clone.map(function (item) {
|
|
|
|
item.key = item.key.replace(item.group + "_", '');
|
2019-08-19 13:35:39 +00:00
|
|
|
return item;
|
|
|
|
})
|
2019-08-23 07:16:18 +00:00
|
|
|
if (typeof this.props.onChangeFilter === "function")
|
2019-08-19 13:35:39 +00:00
|
|
|
this.props.onChangeFilter({
|
|
|
|
inputValue: this.state.inputValue,
|
2019-08-23 07:16:18 +00:00
|
|
|
filterValues: this.props.isNeedFilter ?
|
|
|
|
clone.filter(function (item) {
|
|
|
|
return item.key != '-1';
|
|
|
|
}) :
|
|
|
|
null
|
2019-08-19 13:35:39 +00:00
|
|
|
});
|
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
|
2019-07-15 12:53:12 +00:00
|
|
|
}
|
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
getData() {
|
2019-07-15 12:53:12 +00:00
|
|
|
let _this = this;
|
2019-07-17 12:36:13 +00:00
|
|
|
let d = this.props.getFilterData();
|
2019-08-19 13:35:39 +00:00
|
|
|
let result = [];
|
|
|
|
d.forEach(element => {
|
2019-08-23 07:16:18 +00:00
|
|
|
if (!element.inSubgroup) {
|
2019-08-19 13:35:39 +00:00
|
|
|
element.onClick = !element.isSeparator && !element.isHeader && !element.disabled ? ((e) => _this.onClickDropDownItem(e, element)) : undefined;
|
2019-08-23 07:16:18 +00:00
|
|
|
element.key = element.group != element.key ? element.group + "_" + element.key : element.key;
|
|
|
|
if (element.subgroup != undefined) {
|
|
|
|
if (d.findIndex(x => x.group === element.subgroup) == -1) element.disabled = true;
|
2019-08-20 13:16:03 +00:00
|
|
|
}
|
2019-08-19 13:35:39 +00:00
|
|
|
result.push(element);
|
2019-08-23 07:16:18 +00:00
|
|
|
}
|
2019-07-15 12:53:12 +00:00
|
|
|
});
|
2019-08-19 13:35:39 +00:00
|
|
|
return result;
|
2019-07-15 12:53:12 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
|
|
|
|
clearFilter() {
|
|
|
|
if (this.input.current) this.input.current.clearInput();
|
2019-08-13 08:07:35 +00:00
|
|
|
this.setState({
|
|
|
|
inputValue: '',
|
|
|
|
filterItems: [],
|
|
|
|
openFilterItems: [],
|
|
|
|
hideFilterItems: []
|
|
|
|
});
|
|
|
|
this.props.onChangeFilter({
|
|
|
|
inputValue: '',
|
2019-08-23 07:16:18 +00:00
|
|
|
filterValues: []
|
2019-08-13 08:07:35 +00:00
|
|
|
});
|
2019-07-15 12:53:12 +00:00
|
|
|
}
|
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
onDeleteFilterItem(e, key) {
|
2019-07-15 12:53:12 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
let currentFilterItems = this.state.filterItems.slice();
|
|
|
|
let indexFilterItem = currentFilterItems.findIndex(x => x.key === key);
|
|
|
|
if (indexFilterItem != -1) {
|
|
|
|
currentFilterItems.splice(indexFilterItem, 1);
|
2019-07-15 12:53:12 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
this.setState({ filterItems: currentFilterItems });
|
|
|
|
this.updateFilter(currentFilterItems);
|
|
|
|
let filterValues = cloneObjectsArray(currentFilterItems);
|
|
|
|
filterValues = filterValues.map(function (item) {
|
|
|
|
item.key = item.key.replace(item.group + "_", '');
|
2019-08-19 13:35:39 +00:00
|
|
|
return item;
|
|
|
|
})
|
2019-08-23 07:16:18 +00:00
|
|
|
if (typeof this.props.onChangeFilter === "function")
|
2019-07-15 12:53:12 +00:00
|
|
|
this.props.onChangeFilter({
|
2019-08-13 08:07:35 +00:00
|
|
|
inputValue: this.state.inputValue,
|
2019-08-23 07:16:18 +00:00
|
|
|
filterValues: this.props.isNeedFilter ?
|
|
|
|
filterValues.filter(function (item) {
|
|
|
|
return item.key != '-1';
|
|
|
|
}) : null
|
2019-07-15 12:53:12 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
getFilterItems() {
|
2019-07-15 14:24:17 +00:00
|
|
|
let _this = this;
|
2019-07-17 12:36:13 +00:00
|
|
|
let result = [];
|
|
|
|
let openItems = [];
|
|
|
|
let hideItems = [];
|
2019-08-23 07:16:18 +00:00
|
|
|
if ((this.state.filterItems.length > 0 && this.state.hideFilterItems.length === 0 && this.state.openFilterItems.length === 0) || this.state.openFilterItems.length > 0) {
|
|
|
|
const filterItemsArray = this.state.openFilterItems.length > 0 ? this.state.openFilterItems : this.state.filterItems;
|
|
|
|
openItems = filterItemsArray.map(function (item) {
|
|
|
|
return <FilterItem
|
|
|
|
isDisabled={_this.props.isDisabled}
|
|
|
|
key={item.key}
|
|
|
|
groupItems={_this.props.getFilterData().filter(function (t) {
|
|
|
|
return (t.group == item.group && t.group != t.key);
|
|
|
|
})}
|
|
|
|
onSelectFilterItem={_this.onClickDropDownItem}
|
|
|
|
id={item.key}
|
|
|
|
groupLabel={item.groupLabel}
|
|
|
|
label={item.label}
|
|
|
|
opened={item.key.indexOf('_-1') == -1 ? false : true}
|
|
|
|
onClose={_this.onDeleteFilterItem}>
|
|
|
|
</FilterItem>
|
|
|
|
});
|
2019-07-17 12:36:13 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
if (this.state.hideFilterItems.length > 0) {
|
2019-07-17 12:36:13 +00:00
|
|
|
hideItems.push(
|
2019-08-08 09:45:00 +00:00
|
|
|
<HideFilter key="hide-filter" count={this.state.hideFilterItems.length} isDisabled={this.props.isDisabled}>
|
2019-07-17 12:36:13 +00:00
|
|
|
{
|
2019-08-23 07:16:18 +00:00
|
|
|
this.state.hideFilterItems.map(function (item) {
|
|
|
|
return <FilterItem
|
2019-07-17 12:36:13 +00:00
|
|
|
block={true}
|
2019-08-23 07:16:18 +00:00
|
|
|
isDisabled={_this.props.isDisabled}
|
2019-07-17 12:36:13 +00:00
|
|
|
key={item.key}
|
2019-08-23 07:16:18 +00:00
|
|
|
groupItems={_this.props.getFilterData().filter(function (t) {
|
2019-08-15 13:27:13 +00:00
|
|
|
return (t.group == item.group && t.group != t.key);
|
|
|
|
})}
|
|
|
|
onSelectFilterItem={_this.onClickDropDownItem}
|
2019-08-23 07:16:18 +00:00
|
|
|
id={item.key}
|
|
|
|
groupLabel={item.groupLabel}
|
2019-08-20 12:53:16 +00:00
|
|
|
opened={false}
|
2019-08-23 07:16:18 +00:00
|
|
|
label={item.label}
|
2019-07-17 12:36:13 +00:00
|
|
|
onClose={_this.onDeleteFilterItem}>
|
|
|
|
</FilterItem>
|
|
|
|
})
|
|
|
|
}
|
|
|
|
</HideFilter>
|
2019-08-23 07:16:18 +00:00
|
|
|
);
|
2019-07-17 12:36:13 +00:00
|
|
|
}
|
|
|
|
result = hideItems.concat(openItems);
|
|
|
|
return result;
|
|
|
|
}
|
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
updateFilter(inputFilterItems) {
|
|
|
|
|
|
|
|
const currentFilterItems = inputFilterItems || cloneObjectsArray(this.state.filterItems);
|
2019-07-17 12:36:13 +00:00
|
|
|
let fullWidth = this.searchWrapper.current.getBoundingClientRect().width;
|
|
|
|
let filterWidth = this.filterWrapper.current.getBoundingClientRect().width;
|
2019-08-23 07:16:18 +00:00
|
|
|
|
|
|
|
if (fullWidth <= this.minWidth) {
|
|
|
|
this.setState({ openFilterItems: [] });
|
|
|
|
this.setState({ hideFilterItems: currentFilterItems.slice() });
|
|
|
|
} else if (filterWidth > fullWidth / 2) {
|
|
|
|
let newOpenFilterItems = cloneObjectsArray(currentFilterItems);
|
2019-07-17 12:36:13 +00:00
|
|
|
let newHideFilterItems = [];
|
|
|
|
|
2019-08-21 09:07:45 +00:00
|
|
|
let elementsWidth = 0;
|
|
|
|
Array.from(this.filterWrapper.current.children).forEach(element => {
|
|
|
|
elementsWidth = elementsWidth + element.getBoundingClientRect().width;
|
2019-07-17 12:36:13 +00:00
|
|
|
});
|
2019-08-23 07:16:18 +00:00
|
|
|
|
|
|
|
if (elementsWidth >= fullWidth / 3) {
|
2019-08-21 09:07:45 +00:00
|
|
|
let filterArr = Array.from(this.filterWrapper.current.children);
|
2019-08-23 07:16:18 +00:00
|
|
|
for (let i = 0; i < filterArr.length; i++) {
|
|
|
|
if (elementsWidth > fullWidth / 3) {
|
2019-08-21 09:07:45 +00:00
|
|
|
elementsWidth = elementsWidth - filterArr[i].getBoundingClientRect().width;
|
2019-08-23 07:16:18 +00:00
|
|
|
newHideFilterItems.push(currentFilterItems.find(x => x.key === filterArr[i].getAttribute('id')));
|
2019-08-21 09:07:45 +00:00
|
|
|
newOpenFilterItems.splice(newOpenFilterItems.findIndex(x => x.key === filterArr[i].getAttribute('id')), 1);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
this.setState({ openFilterItems: newOpenFilterItems });
|
|
|
|
this.setState({ hideFilterItems: newHideFilterItems });
|
|
|
|
} else {
|
|
|
|
this.setState({ openFilterItems: currentFilterItems.slice() });
|
|
|
|
this.setState({ hideFilterItems: [] });
|
2019-07-17 12:36:13 +00:00
|
|
|
}
|
|
|
|
}
|
2019-08-08 09:45:00 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
onInputChange(e) {
|
2019-08-13 08:07:35 +00:00
|
|
|
this.setState({
|
|
|
|
inputValue: e.target.value
|
|
|
|
});
|
|
|
|
this.props.onChange(e)
|
|
|
|
}
|
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
resize() {
|
2019-08-08 09:45:00 +00:00
|
|
|
this.isResizeUpdate = true;
|
2019-08-23 07:16:18 +00:00
|
|
|
//this.forceUpdate();
|
|
|
|
this.setState({
|
|
|
|
openFilterItems: this.state.filterItems,
|
|
|
|
hideFilterItems: []
|
|
|
|
})
|
2019-07-17 12:36:13 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
componentDidUpdate() {
|
|
|
|
if (this.props.isNeedFilter) {
|
|
|
|
const fullWidth = this.searchWrapper.current.getBoundingClientRect().width;
|
|
|
|
const filterWidth = this.filterWrapper.current.getBoundingClientRect().width;
|
|
|
|
if (fullWidth <= this.minWidth || filterWidth > fullWidth / 2) this.updateFilter();
|
2019-08-08 09:45:00 +00:00
|
|
|
}
|
2019-07-17 12:36:13 +00:00
|
|
|
}
|
|
|
|
componentDidMount() {
|
2019-08-23 07:16:18 +00:00
|
|
|
window.addEventListener('resize', this.throttledResize);
|
|
|
|
if (this.props.isNeedFilter) this.updateFilter();
|
2019-07-17 12:36:13 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
componentWillUnmount(){
|
|
|
|
window.removeEventListener('resize', this.throttledResize);
|
2019-07-15 14:24:17 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
|
|
|
if (this.props.value != nextProps.value || !isEqual(this.props.selectedFilterData, nextProps.selectedFilterData)) {
|
|
|
|
if (this.props.value != nextProps.value) {
|
|
|
|
this.setState({ inputValue: nextProps.value })
|
2019-08-08 09:45:00 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
if (!isEqual(this.props.selectedFilterData, nextProps.selectedFilterData) && this.props.isNeedFilter) {
|
|
|
|
const internalFilterData = convertToInternalData(this.props.getFilterData(), cloneObjectsArray(nextProps.selectedFilterData));
|
|
|
|
this.setState({ filterItems: internalFilterData });
|
|
|
|
this.updateFilter(internalFilterData);
|
2019-08-08 09:45:00 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (this.props.id != nextProps.id ||
|
|
|
|
this.props.isDisabled != nextProps.isDisabled ||
|
|
|
|
this.props.size != nextProps.size ||
|
|
|
|
this.props.placeholder != nextProps.placeholder ||
|
|
|
|
this.props.isNeedFilter != nextProps.isNeedFilter
|
|
|
|
) {
|
|
|
|
return true;
|
2019-08-08 09:45:00 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
if (this.isResizeUpdate) {
|
|
|
|
this.isResizeUpdate = false;
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return !isEqual(this.state, nextState);
|
2019-08-08 09:45:00 +00:00
|
|
|
}
|
2019-07-15 14:24:17 +00:00
|
|
|
|
2019-07-15 12:53:12 +00:00
|
|
|
render() {
|
2019-08-08 09:45:00 +00:00
|
|
|
//console.log("Search input render");
|
2019-07-15 12:53:12 +00:00
|
|
|
let _this = this;
|
2019-07-15 14:24:17 +00:00
|
|
|
let iconSize = 32;
|
2019-08-13 08:07:35 +00:00
|
|
|
let clearButtonSize = 15;
|
2019-07-15 14:24:17 +00:00
|
|
|
switch (this.props.size) {
|
|
|
|
case 'base':
|
2019-08-13 08:07:35 +00:00
|
|
|
iconSize = 32;
|
|
|
|
clearButtonSize = !!this.state.inputValue || this.state.filterItems.length > 0 ? 12 : 15;
|
2019-07-15 14:24:17 +00:00
|
|
|
break;
|
|
|
|
case 'middle':
|
2019-08-13 08:07:35 +00:00
|
|
|
iconSize = 41;
|
|
|
|
clearButtonSize = !!this.state.inputValue || this.state.filterItems.length > 0 ? 16 : 18;
|
|
|
|
break;
|
2019-07-15 14:24:17 +00:00
|
|
|
case 'big':
|
2019-08-13 08:07:35 +00:00
|
|
|
iconSize = 41;
|
|
|
|
clearButtonSize = !!this.state.inputValue || this.state.filterItems.length > 0 ? 19 : 21;
|
|
|
|
break;
|
2019-07-15 14:24:17 +00:00
|
|
|
case 'huge':
|
2019-08-13 08:07:35 +00:00
|
|
|
iconSize = 41;
|
|
|
|
clearButtonSize = !!this.state.inputValue || this.state.filterItems.length > 0 ? 22 : 24;
|
2019-07-15 14:24:17 +00:00
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
2019-07-15 12:53:12 +00:00
|
|
|
return (
|
2019-08-23 11:30:01 +00:00
|
|
|
<StyledSearchInput className={this.props.className} ref={this.searchWrapper}>
|
2019-08-23 07:16:18 +00:00
|
|
|
<InputBlock
|
2019-08-13 08:07:35 +00:00
|
|
|
ref={this.input}
|
2019-07-15 12:53:12 +00:00
|
|
|
id={this.props.id}
|
|
|
|
isDisabled={this.props.isDisabled}
|
2019-08-13 08:07:35 +00:00
|
|
|
iconName={!!this.state.inputValue || this.state.filterItems.length > 0 ? "CrossIcon" : "SearchIcon"}
|
2019-07-15 12:53:12 +00:00
|
|
|
isIconFill={true}
|
2019-08-13 08:07:35 +00:00
|
|
|
iconSize={clearButtonSize}
|
2019-07-15 12:53:12 +00:00
|
|
|
iconColor={"#A3A9AE"}
|
2019-08-23 07:16:18 +00:00
|
|
|
onIconClick={!!this.state.inputValue || this.state.filterItems.length > 0 ? this.clearFilter : undefined}
|
2019-07-15 12:53:12 +00:00
|
|
|
size={this.props.size}
|
|
|
|
scale={true}
|
2019-08-13 08:07:35 +00:00
|
|
|
value={this.state.inputValue}
|
2019-07-15 12:53:12 +00:00
|
|
|
placeholder={this.props.placeholder}
|
2019-08-13 08:07:35 +00:00
|
|
|
onChange={this.onInputChange}
|
2019-07-17 12:36:13 +00:00
|
|
|
>
|
2019-08-23 07:16:18 +00:00
|
|
|
{this.props.isNeedFilter &&
|
|
|
|
<StyledFilterBlock ref={this.filterWrapper}>
|
|
|
|
{this.getFilterItems()}
|
|
|
|
</StyledFilterBlock>
|
|
|
|
}
|
|
|
|
|
|
|
|
{this.props.isNeedFilter &&
|
|
|
|
<FilterButton iconSize={iconSize} getData={_this.getData} isDisabled={this.props.isDisabled} />
|
2019-07-17 12:36:13 +00:00
|
|
|
}
|
|
|
|
</InputBlock>
|
|
|
|
</StyledSearchInput>
|
2019-07-15 12:53:12 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
SearchInput.propTypes = {
|
2019-08-23 07:16:18 +00:00
|
|
|
id: PropTypes.string,
|
|
|
|
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),
|
|
|
|
value: PropTypes.string,
|
|
|
|
scale: PropTypes.bool,
|
|
|
|
placeholder: PropTypes.string,
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
getFilterData: PropTypes.func,
|
|
|
|
isNeedFilter: PropTypes.bool,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
selectedFilterData: PropTypes.array
|
2019-07-15 12:53:12 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
SearchInput.defaultProps = {
|
2019-08-23 07:16:18 +00:00
|
|
|
size: 'base',
|
|
|
|
value: '',
|
|
|
|
scale: false,
|
|
|
|
isNeedFilter: false,
|
|
|
|
isDisabled: false,
|
|
|
|
selectedFilterData: []
|
2019-07-15 12:53:12 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default SearchInput;
|