fix hoisting errors
This commit is contained in:
@@ -53,6 +53,16 @@ export function InterestTabs({
|
|||||||
const pendingTabOffsets = useRef<{x: number; width: number}[]>([])
|
const pendingTabOffsets = useRef<{x: number; width: number}[]>([])
|
||||||
const [tabOffsets, setTabOffsets] = useState<{x: number; width: number}[]>([])
|
const [tabOffsets, setTabOffsets] = useState<{x: number; width: number}[]>([])
|
||||||
|
|
||||||
|
function scrollIntoViewIfNeeded(index: number) {
|
||||||
|
const btnLayout = tabOffsets[index]
|
||||||
|
if (!btnLayout) return
|
||||||
|
listRef.current?.scrollTo({
|
||||||
|
// centered
|
||||||
|
x: btnLayout.x - (totalWidth / 2 - btnLayout.width / 2),
|
||||||
|
animated: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const onInitialLayout = useNonReactiveCallback(() => {
|
const onInitialLayout = useNonReactiveCallback(() => {
|
||||||
const index = interests.indexOf(selectedInterest)
|
const index = interests.indexOf(selectedInterest)
|
||||||
scrollIntoViewIfNeeded(index)
|
scrollIntoViewIfNeeded(index)
|
||||||
@@ -64,16 +74,6 @@ export function InterestTabs({
|
|||||||
}
|
}
|
||||||
}, [tabOffsets, onInitialLayout])
|
}, [tabOffsets, onInitialLayout])
|
||||||
|
|
||||||
function scrollIntoViewIfNeeded(index: number) {
|
|
||||||
const btnLayout = tabOffsets[index]
|
|
||||||
if (!btnLayout) return
|
|
||||||
listRef.current?.scrollTo({
|
|
||||||
// centered
|
|
||||||
x: btnLayout.x - (totalWidth / 2 - btnLayout.width / 2),
|
|
||||||
animated: true,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSelectTab(index: number) {
|
function handleSelectTab(index: number) {
|
||||||
const tab = interests[index]
|
const tab = interests[index]
|
||||||
onSelectTab(tab)
|
onSelectTab(tab)
|
||||||
|
|||||||
@@ -41,12 +41,6 @@ export function Pager({
|
|||||||
const scrollYs = useRef<Array<number | null>>([])
|
const scrollYs = useRef<Array<number | null>>([])
|
||||||
const anchorRef = useRef(null)
|
const anchorRef = useRef(null)
|
||||||
|
|
||||||
useImperativeHandle(ref, () => ({
|
|
||||||
setPage: (index: number) => {
|
|
||||||
onTabBarSelect(index)
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
|
|
||||||
const onTabBarSelect = useCallback(
|
const onTabBarSelect = useCallback(
|
||||||
(index: number) => {
|
(index: number) => {
|
||||||
const scrollY = window.scrollY
|
const scrollY = window.scrollY
|
||||||
@@ -80,12 +74,18 @@ export function Pager({
|
|||||||
[selectedPage, setSelectedPage, onPageSelected],
|
[selectedPage, setSelectedPage, onPageSelected],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
useImperativeHandle(ref, () => ({
|
||||||
|
setPage: (index: number) => {
|
||||||
|
onTabBarSelect(index)
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={s.hContentRegion}>
|
<View style={s.hContentRegion}>
|
||||||
{renderTabBar({
|
{renderTabBar({
|
||||||
selectedPage,
|
selectedPage,
|
||||||
tabBarAnchor: <View ref={anchorRef} />,
|
tabBarAnchor: <View ref={anchorRef} />,
|
||||||
onSelect: e => onTabBarSelect(e),
|
onSelect: onTabBarSelect,
|
||||||
})}
|
})}
|
||||||
{Children.map(children, (child, i) => (
|
{Children.map(children, (child, i) => (
|
||||||
<View
|
<View
|
||||||
|
|||||||
Reference in New Issue
Block a user