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 { SvgXml } from "react-native-svg";

var timerA = null
var lastValue = 0

let SvgXml;
if (process.env.TARO_ENV == 'rn') {
    SvgXml = require("react-native-svg").SvgXml
}
export default function Component(props: {
    step: number, min: number,
    max: number, default_value: number,
    scale: number,
    changed: Function, unit: string
    themeColor: string,
    updateStatus: Function
}) {
    const scrollViewRef = useRef<any>();
    const minNum: number = props.min;//props.step < 1 ?props.default_value-2:props.default_value-20//
    const maxNum: number = props.max;//props.step < 1 ?props.default_value+2:props.default_value+20//
    const min = props.min//(props.default_value - props.step * 20) < props.min ? props.min : props.default_value - props.step * 20
    const max = props.max//(props.default_value + props.step * 20) > props.max ? props.max : props.default_value + props.step * 20
    // const [minNum, setMinNum] = useState(min)
    // const [maxNum, setMaxNum] = useState(max)

    const stepNum: number = props.step * 10;
    const jingdu: number = props.step < 0.1 ? 100 : props.step < 1 ? 10 : 1;
    const list: any[] = [];
    // const [list, setList] = useState([])

    const slidngWidth = 10

    const [current, setCurrent] = useState(props.default_value)
    const [left, setLeft] = useState((props.default_value - min) * slidngWidth / props.step);
    const [isDraging, setIsDraging] = useState(false)
    const [isEnd, setIsEnd] = useState(true)
    const [enableText, setEnableText] = useState(true)

    for (var i: number = minNum; i <= maxNum; i += props.step) {
        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
        })


    }

    // const [showScrollView, setShowScrollView] = useState(false)

    useEffect(() => {
        // var array: any = []
        // for (var i: number = min; i <= max; i += props.step) {
        //     var value: number = parseFloat(i.toFixed(props.scale));
        //     var isBig: boolean = Math.round((value - min) * jingdu) % Math.round(stepNum * jingdu) == 0;
        //     var isMiddle: boolean = (Math.round((value - min) * jingdu) * 2) % Math.round(stepNum * jingdu) == 0;

        //     array.push({
        //         value: props.step < 1 ? value : Math.round(value),
        //         showBig: isBig && i >= min && i <= max,
        //         showMiddle: isMiddle && !isBig && i >= min && i <= max
        //     })
        // }
        // setList(array)

        // setTimeout(() => {
        //     var min2 = props.min
        //     var max2 = props.max
        //     setMinNum(min2)
        //     setMaxNum(max2)
        //     setLeft((props.default_value - min2) * slidngWidth / props.step)

        //     var array2: any = []
        //     for (var i: number = min2; i <= max2; i += props.step) {
        //         var value: number = parseFloat(i.toFixed(1));
        //         var isBig: boolean = Math.round((value - min2) * jingdu) % Math.round(stepNum * jingdu) == 0;
        //         var isMiddle: boolean = (Math.round((value - min2) * jingdu) * 2) % Math.round(stepNum * jingdu) == 0;

        //         array2.push({
        //             value: props.step < 1 ? value : Math.round(value),
        //             showBig: isBig && i >= min2 && i <= max2,
        //             showMiddle: isMiddle && !isBig && i >= min2 && i <= max2
        //         })
        //     }
        //     setList(array2)
        // }, 50)
    }, [])

    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 (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) => {

        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;
        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) => {
    }

    function itemContent(data) {
        var item = list[data.index]
        var index = data.index
        return <View style={{ width: 2, height: 100, backgroundColor: 'red', marginRight: 8 }}></View>
        // return <View className={item.showBig ? 'slidng_item_big' : item.showMiddle ? 'slidng_item_middle' : 'slidng_item'} style={{ width: 2, marginRight: 8, backgroundColor: props.themeColor, zIndex: 0 }} key={index}>
        //     {
        //         item.showBig ? <Text className="slidng_text">{item.value}</Text> : null
        //     }
        // </View>
    }

    // var svg2 = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8}" height="50">`;
    // for (var i = 0; i < list.length; i++) {
    //     var obj = list[i];
    //     svg2 += `<line x1="${i * 10}" y1="0" x2="${i * 10}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}"  stroke-width="2"/>`
    //     if (obj.showBig) {
    //         svg2 += `<text x="${i * 10}" y="${rpxToPx(30 + 36)}" text-anchor="middle" fill="white" font-size="${rpxToPx(36)}">${obj.value}</text>`
    //     }
    // }
    // svg2 += `</svg>`

    // console.log(svg2)
    // debugger

    var svgLine = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="${rpxToPx(28)}">`;
    var svgNumber = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8 + 60}" height="${rpxToPx(38)}">`;
    for (var i = 0; i < 10; i++) {
        var obj = list[i];
        svgLine += `<line x1="${i * 10 + 1}" y1="0" x2="${i * 10 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}"  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 * 10 + 1 + 30}" y="${rpxToPx(2 + 36)}" text-anchor="middle" fill="white" font-family="PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Heiti SC,Microsoft YaHei" font-size="${rpxToPx(36)}">${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="100" height="${rpxToPx(28)}" patternUnits="userSpaceOnUse">`
    for (var i = 0; i < 10; i++) {
        var obj = list[i];
        svgLine2 += `<line x1="${i * 10 + 1}" y1="0" x2="${i * 10 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}"  stroke-width="2"/>`
    }
    svgLine2 += `</pattern>
    <rect width="100%" height="100%" fill="url(#pattern)" />
  </svg>`



    const isLeonTest = true

    return <View className="slidng">
        <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
            {
                process.env.TARO_ENV == 'weapp' ? <Text className="number" style={{ fontFamily: "PingFang SC,Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;" }}>{current}</Text> :
                    <Text className="number">{current}</Text>
            }

            <Text className="unit">{props.unit}</Text>
        </View>

        <View className="scroll_bg">
            <View className="shadow_top" />
            <View className="shadow_left" />
            <View className="shadow_right" />
            <View className="top_line" style={{ backgroundColor: props.themeColor }} />
            <ScrollView
                style={{ zIndex: 0, position: 'relative' }} 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">
                    <View className="scrollPadding" style={{ width: rpxToPx(372) }} />
                    <View className="content">
                        {
                            !isLeonTest && list.map((item, index) => {
                                return <View className={(item as any).showBig ? 'slidng_item_big' : (item as any).showMiddle ? 'slidng_item_middle' : 'slidng_item'}
                                    style={{ width: 2, marginRight: list.length - 1 == index ? 0 : 8, backgroundColor: props.themeColor, zIndex: 0 }} key={index}>
                                    {
                                        (item as any).showBig ? <Text className="slidng_text">{(item as any).value}</Text> : null
                                    }
                                </View>
                            })
                        }
                        {
                            isLeonTest && <View>
                                <View style={{ width: list.length * 10 - 8, height: 100 }}>
                                    {
                                        process.env.TARO_ENV == 'weapp' && <View style={{ width: list.length * 10 - 8, height: rpxToPx(28), backgroundImage: imgLines }} />
                                    }
                                    {
                                        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 }}>
                                            <SvgXml xml={svgNumber} width={list.length * 10 - 8 + 60} height={rpxToPx(38)} />
                                        </View>
                                    }
                                </View>
                            </View>
                        }

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

                </View>

            </ScrollView>

            {/* <VirtualList height={rpxToPx(300)} width={rpxToPx(750)} onScroll={handleScroll} layout="horizontal"
                initialScrollOffset={left}
                itemCount={list.length}
                item={itemContent}
                itemSize={10}
                itemData={list}
            /> */}

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


    </View>
}