|
@@ -10,7 +10,6 @@ type PriceFilterNode = {
|
|
|
minPrice: string;
|
|
minPrice: string;
|
|
|
maxPrice: string;
|
|
maxPrice: string;
|
|
|
};
|
|
};
|
|
|
-
|
|
|
|
|
type PriceSelectedRange = {
|
|
type PriceSelectedRange = {
|
|
|
minPrice?: number;
|
|
minPrice?: number;
|
|
|
maxPrice?: number;
|
|
maxPrice?: number;
|
|
@@ -33,17 +32,20 @@ export default function PriceRangeSlider({
|
|
|
}: Props) {
|
|
}: Props) {
|
|
|
const apiMin = Number(priceAttr.minPrice);
|
|
const apiMin = Number(priceAttr.minPrice);
|
|
|
const apiMax = Number(priceAttr.maxPrice);
|
|
const apiMax = Number(priceAttr.maxPrice);
|
|
|
|
|
+
|
|
|
// 保存【基准初始值快照】用来拖拽结束对比
|
|
// 保存【基准初始值快照】用来拖拽结束对比
|
|
|
const baselineRangeRef = useRef<PriceRange>({
|
|
const baselineRangeRef = useRef<PriceRange>({
|
|
|
minPrice: apiMin,
|
|
minPrice: apiMin,
|
|
|
maxPrice: apiMax,
|
|
maxPrice: apiMax,
|
|
|
});
|
|
});
|
|
|
|
|
+ // 记录上一次effect计算出来的值,避免无意义setState
|
|
|
|
|
+ const lastComputedRef = useRef<[number, number] | null>(null);
|
|
|
|
|
+
|
|
|
const [sliderValue, setSliderValue] = useState<number[]>([apiMin, apiMax]);
|
|
const [sliderValue, setSliderValue] = useState<number[]>([apiMin, apiMax]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
let startMin = apiMin;
|
|
let startMin = apiMin;
|
|
|
let startMax = apiMax;
|
|
let startMax = apiMax;
|
|
|
-
|
|
|
|
|
if (initialRange?.minPrice !== undefined) {
|
|
if (initialRange?.minPrice !== undefined) {
|
|
|
startMin = Math.max(initialRange.minPrice, apiMin);
|
|
startMin = Math.max(initialRange.minPrice, apiMin);
|
|
|
}
|
|
}
|
|
@@ -52,10 +54,22 @@ export default function PriceRangeSlider({
|
|
|
}
|
|
}
|
|
|
// 强制约束:左滑块不能大于右滑块
|
|
// 强制约束:左滑块不能大于右滑块
|
|
|
if (startMin > startMax) startMin = startMax;
|
|
if (startMin > startMax) startMin = startMax;
|
|
|
|
|
+
|
|
|
const newInitial: PriceRange = {
|
|
const newInitial: PriceRange = {
|
|
|
minPrice: startMin,
|
|
minPrice: startMin,
|
|
|
maxPrice: startMax,
|
|
maxPrice: startMax,
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
|
|
+ // 数值完全一样,跳过setState,防止无谓渲染
|
|
|
|
|
+ if (
|
|
|
|
|
+ lastComputedRef.current?.[0] === startMin &&
|
|
|
|
|
+ lastComputedRef.current?.[1] === startMax
|
|
|
|
|
+ ) {
|
|
|
|
|
+ baselineRangeRef.current = newInitial;
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ lastComputedRef.current = [startMin, startMax];
|
|
|
setSliderValue([startMin, startMax]);
|
|
setSliderValue([startMin, startMax]);
|
|
|
// 更新基准快照
|
|
// 更新基准快照
|
|
|
baselineRangeRef.current = newInitial;
|
|
baselineRangeRef.current = newInitial;
|
|
@@ -80,16 +94,19 @@ export default function PriceRangeSlider({
|
|
|
}
|
|
}
|
|
|
onChangeComplete(newRange);
|
|
onChangeComplete(newRange);
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
// 货币符号
|
|
// 货币符号
|
|
|
const { getCurrentCurrencyItem } = useConfig();
|
|
const { getCurrentCurrencyItem } = useConfig();
|
|
|
const currentCurrency = getCurrentCurrencyItem();
|
|
const currentCurrency = getCurrentCurrencyItem();
|
|
|
const currencySymbol = currentCurrency.symbol;
|
|
const currencySymbol = currentCurrency.symbol;
|
|
|
const currencyCode = currentCurrency.code;
|
|
const currencyCode = currentCurrency.code;
|
|
|
|
|
+
|
|
|
return (
|
|
return (
|
|
|
<div className="py-5">
|
|
<div className="py-5">
|
|
|
<p className="text-base mb-4">
|
|
<p className="text-base mb-4">
|
|
|
Range: {currencySymbol}
|
|
Range: {currencySymbol}
|
|
|
- {sliderValue[0].toFixed(2)}-${sliderValue[1].toFixed(2)}
|
|
|
|
|
|
|
+ {sliderValue[0].toFixed(2)} - {currencySymbol}
|
|
|
|
|
+ {sliderValue[1].toFixed(2)}
|
|
|
</p>
|
|
</p>
|
|
|
<Slider
|
|
<Slider
|
|
|
minValue={apiMin}
|
|
minValue={apiMin}
|