Upgrade react

examples/simple.js

@@ -1,9 +1,8 @@
-'use strict';
-
 // use jsx to render html, do not modify simple.html
 import 'rc-notification/assets/index.css';
 import Notification from 'rc-notification';
 import React from 'react';
+import ReactDOM from 'react-dom';
 var notification = Notification.newInstance({});
 
 function simpleFn() {
@@ -50,7 +49,7 @@ function manualClose() {
   })
 }
 
-React.render(<div>
+ReactDOM.render(<div>
   <div>
     <button onClick={simpleFn}>simple show</button>
     <button onClick={durationFn}>duration=0</button>

package.json

@@ -42,14 +42,16 @@
     "expect.js": "0.3.x",
     "precommit-hook": "1.x",
     "rc-server": "3.x",
-    "rc-tools": "3.x",
-    "react": "~0.13.2"
+    "rc-tools": "~4.2.6",
+    "react": "~0.14.0",
+    "react-addons-test-utils": "~0.14.1",
+    "react-dom": "~0.14.0"
   },
   "precommit": [
-    "precommit"
+    "lint"
   ],
   "dependencies": {
-    "rc-animate": "1.x",
+    "rc-animate": "~2.0.0",
     "rc-util": "2.x"
   }
 }

src/Notice.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {classSet} from 'rc-util';
+
+const Notice = React.createClass({
+  propTypes: {
+    duration: React.PropTypes.number,
+    onClose: React.PropTypes.func,
+    children: React.PropTypes.any,
+  },
+
+  getDefaultProps() {
+    return {
+      onEnd() {
+      },
+      duration: 1.5,
+      style: {
+        right: '50%',
+      },
+    };
+  },
+
+  componentDidMount() {
+    this.clearCloseTimer();
+    if (this.props.duration) {
+      this.closeTimer = setTimeout(()=> {
+        this.close();
+      }, this.props.duration * 1000);
+    }
+  },
+
+  componentDidUpdate() {
+    this.componentDidMount();
+  },
+
+  componentWillUnmount() {
+    this.clearCloseTimer();
+  },
+
+  clearCloseTimer() {
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = null;
+    }
+  },
+
+  close() {
+    this.clearCloseTimer();
+    this.props.onClose();
+  },
+
+  render() {
+    const props = this.props;
+    const componentClass = `${props.prefixCls}-notice`;
+    const className = {
+      [`${componentClass}`]: 1,
+      [`${componentClass}-closable`]: props.closable,
+      [props.className]: !!props.className,
+    };
+    return (
+      <div className={classSet(className)} style={props.style}>
+        <div className={`${componentClass}-content`}>{this.props.children}</div>
+        {props.closable ?
+          <a tabIndex="0" onClick={this.close} className={`${componentClass}-close`}>
+            <span className={`${componentClass}-close-x`}></span>
+          </a> : null
+        }
+      </div>
+    );
+  },
+});
+
+export default Notice;

src/Notification.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Animate from 'rc-animate';
+import {createChainedFunction, classSet} from 'rc-util';
+import Notice from './Notice';
+
+let seed = 0;
+const now = Date.now();
+
+function getUuid() {
+  return 'rcNotification_' + now + '_' + (seed++);
+}
+
+const Notification = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'rc-notification',
+      animation: 'fade',
+      style: {
+        'top': 65,
+        left: '50%',
+      },
+    };
+  },
+
+  getInitialState() {
+    return {
+      notices: [],
+    };
+  },
+
+  getTransitionName() {
+    const props = this.props;
+    let transitionName = props.transitionName;
+    if (!transitionName && props.animation) {
+      transitionName = `${props.prefixCls}-${props.animation}`;
+    }
+    return transitionName;
+  },
+
+  add(notice) {
+    const key = notice.key = notice.key || getUuid();
+    const notices = this.state.notices;
+    if (!notices.filter((v) => v.key === key).length) {
+      this.setState({
+        notices: notices.concat(notice),
+      });
+    }
+  },
+
+  remove(key) {
+    const notices = this.state.notices.filter((notice) => {
+      return notice.key !== key;
+    });
+    this.setState({
+      notices: notices,
+    });
+  },
+
+  render() {
+    const props = this.props;
+    const noticeNodes = this.state.notices.map((notice)=> {
+      const onClose = createChainedFunction(this.remove.bind(this, notice.key), notice.onClose);
+      return (<Notice prefixCls={props.prefixCls} {...notice} onClose={onClose}>{notice.content}</Notice>);
+    });
+    const className = {
+      [props.prefixCls]: 1,
+      [props.className]: !!props.className,
+    };
+    return (
+      <div className={classSet(className)} style={props.style}>
+        <Animate transitionName={this.getTransitionName()}>{noticeNodes}</Animate>
+      </div>
+    );
+  },
+});
+
+Notification.newInstance = function(properties) {
+  const props = properties || {};
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const notification = ReactDOM.render(<Notification {...props}/>, div);
+  return {
+    notice(noticeProps) {
+      notification.add(noticeProps);
+    },
+    removeNotice(key) {
+      notification.remove(key);
+    },
+    component: notification,
+    destroy() {
+      ReactDOM.unmountComponentAtNode(div);
+      document.body.removeChild(div);
+    },
+  };
+};
+
+export default Notification;

tests/index.spec.js

@@ -1,6 +1,6 @@
-var React = require('react');
 var Notification = require('../');
-var TestUtils = React.addons.TestUtils;
+var React = require('react');
+var TestUtils = require('react-addons-test-utils');
 var Simulate = TestUtils.Simulate;
 var expect = require('expect.js');
 require('../assets/index.css');