2016-02-29 14:08:40 +08:00
|
|
|
import React from 'react';
|
2021-08-09 12:17:02 +08:00
|
|
|
import { message } from 'antd';
|
2019-09-19 12:27:02 +08:00
|
|
|
import RcFooter from 'rc-footer';
|
2021-08-09 12:17:02 +08:00
|
|
|
import { Link } from 'bisheng/router';
|
2019-09-19 14:04:59 +08:00
|
|
|
import { presetPalettes } from '@ant-design/colors';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { WrappedComponentProps } from 'react-intl';
|
|
|
|
import { FormattedMessage, injectIntl } from 'react-intl';
|
2019-12-26 15:27:52 +08:00
|
|
|
import {
|
|
|
|
AntDesignOutlined,
|
|
|
|
MediumOutlined,
|
|
|
|
TwitterOutlined,
|
|
|
|
ZhihuOutlined,
|
|
|
|
UsergroupAddOutlined,
|
|
|
|
GithubOutlined,
|
|
|
|
HistoryOutlined,
|
|
|
|
ProfileOutlined,
|
|
|
|
BugOutlined,
|
|
|
|
IssuesCloseOutlined,
|
|
|
|
QuestionCircleOutlined,
|
2021-09-01 10:56:50 +08:00
|
|
|
BgColorsOutlined,
|
2019-12-26 15:27:52 +08:00
|
|
|
} from '@ant-design/icons';
|
2017-09-03 22:15:33 +08:00
|
|
|
import ColorPicker from '../Color/ColorPicker';
|
2021-08-09 12:17:02 +08:00
|
|
|
import { loadScript, getLocalizedPathname } from '../utils';
|
2016-05-17 12:04:44 +08:00
|
|
|
|
2020-09-14 10:48:08 +08:00
|
|
|
class Footer extends React.Component<WrappedComponentProps & { location: any }> {
|
2019-09-19 12:27:02 +08:00
|
|
|
lessLoaded = false;
|
2017-09-18 17:31:48 +08:00
|
|
|
|
2019-09-19 12:27:02 +08:00
|
|
|
state = {
|
2019-09-19 14:04:59 +08:00
|
|
|
color: presetPalettes.blue.primary,
|
2019-09-19 12:27:02 +08:00
|
|
|
};
|
2017-09-03 22:15:33 +08:00
|
|
|
|
2019-09-19 12:27:02 +08:00
|
|
|
getColumns() {
|
2020-09-14 10:48:08 +08:00
|
|
|
const { intl, location } = this.props;
|
|
|
|
|
2019-09-19 12:27:02 +08:00
|
|
|
const isZhCN = intl.locale === 'zh-CN';
|
2020-02-28 18:47:38 +08:00
|
|
|
|
2020-09-14 10:48:08 +08:00
|
|
|
const getLinkHash = (path: string, hash: { zhCN: string; enUS: string }) => {
|
|
|
|
const pathName = getLocalizedPathname(path, isZhCN, location.query, hash);
|
2021-11-26 12:18:21 +08:00
|
|
|
const { pathname, query = {} } = pathName;
|
2020-09-14 10:48:08 +08:00
|
|
|
const pathnames = pathname.split('#');
|
|
|
|
if ('direction' in query) {
|
|
|
|
return `${pathnames[0]}?direction=rtl#${pathnames[1]}`;
|
|
|
|
}
|
|
|
|
return pathname;
|
|
|
|
};
|
|
|
|
|
|
|
|
const getLink = (path: string) => {
|
|
|
|
const pathName = getLocalizedPathname(path, isZhCN, location.query);
|
2021-11-26 12:18:21 +08:00
|
|
|
const { pathname, query = {} } = pathName;
|
2020-09-14 10:48:08 +08:00
|
|
|
if ('direction' in query) {
|
|
|
|
return `${pathname}?direction=rtl}`;
|
|
|
|
}
|
|
|
|
return pathname;
|
|
|
|
};
|
|
|
|
|
2020-02-28 18:47:38 +08:00
|
|
|
const col1 = {
|
|
|
|
title: <FormattedMessage id="app.footer.resources" />,
|
|
|
|
items: [
|
2020-05-30 14:55:41 +08:00
|
|
|
{
|
|
|
|
title: 'Ant Design Charts',
|
|
|
|
url: 'https://charts.ant.design',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
2020-02-28 18:47:38 +08:00
|
|
|
{
|
2021-05-08 11:27:55 +08:00
|
|
|
title: 'Ant Design Pro',
|
|
|
|
url: 'https://pro.ant.design',
|
2020-02-28 18:47:38 +08:00
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
2021-05-08 11:27:55 +08:00
|
|
|
title: 'Ant Design Pro Components',
|
|
|
|
url: 'https://procomponents.ant.design',
|
2020-02-28 18:47:38 +08:00
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
2021-05-08 11:27:55 +08:00
|
|
|
title: 'Ant Design Mobile',
|
|
|
|
url: 'https://mobile.ant.design',
|
2020-02-28 18:47:38 +08:00
|
|
|
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://scaffold.ant.design',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Umi',
|
|
|
|
description: <FormattedMessage id="app.footer.umi" />,
|
|
|
|
url: 'https://umijs.org',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
2020-05-07 16:50:32 +08:00
|
|
|
title: 'Dumi',
|
|
|
|
description: <FormattedMessage id="app.footer.dumi" />,
|
|
|
|
url: 'https://d.umijs.org',
|
2020-02-28 18:47:38 +08:00
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
2021-05-08 11:27:55 +08:00
|
|
|
title: 'qiankun',
|
|
|
|
description: <FormattedMessage id="app.footer.qiankun" />,
|
|
|
|
url: 'https://qiankun.umijs.org',
|
2020-02-28 18:47:38 +08:00
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
2020-07-16 10:38:19 +08:00
|
|
|
title: 'ahooks',
|
2020-02-28 18:47:38 +08:00
|
|
|
description: <FormattedMessage id="app.footer.hooks" />,
|
2020-07-16 10:38:19 +08:00
|
|
|
url: 'https://github.com/alibaba/hooks',
|
2020-02-28 18:47:38 +08:00
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Ant Motion',
|
|
|
|
description: <FormattedMessage id="app.footer.motion" />,
|
|
|
|
url: 'https://motion.ant.design',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: <FormattedMessage id="app.footer.chinamirror" />,
|
|
|
|
url: 'https://ant-design.gitee.io/',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
const col2 = {
|
|
|
|
title: <FormattedMessage id="app.footer.community" />,
|
|
|
|
items: [
|
|
|
|
{
|
|
|
|
icon: <AntDesignOutlined />,
|
|
|
|
title: <FormattedMessage id="app.footer.awesome" />,
|
|
|
|
url: 'https://github.com/websemantics/awesome-ant-design',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: <MediumOutlined />,
|
|
|
|
title: 'Medium',
|
|
|
|
url: 'http://medium.com/ant-design/',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: <TwitterOutlined style={{ color: '#1DA1F2' }} />,
|
|
|
|
title: 'Twitter',
|
|
|
|
url: 'http://twitter.com/antdesignui',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: <ZhihuOutlined style={{ color: '#0084ff' }} />,
|
|
|
|
title: <FormattedMessage id="app.footer.zhihu" />,
|
|
|
|
url: 'http://zhuanlan.zhihu.com/antdesign',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: <ZhihuOutlined style={{ color: '#0084ff' }} />,
|
|
|
|
title: <FormattedMessage id="app.footer.zhihu.xtech" />,
|
|
|
|
url: 'http://zhuanlan.zhihu.com/xtech',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
2020-05-24 17:11:34 +08:00
|
|
|
icon: (
|
|
|
|
<img
|
|
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/mZBWtboYbnMkTBaRIuWQ.png"
|
|
|
|
alt="seeconf"
|
|
|
|
/>
|
|
|
|
),
|
2020-02-28 18:47:38 +08:00
|
|
|
title: 'SEE Conf',
|
|
|
|
description: <FormattedMessage id="app.footer.seeconf" />,
|
|
|
|
url: 'https://seeconf.antfin.com/',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
if (isZhCN) {
|
|
|
|
col2.items.push({
|
|
|
|
icon: <UsergroupAddOutlined />,
|
|
|
|
title: <FormattedMessage id="app.footer.work_with_us" />,
|
2020-09-14 10:48:08 +08:00
|
|
|
url: getLinkHash('/docs/resources', {
|
2020-02-28 18:47:38 +08:00
|
|
|
zhCN: '加入我们',
|
|
|
|
enUS: 'JoinUs',
|
|
|
|
}),
|
|
|
|
LinkComponent: Link,
|
|
|
|
} as any);
|
|
|
|
}
|
|
|
|
|
|
|
|
const col3 = {
|
|
|
|
title: <FormattedMessage id="app.footer.help" />,
|
|
|
|
items: [
|
|
|
|
{
|
|
|
|
icon: <GithubOutlined />,
|
|
|
|
title: 'GitHub',
|
|
|
|
url: 'https://github.com/ant-design/ant-design',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: <HistoryOutlined />,
|
|
|
|
title: <FormattedMessage id="app.footer.change-log" />,
|
2020-09-14 10:48:08 +08:00
|
|
|
url: getLink('/changelog'),
|
2020-02-28 18:47:38 +08:00
|
|
|
LinkComponent: Link,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: <ProfileOutlined />,
|
|
|
|
title: <FormattedMessage id="app.footer.faq" />,
|
2020-09-14 10:48:08 +08:00
|
|
|
url: getLink('/docs/react/faq'),
|
2020-02-28 18:47:38 +08:00
|
|
|
LinkComponent: Link,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: <BugOutlined />,
|
|
|
|
title: <FormattedMessage id="app.footer.bug-report" />,
|
|
|
|
url: 'https://new-issue.ant.design/',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: <IssuesCloseOutlined />,
|
|
|
|
title: <FormattedMessage id="app.footer.issues" />,
|
|
|
|
url: 'https://github.com/ant-design/ant-design/issues',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
2020-12-09 17:12:09 +08:00
|
|
|
icon: <QuestionCircleOutlined />,
|
|
|
|
title: <FormattedMessage id="app.footer.discussions" />,
|
|
|
|
url: 'https://github.com/ant-design/ant-design/discussions',
|
2020-02-28 18:47:38 +08:00
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: <QuestionCircleOutlined />,
|
|
|
|
title: <FormattedMessage id="app.footer.stackoverflow" />,
|
|
|
|
url: 'http://stackoverflow.com/questions/tagged/antd',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: <QuestionCircleOutlined />,
|
|
|
|
title: <FormattedMessage id="app.footer.segmentfault" />,
|
|
|
|
url: 'https://segmentfault.com/t/antd',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
const col4 = {
|
|
|
|
icon: (
|
|
|
|
<img
|
|
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
|
|
|
|
alt="Ant XTech"
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
title: <FormattedMessage id="app.footer.more-product" />,
|
|
|
|
items: [
|
|
|
|
{
|
|
|
|
icon: (
|
|
|
|
<img
|
|
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
|
|
|
|
alt="yuque"
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
title: <FormattedMessage id="app.footer.yuque" />,
|
|
|
|
url: 'https://yuque.com',
|
|
|
|
description: <FormattedMessage id="app.footer.yuque.slogan" />,
|
|
|
|
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.vision',
|
|
|
|
description: <FormattedMessage id="app.footer.antv.slogan" />,
|
|
|
|
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: <FormattedMessage id="app.footer.egg.slogan" />,
|
|
|
|
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: <FormattedMessage id="app.footer.xtech" />,
|
|
|
|
url: 'https://xtech.antfin.com/',
|
|
|
|
openExternal: true,
|
|
|
|
},
|
|
|
|
{
|
2021-09-01 10:56:50 +08:00
|
|
|
icon: <BgColorsOutlined />,
|
|
|
|
title: <FormattedMessage id="app.footer.theme" />,
|
|
|
|
url: getLinkHash('/components/config-provider/', {
|
|
|
|
zhCN: 'components-config-provider-demo-theme',
|
|
|
|
enUS: 'components-config-provider-demo-theme',
|
|
|
|
}),
|
|
|
|
LinkComponent: Link,
|
2020-02-28 18:47:38 +08:00
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
return [col1, col2, col3, col4];
|
2019-09-19 12:27:02 +08:00
|
|
|
}
|
|
|
|
|
2020-01-09 15:23:52 +08:00
|
|
|
handleColorChange = (color: string) => {
|
2020-01-09 15:42:33 +08:00
|
|
|
const {
|
|
|
|
intl: { messages },
|
|
|
|
} = this.props;
|
|
|
|
message.loading({
|
|
|
|
content: messages['app.footer.primary-color-changing'],
|
|
|
|
key: 'change-primary-color',
|
|
|
|
});
|
2017-09-18 17:31:48 +08:00
|
|
|
const changeColor = () => {
|
2020-01-09 15:23:52 +08:00
|
|
|
(window as any).less
|
2018-12-07 16:17:45 +08:00
|
|
|
.modifyVars({
|
|
|
|
'@primary-color': color,
|
|
|
|
})
|
|
|
|
.then(() => {
|
2020-01-09 15:42:33 +08:00
|
|
|
message.success({
|
|
|
|
content: messages['app.footer.primary-color-changed'],
|
|
|
|
key: 'change-primary-color',
|
|
|
|
});
|
2018-12-07 16:17:45 +08:00
|
|
|
this.setState({ color });
|
|
|
|
});
|
2017-09-18 17:31:48 +08:00
|
|
|
};
|
|
|
|
|
2019-09-19 15:11:50 +08:00
|
|
|
const lessUrl = 'https://gw.alipayobjects.com/os/lib/less/3.10.3/dist/less.min.js';
|
2017-09-18 17:31:48 +08:00
|
|
|
|
|
|
|
if (this.lessLoaded) {
|
|
|
|
changeColor();
|
|
|
|
} else {
|
2020-01-09 15:23:52 +08:00
|
|
|
(window as any).less = {
|
2017-09-18 17:31:48 +08:00
|
|
|
async: true,
|
2018-09-11 14:15:48 +08:00
|
|
|
javascriptEnabled: true,
|
2017-09-18 17:31:48 +08:00
|
|
|
};
|
|
|
|
loadScript(lessUrl).then(() => {
|
|
|
|
this.lessLoaded = true;
|
|
|
|
changeColor();
|
|
|
|
});
|
|
|
|
}
|
2018-12-07 16:17:45 +08:00
|
|
|
};
|
2017-09-03 22:15:33 +08:00
|
|
|
|
2019-09-19 14:04:59 +08:00
|
|
|
renderThemeChanger() {
|
2018-06-22 21:05:13 +08:00
|
|
|
const { color } = this.state;
|
2019-09-19 14:04:59 +08:00
|
|
|
const colors = Object.keys(presetPalettes).filter(item => item !== 'grey');
|
2016-03-01 14:19:50 +08:00
|
|
|
return (
|
2019-09-19 15:11:50 +08:00
|
|
|
<ColorPicker
|
|
|
|
small
|
|
|
|
color={color}
|
|
|
|
position="top"
|
|
|
|
presetColors={[
|
|
|
|
...colors.map(c => presetPalettes[c][5]),
|
|
|
|
...colors.map(c => presetPalettes[c][4]),
|
|
|
|
...colors.map(c => presetPalettes[c][6]),
|
|
|
|
]}
|
|
|
|
onChangeComplete={this.handleColorChange}
|
|
|
|
/>
|
2019-09-19 14:04:59 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-02-29 14:08:40 +08:00
|
|
|
render() {
|
2016-03-01 14:19:50 +08:00
|
|
|
return (
|
2019-09-19 12:27:02 +08:00
|
|
|
<RcFooter
|
|
|
|
columns={this.getColumns()}
|
|
|
|
bottom={
|
|
|
|
<>
|
2019-10-05 17:35:49 +08:00
|
|
|
Made with <span style={{ color: '#fff' }}>❤</span> by
|
2019-10-08 15:04:00 +08:00
|
|
|
{/* eslint-disable-next-line react/jsx-curly-brace-presence */}{' '}
|
2019-09-19 12:27:02 +08:00
|
|
|
<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com">
|
|
|
|
<FormattedMessage id="app.footer.company" />
|
|
|
|
</a>
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
/>
|
2016-03-01 14:19:50 +08:00
|
|
|
);
|
2016-02-29 14:08:40 +08:00
|
|
|
}
|
|
|
|
}
|
2016-09-28 13:43:32 +08:00
|
|
|
|
|
|
|
export default injectIntl(Footer);
|