fix: 🐛
This commit is contained in:
@@ -16,11 +16,11 @@ export function Tabs({
|
|||||||
onTabChange: (tab: TTabValue) => void
|
onTabChange: (tab: TTabValue) => void
|
||||||
}) {
|
}) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const activeIndex = TABS.findIndex((tab) => tab.value === selectedTab)
|
|
||||||
const tabRefs = useRef<(HTMLDivElement | null)[]>([])
|
const tabRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||||
const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 })
|
const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 })
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const activeIndex = TABS.findIndex((tab) => tab.value === selectedTab)
|
||||||
if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
|
if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
|
||||||
const activeTab = tabRefs.current[activeIndex]
|
const activeTab = tabRefs.current[activeIndex]
|
||||||
const { offsetWidth, offsetLeft } = activeTab
|
const { offsetWidth, offsetLeft } = activeTab
|
||||||
@@ -30,7 +30,7 @@ export function Tabs({
|
|||||||
left: offsetLeft + padding / 2
|
left: offsetLeft + padding / 2
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [activeIndex])
|
}, [selectedTab])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-fit">
|
<div className="w-fit">
|
||||||
|
|||||||
@@ -21,12 +21,12 @@ export default function Tabs({
|
|||||||
}) {
|
}) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
|
const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
|
||||||
const activeIndex = tabs.findIndex((tab) => tab.value === value)
|
|
||||||
const tabRefs = useRef<(HTMLDivElement | null)[]>([])
|
const tabRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||||
const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 })
|
const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 })
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
|
const activeIndex = tabs.findIndex((tab) => tab.value === value)
|
||||||
if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
|
if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
|
||||||
const activeTab = tabRefs.current[activeIndex]
|
const activeTab = tabRefs.current[activeIndex]
|
||||||
const { offsetWidth, offsetLeft } = activeTab
|
const { offsetWidth, offsetLeft } = activeTab
|
||||||
@@ -42,7 +42,7 @@ export default function Tabs({
|
|||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('resize', handleResize)
|
window.removeEventListener('resize', handleResize)
|
||||||
}
|
}
|
||||||
}, [activeIndex])
|
}, [value])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user