ant-design/site/theme/template/Layout/Footer.jsx

413 lines
14 KiB
React
Raw Normal View History

2016-02-29 14:08:40 +08:00
import React from 'react';
import { FormattedMessage, injectIntl } from 'react-intl';
2018-12-07 16:17:45 +08:00
import { Modal, message, Row, Col, Badge, Icon } from 'antd';
2018-11-10 14:52:16 +08:00
import { Link } from 'bisheng/router';
import { isLocalStorageNameSupported, loadScript, getLocalizedPathname } from '../utils';
import ColorPicker from '../Color/ColorPicker';
class Footer extends React.Component {
constructor(props) {
super(props);
this.lessLoaded = false;
this.state = {
color: '#1890ff',
};
}
componentDidMount() {
// for some iOS
// http://stackoverflow.com/a/14555361
if (!isLocalStorageNameSupported()) {
return;
}
// 大版本发布后全局弹窗提示
// 1. 点击『知道了』之后不再提示
// 2. 超过截止日期后不再提示
if (
2018-12-07 16:17:45 +08:00
localStorage.getItem('antd@3.0.0-notification-sent') !== 'true' &&
Date.now() < new Date('2017/12/20').getTime()
) {
this.infoNewVersion();
}
}
2016-03-17 15:46:07 +08:00
2018-12-07 16:17:45 +08:00
handleColorChange = color => {
const changeColor = () => {
2018-12-07 16:17:45 +08:00
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 });
});
};
2018-09-11 14:15:48 +08:00
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,
2018-09-11 14:15:48 +08:00
javascriptEnabled: true,
};
loadScript(lessUrl).then(() => {
this.lessLoaded = true;
changeColor();
});
}
2018-12-07 16:17:45 +08:00
};
infoNewVersion() {
2018-12-07 16:17:45 +08:00
const {
intl: { messages },
} = this.props;
Modal.info({
title: messages['app.publish.title'],
content: (
<div>
2018-12-07 16:17:45 +08:00
<img
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
alt="Ant Design"
/>
<p>
{messages['app.publish.greeting']}
2018-12-07 16:17:45 +08:00
<a target="_blank" rel="noopener noreferrer" href="/changelog">
antd@3.0.0
</a>
{messages['app.publish.intro']}
{messages['app.publish.old-version-guide']}
2018-12-07 16:17:45 +08:00
<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',
2017-12-01 15:42:54 +08:00
onOk: () => localStorage.setItem('antd@3.0.0-notification-sent', 'true'),
className: 'new-version-info-modal',
width: 470,
});
}
2016-02-29 14:08:40 +08:00
render() {
2018-11-10 14:52:16 +08:00
const { intl = {} } = this.props;
const { color } = this.state;
2018-11-10 14:52:16 +08:00
const isZhCN = intl.locale === 'zh-CN';
2016-03-01 14:19:50 +08:00
return (
2018-01-09 15:38:06 +08:00
<footer id="footer">
<div className="footer-wrap">
<Row>
2018-01-04 20:00:38 +08:00
<Col md={6} sm={24} xs={24}>
<div className="footer-center">
2018-12-07 16:17:45 +08:00
<h2>
<FormattedMessage id="app.footer.resources" />
</h2>
<div>
<a href="http://pro.ant.design">Ant Design Pro</a>
</div>
<div>
<a href="http://mobile.ant.design">Ant Design Mobile</a>
</div>
<div>
<a href="http://ng.ant.design">NG-ZORRO</a>
<span> - </span>
Ant Design of Angular
</div>
<div>
<a href="http://ng.mobile.ant.design">NG-ZORRO-MOBILE</a>
</div>
2019-02-17 00:17:53 +08:00
<div>
<a href="http://vue.ant.design">Ant Design Vue</a>
</div>
2018-11-08 14:43:41 +08:00
<div>
2018-12-07 16:17:45 +08:00
<a target="_blank" rel="noopener noreferrer" href="http://kitchen.alipay.com">
Kitchen
</a>
2018-11-08 14:43:41 +08:00
<span> - </span>
<FormattedMessage id="app.footer.kitchen" />
</div>
2018-05-14 19:52:51 +08:00
<div>
2018-08-14 12:26:53 +08:00
<Badge dot offset={[3, 0]}>
2018-12-07 16:17:45 +08:00
<a target="_blank" rel="noopener noreferrer" href="http://landing.ant.design">
Ant Design Landing
</a>
2018-08-14 12:26:53 +08:00
<span> - </span>
2018-11-08 14:43:41 +08:00
<FormattedMessage id="app.footer.landing" />
2018-08-14 12:26:53 +08:00
</Badge>
2018-05-14 19:52:51 +08:00
</div>
<div>
<a href="http://scaffold.ant.design">Scaffolds</a>
<span> - </span>
<FormattedMessage id="app.footer.scaffolds" />
</div>
2018-09-11 14:34:36 +08:00
<div>
2018-12-07 16:17:45 +08:00
<a target="_blank" rel="noopener noreferrer" href="http://umijs.org/">
Umi
</a>{' '}
- <FormattedMessage id="app.footer.umi" />
2018-09-11 14:34:36 +08:00
</div>
<div>
2018-12-07 16:17:45 +08:00
<a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva">
dva
</a>{' '}
- <FormattedMessage id="app.footer.dva" />
</div>
<div>
2018-12-07 16:17:45 +08:00
<a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design">
Ant Motion
</a>
<span> - </span>
<FormattedMessage id="app.footer.motion" />
</div>
<div>
2018-11-10 14:52:16 +08:00
<Link to={getLocalizedPathname('/docs/spec/download', isZhCN)}>
<FormattedMessage id="app.footer.design-resources" />
</Link>
</div>
2018-02-11 17:54:55 +08:00
<div>
2018-11-10 14:52:16 +08:00
<a target="_blank" rel="noopener noreferrer" href="http://ant-design.gitee.io/">
2018-02-11 17:54:55 +08:00
<FormattedMessage id="app.footer.chinamirror" />
</a>
</div>
</div>
</Col>
2018-01-04 20:00:38 +08:00
<Col md={6} sm={24} xs={24}>
<div className="footer-center">
2018-12-07 16:17:45 +08:00
<h2>
<FormattedMessage id="app.footer.community" />
</h2>
2018-02-11 17:54:55 +08:00
<div>
2018-12-07 16:17:45 +08:00
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/websemantics/awesome-ant-design"
>
2018-11-10 14:52:16 +08:00
<Icon type="ant-design" /> <FormattedMessage id="app.footer.awesome" />
2018-02-11 17:54:55 +08:00
</a>
</div>
<div>
<a target="_blank" rel="noopener noreferrer" href="http://medium.com/ant-design/">
2018-11-10 14:52:16 +08:00
<Icon type="medium" /> Medium
2018-02-11 17:54:55 +08:00
</a>
</div>
<div>
2018-12-07 16:17:45 +08:00
<a
target="_blank"
rel="noopener noreferrer"
href="http://twitter.com/antdesignui"
>
2018-11-10 14:52:16 +08:00
<Icon type="twitter" style={{ color: '#1DA1F2' }} /> Twitter
</a>
</div>
<div>
2018-12-07 16:17:45 +08:00
<a
target="_blank"
rel="noopener noreferrer"
href="http://zhuanlan.zhihu.com/antdesign"
>
<Icon type="zhihu" style={{ color: '#0084ff' }} />{' '}
<FormattedMessage id="app.footer.zhihu" />
2018-02-11 17:54:55 +08:00
</a>
</div>
<div>
2018-12-07 16:17:45 +08:00
<a
target="_blank"
rel="noopener noreferrer"
href="http://zhuanlan.zhihu.com/xtech"
>
<Icon type="zhihu" style={{ color: '#0084ff' }} />{' '}
<FormattedMessage id="app.footer.zhihu.xtech" />
2018-02-11 17:54:55 +08:00
</a>
</div>
<div>
<a target="_blank" rel="noopener noreferrer" href="http://seeconf.alipay.com/">
SEE Conf
</a>
<span> - </span>
<FormattedMessage id="app.footer.seeconf" />
</div>
2018-09-11 14:34:36 +08:00
<div>
2018-11-10 14:52:16 +08:00
<Link to={getLocalizedPathname('/docs/spec/work-with-us', isZhCN)}>
2018-09-11 14:34:36 +08:00
<FormattedMessage id="app.footer.work_with_us" />
2018-11-10 14:52:16 +08:00
</Link>
2018-09-11 14:34:36 +08:00
</div>
2018-02-11 17:54:55 +08:00
</div>
</Col>
<Col md={6} sm={24} xs={24}>
<div className="footer-center">
2018-12-07 16:17:45 +08:00
<h2>
<FormattedMessage id="app.footer.help" />
</h2>
2018-02-11 17:54:55 +08:00
<div>
2018-12-07 16:17:45 +08:00
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/ant-design/ant-design"
>
2018-02-11 17:54:55 +08:00
GitHub
</a>
</div>
<div>
2018-11-10 14:52:16 +08:00
<Link to={getLocalizedPathname('/changelog', isZhCN)}>
<FormattedMessage id="app.footer.change-log" />
2018-11-10 14:52:16 +08:00
</Link>
</div>
2018-09-11 14:34:36 +08:00
<div>
2018-12-07 16:17:45 +08:00
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.yuque.com/ant-design/course"
>
2018-09-11 14:34:36 +08:00
<FormattedMessage id="app.footer.course" />
</a>
</div>
<div>
2018-11-10 14:52:16 +08:00
<Link to={getLocalizedPathname('/docs/react/faq', isZhCN)}>
<FormattedMessage id="app.footer.faq" />
2018-11-10 14:52:16 +08:00
</Link>
</div>
<div>
2018-12-07 16:17:45 +08:00
<a
target="_blank"
rel="noopener noreferrer"
href="https://gitter.im/ant-design/ant-design"
>
<FormattedMessage id="app.footer.discuss-cn" />
</a>
</div>
<div>
2018-12-07 16:17:45 +08:00
<a
target="_blank"
rel="noopener noreferrer"
href="https://gitter.im/ant-design/ant-design-english"
>
<FormattedMessage id="app.footer.discuss-en" />
</a>
</div>
<div>
<a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/">
<FormattedMessage id="app.footer.bug-report" />
</a>
</div>
<div>
2018-12-07 16:17:45 +08:00
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/ant-design/ant-design/issues"
>
<FormattedMessage id="app.footer.issues" />
</a>
</div>
<div>
2018-12-07 16:17:45 +08:00
<a
target="_blank"
rel="noopener noreferrer"
href="http://stackoverflow.com/questions/tagged/antd"
>
<FormattedMessage id="app.footer.stackoverflow" />
</a>
</div>
<div>
2018-12-07 16:17:45 +08:00
<a
target="_blank"
rel="noopener noreferrer"
href="https://segmentfault.com/t/antd"
>
<FormattedMessage id="app.footer.segmentfault" />
</a>
</div>
</div>
</Col>
2018-01-04 20:00:38 +08:00
<Col md={6} sm={24} xs={24}>
<div className="footer-center">
<h2>
2018-12-07 16:17:45 +08:00
<img
className="title-icon"
src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
alt="AFX Cloud"
/>
<FormattedMessage id="app.footer.more-product" />
</h2>
2018-02-11 17:54:55 +08:00
<div>
<a target="_blank" rel="noopener noreferrer" href="https://yuque.com/">
2018-12-07 16:17:45 +08:00
<Icon type="yuque" theme="filled" style={{ color: '#25b864' }} />{' '}
<FormattedMessage id="app.footer.yuque" />
2018-02-11 17:54:55 +08:00
</a>
<span> - </span>
<FormattedMessage id="app.footer.yuque.slogan" />
</div>
<div>
<a target="_blank" rel="noopener noreferrer" href="https://yunfengdie.com/">
<FormattedMessage id="app.footer.fengdie" />
</a>
<span> - </span>
<FormattedMessage id="app.footer.fengdie.slogan" />
</div>
2017-11-28 16:15:22 +08:00
<div>
2018-12-07 16:17:45 +08:00
<a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">
AntV
</a>
2017-11-28 16:15:22 +08:00
<span> - </span>
<FormattedMessage id="app.footer.data-vis" />
</div>
<div>
2018-12-07 16:17:45 +08:00
<a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">
Egg
</a>
2017-11-28 16:15:22 +08:00
<span> - </span>
<FormattedMessage id="app.footer.eggjs" />
</div>
2018-02-11 17:54:55 +08:00
<div>
2018-11-10 14:52:16 +08:00
<a target="_blank" rel="noopener noreferrer" href="http://xtech.antfin.com/">
<FormattedMessage id="app.footer.xtech" />
2018-02-11 17:54:55 +08:00
</a>
</div>
<div style={{ marginTop: 20 }}>
<ColorPicker
type="sketch"
small
color={color}
2018-02-11 17:54:55 +08:00
position="top"
presetColors={[
'#F5222D',
'#FA541C',
'#FA8C16',
'#FAAD14',
'#FADB14',
'#A0D911',
'#52C41A',
'#13C2C2',
'#1890FF',
'#2F54EB',
'#722ED1',
'#EB2F96',
]}
onChangeComplete={this.handleColorChange}
/>
</div>
</div>
</Col>
</Row>
</div>
2018-05-15 12:39:05 +08:00
<div className="bottom-bar">
Made with <span className="heart"></span> by
2018-10-06 15:31:53 +08:00
<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com">
2018-05-15 12:39:05 +08:00
<FormattedMessage id="app.footer.company" />
</a>
</div>
2016-03-01 14:19:50 +08:00
</footer>
);
2016-02-29 14:08:40 +08:00
}
}
export default injectIntl(Footer);