fix(ComponentSidebar): remove empty item in docs sidebar (#728)

* fix(ComponentSidebar): remove empty item in docs sidebar

* add changelog entry

Author: layershifter

CHANGELOG.md

@@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix ignored initial state of knobs @layershifter ([#720](https://github.com/stardust-ui/react/pull/720))
 - Fix unclearable example's code @layershifter ([#720](https://github.com/stardust-ui/react/pull/720))
 - Add ability to export examples to CodeSandbox @layershifter ([#731](https://github.com/stardust-ui/react/pull/731))
+- Fix remove empty item in docs sidebar @layershifter ([#728](https://github.com/stardust-ui/react/pull/728))
 
 ### Features
 - Add accessibility for submenu in toolbar and menu behavior @kolaps33 ([#686] (https://github.com/stardust-ui/react/pull/686))

docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebar.tsx

@@ -1,5 +1,4 @@
 import * as _ from 'lodash'
-import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Accordion, Menu, Sticky } from 'semantic-ui-react'
 
@@ -13,27 +12,29 @@ const sidebarStyle = {
   paddingTop: '0.1em',
 }
 
-class ComponentSidebar extends React.Component<any, any> {
-  static propTypes = {
-    activePath: PropTypes.string,
-    displayName: PropTypes.string,
-    examplesRef: PropTypes.object,
-    onItemClick: PropTypes.func,
-  }
+type ComponentSidebarProps = {
+  activePath: string
+  displayName: string
+  examplesRef: HTMLElement
+  onItemClick: (e: React.SyntheticEvent, { examplePath: string }) => void
+}
 
+class ComponentSidebar extends React.Component<ComponentSidebarProps, any> {
   state: any = {}
 
   componentDidMount() {
-    this.fetchSections()
+    this.fetchSections(this.props.displayName)
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.fetchSections(nextProps)
+  componentDidUpdate(prevProps: ComponentSidebarProps) {
+    if (this.props.displayName !== prevProps.displayName) {
+      this.fetchSections(this.props.displayName)
+    }
   }
 
-  fetchSections = ({ displayName } = this.props) => {
+  fetchSections = (displayName: string) => {
     import(`docs/src/exampleMenus/${displayName}.examples.json`).then(sections => {
-      this.setState({ sections })
+      this.setState({ sections: sections.default })
     })
   }