fix(docz-theme-default): open menu if has some link active

doczjs · Jul 19, 2018 · 8399aad · 8399aad
1 parent c866856
commit 8399aad
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 51 deletions.
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Link.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Link.tsx
@@ -107,6 +107,15 @@ const Submenu = styled('div')`
 const isSmallLinkActive = (slug: string) => (m: any, location: any) =>
   slug === location.hash.slice(1, Infinity)
 
+export const getActiveFromClass = (el: HTMLElement | null) => {
+  if (el) {
+    const classes = el.classList
+    return classes.contains('active')
+  }
+
+  return false
+}
+
 interface LinkProps extends BaseLinkProps {
   doc: Entry
 }
@@ -126,17 +135,8 @@ export class Link extends Component<LinkProps, LinkState> {
     this.$el = null
   }
 
-  public checkActive = (): boolean => {
-    if (this.$el) {
-      const classes = this.$el.classList
-      return classes.contains('active')
-    }
-
-    return false
-  }
-
   public updateActive = (prevActive: boolean): void => {
-    const active = this.checkActive()
+    const active = getActiveFromClass(this.$el)
     if (prevActive !== active) this.setState({ active })
   }
 

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx
@@ -1,17 +1,26 @@
 import * as React from 'react'
-import { SFC } from 'react'
+import { Component } from 'react'
 import { Entry } from 'docz'
-import { Toggle } from 'react-powerplug'
 import ChevronDown from 'react-feather/dist/icons/chevron-down'
 import styled from 'react-emotion'
 
-import { Link, linkStyle } from './Link'
+import { Link, linkStyle, getActiveFromClass } from './Link'
 
 const Wrapper = styled('div')`
   display: flex;
   flex-direction: column;
 `
 
+interface ListProps {
+  opened: boolean
+}
+
+const List = styled('dl')`
+  visibility: ${(p: ListProps) => (p.opened ? 'visible' : 'hidden')};
+  max-height: ${(p: ListProps) => (p.opened ? '9999px' : '0px')};
+  transition: max-height 0.1s;
+`
+
 export const MenuLink = styled('a')`
   ${linkStyle};
 `
@@ -42,41 +51,69 @@ export interface MenuProps {
   collapseAll: boolean
 }
 
-export const Menu: SFC<MenuProps> = ({
-  menu,
-  docs,
-  sidebarToggle,
-  collapseAll,
-}) => (
-  <Toggle initial={false}>
-    {({ on, toggle }: any) => {
-      const show = collapseAll || on
-      const handleToggle = (ev: React.SyntheticEvent<any>) => {
-        ev.preventDefault()
-        toggle()
-      }
-
-      return (
-        <Wrapper>
-          <MenuLink href="#" onClick={handleToggle}>
-            {menu}
-            <Icon opened={show}>
-              <ChevronDown size={15} />
-            </Icon>
-          </MenuLink>
-          {show && (
-            <dl>
-              {docs.map(doc => (
-                <dt key={doc.id}>
-                  <Link onClick={sidebarToggle} to={doc.route} doc={doc}>
-                    {doc.name}
-                  </Link>
-                </dt>
-              ))}
-            </dl>
-          )}
-        </Wrapper>
-      )
-    }}
-  </Toggle>
-)
+export interface MenuState {
+  opened: boolean
+  hasActive: boolean
+}
+
+export class Menu extends Component<MenuProps, MenuState> {
+  public $els: HTMLElement[]
+  public state: MenuState = {
+    opened: false,
+    hasActive: false,
+  }
+
+  constructor(props: MenuProps) {
+    super(props)
+    this.$els = []
+  }
+
+  public componentDidMount(): void {
+    this.checkActiveLink()
+  }
+
+  public render(): JSX.Element {
+    const { menu, docs, sidebarToggle, collapseAll } = this.props
+    const show = collapseAll || this.state.opened
+    const handleToggle = (ev: React.SyntheticEvent<any>) => {
+      ev.preventDefault()
+      this.toggle()
+    }
+
+    return (
+      <Wrapper>
+        <MenuLink href="#" onClick={handleToggle}>
+          {menu}
+          <Icon opened={show}>
+            <ChevronDown size={15} />
+          </Icon>
+        </MenuLink>
+        <List opened={show}>
+          {docs.map(doc => (
+            <dt key={doc.id}>
+              <Link
+                onClick={sidebarToggle}
+                to={doc.route}
+                doc={doc}
+                ref={(node: any) => {
+                  this.$els = this.$els.concat([node])
+                }}
+              >
+                {doc.name}
+              </Link>
+            </dt>
+          ))}
+        </List>
+      </Wrapper>
+    )
+  }
+
+  private toggle = (): void => {
+    this.setState(state => ({ opened: !state.opened }))
+  }
+
+  private checkActiveLink = (): void => {
+    const hasActive = this.$els.some(({ $el }: any) => getActiveFromClass($el))
+    if (hasActive) this.setState({ hasActive, opened: true })
+  }
+}