From 5c0799d5acb902b2d543422183b7402f80413129 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E7=8C=AB?= <rdmclin2@gmail.com>
Date: Fri, 30 Oct 2020 20:02:43 +0800
Subject: [PATCH] docs: add techui promotion (#27465)

* feat: add techui promotion

* feat: change button to menu

* feat: change TechUI menu position
---
 components/overview/index.zh-CN.md              |  2 +-
 .../theme/template/Layout/Header/Navigation.tsx |  9 +++++++++
 site/theme/template/Layout/Header/index.tsx     | 17 ++++++++++++++++-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/components/overview/index.zh-CN.md b/components/overview/index.zh-CN.md
index f73d7df694..3a790c387f 100644
--- a/components/overview/index.zh-CN.md
+++ b/components/overview/index.zh-CN.md
@@ -4,4 +4,4 @@ title: 组件总览
 type: 组件总览
 ---
 
-`antd` 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了[社区精选组件](/docs/react/recommendation)作为必要的补充。
+`antd` 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了[社区精选组件](/docs/react/recommendation)作为必要的补充，另外如果您是内网用户，欢迎尝试使用 [TechUI](https://techui.alipay.com)。
diff --git a/site/theme/template/Layout/Header/Navigation.tsx b/site/theme/template/Layout/Header/Navigation.tsx
index 1914bc14dd..e7e5e0a5e0 100644
--- a/site/theme/template/Layout/Header/Navigation.tsx
+++ b/site/theme/template/Layout/Header/Navigation.tsx
@@ -17,6 +17,7 @@ export interface NavigationProps extends SharedProps {
   responsive: null | 'narrow' | 'crowded';
   location: { pathname: string; query: any };
   directionText: string;
+  showTechUIButton: boolean;
   onLangChange: () => void;
   onDirectionChange: () => void;
 }
@@ -29,6 +30,7 @@ export default ({
   responsive,
   location,
   directionText,
+  showTechUIButton,
   onLangChange,
   onDirectionChange,
 }: NavigationProps) => {
@@ -100,6 +102,13 @@ export default ({
           <FormattedMessage id="app.header.menu.resource" />
         </Link>
       </Menu.Item>
+      {showTechUIButton && (
+        <Menu.Item key="tech-ui">
+          <a href="https://techui.alipay.com" target="__blank" rel="noopener noreferrer">
+            TechUI
+          </a>
+        </Menu.Item>
+      )}
       {isZhCN && !isGitee && (
         <Menu.Item key="mirror">
           <a href="https://ant-design.gitee.io">国内镜像</a>
diff --git a/site/theme/template/Layout/Header/index.tsx b/site/theme/template/Layout/Header/index.tsx
index 3a33558099..e3de78cd2d 100644
--- a/site/theme/template/Layout/Header/index.tsx
+++ b/site/theme/template/Layout/Header/index.tsx
@@ -12,6 +12,7 @@ import More from './More';
 import Navigation from './Navigation';
 import Github from './Github';
 import SiteContext from '../SiteContext';
+import { ping } from '../../utils';
 
 import './index.less';
 
@@ -61,15 +62,19 @@ interface HeaderState {
   menuVisible: boolean;
   windowWidth: number;
   searching: boolean;
+  showTechUIButton: boolean;
 }
 
 class Header extends React.Component<HeaderProps, HeaderState> {
   static contextType = SiteContext;
 
+  pingTimer: NodeJS.Timeout;
+
   state = {
     menuVisible: false,
     windowWidth: 1400,
     searching: false,
+    showTechUIButton: false,
   };
 
   componentDidMount() {
@@ -79,10 +84,19 @@ class Header extends React.Component<HeaderProps, HeaderState> {
 
     window.addEventListener('resize', this.onWindowResize);
     this.onWindowResize();
+
+    this.pingTimer = ping(status => {
+      if (status !== 'timeout' && status !== 'error') {
+        this.setState({
+          showTechUIButton: true,
+        });
+      }
+    });
   }
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.onWindowResize);
+    clearTimeout(this.pingTimer);
   }
 
   onWindowResize = () => {
@@ -179,7 +193,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     return (
       <SiteContext.Consumer>
         {({ isMobile }) => {
-          const { menuVisible, windowWidth, searching } = this.state;
+          const { menuVisible, windowWidth, searching, showTechUIButton } = this.state;
           const { direction } = this.context;
           const {
             location,
@@ -232,6 +246,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
               location={location}
               responsive={responsive}
               isMobile={isMobile}
+              showTechUIButton={showTechUIButton}
               pathname={pathname}
               directionText={this.getNextDirectionText()}
               onLangChange={this.onLangChange}