From 3c979eb84bebde5ca5305000c92ad7ef2dd3552d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Thu, 15 Jun 2023 23:17:38 +0800
Subject: [PATCH] site: hide package manager tab which command is empty
 (#43032)

* site: hide pkgManager tab when the command is empty

* feat: optimize code

* feat: optimize code
---
 .../builtins/InstallDependencies/index.tsx    | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/.dumi/theme/builtins/InstallDependencies/index.tsx b/.dumi/theme/builtins/InstallDependencies/index.tsx
index 5cfa9d42fb..68cc0f90f4 100644
--- a/.dumi/theme/builtins/InstallDependencies/index.tsx
+++ b/.dumi/theme/builtins/InstallDependencies/index.tsx
@@ -1,3 +1,4 @@
+import type { TabsProps } from 'antd';
 import { Tabs } from 'antd';
 import SourceCode from 'dumi/theme-default/builtins/SourceCode';
 import React from 'react';
@@ -11,46 +12,51 @@ interface InstallProps {
   pnpm?: string;
 }
 
+const npmLabel = (
+  <span className="snippet-label">
+    <NpmLogo />
+    npm
+  </span>
+);
+
+const pnpmLabel = (
+  <span className="snippet-label">
+    <PnpmLogo />
+    pnpm
+  </span>
+);
+
+const yarnLabel = (
+  <span className="snippet-label">
+    <YarnLogo />
+    yarn
+  </span>
+);
+
 const InstallDependencies: React.FC<InstallProps> = (props) => {
   const { npm, yarn, pnpm } = props;
-  return (
-    <Tabs
-      className="antd-site-snippet"
-      defaultActiveKey="npm"
-      items={[
+  const items = React.useMemo<TabsProps['items']>(
+    () =>
+      [
         {
           key: 'npm',
-          children: <SourceCode lang="bash">{npm}</SourceCode>,
-          label: (
-            <span className="snippet-label">
-              <NpmLogo />
-              npm
-            </span>
-          ),
+          children: npm ? <SourceCode lang="bash">{npm}</SourceCode> : null,
+          label: npmLabel,
         },
         {
           key: 'yarn',
-          children: <SourceCode lang="bash">{yarn}</SourceCode>,
-          label: (
-            <span className="snippet-label">
-              <YarnLogo />
-              yarn
-            </span>
-          ),
+          children: yarn ? <SourceCode lang="bash">{yarn}</SourceCode> : null,
+          label: yarnLabel,
         },
         {
           key: 'pnpm',
-          children: <SourceCode lang="bash">{pnpm}</SourceCode>,
-          label: (
-            <span className="snippet-label">
-              <PnpmLogo />
-              pnpm
-            </span>
-          ),
+          children: pnpm ? <SourceCode lang="bash">{pnpm}</SourceCode> : null,
+          label: pnpmLabel,
         },
-      ]}
-    />
+      ].filter((item) => item.children),
+    [npm, yarn, pnpm],
   );
+  return <Tabs className="antd-site-snippet" defaultActiveKey="npm" items={items} />;
 };
 
 export default InstallDependencies;