| 1 |
/** |
| 2 |
* WordPress dependencies. |
| 3 |
*/ |
| 4 |
import { render, useLayoutEffect, useMemo, useState, WPElement } from '@wordpress/element'; |
| 5 |
import domReady from '@wordpress/dom-ready'; |
| 6 |
|
| 7 |
/** |
| 8 |
* Internal dependencies. |
| 9 |
*/ |
| 10 |
import RangeFilter from '../common/components/range-filter'; |
| 11 |
|
| 12 |
/** |
| 13 |
* App component. |
| 14 |
* |
| 15 |
* Accepts input elements as properties. These elements are used to derive the |
| 16 |
* current, minimum, and maximum values, and are updated with new values as the |
| 17 |
* range slider is used. |
| 18 |
* |
| 19 |
* @param {object} props Components props. |
| 20 |
* @param {Element} props.max Maximum value input element. |
| 21 |
* @param {Element} props.min Minimum value input element. |
| 22 |
* @returns {WPElement} |
| 23 |
*/ |
| 24 |
const App = ({ max, min }) => { |
| 25 |
/** |
| 26 |
* Minimum and maximum possible values. |
| 27 |
*/ |
| 28 |
const maxAgg = Math.ceil(max.max); |
| 29 |
const minAgg = Math.floor(min.min); |
| 30 |
|
| 31 |
/** |
| 32 |
* Selected minimum and maximum values. |
| 33 |
*/ |
| 34 |
const defaultTo = max.value ? parseInt(max.value, 10) : maxAgg; |
| 35 |
const defaultFrom = min.value ? parseInt(min.value, 10) : minAgg; |
| 36 |
|
| 37 |
/** |
| 38 |
* Current minimum and maximum values. |
| 39 |
*/ |
| 40 |
const [to, setTo] = useState(defaultTo); |
| 41 |
const [from, setFrom] = useState(defaultFrom); |
| 42 |
|
| 43 |
/** |
| 44 |
* Prefix and suffix. |
| 45 |
*/ |
| 46 |
const prefix = useMemo(() => min.dataset.prefix, [min]); |
| 47 |
const suffix = useMemo(() => min.dataset.suffix, [min]); |
| 48 |
|
| 49 |
/** |
| 50 |
* Clear URL. |
| 51 |
*/ |
| 52 |
const clearUrl = useMemo(() => (min.value !== '' ? min.form.action : null), [min]); |
| 53 |
|
| 54 |
/** |
| 55 |
* Handle change. |
| 56 |
* |
| 57 |
* @param {Array} value Value range. |
| 58 |
* @param {number} value.0 Minimum value. |
| 59 |
* @param {number} value.1 Mximum value. |
| 60 |
* @returns {void} |
| 61 |
*/ |
| 62 |
const onChange = ([from, to]) => { |
| 63 |
setTo(to); |
| 64 |
setFrom(from); |
| 65 |
}; |
| 66 |
|
| 67 |
/** |
| 68 |
* Effects. |
| 69 |
*/ |
| 70 |
useLayoutEffect(() => { |
| 71 |
max.value = Math.min(maxAgg, to); |
| 72 |
min.value = Math.max(minAgg, from); |
| 73 |
}, [from, to, min, max, minAgg, maxAgg]); |
| 74 |
|
| 75 |
/** |
| 76 |
* Render. |
| 77 |
*/ |
| 78 |
return ( |
| 79 |
<RangeFilter |
| 80 |
clearUrl={clearUrl} |
| 81 |
max={maxAgg} |
| 82 |
min={minAgg} |
| 83 |
prefix={prefix} |
| 84 |
suffix={suffix} |
| 85 |
onChange={onChange} |
| 86 |
value={[from, to]} |
| 87 |
/> |
| 88 |
); |
| 89 |
}; |
| 90 |
|
| 91 |
/** |
| 92 |
* Initialize. |
| 93 |
* |
| 94 |
* @returns {void} |
| 95 |
*/ |
| 96 |
const init = () => { |
| 97 |
const blocks = document.querySelectorAll('.ep-facet-meta-range'); |
| 98 |
|
| 99 |
blocks.forEach((block) => { |
| 100 |
const [min, max] = block.querySelectorAll('input[type="hidden"]'); |
| 101 |
const el = document.createElement('div'); |
| 102 |
|
| 103 |
block.insertAdjacentElement('afterbegin', el); |
| 104 |
|
| 105 |
render(<App min={min} max={max} />, el); |
| 106 |
}); |
| 107 |
}; |
| 108 |
|
| 109 |
domReady(init); |
| 110 |
|
