chore: tabs mini (#1136)

* chore: useTabs * chore: add useTabs * chore: tabs mini * chore: tabs scrollable * chore: tabpanel * fix: tabs * chore: 优化tabs mini * chore: tabs demo * chore: tabs demo * chore: tabs add value * perf: tabs --------- Co-authored-by: Yang <[email protected]>
ZhongAnTech · Sep 7, 2023 · fc02c63 · fc02c63
1 parent 1196496
commit fc02c63
Show file tree

Hide file tree

Showing 35 changed files with 930 additions and 210 deletions.
diff --git a/package.json b/package.json
@@ -66,5 +66,8 @@
     "stylelint-config-za": "0.3.0",
     "stylelint-scss": "^3.18.0",
     "typescript": "~4.5.0"
+  },
+  "engines": {
+    "node": ">= 16.18.1"
   }
 }
diff --git a/packages/mini-demo/src/app.config.ts b/packages/mini-demo/src/app.config.ts
@@ -5,6 +5,7 @@ export default defineAppConfig({
     'pages/popup/index',
     'pages/list/index',
     'pages/collapse/index',
+    'pages/tabs/index',
   ],
   window: {
     backgroundTextStyle: 'light',

diff --git a/packages/mini-demo/src/pages/tabs/component/basic.tsx b/packages/mini-demo/src/pages/tabs/component/basic.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { Panel, Tabs } from 'zarm/mini';
+
+const Demo = () => {
+  const [value, setValue] = useState(0);
+
+  return (
+    <Panel title="基本用法">
+      <Tabs value={value} onChange={setValue}>
+        <Tabs.Panel title="选项卡1">
+          <div className="content">选项卡1内容</div>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡2">
+          <div className="content">选项卡2内容</div>
+        </Tabs.Panel>
+      </Tabs>
+    </Panel>
+  );
+};
+
+export default Demo;
diff --git a/packages/mini-demo/src/pages/tabs/component/disable.tsx b/packages/mini-demo/src/pages/tabs/component/disable.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Panel, Tabs } from 'zarm/mini';
+
+const Demo = () => {
+  const [value, setValue] = useState(0);
+
+  return (
+    <Panel title="禁用指定选项">
+      <Tabs value={value} onChange={setValue}>
+        <Tabs.Panel title="选项卡1">
+          <div className="content">选项卡1内容</div>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡2" disabled>
+          <div className="content">选项卡2内容</div>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡3">
+          <div className="content">选项卡3内容</div>
+        </Tabs.Panel>
+      </Tabs>
+    </Panel>
+  );
+};
+
+export default Demo;
diff --git a/packages/mini-demo/src/pages/tabs/component/line-width.tsx b/packages/mini-demo/src/pages/tabs/component/line-width.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Panel, Tabs } from 'zarm/mini';
+
+const Demo = () => {
+  const [value, setValue] = useState(0);
+
+  return (
+    <Panel title="指定线条宽度">
+      <Tabs value={value} onChange={setValue} lineWidth="60px">
+        <Tabs.Panel title="选项卡1">
+          <div className="content">选项卡1内容</div>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡2">
+          <div className="content">选项卡2内容</div>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡3">
+          <div className="content">选项卡3内容</div>
+        </Tabs.Panel>
+      </Tabs>
+    </Panel>
+  );
+};
+
+export default Demo;
diff --git a/packages/mini-demo/src/pages/tabs/component/scrollable.tsx b/packages/mini-demo/src/pages/tabs/component/scrollable.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Panel, Tabs } from 'zarm/mini';
+
+const Demo = () => {
+  const [value, setValue] = useState(0);
+
+  return (
+    <Panel title="标签栏滚动">
+      <Tabs value={value} onChange={setValue} scrollable>
+        <Tabs.Panel title="选项卡1">
+          <div className="content">选项卡1内容</div>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡2">
+          <div className="content">选项卡2内容</div>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡3">
+          <div className="content">选项卡3内容</div>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡4">
+          <div className="content">选项卡1内容</div>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡5">
+          <div className="content">选项卡2内容</div>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡6">
+          <div className="content">选项卡3内容</div>
+        </Tabs.Panel>
+      </Tabs>
+    </Panel>
+  );
+};
+
+export default Demo;
diff --git a/packages/mini-demo/src/pages/tabs/component/swipeable.tsx b/packages/mini-demo/src/pages/tabs/component/swipeable.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { Panel, Tabs } from 'zarm/mini';
+
+const Demo = () => {
+  const [value, setValue] = useState(0);
+
+  return (
+    <Panel title="可滑动">
+      <Tabs value={value} onChange={setValue} swipeable>
+        <Tabs.Panel title="选项卡1">
+          <div className="content">选项卡1内容</div>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡2">
+          <div className="content">选项卡2内容</div>
+        </Tabs.Panel>
+      </Tabs>
+    </Panel>
+  );
+};
+
+export default Demo;
diff --git a/packages/mini-demo/src/pages/tabs/component/vertical-scrollable.tsx b/packages/mini-demo/src/pages/tabs/component/vertical-scrollable.tsx
@@ -0,0 +1,43 @@
+import { View } from '@tarojs/components';
+import React, { useState } from 'react';
+import { Panel, Tabs } from 'zarm/mini';
+
+const Demo = () => {
+  const [value, setValue] = useState(0);
+
+  return (
+    <Panel title="垂直限制高度">
+      <Tabs
+        value={value}
+        onChange={setValue}
+        direction="vertical"
+        scrollable
+        className="custom-height"
+      >
+        <Tabs.Panel title="选项卡1">
+          <View className="vertical-content">选项卡1内容</View>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡2">
+          <View className="vertical-content">选项卡2内容</View>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡3">
+          <View className="vertical-content">选项卡3内容</View>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡4">
+          <View className="vertical-content">选项卡4内容</View>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡5">
+          <View className="vertical-content">选项卡5内容</View>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡6">
+          <View className="vertical-content">选项卡6内容</View>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡7">
+          <View className="vertical-content">选项卡7内容</View>
+        </Tabs.Panel>
+      </Tabs>
+    </Panel>
+  );
+};
+
+export default Demo;
diff --git a/packages/mini-demo/src/pages/tabs/component/vertical.tsx b/packages/mini-demo/src/pages/tabs/component/vertical.tsx
@@ -0,0 +1,31 @@
+import { View } from '@tarojs/components';
+import React, { useState } from 'react';
+import { Panel, Tabs } from 'zarm/mini';
+
+const Demo = () => {
+  const [value, setValue] = useState(0);
+
+  return (
+    <Panel title="垂直">
+      <Tabs value={value} onChange={setValue} direction="vertical">
+        <Tabs.Panel title="选项卡1">
+          <View className="vertical-content">选项卡1内容</View>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡2">
+          <View className="vertical-content">选项卡2内容</View>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡3">
+          <View className="vertical-content">选项卡3内容</View>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡4">
+          <View className="vertical-content">选项卡4内容</View>
+        </Tabs.Panel>
+        <Tabs.Panel title="选项卡5">
+          <View className="vertical-content">选项卡5内容</View>
+        </Tabs.Panel>
+      </Tabs>
+    </Panel>
+  );
+};
+
+export default Demo;
diff --git a/packages/mini-demo/src/pages/tabs/index.config.ts b/packages/mini-demo/src/pages/tabs/index.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: 'Tabs',
+});
diff --git a/packages/mini-demo/src/pages/tabs/index.scss b/packages/mini-demo/src/pages/tabs/index.scss
@@ -0,0 +1,19 @@
+.content {
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.custom-height {
+  .za-tabs__tablist {
+    height: 400px;
+  }
+}
+
+.vertical-content {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/packages/mini-demo/src/pages/tabs/index.tsx b/packages/mini-demo/src/pages/tabs/index.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Basic from './component/basic';
+import Disable from './component/disable';
+import LineWidth from './component/line-width';
+import Scrollable from './component/scrollable';
+import Swipeable from './component/swipeable';
+import Vertical from './component/vertical';
+import VerticalScrollable from './component/vertical-scrollable';
+import './index.scss';
+
+export default () => {
+  return (
+    <>
+      <Basic />
+      <Disable />
+      <LineWidth />
+      <Scrollable />
+      <Swipeable />
+      <VerticalScrollable />
+      <Vertical />
+    </>
+  );
+};
diff --git a/packages/mini-demo/src/site.ts b/packages/mini-demo/src/site.ts
@@ -104,6 +104,26 @@ const siteMap = {
   //     },
   //   ]
   // },
+  navigation: {
+    title: '导航',
+    components: [
+      // {
+      //   key: 'TabBar',
+      //   name: '标签栏',
+      //   page: '/pages/tab-bar/index',
+      // },
+      // {
+      //   key: 'Navbar',
+      //   name: '导航栏',
+      //   page: '/pages/navbar/index',
+      // },
+      {
+        key: 'Tabs',
+        name: '标签页',
+        page: '/pages/tabs/index',
+      },
+    ],
+  },
 };
 
 export default siteMap;
diff --git a/packages/zarm/src/index.mini.ts b/packages/zarm/src/index.mini.ts
@@ -11,3 +11,5 @@ export type { PanelProps } from './panel/index.mini';
 export { default as Popup } from './popup/index.mini';
 export type { PopupProps } from './popup/index.mini';
 export { default as Select } from './select';
+export { default as Tabs } from './tabs/index.mini';
+export type { TabPanelProps, TabsCssVars, TabsProps } from './tabs/index.mini';
diff --git a/packages/zarm/src/tabs/TabPanel.tsx b/packages/zarm/src/tabs/TabPanel.tsx
@@ -1,19 +1,25 @@
-import * as React from 'react';
 import { createBEM } from '@zarm-design/bem';
+import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import type { BaseTabPanelProps } from './interface';
 import type { HTMLProps } from '../utils/utilityTypes';
+import TabsContext from './context';
+import type { BaseTabPanelProps } from './interface';
 
 export type TabPanelProps = BaseTabPanelProps & HTMLProps;
 
 const TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {
-  const { className, selected, children, style } = props;
+  const { className, value, children, style } = props;
   const { prefixCls } = React.useContext(ConfigContext);
   const bem = createBEM('tabs__panel', { prefixCls });
 
-  const cls = bem([{
-    active: selected,
-  }, className]);
+  const { current } = React.useContext(TabsContext);
+
+  const cls = bem([
+    {
+      active: current === value,
+    },
+    className,
+  ]);
 
   return (
     <div ref={ref} className={cls} style={style} role="tabpanel">