feat(Tabs): tabs 适配鸿蒙

scripts/rn/copy-file.js

@@ -5,7 +5,7 @@ const fse = require('fs-extra')
 const config = require('../../src/config.json')
 const args = process.argv.splice(2)
 
-console.log('rn copy-file.js args',args)
+console.log('rn copy-file.js args', args)
 
 // 已适配组件对象
 const adaptedArray = []
@@ -30,6 +30,7 @@ const childAdaptedArray = [
   'hoverbuttonitem',
   'avatargroup',
   'icon',
+  'tabpane',
 ]
 
 // copy文件并增加css引入

scripts/rn/update-taro-entry.js

@@ -35,6 +35,7 @@ const childAdaptedArray = [
   'hoverbuttonitem',
   'avatargroup',
   'icon',
+  'tabpane',
 ]
 
 // 更新 app.config.ts 文件

src/config.json

@@ -389,7 +389,7 @@
           "author": "dsj"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "TabPane",
           "sort": 2,
           "cName": "选项卡切换子组件",
@@ -400,7 +400,7 @@
           "author": "张晶发"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Tabs",
           "type": "component",
           "cName": "选项卡切换",

src/packages/tabs/demo.taro.tsx

@@ -40,6 +40,7 @@ const TabsDemo = () => {
       title2: '通过 value 匹配',
       title3: '数据异步渲染 3s',
       title4: '数量多,滚动操作',
+      title4_1: '数量多,滚动操作2',
       title5: '左右布局',
       title6: '左右布局-微笑曲线',
       title12: '嵌套布局',
@@ -64,6 +65,7 @@ const TabsDemo = () => {
       title2: 'Match By Value',
       title3: 'Data Is Rendered Asynchronously For 3s',
       title4: 'A Large Number Of Scrolling Operations',
+      title4_1: 'A Large Number Of Scrolling Operations',
       title5: 'Left And Right Layout',
       title6: 'Left And Right Layout - Smile Curve',
       title12: 'Tabs In Tabs',
@@ -118,7 +120,7 @@ const TabsDemo = () => {
         <Demo15 />
         <View className="h2">{translated.title4}</View>
         <Demo16 />
-        <View className="h2">{translated.title4} 2</View>
+        <View className="h2">{translated.title4_1}</View>
         <Demo17 />
         <View className="h2">{translated.title5}</View>
         <Demo18 />

src/packages/tabs/demos/h5/demo1.tsx

@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo1 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>

src/packages/tabs/demos/h5/demo10.tsx

@@ -2,15 +2,15 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo10 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         activeType="divider"
         align="left"
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>

src/packages/tabs/demos/h5/demo11.tsx

@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo11 = () => {
-  const [tab2value, setTab2value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab2value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab2value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1" value="0">

src/packages/tabs/demos/h5/demo13.tsx

@@ -2,15 +2,15 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo13 = () => {
-  const [tab2value, setTab2value] = useState<number | string>('0')
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
   return (
     <>
       <Tabs
-        value={tab2value}
+        value={tabvalue}
         style={{ position: 'relative', zIndex: 11 }}
         tabStyle={{ position: 'sticky', top: '0px', zIndex: 11 }}
         onChange={(value) => {
-          setTab2value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1" value="0">

src/packages/tabs/demos/h5/demo14.tsx

@@ -2,14 +2,14 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo14 = () => {
-  const [tab2value, setTab2value] = useState<number | string>('0')
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
   return (
     <>
       <Tabs
-        value={tab2value}
+        value={tabvalue}
         autoHeight
         onChange={(value) => {
-          setTab2value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1">

src/packages/tabs/demos/h5/demo15.tsx

@@ -2,23 +2,23 @@ import React, { useState, useEffect } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo15 = () => {
-  const [tab3value, setTab3value] = useState<number | string>(0)
-  const [list3, setList3] = useState<number[]>([])
+  const [tabvalue, setTabvalue] = useState<number | string>(0)
+  const [list, setList] = useState<number[]>([])
   useEffect(() => {
     setTimeout(() => {
-      setTab3value(2)
-      setList3([...new Array(3).keys()])
+      setTabvalue(2)
+      setList([...new Array(3).keys()])
     }, 3000)
   }, [])
   return (
     <>
       <Tabs
-        value={tab3value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab3value(value)
+          setTabvalue(value)
         }}
       >
-        {list3.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
             Tab {item}
           </Tabs.TabPane>

src/packages/tabs/demos/h5/demo16.tsx

@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo16 = () => {
-  const [tab4value, setTab4value] = useState<number | string>('0')
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
   return (
     <>
       <Tabs
-        value={tab4value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab4value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="低阶特卖">低阶特卖</Tabs.TabPane>

src/packages/tabs/demos/h5/demo17.tsx

@@ -2,19 +2,19 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo17 = () => {
-  const [tab4value, setTab4value] = useState<number | string>('0')
-  const list4 = Array.from(new Array(10).keys())
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
+  const list = Array.from(new Array(10).keys())
   return (
     <>
       <Tabs
-        value={tab4value}
+        value={tabvalue}
         style={{ height: '300px' }}
         onChange={(value) => {
-          setTab4value(value)
+          setTabvalue(value)
         }}
         direction="vertical"
       >
-        {list4.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
             Tab {item}
           </Tabs.TabPane>

src/packages/tabs/demos/h5/demo18.tsx

@@ -2,19 +2,19 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo18 = () => {
-  const [tab5value, setTab5value] = useState<number | string>('0')
-  const list5 = Array.from(new Array(2).keys())
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
+  const list = Array.from(new Array(2).keys())
   return (
     <>
       <Tabs
         style={{ height: '300px' }}
-        value={tab5value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab5value(value)
+          setTabvalue(value)
         }}
         direction="vertical"
       >
-        {list5.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
             Tab {item}
           </Tabs.TabPane>

src/packages/tabs/demos/h5/demo19.tsx

@@ -2,20 +2,20 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo19 = () => {
-  const [tab6value, setTab6value] = useState<number | string>('0')
-  const list5 = Array.from(new Array(2).keys())
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
+  const list = Array.from(new Array(2).keys())
   return (
     <>
       <Tabs
         style={{ height: '300px' }}
-        value={tab6value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab6value(value)
+          setTabvalue(value)
         }}
         activeType="smile"
         direction="vertical"
       >
-        {list5.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
             Tab {item}
           </Tabs.TabPane>

src/packages/tabs/demos/h5/demo2.tsx

@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo2 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
         activeType="smile"
       >

src/packages/tabs/demos/h5/demo20.tsx

@@ -2,22 +2,22 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo20 = () => {
-  const [tab8value, setTab8value] = useState<number | string>('0')
-  const [tab9value, setTab9value] = useState<number | string>('0')
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
+  const [tabvalue1, setTabvalue1] = useState<number | string>('0')
   return (
     <>
       <Tabs
-        value={tab8value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab8value(value)
+          setTabvalue(value)
         }}
         direction="vertical"
       >
         <Tabs.TabPane title="Tab 1">
           <Tabs
-            value={tab9value}
+            value={tabvalue1}
             onChange={(value) => {
-              setTab9value(value)
+              setTabvalue1(value)
             }}
             direction="horizontal"
           >

src/packages/tabs/demos/h5/demo21.tsx

@@ -2,22 +2,22 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo21 = () => {
-  const [tab8value, setTab8value] = useState<number | string>('0')
-  const [tab9value, setTab9value] = useState<number | string>('0')
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
+  const [tabvalue1, setTabvalue1] = useState<number | string>('0')
   return (
     <>
       <Tabs
-        value={tab8value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab8value(value)
+          setTabvalue(value)
         }}
         autoHeight
       >
         <Tabs.TabPane title="Tab 1">
           <Tabs
-            value={tab9value}
+            value={tabvalue1}
             onChange={(value) => {
-              setTab9value(value)
+              setTabvalue1(value)
             }}
             direction="vertical"
           >

src/packages/tabs/demos/h5/demo22.tsx

@@ -2,14 +2,14 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo22 = () => {
-  const [tab11value, setTab11value] = useState<string | number>('0')
-  const [tab12value, setTab12value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
+  const [tabvalue1, setTabvalue1] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab11value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab11value(value)
+          setTabvalue(value)
         }}
         style={{ '--nutui-tabs-titles-font-size': '20px' }}
       >
@@ -18,9 +18,9 @@ const Demo22 = () => {
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
       <Tabs
-        value={tab12value}
+        value={tabvalue1}
         onChange={(value) => {
-          setTab12value(value)
+          setTabvalue1(value)
         }}
         style={{ '--nutui-tabs-titles-font-size': '12px' }}
       >