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

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

控件会需要一个左右翻页效果的两个按钮, 当图片数量超过 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(
    <div className = 'attach-container'>
        {docList.length >0 &&
            <ul className = 'doc-list'>
                {docList.map((item:any,index:number)=>{return <li className = 'doc-item' key = {`doc-item-${index}`}><a href ={'doc file url for download'} download ={true}>{item.name}</a></li>
                    })
                }
            </ul>
        }
        {imgList.length > 0 && 
            <div className = 'img-list'>
                <div className = 'img-container'>
                    {imgList.map((item:any,index:number)=>{return <div key={`doc-item-${index}`} className ='img-item'><img src = {'img file url for download'} alt='load file failed'/></div>
                        })
                    }
                </div>
                // when length >4  show page left btn
                {   
                    imgList.length > 4 && 
                    <div className = 'left' onClick={handleMoveLeft}>
                        <img src={'left button src'} alt ='picture load failed'/>
                   </div>
                }
                {   
                    imgList.length > 4 && 
                    <div className = 'right' onClick={handleMoveRight}>
                        <img src={'right button src'} alt ='picture load failed'/>
                   </div>
                }
            </div>
        }
    </div>
  )
}
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;}
    }
}