Shared:Components:Tabs: fix scroll to selected tab after for first render
This commit is contained in:
parent
fd6365bf17
commit
48478d33df
@ -24,7 +24,7 @@
|
|||||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
import React, { useState, useRef, useEffect } from "react";
|
import React, { useState, useRef, useEffect, useCallback } from "react";
|
||||||
import { useTheme } from "styled-components";
|
import { useTheme } from "styled-components";
|
||||||
|
|
||||||
import { Scrollbar as ScrollbarType } from "../scrollbar/custom-scrollbar";
|
import { Scrollbar as ScrollbarType } from "../scrollbar/custom-scrollbar";
|
||||||
@ -69,11 +69,8 @@ const Tabs = (props: TabsProps) => {
|
|||||||
const isViewFirstTab = useViewTab(scrollRef, tabsRef, 0);
|
const isViewFirstTab = useViewTab(scrollRef, tabsRef, 0);
|
||||||
const isViewLastTab = useViewTab(scrollRef, tabsRef, items.length - 1);
|
const isViewLastTab = useViewTab(scrollRef, tabsRef, items.length - 1);
|
||||||
|
|
||||||
useEffect(() => {
|
const scrollToTab = useCallback(
|
||||||
setCurrentItem(items[selectedItemIndex]);
|
(index: number): void => {
|
||||||
}, [selectedItemIndex, items]);
|
|
||||||
|
|
||||||
const scrollToTab = (index: number): void => {
|
|
||||||
if (!scrollRef.current || !tabsRef.current) return;
|
if (!scrollRef.current || !tabsRef.current) return;
|
||||||
|
|
||||||
const containerElement = scrollRef.current.scrollerElement;
|
const containerElement = scrollRef.current.scrollerElement;
|
||||||
@ -118,7 +115,14 @@ const Tabs = (props: TabsProps) => {
|
|||||||
OFFSET_RIGHT,
|
OFFSET_RIGHT,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
},
|
||||||
|
[theme.interfaceDirection],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setCurrentItem(items[selectedItemIndex]);
|
||||||
|
scrollToTab(selectedItemIndex);
|
||||||
|
}, [selectedItemIndex, items, scrollToTab]);
|
||||||
|
|
||||||
const setSelectedItem = (selectedTabItem: TTabItem, index: number): void => {
|
const setSelectedItem = (selectedTabItem: TTabItem, index: number): void => {
|
||||||
setCurrentItem(selectedTabItem);
|
setCurrentItem(selectedTabItem);
|
||||||
|
Loading…
Reference in New Issue
Block a user