All Downloads are FREE. Search and download functionalities are using the official Maven repository.
Please wait. This can take some minutes ...
Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
dotty_res.scripts.components.FilterGroup.js Maven / Gradle / Ivy
class FilterGroup extends Component {
constructor(props) {
super(props);
this.filterToggleRef = findRef(".filterToggleButton");
this.filtersContainerRef = findRef(".filtersContainer");
this.documentableFilterRef = findRef(".documentableFilter");
withEvent(
this.filterToggleRef,
"click",
this.props.onFilterVisibilityChange
);
this.render(this.props);
}
onFilterClick = (e) => {
const {currentTarget: {dataset: {key, value}}} = e;
this.props.onFilterToggle(key, value);
e.stopPropagation();
e.preventDefault();
};
onSelectAllClick = ({
currentTarget: {
dataset: { key },
},
}) => {
this.props.onGroupSelectChange(key, true);
};
onDeselectAllClick = (e) => {
this.props.onGroupSelectChange(e.currentTarget.dataset.key, false);
e.stopPropagation();
e.preventDefault();
};
onClearFilters = () => {
Object.entries(this.props.filter.filters)
.forEach(([key, _values]) => this.props.onGroupSelectChange(key, false))
};
showPillDropdown = (e) => {
this.props.onPillClick(e.currentTarget.dataset.key);
e.stopPropagation();
e.preventDefault();
}
hidePillDropdown = () => {
this.props.onPillCollapse();
}
attachFiltersClicks() {
const refs = findRefs(
"li.filterButtonItem",
this.filtersContainerRef
);
attachListeners(refs, "click", this.onFilterClick);
}
attachSelectingButtonsClicks() {
const selectAllRefs = findRefs(
"button.selectAll",
this.filtersContainerRef
);
const deselectAllRefs = findRefs(
"span.deselectAll",
this.filtersContainerRef
);
const deselectAllRefsWithClearButton = findRefs(
"button.clearButton",
this.documentableFilterRef
);
const onPillClick = findRefs(
"div.pill",
this.filtersContainerRef
)
const onOutsidePillClick = findRefs(
"#main",
)
attachListeners(selectAllRefs, "click", this.onSelectAllClick);
attachListeners(deselectAllRefs, "click", this.onDeselectAllClick);
attachListeners(deselectAllRefsWithClearButton, "click", this.onClearFilters);
attachListeners(onPillClick, "click", this.showPillDropdown);
attachListeners(onOutsidePillClick, "click", this.hidePillDropdown);
}
isActive(isActive) {
return isActive ? "active" : "";
}
isVisible(visible) {
return visible ? "visible" : "";
}
getSortedValues(filterKey, values) {
const defaultFilterKey = `${filterKey.charAt(1).toLowerCase()}${filterKey.slice(2)}`
const defaultGroupFilter = Filter.defaultFilters[defaultFilterKey]
return Object.entries(values).sort(([a], [b]) => {
if (a === defaultGroupFilter) {
return -1
}
if (b === defaultGroupFilter) {
return 1
}
return a.localeCompare(b)
})
}
getFirstSelected(filterKey, values) {
const sortedValues = this.getSortedValues(filterKey, values);
const firstSelected = sortedValues.find(([_name, filterObject]) => filterObject.selected);
return firstSelected ? firstSelected[0] : "";
}
getNumberOfSelectedFilters = (filterKey, values) => {
const sortedValues = this.getSortedValues(filterKey, values);
return sortedValues.reduce((prev, curr) => {
if(curr[1].selected) {
return prev +1;
}
return prev
}, 0)
}
getFilterGroup(filterKey, values, selectedPill) {
const firstSelected = this.getFirstSelected(filterKey, values);
const numberOfSelectedFilters = this.getNumberOfSelectedFilters(filterKey, values);
const numberToDisplay = numberOfSelectedFilters > 1
? `+${numberOfSelectedFilters -1}`
: ""
const isMenuVisible = selectedPill === filterKey;
return `
${filterKey.substring(1)}
${firstSelected} ${numberToDisplay}
${this.getSortedValues(filterKey, values)
.map(
([key, data]) =>
`
${key}
`
)
.join(" ")}
`;
}
render({ filter, selectedPill }) {
attachDOM(
this.filtersContainerRef,
Object.entries(filter.filters)
.filter(([_key, values]) => Object.values(values).some((v) => v.visible))
.map(([key, values]) => this.getFilterGroup(key, values, selectedPill)),
);
this.attachFiltersClicks();
this.attachSelectingButtonsClicks();
}
}