taro-react-uilib 1.4.33 → 1.4.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Tabbar/tabbar/Tabbar.js +1 -1
- package/dist/components/Tabbar/tabbar/Tabbar.js.map +1 -1
- package/dist/index.esm.js +4 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/styles/components/tabbar.scss +4 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__read as t}from"../../node_modules/tslib/tslib.es6.js";import e,{useState as n,useRef as a,useCallback as r,useEffect as i}from"react";import{createSelectorQuery as o}from"@tarojs/taro";import{View as l,ScrollView as c}from"@tarojs/components";import s from"classnames";import m from"./TabItem.js";var f=function(m){var f=m.children,u=void 0===f?[]:f,h=m.
|
|
1
|
+
import{__read as t}from"../../node_modules/tslib/tslib.es6.js";import e,{useState as n,useRef as a,useCallback as r,useEffect as i}from"react";import{createSelectorQuery as o}from"@tarojs/taro";import{View as l,ScrollView as c}from"@tarojs/components";import s from"classnames";import m from"./TabItem.js";var f=function(m){var f=m.children,u=void 0===f?[]:f,h=m.lineColor,b=void 0===h?"#FE5E00":h,d=m.titleActiveColor,v=void 0===d?"#333":d,x=m.titleInctiveColor,g=void 0===x?"#999":x,p=m.onChange,C=m.content,R=m.selectIndex,E=void 0===R?0:R,N=m.isOverflowNav,T=void 0!==N&&N,w=t(n(0),2),A=w[0],k=w[1],y=t(n(0),2),I=y[0],B=y[1],j=t(n(0),2),M=j[0],O=j[1],X=t(n(0),2),_=X[0],V=X[1],W=a([]),F=a([]),L=a([]),q=a(null),z=a(null),D=a(null),G=function(t,e,n,a){if(!e||!T)return 0;var r=t.left-n-(e.width-t.width)/2,i=Math.max(0,a-e.width);return Math.max(0,Math.min(r,i))},H=r((function(e){var n=u.filter(Boolean);if(!(e<0||e>=n.length))if("h5"!==process.env.TARO_ENV)D.current=setTimeout((function(){var n=o();n.selectAll(".xh-tabbar-nav-item").boundingClientRect(),n.select(".xh-tabbar-nav").boundingClientRect(),n.selectAll(".xh-tabbar-content-item").boundingClientRect(),n.selectAll(".xh-tabbar-content-slot").boundingClientRect(),n.select(".xh-tabbar-nav-scroll").boundingClientRect(),n.exec((function(n){var a=t(n,5),r=a[0],i=a[1],o=a[2],l=a[3],c=a[4],s=(null==i?void 0:i.node)||i;if(r[e]&&s&&c){var m=r[e],f=i,u=m.left+m.width/2-f.left;if(O(u),T){var h=G(m,c,i.left,i.width);V(h)}}o[e]&&k(o[e].height),l[0]&&B(l[0].height)}))}),50);else{var a=W.current[e],r=L.current[0],i=F.current[e],l=null==a?void 0:a.parentElement,c=q.current;if(a&&l&&c){var s=a.getBoundingClientRect(),m=l.getBoundingClientRect(),f=c.getBoundingClientRect(),h=s.left+s.width/2-m.left;if(O(h),T){var b=G(s,f,m.left,l.offsetWidth);c.scrollTo({left:b})}}if(r){var d=r.getBoundingClientRect();B(d.height)}if(i){var v=i.getBoundingClientRect();k(v.height)}}}),[u,T]);i((function(){return H(E),function(){D.current&&clearTimeout(D.current)}}),[E,H]);return e.createElement(l,{className:"xh-tabbar"},e.createElement(c,{scrollX:!0,scrollLeft:_,className:"xh-tabbar-nav-scroll",ref:q},e.createElement(l,{className:"xh-tabbar-nav",ref:z,style:{width:T?"fit-content":"100%"}},u.map((function(t,n){return e.createElement(l,{key:n,"data-index":n,dataTrackId:t.props.dataTrackId||"xh-tabbar-nav-item-".concat(n),ref:function(t){return W.current[n]=t},className:s("xh-tabbar-nav-item",{"more-item":T}),style:{color:E===n?v:g,flex:T?"none":"1"},onClick:function(){return function(t){if(t!==E&&(H(t),p&&p(t),"h5"===process.env.TARO_ENV)){var e=o();e.selectAll(".xh-tabbar-content-item").boundingClientRect(),e.selectAll(".xh-tabbar-content-slot").boundingClientRect(),e.exec((function(e){if(e[0][t]){var n=e[0][t].height;k(n),e[1][t]&&B(e[1][t].height)}}))}}(n)}},t.props.TabItemComponent||t.props.title)})),e.createElement("div",{className:"xh-tabbar-nav-line",style:{background:"".concat(b),transform:"translateX(".concat(M,"px) translate(-50%, -50%)"),WebkitTransform:"translateX(".concat(M,"px) translate(-50%, -50%)"),transition:"transform 0.3s ease"}}))),e.createElement(l,{className:"xh-tabbar-content",style:{width:"".concat(100*u.length,"%"),height:A+I?"".concat(A+I,"px"):"auto"}},C&&e.createElement(l,{className:"xh-tabbar-content-slot",ref:L},C),u.map((function(t,n){return e.createElement(l,{key:n,ref:function(t){return F.current[n]=t},className:s("xh-tabbar-content-item",{"xh-tabbar-content-item-dispaly":E!==n,"xh-tabbar-content-item-active":E===n})},t.props.children)}))))};f.Item=m;export{f as default};
|
|
2
2
|
//# sourceMappingURL=Tabbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabbar.js","sources":["../../../../src/components/Tabbar/tabbar/Tabbar.tsx"],"sourcesContent":["import React, {\n FC,\n ReactElement,\n useEffect,\n useState,\n ReactNode,\n useRef,\n useCallback,\n} from \"react\";\nimport { createSelectorQuery } from \"@tarojs/taro\";\nimport { View, ScrollView } from \"@tarojs/components\";\nimport classNames from \"classnames\";\nimport Item from \"./TabItem\";\n\n/**\n * Tab切换\n *\n * @param children //子组件\n * @param animated //是否开启转场动画\n * @param selectIndex //默认选中第几个\n * @param lineColor //下划线颜色\n * @param titleActiveColor //标题选中态颜色\n * @param titleInctiveColor //标题默认态颜色\n * @param onChange //切换回调事件\n * @param content //item公共节点\n * @param isOverflowNav //是否超宽导航（超过屏幕宽度，自动滚动）\n *\n */\n\nexport interface TabProps {\n children: ReactElement[];\n animated?: boolean;\n lineColor?: string;\n titleActiveColor?: string;\n titleInctiveColor?: string;\n onChange?: (index: number) => void;\n content?: string | ReactNode;\n selectIndex: number;\n isOverflowNav?: boolean;\n}\n\nexport interface TabsComponent<P = {}> extends FC<P> {\n Item: typeof Item;\n}\n\nconst XHTabs: TabsComponent<TabProps> = props => {\n const {\n children = [],\n animated = false,\n lineColor = \"#FE5E00\",\n titleActiveColor = \"#333\",\n titleInctiveColor = \"#999\",\n onChange,\n content,\n selectIndex = 0,\n isOverflowNav = false,\n } = props;\n\n const [tabContentHeight, setTabContentHeight] = useState(0);\n const [tabSlotHeight, setTabSlotHeight] = useState(0);\n const [lineLeft, setLineLeft] = useState(0); // 下划线左偏移，核心：通过状态控制下划线位置，确保同步更新和动画过渡\n const [navLeft, setNavLeft] = useState(0); // 导航滚动位置，核心：通过状态控制滚动位置，适配超宽导航\n // Ref定义\n const itemNavRef = useRef<(HTMLDivElement | null)[]>([]);\n const itemContentRef = useRef<(HTMLDivElement | null)[]>([]);\n const itemSlotRef = useRef<(HTMLDivElement | null)[]>([]);\n const navScrollRef = useRef<HTMLDivElement | null>(null); // 滚动容器ref\n const navContainerRef = useRef<HTMLDivElement | null>(null);\n const timerRef = useRef<NodeJS.Timeout | null>(null); // 定时器ref，避免闭包丢失\n\n // 统一滚动计算逻辑：H5/小程序通用\n const computeScroll = (\n itemRect: any,\n scrollRect: any,\n containerLeft: number,\n containerWidth: number\n ) => {\n if (!scrollRect || !isOverflowNav) return 0;\n // 元素在导航容器内的绝对偏移（视口坐标转容器坐标）\n const itemOffsetInNav = itemRect.left - containerLeft;\n // 居中滚动值：让选中项尽量居中显示\n let targetScroll =\n itemOffsetInNav - (scrollRect.width - itemRect.width) / 2;\n // 最大可滚动距离：总导航宽度 - 可视区域宽度\n const maxScroll = Math.max(0, containerWidth - scrollRect.width);\n // 边界处理：不小于0，不大于最大可滚动距离\n return Math.max(0, Math.min(targetScroll, maxScroll));\n };\n\n // 抽离位置/尺寸计算逻辑，复用（初始化+切换都调用）\n const calculateTabInfo = useCallback(\n (targetIndex: number) => {\n // 过滤空children，避免索引越界\n const validChildren = children.filter(Boolean);\n if (targetIndex < 0 || targetIndex >= validChildren.length) return;\n\n // H5端：直接通过ref获取元素信息，核心：同步更新，无需等待DOM渲染\n if (process.env.TARO_ENV === \"h5\") {\n const navItem = itemNavRef.current[targetIndex];\n const slotItem = itemSlotRef.current[0];\n const contentItem = itemContentRef.current[targetIndex];\n const navContainer = navItem?.parentElement as HTMLDivElement;\n const scrollContainer = navScrollRef.current;\n\n // 计算下划线位置\n if (navItem && navContainer && scrollContainer) {\n const itemRect = navItem.getBoundingClientRect();\n const containerRect = navContainer.getBoundingClientRect();\n const scrollRect = scrollContainer.getBoundingClientRect();\n const centerX =\n itemRect.left + itemRect.width / 2 - containerRect.left;\n setLineLeft(centerX);\n\n if (isOverflowNav) {\n const targetScroll = computeScroll(\n itemRect,\n scrollRect,\n containerRect.left,\n navContainer.offsetWidth\n );\n scrollContainer.scrollTo({\n left: targetScroll,\n // behavior: animated ? \"smooth\" : \"instant\",\n });\n }\n }\n\n if (slotItem) {\n const slotRect = slotItem.getBoundingClientRect();\n setTabSlotHeight(slotRect.height);\n }\n if (contentItem) {\n const contentRect = contentItem.getBoundingClientRect();\n setTabContentHeight(contentRect.height);\n }\n return;\n }\n\n // 小程序端：必须用createSelectorQuery，保留极短延迟（50ms），适配小程序DOM渲染时机\n timerRef.current = setTimeout(() => {\n const query = createSelectorQuery();\n query.selectAll(\".xh-tabbar-nav-item\").boundingClientRect();\n query.select(\".xh-tabbar-nav\").boundingClientRect(); // 导航容器（下划线定位基准）\n query.selectAll(\".xh-tabbar-content-item\").boundingClientRect();\n query.selectAll(\".xh-tabbar-content-slot\").boundingClientRect();\n query.select(\".xh-tabbar-nav-scroll\").boundingClientRect(); // 滚动容器\n query.exec(res => {\n const [\n navRects,\n navContainerRect,\n contentRects,\n slotRects,\n scrollRect,\n ] = res;\n const navContainer = navContainerRect?.node || navContainerRect;\n // 下划线宽度+内容高度\n if (navRects[targetIndex] && navContainer && scrollRect) {\n const itemRect = navRects[targetIndex];\n const containerRect = navContainerRect;\n const centerX =\n itemRect.left + itemRect.width / 2 - containerRect.left;\n setLineLeft(centerX);\n\n // 计算ScrollView滚动距离（选中项居中）\n if (isOverflowNav) {\n const targetScroll = computeScroll(\n itemRect,\n scrollRect,\n navContainerRect.left,\n navContainerRect.width\n );\n setNavLeft(targetScroll);\n }\n }\n // 内容高度计算（保持不变）\n if (contentRects[targetIndex]) {\n setTabContentHeight(contentRects[targetIndex].height);\n }\n // Slot高度查询取[0]，因为Slot只有一个节点\n if (slotRects[0]) {\n setTabSlotHeight(slotRects[0].height);\n }\n });\n }, 50);\n },\n [children, isOverflowNav]\n );\n\n useEffect(() => {\n calculateTabInfo(selectIndex);\n // 清理定时器，防止内存泄漏\n return () => {\n if (timerRef.current) clearTimeout(timerRef.current);\n };\n }, [selectIndex, calculateTabInfo]);\n\n // 点击导航项\n const handleClick = (index: number): void => {\n if (index === selectIndex) return; // 点击当前选中项，不做处理\n // 同步计算目标项位置，下划线立即更新\n calculateTabInfo(index);\n // 触发切换回调\n onChange && onChange(index);\n\n // 小程序端单独处理内容高度（H5已在calculateTabInfo中处理）\n if (process.env.TARO_ENV === \"h5\") {\n // 点击导航获取内容高度和slot高度\n const query = createSelectorQuery();\n query.selectAll(\".xh-tabbar-content-item\").boundingClientRect();\n query.selectAll(\".xh-tabbar-content-slot\").boundingClientRect();\n query.exec(res => {\n if (!res[0][index]) return;\n const height: number = res[0][index].height;\n\n setTabContentHeight(height);\n if (!res[1][index]) return;\n setTabSlotHeight(res[1][index].height);\n });\n }\n };\n\n // 下划线\n function renderLine(): ReactElement | null {\n return (\n <div\n className={classNames(\"xh-tabbar-nav-line\", {\n \"xh-tabbar-nav-line-active\": animated,\n })}\n style={{\n background: `${lineColor}`,\n transform: `translateX(${lineLeft}px) translate(-50%, -50%)`,\n WebkitTransform: `translateX(${lineLeft}px) translate(-50%, -50%)`,\n transition: animated ? \"transform 0.3s ease\" : \"none\", // 小程序端动画过渡\n }}\n />\n );\n }\n\n // 导航栏\n function renderNav() {\n return (\n <ScrollView\n scrollX\n scrollLeft={navLeft}\n className=\"xh-tabbar-nav-scroll\"\n ref={navScrollRef}\n >\n <View\n className=\"xh-tabbar-nav\"\n ref={navContainerRef}\n style={{ width: isOverflowNav ? \"fit-content\" : \"100%\" }}\n >\n {children.map((child, index) => (\n <View\n key={index}\n data-index={index}\n // @ts-ignore\n dataTrackId={\n child.props.dataTrackId || `xh-tabbar-nav-item-${index}`\n }\n ref={el => (itemNavRef.current[index] = el)}\n className={classNames(\"xh-tabbar-nav-item\", {\n \"more-item\": isOverflowNav,\n })}\n style={{\n color:\n selectIndex === index ? titleActiveColor : titleInctiveColor,\n flex: isOverflowNav ? \"none\" : \"1\",\n }}\n onClick={() => handleClick(index)}\n >\n {child.props.TabItemComponent || child.props.title}\n </View>\n ))}\n {renderLine()}\n </View>\n </ScrollView>\n );\n }\n\n return (\n <View className=\"xh-tabbar\">\n {renderNav()}\n <View\n className=\"xh-tabbar-content\"\n style={{\n width: `${children.length * 100}%`,\n height:\n tabContentHeight + tabSlotHeight\n ? `${tabContentHeight + tabSlotHeight}px`\n : \"auto\",\n }}\n >\n {content && (\n <View className=\"xh-tabbar-content-slot\" ref={itemSlotRef}>\n {content}\n </View>\n )}\n {children.map((child, index) => (\n <View\n key={index}\n ref={el => (itemContentRef.current[index] = el)}\n className={classNames(\"xh-tabbar-content-item\", {\n \"xh-tabbar-content-item-dispaly\":\n selectIndex !== index && !animated,\n \"xh-tabbar-content-item-active\": selectIndex === index,\n })}\n style={{\n transform: animated ? `translateX(-${selectIndex * 100}%)` : \"\",\n }}\n >\n {child.props.children}\n </View>\n ))}\n </View>\n </View>\n );\n};\n\nXHTabs.Item = Item;\n\nexport default XHTabs;\nexport const TabItem = Item;\n"],"names":["XHTabs","props","_a","children","_b","animated","_c","lineColor","_d","titleActiveColor","_e","titleInctiveColor","onChange","content","_f","selectIndex","_g","isOverflowNav","_h","__read","useState","tabContentHeight","setTabContentHeight","_j","tabSlotHeight","setTabSlotHeight","_k","lineLeft","setLineLeft","_l","navLeft","setNavLeft","itemNavRef","useRef","itemContentRef","itemSlotRef","navScrollRef","navContainerRef","timerRef","computeScroll","itemRect","scrollRect","containerLeft","containerWidth","targetScroll","left","width","maxScroll","Math","max","min","calculateTabInfo","useCallback","targetIndex","validChildren","filter","Boolean","length","process","env","TARO_ENV","current","setTimeout","query","createSelectorQuery","selectAll","boundingClientRect","select","exec","res","navRects","navContainerRect","contentRects","slotRects","navContainer","node","containerRect","centerX","height","navItem","slotItem","contentItem","parentElement","scrollContainer","getBoundingClientRect","offsetWidth","scrollTo","slotRect","contentRect","useEffect","clearTimeout","React","createElement","View","className","ScrollView","scrollX","scrollLeft","ref","style","map","child","index","key","dataTrackId","concat","el","classNames","color","flex","onClick","handleClick","TabItemComponent","title","background","transform","WebkitTransform","transition","Item"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tabbar.js","sources":["../../../../src/components/Tabbar/tabbar/Tabbar.tsx"],"sourcesContent":["import React, {\n FC,\n ReactElement,\n useEffect,\n useState,\n ReactNode,\n useRef,\n useCallback,\n} from \"react\";\nimport { createSelectorQuery } from \"@tarojs/taro\";\nimport { View, ScrollView } from \"@tarojs/components\";\nimport classNames from \"classnames\";\nimport Item from \"./TabItem\";\n\n/**\n * Tab切换\n *\n * @param children //子组件\n * @param animated //是否开启转场动画\n * @param selectIndex //默认选中第几个\n * @param lineColor //下划线颜色\n * @param titleActiveColor //标题选中态颜色\n * @param titleInctiveColor //标题默认态颜色\n * @param onChange //切换回调事件\n * @param content //item公共节点\n * @param isOverflowNav //是否超宽导航（超过屏幕宽度，自动滚动）\n *\n */\n\nexport interface TabProps {\n children: ReactElement[];\n animated?: boolean;\n lineColor?: string;\n titleActiveColor?: string;\n titleInctiveColor?: string;\n onChange?: (index: number) => void;\n content?: string | ReactNode;\n selectIndex: number;\n isOverflowNav?: boolean;\n}\n\nexport interface TabsComponent<P = {}> extends FC<P> {\n Item: typeof Item;\n}\n\nconst XHTabs: TabsComponent<TabProps> = props => {\n const {\n children = [],\n // animated = false,\n lineColor = \"#FE5E00\",\n titleActiveColor = \"#333\",\n titleInctiveColor = \"#999\",\n onChange,\n content,\n selectIndex = 0,\n isOverflowNav = false,\n } = props;\n\n const [tabContentHeight, setTabContentHeight] = useState(0);\n const [tabSlotHeight, setTabSlotHeight] = useState(0);\n const [lineLeft, setLineLeft] = useState(0); // 下划线左偏移，核心：通过状态控制下划线位置，确保同步更新和动画过渡\n const [navLeft, setNavLeft] = useState(0); // 导航滚动位置，核心：通过状态控制滚动位置，适配超宽导航\n // Ref定义\n const itemNavRef = useRef<(HTMLDivElement | null)[]>([]);\n const itemContentRef = useRef<(HTMLDivElement | null)[]>([]);\n const itemSlotRef = useRef<(HTMLDivElement | null)[]>([]);\n const navScrollRef = useRef<HTMLDivElement | null>(null); // 滚动容器ref\n const navContainerRef = useRef<HTMLDivElement | null>(null);\n const timerRef = useRef<NodeJS.Timeout | null>(null); // 定时器ref，避免闭包丢失\n\n // 统一滚动计算逻辑：H5/小程序通用\n const computeScroll = (\n itemRect: any,\n scrollRect: any,\n containerLeft: number,\n containerWidth: number\n ) => {\n if (!scrollRect || !isOverflowNav) return 0;\n // 元素在导航容器内的绝对偏移（视口坐标转容器坐标）\n const itemOffsetInNav = itemRect.left - containerLeft;\n // 居中滚动值：让选中项尽量居中显示\n let targetScroll =\n itemOffsetInNav - (scrollRect.width - itemRect.width) / 2;\n // 最大可滚动距离：总导航宽度 - 可视区域宽度\n const maxScroll = Math.max(0, containerWidth - scrollRect.width);\n // 边界处理：不小于0，不大于最大可滚动距离\n return Math.max(0, Math.min(targetScroll, maxScroll));\n };\n\n // 抽离位置/尺寸计算逻辑，复用（初始化+切换都调用）\n const calculateTabInfo = useCallback(\n (targetIndex: number) => {\n // 过滤空children，避免索引越界\n const validChildren = children.filter(Boolean);\n if (targetIndex < 0 || targetIndex >= validChildren.length) return;\n\n // H5端：直接通过ref获取元素信息，核心：同步更新，无需等待DOM渲染\n if (process.env.TARO_ENV === \"h5\") {\n const navItem = itemNavRef.current[targetIndex];\n const slotItem = itemSlotRef.current[0];\n const contentItem = itemContentRef.current[targetIndex];\n const navContainer = navItem?.parentElement as HTMLDivElement;\n const scrollContainer = navScrollRef.current;\n\n // 计算下划线位置\n if (navItem && navContainer && scrollContainer) {\n const itemRect = navItem.getBoundingClientRect();\n const containerRect = navContainer.getBoundingClientRect();\n const scrollRect = scrollContainer.getBoundingClientRect();\n const centerX =\n itemRect.left + itemRect.width / 2 - containerRect.left;\n setLineLeft(centerX);\n\n if (isOverflowNav) {\n const targetScroll = computeScroll(\n itemRect,\n scrollRect,\n containerRect.left,\n navContainer.offsetWidth\n );\n scrollContainer.scrollTo({\n left: targetScroll,\n // behavior: \"instant\",\n });\n }\n }\n\n if (slotItem) {\n const slotRect = slotItem.getBoundingClientRect();\n setTabSlotHeight(slotRect.height);\n }\n if (contentItem) {\n const contentRect = contentItem.getBoundingClientRect();\n setTabContentHeight(contentRect.height);\n }\n return;\n }\n\n // 小程序端：必须用createSelectorQuery，保留极短延迟（50ms），适配小程序DOM渲染时机\n timerRef.current = setTimeout(() => {\n const query = createSelectorQuery();\n query.selectAll(\".xh-tabbar-nav-item\").boundingClientRect();\n query.select(\".xh-tabbar-nav\").boundingClientRect(); // 导航容器（下划线定位基准）\n query.selectAll(\".xh-tabbar-content-item\").boundingClientRect();\n query.selectAll(\".xh-tabbar-content-slot\").boundingClientRect();\n query.select(\".xh-tabbar-nav-scroll\").boundingClientRect(); // 滚动容器\n query.exec(res => {\n const [\n navRects,\n navContainerRect,\n contentRects,\n slotRects,\n scrollRect,\n ] = res;\n const navContainer = navContainerRect?.node || navContainerRect;\n // 下划线宽度+内容高度\n if (navRects[targetIndex] && navContainer && scrollRect) {\n const itemRect = navRects[targetIndex];\n const containerRect = navContainerRect;\n const centerX =\n itemRect.left + itemRect.width / 2 - containerRect.left;\n setLineLeft(centerX);\n\n // 计算ScrollView滚动距离（选中项居中）\n if (isOverflowNav) {\n const targetScroll = computeScroll(\n itemRect,\n scrollRect,\n navContainerRect.left,\n navContainerRect.width\n );\n setNavLeft(targetScroll);\n }\n }\n // 内容高度计算（保持不变）\n if (contentRects[targetIndex]) {\n setTabContentHeight(contentRects[targetIndex].height);\n }\n // Slot高度查询取[0]，因为Slot只有一个节点\n if (slotRects[0]) {\n setTabSlotHeight(slotRects[0].height);\n }\n });\n }, 50);\n },\n [children, isOverflowNav]\n );\n\n useEffect(() => {\n calculateTabInfo(selectIndex);\n // 清理定时器，防止内存泄漏\n return () => {\n if (timerRef.current) clearTimeout(timerRef.current);\n };\n }, [selectIndex, calculateTabInfo]);\n\n // 点击导航项\n const handleClick = (index: number): void => {\n if (index === selectIndex) return; // 点击当前选中项，不做处理\n // 同步计算目标项位置，下划线立即更新\n calculateTabInfo(index);\n // 触发切换回调\n onChange && onChange(index);\n\n // 小程序端单独处理内容高度（H5已在calculateTabInfo中处理）\n if (process.env.TARO_ENV === \"h5\") {\n // 点击导航获取内容高度和slot高度\n const query = createSelectorQuery();\n query.selectAll(\".xh-tabbar-content-item\").boundingClientRect();\n query.selectAll(\".xh-tabbar-content-slot\").boundingClientRect();\n query.exec(res => {\n if (!res[0][index]) return;\n const height: number = res[0][index].height;\n\n setTabContentHeight(height);\n if (!res[1][index]) return;\n setTabSlotHeight(res[1][index].height);\n });\n }\n };\n\n // 下划线\n function renderLine(): ReactElement | null {\n return (\n <div\n className=\"xh-tabbar-nav-line\"\n style={{\n background: `${lineColor}`,\n transform: `translateX(${lineLeft}px) translate(-50%, -50%)`,\n WebkitTransform: `translateX(${lineLeft}px) translate(-50%, -50%)`,\n transition: \"transform 0.3s ease\", // 小程序端动画过渡\n }}\n />\n );\n }\n\n // 导航栏\n function renderNav() {\n return (\n <ScrollView\n scrollX\n scrollLeft={navLeft}\n className=\"xh-tabbar-nav-scroll\"\n ref={navScrollRef}\n >\n <View\n className=\"xh-tabbar-nav\"\n ref={navContainerRef}\n style={{ width: isOverflowNav ? \"fit-content\" : \"100%\" }}\n >\n {children.map((child, index) => (\n <View\n key={index}\n data-index={index}\n // @ts-ignore\n dataTrackId={\n child.props.dataTrackId || `xh-tabbar-nav-item-${index}`\n }\n ref={el => (itemNavRef.current[index] = el)}\n className={classNames(\"xh-tabbar-nav-item\", {\n \"more-item\": isOverflowNav,\n })}\n style={{\n color:\n selectIndex === index ? titleActiveColor : titleInctiveColor,\n flex: isOverflowNav ? \"none\" : \"1\",\n }}\n onClick={() => handleClick(index)}\n >\n {child.props.TabItemComponent || child.props.title}\n </View>\n ))}\n {renderLine()}\n </View>\n </ScrollView>\n );\n }\n\n return (\n <View className=\"xh-tabbar\">\n {renderNav()}\n <View\n className=\"xh-tabbar-content\"\n style={{\n width: `${children.length * 100}%`,\n height:\n tabContentHeight + tabSlotHeight\n ? `${tabContentHeight + tabSlotHeight}px`\n : \"auto\",\n }}\n >\n {content && (\n <View className=\"xh-tabbar-content-slot\" ref={itemSlotRef}>\n {content}\n </View>\n )}\n {children.map((child, index) => (\n <View\n key={index}\n ref={el => (itemContentRef.current[index] = el)}\n className={classNames(\"xh-tabbar-content-item\", {\n \"xh-tabbar-content-item-dispaly\": selectIndex !== index,\n \"xh-tabbar-content-item-active\": selectIndex === index,\n })}\n >\n {child.props.children}\n </View>\n ))}\n </View>\n </View>\n );\n};\n\nXHTabs.Item = Item;\n\nexport default XHTabs;\nexport const TabItem = Item;\n"],"names":["XHTabs","props","_a","children","_b","lineColor","_c","titleActiveColor","_d","titleInctiveColor","onChange","content","_e","selectIndex","_f","isOverflowNav","_g","__read","useState","tabContentHeight","setTabContentHeight","_h","tabSlotHeight","setTabSlotHeight","_j","lineLeft","setLineLeft","_k","navLeft","setNavLeft","itemNavRef","useRef","itemContentRef","itemSlotRef","navScrollRef","navContainerRef","timerRef","computeScroll","itemRect","scrollRect","containerLeft","containerWidth","targetScroll","left","width","maxScroll","Math","max","min","calculateTabInfo","useCallback","targetIndex","validChildren","filter","Boolean","length","process","env","TARO_ENV","current","setTimeout","query","createSelectorQuery","selectAll","boundingClientRect","select","exec","res","navRects","navContainerRect","contentRects","slotRects","navContainer","node","containerRect","centerX","height","navItem","slotItem","contentItem","parentElement","scrollContainer","getBoundingClientRect","offsetWidth","scrollTo","slotRect","contentRect","useEffect","clearTimeout","React","createElement","View","className","ScrollView","scrollX","scrollLeft","ref","style","map","child","index","key","dataTrackId","concat","el","classNames","color","flex","onClick","handleClick","TabItemComponent","title","background","transform","WebkitTransform","transition","Item"],"mappings":"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"}
|