refactor(range): make range connector more consistent and simpler to …

…use (#6508) BREAKING CHANGE: `start` is now called `currentRefinement` and its data structure and behavior are different
algolia · Jan 7, 2025 · d8aa9b7 · d8aa9b7
1 parent 6f08079
commit d8aa9b7
Show file tree

Hide file tree

Showing 18 changed files with 280 additions and 275 deletions.
diff --git a/examples/react/e-commerce/components/PriceSlider.tsx b/examples/react/e-commerce/components/PriceSlider.tsx
@@ -1,4 +1,4 @@
-import { Range, RangeBoundaries } from 'instantsearch-core';
+import { Range } from 'instantsearch-core';
 import React, { useState } from 'react';
 import {
   Slider,
@@ -56,16 +56,13 @@ function Handle({
   );
 }
 
-function convertToTicks(start: RangeBoundaries, range: Range): number[] {
+function convertToTicks({ min, max }: Range, range: Range): readonly number[] {
   const domain =
     range.min === 0 && range.max === 0
       ? { min: undefined, max: undefined }
       : range;
 
-  return [
-    start[0] === -Infinity ? domain.min! : start[0]!,
-    start[1] === Infinity ? domain.max! : start[1]!,
-  ];
+  return [min || domain.min!, max || domain.max!];
 }
 
 export function PriceSlider({
@@ -77,30 +74,24 @@ export function PriceSlider({
   min?: number;
   max?: number;
 }) {
-  const { range, start, refine, canRefine } = useRange(
+  const { range, currentRefinement, refine, canRefine } = useRange(
     {
       attribute,
       min,
       max,
     },
     { $$widgetType: 'e-commerce.rangeSlider' }
   );
-  const [ticksValues, setTicksValues] = useState(convertToTicks(start, range));
-  const [prevStart, setPrevStart] = useState(start);
+  const [ticksValues, setTicksValues] = useState(
+    convertToTicks(currentRefinement, range)
+  );
+  const [prevRefinement, setPrevRefinement] = useState(currentRefinement);
 
-  if (start !== prevStart) {
-    setTicksValues(convertToTicks(start, range));
-    setPrevStart(start);
+  if (currentRefinement !== prevRefinement) {
+    setTicksValues(convertToTicks(currentRefinement, range));
+    setPrevRefinement(currentRefinement);
   }
 
-  const onChange = (values: readonly number[]) => {
-    refine(values as [number, number]);
-  };
-
-  const onUpdate = (values: readonly number[]) => {
-    setTicksValues(values as [number, number]);
-  };
-
   if (
     !canRefine ||
     ticksValues[0] === undefined ||
@@ -114,10 +105,13 @@ export function PriceSlider({
       mode={2}
       step={1}
       domain={[range.min!, range.max!]}
-      values={start as number[]}
+      values={[
+        currentRefinement.min || range.min!,
+        currentRefinement.max || range.max!,
+      ]}
       disabled={!canRefine}
-      onChange={onChange}
-      onUpdate={onUpdate}
+      onChange={([newMin, newMax]) => refine({ min: newMin, max: newMax })}
+      onUpdate={(values) => setTicksValues(values)}
       rootStyle={{ position: 'relative', marginTop: '1.5rem' }}
       className="ais-RangeSlider"
     >