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