Use React's new context API (#1)

* Update react

* update

* Update docs

* update: 代码整理

* update: readme; 默认定位修改

* fix: test

.eslintrc.js

@@ -5,68 +5,40 @@ const WARNING = 1;
 const ERROR = 2;
 
 module.exports = {
-  'extends': 'airbnb',
-  'env': {
-    'browser': true,
-    'node': true,
-    'es6': true,
-    'mocha': true
+  extends: ['prettier'],
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+    mocha: true
   },
   globals: {
     assert: true
   },
-  'parser': 'babel-eslint',
-  'plugins': [
-    'react',
-    'babel',
-    'flowtype'
-  ],
-  'parserOptions': {
-    'ecmaVersion': 6,
-    'sourceType': 'module',
-    'ecmaFeatures': {
-      'jsx': true,
-      'experimentalObjectRestSpread': true
-    }
-  },
-  'rules': {
-    'indent': [ERROR, 2, { 'SwitchCase': 1 }],  //规定代码的缩进方式：2个空格
-    'camelcase': ERROR,                         //强制驼峰法命名
-    'curly': ERROR,                             //必须使用 if(){} 中的{}
-    'eqeqeq': ERROR,                            //必须使用全等
-    'brace-style': [ERROR, '1tbs'],             //大括号风格
-    'quotes': [ERROR, 'single'],                //引号类型
-    'semi': [ERROR, 'always'],                  //语句强制分号结尾
-    'space-infix-ops': ERROR,                   //中缀操作符周围要不要有空格
-    'no-param-reassign': OFF,                   //不允许对函数的形参进行赋值
-    'prefer-spread': ERROR,                     //首选展开运算
-    'comma-dangle': OFF,                        //不允许或强制在对象字面量或者数组属性的结尾使用逗号
-    'padded-blocks': OFF,                       //规定代码块前后是否要加空行
+  parser: 'babel-eslint',
+  plugins: ['react', 'prettier', 'json', 'flowtype'],
+  rules: {
+    indent: [ERROR, 2, { SwitchCase: 1 }], //规定代码的缩进方式：2个空格
+    camelcase: ERROR, //强制驼峰法命名
+    eqeqeq: ERROR, //必须使用全等
+    'brace-style': [ERROR, '1tbs'], // 大括号风格
+    quotes: [ERROR, 'single'], // 引号类型
+    semi: [ERROR, 'always'], // 语句强制分号结尾
+    'space-infix-ops': ERROR, // 中缀操作符周围要不要有空格
+    'no-param-reassign': OFF, // 不允许对函数的形参进行赋值
+    'prefer-spread': ERROR, // 首选展开运算
+    'comma-dangle': OFF, // 不允许或强制在对象字面量或者数组属性的结尾使用逗号
+    'padded-blocks': OFF, // 规定代码块前后是否要加空行
     'prefer-const': OFF,
     'no-multi-spaces': ERROR,
     'no-var': OFF,
     'one-var': OFF,
     'class-methods-use-this': WARNING,
     'no-unused-expressions': [ERROR, { allowShortCircuit: true }],
-    /**
-     * https://github.com/airbnb/javascript/tree/master/react
-     */
-    'react/prefer-es6-class': [WARNING, 'always'],    //使用 class extends React.Component
-    'react/jsx-pascal-case': ERROR,                   //骆驼式命名
-    'react/jsx-closing-bracket-location': ERROR,      //JSX语法缩进/格式
-    'react/jsx-curly-spacing': ERROR,                 //JSX {} 引用括号里两边加空格
-    'react/jsx-boolean-value': [OFF, 'always'],       //如果属性值为 true, 可以直接省略
-    'jsx-quotes': [ERROR, 'prefer-double'],           //JSX属性值总是使用双引号(")
-    'react/no-string-refs': ERROR,                    //Refs里使用回调函数
-    'react/jsx-wrap-multilines': ERROR,               //多行的JSX标签写在 ()里
-    'react/self-closing-comp': ERROR,                 //没有子元素的标签来说总是自己关闭标签
-    'react/jsx-no-bind': ERROR,                       //当在 render() 里使用事件处理方法时，提前在构造函数里把 this 绑定上去
-    'react/no-is-mounted': ERROR,                      //不要再使用 isMounted
-    'react/prop-types': [ERROR, { ignore: ['children', 'className', 'style'] }],
-    'jsx-a11y/href-no-hash': OFF,
-    'jsx-a11y/label-has-for': OFF,
-    'react/jsx-filename-extension': OFF,
-    'react/prefer-stateless-function': OFF,
-    'react/require-default-props':OFF
+    'arrow-parens': [ERROR, 'as-needed'],
+    'no-mixed-operators': OFF,
+    'no-unused-vars': ERROR,
+    'react/jsx-uses-vars': ERROR,
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }]
   }
 };

.prettierrc

@@ -1,5 +1,5 @@
 {
   "printWidth": 100,
-  "tabWidth":2,
-  "singleQuote":true
+  "tabWidth": 2,
+  "singleQuote": true
 }

.travis.yml

@@ -11,15 +11,13 @@ cache:
     - node_modules
 
 after_script:
-    - npm run coveralls
+  - npm run coveralls
 
 before_install:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
 
-
 branches:
   only:
     - master
-    - next

README.md

@@ -1,44 +1,139 @@
-# rsuite-page-nav
+# Document Nav
 
-简单易用的文章导航组件
+Document navigation is automatically generated based on the HTML title (h1-h6) tag.
 
-**版本与状态**
+## Install
 
-[![npm](https://img.shields.io/npm/v/rsuite-page-nav.svg)](https://www.npmjs.com/package/rsuite-page-nav)
-
-[![Coverage Status](https://coveralls.io/repos/github/rsuite/rsuite-page-nav/badge.svg?branch=master)](https://coveralls.io/github/rsuite/rsuite-page-nav?branch=master)
+```
+npm i @rsuite/document-nav --save
+```
 
-## 快速开始
+## Examples
 
-### 安装
+```js
+import { NavProvider, Content, Nav } from '@rsuite/document-nav';
+import '@rsuite/document-nav/lib/less/index.less';
 
+function render() {
+  return (
+    <NavProvider>
+      <div className="row">
+        <div className="col col-md-4">
+          <Nav />
+        </div>
+        <div className="col col-md-20">
+          <Content>{require('redeme.md')}</Content>
+        </div>
+      </div>
+    </NavProvider>
+  );
+}
 ```
-npm i rsuite-page-nav --save
+
+## Style
+
+```less
+@import "@rsuite/document-nav/lib/less/index.less";
+@doc-nav-active-color: #34c3ff;
 ```
 
-或
+## 使用方法
+
+有**自动解析**和**手动设置**两种使用方式：
+
+### 自动解析
+
+只需按照如下结构组合代码，document-nav 会自动从 `Content` 中解析出所有的 `h` 标签，并生成导航菜单。
+
+`NavProvider` 负责 `Content` 与 `Nav` 的协作，需放在外层，中间可以任意布局。
 
 ```
-yarn add rsuite-page-nav
+<NavProvider>
+  <Nav />
+  <Content>
+    ...content
+  </Content>
+</NavProvider>
 ```
 
-### 样式
+可以使用 `minLevel` 和 `maxLevel` 来限制导航的标题级别，如 `minLevel = 2` 且 `maxLevel = 4` 时，只有 `h2, h3, h4` 会被导航。
 
-在 `less` 文件中引入
+**注意**
 
+该方法使用标题作为锚点 ID，请尽量避免标题名称重复。
+
+```js
+import { NavProvider, Content, Nav } from '@rsuite/document-nav';
+import '@rsuite/document-nav/lib/less/index.less';
+
+function render() {
+  return (
+    <NavProvider>
+      <div className="row">
+        <div className="col col-md-4">
+          <Nav />
+        </div>
+        <div className="col col-md-20">
+          <Content>{require('redeme.md')}</Content>
+        </div>
+      </div>
+    </NavProvider>
+  );
+}
 ```
-@import '~rsuite-page-nav/lib/less/index.less';
-```
 
-### 示例
+### 手动设置
+
+在 Nav 组件中通过 NavItem 组件设置导航。
 
 ```js
-import PageNav from 'rsuite-page-nav';
+import { NavProvider, Content, Nav } from '@rsuite/document-nav';
+import '@rsuite/document-nav/lib/less/index.less';
 
-<PageProvider>
-  <PageNav/>
-  <PageContent>
-    ...content
-  </PageContent>
-</PageProvider>
-```
+function render() {
+  return (
+    <NavProvider>
+      <div className="row">
+        <div className="col col-md-4">
+          <Nav>
+            <Nav.Item anchor="h-3" title="二级标题---2">
+                <Nav.Item anchor="h-3-1" title="三级标题">
+              </Nav.Item>
+              <Nav.Item anchor="h-4" title="二级标题---3" />
+          </Nav>
+        </div>
+        <div className="col col-md-20">
+          <Content>{require('redeme.md')}</Content>
+        </div>
+      </div>
+    </NavProvider>
+  );
+}
+```
+
+## Props
+
+### `<Nav>`
+
+| Name            | Type `(Default)`               | Description                                                                                                            |
+| --------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| fixed           | boolean `(true)`               | 是否固定在屏幕的某一个位置？仅当为 `true` 时，`offset` 属性才会生效，为 `false` 时，导航菜单跟随文档流，也没有链接高亮 |
+| offset          | object `({left: 'auto', top: 60})` | 定位，属性为 `top`, `right`, `bottom`, `left`                                                                          |
+| width           | number `(250)`                 | 导航部分的宽。当 `fixed` 为 `true` 时，默认为 `250`， 为 `false` 时默认为 `100%`                                       |
+| scrollBar       | string `('right')`             | 导航栏边上的滚动条位置，`left` 或 `right`                                                                              |
+| minLevel        | number `(2)`                   | 最小导航级别，默认为 `2` 即 `h2`                                                                                       |
+| maxLevel        | number `(4)`                   | 最大导航级别，默认为 `4` 即 `h4`                                                                                       |
+| showOrderNumber | boolean `(true)`               | 是否显示标题前的序号                                                                                                   |
+| once            | boolean `(true)`               | 只解析一次文档？设为`true`则只会解析一次，文档发生变化时不会重新解析，性能较好。                                       |
+
+### `<Nav.Item>`
+
+| Name     | Type `(Default)` | Description      |
+| -------- | ---------------- | ---------------- |
+| anchor   | string           | 对应的锚点 id    |
+| title    | string           | 显示的标题       |
+| children | node             | 可选，子导航菜单 |
+
+## License
+
+MIT licensed

__tests__/createNavItemsSpec.js

@@ -1,6 +1,10 @@
 import React from 'react';
-import { shallow, mount, render } from 'enzyme';
-import createNavItems from '../src/util/createNavItems';
+import Enzyme, { shallow, mount, render } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import createNavItems from '../src/utils/createNavItems';
+
+Enzyme.configure({ adapter: new Adapter() });
+
 
 describe('createNavItems test', () => {
   it('list length is 0', () => {

__tests__/navItemSpec.js

@@ -1,6 +1,9 @@
 import React from 'react';
-import { shallow, mount, render } from 'enzyme';
-import NavItem from '../src/component/NavItem';
+import Enzyme, { shallow, mount, render } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import NavItem from '../src/NavItem';
+
+Enzyme.configure({ adapter: new Adapter() });
 
 describe('NavItem test', () => {
   const navItem = mount(
@@ -10,13 +13,11 @@ describe('NavItem test', () => {
       subItems={[]}
       index="1.1"
       level={2}
-    />, {
-      context: {
-        scrollBar: 'left',
-        activeAnchor: 'h-2-2',
-        showOrderNumber: true
-      }
-    }
+
+      scrollBar="left"
+      activeAnchor="h-2-2"
+      showOrderNumber
+    />
   );
 
   const link = navItem.find('.nav-link');
@@ -40,4 +41,4 @@ describe('NavItem test', () => {
   it('href', () => {
     expect(link.html()).toMatch(/href="#h-2-2"/);
   });
-});
+});