doc features, redo tab, demo fixs

n7best · n7best · commit 117119387544 · 2016-12-07T21:08:02.000Z
diff --git a/docs/docs.json b/docs/docs.json
@@ -11,7 +11,8 @@
         "version": "0.4.0",
         "icon": "http://weui.github.io/weui/images/icon_nav_actionSheet.png",
         "preview" : "ActionSheet",
-        "component" : "actionsheet/actionsheet"
+        "component" : "actionsheet/actionsheet",
+        "guide" : "actionsheet.md"
       },
       {
         "name": "Button",
diff --git a/docs/guide/actionsheet.md b/docs/guide/actionsheet.md
@@ -0,0 +1,27 @@
+
+Guide
+-------------
+
+####  Visibility
+To use `ActionSheet`, you want to first setup a state variable to toggle it's visibility for `show` property and a callback function `onRequestClose` property when users wants to  hide the `ActionSheet`.
+
+```javascript
+//inside your component state
+state = {
+	show: false
+}
+
+//button to toggle the ActionSheet
+<Button
+    onClick={ e => this.setState({ show: true }) }
+/>
+
+//inside the render function
+<ActionSheet
+	show={ this.state.show }
+	onRequestClose={
+	    //function to hide ActionSheet
+		e => this.setState({ show: false })
+	}
+/>
+```
diff --git a/docs/langs.json b/docs/langs.json
@@ -10,8 +10,9 @@
             "article" : {
                 "detail": "Detail",
                 "code": "Code",
-                "srcCode": "Source Code",
-                "loading": "Loading..."
+                "srcCode": "Sample Code",
+                "loading": "Loading...",
+                "guide": "Guide"
             },
             "nopreview" : {
                 "nopreview": "No Preview"
@@ -30,7 +31,8 @@
                 "detail": "具体",
                 "code": "代码",
                 "srcCode": "源码",
-                "loading": "读取中..."
+                "loading": "读取中...",
+                "guide": "教程"
             },
             "nopreview" : {
                 "nopreview": "没有预览"
diff --git a/docs/pages/articles.js b/docs/pages/articles.js
@@ -2,17 +2,18 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Remarkable from 'react-remarkable';
 import { Article, Toast, Tab, NavBarItem } from '../../src';
-import generateMarkdown from './generateMarkdown';
 import CodeMirror from 'codemirror/lib/codemirror.js';
+import hljs from 'highlight.js'
+
+//bunch of css
+import 'highlight.js/styles/github.css';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/monokai.css';
 import 'codemirror/mode/jsx/jsx';
 import 'codemirror/addon/display/autorefresh';
 import 'github-markdown-css';
 import './home.less';
 
-const reactDocs = require('react-docgen');
-
 class Articles extends Component {
     static defaultProps = {
         langs: {
@@ -22,56 +23,72 @@ class Articles extends Component {
         }
     };
 
-    constructor(props){
-        super(props);
-        this.state = {
-            loading: true,
-            content: null
+    componentDidMount(){
+
+        if(this.props.code){
+            let el = ReactDOM.findDOMNode(this.refs.codeblock);
+
+            this.editor = CodeMirror.fromTextArea(el, {
+                mode: 'jsx',
+                lineNumbers: false,
+                lineWrapping: true,
+                smartIndent: false, // javascript mode does bad things with jsx indents
+                matchBrackets: true,
+                readOnly: true,
+                autoRefresh: true,
+                theme: 'monokai'
+            });
         }
-    }
 
-    componentDidMount(){
-        let el = ReactDOM.findDOMNode(this.refs.codeblock);
-        this.editor = CodeMirror.fromTextArea(el, {
-            mode: 'jsx',
-            lineNumbers: false,
-            lineWrapping: true,
-            smartIndent: false, // javascript mode does bad things with jsx indents
-            matchBrackets: true,
-            readOnly: true,
-            autoRefresh: true,
-            theme: 'monokai'
-        });
-        this.componentWillReceiveProps(this.props)
     }
 
     componentDidUpdate(){
-        this.editor.setValue(this.props.code)
-    }
 
-    componentWillReceiveProps(nextProps){
-        this.setState({loading: true, content: null});
-        let article = this.props.docs[nextProps.params.id].items[nextProps.params.aid]
 
-        let src = require(`!!raw!../../src/components/${article.component}`)
-        let content = generateMarkdown(article.name, article.version, reactDocs.parse(src));
-        //article.doc
-        this.setState({loading: false, content});
+        if(this.props.guide){
+            let $guide = ReactDOM.findDOMNode(this.refs.guide);
+            let $codes = $guide.querySelectorAll('pre code')
+
+            Array.from($codes).forEach( $code => {
+                 hljs.highlightBlock($code);
+            })
+
+        }
+
+
+        if(!this.editor){
+            let el = ReactDOM.findDOMNode(this.refs.codeblock);
+
+            this.editor = CodeMirror.fromTextArea(el, {
+                mode: 'jsx',
+                lineNumbers: false,
+                lineWrapping: true,
+                smartIndent: false, // javascript mode does bad things with jsx indents
+                matchBrackets: true,
+                readOnly: true,
+                autoRefresh: true,
+                theme: 'monokai'
+            });
+        }
+
+        if(this.props.code) this.editor.setValue(this.props.code)
+
+
     }
 
     render(){
-        const { code, langs } = this.props;
+        const { code, langs, guide, content } = this.props;
+
         return (
           <Tab type="navbar">
-                <NavBarItem label={langs.detail}>
+                <NavBarItem label={langs.detail} >
                     <Article>
-                    {
-                        this.state.loading ?
-                        <Toast icon="loading" show={true}>{langs.loading}.</Toast> :
                         <div className="markdown-body">
-                            <Remarkable source={this.state.content} />
+                            <Remarkable source={content} />
+                            {
+                                guide ? <Remarkable ref="guide" source={guide} /> : false
+                            }
                         </div>
-                    }
                     </Article>
                 </NavBarItem>
                 { code ?
@@ -86,4 +103,3 @@ class Articles extends Component {
 }
 
 export default Articles;
-//<SyntaxHighlighter language='javascript' style={SyntaxStyle}>{code.replace('../../../src/index','react-weui')}</SyntaxHighlighter>
diff --git a/docs/pages/docs.js b/docs/pages/docs.js
@@ -4,6 +4,8 @@ import ReactDOM from 'react-dom';
 import SplitPane from 'react-split-pane';
 import Preview from "../components/preview";
 import NoPreview from './nopreview';
+import generateMarkdown from './generateMarkdown';
+const reactDocs = require('react-docgen');
 import WeUI from '../../src';
 import iconSrc from '../logo.svg';
 import Demos from '../../example';
@@ -29,6 +31,8 @@ class Docs extends Component {
       }
 
     }
+    let src = article.component ? require(`!!raw!../../src/components/${article.component}`) : false
+    let content = src ? generateMarkdown(article.name, article.version, reactDocs.parse(src)) : false
 
     return (
       <SplitPane split="vertical" minSize={20} defaultSize="60%" primary="second">
@@ -45,6 +49,8 @@ class Docs extends Component {
               docs: this.props.docs,
               aid: this.props.params.aid,
               langs: this.props.langs.article,
+              guide: article.guide ? require(`!!raw!../guide/${article.guide}`) : false,
+              content,
               code
             })}
           </div>
diff --git a/example/pages/input/index.js b/example/pages/input/index.js
@@ -229,7 +229,7 @@ export default class inputDemo extends React.Component {
                 </Button>
             </ButtonArea>
 
-            <Toptips warn
+            <Toptips type="warn"
                 show={this.state.showToptips}
             >
                 Oops, something is wrong!
diff --git a/example/pages/toptips/index.js b/example/pages/toptips/index.js
@@ -26,9 +26,9 @@ class ToptipsDemo extends React.Component {
                 <Button onClick={this.showSuccess.bind(this)} type="default">Primary Toptip</Button>
                 <Button onClick={this.showInfo.bind(this)} type="default">Info Toptip</Button>
 
-                <Toptips warn show={this.state.showWarn}> Oops, something is wrong! </Toptips>
-                <Toptips primary show={this.state.showSuccess}> Success submited! </Toptips>
-                <Toptips info show={this.state.showInfo}> Thanks for coming! </Toptips>
+                <Toptips type="warn" show={this.state.showWarn}> Oops, something is wrong! </Toptips>
+                <Toptips type="primary" show={this.state.showSuccess}> Success submited! </Toptips>
+                <Toptips type="info" show={this.state.showInfo}> Thanks for coming! </Toptips>
             </Page>
         );
     }
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "fastclick": "^1.0.6",
     "file-loader": "^0.8.5",
     "github-markdown-css": "^2.4.1",
+    "highlight.js": "^9.8.0",
     "history": "^1.17.0",
     "html-webpack-plugin": "^2.14.0",
     "ignore-styles": "^5.0.1",
diff --git a/src/components/tab/tab.js b/src/components/tab/tab.js
diff --git a/test/tab.js b/test/tab.js

Original file line number	Diff line number	Diff line change
`@@ -229,7 +229,7 @@ export default class inputDemo extends React.Component {`
`229`	`229`	`</Button>`
`230`	`230`	`</ButtonArea>`
`231`	`231`
`232`		`- <Toptips warn`
	`232`	`+ <Toptips type="warn"`
`233`	`233`	`show={this.state.showToptips}`
`234`	`234`	`>`
`235`	`235`	`Oops, something is wrong!`