97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
import React, { useState, useEffect, useMemo } from "react";
|
|
import { View, Text, Image } from "@tarojs/components";
|
|
import { Range } from "@nutui/nutui-react-taro";
|
|
import styles from "./index.module.scss";
|
|
import TitleComponent from "../Title";
|
|
import img from "../../config/images";
|
|
|
|
interface RangeProps {
|
|
min?: number;
|
|
max?: number;
|
|
step?: number;
|
|
value?: [number, number];
|
|
onChange?: (name: string, value: [number, number]) => void;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
name: string;
|
|
showTitle?: boolean;
|
|
}
|
|
|
|
const NtrpRange: React.FC<RangeProps> = ({
|
|
min = 1.0,
|
|
max = 5.0,
|
|
step = 0.5,
|
|
value = [min, max],
|
|
onChange,
|
|
disabled = false,
|
|
className,
|
|
name,
|
|
showTitle = true,
|
|
}) => {
|
|
const [currentValue, setCurrentValue] = useState<[number, number]>(value);
|
|
|
|
useEffect(() => {
|
|
value && setCurrentValue(value);
|
|
}, [JSON.stringify(value || [])]);
|
|
|
|
const handleChange = (val: [number, number]) => {
|
|
setCurrentValue(val);
|
|
onChange?.(name, val);
|
|
};
|
|
|
|
const marks = useMemo(() => {
|
|
let marksMap = {};
|
|
for (let i = min + step; i < max; i += step) {
|
|
marksMap[i] = "";
|
|
}
|
|
return marksMap;
|
|
}, [min, max, step]);
|
|
|
|
const rangContent = useMemo(() => {
|
|
const [start, end] = currentValue || [];
|
|
if (Number(start) === Number(min) && Number(end) === Number(max)) {
|
|
return "不限";
|
|
}
|
|
return `${start.toFixed(1)} - ${end.toFixed(1)}之间`;
|
|
}, [JSON.stringify(currentValue || []), min, max]);
|
|
|
|
return (
|
|
<div className={`${styles.nutRange} ${className ? className : ""} `}>
|
|
{showTitle && (
|
|
<div className={styles.nutRangeHeader}>
|
|
<TitleComponent
|
|
title="NTRP水平区间"
|
|
icon={<Image src={img.ICON_PLAY} />}
|
|
/>
|
|
<p className={styles.nutRangeHeaderContent}>{rangContent}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<div className={`${styles.rangeWrapper} rangeContent`}>
|
|
<span className={styles.rangeWrapperMin}>{min.toFixed(1)}</span>
|
|
<Range
|
|
range
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={currentValue}
|
|
onEnd={handleChange}
|
|
onChange={handleChange}
|
|
disabled={disabled}
|
|
defaultValue={[min, max]}
|
|
className={styles.rangeHandle}
|
|
maxDescription={null}
|
|
minDescription={null}
|
|
currentDescription={null}
|
|
marks={marks}
|
|
/>
|
|
<span className={styles.rangeWrapperMax}>{max.toFixed(1)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NtrpRange;
|