fix(fluent-ui.com): Navigation Persistent record of scroll position

fluent-org · Aug 2, 2019 · 1d67613 · 1d67613
1 parent c2ccaed
commit 1d67613
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 19 deletions.
diff --git a/packages/fluent-ui-hooks/src/useFocus.ts b/packages/fluent-ui-hooks/src/useFocus.ts
@@ -15,7 +15,7 @@
 import * as React from 'react'
 
 export function useFocus(
-  statusHandler?: (status: boolean) => void
+  statusHandler: (status: boolean) => void
 ): [
   boolean,
   {

diff --git a/packages/fluent-ui-hooks/src/useHover.ts b/packages/fluent-ui-hooks/src/useHover.ts
@@ -15,7 +15,7 @@
 import * as React from 'react'
 
 export function useHover(
-  statusHandler?: (status: boolean) => void
+  statusHandler: (status: boolean) => void
 ): [
   boolean,
   {

diff --git a/packages/fluent-ui-hooks/src/useTouch.ts b/packages/fluent-ui-hooks/src/useTouch.ts
@@ -15,7 +15,7 @@
 import * as React from 'react'
 
 export function useTouch(
-  statusHandler?: (status: boolean) => void
+  statusHandler: (status: boolean) => void
 ): [
   boolean,
   {

diff --git a/packages/fluent-ui.com/src/components/docs/content.tsx b/packages/fluent-ui.com/src/components/docs/content.tsx
@@ -59,7 +59,10 @@ const Content = ({ data }: TemplateProps): React.ReactElement => {
       boxShadow="2"
       position="relative"
       zIndex={2}
-      overflow="auto"
+      style={{
+        overflowX: 'hidden',
+        overflowY: 'auto'
+      }}
     >
       <Header />
       <Box padding="4" minHeight="100%" backgroundColor="white.default">

diff --git a/packages/fluent-ui.com/src/components/docs/nav.tsx b/packages/fluent-ui.com/src/components/docs/nav.tsx
@@ -21,7 +21,7 @@ import {
   FontSize as FontSizeIcon,
   ActionCenter as ActionCenterIcon
 } from '@fluent-ui/icons'
-import { useAction } from '@fluent-ui/hooks'
+import { useAction, useMedia } from '@fluent-ui/hooks'
 import { TemplateProps } from './template'
 
 const iconMap = [
@@ -159,9 +159,11 @@ const Nav = ({ data }: TemplateProps): React.ReactElement => {
 
   const result = getFrontMatter(data)
 
+  const rootRef = React.useRef<HTMLDivElement>(null)
+
   const mobileChild = (
     <Drawer visible={drawerVisible} onChange={handleDrawerVisible}>
-      <Navigation value={activeId} expanded={true} acrylic height="100%" width={260}>
+      <Navigation ref={rootRef} value={activeId} expanded={true} acrylic height="100%" width={260}>
         <Navigation.Header>
           <Navigation.Item onClick={handleExpanded}>
             <GlobalNavigationButtonIcon />
@@ -179,8 +181,9 @@ const Nav = ({ data }: TemplateProps): React.ReactElement => {
                 (title): React.ReactElement => {
                   return (
                     <Navigation.Item
-                      id={title + type}
-                      key={title + type}
+                      id={title}
+                      key={title}
+                      className={activeId === title ? 'active-item' : ''}
                       onClick={handleNavigation.bind(undefined, title, type)}
                       style={{ paddingLeft: drawerVisible ? 24 : 12 }}
                     >
@@ -199,6 +202,7 @@ const Nav = ({ data }: TemplateProps): React.ReactElement => {
   const pcChild = (
     // @ts-ignore
     <Navigation
+      ref={rootRef}
       value={activeId}
       expanded={expanded}
       acrylic
@@ -234,6 +238,7 @@ const Nav = ({ data }: TemplateProps): React.ReactElement => {
                   <Navigation.Item
                     id={title}
                     key={title}
+                    className={activeId === title ? 'active-item' : ''}
                     onClick={handleNavigation.bind(undefined, title, type)}
                     style={{ paddingLeft: expanded ? 24 : 12 }}
                   >
@@ -249,12 +254,17 @@ const Nav = ({ data }: TemplateProps): React.ReactElement => {
     </Navigation>
   )
 
-  return (
-    <>
-      {mobileChild}
-      {pcChild}
-    </>
-  )
+  const isMobile = useMedia('xs')
+
+  React.useEffect((): void => {
+    const activeElement = document.querySelector('.active-item')
+    if (activeElement) {
+      activeElement.scrollIntoView()
+      if (rootRef.current) rootRef.current.scrollTop = 0
+    }
+  }, [drawerVisible, isMobile])
+
+  return isMobile ? mobileChild : pcChild
 }
 
 export default Nav
diff --git a/packages/fluent-ui/src/Navigation/Navigation.type.ts b/packages/fluent-ui/src/Navigation/Navigation.type.ts
@@ -18,7 +18,8 @@ export interface NavigationProps extends Omit<BoxProps, 'onChange'>, ThemeProps
   onChange?: (id: NavigationID) => void
 }
 
-export interface NavigationType extends React.ForwardRefExoticComponent<NavigationProps> {
+export interface NavigationType
+  extends React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>> {
   Header: typeof Header
   Footer: typeof Footer
   Content: typeof Content

diff --git a/packages/fluent-ui/src/Tooltip/Tooltip.tsx b/packages/fluent-ui/src/Tooltip/Tooltip.tsx
@@ -23,17 +23,18 @@ const Tooltip = ({
   const [referenceRef, popperRef] = usePopper<HTMLDivElement, HTMLDivElement>(propperOptions)
   const isControlled = React.useMemo((): boolean => !!visible, [visible])
 
-  const hoverHandler = useHover(onChange)
-  const clickHandler = useClick(onChange)
+  const defaultOnChange = () => {}
+  const hoverHandler = useHover(onChange || defaultOnChange)
+  const clickHandler = useClick(onChange || defaultOnChange)
   useClickOutside(
     referenceRef,
     (): void => {
       clickHandler[2] && clickHandler[2](false)
       onChange && onChange(false)
     }
   )
-  const touchHandler = useTouch(onChange)
-  const focusHandler = useFocus(onChange)
+  const touchHandler = useTouch(onChange || defaultOnChange)
+  const focusHandler = useFocus(onChange || defaultOnChange)
   const triggerMap = {
     hover: hoverHandler,
     click: clickHandler,