optimize pop render

.gitignore

@@ -21,4 +21,5 @@ node_modules
 .cache
 *.css
 build
-lib
+lib
+coverage

.travis.yml

@@ -16,6 +16,7 @@ before_install:
       echo "Only docs were updated, stopping build process."
       exit
     fi
+    npm install npm@3.x -g
     phantomjs --version
 script:
 - |
@@ -27,8 +28,8 @@ script:
 env:
   matrix:
   - TEST_TYPE=lint
-  - TEST_TYPE=browser-test
-  - TEST_TYPE=browser-test-cover
+  - TEST_TYPE=test
+  - TEST_TYPE=coverage
 
 
 matrix:

README.md

@@ -8,7 +8,6 @@ React Trigger Component
 [![build status][travis-image]][travis-url]
 [![Test coverage][coveralls-image]][coveralls-url]
 [![gemnasium deps][gemnasium-image]][gemnasium-url]
-[![node version][node-image]][node-url]
 [![npm download][download-image]][download-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-trigger.svg?style=flat-square
@@ -192,11 +191,18 @@ ReactDOM.render(<Trigger align={{
 
 ## Test Case
 
-http://localhost:8200/tests/runner.html?coverage
+```
+npm test
+npm run chrome-test
+```
 
 ## Coverage
 
-http://localhost:8200/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8200/tests/runner.html?coverage
+```
+npm run coverage
+```
+
+open coverage/ dir
 
 ## License
 

examples/nested.js

@@ -40,20 +40,22 @@ const Test = React.createClass({
           popupPlacement="right"
           action={['click']}
           builtinPlacements={builtinPlacements}
-          popup={<div style={{border: '1px solid red', padding: 10}}>i am a click popup</div>}>
+          popup={<div style={{ border: '1px solid red', padding: 10 }}>i am a click popup</div>}
+        >
           <Trigger
             popupPlacement="bottom"
             action={['hover']}
             builtinPlacements={builtinPlacements}
-            popup={<div style={{border: '1px solid red', padding: 10}}>i am a hover popup</div>}>
-            <span href="#" style={{margin: 20}}>trigger</span>
+            popup={<div style={{ border: '1px solid red', padding: 10 }}>i am a hover popup</div>}
+          >
+            <span href="#" style={{ margin: 20 }}>trigger</span>
           </Trigger>
         </Trigger>
       </div>
     );
   },
 });
 
-ReactDOM.render(<div>
+ReactDOM.render(<div style={{ margin: 200 }}>
   <Test />
 </div>, document.getElementById('__react-content'));

examples/simple.js

@@ -83,21 +83,21 @@ const Test = React.createClass({
       delete trigger[e.target.value];
     }
     this.setState({
-      trigger: trigger,
+      trigger,
     });
   },
 
   onOffsetXChange(e) {
     const targetValue = e.target.value;
     this.setState({
-      offsetX: targetValue ? targetValue : undefined,
+      offsetX: targetValue || undefined,
     });
   },
 
   onOffsetYChange(e) {
     const targetValue = e.target.value;
     this.setState({
-      offsetY: targetValue ? targetValue : undefined,
+      offsetY: targetValue || undefined,
     });
   },
 
@@ -109,7 +109,7 @@ const Test = React.createClass({
     const state = this.state;
     const trigger = state.trigger;
     return (<div >
-      <div style={{margin: '10px 20px'}}>
+      <div style={{ margin: '10px 20px' }}>
         <label>
           placement:
           <select value={state.placement} onChange={this.onPlacementChange}>
@@ -125,8 +125,12 @@ const Test = React.createClass({
         </label>
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>
-          <input value="rc-trigger-popup-zoom" type="checkbox" onChange={this.onTransitionChange}
-                 checked={state.transitionName === 'rc-trigger-popup-zoom'}/>
+          <input
+            value="rc-trigger-popup-zoom"
+            type="checkbox"
+            onChange={this.onTransitionChange}
+            checked={state.transitionName === 'rc-trigger-popup-zoom'}
+          />
           transitionName
         </label>
 
@@ -135,29 +139,52 @@ const Test = React.createClass({
         trigger:
 
         <label>
-          <input value="hover" checked={trigger.hover} type="checkbox" onChange={this.onTriggerChange}/>
+          <input
+            value="hover"
+            checked={trigger.hover}
+            type="checkbox"
+            onChange={this.onTriggerChange}
+          />
           hover
         </label>
         <label>
-          <input value="focus" checked={trigger.focus} type="checkbox" onChange={this.onTriggerChange}/>
+          <input
+            value="focus"
+            checked={trigger.focus}
+            type="checkbox"
+            onChange={this.onTriggerChange}
+          />
           focus
         </label>
         <label>
-          <input value="click" checked={trigger.click} type="checkbox" onChange={this.onTriggerChange}/>
+          <input
+            value="click"
+            checked={trigger.click}
+            type="checkbox"
+            onChange={this.onTriggerChange}
+          />
           click
         </label>
         <br/>
         <label>
           offsetX:
-          <input type="text" onChange={this.onOffsetXChange} style={{width: 50}}/>
+          <input
+            type="text"
+            onChange={this.onOffsetXChange}
+            style={{ width: 50 }}
+          />
         </label>
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>
           offsetY:
-          <input type="text" onChange={this.onOffsetYChange} style={{width: 50}}/>
+          <input
+            type="text"
+            onChange={this.onOffsetYChange}
+            style={{ width: 50 }}
+          />
         </label>
       </div>
-      <div style={{margin: 100, position: 'relative'}}>
+      <div style={{ margin: 100, position: 'relative' }}>
         <Trigger
           getPopupContainer={null && getPopupContainer}
           popupAlign={getPopupAlign(state)}
@@ -167,15 +194,17 @@ const Test = React.createClass({
           mouseLeaveDelay={0.1}
           action={Object.keys(state.trigger)}
           builtinPlacements={builtinPlacements}
-          popup={<div style={{border: '1px solid red', padding: 10}}>i am a popup</div>}
-          popupTransitionName={state.transitionName}>
-          <a href="#" style={{margin: 20}} onClick={preventDefault}>trigger</a>
+          popup={<div style={{ border: '1px solid red', padding: 10 }}>i am a popup</div>}
+          popupTransitionName={state.transitionName}
+        >
+          <a href="#" style={{ margin: 20 }} onClick={preventDefault}>trigger</a>
         </Trigger>
       </div>
     </div>);
   },
 });
 
-ReactDOM.render(<div>
-  <Test />
-</div>, document.getElementById('__react-content'));
+ReactDOM.render(
+  <div>
+    <Test />
+  </div>, document.getElementById('__react-content'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-trigger",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "base abstract trigger component for react",
   "keywords": [
     "react",
@@ -29,22 +29,22 @@
   "scripts": {
     "build": "rc-tools run build",
     "gh-pages": "rc-tools run gh-pages",
-    "start": "rc-server",
+    "start": "rc-tools run server",
     "pub": "rc-tools run pub",
     "lint": "rc-tools run lint",
     "karma": "rc-tools run karma",
     "saucelabs": "rc-tools run saucelabs",
-    "browser-test": "rc-tools run browser-test",
-    "browser-test-cover": "rc-tools run browser-test-cover"
+    "test": "rc-tools run test",
+    "chrome-test": "rc-tools run chrome-test",
+    "coverage": "rc-tools run coverage"
   },
   "devDependencies": {
     "async": "~1.5.0",
     "expect.js": "0.3.x",
     "jquery": "~1.11.3",
     "object-assign": "~4.0.1",
     "pre-commit": "1.x",
-    "rc-server": "3.x",
-    "rc-tools": "4.x",
+    "rc-tools": "5.x",
     "react": "^0.14.0",
     "react-addons-test-utils": "^0.14.0",
     "react-dom": "^0.14.0"

src/LazyRenderBox.js

@@ -0,0 +1,18 @@
+import React, { PropTypes } from 'react';
+
+const LazyRenderBox = React.createClass({
+  propTypes: {
+    children: PropTypes.any,
+    visible: PropTypes.bool,
+  },
+  shouldComponentUpdate(nextProps) {
+    return nextProps.visible;
+  },
+  render() {
+    return (<div>
+      {this.props.children}
+    </div>);
+  },
+});
+
+export default LazyRenderBox;

src/Popup.jsx

@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import Align from 'rc-align';
 import Animate from 'rc-animate';
@@ -11,7 +11,10 @@ const Popup = React.createClass({
     style: PropTypes.object,
     getClassNameFromAlign: PropTypes.func,
     onMouseEnter: PropTypes.func,
+    align: PropTypes.any,
+    destroyPopupOnHide: PropTypes.bool,
     className: PropTypes.string,
+    prefixCls: PropTypes.string,
     onMouseLeave: PropTypes.func,
   },
 
@@ -47,61 +50,68 @@ const Popup = React.createClass({
   },
 
   getClassName(currentAlignClassName) {
-    const props = this.props;
-    const {prefixCls} = props;
-    let className = prefixCls + ' ' + props.className + ' ';
-    className += currentAlignClassName;
-    return className;
+    return `${this.props.prefixCls} ${this.props.className} ${currentAlignClassName}`;
   },
 
   render() {
     const props = this.props;
-    const {align, style, visible, prefixCls, destroyPopupOnHide} = props;
-    const className = this.getClassName(this.currentAlignClassName || props.getClassNameFromAlign(align));
+    const { align, style, visible, prefixCls, destroyPopupOnHide } = props;
+    const className = this.getClassName(this.currentAlignClassName ||
+      props.getClassNameFromAlign(align));
     const hiddenClassName = `${prefixCls}-hidden`;
     if (!visible) {
       this.currentAlignClassName = null;
     }
     if (destroyPopupOnHide) {
-      return (<Animate component=""
-                       exclusive
-                       transitionAppear
-                       transitionName={this.getTransitionName()}>
-        {visible ? (<Align target={this.getTarget}
-                         key="popup"
-                         monitorWindowResize
-                         align={align}
-                         onAlign={this.onAlign}>
-          <PopupInner className={className}
-                      visible
-                      onMouseEnter={props.onMouseEnter}
-                      onMouseLeave={props.onMouseLeave}
-                      style={style}>
+      return (<Animate
+        component=""
+        exclusive
+        transitionAppear
+        transitionName={this.getTransitionName()}
+      >
+        {visible ? (<Align
+          target={this.getTarget}
+          key="popup"
+          monitorWindowResize
+          align={align}
+          onAlign={this.onAlign}
+        >
+          <PopupInner
+            className={className}
+            visible
+            onMouseEnter={props.onMouseEnter}
+            onMouseLeave={props.onMouseLeave}
+            style={style}
+          >
             {props.children}
           </PopupInner>
         </Align>) : null}
       </Animate>);
     }
-    return (<Animate component=""
-                     exclusive
-                     transitionAppear
-                     transitionName={this.getTransitionName()}
-                     showProp="xVisible">
-      <Align target={this.getTarget}
-             key="popup"
-             monitorWindowResize
-             xVisible={visible}
-             childrenProps={{
-               visible: 'xVisible',
-             }}
-             disabled={!visible}
-             align={align}
-             onAlign={this.onAlign}>
-        <PopupInner className={className}
-                    hiddenClassName={hiddenClassName}
-                    onMouseEnter={props.onMouseEnter}
-                    onMouseLeave={props.onMouseLeave}
-                    style={style}>
+    return (<Animate
+      component=""
+      exclusive
+      transitionAppear
+      transitionName={this.getTransitionName()}
+      showProp="xVisible"
+    >
+      <Align
+        target={this.getTarget}
+        key="popup"
+        monitorWindowResize
+        xVisible={visible}
+        childrenProps={{ visible: 'xVisible' }}
+        disabled={!visible}
+        align={align}
+        onAlign={this.onAlign}
+      >
+        <PopupInner
+          className={className}
+          hiddenClassName={hiddenClassName}
+          onMouseEnter={props.onMouseEnter}
+          onMouseLeave={props.onMouseLeave}
+          style={style}
+        >
           {props.children}
         </PopupInner>
       </Align>