taro/src/components/input/SlidngScale.tsx

import { ScrollView, View, Text, Image } from "@tarojs/components";
import VirtualList from '@tarojs/components/virtual-list';
import './SlidngScale.scss'
import { useEffect, useRef, useState } from "react";
import Taro from "@tarojs/taro";
import { rpxToPx } from "@/utils/tools";
import { throttle } from 'lodash';
import { MainColorType } from "@/context/themes/color";
// import { SvgXml } from "react-native-svg";

var timerA = null
var lastValue = 0

let SvgXml, LinearGradient;
if (process.env.TARO_ENV == 'rn') {
    SvgXml = require("react-native-svg").SvgXml
    LinearGradient = require('react-native-linear-gradient').default
}
export default function Component(props: {
    step: number, min: number,
    max: number, default_value: number,
    scale: number,
    changed: Function, unit: string
    themeColor: string,
    updateStatus: Function,
    special: any
}) {
    const scrollViewRef = useRef<any>();

    const minNum: number = props.min;
    const maxNum: number = props.max;
    const min = props.min
    const max = props.max

    const stepNum: number = props.step * 10;
    const jingdu: number = props.step < 0.1 ? 100 : props.step < 1 ? 10 : 1;
    const list: any[] = [];

    const slidngWidth = 10

    const [isFT_IN, setIsFT_IN] = useState(props.special == 'FT_IN')
    const [current, setCurrent] = useState(props.default_value)
    const [left, setLeft] = useState((props.default_value - min) * slidngWidth * (isFT_IN ? 1.2 : 1) / props.step - 0.5);
    const [isDraging, setIsDraging] = useState(false)
    const [isEnd, setIsEnd] = useState(true)
    const [enableText, setEnableText] = useState(true)
    const [isChanging, setIsChanging] = useState(false)

    useEffect(() => {
        setCurrent(props.default_value)
        setIsFT_IN(props.special == 'FT_IN')
        setLeft((props.default_value - min) * slidngWidth * (props.special == 'FT_IN' ? 1.2 : 1) / props.step - 0.5)
        setIsChanging(true)
        setTimeout(() => {
            setIsChanging(false)
        }, process.env.TARO_ENV == 'weapp' ? 700 : 100)

    }, [props.unit, props.default_value, props.special])


    if (isFT_IN) {
        for (var i: number = minNum; i <= maxNum * 1.2; i += props.step) {
            i = parseFloat(i.toFixed(props.scale == 0 ? 1 : props.scale));
            var value: number = parseFloat(i.toFixed(props.scale == 0 ? 1 : props.scale));
            var isBig: boolean = i % 12 == 0;
            var isMiddle: boolean = i % 6 == 0 && !isBig
            list.push({
                value: props.step < 1 ? value : Math.round(value),
                showBig: isBig,
                showMiddle: isMiddle
            })
        }
    }
    else {
        for (var i: number = minNum; i <= maxNum; i += props.step) {
            i = parseFloat(i.toFixed(props.scale == 0 ? 1 : props.scale))
            var value: number = parseFloat(i.toFixed(props.scale == 0 ? 1 : props.scale));
            var isBig: boolean = Math.round((value - minNum) * jingdu) % Math.round(stepNum * jingdu) == 0;
            var isMiddle: boolean = (Math.round((value - minNum) * jingdu) * 2) % Math.round(stepNum * jingdu) == 0;

            list.push({
                value: props.step < 1 ? value : Math.round(value),
                showBig: isBig && i >= minNum && i <= maxNum,
                showMiddle: isMiddle && !isBig && i >= minNum && i <= maxNum
            })
        }
    }


    useEffect(() => {
        if (process.env.TARO_ENV == 'weapp') {
            if (isEnd && !isDraging) {
                props.updateStatus(true)
                setEnableText(true)
            }
            else {
                props.updateStatus(false)
                setEnableText(false)
            }
        }
    }, [isEnd, isDraging])

    function scrollContent(e) {
        if (global.dimissSel) {
            global.dimissSel()
        }
        if (isChanging) {
            return
        }
        if (process.env.TARO_ENV == 'rn') {
            update(e)
            setIsDraging(false)
            setIsEnd(true)
            return
        }
        lastValue = e.detail.scrollLeft;
        if (timerA)
            clearTimeout(timerA);

        timerA = setTimeout(() => {

            update(e)
            setIsDraging(false)
        }, 250) as any
    }

    const handleScroll = throttle((e) => {
        if (global.dimissSel) {
            global.dimissSel()
        }
        update(e)



    }, 500);

    function touchEnd() {
        setIsEnd(true)
        var temp = lastValue
        setTimeout(() => {
            if (temp == lastValue) {
                setIsDraging(false)
            }
        }, 250)
    }

    function touchStart() {
        if (process.env.TARO_ENV == 'weapp') {
            props.updateStatus(false)
            setEnableText(false)
        }

    }

    function dragStart(e) {
        lastValue = e.detail.scrollLeft;
        setIsEnd(false)
        setIsDraging(true)
    }

    function dragEnd(e) {
        setIsEnd(true)
    }

    function update(e) {
        const { scrollLeft } = e.detail;
        var count = scrollLeft / slidngWidth;
        if (isFT_IN) {
            count = count / 1.2
        }
        var strValue = (minNum + Math.round(count) * props.step).toFixed(props.scale == 0 ? 1 : props.scale);
        if ((strValue as any) < minNum) {
            strValue = minNum as any;
        }

        if ((strValue as any) > maxNum) {
            strValue = maxNum as any;
        }

        if (parseFloat(strValue) != current) {
            var data = strValue as any;
            if (props.step < 1) {
                data = parseFloat(strValue).toFixed(props.scale == 0 ? 1 : props.scale);
                if (data.indexOf('.') > 0) {
                    const regexp = /(?:\.0*|(\.\d+?)0+)$/
                    data = data.replace(regexp, '$1')
                }
            }
            else {
                data = Math.round(data);
            }

            if (process.env.TARO_ENV == 'rn') {
                const ReactNativeHapticFeedback = require("react-native-haptic-feedback")
                // Optional configuration
                const options = {
                    enableVibrateFallback: true,
                    ignoreAndroidSystemSettings: false,
                };

                // Trigger haptic feedback
                ReactNativeHapticFeedback.trigger("impactLight", options);
            }



            setCurrent(data);
            props.changed(data);
        }
    }

    const scrollEnd = (e) => {
    }

    var svgLine = `<svg xmlns="http://www.w3.org/2000/svg" width="${isFT_IN ? 144 : 100}" height="${rpxToPx(28)}">`;
    var svgNumber = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8 + 60}" height="${rpxToPx(38)}">`;
    if (isFT_IN) {
        for (var i = 0; i < 12; i++) {
            var obj = list[i];
            svgLine += `<line x1="${i * 12 + 1}" y1="0" x2="${i * 12 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="#999999"  stroke-width="2"/>`

        }
    }
    else {
        for (var i = 0; i < 10; i++) {
            var obj = list[i];
            if (obj)
                svgLine += `<line x1="${i * 10 + 1}" y1="0" x2="${i * 10 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="#999999"  stroke-width="2"/>`

        }
    }

    for (var i = 0; i < list.length; i++) {
        var obj = list[i];
        if (obj.showBig) {
            //字体设置参考 https://segmentfault.com/a/1190000006110417
            svgNumber += `<text x="${i * (isFT_IN ? 12 : 10) + 1 + 30}" y="${rpxToPx(2 + 36)}" text-anchor="middle" fill="#999999"  font-size="${rpxToPx(36)}">${isFT_IN ? parseInt('' + obj.value / 12) : obj.value}</text>`
        }
    }
    svgLine += `</svg>`
    svgNumber += `</svg>`

    var basestr = encodeURIComponent(svgLine)
    var imgLines = `url("data:image/svg+xml,${basestr}");`
    var basestr2 = encodeURIComponent(svgNumber)
    var imgNum = `url("data:image/svg+xml,${basestr2}");`

    var svgLine2 = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">`
    svgLine2 += `<pattern id="pattern" width="${isFT_IN ? 144 : 100}" height="${rpxToPx(28)}" patternUnits="userSpaceOnUse">`

    if (isFT_IN) {
        for (var i = 0; i < 12; i++) {
            var obj = list[i];
            svgLine2 += `<line x1="${i * 12 + 1}" y1="0" x2="${i * 12 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="#999999"  stroke-width="2"/>`
        }
    }
    else {
        for (var i = 0; i < 10; i++) {
            var obj = list[i];
            if (obj)
                svgLine2 += `<line x1="${i * 10 + 1}" y1="0" x2="${i * 10 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="#999999"  stroke-width="2"/>`
        }
    }

    svgLine2 += `</pattern>
    <rect width="100%" height="100%" fill="url(#pattern)" />
  </svg>`
    return <View className="slidng">
        {
            isFT_IN && <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
                {
                    parseInt(current / 12 + '') > 0 && (process.env.TARO_ENV == 'weapp' ? <Text className="number" style={{color:MainColorType.black, fontFamily: "PingFang SC,Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;" }}>{parseInt(current / 12 + '')}</Text> :
                        <Text className="number" style={{color:MainColorType.black}}>{parseInt(current / 12 + '')}</Text>)
                }

                {parseInt(current / 12 + '') > 0 && <Text className="unit" style={{ marginRight: 2 }}>ft</Text>}
                {
                    current % 12 > 0 && (process.env.TARO_ENV == 'weapp' ? <Text className="number" style={{color:MainColorType.black, fontFamily: "PingFang SC,Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;" }}>{current % 12}</Text> :
                        <Text className="number" style={{color:MainColorType.black}}>{current % 12}</Text>)
                }

                {
                    current % 12 > 0 && <Text className="unit" style={{color:MainColorType.black}}>in</Text>
                }
            </View>
        }
        {
            !isFT_IN && <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
                {
                    process.env.TARO_ENV == 'weapp' ? <Text className="number" style={{ color:MainColorType.black,fontFamily: "PingFang SC,Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;" }}>{current}</Text> :
                        <Text className="number" style={{color:MainColorType.black}}>{current}</Text>
                }

                <Text className="unit" style={{color:MainColorType.black}}>{props.unit}</Text>
            </View>
        }


        <View className="scroll_bg">
            <View className="shadow_top" />
            <View className="shadow_left" />
            <View className="shadow_right" />
            {
                process.env.TARO_ENV == 'rn' && <LinearGradient style={{
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    height: parseInt(rpxToPx(80) + ''),
                    width: parseInt(rpxToPx(375) + ''),
                    zIndex: 100,
                    pointerEvents: 'none'
                }}
                    colors={['#ffffff', 'rgba(255, 255, 255, 0)']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 0 }} pointerEvents="none" />
            }
            {
                process.env.TARO_ENV == 'rn' && <LinearGradient style={{
                    position: 'absolute',
                    right: 0,
                    top: 0,
                    height: parseInt(rpxToPx(80) + ''),
                    width: parseInt(rpxToPx(375) + ''),
                    zIndex: 100,
                    pointerEvents: 'none'
                }}
                    colors={['#ffffff', 'rgba(255, 255, 255, 0)']}
                    start={{ x: 1, y: 0 }}
                    end={{ x: 0, y: 0 }} pointerEvents="none" />
            }
            <View className="top_line" style={{ backgroundColor: '#999999' }} />
            <ScrollView
                style={{ zIndex: 0, position: 'relative', marginTop: -60 }} ref={scrollViewRef}
                showsHorizontalScrollIndicator={false}
                scrollX scrollLeft={left} className="scroll"
                enablePassive={true}
                fastDeceleration={true}
                onScrollEnd={scrollEnd}
                onDragEnd={dragEnd}
                onTouchStart={touchStart}
                onTouchEnd={touchEnd}
                onDragStart={dragStart}
                onScroll={scrollContent}
                enhanced
            >
                <View className="scrollContent" style={{ paddingTop: 60 }}>
                    <View className="scrollPadding" style={{ width: rpxToPx(372) }} />
                    <View className="content">
                        <View>
                            <View style={{ width: list.length * 10 - 8, height: 100 }}>
                                {
                                    process.env.TARO_ENV == 'weapp' && <View style={{ width: isFT_IN ? list.length * 10 - 8 : list.length * 10 - 8, height: rpxToPx(28), backgroundImage: imgLines, overflow: 'hidden' }} />
                                }
                                {
                                    process.env.TARO_ENV == 'rn' && <SvgXml xml={svgLine2} width={list.length * 10 - 8} height={rpxToPx(28)} />
                                }

                                {process.env.TARO_ENV == 'weapp' &&
                                    <View style={{ width: list.length * 10 - 8 + 60, marginLeft: -30, height: rpxToPx(38), backgroundImage: imgNum }} />}
                                {
                                    process.env.TARO_ENV == 'rn' &&
                                    <View style={{ flexDirection: 'row', marginLeft: -30, height: rpxToPx(40) }}>
                                        <SvgXml xml={svgNumber} width={list.length * 10 - 8 + 60} height={rpxToPx(40)} />
                                    </View>
                                }
                            </View>
                        </View>


                    </View>
                    <View className="scrollPadding" />

                </View>

            </ScrollView>



            <Image className="center_line" src={require('@assets/images/scale_center2.png')} />
            {/* <View className="center_line" /> */}
        </View>


    </View>
}