update Markdown

Author: e1emeb0t

libs/markdown/canvas.js

@@ -38,23 +38,27 @@ export default class Canvas extends Component {
   }
 
   renderSource() {
-    const div = this.refs.source;
+    if (this.shouldUpdate) {
+      const div = this.refs.source;
 
-    if (div instanceof HTMLElement) {
-      const args = ['context', 'React'], argv = [this.props.context, React];
+      if (div instanceof HTMLElement) {
+        const args = ['context', 'React'], argv = [this.props.context, React];
 
-      const Element = require('../../src');
+        const Element = require('../../src');
 
-      for (const key in Element) {
-        args.push(key);
-        argv.push(Element[key]);
-      }
+        for (const key in Element) {
+          args.push(key);
+          argv.push(Element[key]);
+        }
 
-      args.push(this.component);
+        args.push(this.component);
 
-      ReactDOM.unmountComponentAtNode(div);
-      ReactDOM.render(new Function(...args).apply(null, argv), div);
+        ReactDOM.unmountComponentAtNode(div);
+        ReactDOM.render(new Function(...args).apply(null, argv), div);
+      }
     }
+
+    delete this.shouldUpdate;
   }
 
   render() {
@@ -70,10 +74,13 @@ export default class Canvas extends Component {
       code = `<div>${source[2]}</div>`
     }
 
-    this.component = transform(code.replace(/this/g, 'context'), {
+    const component = transform(code.replace(/this/g, 'context'), {
       presets: ['es2015', 'react']
     }).code.replace(/React.createElement/, 'return React.createElement');
 
+    this.shouldUpdate = component != this.component || this.component === undefined;
+    this.component = component;
+
     return (
       <div className={`demo-block demo-box demo-${name}`}>
         <div className="source" ref="source"></div>

libs/transition/index.js

@@ -9,7 +9,8 @@ export default class Transition extends Component {
       transitionLeaveTimeout: Number(this.props.duration),
       component: this.props.component,
       className: this.props.className,
-      style: this.props.style
+      style: this.props.style,
+      key: this.props.key
     }, React.Children.map(this.props.children, element => {
       return React.cloneElement(element, {
         key: Math.random().toString()

src/menu/SubMenu.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Component, PropTypes, View } from '../../libs';
+import { Component, PropTypes, Transition, View } from '../../libs';
 
 export default class SubMenu extends Component {
   constructor(props) {
@@ -72,7 +72,11 @@ export default class SubMenu extends Component {
             })}>
           </i>
         </div>
-        { this.opened() && <ul className="el-menu">{this.props.children}</ul> }
+        <Transition component="span" className="el-menu" style={{
+            display: this.opened() ? 'block' : 'none'
+          }} name={this.context.mode === 'horizontal' ? 'md-fade-bottom' : ''}>
+          <ul>{this.props.children}</ul>
+        </Transition>
       </li>
     )
   }