Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit fc78942

Browse files
AljulluAljullu
committed
Price filter: allow any numeric input (#1457)
* Price filter: allow any numeric input in inputs * Price filter: allow negative numbers in input fields (#1458) * Price filter: allow negative numbers in input fields * Always update input fields based on minPrice and maxPrice * Don't default values to 0
1 parent 1bf71de commit fc78942

File tree

4 files changed

+76
-23
lines changed

4 files changed

+76
-23
lines changed

assets/js/base/components/price-slider/utils.js renamed to assets/js/base/components/price-slider/constrain-range-slider-values.js

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,37 @@
88
* @param {boolean} isMin Whether we're currently interacting with the min range slider or not, so we update the correct values.
99
* @returns {Array} Validated and updated min/max values that fit within the range slider constraints.
1010
*/
11-
export const constrainRangeSliderValues = ( values, min, max, step, isMin ) => {
12-
let minValue = parseInt( values[ 0 ], 10 ) || min;
13-
let maxValue = parseInt( values[ 1 ], 10 ) || step; // Max should be one step above min if invalid or 0.
11+
export const constrainRangeSliderValues = (
12+
values,
13+
min,
14+
max,
15+
step = 1,
16+
isMin = false
17+
) => {
18+
let minValue = parseInt( values[ 0 ], 10 );
19+
let maxValue = parseInt( values[ 1 ], 10 );
1420

15-
if ( min > minValue ) {
21+
if ( ! Number.isFinite( minValue ) ) {
22+
minValue = min || 0;
23+
}
24+
25+
if ( ! Number.isFinite( maxValue ) ) {
26+
maxValue = max || step;
27+
}
28+
29+
if ( Number.isFinite( min ) && min > minValue ) {
1630
minValue = min;
1731
}
1832

19-
if ( max <= minValue ) {
33+
if ( Number.isFinite( max ) && max <= minValue ) {
2034
minValue = max - step;
2135
}
2236

23-
if ( min >= maxValue ) {
37+
if ( Number.isFinite( min ) && min >= maxValue ) {
2438
maxValue = min + step;
2539
}
2640

27-
if ( max < maxValue ) {
41+
if ( Number.isFinite( max ) && max < maxValue ) {
2842
maxValue = max;
2943
}
3044

‎assets/js/base/components/price-slider/index.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import classnames from 'classnames';
1717
* Internal dependencies
1818
*/
1919
import './style.scss';
20-
import { constrainRangeSliderValues } from './utils';
20+
import { constrainRangeSliderValues } from './constrain-range-slider-values';
2121
import { formatPrice } from '../../utils/price';
2222
import SubmitButton from './submit-button';
2323
import PriceLabel from './price-label';
@@ -189,8 +189,8 @@ const PriceSlider = ( {
189189
: [ minPrice, targetValue ];
190190
const values = constrainRangeSliderValues(
191191
currentValues,
192-
minConstraint,
193-
maxConstraint,
192+
null,
193+
null,
194194
step,
195195
isMin
196196
);
@@ -272,7 +272,11 @@ const PriceSlider = ( {
272272
'Filter products by minimum price',
273273
'woo-gutenberg-products-block'
274274
) }
275-
value={ minPrice || 0 }
275+
value={
276+
Number.isFinite( minPrice )
277+
? minPrice
278+
: minConstraint
279+
}
276280
onChange={ rangeInputOnChange }
277281
step={ minRangeStep }
278282
min={ minConstraint }
@@ -287,7 +291,11 @@ const PriceSlider = ( {
287291
'Filter products by maximum price',
288292
'woo-gutenberg-products-block'
289293
) }
290-
value={ maxPrice || 0 }
294+
value={
295+
Number.isFinite( maxPrice )
296+
? maxPrice
297+
: maxConstraint
298+
}
291299
onChange={ rangeInputOnChange }
292300
step={ maxRangeStep }
293301
min={ minConstraint }

‎assets/js/base/components/price-slider/test/constrain-range-slider-values.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* Internal dependencies
3+
*/
4+
import { constrainRangeSliderValues } from '../constrain-range-slider-values';
5+
6+
describe( 'constrainRangeSliderValues', () => {
7+
test.each`
8+
values | min | max | step | isMin | expected
9+
${[ 20, 60 ]} | ${0} | ${70} | ${10} | ${true} | ${[ 20, 60 ]}
10+
${[ 20, 60 ]} | ${20} | ${60} | ${10} | ${true} | ${[ 20, 60 ]}
11+
${[ 20, 60 ]} | ${30} | ${50} | ${10} | ${true} | ${[ 30, 50 ]}
12+
${[ 50, 50 ]} | ${20} | ${60} | ${10} | ${true} | ${[ 50, 60 ]}
13+
${[ 50, 50 ]} | ${20} | ${60} | ${10} | ${false} | ${[ 40, 50 ]}
14+
${[ 20, 60 ]} | ${null} | ${null} | ${10} | ${true} | ${[ 20, 60 ]}
15+
${[ null, null ]} | ${20} | ${60} | ${10} | ${true} | ${[ 20, 60 ]}
16+
${[ '20', '60' ]} | ${30} | ${50} | ${10} | ${true} | ${[ 30, 50 ]}
17+
${[ -60, -20 ]} | ${-70} | ${0} | ${10} | ${true} | ${[ -60, -20 ]}
18+
${[ -60, -20 ]} | ${-60} | ${-20} | ${10} | ${true} | ${[ -60, -20 ]}
19+
${[ -60, -20 ]} | ${-50} | ${-30} | ${10} | ${true} | ${[ -50, -30 ]}
20+
${[ -50, -50 ]} | ${-60} | ${-20} | ${10} | ${true} | ${[ -50, -40 ]}
21+
${[ -50, -50 ]} | ${-60} | ${-20} | ${10} | ${false} | ${[ -60, -50 ]}
22+
${[ -60, -20 ]} | ${null} | ${null} | ${10} | ${true} | ${[ -60, -20 ]}
23+
${[ null, null ]} | ${-60} | ${-20} | ${10} | ${true} | ${[ -60, -20 ]}
24+
${[ '-60', '-20' ]} | ${-50} | ${-30} | ${10} | ${true} | ${[ -50, -30 ]}
25+
`(
26+
`correctly sets prices to its constraints with arguments values: $values, min: $min, max: $max, step: $step and isMin: $isMin`,
27+
( { values, min, max, step, isMin, expected } ) => {
28+
const constrainedValues = constrainRangeSliderValues(
29+
values,
30+
min,
31+
max,
32+
step,
33+
isMin
34+
);
35+
36+
expect( constrainedValues ).toEqual( expected );
37+
}
38+
);
39+
} );

‎assets/js/blocks/price-filter/block.js‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
5252
setMaxPriceQuery( maxPrice === maxConstraint ? undefined : maxPrice );
5353
}, [ minPrice, maxPrice, minConstraint, maxConstraint ] );
5454

55-
// Callback when slider is changed.
55+
// Callback when slider or input fields are changed.
5656
const onChange = useCallback(
5757
( prices ) => {
5858
if ( prices[ 0 ] !== minPrice ) {
@@ -96,14 +96,6 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
9696
}
9797

9898
const TagName = `h${ attributes.headingLevel }`;
99-
const min = Math.max(
100-
Number.isFinite( minPrice ) ? minPrice : -Infinity,
101-
Number.isFinite( minConstraint ) ? minConstraint : -Infinity
102-
);
103-
const max = Math.min(
104-
Number.isFinite( maxPrice ) ? maxPrice : Infinity,
105-
Number.isFinite( maxConstraint ) ? maxConstraint : Infinity
106-
);
10799

108100
return (
109101
<Fragment>
@@ -114,8 +106,8 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
114106
<PriceSlider
115107
minConstraint={ minConstraint }
116108
maxConstraint={ maxConstraint }
117-
minPrice={ min }
118-
maxPrice={ max }
109+
minPrice={ minPrice }
110+
maxPrice={ maxPrice }
119111
step={ 10 }
120112
currencySymbol={ CURRENCY.symbol }
121113
priceFormat={ CURRENCY.priceFormat }

0 commit comments

Comments
 (0)