重构-滑块(拉动条)useReducer版本

Myth丶恋晨 2021-07-24 16:39 340阅读 0赞

实现:
    	hooks实现
    
    动画:
    	提示框渐变显示
    
    参数:
    	disabled: PropTypes.bool,		禁用
    	onChange: PropTypes.func,		拉动回调,第一个参数是进度数值,防抖默认200毫秒
    	value: PropTypes.number,		初始进度值,0-10
    	sliderHeight:PropTypes.string,	滑块高度
    	sliderWdith: PropTypes.string,	滑块宽度
    	sliderColor: PropTypes.string,	滑块背景色
    	sliderBorderRadius:PropTypes.string,	滑块圆角
    	progressColor:PropTypes.string,	进度条背景色
    	circleSize:PropTypes.string,	按钮大小
    	circleColor:PropTypes.string,	按钮颜色
    	circleBorderColor:PropTypes.string,	按钮圆角
    	tooltipSize: PropTypes.string,	 提示框大小
    	tooltipColor:PropTypes.string,	 提示框颜色
    	tooltipFontColor: PropTypes.string,	提示框字体颜色
    	tooltipFontSize: PropTypes.string,	提示框字体大小
    	tooltipBorderRadius:PropTypes.string,提示框圆角

代码示例:  
使用:

import React,{ Component,lazy,Suspense} from 'react'
    // import Slider from './slider/slider'
    const Slider = lazy(() => import('./slider/slider'))
    const SliderReducer =lazy(()=>import('./slider/sliderReducer'))
    
    class App extends Component{ 
    
        state={ 
    
        }
    
        _onChange(val)
        { 
            console.log(val);
            // console.log(val);
        }
    
        render()
        { 
       
            return(
    
                <div>
                    
                    <Suspense fallback={ <div>等待中</div>}>
                        { /* <Slider sliderColor={'red'} progressColor={'green'} value={80} onChange={this._onChange.bind(this)}></Slider> */}
                        <br/>
                        <SliderReducer disabled onChange={ this._onChange.bind(this)} value={ 20}></SliderReducer>
                    </Suspense>
                    
                </div>
            )
        }
    }
    
    export default App

sliderReducer.jsx:

import React,{ useState,useRef,useCallback,useEffect,useMemo,useReducer} from 'react';
    import PropTypes from 'prop-types';
    import './slider.css'
    
    
    function reducer(state,action)
    { 
        console.log(action.type);
        switch (action.type)
        { 
            case 'start':
    
                return { 
                    ...state,
                    sliding: true,
                    showTip: true,
                    startX:action.startX
                };
            case 'move':
                return { 
                    ...state,
                    lastWidth:action.lastWidth
                };
            case 'end':
                return { 
                    ...state,
                    sliding: action.sliding,
                    showTip:action.showTip
                };
            case 'click':
                return { 
                    ...state,
                    showTip: action.showTip,
                    lastWidth:action.lastWidth
                };
            default:
                return state
        }
    }
    
    function App(props){ 
    
      let [timer, setTimer] = useState(null);
      const {  disabled } = props;
    
      const sliderf = useRef(null);
      
      const [state, dispatch] = useReducer(reducer, { 
            sliding: false,
            lastWidth: props.value ? props.value/100 : 0,
            showTip:false
      })
    
      useEffect(() => { 
        // setSliderWidth(sliderf.current.clientWidth);
        //根据初始值设置进度条、按钮位置
    
        _setProgress(state.lastWidth);
    
        const { sliderHeight,sliderWidth,sliderColor,sliderBorderRadius,tooltipBorderRadius,progressColor,progressWidth,circleBorderColor,circleColor,circleLeft,circleSize,tooltipColor,tooltipFontColor,tooltipFontSize,tooltipSize } = props;
        //样式初始值设置
        sliderHeight && sliderf.current.style.setProperty('--sliderHeight', sliderHeight)
        sliderWidth && sliderf.current.style.setProperty('--sliderWidth', sliderWidth)
        sliderColor && sliderf.current.style.setProperty('--sliderColor', sliderColor)
        sliderBorderRadius && sliderf.current.style.setProperty('--sliderBorderRadius', sliderBorderRadius)
    
        progressColor && sliderf.current.style.setProperty('--progressColor', progressColor)
        
        circleSize && sliderf.current.style.setProperty('--circleSize', circleSize)
        circleColor && sliderf.current.style.setProperty('--circleColor', circleColor)
        circleBorderColor && sliderf.current.style.setProperty('--circleBorderColor', circleBorderColor)
        
        tooltipSize && sliderf.current.style.setProperty('--tooltipSize', tooltipSize)
        tooltipColor && sliderf.current.style.setProperty('--tooltipColor', tooltipColor)
        tooltipFontColor && sliderf.current.style.setProperty('--tooltipFontColor', tooltipFontColor)
        tooltipFontSize && sliderf.current.style.setProperty('--tooltipFontSize', tooltipFontSize)
        tooltipBorderRadius && sliderf.current.style.setProperty('--tooltipBorderRadius', tooltipBorderRadius)
        
    
    
        
      },[])
    
      //滑动相关逻辑,依赖项改变重新创建函数,同步状态
      //sliding改变时才更新函数
      //sliding只会在鼠标按下和抬起改变,所以useEffect每轮只会执行2次
      useEffect(() => { 
        
          const _onmousemove = (e) => { 
            if (disabled)
            { 
                return;
            }  
            if (state.sliding)
            { 
                let moveX = e.pageX;
                let moveLength = moveX - state.startX;
                let res = _fixedValue(state.lastWidth + moveLength / sliderf.current.clientWidth);
                dispatch({ 
                    type: 'move',
                    lastWidth:res
                })
                _setProgress(res);
                              
            }
    
            
        }
    
        const _onmouseup=(e)=>
        { 
            if (disabled)
            { 
                return;
            }
            dispatch({ 
                type: 'end',
                sliding: false,
                showTip:false
            })
    
        }
    
        document.documentElement.addEventListener('mousemove', _onmousemove);
        document.documentElement.addEventListener('mouseup', _onmouseup);
        
    
        return () => { 
          
          document.documentElement.removeEventListener('mousemove', _onmousemove);
          document.documentElement.removeEventListener('mouseup', _onmouseup);
         
        }
      }, [state.sliding])
      
      //圆圈按钮点击事件
        const _onmousedown = useCallback((e) => { 
          if (disabled)
          { 
            return;
          }
            dispatch({ 
            type:'start',
            startX:e.pageX
        })
    
      }, [])
    
        //轨道点击设置位置
      const _setSlider = useCallback((e) => { 
            
        if (!disabled) { 
            //当点击圆圈时,触发的源头变成了圆圈e.nativeEvent.offsetX为在圆圈是的坐标
            if (e.target.dataset.target === 'circle')
            { 
                //如果需要点击圆圈也可以微调
                // 比较e.nativeEvent.offsetX和圆圈一半,小则减大则加
                // setLastWidth((v)=> v+(e.nativeEvent.offsetX / sliderWidth);
    
                return; 
            }
                
            dispatch({ 
                type: 'click',
                showTip:true,
                lastWidth:e.nativeEvent.offsetX /sliderf.current.clientWidth
            })
            _setProgress(e.nativeEvent.offsetX /sliderf.current.clientWidth); 
        }
      }, [])
      
      
      //当前值(计算属性)
        const _value = useMemo(() => { 
            
        timer && clearTimeout(timer);
        let timerCon = setTimeout(() => { 
        //防抖传递参数给父组件
            
        props.onChange(Math.floor(state.lastWidth * 100));  
        }, 200)
        setTimer(timerCon);
            
        return Math.floor(state.lastWidth*100)
      },[state.lastWidth])
    
    
    
      //设置进度方法
      const _setProgress = useCallback((res) => { 
            sliderf.current.style.setProperty('--circleLeft', res*100 + '%');
            sliderf.current.style.setProperty('--progressWidth', res * 100 + '%');
      }, []);
      
        //边界处理
      const _fixedValue = useCallback((val) => { 
        
        return Math.max(0,Math.min(1,val));
      }, [])
    
      return(
    
        <div  ref={ sliderf}  onMouseDown={ _setSlider} className={ `jf-slider-container ${ disabled&&'jf-slider-container-disabled'}`}>
          <div  className={ `jf-slider-progress ${ disabled&&'jf-slider-progress-disabled'}`}></div>
          <div data-target='circle' onMouseDown={ _onmousedown} className={ `jf-slider-circle ${ !disabled ? 'jf-slider-circle-notDisabled' : 'jf-slider-circle-disabled'}`}></div> 
          <div className={ ` jf-slider-tooltip ${ state.showTip&&'jf-slider-tooltip-show'}`}>{  _value}</div>
              { /* <button>{state.startX?state.startX:'d'}</button> */}
        </div>
      )
    }
    
    App.propTypes = { 
      disabled: PropTypes.bool,
      onChange: PropTypes.func,
      value: PropTypes.number,
      sliderHeight:PropTypes.string,
      sliderWdith: PropTypes.string,
      sliderColor: PropTypes.string,
      sliderBorderRadius:PropTypes.string,
      progressColor:PropTypes.string,
      circleSize:PropTypes.string,
      circleColor:PropTypes.string,
      circleBorderColor:PropTypes.string,
      tooltipSize: PropTypes.string,
      tooltipColor:PropTypes.string,
      tooltipFontColor: PropTypes.string,
      tooltipFontSize: PropTypes.string,
      tooltipBorderRadius:PropTypes.string,
    }
    
    App.defaultProps = { 
        value: 0,
        onChange:()=>{ },
    }
    
    
    export default React.memo(App);