initial commit
This commit is contained in:
@ -0,0 +1,54 @@
|
||||
/**
|
||||
* Validate a min and max value for a range slider against defined constraints (min, max, step).
|
||||
*
|
||||
* @param {Array} values Array containing min and max values.
|
||||
* @param {number|null} min Min allowed value for the sliders.
|
||||
* @param {number|null} max Max allowed value for the sliders.
|
||||
* @param {number} step Step value for the sliders.
|
||||
* @param {boolean} isMin Whether we're currently interacting with the min range slider or not, so we update the correct values.
|
||||
* @return {Array} Validated and updated min/max values that fit within the range slider constraints.
|
||||
*/
|
||||
export const constrainRangeSliderValues = (
|
||||
values,
|
||||
min,
|
||||
max,
|
||||
step = 1,
|
||||
isMin = false
|
||||
) => {
|
||||
let minValue = parseInt( values[ 0 ], 10 );
|
||||
let maxValue = parseInt( values[ 1 ], 10 );
|
||||
|
||||
if ( ! Number.isFinite( minValue ) ) {
|
||||
minValue = min || 0;
|
||||
}
|
||||
|
||||
if ( ! Number.isFinite( maxValue ) ) {
|
||||
maxValue = max || step;
|
||||
}
|
||||
|
||||
if ( Number.isFinite( min ) && min > minValue ) {
|
||||
minValue = min;
|
||||
}
|
||||
|
||||
if ( Number.isFinite( max ) && max <= minValue ) {
|
||||
minValue = max - step;
|
||||
}
|
||||
|
||||
if ( Number.isFinite( min ) && min >= maxValue ) {
|
||||
maxValue = min + step;
|
||||
}
|
||||
|
||||
if ( Number.isFinite( max ) && max < maxValue ) {
|
||||
maxValue = max;
|
||||
}
|
||||
|
||||
if ( ! isMin && minValue >= maxValue ) {
|
||||
minValue = maxValue - step;
|
||||
}
|
||||
|
||||
if ( isMin && maxValue <= minValue ) {
|
||||
maxValue = minValue + step;
|
||||
}
|
||||
|
||||
return [ minValue, maxValue ];
|
||||
};
|
||||
@ -0,0 +1,436 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
useState,
|
||||
useEffect,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useRef,
|
||||
} from '@wordpress/element';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
|
||||
import { isObject } from '@woocommerce/types';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import { constrainRangeSliderValues } from './constrain-range-slider-values';
|
||||
import FilterSubmitButton from '../filter-submit-button';
|
||||
|
||||
/**
|
||||
* Price slider component.
|
||||
*
|
||||
* @param {Object} props Component props.
|
||||
* @param {number} props.minPrice Minimum price for slider.
|
||||
* @param {number} props.maxPrice Maximum price for slider.
|
||||
* @param {number} props.minConstraint Minimum constraint.
|
||||
* @param {number} props.maxConstraint Maximum constraint.
|
||||
* @param {function(any):any} props.onChange Function to call on the change event.
|
||||
* @param {number} props.step What step values the slider uses.
|
||||
* @param {Object} props.currency Currency configuration object.
|
||||
* @param {boolean} props.showInputFields Whether to show input fields for the values or not.
|
||||
* @param {boolean} props.showFilterButton Whether to show the filter button for the slider.
|
||||
* @param {boolean} props.isLoading Whether values are loading or not.
|
||||
* @param {function():any} props.onSubmit Function to call when submit event fires.
|
||||
*/
|
||||
const PriceSlider = ( {
|
||||
minPrice,
|
||||
maxPrice,
|
||||
minConstraint,
|
||||
maxConstraint,
|
||||
onChange = () => {},
|
||||
step,
|
||||
currency,
|
||||
showInputFields = true,
|
||||
showFilterButton = false,
|
||||
isLoading = false,
|
||||
onSubmit = () => {},
|
||||
} ) => {
|
||||
const minRange = useRef();
|
||||
const maxRange = useRef();
|
||||
|
||||
// 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 );
|
||||
|
||||
useEffect( () => {
|
||||
setMinPriceInput( minPrice );
|
||||
}, [ minPrice ] );
|
||||
|
||||
useEffect( () => {
|
||||
setMaxPriceInput( maxPrice );
|
||||
}, [ maxPrice ] );
|
||||
|
||||
/**
|
||||
* Checks if the min and max constraints are valid.
|
||||
*/
|
||||
const hasValidConstraints = useMemo( () => {
|
||||
return isFinite( minConstraint ) && isFinite( maxConstraint );
|
||||
}, [ minConstraint, maxConstraint ] );
|
||||
|
||||
/**
|
||||
* Handles styles for the shaded area of the range slider.
|
||||
*/
|
||||
const progressStyles = useMemo( () => {
|
||||
if (
|
||||
! isFinite( minPrice ) ||
|
||||
! isFinite( maxPrice ) ||
|
||||
! hasValidConstraints
|
||||
) {
|
||||
return {
|
||||
'--low': '0%',
|
||||
'--high': '100%',
|
||||
};
|
||||
}
|
||||
|
||||
const low =
|
||||
Math.round(
|
||||
100 *
|
||||
( ( minPrice - minConstraint ) /
|
||||
( maxConstraint - minConstraint ) )
|
||||
) - 0.5;
|
||||
const high =
|
||||
Math.round(
|
||||
100 *
|
||||
( ( maxPrice - minConstraint ) /
|
||||
( maxConstraint - minConstraint ) )
|
||||
) + 0.5;
|
||||
|
||||
return {
|
||||
'--low': low + '%',
|
||||
'--high': high + '%',
|
||||
};
|
||||
}, [
|
||||
minPrice,
|
||||
maxPrice,
|
||||
minConstraint,
|
||||
maxConstraint,
|
||||
hasValidConstraints,
|
||||
] );
|
||||
|
||||
/**
|
||||
* Works around an IE issue where only one range selector is visible by changing the display order
|
||||
* based on the mouse position.
|
||||
*
|
||||
* @param {Object} event event data.
|
||||
*/
|
||||
const findClosestRange = useCallback(
|
||||
( event ) => {
|
||||
if ( isLoading || ! hasValidConstraints ) {
|
||||
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;
|
||||
}
|
||||
},
|
||||
[ isLoading, maxConstraint, hasValidConstraints ]
|
||||
);
|
||||
|
||||
/**
|
||||
* Called when the slider is dragged.
|
||||
*
|
||||
* @param {Object} event Event object.
|
||||
*/
|
||||
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
|
||||
? [
|
||||
Math.round( targetValue / stepValue ) * stepValue,
|
||||
maxPrice,
|
||||
]
|
||||
: [
|
||||
minPrice,
|
||||
Math.round( targetValue / stepValue ) * stepValue,
|
||||
];
|
||||
const values = constrainRangeSliderValues(
|
||||
currentValues,
|
||||
minConstraint,
|
||||
maxConstraint,
|
||||
stepValue,
|
||||
isMin
|
||||
);
|
||||
onChange( [
|
||||
parseInt( values[ 0 ], 10 ),
|
||||
parseInt( values[ 1 ], 10 ),
|
||||
] );
|
||||
},
|
||||
[
|
||||
onChange,
|
||||
minPrice,
|
||||
maxPrice,
|
||||
minConstraint,
|
||||
maxConstraint,
|
||||
stepValue,
|
||||
]
|
||||
);
|
||||
|
||||
/**
|
||||
* Called when a price input loses focus - commit changes to slider.
|
||||
*
|
||||
* @param {Object} event Event object.
|
||||
*/
|
||||
const priceInputOnBlur = useCallback(
|
||||
( event ) => {
|
||||
// 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;
|
||||
}
|
||||
const isMin = event.target.classList.contains(
|
||||
'wc-block-price-filter__amount--min'
|
||||
);
|
||||
const values = constrainRangeSliderValues(
|
||||
[ minPriceInput, maxPriceInput ],
|
||||
null,
|
||||
null,
|
||||
stepValue,
|
||||
isMin
|
||||
);
|
||||
onChange( [
|
||||
parseInt( values[ 0 ], 10 ),
|
||||
parseInt( values[ 1 ], 10 ),
|
||||
] );
|
||||
},
|
||||
[ onChange, stepValue, minPriceInput, maxPriceInput ]
|
||||
);
|
||||
|
||||
const classes = classnames(
|
||||
'wc-block-price-filter',
|
||||
'wc-block-components-price-slider',
|
||||
showInputFields && 'wc-block-price-filter--has-input-fields',
|
||||
showInputFields && 'wc-block-components-price-slider--has-input-fields',
|
||||
showFilterButton && 'wc-block-price-filter--has-filter-button',
|
||||
showFilterButton &&
|
||||
'wc-block-components-price-slider--has-filter-button',
|
||||
isLoading && 'is-loading',
|
||||
! hasValidConstraints && 'is-disabled'
|
||||
);
|
||||
|
||||
const activeElement = isObject( minRange.current )
|
||||
? minRange.current.ownerDocument.activeElement
|
||||
: undefined;
|
||||
const minRangeStep =
|
||||
activeElement && activeElement === minRange.current ? stepValue : 1;
|
||||
const maxRangeStep =
|
||||
activeElement && activeElement === maxRange.current ? stepValue : 1;
|
||||
|
||||
const ariaReadableMinPrice = minPriceInput / 10 ** currency.minorUnit;
|
||||
const ariaReadableMaxPrice = maxPriceInput / 10 ** currency.minorUnit;
|
||||
|
||||
return (
|
||||
<div className={ classes }>
|
||||
<div
|
||||
className="wc-block-price-filter__range-input-wrapper wc-block-components-price-slider__range-input-wrapper"
|
||||
onMouseMove={ findClosestRange }
|
||||
onFocus={ findClosestRange }
|
||||
>
|
||||
{ hasValidConstraints && (
|
||||
<div aria-hidden={ showInputFields }>
|
||||
<div
|
||||
className="wc-block-price-filter__range-input-progress wc-block-components-price-slider__range-input-progress"
|
||||
style={ progressStyles }
|
||||
/>
|
||||
<input
|
||||
type="range"
|
||||
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"
|
||||
aria-label={ __(
|
||||
'Filter products by minimum price',
|
||||
'woocommerce'
|
||||
) }
|
||||
aria-valuetext={ ariaReadableMinPrice }
|
||||
value={
|
||||
Number.isFinite( minPrice )
|
||||
? minPrice
|
||||
: minConstraint
|
||||
}
|
||||
onChange={ rangeInputOnChange }
|
||||
step={ minRangeStep }
|
||||
min={ minConstraint }
|
||||
max={ maxConstraint }
|
||||
ref={ minRange }
|
||||
disabled={ isLoading }
|
||||
tabIndex={ showInputFields ? '-1' : '0' }
|
||||
/>
|
||||
<input
|
||||
type="range"
|
||||
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"
|
||||
aria-label={ __(
|
||||
'Filter products by maximum price',
|
||||
'woocommerce'
|
||||
) }
|
||||
aria-valuetext={ ariaReadableMaxPrice }
|
||||
value={
|
||||
Number.isFinite( maxPrice )
|
||||
? maxPrice
|
||||
: maxConstraint
|
||||
}
|
||||
onChange={ rangeInputOnChange }
|
||||
step={ maxRangeStep }
|
||||
min={ minConstraint }
|
||||
max={ maxConstraint }
|
||||
ref={ maxRange }
|
||||
disabled={ isLoading }
|
||||
tabIndex={ showInputFields ? '-1' : '0' }
|
||||
/>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
|
||||
{ showInputFields && (
|
||||
<>
|
||||
<FormattedMonetaryAmount
|
||||
currency={ currency }
|
||||
displayType="input"
|
||||
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"
|
||||
aria-label={ __(
|
||||
'Filter products by minimum price',
|
||||
'woocommerce'
|
||||
) }
|
||||
onValueChange={ ( value ) => {
|
||||
if ( value === minPriceInput ) {
|
||||
return;
|
||||
}
|
||||
setMinPriceInput( value );
|
||||
} }
|
||||
onBlur={ priceInputOnBlur }
|
||||
disabled={ isLoading || ! hasValidConstraints }
|
||||
value={ minPriceInput }
|
||||
/>
|
||||
<FormattedMonetaryAmount
|
||||
currency={ currency }
|
||||
displayType="input"
|
||||
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"
|
||||
aria-label={ __(
|
||||
'Filter products by maximum price',
|
||||
'woocommerce'
|
||||
) }
|
||||
onValueChange={ ( value ) => {
|
||||
if ( value === maxPriceInput ) {
|
||||
return;
|
||||
}
|
||||
setMaxPriceInput( value );
|
||||
} }
|
||||
onBlur={ priceInputOnBlur }
|
||||
disabled={ isLoading || ! hasValidConstraints }
|
||||
value={ maxPriceInput }
|
||||
/>
|
||||
</>
|
||||
) }
|
||||
{ ! showInputFields &&
|
||||
! isLoading &&
|
||||
Number.isFinite( minPrice ) &&
|
||||
Number.isFinite( maxPrice ) && (
|
||||
<div className="wc-block-price-filter__range-text wc-block-components-price-slider__range-text">
|
||||
{ __( 'Price', 'woocommerce' ) }
|
||||
:
|
||||
<FormattedMonetaryAmount
|
||||
currency={ currency }
|
||||
value={ minPrice }
|
||||
/>
|
||||
–
|
||||
<FormattedMonetaryAmount
|
||||
currency={ currency }
|
||||
value={ maxPrice }
|
||||
/>
|
||||
</div>
|
||||
) }
|
||||
{ showFilterButton && (
|
||||
<FilterSubmitButton
|
||||
className="wc-block-price-filter__button wc-block-components-price-slider__button"
|
||||
disabled={ isLoading || ! hasValidConstraints }
|
||||
onClick={ onSubmit }
|
||||
screenReaderLabel={ __(
|
||||
'Apply price filter',
|
||||
'woocommerce'
|
||||
) }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
PriceSlider.propTypes = {
|
||||
/**
|
||||
* Callback fired when prices changes.
|
||||
*/
|
||||
onChange: PropTypes.func.isRequired,
|
||||
/**
|
||||
* Callback fired when the filter button is pressed.
|
||||
*/
|
||||
onSubmit: PropTypes.func,
|
||||
/**
|
||||
* Min value.
|
||||
*/
|
||||
minPrice: PropTypes.number,
|
||||
/**
|
||||
* Max value.
|
||||
*/
|
||||
maxPrice: PropTypes.number,
|
||||
/**
|
||||
* Minimum allowed price.
|
||||
*/
|
||||
minConstraint: PropTypes.number,
|
||||
/**
|
||||
* Maximum allowed price.
|
||||
*/
|
||||
maxConstraint: PropTypes.number,
|
||||
/**
|
||||
* Step for slider inputs.
|
||||
*/
|
||||
step: PropTypes.number,
|
||||
/**
|
||||
* Currency data used for formatting prices.
|
||||
*/
|
||||
currency: PropTypes.object.isRequired,
|
||||
/**
|
||||
* 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;
|
||||
@ -0,0 +1,42 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { useState } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import PriceSlider from '../';
|
||||
|
||||
export default {
|
||||
title: 'WooCommerce Blocks/@base-components/PriceSlider',
|
||||
component: PriceSlider,
|
||||
};
|
||||
|
||||
export const Default = () => {
|
||||
// PriceSlider expects client to update min & max price, i.e. is a controlled component
|
||||
const [ min, setMin ] = useState( 1000 );
|
||||
const [ max, setMax ] = useState( 5000 );
|
||||
return (
|
||||
<PriceSlider
|
||||
minPrice={ min }
|
||||
maxPrice={ max }
|
||||
onChange={ ( values ) => {
|
||||
setMin( values[ 0 ] );
|
||||
setMax( values[ 1 ] );
|
||||
} }
|
||||
minConstraint={ 1000 }
|
||||
maxConstraint={ 5000 }
|
||||
step={ 250 }
|
||||
currency={ {
|
||||
code: 'nzd',
|
||||
symbol: '$',
|
||||
thousandSeparator: ' ',
|
||||
decimalSeparator: '.',
|
||||
minorUnit: 2,
|
||||
prefix: '$',
|
||||
suffix: '',
|
||||
} }
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,360 @@
|
||||
/* stylelint-disable */
|
||||
@mixin thumb {
|
||||
background-color: transparent;
|
||||
background-position: 0 0;
|
||||
width: 28px;
|
||||
height: 23px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
z-index: 20;
|
||||
pointer-events: auto;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='56' height='46' viewBox='0 0 56 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M25.3176 9.9423L16.9013 3.7991C15.1953 2.5706 13.2618 1.9003 11.2146 2.0121H11.1009C6.21029 2.3471 2.11589 6.3681 2.00219 11.2827C1.88849 16.644 6.21019 21 11.6696 21H11.7833C13.603 21 15.4228 20.3298 16.9013 19.213L25.3176 12.958C26.2275 12.0645 26.2275 10.7242 25.3176 9.9423V9.9423Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M13 7V16M10 7V16V7Z' stroke='%23B8B8B8'/%3E%3Cpath d='M25.3176 9.94227L16.9013 3.79907C15.1953 2.57057 13.2618 1.90027 11.2146 2.01207H11.1009C6.21029 2.34707 2.11589 6.36807 2.00219 11.2827C1.88849 16.644 6.21019 21 11.6696 21H11.7833C13.603 21 15.4228 20.3298 16.9013 19.213L25.3176 12.958C26.2275 12.0645 26.2275 10.7242 25.3176 9.94227V9.94227Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M13 7V16M10 7V16V7Z' stroke='%23B8B8B8'/%3E%3Cpath d='M25.3176 32.9423L16.9013 26.7991C15.1953 25.5706 13.2618 24.9003 11.2146 25.0121H11.1009C6.21029 25.347 2.11589 29.368 2.00219 34.2827C1.88849 39.644 6.21019 44 11.6696 44H11.7833C13.603 44 15.4228 43.3298 16.9013 42.213L25.3176 35.958C26.2275 35.0645 26.2275 33.7242 25.3176 32.9423V32.9423Z' fill='%23F8F3F7' stroke='white' stroke-opacity='0.75' stroke-width='3'/%3E%3Cpath d='M25.3176 32.9423L16.9013 26.7991C15.1953 25.5706 13.2618 24.9003 11.2146 25.0121H11.1009C6.21029 25.347 2.11589 29.368 2.00219 34.2827C1.88849 39.644 6.21019 44 11.6696 44H11.7833C13.603 44 15.4228 43.3298 16.9013 42.213L25.3176 35.958C26.2275 35.0645 26.2275 33.7242 25.3176 32.9423V32.9423Z' stroke='%23757575'/%3E%3Cpath d='M13 30V39M10 30V39V30Z' stroke='%23757575'/%3E%3Cpath d='M30.6824 9.94227L39.0987 3.79907C40.8047 2.57057 42.7382 1.90027 44.7854 2.01207H44.8991C49.7897 2.34707 53.8841 6.36807 53.9978 11.2827C54.1115 16.644 49.7898 21 44.3304 21H44.2167C42.397 21 40.5772 20.3298 39.0987 19.213L30.6824 12.958C29.7725 12.0645 29.7725 10.7242 30.6824 9.94227V9.94227Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M43 6.99997V16M46 6.99997V16V6.99997Z' stroke='%23B8B8B8'/%3E%3Cpath d='M30.6824 32.9423L39.0987 26.7991C40.8047 25.5706 42.7382 24.9003 44.7854 25.0121H44.8991C49.7897 25.347 53.8841 29.368 53.9978 34.2827C54.1115 39.644 49.7898 44 44.3304 44H44.2167C42.397 44 40.5772 43.3298 39.0987 42.213L30.6824 35.958C29.7725 35.0645 29.7725 33.7242 30.6824 32.9423V32.9423Z' fill='%23F8F3F7' stroke='white' stroke-opacity='0.75' stroke-width='3'/%3E%3Cpath d='M30.6824 32.9423L39.0987 26.7991C40.8047 25.5706 42.7382 24.9003 44.7854 25.0121H44.8991C49.7897 25.347 53.8841 29.368 53.9978 34.2827C54.1115 39.644 49.7898 44 44.3304 44H44.2167C42.397 44 40.5772 43.3298 39.0987 42.213L30.6824 35.958C29.7725 35.0645 29.7725 33.7242 30.6824 32.9423V32.9423Z' stroke='%23757575'/%3E%3Cpath d='M43 30V39M46 30V39V30Z' stroke='%23757575'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='56' height='46' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
|
||||
transition: transform .2s ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:hover {
|
||||
@include thumbFocus;
|
||||
}
|
||||
}
|
||||
@mixin thumbFocus {
|
||||
background-position-y: -23px;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
/* stylelint-enable */
|
||||
@mixin track {
|
||||
cursor: default;
|
||||
height: 1px; /* Required for Samsung internet based browsers */
|
||||
outline: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
@mixin reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.wc-block-components-price-slider {
|
||||
margin-bottom: $gap-large;
|
||||
|
||||
&.wc-block-components-price-slider--has-filter-button {
|
||||
.wc-block-components-price-slider__controls {
|
||||
justify-content: flex-end;
|
||||
|
||||
.wc-block-components-price-slider__amount.wc-block-components-price-slider__amount--max {
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loading,
|
||||
&.is-disabled {
|
||||
.wc-block-components-price-slider__range-input-wrapper,
|
||||
.wc-block-components-price-slider__amount,
|
||||
.wc-block-components-price-slider__button {
|
||||
@include placeholder();
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled:not(.is-loading) {
|
||||
.wc-block-components-price-slider__range-input-wrapper,
|
||||
.wc-block-components-price-slider__amount,
|
||||
.wc-block-components-price-slider__button {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
@include reset;
|
||||
height: 9px;
|
||||
clear: both;
|
||||
position: relative;
|
||||
box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1);
|
||||
background: #e1e1e1;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.wc-block-components-price-slider__range-input-progress {
|
||||
height: 9px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
--track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
|
||||
--range-color: #{$studio-woocommerce-purple-30};
|
||||
/*rtl:ignore*/
|
||||
background: var(--track-background);
|
||||
}
|
||||
|
||||
.wc-block-components-price-slider__controls {
|
||||
display: flex;
|
||||
|
||||
.wc-block-components-price-slider__amount {
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
width: auto;
|
||||
max-width: 100px;
|
||||
min-width: 0;
|
||||
|
||||
&.wc-block-components-price-slider__amount--min {
|
||||
margin-right: 10px;
|
||||
}
|
||||
&.wc-block-components-price-slider__amount--max {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wc-block-components-price-slider__range-input {
|
||||
@include reset;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
display: block;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
outline: none !important;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include track;
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
@include thumb;
|
||||
margin: -6px 0 0 0;
|
||||
}
|
||||
&::-webkit-slider-progress {
|
||||
@include reset;
|
||||
}
|
||||
|
||||
&::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
&::-moz-range-track {
|
||||
@include track;
|
||||
}
|
||||
&::-moz-range-progress {
|
||||
@include reset;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
@include thumb;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include thumb;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&::-webkit-slider-thumb {
|
||||
@include thumbFocus;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
@include thumbFocus;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include thumbFocus;
|
||||
}
|
||||
}
|
||||
|
||||
&.wc-block-components-price-slider__range-input--min {
|
||||
z-index: 21;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
margin-left: -2px;
|
||||
background-position-x: left;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
background-position-x: left;
|
||||
transform: translate(-2px, 4px);
|
||||
}
|
||||
&::-ms-thumb {
|
||||
background-position-x: left;
|
||||
}
|
||||
}
|
||||
|
||||
&.wc-block-components-price-slider__range-input--max {
|
||||
z-index: 20;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background-position-x: right;
|
||||
margin-left: 2px;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
background-position-x: right;
|
||||
transform: translate(2px, 4px);
|
||||
}
|
||||
&::-ms-thumb {
|
||||
background-position-x: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.wc-block-components-price-slider__range-input-progress {
|
||||
--track-background: linear-gradient(to left, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
|
||||
--range-color: #{$studio-woocommerce-purple-30};
|
||||
background: var(--track-background);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ie-fixes() {
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
height: 24px;
|
||||
}
|
||||
.wc-block-components-price-slider__range-input-progress {
|
||||
background: #{$studio-woocommerce-purple-30};
|
||||
width: 100%;
|
||||
top: 7px;
|
||||
}
|
||||
.wc-block-components-price-slider__range-input {
|
||||
height: 24px;
|
||||
pointer-events: auto;
|
||||
|
||||
&::-ms-track {
|
||||
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
|
||||
background: transparent;
|
||||
|
||||
/*leave room for the larger thumb to overflow with a transparent border */
|
||||
border-color: transparent;
|
||||
border-width: 7px 0;
|
||||
|
||||
/*remove default tick marks*/
|
||||
color: transparent;
|
||||
}
|
||||
&::-ms-fill-lower {
|
||||
background: #e1e1e1;
|
||||
box-shadow: 0 0 0 1px inset #b8b8b8;
|
||||
}
|
||||
&::-ms-fill-upper {
|
||||
background: transparent;
|
||||
}
|
||||
&::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
transform: translate(1px, 0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.wc-block-components-price-slider__range-input--max {
|
||||
&::-ms-fill-upper {
|
||||
background: #e1e1e1;
|
||||
box-shadow: 0 0 0 1px inset #b8b8b8;
|
||||
}
|
||||
&::-ms-fill-lower {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-price-slider {
|
||||
&.is-loading,
|
||||
&.is-disabled {
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
@include placeholder();
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled:not(.is-loading) {
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* IE 11 will not support multi-range slider due to poor pointer-events support on the thumb. Reverts to 2 sliders. */
|
||||
@include ie11() {
|
||||
@include ie-fixes();
|
||||
}
|
||||
|
||||
// Targets Edge <= 18.
|
||||
@supports (-ms-ime-align:auto) {
|
||||
@include ie-fixes();
|
||||
}
|
||||
|
||||
.theme-twentytwentyone {
|
||||
$border-width: 3px;
|
||||
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
background: transparent;
|
||||
border: $border-width solid currentColor;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wc-block-components-price-slider__range-input-progress {
|
||||
--range-color: currentColor;
|
||||
margin: -$border-width;
|
||||
}
|
||||
|
||||
.wc-block-price-filter__range-input {
|
||||
background: transparent;
|
||||
margin: -$border-width;
|
||||
width: calc(100% + #{$border-width * 2});
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
&::-webkit-slider-thumb {
|
||||
filter: none;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
filter: none;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
&.wc-block-components-price-slider__range-input--max::-moz-range-thumb {
|
||||
transform: translate(2px, 1px);
|
||||
}
|
||||
|
||||
&.wc-block-components-price-slider__range-input--min::-moz-range-thumb {
|
||||
transform: translate(-2px, 1px);
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include ie11() {
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
border: 0;
|
||||
height: auto;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.wc-block-components-price-slider__range-input-progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wc-block-price-filter__range-input {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { constrainRangeSliderValues } from '../constrain-range-slider-values';
|
||||
|
||||
describe( 'constrainRangeSliderValues', () => {
|
||||
test.each`
|
||||
values | min | max | step | isMin | expected
|
||||
${ [ 20, 60 ] } | ${ 0 } | ${ 70 } | ${ 10 } | ${ true } | ${ [ 20, 60 ] }
|
||||
${ [ 20, 60 ] } | ${ 20 } | ${ 60 } | ${ 10 } | ${ true } | ${ [ 20, 60 ] }
|
||||
${ [ 20, 60 ] } | ${ 30 } | ${ 50 } | ${ 10 } | ${ true } | ${ [ 30, 50 ] }
|
||||
${ [ 50, 50 ] } | ${ 20 } | ${ 60 } | ${ 10 } | ${ true } | ${ [ 50, 60 ] }
|
||||
${ [ 50, 50 ] } | ${ 20 } | ${ 60 } | ${ 10 } | ${ false } | ${ [ 40, 50 ] }
|
||||
${ [ 20, 60 ] } | ${ null } | ${ null } | ${ 10 } | ${ true } | ${ [ 20, 60 ] }
|
||||
${ [ null, null ] } | ${ 20 } | ${ 60 } | ${ 10 } | ${ true } | ${ [ 20, 60 ] }
|
||||
${ [ '20', '60' ] } | ${ 30 } | ${ 50 } | ${ 10 } | ${ true } | ${ [ 30, 50 ] }
|
||||
${ [ -60, -20 ] } | ${ -70 } | ${ 0 } | ${ 10 } | ${ true } | ${ [ -60, -20 ] }
|
||||
${ [ -60, -20 ] } | ${ -60 } | ${ -20 } | ${ 10 } | ${ true } | ${ [ -60, -20 ] }
|
||||
${ [ -60, -20 ] } | ${ -50 } | ${ -30 } | ${ 10 } | ${ true } | ${ [ -50, -30 ] }
|
||||
${ [ -50, -50 ] } | ${ -60 } | ${ -20 } | ${ 10 } | ${ true } | ${ [ -50, -40 ] }
|
||||
${ [ -50, -50 ] } | ${ -60 } | ${ -20 } | ${ 10 } | ${ false } | ${ [ -60, -50 ] }
|
||||
${ [ -60, -20 ] } | ${ null } | ${ null } | ${ 10 } | ${ true } | ${ [ -60, -20 ] }
|
||||
${ [ null, null ] } | ${ -60 } | ${ -20 } | ${ 10 } | ${ true } | ${ [ -60, -20 ] }
|
||||
${ [ '-60', '-20' ] } | ${ -50 } | ${ -30 } | ${ 10 } | ${ true } | ${ [ -50, -30 ] }
|
||||
`(
|
||||
`correctly sets prices to its constraints with arguments values: $values, min: $min, max: $max, step: $step and isMin: $isMin`,
|
||||
( { values, min, max, step, isMin, expected } ) => {
|
||||
const constrainedValues = constrainRangeSliderValues(
|
||||
values,
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
isMin
|
||||
);
|
||||
|
||||
expect( constrainedValues ).toEqual( expected );
|
||||
}
|
||||
);
|
||||
} );
|
||||
Reference in New Issue
Block a user