2019-11-01 13:56:14 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
import {
|
|
|
|
Fragment,
|
|
|
|
useState,
|
|
|
|
useEffect,
|
|
|
|
useCallback,
|
|
|
|
useMemo,
|
|
|
|
useRef,
|
|
|
|
} from '@wordpress/element';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import classnames from 'classnames';
|
2019-12-18 11:29:20 +00:00
|
|
|
import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
|
2019-11-01 13:56:14 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
|
|
|
import './style.scss';
|
2020-01-02 13:07:59 +00:00
|
|
|
import { constrainRangeSliderValues } from './constrain-range-slider-values';
|
2019-12-12 19:16:39 +00:00
|
|
|
import FilterSubmitButton from '../filter-submit-button';
|
2019-11-01 13:56:14 +00:00
|
|
|
|
2019-12-18 11:29:20 +00:00
|
|
|
/**
|
|
|
|
* Price slider component.
|
|
|
|
*
|
|
|
|
* @param {Object} props Component props.
|
|
|
|
*/
|
2019-11-01 13:56:14 +00:00
|
|
|
const PriceSlider = ( {
|
2019-11-15 14:41:23 +00:00
|
|
|
minPrice,
|
|
|
|
maxPrice,
|
2019-11-01 13:56:14 +00:00
|
|
|
minConstraint,
|
|
|
|
maxConstraint,
|
2019-11-15 14:41:23 +00:00
|
|
|
onChange = () => {},
|
2019-12-18 11:29:20 +00:00
|
|
|
step,
|
|
|
|
currency,
|
2019-11-15 14:41:23 +00:00
|
|
|
showInputFields = true,
|
|
|
|
showFilterButton = false,
|
|
|
|
isLoading = false,
|
|
|
|
onSubmit = () => {},
|
2019-11-01 13:56:14 +00:00
|
|
|
} ) => {
|
|
|
|
const minRange = useRef();
|
|
|
|
const maxRange = useRef();
|
2019-11-15 14:41:23 +00:00
|
|
|
|
2019-12-18 11:29:20 +00:00
|
|
|
// We want step to default to 10 major units, e.g. $10.
|
|
|
|
const stepValue = step ? step : 10 * 10 ** currency.minorUnit;
|
|
|
|
|
|
|
|
const [ minPriceInput, setMinPriceInput ] = useState( minPrice );
|
|
|
|
const [ maxPriceInput, setMaxPriceInput ] = useState( maxPrice );
|
2019-11-01 13:56:14 +00:00
|
|
|
|
|
|
|
useEffect( () => {
|
2019-12-18 11:29:20 +00:00
|
|
|
setMinPriceInput( minPrice );
|
|
|
|
}, [ minPrice ] );
|
2019-11-01 13:56:14 +00:00
|
|
|
|
|
|
|
useEffect( () => {
|
2019-12-18 11:29:20 +00:00
|
|
|
setMaxPriceInput( maxPrice );
|
|
|
|
}, [ maxPrice ] );
|
2019-11-01 13:56:14 +00:00
|
|
|
|
2019-11-15 14:41:23 +00:00
|
|
|
/**
|
|
|
|
* Checks if the min and max constraints are valid.
|
|
|
|
*/
|
2019-11-11 11:05:18 +00:00
|
|
|
const hasValidConstraints = useMemo( () => {
|
|
|
|
return isFinite( minConstraint ) && isFinite( maxConstraint );
|
|
|
|
}, [ minConstraint, maxConstraint ] );
|
|
|
|
|
2019-11-01 13:56:14 +00:00
|
|
|
/**
|
|
|
|
* Handles styles for the shaded area of the range slider.
|
|
|
|
*/
|
2019-11-11 11:05:18 +00:00
|
|
|
const progressStyles = useMemo( () => {
|
2019-11-06 18:25:37 +00:00
|
|
|
if (
|
|
|
|
! isFinite( minPrice ) ||
|
|
|
|
! isFinite( maxPrice ) ||
|
2019-11-11 11:05:18 +00:00
|
|
|
! hasValidConstraints
|
2019-11-06 18:25:37 +00:00
|
|
|
) {
|
|
|
|
return {
|
|
|
|
'--low': '0%',
|
|
|
|
'--high': '100%',
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2019-11-01 13:56:14 +00:00
|
|
|
const low =
|
|
|
|
Math.round(
|
|
|
|
100 *
|
2020-01-02 11:10:41 +00:00
|
|
|
( ( minPrice - minConstraint ) /
|
2019-11-01 13:56:14 +00:00
|
|
|
( maxConstraint - minConstraint ) )
|
|
|
|
) - 0.5;
|
|
|
|
const high =
|
|
|
|
Math.round(
|
|
|
|
100 *
|
2020-01-02 11:10:41 +00:00
|
|
|
( ( maxPrice - minConstraint ) /
|
2019-11-01 13:56:14 +00:00
|
|
|
( maxConstraint - minConstraint ) )
|
|
|
|
) + 0.5;
|
|
|
|
|
|
|
|
return {
|
|
|
|
'--low': low + '%',
|
|
|
|
'--high': high + '%',
|
|
|
|
};
|
2019-11-11 11:05:18 +00:00
|
|
|
}, [
|
|
|
|
minPrice,
|
|
|
|
maxPrice,
|
|
|
|
minConstraint,
|
|
|
|
maxConstraint,
|
|
|
|
hasValidConstraints,
|
2019-12-18 11:29:20 +00:00
|
|
|
stepValue,
|
2019-11-11 11:05:18 +00:00
|
|
|
] );
|
2019-11-01 13:56:14 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Works around an IE issue where only one range selector is visible by changing the display order
|
|
|
|
* based on the mouse position.
|
|
|
|
*
|
2019-12-10 17:17:46 +00:00
|
|
|
* @param {Object} event event data.
|
2019-11-01 13:56:14 +00:00
|
|
|
*/
|
|
|
|
const findClosestRange = useCallback(
|
|
|
|
( event ) => {
|
2019-11-11 11:05:18 +00:00
|
|
|
if ( isLoading || ! hasValidConstraints ) {
|
2019-11-01 13:56:14 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
const bounds = event.target.getBoundingClientRect();
|
|
|
|
const x = event.clientX - bounds.left;
|
|
|
|
const minWidth = minRange.current.offsetWidth;
|
|
|
|
const minValue = minRange.current.value;
|
|
|
|
const maxWidth = maxRange.current.offsetWidth;
|
|
|
|
const maxValue = maxRange.current.value;
|
|
|
|
|
|
|
|
const minX = minWidth * ( minValue / maxConstraint );
|
|
|
|
const maxX = maxWidth * ( maxValue / maxConstraint );
|
|
|
|
|
|
|
|
const minXDiff = Math.abs( x - minX );
|
|
|
|
const maxXDiff = Math.abs( x - maxX );
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The default z-index in the stylesheet as 20. 20 vs 21 is just for determining which range
|
|
|
|
* slider should be at the front and has no meaning beyond
|
|
|
|
*/
|
|
|
|
if ( minXDiff > maxXDiff ) {
|
|
|
|
minRange.current.style.zIndex = 20;
|
|
|
|
maxRange.current.style.zIndex = 21;
|
|
|
|
} else {
|
|
|
|
minRange.current.style.zIndex = 21;
|
|
|
|
maxRange.current.style.zIndex = 20;
|
|
|
|
}
|
|
|
|
},
|
2019-11-11 11:05:18 +00:00
|
|
|
[ isLoading, maxConstraint, hasValidConstraints ]
|
2019-11-01 13:56:14 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Called when the slider is dragged.
|
2019-12-10 17:17:46 +00:00
|
|
|
*
|
|
|
|
* @param {Object} event Event object.
|
2019-11-01 13:56:14 +00:00
|
|
|
*/
|
|
|
|
const rangeInputOnChange = useCallback(
|
|
|
|
( event ) => {
|
|
|
|
const isMin = event.target.classList.contains(
|
|
|
|
'wc-block-price-filter__range-input--min'
|
|
|
|
);
|
|
|
|
const targetValue = event.target.value;
|
|
|
|
const currentValues = isMin
|
2020-01-02 11:10:41 +00:00
|
|
|
? [
|
|
|
|
Math.round( targetValue / stepValue ) * stepValue,
|
|
|
|
maxPrice,
|
|
|
|
]
|
|
|
|
: [
|
|
|
|
minPrice,
|
|
|
|
Math.round( targetValue / stepValue ) * stepValue,
|
|
|
|
];
|
2019-11-01 13:56:14 +00:00
|
|
|
const values = constrainRangeSliderValues(
|
|
|
|
currentValues,
|
|
|
|
minConstraint,
|
|
|
|
maxConstraint,
|
2019-12-18 11:29:20 +00:00
|
|
|
stepValue,
|
2019-11-01 13:56:14 +00:00
|
|
|
isMin
|
|
|
|
);
|
2019-11-15 14:41:23 +00:00
|
|
|
onChange( [
|
|
|
|
parseInt( values[ 0 ], 10 ),
|
|
|
|
parseInt( values[ 1 ], 10 ),
|
|
|
|
] );
|
2019-11-01 13:56:14 +00:00
|
|
|
},
|
2019-12-18 11:29:20 +00:00
|
|
|
[ minPrice, maxPrice, minConstraint, maxConstraint, stepValue ]
|
2019-11-01 13:56:14 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Called when a price input loses focus - commit changes to slider.
|
2019-12-10 17:17:46 +00:00
|
|
|
*
|
|
|
|
* @param {Object} event Event object.
|
2019-11-01 13:56:14 +00:00
|
|
|
*/
|
|
|
|
const priceInputOnBlur = useCallback(
|
|
|
|
( event ) => {
|
2019-12-18 11:29:20 +00:00
|
|
|
// Only refresh when finished editing the min and max fields.
|
|
|
|
if (
|
|
|
|
event.relatedTarget &&
|
|
|
|
event.relatedTarget.classList &&
|
|
|
|
event.relatedTarget.classList.contains(
|
|
|
|
'wc-block-price-filter__amount'
|
|
|
|
)
|
|
|
|
) {
|
|
|
|
return;
|
|
|
|
}
|
2019-11-01 13:56:14 +00:00
|
|
|
const isMin = event.target.classList.contains(
|
|
|
|
'wc-block-price-filter__amount--min'
|
|
|
|
);
|
|
|
|
const values = constrainRangeSliderValues(
|
2019-12-18 11:29:20 +00:00
|
|
|
[ minPriceInput, maxPriceInput ],
|
2020-01-02 13:07:59 +00:00
|
|
|
null,
|
|
|
|
null,
|
2019-12-18 11:29:20 +00:00
|
|
|
stepValue,
|
2019-11-01 13:56:14 +00:00
|
|
|
isMin
|
|
|
|
);
|
2019-11-15 14:41:23 +00:00
|
|
|
onChange( [
|
|
|
|
parseInt( values[ 0 ], 10 ),
|
|
|
|
parseInt( values[ 1 ], 10 ),
|
|
|
|
] );
|
2019-11-01 13:56:14 +00:00
|
|
|
},
|
2019-12-18 11:29:20 +00:00
|
|
|
[
|
|
|
|
minConstraint,
|
|
|
|
maxConstraint,
|
|
|
|
stepValue,
|
|
|
|
minPriceInput,
|
|
|
|
maxPriceInput,
|
|
|
|
currency,
|
|
|
|
]
|
2019-11-01 13:56:14 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
const classes = classnames(
|
|
|
|
'wc-block-price-filter',
|
2020-06-17 09:53:42 +00:00
|
|
|
'wc-block-components-price-slider',
|
2019-11-01 13:56:14 +00:00
|
|
|
showInputFields && 'wc-block-price-filter--has-input-fields',
|
2020-06-17 09:53:42 +00:00
|
|
|
showInputFields && 'wc-block-components-price-slider--has-input-fields',
|
2019-11-01 13:56:14 +00:00
|
|
|
showFilterButton && 'wc-block-price-filter--has-filter-button',
|
2020-06-17 09:53:42 +00:00
|
|
|
showFilterButton &&
|
|
|
|
'wc-block-components-price-slider--has-filter-button',
|
2019-11-11 11:05:18 +00:00
|
|
|
isLoading && 'is-loading',
|
|
|
|
! hasValidConstraints && 'is-disabled'
|
2019-11-01 13:56:14 +00:00
|
|
|
);
|
|
|
|
|
2020-01-02 11:10:41 +00:00
|
|
|
const minRangeStep =
|
|
|
|
minRange && document.activeElement === minRange.current ? stepValue : 1;
|
|
|
|
const maxRangeStep =
|
|
|
|
maxRange && document.activeElement === maxRange.current ? stepValue : 1;
|
|
|
|
|
2019-11-01 13:56:14 +00:00
|
|
|
return (
|
|
|
|
<div className={ classes }>
|
|
|
|
<div
|
2020-06-17 09:53:42 +00:00
|
|
|
className="wc-block-price-filter__range-input-wrapper wc-block-components-price-slider__range-input-wrapper"
|
2019-11-01 13:56:14 +00:00
|
|
|
onMouseMove={ findClosestRange }
|
|
|
|
onFocus={ findClosestRange }
|
|
|
|
>
|
2019-12-16 16:48:02 +00:00
|
|
|
{ hasValidConstraints && (
|
2020-01-30 10:04:39 +00:00
|
|
|
<div aria-hidden={ showInputFields }>
|
2019-11-01 13:56:14 +00:00
|
|
|
<div
|
2020-06-17 09:53:42 +00:00
|
|
|
className="wc-block-price-filter__range-input-progress wc-block-components-price-slider__range-input-progress"
|
2019-11-11 11:05:18 +00:00
|
|
|
style={ progressStyles }
|
2019-11-01 13:56:14 +00:00
|
|
|
/>
|
|
|
|
<input
|
|
|
|
type="range"
|
2020-06-17 09:53:42 +00:00
|
|
|
className="wc-block-price-filter__range-input wc-block-price-filter__range-input--min wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--min"
|
2019-11-01 13:56:14 +00:00
|
|
|
aria-label={ __(
|
|
|
|
'Filter products by minimum price',
|
|
|
|
'woo-gutenberg-products-block'
|
|
|
|
) }
|
2020-01-02 13:07:59 +00:00
|
|
|
value={
|
|
|
|
Number.isFinite( minPrice )
|
|
|
|
? minPrice
|
|
|
|
: minConstraint
|
|
|
|
}
|
2019-11-01 13:56:14 +00:00
|
|
|
onChange={ rangeInputOnChange }
|
2020-01-02 11:10:41 +00:00
|
|
|
step={ minRangeStep }
|
2019-11-01 13:56:14 +00:00
|
|
|
min={ minConstraint }
|
|
|
|
max={ maxConstraint }
|
|
|
|
ref={ minRange }
|
2019-12-16 16:48:02 +00:00
|
|
|
disabled={ isLoading }
|
2020-01-30 10:04:39 +00:00
|
|
|
tabIndex={ showInputFields ? '-1' : '0' }
|
2019-11-01 13:56:14 +00:00
|
|
|
/>
|
|
|
|
<input
|
|
|
|
type="range"
|
2020-06-17 09:53:42 +00:00
|
|
|
className="wc-block-price-filter__range-input wc-block-price-filter__range-input--max wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--max"
|
2019-11-01 13:56:14 +00:00
|
|
|
aria-label={ __(
|
|
|
|
'Filter products by maximum price',
|
|
|
|
'woo-gutenberg-products-block'
|
|
|
|
) }
|
2020-01-02 13:07:59 +00:00
|
|
|
value={
|
|
|
|
Number.isFinite( maxPrice )
|
|
|
|
? maxPrice
|
|
|
|
: maxConstraint
|
|
|
|
}
|
2019-11-01 13:56:14 +00:00
|
|
|
onChange={ rangeInputOnChange }
|
2020-01-02 11:10:41 +00:00
|
|
|
step={ maxRangeStep }
|
2019-11-01 13:56:14 +00:00
|
|
|
min={ minConstraint }
|
|
|
|
max={ maxConstraint }
|
|
|
|
ref={ maxRange }
|
2019-12-16 16:48:02 +00:00
|
|
|
disabled={ isLoading }
|
2020-01-30 10:04:39 +00:00
|
|
|
tabIndex={ showInputFields ? '-1' : '0' }
|
2019-11-01 13:56:14 +00:00
|
|
|
/>
|
2020-01-30 10:04:39 +00:00
|
|
|
</div>
|
2019-11-01 13:56:14 +00:00
|
|
|
) }
|
|
|
|
</div>
|
2020-06-17 09:53:42 +00:00
|
|
|
<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
|
2019-12-18 11:29:20 +00:00
|
|
|
{ showInputFields && (
|
|
|
|
<Fragment>
|
|
|
|
<FormattedMonetaryAmount
|
|
|
|
currency={ currency }
|
|
|
|
displayType="input"
|
2020-06-17 09:53:42 +00:00
|
|
|
className="wc-block-price-filter__amount wc-block-price-filter__amount--min wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--min"
|
2019-12-18 11:29:20 +00:00
|
|
|
aria-label={ __(
|
|
|
|
'Filter products by minimum price',
|
|
|
|
'woo-gutenberg-products-block'
|
|
|
|
) }
|
|
|
|
onValueChange={ ( value ) => {
|
|
|
|
if ( value === minPriceInput ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
setMinPriceInput( value );
|
|
|
|
} }
|
|
|
|
onBlur={ priceInputOnBlur }
|
|
|
|
disabled={ isLoading || ! hasValidConstraints }
|
|
|
|
value={ minPriceInput }
|
|
|
|
/>
|
|
|
|
<FormattedMonetaryAmount
|
|
|
|
currency={ currency }
|
|
|
|
displayType="input"
|
2020-06-17 09:53:42 +00:00
|
|
|
className="wc-block-price-filter__amount wc-block-price-filter__amount--max wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--max"
|
2019-12-18 11:29:20 +00:00
|
|
|
aria-label={ __(
|
|
|
|
'Filter products by maximum price',
|
|
|
|
'woo-gutenberg-products-block'
|
|
|
|
) }
|
|
|
|
onValueChange={ ( value ) => {
|
|
|
|
if ( value === maxPriceInput ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
setMaxPriceInput( value );
|
|
|
|
} }
|
|
|
|
onBlur={ priceInputOnBlur }
|
|
|
|
disabled={ isLoading || ! hasValidConstraints }
|
|
|
|
value={ maxPriceInput }
|
|
|
|
/>
|
|
|
|
</Fragment>
|
2019-11-01 13:56:14 +00:00
|
|
|
) }
|
2019-12-18 11:29:20 +00:00
|
|
|
{ ! showInputFields &&
|
|
|
|
! isLoading &&
|
|
|
|
Number.isFinite( minPrice ) &&
|
|
|
|
Number.isFinite( maxPrice ) && (
|
2020-06-17 09:53:42 +00:00
|
|
|
<div className="wc-block-price-filter__range-text wc-block-components-price-slider__range-text">
|
2020-01-30 10:04:39 +00:00
|
|
|
{ __( 'Price', 'woo-gutenberg-products-block' ) }
|
|
|
|
:
|
2019-12-18 11:29:20 +00:00
|
|
|
<FormattedMonetaryAmount
|
|
|
|
currency={ currency }
|
|
|
|
displayType="text"
|
|
|
|
value={ minPrice }
|
|
|
|
/>
|
|
|
|
–
|
|
|
|
<FormattedMonetaryAmount
|
|
|
|
currency={ currency }
|
|
|
|
displayType="text"
|
|
|
|
value={ maxPrice }
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
) }
|
2019-11-01 13:56:14 +00:00
|
|
|
{ showFilterButton && (
|
2019-12-12 19:16:39 +00:00
|
|
|
<FilterSubmitButton
|
2020-06-17 09:53:42 +00:00
|
|
|
className="wc-block-price-filter__button wc-block-components-price-slider__button"
|
2019-11-11 11:05:18 +00:00
|
|
|
disabled={ isLoading || ! hasValidConstraints }
|
2019-11-15 14:41:23 +00:00
|
|
|
onClick={ onSubmit }
|
2020-01-30 10:04:39 +00:00
|
|
|
screenReaderLabel={ __(
|
|
|
|
'Apply price filter',
|
|
|
|
'woo-gutenberg-products-block'
|
|
|
|
) }
|
2019-11-01 13:56:14 +00:00
|
|
|
/>
|
|
|
|
) }
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
PriceSlider.propTypes = {
|
|
|
|
/**
|
|
|
|
* Callback fired when prices changes.
|
|
|
|
*/
|
|
|
|
onChange: PropTypes.func.isRequired,
|
|
|
|
/**
|
2019-11-15 14:41:23 +00:00
|
|
|
* Callback fired when the filter button is pressed.
|
|
|
|
*/
|
|
|
|
onSubmit: PropTypes.func,
|
|
|
|
/**
|
|
|
|
* Min value.
|
2019-11-01 13:56:14 +00:00
|
|
|
*/
|
2019-11-15 14:41:23 +00:00
|
|
|
minPrice: PropTypes.number,
|
2019-11-01 13:56:14 +00:00
|
|
|
/**
|
2019-11-15 14:41:23 +00:00
|
|
|
* Max value.
|
2019-11-01 13:56:14 +00:00
|
|
|
*/
|
2019-11-15 14:41:23 +00:00
|
|
|
maxPrice: PropTypes.number,
|
2019-11-01 13:56:14 +00:00
|
|
|
/**
|
|
|
|
* Minimum allowed price.
|
|
|
|
*/
|
|
|
|
minConstraint: PropTypes.number,
|
|
|
|
/**
|
|
|
|
* Maximum allowed price.
|
|
|
|
*/
|
|
|
|
maxConstraint: PropTypes.number,
|
|
|
|
/**
|
|
|
|
* Step for slider inputs.
|
|
|
|
*/
|
|
|
|
step: PropTypes.number,
|
|
|
|
/**
|
2019-12-18 11:29:20 +00:00
|
|
|
* Currency data used for formatting prices.
|
2019-11-01 13:56:14 +00:00
|
|
|
*/
|
2019-12-18 11:29:20 +00:00
|
|
|
currency: PropTypes.object.isRequired,
|
2019-11-01 13:56:14 +00:00
|
|
|
/**
|
|
|
|
* Whether or not to show input fields above the slider.
|
|
|
|
*/
|
|
|
|
showInputFields: PropTypes.bool,
|
|
|
|
/**
|
|
|
|
* Whether or not to show filter button above the slider.
|
|
|
|
*/
|
|
|
|
showFilterButton: PropTypes.bool,
|
|
|
|
/**
|
|
|
|
* Whether or not to show filter button above the slider.
|
|
|
|
*/
|
|
|
|
isLoading: PropTypes.bool,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default PriceSlider;
|