fix(tabs): add setActiveTab methods

packages/arco-lib/src/components/Tabs.tsx

@@ -5,21 +5,22 @@ import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { TabsPropsSpec as BaseTabsPropsSpec } from '../generated/types/Tabs';
 import { useEffect, useRef, useState } from 'react';
+
 const TabsPropsSpec = Type.Object(BaseTabsPropsSpec);
 const TabsStateSpec = Type.Object({
-  activeTab: Type.String(),
+  activeTab: Type.Number(),
 });
 const TabPane = BaseTabs.TabPane;
 
 const exampleProperties: Static<typeof TabsPropsSpec> = {
   type: 'line',
-  defaultActiveTab: '0',
+  defaultActiveTab: 0,
   tabPosition: 'top',
   size: 'default',
   tabNames: ['Tab1', 'Tab2', 'Tab3'],
 };
 
-const options = {
+export const Tabs = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -33,18 +34,24 @@ const options = {
   spec: {
     properties: TabsPropsSpec,
     state: TabsStateSpec,
-    methods: {},
+    methods: {
+      setActiveTab: Type.Object({
+        activeTab: Type.Number(),
+      }),
+    },
     slots: ['content'],
     styleSlots: ['content'],
     events: [],
   },
-};
-
-export const Tabs = implementRuntimeComponent(options)(props => {
+})(props => {
   const { defaultActiveTab, tabNames, ...cProps } = getComponentProps(props);
-  const { getElement, customStyle, mergeState, slotsElements } = props;
+  const { getElement, customStyle, mergeState, subscribeMethods, slotsElements } = props;
   const ref = useRef<{ current: HTMLDivElement }>(null);
-  const [activeTab, setActiveTab] = useState<string>(String(defaultActiveTab));
+  const [activeTab, setActiveTab] = useState<number>(defaultActiveTab ?? 0);
+
+  useEffect(() => {
+    mergeState({ activeTab: defaultActiveTab });
+  }, []);
 
   useEffect(() => {
     const ele = ref.current?.current;
@@ -57,19 +64,28 @@ export const Tabs = implementRuntimeComponent(options)(props => {
     ? slotsElements.content
     : [slotsElements.content];
 
+  useEffect(() => {
+    subscribeMethods({
+      setActiveTab: ({ activeTab }) => {
+        setActiveTab(activeTab);
+        mergeState({ activeTab });
+      },
+    });
+  });
+
   return (
     <BaseTabs
       className={css(customStyle?.content)}
       onChange={key => {
-        setActiveTab(key);
-        mergeState({ activeTab: key });
+        setActiveTab(Number(key));
+        mergeState({ activeTab: Number(key) });
       }}
       {...cProps}
-      activeTab={activeTab}
+      activeTab={String(activeTab)}
       ref={ref}
     >
       {tabNames.map((tabName, idx) => (
-        <TabPane key={String(idx)} title={tabName}>
+        <TabPane key={idx} title={tabName}>
           {slots[idx]}
         </TabPane>
       ))}

packages/arco-lib/src/generated/types/Tabs.ts

@@ -3,8 +3,8 @@ import { StringUnion } from '../../sunmao-helper';
 import { Category } from '../../constants/category';
 
 export const TabsPropsSpec = {
-  defaultActiveTab: Type.String({
-    title: 'Default Active Tab Index',
+  defaultActiveTab: Type.Number({
+    title: 'Default Active Tab',
     category: Category.Basic,
     description: 'The index of default active Tab. Start with 0.',
   }),