feat: support expand all demo code

site/common/styles/demo.less

@@ -1,3 +1,18 @@
+.code-box-expand-trigger {
+  cursor: pointer;
+  font-size: 14px;
+  color: #9199AC;
+  margin-left: 5px;
+  opacity: .8;
+  transition: all .3s ease;
+  top: -2px;
+  position: relative;
+
+  &-active {
+    color: #3B4357;
+  }
+}
+
 .code-box {
   border: 1px solid #E9E9E9;
   border-radius: 6px;
@@ -62,8 +77,7 @@
   .ant-collapse-header {
     height: auto!important;
     line-height: 1.8!important;
-    padding-top: 9px;
-    padding-bottom: 10px;
+    padding: 9px 15px 10px 32px;
   }
 }
 

site/component/ComponentDoc/index.jsx

@@ -1,29 +1,53 @@
 import React from 'react';
-import { Row, Col } from '../../../';
+import classNames from 'classnames';
+import { Row, Col, Icon } from '../../../';
 import Demo from '../Demo';
 import * as utils from '../utils';
 
 export default class ComponentDoc extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      expandAll: false,
+    };
+  }
+
+  handleExpandToggle() {
+    this.setState({
+      expandAll: !this.state.expandAll,
+    });
+  }
+
   render() {
     const { demos = [], doc } = this.props;
+    const expand = this.state.expandAll;
     const isSingleCol = doc.meta.cols === '1';
 
     const leftChildren = [];
     const rightChildren = [];
     demos.forEach((demoData, index) => {
       if (index % 2 === 0 || isSingleCol) {
-        leftChildren.push(<Demo {...demoData} key={index} />);
+        leftChildren.push(<Demo {...demoData} expand={expand} key={index} />);
       } else {
-        rightChildren.push(<Demo {...demoData} key={index} />);
+        rightChildren.push(<Demo {...demoData} expand={expand} key={index} />);
       }
     });
+    const expandTriggerClass = classNames({
+      'code-box-expand-trigger': true,
+      'code-box-expand-trigger-active': expand,
+    });
 
     return (
       <article>
         <section className="markdown">
           <h1>{doc.meta.title}</h1>
           { doc.description.map(utils.objectToComponent) }
-          <h2>代码演示</h2>
+          <h2>
+            代码演示
+            <Icon type="appstore" className={expandTriggerClass}
+              title="展开全部代码" onClick={this.handleExpandToggle.bind(this)} />
+          </h2>
         </section>
         <Row>
           <Col span={ isSingleCol ? '24' : '12' }>{ leftChildren }</Col>

site/component/Demo/index.jsx

@@ -4,8 +4,23 @@ import * as utils from '../utils';
 import hljs from 'highlight.js';
 
 export default class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeKey: '',
+    };
+  }
+
+  handleChange(activeKey) {
+    this.setState({
+      activeKey: this.state.activeKey === activeKey ?
+        '' : activeKey
+    });
+  }
+
   render() {
-    const { id, preview, title, intro, code } = this.props;
+    const { id, preview, title, intro, code, expand } = this.props;
     const introChildren = intro.map(utils.objectToComponent);
     const highlightedCode = hljs.highlight('javascript', code).value;
     return (
@@ -17,8 +32,9 @@ export default class Demo extends React.Component {
           <div className="code-box-title">
             <a>{ title }</a>
           </div>
-          <Collapse>
-            <Collapse.Panel header={introChildren}>
+          <Collapse activeKey={expand ? 'code' : this.state.activeKey}
+            onChange={this.handleChange.bind(this)}>
+            <Collapse.Panel key="code" header={introChildren}>
               <div className="highlight">
                 <pre>
                   <code className="javascript" dangerouslySetInnerHTML={{