+
);
+ } else {
+ return items.map((item, index) => {
+ const { title, value } = item;
+ const key = `item-${group}-${value}`;
+
+ if (!isListExpanded && index >= itemCountToShow) {
+ return null;
+ }
- // associate each element with its normalized title
- // titles are not unique, so use the element as the key
- labels.set(element, title.toUpperCase());
- return element;
- });
+ const element = (
+
+
+
+ );
+ labels.set(element, title.toUpperCase());
+ return element;
+ });
+ }
}, [
classes,
filterApi,
@@ -91,7 +129,10 @@ const FilterList = props => {
items,
isListExpanded,
itemCountToShow,
- onApply
+ onApply,
+ minRange,
+ maxRange,
+ handleChange
]);
const showMoreLessItem = useMemo(() => {
diff --git a/packages/venia-ui/lib/components/FilterModal/filterBlock.js b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
index d667d98810..b961c0a3ac 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterBlock.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
@@ -28,7 +28,8 @@ const FilterBlock = props => {
const talonProps = useFilterBlock({
filterState,
items,
- initialOpen
+ initialOpen,
+ group
});
const { handleClick, isExpanded } = talonProps;
const iconSrc = isExpanded ? ArrowUp : ArrowDown;
diff --git a/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js b/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js
index 9fafd2bbf0..a1b7502f20 100644
--- a/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js
+++ b/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js
@@ -1,5 +1,6 @@
import React from 'react';
import { act } from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
import { createTestInstance } from '@magento/peregrine';
@@ -161,7 +162,11 @@ describe('#FilterSidebar', () => {
});
it('renders without filters', () => {
- createTestInstance();
+ createTestInstance(
+
+
+
+ );
expect(mockFilterBlock).not.toHaveBeenCalled();
expect(mockCurrentFilters).toHaveBeenCalled();
@@ -170,7 +175,11 @@ describe('#FilterSidebar', () => {
it('renders with filters and no selected filters', () => {
givenFilters();
- const { root } = createTestInstance();
+ const { root } = createTestInstance(
+
+
+
+ );
expect(() => root.findByType(LinkButton)).toThrow();
expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
@@ -179,7 +188,11 @@ describe('#FilterSidebar', () => {
it('renders with filters and selected filter', () => {
givenSelectedFilters();
- const { root } = createTestInstance();
+ const { root } = createTestInstance(
+
+
+
+ );
expect(() => root.findByType(LinkButton)).not.toThrow();
expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
@@ -188,7 +201,11 @@ describe('#FilterSidebar', () => {
it('handles when a user applies a filter and ref is not provided', () => {
givenSelectedFilters();
- const { root } = createTestInstance();
+ const { root } = createTestInstance(
+
+
+
+ );
act(() => {
root.findAllByType(FilterBlock)[0].props.onApply();
@@ -206,17 +223,22 @@ describe('#FilterSidebar', () => {
value: mockScrollTo
});
- const { root } = createTestInstance(, {
- createNodeMock: () => {
- return {
- getBoundingClientRect: mockGetBoundingClientRect.mockReturnValue(
- {
- top: 250
- }
- )
- };
+ const { root } = createTestInstance(
+
+
+ ,
+ {
+ createNodeMock: () => {
+ return {
+ getBoundingClientRect: mockGetBoundingClientRect.mockReturnValue(
+ {
+ top: 250
+ }
+ )
+ };
+ }
}
- });
+ );
act(() => {
root.findAllByType(FilterBlock)[0].props.onApply();
@@ -229,7 +251,11 @@ describe('#FilterSidebar', () => {
it('accepts configurable amount of open filters', () => {
givenFiltersAndAmountToShow();
- createTestInstance();
+ createTestInstance(
+
+
+
+ );
expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
diff --git a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
index 4fa266eb8a..758400e1be 100644
--- a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
+++ b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
@@ -8,6 +8,7 @@ import LinkButton from '../LinkButton';
import CurrentFilters from '../FilterModal/CurrentFilters';
import FilterBlock from '../FilterModal/filterBlock';
import defaultClasses from './filterSidebar.module.css';
+import { useLocation } from 'react-router-dom';
const SCROLL_OFFSET = 150;
@@ -31,6 +32,32 @@ const FilterSidebar = props => {
const filterRef = useRef();
const classes = useStyle(defaultClasses, props.classes);
+ const location = useLocation();
+
+ //adding the price filter values to the filterstate
+ const priceFilters = Array.from(filterItems, ([group]) => {
+ if (group == 'price') {
+ // preserve all existing params
+ const params = new URLSearchParams(location.search);
+ const uniqueKeys = new Set(params.keys());
+ // iterate over existing param keys
+ for (const key of uniqueKeys) {
+ // if a key matches a known filter, add its items to the next state
+ if (key == 'price[filter]') {
+ const value = params.get('price[filter]');
+ const item = {
+ title: value.split(',')[0],
+ value: value.split(',')[1]
+ };
+ const filterVar = new Set();
+ filterVar.add(item);
+
+ //to display the price filter value after selecting the filter
+ filterState.set('price', new Set(filterVar));
+ }
+ }
+ }
+ });
const handleApplyFilter = useCallback(
(...args) => {
@@ -115,6 +142,7 @@ const FilterSidebar = props => {
/>
+ {priceFilters}
{
+ const [minVal, setMinVal] = useState(min);
+ const [maxVal, setMaxVal] = useState(max);
+ const minValRef = useRef(min);
+ const maxValRef = useRef(max);
+ const range = useRef(null);
+
+ // Convert value to percentage for positioning
+ const getPercent = useCallback(
+ value => Math.round(((value - min) / (max - min)) * 100),
+ [min, max]
+ );
+
+ // set width of the range to decrease from the left side
+ useEffect(() => {
+ const minPercent = getPercent(minVal);
+ const maxPercent = getPercent(maxValRef.current);
+
+ if (range.current) {
+ range.current.style.left = `${minPercent}%`;
+ range.current.style.width = `${maxPercent - minPercent}%`;
+ }
+ }, [minVal, getPercent]);
+
+ // set the width of the range to decrease from right side
+ useEffect(() => {
+ const minPercent = getPercent(minValRef.current);
+ const maxPercent = getPercent(maxVal);
+
+ if (range.current) {
+ range.current.style.width = `${maxPercent - minPercent}%`;
+ }
+ }, [maxVal, getPercent]);
+
+ // Handle min and max value changes
+ useEffect(() => {
+ if (minVal !== minValRef.current || maxVal !== maxValRef.current) {
+ onChange({ min: minVal, max: maxVal });
+ minValRef.current = minVal;
+ maxValRef.current = maxVal;
+ }
+ }, [minVal, maxVal, onChange]);
+
+ return (
+