用于展示附件（文档或者图片）的控件

业务系统中会有一些对附件的展示功能，比如文档或者图片之类，要么能下载，要么能预览，二者定有一条途径可以看到附件内容。
文档类多以链接+文件名的形式展示，点击文件名可以下载文件。
图片也可以以这种方式展示，也可以进行预览，这种方式会更加直观。

控件会需要一个左右翻页效果的两个按钮,当图片数量超过4时可以左右翻页，下载类、预览类分开处理。

AttachComponent.tsx

interface IProps{
    attachData:any;
}
function AttachComponent(props:IProps):JSX.Element{
    const {attachData} = props;
    cosnt [imgList,setImgList] = useState([]);
    const [docList,setDocList] = useState([]);
    const [current,setCurrent] = useState(0); // use variable 'current' set  current img index
    const [moveWidth,setMoveWidth] = useState(0);
    
    useEffect(()=>{
        handleAttachData();
    },[attachData])
    useEffect(()=>{
        handleMove();
    },[current]);
    
    
const handleAttachData =() =>{
    const ImgArr :any = [];
    const DocArr :any = [];
    attachData.forEach((item:any=>{
        cosnt {type} = item; //  distinguish image and doc by type
        if(1 === type){
            ImgArr.push(item);
        }else if(2 === type){
            DocArr.push(item);
        }
    }))
    setImgList(ImgArr);
    setDocList(DocArr);
}

const handleMove =() =>{
    setMoveWidth( current * 100 );
}

// handle page left 
const HandleMoveLeft = () =>{
    setCurrent(current -1 > 0 ? current -1 : 0);
}
// handle page right
const HandleMoveRight = () =>{
    let maxCnt = parseInt((imgList.length / 4).toString());
    if(imgList.length % 4 ){
        maxCnt = maxCnt + 1;
    }
    if(current +1 >=  maxCnt){
        return;
    }
    setCurrent(current + 1 );
}

return(
    

        {docList.length >0 &&
            

                {
                    docList.map((item:any,index:number)=>{
                        return 
{item.name}
                    })
                }
            
        }
        {imgList.length > 0 && 
            

                

                    {
                        imgList.map((item:any,index:number)=>{
                            return 

                        })
                    }
                
                // when length >4  show page left btn
                {   
                    imgList.length > 4 && 
                    

                        
                   
                }
                {   
                    imgList.length > 4 && 
                    

                        
                   
                }
            
        }
    
  )
}
export default Memo(AttachComponent);

AttachComponent.less

.attach-container{
    width:100%;
    position:relative;
    .img-list{
        width:100%;
        position:relative;
        padding:.1rem 0;
        .img-container{
            position:relative;
            left:0;
            transition:left 0.3s;
        }
        .img-item{
            display:inline-block;
            width:23.5%;
            margin-left:2%;
            height:1.3rem;
            img{
                width:100%;
                height:100%;
            }
            &:nth-of-type(1){
                margin-left:0;
            }
            &:nth-of-type(5n){
                margin-left:0;
            }
        }
    }
    .left, .right{
        width:.5rem;
        height:.5rem;
        background:rgba(0,0,0,0.3);
        border-raidus:50%;
        position:absolute;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .right{
        right:0;
    }
    ul,li{
        margin:0;
        padding:0;
        a{
            #427aff;
        }
    }
}