feat(tabs): add extra slots to the tab (#399)

UCloud-FE · Apr 12, 2024 · e40ad3c · e40ad3c
1 parent 15e89c2
commit e40ad3c
Show file tree

Hide file tree

Showing 5 changed files with 6,819 additions and 4,353 deletions.
diff --git a/src/components/Tabs/TabBar.tsx b/src/components/Tabs/TabBar.tsx
@@ -21,6 +21,7 @@ import { setTransform, isTransform3dSupported, getStyle, isVertical } from './ut
 import RefContext, { GetRef } from './RefContext';
 import { Panes, TabBarPosition } from './shared';
 import { prefixCls } from './style';
+import Box from '../Box';
 
 const noop = () => undefined;
 const warning = (skip: boolean, msg: string) => !skip && console.warn(msg);
@@ -563,6 +564,7 @@ interface TabBarProps {
     activeKey: Key | null;
     direction: string;
     styleType: string;
+    extra?:ReactNode
 }
 const TabBar = (props: TabBarProps) => {
     const refs = useRef<Record<string, HTMLElement | null>>({});
@@ -578,10 +580,33 @@ const TabBar = (props: TabBarProps) => {
     return (
         <RefContext.Provider value={{ getRef, saveRef }}>
             <TabBarRootNode {...props}>
-                <ScrollableTabBarNode {...props}>
-                    <TabBarTabsNode {...props} />
-                    {styleType === 'ink' ? <InkTabBarNode {...props} /> : null}
-                </ScrollableTabBarNode>
+                <Box container 
+                     className={classnames({
+                            [`${prefixCls}-srcoll-extra-warrper`]: ['left','right'].includes(props.tabBarPosition),
+                     })}  
+                     justifyContent="space-between" 
+                     alignItems="center"
+                >
+                    <Box 
+                        flex={1} 
+                        className={classnames({
+                            [`${prefixCls}-srcoll-box`]: 1,
+                        })}
+                    >
+                        <ScrollableTabBarNode {...props}>
+                            <TabBarTabsNode {...props} />
+                            {styleType === 'ink' ? <InkTabBarNode {...props} /> : null}
+                        </ScrollableTabBarNode>
+                    </Box>
+                    <Box 
+                        justifyContent="flex-end"  
+                        className={classnames({
+                            [`${prefixCls}-extra-wapper`]: 1,
+                            [`${prefixCls}-extra-show`]: props.extra
+                        })}>
+                       {props.extra}
+                    </Box>
+                </Box>
             </TabBarRootNode>
         </RefContext.Provider>
     );

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -89,6 +89,8 @@ export interface TabsProps {
     styleType?: StyleType;
     /** 尺寸 */
     size?: Size;
+    /** 头部插槽 */
+    extra?:ReactNode;
 }
 const Tabs = ({
     activeKey: _activeKey,
@@ -101,6 +103,7 @@ const Tabs = ({
     direction = 'ltr',
     styleType = 'default',
     size = 'sm',
+    extra,
     ...restProps
 }: TabsProps) => {
     const panes = useMemo(() => getPanesFromChildren(children), [children]);
@@ -147,7 +150,8 @@ const Tabs = ({
                 direction,
                 styleType,
                 prevIcon: <SvgIcon type="triangle-left" />,
-                nextIcon: <SvgIcon type="triangle-right" />
+                nextIcon: <SvgIcon type="triangle-right" />,
+                extra
             }}
         />
     );

diff --git a/src/components/Tabs/__demo__/tabs.jsx b/src/components/Tabs/__demo__/tabs.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 
+import Button from 'src/components/Button';
 import Tabs from 'src/components/Tabs';
 import Radio from 'src/components/Radio';
 import Switch from 'src/components/Switch';
@@ -27,11 +28,12 @@ class Demo extends React.Component {
             size: Sizes[0],
             tabCount: 10,
             activeKey: '3',
-            destroyInactiveTabPane: false
+            destroyInactiveTabPane: false,
+            openExtra: false
         };
     }
     render() {
-        const { position, styleType, size, tabCount, activeKey, destroyInactiveTabPane } = this.state;
+        const { position, styleType, size, tabCount, activeKey, destroyInactiveTabPane, openExtra } = this.state;
         const tabs = [];
         tabs.length = tabCount;
         tabs.fill();
@@ -89,6 +91,16 @@ class Demo extends React.Component {
                             }
                         />
                     </Form.Item>
+                    <Form.Item label="extra" {...itemLayout}>
+                        <Switch
+                            checked={openExtra}
+                            onChange={openExtra =>
+                                this.setState({
+                                    openExtra
+                                })
+                            }
+                        />
+                    </Form.Item>
                     <Form.Item label="tabCount" {...itemLayout}>
                         <NumberInput
                             min={0}
@@ -117,6 +129,7 @@ class Demo extends React.Component {
                         styleType={styleType}
                         size={size}
                         style={{ height: 300 }}
+                        extra={openExtra ? <Button size={size}>操作</Button> : undefined}
                     >
                         {_.map(tabs, (tab, index) => (
                             <Tabs.Pane tab={`tab ${index}`} key={index}>