tntd 1.4.9 → 1.4.10

package/components/Layout/HeaderTabs.js

@@ -1,8 +1,8 @@
-import { useState, useEffect, useRef } from 'react';
-import styled, { withTheme } from 'styled-components';
-import cn from 'classnames';
-import { get } from 'lodash';
-import Icon from '../Icon';
+import { useState, useEffect, useRef } from "react";
+import styled, { withTheme } from "styled-components";
+import cn from "classnames";
+import { get } from "lodash";
+import Icon from "../Icon";
 
 const TabsContainer = styled.div`
     display: flex;
@@ -69,8 +69,8 @@ const Tabs = styled.ul`
     flex: 1;
     white-space: nowrap;
     padding-right: 40px;
-    transition: transform .25s linear;
-    position:absolute;
+    transition: transform 0.25s linear;
+    position: absolute;
 `;
 const TabItem = styled.li`
     position: relative;
@@ -78,7 +78,7 @@ const TabItem = styled.li`
     padding: 0 20px 0 10px;
     cursor: pointer;
     display: inline-block;
-    line-height: ${props => props.theme.size === 'large' ? '46px' : '36px'};
+    line-height: ${props => (props.theme.size === "large" ? "46px" : "36px")};
     /* transition: background-color .5; */
     width: 130px;
     color: rgba(255,255,255,.6);
@@ -120,7 +120,7 @@ const TabItem = styled.li`
 
     a {
         font-size: 14px;
-        color: ${props=>props.theme.headerActionsColor};//rgba(255,255,255,.6);
+        color: ${props => props.theme.headerActionsColor};//rgba(255,255,255,.6);
         text-rendering: optimizeLegibility;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
@@ -163,8 +163,20 @@ const TabItem = styled.li`
 `;
 
 export const HeaderTabs = withTheme(
-    ({ theme, className, tabs = [], onTabChange, onTabSelect, onTabClose,  appListVisible, orgListVisible, orgAppListVisible, ...props }) => {
-        const [selectedKey, setSelectedKey] = useState(props.selectedKey || get(tabs, '0.key'));
+    ({
+        theme,
+        className,
+        tabs = [],
+        onTabChange,
+        onTabSelect,
+        onTabClose,
+        appListVisible,
+        orgListVisible,
+        orgAppListVisible,
+        language,
+        ...props
+    }) => {
+        const [selectedKey, setSelectedKey] = useState(props.selectedKey || get(tabs, "0.key"));
         const [tabItems, setTabItems] = useState(tabs || []);
         const [arrowVisible, setArrowVisible] = useState(false);
         const [tabsPositionFlags, setTabsPositionFlags] = useState({ start: true, end: true });
@@ -172,8 +184,7 @@ export const HeaderTabs = withTheme(
 
         const getTabsDom = () => tabsRef.current;
 
-        const onTabClick = (tab,index) => {
-
+        const onTabClick = (tab, index) => {
             setSelectedKey(tab.key);
             onTabSelect?.(tab);
 
@@ -191,84 +202,86 @@ export const HeaderTabs = withTheme(
                 newSelectedKey = index === 0 ? newTabItems[0]?.key : newTabItems[index - 1]?.key;
                 setSelectedKey(newSelectedKey);
             }
-            onTabClose?.(tab, newTabItems, newTabItems.find(({ key }) => key === newSelectedKey));
+            onTabClose?.(
+                tab,
+                newTabItems,
+                newTabItems.find(({ key }) => key === newSelectedKey)
+            );
         };
         const onMoveToLeft = () => {
             const tabsDom = getTabsDom();
             const parentBBox = tabsDom.parentNode.getBoundingClientRect();
             const parentWidth = parentBBox.width - 32;
-            let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ''));
-            const index = Math.ceil(x/130);
-            const trueX = index*130;
-            let newX  = Math.min(0,-(trueX - parentWidth));
+            let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ""));
+            const index = Math.ceil(x / 130);
+            const trueX = index * 130;
+            let newX = Math.min(0, -(trueX - parentWidth));
             tabsDom.style.transform = `translateX(${newX}px)`;
 
-            const width = tabItems.length*130;
+            const width = tabItems.length * 130;
             setTabsPositionFlags({
-                start: newX<0,
-                end:  Math.abs(newX)<(width-parentWidth)
+                start: newX < 0,
+                end: Math.abs(newX) < width - parentWidth,
             });
         };
         const onMoveToRight = () => {
             const tabsDom = getTabsDom();
             const parentBBox = tabsDom.parentNode.getBoundingClientRect();
             const parentWidth = parentBBox.width - 32;
-            const width = tabItems.length*130;
+            const width = tabItems.length * 130;
 
-            let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ''));
-            const index = Math.floor(x/130);
-            const trueX = index*130;
-            let newX  = Math.max(-(width-parentWidth),-(trueX + parentWidth));
+            let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ""));
+            const index = Math.floor(x / 130);
+            const trueX = index * 130;
+            let newX = Math.max(-(width - parentWidth), -(trueX + parentWidth));
             tabsDom.style.transform = `translateX(${newX}px)`;
 
             setTabsPositionFlags({
-                start: newX<0,
-                end:  Math.abs(newX)<(width-parentWidth)
+                start: newX < 0,
+                end: Math.abs(newX) < width - parentWidth,
             });
         };
 
         const translateTabsDom = (tabs, selectedKey) => {
-            if(!selectedKey)return;
+            if (!selectedKey) return;
             const index = tabs.indexOf(tabs.find(({ key }) => key === selectedKey));
-            if(index===-1) return;
+            if (index === -1) return;
             const tabsDom = getTabsDom();
-            let x = -(+tabsDom.style.transform.replace(/[^\d.-]/g, ''));
+            let x = -+tabsDom.style.transform.replace(/[^\d.-]/g, "");
             const bbox = {
-                left:index*130,
-                right:(index+1)*130
+                left: index * 130,
+                right: (index + 1) * 130,
             };
             const parentBBox = tabsDom.parentNode.getBoundingClientRect();
             const parentWidth = parentBBox.width - 36;
-            const width = tabItems.length*130;
+            const width = tabItems.length * 130;
 
-            let tailX = x + parentWidth;//当前滑动窗口尾部坐标
+            let tailX = x + parentWidth; //当前滑动窗口尾部坐标
             let newX = -x;
-            if(bbox.left<x){
+            if (bbox.left < x) {
                 newX = -bbox.left;
-            }else if(bbox.right>=tailX){
+            } else if (bbox.right >= tailX) {
                 newX = parentWidth - bbox.right;
             }
-            if(newX+width<parentWidth){
+            if (newX + width < parentWidth) {
                 newX = -(width - parentWidth);
             }
-            newX = Math.min(0,newX);
+            newX = Math.min(0, newX);
             tabsDom.style.transform = `translateX(${newX}px)`;
-            
+
             setTabsPositionFlags({
-                start: newX<0,
-                end: Math.abs(newX)<(width-parentWidth)
+                start: newX < 0,
+                end: Math.abs(newX) < width - parentWidth,
             });
         };
 
         useEffect(() => {
-            setSelectedKey(props.selectedKey || get(tabs, '0.key'));
+            setSelectedKey(props.selectedKey || get(tabs, "0.key"));
             // const t = [{'code':'tagdata','enName':'tagdata','icon':'layer-color','menuName':'打标数据管理打标数据管理打标数据管理','path':'/orion/tag/datalist','key':'tagdata','name':'打标数据管理打标数据管理打标数据管理'},{'code':'taglist','enName':'taglist','icon':'home','menuName':'标签管理','path':'http://baidu.com/orion/tag/list','key':'taglist','name':'标签管理'},{'code':'relation1','enName':'dadicasesearch1','icon':'home','menuName':'案件检索1','path':'/orion/case/relation1','key':'relation1','name':'案件检索1'},{'code':'dadicasesearch-0','enName':'dadicasesearch','icon':'home','menuName':'案件检索-0','path':'/orion/case/relation0','key':'dadicasesearch-0','name':'案件检索-0'},{'code':'dadicasesearch-1','enName':'dadicasesearch','icon':'home','menuName':'案件检索-1','path':'/orion/case/relation1','key':'dadicasesearch-1','name':'案件检索-1'},{'code':'dadicasesearch-2','enName':'dadicasesearch','icon':'home','menuName':'案件检索-2','path':'/orion/case/relation2','key':'dadicasesearch-2','name':'案件检索-2'},{'code':'dadicasesearch-3','enName':'dadicasesearch','icon':'home','menuName':'案件检索-3','path':'/orion/case/relation3','key':'dadicasesearch-3','name':'案件检索-3'},{'code':'dadicasesearch-4','enName':'dadicasesearch','icon':'home','menuName':'案件检索-4','path':'/orion/case/relation4','key':'dadicasesearch-4','name':'案件检索-4'},{'code':'dadicasesearch-5','enName':'dadicasesearch','icon':'home','menuName':'案件检索-5','path':'/orion/case/relation5','key':'dadicasesearch-5','name':'案件检索-5'},{'code':'dadicasesearch-6','enName':'dadicasesearch','icon':'home','menuName':'案件检索-6','path':'/orion/case/relation6','key':'dadicasesearch-6','name':'案件检索-6'},{'code':'dadicasesearch-7','enName':'dadicasesearch','icon':'home','menuName':'案件检索-7','path':'/orion/case/relation7','key':'dadicasesearch-7','name':'案件检索-7'},{'code':'dadicasesearch-8','enName':'dadicasesearch','icon':'home','menuName':'案件检索-8','path':'/orion/case/relation8','key':'dadicasesearch-8','name':'案件检索-8'}] ;
             setTabItems(tabs);
         }, [tabs, props.selectedKey]);
 
-        useEffect(()=>{
-            
-        },[props.orgAppListVisible]);
+        useEffect(() => {}, [props.orgAppListVisible]);
 
         useEffect(() => {
             const tabsDom = getTabsDom();
@@ -283,38 +296,50 @@ export const HeaderTabs = withTheme(
         return (
             <TabsContainer
                 {...props}
-                className={cn('tnt-layout-header-tabs', { [className]: className })}
+                className={cn("tnt-layout-header-tabs", { [className]: className })}
             >
                 <Tabs className="tnt-layout-header-tabs-content" ref={tabsRef}>
-                    {
-                        tabItems.map((tab, index) => (
-                            <TabItem
-                                key={tab.key}
-                                theme={theme}
-                                className={cn({
-                                    active: selectedKey === tab.key,
-                                    activeTabPreSibling: tabItems[index + 1]?.key === selectedKey
-                                })}
-                                onClick={() => onTabClick(tab,index)}
-                            >
-                                <a href={tab.key} onClick={evt => evt.preventDefault()}>{tab.name}</a>
+                    {tabItems.map((tab, index) => (
+                        <TabItem
+                            key={tab.key}
+                            theme={theme}
+                            className={cn({
+                                active: selectedKey === tab.key,
+                                activeTabPreSibling: tabItems[index + 1]?.key === selectedKey,
+                            })}
+                            onClick={() => onTabClick(tab, index)}
+                        >
+                            <a href={tab.key} onClick={evt => evt.preventDefault()}>
                                 {
-                                    tabItems.length > 1 && (
-                                        <Icon type="close" onClick={closeTabHandle.bind(null, tab, index)} />
-                                    )
+                                    {
+                                        cn: tab.name,
+                                        en: tab.enName || tab.name,
+                                    }[language || "cn"]
                                 }
-                            </TabItem>
-                        ))
-                    }
+                            </a>
+                            {tab.closable !== false && tabItems.length > 1 && (
+                                <Icon
+                                    type="close"
+                                    onClick={closeTabHandle.bind(null, tab, index)}
+                                />
+                            )}
+                        </TabItem>
+                    ))}
                 </Tabs>
-                {
-                    arrowVisible && (
-                        <div className="tnt-layout-header-tabs-arrows">
-                            <Icon type="left" onClick={onMoveToLeft} disabled={!tabsPositionFlags.start} />
-                            <Icon type="right" onClick={onMoveToRight} disabled={!tabsPositionFlags.end} />
-                        </div>
-                    )
-                }
+                {arrowVisible && (
+                    <div className="tnt-layout-header-tabs-arrows">
+                        <Icon
+                            type="left"
+                            onClick={onMoveToLeft}
+                            disabled={!tabsPositionFlags.start}
+                        />
+                        <Icon
+                            type="right"
+                            onClick={onMoveToRight}
+                            disabled={!tabsPositionFlags.end}
+                        />
+                    </div>
+                )}
             </TabsContainer>
         );
     }