fix: fix some bugs for navigation and update README.md

parksben · Dec 30, 2019 · 8e4e2d9 · 8e4e2d9
1 parent 865049f
commit 8e4e2d9
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,9 @@
 # Markdown-Navbar
 
+![npm](https://img.shields.io/npm/l/markdown-navbar.svg)
+![npm](https://img.shields.io/npm/dt/markdown-navbar.svg)
+![npm](https://img.shields.io/npm/v/markdown-navbar/latest.svg)
+
 Best markdown navbar component for React. With this component, you can:
 
 * Display article directory for readers
@@ -44,11 +48,12 @@ const content = '## Heading One...\n\n## Heading Two...\n';
 
 ## Options
 
-|property|type|default value|use|
+|Property|Data Type|Default Value|Description|
 |:-:|:-:|:-:|:-:|
 |className|string|""|The className that defines the outermost container of navbar|
 |source|string|""|Markdown text content|
 |headingTopOffset|number|0|Anchor displacement relative to the top of the window (for the anchor jump)|
+|declarative|boolean|false|Use the text of the title from Markdown content as the hash value for the anchor if true|
 |ordered|boolean|true|Whether the title contains a numerical prefix, such as: `1. 2. 2.2`|
 
 ## License

diff --git a/src/index.js b/src/index.js
@@ -2,27 +2,20 @@ import 'core-js/shim';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-const randomId = (size = 8) => {
-  const str = 'plokmijnuhbygvtfcrdxeszwaq1234567890';
-  let result = '';
-  while (result.length < size) {
-    result += str.charAt(Math.floor(str.length * Math.random()));
-  }
-  return result;
-};
-
 export class MarkdownNavbar extends Component {
   static propTypes = {
     source: PropTypes.string,
     ordered: PropTypes.bool,
     headingTopOffset: PropTypes.number,
+    declarative: PropTypes.bool,
     className: PropTypes.string,
   };
 
   static defaultProps = {
     source: '',
     ordered: true,
     headingTopOffset: 0,
+    declarative: false,
     className: '',
   };
 
@@ -33,17 +26,24 @@ export class MarkdownNavbar extends Component {
     };
   }
 
-  componentDidMount() {
+  componentWillReceiveProps() {
+    if (this.addTargetTimeout) {
+      clearTimeout(this.addTargetTimeout);
+    }
+
     this.addTargetTimeout = setTimeout(() => {
       this._initheadingsId();
       document.addEventListener('scroll', this._winScroll, false);
     }, 1e3);
   }
 
   componentWillUnmount() {
-    clearTimeout(this.addTargetTimeout);
-    clearTimeout(this.scrollTimeout);
-
+    if (this.addTargetTimeout) {
+      clearTimeout(this.addTargetTimeout);
+    }
+    if (this.scrollTimeout) {
+      clearTimeout(this.scrollTimeout);
+    }
     document.removeEventListener('scroll', this._winScroll, false);
   }
 
@@ -129,12 +129,18 @@ export class MarkdownNavbar extends Component {
               .replace(/^(\d+\.)+\s?/g, '')
               .replace(/^\d+\.?\s?/g, '') === t.text
         );
+
       if (curheading) {
-        curheading.dataset.id = `heading-${t.index}`;
+        curheading.dataset.id = this.props.declarative
+          ? t.text
+          : `heading-${t.index}`;
       }
 
-      const headingId = window.location.hash.match(/heading-\d+/g);
-      if (headingId && headingId[0] === `heading-${t.index}`) {
+      const headingId = this.props.declarative
+        ? window.location.hash.replace(/^#/, '').trim()
+        : (window.location.hash.match(/heading-\d+/g) || [])[0];
+
+      if (headingId && headingId === curheading.dataset.id) {
         this._scrollToTarget(headingId);
         this.setState({
           currentListNo: t.listNo,
@@ -158,7 +164,7 @@ export class MarkdownNavbar extends Component {
         );
       if (curheading) {
         headingList.push({
-          dataId: `heading-${t.index}`,
+          dataId: this.props.declarative ? t.text : `heading-${t.index}`,
           listNo: t.listNo,
           offsetTop: curheading.offsetTop,
         });
@@ -194,28 +200,27 @@ export class MarkdownNavbar extends Component {
 
   render() {
     const tBlocks = this._getNavStructure().map(t => {
-      const cls = `title-anchor title-level${t.level} ${this.state
-        .currentListNo === t.listNo
-        ? 'active'
-        : ''}`;
+      const cls = `title-anchor title-level${t.level} ${
+        this.state.currentListNo === t.listNo ? 'active' : ''
+      }`;
 
       return (
         <a
           className={cls}
-          href={`#heading-${t.index}`}
+          href={this.props.declarative ? `#${t.text}` : `#heading-${t.index}`}
           onClick={evt => {
-            this._scrollToTarget(`heading-${t.index}`);
-
+            evt.preventDefault();
+            this._scrollToTarget(
+              this.props.declarative ? t.text : `heading-${t.index}`
+            );
             this.setState({
               currentListNo: t.listNo,
             });
           }}
-          key={`title_anchor_${randomId()}`}>
-          {this.props.ordered
-            ? <small>
-                {t.listNo}
-              </small>
-            : null}
+          key={`title_anchor_${Math.random()
+            .toString(36)
+            .substring(2)}`}>
+          {this.props.ordered ? <small>{t.listNo}</small> : null}
           {t.text}
         </a>
       );