397 lines
11 KiB
JavaScript
397 lines
11 KiB
JavaScript
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
Modal,
|
|
PanResponder,
|
|
Dimensions,
|
|
} from "react-native";
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import { useTailwind } from "tailwind-rn";
|
|
import { Image } from "expo-image";
|
|
export default function MySlider({
|
|
lower_bound,
|
|
upper_bound,
|
|
step,
|
|
unit,
|
|
lable,
|
|
height = 60,
|
|
width = Dimensions.get("window").width - 44,
|
|
onChange,
|
|
onAfterChange = () => {},
|
|
defaultValue = 0,
|
|
disabled = false,
|
|
thumbSize = 25,
|
|
stepValues = [],
|
|
itemKey,
|
|
hasInfinity,
|
|
leftValue = 0,
|
|
rightValue = 0,
|
|
thumbImage = null,
|
|
maximumTrackTintColor = "#dcdbdb",
|
|
minimumTrackTintColor = "#577BFF",
|
|
processHeight = 7,
|
|
}) {
|
|
// const leftProcess = useRef(0);
|
|
// const rightProcess = useRef(0);
|
|
|
|
const [leftProcess, setLeftProcess] = useState(0);
|
|
const [rightProcess, setRightProcess] = useState(0);
|
|
const [stepNum, setStepNum] = useState(stepValues.length - 1);
|
|
const [processWidth, setProcessWidth] = useState(330);
|
|
const tailwind = useTailwind();
|
|
const leftWatcher = useRef(null);
|
|
const rightWatcher = useRef(null);
|
|
const currentLeftValue = useRef(leftValue);
|
|
const currentRightValue = useRef(rightValue);
|
|
useEffect(() => {
|
|
leftWatcher.current = PanResponder.create({
|
|
// 建立监视器
|
|
onStartShouldSetPanResponder: () => true,
|
|
onPanResponderGrant: _onPanResponderGrantLeft, // 按下
|
|
onPanResponderMove: _onPanResponderMoveLeft, // 移动
|
|
onPanResponderEnd: _onPanResponderEndLeft, // 结束
|
|
});
|
|
rightWatcher.current = PanResponder.create({
|
|
// 建立监视器
|
|
onStartShouldSetPanResponder: () => true,
|
|
onPanResponderGrant: _onPanResponderGrantRight, // 按下
|
|
onPanResponderMove: _onPanResponderMoveRight, // 移动
|
|
onPanResponderEnd: _onPanResponderEndRight, // 结束
|
|
});
|
|
setProcessWidth(width - thumbSize * 2);
|
|
}, []);
|
|
useEffect(() => {
|
|
// if(itemKey)
|
|
const currentLeftProcess =
|
|
(stepValues.indexOf(leftValue) * step - lower_bound) /
|
|
(upper_bound - lower_bound);
|
|
const currentRightProcess =
|
|
(stepValues.indexOf(rightValue) * step - lower_bound) /
|
|
(upper_bound - lower_bound);
|
|
setLeftProcess(currentLeftProcess);
|
|
setRightProcess(currentRightProcess);
|
|
currentLeftValue.current = leftValue;
|
|
currentRightValue.current = rightValue;
|
|
}, [leftValue, rightValue]);
|
|
// useEffect(() => {
|
|
|
|
// }, [leftProcess, rightProcess]);
|
|
// 左侧滑块事件
|
|
const _onPanResponderGrantLeft = (e, gestureState) => {
|
|
const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
|
|
_changeProcess(process, "left");
|
|
};
|
|
|
|
const _onPanResponderEndLeft = (e, gestureState) => {
|
|
if (onAfterChange) {
|
|
onAfterChange(gestureState.x0);
|
|
}
|
|
};
|
|
const _onPanResponderMoveLeft = (e, gestureState) => {
|
|
const process =
|
|
(gestureState.x0 - 40 - thumbSize / 2 + gestureState.dx) / processWidth;
|
|
_changeProcess(process, "left");
|
|
};
|
|
|
|
// 右侧滑块事件
|
|
const _onPanResponderGrantRight = (e, gestureState) => {
|
|
const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
|
|
_changeProcess(process, "right");
|
|
};
|
|
|
|
const _onPanResponderEndRight = (e, gestureState) => {
|
|
if (onAfterChange) {
|
|
onAfterChange(gestureState.x0);
|
|
}
|
|
};
|
|
const _onPanResponderMoveRight = (e, gestureState) => {
|
|
const process =
|
|
(gestureState.x0 - 40 - thumbSize / 2 + gestureState.dx) / processWidth;
|
|
_changeProcess(process, "right");
|
|
};
|
|
const _changeProcess = (changeProcess, direction) => {
|
|
// 判断滑动开关
|
|
if (disabled) return;
|
|
if (changeProcess >= 0 && changeProcess <= 1) {
|
|
// 按步长比例变化刻度
|
|
const v = changeProcess * (upper_bound - lower_bound);
|
|
const newValue = Math.round(v / step) * step;
|
|
const newProcess = Math.round(newValue) / (upper_bound - lower_bound);
|
|
setStepNum(stepNum + 1);
|
|
if (process !== newProcess) {
|
|
const currentRightProcess =
|
|
(stepValues.indexOf(currentRightValue.current) * step - lower_bound) /
|
|
(upper_bound - lower_bound);
|
|
if (direction == "left") {
|
|
if (newProcess < currentRightProcess) {
|
|
setLeftProcess(newProcess);
|
|
setStepNum((old) => old + 1);
|
|
onChange({
|
|
lower_bound:
|
|
stepValues[
|
|
Math.round(
|
|
(newProcess * (upper_bound - lower_bound) + lower_bound) /
|
|
step
|
|
)
|
|
],
|
|
upper_bound: currentRightValue.current,
|
|
});
|
|
}
|
|
} else {
|
|
const currentLeftProcess =
|
|
(stepValues.indexOf(currentLeftValue.current) * step -
|
|
lower_bound) /
|
|
(upper_bound - lower_bound);
|
|
if (newProcess > currentLeftProcess) {
|
|
// rightProcess.current = newProcess;
|
|
setRightProcess(newProcess);
|
|
setStepNum((old) => old - 1);
|
|
onChange({
|
|
lower_bound: currentLeftValue.current,
|
|
upper_bound:
|
|
stepValues[
|
|
Math.round(
|
|
(newProcess * (upper_bound - lower_bound) + lower_bound) /
|
|
step
|
|
)
|
|
],
|
|
});
|
|
// setStepNum(stepNum - 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
return (
|
|
<View
|
|
// style={[
|
|
// styles.container,
|
|
// {
|
|
// height,
|
|
// width,
|
|
// },
|
|
// ]}
|
|
style={{
|
|
height: "upper_bound-content",
|
|
width,
|
|
// flex: 1,
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginBottom: 36,
|
|
marginTop: 12,
|
|
}}
|
|
>
|
|
<View style={{ width: "100%", position: "relative" }}>
|
|
{/* 格子步数 */}
|
|
{hasInfinity && (
|
|
<View
|
|
style={{
|
|
...tailwind("flex flex-row justify-between items-center"),
|
|
position: "absolute",
|
|
top: -23,
|
|
flex: 1,
|
|
width: "100%",
|
|
// height: 40,
|
|
padding: 17,
|
|
paddingRight: 20,
|
|
marginLeft: -12,
|
|
// backgroundColor: "#fff",
|
|
}}
|
|
>
|
|
{stepValues.map((item, index) => (
|
|
<View
|
|
key={index}
|
|
style={{
|
|
backgroundColor:
|
|
item >= leftValue && item <= rightValue
|
|
? minimumTrackTintColor
|
|
: maximumTrackTintColor,
|
|
width: thumbSize / 2,
|
|
height: thumbSize / 2,
|
|
borderRadius: 50,
|
|
}}
|
|
></View>
|
|
))}
|
|
</View>
|
|
)}
|
|
<View
|
|
style={{
|
|
backgroundColor: maximumTrackTintColor,
|
|
// flex: 1,
|
|
height: processHeight,
|
|
width: processWidth,
|
|
// marginRight: thumbSize / 2,
|
|
position: "absolute",
|
|
marginTop: -processHeight / 2,
|
|
left: thumbSize / 2,
|
|
zIndex: 1,
|
|
borderRadius: 50,
|
|
}}
|
|
/>
|
|
<View
|
|
style={{
|
|
backgroundColor: minimumTrackTintColor,
|
|
width: (rightProcess - leftProcess) * processWidth,
|
|
height: processHeight,
|
|
marginLeft: thumbSize / 2 + leftProcess * processWidth,
|
|
position: "absolute",
|
|
marginTop: -processHeight / 2,
|
|
left: 0,
|
|
zIndex: 10,
|
|
borderRadius: 50,
|
|
}}
|
|
/>
|
|
</View>
|
|
{/* 左侧控件 */}
|
|
<View
|
|
transition={1000}
|
|
cachePolicy="disk"
|
|
// style={tailwind("w-full h-full rounded-lg overflow-hidden")}
|
|
style={{
|
|
width: thumbSize * 3,
|
|
height: thumbSize * 3,
|
|
position: "absolute",
|
|
left: leftProcess * processWidth - thumbSize,
|
|
zIndex: 10,
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
// borderWidth: 2,
|
|
}}
|
|
{...leftWatcher.current?.panHandlers}
|
|
>
|
|
<View
|
|
transition={1000}
|
|
cachePolicy="disk"
|
|
// style={tailwind("w-full h-full rounded-lg overflow-hidden")}
|
|
style={{
|
|
width: thumbSize,
|
|
height: thumbSize,
|
|
borderRadius: 50,
|
|
marginTop: -processHeight / 2,
|
|
backgroundColor: "#ff75c8",
|
|
borderColor: "#ffffff",
|
|
borderWidth: 2,
|
|
}}
|
|
/>
|
|
</View>
|
|
{/* 右侧控件 */}
|
|
<View
|
|
transition={1000}
|
|
cachePolicy="disk"
|
|
// style={tailwind("w-full h-full rounded-lg overflow-hidden")}
|
|
style={{
|
|
width: thumbSize * 3,
|
|
height: thumbSize * 3,
|
|
position: "absolute",
|
|
left: rightProcess * processWidth - thumbSize,
|
|
zIndex: 10,
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
// borderWidth: 2,
|
|
}}
|
|
{...rightWatcher.current?.panHandlers}
|
|
>
|
|
<View
|
|
style={{
|
|
width: thumbSize,
|
|
height: thumbSize,
|
|
backgroundColor: "#fff",
|
|
borderRadius: 50,
|
|
backgroundColor: "#ff75c8",
|
|
borderColor: "#ffffff",
|
|
borderWidth: 2,
|
|
}}
|
|
></View>
|
|
</View>
|
|
|
|
<View
|
|
style={{
|
|
...tailwind("flex flex-row justify-between items-center"),
|
|
position: "absolute",
|
|
top: -46,
|
|
right: 12,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-white text-lg"),
|
|
maxWidth: thumbSize * 2,
|
|
color: "#ff75c8",
|
|
}}
|
|
>
|
|
{hasInfinity && leftProcess == 1
|
|
? ">" + upper_bound
|
|
: stepValues[
|
|
Math.round(
|
|
(leftProcess * (upper_bound - lower_bound) + lower_bound) /
|
|
step
|
|
)
|
|
]}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-lg"),
|
|
marginHorizontal: 4,
|
|
color: "#ff75c8",
|
|
}}
|
|
>
|
|
-
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-white text-lg"),
|
|
// maxWidth: thumbSize * 2,
|
|
color: "#ff75c8",
|
|
}}
|
|
>
|
|
{hasInfinity && rightProcess == 1
|
|
? ">" + upper_bound
|
|
: stepValues[
|
|
Math.round(
|
|
(rightProcess * (upper_bound - lower_bound) + lower_bound) /
|
|
step
|
|
)
|
|
]}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-white text-lg"),
|
|
maxWidth: thumbSize * 2,
|
|
color: "#ff75c8",
|
|
}}
|
|
>
|
|
{unit}
|
|
</Text>
|
|
</View>
|
|
<Text
|
|
style={{
|
|
...tailwind("absolute text-white text-sm"),
|
|
left: 0,
|
|
top: 20,
|
|
minWidth: thumbSize,
|
|
maxWidth: thumbSize * 2,
|
|
color: "#ffffff80",
|
|
}}
|
|
>
|
|
{lower_bound}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
...tailwind("absolute text-white text-sm"),
|
|
left: processWidth,
|
|
top: 20,
|
|
minWidth: thumbSize,
|
|
maxWidth: thumbSize * 2,
|
|
color: "#ffffff80",
|
|
}}
|
|
>
|
|
{hasInfinity ? ">" + upper_bound : upper_bound}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|