@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/DynamicTabs/index.tsx

@@ -1,11 +1,12 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
-import { Badge, Tabs, Tooltip } from 'antd';
-import classNames from 'classnames';
-import React, { useEffect, useImperativeHandle, useState } from 'react';
-import { useHiddenStyle } from '../utils';
-import CustomModule from '../utils/CustomModule';
+import React, { useState, useEffect, useImperativeHandle } from 'react';
+import { Badge, Tabs } from 'antd';
 import { DynamicTabsProps, TabsItemProps } from './PropsType';
+import CustomModule from '../utils/CustomModule';
+import classNames from 'classnames';
 import TabPage from './TabPage';
+import { useHiddenStyle } from '../utils';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import EllipsisLabel from './EllipsisLabel';
 
 const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
   const {
@@ -28,7 +29,7 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
     onDeleteAll,
     closeAll,
   } = props;
-  const { margin, pagePadding, width, height } = style;
+  const { pagePadding, ...restStyle } = style;
 
   const { sandBoxLoadModule } = getEngineApis();
 
@@ -38,7 +39,8 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
   const [reloadPageKey, setReloadPageKey] = useState<string | undefined>();
   // console.log('tabs:', props);
 
-  const finalStyle = useHiddenStyle(visible, { margin, width, height });
+  const finalStyle = useHiddenStyle(visible, restStyle);
+
 
   useImperativeHandle(ref, () => ({
     // 设置面板选中
@@ -68,6 +70,7 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
     },
   }));
 
+
   const getTabItems = (tabsData: any[]) => {
     const items: any[] = [];
     if (Array.isArray(tabsData)) {
@@ -77,7 +80,7 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
         let itemLabel: any = label;
 
         if (pagePath?.length) {
-          itemChildren = (
+          itemChildren =
             <div style={{ padding: pagePadding }}>
               <TabPage
                 getEngineApis={getEngineApis}
@@ -88,25 +91,13 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
                 index={index}
                 reloadPageKey={reloadPageKey}
               />
-            </div>
-          );
+            </div>;
         }
 
         if (badgeRendering && typeof (item as any)?.jsx === 'object') {
           itemLabel = (
             <div style={{ position: 'relative', display: 'flex', maxWidth: 164 }}>
-              <Tooltip title={() => <div style={{ fontSize: '12px' }}>{label}</div>} autoAdjustOverflow={false} arrowPointAtCenter>
-                <span
-                  style={{
-                    margin: 'auto 0',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                  }}
-                >
-                  {label}
-                </span>
-              </Tooltip>
+              <EllipsisLabel>{itemLabel}</EllipsisLabel>
               <CustomModule
                 sandBoxLoadModule={sandBoxLoadModule}
                 errorInfo={{ id: _component?.id }}
@@ -125,19 +116,12 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
         } else {
           itemLabel = (
             <div style={{ position: 'relative', display: 'flex', maxWidth: 164 }}>
-              <Tooltip title={() => <div style={{ fontSize: '12px' }}>{label}</div>} autoAdjustOverflow={false} arrowPointAtCenter>
-                <span
-                  style={{
-                    margin: 'auto 0',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                  }}
-                >
-                  {itemLabel}
-                </span>
-              </Tooltip>
-              <Badge count={badge} overflowCount={999} style={{ position: 'absolute', top: '-6px', right: '-20px' }} />
+              <EllipsisLabel>{itemLabel}</EllipsisLabel>
+              <Badge
+                count={badge}
+                overflowCount={999}
+                style={{ position: 'absolute', top: '-6px', right: '-20px' }}
+              />
             </div>
           );
         }
@@ -159,14 +143,14 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
 
   useEffect(() => {
     setMyTabItems(tabItems);
-  }, [JSON.stringify(tabItems)]);
+  }, [tabItems]);
 
   // 更新Tab的Items数据
   useEffect(() => {
     const items = getTabItems(myTabItems);
     setFinallyTabItems(items);
-  }, [JSON.stringify(myTabItems), pagePadding, activeKey, reloadPageKey]);
-
+  }, [myTabItems, pagePadding, activeKey, reloadPageKey]);
+  
   // 设置默认选中项
   useEffect(() => {
     if (defaultActiveKey) {
@@ -224,7 +208,10 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
   }
 
   return (
-    <div className={classNames('ued-dynamic-tabs-wrap', 'ued-tabs-wrap', className)} style={finalStyle}>
+    <div
+      className={classNames('ued-dynamic-tabs-wrap', 'ued-tabs-wrap', className)}
+      style={finalStyle}
+    >
       <Tabs
         {...tabProps}
         hideAdd
@@ -235,7 +222,9 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
         tabBarGutter={tabBarGutter}
         tabPosition={tabPosition}
         tabBarStyle={
-          ['top', 'bottom'].includes(tabPosition) && type === 'editable-card' && closeAll
+          ['top', 'bottom'].includes(tabPosition) &&
+          type === 'editable-card' &&
+          closeAll
             ? {
               marginBottom: 0,
               marginTop: 0,