Sfoglia il codice sorgente

fix: fix defaultTabBar type error (#1077)

* fix: fix defaulttabbar type error

* fix: fix defaulttabbar type error
YannLynn 3 anni fa
parent
commit
e7388a6905

+ 14 - 5
packages/semi-ui/tabs/_story/Demo.tsx

@@ -11,7 +11,16 @@ const Demo = () => {
 
     return (
         <div>
-            <Tabs defaultActiveKey="1"
+            <Tabs 
+                defaultActiveKey="1"
+                renderTabBar={(tabBarProps, DefaultTabBar) => {
+                    return (
+                        <div className="tab-bar-box">
+                            这是二次封装的Tab Bar,当前ActiveKey:{tabBarProps.activeKey}
+                            <DefaultTabBar {...tabBarProps} />
+                        </div>
+                    );
+                }}
                 tabPaneMotion>
                 {
                     tabPaneList.map((item, index) => {
@@ -19,12 +28,12 @@ const Demo = () => {
                             <TabPane tab={item} itemKey={index.toString()} key={item}>
                                 { item + index }
                             </TabPane>
-                        )
+                        );
                     })
                 }
             </Tabs>
         </div>
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

+ 3 - 2
packages/semi-ui/tabs/interface.ts

@@ -1,5 +1,6 @@
 import React, { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
 import { Motion } from '../_base/base';
+import TabBar from './TabBar';
 
 export type TabType = 'line' | 'card' | 'button';
 export type TabSize = 'small' | 'medium' | 'large';
@@ -25,7 +26,7 @@ export interface TabsProps {
     lazyRender?: boolean;
     onChange?: (activeKey: string) => void;
     onTabClick?: (activeKey: string, e: MouseEvent<Element>) => void;
-    renderTabBar?: (tabBarProps: TabBarProps, defaultTabBar: ComponentType) => ReactNode;
+    renderTabBar?: (tabBarProps: TabBarProps, defaultTabBar: typeof TabBar) => ReactNode;
     size?: TabSize;
     style?: CSSProperties;
     tabBarClassName?: string;
@@ -54,7 +55,7 @@ export interface TabBarProps {
     dropdownStyle?: CSSProperties;
     closable?: boolean;
     deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
-    handleKeyDown?:  (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
+    handleKeyDown?: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
 }
 
 export interface TabPaneProps {