重构-五星评分

柔情只为你懂 2021-07-24 21:11 439阅读 0赞

动画:
    	移入到某个星星位置,之前的星星高亮变大,后面的星星暗色不变
    
    实现:
    	动画:
    	(1)通过一个索引,索引值为-1,每当移入到星星时,索引变成当前索引,当星星自身的索引小于等于改索引时,添加样式高亮,
    	(2)移出所有星星时,重新将索引设置为-1,使得星星保持初始样式,同时为了在移动过程覆盖初始样式,移出所有星星时还原初始样式,还要在显示初始样式时,添加索引值是否为-1的判断条件
    	
    	根据评分的小数,显示星星的高亮面积:
    	(1)在暗色星星的基础上,再定位一个大小相同的高亮星星,高亮星星的容器宽度为小数所占的百分比,然后设置overflow:hidden
    	
    
    参数:
    
      rate: PropTypes.number,     初始评分,0-5
      showRate: PropTypes.bool,	  是否显示评分,默认显示
      onChange: PropTypes.func,	  在非只读的模式下,点击星星改变评分回调,第一个参数为当前评分
      readOnly: PropTypes.bool,   是否是只读模式(无移动交互等),默认为否
      iconSize: PropTypes.string, 星星大小
      iconColor: PropTypes.string,    星星未选中的颜色
      activeColor: PropTypes.string,  星星选中的颜色
      fontSize: PropTypes.string,	  评分字体大小
      fontColor:PropTypes.string,     评分字体颜色

效果图:  
非只读:  
![在这里插入图片描述][20201202162048774.png]  
![在这里插入图片描述][20201202162103272.png]  
![在这里插入图片描述][2020120216211567.png]  
![在这里插入图片描述][20201202162454821.png]

只读:  
![在这里插入图片描述][20201202162157979.png]

代码示例:  
使用:

import React, {  useState } from 'react';
    import Rate from './rate/rate';
    
    function App(){ 
    
      const _onChange = function (rate)
      { 
        console.log(rate);
      }
    
      return(
    
        <div>
           <Rate  rate={ 3.2}  onChange={ _onChange}></Rate>
        </div>
      )
    }
    
    export default App

rate.jsx:

import React, {  useState, useCallback, useEffect, useMemo,useRef } from 'react';
    import PropTypes from 'prop-types';
    import './rate.css';
    
    function App(props){ 
    
      const [rate, setRate] = useState(0);
      const [rateArr, setRateArr] = useState([]);
      const [dynamicIndex, setDynamicIndex] = useState(-1);
      const [currentIndex, setCurrentIndex] = useState(-1);
      const ratef = useRef(null);
    
      useEffect(() => { 
        //初始rate
        setRate(props.rate);
        //处理rate数据
        _handleRate(props.rate);
    
        //设置样式
        const {  iconSize, iconColor, activeColor, fontSize, fontColor } = props;
        iconSize && _setAttribute('iconSize', iconSize);
        iconColor && _setAttribute('iconColor', iconColor);
        activeColor && _setAttribute('activeColor', activeColor);
        fontSize && _setAttribute('fontSize', fontSize);
        fontColor && _setAttribute('fontColor', fontColor);
        
      }, [props.rate])
      
      const _setAttribute=function(key,value)
      { 
        ratef.current.style.setProperty('--' + key, value);
      }
    
      //处理rate数据
      const _handleRate=useCallback(function(rate)
      { 
        let arr = [];
        let one = Math.floor(rate);
        let dynamic = Number((rate - one).toFixed(1));
      
        for (let i = 0; i < one; i++)
        { 
          arr.push(1);
          
        }
    
        if (dynamic > 0 && dynamic < 1)
        { 
          setDynamicIndex(one);
          arr.push(dynamic);
        }
        while (arr.length != 5)
        { 
          arr.push(0);
        }
    
        setRateArr(arr);
    
    
      },[])
    
      //移动
      const _onMouseMove = useCallback(function (index) { 
        if (index != currentIndex&&!props.readOnly) { 
          setCurrentIndex(index);
        }
      }, [currentIndex]);
    
      //移出
      const _onMouseOut = useCallback(function () { 
        
        !props.readOnly&&setCurrentIndex(-1);
      }, []);
    
      //点击
      const _onClick = useCallback(function (index) { 
        if (props.readOnly)
        { 
          return ;
        }
        _handleRate(index + 1);
        setRate(index + 1);
        props.onChange(index + 1);
      }, []);
    
    
    
      return(
    
        <div ref={ ratef} className='jf-rate-container'>
          <div className='jf-rate-stars' onMouseOut={ _onMouseOut}>
            { 
              rateArr.map((item, index) => { 
                return (
                  
                  <span onClick={ ()=>{ _onClick(index)}} onMouseMove={ () => {  _onMouseMove(index) }} className='jf-rate-item' key={ item+index*2}>
                    <i className={ `jf-rate-item-star iconfont icon-Starlarge ${ item == 1 &&currentIndex==-1&& 'jf-rate-item-star-on'} ${ (index<=currentIndex)&&'jf-rate-item-star-on-hover'} `}>
                     { dynamicIndex==index&&currentIndex==-1&&<i className={ `jf-rate-item-star-dynamic iconfont icon-Starlarge `} style={ { width:item*100+'%'}}></i>}
                    </i>
                    
                  </span>
                )
              })
            }
          </div>
          { props.showRate&&<span className='jf-rate-rate' >{ rate}</span>}
        </div>
      )
    }
    
    App.propTypes = { 
      rate: PropTypes.number,
      showRate: PropTypes.bool,
      onChange: PropTypes.func,
      readOnly: PropTypes.bool,
      iconSize: PropTypes.string,
      iconColor: PropTypes.string,
      activeColor: PropTypes.string,
      fontSize: PropTypes.string,
      fontColor:PropTypes.string,
    
    }
    App.defaultProps = { 
      rate: 0,
      onChange: () => {  },
      showRate:true
    }
    
    export default React.memo(App);

rate.css:

.jf-rate-container { 
      display: inline-block;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    
      --iconSize: 17px;
      --iconColor: #eff2f7;
      --activeColor: #f7ba2a;
      --fontSize: 14px;
      --fontColor: #f7ba2a;
    }
    
    .jf-rate-item-star { 
      display: inline-block;
      color: var(--iconColor);
      position: relative;
      font-size: var(--iconSize);
      transition: 0.3s;
    }
    .jf-rate-item-star-on { 
      color: var(--activeColor);
    }
    .jf-rate-item-star-on-hover { 
      color: var(--activeColor);
      transform: scale(1.15);
    }
    
    .jf-rate-item-star-dynamic { 
      position: absolute;
      left: 0;
      top: 0;
      color: var(--activeColor);
      overflow: hidden;
      font-size: var(--iconSize);
    }
    
    .jf-rate-rate { 
      color: var(--fontColor);
      font-size: var(--fontSize);
      font-weight: bold;
    }

[20201202162048774.png]: /images/20210724/59503cfe20bb4168b572bf0092e9c8d7.png
[20201202162103272.png]: /images/20210724/97e95fb1f5bd472399f5cea9310fa21c.png
[2020120216211567.png]: /images/20210724/3ff396f1cb684973990765accdcf519c.png
[20201202162454821.png]: /images/20210724/d9d6ac0ad89a4d1e938836b90d6da8e2.png
[20201202162157979.png]: /images/20210724/fffecdc94fb34296b9066ff55593ef3c.png