From 963ea85ae0c04166517f63e1c5d86091d3384084 Mon Sep 17 00:00:00 2001
From: zhongyuan <y243139883@163.com>
Date: Wed, 26 Oct 2022 16:38:39 +0800
Subject: [PATCH] docs(tabBar): update tabBar doc and demo

---
 src/tab-bar/_example/badge-props.jsx |  36 ++++++
 src/tab-bar/_example/base.jsx        |  53 +++------
 src/tab-bar/_example/icon-text.jsx   |  69 -----------
 src/tab-bar/_example/mobile.jsx      | 172 +++------------------------
 src/tab-bar/_example/pure-icon.jsx   |  61 +++-------
 src/tab-bar/_example/text-spread.jsx |  45 +++----
 src/tab-bar/_example/text.jsx        |  35 ++++++
 7 files changed, 131 insertions(+), 340 deletions(-)
 create mode 100644 src/tab-bar/_example/badge-props.jsx
 delete mode 100644 src/tab-bar/_example/icon-text.jsx
 create mode 100644 src/tab-bar/_example/text.jsx

diff --git a/src/tab-bar/_example/badge-props.jsx b/src/tab-bar/_example/badge-props.jsx
new file mode 100644
index 00000000..8c6fab1b
--- /dev/null
+++ b/src/tab-bar/_example/badge-props.jsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import { TabBar, TabBarItem } from 'tdesign-mobile-react';
+import { AppIcon } from 'tdesign-icons-react';
+
+function TabBarBaseDemo() {
+  const list = [
+    { name: 'label_1', text: '文字', icon: <AppIcon />, badgeProps: { count: 16 } },
+    { name: 'label_2', text: '文字', icon: <AppIcon />, badgeProps: { dot: true } },
+    { name: 'label_3', text: '文字', icon: <AppIcon />, badgeProps: { count: 'New' } },
+    { name: 'label_4', text: '文字', icon: <AppIcon />, badgeProps: { count: '···' } },
+  ];
+  const [value, setValue] = useState('label_1');
+
+  const change = (changeValue) => {
+    setValue(changeValue);
+    console.log('TabBar 值改变为：', changeValue);
+  };
+
+  useEffect(() => {
+    console.log('当前值：', value);
+  }, [value]);
+
+  return (
+    <div className="demo-tab-bar">
+      <TabBar value={value} onChange={change}>
+        {list.map((item, i) => (
+          <TabBarItem key={item.name || i} icon={item.icon} value={item.name} badgeProps={item.badgeProps}>
+            {item.text}
+          </TabBarItem>
+        ))}
+      </TabBar>
+    </div>
+  );
+}
+
+export default TabBarBaseDemo;
diff --git a/src/tab-bar/_example/base.jsx b/src/tab-bar/_example/base.jsx
index bb82a26d..a3a46da6 100644
--- a/src/tab-bar/_example/base.jsx
+++ b/src/tab-bar/_example/base.jsx
@@ -1,36 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { TabBar, TabBarItem } from 'tdesign-mobile-react';
+import { AppIcon } from 'tdesign-icons-react';
 
 function TabBarBaseDemo() {
-  const list1 = [
-    {
-      name: 'label_1',
-      text: '标签一',
-      icon: undefined,
-    },
-    {
-      name: 'label_2',
-      text: '标签二',
-      icon: undefined,
-    },
+  const list = [
+    { name: 'label_1', text: '文字', icon: <AppIcon /> },
+    { name: 'label_2', text: '文字', icon: <AppIcon /> },
+    { name: 'label_3', text: '文字', icon: <AppIcon /> },
+    { name: 'label_4', text: '文字', icon: <AppIcon /> },
   ];
-  const list2 = [
-    ...list1,
-    {
-      name: 'label_3',
-      text: '标签三',
-      icon: undefined,
-    },
-  ];
-  const list3 = [
-    ...list2,
-    {
-      name: 'label_4',
-      text: '标签四',
-      icon: undefined,
-    },
-  ];
-  const [value, setValue] = useState('label_2');
+  const [value, setValue] = useState('label_1');
 
   const change = (changeValue) => {
     setValue(changeValue);
@@ -41,19 +20,15 @@ function TabBarBaseDemo() {
     console.log('当前值：', value);
   }, [value]);
 
-  const demoList = [list1, list2, list3];
-
   return (
     <div className="demo-tab-bar">
-      {demoList.map((demo, idx) => (
-        <TabBar key={idx} value={value} onChange={change}>
-          {demo.map((item, i) => (
-            <TabBarItem key={item.name || i} icon={item.icon} value={item.name}>
-              {item.text}
-            </TabBarItem>
-          ))}
-        </TabBar>
-      ))}
+      <TabBar value={value} onChange={change}>
+        {list.map((item, i) => (
+          <TabBarItem key={item.name || i} icon={item.icon} value={item.name}>
+            {item.text}
+          </TabBarItem>
+        ))}
+      </TabBar>
     </div>
   );
 }
diff --git a/src/tab-bar/_example/icon-text.jsx b/src/tab-bar/_example/icon-text.jsx
deleted file mode 100644
index 34261158..00000000
--- a/src/tab-bar/_example/icon-text.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/* eslint-disable camelcase */
-import React, { useEffect, useState } from 'react';
-import { TabBar, TabBarItem } from 'tdesign-mobile-react';
-
-import { AppIcon } from 'tdesign-icons-react';
-
-export default function TabBarIconTextDemo() {
-  const [value, setValue] = useState(null);
-  const list_1 = [
-    {
-      name: 'label_1',
-      text: '标签一',
-    },
-    {
-      name: 'label_2',
-      text: '标签二',
-    },
-  ];
-  const list_2 = [
-    ...list_1,
-    {
-      name: 'label_3',
-      text: '标签三',
-    },
-  ];
-  const list_3 = [
-    ...list_2,
-    {
-      name: 'label_4',
-      text: '标签四',
-    },
-  ];
-  const list_4 = [
-    ...list_3,
-    {
-      name: 'label_5',
-      text: '标签五',
-    },
-  ];
-
-  const change = (changeValue) => {
-    setValue(changeValue);
-    console.log('TabBar 值改变为：', changeValue);
-  };
-
-  useEffect(() => {
-    console.log('当前值：', value);
-  }, [value]);
-
-  const demoList = [list_1, list_2, list_3, list_4];
-
-  return (
-    <div className="demo-tab-bar">
-      {demoList.map((list, idx) => (
-        <TabBar key={idx} value={value} className="mt-12" onChange={change}>
-          <TabBarItem name="label_0" icon={<AppIcon />}>
-            hello world
-          </TabBarItem>
-          {list.map((item, i) => (
-            <TabBarItem icon={<AppIcon />} key={item.name || i} name={item.name}>
-              {item.text}
-            </TabBarItem>
-          ))}
-        </TabBar>
-      ))}
-      <TabBar></TabBar>
-    </div>
-  );
-}
diff --git a/src/tab-bar/_example/mobile.jsx b/src/tab-bar/_example/mobile.jsx
index 2787b76d..d7e63e98 100644
--- a/src/tab-bar/_example/mobile.jsx
+++ b/src/tab-bar/_example/mobile.jsx
@@ -1,173 +1,33 @@
-import React, { useCallback, useState } from 'react';
-import { TabBar, TabBarItem } from 'tdesign-mobile-react';
-import { AppIcon } from 'tdesign-icons-react';
-
+import React from 'react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
 
-import './style/index.less';
-
-const list1 = [
-  {
-    name: 'label_1',
-    text: '标签一',
-    children: [],
-    badge: {},
-  },
-  {
-    name: 'label_2',
-    text: '标签二',
-    children: [],
-    badge: {},
-  },
-];
-const list2 = [
-  ...list1,
-  {
-    name: 'label_3',
-    text: '标签三',
-    children: [],
-    badge: {},
-  },
-];
-const list3 = [
-  ...list2,
-  {
-    name: 'label_4',
-    text: '标签四',
-    children: [],
-    badge: {},
-  },
-];
-const list4 = [
-  ...list3,
-  {
-    name: 'label_5',
-    text: '标签五',
-    children: [],
-    badge: {},
-  },
-];
-
-const list5 = [
-  ...list1,
-  {
-    name: 'label_3',
-    text: '此处展开',
-    children: [
-      {
-        value: 'spread_1',
-        label: '展开项一',
-      },
-      {
-        value: 'spread_2',
-        label: '展开项二',
-      },
-      {
-        value: 'spread_3',
-        label: '展开项三',
-      },
-    ],
-  },
-];
-
-const list6 = [
-  {
-    name: 'label_1',
-    text: '标签一',
-    children: [],
-    badge: {
-      count: '16',
-    },
-  },
-  {
-    name: 'label_2',
-    text: '标签二',
-    children: [],
-    badge: {
-      dot: true,
-    },
-  },
-  {
-    name: 'label_3',
-    text: '标签三',
-    children: [],
-    badge: {
-      count: 'New',
-    },
-  },
-  {
-    name: 'label_4',
-    text: '标签四',
-    children: [],
-    badge: {
-      count: '···',
-    },
-  },
-];
+import BaseDemo from './base';
+import BadgePropsDemo from './badge-props';
+import TextDemo from './text';
+import PureIconDemo from './pure-icon';
+import TextSpreadDemo from './text-spread';
 
-const demoList1 = [list1, list2, list3];
-const demoList2 = [list1, list2, list3, list4, list6];
-const demoList3 = [list1, list2, list3, list4];
-
-const defaultValue = 'label_1';
+import './style/index.less';
 
 function TabBarMobileDemo() {
-  const [value, setValue] = useState(1);
-
-  const change = useCallback((changeValue) => {
-    setValue(changeValue);
-    console.log('TabBar 值改变为：', changeValue);
-  }, []);
-
   return (
     <div className="tdesign-mobile-demo">
       <TDemoHeader title="TabBar 标签栏" summary="移动端的主导航，用做功能模块之间的切换"></TDemoHeader>
-      <TDemoBlock title="01 类型" summary="单层级纯文本标签栏">
-        {demoList1.map((demo, index) => (
-          <TabBar key={index} defaultValue={defaultValue} onChange={change}>
-            {demo.map((item, idx) => (
-              <TabBarItem name={item.name} key={item.name || idx} value={item.name}>
-                {item.text}
-              </TabBarItem>
-            ))}
-          </TabBar>
-        ))}
+      <TDemoBlock title="01 类型" summary="基础标签栏">
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="带徽章标签栏">
+        <BadgePropsDemo />
       </TDemoBlock>
-      <TDemoBlock summary="文本加图标标签栏">
-        {demoList2.map((demo, index) => (
-          <TabBar key={index} defaultValue={defaultValue} onChange={change}>
-            {demo.map((item, idx) => (
-              <TabBarItem
-                name={item.name}
-                key={item.name || idx}
-                badgeProps={item.badge}
-                icon={<AppIcon />}
-                value={item.name}
-              >
-                {item.text}
-              </TabBarItem>
-            ))}
-          </TabBar>
-        ))}
+      <TDemoBlock summary="纯文本标签栏">
+        <TextDemo />
       </TDemoBlock>
       <TDemoBlock summary="纯图标标签栏">
-        {demoList3.map((demo, index) => (
-          <TabBar key={index} defaultValue={defaultValue} onChange={change}>
-            {demo.map((item, idx) => (
-              <TabBarItem name={item.name} key={item.name || idx} icon={<AppIcon />} value={item.name}></TabBarItem>
-            ))}
-          </TabBar>
-        ))}
+        <PureIconDemo />
       </TDemoBlock>
       <TDemoBlock summary="双层级纯文本标签栏">
-        <TabBar value={value} onChange={change} fixed bordered={false}>
-          {list5.map((item, idx) => (
-            <TabBarItem name={item.name} key={item.name || idx} subTabBar={item.children}>
-              {item.text}
-            </TabBarItem>
-          ))}
-        </TabBar>
+        <TextSpreadDemo />
       </TDemoBlock>
     </div>
   );
diff --git a/src/tab-bar/_example/pure-icon.jsx b/src/tab-bar/_example/pure-icon.jsx
index 68531c97..813d0479 100644
--- a/src/tab-bar/_example/pure-icon.jsx
+++ b/src/tab-bar/_example/pure-icon.jsx
@@ -1,60 +1,29 @@
-/* eslint-disable camelcase */
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { TabBar, TabBarItem } from 'tdesign-mobile-react';
 import { AppIcon } from 'tdesign-icons-react';
 
-export default function PureIconDemo() {
-  const [value, setValue] = useState(null);
-  const list_1 = [
-    {
-      name: 'label_1',
-    },
-    {
-      name: 'label_2',
-    },
-  ];
-  const list_2 = [
-    ...list_1,
-    {
-      name: 'label_3',
-    },
-  ];
-  const list_3 = [
-    ...list_2,
-    {
-      name: 'label_4',
-    },
-  ];
-  const list_4 = [
-    ...list_3,
-    {
-      name: 'label_5',
-    },
-  ];
-
-  const demoList = [list_1, list_2, list_3, list_4];
-
-  useEffect(
-    (newValue) => {
-      console.log('当前值：', newValue);
-    },
-    [value],
-  );
+function TabBarBaseDemo() {
+  const list = [{ name: 'label_1' }, { name: 'label_2' }, { name: 'label_3' }, { name: 'label_4' }];
+  const [value, setValue] = useState('label_1');
 
   const change = (changeValue) => {
     setValue(changeValue);
     console.log('TabBar 值改变为：', changeValue);
   };
 
+  useEffect(() => {
+    console.log('当前值：', value);
+  }, [value]);
+
   return (
     <div className="demo-tab-bar">
-      {demoList.map((list, index) => (
-        <TabBar key={index} value={value} onChange={change} className="mt-12">
-          {list.map((item, idx) => (
-            <TabBarItem icon={<AppIcon />} key={item.name || idx} name={item.name || idx}></TabBarItem>
-          ))}
-        </TabBar>
-      ))}
+      <TabBar value={value} onChange={change}>
+        {list.map((item, i) => (
+          <TabBarItem key={item.name || i} icon={<AppIcon />} value={item.name} />
+        ))}
+      </TabBar>
     </div>
   );
 }
+
+export default TabBarBaseDemo;
diff --git a/src/tab-bar/_example/text-spread.jsx b/src/tab-bar/_example/text-spread.jsx
index b212b6dd..0b4b2883 100644
--- a/src/tab-bar/_example/text-spread.jsx
+++ b/src/tab-bar/_example/text-spread.jsx
@@ -1,58 +1,41 @@
-/* eslint-disable camelcase */
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { TabBar, TabBarItem } from 'tdesign-mobile-react';
 
-export default function TextSpreadDemo() {
-  const [value, setValue] = useState(null);
+function TabBarBaseDemo() {
   const list = [
     {
       name: 'label_1',
-      text: '标签一',
-      icon: undefined,
+      text: '标签栏一',
     },
     {
       name: 'label_2',
-      text: '标签二',
-      icon: undefined,
+      text: '标签栏二',
     },
     {
       name: 'label_3',
       text: '此处展开',
-      icon: undefined,
       children: [
         {
-          name: 'spread_1',
-          text: '展开项一',
-          icon: undefined,
+          value: 'spread_3',
+          label: '展开项三',
         },
         {
-          name: 'spread_2',
-          text: '展开项二',
-          icon: undefined,
+          value: 'spread_2',
+          label: '展开项二',
         },
         {
-          name: 'spread_3',
-          text: '展开项三',
-          icon: undefined,
+          value: 'spread_1',
+          label: '展开项一',
         },
       ],
     },
   ];
 
-  useEffect(() => {
-    console.log('当前值：', value);
-  }, [value]);
-
-  const change = (changeValue) => {
-    setValue(changeValue);
-    console.log('TabBar 值改变为：', changeValue);
-  };
-
   return (
     <div className="demo-tab-bar">
-      <TabBar value={value} onChange={change}>
-        {list.map((item, index) => (
-          <TabBarItem key={item.name || index} icon={item.icon} subTabBar={item.children} name={item.name}>
+      <TabBar defaultValue="label_3">
+        {list.map((item, i) => (
+          <TabBarItem key={item.name || i} value={item.name} subTabBar={item.children}>
             {item.text}
           </TabBarItem>
         ))}
@@ -60,3 +43,5 @@ export default function TextSpreadDemo() {
     </div>
   );
 }
+
+export default TabBarBaseDemo;
diff --git a/src/tab-bar/_example/text.jsx b/src/tab-bar/_example/text.jsx
new file mode 100644
index 00000000..66c816bd
--- /dev/null
+++ b/src/tab-bar/_example/text.jsx
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import { TabBar, TabBarItem } from 'tdesign-mobile-react';
+
+function TabBarBaseDemo() {
+  const list = [
+    { name: 'label_1', text: '标签栏一' },
+    { name: 'label_2', text: '标签栏二' },
+    { name: 'label_3', text: '标签栏三' },
+    { name: 'label_4', text: '标签栏四' },
+  ];
+  const [value, setValue] = useState('label_1');
+
+  const change = (changeValue) => {
+    setValue(changeValue);
+    console.log('TabBar 值改变为：', changeValue);
+  };
+
+  useEffect(() => {
+    console.log('当前值：', value);
+  }, [value]);
+
+  return (
+    <div className="demo-tab-bar">
+      <TabBar value={value} onChange={change}>
+        {list.map((item, i) => (
+          <TabBarItem key={item.name || i} value={item.name}>
+            {item.text}
+          </TabBarItem>
+        ))}
+      </TabBar>
+    </div>
+  );
+}
+
+export default TabBarBaseDemo;