mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ensure indicator style is calculated after tabs are rendered

Browse Source
This commit is contained in:
codytseng
2025-07-03 10:06:43 +08:00
parent 4df8f10ea9
commit 6f0dd7b336
2 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/NoteInteractions/Tabs.tsx
View File

@@ -20,16 +20,18 @@ export function Tabs({
const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 })
useEffect(() => {
const activeIndex = TABS.findIndex((tab) => tab.value === selectedTab)
if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
const activeTab = tabRefs.current[activeIndex]
const { offsetWidth, offsetLeft } = activeTab
const padding = 32 // 16px padding on each side
setIndicatorStyle({
width: offsetWidth - padding,
left: offsetLeft + padding / 2
})
}
setTimeout(() => {
const activeIndex = TABS.findIndex((tab) => tab.value === selectedTab)
if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
const activeTab = tabRefs.current[activeIndex]
const { offsetWidth, offsetLeft } = activeTab
const padding = 32 // 16px padding on each side
setIndicatorStyle({
width: offsetWidth - padding,
left: offsetLeft + padding / 2
})
}
}, 20) // ensure tabs are rendered before calculating
}, [selectedTab])
return (

8
src/components/Tabs/index.tsx
View File

@@ -27,10 +27,16 @@ export default function Tabs({
useEffect(() => {
const handleResize = () => {
const activeIndex = tabs.findIndex((tab) => tab.value === value)
if (tabs.length === 4) {
console.log('notification tabs', activeIndex, value)
}
if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
const activeTab = tabRefs.current[activeIndex]
const { offsetWidth, offsetLeft } = activeTab
const padding = 24 // 12px padding on each side
if (tabs.length === 4) {
console.log('notification tabs', offsetWidth, offsetLeft, padding)
}
setIndicatorStyle({
width: offsetWidth - padding,
left: offsetLeft + padding / 2
@@ -38,7 +44,7 @@ export default function Tabs({
}
}
window.addEventListener('resize', handleResize)
handleResize() // Initial call to set the indicator style
setTimeout(() => handleResize(), 20) // ensure tabs are rendered before calculating
return () => {
window.removeEventListener('resize', handleResize)
}