From 6c2115c8a8f41a339bb4604d327261fcd901eb4c Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Fri, 25 Mar 2016 15:03:53 +0800
Subject: [PATCH] site: update code preview, except animation

---
 site/common/styles/demo.less  | 38 ++++-------------
 site/component/Demo/index.jsx | 79 ++++++++++++++++++++++-------------
 2 files changed, 57 insertions(+), 60 deletions(-)

diff --git a/site/common/styles/demo.less b/site/common/styles/demo.less
index 4c76d8dc2a..d10e2d0ba3 100644
--- a/site/common/styles/demo.less
+++ b/site/common/styles/demo.less
@@ -76,49 +76,25 @@
 
 .code-box-meta {
   position: relative;
+  padding: 10px 15px;
   border-radius: 0 0 6px 6px;
   transition: background-color 0.4s ease;
   width: 100%;
-  font-size: 12px;
+}
 
-  .ant-collapse,
-  .ant-collapse-content,
-  .ant-collapse-content-box {
-    background-color: transparent;
-    border: 0;
-    padding: 0;
-  }
-
-  .ant-collapse-item > .ant-collapse-header {
-    height: auto;
-    line-height: 1.8;
-    padding: 9px 15px 10px 32px;
-  }
-
-  h4,
-  p {
-    margin: 0;
-  }
-
-  > p {
-    font-size: 12px;
-    margin: .5em 0;
-    padding-right: 25px;
-    width: 100%;
-    word-wrap: break-word;
-  }
+.code-box-meta h4,
+.code-box-meta p {
+  margin: 0;
 }
 
 .code-box-title {
   position: absolute;
   top: -14px;
-  left: 14px;
   padding: 1px 1.1em;
   color: #777;
   border-radius: 6px;
   background: #fff;
   transition: all 0.4s ease;
-  font-size: 14px;
 }
 
 .code-box-title:before {
@@ -129,7 +105,7 @@
   line-height: 22px;
   position: relative;
   margin-right: 8px;
-  top: -1px;
+  top: -2px;
   color: #ccc;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
@@ -155,6 +131,7 @@
   line-height: 18px;
   opacity: 0.5;
   text-align: center;
+  -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
   transition: all 0.3s ease;
   color: #999;
@@ -173,6 +150,7 @@
 
 .code-box .highlight {
   overflow: hidden;
+  padding: 5px;
   border-top: 1px dashed #e9e9e9;
 }
 
diff --git a/site/component/Demo/index.jsx b/site/component/Demo/index.jsx
index 5e55b27518..df62c09070 100644
--- a/site/component/Demo/index.jsx
+++ b/site/component/Demo/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router';
-import { Collapse } from '../../../';
+import classNames from 'classnames';
+import Animate from 'rc-animate';
 import * as utils from '../utils';
 
 export default class Demo extends React.Component {
@@ -8,24 +9,35 @@ export default class Demo extends React.Component {
     super(props);
 
     this.state = {
-      activeKey: '',
+      codeExpand: false,
     };
   }
 
-  handleChange(activeKey) {
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.expand === undefined) return;
+
     this.setState({
-      activeKey: this.state.activeKey === activeKey ?
-        '' : activeKey
+      codeExpand: nextProps.expand,
     });
   }
 
+  handleCodeExapnd() {
+    this.setState({ codeExpand: !this.state.codeExpand });
+  }
+
   render() {
     const { id, className, meta, intro, preview, style, src,
-            highlightedCode, highlightedStyle, expand, pathname } = this.props;
+            highlightedCode, highlightedStyle, pathname } = this.props;
+    const codeExpand = this.state.codeExpand;
+    const codeBoxClass = classNames({
+      'code-box': true,
+      [className]: className,
+      expand: codeExpand,
+    });
     const introChildren = intro.map(utils.objectToComponent.bind(null, pathname));
 
     return (
-      <section className={`code-box ${className}`} id={id}>
+      <section className={codeBoxClass} id={id}>
         <section className="code-box-demo">
           {
             meta.iframe === 'true' ?
@@ -44,30 +56,37 @@ export default class Demo extends React.Component {
               { meta.chinese || meta.english }
             </Link>
           </div>
-          <Collapse activeKey={expand ? `${id}-code` : this.state.activeKey}
-            onChange={this.handleChange.bind(this)}>
-            <Collapse.Panel key={`${id}-code`} header={introChildren}>
-              <div className="highlight">
-                <pre>
-                  <code className="javascript" dangerouslySetInnerHTML={{
-                    __html: highlightedCode,
-                  }} />
-                </pre>
-              </div>
-              {
-                !!style ?
-                  <div className="highlight">
-                    <pre>
-                      <code className="css" dangerouslySetInnerHTML={{
-                        __html: highlightedStyle,
-                      }} />
-                    </pre>
-                  </div> :
-                  null
-              }
-            </Collapse.Panel>
-          </Collapse>
+          { introChildren }
+          <span className="collapse anticon anticon-circle-o-right"
+            onClick={this.handleCodeExapnd.bind(this)}
+            unselectable="none" />
         </section>
+        <Animate
+          transitionEnter transitionLeave>
+          {
+            codeExpand ?
+              <section key="code">
+                <div className="highlight">
+                  <pre>
+                    <code className="javascript" dangerouslySetInnerHTML={{
+                      __html: highlightedCode,
+                    }} />
+                  </pre>
+                </div>
+                {
+                  style ?
+                    <div key="style" className="highlight">
+                      <pre>
+                        <code className="css" dangerouslySetInnerHTML={{
+                          __html: highlightedStyle,
+                        }} />
+                      </pre>
+                    </div> :
+                    null
+                }
+              </section> : <div key="nothing" />
+          }
+        </Animate>
       </section>
     );
   }