Commit d436b04

authored

Fix jump when clicking tabs (#3746)

1 parent d159788 commit d436b04Copy full SHA for d436b04

File tree

3 files changed

+35

-21

lines changed

packages/gitbook/src/components
- DocumentView/Tabs
  - DynamicTabs.tsx
- hooks
  - usePrevious.ts
  - useScrollPage.ts

3 files changed

+35

-21

lines changed

`‎packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx‎`

Lines changed: 7 additions & 11 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,12 +2,7 @@`
`2`	`2`
`3`	`3`	`import React, { memo, useCallback, useMemo, type ComponentPropsWithRef } from 'react';`
`4`	`4`
`5`		`-import {`
`6`		`- NavigationStatusContext,`
`7`		`- useHash,`
`8`		`- useIsMounted,`
`9`		`- useListOverflow,`
`10`		`-} from '@/components/hooks';`
	`5`	`+import { useHash, useIsMounted, useListOverflow } from '@/components/hooks';`
`11`	`6`	`import { DropdownMenu, DropdownMenuItem } from '@/components/primitives';`
`12`	`7`	`import { useLanguage } from '@/intl/client';`
`13`	`8`	`import { tString } from '@/intl/translate';`
`@@ -74,7 +69,6 @@ export function DynamicTabs(props: {`
`74`	`69`	`}) {`
`75`	`70`	`const { id, tabs, className } = props;`
`76`	`71`	`const router = useRouter();`
`77`		`- const { onNavigationClick } = React.useContext(NavigationStatusContext);`
`78`	`72`
`79`	`73`	`const hash = useHash();`
`80`	`74`	`const [tabsState, setTabsState] = useTabsState();`
`@@ -106,8 +100,7 @@ export function DynamicTabs(props: {`
`106`	`100`
`107`	`101`	const href = `#${tab.id}`;
`108`	`102`	`if (window.location.hash !== href) {`
`109`		`- router.replace(href);`
`110`		`- onNavigationClick(href);`
	`103`	`+ router.replace(href, { scroll: false });`
`111`	`104`	`}`
`112`	`105`
`113`	`106`	`setTabsState((prev) => {`
`@@ -128,7 +121,7 @@ export function DynamicTabs(props: {`
`128`	`121`	`};`
`129`	`122`	`});`
`130`	`123`	`},`
`131`		`- [onNavigationClick,router, setTabsState, tabs, id]`
	`124`	`+ [router, setTabsState, tabs, id]`
`132`	`125`	`);`
`133`	`126`
`134`	`127`	`// When the hash changes, we try to select the tab containing the targetted element.`
`@@ -184,7 +177,10 @@ const TabPanel = memo(function TabPanel(props: {`
`184`	`177`	`role="tabpanel"`
`185`	`178`	`id={tab.id}`
`186`	`179`	`aria-labelledby={getTabButtonId(tab.id)}`
`187`		`- className={tcls('p-4', isActive ? null : 'hidden')}`
	`180`	`+ className={tcls(`
	`181`	`+ 'scroll-mt-[calc(var(--content-scroll-margin)+var(--spacing)*12)] p-4',`
	`182`	`+ isActive ? null : 'hidden'`
	`183`	`+ )}`
`188`	`184`	`>`
`189`	`185`	`{tab.body}`
`190`	`186`	`</div>`

`‎packages/gitbook/src/components/hooks/usePrevious.ts‎`

Lines changed: 12 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,12 @@`
	`1`	`+import * as React from 'react';`
	`2`	`+`
	`3`	`+/**`
	`4`	`+ * Returns the value of the previous render.`
	`5`	`+ */`
	`6`	`+export function usePrevious<T>(value: T): T \| undefined {`
	`7`	`+ const ref = React.useRef<T \| undefined>(undefined);`
	`8`	`+ React.useLayoutEffect(() => {`
	`9`	`+ ref.current = value;`
	`10`	`+ });`
	`11`	`+ return ref.current;`
	`12`	`+}`

`‎packages/gitbook/src/components/hooks/useScrollPage.ts‎`

Lines changed: 16 additions & 10 deletions

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@ import { usePathname } from 'next/navigation';`
`4`	`4`	`import React from 'react';`
`5`	`5`
`6`	`6`	`import { useHash } from './useHash';`
	`7`	`+import { usePrevious } from './usePrevious';`
`7`	`8`
`8`	`9`	`/**`
`9`	`10`	`* Scroll the page to an anchor point or`
`@@ -12,8 +13,17 @@ import { useHash } from './useHash';`
`12`	`13`	`*/`
`13`	`14`	`export function useScrollPage() {`
`14`	`15`	`const hash = useHash();`
	`16`	`+ const previousHash = usePrevious(hash);`
`15`	`17`	`const pathname = usePathname();`
	`18`	`+ const previousPathname = usePrevious(pathname);`
`16`	`19`	`React.useLayoutEffect(() => {`
	`20`	`+ // If there is no change in pathname or hash, do nothing`
	`21`	`+ if (previousHash === hash && previousPathname === pathname) {`
	`22`	`+ return;`
	`23`	`+ }`
	`24`	`+`
	`25`	`+ // If there is a hash`
	`26`	`+ // - Triggered by a change of hash or pathname`
`17`	`27`	`if (hash) {`
`18`	`28`	`const element = document.getElementById(hash);`
`19`	`29`	`if (element) {`
`@@ -22,16 +32,12 @@ export function useScrollPage() {`
`22`	`32`	`behavior: 'smooth',`
`23`	`33`	`});`
`24`	`34`	`}`
`25`		`- } else {`
	`35`	`+ return;`
	`36`	`+ }`
	`37`	`+`
	`38`	`+ // If there was a hash but not anymore, scroll to top`
	`39`	`+ if (previousHash && !hash) {`
`26`	`40`	`window.scrollTo(0, 0);`
`27`	`41`	`}`
`28`		`- return () => {`
`29`		`- if (hash) {`
`30`		`- const element = document.getElementById(hash);`
`31`		`- if (element) {`
`32`		`- element.style.scrollMarginTop = '';`
`33`		`- }`
`34`		`- }`
`35`		`- };`
`36`		`- }, [hash, pathname]);`
	`42`	`+ }, [hash, previousHash, pathname, previousPathname]);`
`37`	`43`	`}`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit d436b04

File tree

3 files changed

3 files changed

`‎packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx‎`

`‎packages/gitbook/src/components/hooks/usePrevious.ts‎`

`‎packages/gitbook/src/components/hooks/useScrollPage.ts‎`

0 commit comments