import React , { useState , useEffect } from 'react' ; import { withPrefix } from 'gatsby' ; import { default as RCFooter , FooterProps as RcFooterProps } from 'rc-footer' ; import { useTranslation } from 'react-i18next' ; import { GithubOutlined , WeiboOutlined , ZhihuOutlined , QuestionCircleOutlined , } from '@ant-design/icons' ; import classnames from 'classnames' ; import omit from 'omit.js' ; import styles from './Footer.module.less' ; import 'rc-footer/assets/index.less' ; export const OLD_SITE_DOMAIN = 'https://antv-2018.alipay.com' ; interface FooterProps extends RcFooterProps { rootDomain ? : string ; language ? : string ; githubUrl ? : string ; location : Location ; } const Footer = ( { columns , bottom , theme = 'dark' , language , rootDomain = '' , location , ... restProps } ) => { const [ withMenu , setWithMenu ] = useState < boolean > ( false ) ; const { t , i18n } = useTranslation ( ) ; const lang = language || i18n . language ; useEffect ( ( ) => { const pathPrefix = withPrefix ( '/' ) . replace ( /\/$/ , '' ) ; const path = location . pathname . replace ( pathPrefix , '' ) ; const isExamplePage = path . startsWith ( `/zh/examples` ) || path . startsWith ( `/en/examples` ) ; const isDocsPage = path . startsWith ( `/zh/docs` ) || path . startsWith ( `/en/docs` ) ; if ( isExamplePage ) { setWithMenu ( true ) ; } else if ( isDocsPage ) { setWithMenu ( ! ( ( location as any ) . key === 'initial' ) ) ; } else { setWithMenu ( false ) ; } } , [ location ] ) ; const getColums = ( ) => { const col1 = { title : t ( 'Resources' ) , items : [ { title : 'Ant Design' , url : 'https://ant.design' , openExternal : true , } , { title : 'Ant Design Mobile' , url : 'https://mobile.ant.design' , openExternal : true , } , { title : 'Umi' , description : t ( 'React 应用开发框架' ) , url : 'https://umijs.org' , openExternal : true , } , { title : 'Dumi' , description : t ( '组件/文档研发工具' ) , url : 'https://d.umijs.org' , openExternal : true , } , { title : 'ahooks' , description : t ( 'React Hooks 库' ) , url : 'https://github.com/alibaba/hooks' , openExternal : true , } , { title : t ( '国内镜像' ) , url : 'https://antv.gitee.io/' , } , ] , } ; const col2 = { title : t ( '社区' ) , items : [ { icon : < ZhihuOutlined style = { { color : '#0084ff' } } / > , title : t ( '体验科技专栏' ) , url : 'http://zhuanlan.zhihu.com/xtech' , openExternal : true , } , { icon : ( < img src = "https://gw.alipayobjects.com/zos/rmsportal/mZBWtboYbnMkTBaRIuWQ.png" alt = "seeconf" / > ) , title : 'SEE Conf' , description : t ( '蚂蚁体验科技大会' ) , url : 'https://seeconf.antfin.com/' , openExternal : true , } , ] , } ; const col3 = { title : t ( '帮助' ) , items : [ { icon : < GithubOutlined />, title : 'GitHub' , url : 'https://github.com/antvis' , openExternal : true , } , { icon : < QuestionCircleOutlined />, title : t ( 'StackOverflow' ) , url : 'http://stackoverflow.com/questions/tagged/antv' , openExternal : true , } , ] , } ; const more = { icon : ( < img src = "https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt = "more products" / > ) , title : t ( '更多产品' ) , items : [ { icon : ( < img src = "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt = "Ant Design" / > ) , title : 'Ant Design' , url : 'https://ant.design' , description : t ( '企业级 UI 设计语言' ) , openExternal : true , } , { icon : ( < img src = "https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" alt = "yuque" / > ) , title : t ( '语雀' ) , url : 'https://yuque.com' , description : t ( '知识创作与分享工具' ) , openExternal : true , } , { icon : ( < img src = "https://gw.alipayobjects.com/zos/antfincdn/v2%24rh7lqpu/82f338dd-b0a6-41bc-9a86-58aaa9df217b.png" alt = "Egg" / > ) , title : 'Egg' , url : 'https://eggjs.org' , description : t ( '企业级 Node 开发框架' ) , openExternal : true , } , { icon : ( < img src = "https://gw.alipayobjects.com/zos/rmsportal/DMDOlAUhmktLyEODCMBR.ico" alt = "kitchen" / > ) , title : 'Kitchen' , description : t ( 'Sketch 工具集' ) , url : 'https://kitchen.alipay.com' , openExternal : true , } , { icon : ( < img src = "https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt = "xtech" / > ) , title : t ( '蚂蚁体验科技' ) , url : 'https://xtech.antfin.com/' , openExternal : true , } , ] , } ; return [ col1 , col2 , col3 , more ] ; } ; return ( < RCFooter maxColumnsPerRow = { 5 } theme = { theme } columns = { columns || getColums ( ) } className = { classnames ( styles . footer , { [ styles . withMenu ] : withMenu , } ) } bottom = { bottom || ( < > < div className = { styles . bottom } > < div > < a href = "https://weibo.com/antv2017" target = "_blank" rel = "noopener noreferrer" > < WeiboOutlined /> < /a> < a href = "https://zhuanlan.zhihu.com/aiux-antv" target = "_blank" rel = "noopener noreferrer" > < ZhihuOutlined /> < /a> < a href = "https://github.com/antvis" target = "_blank" rel = "noopener noreferrer" > < GithubOutlined /> < /a> < a href = { `${ rootDomain }/${ lang }/about` } > { t ( '关于我们' ) } < /a> < a href = { OLD_SITE_DOMAIN } target = "_blank" rel = "noopener noreferrer" > { t ( '返回旧版' ) } < /a> < /div> < div > © { new Date ( ) . getFullYear ( ) } Made with ❤ by { ' ' } < a href = "https://xtech.antfin.com/" > XTech < /a> < /div> < /div> < />)} {...omit(restProps, ['githubUrl'])}/ > ) ; } ; export default Footer ;