From 0f73ad48fb097bbb10a2bc6731c3be38a367df24 Mon Sep 17 00:00:00 2001 From: Bharathidasan Elangovan Date: Fri, 17 Jan 2025 12:16:05 +0530 Subject: [PATCH] Price slider implementation --- .../lib/talons/FilterModal/helpers.js | 2 +- .../lib/talons/FilterModal/useFilterBlock.js | 11 +- .../talons/FilterSidebar/useFilterSidebar.js | 7 +- .../CurrentFilters/currentFilter.js | 12 +- .../FilterModal/FilterList/filterList.js | 131 +++++++++--- .../lib/components/FilterModal/filterBlock.js | 3 +- .../components/FilterSidebar/filterSidebar.js | 28 +++ .../lib/components/RangeSlider/rangeSlider.js | 197 ++++++++++++++++++ .../RangeSlider/rangeSlider.module.css | 76 +++++++ 9 files changed, 428 insertions(+), 39 deletions(-) create mode 100644 packages/venia-ui/lib/components/RangeSlider/rangeSlider.js create mode 100644 packages/venia-ui/lib/components/RangeSlider/rangeSlider.module.css diff --git a/packages/peregrine/lib/talons/FilterModal/helpers.js b/packages/peregrine/lib/talons/FilterModal/helpers.js index 5d3a7b163c..cd958399c2 100644 --- a/packages/peregrine/lib/talons/FilterModal/helpers.js +++ b/packages/peregrine/lib/talons/FilterModal/helpers.js @@ -54,7 +54,7 @@ export const getStateFromSearch = (initialValue, filterKeys, filterItems) => { if (existingFilter) { items.add(existingFilter); - } else { + } else if (group !== 'price') { console.warn( `Existing filter ${value} not found in possible filters` ); diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterBlock.js b/packages/peregrine/lib/talons/FilterModal/useFilterBlock.js index 8691516d95..e6542aa943 100644 --- a/packages/peregrine/lib/talons/FilterModal/useFilterBlock.js +++ b/packages/peregrine/lib/talons/FilterModal/useFilterBlock.js @@ -1,13 +1,20 @@ import { useCallback, useState, useEffect, useMemo } from 'react'; +import { useLocation } from 'react-router-dom'; export const useFilterBlock = props => { - const { filterState, items, initialOpen } = props; + const { filterState, items, initialOpen, group } = props; + const location = useLocation(); const hasSelected = useMemo(() => { + const params = new URLSearchParams(location.search); + //expansion of price filter dropdown + if (group == 'price') { + return params.get('price[filter]') ? true : false; + } return items.some(item => { return filterState && filterState.has(item); }); - }, [filterState, items]); + }, [filterState, items, group, location.search]); const [isExpanded, setExpanded] = useState(hasSelected || initialOpen); diff --git a/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js b/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js index fbcc2bce3f..688e957db3 100644 --- a/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js +++ b/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js @@ -182,9 +182,10 @@ export const useFilterSidebar = props => { }, [handleClose]); const handleReset = useCallback(() => { - filterApi.clear(); - setIsApplying(true); - }, [filterApi, setIsApplying]); + //filterApi.clear(); + //setIsApplying(true); + history.replace({ search: 'page=1' }); + }, [history]); const handleKeyDownActions = useCallback( event => { diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js index 8578c5546d..91a42d7950 100644 --- a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js +++ b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js @@ -2,6 +2,7 @@ import React, { useCallback } from 'react'; import { useIntl } from 'react-intl'; import { shape, string, func } from 'prop-types'; import { X as Remove } from 'react-feather'; +import { useHistory, useLocation } from 'react-router-dom'; import { useStyle } from '../../../classify'; import Icon from '../../Icon'; @@ -12,13 +13,22 @@ const CurrentFilter = props => { const { group, item, removeItem, onRemove } = props; const classes = useStyle(defaultClasses, props.classes); const { formatMessage } = useIntl(); + const location = useLocation(); + const history = useHistory(); const handleClick = useCallback(() => { removeItem({ group, item }); if (typeof onRemove === 'function') { onRemove(group, item); } - }, [group, item, removeItem, onRemove]); + + if (group == 'price') { + // preserve all existing params + const params = new URLSearchParams(location.search); + params.delete('price[filter]'); + history.replace({ search: params.toString() }); + } + }, [group, item, removeItem, onRemove, history, location.search]); const ariaLabel = formatMessage( { diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js index 0acf3d07c1..67462df866 100644 --- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js +++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js @@ -1,4 +1,4 @@ -import React, { Fragment, useMemo } from 'react'; +import React, { Fragment, useMemo, useState, useRef } from 'react'; import { array, func, number, shape, string } from 'prop-types'; import { useIntl } from 'react-intl'; import setValidator from '@magento/peregrine/lib/validators/set'; @@ -8,6 +8,8 @@ import { useStyle } from '../../../classify'; import FilterItem from './filterItem'; import defaultClasses from './filterList.module.css'; import FilterItemRadioGroup from './filterItemRadioGroup'; +import RangeSlider from '../../RangeSlider/rangeSlider'; +import { useHistory, useLocation } from 'react-router-dom'; const labels = new WeakMap(); @@ -22,13 +24,65 @@ const FilterList = props => { items, onApply } = props; + const { pathname, search } = useLocation(); + const history = useHistory(); const classes = useStyle(defaultClasses, props.classes); const talonProps = useFilterList({ filterState, items, itemCountToShow }); const { isListExpanded, handleListToggle } = talonProps; const { formatMessage } = useIntl(); - // memoize item creation - // search value is not referenced, so this array is stable + if (name === 'Price') { + debugger; + var minRange = Number(items[0].value.split('_')[0]); + var maxRange = Number(items[items.length - 1].value.split('_')[1]); + } + + const [value, setValue] = useState([ + minRange ? minRange : null, + maxRange ? maxRange : null + ]); + + const [isSliding, setIsSliding] = useState(false); // Track whether the user is sliding + const sliderTimeoutRef = useRef(null); + + const handleSliderStart = () => { + setIsSliding(true); // User started sliding + if (sliderTimeoutRef.current) { + clearTimeout(sliderTimeoutRef.current); + } + }; + + const handleSliderEnd = newValue => { + setIsSliding(false); // User stopped sliding + // Call the actual onChange only after a brief delay (debounce) + sliderTimeoutRef.current = setTimeout(() => { + handleChange(newValue); + }, 300); // Delay of 300ms after the user stops interacting with the slider + }; + + const handleChange = newValue => { + // Remove the previous price filter from the URL + const test = String(search).split('&'); + const filters = test.filter(element => { + return !element.includes('price'); + }); + const newSearch = filters.join('&'); + const nextParams = new URLSearchParams(newSearch); + + // Append the new price filter range in the URL + const DELIMITER = ','; + const title = String(newValue.min) + '-' + String(newValue.max); + const value = String(newValue.min) + '_' + String(newValue.max); + nextParams.append(`${group}[filter]`, `${title}${DELIMITER}${value}`); + + // Write price filter state to history + history.push({ pathname, search: String(nextParams) }); + + // Set new value to the slider when the slider stops + setValue(newValue); + }; + + // Memoize item creation const itemElements = useMemo(() => { if (filterFrontendInput === 'boolean') { const key = `item-${group}`; @@ -51,36 +105,44 @@ const FilterList = props => { ); } - return items.map((item, index) => { - const { title, value } = item; - const key = `item-${group}-${value}`; - - if (!isListExpanded && index >= itemCountToShow) { - return null; - } - - // create an element for each item - const element = ( -
  • - + -
    • + ); + } else { + return items.map((item, index) => { + const { title, value } = item; + const key = `item-${group}-${value}`; - // 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; - }); + if (!isListExpanded && index >= itemCountToShow) { + return null; + } + + const element = ( +
  • + +
    • + ); + labels.set(element, title.toUpperCase()); + return element; + }); + } }, [ classes, filterApi, @@ -91,7 +153,14 @@ const FilterList = props => { items, isListExpanded, itemCountToShow, - onApply + onApply, + history, + minRange, + maxRange, + pathname, + search, + value, + isSliding ]); 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/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 ( + //
    + // {/* Display Price Value */} + //
    + // + // {currencyText} {minVal} + // + + //
    + + // + // {currencyText} {maxVal} + // + //
    + + // {/* Slider */} + //
    + //
    + //
    + // {/* Min slider */} + // { + // const value = Math.min(Number(event.target.value), maxVal - 1); + // setMinVal(value); + // }} + // className="thumb thumb-left" + // style={{ + // position: 'absolute', + // zIndex: 2, + // width, + // top: '50%', + // transform: 'translateY(-50%)', + // background: 'none', + // }} + // /> + + // {/* Max slider */} + // { + // const value = Math.max(Number(event.target.value), minVal + 1); + // setMaxVal(value); + // }} + // className="thumb thumb-right" + // style={{ + // position: 'absolute', + // zIndex: 3, + // width, + // top: '50%', + // transform: 'translateY(-50%)', + // background: 'none', + // }} + // /> + //
    + //
    + //
    +
    + {/* Display Price Value */} +
    + {minVal} + {maxVal} +
    + + {/* Style the price range slider */} +
    + { + const value = Math.min( + Number(event.target.value), + maxVal - 1 + ); + setMinVal(value); + }} + className={`${styles.thumb} ${styles.thumbleft}`} + style={{ + width, + zIndex: + minVal > max - 100 || minVal === maxVal + ? 5 + : undefined + }} + /> + + { + const value = Math.max( + Number(event.target.value), + minVal + 1 + ); + setMaxVal(value); + }} + className={`${styles.thumb} ${styles.thumbright}`} + style={{ + width, + zIndex: + minVal > max - 100 || minVal === maxVal + ? 4 + : undefined + }} + /> + +
    +
    + +
    +
    +
    +
    + ); +}; + +export default PriceRangeSlider; diff --git a/packages/venia-ui/lib/components/RangeSlider/rangeSlider.module.css b/packages/venia-ui/lib/components/RangeSlider/rangeSlider.module.css new file mode 100644 index 0000000000..1fe684beac --- /dev/null +++ b/packages/venia-ui/lib/components/RangeSlider/rangeSlider.module.css @@ -0,0 +1,76 @@ +.slider { + position: relative; +} + +.trackslider, +.rangeslider { + position: absolute; +} + +.trackslider, +.rangeslider { + border-radius: 4px; + height: 6px; +} + +.trackslider { + background-color: #022140; + width: 100%; + z-index: 1; +} + +.rangeslider { + z-index: 2; +} + +.thumb, +.thumb::-webkit-slider-thumb { + -webkit-appearance: none; + -webkit-tap-highlight-color: transparent; +} + +.thumb { + pointer-events: none; + position: absolute; + height: 0; + outline: none; +} + +.thumbleft { + z-index: 3; +} + +.thumbright { + z-index: 4; +} + +.thumb::-webkit-slider-thumb { + background-color: #2954fe; + border-radius: 50%; + /* box-shadow: 0 0 1px 1px #f50707; */ + /* border: 4px solid #ff0303; */ + cursor: pointer; + height: 20px; + width: 20px; + margin-top: 4.5px; + pointer-events: all; + position: relative; + transition: transform 0.3s ease-in-out; +} + +.thumb::-webkit-slider-thumb:hover { + transform: scale(1.2); +} + +.thumb::-moz-range-thumb { + background-color: #0a0a0a; + border-radius: 50%; + /* box-shadow: 0 0 1px 1px #f50707; */ + border: 4px solid #ff0303; + cursor: pointer; + height: 28px; + width: 28px; + margin-top: 4.5px; + pointer-events: all; + position: relative; +}