You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
384 lines
12 KiB
384 lines
12 KiB
import React from 'react';
|
|
import { FormattedMessage, injectIntl } from 'react-intl';
|
|
import { Modal, message, Row, Col, Icon } from 'antd';
|
|
import { Link } from 'bisheng/router';
|
|
import RcFooter from 'rc-footer';
|
|
import { isLocalStorageNameSupported, loadScript, getLocalizedPathname } from '../utils';
|
|
import ColorPicker from '../Color/ColorPicker';
|
|
|
|
class Footer extends React.Component {
|
|
lessLoaded = false;
|
|
|
|
state = {
|
|
color: '#1890ff',
|
|
};
|
|
|
|
componentDidMount() {
|
|
// for some iOS
|
|
// http://stackoverflow.com/a/14555361
|
|
if (!isLocalStorageNameSupported()) {
|
|
return;
|
|
}
|
|
// 大版本发布后全局弹窗提示
|
|
// 1. 点击『知道了』之后不再提示
|
|
// 2. 超过截止日期后不再提示
|
|
if (
|
|
localStorage.getItem('antd@3.0.0-notification-sent') !== 'true' &&
|
|
Date.now() < new Date('2017/12/20').getTime()
|
|
) {
|
|
this.infoNewVersion();
|
|
}
|
|
}
|
|
|
|
getColumns() {
|
|
const { intl = {} } = this.props;
|
|
const { color } = this.state;
|
|
const isZhCN = intl.locale === 'zh-CN';
|
|
return [
|
|
{
|
|
title: <FormattedMessage id="app.footer.resources" />,
|
|
items: [
|
|
{
|
|
title: 'Ant Design Pro',
|
|
url: 'https://pro.ant.design',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
title: 'Ant Design Mobile',
|
|
url: 'https://mobile.ant.design',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
title: 'NG-ZORRO',
|
|
description: 'Ant Design of Angular',
|
|
url: 'https://ng.ant.design',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
title: 'NG-ZORRO-MOBILE',
|
|
url: 'https://ng.mobile.ant.design',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
title: 'Ant Design Vue',
|
|
url: 'https://vue.ant.design',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
title: 'Ant Design Landing',
|
|
description: <FormattedMessage id="app.footer.landing" />,
|
|
url: 'https://landing.ant.design',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
title: 'Scaffolds',
|
|
description: <FormattedMessage id="app.footer.scaffolds" />,
|
|
url: 'https://scaffolds.ant.design',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
title: 'Umi',
|
|
description: <FormattedMessage id="app.footer.umi" />,
|
|
url: 'https://umijs.org',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
title: 'Dva',
|
|
description: <FormattedMessage id="app.footer.dva" />,
|
|
url: 'https://dvajs.com',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
title: 'Ant Motion',
|
|
description: <FormattedMessage id="app.footer.motion" />,
|
|
url: 'https://motion.ant.design',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
title: <FormattedMessage id="app.footer.design-resources" />,
|
|
url: getLocalizedPathname('/docs/spec/download', isZhCN),
|
|
},
|
|
{
|
|
title: <FormattedMessage id="app.footer.chinamirror" />,
|
|
url: 'https://ant-design.gitee.io/',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: <FormattedMessage id="app.footer.community" />,
|
|
items: [
|
|
{
|
|
icon: <Icon type="ant-design" />,
|
|
title: <FormattedMessage id="app.footer.awesome" />,
|
|
url: 'https://github.com/websemantics/awesome-ant-design',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="medium" />,
|
|
title: 'Medium',
|
|
url: 'http://medium.com/ant-design/',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="twitter" style={{ color: '#1DA1F2' }} />,
|
|
title: 'Twitter',
|
|
url: 'http://twitter.com/antdesignui',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="zhihu" style={{ color: '#0084ff' }} />,
|
|
title: <FormattedMessage id="app.footer.zhihu" />,
|
|
url: 'http://zhuanlan.zhihu.com/antdesign',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="zhihu" style={{ color: '#0084ff' }} />,
|
|
title: <FormattedMessage id="app.footer.zhihu.xtech" />,
|
|
url: 'http://zhuanlan.zhihu.com/xtech',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="zhihu" style={{ color: '#0084ff' }} />,
|
|
title: 'SEE Conf',
|
|
description: <FormattedMessage id="app.footer.seeconf" />,
|
|
url: 'http://zhuanlan.zhihu.com/xtech',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="usergroup-add" />,
|
|
title: <FormattedMessage id="app.footer.work_with_us" />,
|
|
url: getLocalizedPathname('/docs/spec/work-with-us', isZhCN),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: <FormattedMessage id="app.footer.help" />,
|
|
items: [
|
|
{
|
|
icon: <Icon type="github" />,
|
|
title: 'GitHub',
|
|
url: 'https://github.com/ant-design/ant-design',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="history" />,
|
|
title: <FormattedMessage id="app.footer.change-log" />,
|
|
url: getLocalizedPathname('/changelog', isZhCN),
|
|
},
|
|
{
|
|
icon: <Icon type="profile" />,
|
|
title: <FormattedMessage id="app.footer.faq" />,
|
|
url: getLocalizedPathname('/docs/react/faq', isZhCN),
|
|
},
|
|
{
|
|
icon: <Icon type="code" />,
|
|
title: <FormattedMessage id="app.footer.course" />,
|
|
url: 'https://www.yuque.com/ant-design/course',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="message" />,
|
|
title: <FormattedMessage id="app.footer.discuss-cn" />,
|
|
url: 'https://gitter.im/ant-design/ant-design',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="message" />,
|
|
title: <FormattedMessage id="app.footer.discuss-en" />,
|
|
url: 'https://gitter.im/ant-design/ant-design-english',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="bug" />,
|
|
title: <FormattedMessage id="app.footer.bug-report" />,
|
|
url: 'https://new-issue.ant.design/',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="issues-close" />,
|
|
title: <FormattedMessage id="app.footer.issues" />,
|
|
url: 'https://github.com/ant-design/ant-design/issues',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="question-circle" />,
|
|
title: <FormattedMessage id="app.footer.stackoverflow" />,
|
|
url: 'http://stackoverflow.com/questions/tagged/antd',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: <Icon type="question-circle" />,
|
|
title: <FormattedMessage id="app.footer.segmentfault" />,
|
|
url: 'https://segmentfault.com/t/antd',
|
|
openExternal: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
icon: (
|
|
<img
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
|
|
alt="AFX Cloud"
|
|
/>
|
|
),
|
|
title: <FormattedMessage id="app.footer.more-product" />,
|
|
items: [
|
|
{
|
|
icon: (
|
|
<img
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
|
|
alt="yuque"
|
|
/>
|
|
),
|
|
title: '语雀',
|
|
url: 'https://yuque.com',
|
|
description: '知识创作与分享工具',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: (
|
|
<img
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/uHocHZfNWZOdsRUonZNr.png"
|
|
alt="yunfengdie"
|
|
/>
|
|
),
|
|
title: '云凤蝶',
|
|
url: 'https://yunfengdie.com',
|
|
description: '中台建站平台',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: (
|
|
<img
|
|
src="https://gw.alipayobjects.com/zos/antfincdn/nc7Fc0XBg5/8a6844f5-a6ed-4630-9177-4fa5d0b7dd47.png"
|
|
alt="AntV"
|
|
/>
|
|
),
|
|
title: 'AntV',
|
|
url: 'https://antv.alipay.com',
|
|
description: '数据可视化',
|
|
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: '企业级 Node 开发框架',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: (
|
|
<img
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/DMDOlAUhmktLyEODCMBR.ico"
|
|
alt="kitchen"
|
|
/>
|
|
),
|
|
title: 'Kitchen',
|
|
description: <FormattedMessage id="app.footer.kitchen" />,
|
|
url: 'https://kitchen.alipay.com',
|
|
openExternal: true,
|
|
},
|
|
{
|
|
icon: (
|
|
<img
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
|
|
alt="xtech"
|
|
/>
|
|
),
|
|
title: '蚂蚁体验科技',
|
|
url: 'https://xtech.antfin.com/',
|
|
openExternal: true,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
}
|
|
|
|
handleColorChange = color => {
|
|
const changeColor = () => {
|
|
const {
|
|
intl: { messages },
|
|
} = this.props;
|
|
window.less
|
|
.modifyVars({
|
|
'@primary-color': color,
|
|
})
|
|
.then(() => {
|
|
Icon.setTwoToneColor({ primaryColor: color });
|
|
message.success(messages['app.footer.primary-color-changed']);
|
|
this.setState({ color });
|
|
});
|
|
};
|
|
|
|
const lessUrl = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
|
|
|
|
if (this.lessLoaded) {
|
|
changeColor();
|
|
} else {
|
|
window.less = {
|
|
async: true,
|
|
javascriptEnabled: true,
|
|
};
|
|
loadScript(lessUrl).then(() => {
|
|
this.lessLoaded = true;
|
|
changeColor();
|
|
});
|
|
}
|
|
};
|
|
|
|
infoNewVersion() {
|
|
const {
|
|
intl: { messages },
|
|
} = this.props;
|
|
Modal.info({
|
|
title: messages['app.publish.title'],
|
|
content: (
|
|
<div>
|
|
<img
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
|
alt="Ant Design"
|
|
/>
|
|
<p>
|
|
{messages['app.publish.greeting']}
|
|
<a target="_blank" rel="noopener noreferrer" href="/changelog">
|
|
antd@3.0.0
|
|
</a>
|
|
{messages['app.publish.intro']}
|
|
{messages['app.publish.old-version-guide']}
|
|
<a target="_blank" rel="noopener noreferrer" href="http://2x.ant.design">
|
|
2x.ant.design
|
|
</a>
|
|
{messages['app.publish.old-version-tips']}
|
|
</p>
|
|
</div>
|
|
),
|
|
okText: 'OK',
|
|
onOk: () => localStorage.setItem('antd@3.0.0-notification-sent', 'true'),
|
|
className: 'new-version-info-modal',
|
|
width: 470,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<RcFooter
|
|
columns={this.getColumns()}
|
|
bottom={
|
|
<>
|
|
Made with <span style={{ color: '#fff' }}>❤</span> by{' '}
|
|
<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com">
|
|
<FormattedMessage id="app.footer.company" />
|
|
</a>
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default injectIntl(Footer);
|
|
|